/* =====================================================================
   Modèle de site Alphorn — style commun à TOUS les sites de la famille.
   Ne rien mettre de propre à une app ici : ce qui change va dans la fiche.
   Couleurs et formes = la charte (1.- Charte/tokens.css).
   ===================================================================== */

/* ---- Polices hébergées chez nous (pas de Google Fonts = rien n'est envoyé à Google) ---- */
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(polices/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(polices/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(polices/inter-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:800;font-display:swap;src:url(polices/inter-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:900;font-display:swap;src:url(polices/inter-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:Fredoka;font-weight:700;font-display:swap;src:url(polices/fredoka-latin-700-normal.woff2) format("woff2")}

:root{
  --violet:#7C5FCF;--violet-fonce:#4A3392;--violet-nuit:#3E2C82;--violet-moyen:#6D4FC7;--violet-lumiere:#8E6FE0;
  --violet-pale:#F3EEFB;--violet-trait:#E3DAF7;--fond:#F5F4FA;--carte:#FFFFFF;
  --encre:#1C1726;--encre-2:#3A3450;--gris:#6E6884;--bordure:#E9E6F2;
  --gris-doux:#928CA6;--fond-doux:#F4F2FB;
  --vert:#16A34A;--vert-texte:#14532D;--vert-pale:#DCFCE7;
  --ambre:#F59E0B;--ambre-texte:#B45309;--ambre-pale:#FEF3C7;
  --rouge:#DC2626;--rouge-texte:#B91C1C;--rouge-pale:#FEF2F2;
  --bleu:#1D4ED8;--bleu-pale:#E7EEFE;
  --espace-1:4px;--espace-2:6px;--espace-3:8px;--espace-4:10px;--espace-5:12px;--espace-6:16px;--espace-7:22px;
  --rayon-outil:8px;--rayon-bouton:10px;--rayon-champ:12px;--rayon-gros-bouton:14px;
  --rayon-fenetre:18px;--rayon-fenetre-famille:22px;--rayon-rond:999px;
  --ombre-carte:0 1px 2px rgba(28,23,38,.05),0 8px 22px rgba(28,23,38,.06);
  --ombre-bouton:0 8px 18px rgba(124,95,207,.3);
  --police-texte:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --police-logo:Fredoka,Nunito,"Arial Rounded MT Bold",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--fond);color:var(--encre);font:16px/1.65 var(--police-texte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--violet-fonce)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
h1,h2,h3{color:var(--violet-fonce);line-height:1.15;text-wrap:balance}
.saut{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:99}
.saut:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--violet-lumiere);outline-offset:2px}

/* ---- Nom écrit (mot-symbole) ---- */
.mot{font-family:var(--police-logo);font-weight:700;letter-spacing:-.5px;line-height:1;white-space:nowrap}
.mot .f{color:var(--violet-fonce)} .mot .p{color:var(--violet)}
.mot.inv .f,.mot.inv .p{color:#fff} .mot.inv .p{opacity:.85}

/* ---- Boutons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:var(--rayon-bouton);padding:10px 16px;font:inherit;font-weight:800;font-size:15px;text-decoration:none;border:1px solid var(--bordure);background:#fff;color:var(--violet-fonce);cursor:pointer}
.btn.principal{background:var(--violet);border-color:var(--violet);color:#fff}
.btn.gros{background:linear-gradient(135deg,var(--violet-moyen),var(--violet-lumiere));border:0;color:#fff;border-radius:var(--rayon-gros-bouton);padding:14px 24px;font-size:16px;box-shadow:var(--ombre-bouton)}
.btn.clair{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff}
.btn.blanc{background:#fff;border:0;color:var(--violet-fonce)}
.btn:hover{filter:brightness(1.05)}

/* ---- En-tête ---- */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--bordure)}
.nav .wrap{display:flex;align-items:center;gap:14px;height:64px;position:relative}
.nav .marque{display:flex;align-items:center;gap:8px;text-decoration:none}
.nav .marque img{width:40px;height:40px}
.nav .marque .mot{font-size:22px}
.nav .liens{display:flex;gap:20px;margin-left:auto;font-weight:600;font-size:14.5px}
.nav .liens a{color:var(--encre-2);text-decoration:none}
.nav .liens a:hover,.nav .liens a[aria-current=page]{color:var(--violet-fonce)}
.nav .liens a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--violet)}
.langues{display:flex;gap:4px;font-size:13px;font-weight:700}
.langues a{text-decoration:none;color:var(--gris);padding:4px 6px;border-radius:6px}
.langues a[aria-current=true]{background:var(--violet-pale);color:var(--violet-fonce)}
.menu{display:none;margin-left:auto;background:none;border:0;font-size:26px;line-height:1;color:var(--violet-fonce);cursor:pointer;min-width:44px;min-height:44px}
@media(max-width:860px){
  .nav .liens{display:none}.menu{display:block}
  .nav .liens.ouvert{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:16px;background:#fff;padding:18px 16px;border-bottom:1px solid var(--bordure);box-shadow:var(--ombre-carte)}
  .nav .langues{order:3}
}

/* ---- Haut de page ---- */
.hero{position:relative;color:#fff;background:linear-gradient(180deg,#2E2160 0%,var(--violet-nuit) 55%,#4A3392 100%);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;padding-top:56px;padding-bottom:calc(clamp(120px,18vw,260px) * .72);position:relative;z-index:1}
.hero.court .wrap{grid-template-columns:1fr;padding-top:44px;padding-bottom:calc(clamp(150px,22vw,300px) * .30)}
.hero .etiquette{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;margin-bottom:16px}
.hero h1{color:#fff;font-size:clamp(30px,5.4vw,52px);font-weight:900;letter-spacing:-.5px}
.hero .accroche{font-size:clamp(17px,2.2vw,20px);color:#EDE7FB;margin:16px 0 26px;max-width:600px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero .petits{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:14px;color:#E3DAF7;list-style:none}
.hero .logo-grand{justify-self:center;width:min(320px,70vw);filter:drop-shadow(0 18px 30px rgba(28,23,38,.35))}
/* Les Alpes en bas du hero : une image etiree sur toute la largeur.
   Le voile ::after fond le ciel de l'image dans le fond du hero. */
.montagnes{position:absolute;left:0;right:0;bottom:-1px;width:100%;display:block;
  height:clamp(120px,18vw,260px);object-fit:fill;z-index:1;pointer-events:none}
.hero.court .montagnes{height:clamp(150px,22vw,300px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.35) 26%,#000 62%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.35) 26%,#000 62%)}
/* le texte passe devant la neige : une ombre douce garde le contraste */
.hero.court h1,.hero.court .accroche{text-shadow:0 1px 12px rgba(28,19,64,.55)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:0;pointer-events:none;
  height:calc(clamp(120px,18vw,260px) + 150px);
  background:linear-gradient(180deg,rgba(67,51,134,0) 0,#433386 170px,#433386 100%)}
.hero.court::after{height:calc(clamp(150px,22vw,300px) + 90px);
  background:linear-gradient(180deg,rgba(67,51,134,0) 0,#433386 90px,#433386 100%)}
.hero .wrap{z-index:2}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;text-align:center;padding-top:32px;padding-bottom:calc(clamp(120px,18vw,260px) * .42)}.hero.court .wrap{padding-bottom:20px}.hero .actions,.hero .petits{justify-content:center}.hero .logo-grand{order:-1;width:200px}.hero .accroche{margin-left:auto;margin-right:auto}}

/* ---- Sections ---- */
.sec{padding:60px 0}
.sec.blanc{background:#fff}
.surtitre{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--violet)}
.sec h2{font-size:clamp(25px,3.6vw,34px);font-weight:900;margin:6px 0 10px}
.sec .intro{color:var(--gris);max-width:680px;font-size:17px}
.texte{max-width:760px;display:flow-root}
.texte p{margin:0 0 14px;color:var(--encre-2);font-size:17px}
.texte .suite{font-weight:700}
.texte img.photo{float:right;width:min(300px,45%);border-radius:var(--rayon-fenetre);margin:4px 0 14px 20px;box-shadow:var(--ombre-carte)}
@media(max-width:560px){.texte img.photo{float:none;width:100%;margin:0 0 16px}}
.pastilles{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;list-style:none}
.pastilles li{background:var(--violet-pale);color:var(--violet-fonce);border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px}

.points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;list-style:none}
.point{background:#fff;border-radius:var(--rayon-fenetre);box-shadow:var(--ombre-carte);padding:22px}
.sec.blanc .point{background:var(--fond);box-shadow:none;border:1px solid var(--bordure)}
.point .ic{font-size:28px;width:52px;height:52px;border-radius:14px;background:var(--violet-pale);display:grid;place-items:center;margin-bottom:12px}
.point h3{font-size:18px;font-weight:800;margin-bottom:6px}
.point p{color:var(--encre-2);font-size:15px}
@media(max-width:860px){.points{grid-template-columns:1fr}}

/* ---- La famille ---- */
.famille{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;list-style:none}
.fam{background:#fff;border-radius:var(--rayon-fenetre);box-shadow:var(--ombre-carte);padding:20px;display:flex;flex-direction:column;align-items:center;text-align:center;border:2px solid transparent}
.fam.ici{border-color:var(--violet)}
.fam img{width:120px;height:120px;margin-bottom:10px}
.fam .mot{font-size:20px}
.fam .role{color:var(--gris);font-size:14px;margin:4px 0 8px}
.fam p{color:var(--encre-2);font-size:15px;margin-bottom:14px;flex:1}
.fam .bientot{display:inline-block;background:var(--ambre-pale);color:var(--ambre-texte);font-size:12.5px;font-weight:800;border-radius:999px;padding:4px 10px}
.fam.attente img{opacity:.8}
@media(max-width:860px){.famille{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.famille{grid-template-columns:1fr}}

/* ---- Questions ---- */
.faq{margin-top:22px;display:grid;gap:10px;max-width:780px}
.faq details{background:#fff;border:1px solid var(--bordure);border-radius:var(--rayon-champ);padding:14px 16px}
.faq summary{font-weight:800;color:var(--violet-fonce);cursor:pointer}
.faq details p{margin-top:8px;color:var(--encre-2)}

/* ---- Pages légales ---- */
.legal{max-width:760px}
.legal h2{font-size:21px;margin:26px 0 8px}
.legal p,.legal li{color:var(--encre-2);margin-bottom:10px}
.legal ul{padding-left:20px}
.a-completer{background:var(--ambre-pale);color:var(--ambre-texte);border-radius:6px;padding:0 5px;font-weight:700}

/* ---- Appel final + pied ---- */
.appel{background:linear-gradient(135deg,var(--violet),var(--violet-fonce));color:#fff;text-align:center;padding:56px 0}
.appel h2{color:#fff;font-size:clamp(24px,3.4vw,32px);font-weight:900}
.appel p{color:#EDE7FB;margin:8px 0 22px}
footer{background:var(--encre);color:#C9C2E0;padding:34px 0 26px;font-size:14px}
footer a{color:#C9C2E0;text-decoration:none}
footer a:hover{color:#fff}
footer .haut{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
footer .marque{display:flex;align-items:center;gap:8px}
footer .marque img{width:34px;height:34px}
footer .marque .mot{font-size:19px}
footer .logos{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
footer .logos img{width:40px;height:40px}
footer .liens{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none}
footer .bas{border-top:1px solid rgba(255,255,255,.12);margin-top:22px;padding-top:16px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}

/* ---- Étiquettes d'état (charte, décision du 28.09.2026) ---- */
.etat{display:inline-block;font-size:12.5px;font-weight:700;border-radius:var(--rayon-bouton);padding:5px 10px;background:var(--violet-pale);color:var(--violet-fonce)}
.etat.ok{background:var(--vert-pale);color:var(--vert-texte)}
.etat.attention{background:var(--ambre-pale);color:var(--ambre-texte)}
.etat.erreur{background:var(--rouge-pale);color:var(--rouge-texte)}
.etat.info{background:var(--bleu-pale);color:var(--bleu)}

/* Icones dessinees (svg:cor, ...) — heritent de la couleur du texte */
.ic-svg{width:1em;height:1em;display:inline-block;vertical-align:-.16em;fill:currentColor}
.ic-svg[stroke]{fill:none;stroke:currentColor}
.ic-svg[stroke] [fill="currentColor"]{fill:currentColor}
.point .ic .ic-svg{width:38px;height:38px;vertical-align:0;color:var(--violet)}
.hero .etiquette .ic-svg{width:1.45em;height:1.45em;margin-right:.1em}

/* Icones en image (aquarelles) */
.ic-img{display:inline-block;vertical-align:-.28em;width:1.9em;height:auto}
.point .ic{width:72px;height:72px;font-size:28px}
.point .ic .ic-img{width:60px;vertical-align:0}
.hero .etiquette{display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 9px;line-height:1.3}
.hero .etiquette .ic-img{width:2.5em;vertical-align:0;flex:0 0 auto}

/* Copies d'écran d'application */
.captures{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start}
.captures.une{grid-template-columns:minmax(0,560px);justify-content:center}
.captures.deux{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:880px;margin-inline:auto}
.capture{margin:0;text-align:center}
.capture img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--bordure);
  box-shadow:0 10px 30px rgba(43,26,74,.14);background:#fff}
.capture.etroit img{max-width:320px;margin-inline:auto}
.capture figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--gris)}
@media (max-width:640px){.captures{gap:20px}.capture figcaption{font-size:13px}}

/* Tableaux de contenu */
.tableau{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 6px}
.tableau table{border-collapse:collapse;width:100%;min-width:420px;background:#fff;
  border:1px solid var(--bordure);border-radius:var(--rayon-champ);overflow:hidden;font-size:16px}
.tableau th,.tableau td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--bordure)}
.tableau th{background:var(--fond-doux);font-weight:700;color:var(--encre);font-size:15px}
.tableau tbody tr:last-child td{border-bottom:0}
.tableau td:first-child{font-weight:600}
.sec .legende{color:var(--gris);font-size:14px;margin-top:12px;max-width:680px}
@media (max-width:640px){.tableau th,.tableau td{padding:10px 12px;font-size:15px}}

/* Deux copies d'écran côte à côte : on borne la hauteur pour qu'elles s'équilibrent */
.captures.deux .capture img{max-height:640px;width:auto;margin-inline:auto}
.captures.deux .capture{display:flex;flex-direction:column;align-items:center}

/* Exactement quatre points : deux colonnes, plus équilibré qu'un 3 + 1 */
@media (min-width:900px){
  .points:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
}

/* ================= Direction B — mise en page riche ================= */
:root{--ecran-tel:9/19.5;--nuit:#2C1F55;--nuit-2:#241A47;--violet-lumiere:#A78BFA}

/* --- la coque d'iPhone, la même partout --- */
.iphone{--cadre:11px;width:var(--larg,290px);max-width:calc(var(--hmax,66vh) * .4615);
  aspect-ratio:var(--ecran-tel);position:relative;flex:0 0 auto;
  padding:var(--cadre);border-radius:calc(var(--cadre) * 3.3);
  background:linear-gradient(155deg,#5a4c85,#211838 42%,#171026);
  box-shadow:0 30px 64px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.10) inset,
             0 1px 0 rgba(255,255,255,.22) inset}
.iphone > img{width:100%;height:100%;object-fit:cover;object-position:top center;
  border-radius:calc(var(--cadre) * 2.3);background:var(--violet-pale)}
.iphone::before{content:"";position:absolute;top:calc(var(--cadre) + 9px);left:50%;
  transform:translateX(-50%);width:31%;height:5.6%;max-height:26px;border-radius:99px;
  background:#100B1E;z-index:2;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.iphone::after{content:"";position:absolute;bottom:calc(var(--cadre) + 7px);left:50%;
  transform:translateX(-50%);width:33%;height:4px;border-radius:99px;background:rgba(0,0,0,.30);z-index:2}
.iphone.penche-g{transform:rotate(-4deg)}
.iphone.penche-d{transform:rotate(3deg)}
.iphone.clair{box-shadow:0 22px 46px rgba(43,26,74,.26),0 0 0 1px rgba(255,255,255,.12) inset}

/* --- sections en deux colonnes --- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.duo .visuel{display:flex;justify-content:center}
.duo.a-gauche .txt{order:2}
.sec.nuit{background:linear-gradient(170deg,var(--nuit),var(--nuit-2));color:#fff}
.sec.nuit h2,.sec.nuit h3{color:#fff}
.sec.nuit p,.sec.nuit .intro{color:rgba(255,255,255,.84)}
.sec.nuit .surtitre{color:var(--violet-lumiere)}
.sec.nuit .pastilles li{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22)}
.sec.nuit a{color:#fff}
.citation{background:var(--violet-pale);border-left:4px solid var(--violet);
  border-radius:0 14px 14px 0;padding:20px 24px;margin-top:26px;max-width:460px}
.citation p{font-family:var(--police-logo);font-size:19px;color:var(--violet-fonce);margin:0;line-height:1.4}
.sec.nuit .citation{background:rgba(255,255,255,.08);border-left-color:var(--violet-lumiere)}
.sec.nuit .citation p{color:#fff}

/* --- haut de page : chiffres et bulle --- */
.hero.nuit{background:radial-gradient(1200px 620px at 78% 18%,var(--violet-fonce) 0%,var(--nuit) 56%,var(--nuit-2) 100%)}
.hero h1 .lum{color:var(--violet-lumiere);display:block}
.hero .scene{position:relative;display:flex;justify-content:center}
.hero .bulle{position:absolute;right:0;bottom:8%;background:#fff;color:var(--violet-fonce);
  border-radius:16px;padding:13px 17px;font:700 15px/1.35 var(--police-texte);
  box-shadow:0 18px 40px rgba(0,0,0,.3);max-width:200px}
.hero .bulle span{display:block;color:var(--gris);font-weight:400;font-size:14px}
.chiffres{list-style:none;display:flex;gap:32px;flex-wrap:wrap;margin-top:32px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.18)}
.chiffres b{display:block;font-family:var(--police-logo);font-size:29px;color:#fff;line-height:1.1}
.chiffres span{color:rgba(255,255,255,.72);font-size:13.5px}

/* --- les cartes d'outils, avec une copie d'écran --- */
.outils{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.outil{background:var(--carte);border:1px solid var(--bordure);border-radius:22px;
  padding:20px 18px 24px;box-shadow:var(--ombre-carte);
  display:flex;flex-direction:column;align-items:center;text-align:center}
.outil .iphone{--larg:100%;--hmax:none;max-width:none;margin-bottom:18px}
.outil .num{font:700 11.5px/1 var(--police-texte);letter-spacing:.11em;color:var(--violet);margin-bottom:7px}
.outil h3{font-size:19px;margin-bottom:8px}
.outil p{font-size:14.5px;margin:0;color:var(--encre-2)}

@media (max-width:900px){
  .duo{grid-template-columns:1fr;gap:34px}
  .duo.a-gauche .txt{order:0}
  .outils{grid-template-columns:repeat(2,1fr);gap:16px}
  .iphone{--larg:min(240px,62vw);--hmax:52vh}
  .iphone.penche-g,.iphone.penche-d{transform:none}
  .hero .scene{flex-direction:column;align-items:center}
  .hero .bulle{position:static;margin:18px auto 0;max-width:none;text-align:center}
  .chiffres{gap:22px}.chiffres b{font-size:24px}
}
@media (max-width:560px){
  .outils{grid-template-columns:1fr;max-width:330px;margin-inline:auto}
  .outil .iphone{--larg:min(200px,52vw);max-width:calc(42vh * .4615)}
  .iphone{--larg:min(210px,56vw);--hmax:46vh}
}

/* Retouches direction B */
.duo .txt p{margin-bottom:14px}
.duo .txt p:last-of-type{margin-bottom:0}
.duo .txt .pastilles,.duo .txt .actions,.duo .txt .suite{margin-top:18px}
.hero.nuit .btn.gros{background:#fff;color:var(--violet-fonce);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.hero.nuit .btn.clair{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.42);color:#fff}
.hero .bulle{right:-14px;bottom:4%}
@media (max-width:1150px){.hero .bulle{right:-6px;bottom:2%;max-width:170px;font-size:14px;padding:11px 14px}}

/* ---- Bandeau de chiffres ---- */
.sec.bande{padding:54px 0}
.bande-chiffres{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:26px;text-align:center}
.bande-chiffres b{display:block;font-family:var(--police-logo);font-size:clamp(30px,4vw,44px);
  color:var(--violet-fonce);line-height:1.05}
.bande-chiffres span{display:block;margin-top:6px;color:var(--gris);font-size:14.5px}
.sec.bande.nuit .bande-chiffres b{color:#fff}
.sec.bande.nuit .bande-chiffres span{color:rgba(255,255,255,.76)}
.sec.bande .surtitre,.sec.bande h2{text-align:center}
.sec.bande h2{margin-bottom:26px}

/* ---- Haut de page intérieur : plus généreux ---- */
.hero.court{padding-bottom:46px}
.hero.nuit.court .wrap{align-items:center}
.hero.court .grille,.hero .wrap>div:first-child{min-width:0}

/* ---- Questions / réponses : en cartes, deux colonnes ---- */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px}
.faq details{background:var(--carte);border:1px solid var(--bordure);border-radius:16px;
  padding:16px 18px;box-shadow:0 6px 18px rgba(28,23,38,.05);height:fit-content}
.faq details[open]{box-shadow:0 12px 30px rgba(28,23,38,.10);border-color:var(--violet-trait)}
.faq summary{cursor:pointer;font-weight:700;color:var(--violet-fonce);line-height:1.4}
.faq details p{margin-top:10px;color:var(--encre-2);font-size:15.5px}
.sec.nuit .faq details{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.sec.nuit .faq summary{color:#fff}
.sec.nuit .faq details p{color:rgba(255,255,255,.82)}
@media (max-width:700px){.faq{grid-template-columns:1fr}}


/* ===================================================================
   Barre de menu en bas — telephone uniquement (moins de 861 px).
   Quatre onglets + « Plus », qui ouvre une feuille avec le reste.
   =================================================================== */
.tabs,.voile,.feuille{display:none}

@media(max-width:860px){
  /* le menu du haut demenage en bas ; l'entete garde la marque et les langues */
  .nav .liens,.nav .menu{display:none}
  .nav .wrap{justify-content:space-between;gap:10px}
  .nav .marque .mot{font-size:19px}
  .nav .langues{display:flex;margin-left:0;gap:2px;font-size:12.5px}
  .nav .langues a{padding:9px 8px;border-radius:8px;line-height:1}

  .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:100;
    background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
    border-top:1px solid var(--bordure);padding-bottom:env(safe-area-inset-bottom)}
  .tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
    justify-content:flex-start;gap:3px;padding:9px 3px 7px;min-height:56px;
    background:none;border:0;cursor:pointer;color:var(--gris);
    font:600 10px/1.15 Inter,system-ui;text-align:center;text-decoration:none}
  .tab svg{width:23px;height:23px;flex:none}
  /* l'icone se pose dans une pastille carree arrondie, allumee sur la page courante */
  .tab .ic-tab{width:26px;height:26px;flex:none;object-fit:contain;opacity:.62}
  .tab.actif .ic-tab{opacity:1}
  .tab{padding:6px 3px 7px}
  .tab .pastille{width:46px;height:42px;border-radius:13px;display:grid;place-items:center;
    transition:background .15s}
  .tab.actif .pastille{background:var(--violet-pale)}
  .tab span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;hyphens:auto}
  .tab.actif{color:var(--violet)}
  .tab.actif svg{stroke-width:2.1}
  /* le contenu ne doit jamais finir sous la barre */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

  /* --- la feuille « Plus » --- */
  .voile{display:block;position:fixed;inset:0;z-index:105;background:rgba(20,14,44,.5)}
  .feuille{display:block;position:fixed;left:0;right:0;bottom:0;z-index:106;background:#fff;
    border-radius:20px 20px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));
    box-shadow:0 -14px 40px rgba(20,14,44,.3)}
  .voile[hidden],.feuille[hidden]{display:none}
  .feuille .fermer{position:absolute;top:10px;right:10px;width:40px;height:40px;
    display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
    background:var(--violet-pale);color:var(--violet-fonce)}
  .feuille .fermer svg{width:19px;height:19px}
  .feuille .poignee{width:42px;height:4px;border-radius:9px;background:var(--bordure);
    margin:4px auto 12px}
  .feuille>a{display:block;padding:13px 4px;color:var(--encre);text-decoration:none;
    font:600 16px Inter,system-ui;border-bottom:1px solid var(--bordure)}
  .feuille .lgs{display:flex;gap:8px;flex-wrap:wrap;padding:14px 0 4px}
  .feuille .lgs a{border:1px solid var(--bordure);border-radius:9px;padding:8px 14px;
    font:700 14px Inter,system-ui;color:var(--encre);text-decoration:none}
  .feuille .lgs a.on{background:var(--violet-pale);color:var(--violet-fonce);border-color:transparent}
  .feuille>a.btn.gros{margin-top:12px;text-align:center;border-bottom:0;color:#fff}
}

/* ===================================================================
   Formulaire de contact — une carte blanche centree sur le fond gris
   =================================================================== */
.carte-contact{max-width:640px;margin:0 auto;background:#fff;border-radius:22px;
  padding:34px 34px 30px;border:1px solid var(--bordure);
  box-shadow:0 18px 44px rgba(40,26,86,.10),0 2px 6px rgba(40,26,86,.05)}
.fcontact{display:grid;gap:22px}
.fcontact[hidden]{display:none}          /* sinon la grille ignore « hidden » */
.fcontact fieldset{border:0;padding:0;margin:0}
.fcontact legend{font-weight:800;font-size:15px;margin-bottom:10px;color:var(--encre)}

.sujet{text-align:center}
.sujet label{display:inline-flex;margin:0 4px 8px}
.sujet input{position:absolute;opacity:0;width:0;height:0}
.sujet span{display:inline-block;border:1px solid var(--bordure);border-radius:999px;
  padding:9px 16px;font-weight:700;font-size:14.5px;color:var(--encre-2);
  background:#fff;cursor:pointer;transition:background .12s,color .12s}
.sujet input:checked + span{background:var(--violet-pale);border-color:transparent;
  color:var(--violet-fonce)}
.sujet input:focus-visible + span{outline:3px solid var(--violet);outline-offset:2px}

.champ{display:grid;gap:6px}
.champ label{font-weight:800;font-size:15px;color:var(--encre)}
.champ input,.champ textarea{font:inherit;font-size:16px;color:var(--encre);background:#fff;
  border:1px solid var(--bordure);border-radius:12px;padding:12px 14px;width:100%;resize:vertical}
.champ input:focus,.champ textarea:focus{outline:3px solid var(--violet);outline-offset:1px;
  border-color:transparent}
.champ .aide{font-size:14px;color:var(--gris);margin:0}
.champ .err{display:none;font-size:14px;font-weight:700;color:#B3261E;margin:0}
.champ.faux input,.champ.faux textarea{border-color:#B3261E;background:#FFF7F6}
.champ.faux .err{display:block}

.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fcontact .btn.gros{justify-self:center;min-width:260px}
.fcontact .btn.gros[disabled]{opacity:.65;cursor:progress}
.mentions{font-size:13.5px;color:var(--gris);margin:0;text-align:center}

.merci,.panne{text-align:center}
.merci[hidden],.panne[hidden]{display:none}
.merci .coche{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--violet-pale);color:var(--violet-fonce);font-size:30px;font-weight:900;
  margin:4px auto 18px}
.merci h2,.panne h2{margin-bottom:8px}
.merci p,.panne p{color:var(--encre-2);margin-bottom:18px}

@media(max-width:860px){
  .carte-contact{padding:24px 18px 22px;border-radius:18px}
  .fcontact .btn.gros{justify-self:stretch;min-width:0;text-align:center}
}