/* Iliade Digital — feuille de style unique.
   Mise en page : le langage du dessin d'atelier. Les preuves chiffrées sont des « cotes »,
   le vert de la marque (#3cc35a) sert de repère, jamais de texte sur fond clair (contraste). */

@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --vert: #3cc35a;          /* couleur de la marque */
  --vert-texte: #1a7433;    /* vert lisible sur fond clair (AA) */
  --vert-pale: #e6f5e9;
  --vert-nuit: #0f2a17;
  --encre: #131813;
  --encre-2: #394239;
  --gris: #5b655a;
  --papier: #f8faf6;
  --carte: #ffffff;
  --trait: #d8dfd4;
  --trait-fort: #b9c4b4;
  --laiton: #9a6d24;

  --f-titre: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-texte: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-cote: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.2rem, 1.05rem + .6vw, 1.45rem);
  --t-xl: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem);
  --t-xxl: clamp(2.2rem, 1.4rem + 3.6vw, 4.1rem);

  --large: 1180px;
  --gouttiere: clamp(16px, 4vw, 32px);
  --rayon: 10px;
  --ombre: 0 1px 2px rgba(19, 24, 19, .06), 0 6px 24px -12px rgba(19, 24, 19, .18);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vert-texte: #62d77d; --vert-pale: #13291a; --vert-nuit: #0b1d10;
    --encre: #eef3ec; --encre-2: #c9d2c6; --gris: #9ba798;
    --papier: #0d110d; --carte: #141a14; --trait: #253025; --trait-fort: #384638;
    --laiton: #d0a259; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --vert-texte: #62d77d; --vert-pale: #13291a; --vert-nuit: #0b1d10;
  --encre: #eef3ec; --encre-2: #c9d2c6; --gris: #9ba798;
  --papier: #0d110d; --carte: #141a14; --trait: #253025; --trait-fort: #384638;
  --laiton: #d0a259; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font: 400 var(--t-m)/1.6 var(--f-texte); font-feature-settings: "ss01";
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vert-texte); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--f-titre); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: var(--t-xxl); letter-spacing: -.03em; font-weight: 750; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
strong { font-weight: 650; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.passer { position: absolute; left: 1rem; top: -4rem; background: var(--encre); color: var(--papier); padding: .6rem 1rem; z-index: 50; border-radius: 6px; }
.passer:focus { top: 1rem; }

.cadre { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: var(--gouttiere); }
.etroit { max-width: 760px; }
.section { padding-block: clamp(3.2rem, 7vw, 6rem); }
.section + .section { border-top: 1px solid var(--trait); }
.section--teinte { background: var(--carte); }
.etiquette {
  font: 600 var(--t-xs)/1.3 var(--f-cote); text-transform: uppercase; letter-spacing: .08em;
  color: var(--vert-texte); display: inline-flex; align-items: center; gap: .55em; margin-bottom: 1rem;
}
.etiquette::before { content: ""; width: 1.6em; height: 1px; background: currentColor; }
.chapo { font-size: var(--t-l); color: var(--encre-2); max-width: 62ch; line-height: 1.5; }
.gris { color: var(--gris); }
.petit { font-size: var(--t-s); }

.bandeau-maintenance { background: #6f5106; color: #fff; text-align: center; font: 600 var(--t-s)/1.4 var(--f-texte); padding: .5rem var(--gouttiere); }

/* ——— En-tête ——— */
.entete {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--trait);
}
.entete__barre { display: flex; align-items: center; gap: 1rem; min-height: 4.2rem; }
/* Logo officiel (dessin d'origine) : le nom prend la couleur de l'encre, blanc en mode sombre. */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--encre); flex: none; }
.logo-officiel { display: block; height: 42px; width: auto; overflow: visible; }
.logo--pied img { height: 46px; width: auto; }
@media (max-width: 520px) { .logo-officiel { height: 32px; } }

/* Animation à l'arrivée sur le site : le cercle tourne et apparaît, les lettres montent une à une,
   le point jaune tombe en place, puis le slogan. Environ 1,6 s, une seule fois par arrivée. */
.arrivee .lo-embleme { animation: lo-embleme .8s cubic-bezier(.2, .9, .25, 1.15) both; transform-box: fill-box; transform-origin: center; }
.arrivee .lo-nom > g { animation: lo-lettre .55s cubic-bezier(.2, .8, .3, 1) both; transform-box: fill-box; }
.arrivee .lo-l0 { animation-delay: .25s; } .arrivee .lo-l1 { animation-delay: .31s; } .arrivee .lo-l2 { animation-delay: .37s; }
.arrivee .lo-l3 { animation-delay: .43s; } .arrivee .lo-l4 { animation-delay: .49s; } .arrivee .lo-l5 { animation-delay: .55s; }
.arrivee .lo-l6 { animation-delay: .61s; } .arrivee .lo-l7 { animation-delay: .67s; } .arrivee .lo-l8 { animation-delay: .73s; }
.arrivee .lo-point { animation: lo-point .6s cubic-bezier(.3, 1.5, .5, 1) 1s both; transform-box: fill-box; transform-origin: center; }
.arrivee .lo-slogan { animation: lo-slogan .7s ease-out .9s both; }
@keyframes lo-embleme { from { opacity: 0; transform: scale(.35) rotate(-120deg); } to { opacity: 1; transform: none; } }
@keyframes lo-lettre { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
@keyframes lo-point { 0% { opacity: 0; transform: translateY(-180%) scale(.6); } 65% { opacity: 1; transform: translateY(12%); } 100% { opacity: 1; transform: none; } }
@keyframes lo-slogan { from { opacity: 0; transform: translateX(-2%); } to { opacity: 1; transform: none; } }
/* Barre : logo à gauche ; à droite « Démos », « Demander un devis » et l'icône du menu (tiroir). */
.entete__actions { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
.entete__demos {
  display: inline-flex; align-items: center; gap: .5rem; color: var(--encre); text-decoration: none;
  font: 600 var(--t-s) var(--f-texte); padding: .55rem .8rem; border-radius: 999px;
}
.entete__demos:hover, .entete__demos[aria-current] { background: var(--vert-pale); color: var(--vert-texte); }
.pastille { width: .5rem; height: .5rem; border-radius: 50%; background: var(--vert); position: relative; flex: none; }
.pastille::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--vert); opacity: 0; animation: pastille 2.4s ease-out infinite; }
@keyframes pastille { 0% { transform: scale(.5); opacity: .9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
.bouton--petit { padding: .62rem 1rem; }
.menu-icone {
  width: 2.75rem; height: 2.75rem; flex: none; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--trait-fort); border-radius: 50%; background: var(--carte); color: var(--encre);
  transition: border-color .2s ease, transform .2s ease;
}
.menu-icone:hover { border-color: var(--encre); }
.menu-icone:active { transform: scale(.94); }
.menu-icone__traits { width: 1.15rem; display: grid; gap: 4px; justify-items: end; }
.menu-icone__traits span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: width .25s cubic-bezier(.3, .7, .3, 1); }
.menu-icone__traits span:nth-child(1) { width: 100%; }
.menu-icone__traits span:nth-child(2) { width: 70%; }
.menu-icone__traits span:nth-child(3) { width: 42%; background: var(--vert); }
.menu-icone:hover .menu-icone__traits span, .menu-icone:focus-visible .menu-icone__traits span { width: 100%; }
/* Le lien (sans JavaScript) et le bouton (avec) ont la même apparence ; un seul est affiché. */
.js .sans-js, .no-js .avec-js { display: none; }
@media (max-width: 720px) { .entete__demos { display: none; } }
.entete__devis-court { display: none; }
@media (max-width: 520px) { .entete__devis-long { display: none; } .entete__devis-court { display: inline; } .entete__actions { gap: .4rem; } .bouton--petit { padding: .58rem .85rem; } }

/* ——— Tiroir du menu (boîte de dialogue native : piège du focus, Échap et fond inerte gérés par le navigateur) ——— */
.tiroir {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0; max-width: 100vw; max-height: 100dvh;
  width: min(30rem, 100vw); height: 100dvh; background: transparent; color: #eef6ef; overflow: visible;
}
.tiroir::backdrop { background: rgba(6, 14, 8, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; }
.tiroir.ouvert::backdrop { opacity: 1; }
.tiroir__panneau {
  height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1.4rem;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) clamp(1.2rem, 5vw, 2rem) calc(1.6rem + env(safe-area-inset-bottom, 0px));
  background-color: #0c1f12;
  background-image: linear-gradient(rgba(60, 195, 90, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 195, 90, .07) 1px, transparent 1px);
  background-size: 28px 28px; box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .5);
  transform: translateX(104%); transition: transform .42s cubic-bezier(.22, .8, .2, 1);
}
.tiroir.ouvert .tiroir__panneau { transform: none; }
.tiroir__haut { display: flex; align-items: center; justify-content: space-between; }
.tiroir__titre { margin: 0; font: 600 var(--t-xs) var(--f-cote); text-transform: uppercase; letter-spacing: .12em; color: #8fd9a0; }
.tiroir__fermer {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(238, 246, 239, .25); background: transparent;
  cursor: pointer; display: grid; place-items: center; transition: transform .3s ease, border-color .2s ease;
}
.tiroir__fermer:hover { border-color: #eef6ef; transform: rotate(90deg); }
.tiroir__fermer span, .tiroir__fermer span::before { display: block; width: 1.1rem; height: 2px; background: #eef6ef; border-radius: 2px; transform: rotate(45deg); }
.tiroir__fermer span::before { content: ""; transform: rotate(90deg); }
.tiroir__groupe { margin: 0 0 .3rem; font: 600 var(--t-xs) var(--f-cote); text-transform: uppercase; letter-spacing: .1em; color: rgba(238, 246, 239, .55); }
.tiroir__liste { list-style: none; margin: 0 0 1.3rem; padding: 0; border-top: 1px solid rgba(238, 246, 239, .12); }
.tiroir__liste li { border-bottom: 1px solid rgba(238, 246, 239, .12); }
.tiroir__lien {
  display: grid; grid-template-columns: 2.2rem 1fr auto; grid-template-areas: "num nom fleche" "num ligne fleche";
  align-items: baseline; column-gap: .4rem; padding: .7rem 0; color: #eef6ef; text-decoration: none; position: relative;
}
.tiroir__lien::after { content: "→"; grid-area: fleche; align-self: center; color: var(--vert); opacity: 0; transform: translateX(-8px); transition: opacity .2s ease, transform .2s ease; }
.tiroir__lien:hover::after, .tiroir__lien:focus-visible::after, .tiroir__lien[aria-current]::after { opacity: 1; transform: none; }
.tiroir__num { grid-area: num; font: 500 var(--t-xs) var(--f-cote); color: var(--vert); }
.tiroir__nom { grid-area: nom; font: 650 clamp(1.15rem, 1rem + .7vw, 1.4rem)/1.2 var(--f-titre); letter-spacing: -.01em; transition: color .2s ease; }
.tiroir__ligne { grid-area: ligne; font-size: var(--t-xs); color: rgba(238, 246, 239, .6); }
.tiroir__lien:hover .tiroir__nom, .tiroir__lien[aria-current] .tiroir__nom { color: #8fe3a2; }
.tiroir__liste--essai .tiroir__lien { padding-block: .6rem; }
.tiroir__maison { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.tiroir__maison a {
  display: inline-block; color: #eef6ef; text-decoration: none; font-size: var(--t-s); font-weight: 550;
  border: 1px solid rgba(238, 246, 239, .2); border-radius: 999px; padding: .45rem .85rem; transition: border-color .2s ease, background .2s ease;
}
.tiroir__maison a:hover, .tiroir__maison a[aria-current] { border-color: var(--vert); background: rgba(60, 195, 90, .12); }
.tiroir__bas { margin-top: auto; display: grid; gap: .9rem; padding-top: 1rem; border-top: 1px solid rgba(238, 246, 239, .12); }
.tiroir__bas .bouton { justify-content: center; }
.tiroir__bas p { margin: 0; font-size: var(--t-s); color: rgba(238, 246, 239, .75); }
.tiroir__bas p a { color: #9ee8af; }
.tiroir :focus-visible { outline-color: #8fe3a2; }
/* Les lignes du menu arrivent l'une après l'autre. */
.tiroir.ouvert .tiroir__liste li, .tiroir.ouvert .tiroir__groupe, .tiroir.ouvert .tiroir__maison, .tiroir.ouvert .tiroir__bas { animation: tiroir-ligne .5s cubic-bezier(.2, .8, .3, 1) both; }
.tiroir.ouvert .tiroir__liste li:nth-child(2) { animation-delay: .04s; } .tiroir.ouvert .tiroir__liste li:nth-child(3) { animation-delay: .08s; }
.tiroir.ouvert .tiroir__liste li:nth-child(4) { animation-delay: .12s; } .tiroir.ouvert .tiroir__liste li:nth-child(5) { animation-delay: .16s; }
.tiroir.ouvert .tiroir__liste li:nth-child(6) { animation-delay: .2s; }
.tiroir.ouvert .tiroir__liste--essai li:nth-child(1) { animation-delay: .22s; } .tiroir.ouvert .tiroir__liste--essai li:nth-child(2) { animation-delay: .26s; }
.tiroir.ouvert .tiroir__maison { animation-delay: .3s; } .tiroir.ouvert .tiroir__bas { animation-delay: .34s; }
@keyframes tiroir-ligne { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
html.tiroir-ouvert { overflow: hidden; }

/* ——— Boutons ——— */
.bouton {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; cursor: pointer;
  font: 650 var(--t-s)/1 var(--f-texte); padding: .85rem 1.2rem; border-radius: 999px; border: 1.5px solid transparent;
  background: var(--vert); color: #0b1a0f; transition: transform .15s ease, box-shadow .15s ease;
}
.bouton:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(60, 195, 90, .7); text-decoration: none; }
.bouton--ligne { background: transparent; color: var(--encre); border-color: var(--trait-fort); }
.bouton--ligne:hover { border-color: var(--encre); box-shadow: none; }
.bouton--grand { padding: 1.05rem 1.5rem; font-size: var(--t-m); }
.boutons { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ——— Ouverture des pages ——— */
.ouverture { position: relative; padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; }
.ouverture::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image:
    linear-gradient(var(--trait) 1px, transparent 1px),
    linear-gradient(90deg, var(--trait) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 30% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 85% 75% at 30% 0%, #000 30%, transparent 75%);
}
.ouverture h1 { max-width: 17ch; }
.ouverture h1 em { font-style: normal; color: var(--vert-texte); }
.ouverture .chapo { margin-bottom: 1.8rem; }
.fil { font-size: var(--t-xs); color: var(--gris); margin-bottom: 1.4rem; font-family: var(--f-cote); }
.fil a { color: var(--gris); }
.fil span[aria-hidden] { margin-inline: .45em; }

/* La « cote » : une mesure comme sur un plan. */
.cote {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem;
  font-family: var(--f-cote); font-variant-numeric: tabular-nums;
}
.cote__avant { color: var(--gris); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--gris) 60%, transparent); }
.cote__apres { color: var(--encre); font-weight: 700; }
.cote__ligne { position: relative; height: 12px; }
.cote__ligne::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--vert); }
.cote__ligne::after {
  content: ""; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-top: 1.5px solid var(--vert); border-right: 1.5px solid var(--vert); transform: rotate(45deg);
}
.preuves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.preuve { background: var(--carte); padding: 1.3rem 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.preuve__chiffre { font: 700 clamp(1.25rem, 1rem + 1vw, 1.6rem)/1.1 var(--f-cote); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.preuve__texte { font-size: var(--t-s); color: var(--encre-2); margin: 0; }
.preuve__source { font-size: var(--t-xs); color: var(--gris); margin-top: auto; }

/* ——— Grilles et cartes ——— */
.grille { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.carte {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1.4rem; display: flex; flex-direction: column; gap: .7rem; min-width: 0; position: relative;
}
.carte h3 { margin: 0; }
.carte p { margin: 0; color: var(--encre-2); }
.carte__lien { text-decoration: none; color: inherit; }
.carte__lien::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon); }
.carte:has(.carte__lien):hover { border-color: var(--trait-fort); box-shadow: var(--ombre); }
.carte__pied { margin-top: auto; padding-top: .6rem; display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; font-size: var(--t-s); }
.carte__prix { font-family: var(--f-cote); font-size: var(--t-xs); color: var(--gris); }
.carte__fleche { color: var(--vert-texte); font-weight: 650; white-space: nowrap; }
.carte__num { font: 600 var(--t-xs) var(--f-cote); color: var(--gris); letter-spacing: .06em; }

/* Pôles de l'accueil : numérotés comme des repères de plan (l'ordre est celui de la page). */
.poles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); border-top: 1px solid var(--trait); }
.pole { padding: 1.6rem 1.4rem 1.6rem 0; border-bottom: 1px solid var(--trait); display: grid; grid-template-columns: 3.2rem 1fr; gap: .2rem 1rem; position: relative; }
.pole__repere { grid-row: span 3; font: 600 var(--t-xs) var(--f-cote); color: var(--vert-texte); border: 1px solid var(--vert); border-radius: 50%; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; }
.pole h3 { margin: 0 0 .2rem; }
.pole h3 a { color: var(--encre); text-decoration: none; }
.pole h3 a::after { content: ""; position: absolute; inset: 0; }
.pole:hover h3 a { color: var(--vert-texte); }
.pole p { margin: 0; color: var(--encre-2); font-size: var(--t-s); }
.pole__prix { font: 500 var(--t-xs) var(--f-cote); color: var(--gris); margin-top: .5rem !important; }

/* ——— Offres avec prix ——— */
.offres { border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--carte); overflow: hidden; }
.offre { display: grid; grid-template-columns: 1fr auto; gap: .4rem 2rem; padding: 1.25rem 1.4rem; border-bottom: 1px solid var(--trait); align-items: baseline; }
.offre:last-child { border-bottom: 0; }
.offre h3 { font-size: var(--t-m); margin: 0; font-family: var(--f-texte); font-weight: 700; letter-spacing: 0; }
.offre p { grid-column: 1; margin: 0; color: var(--encre-2); font-size: var(--t-s); max-width: 62ch; }
.offre__prix { grid-row: 1 / span 2; grid-column: 2; text-align: right; font: 600 var(--t-s)/1.35 var(--f-cote); font-variant-numeric: tabular-nums; white-space: nowrap; }
.offre__prix small { display: block; font-weight: 400; color: var(--gris); font-size: var(--t-xs); }
@media (max-width: 640px) {
  .offre { grid-template-columns: 1fr; }
  .offre__prix { grid-row: auto; grid-column: 1; text-align: left; }
}

/* ——— Mise en page en deux colonnes ——— */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.duo--texte { align-items: start; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
.liste-coches { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .55rem; }
.liste-coches li { padding-left: 1.7rem; position: relative; }
.liste-coches li::before { content: ""; position: absolute; left: .1rem; top: .45em; width: .9rem; height: .5rem; border-left: 2px solid var(--vert); border-bottom: 2px solid var(--vert); transform: rotate(-45deg); }

/* ——— Images ——— */
.figure { margin: 0; }
.figure img { border-radius: var(--rayon); border: 1px solid var(--trait); background: var(--carte); }
.figure figcaption { font-size: var(--t-xs); color: var(--gris); margin-top: .6rem; font-family: var(--f-cote); }
.figure--telephone { max-width: 260px; margin-inline: auto; }
.figure--telephone img { border-radius: 22px; border: 6px solid var(--encre); }
.vignette { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; border-radius: calc(var(--rayon) - 4px); border: 1px solid var(--trait); }

/* ——— Bande d'appel ——— */
.appel { background: var(--vert-nuit); color: #eef6ef; border-radius: calc(var(--rayon) + 6px); padding: clamp(1.8rem, 5vw, 3.2rem); display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.appel h2 { color: #fff; margin: 0 0 .3rem; }
.appel p { margin: 0; color: #c8dccb; }
.appel a:not(.bouton) { color: #9ee8af; }
@media (max-width: 760px) { .appel { grid-template-columns: 1fr; } }

/* ——— Questions fréquentes ——— */
.faq details { border-bottom: 1px solid var(--trait); padding: 1rem 0; }
.faq summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-cote); color: var(--vert-texte); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: .7rem 0 0; color: var(--encre-2); }

/* ——— Méthode : étapes (vraie séquence) ——— */
.etapes { counter-reset: e; display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.etapes li { counter-increment: e; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--trait); }
.etapes li::before { content: counter(e, decimal-leading-zero); font: 600 var(--t-s) var(--f-cote); color: var(--vert-texte); padding-top: .15rem; }
.etapes h3 { font-size: var(--t-m); margin: 0 0 .2rem; font-family: var(--f-texte); font-weight: 700; letter-spacing: 0; }
.etapes p { margin: 0; color: var(--encre-2); }

/* ——— Réalisations ——— */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.filtres button { font: 600 var(--t-s) var(--f-texte); border: 1px solid var(--trait-fort); background: var(--carte); color: var(--encre); padding: .5rem .95rem; border-radius: 999px; cursor: pointer; }
.filtres button[aria-pressed="true"] { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.badge { display: inline-block; font: 600 .7rem/1 var(--f-cote); text-transform: uppercase; letter-spacing: .06em; padding: .35rem .55rem; border-radius: 5px; background: var(--vert-pale); color: var(--vert-texte); }
.badge--neutre { background: color-mix(in srgb, var(--gris) 14%, transparent); color: var(--encre-2); }
.fiche-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 1rem; border-block: 1px solid var(--trait); padding-block: 1rem; margin-block: 1.6rem; }
.fiche-meta dt { font: 600 var(--t-xs) var(--f-cote); text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.fiche-meta dd { margin: .2rem 0 0; font-weight: 600; }

/* ——— Texte long (articles, pages légales) ——— */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); }
.prose h3 { margin-top: 1.8em; font-size: var(--t-l); }
.prose li { margin-bottom: .4em; }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.prose th, .prose td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.prose th { font-family: var(--f-cote); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--gris); font-weight: 600; }
.tableau { overflow-x: auto; margin-block: 1.4rem; }
.prose code { font-family: var(--f-cote); font-size: .9em; background: var(--vert-pale); padding: .1em .35em; border-radius: 4px; }
.prose pre { overflow-x: auto; background: var(--carte); border: 1px solid var(--trait); padding: 1rem; border-radius: var(--rayon); font-size: var(--t-s); }
.prose blockquote { margin: 1.4rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--vert); color: var(--encre-2); }
.encadre { border: 1px solid var(--trait); border-left: 3px solid var(--vert); background: var(--carte); padding: 1.1rem 1.3rem; border-radius: 0 var(--rayon) var(--rayon) 0; margin-block: 1.6rem; }
.encadre p:last-child { margin: 0; }
.info-article { font-family: var(--f-cote); font-size: var(--t-xs); color: var(--gris); display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: 1.6rem; }

/* ——— Formulaire ——— */
.formulaire { display: grid; gap: 1.1rem; }
.champs-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.1rem; }
.champ label { display: block; font-weight: 650; font-size: var(--t-s); margin-bottom: .35rem; }
.champ label span { font-weight: 400; color: var(--gris); }
.champ input, .champ select, .champ textarea {
  width: 100%; font: 400 var(--t-m) var(--f-texte); color: var(--encre); background: var(--carte);
  border: 1.5px solid var(--trait-fort); border-radius: 8px; padding: .75rem .85rem;
}
.champ textarea { min-height: 9rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 30%, transparent); }
.champ [aria-invalid="true"] { border-color: #c2412d; }
.erreur { color: #b53a26; font-size: var(--t-s); margin-top: .35rem; }
.alerte { border: 1px solid #e3a597; background: color-mix(in srgb, #c2412d 8%, var(--carte)); padding: 1rem 1.2rem; border-radius: 8px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ——— Pied de page ——— */
.pied { background: var(--carte); border-top: 1px solid var(--trait); padding-block: 3.2rem 2rem; margin-top: clamp(3rem, 7vw, 5rem); font-size: var(--t-s); }
.pied__grille { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
@media (max-width: 860px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied__grille { grid-template-columns: 1fr; } }
.pied .logo { margin-bottom: .2rem; }
.pied h2 { font: 600 var(--t-xs) var(--f-cote); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); margin-bottom: .9rem; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.pied a { color: var(--encre-2); text-decoration: none; }
.pied a:hover { color: var(--vert-texte); text-decoration: underline; }
.pied__intro { margin-top: 1rem; max-width: 34ch; }
.pied__legal { border-top: 1px solid var(--trait); margin-top: 2.4rem; padding-top: 1.4rem; color: var(--gris); font-size: var(--t-xs); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; }

/* ——— Divers ——— */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.centre { text-align: center; }
.espace { height: clamp(1.5rem, 4vw, 2.5rem); }
.colonnes-texte { columns: 2 22rem; column-gap: 3rem; }
.nombre-grand { font: 750 var(--t-xxl)/1 var(--f-titre); letter-spacing: -.04em; color: var(--vert-texte); }

/* ——— Mouvement (v2). Tout ce qui suit est décoratif : sans JavaScript ou avec « réduire les animations »,
   le contenu est affiché tel quel, complet. ——— */

/* Apparition au défilement : posée par site.js seulement sur ce qui est encore sous la ligne de flottaison. */
.a-reveler {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--delai, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--delai, 0ms);
}
.a-reveler.revele { opacity: 1; transform: none; }
.a-reveler.etiquette::before { width: 0; transition: width .6s cubic-bezier(.3, .7, .2, 1) calc(var(--delai, 0ms) + .25s); }
.a-reveler.revele.etiquette::before { width: 1.6em; }
/* Les « cotes » (avant → après) se tracent comme sur un plan. */
.a-reveler .cote__ligne::before { transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.3, .7, .2, 1) calc(var(--delai, 0ms) + .3s); }
.a-reveler.revele .cote__ligne::before { transform: none; }
.a-reveler .cote__ligne::after { opacity: 0; transition: opacity .25s ease calc(var(--delai, 0ms) + 1.1s); }
.a-reveler.revele .cote__ligne::after { opacity: 1; }
.a-reveler .cote__apres { opacity: 0; transition: opacity .4s ease calc(var(--delai, 0ms) + 1.15s); }
.a-reveler.revele .cote__apres { opacity: 1; }

/* Le mot clé du titre se souligne à l'arrivée sur la page. */
.ouverture h1 em { background: linear-gradient(var(--vert), var(--vert)) 0 96% / 0 .06em no-repeat; animation: souligne .9s cubic-bezier(.3, .7, .2, 1) .35s forwards; }
@keyframes souligne { to { background-size: 100% .06em; } }
/* La grille de plan des ouvertures dérive très lentement. */
.ouverture::before { animation: grille-derive 60s linear infinite; }
@keyframes grille-derive { to { background-position: 28px 56px, 56px 28px; } }

/* Halo qui suit la souris sur les cartes (position donnée par site.js). */
.carte, .pole { --mx: 50%; --my: -200px; }
.carte { background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--vert) 9%, transparent), transparent 45%), var(--carte); }

/* ——— Ouverture de l'accueil : texte à gauche, vitrine de trois écrans à droite. ——— */
.heros { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.heros h1 { font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.2rem); max-width: none; }
@media (max-width: 980px) { .heros { grid-template-columns: 1fr; } }
.vitrine { position: relative; aspect-ratio: 16 / 12.6; margin: 0; cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.vitrine__ecran {
  position: absolute; width: 84%; margin: 0; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(10, 30, 15, .5), 0 2px 6px rgba(10, 30, 15, .06);
  transition: left .9s cubic-bezier(.2, .75, .2, 1), top .9s cubic-bezier(.2, .75, .2, 1), transform .9s cubic-bezier(.2, .75, .2, 1), opacity .9s ease, filter .9s ease;
}
.vitrine__ecran img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 70%; border: 0; border-radius: 0; }
.vitrine__barre { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--trait); font: 500 11px/1.2 var(--f-cote); color: var(--gris); }
.vitrine__barre i { width: 9px; height: 9px; border-radius: 50%; background: var(--trait-fort); flex: none; }
.vitrine__barre i:first-child { background: #e8735f; } .vitrine__barre i:nth-child(2) { background: #e7b84a; } .vitrine__barre i:nth-child(3) { background: var(--vert); }
.vitrine__barre b { margin-left: .5rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vitrine__ecran[data-pos="0"] { left: 0; top: 24%; z-index: 3; }
.vitrine__ecran[data-pos="1"] { left: 8%; top: 12%; z-index: 2; transform: scale(.95); opacity: .92; }
.vitrine__ecran[data-pos="2"] { left: 16%; top: 0; z-index: 1; transform: scale(.9); opacity: .75; filter: saturate(.55); }
.vitrine__pastille {
  position: absolute; right: 0; bottom: 2%; z-index: 4; margin: 0; max-width: 17rem; display: flex; gap: .6rem; align-items: center;
  background: #0c1f12; color: #dff3e3; border-radius: 10px; padding: .65rem .85rem; font: 500 var(--t-xs)/1.35 var(--f-cote);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .6); animation: flotte 6s ease-in-out infinite;
}
.vitrine__pastille b { color: var(--vert); font-weight: 700; }
@keyframes flotte { 50% { transform: translateY(-6px); } }
.vitrine__legende { font: 500 var(--t-xs) var(--f-cote); color: var(--gris); margin-top: .9rem; }

/* ——— Bande de nuit (photos 3D) : fond sombre dans les deux thèmes ——— */
.bande-nuit { background: #0c1f12; color: #e6f2e8; border-top: 0 !important; }
.bande-nuit + .section { border-top: 0; }
.bande-nuit h2 { color: #fff; margin: 0; }
.bande-nuit .etiquette { color: #8fe3a2; }
.bande-nuit p { color: #c8dccb; }
.bande-nuit__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; margin-bottom: 2rem; }
.bande-nuit__tete p { margin: 0; max-width: 52ch; }
@media (max-width: 860px) { .bande-nuit__tete { grid-template-columns: 1fr; } }
.bande-nuit__boutons { margin-top: 1.8rem; }
.bande-nuit :focus-visible { outline-color: #8fe3a2; }
.mosaique { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .8rem; }
.mosaique figure { margin: 0; position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 10; background: #13291a; }
.mosaique img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.mosaique figure:hover img { transform: scale(1.045); }
.mosaique__grande { grid-row: 1 / span 3; aspect-ratio: auto !important; }
.mosaique figcaption {
  position: absolute; left: .6rem; bottom: .6rem; background: rgba(6, 14, 8, .72); color: #eef6ef; font: 500 var(--t-xs)/1.2 var(--f-cote);
  padding: .32rem .55rem; border-radius: 6px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
@media (max-width: 640px) {
  .mosaique { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .mosaique__grande { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10 !important; }
  .mosaique figure:not(.mosaique__grande) figcaption { display: none; }
}
.bouton--clair { background: transparent; color: #eef6ef; border-color: rgba(238, 246, 239, .35); }
.bouton--clair:hover { border-color: #eef6ef; box-shadow: none; }

/* ——— Estimateur de prix (/estimation/) ——— */
.estimateur { max-width: 860px; margin-inline: auto; background: var(--carte); border: 1px solid var(--trait); border-radius: calc(var(--rayon) + 6px); box-shadow: var(--ombre); }
.estimateur__etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--trait); }
.estimateur__etapes li { position: relative; padding: .9rem 1rem; display: flex; align-items: center; gap: .5rem; font: 600 var(--t-xs) var(--f-cote); text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.estimateur__etapes li span { width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%; border: 1px solid var(--trait-fort); display: grid; place-items: center; transition: background .3s ease, border-color .3s ease; }
.estimateur__etapes li[aria-current] { color: var(--vert-texte); }
.estimateur__etapes li[aria-current] span, .estimateur__etapes li.fait span { background: var(--vert); border-color: var(--vert); color: #0b1a0f; }
.estimateur__etapes li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--vert); transition: width .45s cubic-bezier(.3, .7, .2, 1); }
.estimateur__etapes li[aria-current]::after, .estimateur__etapes li.fait::after { width: 100%; }
.estimateur__corps { padding: clamp(1.1rem, 4vw, 2rem); }
.estimateur__etape { border: 0; margin: 0; padding: 0; min-width: 0; animation: d-monte .45s cubic-bezier(.2, .8, .3, 1) both; }
.estimateur__etape legend { font: 700 var(--t-l)/1.2 var(--f-titre); margin-bottom: 1.1rem; padding: 0; }
.estimateur__etape legend:focus { outline: none; }
.estimateur__types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .7rem; }
.type { position: relative; display: grid; gap: .3rem; padding: 1rem 1.1rem 1rem 2.9rem; border: 1.5px solid var(--trait-fort); border-radius: var(--rayon); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.type:hover { border-color: var(--encre); }
.type input { position: absolute; left: 1.05rem; top: 1.15rem; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--vert); }
.type:has(input:checked) { border-color: var(--vert); background: var(--vert-pale); }
.type input:checked ~ .type__nom { color: var(--vert-texte); }
.type__nom { font-weight: 700; }
.type__prix { font: 500 var(--t-xs) var(--f-cote); color: var(--gris); }
.estimateur__question { font-weight: 700; margin: 1.4rem 0 .55rem; }
.estimateur__groupe > .estimateur__question:first-child { margin-top: 0; }
.choix { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: center; padding: .65rem .8rem; border: 1px solid var(--trait); border-radius: 8px; margin-bottom: .45rem; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.choix:hover { border-color: var(--trait-fort); }
.choix:has(input:checked) { border-color: var(--vert); background: color-mix(in srgb, var(--vert-pale) 65%, transparent); }
.choix input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--vert); }
.choix__texte { display: grid; }
.choix__nom { font-weight: 550; }
.choix__aide { font-size: var(--t-xs); color: var(--gris); }
.choix__prix { font: 500 var(--t-xs) var(--f-cote); color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.estimateur__note { font-size: var(--t-s); color: var(--gris); margin: 1rem 0 0; }
.estimateur__bas {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: .8rem; padding: .9rem clamp(1.1rem, 4vw, 2rem) calc(.9rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--trait); background: color-mix(in srgb, var(--carte) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 0 0 calc(var(--rayon) + 6px) calc(var(--rayon) + 6px);
}
.estimateur__bas [data-suite], .estimateur__bas [data-envoyer] { margin-left: auto; }
.estimateur__bas .bouton[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.estimateur__direct { margin: 0; font: 600 var(--t-s) var(--f-cote); font-variant-numeric: tabular-nums; }
.estimateur__direct span { color: var(--gris); font-weight: 400; }
.estimation__fourchette { margin: 0 0 .3rem; font: 750 clamp(1.8rem, 1.3rem + 2vw, 2.6rem)/1.1 var(--f-titre); letter-spacing: -.02em; color: var(--vert-texte); font-variant-numeric: tabular-nums; }
.estimation__fourchette small { font-size: .45em; color: var(--gris); }
.estimation__a { font-weight: 400; color: var(--gris); font-size: .6em; }
.estimation__mois { font: 600 var(--t-m) var(--f-cote); margin: 0; }
.estimation__lignes { list-style: none; padding: 0; margin: 1rem 0; border-top: 1px solid var(--trait); }
.estimation__lignes li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--trait); font-size: var(--t-s); }
.estimation__lignes li span:last-child { font-family: var(--f-cote); white-space: nowrap; }
.estimation__note { font-size: var(--t-s); color: var(--gris); }
.estimateur__envoi { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px dashed var(--trait-fort); display: grid; gap: 1rem; }
.estimateur__envoi h3 { margin: 0; }
.estimateur [data-champ-message] { min-height: 11rem; }
@media (max-width: 520px) {
  .estimateur__etapes li { font-size: .68rem; padding: .7rem .45rem; gap: .35rem; letter-spacing: .03em; }
  .estimateur__bas { flex-wrap: wrap; }
  .estimateur__direct { order: -1; width: 100%; }
  .choix { grid-template-columns: auto minmax(0, 1fr); }
  .choix__prix { grid-column: 2; }
}

/* ——— Tableau de bord de la page « développement assisté par IA » : les aiguilles montent quand il apparaît ——— */
.tableau-de-bord .jauge-puissance { stroke-dasharray: 100; stroke-dashoffset: 12; }
.tableau-de-bord .jauge-maitrise { stroke-dasharray: 100; stroke-dashoffset: 3; }
.tableau-de-bord .aiguille { transform-box: view-box; }
.tableau-de-bord .aiguille--puissance { transform-origin: 190px 160px; transform: rotate(91deg); }
.tableau-de-bord .aiguille--maitrise { transform-origin: 450px 160px; transform: rotate(113deg); }
.a-reveler .tableau-de-bord .aiguille { transform: rotate(-120deg); }
.a-reveler .tableau-de-bord .jauge-puissance, .a-reveler .tableau-de-bord .jauge-maitrise { stroke-dashoffset: 100; }
.a-reveler.revele .tableau-de-bord .aiguille--puissance { transform: rotate(91deg); }
.a-reveler.revele .tableau-de-bord .aiguille--maitrise { transform: rotate(113deg); }
.a-reveler.revele .tableau-de-bord .jauge-puissance { stroke-dashoffset: 12; }
.a-reveler.revele .tableau-de-bord .jauge-maitrise { stroke-dashoffset: 3; }
.a-reveler.revele .tableau-de-bord .aiguille { transition: transform 1.8s cubic-bezier(.3, .7, .2, 1) .4s; }
.a-reveler.revele .tableau-de-bord .aiguille--maitrise { transition-delay: .7s; }
.a-reveler.revele .tableau-de-bord [class*="jauge-"] { transition: stroke-dashoffset 1.8s cubic-bezier(.3, .7, .2, 1) .4s; }

/* ——— Écran d'arrivée « L'Odyssée du Web » : une table à cartes marine. La rose des vents se pose, le compas trace
   le cercle et ses cotes, un navire suit sa route jusqu'au centre où l'emblème se pose, puis le nom s'écrit.
   Seulement à l'arrivée sur le site (classe « arrivee ») ; tout en CSS : il s'efface seul vers 2,8 s, même sans
   JavaScript ; un toucher ou une touche le passe (site.js). Jamais si l'on demande moins d'animations. ——— */
.ecran-arrivee { display: none; }
.arrivee .ecran-arrivee {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top, 0px) 24px env(safe-area-inset-bottom, 0px); overflow: hidden; color: #eef6ef; cursor: pointer;
  background: radial-gradient(110% 80% at 50% 40%, #153a22, #0b1d10 55%, #050d07); background-color: #0b1d10;
  -webkit-user-select: none; user-select: none; animation: ea-sortie .5s ease 2.8s forwards;
}
.arrivee .ecran-arrivee::before {
  content: ""; position: absolute; inset: -10%; pointer-events: none;
  background-image:
    linear-gradient(rgba(143, 227, 162, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 227, 162, .08) 1px, transparent 1px),
    linear-gradient(rgba(143, 227, 162, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 227, 162, .04) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: center;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 42%, #000 30%, transparent 100%); mask-image: radial-gradient(60% 55% at 50% 42%, #000 30%, transparent 100%);
  animation: ea-grille 2.6s cubic-bezier(.2, .8, .2, 1) both;
}
.arrivee .ecran-arrivee.fini { animation: ea-sortie .35s ease forwards; }
.ecran-arrivee svg { display: block; overflow: visible; position: relative; }
.ea-carte { width: min(74vw, 400px); height: auto; margin-top: -3vh; }
.ea-carte * { transform-box: view-box; }
.arrivee .ecran-arrivee .ea-carte { animation: ea-loin .5s ease 2.8s forwards; }
.ea-rose { color: rgba(143, 227, 162, .42); transform-origin: 0 0; animation: ea-rose 1.6s cubic-bezier(.2, .8, .2, 1) .05s both; }
.ea-cardinaux text { font: 600 15px var(--f-cote); fill: rgba(143, 227, 162, .62); }
.ea-construction { stroke: #8fe3a2; stroke-width: 1.4; }
.ea-trace { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ea-t-axes { opacity: .45; animation: ea-trace .7s ease-out .15s forwards, ea-pali .6s ease 1.5s forwards; }
.ea-t-cercle { animation: ea-trace .85s linear .3s forwards, ea-pali .6s ease 1.55s forwards; }
.ea-t-cote { animation: ea-trace .45s ease-out .95s forwards, ea-pali .6s ease 1.75s forwards; }
.ea-t-route { animation: ea-trace .8s cubic-bezier(.4, 0, .3, 1) .45s forwards; }
.ea-route { fill: none; stroke: #fcd109; stroke-width: 2.2; stroke-dasharray: 6 8; stroke-linecap: round; animation: ea-pali-route .6s ease 1.8s forwards; }
.ea-texte { font: 500 15px var(--f-cote); fill: #8fe3a2; letter-spacing: .08em; opacity: 0; }
.ea-x-cote { animation: ea-montre .3s 1.15s forwards, ea-pali .6s ease 1.85s forwards; }
.ea-x-coord { animation: ea-montre .3s .95s forwards; }
.ea-x-coord2 { animation: ea-montre .3s 1.05s forwards; }
.ea-x-lieu { animation: ea-montre .3s 1.15s forwards; }
.ea-outils { fill: #eef6ef; }
.ea-plume, .ea-navire { opacity: 0; offset-rotate: 0deg; }
.ea-plume { offset-path: path("M0 -176A176 176 0 1 1 -0.1 -176"); animation: ea-outil .85s linear .3s both; }
.ea-navire { offset-path: path("M-292 262C-246 250-252 196-206 178S-140 150-112 120"); animation: ea-outil .8s cubic-bezier(.4, 0, .3, 1) .45s both; }
.ea-navire circle:last-child { fill: #fcd109; }
@supports not (offset-path: path("M0 0")) { .ea-outils { display: none; } }
.ea-onde { fill: none; stroke: #3cc35a; stroke-width: 2; opacity: 0; transform-origin: 0 0; animation: ea-onde 1.1s ease-out 1.2s both; }
.ea-embleme { transform-origin: 0 0; animation: ea-embleme .8s cubic-bezier(.2, .9, .25, 1.15) 1.1s both; }
.ea-balayage { animation: ea-balayage .9s ease-in-out 1.8s both; }
.ea-eclat { opacity: 0; transform-origin: 0 0; animation: ea-eclat .8s ease-out 2.2s both; }
.ea-nom { width: min(84vw, 470px); height: auto; margin-top: 20px; }
.arrivee .ecran-arrivee .lo-l0 { animation-delay: 1.35s; } .arrivee .ecran-arrivee .lo-l1 { animation-delay: 1.4s; }
.arrivee .ecran-arrivee .lo-l2 { animation-delay: 1.45s; } .arrivee .ecran-arrivee .lo-l3 { animation-delay: 1.5s; }
.arrivee .ecran-arrivee .lo-l4 { animation-delay: 1.55s; } .arrivee .ecran-arrivee .lo-l5 { animation-delay: 1.6s; }
.arrivee .ecran-arrivee .lo-l6 { animation-delay: 1.65s; } .arrivee .ecran-arrivee .lo-l7 { animation-delay: 1.7s; }
.arrivee .ecran-arrivee .lo-l8 { animation-delay: 1.75s; }
.arrivee .ecran-arrivee .lo-slogan { animation-delay: 1.85s; }
.arrivee .ecran-arrivee .lo-point { animation-delay: 1.95s; }
.ea-devise {
  margin: 14px 0 0; font: 600 10.5px/1 var(--f-cote); text-transform: uppercase; letter-spacing: .38em; padding-left: .38em;
  color: #8fe3a2; text-align: center; animation: ea-devise .8s cubic-bezier(.2, .8, .2, 1) 2.05s both;
}
.ea-barre { position: relative; width: 84px; height: 2px; margin-top: 28px; border-radius: 2px; overflow: hidden; background: rgba(143, 227, 162, .18); animation: ea-montre .3s .2s both; }
.ea-barre::after { content: ""; position: absolute; inset: 0; background: #3cc35a; transform-origin: left; animation: ea-charge 2.5s cubic-bezier(.4, 0, .2, 1) .2s both; }
@keyframes ea-sortie { to { opacity: 0; visibility: hidden; } }
@keyframes ea-loin { to { transform: scale(1.06); } }
@keyframes ea-grille { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes ea-rose { from { opacity: 0; transform: rotate(-40deg) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes ea-trace { to { stroke-dashoffset: 0; } }
@keyframes ea-pali { to { opacity: .16; } }
@keyframes ea-pali-route { to { opacity: .45; } }
@keyframes ea-montre { from { opacity: 0; } to { opacity: 1; } }
@keyframes ea-outil { 0% { opacity: 0; offset-distance: 0%; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } }
@keyframes ea-onde { 0% { opacity: 0; transform: scale(.7); } 12% { opacity: .8; } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes ea-embleme { from { opacity: 0; transform: scale(.3) rotate(-140deg); } to { opacity: 1; transform: none; } }
@keyframes ea-balayage { from { transform: skewX(-18deg) translateX(-30px); } to { transform: skewX(-18deg) translateX(250px); } }
@keyframes ea-eclat { 0% { opacity: 0; transform: translate(96px, -112px) scale(.2) rotate(-60deg); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(96px, -112px) scale(1.1) rotate(40deg); } }
@keyframes ea-devise { from { opacity: 0; letter-spacing: .9em; } to { opacity: 1; letter-spacing: .38em; } }
@media (max-width: 520px) { .ea-devise { font-size: 9.5px; letter-spacing: .24em; padding-left: .24em; animation-name: ea-devise-tel; } }
@keyframes ea-devise-tel { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; letter-spacing: .24em; } }
@keyframes ea-charge { from { transform: scaleX(0); } to { transform: none; } }
/* Après l'écran : la vitrine de l'accueil glisse en place (déplacement seul : elle est déjà peinte dessous). */
.arrivee .vitrine { animation: ea-vitrine 1s cubic-bezier(.2, .8, .2, 1) 2.85s both; }
@keyframes ea-vitrine { from { transform: translateY(28px); } to { transform: none; } }
.arrivee .ouverture h1 em { animation-delay: 3s; }

/* ——— Logo de l'en-tête : au survol, l'emblème tangue comme un navire et le point rebondit ——— */
.logo .lo-embleme, .logo .lo-point { transform-box: fill-box; transform-origin: center; }
html:not(.arrivee) .logo:hover .lo-embleme { animation: lo-tangage 1.1s cubic-bezier(.4, 0, .2, 1); }
html:not(.arrivee) .logo:hover .lo-point { animation: lo-rebond .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes lo-tangage { 0%, 100% { transform: none; } 25% { transform: rotate(-12deg); } 55% { transform: rotate(8deg); } 80% { transform: rotate(-3deg); } }
@keyframes lo-rebond { 0%, 100% { transform: none; } 40% { transform: translateY(-70%); } }
@media (prefers-reduced-motion: reduce) { .arrivee .ecran-arrivee { display: none !important; } }
@media print { .ecran-arrivee { display: none !important; } }

/* ——— Diaporamas animés ——— */
.diaporama { position: relative; }
.diaporama__scene { display: grid; gap: 2rem; } /* sans JavaScript : les diapositives à la suite */
.diapo { margin: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 3rem); align-items: center; }
.diapo__visuel {
  position: relative; background: var(--carte); border: 1px solid var(--trait); border-radius: calc(var(--rayon) + 4px);
  padding: clamp(.5rem, 2vw, 1.1rem); overflow: hidden; touch-action: pan-y;
}
.diapo__visuel--photo { padding: 0; }
.diapo__visuel--photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 0; border-radius: 0; }
.diapo__num { font: 600 var(--t-xs) var(--f-cote); color: var(--vert-texte); letter-spacing: .08em; }
.diapo__texte h3 { margin: .55rem 0 .55rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); }
.diapo__texte p { color: var(--encre-2); margin: 0; max-width: 46ch; }
@media (max-width: 860px) { .diapo { grid-template-columns: 1fr; align-items: start; } }
/* Avec JavaScript : une diapositive à la fois, toutes dans la même case de grille (hauteur stable). */
.diaporama--actif .diaporama__scene { gap: 0; }
.diaporama--actif .diapo { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.diaporama--actif .diapo.active { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.diaporama--actif .diapo.active .diapo__texte > * { animation: d-monte .65s cubic-bezier(.2, .8, .3, 1) both; }
.diaporama--actif .diapo.active .diapo__texte > :nth-child(2) { animation-delay: .08s; }
.diaporama--actif .diapo.active .diapo__texte > :nth-child(3) { animation-delay: .16s; }
.diaporama--actif .diapo.active .diapo__visuel--photo img { animation: d-zoom 7s ease-out both; }
@keyframes d-monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes d-zoom { from { transform: scale(1.06); } to { transform: none; } }
.diaporama__commandes { display: none; }
.diaporama--actif .diaporama__commandes { display: flex; align-items: center; gap: .5rem; margin-top: 1.2rem; }
.diaporama__fleche, .diaporama__pause {
  width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; border: 1px solid var(--trait-fort); background: var(--carte);
  color: var(--encre); cursor: pointer; font: 600 1rem/1 var(--f-cote); display: grid; place-items: center; transition: border-color .2s ease;
}
.diaporama__fleche:hover, .diaporama__pause:hover { border-color: var(--encre); }
.diaporama__points { display: flex; gap: .35rem; flex: 1; max-width: 20rem; margin-inline: .3rem; }
.diaporama__point {
  flex: 1; height: 2.6rem; padding: 0; border: 0; cursor: pointer; position: relative;
  background: linear-gradient(var(--trait-fort), var(--trait-fort)) center / 100% 3px no-repeat;
}
.diaporama__barre { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--vert); border-radius: 2px; transform: scaleX(0); transform-origin: left; }
.diaporama__point[aria-current] .diaporama__barre { animation: d-avance 6.5s linear both; }
.diaporama.arret .diaporama__barre { animation-play-state: paused; }
@keyframes d-avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.diaporama__pause { margin-left: auto; }
.diaporama__pause span { display: block; width: 11px; height: 12px; border-inline: 3.5px solid currentColor; }
.diaporama__pause[aria-pressed="true"] span { width: 0; height: 0; border-inline: 0; border-left: 11px solid currentColor; border-block: 7px solid transparent; margin-left: 3px; }

/* ——— Dessins des diaporamas (SVG en ligne : ils prennent les couleurs du thème clair ou sombre) ——— */
.dessin { width: 100%; height: auto; display: block; overflow: visible; }
.dessin text { font-family: var(--f-cote); font-size: 13px; fill: var(--gris); }
.dessin .d-txt-fort { fill: var(--encre); font-weight: 600; }
.dessin .d-txt-vert { fill: var(--vert-texte); font-weight: 600; }
.dessin .d-txt-clair { fill: #dff3e3; }
.dessin .d-txt-grand { font-size: 44px; font-weight: 700; fill: var(--encre); letter-spacing: -.02em; }
.d-grille { stroke: var(--trait); stroke-width: 1; fill: none; }
.d-trait { fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-fin { stroke-width: 1.2; }
.d-epais { stroke-width: 3.2; }
.d-vert { fill: none; stroke: var(--vert); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.d-gris { fill: none; stroke: var(--trait-fort); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-plein { fill: var(--encre); }
.d-plein-vert { fill: var(--vert); }
.d-plein-pale { fill: var(--vert-pale); }
.d-plein-carte { fill: var(--carte); }
.d-plein-papier { fill: var(--papier); }
.d-bloc { fill: color-mix(in srgb, var(--encre) 11%, transparent); }
.d-bloc-fort { fill: color-mix(in srgb, var(--encre) 22%, transparent); }
.d-nuit { fill: #0c1f12; }
.d-cote { stroke: var(--gris); stroke-width: 1; fill: none; }
.d-bord { stroke: var(--trait-fort); stroke-width: 1.2; }
/* État affiché sans animation = état final : le « 74 » caché, la ligne de lecture rangée, le cache du texte replié. */
.dessin .disparait, .dessin .balaye { opacity: 0; }
.dessin .efface { transform: scaleX(0); transform-box: fill-box; transform-origin: right center; }
.d-px { fill: var(--encre); }
.d-px--gris { fill: color-mix(in srgb, var(--encre) 45%, transparent); }
.d-px--bruit { fill: color-mix(in srgb, var(--encre) 28%, transparent); }
.d-fantome .d-px, .d-fantome .d-px--gris { fill: color-mix(in srgb, var(--encre) 9%, transparent); }
.d-fantome .d-px--bruit { fill: none; }
.d-code-vert { fill: var(--vert); } .d-code-laiton { fill: var(--laiton); } .d-code-gris { fill: color-mix(in srgb, var(--encre) 30%, transparent); }
/* Animations : seulement dans la diapositive affichée d'un diaporama actif. */
.diaporama--actif .diapo.active .trace { stroke-dasharray: 1; animation: d-trace 1.4s cubic-bezier(.45, .1, .25, 1) both; }
.diaporama--actif .diapo.active .pop { animation: d-pop .6s cubic-bezier(.2, .9, .3, 1.25) both; transform-box: fill-box; transform-origin: center; }
.diaporama--actif .diapo.active .apparait { animation: d-apparait .5s ease both; }
.diaporama--actif .diapo.active .pousse { animation: d-pousse .7s cubic-bezier(.3, .7, .2, 1) both; transform-box: fill-box; transform-origin: left center; }
.diaporama--actif .diapo.active .disparait { animation: d-disparait .4s ease both; }
.diaporama--actif .diapo.active .balaye { animation: d-balaye 1.8s cubic-bezier(.45, .1, .25, 1) both; }
.diaporama--actif .diapo.active .grave { animation: d-grave 2.2s cubic-bezier(.45, .1, .25, 1) both; }
.diaporama--actif .diapo.active .jauge { animation: d-jauge 1.8s cubic-bezier(.3, .7, .2, 1) both; }
.diaporama--actif .diapo.active .retrecit { animation: d-retrecit 1.6s cubic-bezier(.3, .7, .2, 1) both; transform-box: fill-box; transform-origin: left center; }
.diaporama--actif .diapo.active .efface { animation: d-efface 1.1s steps(17) both; }
@keyframes d-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes d-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes d-apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes d-disparait { from { opacity: 1; } to { opacity: 0; } }
@keyframes d-pousse { from { transform: scaleX(0); } to { transform: none; } }
@keyframes d-balaye { from { transform: translateY(0); opacity: 1; } 90% { opacity: 1; } to { transform: translateY(180px); opacity: 0; } }
@keyframes d-grave { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes d-jauge { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 4; } }
@keyframes d-retrecit { from { transform: scaleX(1); } to { transform: scaleX(.142); } }
@keyframes d-efface { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.t1 { animation-delay: .15s !important; } .t2 { animation-delay: .4s !important; } .t3 { animation-delay: .65s !important; }
.t4 { animation-delay: .9s !important; } .t5 { animation-delay: 1.15s !important; } .t6 { animation-delay: 1.4s !important; }
.t7 { animation-delay: 1.65s !important; } .t8 { animation-delay: 1.9s !important; } .t9 { animation-delay: 2.15s !important; }
.t10 { animation-delay: 2.4s !important; } .t11 { animation-delay: 2.7s !important; } .t12 { animation-delay: 3s !important; }
/* Une fois l'animation finie, la jauge reste à 96 et la barre au temps réduit ; sans animation, c'est l'état affiché. */
.d-jauge-valeur { stroke-dasharray: 100; stroke-dashoffset: 4; }
.d-retrecie { transform: scaleX(.142); transform-box: fill-box; transform-origin: left center; }
@media (prefers-reduced-motion: reduce) {
  .diaporama__point[aria-current] .diaporama__barre { transform: none; }
  .a-reveler { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .entete, .pied, .appel, .tiroir { display: none !important; }
  body { background: #fff; color: #000; }
}