/* ═══════════════════════════════════════════════════════════════════
   LA COQUILLE — capsule de navigation, menu du téléphone, pied de page.
   Extrait automatiquement de `accueil-v2.css` : ce fichier ne s'écrit
   pas à la main, il se régénère. La page d'accueil garde sa feuille
   complète et autonome ; les guides chargent celle-ci PUIS `guide.css`.
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
     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; }
/* 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; }
/* 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); }
/* ⚠️ 05/09 — TROU D'EXTRACTION COMBLÉ, ne pas le reperdre. Ce fichier est
   extrait d'`accueil-v2.css` ; l'extraction avait repris les deux variantes
   `.capsule.pose` ci-dessous MAIS PAS la règle de base de `.btn-fantome`
   ni son `display:none` sous 720 px. Conséquence, du 31/08 au 05/09, sur
   TOUTE page servie par cette coquille sans rattrapage local — les 3 guides
   et les ~190 fiches pro — « Télécharger l'app » s'affichait en TEXTE BRUT,
   sans pastille sur ordinateur, et sur téléphone SUR DEUX LIGNES par-dessus
   le logo et le burger. Constaté à l'œil, puis confirmé en style calculé :
   border-width 0, border-radius 0, padding 0, display block, hauteur 71 px.
   Les pages de résultats y échappaient parce qu'elles portent leur propre
   rattrapage en fin de `resultats.css` — qui devient donc redondant.
   ⛔ Si ce fichier est un jour régénéré, EMPORTER CES DEUX BLOCS. */
.btn-fantome { display:inline-flex; align-items:center; justify-content:center;
    border-radius:999px; padding:10px 18px; font-size:14.5px; white-space:nowrap;
    border:1px solid rgba(255,255,255,.5); color:#fff;
    transition:background .2s, color .2s, border-color .2s; }
.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; }
.burger { display:none; width:44px; height:44px; align-items:center; justify-content:center;
    background:none; border:0; color:#fff; cursor:pointer; flex:none;
    /* 01/10 — `padding:0` : sur les fiches pro, le thème parent donne une marge
       intérieure à TOUS les boutons ; l'icône (23 px) tombait à 12 px de large. */
    padding:0; }
/* ── 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); }
@media (max-width:980px) {
  .cap-nav { display:none; }
  .burger { display:flex; }
  .pied-grille { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:720px) {
  /* 01/10 — « JE SUIS PRO » RESTE DANS LA CAPSULE sur téléphone (Nicolas : « un
     bouton Je suis pro en dehors du menu qui s'ouvre, pour qu'il soit visible
     directement »). Pastille à ARÊTE, comme « Télécharger l'app » au bureau : la
     règle du header tient, un seul bouton plein par écran (« Rechercher »).
     Le menu du téléphone garde aussi son lien. Même bloc dans accueil-v2.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; }
  /* Sous 720 px la capsule ne tient plus « Télécharger l'app » : il vit dans le
     burger. C'est la moitié manquante du trou d'extraction signalé plus haut. */
  .btn-fantome { display:none; }
  .logo { height:23px; }
}
/* Petits téléphones (jusqu'à 359 px de large) : logo et pastille un cran plus
   petits, pour que logo + « Je suis pro » + 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 (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; }
}