/* ————————————————————————————————————————————————————————————————
   Le Guide Extérieur — feuille de style commune

   DIRECTION : « carnet technique au bord du bassin ». Bleu profond d'eau,
   papier chaud, ambre pour tout ce qui s'achète. Une texture de caustiques
   dans les en-têtes pour que la page ne soit jamais une feuille blanche.

   CONTRAINTE QUI PRIME SUR L'ESTHÉTIQUE : le lecteur n'est pas à l'aise avec
   internet. D'où base à 18 px, libellés toujours visibles, cibles de 48 px,
   et surtout DENSITÉ : l'information se lit d'un coup d'œil, elle ne se
   cherche pas en faisant défiler.
   ———————————————————————————————————————————————————————————————— */

/* Literata en titrage : taillée pour la lecture longue, couverture complète des
   accents français, et absente de la poignée de polices sur lesquelles tous les
   sites générés convergent (Inter, Fraunces, Space Grotesk…). */
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;0,7..72,700;1,7..72,400&family=Public+Sans:ital,wght@0,300..800;1,400&display=swap');

:root {
  /* — encres — */
  --abysse: #062A3E;
  --profond: #0B4F6C;
  --eau: #1282A2;
  --turquoise: #17A398;
  --ecume: #E4F1F7;
  --fond: #F3F9FC;
  --papier: #FFFFFF;
  --encre: #0A2231;
  --encre-douce: #4E6779;
  --bordure: #CFE2EC;
  --bordure-forte: #A9CBDC;

  /* — l'ambre signale ce qui s'achète, et rien d'autre — */
  --ambre: #B45309;
  --ambre-vif: #D97706;
  --ambre-voile: #FEF6E7;

  --alerte: #B3261E;
  --alerte-voile: #FDF0EF;
  --attention: #8A5300;
  --attention-voile: #FFF8E8;
  --vert: #0F7B3E;
  --vert-voile: #EFFAF3;

  --r: 14px;
  --r-s: 9px;
  --e1: 6px;
  --e2: 12px;
  --e3: 20px;
  --e4: 34px;
  --e5: 56px;

  --titre: 'Literata', Georgia, serif;
  --corps: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ombre: 0 1px 2px rgba(6, 42, 62, .06), 0 6px 20px -8px rgba(6, 42, 62, .16);
  --ombre-forte: 0 2px 4px rgba(6, 42, 62, .08), 0 18px 40px -16px rgba(6, 42, 62, .3);
}

/* ——————————————————————————————————————————————————————————————
   LES SURFACES QUE LE NAVIGATEUR DESSINE À NOTRE PLACE
   Sélection, curseur, ascenseur, chiffres : livrées par défaut, elles
   n'appartiennent à aucune charte. Les thémer est ce qui distingue une page
   construite d'une page assemblée.
   —————————————————————————————————————————————————————————————— */
::selection { background: var(--turquoise); color: #fff; }
:root { accent-color: var(--eau); }
input, select, textarea { caret-color: var(--eau); }

* { scrollbar-width: thin; scrollbar-color: var(--bordure-forte) transparent; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--bordure-forte); border-radius: 99px; border: 3px solid var(--fond); }
*::-webkit-scrollbar-thumb:hover { background: var(--eau); }

/* Toute donnée chiffrée s'aligne en colonnes. */
.quantite, .calcul, .dose-cle, input[type="number"], td, .constat { font-variant-numeric: tabular-nums; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  font-family: var(--corps);
  font-size: 18px;
  line-height: 1.55;
  color: var(--encre);
  background: var(--fond);
  /* Une vraie texture d'eau, poussée si loin qu'on ne la voit pas : elle se
     sent. Une page sans matière a l'air inachevée, pas sobre. */
  background-image:
    radial-gradient(circle at 12% -8%, rgba(23, 163, 152, .10), transparent 45%),
    radial-gradient(circle at 92% 4%, rgba(18, 130, 162, .10), transparent 40%),
    linear-gradient(rgba(243, 249, 252, .93), rgba(243, 249, 252, .93)),
    url("images/texture-eau.webp");
  background-size: auto, auto, auto, 900px auto;
  background-attachment: fixed, fixed, fixed, fixed;
}

h1, h2, h3 { font-family: var(--titre); font-weight: 600; line-height: 1.15; margin: 0 0 var(--e2); letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: var(--e5); }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 var(--e2); }

a { color: var(--profond); text-underline-offset: 3px; }
a:hover { color: var(--eau); }
:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; border-radius: 4px; }

.enveloppe { max-width: 820px; margin: 0 auto; padding: 0 var(--e3); }
.large { max-width: 1180px; }

/* ——————————————————————— EN-TÊTE ——————————————————————— */
.bandeau {
  position: sticky; top: 0; z-index: 40;
  background: var(--abysse);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.bandeau::after {
  /* Caustiques : un liseré d'eau sous la barre, pour la matière. */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--turquoise), var(--eau), var(--turquoise));
  background-size: 200% 100%;
  animation: courant 14s linear infinite;
}
@keyframes courant { to { background-position: 200% 0; } }

.bandeau .enveloppe { display: flex; align-items: center; gap: var(--e3); min-height: 74px; flex-wrap: wrap; }
.marque {
  font-family: var(--titre); font-weight: 700; font-size: 1.25rem;
  color: #fff; text-decoration: none; white-space: nowrap;
  display: flex; align-items: center; gap: 10px;
}
.marque svg { flex: none; }

.bandeau nav { display: flex; gap: var(--e1); margin-left: auto; flex-wrap: wrap; }
.bandeau nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 16px; min-height: 48px; border-radius: 10px;
  color: #CFE6F0; text-decoration: none; font-weight: 600; font-size: 1.02rem;
  transition: background .18s, color .18s;
}
.bandeau nav a svg { flex: none; opacity: .85; }
.bandeau nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.bandeau nav a[aria-current="page"] { background: var(--eau); color: #fff; }
.bandeau nav a[aria-current="page"] svg { opacity: 1; }

/* ——————————————————————— HÉROS ———————————————————————
   Une photographie réelle de surface d'eau, assombrie par un voile dégradé
   pour que le texte reste lisible. Les ondes dessinées à la main qui
   occupaient cette place avaient l'air de ce qu'elles étaient : un dessin. */
.hero {
  position: relative; overflow: hidden;
  background: var(--abysse);
  color: #fff; padding: var(--e5) 0 var(--e4);
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--photo, url("images/fond-hero-eau.webp"));
  background-size: cover; background-position: 70% center;
  transform: scale(1.06);
  animation: respire 34s ease-in-out infinite alternate;
}
.hero::after {
  /* Le voile : sombre à gauche où vit le texte, transparent à droite où la
     photo doit rester lisible. */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(6, 42, 62, .93) 0%, rgba(6, 42, 62, .82) 26%, rgba(9, 62, 88, .55) 52%, rgba(11, 79, 108, .22) 78%, rgba(18, 130, 162, .06) 100%);
}
@keyframes respire { to { transform: scale(1.12) translateY(-1.5%); } }

.hero > * { position: relative; }
.hero h1 { color: #fff; max-width: 19ch; text-shadow: 0 2px 30px rgba(6, 42, 62, .5); }
.hero .chapeau { color: #D5EAF4; font-size: 1.18rem; max-width: 62ch; }
.hero .chapeau strong { color: #fff; }

.surtitre { display: none; }

.chapeau { font-size: 1.1rem; color: var(--encre-douce); }

/* ——————————————————————— BLOCS ——————————————————————— */
.carte {
  background: var(--papier); border: 1px solid var(--bordure);
  border-radius: var(--r); padding: var(--e3); margin-bottom: var(--e3);
  box-shadow: var(--ombre);
}
.carte > h2:first-child, .carte > h3:first-child { margin-top: 0; }

/* ——————————————————————— FORMULAIRE ——————————————————————— */
.champ { margin-bottom: var(--e3); }
.champ:last-child { margin-bottom: 0; }
.champ label { display: block; font-weight: 700; margin-bottom: 4px; font-size: 1.02rem; }
.champ .aide { display: block; font-size: .9rem; color: var(--encre-douce); margin-bottom: 7px; font-weight: 400; }

input[type="number"], input[type="text"], select {
  width: 100%; min-height: 54px; padding: 12px 15px;
  font-family: var(--corps); font-size: 1.18rem; font-weight: 600; color: var(--encre);
  background: var(--papier); border: 2px solid var(--bordure-forte); border-radius: var(--r-s);
  transition: border-color .18s, box-shadow .18s;
}
input:hover, select:hover { border-color: var(--eau); }
input:focus, select:focus { border-color: var(--eau); box-shadow: 0 0 0 4px rgba(18, 130, 162, .14); }
input::placeholder { color: #9BB3C0; font-weight: 400; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
@media (max-width: 560px) { .duo { grid-template-columns: 1fr; gap: var(--e2); } }

.choix { display: flex; flex-wrap: wrap; gap: var(--e1); }
.choix label {
  flex: 1 1 auto; min-width: 150px; display: flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 10px 15px; cursor: pointer; font-weight: 600; font-size: .98rem;
  background: var(--papier); border: 2px solid var(--bordure); border-radius: var(--r-s);
  transition: border-color .18s, background .18s, transform .18s;
}
.choix label:hover { border-color: var(--eau); transform: translateY(-1px); }
.choix input { width: 21px; height: 21px; accent-color: var(--eau); cursor: pointer; flex: none; }
.choix label:has(input:checked) { border-color: var(--eau); background: var(--ecume); color: var(--profond); }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; padding: 13px 26px; cursor: pointer;
  font-family: var(--corps); font-size: 1.06rem; font-weight: 700;
  color: #fff; background: var(--profond); border: none; border-radius: var(--r-s);
  text-decoration: none; transition: background .18s, transform .18s, box-shadow .18s;
  box-shadow: var(--ombre);
}
.bouton:hover { background: var(--abysse); color: #fff; transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.bouton.large { width: 100%; font-size: 1.15rem; min-height: 62px; }
.bouton.secondaire { background: var(--papier); color: var(--profond); border: 2px solid var(--bordure-forte); box-shadow: none; }
.bouton.secondaire:hover { background: var(--ecume); border-color: var(--eau); color: var(--profond); }
/* L'ambre, et seulement l'ambre, mène à un achat. */
.bouton.achat { background: var(--ambre); }
.bouton.achat:hover { background: #8C3F07; }
.bouton.petit { min-height: 46px; padding: 9px 18px; font-size: .96rem; }

/* Le bouton que TOUT LE MONDE doit cliquer. Julien, 2026-08-21 : « c'est
   vraiment le truc que tout le monde va cliquer, il faudrait qu'il soit bien
   plus gros ». Un appel principal qui a la même taille que les autres n'est
   pas un appel principal, c'est un bouton de plus. */
.bouton.majeur {
  min-height: 76px; padding: 20px 40px; font-size: 1.32rem; border-radius: 14px;
  box-shadow: 0 4px 10px rgba(180, 83, 9, .28), 0 18px 42px -14px rgba(180, 83, 9, .55);
}
.bouton.majeur svg { width: 24px; height: 24px; }
.bouton.majeur:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(180, 83, 9, .32), 0 26px 56px -16px rgba(180, 83, 9, .6); }
@media (max-width: 560px) { .bouton.majeur { width: 100%; font-size: 1.15rem; min-height: 68px; padding: 18px 24px; } }

/* Un halo qui respire, une seule fois toutes les 5 s : assez pour attirer
   l'œil, jamais assez pour agacer. Coupé si la personne refuse les animations. */
@keyframes halo {
  0%, 82%, 100% { box-shadow: 0 4px 10px rgba(180, 83, 9, .28), 0 18px 42px -14px rgba(180, 83, 9, .55), 0 0 0 0 rgba(217, 119, 6, .5); }
  91%           { box-shadow: 0 4px 10px rgba(180, 83, 9, .28), 0 18px 42px -14px rgba(180, 83, 9, .55), 0 0 0 16px rgba(217, 119, 6, 0); }
}
.bouton.majeur { animation: halo 5s ease-out infinite; }


/* ——————————————————————— ÉTAPES DU PLAN ———————————————————————
   Compact : titre + délai sur une ligne, constat sur une ligne, quantité et
   produit sur une ligne, le reste replié. Une étape doit tenir sous les yeux,
   pas occuper un écran. */
/* L'état de l'étape se lit sur la pastille numérotée et sur un voile de fond,
   pas sur un liseré épais : un rail coloré de 5 px est une décoration, pas une
   information. */
.etape {
  background: var(--papier); border: 1px solid var(--bordure);
  border-radius: var(--r); padding: var(--e3); margin-bottom: var(--e2);
  box-shadow: var(--ombre);
}
.etape.rien { background: linear-gradient(180deg, var(--vert-voile), var(--papier) 90px); border-color: #BEE9CF; }
.etape.danger { background: linear-gradient(180deg, var(--alerte-voile), var(--papier) 90px); border-color: #F3C9C6; }
.etape.attention { background: linear-gradient(180deg, var(--attention-voile), var(--papier) 90px); border-color: #F5DFAE; }

.etape-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.numero {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  background: var(--profond); color: #fff; font-family: var(--titre); font-weight: 700;
  display: grid; place-items: center; font-size: 1.05rem;
}
.etape.rien .numero { background: var(--vert); }
.etape.danger .numero { background: var(--alerte); }
.etape.attention .numero { background: var(--ambre); }
.etape-tete h3 { margin: 0; font-size: 1.28rem; flex: 1 1 auto; }

.delai {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ecume); color: var(--profond);
  padding: 5px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700;
  white-space: nowrap;
}
.delai svg { flex: none; }

.constat { margin: 0 0 6px; font-size: 1.02rem; }
.constat .valeurs { font-weight: 700; color: var(--profond); }
.pourquoi { margin: 0 0 var(--e2); font-size: .95rem; color: var(--encre-douce); }

/* La ligne de résultat : quantité, produit, bouton — tout sur un rang. */
.resultat-ligne {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  background: linear-gradient(100deg, var(--ecume), rgba(228, 241, 247, .35));
  border: 1px solid var(--bordure); border-radius: var(--r-s);
  padding: var(--e2) var(--e3); margin-bottom: 10px;
}
.quantite {
  font-family: var(--titre); font-weight: 700; font-size: clamp(1.7rem, 4.5vw, 2.25rem);
  color: var(--profond); line-height: 1; white-space: nowrap;
}
.quantite .produit-nom {
  display: block; font-family: var(--corps); font-size: .88rem; font-weight: 600;
  color: var(--encre-douce); margin-top: 5px; white-space: normal; max-width: 34ch;
}
.resultat-ligne .bouton { margin-left: auto; }

/* Replis discrets : le calcul et la méthode ne prennent de la place que si on les ouvre. */
.replis { display: flex; gap: var(--e1); flex-wrap: wrap; margin-bottom: 4px; }

/* ⚠ LE `flex` NE VAUT QUE DANS `.replis`.
   Défaut vu par Julien le 2026-08-21 : `flex: 1 1 240px` posé sur TOUS les
   `details.repli` en faisait un élément flexible dans `.produit`, qui est une
   colonne flex — donc `flex-grow: 1` l'étirait sur toute la hauteur restante.
   Résultat : une case « Comment s'en servir » grande ouverte et vide, alors
   qu'elle est fermée. Un repli fermé doit occuper la hauteur de son résumé. */
.replis > details.repli { flex: 1 1 240px; }
details.repli { border: 1px solid var(--bordure); border-radius: var(--r-s); background: var(--papier); align-self: stretch; flex: 0 0 auto; }
details.repli > summary {
  cursor: pointer; padding: 11px 14px; font-weight: 700; font-size: .95rem; color: var(--profond);
  list-style: none; min-height: 46px; display: flex; align-items: center; gap: 9px;
}
details.repli > summary::-webkit-details-marker { display: none; }
details.repli > summary::after { content: "▾"; margin-left: auto; transition: transform .2s; opacity: .6; }
details.repli[open] > summary::after { transform: rotate(180deg); }
details.repli[open] { border-color: var(--bordure-forte); }
details.repli .dedans { padding: 0 14px 14px; font-size: .95rem; }
details.repli .dedans > *:last-child { margin-bottom: 0; }

.calcul { font-size: .93rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; }

/* Étapes de la marche à suivre, numérotées. */
ol.marche { margin: 0 0 var(--e2); padding-left: 0; list-style: none; counter-reset: m; }
ol.marche li {
  counter-increment: m; position: relative; padding-left: 34px; margin-bottom: 10px;
}
ol.marche li::before {
  content: counter(m); position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--profond); color: #fff; font-size: .78rem; font-weight: 700;
  display: grid; place-items: center; font-family: var(--corps);
}
ol.marche li:last-child { margin-bottom: 0; }

.encart { border-radius: var(--r-s); padding: 12px 15px; margin: 10px 0; font-size: .94rem; }
.encart:last-child { margin-bottom: 0; }
.encart.attention { background: var(--attention-voile); color: var(--attention); border: 1px solid #F5DFAE; }
.encart.alerte { background: var(--alerte-voile); color: var(--alerte); border: 1px solid #F3C9C6; }
.encart.ok { background: var(--vert-voile); color: var(--vert); border: 1px solid #BEE9CF; }
.encart p:last-child, .encart ul:last-child { margin-bottom: 0; }
.encart ul { margin: 6px 0 0; padding-left: 20px; }
.encart strong { font-weight: 800; }

.source { font-size: .82rem; color: var(--encre-douce); font-style: italic; margin: 8px 0 0; }

/* ——————————————————————— BIBLIOTHÈQUE ———————————————————————
   Sommaire collant à gauche : on ne fait plus défiler pour trouver, on clique. */
.avec-sommaire { display: grid; grid-template-columns: 232px 1fr; gap: var(--e4); align-items: start; }
@media (max-width: 900px) { .avec-sommaire { grid-template-columns: 1fr; gap: var(--e3); } }

/* ⚠ UN SOMMAIRE QU'ON NE VOIT PAS N'EXISTE PAS.
   Première version : une liste nue dans la marge. Julien ne l'a pas vue —
   « la bibliothèque, j'ai pas de bibliothèque là ». Il lui fallait une
   surface, un cadre et un titre pour se lire comme un panneau de navigation
   et non comme du texte qui traîne à gauche. */
.sommaire {
  position: sticky; top: 96px;
  background: var(--papier); border: 1px solid var(--bordure);
  border-radius: var(--r); padding: var(--e2); box-shadow: var(--ombre);
}
@media (max-width: 900px) { .sommaire { position: static; margin-bottom: var(--e3); } }
.sommaire h2 {
  margin: 4px 0 10px; padding: 0 10px;
  font-size: .78rem; font-family: var(--corps); font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--encre-douce);
}
.sommaire ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.sommaire a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-s); text-decoration: none;
  color: var(--encre); font-weight: 600; font-size: .94rem; line-height: 1.22;
  transition: background .16s, color .16s;
}
.sommaire a:hover { background: var(--ecume); color: var(--profond); }
.sommaire a.actif { background: var(--profond); color: #fff; }
.sommaire a.actif span { color: #C9E4F0 !important; }
.sommaire .puce { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bordure-forte); }
.sommaire a.actif .puce, .sommaire a:hover .puce { background: var(--turquoise); }

.famille { margin-bottom: var(--e5); scroll-margin-top: 96px; }
.famille:last-child { margin-bottom: var(--e3); }
.famille > h2 { margin-top: 0; }
.famille-tete { border-bottom: 2px solid var(--bordure); padding-bottom: var(--e2); margin-bottom: var(--e3); }
.famille-tete .role { margin: 0; color: var(--encre-douce); }
.quand-ligne { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: 10px; font-size: .92rem; }
.quand-ligne span { background: var(--ecume); color: var(--profond); padding: 5px 12px; border-radius: 999px; font-weight: 600; }

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: var(--e2); }
.produit {
  background: var(--papier); border: 1px solid var(--bordure); border-radius: var(--r);
  padding: var(--e3); display: flex; flex-direction: column; box-shadow: var(--ombre);
  transition: transform .18s, box-shadow .18s;
}
.produit:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.produit h3 { margin-bottom: 3px; font-size: 1.1rem; }
.produit .cond { font-size: .87rem; color: var(--encre-douce); margin-bottom: var(--e2); }
.produit .dose-cle {
  background: var(--ecume); border: 1px solid var(--bordure); border-radius: var(--r-s);
  padding: 10px 13px; font-weight: 700; color: var(--profond); margin-bottom: 8px; font-size: .96rem;
}
.produit .dose-cle.secondaire { background: var(--fond); color: var(--encre-douce); font-weight: 600; }
.produit .dose-cle.absente { background: var(--attention-voile); border-color: #F5DFAE; color: var(--attention); font-weight: 600; }
.produit .actions { margin-top: auto; padding-top: var(--e2); }
.etiq {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  padding: 4px 10px; border-radius: 999px; background: var(--ambre-voile); color: var(--ambre);
  margin-bottom: 9px;
}

/* ——————————————————————— PORTES D'ACCUEIL ——————————————————————— */
.portes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--e3); }
.porte {
  position: relative; overflow: hidden;
  background: var(--papier); border: 1px solid var(--bordure); border-radius: var(--r);
  padding: var(--e4) var(--e3) var(--e3); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; box-shadow: var(--ombre);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.porte .photo {
  display: block; margin: calc(var(--e4) * -1) calc(var(--e3) * -1) var(--e3);
  height: 156px; overflow: hidden; background: var(--ecume);
}
.porte .photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02); transition: transform .5s cubic-bezier(.22, .8, .36, 1);
}
.porte:hover .photo img { transform: scale(1.08); }
.porte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: var(--bordure-forte); }
.porte .icone {
  position: absolute; top: 122px; left: var(--e3); z-index: 2;
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: var(--papier); color: var(--profond);
  box-shadow: var(--ombre); border: 1px solid var(--bordure);
}
.porte h2 { padding-top: 14px; }
.porte h2 { margin: 0 0 8px; font-size: 1.35rem; }
.porte p { color: var(--encre-douce); flex: 1; font-size: .97rem; }
.porte .fleche { color: var(--profond); font-weight: 700; margin-top: var(--e2); display: flex; align-items: center; gap: 7px; }
.porte:hover .fleche { color: var(--eau); }

/* ——————————————————————— PIED ——————————————————————— */
footer {
  background: var(--abysse); color: #B9D6E4; margin-top: var(--e5);
  padding: var(--e5) 0 var(--e4); font-size: .93rem;
}
footer a { color: #8ED0E8; }
footer a:hover { color: #fff; }
footer strong { color: #fff; }
.mention-legale {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-s); padding: var(--e2) var(--e3); margin: var(--e2) 0;
}

.saut { height: var(--e4); }
.rien-afficher { display: none !important; }

/* ——————————————————————— APPARITIONS ———————————————————————
   Une seule chorégraphie au chargement, décalée. Rien qui clignote ensuite. */
@keyframes monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.apparait { animation: monte .5s cubic-bezier(.22, .8, .36, 1) both; }
.apparait:nth-child(2) { animation-delay: .07s; }
.apparait:nth-child(3) { animation-delay: .14s; }
.apparait:nth-child(4) { animation-delay: .21s; }
.apparait:nth-child(5) { animation-delay: .28s; }

@media print {
  /* On n'imprime QUE le plan. Le formulaire vide, le héros et le menu ne
     servent à rien au bord du bassin : c'est du papier pour du décor. */
  .bandeau, footer, .actions, .no-print, .sommaire, .hero,
  #formulaire, .avis-flottant, .saut { display: none !important; }
  #resultat { display: block !important; }
  main { padding: 0 !important; max-width: none !important; }
  body { background: #fff; font-size: 11pt; }
  .etape, .carte, .produit { break-inside: avoid; box-shadow: none; }
  details.repli { border: none; }
  details.repli .dedans { display: block !important; }
  .resultat-ligne { background: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ——————————————————————— ESPACE COMMENTAIRE ———————————————————————
   Un bouton flottant, présent sur les quatre pages, qui ne masque jamais le
   contenu : il vit dans le coin, il s'ouvre vers le haut. */
.avis-flottant {
  position: fixed; right: var(--e3); bottom: var(--e3); z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--e2);
  max-width: calc(100vw - var(--e3) * 2);
}
.avis-bouton {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 12px 22px; cursor: pointer;
  font-family: var(--corps); font-size: 1rem; font-weight: 700;
  color: #fff; background: var(--profond); border: none; border-radius: 99px;
  box-shadow: var(--ombre-forte);
  transition: background .18s, transform .18s;
}
.avis-bouton:hover { background: var(--abysse); transform: translateY(-2px); }
.avis-flottant.ouvert .avis-bouton span { display: none; }
.avis-flottant.ouvert .avis-bouton { padding: 12px; }

.avis-panneau {
  width: min(400px, calc(100vw - var(--e3) * 2));
  max-height: min(78vh, 640px); overflow-y: auto;
  background: var(--papier); border: 1px solid var(--bordure-forte);
  border-radius: var(--r); padding: var(--e3);
  box-shadow: var(--ombre-forte);
  animation: monte .28s cubic-bezier(.22, .8, .36, 1) both;
}
.avis-tete { display: flex; align-items: flex-start; gap: var(--e2); margin-bottom: var(--e2); }
.avis-tete h2 { margin: 0; font-size: 1.3rem; flex: 1; }
.avis-fermer {
  flex: none; width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center; color: var(--encre-douce);
  background: var(--fond); border: 1px solid var(--bordure);
  transition: background .16s, color .16s;
}
.avis-fermer:hover { background: var(--ecume); color: var(--profond); }

.avis-panneau textarea {
  width: 100%; min-height: 110px; padding: 12px 15px; resize: vertical;
  font-family: var(--corps); font-size: 1.02rem; color: var(--encre);
  background: var(--papier); border: 2px solid var(--bordure-forte); border-radius: var(--r-s);
  transition: border-color .18s, box-shadow .18s;
}
.avis-panneau textarea:hover { border-color: var(--eau); }
.avis-panneau textarea:focus { border-color: var(--eau); box-shadow: 0 0 0 4px rgba(18, 130, 162, .14); outline: none; }
.avis-panneau input[type="email"] { font-size: 1.02rem; font-weight: 400; min-height: 48px; }
.avis-panneau .bouton { margin-top: 4px; }

/* Le champ piège : hors de l'écran mais atteignable par un robot, qui le
   remplit et se dénonce. `display:none` ne suffirait pas, beaucoup l'ignorent. */
.avis-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.avis-etat { margin: 10px 0 0; font-size: .93rem; color: var(--encre-douce); }
.avis-etat.mauvais { color: var(--alerte); font-weight: 700; }
.avis-merci { text-align: center; padding: var(--e3) 0; color: var(--vert); }
.avis-merci svg { margin-bottom: var(--e2); }
.avis-merci p { color: var(--encre); }
.avis-merci p:last-child { color: var(--encre-douce); font-size: .95rem; margin-bottom: 0; }

@media (max-width: 560px) {
  .avis-flottant { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
  .avis-bouton { align-self: flex-end; }
}