/* ═══════════════════════════════════════════════════════════════
     Welcome RDV — brouillon responsive de la page d'accueil
     Volontairement mono-thème : le site est clair, point.
     Tous les fonds et toutes les couleurs sont peints explicitement.
     ═══════════════════════════════════════════════════════════════ */
  :root {
    --papier:#FAF8F4; --creux:#F1EEE7; --blanc:#FFFFFF;
    --encre:#17150F; --encre2:#4E4A3F; --gris:#8A8578;
    --filet:#E0DCD1; --filet2:#C6C0B1;
    --tan:#D2B48C; --brun:#8A6A45; --noir:#15130F;

    --pad: clamp(20px, 5.2vw, 120px);
    --cap-h: clamp(56px, 4.8vw, 68px);
    --cap-t: clamp(10px, 1.5vw, 18px);
    /* La marge intérieure de la capsule. Elle sert deux fois : dans la
       capsule, et dans le premier écran — le titre s'aligne alors sur le
       logo, pas sur le bord de la pastille. Tout pend au même fil. */
    --cap-px: clamp(18px, 2.2vw, 32px);
    --sect: clamp(56px, 7vw, 104px);
    --r-carte: 10px;
    --tete-h: clamp(58px, 4.5vw, 64px);

    --verre-fond: rgba(255,255,255,.15);
    --verre-filet: rgba(255,255,255,.28);
    --verre-ombre: 0 4px 20px rgba(0,0,0,.07), inset 0 -1px 11px rgba(255,255,255,.5);
    --verre-flou: blur(10px) saturate(1.15);
  }

  .evitement { position:absolute; left:-9999px; top:0; z-index:99; background:var(--encre);
    color:#fff; padding:12px 20px; border-radius:0 0 10px 0; }
  .evitement:focus { left:0; color:#fff; }
  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  body { margin:0; background:var(--papier); color:var(--encre);
    font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
    font-size:clamp(16px,1.05vw,17px); line-height:1.62; font-weight:300;
    -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  h1,h2,h3 { margin:0; font-weight:300; text-wrap:balance; }
  p { margin:0; }
  a { color:var(--brun); text-decoration:none; }
  a:hover { color:#6E5336; }
  a:focus-visible, button:focus-visible, summary:focus-visible {
    outline:2px solid var(--brun); outline-offset:3px; border-radius:4px; }
  /* height:auto est indispensable : sans lui, l'attribut height="…" du HTML
     agit comme une hauteur CSS fixe, et l'image est étirée dès qu'on lui
     donne width:100%. C'est ce qui allongeait la capture du téléphone. */
  img { max-width:100%; height:auto; display:block; }

  .bande { padding:var(--sect) var(--pad); }
  .large { max-width:1280px; margin:0 auto; }
  .eyebrow { display:block; font-family:"DM Mono",ui-monospace,Menlo,monospace;
    font-size:11.5px; letter-spacing:.19em; text-transform:uppercase;
    color:var(--gris); }
  .titre-sect { font-size:clamp(27px,3.4vw,40px); letter-spacing:-0.028em; line-height:1.12; }
  .intro { font-size:clamp(16px,1.15vw,18px); color:var(--encre2); max-width:62ch; line-height:1.6; }
  .col { display:flex; flex-direction:column; }

  /* Le panneau que le burger ouvre. Sans lui, sous 980 px la page n'avait
     plus aucune navigation : les liens étaient masqués et rien ne les
     remplaçait. */
  .menu-tel { position:fixed; inset:calc(var(--cap-t) + var(--cap-h) + 6px) var(--pad) auto;
    z-index:60; background:rgba(250,248,244,.97);
    backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5);
    border-radius:22px; padding:14px 10px; max-height:calc(100dvh - 120px); overflow-y:auto;
    box-shadow:0 18px 48px rgba(52,40,24,.24), 0 0 0 1px rgba(255,255,255,.9); }
  .menu-tel[hidden] { display:none; }
  .menu-tel nav { display:flex; flex-direction:column; }
  .menu-tel a { padding:13px 18px; border-radius:12px; color:var(--encre);
    font-size:17px; text-decoration:none; }
  .menu-tel a:hover, .menu-tel a:focus-visible { background:var(--creux); color:var(--encre); }
  .menu-filet { height:1px; background:var(--filet); margin:8px 18px; }

  /* ── 01 · le premier écran ─────────────────────────────────── */
  /* La capsule flotte au-dessus du premier écran ; cette marge haute la
     retire du calcul, pour que le bloc se centre dans ce qui reste et non
     dans l'écran entier — sinon il paraît toujours un cran trop bas. */
  .hero { position:relative; min-height:100vh; min-height:100svh; overflow:hidden;
    background:var(--encre); display:flex; flex-direction:column;
    padding-top:calc(var(--cap-t) + var(--cap-h));
    /* Un centre géométrique paraît toujours bas : le regard place le milieu
       plus haut qu'il n'est. On rogne donc l'aire de centrage par le bas,
       et le bloc remonte d'un cran — 41 % / 59 % au lieu de 50 / 50. */
    padding-bottom:clamp(30px,7vh,120px); }
  .hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    object-position:58% 0; }
  /* « 58 % 0 » et non « 58 % center » : le cadre est plus large que la photo
     (2,24 contre 1,79 sur 1526x674) et rogne en HAUTEUR. Ancré en haut, on
     perd le bas de la mallette et le tapis ; centré, on couperait les deux
     têtes, qui vivent dans le sixième haut. Vrai des deux photos successives. */

  /* ⚠️ 05/09 — LE VOILE EST REVENU, ET IL N'EST PAS DÉCORATIF.
     La photo « l'échange à l'entrée » est CLAIRE PARTOUT : mur blanc sur toute
     la moitié gauche (luminance relative 0,55 à 0,65), baie surexposée à droite.
     Le blanc du texte tombait à 1,34-1,50:1 et la capsule à 1,00:1 — mesuré, pas
     estimé : « on ne voit plus bien le header et les textes » (Nicolas, 05/09).
     Aucune ombre portée ne rattrape ça ; il fallait baisser la PHOTO, et lui
     seule — consigne explicite : « ne modifie pas le header, textes etc.,
     adapte l'image plutôt ».
     ⭐ POURQUOI CE VOILE-CI NE « TUE » PAS LA PHOTO, contrairement à celui que
     Nicolas avait refusé en août : il ne couvre pas le centre. Ce qu'il
     assombrit à gauche est un MUR VIDE — il n'y a rien à y perdre — et il est
     retombé à zéro avant les deux visages, qui restent en pleine lumière.
     Trois calques, chacun avec un travail :
       ① bandeau haut, plein largeur → la capsule de verre, dont le texte blanc
         passait sur le haut de la baie (luminance 0,87) ;
       ② rideau gauche → le bloc de titre, qui vit sur le mur blanc ;
       ③ pied léger → la barre de recherche et la ligne des notes.
     Mesures sur la photo réelle, texte blanc, 8 % de pixels les pires
     (le pire cas, pas la moyenne), OMBRES DU TEXTE NON COMPTÉES :
       capsule pilule 5,9 · « Je suis pro » 4,4 · eyebrow 5,3 · h1 5,5
       · sous-titre 4,8 · champ 3,6 · avis 5,4.   (avant : 1,00 à 1,50)
     ⚠️ SI LA PHOTO CHANGE, REMESURER. Ces valeurs ne sont pas transposables :
     elles décrivent CE cadrage sur CETTE image. La méthode est dans
     ETAT-CHANTIERS (05/09, 2.10.53).
     ⭐ 21/09 (2.10.96) — VOILE ALLÉGÉ, À LA DEMANDE DE NICOLAS (« c'est trop
     sombre »). Depuis 2.10.95 le héro ne porte plus que le titre, une phrase
     et la recherche : le rideau gauche et le pied n'avaient plus rien à
     protéger sur toute cette surface. Deux calques au lieu de trois :
       ① bandeau haut, raccourci (0 à 20 %) mais dense sous la capsule :
         sans lui, « Je suis pro » tombe à 2,1 sur la baie ;
       ② une ellipse derrière le bloc de titre, et rien ailleurs : la
         photo (visages, fenêtre, sol) est en pleine lumière.
     Choisi sur maquettes rendues sur la vraie page (quatre voiles comparés,
     « le plus lumineux » retenu). Mesures, même méthode que le 05/09 :
       capsule 5,6 à 6,1 · « Je suis pro » 4,2 · h1 4,3 · phrase 4,5
       · champ 3,4   (avant : h1 4,6 · phrase 4,8 · champ 3,9).
     Un cran plus sombre derrière le texte (ellipse .58/.48) donnait h1 4,9,
     phrase 5,1 : c'est la marge si la lisibilité devait être reprise. */
  .hero-voile { position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(180deg, rgba(10,9,7,.70) 0%, rgba(10,9,7,.62) 8%,
        rgba(10,9,7,.26) 14%, rgba(10,9,7,0) 20%),
      radial-gradient(ellipse 44% 50% at 25% 52%, rgba(10,9,7,.52) 0%,
        rgba(10,9,7,.44) 42%, rgba(10,9,7,.16) 78%, rgba(10,9,7,0) 100%); }

  /* ⚠️ LES VERRES NE SE TOUCHENT PAS. Capsule et barre partagent
     `--verre-fond` / `--verre-filet` / `--verre-ombre` d'origine : c'est ce
     qui les fait aller ensemble, et Nicolas l'a tranché deux fois. Ni verre
     fumé, ni brightness dans le backdrop.
     Le texte du champ porte donc la même ombre que le reste du hero — un
     champ ne peut pas avoir de text-shadow via une classe utilitaire, il
     faut le viser explicitement. Sans ça, le blanc sur verre clair
     au-dessus du parquet éclairé tombe à 1,2:1. Avec : 5,71:1. */
  .hero .champ input,
  .hero .champ input::placeholder {
    text-shadow:0 1px 2px rgba(10,9,7,.58), 0 2px 10px rgba(10,9,7,.58); }
  .hero .geo { filter:drop-shadow(0 1px 3px rgba(10,9,7,.55)); }

  /* ⚠️ Les ombres du texte du hero sont plus bas (.hero h1,
     .hero-sous). Elles ne sont PAS décoratives : c'est elles qui
     portent la lisibilité sur cette photo, et elles permettent un voile
     léger (.40) au lieu d'un voile lourd (.62) qui éteindrait l'image.
     Ne pas les alléger sans remesurer le contraste. */

  /* La capsule vit HORS du hero pour pouvoir rester collée au défilement.
     Sa marge basse négative la fait flotter par-dessus la photo. */
  .capsule { position:sticky; top:var(--cap-t); z-index:50;
    height:var(--cap-h);
    margin:var(--cap-t) var(--pad) calc(-1 * (var(--cap-h) + var(--cap-t)));
    display:flex; align-items:center; gap:clamp(18px,2.6vw,36px);
    padding:0 8px 0 var(--cap-px); border-radius:999px;
    background:var(--verre-fond); border:1px solid var(--verre-filet);
    box-shadow:var(--verre-ombre);
    backdrop-filter:var(--verre-flou); -webkit-backdrop-filter:var(--verre-flou);
    color:#fff; transition:background .25s, border-color .25s, box-shadow .25s, color .25s; }

  /* Passé le hero, le fond devient clair : le verre s'inverse et se dessine
     par son ARÊTE — liseré franc, ombre portée réelle, flou plus fort. */
  .capsule.pose { background:rgba(255,255,255,.58); border-color:rgba(255,255,255,.96);
    box-shadow:0 12px 34px rgba(52,40,24,.16), 0 2px 5px rgba(52,40,24,.10),
               inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(120,100,72,.18);
    backdrop-filter:blur(26px) saturate(1.6); -webkit-backdrop-filter:blur(26px) saturate(1.6);
    color:var(--encre); }
  .capsule.pose .cap-nav a, .capsule.pose .cap-pro { color:var(--encre); }
  .capsule.pose .burger { color:var(--encre); }
  /* Un seul tracé, qui prend la couleur de la capsule : le blanc sur la photo
     et l'encre sur le fond clair sont le même objet, pas deux images qu'on
     permute. Les empattements sont fins — sur un mur clair de la photo, un
     blanc pur s'évapore ; une ombre portée le tient sans assombrir l'image.
     Posé sur le crème, il n'en a plus besoin. */
  .logo { display:block; height:clamp(22px,1.75vw,26px); width:auto; flex:none;
    fill:#fff;
    filter:drop-shadow(0 1px 4px rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(0,0,0,.24));
    transition:fill .25s, filter .25s; }
  .capsule.pose .logo { fill:var(--encre); filter:none; }

  /* RÈGLE : un seul bouton NOIR PLEIN par écran, et c'est l'action
     principale — « Rechercher ». Le header n'a donc droit qu'à du texte
     et à une arête. Sinon trois pastilles se disputent le même regard. */
  .cap-pro { color:#fff; opacity:.86; white-space:nowrap; }
  .cap-pro:hover { color:#fff; opacity:1; }
  .capsule.pose .cap-pro { color:var(--encre2); }
  .capsule.pose .cap-pro:hover { color:var(--encre); }

  .btn-fantome { display:inline-flex; align-items:center; justify-content:center;
    border-radius:999px; padding:11px 21px; font-weight:500; white-space:nowrap;
    color:#fff; border:1px solid rgba(255,255,255,.45); background:transparent;
    transition:background .18s, border-color .18s, color .18s; }
  .btn-fantome:hover { color:#fff; background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.75); }
  .capsule.pose .btn-fantome { color:var(--encre); border-color:rgba(23,21,15,.28); }
  .capsule.pose .btn-fantome:hover { color:var(--encre); background:rgba(23,21,15,.06);
    border-color:rgba(23,21,15,.5); }
  .cap-nav { display:flex; align-items:center; gap:clamp(16px,1.9vw,27px);
    font-size:15.5px; font-weight:400; position:relative; }
  .cap-nav a { color:#fff; opacity:.94; }
  .cap-nav a:hover { color:#fff; opacity:1; }

  /* Quatre métiers sur dix tenaient dans la capsule ; les six autres
     n'existaient nulle part sur le bureau. Les trois points les ouvrent.
     Le déclencheur reste du TEXTE — la règle du header tient : un seul
     bouton plein par écran, et c'est « Rechercher ». */
  .cap-plus { border:0; padding:7px 11px; margin:0 -4px; background:transparent;
    border-radius:999px; color:#fff; opacity:.94; font:inherit; font-size:15.5px;
    line-height:1; letter-spacing:.13em; cursor:pointer; transition:background .18s, opacity .18s; }
  .cap-plus:hover { opacity:1; background:rgba(255,255,255,.16); }
  .cap-plus[aria-expanded="true"] { opacity:1; background:rgba(255,255,255,.24); }
  .capsule.pose .cap-plus { color:var(--encre); }
  .capsule.pose .cap-plus:hover { background:rgba(23,21,15,.06); }
  .capsule.pose .cap-plus[aria-expanded="true"] { background:rgba(23,21,15,.1); }

  /* Le panneau reprend EXACTEMENT le verre du menu du téléphone : le site a
     déjà un composant « surface qui se pose au-dessus », il n'en faut pas un
     second. Une barre translucide laisse voir la photo sans gêner ; dix lignes
     de texte, non — un verre blanc à 16 % laissait passer le h1 en entier.
     C'est pourquoi cette surface-là ne s'inverse pas : elle est claire des
     deux côtés, comme le menu du téléphone posé sur la même photo. */
  .cap-panneau { position:absolute; top:calc(100% + 15px); left:-14px; z-index:9;
    min-width:396px; padding:14px 10px; border-radius:22px;
    background:rgba(250,248,244,.96); color:var(--encre);
    backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5);
    box-shadow:0 18px 48px rgba(52,40,24,.24), 0 0 0 1px rgba(255,255,255,.9); }
  .cap-panneau[hidden] { display:none; }
  .cap-pan-grille { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px 6px; }
  .cap-panneau a { display:block; color:var(--encre); opacity:1; font-size:15.5px;
    padding:11px 14px; border-radius:12px; white-space:nowrap; transition:background .15s, color .15s; }
  .cap-panneau a:hover, .cap-panneau a:focus-visible { background:var(--creux); color:var(--brun); }
  .cap-pan-bas { margin:10px 4px 0; padding-top:12px; border-top:1px solid var(--filet); }
  .cap-pan-bas a { font-size:14.5px; color:var(--encre2); padding:9px 10px; }
  .cap-dr { margin-left:auto; display:flex; align-items:center; gap:clamp(12px,1.7vw,24px);
    font-size:15.5px; }
  .btn-noir { display:inline-flex; align-items:center; justify-content:center;
    background:var(--noir); color:#fff; border-radius:999px; font-weight:500;
    padding:12px 24px; white-space:nowrap; border:0; font:inherit; font-weight:500;
    cursor:pointer; }
  .btn-noir:hover { color:#fff; background:#211D17; }
  .burger { display:none; width:44px; height:44px; align-items:center; justify-content:center;
    background:none; border:0; color:#fff; cursor:pointer; flex:none; }

  /* Le bloc ne pend plus au bas de l'écran : il se centre dans la hauteur
     utile. Et sa marge gauche vaut celle de la capsule PLUS la marge
     intérieure de la capsule — le surtitre, le titre, le sous-titre et la
     barre tombent exactement sous le logo. C'est le seul alignement que
     l'œil vérifie tout seul. */
  .hero-bloc { position:relative; z-index:2; margin-block:auto;
    padding:0 var(--pad) 0 calc(var(--pad) + var(--cap-px));
    display:flex; flex-direction:column; align-items:flex-start;
    gap:clamp(18px,2.4vw,28px); color:#fff;
    width:100%; max-width:calc(760px + var(--pad) * 2 + var(--cap-px)); }
  .hero h1 { font-size:clamp(36px,5.2vw,64px); font-weight:200; letter-spacing:-0.038em;
    line-height:1.02;
    text-shadow:0 1px 2px rgba(10,9,7,.58), 0 2px 11px rgba(10,9,7,.58),
      0 4px 30px rgba(10,9,7,.46); }
  .hero h1 b { font-weight:500; }
  .hero-sous { font-size:clamp(15.5px,1.35vw,19px); font-weight:300; line-height:1.5;
    color:rgba(255,255,255,.92); max-width:34em;
    text-shadow:0 1px 2px rgba(10,9,7,.58), 0 2px 11px rgba(10,9,7,.58),
      0 4px 26px rgba(10,9,7,.46); }


  /* Pas de champ blanc posé sur du verre : le champ EST le verre, et un
     simple filet dit où écrire. C'est ce qui distingue la barre d'un
     composant de place de marché — elle appartient à la photo. */
  .barre { display:flex; align-items:center; gap:14px;
    padding:12px 12px 12px clamp(20px,2.2vw,30px); border-radius:999px;
    background:var(--verre-fond); border:1px solid var(--verre-filet);
    box-shadow:0 6px 26px rgba(0,0,0,.15), inset 0 -1px 11px rgba(255,255,255,.46);
    backdrop-filter:blur(11px) saturate(1.15); -webkit-backdrop-filter:blur(11px) saturate(1.15);
    width:100%; max-width:680px; }
  .champ { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px;
    border-bottom:1px solid rgba(255,255,255,.55); padding:7px 2px; cursor:text;
    transition:border-color .18s; }
  .champ input { flex:1 1 auto; min-width:0; border:0; background:none; padding:0;
    font:inherit; font-size:clamp(17px,1.65vw,20px); color:#fff; }
  .champ input::placeholder { color:rgba(255,255,255,.72); opacity:1; }
  .champ input:focus { outline:none; }
  .champ:focus-within { border-bottom-color:#fff; }
  .hors-vue { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .geo { flex:none; width:34px; height:34px; border-radius:999px; border:0; padding:0;
    background:none; color:rgba(255,255,255,.75); cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:background .18s, color .18s; }
  .geo:hover { background:rgba(255,255,255,.2); color:#fff; }
  .chercher { gap:9px; }
  .geo .mot { display:none; }
  .hero .chercher { height:52px; padding:0 28px; font-size:16.5px; flex:none; }

  /* ── la liste d'adresses ─────────────────────────────────────
     Le panneau est posé sur le <body> en position fixe : le hero est
     en overflow:hidden, un panneau ancré dans la barre serait coupé.
     Même verre que le menu du téléphone — papier clair, encre foncée.
     Sur une photo, c'est la seule combinaison qui reste lisible. */
  .sugg { position:fixed; z-index:120; display:none; padding:6px;
    background:rgba(250,248,244,.97); border-radius:22px;
    box-shadow:0 18px 48px rgba(52,40,24,.24), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter:blur(24px) saturate(1.5);
    -webkit-backdrop-filter:blur(24px) saturate(1.5);
    overflow-y:auto; overscroll-behavior:contain; }
  .sugg.ouvert { display:block; }
  .sugg ul { list-style:none; margin:0; padding:0; }
  .sugg .choix { width:100%; display:block; text-align:left; border:0;
    background:none; font:inherit; color:var(--encre); cursor:pointer;
    padding:10px 15px; border-radius:16px; transition:background .14s; }
  .sugg .choix:hover,
  .sugg .choix[aria-selected="true"] { background:rgba(23,21,15,.06); }
  .sugg .choix b { display:block; font-weight:500; font-size:16px; line-height:1.32; }
  .sugg .choix span { display:block; margin-top:1px; font-size:13.5px;
    color:rgba(23,21,15,.55); }
  .sugg .mot { margin:0; padding:13px 15px; font-size:14px;
    color:rgba(23,21,15,.55); }

  /* Titres de groupes du panneau (recherche étendue du 31/08) —
     même règle que dans resultats.css : c'est le même panneau. */
  .sugg .groupe { margin:0; padding:11px 15px 3px; font:500 10.5px/1 "DM Mono", ui-monospace, monospace;
    letter-spacing:.16em; text-transform:uppercase; color:rgba(138,106,69,.9); }
  .sugg li:not(:first-child) .groupe { border-top:1px solid rgba(23,21,15,.07); margin-top:6px; padding-top:12px; }
  .geo[aria-busy="true"] { opacity:.45; }


  /* ── 02 · les métiers ──────────────────────────────────────── */
  /* Un rail, partout. Les neuf liens restent dans la page — on n'en cache
     aucun au robot, on n'en montre que trois à l'œil. */
  .metiers::-webkit-scrollbar { display:none; }
  .metiers { display:flex; gap:clamp(14px,1.4vw,22px); overflow-x:auto;
    scroll-snap-type:x mandatory; scroll-behavior:smooth;
    margin-right:calc(var(--pad) * -1); padding-right:var(--pad);
    padding-bottom:4px; scrollbar-width:none; -ms-overflow-style:none; }
  .metiers::-webkit-scrollbar { display:none; }
  .metier { flex:0 0 calc((100% - 2 * clamp(14px,1.4vw,22px)) / 3);
    scroll-snap-align:start; }

  /* Les flèches se posent SUR les cartes : le verre n'existe que s'il a une
     image derrière lui. Sur le fond crème, une pastille de verre ne dirait
     rien du tout. */
  /* Titre à gauche, flèches à droite, sur la même ligne : hors des cartes,
     elles ne couvrent plus rien et ne concurrencent plus le bouton posé sur
     l'image. Sur le fond crème, elles se dessinent par leur arête. */
  .tete-rail { display:flex; align-items:flex-end; justify-content:space-between;
    gap:24px; }
  .fleches { display:flex; gap:10px; flex:none; padding-bottom:4px; }
  .fleche-rail { width:46px; height:46px; border-radius:999px; display:flex;
    align-items:center; justify-content:center; cursor:pointer; padding:0; flex:none;
    border:1px solid rgba(23,21,15,.22); background:transparent; color:var(--encre);
    transition:background .18s, border-color .18s, opacity .18s; }
  .fleche-rail:hover { background:rgba(23,21,15,.06); border-color:rgba(23,21,15,.45); }
  .fleche-rail:disabled { opacity:.26; pointer-events:none; }

  /* Le bloc de mission est une déclaration, pas un chapeau : sa propre bande,
     un filet vertical à gauche, un retrait large. Le filet dit « ceci est une
     citation » avant même qu'on ait lu. */
  .mission-bande { padding:clamp(66px,8.4vw,124px) var(--pad) clamp(56px,7vw,100px); }
  .mission { border-left:1px solid var(--filet2);
    padding-left:clamp(24px,7.4vw,118px);
    font-family:"Instrument Serif","Iowan Old Style",Georgia,serif;
    font-weight:400; font-size:clamp(28px,4.1vw,54px);
    letter-spacing:-0.012em; line-height:1.16; max-width:none; text-wrap:pretty; }
  /* L'ancienne façon est dite en italique, plus bas de ton ; la promesse
     revient au romain et à l'encre pleine. La typo raconte le basculement. */
  .mission .avant { font-style:italic; color:var(--gris); }
  .mission .apres { color:var(--encre); }

  /* Titre de section et flèches sur la même ligne : hors des cartes, les
     flèches ne couvrent plus rien et ne concurrencent plus le bouton posé
     sur l'image. Sur le fond crème, elles passent en arête. */
  /* Le texte au-dessus, l'image pleine en dessous, l'action posée dessus :
     la grammaire de carte de Glamsquad, dans notre matière. */
  .metier { display:flex; flex-direction:column; color:var(--encre); }
  /* Hauteur FIXE, pas minimale : sinon un titre qui passe sur deux lignes
     décale son image et le rail perd sa ligne d'horizon. Et le texte est calé
     EN BAS du bloc : le blanc tombe au-dessus du titre, jamais entre la phrase
     et la photo qu'elle annonce. */
  .metier-texte { display:flex; flex-direction:column; justify-content:flex-end;
    gap:4px; height:var(--tete-h); padding:0 2px 9px; }
  .metier-texte > * { flex:none; }
  .metier h3 { font-size:clamp(19px,1.7vw,22px); font-weight:400; letter-spacing:-0.02em;
    line-height:1.22; }
  .metier p { font-size:15px; color:var(--encre2); line-height:1.5; }

  .vignette { position:relative; aspect-ratio:4/5; overflow:hidden;
    border-radius:var(--r-carte); background:var(--creux); }
  /* <picture> ajoute un niveau que la mise en page ne doit pas voir :
     display:contents l'efface du calcul, l'image reste enfant direct. */
  .vignette picture, .tel-app picture { display:contents; }
  .vignette img { width:100%; height:100%; object-fit:cover;
    transition:transform .6s cubic-bezier(.2,.7,.3,1); }
  /* Rien ne bouge tout seul : la photo ne respire qu'en réponse au survol. */
  .metier:hover .vignette img { transform:scale(1.05); }

  .sur-image { position:absolute; left:16px; bottom:16px; z-index:2;
    display:inline-flex; align-items:center; border-radius:999px;
    padding:11px 22px; font-size:15.5px; font-weight:500; color:#fff;
    border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.14);
    backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
    transition:background .2s, color .2s, border-color .2s; }
  .metier:hover .sur-image { background:#fff; color:var(--encre); border-color:#fff; }
  .vignette::after { content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(0deg, rgba(10,9,7,.42) 0%, rgba(10,9,7,.06) 28%, rgba(10,9,7,0) 46%); }

  /* ── « Elles arrivent » ──────────────────────────────────────
     Le seul mouvement autonome de la page, et il ne joue QU'UNE FOIS,
     à l'entrée de la section : les cartes viennent de la droite et se
     posent. C'est le déplacement, dit littéralement. */
  .anim .metier { opacity:0; transform:translateX(26px); }
  .metiers.arrive .metier { opacity:1; transform:none;
    transition:opacity .5s ease, transform .55s cubic-bezier(.22,.8,.3,1); }
  .metiers.arrive .metier:nth-child(1) { transition-delay:0ms; }
  .metiers.arrive .metier:nth-child(2) { transition-delay:55ms; }
  .metiers.arrive .metier:nth-child(3) { transition-delay:110ms; }
  .metiers.arrive .metier:nth-child(4) { transition-delay:165ms; }
  .metiers.arrive .metier:nth-child(5) { transition-delay:220ms; }
  .metiers.arrive .metier:nth-child(6) { transition-delay:275ms; }
  .metiers.arrive .metier:nth-child(7) { transition-delay:330ms; }
  .metiers.arrive .metier:nth-child(8) { transition-delay:385ms; }
  .metiers.arrive .metier:nth-child(9) { transition-delay:440ms; }

  /* ── 03 · les trois temps ──────────────────────────────────── */
  /* Le compteur : quatre temps, des libellés courts, et le chiffre pour
     seul élément graphique. Le quatrième rompt la négation — c'est le seul
     geste qu'on vous demande, et son chiffre passe au brun pour le dire. */
  /* Une seule ligne, tenue entre deux filets. Les trois négations, puis
     l'action au bout : le bouton n'est plus posé sous le bloc, il est le
     quatrième temps. Un bloc bas n'a pas besoin de l'air d'un bloc haut,
     d'où la bande resserrée. */
  .bande.fine { padding:clamp(36px,4.2vw,58px) var(--pad); }
  .temps { display:flex; align-items:stretch; flex-wrap:wrap;
    border-top:1px solid var(--filet2); border-bottom:1px solid var(--filet2); }
  /* base 0 + fit-content : les trois temps ont la même largeur tant qu'il y a
     la place, et le plus long cesse de rétrécir avant de se couper. */
  .temps .t { flex:1 1 0; min-width:fit-content; display:flex; align-items:center;
    padding:16px clamp(14px,1.8vw,26px) 16px 0; }
  /* La case est centrée dans la bande ; le chiffre et le mot restent alignés
     sur la ligne de base grâce à cette enveloppe. Sans elle, le texte se colle
     en haut dès que la quatrième case impose sa hauteur. */
  .temps .ligne { display:flex; align-items:baseline; gap:11px; }
  .temps .t + .t { border-left:1px solid var(--filet2);
    padding-left:clamp(14px,1.8vw,26px); }
  .num { font-family:"DM Mono",ui-monospace,Menlo,monospace; font-size:11.5px;
    letter-spacing:.19em; color:var(--gris); flex:none; }
  .temps h3 { font-size:clamp(17px,1.5vw,20px); font-weight:400;
    letter-spacing:-0.02em; line-height:1.3; white-space:nowrap; }
  /* La quatrième case remplit sa cellule d'un filet à l'autre : quatre cases
     de même hauteur, et le bouton cesse de flotter au milieu d'une grille. */
  .temps .bout { flex:none; display:flex; align-items:center; gap:9px;
    border-left:1px solid var(--filet2); background:var(--encre); color:#fff;
    margin:-1px 0; padding:0 clamp(20px,2.2vw,32px); font-size:16px; font-weight:500;
    white-space:nowrap; transition:background .18s; }
  .temps .bout:hover, .temps .bout:focus-visible { background:#3A342A; }
  .temps .bout svg { flex:none; }

  /* ── 04 · l'application ────────────────────────────────────── */
  /* La seule bande sombre de la page après le premier écran. Un écran de
     téléphone est lumineux : sur du crème il se fond, sur l'encre il brille.
     C'est le seul endroit où le fond sombre travaille pour le contenu. */
  .bande-app { background:var(--encre); color:var(--papier); }
  .bande-app .eyebrow { color:#8F887A; }
  .bande-app .titre-sect { color:var(--papier); }
  .app { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:clamp(36px,5vw,84px); align-items:center; }
  .app .intro { color:#B7B0A2; max-width:50ch; }
  .puces { display:flex; flex-direction:column; gap:14px; font-size:16px; color:#B7B0A2; }
  .puce { display:flex; align-items:flex-start; gap:12px; }
  .puce svg { flex:none; margin-top:1px; }
  .magasins { display:flex; flex-wrap:wrap; gap:10px; }
  .magasin { display:inline-flex; align-items:center; gap:9px; padding:12px 22px;
    border-radius:999px; border:1px solid rgba(250,248,244,.34);
    background:transparent; color:var(--papier); font-size:15px; }
  .magasin:hover { color:var(--encre); background:var(--papier); border-color:var(--papier); }
  .note-mag { font-size:14px; color:#8F887A; }

  /* Un seul écran, entier, dans son cadre : le bouton « Reprendre
     rendez-vous » ferme la capture, donc l'argument et sa preuve tiennent
     dans la même image. */
  .tel-app { position:relative; border-radius:34px; padding:9px; background:#2A2620;
    box-shadow:0 30px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(250,248,244,.13);
    max-width:372px; width:100%; margin:0 auto; }
  .tel-app img { width:100%; height:auto; display:block; border-radius:26px; }

  /* ── 07 · questions ────────────────────────────────────────── */
  /* Les trois garanties tiennent en une ligne chacune : l'icône et
     l'affirmation. Le détail est dans la réponse en face — le dire deux fois
     était précisément ce qui faisait doublon entre les deux anciennes sections. */
  /* 21/09 — la bande de confiance, juste sous la photo : le héro ne garde que
   le titre, une phrase et la recherche. Compteurs (un chiffre, une ligne,
   côte à côte, rien dessous : consigne du 06/09), notes des stores et trois
   engagements, en encre sur papier creusé — ce qui se lisait mal en blanc sur
   la photo se lit ici d'un coup d'œil. */
.bande-confiance { background:var(--creux); padding:clamp(22px,2.8vw,36px) var(--pad);
  border-bottom:1px solid var(--filet); }
.bande-confiance .large { display:flex; flex-direction:column; align-items:center;
  gap:clamp(12px,1.4vw,16px); }
.bc-chiffres { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:6px 36px; margin:0; padding:0; list-style:none;
  color:var(--encre2); font-size:clamp(14px,1.1vw,15.5px); }
.bc-chiffres li { display:inline-flex; align-items:baseline; gap:7px; }
.bc-chiffres b { font-size:clamp(20px,2vw,25px); font-weight:600; color:var(--encre);
  letter-spacing:-0.01em; }
.bc-chiffres li.note { display:inline-block; }
.bc-chiffres .note b { font-size:inherit; }
.bc-chiffres .etoile { color:var(--brun); }
/* Les engagements portent leur propre feuille (welcome_engagements()) :
   deux classes ici pour passer devant, quel que soit l'ordre d'impression. */
.bande-confiance .wl-engagements { justify-content:center;
  font-size:clamp(13.5px,1vw,14.5px); color:var(--encre2); }
@media (max-width:640px){
  .bc-chiffres { gap:4px 22px; }
}

.garanties { display:flex; flex-direction:column; gap:15px; }
  .garantie { display:flex; gap:13px; align-items:center; }
  .garantie svg { flex:none; }
  .garantie b { font-size:17px; font-weight:400; letter-spacing:-0.015em;
    color:var(--encre); line-height:1.3; }
  .faq { display:grid; grid-template-columns:minmax(260px,360px) 1fr;
    gap:clamp(28px,4.4vw,72px); align-items:start; }
  details.q { border-top:1px solid var(--filet); }
  details.q:last-of-type { border-bottom:1px solid var(--filet); }
  details.q summary { display:flex; justify-content:space-between; align-items:flex-start;
    gap:20px; padding:22px 0; cursor:pointer; list-style:none;
    font-size:clamp(17.5px,1.6vw,21px); font-weight:400; letter-spacing:-0.018em; line-height:1.35; }
  details.q summary::-webkit-details-marker { display:none; }
  details.q summary svg { flex:none; margin-top:4px; transition:transform .2s; color:var(--gris); }
  details.q[open] summary svg { transform:rotate(180deg); color:var(--brun); }
  details.q p { font-size:16px; color:var(--encre2); line-height:1.62; max-width:68ch;
    padding:0 0 22px; }

  /* ── 08 · bandeau pro ──────────────────────────────────────── */
  .pro { display:flex; align-items:center; justify-content:space-between;
    gap:clamp(20px,3vw,48px); padding:clamp(24px,2.8vw,34px) clamp(22px,3vw,40px);
    border:1px solid var(--filet2); border-radius:var(--r-carte); background:var(--creux);
    flex-wrap:wrap; }
  .pro h2 { font-size:clamp(19px,1.9vw,24px); font-weight:400; letter-spacing:-0.02em; }
  .pro p { font-size:16px; color:var(--encre2); }


  /* ── 09 · pied de page ─────────────────────────────────────── */
  /* Deux étages : la marque, puis l'inventaire. Le juridique tient sur une
     ligne au ras du sol — présent, atteignable, jamais au rang d'un métier.
     C'est le seul bloc répété sur les 200 pages : chaque lien vaut 200 liens. */
  footer.pied { background:var(--creux); border-top:1px solid var(--filet);
    padding:clamp(40px,4.4vw,64px) var(--pad) clamp(26px,2.8vw,38px); }
  .pied-fronton { display:flex; align-items:flex-start; justify-content:space-between;
    gap:clamp(20px,3vw,50px); flex-wrap:wrap;
    padding-bottom:clamp(26px,3vw,38px); border-bottom:1px solid var(--filet); }
  .pied .marque { width:clamp(118px,10vw,146px); height:auto; fill:var(--encre); display:block; }
  .devise { font-size:15.5px; line-height:1.5; color:var(--encre2); max-width:38ch; }
  .badges { display:flex; gap:10px; flex-wrap:wrap; }
  .pied-grille { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(24px,2.6vw,42px); }
  .pied-col { display:flex; flex-direction:column; gap:9px; min-width:0; }
  .pied-col a { font-size:15px; line-height:1.42; color:var(--encre); }
  .pied-col a:hover { color:var(--brun); }
  .pied-col a.autres { color:var(--gris); }
  .pied-tete { font-family:"DM Mono",ui-monospace,monospace; font-size:11px;
    letter-spacing:.17em; text-transform:uppercase; color:var(--gris); margin-bottom:2px; }
  .pied-bas { display:flex; justify-content:space-between; align-items:center; gap:16px 24px;
    padding-top:clamp(20px,2.2vw,26px); border-top:1px solid var(--filet2); flex-wrap:wrap; }
  .pied-bas .copy { font-size:14px; color:var(--gris); }
  .legal { display:flex; flex-wrap:wrap; gap:6px 20px; }
  .legal a { font-size:14px; color:var(--gris); }
  .legal a:hover { color:var(--encre); }
  .pastille { padding:9px 18px; border-radius:8px; border:1px solid var(--filet2);
    font-size:14.5px; color:var(--encre2); }
  .pastille:hover { color:var(--encre); border-color:var(--gris); }

  /* ── points de rupture ─────────────────────────────────────── */
  @media (max-width:1140px) { .metier { flex-basis:calc((100% - clamp(14px,1.4vw,22px)) / 2); } }
  @media (max-width:980px) {
    .cap-nav { display:none; }
    .burger { display:flex; }
    .app { grid-template-columns:1fr; }

    .faq { grid-template-columns:1fr; }
    .pied-grille { grid-template-columns:repeat(3,minmax(0,1fr)); }
  }
  @media (max-width:860px) {
    /* La ligne se rompt : chaque temps reprend son filet du dessus, et le
       bouton prend toute la largeur au bout de la pile. */
    .temps { display:block; border-top:0; border-bottom:0; }
    .temps .t { padding:14px 0; border-top:1px solid var(--filet2); }
    .temps .t + .t { border-left:0; padding-left:0; }
    .temps h3 { white-space:normal; font-size:17.5px; }
    .temps .bout { border-left:0; margin:18px 0 0; padding:16px;
      border-radius:9px; justify-content:center; }
    .barre { flex-direction:column; align-items:stretch; gap:16px;
      border-radius:26px; padding:20px 22px; }
    .hero .chercher { width:100%; height:auto; padding:16px 24px; }
  }
  @media (max-width:720px) {
    /* Sur téléphone la capsule tient le logo, « Je suis pro » et le menu ;
       « Télécharger l'app » vit dans le burger, sinon le groupe de droite
       déborde de la page.
       01/10 — « JE SUIS PRO » RESTE VISIBLE (Nicolas : « un bouton Je suis
       pro en dehors du menu qui s'ouvre »), en pastille à ARÊTE : la règle du
       header tient, un seul bouton plein par écran (« Rechercher »). Même bloc
       dans coquille.css. */
    .cap-pro { display:inline-flex; align-items:center; min-height:36px; padding:0 14px;
      border-radius:999px; border:1px solid rgba(255,255,255,.55); font-size:14px; opacity:1; }
    .capsule.pose .cap-pro { color:var(--encre); border-color:rgba(23,21,15,.28); }
    .cap-dr { gap:6px; }
    .btn-fantome { display:none; }
    .logo { height:23px; }

    /* Le hero de téléphone n'est PAS le hero d'ordinateur rétréci.
       Trois choses changent vraiment : */
    /* ① le voile change de sens : vertical, pas de rideau latéral. */
    /* ⚠️ SUR TÉLÉPHONE LE RIDEAU DE GAUCHE NE SERT À RIEN : le bloc de texte
       prend toute la largeur, et le cadrage à 75 % remplit l'écran de la porte
       blanche. Photo nue, mesuré à 390x844 : capsule 1,00 · texte 1,02 ·
       barre 1,16 — le pire cas de tout le site. Le voile redevient donc
       VERTICAL, avec un plancher sur toute la hauteur ; sans ce plancher le
       texte reste à 2,3:1 au milieu — chiffre vérifié, pas supposé : un
       plancher à 0,32 ne donnait que 2,32. Il faut 0,52. Après : capsule 7,3 ·
       texte 4,5 · barre 5,4 (8 % de pixels les pires, ombres non comptées).
       ⭐ 21/09 (2.10.96) — PLUS DE PLANCHER SUR TOUTE LA HAUTEUR (« trop
       sombre », Nicolas) : dense sous la capsule, allégé sur les visages,
       une bande derrière le texte (28 à 60 %), presque rien sur le bas.
       Mesuré à 390x844 : h1 3,3 (grand texte : 3 suffit) · phrase 3,9 ·
       champ 2,9 — avant 4,1 · 4,5 · 3,4. Accepté par Nicolas en voyant
       les deux ; les ombres du texte portent le reste.
       Le cadrage 75 %, lui, reste JUSTE avec cette photo : les deux visages
       tiennent dans le portrait — vérifié en rendu, 78 % coupait la cliente. */
    .hero-voile { background:
      linear-gradient(180deg, rgba(10,9,7,.64) 0%, rgba(10,9,7,.52) 8%,
        rgba(10,9,7,.30) 14%, rgba(10,9,7,.26) 18%, rgba(10,9,7,.44) 28%,
        rgba(10,9,7,.48) 44%, rgba(10,9,7,.44) 60%, rgba(10,9,7,.18) 74%,
        rgba(10,9,7,.06) 100%); }
    /* ② le cadrage : 75 %. ⚠️ Le commentaire d'août disait « 55 % » alors que
          la règle en dessous dit 75 % depuis longtemps — il décrivait une photo
          qui n'est plus là. Corrigé le 05/09 : avec « l'échange à l'entrée »,
          75 % est la BONNE valeur, et la fenêtre est étroite. Le portrait ne
          montre que 361 px de l'image sur 1400 : à 75 % on voit x 779→1140,
          soit les DEUX visages (la cliente à 810-880, la pro à 1075-1140).
          En dessous de 74 % on perd la pro, au-dessus de 78 % on coupe la
          cliente. Vérifié en rendu, pas au jugé.
          ⚠️ La vraie séance devra livrer un cadrage PORTRAIT dédié : ici le
          milieu de l'écran est occupé par la porte surexposée, et c'est ELLE
          qui force le voile lourd du dessus. */
    .hero-photo { object-position:75% center; }
    /* ③ le bloc prend toute la largeur */
    /* Sur téléphone la barre s'étire : les deux marges doivent alors être
       égales, sinon l'objet le plus large de l'écran est de travers. */
    .hero-bloc { align-items:stretch; gap:clamp(14px,4vw,20px);
      padding-inline:calc(var(--pad) + var(--cap-px)); }
    .hero h1 { font-size:clamp(33px,9.2vw,42px); }

    /* Vestige de l'ancienne barre à un seul champ : elle repassait en grille
       ici et écrasait l'empilement posé plus haut. Les deux champs et le
       bouton s'empilent, chacun sur toute la largeur. */
    .barre { max-width:none; }

    /* Sur téléphone, le pouce fait le travail : les flèches disparaissent. */
    /* Un peu plus large et un cran plus petit : sur téléphone aussi, chaque
       titre et chaque phrase tiennent sur une ligne. */
    .metier { flex-basis:min(316px,80vw); }
    .metier h3 { font-size:18px; }
    .metier p { font-size:14.5px; }
    /* Sur téléphone, on fait glisser du doigt : les flèches n'ont plus d'objet. */
    .fleches { display:none; }

  }
  @media (max-width:520px) {
    .pied-grille { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 20px; }
    .pied-bas { flex-direction:column; align-items:flex-start; }
  }
  /* Petits téléphones (jusqu'à 359 px de large) : logo et « Je suis pro » un
     cran plus petits, pour que logo + pastille + burger tiennent sans déborder. */
  @media (max-width:359px) {
    .capsule { gap:10px; }
    .logo { height:19px; }
    .cap-pro { min-height:34px; padding:0 11px; font-size:13px; }
  }
  @media (prefers-reduced-motion:reduce) {
    * { animation:none !important; transition:none !important; }
    .metier { opacity:1 !important; transform:none !important; }
  }