/* Page publique et pages légales. Chargée après academie.css, seulement par templates/accueil.html et templates/legal/*.html.
   Depuis le 23 octobre 2026 : calquée sur les sections claires de fabm.ca (eyebrow mono avec trait vert, titres deux tons, cartes à
   filet, boutons en deux blocs), sur fond Lin. Aucun dégradé, aucune ombre, aucun vert pâle. Aucun tiret cadratin. */

/* ------------------------------------------------------------------ accueil */
.pub{display:flex;flex-direction:column}
.pub section{min-width:0}
.pub h1{font-size:clamp(2.6rem,5.6vw,4.75rem);line-height:1;letter-spacing:-.04em;font-weight:600;max-width:13ch;color:var(--fg)}
.pub h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.04;letter-spacing:-.035em;font-weight:600;max-width:18ch;color:var(--fg)}
.pub .acc{color:var(--accent)}
.pub .lead{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;color:var(--muted);max-width:44ch}
.pub p{line-height:1.6}
.pub .muted{color:var(--muted)}
.pub .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.pub .marque-pilier{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--fg)}
.pub .marque-pilier::before{content:"";width:28px;height:1.5px;background:var(--accent);flex:none}
.pub .marque-pilier img{height:20px;width:auto}

/* étiquette de section : DM Mono majuscules, trait vert FABM (comme .eyebrow de fabm.ca) */
.etape{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--fg)}
.etape::before{content:"";width:28px;height:1.5px;background:var(--accent);flex:none}

/* héros : à plat sur Lin, schéma du parcours dans un panneau Lin clair */
.pub-hero{position:relative;padding-block:clamp(40px,7vw,96px) clamp(56px,8vw,112px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,80px);align-items:center}
.pub-hero .texte{display:flex;flex-direction:column;gap:24px}
.pub-hero .filigrane{display:none}

/* schéma du parcours : quatre étapes, aucun chiffre */
.schema{list-style:none;margin:0;padding:8px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-grand);display:flex;flex-direction:column;position:relative;z-index:1}
.schema li{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:center;padding:18px 0;position:relative}
.schema li+li{border-top:1px solid var(--line)}
.schema .pastille{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--accent-dark)}
.schema .pastille svg{width:20px;height:20px}
.schema li:last-child .pastille{background:var(--accent-dark);color:#fff}
.schema b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.schema small{display:block;color:var(--muted);font-size:.86rem;line-height:1.4}

/* bloc : une idée par section, séparée par un filet (sections claires de fabm.ca) */
.bloc{border-top:1px solid var(--line);padding-block:clamp(56px,8vw,112px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.bloc .tete{display:flex;flex-direction:column;gap:20px}
.bloc .corps{display:flex;flex-direction:column;gap:16px;padding-top:36px}
.bloc .corps p{font-size:1.08rem;max-width:56ch}
.bloc.doux{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);background:var(--surface-2);border-top:0;border-radius:var(--r-grand);padding-inline:clamp(22px,4vw,56px);margin-block:8px}
.bloc.doux+.fin{border-top:0}
.bloc-large{grid-template-columns:1fr}

/* tuiles : cartes à filet, rayon 4, icône au trait vert, titre en bas (comme .tl de fabm.ca) */
.tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:16px}
.tuile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 28px;min-height:212px;display:flex;flex-direction:column;gap:8px}
.tuile .pastille{width:30px;height:30px;display:block;color:var(--accent)}
.tuile .pastille svg{width:30px;height:30px;stroke-width:1.6}
.tuile b{display:block;margin-top:auto;padding-top:32px;font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.tuile span:not(.pastille){color:var(--muted);font-size:.94rem;line-height:1.55}

.engagements{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.engagement{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:8px}
.engagement b{font-size:1.1rem;font-weight:600;letter-spacing:-.015em}
.engagement span{color:var(--muted);font-size:.95rem;line-height:1.55}

/* aperçu du bandeau client : nom FABM, logo du client */
.apercu-marque{border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:14px;background:var(--surface)}
.apercu-marque .ligne-fabm img{height:34px;width:auto;display:block}
.apercu-marque .ligne-client{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px}
.apercu-marque .logo-vide{width:44px;height:44px;border-radius:var(--r);border:1px dashed var(--argent);display:grid;place-items:center;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;flex:none;text-align:center;line-height:1.1}
.apercu-marque .ligne-client b{display:block;font-size:.95rem;font-weight:600}
.apercu-marque .ligne-client small{color:var(--muted);font-size:.8rem}

/* appel final : grande phrase sur Lin, comme la section .cta de fabm.ca */
.fin{border-top:1px solid var(--line);padding-block:clamp(64px,9vw,128px) clamp(24px,4vw,48px);display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.fin h2{font-size:clamp(2.6rem,6vw,5.5rem);line-height:1;letter-spacing:-.045em;max-width:13ch}
.fin p{color:var(--muted);max-width:46ch;font-size:1.05rem}
.fin .ctas{margin-top:12px}
.fin a.courriel{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);font-weight:400;text-underline-offset:4px}

/* présentation (20 octobre 2026) : lecteur paysage, vertical sous 700 px (static/js/presentation.js) */
.presentation .tete{align-items:flex-start;text-align:left}
.presentation .tete h2{max-width:none}
.presentation .tete p{max-width:52ch;font-size:1.05rem}
.presentation-cadre{display:flex;justify-content:center;margin-top:24px}
.presentation video{display:block;width:100%;max-width:1040px;aspect-ratio:16/9;height:auto;border-radius:12px;background:#fff;border:1px solid var(--line)}
.presentation video.vertical{width:auto;max-width:100%;max-height:80vh;aspect-ratio:9/16;margin:0 auto}

/* langues (28 octobre 2026) : langue maternelle, étampe « Traduction par IA locale », rangée fixe de 12 drapeaux plats + pastille « + » */
.langues{gap:0}
.langues .etape,.langues-lien{justify-self:start}
.langues h2{color:var(--accent-dark);max-width:24ch;margin-top:20px}
.langues-rangee{display:flex;align-items:center;gap:clamp(24px,4vw,56px)}
.langues-texte{max-width:780px;min-width:0}
.langues-para{font-size:clamp(1.08rem,1.4vw,1.25rem);line-height:1.55;max-width:720px;margin-top:28px;color:var(--fg)}
.langues-cle{font-size:clamp(1.18rem,1.6vw,1.375rem);font-style:italic;font-weight:300;line-height:1.45;max-width:820px;margin-top:32px;color:var(--accent-dark)}
.langues .etampe{flex:none;display:block;width:150px;height:150px;margin-left:auto;margin-right:clamp(0px,7vw,100px);transform:rotate(-8deg);color:var(--accent-dark)}
.drapeaux{display:flex;flex-wrap:wrap;gap:12px;margin-top:56px;align-items:center}
.drapeau{width:70px;height:47px;flex:none;display:block;border-radius:3px}
.drapeau.plus{display:flex;align-items:center;justify-content:center;font-family:var(--font);font-weight:300;font-size:28px;line-height:1;border:1.5px dashed rgb(31 56 24 / .4);color:var(--accent-dark)}
.langues-note{font-size:.875rem;color:var(--muted);margin-top:24px}
.langues-lien{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;margin-top:36px;font-size:1.125rem;font-weight:600;color:var(--accent-dark);text-decoration:none;padding:6px 0;border-bottom:1px solid currentColor}
.langues-lien svg{width:28px;height:12px;flex:none}
@media (max-width:700px){
  .langues-rangee{flex-direction:column;align-items:flex-start;gap:28px}
  .langues .etampe{width:110px;height:110px;margin:0 0 0 4px}
  .drapeaux{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:40px}
  .drapeau{width:100%;height:auto;aspect-ratio:70/47}
  .drapeau.plus{font-size:22px}
}

@media (max-width:900px){
  .pub-hero,.bloc,.bloc.doux{grid-template-columns:1fr}
  .bloc .corps{padding-top:0}
  .tuiles{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .pub-hero{padding-block:28px 56px}
  .bloc{padding-block:56px}
  .bloc.doux{padding:40px 18px}
  .tuiles,.engagements{grid-template-columns:1fr}
  .tuile{min-height:0}
  .tuile b{padding-top:20px}
  .pub .ctas{width:100%}
  .pub .ctas .btn.duo{flex:1 1 100%}
  .pub .ctas .btn.duo>span:first-child{flex:1;justify-content:center}
  .fin{padding-block:64px 16px}
}

/* ------------------------------------------------------------------ pages légales */
.legal{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.legal-version{align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:5px 10px}
.legal-brouillon{background:var(--or-soft);border-left:3px solid var(--warn);color:var(--fg);border-radius:var(--r);padding:12px 16px;font-size:.88rem;line-height:1.5}
.legal-doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-grand);padding:clamp(22px,5vw,56px)}
.legal-doc h1{font-size:clamp(1.9rem,4vw,2.75rem);line-height:1.05;letter-spacing:-.035em;font-weight:600;margin-bottom:14px}
.legal-doc .chapeau{color:var(--muted);font-size:1.05rem;line-height:1.6;margin-bottom:8px}
.legal-doc h2{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.legal-doc h3{font-size:1rem;font-weight:600;margin-top:18px}
.legal-doc p,.legal-doc li{line-height:1.65;font-size:.97rem}
.legal-doc p{margin-top:10px}
.legal-doc ul{margin:10px 0 0;padding-left:1.2em}
.legal-doc li::marker{color:var(--accent)}
.legal-doc li+li{margin-top:6px}
.legal-doc dl{margin:10px 0 0;display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:8px 18px}
.legal-doc dt{font-weight:600}
.legal-doc dd{margin:0;color:var(--fg)}
.legal-doc .sommaire{margin-top:16px;padding:16px 20px;background:var(--surface-2);border-radius:var(--r)}
.legal-doc .sommaire ol{margin:6px 0 0;padding-left:1.3em;columns:2;column-gap:28px}
.legal-doc .sommaire li{font-size:.9rem;break-inside:avoid}
.legal-doc .coord{margin-top:12px;padding:14px 18px;border-left:3px solid var(--accent);background:var(--page);border-radius:0 var(--r) var(--r) 0}
.legal-liens{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;padding-top:4px}
.legal-liens a{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-dark);text-underline-offset:4px}
@media (max-width:560px){
  .legal-doc dl{grid-template-columns:1fr;gap:2px}
  .legal-doc dd{margin-bottom:8px}
  .legal-doc .sommaire ol{columns:1}
}

/* gabarit de consentement : champs à remplir à l'écran ou à la main, imprimable */
.formulaire .champs{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-top:12px}
.formulaire .champs .plein{grid-column:1/-1}
.formulaire label.champ{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--fg);font-weight:600}
.formulaire label.champ input{font:inherit;font-size:1rem;font-weight:400;color:var(--fg);border:0;border-bottom:1px solid var(--gris-moyen);background:transparent;padding:6px 2px;border-radius:0;min-width:0;width:100%;box-shadow:none}
.formulaire label.champ input:focus{outline:none;border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.formulaire .choix-liste{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:10px}
.formulaire .choix-liste li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start}
.formulaire .choix-liste input[type=checkbox]{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent-dark)}
.formulaire .zone-signatures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:16px}
.formulaire .case-signature{display:flex;flex-direction:column;gap:10px}
.formulaire .case-signature .trait{height:48px;border-bottom:1px solid var(--aide)}
.formulaire .case-signature b{font-size:.92rem;font-weight:600}
.formulaire .case-signature small{color:var(--muted);font-size:.8rem}
.formulaire .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
@media (max-width:640px){
  .formulaire .champs,.formulaire .zone-signatures{grid-template-columns:1fr}
}
@media print{
  .legal{max-width:none;gap:6px}
  .legal-doc{border:0;padding:0;border-radius:0;background:#fff}
  .legal-doc h2{margin-top:16px;padding-top:10px;break-after:avoid}
  .legal-doc p,.legal-doc li{font-size:10.5pt;line-height:1.45}
  .legal-version{border:0;padding:0}
  .legal-brouillon,.formulaire .actions,.legal-liens{display:none!important}
  .formulaire label.champ input{border-bottom-color:#777}
  .formulaire .zone-signatures{grid-template-columns:repeat(3,1fr);break-inside:avoid}
  .formulaire .champs{grid-template-columns:1fr 1fr}
}

/* ------------------------------------------------------------------ visite guidée (31 octobre 2026) : portable CSS + 6 écrans réels (static/js/visite-guidee.js) */
.pub .vg{border-top:1px solid var(--line);padding-block:clamp(56px,8vw,112px)}
.vg .vg-g{display:grid;grid-template-columns:minmax(0,7.6fr) minmax(0,4.4fr);gap:clamp(32px,5vw,80px);align-items:center}
.vg .vg-txt{order:2;min-width:0}
.vg .vg-zone{min-width:0}
.vg .vg-h2{margin-top:20px;max-width:none;color:var(--accent-dark);text-wrap:balance}
.vg .vg-lead{margin-top:20px;max-width:44ch;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.5;color:var(--muted)}
.vg .vg-ecrans{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--line)}
.vg .vg-ecrans li{border-bottom:1px solid var(--line)}
.vg .vg-ecrans button{width:100%;display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px;padding:14px 0 15px;position:relative;font:inherit;color:inherit;background:none;border:0;text-align:left;cursor:pointer}
.vg .vg-ecrans button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.vg .vg-role{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;color:var(--muted)}
.vg .vg-t{font-size:1.19rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;opacity:.62;transition:opacity .3s}
.vg .vg-d{font-size:.97rem;line-height:1.45;color:var(--muted);display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.vg .vg-d>span{overflow:hidden}
.vg .vg-p{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--accent)}
.vg .vg-ecrans li.on .vg-t{opacity:1}
.vg .vg-ecrans li.on .vg-role{color:var(--accent)}
.vg .vg-ecrans li.on .vg-d{grid-template-rows:1fr}
.vg .vg-ecrans li:not(.on) button:hover .vg-t{opacity:.9}
.vg .vg-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.vg .vg-btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;padding:16px 20px;border-radius:var(--r);background:var(--accent-dark);color:#fff;transition:background .25s}
.vg .vg-btn:hover{background:var(--accent-hover)}
.vg .vg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* le portable */
.vg .vg-lap{position:relative;width:100%;max-width:960px;margin-inline:auto;padding-bottom:4%}
.vg .vg-lid{position:relative;margin-inline:7.5%;background:#0c0d0c;border-radius:clamp(10px,1.8vw,20px) clamp(10px,1.8vw,20px) 0 0;padding:2.1% 2.1% 2.6%;box-shadow:0 0 0 1.5px #9fa3a6,0 0 0 3px #2a2c2b,0 30px 60px -30px rgb(0 0 0 / .55)}
.vg .vg-cam{position:absolute;top:.9%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#1d2422;box-shadow:inset 0 0 0 1.5px #2f3a37}
.vg .vg-scr{position:relative;aspect-ratio:16/10;background:#fff;overflow:hidden;border-radius:2px;display:flex;flex-direction:column}
.vg .vg-scr::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgb(255 255 255 / .07) 0 34%,transparent 34.2%);z-index:3}
.vg .vg-chrome{position:relative;flex:none;height:clamp(18px,2.9vw,40px);background:#ECEAE4;border-bottom:1px solid #D6D3CA;display:flex;align-items:center;gap:clamp(4px,.7%,7px);padding:0 2.2%;z-index:2}
.vg .vg-chrome i{width:clamp(6px,1.05%,10px);aspect-ratio:1;border-radius:50%;background:#CFCAC0;flex:none}
.vg .vg-url{margin-inline:auto;font-family:var(--font);font-size:clamp(8px,1.15vw,12.5px);color:#6b6862;background:#fff;border-radius:6px;padding:.35em 1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%;display:flex;align-items:center;gap:.5em}
.vg .vg-url svg{width:.9em;height:.9em;flex:none;fill:none;stroke:var(--accent);stroke-width:2.2}
.vg .vg-view{position:relative;flex:1;overflow:hidden;background:var(--page)}
.vg .vg-sl{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.vg .vg-sl.on{opacity:1;z-index:1}
.vg .vg-sl img{display:block;width:100%;height:auto;max-width:none;will-change:transform}
.vg .vg-base{position:relative;height:clamp(10px,1.9vw,19px);background:linear-gradient(#f0f1f2 0,#d3d5d7 30%,#a7aaad 78%,#7f8285 100%);border-radius:2px 2px 50% 50%/2px 2px 100% 100%}
.vg .vg-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:45%;transform:translateX(-50%);background:linear-gradient(#a9acaf,#c9cbcd);border-radius:0 0 10px 10px/0 0 8px 8px}
.vg .vg-lap::after{content:"";position:absolute;left:6%;right:6%;bottom:0;height:5%;background:radial-gradient(50% 50% at 50% 50%,rgb(30 31 28 / .26),transparent 70%);filter:blur(6px);z-index:-1}
.vg .vg-demo{margin:20px 0 0;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* cellulaire : titre, texte, portable, liste, bouton */
@media (max-width:959px){
  .vg .vg-g{grid-template-columns:minmax(0,1fr);gap:0}
  .vg .vg-txt{display:contents}
  .vg .vg-zone{order:1;margin-top:36px}
  .vg .vg-ecrans{order:2}
  .vg .vg-cta{order:3}
  .vg .vg-lead{max-width:none}
}
@media (max-width:599px){
  .vg .vg-t{font-size:1.06rem}
  .vg .vg-lid{margin-inline:4%}
}
@media (prefers-reduced-motion:reduce){.vg .vg-sl,.vg .vg-d{transition:none}}