/* aurastackai.fr — feuille de base (CH-SITE-01). Les classes utilitaires de la maquette sont générées à la suite
   (outils/maquette.py) ; ici : polices auto-hébergées, variables de la charte (DESIGN-aurastack v1.1), téléphone, menu,
   formulaire, focus clavier. Aucune règle en ligne dans les pages. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/polices/BricolageGrotesque-variable-500-800-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/polices/AtkinsonHyperlegible-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/polices/AtkinsonHyperlegible-Bold-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --creme: #FAF6EC; --sable: #F3ECDA; --blanc: #FFFFFF; --trait: #E6DFCF; --ecran: #1E2A26; --gris: #3F4D48;
  --emeraude: #1F7A52; --emeraude-texte: #1F6E4A; --menthe: #DCEFE3; --menthe-vive: #8FD3AA; --abricot: #E8954F;
  /* les nuances hors charte de la maquette sont ramenées à cette palette (outils/maquette.py, HORS_CHARTE) */
  --police-titre: "Bricolage Grotesque", sans-serif;
  --police-texte: "Atkinson Hyperlegible", system-ui, sans-serif;
}

picture { display: contents; }                     /* <picture> ne change pas la mise en page de l'<img> de la maquette */
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--emeraude); outline-offset: 3px; }

/* Menu replié sous 900 px (bouton accessible). */
.menu-bouton { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding: 0; border: 1px solid var(--trait); border-radius: 999px; background: var(--blanc); color: var(--ecran);
  cursor: pointer; }
.menu-bouton svg { display: block; }

/* Formulaire d'audit : pot de miel hors écran, messages après envoi. */
.pot-de-miel { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.message-envoi { margin: 0 0 24px; padding: 16px 20px; border-radius: 20px; font-weight: 700; }
.message-envoi[hidden] { display: none; }
.message-ok { background: var(--menthe); color: var(--ecran); }
.message-erreur { background: var(--sable); color: var(--ecran); border: 1px solid var(--abricot); }

/* Pages construites hors maquette (CGV, 404) : sous-titres de troisième niveau et listes des CGV. */
.page-legale h3 { margin: 28px 0 0; font-family: var(--police-titre); font-weight: 800; font-size: 21px; }
.page-legale ul { margin: 12px 0 0; padding-left: 24px; }
.page-legale li { margin: 6px 0 0; }

/* Replié d'emblée en CSS (aucun décalage de la page quand le script arrive) ; sans JavaScript, ou sur un navigateur qui ne
   connaît pas « scripting », la requête ne s'applique pas et le menu reste déplié. */
@media (max-width: 899px) and (scripting: enabled) {
  .menu-bouton { display: inline-flex; }
  #menu-principal { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .menu-ouvert #menu-principal { display: flex; }
}

/* Zones tactiles d'au moins 44 px (lot 2 de la mise en ligne, 19/10) : logo et lien de l'en-tête, liens d'action seuls
   dans les cartes et les blocs (« Découvrir Arko », « Télécharger le guide »…). Les liens pris dans une phrase (e-mail,
   téléphone, « Confidentialité ») gardent la hauteur de leur ligne : exemption « en ligne » de WCAG 2.5.8. */
@media (max-width: 899px) {
  #menu-principal a { display: flex; align-items: center; min-height: 44px; }
  footer a { display: inline-flex; align-items: center; min-height: 44px; }
  header > div > a { display: inline-flex; align-items: center; min-height: 44px; }
  main :is(article, div) > a.fw-700:not(.r-999) { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Téléphone : corps de texte des cartes et des listes d'offres de 16 à 17 px, interligne un peu plus serré pour que les
   cartes ne s'allongent pas ; la phrase de réassurance de 15 à 16 px. Surtitres (14 px, gras) inchangés. */
@media (max-width: 599px) {
  .arko-stage { transform: scale(.82); transform-origin: 50% 0; margin-bottom: -84px; }
  main .fs-16 { font-size: 17px; line-height: 1.45; }
  main p.fs-15 { font-size: 16px; }
}

/* En-tête collant à partir de 600 px (décision du 15/10) ; sur téléphone il défile avec la page. Fond opaque et ombre
   légère (l'Écran transparent, seule couleur admise hors palette). Une section visée par une ancre (#ressources,
   #apropos, #audit…) s'arrête sous l'en-tête au lieu de passer dessous. Hauteur mesurée de l'en-tête (15/10) : 85 px de
   600 à 899 px, 92 px au-delà, sauf de 900 à 928 px où la navigation passe sur deux lignes (147 px). */
@media (min-width: 600px) {
  header { position: sticky; top: 0; z-index: 10; background: var(--creme); box-shadow: 0 2px 12px rgba(30,42,38,.14); }
  main [id] { scroll-margin-top: 100px; }
}
@media (min-width: 900px) and (max-width: 959px) {
  main [id] { scroll-margin-top: 160px; }
}

/* ── styles de la maquette ── */
body{margin:0;background:var(--creme)}
:where(a){color:var(--emeraude-texte)}:where(a:hover){color:var(--ecran)}
.arko-stage{position:relative;width:340px;height:470px;margin:0 auto}
.arko-stage img{position:absolute;display:block;pointer-events:none;user-select:none;left:33px;top:10px;width:273px}
.arko-fig{position:absolute;inset:0;animation:arko-float 4.2s ease-in-out infinite}
.arko-halo{animation:arko-halo 4.2s ease-in-out infinite}
.arko-eyes{opacity:0;animation:arko-blink 5.5s steps(1,end) infinite}
.arko-fore{transform-origin:84.56% 45.09%;animation:arko-wave 9s ease-in-out infinite}
.arko-shadow{position:absolute;left:95px;bottom:4px;width:150px;height:18px;border-radius:50%;background:rgba(30,42,38,.14);animation:arko-shadow 4.2s ease-in-out infinite}
@keyframes arko-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes arko-halo{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(-6px) scaleX(1.04)}}
@keyframes arko-blink{0%,93%{opacity:0}94%,97%{opacity:1}98%,100%{opacity:0}}
@keyframes arko-wave{0%,58%,100%{transform:rotate(0deg)}62%{transform:rotate(14deg)}66%{transform:rotate(-12deg)}70%{transform:rotate(14deg)}74%{transform:rotate(-12deg)}78%{transform:rotate(12deg)}82%{transform:rotate(-8deg)}86%{transform:rotate(0deg)}}
@keyframes arko-shadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.9);opacity:.6}}
@media (prefers-reduced-motion: reduce){.arko-fig,.arko-halo,.arko-eyes,.arko-fore,.arko-shadow{animation:none}}
body{margin:0;background:var(--creme)}
:where(a){color:var(--emeraude-texte)}:where(a:hover){color:var(--ecran)}
/* ── classes utilitaires (déclarations de la maquette) ── */
.bg-blanc{background:var(--blanc)}
.bg-creme{background:var(--creme)}
.bg-ecran{background:var(--ecran)}
.bg-emeraude{background:var(--emeraude)}
.bg-menthe{background:var(--menthe)}
.bg-radial-gradient-circle-at-50pc-35pc-blanc-0pc-sable-70pc{background:radial-gradient(circle at 50% 35%, var(--blanc) 0%, var(--sable) 70%)}
.bg-sable{background:var(--sable)}
.b-0{border:0}
.b-1-solid-trait{border:1px solid var(--trait)}
.b-2-solid-ecran{border:2px solid var(--ecran)}
.b-2-solid-gris{border:2px solid var(--gris)}
.c-blanc{color:var(--blanc)}
.c-creme{color:var(--creme)}
.c-ecran{color:var(--ecran)}
.c-emeraude-texte{color:var(--emeraude-texte)}
.c-gris{color:var(--gris)}
.c-menthe-vive{color:var(--menthe-vive)}
.cur-pointer{cursor:pointer}
.d-block{display:block}
.d-flex{display:flex}
.d-grid{display:grid}
.d-inline-block{display:inline-block}
.fx-0-1-320{flex:0 1 320px}
.fx-1{flex:1}
.fx-1-1-360{flex:1 1 360px}
.fx-1-1-400{flex:1 1 400px}
.fx-1-1-420{flex:1 1 420px}
.fx-1-1-440{flex:1 1 440px}
.fx-1-1-460{flex:1 1 460px}
.fx-1-1-480{flex:1 1 480px}
.fx-1-1-520{flex:1 1 520px}
.fx-1-1-560{flex:1 1 560px}
.fx-none{flex:none}
.f-inherit{font:inherit}
.g-10{gap:10px}
.g-12{gap:12px}
.g-14{gap:14px}
.g-16{gap:16px}
.g-18{gap:18px}
.g-22{gap:22px}
.g-24{gap:24px}
.g-24-32{gap:24px 32px}
.g-28{gap:28px}
.g-32{gap:32px}
.g-40-48{gap:40px 48px}
.g-40-56{gap:40px 56px}
.g-48{gap:48px}
.g-48-64{gap:48px 64px}
.g-56{gap:56px}
.g-6{gap:6px}
.g-8{gap:8px}
.g-8-24{gap:8px 24px}
.g-8-28{gap:8px 28px}
.h-200{height:200px}
.h-40{height:40px}
.h-auto{height:auto}
.m-0{margin:0}
.m-0-0-16{margin:0 0 16px}
.m-0-auto{margin:0 auto}
.m-12-0-0{margin:12px 0 0}
.m-14-0-0{margin:14px 0 0}
.m-16-0-0{margin:16px 0 0}
.m-2-0-0{margin:2px 0 0}
.m-20-0-0{margin:20px 0 0}
.m-24-0-0{margin:24px 0 0}
.m-28-0-0{margin:28px 0 0}
.m-4-0-0{margin:4px 0 0}
.m-40-0-0{margin:40px 0 0}
.m-48-0-0{margin:48px 0 0}
.m-6-0-0{margin:6px 0 0}
.m-8-0-0{margin:8px 0 0}
.m-auto-0-0{margin:auto 0 0}
.ov-hidden{overflow:hidden}
.p-0{padding:0}
.p-12-14{padding:12px 14px}
.p-12-20{padding:12px 20px}
.p-16-24{padding:16px 24px}
.p-16-28{padding:16px 28px}
.p-18-32{padding:18px 32px}
.p-20-32{padding:20px 32px}
.p-28{padding:28px}
.p-28-16-20{padding:28px 16px 20px}
.p-32{padding:32px}
.p-36{padding:36px}
.p-40-32{padding:40px 32px}
.p-48-32{padding:48px 32px}
.p-64-32-96{padding:64px 32px 96px}
.p-72-32{padding:72px 32px}
.p-72-32-56{padding:72px 32px 56px}
.p-72-32-64{padding:72px 32px 64px}
.p-72-32-96{padding:72px 32px 96px}
.p-88-32{padding:88px 32px}
.p-96-32{padding:96px 32px}
.pos-relative{position:relative}
.rs-vertical{resize:vertical}
.w-100pc{width:100%}
.w-40{width:40px}
.ai-center{align-items:center}
.ai-flex-start{align-items:flex-start}
.bb-1-solid-trait{border-bottom:1px solid var(--trait)}
.r-14{border-radius:14px}
.r-28{border-radius:28px}
.r-32{border-radius:32px}
.r-999{border-radius:999px}
.bt-1-solid-gris{border-top:1px solid var(--gris)}
.bt-1-solid-trait{border-top:1px solid var(--trait)}
.bt-3-solid-abricot{border-top:3px solid var(--abricot)}
.bxs-border-box{box-sizing:border-box}
.fxd-column{flex-direction:column}
.fxw-wrap{flex-wrap:wrap}
.fxw-wrap-reverse{flex-wrap:wrap-reverse}
.ff-texte{font-family:var(--police-texte)}
.ff-titre{font-family:var(--police-titre)}
.fs-14{font-size:14px}
.fs-15{font-size:15px}
.fs-16{font-size:16px}
.fs-17{font-size:17px}
.fs-18{font-size:18px}
.fs-19{font-size:19px}
.fs-21{font-size:21px}
.fs-22{font-size:22px}
.fs-24{font-size:24px}
.fs-26{font-size:26px}
.fs-28{font-size:28px}
.fs-30{font-size:30px}
.fs-32{font-size:32px}
.fs-36{font-size:36px}
.fs-40{font-size:40px}
.fs-42{font-size:42px}
.fs-44{font-size:44px}
.fs-48{font-size:48px}
.fs-56{font-size:56px}
.fs-60{font-size:60px}
.fs-64{font-size:64px}
.fw-500{font-weight:500}
.fw-700{font-weight:700}
.fw-800{font-weight:800}
.jc-center{justify-content:center}
.jc-space-between{justify-content:space-between}
.ls-0_2{letter-spacing:0.2px}
.ls-m0_5{letter-spacing:-0.5px}
.ls-m1{letter-spacing:-1px}
.ls-m1_5{letter-spacing:-1.5px}
.ls-m2{letter-spacing:-2px}
.lh-1_02{line-height:1.02}
.lh-1_05{line-height:1.05}
.lh-1_1{line-height:1.1}
.lh-1_2{line-height:1.2}
.lh-1_25{line-height:1.25}
.lh-1_3{line-height:1.3}
.lh-1_6{line-height:1.6}
.lh-1_65{line-height:1.65}
.lst-none{list-style:none}
.mt-14{margin-top:14px}
.mt-16{margin-top:16px}
.mt-20{margin-top:20px}
.mt-32{margin-top:32px}
.mt-40{margin-top:40px}
.mt-auto{margin-top:auto}
.maxw-1100{max-width:1100px}
.maxw-1200{max-width:1200px}
.maxw-320{max-width:320px}
.maxw-480{max-width:480px}
.maxw-540{max-width:540px}
.maxw-620{max-width:620px}
.maxw-680{max-width:680px}
.maxw-760{max-width:760px}
.maxw-820{max-width:820px}
.maxw-900{max-width:900px}
.minh-48{min-height:48px}
.minh-52{min-height:52px}
.minw-0{min-width:0}
.of-cover{object-fit:cover}
.pl-20{padding-left:20px}
.pl-22{padding-left:22px}
.pt-12{padding-top:12px}
.pt-14{padding-top:14px}
.pt-18{padding-top:18px}
.td-none{text-decoration:none}
.td-underline{text-decoration:underline}
.cols-af-180{grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr))}
.cols-af-240{grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr))}
.cols-af-260{grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr))}
.cols-af-280{grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr))}
.cols-af-300{grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr))}
.cols-af-320{grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr))}
.cols-af-330{grid-template-columns:repeat(auto-fit, minmax(min(330px, 100%), 1fr))}
.cols-af-440{grid-template-columns:repeat(auto-fit, minmax(min(440px, 100%), 1fr))}
.tuo-6{text-underline-offset:6px}
@media (max-width: 599px) {
  .fs-36{font-size:26px}
  .fs-40{font-size:26px}
  .fs-42{font-size:27px}
  .fs-44{font-size:29px}
  .fs-48{font-size:31px}
  .fs-56{font-size:36px}
  .fs-60{font-size:39px}
  .fs-64{font-size:42px}
}
.couverture-guide{object-position:50% 0}
.image-404{display:block;width:100%;max-width:420px;height:auto;margin:24px 0 0;border-radius:24px}