/* ==================================================================
   La Vie Continue — système de design
   Une seule source de vérité : couleurs, typographie, espacements,
   composants. Toutes les pages s'appuient dessus.
   ================================================================== */

/* ---------------------------------------------------------------- */
/* 1. Jetons                                                        */
/* ---------------------------------------------------------------- */
:root {
  /* Couleurs — le vert vient du globe du logo, et du nom lui-même :
     la vie continue, elle pousse. Le sable est la terre de Douala.  */
  --vert-900: #08312A;
  --vert-800: #0F4A3C;
  --vert-700: #146052;
  --vert-600: #1B7A64;
  --vert-500: #2A9B7E;
  --vert-100: #DCEDE7;
  --vert-50:  #EFF7F4;

  /* Vert employé comme couleur de texte sur fond clair ou sombre.
     Distinct des verts de fond, qui restent profonds dans les deux thèmes. */
  --accent: #146052;
  --accent-fort: #0F4A3C;
  --bouton: #0F4A3C;
  --bouton-survol: #146052;

  --ocre-600: #A8681B;
  --ocre-500: #D08A2C;
  --ocre-100: #FAEDD8;

  --sable:    #F6F2EC;
  --sable-2:  #EDE7DE;

  --encre:    #14201C;
  --encre-2:  #3A4744;
  --gris:     #5C6763;
  --gris-2:   #626E6B;
  --trait:    #E1DDD5;
  --surface:  #FFFFFF;
  --fond:     var(--sable);

  --rouge:    #A8352B;
  --rouge-bg: #FBEBE8;
  --succes:   #17694F;
  --succes-bg:#E4F2EC;

  /* Typographie */
  --f-titre: "Bricolage Grotesque", "Trebuchet MS", Georgia, sans-serif;
  --f-texte: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Échelle typographique — fluide, sans palier brutal.
     Calibrée pour un public âgé ou presbyte : le corps de texte ne
     descend jamais sous 18 px, et les libellés sous 14 px. */
  --t-xs:  0.875rem;    /* 14 px */
  --t-sm:  1rem;        /* 16 px */
  --t-md:  1rem;    /* 16 px */
  --t-lg:  1.25rem;     /* 20 px */
  --t-xl:  clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
  --t-2xl: clamp(1.85rem, 1.45rem + 1.9vw, 2.6rem);
  --t-3xl: clamp(2.25rem, 1.6rem + 3vw, 3.6rem);

  /* Rythme */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;
  --e-4: 1rem;     --e-5: 1.5rem;   --e-6: 2rem;
  --e-7: 3rem;     --e-8: 4rem;     --e-9: 6rem;

  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-full: 999px;

  --ombre-1: 0 1px 2px rgba(8, 49, 42, .06), 0 2px 8px rgba(8, 49, 42, .05);
  --ombre-2: 0 2px 6px rgba(8, 49, 42, .07), 0 12px 32px rgba(8, 49, 42, .09);
  --ombre-3: 0 8px 20px rgba(8, 49, 42, .10), 0 24px 60px rgba(8, 49, 42, .13);

  --lg-contenu: 1140px;
  --lg-texte: 68ch;
  --h-entete: 68px;
  --h-onglets: 62px;

  --transition: 220ms cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vert-100: #133B33;
    --vert-50:  #0E2E28;
    --ocre-100: #3A2A11;
    --sable:    #0D1613;
    --sable-2:  #16211D;
    --encre:    #EAF0ED;
    --encre-2:  #C2CDC9;
    --gris:     #94A09C;
    --gris-2:   #8A9591;
    --trait:    #253430;
    --surface:  #16211D;
    --fond:     #0D1613;
    --vert-500: #45BE9C;
    --ocre-500: #E7A64B;
    --accent: #56C8A5;
    --accent-fort: #7BD7BA;
    --bouton: #1B7A64;
    --bouton-survol: #22957A;
    --rouge:    #F0938A;
    --rouge-bg: #331916;
    --succes:   #6FD2AE;
    --succes-bg:#0F2C24;
    --ombre-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
    --ombre-2: 0 2px 6px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.4);
    --ombre-3: 0 8px 20px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --vert-100: #133B33;
  --vert-50:  #0E2E28;
  --ocre-100: #3A2A11;
  --sable:    #0D1613;
  --sable-2:  #16211D;
  --encre:    #EAF0ED;
  --encre-2:  #C2CDC9;
  --gris:     #94A09C;
  --gris-2:   #8A9591;
  --trait:    #253430;
  --surface:  #16211D;
  --fond:     #0D1613;
  --vert-500: #45BE9C;
  --ocre-500: #E7A64B;
  --accent: #56C8A5;
  --accent-fort: #7BD7BA;
  --bouton: #1B7A64;
  --bouton-survol: #22957A;
  --rouge:    #F0938A;
  --rouge-bg: #331916;
  --succes:   #6FD2AE;
  --succes-bg:#0F2C24;
  --ombre-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
  --ombre-2: 0 2px 6px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.4);
  --ombre-3: 0 8px 20px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------- */
/* 2. Base                                                          */
/* ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 100%; /* Fixe 1rem = 16px exacts */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}


body {
  margin: 0;
  background: var(--fond);
  color: var(--encre-2);
  font-family: var(--f-texte);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-top: var(--h-entete);
}

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  color: var(--encre);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  font-weight: 700;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); letter-spacing: -0.012em; }
h4 { font-size: var(--t-lg); letter-spacing: -0.008em; }

p { margin: 0; text-wrap: pretty; }
a { color: var(--accent); }
a, button, input, select, textarea { touch-action: manipulation; }
img, svg, video { max-width: 100%; }
ul, ol { margin: 0; padding: 0; }

/* Le navigateur applique 40 px de marge latérale à <figure> et
   <blockquote>. Les cartes témoignages en héritaient et se retrouvaient
   rétrécies de 80 px — visible surtout sous 400 px. */
figure, blockquote, dl, dd, figcaption { margin: 0; }

:focus-visible {
  outline: 3px solid var(--vert-500);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--vert-100); color: var(--vert-900); }

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

/* ---------------------------------------------------------------- */
/* 3. Mise en page                                                  */
/* ---------------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--lg-contenu);
  margin-inline: auto;
  padding-inline: var(--e-5);
}
@media (max-width: 640px) { .conteneur { padding-inline: var(--e-4); } }

.section { padding-block: clamp(var(--e-7), 7vw, var(--e-9)); }
.section--serre { padding-block: clamp(var(--e-6), 5vw, var(--e-8)); }
.section--sable { background: var(--sable-2); }
.section--vert  { background: var(--vert-800); color: #DCEDE7; }
.section--vert h1, .section--vert h2, .section--vert h3, .section--vert h4 { color: #fff; }

.pile { display: flex; flex-direction: column; }
.pile-2 { gap: var(--e-2); } .pile-3 { gap: var(--e-3); }
.pile-4 { gap: var(--e-4); } .pile-5 { gap: var(--e-5); }
.pile-6 { gap: var(--e-6); } .pile-7 { gap: var(--e-7); }

.rang { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }

.grille { display: grid; gap: var(--e-5); }
.grille--auto  { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.grille--large { grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 800px) { .grille--2 { grid-template-columns: 1fr; } }

.texte-mesure { max-width: var(--lg-texte); }
.centre { text-align: center; margin-inline: auto; }

/* ---------------------------------------------------------------- */
/* 4. Typographie applicative                                       */
/* ---------------------------------------------------------------- */
.surtitre {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}
.surtitre::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--ocre-500);
  border-radius: 2px;
}
.section--vert .surtitre { color: var(--vert-500); }

.chapo { font-size: var(--t-lg); color: var(--gris); max-width: 58ch; }
.section--vert .chapo { color: #B7D6CB; }

.petit { font-size: var(--t-sm); color: var(--gris); }
.mineur { font-size: var(--t-xs); color: var(--gris-2); }

/* ---------------------------------------------------------------- */
/* 5. Boutons                                                       */
/* ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  max-width: 100%;
  min-height: 50px;
  padding: 0 var(--e-5);
  border: 1.5px solid transparent;
  border-radius: var(--r-full);
  font-family: var(--f-texte);
  font-size: var(--t-md);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition),
              border-color var(--transition), color var(--transition),
              box-shadow var(--transition);
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.btn i { flex: none; }
.btn:active { transform: translateY(1px) scale(.99); }

.btn--principal { background: var(--bouton); color: #fff; box-shadow: var(--ombre-1); }
.btn--principal:hover { background: var(--bouton-survol); box-shadow: var(--ombre-2); }

.btn--ocre { background: var(--ocre-500); color: #2A1A05; box-shadow: var(--ombre-1); }
.btn--ocre:hover { background: var(--ocre-600); color: #fff; }

.btn--contour {
  background: transparent;
  border-color: var(--trait);
  color: var(--encre);
}
.btn--contour:hover { border-color: var(--accent); color: var(--accent); background: var(--vert-50); }

.section--vert .btn--contour { border-color: rgba(255,255,255,.35); color: #fff; }
.section--vert .btn--contour:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.btn--clair { background: #fff; color: #0F4A3C; }
.btn--clair:hover { background: #EFF7F4; color: #08312A; }

.btn--large { width: 100%; }
.btn--sm { min-height: 42px; padding: 0 var(--e-4); font-size: var(--t-sm); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------- */
/* 6. Cartes                                                        */
/* ---------------------------------------------------------------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  padding: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.carte--lien { text-decoration: none; color: inherit; }
.carte--lien:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-2);
  border-color: var(--accent);
}
.carte--plate { box-shadow: none; }
.carte h3, .carte h4 { color: var(--encre); }
.carte p { color: var(--gris); font-size: var(--t-sm); }

.carte__icone {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--vert-50);
  color: var(--accent);
  font-size: 1.45rem;
  flex: none;
}
.carte--ocre .carte__icone { background: var(--ocre-100); color: var(--ocre-600); }

.carte__fleche {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-sm); font-weight: 600; color: var(--accent);
}
.carte--lien:hover .carte__fleche i { transform: translateX(4px); }
.carte__fleche i { transition: transform var(--transition); }

/* ---------------------------------------------------------------- */
/* 7. Puces et pastilles                                            */
/* ---------------------------------------------------------------- */
.pastille {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-1) var(--e-3);
  border-radius: var(--r-full);
  background: var(--vert-50);
  color: var(--accent);
  font-size: var(--t-xs);
  font-weight: 600;
  border: 1px solid var(--vert-100);
}
.pastille--ocre { background: var(--ocre-100); color: var(--ocre-600); border-color: transparent; }
.pastille--claire { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.2); }

/* Liste à coches */
.liste-coches { list-style: none; display: flex; flex-direction: column; gap: var(--e-3); }
.liste-coches li {
  display: flex; gap: var(--e-3); align-items: flex-start;
  font-size: var(--t-md);
}
.liste-coches li::before {
  content: "\ea5e"; /* ri-check-line */
  font-family: "remixicon";
  color: var(--accent);
  background: var(--vert-50);
  width: 26px; height: 26px; flex: none;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: .95rem;
  margin-top: 2px;
}
.section--vert .liste-coches li::before { background: rgba(255,255,255,.14); color: #7FD3B6; }

/* ---------------------------------------------------------------- */
/* 8. Formulaires                                                   */
/* ---------------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: var(--e-2); }
.champ > label { font-size: var(--t-sm); font-weight: 600; color: var(--encre); }

.champ input, .champ select, .champ textarea, .saisie {
  width: 100%;
  min-height: 50px;
  padding: var(--e-3) var(--e-4);
  border: 1.5px solid var(--trait);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: var(--t-md);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris-2); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--vert-50);
}
.champ select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%),
                    linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--e-7);
}

.etat-form {
  margin-top: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  display: flex; gap: var(--e-3); align-items: flex-start;
}
.etat-form.est-ok    { background: var(--succes-bg); color: var(--succes); }
.etat-form.est-erreur{ background: var(--rouge-bg);  color: var(--rouge); }

/* ---------------------------------------------------------------- */
/* 9. Utilitaires                                                   */
/* ---------------------------------------------------------------- */
.lecteur-seul {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
  position: fixed; top: var(--e-2); left: var(--e-2);
  transform: translateY(-200%);
  z-index: 9999;
  background: var(--vert-800); color: #fff;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600;
  transition: transform var(--transition);
}
.evitement:focus { transform: translateY(0); }

/* Révélation au défilement.
   L'état masqué n'est appliqué que si JavaScript s'est exécuté : sans lui,
   le contenu reste visible plutôt que de disparaître. */
.js .reveler {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
}
.js .reveler.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveler { opacity: 1; transform: none; transition: none; }
}

.defilable { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==================================================================
   10. Coquille applicative — en-tête, navigation, onglets, pied
   ================================================================== */

/* --- En-tête collant --------------------------------------------- */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--h-entete);
  z-index: 900;
  background: var(--surface);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition),
              background var(--transition);
}
.entete.est-detachee {
  border-bottom-color: var(--trait);
  box-shadow: 0 1px 16px rgba(8, 49, 42, .06);
}
.entete__interieur {
  height: 100%;
  max-width: var(--lg-contenu);
  margin-inline: auto;
  padding-inline: var(--e-5);
  display: flex;
  align-items: center;
  gap: var(--e-4);
}
@media (max-width: 640px) { .entete__interieur { padding-inline: var(--e-4); } }

.marque { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; flex: none; min-height: 44px; }
.marque img { height: 40px; width: auto; display: block; }
.marque__nom {
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--encre);
  letter-spacing: -.02em;
  line-height: 1.05;
}
.marque__nom span { display: block; font-family: var(--f-texte); font-size: .68rem;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
@media (max-width: 400px) { .marque__nom { display: none; } }

/* --- Navigation bureau ------------------------------------------- */
.nav-bureau { display: flex; align-items: center; gap: var(--e-1); margin-left: auto; }
.nav-bureau a, .nav-bureau button {
  font-family: var(--f-texte);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--encre-2);
  text-decoration: none;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-sm);
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color var(--transition), background var(--transition);
}
.nav-bureau a:hover, .nav-bureau button:hover { color: var(--accent); background: var(--vert-50); }
.nav-bureau a[aria-current="page"] { color: var(--accent-fort); font-weight: 600; }

.menu-deroulant { position: relative; }
.menu-deroulant__panneau {
  position: absolute;
  top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-3);
  padding: var(--e-2);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.menu-deroulant.est-ouvert .menu-deroulant__panneau {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.menu-deroulant__panneau a {
  padding: var(--e-3);
  border-radius: var(--r-sm);
  display: flex; align-items: center; gap: var(--e-3);
  font-size: var(--t-sm);
}
.menu-deroulant__panneau a i { color: var(--accent); font-size: 1.15rem; }
.menu-deroulant.est-ouvert > button i.chevron { transform: rotate(180deg); }
.nav-bureau i.chevron { transition: transform var(--transition); font-size: 1rem; }

.entete__actions { display: flex; align-items: center; gap: var(--e-2); margin-left: var(--e-3); }

.bouton-icone {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  border: 1px solid var(--trait);
  background: var(--surface);
  color: var(--encre-2);
  cursor: pointer;
  font-size: 1.15rem;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.bouton-icone:hover { background: var(--vert-50); color: var(--accent); border-color: var(--accent); }

@media (max-width: 1279px), (pointer: coarse) and (max-width: 1400px) {
  .nav-bureau { display: none; }
}

/* --- Tiroir mobile ------------------------------------------------ */
.voile {
  position: fixed; inset: 0; z-index: 940;
  background: rgba(8, 49, 42, .45);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.voile.est-visible { opacity: 1; visibility: visible; }

.tiroir[hidden], .voile[hidden] { display: none !important; }

.tiroir {
  position: fixed; z-index: 950;
  top: 0; right: 0; bottom: 0;
  width: min(88vw, 380px);
  background: var(--surface);
  border-left: 1px solid var(--trait);
  transform: translateX(100%);
  transition: transform var(--transition);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tiroir.est-ouvert { transform: none; }
.tiroir__entete {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.tiroir__corps { padding: var(--e-4) var(--e-5) var(--e-6); display: flex; flex-direction: column; gap: var(--e-1); }
.tiroir__corps > a {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 52px; padding: 0 var(--e-3);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--encre);
  font-size: var(--t-md); font-weight: 500;
}
.tiroir__corps > a:hover { background: var(--vert-50); color: var(--accent-fort); }
.tiroir__corps > a[aria-current="page"] { background: var(--vert-50); color: var(--accent-fort); font-weight: 600; }
.tiroir__corps > a i { color: var(--accent); font-size: 1.2rem; width: 24px; }

.tiroir__groupe { margin-top: var(--e-3); }
.tiroir__titre {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gris-2);
  padding: var(--e-3) var(--e-3) var(--e-2);
}
.tiroir__pied { margin-top: auto; padding: var(--e-5); border-top: 1px solid var(--trait); display: flex; flex-direction: column; gap: var(--e-3); }

@media (min-width: 1280px) and (not (pointer: coarse)) { .tiroir, .voile, .ouvrir-tiroir { display: none !important; } }

/* --- Barre d'onglets mobile --------------------------------------- */
.onglets {
  position: fixed; inset: auto 0 0 0; z-index: 930;
  height: calc(var(--h-onglets) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface);
  border-top: 1px solid var(--trait);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.onglets a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--encre-2);
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
  transition: color var(--transition);
  position: relative;
}
.onglets a i { font-size: 1.4rem; line-height: 1; }
.onglets a[aria-current="page"] { color: var(--accent); }
.onglets a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0;
  width: 26px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--vert-600);
}
.onglets a.onglet--appel { color: var(--ocre-600); }

@media (min-width: 1280px) and (not (pointer: coarse)) { .onglets { display: none; } }
@media (max-width: 1279px), (pointer: coarse) and (max-width: 1400px) { body { padding-bottom: calc(var(--h-onglets) + env(safe-area-inset-bottom, 0px)); } }

/* --- Pied de page -------------------------------------------------- */
.pied { background: #08312A; color: #A9C7BD; padding-block: var(--e-8) var(--e-5); }
.pied a { color: #CFE3DB; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pied__grille {
  display: grid; gap: var(--e-6);
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
}
@media (max-width: 900px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; } }
.pied h4 { color: #fff; font-size: var(--t-sm); letter-spacing: .1em; text-transform: uppercase;
  font-family: var(--f-texte); font-weight: 600; margin-bottom: var(--e-3); }
.pied__liens { list-style: none; display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--t-sm); }
.pied__bas {
  margin-top: var(--e-7); padding-top: var(--e-4);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap;
  font-size: var(--t-xs); color: #7FA396;
}
.pied__marque { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.pied__marque img { height: 44px; background: #fff; border-radius: var(--r-sm); padding: 4px; }

/* ==================================================================
   11. Motifs de page
   ================================================================== */

/* --- Hero d'accueil ------------------------------------------------ */
.hero { padding-block: clamp(var(--e-6), 5vw, var(--e-8)) 0; }
.hero__grille {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(var(--e-5), 4vw, var(--e-8));
  align-items: center;
}
@media (max-width: 900px) { .hero__grille { grid-template-columns: 1fr; } }

.hero h1 { max-width: 15ch; }
.hero__actions { display: flex; gap: var(--e-3); flex-wrap: wrap; margin-top: var(--e-2); }

.hero__preuves {
  display: flex; gap: var(--e-5); flex-wrap: wrap;
  margin-top: var(--e-5); padding-top: var(--e-5);
  border-top: 1px solid var(--trait);
}
.hero__preuve { display: flex; flex-direction: column; gap: 2px; }
.hero__preuve strong {
  font-family: var(--f-titre); font-size: 1.6rem; color: var(--accent-fort);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.hero__preuve span { font-size: var(--t-xs); color: var(--gris); }

/* Visuel : deux photos décalées plutôt qu'un carrousel automatique
   (le carrousel faisait défiler le message avant qu'on l'ait lu). */
.hero__visuel { position: relative; }
.hero__photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--ombre-3);
  aspect-ratio: 4 / 5;
  background: var(--sable-2);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__photo--seconde {
  position: absolute;
  right: -3%; bottom: -9%;
  width: 44%;
  aspect-ratio: 1;
  border: 6px solid var(--fond);
  box-shadow: var(--ombre-2);
}
@media (max-width: 900px) {
  .hero__visuel { max-width: 460px; margin-inline: auto; width: 100%; }
  .hero__photo { aspect-ratio: 5 / 4; }
  .hero__photo--seconde { width: 40%; right: -4%; bottom: -8%; }
}

.hero__badge {
  position: absolute; left: -4%; top: 8%;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-2);
  padding: var(--e-3) var(--e-4);
  display: flex; align-items: center; gap: var(--e-3);
  max-width: 220px;
}
.hero__badge i { color: var(--accent); font-size: 1.5rem; }
.hero__badge span { font-size: var(--t-xs); line-height: 1.35; color: var(--encre); font-weight: 500; }
@media (max-width: 560px) { .hero__badge { display: none; } }

/* --- En-tête des pages intérieures --------------------------------- */
.entete-page {
  background: var(--sable-2);
  border-bottom: 1px solid var(--trait);
  padding-block: clamp(var(--e-6), 6vw, var(--e-8));
}
.entete-page .pile { max-width: 62ch; }

/* --- En-tête de section -------------------------------------------- */
.tete-section { display: flex; flex-direction: column; gap: var(--e-3); margin-bottom: var(--e-6); max-width: 62ch; }
.tete-section--centre { text-align: center; margin-inline: auto; align-items: center; }

/* --- Étapes numérotées --------------------------------------------- */
.etapes { counter-reset: etape; display: grid; gap: var(--e-4); }
.etape {
  counter-increment: etape;
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-4);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  padding: var(--e-5);
  position: relative;
}
.etape::before {
  content: counter(etape, decimal-leading-zero);
  font-family: var(--f-titre); font-weight: 800;
  font-size: 1.5rem; line-height: 1;
  color: var(--accent);
  background: var(--vert-50);
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.etape h3 { margin-bottom: var(--e-2); }
.etape p { color: var(--gris); font-size: var(--t-sm); }
@media (max-width: 520px) {
  .etape { grid-template-columns: 1fr; gap: var(--e-3); }
  .etape::before { width: 44px; height: 44px; font-size: 1.25rem; }
}

/* --- Bandeau d'appel à l'action ------------------------------------ */
.bandeau-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-6); flex-wrap: wrap;
}
.bandeau-cta h2 { max-width: 18ch; }
.bandeau-cta .chapo { max-width: 46ch; }

/* --- Témoignages ---------------------------------------------------- */
.temoignage {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  padding: var(--e-5);
  display: flex; flex-direction: column; gap: var(--e-4);
}
.temoignage__texte { font-size: var(--t-md); color: var(--encre-2); font-style: italic; }
.temoignage__texte::before { content: "«\00a0"; color: var(--ocre-500); font-style: normal; font-weight: 700; }
.temoignage__texte::after  { content: "\00a0»"; color: var(--ocre-500); font-style: normal; font-weight: 700; }
.temoignage__auteur { display: flex; align-items: center; gap: var(--e-3); margin-top: auto; }
.temoignage__initiale {
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--vert-100); color: var(--accent-fort);
  display: grid; place-items: center;
  font-family: var(--f-titre); font-weight: 700; font-size: 1rem;
  flex: none;
}
.temoignage__nom { display: block; font-weight: 600; color: var(--encre); font-size: var(--t-sm); line-height: 1.3; }
.temoignage__lieu { display: block; font-size: var(--t-xs); color: var(--gris); }

/* --- Questions fréquentes ------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: var(--e-3); max-width: 780px; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--e-4) var(--e-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  font-family: var(--f-titre); font-weight: 700; font-size: var(--t-md);
  color: var(--encre);
  min-height: 60px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "\ea4e"; /* ri-add-line */
  font-family: "remixicon"; font-weight: 400;
  color: var(--accent); font-size: 1.35rem; flex: none;
  transition: transform var(--transition);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { background: var(--vert-50); }
.faq details > div { padding: 0 var(--e-5) var(--e-5); color: var(--gris); font-size: var(--t-sm); }

/* --- Tableau ---------------------------------------------------------- */
.tableau { width: 100%; border-collapse: collapse; min-width: 520px; background: var(--surface); }
.tableau th, .tableau td { text-align: left; padding: var(--e-4); border-bottom: 1px solid var(--trait); font-size: var(--t-sm); }
.tableau th { font-family: var(--f-texte); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris); font-weight: 600; background: var(--sable-2); }
.tableau tr:last-child td { border-bottom: 0; }
.tableau td strong { color: var(--encre); }
.enveloppe-tableau { border: 1px solid var(--trait); border-radius: var(--r-md); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }

/* --- Bloc de contact -------------------------------------------------- */
.contact-grille { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(var(--e-5), 4vw, var(--e-7)); align-items: start; }
@media (max-width: 900px) { .contact-grille { grid-template-columns: 1fr; } }

.canal {
  display: flex; gap: var(--e-4); align-items: flex-start;
  padding: var(--e-4);
  border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.canal:hover { background: var(--surface); border-color: var(--trait); }
.canal i { font-size: 1.4rem; color: var(--accent); flex: none; margin-top: 2px; }
.canal strong { display: block; color: var(--encre); font-size: var(--t-md); }
.canal span { font-size: var(--t-sm); color: var(--gris); }

.panneau {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  padding: clamp(var(--e-5), 3vw, var(--e-6));
  box-shadow: var(--ombre-1);
}

.masquer-mobile { display: none; }
@media (min-width: 1280px) and (not (pointer: coarse)) { .masquer-mobile { display: inline-flex; } }

/* ==================================================================
   12. Diagnostic d'autonomie
   ================================================================== */
.diag { max-width: 720px; margin-inline: auto; }

.diag__jauge {
  display: flex; align-items: center; gap: var(--e-4);
  margin-bottom: var(--e-5);
}
.diag__barre {
  flex: 1; height: 6px; border-radius: var(--r-full);
  background: var(--sable-2); overflow: hidden;
  border: 1px solid var(--trait);
}
.diag__barre > span {
  display: block; height: 100%; width: 0;
  background: var(--vert-600);
  border-radius: var(--r-full);
  transition: width .35s cubic-bezier(.2,.7,.3,1);
}
.diag__compte {
  font-size: var(--t-xs); font-weight: 600; color: var(--gris);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.diag__ecran { display: none; }
.diag__ecran.est-actif { display: block; animation: diag-entree .32s cubic-bezier(.2,.7,.3,1) both; }
@keyframes diag-entree { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .diag__ecran.est-actif { animation: none; } }

.diag__question { margin-bottom: var(--e-2); }
.diag__aide { color: var(--gris); font-size: var(--t-sm); margin-bottom: var(--e-5); }

.diag__choix { display: flex; flex-direction: column; gap: var(--e-3); }
.diag__option {
  display: flex; align-items: center; gap: var(--e-4);
  width: 100%; min-height: 62px;
  padding: var(--e-3) var(--e-4);
  background: var(--surface);
  border: 1.5px solid var(--trait);
  border-radius: var(--r-md);
  font-family: var(--f-texte); font-size: var(--t-md);
  color: var(--encre); text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.diag__option:hover { border-color: var(--accent); background: var(--vert-50); }
.diag__option:active { transform: scale(.99); }
.diag__option.est-choisie { border-color: var(--accent); background: var(--vert-50); }
.diag__puce {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-full);
  border: 1.5px solid var(--trait);
  display: grid; place-items: center;
  font-size: var(--t-xs); font-weight: 700; color: var(--gris);
  background: var(--surface);
}
.diag__option.est-choisie .diag__puce {
  background: var(--vert-600); border-color: var(--accent); color: #fff;
}

.diag__pieds { display: flex; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-5); }

/* Résultat */
.diag__resultat { text-align: center; }
.diag__medaille {
  width: 74px; height: 74px; margin-inline: auto;
  border-radius: var(--r-full);
  background: var(--vert-100); color: var(--accent-fort);
  display: grid; place-items: center; font-size: 2.1rem;
}
.diag__reco {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-md); padding: var(--e-5);
  text-align: left; display: flex; gap: var(--e-4); align-items: flex-start;
}
.diag__reco--secondaire { background: transparent; border-style: dashed; }
.diag__notes { text-align: left; }

/* ==================================================================
   13. Encarts et duos — remplacent des grilles écrites en style inline
       qui ne pouvaient pas se réorganiser sur petit écran.
   ================================================================== */
.encart {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--e-5);
  align-items: center;
}
.encart__icone { width: 64px; height: 64px; font-size: 2rem; }
@media (max-width: 760px) {
  .encart {
    grid-template-columns: 1fr;
    gap: var(--e-4);
    text-align: left;
  }
  .encart .btn { width: 100%; }
}

/* Deux champs côte à côte, empilés dès que la place manque. */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-4);
}
@media (max-width: 560px) { .duo { grid-template-columns: 1fr; } }

/* Deux colonnes de contenu, empilées sur tablette. */
.paire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--e-5), 5vw, var(--e-8));
  align-items: start;
}
@media (max-width: 860px) { .paire { grid-template-columns: 1fr; } }

/* Les rangées de boutons ne doivent jamais forcer un débordement. */
@media (max-width: 560px) {
  .rang > .btn { flex: 1 1 100%; }
  .btn { max-width: 100%; }
  .btn > span, .btn { min-width: 0; }
}

/* ==================================================================
   14. Cibles tactiles
       Les liens du pied de page ne mesuraient que la hauteur de leur
       ligne (19 px). Sur mobile, ils deviennent de vraies cibles.
   ================================================================== */
.pied__liens li { display: flex; }
.pied__liens a,
.pied__liens li > span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--e-1);
}
@media (min-width: 1280px) and (not (pointer: coarse)) {
  .pied__liens a,
  .pied__liens li > span { min-height: 32px; }
}

/* Boutons ronds de l'en-tête : 44 px, seuil recommandé au doigt. */
.bouton-icone { width: 44px; height: 44px; }

/* Les liens dans le corps du texte gagnent aussi de la surface. */
.canal { min-height: 56px; }

/* ==================================================================
   15. Confort mobile
       En-tête, logo et commandes agrandis. Le public visé — personnes
       âgées et leurs enfants — vise moins bien et lit moins bien qu'une
       cible de 25 ans : on prend de la place plutôt que d'en gagner.
   ================================================================== */
@media (max-width: 1279px), (pointer: coarse) and (max-width: 1400px) {
  :root {
    --h-entete: 80px;
    --h-onglets: 74px;
  }

  /* Le logo devient lisible au premier coup d'œil. */
  .marque img { height: 56px; }
  .marque { gap: var(--e-2); }

  /* Le nom reste affiché : c'est lui qui identifie l'association. */
  .marque__nom { display: block; font-size: 1.05rem; }
  .marque__nom span { font-size: .68rem; letter-spacing: .06em; }

  /* Commandes rondes plus grandes et plus contrastées. */
  .bouton-icone {
    width: 52px;
    height: 52px;
    font-size: 1.5rem;
    border-color: var(--trait);
  }
  .entete__actions { gap: var(--e-3); margin-left: auto; }

  /* Barre d'onglets : icônes et libellés agrandis. */
  .onglets a { font-size: .875rem; gap: 4px; }
  .onglets a i { font-size: 1.7rem; }
}

/* Sur les écrans les plus étroits, on sacrifie le sous-titre du logo
   plutôt que sa taille. */
@media (max-width: 400px) {
  .marque__nom { font-size: 1.0625rem; }
  .marque__nom span { display: none; }
  .bouton-icone { width: 48px; height: 48px; font-size: 1.4rem; }
}

/* Le tiroir suit la même logique : cibles larges, texte confortable. */
@media (max-width: 1279px), (pointer: coarse) and (max-width: 1400px) {
  .tiroir__corps > a { min-height: 58px; font-size: 1.1875rem; }
  .tiroir__corps > a i { font-size: 1.5rem; width: 30px; }
  .tiroir__titre { font-size: .8125rem; }
  .tiroir__pied .btn { min-height: 56px; font-size: 1.125rem; }
}

/* ==================================================================
   16. Très petits écrans (≤ 360 px)
       À 320 px, la marque et les deux boutons ne tenaient plus dans
       l'en-tête : le hamburger débordait et se retrouvait coupé.
   ================================================================== */
.entete__interieur { min-width: 0; }
.marque { min-width: 0; flex: 0 1 auto; }
.marque__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entete__actions { flex: 0 0 auto; }

@media (max-width: 380px) {
  /* Le logo seul identifie l'association : on lui laisse la place,
     et les commandes restent entièrement accessibles. */
  .marque__nom { display: none; }
  .marque img { height: 52px; }
  .entete__actions { gap: var(--e-2); }
}

/* Le second visuel du hero, purement décoratif, ne doit pas être rogné
   par le bord de l'écran sur les petites largeurs. */
@media (max-width: 560px) {
  .hero__photo--seconde { right: 0; bottom: -7%; width: 38%; }
}

/* Les petits boutons descendaient à 42 px : sous le seuil tactile. */
@media (max-width: 1279px), (pointer: coarse) and (max-width: 1400px) {
  .btn--sm { min-height: 46px; padding: 0 var(--e-4); font-size: 1rem; }
}

/* ==================================================================
   17. Couche responsive finale
       Une seule couche mobile/tablette, sans rails horizontaux.
   ================================================================== */
.afficher-mobile { display: none; }
.bascule-theme--tiroir { align-self: flex-start; }
.rail-indice { display: none; }

@media (min-width: 1280px) and (not (pointer: coarse)) {
  .bascule-theme--tiroir { display: none; }
}

@media (max-width: 1279px), (pointer: coarse) and (max-width: 1400px) {
  :root {
    --h-entete: 88px;
    --h-onglets: 88px;
    --t-xs: 1.125rem;
    --t-sm: 1.25rem;
    --t-md: 1.3125rem;
    --t-lg: 1.5rem;
    --t-xl: 1.85rem;
    --t-2xl: 2.45rem;
    --t-3xl: 3rem;
  }

  body {
    font-size: var(--t-md);
    line-height: 1.68;
    padding-bottom: calc(var(--h-onglets) + env(safe-area-inset-bottom, 0px));
  }

  .conteneur,
  .entete__interieur {
    padding-inline: var(--e-4);
  }

  .entete__interieur { gap: var(--e-2); }
  .marque img { height: 68px; }
  .marque__nom { display: none; }
  .entete__actions { gap: var(--e-2); margin-left: auto; }
  .entete .afficher-mobile { display: inline-grid; }

  .bouton-icone {
    width: 62px;
    height: 62px;
    font-size: 2rem;
  }
  .bouton-icone--appel {
    background: var(--bouton);
    border-color: var(--bouton);
    color: #fff;
    text-decoration: none;
  }
  .bouton-icone--appel:hover {
    background: var(--bouton-survol);
    color: #fff;
  }

  .onglets a {
    font-size: 1.02rem;
    gap: 5px;
    line-height: 1.15;
  }
  .onglets a i { font-size: 2.15rem; }

  .section { padding-block: var(--e-7); }
  .section--serre { padding-block: var(--e-6); }
  .grille { gap: var(--e-4); }
  .grille--auto,
  .grille--large,
  .grille--2 {
    grid-template-columns: 1fr;
  }

  .grille--auto,
  .grille--large,
  .etapes {
    gap: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
    box-shadow: var(--ombre-1);
  }

  .carte,
  .panneau,
  .temoignage,
  .etape {
    padding: var(--e-5);
    border-radius: var(--r-md);
  }

  .grille--auto > .carte,
  .grille--large > .carte,
  .grille--auto > .temoignage,
  .grille--large > .temoignage,
  .etapes > .etape {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--trait);
  }

  .grille--auto > .carte:last-child,
  .grille--large > .carte:last-child,
  .grille--auto > .temoignage:last-child,
  .grille--large > .temoignage:last-child,
  .etapes > .etape:last-child {
    border-bottom: 0;
  }

  .carte__icone {
    width: 68px;
    height: 68px;
    font-size: 2.15rem;
  }
  .carte h3,
  .etape h3 {
    font-size: 1.8rem;
  }
  .carte p,
  .etape p,
  .petit {
    font-size: 1.25rem;
    line-height: 1.62;
  }

  .hero {
    padding-block: var(--e-5) var(--e-6);
  }
  .hero__grille {
    grid-template-columns: 1fr;
    gap: var(--e-5);
  }
  /* Le hero se comportait autrement que le reste : titre bridé à 16
     caractères, paragraphe à 24, alors que les autres blocs utilisent
     58ch — une limite qui ne contraint jamais sur un écran étroit.
     Ici, ils occupent toute la largeur comme partout ailleurs. */
  .hero h1 {
    max-width: none;
  }

  /* `text-wrap: balance` égalise la longueur des lignes : utile pour un
     titre de deux lignes sur grand écran, contre-productif ici, où il
     laisse des lignes courtes au milieu du bloc. Sur écran étroit, les
     titres remplissent leurs lignes comme les paragraphes. */
  h1, h2, h3, h4 {
    text-wrap: wrap;        /* remet le mode par défaut… */
    text-wrap-style: auto;  /* …et annule l'équilibrage */
  }
  .hero .chapo {
    font-size: 1.5rem;
    line-height: 1.6;
    max-width: none;
  }
  .surtitre {
    font-size: 1rem;
  }
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__actions .btn {
    width: 100%;
  }
  .hero__preuves {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-3);
  }
  .hero__preuve strong {
    font-size: 1.5rem;
  }
  .hero__preuve span {
    font-size: 1.15rem;
  }
  .hero__visuel {
    max-width: 520px;
    margin-inline: auto;
    width: 100%;
  }
  .hero__photo {
    aspect-ratio: 4 / 3;
  }
  .hero__photo--seconde {
    width: 36%;
    right: 0;
    bottom: -6%;
  }
  .hero__badge {
    left: var(--e-3);
    right: var(--e-3);
    top: auto;
    bottom: var(--e-3);
    max-width: none;
  }

  .bandeau-cta,
  .bandeau-cta .rang {
    align-items: stretch;
    width: 100%;
  }
  .bandeau-cta .rang,
  .entete-page .rang {
    flex-direction: column;
  }
  .bandeau-cta .btn,
  .entete-page .btn {
    width: 100%;
  }

  .tiroir {
    width: min(92vw, 400px);
  }
  .tiroir__entete,
  .tiroir__corps,
  .tiroir__pied {
    padding-inline: var(--e-4);
  }
  .tiroir__corps > a {
    min-height: 68px;
    font-size: 1.28rem;
  }
  .tiroir__corps > a i {
    font-size: 1.9rem;
    width: 38px;
  }
  .tiroir__titre {
    font-size: 1rem;
  }

  .champ input,
  .champ select,
  .champ textarea {
    min-height: 66px;
    font-size: 1.25rem;
  }

  .tableau {
    min-width: 560px;
  }
}

@media (max-width: 640px) {
  :root {
    --h-entete: 86px;
    --h-onglets: 90px;
    --t-xl: 1.75rem;
    --t-2xl: 2.25rem;
    --t-3xl: 2.85rem;
  }

  .conteneur,
  .entete__interieur {
    padding-inline: var(--e-3);
  }

  .surtitre {
    font-size: .95rem;
    letter-spacing: .08em;
  }
  .chapo {
    font-size: 1.35rem;
    line-height: 1.58;
  }

  .section {
    padding-block: var(--e-6);
  }

  .tete-section {
    margin-bottom: var(--e-4);
  }

  .hero h1 {
    font-size: 2.85rem;
    line-height: 1.03;
  }

  .hero .chapo {
    font-size: 1.42rem;
    line-height: 1.55;
    max-width: none;
  }

  .hero__preuves {
    grid-template-columns: 1fr;
  }
  .hero__preuve {
    flex-direction: row;
    align-items: baseline;
    gap: var(--e-3);
  }
  .hero__preuve strong {
    min-width: 5rem;
  }

  .hero__badge,
  .hero__photo--seconde {
    display: none;
  }

  .rang,
  .diag__pieds {
    align-items: stretch;
  }
  .rang > .btn,
  .diag__pieds .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .faq summary {
    align-items: flex-start;
  }
  .canal {
    padding-inline: var(--e-3);
  }

  .onglets a {
    font-size: 1rem;
    font-weight: 700;
  }
  .onglets a i {
    font-size: 2.1rem;
  }

  .btn {
    min-height: 64px;
    font-size: 1.2rem;
    padding-inline: var(--e-4);
  }

  .carte,
  .temoignage,
  .etape {
    padding: var(--e-5) var(--e-4);
  }

  .carte h3,
  .etape h3 {
    font-size: 1.7rem;
    line-height: 1.08;
  }

  .carte p,
  .etape p,
  .temoignage__texte {
    font-size: 1.22rem;
    line-height: 1.58;
  }

  .panneau {
    padding: var(--e-5) var(--e-4);
  }
}

@media (max-width: 380px) {
  .entete__interieur {
    padding-inline: var(--e-2);
  }
  .marque img {
    height: 64px;
  }
  .bouton-icone {
    width: 58px;
    height: 58px;
    font-size: 1.9rem;
  }
  .onglets a {
    font-size: .92rem;
  }
}

/* ==================================================================
   18. Correctif : rangées de boutons en colonne
       `.bandeau-cta .rang` et `.entete-page .rang` passent en
       flex-direction: column sur mobile, mais leurs boutons gardaient
       `flex: 1 1 100%`. En colonne, flex-basis s'applique à la HAUTEUR :
       le second bouton basculait dans une nouvelle colonne, hors écran.
   ================================================================== */
@media (max-width: 1279px), (pointer: coarse) and (max-width: 1400px) {
  .bandeau-cta .rang,
  .entete-page .rang,
  .diag__pieds {
    flex-wrap: nowrap;
  }
  .bandeau-cta .rang > .btn,
  .entete-page .rang > .btn,
  .diag__pieds > .btn {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ==================================================================
   19. Correctif : pistes de grille qui refusent de rétrécir
       `1fr` a pour minimum automatique le min-content de son contenu.
       Sous 360 px, la piste des témoignages restait à 350 px dans un
       conteneur de 296 px, et la carte débordait. `minmax(0, 1fr)`
       plus `min-width: 0` autorisent la piste à suivre le conteneur.
   ================================================================== */
@media (max-width: 1279px), (pointer: coarse) and (max-width: 1400px) {
  .grille--auto,
  .grille--large,
  .grille--2,
  .paire {
    grid-template-columns: minmax(0, 1fr);
  }
  .grille > *,
  .etapes > * {
    min-width: 0;
    max-width: 100%;
  }
}

/* Un mot trop long ne doit jamais élargir sa carte. */
.temoignage__texte,
.carte p,
.etape p,
.canal span { overflow-wrap: anywhere; }