/* ModAlpes — feuille de style unique.
   Identité : noir et blanc, sans couleur d’accent (le rouge a été retiré le 13/10/2026). Poppins partout (charte du parc),
   hébergée sur le site. Fond clair par défaut, sections noires en contrepoint. */

@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --noir:#0e0e0f;
  --noir-2:#17171a;
  --noir-3:#222226;
  --blanc:#fff;
  --brume:#f4f3f0;
  --accent:#0e0e0f;          /* accent = noir : pas de rouge sur le site (choix du 13/10/2026) */
  --accent-hover:#2c2c30;
  --accent-inverse:#fff;      /* accent sur fond noir */
  --creme:#f4f3f0;
  --creme-dim:#b4b3b0;
  --encre:#151516;
  --encre-dim:#5a5a5c;
  --trait:#e4e2dd;
  --trait-sombre:#2e2e32;

  --font-display:"Poppins",ui-sans-serif,system-ui,sans-serif;
  --font-sans:"Poppins",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"Poppins",ui-sans-serif,system-ui,sans-serif; /* volontairement Poppins : aucune police à chasse fixe sur ce parc, ne pas « réparer » */

  --header-h:76px;
  --pad-x:clamp(20px,5vw,64px);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --radius:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;touch-action:manipulation}   /* pas de zoom au double-tap ; le pincer-zoomer reste possible */
body{margin:0;font-family:var(--font-sans);font-size:1rem;line-height:1.65;color:var(--encre);background:var(--blanc);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:1240px;margin:0 auto;padding-inline:var(--pad-x)}

/* ---------- Header : clair, transparent en haut, flouté au défilement ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:40}
/* Fond du header au défilement : blanc dégradé 100 % en haut → 0 % en bas, flou dégradé de même.
   Porté par un pseudo-élément pour que le masque ne touche ni le logo ni les boutons ; on fait varier l'opacité (un dégradé ne se transitionne pas). */
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,0) 100%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,transparent 100%);opacity:0;transition:opacity .25s ease}
.site-header.is-scrolled::before{opacity:1}
/* menu des métiers collé dessous : le header prend le même fond blanc uni que la bande */
.site-header.menu-colle:not(.nav-open)::before{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;-webkit-mask-image:none;mask-image:none;opacity:1}
.site-header.nav-open::before{opacity:0;transition:none}
.site-header-inner{padding:0 clamp(16px,2.5vw,32px);height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-logo{display:inline-flex;align-items:center;text-decoration:none;position:relative;z-index:110}
.site-header .site-logo{color:var(--noir);transition:color .3s ease}
.site-header .logo-mono{height:48px;width:auto}
.site-header.nav-open .site-logo{color:#fff}
.header-actions{display:flex;align-items:center;gap:14px;position:relative;z-index:110}

/* Bouton contact : blanc, bordure noire, ombre dure 100 % noire */
.btn-contact{display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border:2px solid var(--noir);border-radius:999px;background:#fff;color:var(--noir);font-size:14px;font-weight:600;text-decoration:none;box-shadow:4px 4px 0 0 #000;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease}
@media (hover:hover){.btn-contact:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 #000}}
.btn-contact:active{transform:translate(4px,4px);box-shadow:0 0 0 0 #000}
.btn-contact:focus-visible{outline-offset:4px}

.burger{display:flex;appearance:none;background:transparent;border:0;width:44px;height:44px;position:relative;z-index:110;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--encre);border-radius:2px;transition:transform .3s var(--ease-out),opacity .25s ease,background-color .3s ease}
.site-header.nav-open .burger span,.site-header.nav-fermeture .burger span{background:#fff}
.site-header.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.nav-open .burger span:nth-child(2){opacity:0}
.site-header.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menu plein écran (toutes tailles), d'après hellomonday.com : fond noir, grands liens fins en blanc,
   point blanc devant la page en cours et au survol (pas de couleur), liens qui montent en cascade */
/* Ouverture (0,3 s) : un cercle noir grandit depuis le burger (--mx, --my, --mr posés par site.js) ; fermeture plus rapide (0,2 s) vers lui */
.mobile-nav{position:fixed;inset:0;z-index:90;background:var(--noir);color:#fff;display:flex;flex-direction:column;padding:calc(var(--header-h) + 24px) 16px 24px;overflow-y:auto;visibility:hidden;clip-path:circle(0px at var(--mx,calc(100% - 40px)) var(--my,36px));-webkit-clip-path:circle(0px at var(--mx,calc(100% - 40px)) var(--my,36px));transition:clip-path .2s cubic-bezier(.55,.055,.675,.19),-webkit-clip-path .2s cubic-bezier(.55,.055,.675,.19),visibility 0s linear .2s}
.mobile-nav.open{visibility:visible;clip-path:circle(var(--mr,150vmax) at var(--mx,calc(100% - 40px)) var(--my,36px));-webkit-clip-path:circle(var(--mr,150vmax) at var(--mx,calc(100% - 40px)) var(--my,36px));transition:clip-path .3s cubic-bezier(.55,.055,.675,.19),-webkit-clip-path .3s cubic-bezier(.55,.055,.675,.19),visibility 0s}
.menu-liens{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,1.4vh,14px)}
.menu-liens a{position:relative;font-family:var(--font-sans);font-weight:400;font-size:clamp(2.2rem,6vw,3.75rem);letter-spacing:-.02em;line-height:1.15;color:#fff;text-decoration:none;opacity:0;transform:translateY(40px);transition:opacity .5s ease,transform .6s var(--ease-out);transition-delay:0s}
.mobile-nav.open .menu-liens a{opacity:1;transform:none;transition-delay:calc(.08s + var(--i) * .06s)}
.menu-point{display:none;position:absolute;left:-26px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#fff;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .2s ease}
.menu-liens a[aria-current="page"] .menu-point{opacity:1;transform:none}
@media (hover:hover){.menu-liens a:hover .menu-point{opacity:1;transform:none}}
.menu-pied{display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--creme-dim);opacity:0;transition:opacity .4s ease .3s}
.mobile-nav.open .menu-pied{opacity:1}
.menu-pied a{color:inherit;text-decoration:none}
@media (hover:hover){.menu-pied a:hover{color:#fff}}
@media (min-width:768px){
  .mobile-nav{padding-inline:clamp(16px,2.5vw,32px)}
  .menu-liens{align-items:flex-start;justify-content:flex-start;padding:22vh 0 0 50%}
  .menu-point{display:block}
}
body.nav-lock{overflow:hidden}
html:has(body.nav-lock){overflow:hidden}
body.nav-lock{overflow:hidden}
html:has(body.nav-lock){overflow:hidden}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:.01em;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--ghost{background:transparent;color:var(--encre);border-color:rgba(21,21,22,.3)}
.btn--ghost:hover{background:transparent;border-color:var(--encre);color:var(--encre)}
.btn--sm{min-height:40px;padding:0 20px;font-size:13px}
.btn--dark{background:var(--noir);border-color:var(--noir);color:#fff}
.btn--dark:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* ---------- Hero (gabarit commun, clair) ---------- */
.hero{position:relative;background:var(--blanc);color:var(--encre);padding:calc(var(--header-h) + clamp(48px,8vw,104px)) 0 clamp(56px,8vw,96px);overflow:hidden}
.hero-inner{position:relative;z-index:1}
.hero-tagline{font-family:var(--font-display);font-weight:600;line-height:1;letter-spacing:-.035em;font-size:clamp(2.3rem,6vw,5rem);max-width:16ch;text-wrap:balance}
.hero-h1{font-family:var(--font-sans);font-weight:400;font-size:clamp(1rem,1.9vw,1.15rem);line-height:1.65;color:var(--encre-dim);max-width:54ch;margin-top:clamp(20px,3vw,32px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4vw,40px)}

/* Accueil (à la Hello Monday) : visuel centré, accroche dessous, mots qui défilent */
.hero--home{padding-top:calc(var(--header-h) + clamp(16px,3vw,40px));padding-bottom:0;min-height:100svh;display:flex;flex-direction:column}
.hero-centre{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:16px}

/* Invitation à défiler (sous les mots qui défilent) : un point qui tombe en boucle */
.invite-scroll{position:relative;align-self:center;display:block;width:44px;height:64px;margin-bottom:clamp(16px,3vh,32px);border-radius:999px;color:var(--noir)}
.invite-scroll::before{content:"";position:absolute;left:50%;bottom:2px;width:30px;height:30px;margin-left:-15px;border:2px solid currentColor;border-radius:50%;opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .2s ease}
@media (hover:hover){.invite-scroll:hover::before{opacity:1;transform:none}}
.invite-scroll-point{position:absolute;left:50%;top:6px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:currentColor;animation:goutte 1.8s cubic-bezier(.5,0,.75,0) infinite}
@keyframes goutte{
  0%{transform:translateY(0) scale(0);opacity:0}
  12%{transform:translateY(0) scale(1);opacity:1}
  62%{transform:translateY(42px) scale(.85,1.35)}
  70%{transform:translateY(44px) scale(1.3,.7)}
  78%{transform:translateY(44px) scale(1);opacity:1}
  100%{transform:translateY(44px) scale(1);opacity:0}
}

/* Accroche sous le premier écran : titre, H1, boutons, piliers */
.accroche{padding-top:clamp(56px,8vw,112px)}
.accroche-centre{display:flex;flex-direction:column;align-items:center;text-align:center}
.accroche-titre{font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:1.02;letter-spacing:-.04em;max-width:16ch;text-wrap:balance}
.accroche .hero-h1{margin:clamp(20px,3vw,32px) auto 0}
.accroche-cartes{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(40px,6vw,72px);text-align:left}
.accroche-cartes .carte-lien h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,2vw,1.75rem);letter-spacing:-.03em;line-height:1.1;max-width:none}
#concept{scroll-margin-top:var(--header-h)}
@media (max-width:900px){.accroche-cartes{grid-template-columns:1fr}}
@media (max-width:560px){.accroche-cartes{grid-template-columns:1fr}.accroche-cartes .carte-lien{min-height:0}}
.hero-visuel{width:min(88vw,540px);aspect-ratio:1040/674;display:grid;place-items:center}
.hero-visuel img{width:100%;height:auto;display:block;pointer-events:none}
/* image d'attente = première image de l'animation : jamais de vide pendant le chargement */
.hero-visuel{background:url("/assets/video/accueil-poster.webp") center/100% auto no-repeat}
.hero--home .hero-surtitre{margin-top:clamp(24px,3vw,36px);font-size:clamp(.95rem,1.4vw,1.05rem);font-weight:500;color:var(--encre)}
.defile{position:relative;width:100%;height:1.2em;margin-top:6px;overflow:hidden;font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,8.4vw,5.6rem);line-height:1.2;letter-spacing:-.04em}
.defile-mot{position:absolute;left:0;right:0;top:0;white-space:nowrap;opacity:0;transform:translateY(100%);transition:transform .7s var(--ease-out),opacity .5s ease}
.defile-mot.is-on{opacity:1;transform:translateY(0)}
.defile-mot.is-out{opacity:0;transform:translateY(-100%)}

.pillars{position:relative;z-index:1;border-top:1px solid var(--trait);display:grid;grid-template-columns:repeat(3,1fr)}
.pillars p{padding:22px 0;font-weight:600;font-size:15px}
.pillars p+p{padding-left:clamp(16px,3vw,40px)}

/* ---------- Sections ---------- */
.section{padding:clamp(64px,9vw,128px) 0}
.section--modules{padding-top:clamp(8px,2vw,24px)}  /* la grille suit directement le titre de la page */
.section--brume{background:var(--brume)}
.section--noir{background:var(--noir);color:var(--creme)}
.section h2{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.04;letter-spacing:-.03em;text-wrap:balance;max-width:20ch}
.section h2+.intro{margin-top:20px}
.intro{font-size:clamp(1rem,1.5vw,1.125rem);color:var(--encre-dim);max-width:56ch}
.section--noir .intro{color:var(--creme-dim)}
.note{font-size:13px;color:var(--encre-dim)}
.section--noir .note{color:var(--creme-dim)}

/* Colonnes d'arguments : filets noirs, pas de cartes */
.arguments{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(40px,6vw,72px)}
.argument{border-top:2px solid var(--accent);padding-top:24px}
.argument svg{width:28px;height:28px;color:var(--accent);margin-bottom:18px}
.argument h3{font-size:1.125rem;font-weight:600;line-height:1.3}
.argument p{margin-top:10px;color:var(--encre-dim);font-size:.96rem}

/* Index des métiers (accueil) : lignes cliquables */
.index-tete{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 40px}
.index{margin-top:clamp(32px,5vw,56px);border-top:1px solid var(--encre)}
.index li{border-bottom:1px solid var(--trait)}
.index a{display:grid;grid-template-columns:56px minmax(0,1.2fr) minmax(0,1fr) auto 28px;align-items:center;gap:8px 24px;padding:22px 16px;margin-inline:-16px;text-decoration:none}
.index-n{font-size:13px;font-weight:600;color:var(--accent)}
.index-nom{font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.index-ex{font-size:.92rem;color:var(--encre-dim)}
.index-prix{font-size:.92rem;font-weight:600;white-space:nowrap}
.index svg{width:22px;height:22px;color:var(--accent)}
@media (hover:hover){
  .index a:hover{background:var(--noir);color:#fff}
  .index a:hover .index-ex{color:var(--creme-dim)}
  .index a:hover .index-n,.index a:hover svg{color:var(--accent-inverse)}
}

/* Listes à coches */
.coches{display:grid;gap:14px}
.coches li{position:relative;padding-left:32px}
.coches li::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat}
.section--noir .coches li::before,.panneau-noir .coches li::before{background:var(--accent-inverse)}

/* Socle */
.socle{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,88px);align-items:start}
.socle .coches{margin-top:32px;font-size:1.02rem}
.panneau-noir{background:var(--noir);color:var(--creme);border-radius:var(--radius);padding:clamp(28px,4vw,44px)}
.panneau-noir .label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--creme-dim)}
.prix{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;margin-top:12px;color:var(--accent-inverse)}
.prix strong{font-family:var(--font-display);font-weight:600;font-size:clamp(3rem,5.4vw,4.2rem);letter-spacing:-.04em;line-height:1;white-space:nowrap}
.prix span{font-size:14px;color:var(--creme-dim)}
.panneau-noir dl{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--trait-sombre);display:grid;gap:14px}
.panneau-noir dt{font-size:13px;color:var(--creme-dim)}
.panneau-noir dd{margin:2px 0 0;font-weight:600;font-size:15px}

/* Étapes (une vraie séquence : numérotées) */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(40px,6vw,64px);counter-reset:etape}
.etape{border-top:1px solid var(--trait-sombre);padding-top:22px}
.etape::before{counter-increment:etape;content:counter(etape);display:block;font-family:var(--font-display);font-weight:600;font-size:2.6rem;letter-spacing:-.04em;line-height:1;color:var(--accent-inverse);margin-bottom:14px}
.etape h3{font-size:1.1rem;font-weight:600}
.etape p{margin-top:8px;color:var(--creme-dim);font-size:.96rem}
.section:not(.section--noir) .etape{border-color:var(--trait)}
.section:not(.section--noir) .etape::before{color:var(--accent)}
.section:not(.section--noir) .etape p{color:var(--encre-dim)}

/* Cartes-liens (cliquables : survol autorisé) */
.liens-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(36px,5vw,56px)}
.carte-lien{display:flex;flex-direction:column;gap:10px;min-height:200px;padding:28px;border-radius:var(--radius);background:var(--brume);border:2px solid transparent;text-decoration:none}
.carte-lien h3{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.03em;line-height:1.1}
.carte-lien p{color:var(--encre-dim);font-size:.95rem}
.carte-lien .voir{margin-top:auto;font-size:13px;font-weight:600;color:var(--accent)}
@media (hover:hover){.carte-lien:hover{border-color:var(--encre)}}

/* Bandeau d'appel */
.appel{background:var(--noir);color:var(--creme);padding:clamp(56px,8vw,104px) 0}
.appel .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px}
.appel h2{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,4.6vw,3.6rem);letter-spacing:-.035em;line-height:1.02;max-width:16ch}
.appel p{color:var(--creme-dim);margin-top:18px}

/* ---------- Modules ---------- */
.modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(40px,6vw,64px)}
.module{background:var(--brume);border-radius:var(--radius);padding:clamp(24px,3vw,36px);position:relative;display:flex;flex-direction:column}
.module--noir{background:var(--noir);color:var(--creme)}
.module-tete{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.module-icone{flex:none;width:48px;height:48px;border-radius:50%;background:var(--noir);color:#fff;display:grid;place-items:center}
.module--noir .module-icone,.popup-carte--noir .module-icone{background:#fff;color:var(--noir)}
.module-icone svg{width:24px;height:24px}
.module h3,.popup-carte h3{font-size:1.2rem;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.module .coches,.popup-carte .coches{font-size:.98rem;gap:10px}
.module--noir .coches li::before,.popup-carte--noir .coches li::before{background:var(--accent-inverse)}
.module-mot{margin-top:20px;padding-top:18px;border-top:1px solid var(--trait-sombre);font-weight:500;font-size:1.1rem;line-height:1.4;letter-spacing:-.01em;color:var(--accent-inverse)}
.module:not(.module--noir) .module-mot,.popup-carte:not(.popup-carte--noir) .module-mot{color:var(--accent);border-top-color:var(--trait)}
.popup-carte--noir .module-mot{color:var(--accent-inverse)}
/* Modules : carte résumée + fenêtre « En savoir plus » (sans JS ou sans <dialog>, la carte reste entière) */
.module-pied{margin-top:auto;padding-top:22px}
.module-plus{display:none;align-items:center;gap:6px;min-height:40px;padding:0;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:inherit;font:600 .95rem/1 var(--font-sans);white-space:nowrap;cursor:pointer;touch-action:manipulation}
.module-plus svg{width:16px;height:16px;transition:transform .2s var(--ease-out)}
.popup-ok .module-plus{display:inline-flex}
.module-court{display:none}
.popup-ok .module .module-court{display:grid}
.popup-ok .module .module-detail,.popup-ok .module .module-mot{display:none}
@media (hover:hover){
  .module-plus:hover{border-bottom-color:currentColor}
  .module-plus:hover svg{transform:translateX(3px)}
}
.module-plus:focus-visible,.popup-fermer:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.module-popup{border:0;padding:0;background:transparent;color:var(--encre);width:min(560px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.module-popup::backdrop{background:rgba(14,14,15,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.module-popup[open]{animation:popup-in .25s var(--ease-out)}
.module-popup[open]::backdrop{animation:popup-fond .25s ease}
@keyframes popup-in{from{opacity:0;transform:translateY(14px)}}
@keyframes popup-fond{from{opacity:0}}
.popup-carte{position:relative;background:var(--brume);border-radius:var(--radius);padding:clamp(24px,5vw,40px)}
.popup-carte--noir{background:var(--noir);color:var(--creme)}
.popup-carte .module-tete{padding-right:48px}
.popup-fermer{position:absolute;top:14px;right:14px;width:44px;height:44px;display:grid;place-items:center;border:2px solid transparent;border-radius:50%;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation}
.popup-fermer svg{width:20px;height:20px}
@media (hover:hover){.popup-fermer:hover{border-color:currentColor}}
.module-plus,.popup-fermer{transition:border-color .15s ease,background-color .15s ease,color .15s ease}


/* ---------- Formules ---------- */
.formules{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(40px,6vw,64px);align-items:stretch}
.formule{position:relative;background:var(--brume);border-radius:var(--radius);padding:clamp(26px,3vw,38px);display:flex;flex-direction:column}
.formule h3{font-size:1.2rem;font-weight:600}
.formule .prix{color:var(--encre);margin-top:14px}
.formule .prix span{color:var(--encre-dim)}
.formule .coches{margin-top:24px;padding-top:22px;border-top:1px solid var(--trait);font-size:.98rem}
.formule--reco{background:var(--noir);color:var(--creme)}
.formule--reco .prix{color:var(--accent-inverse)}
.formule--reco .prix span{color:var(--creme-dim)}
.formule--reco .coches{border-color:var(--trait-sombre)}
.formule--reco .coches li::before{background:var(--accent-inverse)}
.pastille{position:absolute;top:22px;right:22px;padding:4px 12px;border-radius:999px;background:#fff;color:var(--noir);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.conditions{margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:minmax(0,1fr)}   /* lignes pleine largeur */
.condition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) 28px;align-items:start;gap:8px clamp(20px,4vw,48px);border-top:2px solid var(--accent);padding:22px 0;color:inherit;text-decoration:none}
.conditions>.condition:last-child{border-bottom:2px solid var(--accent)}
.condition h3{font-size:1rem;font-weight:600}
.condition p{color:var(--encre-dim);font-size:.95rem}
.condition-fleche{grid-column:3;grid-row:1;display:flex;justify-content:flex-end;align-self:center;transition:transform .2s var(--ease-out)}
.condition-fleche svg{width:24px;height:24px}
@media (hover:hover){.condition--lien:hover .condition-fleche{transform:translateX(4px)}.condition--lien:hover h3{text-decoration:underline;text-underline-offset:4px}}
@media (max-width:700px){
  .condition{grid-template-columns:minmax(0,1fr) 28px}
  .condition p{grid-column:1;grid-row:2}
  .condition-fleche{grid-column:2}
}

/* ---------- Métiers ---------- */
.metiers{display:grid;grid-template-columns:260px 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.metiers-nav{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:2px}
.metiers-nav a{display:block;padding:12px 16px;border-left:2px solid var(--trait);text-decoration:none;font-size:.95rem;font-weight:500;color:var(--encre-dim);line-height:1.35}
.metiers-nav a:hover{color:var(--encre);border-color:var(--accent)}
.metiers-nav a[aria-current="true"]{color:var(--encre);border-color:var(--accent);font-weight:600}
.metier{scroll-margin-top:calc(var(--header-h) + 24px)}
.metier+.metier{margin-top:clamp(56px,8vw,96px)}
.js .metier{display:none}
.js .metier.is-active{display:block}
.js .metier+.metier{margin-top:0}
.metier-citation{background:var(--noir);color:var(--creme);border-radius:var(--radius);padding:clamp(28px,4vw,48px)}
.metier-citation .metiers-liste{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-inverse)}
.metier-citation blockquote{margin:18px 0 0;font-weight:600;font-size:clamp(1.5rem,3vw,2.4rem);letter-spacing:-.03em;line-height:1.15;max-width:24ch;text-wrap:balance}
.metier-exemple{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,56px);margin-top:clamp(28px,4vw,44px);align-items:start}
.metier-exemple h3{font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,2.8vw,2.2rem);letter-spacing:-.03em;line-height:1.12;margin-bottom:22px}
.metier-exemple .panneau-noir .prix strong{font-size:clamp(2.8rem,4.6vw,3.6rem)}
.gains{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);margin-top:clamp(28px,4vw,44px)}
.gain{border-top:2px solid var(--accent);padding-top:16px}
.gain h4{margin:0;font-size:1rem;font-weight:600;line-height:1.3}
.gain p{margin-top:6px;color:var(--encre-dim);font-size:.94rem}
.metier-pied{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}

/* ---------- Pages ---------- */
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.contact-aside p{margin-top:16px;color:var(--encre-dim);max-width:40ch}
.contact-aside .coches{margin-top:28px}
.formulaire{display:grid;gap:20px}
.champ{display:grid;gap:8px}
.champ label{font-size:14px;font-weight:600}
.champ .facultatif{font-weight:400;color:var(--encre-dim)}
.champ input,.champ select,.champ textarea{width:100%;font:inherit;font-size:1rem;color:var(--encre);background:#fff;border:1px solid #c9c7c2;border-radius:10px;padding:13px 14px;min-height:48px}
.champ textarea{min-height:150px;resize:vertical}
/* Champ actif : une seule bordure, épaissie à 2 px et noire (ombre interne de 1 px en plus de la bordure, pour ne rien décaler) */
.champ input,.champ select,.champ textarea{transition:border-color .15s ease,box-shadow .15s ease}
/* Listes déroulantes : flèche native remplacée par un chevron Heroicons, décollé de 16 px de la bordure */
.champ select{-webkit-appearance:none;appearance:none;padding-right:48px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0e0f'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") no-repeat right 16px center/18px 18px}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--noir);box-shadow:inset 0 0 0 1px var(--noir)}
.champs-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.statut{min-height:1.5em;font-size:.95rem}
.statut.ok{color:#2f6b3a;font-weight:600}
.statut.erreur{color:#9b2c2c;font-weight:600}
.mentions h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:44px 0 12px;max-width:none}
.mentions h2:first-child{margin-top:0}
.mentions p,.mentions li{max-width:68ch;color:var(--encre-dim)}
.mentions p+p{margin-top:12px}
.a-fournir{background:#fff3cd;color:#6b5200;padding:1px 6px;border-radius:4px;font-size:.92em}

/* ---------- Footer ---------- */
.site-footer{background:var(--noir);color:var(--creme-dim);padding:clamp(48px,6vw,80px) 0 32px;border-top:1px solid var(--trait-sombre)}
.footer-grille{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(28px,5vw,64px)}
.footer-marque .site-logo{color:var(--creme-dim)}
.footer-marque .logo-mono{height:44px;width:auto}
.footer-marque p{margin-top:16px;max-width:36ch;font-size:.95rem}
.site-footer h2{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--creme);margin-bottom:16px}
.site-footer li+li{margin-top:8px}
.site-footer a{text-decoration:none;font-size:.95rem}
.site-footer a:hover{color:#fff}
.footer-bas{margin-top:48px;padding-top:22px;border-top:1px solid var(--trait-sombre);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;font-size:13px}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .metiers{grid-template-columns:1fr}
  /* Menu des métiers : collé sous le header au défilement, pastilles qui défilent jusqu'aux bords de l'écran */
  .metiers-nav{position:sticky;top:var(--header-h);z-index:30;display:flex;overflow-x:auto;gap:8px;margin-inline:calc(var(--pad-x) * -1);padding:10px var(--pad-x);scroll-padding-inline:var(--pad-x);background:#fff;scrollbar-width:none;-webkit-overflow-scrolling:touch;transition:box-shadow .15s ease}
  .metiers-nav.is-stuck{box-shadow:0 1px 0 var(--trait)}
  .metier{scroll-margin-top:calc(var(--header-h) + 64px)}
  .metiers-nav::-webkit-scrollbar{display:none}
  .metiers-nav a{flex:none;border:1px solid var(--trait);border-radius:999px;padding:9px 16px;white-space:nowrap}
  .metiers-nav a[aria-current="true"]{background:var(--noir);border-color:var(--noir);color:#fff}
  .index a{grid-template-columns:40px minmax(0,1fr) auto 24px}
  .index-ex{display:none}
}
@media (max-width:900px){
  .arguments,.etapes,.liens-grille,.formules,.gains{grid-template-columns:1fr}
  .socle,.metier-exemple,.contact{grid-template-columns:1fr}
  .modules{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .footer-grille{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .pillars p+p{padding-left:0;border-top:1px solid var(--trait)}
}
@media (max-width:560px){
  .champs-2{grid-template-columns:1fr}
  .index a{grid-template-columns:32px minmax(0,1fr) 22px}
  .index-prix{display:none}
  .site-header .logo-mono{height:42px}
  .btn-contact{min-height:38px;padding:0 14px;font-size:13px;box-shadow:3px 3px 0 0 #000}
}

.btn,.btn-contact,.burger,.metiers-nav a,.carte-lien,.menu-liens a,.index a{touch-action:manipulation}

/* Transitions : couleurs uniquement, règle groupée */
.btn,.site-footer a,.metiers-nav a,.carte-lien,.index a,.index-ex,.index-n,.index svg{transition:border-color .15s ease,background-color .15s ease,color .15s ease}

@media (prefers-reduced-motion:reduce){
  .module-popup[open],.module-popup[open]::backdrop{animation:none}
  .module-plus svg{transition:none}
  html{scroll-behavior:auto}
  .btn,.btn-contact,.site-footer a,.metiers-nav a,.carte-lien,.mobile-nav,.menu-liens a,.menu-point,.menu-pied,.index a,.index-ex,.index-n,.index svg,.site-header::before,.site-logo,.burger span,.defile-mot,.invite-scroll::before{transition-duration:.01ms;transition-delay:0s}
  .invite-scroll-point{animation:none;opacity:1;transform:translateY(22px)}
}

/* Boutons pleins sur fond noir : inversés (blanc sur noir) */
.appel .btn,.section--noir .btn{background:#fff;border-color:#fff;color:var(--noir)}
@media (hover:hover){.appel .btn:hover,.section--noir .btn:hover{background:var(--brume);border-color:var(--brume)}}

/* Modules sur mobile : 2 colonnes, cartes resserrées */
@media (max-width:560px){
  .module{padding:16px;border-radius:12px}
  .module-tete{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:14px}
  .module-icone{width:36px;height:36px}
  .module-icone svg{width:18px;height:18px}
  .module h3{font-size:1rem}
  .module .coches{font-size:.82rem;gap:8px}
  .module .coches li{padding-left:22px;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
  .module .coches li::before{width:14px;height:14px}
  .module-mot{font-size:.88rem;margin-top:14px;padding-top:12px}
  .module-pied{padding-top:14px}
  .module-plus{min-height:36px;font-size:.82rem;gap:4px}
  .module-plus svg{width:14px;height:14px}
}

/* Très petits écrans : cartes de modules encore plus compactes */
@media (max-width:380px){
  .module{padding:12px}
  .module .coches{font-size:.78rem}
  .module .coches li{padding-left:20px}
  .module h3{font-size:.95rem}
}
/* Accueil, « Votre métier, notre exemple » : Brice animé à droite, posé sur le trait noir de la liste */
.index-tete--visuel{display:grid;grid-template-columns:1fr auto;align-items:end;gap:0 40px}
.index-tete-texte{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:clamp(32px,5vw,56px)}
.index-visuel{display:block;width:205px;line-height:0}
.index-visuel img{display:block;width:100%;height:auto}
.index--visuel{margin-top:0}
@media (max-width:640px){
  .index-tete--visuel{gap:0 12px}
  .index-tete-texte{padding-bottom:24px}
  .index-visuel{width:120px;margin-right:calc(var(--pad-x) * -1)} /* collé au bord droit de l'écran */
}

/* Accueil, « La Base » : lien simple fléché vers les formules (sous la liste sur ordinateur, sous la carte prix sur mobile) */
.socle{row-gap:32px}
.socle-suite{grid-column:1;margin:0}
.lien-fleche{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--encre);text-decoration:none;transition:color .15s ease}
.lien-fleche svg{width:18px;height:18px;flex:none;color:var(--accent)}
@media (hover:hover){.lien-fleche:hover{color:var(--accent-hover)}}
/* Accueil, « Votre métier » : le + de la ligne « Voir tous les métiers », un peu plus grand pour peser autant que les numéros */
.index-tous .index-n{font-size:20px;font-weight:500;line-height:1}
/* Contact : hero en deux colonnes, Brice à son bureau (WebP animé) à droite, posé plus bas que le texte */
.hero-duo{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px clamp(32px,5vw,72px)}
.hero-duo-texte{padding-bottom:0}
.hero-duo-visuel{display:block;width:clamp(280px,34vw,440px);line-height:0;
  background:url("/assets/video/contact-bureau-poster@2x.webp") center/100% auto no-repeat}
.hero-duo-visuel img{display:block;width:100%;height:auto;pointer-events:none}
@media (max-width:760px){
  .hero-duo{grid-template-columns:1fr}
  .hero-duo-texte{padding-bottom:0}
  .hero-duo-visuel{justify-self:end;width:min(70vw,260px)}
}
/* Contact : le texte d'accompagnement est remonté dans le hero, le formulaire reste seul */
.hero-duo-texte .coches{margin-top:24px}
.contact--seul{grid-template-columns:minmax(0,760px)}
.section--contact{padding-top:0}