/* ==========================================================================
   Mine de rien — feuille de style unique

   Mobile d'abord. Au-delà de 1000 px, le site bascule en mise en page bureau :
   contenu plafonné à 1440 px, navigation horizontale, grille de 12 colonnes
   où chaque type de bloc déclare sa largeur.

   Sommaire
     1.  Variables
     2.  Polices
     3.  Base et réinitialisation
     4.  Utilitaires (boutons, champs, étiquettes, tableaux)
     5.  Animations
     6.  En-tête et navigation
     7.  Grille des blocs
     8.  Blocs de contenu
     9.  Bloc réseaux sociaux
     10. Carrousel Polaroid
     11. Pied de page
     12. Parcours de rendez-vous
     13. Administration
     14. Mise en page bureau (≥ 1000 px)
     15. Mouvement réduit et impression
   ========================================================================== */


/* ==========================================================================
   1. Variables
   ========================================================================== */

:root {
  /* Couleurs du logo */
  --turquoise:      #2fa9a2;
  --vert:           #6db86a;
  --jaune-anis:     #d8de29;
  --bleu-nuit:      #22415a;

  --color-bg:       #ffffff;
  --color-surface:  #eef6f5;
  --color-divider:  #dceae8;
  --color-text:     var(--bleu-nuit);

  --color-accent:      var(--turquoise);
  --color-accent-100:  #e0f2f0;
  --color-accent-200:  #bde5e1;
  --color-accent-600:  #268c86;
  --color-accent-700:  #1f7772;
  --color-accent-800:  #17605c;
  --color-accent-900:  #114a47;

  --color-accent-2:      var(--vert);
  --color-accent-2-100:  #e6f3e5;
  --color-accent-2-300:  #8fd08c;   /* vert pomme — les campagnes en ligne */
  --color-accent-2-700:  #4c8f4a;
  --color-accent-2-800:  #3d7a3c;
  --color-accent-2-900:  #2f5f2e;

  --color-neutral-100: #f1f5f6;
  --color-neutral-200: #e7eef0;
  --color-neutral-300: #d5e0e3;
  --color-neutral-400: #b6c5ca;
  --color-neutral-600: #74909c;
  --color-neutral-700: #4f7085;
  --color-neutral-800: #33566e;
  --color-neutral-900: var(--bleu-nuit);

  /* Polices */
  --font-marque:  "Adigiana Toybox", "Baloo 2", "Quicksand", system-ui, sans-serif;
  --font-baseline: "Coming Soon", "Adigiana Toybox", "Baloo 2", "Quicksand", system-ui, sans-serif;
  --font-heading: "Quicksand", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, sans-serif;

  /* Tailles de police réglables depuis l'administration.
     Ces cinq valeurs sont réécrites dans un <style> en tête de page par
     inc/layout.php, à partir de la table `reglage`. */
  --fs-titre:      32px;
  --fs-soustitre:  23px;
  --fs-texte:      17px;
  --fs-bloc:       16px;
  --fs-question:   17px;

  /* Espacements */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 25px;
  --space-6: 30px;
  --space-8: 40px;

  /* Arrondis — le site est plat, aéré, arrondi : aucune ombre portée */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --largeur-max: 1440px;
  /* Largeur de la barre de défilement, mesurée par assets/js/site.js. Sert au
     décor de l'accueil, qui s'étend sur toute la largeur de la fenêtre. */
  --barre-defilement: 0px;
  --transition: .18s ease;
}


/* ==========================================================================
   2. Polices — toutes auto-hébergées, aucune requête vers un tiers
   ========================================================================== */

/* Nom du site. « Adigiana Toolbox » dans le prototype est une coquille :
   la police s'appelle Adigiana Toybox. */
@font-face {
  font-family: "Adigiana Toybox";
  src: url("../fonts/adigiana-toybox.woff2") format("woff2"),
       url("../fonts/adigiana-toybox.woff") format("woff");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* Baseline sous le nom du site. Un seul sous-ensemble, latin : c'est le seul
   que publie Google Fonts pour cette police, et il couvre tous nos accents.

   L'intervalle de graisse est volontaire : il annonce que cette fonte unique
   couvre 400 à 700, ce qui évite au navigateur de fabriquer un faux gras sur
   une police manuscrite.

   Si le fichier venait à manquer, la déclaration échouerait sans bruit et la
   baseline retomberait sur Adigiana Toybox. */
@font-face {
  font-family: "Coming Soon";
  src: url("../fonts/coming-soon-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Repli du nom du site */
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo2-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo2-latin-ext.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Titres */
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Texte courant */
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-italic.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-ext-italic.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   3. Base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--fs-texte);
  color: var(--color-text);
  line-height: 1.6;

  /* Colonne : la coque prend la hauteur restante, le pied se pose dessous et
     reste en bas de l'écran sur une page courte. */
  display: flex;
  flex-direction: column;

  /* Filet de sécurité, et rien de plus : plus aucun élément ne déborde de
     lui-même. Ce rognage n'est pas fiable sur tous les navigateurs mobiles —
     c'est pour cela que le débordement est supprimé à la source. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.18;
  margin: 0 0 var(--space-2);
  text-wrap: pretty;
}

p { margin: 0 0 var(--space-3); }

a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-600); }

img { max-width: 100%; height: auto; display: block; }
/* Le display ci-dessus est plus fort que la règle du navigateur pour
   l'attribut « hidden » : sans ce rappel, une image masquée s'afficherait
   quand même, en cadre vide. */
img[hidden] { display: none; }

button { font-family: inherit; }

hr { height: 1px; border: 0; background: var(--color-divider); margin: var(--space-4) 0; }

/* Mise en forme saisie dans l'administration — gras, italique, souligné,
   barré, surligné. Le surlignage reprend le jaune du logo, adouci : à pleine
   saturation il passe devant le texte au lieu de le porter. Le soulignement
   est décollé des jambages, sans quoi les « p » et les « g » le traversent. */
strong, b { font-weight: 700; }
u { text-decoration-thickness: .07em; text-underline-offset: .18em; }
s { text-decoration-thickness: .1em; }
mark {
  background: rgba(216, 222, 41, .45);
  color: inherit;
  padding: 0 .18em;
  border-radius: 5px;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Accès au contenu au clavier */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--color-accent);
  color: #fff;
  border-radius: 0 0 var(--radius-md) 0;
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
}
.saut-contenu:focus { left: 0; color: #fff; }

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

.coque {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Pas de rognage ici, volontairement : le contenu est plafonné à 1440 px,
     mais les ronds décoratifs de l'accueil doivent pouvoir déborder dans les
     marges blanches. Ils sont rognés par leur propre couche. */
}

.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }


/* ==========================================================================
   4. Utilitaires
   ========================================================================== */

/* — boutons — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), filter var(--transition), transform var(--transition);
}
.btn svg { display: block; flex: 0 0 auto; }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-600); color: #fff; }
.btn-primary:active:not(:disabled) { background: var(--color-accent-700); }

.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover:not(:disabled) { background: var(--color-surface); color: var(--color-text); }

/* Le prototype rend le bouton « fantôme » en bleu nuit plein */
.btn-ghost { background: var(--bleu-nuit); color: #fff; }
.btn-ghost:hover:not(:disabled) { filter: brightness(1.22); color: #fff; }

.btn-lien {
  background: none;
  border: 0;
  color: var(--color-accent-800);
  padding: var(--space-2) var(--space-3);
}
.btn-lien:hover { background: var(--color-accent-100); }

.btn-danger { background: none; color: var(--color-accent-2-800); }
.btn-danger:hover:not(:disabled) { background: var(--color-accent-2-100); }

.btn-block { width: 100%; margin-top: var(--space-2); }
.btn-lg { min-height: 52px; font-size: 16px; }

/* — champs — */
.champ { margin-bottom: var(--space-3); }
.champ > label,
.champ > .label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;              /* 16 px : évite le zoom automatique sur iOS */
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  transition: border-color var(--transition);
}
.input::placeholder { color: color-mix(in srgb, var(--color-text) 60%, transparent); opacity: 1; }
.input:hover { border-color: var(--color-neutral-400); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input[aria-invalid="true"] { border-color: var(--color-accent-2); }

textarea.input { min-height: 130px; resize: vertical; line-height: 1.6; }
select.input { appearance: none; background-image: none; }

.erreur-champ {
  display: block;
  font-size: 13px;
  color: var(--color-accent-2-800);
  margin-top: 5px;
}

/* Champ piège du formulaire de contact : invisible pour l'humain,
   rempli par les robots. Retiré du flux et de l'ordre de tabulation. */
.piege {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.case-a-cocher {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
  transition: background var(--transition);
}
.case-a-cocher input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--color-accent); }
.case-a-cocher:has(input:checked) { background: var(--color-accent-100); }

/* — étiquettes — */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 5px 12px;
  border-radius: 999px;
}
.tag-accent   { background: var(--color-accent-100);   color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral  { background: var(--color-neutral-100);  color: var(--color-neutral-800); }
.tag-jaune    { background: var(--jaune-anis);         color: var(--color-text); }

/* — messages — */
.message {
  font-size: 15px;
  line-height: 1.6;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  animation: apparait .2s ease both;
}
.message-succes { background: var(--color-accent-100);   color: var(--color-accent-800); }
.message-erreur { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.message-info   { background: var(--color-surface);      color: var(--color-text); }
.message-jaune  { background: var(--jaune-anis);         color: var(--color-text); }

/* — tableaux — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  vertical-align: top;
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
/* Ligne désignée par une ancre — on arrive ici depuis une pastille de l'agenda.
   La marge de défilement la dégage de l'entête collée en haut, qui la couvrirait
   sinon exactement. */
.table tbody tr:target { scroll-margin-top: 110px; }
.table tbody tr:target > td { background: var(--color-accent-100); }

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


/* ==========================================================================
   5. Animations
   ========================================================================== */

@keyframes entreePage  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes apparait    { from { opacity: 0; } to { opacity: 1; } }
@keyframes glisseBas   { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes glisseGauche{ from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes glisseDroite{ from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

/* Ronds du logo qui dérivent en fond */
@keyframes flotteA   { 0%, 100% { transform: translate(0, 0); }            50% { transform: translate(10px, -22px); } }
@keyframes flotteB   { 0%, 100% { transform: translate(0, 0); }            50% { transform: translate(-14px, 16px); } }
@keyframes flotteC   { 0%, 100% { transform: translate(0, 0); }            50% { transform: translate(8px, 18px); } }
@keyframes flotteXL1 { 0%, 100% { transform: translate(0, 0) scale(1); }   50% { transform: translate(26px, -44px) scale(1.05); } }
@keyframes flotteXL2 { 0%, 100% { transform: translate(0, 0) scale(1); }   50% { transform: translate(-34px, 32px) scale(.94); } }
@keyframes flotteXL3 { 0%, 100% { transform: translate(0, 0) scale(1); }   50% { transform: translate(22px, 40px) scale(1.06); } }

@keyframes tourne    { to { transform: rotate(360deg); } }
@keyframes defile    { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes battement { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }

.anime-page { animation: entreePage .28s ease both; }

/* L'entrée de page glisse : elle anime `transform`, et `both` la laisse en
   vigueur indéfiniment — la valeur finale est la matrice identité, pas `none`.
   Or un `transform`, même identité, fait de l'élément le bloc conteneur de ses
   descendants en `position: fixed` : la barre « Continuer » se retrouverait
   collée au bas du DOCUMENT au lieu du bas de l'ÉCRAN.
   Là où cette barre existe, la page se contente donc d'apparaître. Sur grand
   écran, où la barre reste dans le fil, le glissement est rétabli. */
.anime-page:has(.tunnel-action) { animation-name: apparait; }


/* ==========================================================================
   6. En-tête et navigation
   ========================================================================== */

/* La barre est hors de la coque : son fond traverse toute la largeur de la
   fenêtre, tandis que son contenu reste aligné sur celui des pages grâce au
   conteneur intérieur, plafonné à la même largeur que la coque. */
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg);
}

.entete-interieur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.marque {
  position: relative;
  margin-right: auto;
  text-decoration: none;
  color: inherit;
  line-height: 1;
}
.marque:hover { color: inherit; }

.marque-nom,
.marque-baseline {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  font-family: var(--font-marque);
  letter-spacing: .01em;
}
.marque-nom { font-weight: 700; font-size: 38px; }
.marque-baseline {
  font-family: var(--font-baseline);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-accent-700);
  margin-top: 2px;
}

/* Les trois ronds du logo, en filigrane derrière le nom */
.marque-ronds {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 184px;
  height: 52px;
  pointer-events: none;
  z-index: 0;
  opacity: .2;
}
.marque-ronds span { position: absolute; border-radius: 999px; display: block; }
.rond-vert      { top: 6px; left: 0;    width: 44px; height: 44px; background: var(--vert);      animation: flotteA 9s ease-in-out infinite; }
.rond-jaune     { top: 0;   left: 38px; width: 26px; height: 26px; background: var(--jaune-anis); animation: flotteB 7.5s ease-in-out infinite .5s; }
.rond-turquoise {
  top: 4px; left: 56px; width: 48px; height: 48px;
  background: var(--turquoise);
  display: flex !important;
  align-items: center;
  justify-content: center;
  animation: flotteC 11s ease-in-out infinite 1.1s;
}
.rond-turquoise > span {
  position: static !important;
  width: 29px; height: 29px;
  background: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.rond-turquoise > span > span {
  position: static !important;
  width: 18px; height: 18px;
  background: var(--bleu-nuit);
}

/* Navigation bureau — masquée sur mobile */
.nav-bureau { display: none; }

.bouton-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.bouton-menu .barres { display: flex; flex-direction: column; gap: 3px; width: 15px; }
.bouton-menu .barres span { height: 2px; border-radius: 2px; background: currentColor; display: block; }

/* Même découpage que la barre : le fond traverse la fenêtre, le contenu se
   recale sur la coque. */
.nav-mobile {
  position: sticky;
  top: 72px;
  z-index: 19;
  background: var(--color-bg);
  animation: glisseBas .2s ease both;
}
.nav-mobile-interieur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4) var(--space-4);
}
/* `:not(.btn)` : sans cela, ces règles — plus spécifiques que `.btn-primary` —
   repeignaient le bouton « Rendez-vous » du menu en simple ligne de liste. */
.nav-mobile a:not(.btn):not(.lien-reseau) {
  display: block;
  padding: 13px 16px;
  margin-bottom: 6px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
}
.nav-mobile a[aria-current="page"]:not(.btn):not(.lien-reseau) {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}

/* Les réseaux ferment le menu déroulant : les mêmes pastilles qu'en pied de
   page, exclues plus haut des styles de ligne de menu. */
.nav-mobile-reseaux {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: var(--space-3);
}

/* Bouton flottant « Rendez-vous » de l'accueil */
.bouton-flottant {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 460px;
  z-index: 18;
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--space-4) var(--space-4);
  pointer-events: none;
}
.bouton-flottant a {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 6px 20px rgba(34, 65, 90, .22);
  transition: background var(--transition), transform var(--transition);
}
.bouton-flottant a:hover { background: var(--color-accent-600); color: #fff; transform: translateY(-2px); }


/* ==========================================================================
   7. Grille des blocs
   ========================================================================== */

.contenu-page {
  flex: 1;
  padding: var(--space-4) var(--space-4) var(--space-8);
  position: relative;
}

.blocs > .bloc {
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-4);
}
.blocs > .bloc-etiquette,
.blocs > .bloc-bouton { margin-bottom: var(--space-2); }

/* Ronds géants dérivant en fond d'accueil */
/* Deux couches. L'extérieure occupe toute la largeur de la fenêtre et rogne à
   son bord : le décor ne peut plus élargir la page — c'était ce débordement qui
   faisait défiler le téléphone de côté et coupait le bouton flottant.
   L'intérieure s'accroche au bord droit de la coque et déborde de 96 px dans la
   marge : sur grand écran le décor va donc jusque dans le blanc, comme prévu,
   et sur petit écran il est rogné au bord de l'écran plutôt que de le dépasser.

   `--barre-defilement` est mesurée par assets/js/site.js : `100vw` compte la
   barre de défilement, qu'il faut retrancher sous peine de déborder de sa
   largeur. Sans JavaScript elle vaut zéro — exact sur mobile, où la barre est
   en surimpression, et rattrapé ailleurs par le rognage du `body`. */
.ronds-fond {
  position: absolute;
  top: 60px;
  left: 50%;
  width: calc(100vw - var(--barre-defilement));
  transform: translateX(-50%);
  height: 470px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ronds-fond-couche {
  position: absolute;
  top: 0;
  right: calc((100% - min(100%, var(--largeur-max))) / 2 - 96px);
  width: 470px;
  height: 470px;
  display: block;
}
.ronds-fond span { position: absolute; border-radius: 999px; display: block; }
.ronds-fond .xl-vert      { top: 96px;  left: 0;     width: 196px; height: 196px; background: var(--vert);       opacity: .2;  animation: flotteXL1 13s ease-in-out infinite; }
.ronds-fond .xl-jaune     { top: 0;     left: 158px; width: 124px; height: 124px; background: var(--jaune-anis); opacity: .34; animation: flotteXL2 10s ease-in-out infinite .8s; }
.ronds-fond .xl-turquoise {
  top: 132px; left: 180px; width: 284px; height: 284px;
  background: var(--turquoise);
  opacity: .2;
  display: flex !important;
  align-items: center;
  justify-content: center;
  animation: flotteXL3 16s ease-in-out infinite 1.4s;
}
.ronds-fond .xl-turquoise > span {
  position: static !important;
  width: 174px; height: 174px;
  background: var(--color-bg);
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.ronds-fond .xl-turquoise > span > span {
  position: static !important;
  width: 110px; height: 110px;
  background: var(--bleu-nuit);
  opacity: .55;
}


/* ==========================================================================
   8. Blocs de contenu
   ========================================================================== */

.bloc-titre h1 { font-size: var(--fs-titre); line-height: 1.18; margin: 0; }
.bloc-soustitre h2 { font-size: var(--fs-soustitre); line-height: 1.25; margin: 0; }
.bloc-texte p { font-size: var(--fs-texte); line-height: 1.7; margin: 0; }

.encadre {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.encadre-jaune { background: var(--jaune-anis); }
.encadre h3 { font-size: var(--fs-soustitre); line-height: 1.25; margin: 0 0 var(--space-2); }
.encadre p  { font-size: var(--fs-bloc); line-height: 1.6; margin: 0; }

.liste-points h2 { font-size: var(--fs-soustitre); margin: 0 0 var(--space-2); }
.point {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--fs-bloc);
  line-height: 1.6;
}
.point::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-accent-2);
  margin-top: 9px;
}

.bloc-numero {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  height: 100%;
}
.bloc-numero-entete {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.bloc-numero-pastille {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
}
.bloc-numero h2 { font-size: var(--fs-soustitre); margin: 0; }
.bloc-numero > p { font-size: var(--fs-bloc); line-height: 1.65; margin: 0 0 var(--space-2); }

/* Images */
.cadre-image {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-accent-100);
}
.cadre-image img { width: 100%; height: 100%; object-fit: cover; }

/* Emplacement d'image vide : la consigne de dépôt s'affiche à la place */
.image-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-accent-800);
  background:
    repeating-linear-gradient(45deg,
      transparent, transparent 12px,
      color-mix(in srgb, var(--color-accent) 8%, transparent) 12px,
      color-mix(in srgb, var(--color-accent) 8%, transparent) 24px);
  height: 100%;
}

.bloc-logo { display: flex; justify-content: center; }
.bloc-logo img { width: 190px; height: auto; }

/* Accordéon */
.accordeon h2 { font-size: var(--fs-soustitre); margin: 0 0 var(--space-3); }
.accordeon-item {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  overflow: hidden;
}
.accordeon-item summary {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: 14px 16px;
  min-height: 56px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-question);
  color: var(--color-text);
  list-style: none;
}
.accordeon-item summary::-webkit-details-marker { display: none; }
.accordeon-item summary::after {
  content: "+";
  color: var(--color-accent);
  font-size: 20px;
  margin-left: auto;
}
.accordeon-item[open] summary::after { content: "–"; }
.accordeon-item .reponse {
  font-size: var(--fs-bloc);
  line-height: 1.65;
  padding: 0 16px 16px;
  margin: 0;
  animation: apparait .2s ease both;
}
.accordeon-visuel { display: flex; flex-direction: column; gap: var(--space-4); }
.accordeon-visuel .cadre-image { aspect-ratio: 4 / 5; }

/* Infos pratiques et coordonnées */
.carte-infos {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  height: 100%;
}
.carte-infos h3 { font-size: 20px; margin: 0 0 var(--space-2); }
.carte-infos p  { font-size: 17px; line-height: 1.5; }

/* « Nous trouver » : le visuel facultatif se glisse entre le titre et
   l'adresse, aux angles arrondis comme la carte qui le porte. */
.carte-adresse .cadre-image {
  margin: 0 0 var(--space-3);
  border-radius: var(--radius-md);
}
.carte-adresse .adresse-postale { font-weight: 600; margin: 0; }
.carte-adresse .adresse-acces {
  margin: var(--space-2) 0 0;
  font-size: 15px;
  color: var(--color-neutral-700);
}
.ligne-horaire {
  display: flex;
  gap: var(--space-3);
  padding: 5px 0;
  font-size: 16px;
}
.ligne-horaire .jour { width: 92px; font-weight: 600; flex: 0 0 auto; }
.ligne-horaire.ferme .heures { color: var(--color-neutral-600); }
.annonce-fermeture {
  margin: var(--space-3) 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-800);
  font-size: 15px;
  line-height: 1.5;
}


/* ==========================================================================
   9. Bloc réseaux sociaux
   ========================================================================== */

.reseaux {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
}
.reseaux-deco { position: absolute; border-radius: 999px; pointer-events: none; }
.reseaux-deco-1 { top: -90px;  left: -70px;  width: 280px; height: 280px; background: var(--turquoise);  opacity: .14; animation: flotteXL1 15s ease-in-out infinite; }
.reseaux-deco-2 { bottom: -120px; right: -60px; width: 320px; height: 320px; background: var(--vert);    opacity: .13; animation: flotteXL3 19s ease-in-out infinite 1.2s; }
.reseaux-deco-3 { top: 52%; left: 64%; width: 90px; height: 90px; background: var(--jaune-anis);         opacity: .26; animation: flotteXL2 12s ease-in-out infinite .7s; }
.reseaux-deco-4 {
  top: -140px; right: 14%; width: 300px; height: 300px;
  background: conic-gradient(from 0deg, var(--turquoise), var(--vert), var(--jaune-anis), var(--turquoise));
  opacity: .1;
  animation: tourne 26s linear infinite;
}

/* Bandeau défilant. Deux pistes identiques se suivent : quand la première a
   défilé de toute sa largeur, la seconde est exactement à sa place, et la
   boucle est invisible. */
.ruban {
  position: relative;
  z-index: 1;
  display: flex;
  overflow: hidden;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-divider);
}
.ruban-piste {
  display: flex;
  flex: 0 0 auto;
  animation: defile 26s linear infinite;
}
.ruban-groupe {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  flex: 0 0 auto;
}
.ruban-mot {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: .02em;
  color: var(--color-accent-800);
  white-space: nowrap;
}
.ruban-mot-creux {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-accent);
}
.ruban-pastille { width: 14px; height: 14px; border-radius: 999px; flex: 0 0 auto; }

.reseaux-interieur {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
}
.reseaux-direct {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-accent-800);
}
.reseaux-direct .puce {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--color-accent-2);
  animation: battement 1.8s ease-in-out infinite;
}
.reseaux-texte h2 {
  font-size: calc(var(--fs-soustitre) * 1.2);
  line-height: 1.1;
  margin: var(--space-3) 0 10px;
}
.reseaux-texte p { font-size: var(--fs-bloc); line-height: 1.6; margin: 0; max-width: 40ch; }

.reseaux-cartes { display: flex; flex-direction: column; gap: 14px; }
.reseau-carte {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease;
}
.reseau-carte::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 130px;
  height: 130px;
  border-radius: 999px;
}
/* Le rond décoratif est un ::after : il vient après les enfants dans l'ordre
   du document, et se peindrait donc par-dessus eux. Sur mobile la carte est
   étroite, le rond atteint le texte et le recouvre. Un cran de z-index remet
   le contenu au premier plan. */
.reseau-carte > * { position: relative; z-index: 1; }
.reseau-nom {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
}
.reseau-detail { display: block; font-size: 14px; margin-top: 3px; color: var(--color-neutral-700); }
.reseau-pastille,
.reseau-fleche {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
}
.reseau-pastille { width: 56px; height: 56px; }
.reseau-fleche   { width: 46px; height: 46px; }

.reseau-facebook { color: #1b5fb0; }
.reseau-facebook::after { background: #e7effb; }
.reseau-facebook:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(24, 119, 242, .2); color: #1b5fb0; }
.reseau-facebook .reseau-pastille,
.reseau-facebook .reseau-fleche { background: #1877f2; }

.reseau-instagram { color: #a8225f; }
.reseau-instagram::after { background: #fbe9f1; }
.reseau-instagram:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(238, 42, 123, .2); color: #a8225f; }
.reseau-instagram .reseau-pastille,
.reseau-instagram .reseau-fleche { background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 52%, #6228d7 100%); }


/* ==========================================================================
   10. Carrousel Polaroid
   ========================================================================== */

.carrousel h2 { font-size: var(--fs-soustitre); margin: 0 0 var(--space-3); }

.carrousel-piste {
  display: flex;
  gap: 20px;
  justify-content: safe center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  touch-action: pan-x;
  padding: 4px var(--space-4) 12px;
  margin: 0 calc(var(--space-4) * -1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carrousel-piste::-webkit-scrollbar { display: none; }

.polaroid {
  flex: 0 0 auto;
  width: 320px;
  max-width: 78vw;
  margin: 0;
  scroll-snap-align: center;
  background: #fff;
  border-radius: 6px;
  padding: 18px 18px 0;
  box-shadow: 0 2px 10px rgba(34, 65, 90, .14);
  transition: transform .25s ease;
}
.polaroid:nth-child(4n+1) { transform: rotate(-2deg); }
.polaroid:nth-child(4n+2) { transform: rotate(1.5deg); }
.polaroid:nth-child(4n+3) { transform: rotate(-1deg); }
.polaroid:nth-child(4n+4) { transform: rotate(2deg); }
.polaroid:hover { transform: rotate(0deg) translateY(-4px); }

.polaroid-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-surface);
  touch-action: pan-x;
}
.polaroid-photo img { width: 100%; height: 100%; object-fit: cover; }

.polaroid-prix {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-accent-700);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.polaroid-prix.solde { background: var(--color-accent-2-800); }
.polaroid-prix .barre { text-decoration: line-through; opacity: .9; font-weight: 600; }

.polaroid-remise {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--jaune-anis);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
}

.polaroid figcaption {
  padding: 16px 2px 24px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--color-text);
}

.carrousel-puces {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
}
/* Le script masque les puces quand tout tient à l'écran, avec l'attribut
   `hidden`. Sans cette ligne, le `display: flex` ci-dessus — une règle
   d'auteur — l'emporte sur celle du navigateur et la rangée restait affichée :
   un point solitaire sous une galerie qui ne défile pas. */
.carrousel-puces[hidden] { display: none; }
.carrousel-puces button {
  position: relative;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-neutral-300);
  cursor: pointer;
  transition: background .2s ease, width .2s ease, height .2s ease;
}
/* Une puce de 7 px se vise mal au doigt : la zone sensible fait 23 px sans
   que le point grossisse. */
.carrousel-puces button::before { content: ""; position: absolute; inset: -8px; }
.carrousel-puces button.active { width: 10px; height: 10px; background: var(--color-accent); }
.carrousel-aide { font-size: 13px; margin: var(--space-2) 0 0; text-align: center; }


/* ==========================================================================
   11. Pied de page
   ========================================================================== */

.pied {
  margin-top: var(--space-4);
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* Logo, nom et baseline forment un groupe : le logo garde ses proportions,
   seule sa hauteur est réglée dans l'administration. */
.pied-marque { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pied-logo { width: auto; max-width: 220px; display: block; border-radius: var(--radius-sm); }
.pied-textes { display: flex; flex-direction: column; gap: 2px; }
.pied-nom { font-family: var(--font-heading); font-weight: 700; font-size: 18px; }
.pied-baseline {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-neutral-700);
}
.pied-liens {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.pied-liens a { font-size: 14px; }
/* Les pastilles des réseaux ferment la rangée. Le petit écart supplémentaire
   les détache des liens en toutes lettres : deux groupes, pas une file. */
.pied-reseaux { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; }

/* Pastilles des réseaux — même forme en pied de page et en navigation, une
   seule fonction PHP les produit. Le variant `-nav` ne change que la taille. */
.lien-reseau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  transition: background var(--transition), transform var(--transition);
}
.lien-reseau-facebook  { background: #e7effb; color: #1877f2; }
.lien-reseau-facebook:hover  { background: #d3e3fa; color: #1877f2; transform: translateY(-1px); }
.lien-reseau-instagram { background: #fbe9f1; color: #c22a6d; }
.lien-reseau-instagram:hover { background: #f7d7e5; color: #c22a6d; transform: translateY(-1px); }

/* Sa marge basse de paragraphe la décalerait vers le haut sur une rangée
   centrée verticalement — et elle n'a plus rien sous elle. */
.pied-mention { font-size: 11px; font-style: italic; margin: 0; text-align: center; }


/* ==========================================================================
   12. Parcours de rendez-vous
   ========================================================================== */

.tunnel { flex: 1; padding: var(--space-4) var(--space-4) var(--space-8); }
.tunnel h1 { font-size: 28px; line-height: 1.2; }

/* Bandeau de l'aperçu réservé à l'administration. Rayé, jaune anis : il ne
   doit jamais être pris pour une partie du site. */
.bandeau-apercu {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: var(--space-4);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(45deg,
      var(--jaune-anis) 0 12px, #e6eb52 12px 24px);
  color: var(--bleu-nuit);
  font-size: 14px;
  line-height: 1.5;
}
.bandeau-apercu strong { font-family: var(--font-heading); font-size: 15px; }
.bandeau-apercu span { flex: 1 1 260px; }
.bandeau-apercu a { color: var(--bleu-nuit); font-weight: 700; white-space: nowrap; }

.jauge-etapes { display: flex; gap: 6px; margin-bottom: var(--space-4); }
.jauge-etapes span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--color-neutral-200);
  transition: background .3s ease;
}
.jauge-etapes span.faite { background: var(--color-accent); }

/* Rappel du dépôt choisi */
/* Le rappel du dépôt en cours de saisie, sur le vert anis de la marque — la
   même couleur que les encadrés mis en avant sur les pages. Les variables du
   repli sont posées ici : « + d'info » y prend l'encre et le voile du fond
   anis au lieu de ceux, turquoise, de la liste des campagnes. */
.rappel {
  --encre-campagne: var(--color-text);
  --voile-campagne: rgba(0, 0, 0, .08);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--jaune-anis);
  color: var(--color-text);
  animation: apparait .2s ease both;
}
.rappel-nombre {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  /* Le turquoise de marque vibrerait sur l'anis : la pastille s'inverse en
     bleu nuit, la couleur du texte, et se lit de loin. */
  background: var(--color-text);
  color: var(--jaune-anis);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
}
.rappel-corps { flex: 1; min-width: 180px; }
.rappel-titre {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-accent-2-900);
}
.rappel-campagnes {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-text);
  margin-top: 2px;
}
.rappel-creneau { display: block; font-size: 14px; color: var(--color-text); opacity: .8; margin-top: 2px; }

/* Ce que la campagne dit d'elle-même, repris sous le rappel. La bande occupe
   toute la largeur : elle se place sous la ligne du haut, pas à côté. */
.rappel-details {
  flex-basis: 100%;
  display: grid;
  gap: var(--space-2);
  margin-top: 4px;
}
.rappel-campagne-nom {
  margin: 0 0 2px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-accent-2-900);
}
.rappel .campagne-resume { margin: 0; padding: 0; font-size: 14px; color: var(--color-text); opacity: .85; }
/* Dans une carte, le repli est un pied de ligne bordé, aligné sur le bord.
   Ici il suit le texte : ni filet, ni retrait. */
.rappel .campagne-info { border-top: 0; margin-top: 2px; }
.rappel .campagne-info summary { padding: 4px 8px; border-radius: 999px; margin-left: -8px; }
.rappel .campagne-info-texte {
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-top: 4px;
}

/* Étape 1 — choix des campagnes

   Une campagne par ligne : visuel à gauche, nom et période au milieu, coche à
   droite. Le détail se replie sous la ligne, derrière « + d'info » — c'est ce
   qui permet à la liste de rester d'aplomb, qu'une campagne ait trois lignes de
   description ou vingt. */
.campagnes { display: flex; flex-direction: column; gap: 10px; }

.campagne-carte {
  /* Le fond et l'encre viennent d'un attribut `style` quand la campagne a sa
     couleur à elle ; sinon ce sont les valeurs de repli qui s'appliquent. */
  background: var(--fond-campagne, var(--color-surface));
  color: var(--encre-campagne, var(--color-text));
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Le visuel, le nom et la coche sont dans un même <label> : toute la ligne
   coche la campagne, et le tout réagit ensemble au survol. */
.campagne-cible {
  display: flex;
  align-items: stretch;
  min-height: 76px;
  cursor: pointer;
  transition: background var(--transition);
}
/* Sur un fond coloré, le survol et la coche se marquent d'un voile qui fonce ou
   éclaire selon la couleur : une teinte fixe disparaîtrait sur la moitié des
   fonds possibles. */
.campagne-cible:hover { background: var(--voile-campagne, var(--color-accent-100)); }
/* Une campagne cochée se voit sur toute la ligne, pas seulement sur la coche. */
.campagne-carte:has(input:checked) .campagne-cible {
  background: var(--voile-campagne, var(--color-accent-100));
}

.campagne-vignette {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  align-self: stretch;
  overflow: hidden;
  /* Le fond ne se voit que le temps du chargement de l'image, ou derrière ses
     parties transparentes. Un voile plutôt qu'une teinte fixe : il suit la
     couleur de la campagne au lieu de jurer avec. */
  background: var(--voile-campagne, var(--color-accent-100));
}
/* L'image est détachée du flux et remplit la vignette. Laissée dans le flux,
   c'est elle qui dicterait la hauteur de la ligne : une photo haute ferait une
   ligne haute, et deux campagnes voisines n'auraient plus la même allure. */
.campagne-vignette img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.campagne-choix {
  flex: 1;
  min-width: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px;
  color: inherit;
  font-family: var(--font-body);
}
.campagne-nom { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 17px; }
.campagne-detail { display: block; font-size: 13px; opacity: .75; margin-top: 2px; }

.campagne-coche {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.campagne-coche input { position: absolute; opacity: 0; width: 0; height: 0; }
.campagne-coche .marque-coche {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 2px solid var(--color-neutral-400);
  /* Blanc, et non le fond du site : la marque doit se détacher de n'importe
     quelle couleur de campagne. */
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-accent-800);
}
.campagne-carte:has(input:checked) .campagne-coche { background: var(--color-accent); }
.campagne-carte:has(input:checked) .marque-coche {
  border-color: var(--color-bg);
  background: var(--color-bg);
}
.campagne-carte:has(input:checked) .marque-coche::after { content: "✓"; }
.campagne-coche:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -4px; }

/* La description, lue sans clic sous la ligne. Elle reprend le retrait du nom
   de la campagne : sur une carte sans vignette, les deux commencent au même
   endroit. */
.campagne-resume {
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin: 10px 0 0;
  padding: 0 16px;
}
.campagne-carte:has(.campagne-info) .campagne-resume { margin-bottom: 10px; }

/* « + d'info » — le détail de ce qui est attendu, replié sous la ligne.
   Hors du <label> : l'ouvrir ne doit pas cocher la campagne. */
.campagne-info { border-top: 1px solid var(--voile-campagne, var(--color-bg)); }
.campagne-info summary {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--encre-campagne, var(--color-accent-800));
  cursor: pointer;
  list-style: none;
  transition: background var(--transition);
}
/* Le triangle natif du <details> ferait doublon avec le + et le −. */
.campagne-info summary::-webkit-details-marker { display: none; }
.campagne-info summary:hover { background: var(--voile-campagne, var(--color-accent-100)); }
.campagne-info summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -3px; }
.campagne-info .campagne-info-moins,
.campagne-info[open] .campagne-info-plus { display: none; }
.campagne-info[open] .campagne-info-moins { display: inline; }
.campagne-info-texte {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  padding: 12px 16px 14px;
}
.campagne-info-texte p { margin: 0 0 8px; }
.campagne-info-texte p:last-child { margin-bottom: 0; }

/* Barre d'action de l'étape 1, posée au bas de l'écran sur téléphone.
   La liste des campagnes peut être longue : sans cette barre, il faudrait la
   dérouler jusqu'au bout pour trouver « Continuer ». Sur grand écran, la barre
   redevient un bouton ordinaire dans le fil de la page. */
.tunnel-action {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 10px var(--space-4) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--color-bg);
  box-shadow: 0 -6px 20px rgba(34, 65, 90, .12);
}
.tunnel-action .btn { margin-top: 0; }
/* La réserve est prise sur le corps entier, après le pied de page : la poser
   sur la seule liste des campagnes ne ferait que repousser le pied, dont le bas
   resterait caché sous la barre une fois la page déroulée. */
body:has(.tunnel-action) { padding-bottom: 86px; }

/* Étape 2 — calendrier et horaires */
.calendrier {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.calendrier-entete {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.calendrier-mois {
  flex: 1;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
}
.calendrier-fleche {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--color-bg);
  cursor: pointer;
  font-size: 18px;
  color: var(--color-accent-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.calendrier-fleche[aria-disabled="true"] { opacity: .35; pointer-events: none; }

.calendrier-jours,
.calendrier-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendrier-jours { margin-bottom: 6px; }
.calendrier-jours span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-neutral-600);
  text-transform: uppercase;
}
.calendrier-case {
  aspect-ratio: 1;
  min-height: 42px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-neutral-600);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background var(--transition);
}
.calendrier-case.vide { visibility: hidden; }
.calendrier-case.libre {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  cursor: pointer;
}
.calendrier-case.libre:hover { background: var(--color-accent-200); color: var(--color-accent-900); }
.calendrier-case.complet { opacity: .35; cursor: not-allowed; }
.calendrier-case.choisi {
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
}

.calendrier-legende {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: 12px;
  color: var(--color-neutral-700);
  flex-wrap: wrap;
}
.calendrier-legende span { display: flex; align-items: center; gap: 6px; }
.calendrier-legende i { width: 12px; height: 12px; border-radius: 4px; display: block; }
.legende-libre   { background: var(--color-accent-100); }
.legende-complet { background: var(--color-neutral-200); }

.heures { display: flex; flex-wrap: wrap; gap: 8px; }
.heure {
  min-height: 46px;
  min-width: 82px;
  flex: 1 0 auto;
  padding: 0 14px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.heure:hover:not(:disabled) { background: var(--color-accent-100); }
.heure:disabled { opacity: .3; cursor: not-allowed; }
.heure:has(input:checked),
.heure.choisi { background: var(--color-accent); color: #fff; }
.heure input { position: absolute; opacity: 0; width: 0; height: 0; }
.heure:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.retour-jour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-accent-800);
  text-decoration: none;
}

/* Étape 4 — confirmation */
.coche-succes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-size: 26px;
  font-weight: 700;
}
.carte-agenda {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}
.carte-agenda h3 { font-size: 18px; margin: 0 0 var(--space-1); }
.carte-agenda .liens { display: flex; flex-direction: column; gap: 8px; }


/* ==========================================================================
   13. Administration
   ========================================================================== */

.admin {
  background: var(--color-bg);
  min-height: 100vh;
  /* Hauteur de l'entête collée en haut — bouton de 40 px et son cadre. Ce qui
     doit se caler juste dessous s'y réfère plutôt que de la redire. */
  --entete-admin: 70px;
  /* Largeur utile de l'administration, plus large que les 1440 px du site
     public : ici il n'y a pas de texte à lire au long, mais des tableaux, des
     agendas et des grilles de réglages qui gagnent à s'étaler. Sur un écran de
     bureau courant (1920 px) il reste 160 px de marge de chaque côté. */
  --largeur-admin: 1600px;
  /* Marge minimale quand la fenêtre est plus étroite que cette largeur : le
     contenu ne doit jamais coller au bord. Sur mobile, l'espacement habituel. */
  --gouttiere-admin: var(--space-4);
}
/* Sur un portable — 1366 px, la fenêtre est déjà plus étroite que la largeur
   utile — la gouttière minimale prend le relais et fait tout l'écart : 20 px
   serreraient trop, on double. */
@media (min-width: 1000px) {
  .admin { --gouttiere-admin: var(--space-8); }
}

/* Entête, onglets et corps partagent la même gouttière : les fonds restent
   pleine largeur — l'entête turquoise et la barre d'onglets touchent les bords
   de la fenêtre — mais leurs contenus s'alignent sur une seule et même colonne.
   Centrer le corps à part, comme avant, décalait le titre du tableau par
   rapport au nom du site juste au-dessus. */
.admin-entete,
.admin-onglets,
.admin-corps {
  padding-inline: max(var(--gouttiere-admin), (100% - var(--largeur-admin)) / 2);
}

/* La barre de défilement apparaît sur les écrans longs et disparaît sur les
   courts ; comme le corps est centré, tout le contenu sautait alors de sept
   pixels d'un onglet à l'autre. La gouttière est réservée en permanence : la
   page ne bouge plus, qu'elle défile ou non. */
html:has(.admin) { scrollbar-gutter: stable; }

.admin-entete {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: var(--space-3);
  background: var(--color-accent-800);
  color: #fff;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.admin-entete .titre {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  margin-right: auto;
}
.admin-entete a, .admin-entete button {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.admin-entete a:hover, .admin-entete button:hover { background: rgba(255, 255, 255, .28); color: #fff; }

.admin-onglets {
  display: flex;
  gap: 6px;
  padding-block: var(--space-3);
  flex-wrap: wrap;
  background: var(--color-surface);
}
.admin-onglets a {
  padding: 0 16px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-neutral-800);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background var(--transition);
}
.admin-onglets a:hover { background: var(--color-accent-100); color: var(--color-accent-800); }
.admin-onglets a[aria-current="page"] { background: var(--color-accent); color: #fff; }

/* Nombre de messages non lus, posé dans l'onglet Messages. Turquoise sur la
   pastille blanche de l'onglet au repos ; l'onglet courant est turquoise plein,
   les deux couleurs s'y échangent pour rester lisibles. */
.pastille-onglet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: 12px;
  line-height: 1;
}
.admin-onglets a[aria-current="page"] .pastille-onglet {
  background: #fff;
  color: var(--color-accent-800);
}

.admin-corps { padding-block: var(--space-5) 80px; }
.admin-corps h2 { font-size: 26px; margin: 0 0 4px; }

.sous-onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.sous-onglets a, .sous-onglets button {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-neutral-800);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.sous-onglets a[aria-current="true"],
.sous-onglets .actif { background: var(--color-accent); color: #fff; }

/* Écran des campagnes : le parc à gauche, le paramétrage de celle qu'on
   consulte à droite. La colonne de gauche est fixe — largeur fixe, et collée en
   haut : les réglages de droite font plusieurs écrans de long, la liste doit
   rester sous la main sans avoir à remonter. */
.ecran-campagnes {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;   /* sans quoi la colonne s'étire et ne colle plus */
}
/* Sous 900 px la colonne repasse au-dessus : deux colonnes de 130 px ne
   rendraient service à personne. Elle ne colle plus non plus — sur un écran
   étroit, elle mangerait la moitié de la hauteur utile. */
@media (max-width: 900px) {
  .ecran-campagnes { grid-template-columns: minmax(0, 1fr); }
}

.colonne-campagnes { min-width: 0; }

@media (min-width: 901px) {
  .colonne-campagnes {
    position: sticky;
    top: calc(var(--entete-admin) + var(--space-3));
    /* Avec beaucoup de campagnes, la colonne défile pour elle-même plutôt que
       de déborder sous le bas de l'écran. */
    max-height: calc(100vh - var(--entete-admin) - var(--space-5));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
.entete-colonne {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.entete-colonne h2 { margin: 0 auto 0 0; font-size: 22px; }
.btn-compact { min-height: 38px; padding: 0 14px; font-size: 14px; }

.liste-campagnes { list-style: none; margin: 0 0 var(--space-3); padding: 0; }

/* Une fiche par campagne : le nom sur sa ligne, l'état et les commandes en
   dessous. Empilé plutôt qu'en ligne — un nom de campagne est une phrase, il
   ne tient pas dans ce qui resterait à côté de trois boutons. */
.campagne-ligne {
  position: relative;
  padding: 10px 10px 8px 12px;
  margin-bottom: 6px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-neutral-300);
  background: var(--color-surface);
}
.campagne-ligne .nom {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--color-text);
  text-decoration: none;
}
/* Toute la fiche est cliquable, sauf ce qui porte sa propre action. */
.campagne-ligne .nom::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.campagne-ligne:hover { background: var(--color-accent-100); }

.campagne-ligne .bas {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 4px;
  min-height: 34px;
}
.campagne-ligne .etat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-neutral-700);
}
/* `pastille` et non `point` : `.point` est la puce des listes du site public,
   avec son propre `::before` — la réutiliser ici dessinait deux ronds. */
.campagne-ligne .pastille {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--color-neutral-400);
  flex: 0 0 auto;
}
/* L'état se lit à la couleur du liseré et de la pastille — vert pomme pour ce
   qui est en ligne — mais il est aussi écrit : la couleur seule ne suffit pas. */
.campagne-ligne.etat-en-ligne  { border-left-color: var(--color-accent-2-300); }
.campagne-ligne.etat-en-ligne  .pastille { background: var(--color-accent-2-700); }
.campagne-ligne.etat-programme { border-left-color: var(--jaune-anis); }
.campagne-ligne.etat-programme .pastille { background: var(--jaune-anis); }

/* La campagne consultée : fond plein et liseré turquoise. La sélection et
   l'état de publication portent sur deux propriétés différentes, aucun des deux
   ne masque l'autre. */
.campagne-ligne.courante {
  background: var(--color-accent-200);
  border-left-color: var(--color-accent);
}
.campagne-ligne.courante .nom { color: var(--color-accent-900); }
.campagne-ligne.courante:hover { background: var(--color-accent-200); }

/* Au-dessus du lien qui couvre la fiche, sans quoi les boutons ne recevraient
   jamais le clic. */
.campagne-ligne .actions { position: relative; display: flex; gap: 4px; }
.campagne-ligne .bouton-rond { width: 32px; height: 32px; font-size: 14px; background: var(--color-bg); }
.campagne-ligne .bouton-rond:hover { background: #fff; box-shadow: 0 0 0 1px var(--color-accent-200); }
/* Même code couleur que les suppressions du reste de l'administration. */
.campagne-ligne .bouton-rond.supprimer { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.campagne-ligne .bouton-rond.supprimer:hover { background: var(--color-accent-2-300); box-shadow: none; }

.note-colonne {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-neutral-700);
  margin: 0 0 var(--space-3);
}

.volet-campagne { min-width: 0; }
.bandeau-nom { margin: 0; font-size: 22px; }

/* Un groupe de réglages : une question, ses champs, ses explications. Fond
   blanc et non `--color-surface`, sinon les champs — qui sont de cette
   couleur-là — se fondraient dans leur propre cadre. */
.groupe-reglages {
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.groupe-reglages > h3 { font-size: 19px; margin: 0 0 var(--space-3); }
.groupe-reglages h4 { font-size: 17px; margin: var(--space-4) 0 var(--space-2); }
.groupe-reglages > h3 + h4 { margin-top: 0; }

/* L'explication d'un champ, juste sous lui — jamais en bloc en fin de
   formulaire, où il faut deviner à quoi elle se rapporte. */
.aide-champ {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-neutral-700);
  margin: 6px 0 0;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Agenda des rendez-vous
   -------------------------------------------------------------------------- */

/* Navigation de période : les flèches, le titre, le retour à aujourd'hui, et le
   pas de temps rejeté à droite — on règle rarement le pas, on avance souvent. */
.barre-periode {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.barre-periode .bouton-rond { width: 38px; height: 38px; background: var(--color-surface); }
.titre-periode { font-family: var(--font-heading); font-size: 19px; }

.choix-pas {
  margin-left: auto;
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--color-surface);
}
.choix-pas a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-neutral-800);
  text-decoration: none;
}
.choix-pas a[aria-current="true"] { background: var(--color-accent); color: #fff; }

.agenda {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
}
.agenda-entete,
.agenda-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.agenda-entete { background: var(--color-surface); }
.agenda-entete span {
  padding: 8px 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-neutral-700);
}

.agenda-jour {
  min-height: 112px;
  padding: 6px;
  border-top: 1px solid var(--color-divider);
  border-left: 1px solid var(--color-divider);
}
/* Première colonne : pas de trait à gauche, le cadre s'en charge. Les cases
   vides du début de mois comptent dans la grille, donc dans ce calcul. */
.agenda-jour:nth-child(7n + 1) { border-left: 0; }
.agenda-jour.vide { background: color-mix(in srgb, var(--color-surface) 45%, #fff); }
.agenda-jour.aujourdhui { background: var(--color-accent-100); }
/* En semaine, sept colonnes larges et hautes : chaque rendez-vous a la place de
   dire aussi sa campagne. */
.agenda-semaine .agenda-jour { min-height: 260px; }

.agenda-date { display: flex; align-items: baseline; gap: 6px; margin-bottom: 5px; }
.agenda-date .numero { font-family: var(--font-heading); font-weight: 700; font-size: 14px; }
/* Le nom du jour est déjà en tête de colonne : il ne ressort qu'en dessous de
   700 px, où la grille se déplie en une seule colonne et perd son entête. */
.agenda-date .nom-jour { display: none; font-size: 12px; color: var(--color-neutral-700); }
.agenda-date .compte {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-accent-200);
  color: var(--color-accent-900);
  font-size: 11px;
  font-weight: 700;
}
.agenda-jour.aujourdhui .numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
}

/* Une pastille par rendez-vous, teintée de la couleur de sa campagne quand elle
   en a une — la même que le déposant voit dans le parcours. */
.agenda-rdv {
  display: block;
  margin-bottom: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--teinte, var(--color-accent));
  background: color-mix(in srgb, var(--teinte, var(--color-accent)) 14%, #fff);
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
}
.agenda-rdv:hover { background: color-mix(in srgb, var(--teinte, var(--color-accent)) 28%, #fff); }
.agenda-rdv .agenda-heure { font-weight: 700; margin-right: 4px; }
.agenda-rdv .agenda-campagne { display: none; }
/* En mois, la place manque : une ligne, coupée proprement. */
.agenda-mois .agenda-rdv { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-semaine .agenda-rdv .agenda-qui { display: block; font-weight: 600; }
.agenda-semaine .agenda-rdv .agenda-campagne { display: block; font-size: 11px; color: var(--color-neutral-700); }

/* Sous 700 px, sept colonnes deviennent sept bandes illisibles : la grille se
   déplie en une colonne et ne garde que les jours qui portent un rendez-vous.
   L'agenda devient un ordre du jour, ce qui est la bonne forme sur un
   téléphone. Le compte total, sous la grille, dit s'il n'y a rien du tout. */
@media (max-width: 700px) {
  .agenda-entete { display: none; }
  .agenda-grille { grid-template-columns: minmax(0, 1fr); }
  .agenda-jour { min-height: 0; border-left: 0; }
  .agenda-semaine .agenda-jour { min-height: 0; }
  .agenda-jour.vide,
  .agenda-jour.sans-rdv { display: none; }
  .agenda-date .nom-jour { display: inline; }
  .agenda-mois .agenda-rdv { white-space: normal; }
  .agenda-rdv .agenda-campagne { display: block; font-size: 11px; color: var(--color-neutral-700); }
  .choix-pas { margin-left: 0; }
}

/* Onglets de second niveau : à l'intérieur d'une campagne, quelle partie.
   Volontairement d'une autre forme que les pastilles du premier niveau —
   deux rangées identiques ne se distingueraient pas. */
.onglets-section {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--color-divider);
  margin-bottom: var(--space-4);
}
.onglets-section a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  margin-bottom: -2px;
  border-bottom: 3px solid transparent;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-neutral-700);
  text-decoration: none;
}
.onglets-section a:hover { color: var(--color-accent-800); }
.onglets-section a[aria-current="true"] {
  color: var(--color-accent-900);
  border-bottom-color: var(--color-accent);
}

/* Bandeau d'état d'une campagne : visible quelle que soit la section. */
.bandeau-campagne {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
}
.bandeau-campagne.etat-en-ligne  { background: var(--color-accent-100); }
.bandeau-campagne.etat-programme { background: var(--jaune-anis); }

.bandeau-titre { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.etiquette-etat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
}
.etiquette-etat .pastille {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--color-neutral-400);
  flex: 0 0 auto;
}
.etat-en-ligne .etiquette-etat .pastille  { background: var(--color-accent); }
.etat-programme .etiquette-etat .pastille { background: var(--color-accent-2-800); }

.bandeau-phrase { font-size: 14px; margin: 6px 0 0; max-width: 62ch; }
/* Les chiffres se lisent d'un coup d'œil : séparés par des points médians sur
   une ligne large, empilés dès que la place manque. */
.bandeau-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: var(--space-3) 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent-900);
}
.bandeau-chiffres span + span::before { content: "·"; margin-right: 14px; opacity: .5; }
/* Empilés sur un écran étroit, les points médians deviennent des puces
   orphelines : on les retire et on laisse une ligne par chiffre. */
@media (max-width: 560px) {
  .bandeau-chiffres { flex-direction: column; gap: 4px; }
  .bandeau-chiffres span + span::before { content: none; }
}

.grille-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.chiffre {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.chiffre .label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-neutral-600);
}
.chiffre .valeur {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
}
.chiffre .note { display: block; font-size: 13px; color: var(--color-neutral-700); }

.jauge {
  height: 10px;
  border-radius: 999px;
  background: var(--color-neutral-200);
  overflow: hidden;
  margin-bottom: 6px;
}
.jauge > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent);
  transition: width .4s ease;
}

.carte-admin {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
/* Message encore non lu à l'ouverture de la page. Il est classé lu dans la
   seconde, mais garde son liseré le temps de cette visite : sans lui, rien ne
   distinguerait ce qui vient d'arriver de ce qui traîne depuis trois semaines. */
.carte-admin.message-neuf {
  border-left: 4px solid var(--color-accent);
  padding-left: calc(var(--space-4) - 4px);
}
.ligne-admin {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.ligne-cle-valeur {
  display: flex;
  gap: var(--space-3);
  padding: 5px 0;
  font-size: 15px;
  flex-wrap: wrap;
}
.ligne-cle-valeur .cle { width: 190px; color: var(--color-neutral-700); flex: 0 0 auto; }
.ligne-cle-valeur .valeur { font-weight: 600; }

.grille-deux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--space-5);
}
/* Une rangée de petits champs — une date, un prix, un motif. Plafonnée : sur la
   largeur de l'administration, quatre colonnes en `1fr` donneraient des champs
   de date de 380 px, alors que le `minmax` dit qu'ils se lisent à 160. Les
   endroits qui veulent moins posent leur propre `max-width` en ligne. */
.grille-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  align-items: end;
  max-width: 760px;
}

/* Interrupteur de publication */
.interrupteur {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--color-bg);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
}
.interrupteur .rail {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--color-neutral-400);
  position: relative;
  transition: background .2s ease;
  display: block;
}
.interrupteur .rail::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  transition: left .2s ease;
}
.interrupteur.actif .rail { background: var(--color-accent); }
.interrupteur.actif .rail::after { left: 23px; }

/* Créneaux de l'admin */
.creneau-admin {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.creneau-libre    { background: var(--color-accent-100);   color: var(--color-accent-800); }
.creneau-reserve  { background: var(--color-accent-2-100); color: var(--color-accent-2-800); cursor: not-allowed; }
.creneau-ferme    { background: var(--color-neutral-200);  color: var(--color-neutral-700); }

/* Curseurs de tailles de police */
.reglage-taille {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: 12px;
}
.reglage-taille input[type="range"] {
  width: 100%;
  min-height: 32px;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.reglage-taille .apercu { margin: 10px 0 0; line-height: 1.4; color: var(--color-neutral-800); }

/* Éditeur de blocs */
.bloc-editeur {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.bloc-editeur-entete {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.bloc-editeur-entete .actions { display: flex; gap: 8px; margin-left: auto; }

/* Barre de mise en forme d'un champ de texte.
   Elle n'existe qu'avec JavaScript : sans lui, ses boutons ne feraient rien,
   et les marques se tapent alors au clavier. La classe « js » est posée sur
   la page par assets/js/admin.js. */
.outils-texte { display: none; }
.js .outils-texte {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.outils-texte .outil {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-neutral-800);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.outils-texte .outil:hover { background: var(--color-accent-100); color: var(--color-accent-900); }
.outils-texte .outil[aria-expanded="true"] { background: var(--color-accent); color: #fff; }
.outils-texte .outil mark { background: rgba(216, 222, 41, .55); color: inherit; padding: 0 3px; border-radius: 4px; }
.outils-texte .outil-emoji { font-size: 16px; }

/* Palette d'émojis — une seule par page, que le script déplace sous la barre
   d'outils qui l'appelle. */
.palette-emojis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 3px;
  max-width: 420px;
  padding: 8px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.palette-emojis[hidden] { display: none; }
.palette-emojis .emoji {
  height: 34px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.palette-emojis .emoji:hover { background: var(--color-accent-100); }

/* Aperçu de la mise en forme, sous le champ. Il n'apparaît que si le texte
   porte au moins une marque : sur un paragraphe ordinaire, il ne ferait que
   répéter le champ. */
.apercu-enrichi {
  margin: 8px 0 0;
  padding: 9px 12px;
  border-left: 3px solid var(--color-accent-200);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-bg);
  font-size: 14px;
  line-height: 1.5;
}
.apercu-enrichi[hidden] { display: none; }

/* Largeur d'un bloc sur la grille bureau.
   Une liste de vignettes plutôt qu'une liste déroulante : la barre remplie
   montre la place que le bloc prendra sur sa rangée, ce qu'un « 50 % » écrit
   dans un menu ne dit pas. Les boutons radio sont masqués mais bien là — le
   clavier et les lecteurs d'écran parcourent le groupe normalement. */
.choix-largeur { border: 0; padding: 0; margin: 0 0 var(--space-3); }
.choix-largeur legend {
  padding: 0;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
}
.choix-largeur-options { display: flex; flex-wrap: wrap; gap: 6px; }
.choix-largeur label { cursor: pointer; }
.choix-largeur input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.choix-largeur .vignette {
  display: block;
  width: 74px;
  padding: 9px 9px 7px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  text-align: center;
  transition: background var(--transition), border-color var(--transition);
}
.choix-largeur label:hover .vignette { border-color: var(--color-accent-200); }
.choix-largeur input:checked + .vignette {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
}
.choix-largeur input:focus-visible + .vignette {
  outline: 2px solid var(--color-accent-800);
  outline-offset: 2px;
}

.choix-largeur .jauge {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: var(--color-neutral-200);
  overflow: hidden;
}
.choix-largeur .jauge > span { display: block; height: 100%; background: var(--color-accent); }
/* « Auto » ne fixe aucune largeur : la barre reste hachurée, sans remplissage. */
.choix-largeur .jauge-auto {
  background: repeating-linear-gradient(
    -45deg,
    var(--color-neutral-300) 0 4px,
    var(--color-neutral-100) 4px 8px
  );
}
.choix-largeur .libelle {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-neutral-800);
}
.choix-largeur input:checked + .vignette .libelle { color: var(--color-accent-900); }
.bouton-rond {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--color-bg);
  cursor: pointer;
  font-size: 16px;
  color: var(--color-accent-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bouton-rond:hover { background: var(--color-accent-100); }
.bouton-rond:disabled { opacity: .35; cursor: not-allowed; }
.bouton-rond.supprimer { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }

/* Pièces d'un carrousel : une fiche par pièce, photo à gauche, commandes de
   position à droite. En dessous de 640 px la fiche passe sur une colonne. */
.pieces { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }

.piece {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.piece-vierge {
  background: transparent;
  border: 2px dashed var(--color-neutral-300);
}

.piece-photo {
  width: 110px;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.piece-photo img { width: 100%; height: 100%; object-fit: cover; }
.piece-photo-vide {
  font-size: 12px;
  text-align: center;
  padding: 6px;
  color: var(--color-neutral-600);
}

.piece-champs { min-width: 0; }
.piece-champs .champ:first-child { margin-top: 0; }
.piece-actions { display: flex; flex-direction: column; gap: 6px; }
/* La fiche est blanche comme le fond par défaut des boutons ronds : sans ce
   rappel, les flèches disparaîtraient dans la carte. */
.piece .bouton-rond { background: var(--color-surface); }
.piece .bouton-rond:hover { background: var(--color-accent-100); }
.piece .bouton-rond.supprimer { background: var(--color-accent-2-100); }

@media (max-width: 640px) {
  .piece { grid-template-columns: 1fr; }
  .piece-actions { flex-direction: row; }
}

/* Jours de la semaine retenus par une campagne */
.pastille-jour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.pastille-jour input { width: 18px; height: 18px; accent-color: var(--color-accent); }
.pastille-jour.choisi { background: var(--color-accent-100); color: var(--color-accent-900); }
.pastille-jour small { font-weight: 400; font-size: 12px; opacity: .7; }
/* Jour où la boutique est fermée : montré pour que la semaine reste lisible,
   mais rien à y cocher — aucun créneau ne peut en sortir. */
.pastille-jour.ferme { opacity: .5; cursor: not-allowed; }

.ajout-blocs { display: flex; flex-wrap: wrap; gap: 8px; }
.ajout-blocs button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.ajout-blocs button:hover { background: var(--color-accent-200); }

.admin-connexion {
  padding: var(--space-8) var(--space-4);
  max-width: 400px;
  margin: 0 auto;
  animation: apparait .25s ease both;
}

.barre-repartition {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 5px 0;
}
.barre-repartition .nom { flex: 0 0 175px; font-size: 14px; }
.barre-repartition .piste {
  flex: 1;
  height: 14px;
  background: var(--color-neutral-200);
  border-radius: 999px;
  overflow: hidden;
}
.barre-repartition .piste > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent);
  transition: width .4s ease;
}
.barre-repartition .nombre { width: 28px; text-align: right; font-size: 14px; }

/* Fenêtre d'aperçu du parcours de rendez-vous ------------------------------
   Le parcours est chargé dans un cadre à sa vraie adresse : ce qui s'affiche
   est ce que sert le site, sans reconstitution. */
.dialogue-apercu {
  width: min(1180px, 96vw);
  height: min(880px, 92vh);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-neutral-100);
  overflow: hidden;
}
.dialogue-apercu::backdrop { background: rgba(34, 65, 90, .55); }

.dialogue-barre {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid var(--color-neutral-200);
}
.dialogue-barre strong {
  flex: 1 1 auto;
  font-family: var(--font-heading);
  font-size: 17px;
}
.dialogue-barre .btn { min-height: 38px; padding: 8px 16px; font-size: 14px; }

.dialogue-formats { display: flex; gap: 2px; background: var(--color-surface); border-radius: 999px; padding: 3px; }
.dialogue-formats button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}
.dialogue-formats button[aria-pressed="true"] { background: var(--color-accent); color: #fff; }

.dialogue-cadre { height: calc(100% - 63px); padding: var(--space-3); overflow: auto; }
.dialogue-cadre iframe {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border: 0;
  border-radius: var(--radius-md);
  background: #fff;
}
/* La largeur mobile reproduit un téléphone courant : la mise en page du
   parcours bascule alors sur ses règles mobiles, menu compris. */
.dialogue-apercu[data-largeur="mobile"] .dialogue-cadre iframe { width: 420px; }


/* ==========================================================================
   14. Mise en page bureau (≥ 1000 px)
   ========================================================================== */

@media (min-width: 1000px) {

  .entete-interieur { padding: 22px 40px; gap: 16px; }
  .marque { white-space: nowrap; }
  .marque-nom { font-size: 46px; }
  .marque-baseline { font-size: 24px; }

  .bouton-menu, .nav-mobile { display: none !important; }

  .nav-bureau {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
  }
  /* Les exclusions ne sont pas décoratives : ces règles sont plus spécifiques
     que les couleurs de marque des pastilles — qui perdraient leur bleu et leur
     rose — et que `.btn-primary`, dont le bouton perdrait son texte blanc. */
  .nav-bureau a:not(.lien-reseau):not(.btn) {
    padding: 11px 11px;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    color: var(--color-text);
    white-space: nowrap;
    transition: background var(--transition);
  }
  .nav-bureau a:not(.lien-reseau):not(.btn):hover { background: var(--color-surface); color: var(--color-text); }
  .nav-bureau a[aria-current="page"]:not(.lien-reseau):not(.btn) { background: var(--color-accent-100); color: var(--color-accent-800); }
  .nav-bureau a.btn { display: none; }

  /* L'appel à l'action de la barre : libellé et pictogramme en blanc — le
     pictogramme suit la couleur du texte —, qui passent au vert anis au
     survol. Le fond, lui, garde son turquoise. */
  .nav-bureau a.btn-primary { color: #fff; transition: background var(--transition), color var(--transition); }
  .nav-bureau a.btn-primary:hover { color: var(--jaune-anis); }

  /* Réseaux sociaux dans la barre : mêmes pastilles qu'en pied de page, en
     plus petit, séparées des pages par un filet discret. La barre d'en-tête
     n'a pas une largeur à gaspiller — les pastilles restent modestes tant que
     la fenêtre ne s'élargit pas. */
  .nav-reseaux {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 0 4px;
    padding-left: 6px;
    border-left: 1px solid var(--color-neutral-200);
  }
  .nav-reseaux:empty { display: none; }
  .nav-bureau .lien-reseau-nav { width: 32px; height: 32px; padding: 0; }

  .contenu-page { padding: 48px 64px 88px; }
  .bouton-flottant { display: none; }

  .ronds-fond { top: 20px; height: 640px; }
  .ronds-fond-couche {
    right: calc((100% - min(100%, var(--largeur-max))) / 2 - 60px);
    transform: scale(1.35);
    transform-origin: 100% 0;
  }

  /* Grille éditoriale : chaque type de bloc déclare sa largeur sur 12 colonnes */
  .blocs {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 44px;
    align-items: start;
  }
  .blocs > .bloc { grid-column: span 12; margin-bottom: 30px; }

  .blocs > .bloc-etiquette   { grid-column: span 12; margin-bottom: 8px; }
  .blocs > .bloc-titre       { grid-column: span 7; }
  .blocs > .bloc-titre h1    { max-width: 22ch; }
  .blocs > .bloc-soustitre   { grid-column: span 12; margin-bottom: 10px; }
  .blocs > .bloc-texte       { grid-column: span 6; }
  .blocs > .bloc-texte p     { max-width: 72ch; }
  .blocs > .bloc-image       { grid-column: span 5; }

  /* Une image ne dicte pas la hauteur d'une rangée entière. Sans ce plafond,
     un portrait 3/4 sur cinq colonnes dépasse 700 px et laisse à côté de lui
     une colonne vide de la même hauteur. L'image est recadrée, pas déformée.
     Le visuel d'un accordéon suit la même règle : il accompagne les questions,
     il ne les écrase pas. */
  .blocs > .bloc-image .cadre-image,
  .blocs > .bloc-accordeon .cadre-image { max-height: 420px; }

  /* Un bloc haut — image ou formulaire — occupe deux rangées quand du texte
     le suit : les paragraphes s'empilent alors à côté de lui au lieu d'être
     renvoyés dessous. */
  .blocs > .bloc-image:has(+ .bloc-texte) { grid-row: span 2; }

  /* Photo, titre, paragraphe — l'ouverture de l'accueil. Le paragraphe se range
     sous le titre, dans la colonne de droite, plutôt que sous la photo : les
     trois blocs se lisent alors d'un trait, et la photo n'a plus de texte
     accroché sous elle. La photo prend les deux rangées. */
  .blocs > .bloc-image:has(+ .bloc-titre + .bloc-texte) { grid-row: span 2; }
  .blocs > .bloc-image + .bloc-titre + .bloc-texte { grid-column: span 7; }

  /* La première rangée se règle sur son contenu, et non sur la moitié de la
     hauteur de la photo : sans cela le paragraphe descendrait d'un cran, laissant
     un creux entre le titre et lui. Le surplus de hauteur de la photo tombe donc
     sous le paragraphe, là où il ne se voit pas. */
  .blocs:has(> .bloc-image + .bloc-titre + .bloc-texte) { grid-template-rows: min-content 1fr; }

  /* Deux boutons qui se suivent se rejoignent au milieu de la page : le premier
     finit sur l'axe central, le second en repart. Le couple est ainsi centré,
     quelle que soit la largeur des libellés. Un bouton seul garde ses trois
     colonnes, sous le bloc qu'il conclut. */
  .blocs > .bloc-bouton:has(+ .bloc-bouton) { grid-column: 1 / 7; justify-self: end; }
  .blocs > .bloc-bouton:has(+ .bloc-bouton) + .bloc-bouton { grid-column: 7 / -1; justify-self: start; }

  /* Les blocs qui accompagnent une image se centrent sur la hauteur de leur
     rangée : le peu de place qui reste se répartit au-dessus et au-dessous
     plutôt que de s'accumuler en un seul creux. La chaîne de sélecteurs suit
     l'enchaînement réel — image, puis un ou deux paragraphes, puis parfois un
     bouton. */
  .blocs > .bloc-image + .bloc-texte,
  .blocs > .bloc-image + .bloc-texte + .bloc-texte,
  .blocs > .bloc-image + .bloc-texte + .bloc-bouton,
  .blocs > .bloc-image + .bloc-texte + .bloc-texte + .bloc-bouton {
    align-self: center;
  }
  /* Un encadré garde la hauteur de son texte : étiré sur toute la rangée, il
     étalait un aplat jaune sur trois cents pixels vides à côté des horaires.
     Deux encadrés voisins, eux, s'alignent encore l'un sur l'autre. */
  .blocs > .bloc-encadre     { grid-column: span 6; align-self: start; }
  .blocs > .bloc-encadre:has(+ .bloc-encadre),
  .blocs > .bloc-encadre + .bloc-encadre { align-self: stretch; }
  .blocs > .bloc-encadre:has(+ .bloc-encadre) > div,
  .blocs > .bloc-encadre + .bloc-encadre > div { height: 100%; }

  /* Un encadré posé au-dessus de « Nous trouver », face aux horaires, descend
     jusqu'à lui : la colonne de gauche se lit alors comme deux cartes séparées
     par l'espacement habituel, sans creux au milieu. */
  .blocs > .bloc-encadre:has(+ .bloc-infos + .bloc-adresse) { align-self: stretch; }
  .blocs > .bloc-encadre:has(+ .bloc-infos + .bloc-adresse) > div { height: 100%; }

  .blocs > .bloc-liste,
  .blocs > .bloc-numerote    { grid-column: span 4; align-self: stretch; }
  .blocs > .bloc-numerote > div { height: 100%; }

  .blocs > .bloc-infos,
  .blocs > .bloc-adresse,
  .blocs > .bloc-coordonnees { grid-column: span 6; }
  .blocs > .bloc-infos       { align-self: stretch; }

  /* La colonne des horaires est bien plus haute que l'encadré : en lui donnant
     deux rangées, le bloc « Nous trouver » qui suit remonte sous l'encadré et
     se retrouve en face d'elle, au lieu d'être renvoyé sous toute la rangée. */
  .blocs > .bloc-infos:has(+ .bloc-adresse) { grid-row: span 2; }

  /* « Nous trouver » ferme la colonne de gauche : il s'étire jusqu'au bas des
     horaires pour que les deux colonnes se terminent au même niveau. Quand un
     visuel est déposé, c'est lui qui absorbe la hauteur disponible — les
     proportions choisies dans l'administration donnent son point de départ,
     l'image étant recadrée et jamais déformée. */
  .blocs > .bloc-adresse { align-self: stretch; }
  .blocs > .bloc-adresse .carte-adresse { display: flex; flex-direction: column; }
  .blocs > .bloc-adresse .cadre-image { flex: 1 1 auto; min-height: 160px; }
  .blocs > .bloc-reseaux     { grid-column: span 12; }
  .blocs > .bloc-accordeon   { grid-column: span 8; }
  .blocs > .bloc-accordeon.avec-visuel { grid-column: span 12; }
  .blocs > .bloc-formulaire  { grid-column: span 6; }
  .blocs > .bloc-bouton      { grid-column: span 3; align-self: end; }
  .blocs > .bloc-bouton .btn { max-width: 320px; }
  .blocs > .bloc-carrousel,
  .blocs > .bloc-logo        { grid-column: span 12; }

  /* Un formulaire est bien plus haut que le paragraphe placé à côté de lui :
     sans cela, le bloc suivant — coordonnées ou infos pratiques — serait
     renvoyé sous le formulaire, laissant une grande colonne vide à gauche.
     En lui faisant occuper deux rangées, ce bloc suivant remonte en face de
     lui. La règle ne s'applique que dans ce cas précis. */
  .blocs > .bloc-formulaire:has(+ .bloc-coordonnees),
  .blocs > .bloc-formulaire:has(+ .bloc-infos) { grid-row: span 2; }

  /* Une page bâtie sur des blocs numérotés prend un titre pleine largeur,
     puis trois cartes par rangée. */
  .blocs:has(> .bloc-numerote) > .bloc-titre { grid-column: span 12; }

  /* Un titre suivi d'une image prend toute la largeur : accolé à elle, il
     laisserait sous lui un vide de la hauteur de l'image. L'ordre inverse —
     l'image d'abord, le titre à côté — reste sur sept colonnes : là, les deux
     blocs se font face sans creux. */
  .blocs > .bloc-titre:has(+ .bloc-image) { grid-column: span 12; }

  /* Largeur choisie bloc par bloc dans l'administration. Ces règles ferment la
     section : posées après celles qui précèdent, elles l'emportent sur la
     largeur d'origine du type comme sur les enchaînements devinés plus haut.
     Un bloc à qui on a fixé une largeur reprend aussi une rangée simple — les
     « grid-row: span 2 » ci-dessus servent à rattraper des enchaînements
     automatiques, ils fausseraient une composition voulue.
     Deux blocs qui tiennent ensemble sur douze colonnes — 50 % et 50 %, 33 %
     et 66 % — s'affichent côte à côte ; le suivant qui ne tient plus passe à
     la rangée d'après. En dessous de 1000 px la grille n'existe pas : chaque
     bloc y prend toute la largeur, quelle que soit la valeur choisie. */
  .blocs > .bloc.largeur     { grid-row: auto; }
  .blocs > .bloc.largeur-3   { grid-column: span 3; }
  .blocs > .bloc.largeur-4   { grid-column: span 4; }
  .blocs > .bloc.largeur-6   { grid-column: span 6; }
  .blocs > .bloc.largeur-8   { grid-column: span 8; }
  .blocs > .bloc.largeur-9   { grid-column: span 9; }
  .blocs > .bloc.largeur-12  { grid-column: span 12; }

  /* Une largeur choisie dans l'administration lève les plafonds du type.
     Sans ces trois lignes, un paragraphe posé à 100 % occupait bien toute la
     rangée mais son texte s'arrêtait à 72 caractères : la case disait 100 %,
     la page en montrait la moitié. Le plafond typographique reste le bon
     réglage tant que personne ne demande autre chose — il ne doit simplement
     pas contredire une consigne explicite. */
  .blocs > .bloc-titre.largeur h1   { max-width: none; }
  .blocs > .bloc-texte.largeur p    { max-width: none; }
  .blocs > .bloc-bouton.largeur .btn { max-width: none; }

  .accordeon-visuel {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 44px;
    align-items: start;
  }

  .reseaux-interieur {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: center;
    padding: 56px 56px 60px;
  }
  .ruban { padding: 22px 0; }
  .reseaux-texte h2 { font-size: calc(var(--fs-soustitre) * 1.5); }
  .reseaux-cartes { gap: 18px; }
  .reseau-carte { padding: 26px 28px; }

  /* Parcours de rendez-vous */
  .tunnel { max-width: 1180px; margin: 0 auto; padding: 44px 64px 88px; }
  .tunnel h1 { font-size: 36px; }

  /* Toujours une campagne par ligne, seulement plus au large : le visuel
     grandit, la ligne respire. Les mettre en colonnes ferait des cartes de
     hauteurs inégales dès qu'une seule est dépliée. */
  .campagnes { gap: 12px; }
  .campagne-cible { min-height: 92px; }
  .campagne-vignette { width: 132px; }
  .campagne-choix { padding: 14px 22px; }
  .campagne-nom { font-size: 19px; }
  .campagne-detail { font-size: 14px; }
  .campagne-coche { width: 72px; }
  .campagne-resume,
  .campagne-info summary,
  .campagne-info-texte { padding-left: 22px; padding-right: 22px; }
  .campagne-info-texte { font-size: 15px; }

  /* Le bouton reprend sa place dans le fil : l'écran est assez grand pour que
     la liste et le bouton tiennent ensemble. Plus de `position: fixed` à
     préserver, donc l'entrée de page peut de nouveau glisser. */
  .tunnel-action {
    position: static;
    padding: 0;
    margin-top: var(--space-3);
    background: none;
    box-shadow: none;
  }
  body:has(.tunnel-action) { padding-bottom: 0; }
  .anime-page:has(.tunnel-action) { animation-name: entreePage; }

  /* Calendrier et horaires côte à côte */
  .etape-jour {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  .etape-jour h1 { font-size: 26px; }
  .etape-jour .panneau { display: block !important; }
  .etape-jour .mobile-seulement { display: none !important; }
  .calendrier-case { min-height: 46px; }

  /* Le rappel défile avec la page. Il était collé en haut de l'écran : depuis
     qu'il porte la description et le détail de chaque campagne, sa hauteur
     n'est plus prévisible et il venait recouvrir le calendrier. Un bloc qui
     cache ce qu'on est en train de remplir dessert plus qu'il ne sert. */
  .rappel { padding: 18px 24px; }

  .formulaire-deux-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    max-width: 760px;
    margin: 0 auto;
  }
  .formulaire-deux-colonnes > .pleine-largeur { grid-column: span 2; }
  .etape-confirmation, .etape-coordonnees { max-width: 760px; margin: 0 auto; }

  /* Pied de page pleine largeur, contenu aligné sur la coque */
  /* Une seule rangée, tout centré sur la même ligne. Les deux colonnes
     latérales sont de largeur égale — `1fr` de part et d'autre —, ce qui pose
     la mention au milieu exact du pied et non au milieu de ce qui reste entre
     la marque et les liens. Elle y tient sa place même si la marque ou les
     liens viennent à manquer. */
  .pied {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 24px max(64px, calc((100% - var(--largeur-max)) / 2 + 64px));
  }
  /* La rangée est nommée explicitement pour les trois : la mention vient après
     les liens dans le code — l'ordre qui convient à l'empilement du téléphone —
     et le placement automatique de la grille l'aurait renvoyée à la ligne
     suivante, la colonne du milieu étant déjà dépassée. */
  .pied-marque  { grid-row: 1; grid-column: 1; justify-self: start; }
  .pied-mention { grid-row: 1; grid-column: 2; }
  .pied-liens   { grid-row: 1; grid-column: 3; justify-self: end; }
}

/* Le bouton « Rendez-vous » n'apparaît dans la barre qu'à partir du moment où
   il y tient entièrement. Sous ce seuil, il reste accessible par le bouton
   flottant de l'accueil et par les appels à l'action des pages. */
@media (min-width: 1280px) {
  .entete-interieur { padding: 24px 64px; }
  .nav-bureau a.btn { display: inline-flex; padding: 10px 22px; }
}

/* Au-delà, la barre respire : libellés plus grands, pastilles plus généreuses. */
@media (min-width: 1440px) {
  .nav-bureau { gap: 4px; }
  .nav-bureau a:not(.lien-reseau):not(.btn) { padding: 12px 18px; font-size: 18px; }
  .nav-reseaux { gap: 6px; margin: 0 4px 0 10px; padding-left: 12px; }
  .nav-bureau .lien-reseau-nav { width: 36px; height: 36px; }
}

/* Le pied de page occupe toute la largeur de la fenêtre, même quand la coque
   est plafonnée à 1440 px. */


/* ==========================================================================
   15. Bandeau des cookies (tarteaucitron)
   ========================================================================== */

/* La feuille de tarteaucitron est chargée par le script lui-même ; on ne
   reprend ici que les couleurs, pour que le bandeau appartienne au site plutôt
   qu'au module. Les sélecteurs sont préfixés comme les siens, avec la même
   spécificité, faute de quoi ses règles l'emportent. */

#tarteaucitronRoot div#tarteaucitronAlertBig,
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronTitle {
  background: var(--bleu-nuit) !important;
}

/* Le fond du bandeau passe au bleu nuit : son texte, noir d'origine, doit
   passer au blanc en même temps, sans quoi il ne se lit plus. */
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert a {
  color: #fff !important;
}

/* Le lien vers les mentions légales n'a pas de fond dans le bandeau, à la
   différence du panneau : même traitement que le texte, souligné pour rester
   reconnaissable comme un lien. */
#tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPrivacyUrl {
  background: transparent !important;
  color: #fff !important;
  text-decoration: underline;
}

#tarteaucitronRoot button#tarteaucitronPersonalize,
#tarteaucitronRoot button#tarteaucitronPersonalize2,
#tarteaucitronRoot .tarteaucitronAllow,
#tarteaucitronRoot button#tarteaucitronSaveButton,
#tarteaucitronRoot span#tarteaucitronDisclaimerAlert button.tarteaucitronCTAButton {
  background: var(--color-accent) !important;
  color: #fff !important;
}

#tarteaucitronRoot button#tarteaucitronPersonalize:hover,
#tarteaucitronRoot .tarteaucitronAllow:hover,
#tarteaucitronRoot button#tarteaucitronSaveButton:hover {
  background: var(--color-accent-600) !important;
}

#tarteaucitronRoot .tarteaucitronDeny {
  background: var(--color-neutral-700) !important;
  color: #fff !important;
}

#tarteaucitronRoot .tarteaucitronDeny:hover {
  background: var(--color-neutral-800) !important;
}

/* Le bouton flottant « Rendez-vous » de l'accueil se range tant que le bandeau
   est affiché : les deux occupent le bas de l'écran, et le bandeau, posé
   au-dessus de toute la page, le masquerait à moitié. Le bandeau est ajouté en
   fin de page, donc après le bouton : seul `:has()` permet de remonter au
   parent commun pour l'atteindre. */
body:has(#tarteaucitronRoot.tarteaucitronBeforeVisible) .bouton-flottant,
body.tarteaucitron-modal-open .bouton-flottant { display: none; }


/* ==========================================================================
   16. Mouvement réduit et impression
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Les ronds et le bandeau se figent dans leur position de départ */
  .marque-ronds span,
  .ronds-fond span,
  .reseaux-deco,
  .ruban-piste,
  .reseaux-direct .puce { animation: none !important; }
  .polaroid { transform: none !important; }
}

@media print {
  .entete, .nav-mobile, .bouton-flottant, .pied, .ruban, .ronds-fond, .marque-ronds,
  #tarteaucitronRoot { display: none !important; }
  body { font-size: 12pt; }
  .blocs { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}