/* =========================================================================
   contact-plaque.css : la page contact officielle (/contact-us, /fr/nous-joindre)
   =========================================================================
   Reprise le 2026-09-23 des deux feuilles du proto « La plaque »
   (/proto/contact-plaque-084847-7f2f, css/commun.css puis css/plaque.css), a la
   demande de Clement Lefebvre : ce proto est devenu la page contact. Le proto
   garde ses propres copies ; celle-ci vit avec la page, et c'est elle qu'on
   retouche. Les ajouts propres a la page officielle sont en fin de fichier.
   ========================================================================= */

/* =========================================================================
   Atlantis Strength, versions de la page contact : le vocabulaire COMMUN.
   Namespace .ce-*. Chaque version ajoute sa propre feuille par-dessus.
   Industriel : noir et blanc, rouge #C22032 en accent seulement.
   Antonio (display), Archivo (sans), JetBrains Mono (mono).

   Tout ce qui est ici a deja ete paye une fois : le re-epinglage des alias de
   couleur, le contraste des libelles, la marge d'ancre sous l'entete collante,
   le remplissage du pied sous la barre, et les compagnons [hidden].
   ========================================================================= */

/* Le corps porte data-theme="dark" pour que l'entete et le pied partages
   rendent juste. tokens.css bascule alors les alias semantiques en sombre :
   on les re-epingle en clair sur la racine de la page, sinon une section
   claire se retrouve noire, ou pire, blanc sur blanc. L'echelle brute
   --atl-ink-* n'est PAS retournee, c'est pourquoi on part d'elle. */
.ce {
  --bg: var(--atl-ink-0);
  --bg-alt: var(--atl-ink-50);
  --surface: var(--atl-ink-0);
  --fg: var(--atl-ink-1000);
  --fg-2: var(--atl-ink-700);
  --fg-3: var(--atl-ink-500);
  --rule-2: var(--atl-ink-200);
  --rule-3: var(--atl-ink-150);

  --ce-red: var(--atl-red, #C22032);
  --ce-red-dk: #a91b2c;
  --ce-red-soft: #E84658;
  --ce-ink: var(--atl-ink-1000, #000);
  --ce-ink-2: var(--atl-ink-700, #232327);
  --ce-ink-3: var(--atl-ink-500, #55555B);
  --ce-line: var(--atl-ink-200, #D2D2D5);
  --ce-line-2: var(--atl-ink-150, #E4E4E6);
  --ce-pale: var(--atl-ink-50, #F6F6F7);

  background: var(--bg);
  color: var(--fg);
}

.ce *,
.ce *::before,
.ce *::after { box-sizing: border-box; }

.ce-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------ typographie */
.ce-eyebrow {
  font: 600 12px/1.2 var(--font-sans, Archivo, system-ui, sans-serif);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ce-red); margin: 0 0 14px;
}
.ce-h1 {
  font: 400 clamp(38px, 6vw, 76px)/0.98 var(--font-display, Antonio, Impact, sans-serif);
  text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 18px;
}
.ce-h2 {
  font: 400 clamp(26px, 3.4vw, 44px)/1.03 var(--font-display, Antonio, Impact, sans-serif);
  text-transform: uppercase; margin: 0 0 10px;
}
.ce-h3 { font: 700 17px/1.25 var(--font-sans, Archivo, system-ui, sans-serif); margin: 0 0 4px; }
.ce-lede { font-size: 18px; line-height: 1.55; color: var(--ce-ink-2); margin: 0 0 26px; max-width: 62ch; }
.ce-note { font-size: 13px; line-height: 1.5; color: var(--ce-ink-3); margin: 10px 0 0; }
.ce-mono { font: 500 12px/1.4 var(--font-mono, "JetBrains Mono", ui-monospace, monospace); letter-spacing: .02em; }

/* -------------------------------------------------- liens de contact, avatar */
.ce-liens { display: grid; gap: 8px; margin-top: auto; }
.ce-lien {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; text-decoration: none; border: 1px solid var(--ce-line);
  color: var(--fg); font: 600 13.5px/1.2 var(--font-sans, Archivo, sans-serif);
}
.ce-lien span:last-child { font: 500 12.5px/1.2 var(--font-mono, "JetBrains Mono", monospace); color: var(--ce-ink-3); }
/* Le courriel sans libelle (2026-10-16) : l'adresse seule, a gauche, dans
   l'encre du texte puisqu'elle est tout le bouton. */
.ce-lien--courriel { justify-content: flex-start; }
.ce-lien--courriel span:last-child { color: var(--fg); }
.ce-lien:hover, .ce-lien:focus-visible { border-color: var(--ce-ink); }
.ce-lien--rdv { background: var(--ce-ink); border-color: var(--ce-ink); color: #fff; }
.ce-lien--rdv span:last-child { color: rgba(255,255,255,.8); }
.ce-lien--rdv:hover, .ce-lien--rdv:focus-visible { background: var(--ce-red); border-color: var(--ce-red); }

.ce-avatar {
  flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--ce-ink); color: #fff;
  font: 400 32px/1 var(--font-display, Antonio, Impact, sans-serif); letter-spacing: .04em;
}
.ce-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Les libelles de donnees : --atl-ink-400 ne donnait que 4,27:1 sur blanc a
   12,5 px, sous le seuil AA de 4,5:1. Le palier 500 donne 7,40:1, mesure. */
.ce-faits { display: grid; gap: 6px; margin: 0; font-size: 13.5px; color: var(--ce-ink-2); }
.ce-faits div { display: flex; gap: 8px; }
.ce-faits dt { flex: 0 0 84px; color: var(--atl-ink-500); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; }
.ce-faits dd { margin: 0; min-width: 0; }
.ce-marque {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--font-sans, Archivo, sans-serif); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ce-red);
}

/* ------------------------------------------------------------- le formulaire */
.ce-form { padding: clamp(34px, 5vw, 64px) 0; background: var(--ce-pale); }
.ce-form__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.ce-form__box { background: var(--surface); border: 1px solid var(--ce-line); padding: clamp(18px, 2.4vw, 28px); }
.ce-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ce-champ { display: flex; flex-direction: column; gap: 6px; }
.ce-champ[hidden] { display: none !important; }
.ce-champ--pleine { grid-column: 1 / -1; }
.ce-champ label { font: 600 12.5px/1.2 var(--font-sans, Archivo, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--ce-ink-3); }
.ce-champ input, .ce-champ select, .ce-champ textarea {
  font: 400 15px/1.4 var(--font-sans, Archivo, system-ui, sans-serif);
  padding: 11px 12px; border: 1px solid var(--ce-line); background: #fff; color: var(--fg); width: 100%;
}
.ce-champ input:focus, .ce-champ select:focus, .ce-champ textarea:focus { outline: 2px solid var(--ce-ink); outline-offset: 1px; }
.ce-champ textarea { min-height: 128px; resize: vertical; }
.ce-consent { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ce-ink-2); }
.ce-consent input { margin-top: 3px; }
.ce-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ce-ok, .ce-err { grid-column: 1 / -1; font-size: 14px; padding: 10px 12px; }
.ce-ok { background: #e7f4ec; color: #14682f; }
.ce-err { background: #fdeef0; color: #8f1524; }
/* Posees a cote des regles d'affichage : sinon l'attribut ne cache rien. */
.ce-ok[hidden], .ce-err[hidden] { display: none !important; }
.ce-pourquoi { display: grid; gap: 16px; padding: 0; }
.ce-pourquoi li { list-style: none; padding-left: 16px; border-left: 2px solid var(--ce-red); font-size: 15px; color: var(--ce-ink-2); }
.ce-note[hidden] { display: none !important; }

/* --------------------------------------------------------- bande d'equipe */
.ce-bande { position: relative; margin: 0; }
.ce-bande img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; display: block; }
.ce-bande figcaption {
  position: absolute; inset: auto 0 0 0; padding: 14px 24px; color: #fff; font-size: 13px;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
}

/* ------------------------------------------- barre collante, telephone seul */
.ce-barre {
  position: fixed; inset: auto 0 0 0; z-index: 60; display: none;
  grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ce-line);
}
.ce-barre a {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px;
  background: #fff; color: var(--fg); text-decoration: none;
  font: 600 12px/1.2 var(--font-sans, Archivo, sans-serif);
}
.ce-barre a:first-child { color: #fff; background: var(--ce-red); }
.ce-barre span:last-child { font-size: 10.5px; color: var(--ce-ink-3); }
.ce-barre a:first-child span:last-child { color: rgba(255,255,255,.85); }

/* --------------------------------------------------------------- le ruban */
.ce-proto { background: #1b1b1e; color: #fff; font-size: 13px; padding: 10px 0; }
.ce-proto b { color: #ffd7dc; }

/* L'entete du site est COLLANTE et haute de 134 px (104 px au telephone).
   Sans cette marge, un lien d'ancre depose la cible DERRIERE elle et le
   visiteur croit que son clic a echoue. */
#ce-parler, #contact-form { scroll-margin-top: 150px; }

/* La colonne de gauche du formulaire (2026-10-08) : elle colle sous l'entete
   (134 px) pendant qu'on remplit le long formulaire de HubSpot, et finit
   alignee sur son bas. La photo garde la colonne dans l'ecran : sa hauteur
   suit celle de la fenetre, recadree au besoin (object-fit). */
.ce-form__grid > div:first-child { position: sticky; top: 150px; }
.ce-form__photo { position: relative; margin: 32px 0 0; }
.ce-form__photo img {
  display: block; width: 100%; height: calc(100vh - 470px); min-height: 320px; max-height: 720px;
  object-fit: cover; object-position: 50% 40%;
}
.ce-form__legende {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #fff;
  font: 600 12px/1.4 var(--font-sans, Archivo, sans-serif); letter-spacing: .08em; text-transform: uppercase;
}

@media (max-width: 1000px) {
  .ce-form__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ce-form__grid > div:first-child { position: static; }
  .ce-form__photo { display: none; }
}
@media (max-width: 720px) {
  .ce-champs { grid-template-columns: minmax(0, 1fr); }
  .ce-barre { display: grid; }
  .ce-form { padding-bottom: 86px; }
  /* « footer » tout court NE MARCHE PAS : le pied est <footer class="footer">
     et le site le remplit par cette CLASSE. Un selecteur de classe (0-1-0)
     bat un selecteur de type (0-0-1) quel que soit l'ordre des feuilles, et
     sans cela la barre collante couvre ses quatre icones sociales. */
  footer.footer { padding-bottom: 86px; }
}
@media (max-width: 700px) {
  #ce-parler, #contact-form { scroll-margin-top: 104px; }
}

/* =========================================================================
   Contact, « La plaque ». Feuille propre a cette version.
   -------------------------------------------------------------------------
   L'IDEE VISUELLE D'ORIGINE (2026-09-23, avant les vraies photos ; la zone
   de l'equipe est devenue une grille de cartes a grand portrait le
   2026-10-08, voir la section 3) : une plaque carree par personne, gravee,
   pas un portrait rond. Un rond gris avec deux initiales s'excuse de ne pas
   etre une photo ; un carre grave ne s'excuse pas, et le jour ou une vraie
   photo arrive dans data/equipe.json elle remplit exactement ce carre. Les
   champs techniques (numero, langues, delai) sont en chasse fixe : ce sont
   des donnees de plaque, pas de la prose.

   LA COULEUR : CETTE PAGE SUIT LE JOUR ET LA NUIT, LES SIX AUTRES NON.
   commun.css epingle les alias semantiques en CLAIR sur .ce, parce que les
   six premieres versions ont ete fabriquees avant la bascule et affichaient
   du contenu clair sous une barre haute sombre, sans bouton pour en sortir.
   Celle-ci porte la bascule (voir cv_tete dans tools/lib-contact.php) : elle
   doit donc suivre le mode comme n'importe quelle page du site. On rend les
   alias a la page avec « unset », qui pour une propriete personnalisee veut
   dire « herite du corps », et le corps porte deja les bonnes valeurs dans
   les deux modes (tokens.css pour la nuit, le bloc 2 de theme.css pour le
   jour). Tout le vocabulaire .ce-* est ensuite REDERIVE de ces alias, donc
   il suit sans qu'aucune valeur ne soit ecrite deux fois.

   LES APLATS ont leur propre paire de jetons, --plq-fond et --plq-encre, et
   c'est la seule facon de ne pas se retrouver en blanc sur blanc : --ce-ink
   sert a la fois d'encre de texte et de FOND de plaque, et ces deux usages
   s'inversent en sens contraire quand la nuit tombe.

   CE QUE CETTE FEUILLE DOIT TENIR, ET QUI A DEJA COUTE AILLEURS :
     - compagnon [hidden] partout ou une regle pose display, sinon l'attribut
       ne cache rien et le filtre ment ;
     - marge d'ancre sous l'entete collante (134 px, 104 px au telephone) ;
     - contraste AA sur les libelles : --fg-3, qui vaut le palier 500 de jour
       (7,40:1, mesure) et le palier 300 de nuit. Jamais une valeur en dur ;
     - aucune largeur fixe sur une adresse : un courriel prend sa ligne.
   ========================================================================= */

.ce.plq {
  /* Les alias du site, rendus a la page. */
  --bg: unset; --bg-alt: unset; --bg-inverse: unset;
  --surface: unset; --surface-2: unset;
  --fg: unset; --fg-2: unset; --fg-3: unset;
  --rule-2: unset; --rule-3: unset;

  /* Le vocabulaire commun, rederive : il suit le mode tout seul. */
  --ce-ink: var(--fg);
  --ce-ink-2: var(--fg-2);
  --ce-ink-3: var(--fg-3);
  --ce-line: var(--rule-2);
  --ce-line-2: var(--rule-3);
  --ce-pale: var(--bg-alt);

  /* Les aplats : plaques, standard, bande du design 3D. */
  --plq-fond: var(--bg-inverse);
  --plq-encre: var(--bg);
  --plq-encre-2: rgba(255,255,255,.76);
  --plq-encre-3: rgba(255,255,255,.6);
  --plq-voile: rgba(127,127,127,.26);

  /* LE ROUGE S'ECHANGE AVEC LE MODE, ET CE N'EST PAS UN GOUT.
     #C22032 sur blanc donne 6,1:1 et passe AA ; sur noir il tombe a 3,55:1 et
     ne passe plus, mesure. #E84658, le rouge clair de la maison, fait
     exactement l'inverse. Il en faut donc deux : celui du FOND DE PAGE et
     celui des APLATS, qui s'inversent ensemble. */
  --plq-rouge: var(--ce-red);
  --plq-rouge-aplat: var(--ce-red-soft);

  /* Le fond du portrait : FIXE, sombre, le jour comme la nuit. Les photos de
     l'equipe sont prises dans l'usine, plafond noir ; une case sans photo
     (le logo) doit se lire comme l'une d'elles, pas comme un trou. */
  --plq-photo-fond: #141416;
}
/* De nuit, l'aplat devient clair : son encre secondaire doit virer avec lui. */
:root[data-mode="sombre"] .ce.plq {
  --plq-encre-2: rgba(0,0,0,.72);
  --plq-encre-3: rgba(0,0,0,.56);
  --plq-rouge: var(--ce-red-soft);
  --plq-rouge-aplat: var(--ce-red);
}

.plq .ce-eyebrow { color: var(--plq-rouge); }

/* ============================================================ 1. LE HEROS */
.plq-hero { padding: clamp(30px, 4.4vw, 58px) 0 clamp(24px, 3vw, 38px); }
.plq-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: end;
}
.plq-hero .ce-h1 { max-width: 12ch; }
.plq-hero .ce-lede { margin-bottom: 0; }

/* Le standard, rendu comme une plaque lui aussi : c'est la dixieme, celle de
   l'usine. C'est le seul aplat du haut de page. */
.plq-standard {
  background: var(--plq-fond); color: var(--plq-encre); padding: 22px 22px 20px;
  display: grid; gap: 14px; align-content: start;
}
.plq-standard__titre {
  font: 600 11px/1 var(--font-sans, Archivo, sans-serif);
  letter-spacing: .14em; text-transform: uppercase; color: var(--plq-encre-2); margin: 0;
}
.plq-standard__num {
  font: 400 clamp(26px, 3vw, 34px)/1 var(--font-display, Antonio, Impact, sans-serif);
  color: var(--plq-encre); text-decoration: none; display: block; letter-spacing: .01em;
}
a.plq-standard__num:hover, a.plq-standard__num:focus-visible { color: var(--ce-red-soft); }
.plq-standard__boite {
  font: 500 12.5px/1.4 var(--font-mono, "JetBrains Mono", monospace);
  color: var(--plq-encre-2); text-decoration: none; word-break: break-word;
}
.plq-standard__boite:hover, .plq-standard__boite:focus-visible { color: var(--plq-encre); }
/* L'ADRESSE, demandee dans le bloc noir le 2026-10-01. Une seule feuille de
   texte sur deux lignes : pre-line rend le saut de ligne qu'elle porte (et
   celui qu'on y tape au clavier, Maj+Entree, dans l'editeur en direct), le
   reste se replie comme d'habitude. Un filet la separe du standard, et
   l'epingle est dessinee par la feuille : la feuille de texte ne porte que
   du texte, sinon i18n.js effacerait l'icone au premier basculement. */
.plq-standard__adresse {
  position: relative; margin: 0; padding: 12px 0 0 22px; border-top: 1px solid var(--plq-voile);
  font: 500 13px/1.5 var(--font-sans, Archivo, sans-serif); color: var(--plq-encre-2);
  white-space: pre-line;
}
.plq-standard__adresse::before {
  content: ""; position: absolute; left: 0; top: 14.5px; width: 14px; height: 14px;
  background: var(--plq-rouge-aplat);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.4-7-11a7 7 0 0 1 14 0c0 5.6-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.4-7-11a7 7 0 0 1 14 0c0 5.6-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* L'etat vivant. Il est ECRIT PAR LE SCRIPT, donc il ne porte jamais data-fr :
   i18n.js remplace textContent et effacerait l'heure. Sans script, il reste
   cache et les heures ecrites juste dessous suffisent a la page. */
.plq-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 13px; }
.plq-etat[hidden] { display: none !important; }
.plq-pastille {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px;
  font: 600 11.5px/1 var(--font-sans, Archivo, sans-serif); letter-spacing: .08em; text-transform: uppercase;
}
/* Le vert tient sur les deux aplats : 4,9:1 sur blanc, et du blanc dessus. */
.plq-etat--ouvert .plq-pastille { background: #0f7a37; color: #fff; }
.plq-etat--ferme .plq-pastille { background: var(--plq-voile); color: var(--plq-encre); }
.plq-horloge { font: 500 12px/1 var(--font-mono, "JetBrains Mono", monospace); color: var(--plq-encre-2); }
.plq-heures { margin: 0; display: grid; gap: 3px; font: 500 12px/1.45 var(--font-mono, "JetBrains Mono", monospace); color: var(--plq-encre-3); }

/* =========================================================== 2. LE FILTRE */
.plq-outils { border-top: 2px solid var(--fg); padding: 18px 0 0; }
/* LES DEUX FILTRES SUR UNE LIGNE (2026-10-16, Clement Lefebvre : « mettre
   tout sur une ligne, ramene What you are building »). Ils passent a la ligne
   d'eux-memes quand la largeur manque ; sous 720 px, chaque titre reprend sa
   propre ligne (section 5). */
.plq-outils__rangs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 36px; padding-bottom: 18px; }
.plq-rang { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.plq-rang__titre {
  flex: 0 0 auto; margin: 0;
  font: 600 11px/1.3 var(--font-sans, Archivo, sans-serif);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3);
}
.plq-chip {
  appearance: none; cursor: pointer; background: transparent; color: var(--fg);
  border: 1px solid var(--ce-line); padding: 8px 13px;
  font: 600 13px/1 var(--font-sans, Archivo, sans-serif);
}
.plq-chip:hover { border-color: var(--fg); }
.plq-chip:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.plq-chip[aria-pressed="true"] { background: var(--plq-fond); border-color: var(--plq-fond); color: var(--plq-encre); }
.plq-choix {
  font: 500 13px/1 var(--font-sans, Archivo, sans-serif);
  padding: 9px 12px; border: 1px solid var(--ce-line); background: var(--surface); color: var(--fg);
  max-width: 100%;
}
.plq-choix:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }

/* Le compte, et la seule chose qu'il a le droit de dire : ce qui est AFFICHE.
   Les versions precedentes annoncaient « 9 sur 9 » en montrant trois fiches,
   parce qu'elles comptaient les correspondances. Ici la liste n'est jamais
   tronquee, a aucune largeur, donc le compte ne peut pas mentir. */
.plq-compte {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  margin: 0; padding: 0;
  font: 500 13px/1.3 var(--font-mono, "JetBrains Mono", monospace); color: var(--fg-2);
}
/* LE COMPTE NE SE VOIT PLUS (2026-10-16, Clement Lefebvre : « virer le 5
   people »), mais il reste : contact-plaque.js s'arrete sans lui, et un lecteur
   d'ecran l'entend a chaque filtre (« 4 personnes sur 9 », aria-live). Seul
   « Tout montrer » s'affiche, quand un filtre est pose. */
.plq-compte [data-plq-compte] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.plq-compte:has(.plq-remise:not([hidden])) { margin: -6px 0 0; padding-bottom: 14px; }
.plq-remise {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 12.5px/1.3 var(--font-sans, Archivo, sans-serif); color: var(--plq-rouge);
  text-decoration: underline; text-underline-offset: 3px;
}
.plq-remise[hidden] { display: none !important; }

/* ========================================================== 3. LES CARTES
   REFAITES LE 2026-10-08 autour des vraies photos de l'equipe (Clement
   Lefebvre : « le design des personnes est trop petit pour afficher
   correctement ca, repense la zone »). Une ligne par personne, une photo de
   132 px a gauche, devient une carte par personne, le portrait en tete :

   - LE PORTRAIT PREND TOUTE LA LARGEUR DE LA CARTE, au 4:5 : c'est le format
     des photos (equipe_photo_traiter, 900 x 1125), qui montre la personne de
     la tete aux bras croises. object-fit couvre la case, cadre en haut : une
     ancienne photo carree de 512 px y perd seulement ses bords.
   - TROIS COLONNES au bureau (1100 px et plus), une au telephone. Entre les
     deux, une carte couchee par rangee : portrait a gauche, faits, actions
     (section 5). A deux colonnes, la carte faisait 920 px de haut a 1024 px
     de large : on n'en voyait jamais une entiere (relecture du 2026-10-08).
   - AU BUREAU, LES CARTES D'UNE RANGEE PARTAGENT LEURS LIGNES (subgrid) :
     portrait, nom, role, faits, actions. Un nom sur deux lignes ne descend
     plus le role et le filet de sa seule carte, et les « Reserver » restent
     alignes. Sans subgrid, chaque carte reste une colonne flex, boutons
     tires en bas.
   - LA RANGEE INCOMPLETE S'ALIGNE A GAUCHE, pas au centre. Le filtre cache
     des cartes : centrees, elles changeraient de colonne a chaque clic, et
     une carte seule flotterait au milieu sous des filtres alignes a gauche.
     Alignees, chacune reste a sa place et la grille se lit comme la liste
     qu'elle remplace.
   - UNE CASE DE RELAIS comble la rangee incomplete, au bureau et sans filtre
     seulement (eqr_sections la pose quand le nombre de personnes ne tombe
     pas juste sur trois) : « Vous ne savez pas a qui parler ? », le standard
     et le formulaire. Elle ne porte pas data-plq-fiche : ni le filtre ni le
     compte ne la voient, et elle s'efface des qu'un filtre cache une carte.
   - Les langues en pastille sur le portrait, en bas a gauche ; le nom en
     Antonio, comme les titres de la page ; les faits en chasse fixe, comme
     avant.
   ========================================================================= */
.plq-gens { padding-bottom: clamp(36px, 5vw, 72px); }
.plq-liste {
  list-style: none; margin: 0; padding: clamp(20px, 2.4vw, 30px) 0 0;
  border-top: 2px solid var(--fg);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; gap: clamp(16px, 2vw, 28px);
}
.plq-fiche {
  display: flex; flex-direction: column; min-width: 0; position: relative;
  background: var(--surface); border: 1px solid var(--ce-line);
  transition: border-color .18s ease;
}
.plq-fiche[hidden] { display: none !important; }
.plq-fiche:hover, .plq-fiche:focus-within { border-color: var(--fg); }

/* Le portrait, et le trait rouge qui se pose a son pied au survol (il etait
   sur le bord gauche de la ligne d'avant). Le numero « N° 01 » qui coiffait
   la plaque est parti le 2026-10-01 (Clement Lefebvre). */
.plq-plaque { position: relative; margin: 0; }
.plq-plaque::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--ce-red); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.plq-fiche:hover .plq-plaque::after, .plq-fiche:focus-within .plq-plaque::after { transform: scaleX(1); }
/* .ce-avatar en fait un rond de 88 px : on rend la largeur de la carte et le
   4:5. Le fond est celui des photos ; sans photo, le logo s'y pose. */
/* L'image est posee EN ABSOLU sur toute la case : la hauteur de la case vient
   de aspect-ratio, et un height: 100% ne s'y resout pas (l'image reprendrait
   ses propres proportions, collee en haut : le logo, une ancienne photo
   carree de 512 px). */
.plq-portrait {
  display: block; position: relative; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 0;
  background: var(--plq-photo-fond); overflow: hidden;
}
.plq-portrait img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0; display: block;
}
/* LA PASTILLE DES LANGUES, sur la photo : blanc plein, encre noire, en
   couleurs FIXES (elle est posee sur une photo, pas sur la page). */
.plq-serie {
  /* Sur l'axe du nom et des boutons (meme retrait que .plq-qui). */
  position: absolute; left: clamp(18px, 1.8vw, 22px); bottom: clamp(14px, 1.6vw, 18px); z-index: 1;
  padding: 5px 8px; background: #fff; color: #0b0b0b;
  font: 600 10.5px/1.2 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.28);
}
/* Le libelle « Langues : » de la pastille, pour les lecteurs d'ecran
   seulement. La page ne charge aucune feuille qui definisse .sr-only. */
.plq-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.plq-qui { padding: clamp(18px, 1.8vw, 22px) clamp(18px, 1.8vw, 22px) 0; }
.plq-nom { font: 400 clamp(26px, 2.3vw, 32px)/1.02 var(--font-display, Antonio, Impact, sans-serif); text-transform: uppercase; margin: 0 0 6px; overflow-wrap: anywhere; }
.plq-role { font: 600 14.5px/1.35 var(--font-sans, Archivo, sans-serif); color: var(--fg); margin: 0 0 14px; }
.plq-champ { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--fg-2); margin: 0 0 6px; }
.plq-champ:last-child { margin-bottom: 0; }
.plq-champ dt {
  flex: 0 0 86px; margin: 0; color: var(--fg-3);
  font: 500 11px/1.75 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: .1em; text-transform: uppercase;
}
.plq-champ dd { margin: 0; min-width: 0; }
.plq-faits { margin: 0; padding-top: 12px; border-top: 1px solid var(--ce-line-2); }

/* Les actions, tirees au bas de la carte (margin-top: auto). Le delai reste
   en tete du bloc et les boutons au pied (sa marge basse automatique) : d'une
   carte a l'autre, « Repond en » et « Reserver » tombent a la meme hauteur,
   qu'il y ait un bouton « Appeler » ou non. Un courriel long passe a la ligne
   sous son libelle plutot que de deborder. */
.plq-agir {
  display: flex; flex-direction: column; gap: 8px; margin-top: auto;
  padding: 18px clamp(18px, 1.8vw, 22px) clamp(18px, 1.8vw, 22px);
}
/* Sans delai, c'est le premier bouton qui pousse la pile au pied. */
.plq-agir > .ce-lien:first-child { margin-top: auto; }
.plq-agir .ce-lien { flex-wrap: wrap; row-gap: 3px; }
.plq-agir .ce-lien span:last-child { min-width: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .plq-fiche, .plq-plaque::after { transition: none; }
}
.plq-delai {
  margin: 0 0 auto; padding-bottom: 4px; align-self: flex-start; display: inline-flex; align-items: baseline; gap: 7px;
  font: 500 11.5px/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3);
}
.plq-delai b { font: 600 13px/1 var(--font-sans, Archivo, sans-serif); letter-spacing: 0; text-transform: none; color: var(--fg); }

/* Le bouton de rendez-vous herite d'un fond --ce-ink, donc de l'ENCRE, qui
   passe au blanc la nuit : blanc sur blanc. Il prend l'aplat, comme les
   plaques, et s'inverse avec elles. */
.plq .ce-lien--rdv { background: var(--plq-fond); border-color: var(--plq-fond); color: var(--plq-encre); }
.plq .ce-lien--rdv span:last-child { color: var(--plq-encre-2); }
.plq .ce-lien--rdv:hover, .plq .ce-lien--rdv:focus-visible { background: var(--ce-red); border-color: var(--ce-red); color: #fff; }
.plq .ce-lien--rdv:hover span:last-child, .plq .ce-lien--rdv:focus-visible span:last-child { color: rgba(255,255,255,.85); }

/* Meme raison pour les champs du formulaire et la barre collante : un fond
   #fff en dur devient du blanc sous du texte blanc des que la nuit tombe. */
.plq .ce-champ input, .plq .ce-champ select, .plq .ce-champ textarea { background: var(--surface); }
.plq .ce-faits dt { color: var(--fg-3); }

/* LA CASE DE RELAIS (voir l'en-tete de la section). Fond sombre FIXE, celui
   des portraits : elle se lit comme une carte de la grille, pas comme un
   trou ni comme une personne de plus. Bureau seulement (section 5). */
.plq-relais {
  display: none; flex-direction: column; justify-content: flex-end; gap: 10px; min-width: 0;
  padding: clamp(22px, 2.2vw, 30px) clamp(18px, 1.8vw, 22px) clamp(18px, 1.8vw, 22px); color: #fff;
  background: radial-gradient(90% 60% at 30% 22%, #2a2a2e 0%, var(--plq-photo-fond) 70%);
}
.plq-relais__titre {
  font: 400 clamp(26px, 2.3vw, 32px)/1.02 var(--font-display, Antonio, Impact, sans-serif);
  text-transform: uppercase; margin: 0; max-width: 16ch;
}
.plq-relais__marque { display: block; width: 56px; height: auto; margin: 0 0 auto; }
.plq-relais__dit { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.78); margin: 0 0 8px; max-width: 34ch; }
.plq-relais .ce-lien { color: #fff; border-color: rgba(255,255,255,.34); }
.plq-relais .ce-lien span:last-child { color: rgba(255,255,255,.72); }
.plq-relais .ce-lien:hover, .plq-relais .ce-lien:focus-visible { border-color: #fff; }
.plq-relais .ce-lien:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.plq-relais .ce-lien--rdv { background: #fff; border-color: #fff; color: #0b0b0b; }
.plq-relais .ce-lien--rdv span:last-child { color: rgba(0,0,0,.62); }
.plq-relais .ce-lien--rdv:hover, .plq-relais .ce-lien--rdv:focus-visible { background: var(--ce-red); border-color: var(--ce-red); color: #fff; }
.plq-relais .ce-lien--rdv:hover span:last-child, .plq-relais .ce-lien--rdv:focus-visible span:last-child { color: rgba(255,255,255,.85); }

.plq-vide { padding: 34px 0 30px; display: grid; gap: 12px; justify-items: start; }
.plq-vide[hidden] { display: none !important; }

/* ================================================ 4. LE DESIGN 3D, EN BANNIERE
   Depuis le 2026-10-01, sous le formulaire : plus de chef de departement ni
   de photo (Clement Lefebvre : « enleve les photos, faire plus une
   banniere »). Le fond est celui des bannieres d'appel du reste du site
   (.cta de styles.css), en couleurs FIXES comme elles : il se lit pareil le
   jour et la nuit, blanc sur rouge sombre. */
.plq-3d {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 140% at 85% 0%, var(--ce-red) 0%, #7a1420 42%, #150607 100%);
  padding: clamp(40px, 5.6vw, 80px) 0;
}
.plq-3d::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.55), transparent 60%);
}
.plq-3d .ce-wrap { position: relative; }
.plq-3d__bande {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(26px, 4.4vw, 72px); align-items: end;
}
.plq-3d .ce-eyebrow { color: rgba(255,255,255,.82); }
.plq-3d .ce-h2 { color: #fff; margin: 0 0 14px; max-width: 24ch; }
.plq-3d__dit { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.86); margin: 0 0 20px; max-width: 60ch; }
.plq-3d__liv { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.plq-3d__liv li {
  border: 1px solid rgba(255,255,255,.34); padding: 7px 11px;
  font: 600 12.5px/1.25 var(--font-sans, Archivo, sans-serif); color: #fff;
}
.plq-3d__agir { display: grid; gap: 14px; justify-items: start; }
.plq-3d .plq-delai { margin: 0; color: rgba(255,255,255,.72); }
/* Le chiffre du delai heritait de --fg : du noir sur la bande sombre, donc un
   libelle « un plan demande » suivi de rien du tout. Vu a la capture. */
.plq-3d .plq-delai b { color: #fff; }
/* .btn (styles.css) donne la forme des boutons du site ; on lui donne le
   blanc plein, le seul qui ressorte sur ce rouge. Il passe a la ligne au
   lieu de deborder : le francais est long, et .btn interdit le retour. */
.plq-3d__cta {
  background: #fff; color: #0b0b0b; border-color: #fff; text-decoration: none;
  white-space: normal; text-align: left; justify-content: flex-start;
}
.plq-3d__cta:hover, .plq-3d__cta:focus-visible { background: #0b0b0b; color: #fff; border-color: #0b0b0b; }
.plq-3d__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.plq-3d__tel {
  color: rgba(255,255,255,.8); text-decoration: none;
  font: 500 12.5px/1.4 var(--font-mono, "JetBrains Mono", monospace);
}
.plq-3d__tel span:last-child { color: #fff; }
.plq-3d__tel:hover, .plq-3d__tel:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- les ancres */
#plq-gens, #plq-3d { scroll-margin-top: 150px; }

/* ======================================================= 5. LES LARGEURS */
@media (max-width: 1080px) {
  .plq-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .plq-standard { max-width: 460px; }
  .plq-3d__bande { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
/* AU BUREAU : les cartes d'une rangee partagent cinq lignes (subgrid).
   Chaque bloc a sa ligne nommee en dur, pour qu'une carte sans role ou sans
   faits ne glisse pas ses blocs d'une ligne. .plq-qui s'efface (contents) :
   ses trois enfants prennent son retrait. Le nom d'une ligne se cale au pied
   de la sienne, sur la seconde ligne des noms longs. */
@media (min-width: 1100px) {
  @supports (grid-template-rows: subgrid) {
    .plq-liste { grid-auto-rows: auto; }
    .plq-fiche { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    .plq-plaque { grid-row: 1; }
    .plq-qui { display: contents; }
    .plq-nom { grid-row: 2; align-self: end; margin-top: clamp(18px, 1.8vw, 22px); }
    .plq-role { grid-row: 3; }
    .plq-faits { grid-row: 4; align-self: start; }
    .plq-nom, .plq-role, .plq-faits { margin-inline: clamp(18px, 1.8vw, 22px); }
    .plq-agir { grid-row: 5; margin-top: 0; }
    .plq-relais { grid-row: span 5; }
  }
  /* La case de relais, sans filtre seulement : des qu'une carte est cachee,
     la rangee change et la case n'a plus de trou a combler. */
  .plq-relais { display: flex; }
  .plq-relais--1 { grid-column: span 1; }
  .plq-relais--2 { grid-column: span 2; }
  .plq-liste:has(> [data-plq-fiche][hidden]) > .plq-relais { display: none; }
}
/* DE 600 A 1099 PX, UNE CARTE COUCHEE PAR RANGEE : portrait a gauche (le
   4:5 garde, environ 290 x 360), faits au centre, actions a droite. Une
   carte entiere tient dans un ecran de 1024 x 768, visage et boutons
   ensemble ; a deux colonnes, elle faisait 920 px de haut. */
@media (min-width: 600px) and (max-width: 1099px) {
  .plq-liste { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .plq-fiche {
    display: grid;
    grid-template-columns: minmax(0, clamp(220px, 30%, 300px)) minmax(0, 1fr) minmax(0, clamp(240px, 34%, 320px));
  }
  /* align-self: start : quand les faits sont plus hauts que le portrait, la
     plaque etiree portait la pastille des langues SOUS la photo (vu a 720 px). */
  .plq-plaque { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .plq-qui { grid-column: 2; grid-row: 1 / span 2; padding-bottom: 22px; }
  .plq-agir { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; padding-top: 22px; justify-content: flex-end; }
  /* La colonne des actions est etroite : un courriel long y passait sous
     « Ecrire » dans une carte et pas dans sa voisine. Tous les boutons
     empilent donc leur libelle sur leur valeur, du meme pas partout. */
  .plq-agir .ce-lien { flex-direction: column; align-items: flex-start; gap: 3px; }
}
/* Sous 820 px, deux colonnes : les actions passent sous les faits. */
@media (min-width: 600px) and (max-width: 819px) {
  .plq-fiche { grid-template-columns: minmax(0, clamp(200px, 38%, 280px)) minmax(0, 1fr); }
  .plq-qui { grid-row: 1; padding-bottom: 0; }
  .plq-agir { grid-column: 2; grid-row: 2; }
}
/* Une seule au telephone : le portrait prend la largeur de l'ecran. Au-dela
   de 480 px, une carte seule deviendrait une affiche ; on la borne, alignee
   a gauche comme la grille. Le courriel en un cran plus petit : en francais,
   « Ecrire » et une adresse longue passaient sur deux lignes dans une seule
   carte (56 px contre 38 pour tous les autres boutons, mesure a 390 px). */
@media (max-width: 599px) {
  .plq-liste { grid-template-columns: minmax(0, 480px); grid-auto-rows: auto; }
  .plq-agir .ce-lien span:last-child { font-size: 11.5px; letter-spacing: -.01em; }
}
/* Sous 380 px, ce n'est plus assez : TOUS les boutons empilent leur libelle
   sur leur valeur, pour que la pile garde le meme pas d'une carte a l'autre. */
@media (max-width: 379px) {
  .plq-agir .ce-lien { flex-direction: column; align-items: flex-start; gap: 3px; }
}
@media (max-width: 720px) {
  .plq-hero .ce-h1 { max-width: none; }
  .plq-rang__titre { flex: 1 0 100%; }
  .plq-choix { width: 100%; }
  /* Le fond blanc en dur de la barre collante, meme piege que les champs. */
  .plq ~ .ce-barre a, .ce-barre a { background: var(--surface); }
}
@media (max-width: 700px) {
  #plq-gens, #plq-3d { scroll-margin-top: 104px; }
}

/* =========================================================================
   AJOUTS DE LA PAGE OFFICIELLE (2026-09-23)
   ========================================================================= */

/* LA TETE PAR DEFAUT EST LE LOGO. Tant que l'ecran n'a pas recu la photo
   d'une personne, sa case porte la marque d'Atlantis, entiere : « contain »
   et non « cover », qui la couperait. Depuis le 2026-10-08, la case garde le
   4:5 et le fond sombre des photos (--plq-photo-fond), le jour comme la nuit :
   une carte sans photo tient sa place dans la grille sans la trouer. Un halo
   discret derriere la marque, la lumiere des photos prises dans l'usine. */
.plq-portrait--logo {
  background: radial-gradient(90% 70% at 50% 42%, #2a2a2e 0%, var(--plq-photo-fond) 72%);
}
.plq-portrait--logo img { object-fit: contain; object-position: 50% 50%; padding: 0 30%; }

/* LE FORMULAIRE EST CELUI DE L'ANCIENNE PAGE, repris tel quel (ses champs
   sont ceux que lit HubSpot : pays ou province, source). Il vit dans la boite
   du proto ; ses propres regles (styles.css, contact.css) le dessinent. On ne
   lui retire que la marge haute que lui donnait l'ancienne grille. */
.ce-form__box .apply__form { margin-top: 0; }

/* Le lien vers la demande de devis, dans la colonne du formulaire : souligne,
   sinon il se lit comme le reste de la phrase. */
.ce-pourquoi a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ce-pourquoi a:hover, .ce-pourquoi a:focus-visible { color: var(--ce-red); }

/* Un lien de l'administration mene a une ligne (#personne-<id>) ou a la
   section 3D : sans marge, l'entete collante de 134 px la recouvre. */
.plq-fiche, #plq-3d { scroll-margin-top: 150px; }

/* « NOUS TROUVER », EDITABLE DANS LA PAGE (2026-10-01). L'adresse du bas
   est devenue une seule feuille de texte, sur trois lignes, pour que
   l'editeur en direct la retouche d'un bloc : pre-line rend ses sauts de
   ligne la ou il y avait trois <br>. Seulement la feuille qui porte data-fr :
   les autres valeurs de .locate (telephone, heures sur /contact) gardent
   leurs balises. */
.locate__rowval[data-fr] { white-space: pre-line; }

/* =========================================================================
   LE BLOC « PRENDRE RENDEZ-VOUS » (2026-09-24)
   -------------------------------------------------------------------------
   Un agenda general, pose dans /administration/hubspot. La section est
   ecrite CACHEE par le generateur ; assets/js/rdv-bloc.js la remplit et la
   montre, dans l'un de deux affichages : un bouton puis notre iframe au clic
   (« site »), ou le code officiel de HubSpot, charge avec la page
   (« hubspot »).

   L'AGENDA RESTE BLANC LA NUIT, LE RESTE DU BLOC NON. C'est la decision 2 de
   rdv-hubspot.css : la page de HubSpot est blanche et ne se repeint pas
   depuis l'exterieur. On l'assume en carte blanche, avec un filet qui suit
   le mode, plutot que de laisser un trou blanc sans bord sur une page noire.
   Le bouton, lui, prend l'aplat comme les boutons « Reserver » des plaques.
   ========================================================================= */
.plq-agenda { padding: clamp(34px, 5vw, 64px) 0; }
/* Sans lui, une regle de la classe qui poserait display gagnerait sur
   l'attribut, et un bloc sans agenda s'afficherait vide. */
.plq-agenda[hidden] { display: none !important; }

/* Au-dela de 940 px, l'agenda de HubSpot ne s'elargit plus : la meme borne
   que le panneau des personnes. */
.plq-agenda__cadre { max-width: 940px; margin-top: 22px; }

.plq-agenda__voir {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center;
  min-height: 48px; padding: 14px 22px; border: 1px solid var(--plq-fond);
  background: var(--plq-fond); color: var(--plq-encre);
  font: 600 15px/1.2 var(--font-sans, Archivo, system-ui, sans-serif);
}
.plq-agenda__voir:hover, .plq-agenda__voir:focus-visible { background: var(--ce-red); border-color: var(--ce-red); color: #fff; }
.plq-agenda__voir:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* Mode « site » : NOTRE iframe, a hauteur fixe. Rien ne la redimensionne,
   et 760 px tiennent la date puis l'heure sans ascenseur au bureau. */
.plq-agenda__iframe {
  display: block; width: 100%; height: 760px;
  border: 1px solid var(--ce-line); background: #fff;
}

/* Mode « hubspot » : le script de HubSpot pose ses propres tailles en ligne
   sur son iframe (312 px de large au moins, 615 de haut au moins, 756 de
   haut). On ne les combat pas : le conteneur donne le fond blanc et le
   filet, et il defile plutot que d'elargir la page sous 360 px, ou 312 px
   ne tiennent plus entre les gouttieres. Vide tant que le script n'a rien
   pose : pas de filet autour de rien. */
.plq-agenda .meetings-iframe-container {
  background: #fff; border: 1px solid var(--ce-line); overflow-x: auto;
}
.plq-agenda .meetings-iframe-container:empty { border: 0; }
.plq-agenda .meetings-iframe-container iframe { display: block; }

.plq-agenda__repli { margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
.plq-agenda__repli a, .plq-agenda__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.plq-agenda__repli a:hover, .plq-agenda__repli a:focus-visible,
.plq-agenda__note a:hover, .plq-agenda__note a:focus-visible { color: var(--plq-rouge); }
.plq-agenda__note { max-width: 940px; }

/* L'ecran mene a #prendre-rendez-vous : meme marge que les autres ancres. */
#prendre-rendez-vous { scroll-margin-top: 150px; }

@media (max-width: 720px) {
  .plq-agenda__voir { width: 100%; justify-content: center; text-align: center; }
}
@media (max-width: 700px) {
  #prendre-rendez-vous { scroll-margin-top: 104px; }
}

/* =========================================================================
   LA PAGE CONTACT SUR TELEPHONE (2026-10-14). Demande de Clement : « fais
   pareil pour la page contact sur telephone ». Mesure avant, a 375 px :
   13 240 px de haut, dont 7 800 pour les neuf personnes (une carte de 830 px
   chacune : le portrait 4:5 sur toute la largeur, puis les faits, puis trois
   boutons empiles) et un formulaire HubSpot de 269 px de large dans une boite
   qui lui prenait 56 px de marges.
   - LES CARTES SE COUCHENT sous 600 px, comme de 600 a 819 : le portrait a
     gauche (104 px, le 4:5 garde, le visage en haut), le nom, le role et les
     faits a droite, les actions sous les deux, une par ligne, le libelle a
     gauche et la valeur a droite. Cote a cote, « Ecrire » coupait le courriel
     au milieu (« prenom.nom@atlantiss / trength.com ») ; en ligne, les vrais
     (31 caracteres au plus) tiennent, et passent ENTIERS sous le libelle sur
     les plus petits ecrans. Rien ne part : chaque valeur reste ecrite. La liste est en data-edition="fixe" et se
     refait depuis /administration/hubspot : on n'y touche qu'au style.
   - LE FORMULAIRE HUBSPOT est une iframe, deja sur fond blanc avec ses propres
     marges : sa boite perd les siennes et son cadre (seulement quand elle porte
     l'iframe, .hsi ; l'ancien formulaire du site les garde).
   - LES MARGES DE LA PAGE suivent celles du site (20 px, 16 sous 380).
   - LES PETITS LIENS (le standard, son courriel, « ou appelez ») et les
     pastilles de region se touchent sur 40 px de haut ou plus.
   ========================================================================= */
@media (max-width: 640px) {
  .ce-wrap { padding: 0 20px; }
}
@media (max-width: 380px) {
  .ce-wrap { padding: 0 16px; }
}
@media (max-width: 599px) {
  .plq-liste { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .plq-fiche { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto; }
  .plq-plaque { grid-column: 1; grid-row: 1; align-self: start; }
  .plq-serie { left: 6px; bottom: 6px; padding: 3px 5px; font-size: 9.5px; letter-spacing: .06em; }
  .plq-qui { grid-column: 2; grid-row: 1; min-width: 0; padding: 12px 14px 0; }
  .plq-nom { font-size: 22px; margin-bottom: 3px; }
  .plq-role { font-size: 13px; margin-bottom: 8px; }
  .plq-faits { padding-top: 8px; }
  .plq-champ { display: block; font-size: 12.5px; line-height: 1.4; margin-bottom: 6px; }
  .plq-champ dt { font-size: 10px; line-height: 1.5; }
  .plq-agir {
    grid-column: 1 / -1; grid-row: 2; margin-top: 0;
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 14px 14px;
  }
  .plq-delai { margin: 0 0 2px; padding: 0; }
  .plq-agir > .ce-lien:first-child { margin-top: 0; }
  .plq-agir .ce-lien {
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 2px 10px; min-height: 44px; padding: 8px 12px;
  }
  /* break-word et non anywhere : la valeur garde sa largeur entiere et passe a
     la ligne d'un bloc plutot que d'etre coupee au milieu. */
  .plq-agir .ce-lien span:last-child { min-width: auto; font-size: 11.5px; letter-spacing: -.01em; overflow-wrap: break-word; }

  /* html body : le mode jour de theme.css repeint cette boite par une regle plus lourde. */
  html body .contact__formwrap:has(.hsi) { padding: 0; border: 0; background: transparent; }

  .plq-chip { min-height: 40px; }
  .plq-standard__num, .plq-standard__boite, .plq-3d__tel { position: relative; }
  .plq-standard__num::before, .plq-standard__boite::before, .plq-3d__tel::before {
    content: ""; position: absolute; inset: -10px -4px;
  }
}

/* =========================================================================
   LES CARTES TIENNENT DANS L'ECRAN (2026-10-15, retour transmis par Clement
   Lefebvre : « les blocs des personnes sont beaux mais trop hauts, les boutons
   sortent de l'ecran ; cachez Territoire, Projets et Repond en ; le bouton pour
   les contacter beaucoup plus visible, et qu'il tienne dans le defilement »).
   - Projets et « Repond en » sont CACHES, pas retires : ils restent dans la
     page (equipe-rendu.php les ecrit toujours) et reviennent en enlevant la
     premiere regle. Le nom, le role et la zone geographique (Territoire)
     restent visibles (Clement : « on veut quand meme voir les nom et prenom, et
     la zone geographique »).
   - Au bureau, le portrait prend la hauteur que l'ecran laisse : 100vh, moins
     l'en-tete (134 px), le nom, le role et les boutons (environ 300 px) et un
     peu d'air ; entre 220 et 400 px. Une carte entiere tient sous l'en-tete
     d'un ecran de 768 px comme de 900 px. Le cadrage reste sur les visages.
   - Le bouton de rendez-vous passe en tete de la pile, en rouge plein, plus
     grand : c'est lui, « les contacter ».
   - Les boutons ne collent PAS au bas de l'ecran : une pile collee recouvrait le
     nom de la carte suivante quand elle entrait par le bas. Ils restent visibles
     parce que la carte entiere tient dans l'ecran : au bureau (mesure sur un
     ecran de 900 px, ou l'en-tete en laisse 766) comme au telephone, ou la
     carte est couchee et courte.
   ========================================================================= */
.plq-fiche .plq-champ--projets, .plq-fiche .plq-delai { display: none; }
.plq-fiche .plq-faits { padding-top: 8px; }
@media (min-width: 1100px) {
  .plq-fiche .plq-portrait { aspect-ratio: auto; height: clamp(220px, calc(100vh - 480px), 400px); }
  .plq-fiche .plq-portrait img { object-position: 50% 12%; }
  .plq-role { margin-bottom: 4px; }
}
.plq-fiche .plq-agir > .ce-lien:first-child { margin-top: 0; }
.plq .plq-fiche .ce-lien--rdv {
  order: -1; padding: 14px 16px; min-height: 52px;
  background: var(--ce-red); border-color: var(--ce-red); color: #fff;
  font-size: 15px; letter-spacing: .01em;
}
.plq .plq-fiche .ce-lien--rdv span:last-child { color: rgba(255,255,255,.88); }
.plq .plq-fiche .ce-lien--rdv:hover, .plq .plq-fiche .ce-lien--rdv:focus-visible {
  background: #A3161F; border-color: #A3161F; color: #fff;
}

/* =========================================================================
   LES FICHES SERREES (2026-10-21, Clement Lefebvre : « trop d'air dans les
   fiches, rendre compact »). Mesure avant, au bureau (1280 x 800) : 653 px
   par carte, dont 112 px d'ecart de la grille.
   - L'ECART DE LA GRILLE ENTRAIT DANS LES CARTES. Au bureau, les cartes d'une
     rangee partagent cinq lignes (subgrid, section 5) : les 28 px de row-gap
     de .plq-liste se posaient aussi ENTRE ces lignes, dans chaque carte (photo,
     nom, territoire, boutons). La grille n'a plus d'ecart vertical ; la marge
     basse des cartes (et de la case de relais) separe les rangees, du meme pas.
   - LE NOM PERD UN CRAN (28 px au plus au lieu de 32) : la rangee prend la
     hauteur de son nom le plus long, et un nom court se calait 32 px plus bas
     sous sa photo. A 1280 et 1440 px, « Marie-Joelle Boivin » et « Jordan
     Sansoucy » tiennent maintenant sur une ligne ; « Karl-Emmanuel Lapierre »
     reste sur deux.
   - Moins de marge autour du nom et au-dessus des boutons. Le retrait a
     gauche ne bouge pas : nom, pastille des langues et boutons restent sur le
     meme axe.
   - DE 820 A 1099 PX (carte couchee en trois colonnes), le portrait passe de
     300 a 200 px de large au plus : la carte prenait la hauteur de la photo et
     laissait un vide sous le territoire. Elle prend maintenant celle des
     boutons. De 600 a 819, le portrait egalait deja le contenu : inchange.
   Mesure apres, au bureau (1280 x 800) : 580 px (rangee de noms courts),
   502 px sans territoire ; 232 px au lieu de 315 a 900 px de large. Le
   telephone ne change pas (section du 2026-10-14).
   ========================================================================= */
@media (min-width: 1100px) {
  .plq-liste { row-gap: 0; }
  .plq-fiche, .plq-relais { margin-bottom: clamp(16px, 2vw, 28px); }
  .plq-nom { font-size: clamp(24px, 2vw, 28px); }
  .plq-agir { gap: 6px; padding-top: 14px; padding-bottom: clamp(16px, 1.6vw, 18px); }
  @supports (grid-template-rows: subgrid) {
    .plq-nom { margin-top: 16px; margin-bottom: 10px; }
  }
}
@media (min-width: 820px) and (max-width: 1099px) {
  .plq-fiche { grid-template-columns: minmax(0, clamp(170px, 22%, 200px)) minmax(0, 1fr) minmax(0, clamp(240px, 34%, 320px)); }
  .plq-agir { gap: 6px; padding-bottom: 18px; }
}