/* ==========================================================================
   Visitadom — systeme de design
   Palette et typographie relevees dans la feuille archivee le 25/06/2022
   (main.68e8fef3.chunk.css). Avenir n'ayant jamais ete archivee, la pile
   typographique retombe sur des polices systeme au dessin proche.
   ========================================================================== */

:root {
  --bleu:        #1026e7;
  --bleu-fonce:  #2a2e69;
  --vert:        #2af598;
  --vert-fonce:  #02884b;   /* 4,54:1 sur blanc ; #078d50 n'atteignait que 4,26 */
  --turquoise:   #13ecda;
  --encre:       #272323;
  /* #8898aa est le gris de la charte d'origine, mais il ne donne que
     2,95:1 sur blanc — sous le seuil WCAG AA de 4,5. Assombri a la
     valeur minimale qui passe aussi sur --fond (#f6f9fc). */
  --gris:        #647486;
  --gris-clair:  #bec9d5;
  --fond:        #f6f9fc;
  --blanc:       #ffffff;
  --rayon:       14px;
  --ombre:       0 2px 8px rgba(42,46,105,.06), 0 12px 32px rgba(42,46,105,.08);
  --ombre-forte: 0 4px 14px rgba(16,38,231,.14), 0 18px 48px rgba(16,38,231,.12);
  --largeur:     1160px;
  /* Gouttiere resserree sur petit ecran : 2,5rem sur 360px de large ne
     laissait que 320px de contenu utile. */
  --gouttiere:   clamp(1.75rem, 1rem + 3vw, 2.5rem);
  --pas:         clamp(3rem, 7vw, 5.5rem);
  --police:      "Avenir Next", Avenir, "Segoe UI", -apple-system,
                 BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-underline-offset: .18em; }
a:hover { color: var(--bleu-fonce); }

:focus-visible {
  /* L'outline-offset place le trait sur le fond VOISIN, pas sur l'element :
     un trait bleu sur les sections bleu nuit ou sur les cartes bleues etait
     donc invisible (1,45:1, et 1,00:1 sur la carte patient dont le fond est
     exactement la meme couleur). La teinte est donc contextuelle. */
  outline: 3px solid var(--focus, #1026e7);
  outline-offset: 3px;
  border-radius: 4px;
}
.pied :focus-visible,
.section--encre :focus-visible,
.duo__carte :focus-visible,
.bouton--primaire:focus-visible { --focus: #ffffff; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--bleu-fonce); color: #fff; padding: .8rem 1.2rem;
  z-index: 1000; border-radius: 0 0 var(--rayon) 0;
}
.saut-contenu:focus { left: 0; }

.enveloppe { width: min(100% - var(--gouttiere), var(--largeur));
              margin-inline: auto; }
.section { padding-block: var(--pas); }
.section--fond { background: var(--fond); }
.section--encre { background: var(--bleu-fonce); color: #eef2f7; }
/* Toute surface sombre force le blanc, quel que soit le niveau de titre :
   viser h3 seul avait laisse les h2 en bleu nuit sur fond bleu. */
.section--encre :is(h1, h2, h3, h4) { color: #fff; }
.section--encre p, .section--encre li { color: #dfe6ff; }

/* --- Titres ------------------------------------------------------------- */
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .6em; font-weight: 800;
                 letter-spacing: -.02em; color: var(--bleu-fonce); }
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
p  { margin: 0 0 1.1em; }
.plomb { font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem); color: #4a5568;
         max-width: 62ch; }
.section--encre .plomb { color: #c9d4e2; }

.surtitre {
  display: inline-block; font-size: .82rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--vert-fonce);
  background: rgba(42,245,152,.15); padding: .4rem .85rem;
  border-radius: 999px; margin-bottom: 1rem;
}
.section--encre .surtitre { color: #071b12; background: var(--vert); }

.marque { color: var(--bleu); }
.souligne {
  background: linear-gradient(transparent 62%, rgba(42,245,152,.55) 62%);
}

/* --- En-tete ------------------------------------------------------------ */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid #e6ecf3;
}
.entete__barre { display: flex; align-items: center; gap: 1.5rem;
                 min-height: 74px; }
.logo { display: inline-flex; align-items: center; gap: .55rem;
        font-weight: 800; font-size: 1.28rem; color: var(--bleu-fonce);
        text-decoration: none; letter-spacing: -.03em; }
/* Le SVG est inline pour que la barre du « V » suive la couleur du support :
   bleu nuit sur en-tete clair, blanche en mode sombre. Le repere reste vert. */
.logo__marque { width: 32px; height: 32px; flex: 0 0 32px; display: block; }
.logo__barre  { fill: var(--bleu-fonce); }
.logo__repere { fill: var(--vert-logo, #16c97c); }
.logo__mot    { line-height: 1; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0;
          align-items: center; flex-wrap: wrap; }
.nav a { color: #3c4858; text-decoration: none; font-weight: 600;
         font-size: .95rem; padding: .35rem 0;
         border-bottom: 2px solid transparent;
         display: inline-flex; align-items: center; min-height: 44px; }
.nav a:hover, .nav a[aria-current="page"] {
  color: var(--bleu); border-bottom-color: var(--vert);
}

/* --- Boutons ------------------------------------------------------------ */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .85rem 1.6rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bouton:hover { transform: translateY(-2px); }
.bouton--primaire { background: var(--bleu); color: #fff;
                    box-shadow: var(--ombre-forte); }
.bouton--primaire:hover { color: #fff; }
.bouton--vert { background: var(--vert); color: #06301d; }
.bouton--vert:hover { color: #06301d; }
.bouton--contour { border-color: var(--bleu); color: var(--bleu);
                   background: transparent; }
.bouton--blanc { background: #fff; color: var(--bleu-fonce); }

/* --- Heros -------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--pas);
        background: linear-gradient(170deg, #f4f8ff 0%, #ffffff 62%); }
.hero__grille { display: grid; gap: clamp(2rem, 5vw, 4rem);
                grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hero__grille { grid-template-columns: 1.05fr .95fr; } }
.hero__visuel img { border-radius: var(--rayon); box-shadow: var(--ombre); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }

.hero--compact { padding-block: clamp(2rem, 4vw, 3.2rem) clamp(2rem, 4vw, 3rem);
                 background: linear-gradient(170deg, #f4f8ff, #fff); }

/* --- Grilles et cartes -------------------------------------------------- */
.grille { display: grid; gap: 1.6rem; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.carte {
  background: #fff; border: 1px solid #e6ecf3; border-radius: var(--rayon);
  padding: 1.8rem; box-shadow: var(--ombre);
}
.carte h3 { margin-bottom: .5rem; }
.carte p:last-child { margin-bottom: 0; }
.carte--accent { border-top: 4px solid var(--vert); }
.carte__num {
  width: 42px; height: 42px; border-radius: 12px; display: grid;
  place-items: center; font-weight: 800; color: #fff; margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--bleu), var(--turquoise));
}

/* --- Chiffres cles ------------------------------------------------------ */
.chiffres { display: grid; gap: 1.5rem;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
            text-align: center; }
.chiffre__valeur {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); font-weight: 800;
  line-height: 1; letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--vert), var(--turquoise));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chiffre__nom { color: #c9d4e2; font-weight: 600; margin-top: .5rem; }

/* --- Listes ------------------------------------------------------------- */
.liste-atouts { list-style: none; padding: 0; margin: 0; display: grid;
                gap: 1rem; }
.liste-atouts li { position: relative; padding-left: 2.1rem; }
.liste-atouts li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2306301d'%3E%3Cpath d='M6.2 11.6 3 8.4l1.1-1.1 2.1 2.1 5.7-5.7L13 4.8z'/%3E%3C/svg%3E") center/78% no-repeat;
}

/* --- Duo patient / praticien -------------------------------------------- */
.duo { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo__carte { border-radius: var(--rayon); padding: 2.2rem; color: #fff;
              display: flex; flex-direction: column; }
.duo__carte--patient { background: linear-gradient(150deg, var(--bleu),
                       #3b52ff); }
.duo__carte--praticien { background: linear-gradient(150deg, var(--bleu-fonce),
                         #3d4390); }
.duo__carte :is(h1, h2, h3, h4) { color: #fff; font-size: 1.45rem; }
.duo__carte p, .duo__carte li { color: #eaf0ff; }
.duo__carte .surtitre { color: #06301d; background: var(--vert); }
.duo__carte .bouton { margin-top: auto; align-self: flex-start; }

/* --- Equipe ------------------------------------------------------------- */
.membre { text-align: center; }
.membre__avatar {
  width: 108px; height: 108px; border-radius: 50%; margin: 0 auto 1rem;
  display: grid; place-items: center; font-size: 2rem; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, var(--bleu-fonce),
  var(--bleu)); letter-spacing: -.04em;
}
.membre__nom { font-weight: 800; color: var(--bleu-fonce);
               font-size: 1.08rem; }
.membre__poste { color: var(--bleu); font-weight: 600; font-size: .93rem; }
.membre__mot { color: var(--gris); font-size: .9rem; font-style: italic; }

.citation {
  border-left: 4px solid var(--vert); padding: .4rem 0 .4rem 1.6rem;
  font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem); font-style: italic;
  color: var(--bleu-fonce); max-width: 68ch;
}
.citation__auteur { display: block; margin-top: .9rem; font-style: normal;
                    font-size: .92rem; font-weight: 700; color: var(--gris); }

/* --- Tarifs ------------------------------------------------------------- */
.offre { display: flex; flex-direction: column; }
.offre__nom { font-size: .82rem; font-weight: 800; letter-spacing: .1em;
              text-transform: uppercase; color: var(--bleu); }
.offre--phare { border: 2px solid var(--bleu); box-shadow: var(--ombre-forte);
                position: relative; }
.offre__ruban {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--vert); color: #06301d; font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: .3rem .9rem;
  border-radius: 999px; white-space: nowrap;
}
.offre .liste-atouts { margin: 1.2rem 0; }
.offre .bouton { margin-top: auto; }

/* --- Contenu juridique -------------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.4rem; font-size: 1.5rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul { padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }

/* --- Fil d'Ariane ------------------------------------------------------- */
.ariane { font-size: .86rem; color: var(--gris); padding-block: 1rem 0; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem;
             margin: 0; padding: 0; }
.ariane li::after { content: "›"; margin-left: .45rem; color: var(--gris-clair); }
.ariane li:last-child::after { content: ""; }
.ariane a { color: var(--gris); text-decoration: none; }
.ariane a:hover { color: var(--bleu); text-decoration: underline; }

/* --- Pied de page ------------------------------------------------------- */
.pied { background: var(--bleu-fonce); color: #b9c4d6; padding-block: 3.5rem 2rem;
        margin-top: var(--pas); }
.pied__grille { display: grid; gap: 2.2rem;
                grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.pied h2 { font-size: 1rem; color: #fff; text-transform: uppercase;
           letter-spacing: .07em; margin-bottom: .9rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pied a { color: #b9c4d6; text-decoration: none; font-size: .94rem; }
.pied a:hover { color: var(--vert); text-decoration: underline; }
/* Adresse de contact du pied. Elle doit se voir sans crier : le libellé reste
   dans le gris du pied, l'adresse passe en vert de marque et est soulignée en
   permanence, pas seulement au survol. Un visiteur qui cherche comment nous
   joindre la repère alors au balayage, sans avoir à survoler quoi que ce soit.
   C'est le SEUL moyen de contact du site, il n'y a aucun formulaire. */
.pied__contact { font-size: .94rem; margin-top: 1.1rem; }
.pied__contact strong { color: #fff; font-weight: 700; }
.pied__contact a { color: var(--vert); text-decoration: underline;
                   text-underline-offset: .18em; word-break: break-word; }
.pied__contact a:hover { color: #fff; }
.pied__bas { border-top: 1px solid rgba(255,255,255,.14); margin-top: 2.5rem;
             padding-top: 1.5rem; font-size: .83rem; color: #8e9eb5;
             display: flex; flex-wrap: wrap; gap: 1rem;
             justify-content: space-between; }

/* --- Bandeau de reconstitution ------------------------------------------ */
.bandeau-arx {
  background: #fff4d6; border-bottom: 1px solid #f0d799; color: #5c4408;
  font-size: .84rem; line-height: 1.5; padding: .7rem 0;
}
.bandeau-arx strong { color: #3d2c00; }
.bandeau-arx a { color: #6b4e00; }

.figure-credit { font-size: .74rem; color: var(--gris); margin-top: .5rem; }

/* --- Mode sombre -------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  /* En mode sombre le gris d'origine repasse au-dessus du seuil. */
  :root { --fond: #161b22; --blanc: #0f141a; --encre: #e6edf3;
          --gris: #8898aa; --focus: #7aa2ff; }
  body { background: #0f141a; color: #e6edf3; }
  h1, h2, h3, h4 { color: #eaf1f8; }
  .plomb { color: #a9b6c6; }
  .entete { background: rgba(15,20,26,.94); border-bottom-color: #232c38; }
  .nav a { color: #b9c6d6; }
  .logo { color: #eaf1f8; }
  .hero { background: linear-gradient(170deg, #131a24, #0f141a 62%); }
  .hero--compact { background: linear-gradient(170deg, #131a24, #0f141a); }
  .section--fond { background: #131a24; }
  .carte { background: #151c26; border-color: #232c38; }
  .bandeau-arx { background: #2e2513; border-bottom-color: #4a3c18;
                 color: #f0e2c0; }
  .bandeau-arx strong { color: #fff3d6; }
  .bandeau-arx a { color: #ffd98a; }
  .citation { color: #d5e2f0; }
  .prose { color: #d3dde8; }
}

@media print {
  .entete, .pied, .bandeau-arx, .hero__visuel { display: none; }
  body { color: #000; }
}

/* ==========================================================================
   Ajustements petits ecrans
   Points d'arret choisis d'apres le contenu, pas d'apres des tailles
   d'appareils : 900px est la largeur ou la grille du hero cesse de tenir
   sur deux colonnes, 600px celle ou les cartes deviennent trop etroites.
   ========================================================================== */

@media (max-width: 900px) {
  .hero__grille { grid-template-columns: 1fr; }
  /* Sur mobile le visuel passe apres le texte : le titre et l'action
     doivent rester visibles sans defilement. */
  .hero__visuel { order: 2; }
  .hero__grille > div { order: 1; }
  .duo__carte { padding: 1.75rem; }
}

@media (max-width: 600px) {
  :root { --pas: clamp(2.25rem, 8vw, 3.25rem); }
  h1 { font-size: clamp(1.85rem, 1.2rem + 4.5vw, 2.4rem); }
  h2 { font-size: clamp(1.4rem, 1.1rem + 2.5vw, 1.85rem); }
  .carte { padding: 1.35rem; }
  .offre { padding-top: 1.75rem; }
  /* Boutons pleine largeur : plus faciles a atteindre au pouce. */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .bouton { width: 100%; }
  .chiffre__valeur { font-size: clamp(2.1rem, 1.4rem + 6vw, 2.9rem); }
  .citation { padding-left: 1.1rem; font-size: 1.05rem; }
  .pied { padding-block: 2.5rem 1.5rem; }
  .pied__bas { flex-direction: column; gap: .5rem; }
  .ariane { font-size: .8rem; }
}

@media (max-width: 380px) {
  .logo { font-size: 1.12rem; }
}

/* Le titre du hero contient un fond decoratif : sur deux lignes il ne doit
   pas se couper au milieu d'un mot. */
.souligne { box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Aucune image ne doit forcer un defilement horizontal. */
img, figure, table, pre { max-width: 100%; }
body { overflow-x: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   En-tete sur petit ecran
   La navigation passe dans la feuille du bas ; la barre du haut ne doit pas
   pour autant se reduire a un logo flottant. Elle porte l'action principale,
   qui reste ainsi accessible sans ouvrir le menu.
   ========================================================================== */

.entete__action { display: none; }

@media (max-width: 899px) {
  /* Sans cette regle la navigation de bureau — six liens — restait affichee
     et venait ecraser le logo dans une barre de 62px. */
  .avec-js .nav { display: none; }

  .entete__barre { min-height: 60px; gap: .75rem; }

  .nav { width: 100%; margin-left: 0; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0;
            padding-bottom: .5rem; }
  .nav li + li { border-top: 1px solid #e6ecf3; }
  .nav a { padding: .1rem 0; border-bottom: none; }
  .nav a[aria-current="page"] { color: var(--bleu);
                                box-shadow: inset 3px 0 0 var(--vert);
                                padding-left: .75rem; }

  .avec-js .entete__action {
    display: inline-flex; align-items: center; margin-left: auto;
    min-height: 40px; padding: .45rem 1rem;
    border-radius: 999px; text-decoration: none;
    font-size: .88rem; font-weight: 700; white-space: nowrap;
    color: #06301d; background: var(--vert);
  }
  .entete__action-court { display: none; }
}

@media (max-width: 420px) {
  .entete__action-long { display: none; }
  .entete__action-court { display: inline; }
  .logo { font-size: 1.05rem; }
  .logo__pastille { width: 26px; height: 26px; font-size: .85rem; }
}

@media (prefers-color-scheme: dark) {
  .nav li + li { border-top-color: #232c38; }
}

/* ==========================================================================
   Menu mobile : bouton dans l'en-tete, panneau deroulant
   Le bouton est place la ou on le cherche. Le panneau s'ouvre sous la barre,
   sur toute la largeur, et conserve le regroupement par audience : c'est ce
   qui distingue ce menu d'une simple liste de liens.
   ========================================================================== */

.menu-bouton, .panneau, .panneau__voile { display: none; }

@media (max-width: 899px) {
  .avec-js .nav { display: none; }

  .entete__barre { min-height: 60px; gap: .6rem; }

  .nav { width: 100%; margin-left: 0; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0;
            padding-bottom: .5rem; }
  .nav li + li { border-top: 1px solid #e6ecf3; }
  .nav a { padding: .1rem 0; border-bottom: none; }
  .nav a[aria-current="page"] { color: var(--bleu);
                                box-shadow: inset 3px 0 0 var(--vert);
                                padding-left: .75rem; }

  .avec-js .entete__action {
    display: inline-flex; align-items: center; margin-left: auto;
    min-height: 40px; padding: .45rem 1rem;
    border-radius: 999px; text-decoration: none;
    font-size: .86rem; font-weight: 700; white-space: nowrap;
    color: #06301d; background: var(--vert);
  }

  .avec-js .menu-bouton {
    /* Le margin-left:auto était porté par .entete__action, retiré du balisage
       le 2026-08-07 : sans lui ici, le bouton se collerait contre le logo. */
    display: inline-flex; align-items: center; gap: .5rem; margin-left: auto;
    padding: .5rem .9rem; min-height: 44px;
    border: 1.5px solid var(--gris-clair); border-radius: 12px;
    background: transparent; cursor: pointer; font: inherit;
    font-size: .9rem; font-weight: 700; color: var(--bleu-fonce);
  }
  .menu-ouvert .menu-bouton {
    border-color: var(--bleu); color: var(--bleu);
    background: rgba(16,38,231,.06);
  }

  /* Trois traits qui deviennent une croix : le bouton indique son etat. */
  .menu-bouton__icone,
  .menu-bouton__icone::before,
  .menu-bouton__icone::after {
    display: block; width: 17px; height: 2px; border-radius: 2px;
    background: currentColor; content: "";
    transition: transform .2s ease, opacity .18s ease;
  }
  .menu-bouton__icone { position: relative; }
  .menu-bouton__icone::before { position: absolute; top: -5.5px; }
  .menu-bouton__icone::after  { position: absolute; top: 5.5px; }
  .menu-ouvert .menu-bouton__icone { background: transparent; }
  .menu-ouvert .menu-bouton__icone::before { transform: translateY(5.5px) rotate(45deg); }
  .menu-ouvert .menu-bouton__icone::after  { transform: translateY(-5.5px) rotate(-45deg); }

  .avec-js .panneau {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--blanc);
    border-bottom: 1px solid #e6ecf3;
    box-shadow: 0 18px 40px rgba(20,26,40,.16);
    max-height: calc(100dvh - 60px); overflow-y: auto;
    /* Replie par transformation plutot que display:none : la transition
       reste possible et le contenu garde sa place dans le document. */
    transform: scaleY(0); transform-origin: top; opacity: 0;
    visibility: hidden;
    transition: transform .22s ease, opacity .18s ease, visibility .22s;
  }
  .menu-ouvert .panneau { transform: scaleY(1); opacity: 1; visibility: visible; }
  .panneau__contenu { padding: 1.1rem 0 1.6rem; }

  .avec-js .panneau__voile {
    display: block; position: fixed; inset: 60px 0 0; z-index: 90;
    background: rgba(20,26,40,.45);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .menu-ouvert .panneau__voile { opacity: 1; pointer-events: auto; }
  .menu-ouvert { overflow: hidden; }

  .panneau__groupe + .panneau__groupe { margin-top: 1.35rem; }
  .panneau__etiquette {
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 700; color: var(--gris); margin: 0 0 .35rem;
  }
  .panneau__groupe ul { list-style: none; margin: 0; padding: 0; }
  .panneau__groupe li + li { border-top: 1px solid #eef2f7; }
  .panneau__groupe a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 50px; padding: .3rem .1rem; text-decoration: none;
    color: var(--bleu-fonce); font-weight: 600;
  }
  .panneau__groupe a::after {
    content: ""; width: 7px; height: 7px; flex: 0 0 7px;
    border-right: 2px solid var(--gris-clair);
    border-bottom: 2px solid var(--gris-clair);
    transform: rotate(-45deg);
  }
  .panneau__groupe a[aria-current="page"] {
    color: var(--bleu); box-shadow: inset 3px 0 0 var(--vert);
    padding-left: .8rem;
  }
  .panneau__pied { margin-top: 1.5rem; }
  .panneau__pied .bouton { width: 100%; }
}

@media (max-width: 420px) {
  .entete__action { font-size: .82rem; padding: .45rem .8rem; }
  .menu-bouton__texte { position: absolute; width: 1px; height: 1px;
                        overflow: hidden; clip: rect(0 0 0 0); }
  .avec-js .menu-bouton { padding: .5rem .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .panneau, .panneau__voile, .menu-bouton__icone,
  .menu-bouton__icone::before, .menu-bouton__icone::after {
    transition: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  .avec-js .panneau { background: #0f141a; border-bottom-color: #232c38; }
  .panneau__groupe li + li { border-top-color: #232c38; }
  .panneau__groupe a { color: #e6edf3; }
  .avec-js .menu-bouton { color: #e6edf3; border-color: #33404d; }
  .nav li + li { border-top-color: #232c38; }
}

/* --- Logo : declinaisons selon le support -------------------------------- */
/* Le vert de marque #2AF598 est trop clair pour un aplat sur fond blanc ;
   on l'assombrit dans l'en-tete et on rend l'original la ou le fond est
   sombre (pied de page, mode sombre), comme sur le logo fourni. */
.pied .logo__barre, .section--encre .logo__barre { fill: #FFFFFF; }
.pied .logo__repere, .section--encre .logo__repere { fill: #2AF598; }

@media (prefers-color-scheme: dark) {
  .logo__barre  { fill: #FFFFFF; }
  .logo__repere { fill: #2AF598; }
}