/* ============================================================
   Systeme de mouvement, concept "Respirer".

   Rythme de respiration lente : un cycle de 6 secondes, inspiration
   puis expiration. On n'anime que transform, opacity, clip-path et
   filter. L'accordeon passe par la Web Animations API.

   Tout est coupe sous prefers-reduced-motion : le contenu reste
   visible et immobile, jamais masque.

   Palette et polices : voir DESIGN.md. Ce fichier n'introduit aucune
   couleur, il consomme les jetons de styles.css.
   ============================================================ */

:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
  --souffle: 6s;
}

/* ============================================================
   1. Revelations au defilement
   L'etat de depart est pose ici, retire soit par la timeline de
   defilement native, soit par la classe .is-in posee en JavaScript.
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Une photo se devoile, elle ne monte pas. */
.reveal-photo {
  clip-path: inset(12% round 22px);
  scale: 1.15;
  transition: clip-path 1.1s var(--ease), scale 1.1s var(--ease);
  transition-delay: var(--d, 0ms);
}

.reveal-photo.is-in {
  clip-path: inset(0 round 22px);
  scale: 1;
}

/* Quand le navigateur sait lier une animation au defilement, on s'en
   sert et l'observateur JavaScript se desactive de lui-meme. */
@supports (animation-timeline: view()) {
  .a-timeline .reveal,
  .a-timeline .reveal-photo {
    transition: none;
    animation-timeline: view();
    animation-range: entry 8% cover 34%;
    animation-fill-mode: both;
  }

  .a-timeline .reveal       { animation-name: monte; }
  .a-timeline .reveal-photo { animation-name: devoile; }
}

@keyframes monte {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}

@keyframes devoile {
  from { clip-path: inset(12% round 22px); scale: 1.15; }
  to   { clip-path: inset(0 round 22px);   scale: 1; }
}

/* ============================================================
   2. Arrivee du titre
   Les mots sont decoupes cote PHP : aucune mesure en JavaScript,
   donc aucun saut de mise en page au chargement.
   ============================================================ */

.mots { display: block; }

.mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .06em;
}

.mot > span {
  display: inline-block;
  transform: translateY(105%);
  animation: remonte .9s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes remonte {
  to { transform: none; }
}

/* Ce qui suit le titre entre en fondu montant, dans l'ordre de lecture. */
.entre {
  opacity: 0;
  transform: translateY(14px);
  animation: entre .7s var(--ease) forwards;
  animation-delay: var(--d, 700ms);
}

@keyframes entre {
  to { opacity: 1; transform: none; }
}

/* ============================================================
   3. Le visuel qui respire, signature du site
   ============================================================ */

.souffle {
  position: relative;
  isolation: isolate;
}

/* Deux halos derriere l'image, qui respirent en decale et changent
   lentement de forme. */
.souffle::before,
.souffle::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 62% 38% 55% 45% / 45% 52% 48% 55%;
  animation:
    respire var(--souffle) ease-in-out infinite,
    deforme 18s ease-in-out infinite;
}

.souffle::before {
  inset: -7%;
  background: var(--apricot);
  opacity: .6;
}

.souffle::after {
  inset: -3% -11% -13% -2%;
  background: var(--primary-200);
  opacity: .55;
  animation-delay: -3s, -6s;
}

@keyframes respire {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

@keyframes deforme {
  0%, 100% { border-radius: 62% 38% 55% 45% / 45% 52% 48% 55%; }
  50%      { border-radius: 42% 58% 38% 62% / 58% 42% 60% 40%; }
}

/* L'image, dans une forme organique, avec un zoom en contrepoint. */
.souffle-img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 58% 42% 48% 52% / 48% 55% 45% 52%;
  animation: contrepoint var(--souffle) ease-in-out infinite;
}

@keyframes contrepoint {
  0%, 100% { transform: scale(1.02); }
  50%      { transform: scale(1); }
}

/* Pastilles de confiance, posees sur le visuel, qui flottent en decale. */
.pastille {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 14rem;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--deep);
  animation: flotte 7s ease-in-out infinite;
}

.pastille-1 { left: -4%;  top: 12%; }
.pastille-2 { right: -3%; top: 46%; animation-delay: -2.4s; }
.pastille-3 { left: 4%;   bottom: 8%; animation-delay: -4.8s; }

@keyframes flotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Le bouton de pause porte son etat dans son libelle, pas seulement
   dans une icone : l'animation depasse cinq secondes. */
.pause-souffle {
  /* Sous le visuel, pas dessus : quatre etiquettes blanches empilees sur la
     photo devenaient illisibles, surtout sur telephone. */
  position: absolute;
  right: 0;
  bottom: -1.25rem;
  z-index: 3;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  color: var(--deep);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
}

.souffle[data-pause="1"] .souffle-img,
.souffle[data-pause="1"]::before,
.souffle[data-pause="1"]::after,
.souffle[data-pause="1"] .pastille {
  animation-play-state: paused;
}

@media (max-width: 720px) {
  .pastille-1 { left: 0;  top: 6%; }
  .pastille-2 { right: 0; top: 48%; }
  .pastille-3 { left: 0;  bottom: 4%; }
  .pastille   { font-size: .75rem; max-width: 11rem; }
}

/* ============================================================
   4. Point de presence, pour la note de rappel
   ============================================================ */

.point-vif {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-right: var(--space-2);
  border-radius: 999px;
  background: #1F6B4D;
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.35); opacity: .65; }
}

/* ============================================================
   5. Frise des etapes, ligne qui se dessine au defilement
   La progression est lue en requestAnimationFrame et posee dans
   la variable --progression.
   ============================================================ */

.frise { position: relative; }

.frise-ligne {
  position: absolute;
  left: 15px;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: var(--line);
}

.frise-ligne::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--deep);
  transform: scaleY(var(--progression, 0));
  transform-origin: top;
}

/* La pastille numerotee s'allume quand elle croise 60 pour cent de l'ecran. */
.frise li::before {
  transition: background-color .4s var(--ease), color .4s var(--ease);
}

.frise li.atteinte::before {
  background: var(--deep);
  color: #FFFFFF;
}

/* ============================================================
   6. En-tete, translucide apres dix pixels de defilement
   ============================================================ */

.site-header {
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}

.site-header.au-scroll {
  background: rgba(251, 247, 242, .9);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

/* ============================================================
   7. Bande des communes, defilement continu
   ============================================================ */

.bande {
  overflow: hidden;
  margin-block: var(--space-12);
  padding-block: var(--space-4);
  background: var(--bg-alt);
  transform: rotate(-1.2deg);
}

.bande-piste {
  display: flex;
  width: max-content;
  gap: var(--space-8);
  animation: defile 32s linear infinite;
}

.bande:hover .bande-piste,
.bande:focus-within .bande-piste {
  animation-play-state: paused;
}

.bande-item {
  font-family: var(--ff-heading);
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 800;
  color: var(--deep);
  white-space: nowrap;
}

.bande-item::after {
  content: '\00B7';
  margin-left: var(--space-8);
  color: var(--coral);
}

@keyframes defile {
  to { transform: translateX(-50%); }
}

/* ============================================================
   8. Boutons vivants
   ============================================================ */

.btn {
  transition: background-color var(--t) ease, color var(--t) ease,
              border-color var(--t) ease, transform .25s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}

/* ============================================================
   9. Transitions entre pages
   Sans support navigateur, la navigation reste normale.
   ============================================================ */

@view-transition { navigation: auto; }

::view-transition-group(root) { animation-duration: 450ms; }

.brand                    { view-transition-name: marque; }
.site-header              { view-transition-name: entete; }
.chip-primary             { view-transition-name: action; }

/* ============================================================
   10. Accordeon
   La hauteur est animee en JavaScript. Ici, l'icone seulement.
   ============================================================ */

.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--ff-heading);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--coral);
  transition: transform .3s var(--ease);
}

.faq details[open] > summary::after { transform: rotate(45deg); }

/* ============================================================
   11. Barre d'actions mobile, glisse depuis le bas
   ============================================================ */

.barre-mobile {
  transform: translateY(120%);
  transition: transform .45s var(--ease);
}

.barre-mobile.visible { transform: none; }

/* ============================================================
   Mouvement reduit : plus rien ne bouge, tout reste lisible.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-photo {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    scale: 1 !important;
    transition: none !important;
    animation: none !important;
  }

  .mot > span,
  .entre {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .souffle::before,
  .souffle::after,
  .souffle-img,
  .pastille,
  .point-vif,
  .bande-piste {
    animation: none !important;
    transform: none !important;
  }

  .bande { transform: none; }
  .bande-piste { flex-wrap: wrap; width: auto; }
  .pause-souffle { display: none; }
  .barre-mobile { transform: none; transition: none; }

  @view-transition { navigation: none; }
}

/* ============================================================
   12. Composants de l'accueil qui dependent du mouvement
   ============================================================ */

.mot-accent { color: var(--coral); }

.ouverture-note {
  display: flex;
  align-items: center;
  margin: var(--space-5) 0 0;
  color: var(--muted);
  font-size: .9375rem;
}

.section-head { max-width: 44rem; margin-bottom: var(--space-6); }

.section-head h2 {
  margin: 0;
  font-family: var(--ff-heading);
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--deep);
}

.section-head p { margin: var(--space-3) 0 0; color: var(--muted); }

/* --- Chiffres de confiance, sur fond sombre --- */
.confiance {
  position: relative;
  margin-block: var(--space-16);
  padding-block: var(--space-12);
  background: var(--deep);
  color: #FFFFFF;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Grain tres leger, pour que l'aplat sombre ne soit pas plat. */
.confiance::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

.confiance > .wrap { position: relative; }

.confiance .section-head h2 { color: #FFFFFF; }
.confiance .section-head p  { color: #C3DBE0; }

.faits-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-8) var(--space-6);
  margin-top: var(--space-8);
}

.fait-n {
  display: block;
  font-family: var(--ff-heading);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--apricot);
  font-variant-numeric: tabular-nums;
}

.fait-l {
  display: block;
  margin-top: var(--space-2);
  color: #E8F1F2;
  line-height: 1.4;
}

/* --- Frise des etapes --- */
.frise ol {
  counter-reset: f;
  list-style: none;
  margin: 0;
  padding: 0;
}

.frise li {
  counter-increment: f;
  position: relative;
  padding: 0 0 var(--space-6) 3.25rem;
}

.frise li::before {
  content: counter(f);
  position: absolute;
  left: 0;
  top: -2px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--muted);
  font-family: var(--ff-heading);
  font-weight: 800;
  font-size: .9375rem;
}

.frise li h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--ff-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--deep);
}

.frise li p { margin: 0; color: var(--muted); }

@media (min-width: 900px) {
  .frise {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
  }
  /* Le titre de section reste visible pendant la lecture de la frise. */
  .frise > .section-head {
    position: sticky;
    top: calc(var(--space-16) + 2rem);
    margin-bottom: 0;
  }
  .frise-ligne { left: calc(18rem + var(--space-12) + 15px); }
}

/* --- Corps d'accordeon, enveloppe par motion.js --- */
.faq-corps { overflow: hidden; }

/* --- La promesse, photo et texte --- */
.promesse {
  display: grid;
  gap: var(--space-8);
  margin-block: var(--space-16);
}

@media (min-width: 900px) {
  .promesse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-12);
  }
}

.promesse-img {
  width: 100%;
  height: auto;
  max-height: 24rem;
  object-fit: cover;
  border-radius: var(--radius);
}

.promesse-txt h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--ff-heading);
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--deep);
}

.promesse-p {
  font-size: 1.125rem;
  line-height: 1.55;
  padding-left: var(--space-5);
  border-left: 3px solid var(--apricot);
}

/* --- Bloc des langues --- */
.langues {
  max-width: 44rem;
  margin-block: var(--space-12);
  padding: var(--space-6);
  background: #E4F1EA;
  border-radius: var(--radius);
}

.langues h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--ff-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 800;
  color: #17503A;
}

.bonjours {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0;
  font-family: var(--ff-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: #17503A;
}

.bonjours span[dir="rtl"] { unicode-bidi: isolate; }

/* ============================================================
   13. Grille "En bref"
   Une tuile principale pour le tarif, trois tuiles simples autour.
   Asymetrique : la grille reguliere de quatre cases donnait un
   orphelin en seconde ligne et un vide a droite.
   ============================================================ */

.fiche {
  padding: 0;
  margin-bottom: var(--space-16);
  background: transparent;
}

.fiche > h2 {
  margin: 0 0 var(--space-5);
  font-family: var(--ff-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 800;
  color: var(--deep);
}

.fiche-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-4);
}

.tuile {
  padding: var(--space-5);
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.tuile-large {
  grid-column: span 1;
  background: var(--deep);
  color: #FFFFFF;
}

@media (min-width: 760px) {
  .fiche-grille { grid-template-columns: repeat(3, 1fr); }
  .tuile-large  { grid-column: span 1; grid-row: span 2; }
}

.tuile-t {
  margin: 0 0 var(--space-2);
  font-family: var(--ff-heading);
  font-weight: 700;
  color: var(--coral);
}

.tuile-large .tuile-t { color: var(--apricot); }

.tuile-v {
  margin: 0 0 var(--space-2);
  font-family: var(--ff-heading);
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
}

.tuile-d { margin: 0; line-height: 1.5; }
.tuile-large .tuile-d { color: #E8F1F2; }

.tuile-l { margin: var(--space-4) 0 0; }
.tuile-large .tuile-l a { color: var(--apricot); }

/* ============================================================
   14. Le duo : ce qui est fait, ce qui ne l'est pas
   L'opposition passe par le fond, pas par un pictogramme.
   ============================================================ */

.duo {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-12);
}

@media (min-width: 860px) {
  .duo { grid-template-columns: 1.15fr 1fr; align-items: start; }
}

.duo-oui,
.duo-non {
  padding: var(--space-6);
  border-radius: var(--radius);
}

.duo-oui { background: var(--surface); box-shadow: var(--shadow); }
.duo-non { background: #E4F1EA; }

.duo h3 {
  margin: 0 0 var(--space-4);
  font-family: var(--ff-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--deep);
}

.duo-non h3 { color: #17503A; }

.duo-oui ul { list-style: none; margin: 0; padding: 0; }

.duo-oui li {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}

.duo-oui li:first-child { border-top: 0; padding-top: 0; }

.duo-oui strong {
  display: block;
  font-family: var(--ff-heading);
  font-weight: 700;
  color: var(--deep);
}

.duo-oui span { color: var(--muted); }

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

.duo-urgence {
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, .7);
  border-radius: var(--radius-btn);
  font-weight: 600;
}

/* ============================================================
   15. Page de demande
   Mise en page calme : aucune animation decorative ici, le parent
   remplit un formulaire, il n a pas besoin d etre distrait.
   ============================================================ */

.demande-cols { display: grid; gap: var(--space-8); }

@media (min-width: 960px) {
  .demande-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: var(--space-12);
    align-items: start;
  }
  .demande-aside { position: sticky; top: calc(var(--space-16) + 1rem); }
}

.demande-col { min-width: 0; }

/* --- Barre de progression --- */
.progression { margin-bottom: var(--space-4); }

.progression-piste {
  height: 8px;
  background: var(--bg-alt);
  border-radius: 999px;
  overflow: hidden;
}

.progression-jauge {
  display: block;
  height: 100%;
  background: var(--deep);
  border-radius: 999px;
  transition: width .5s var(--ease);
}

.progression-txt {
  margin: var(--space-2) 0 0;
  font-size: .875rem;
  color: var(--muted);
}

/* --- Les fieldsets deviennent des etapes numerotees --- */
.form-card { counter-reset: etape; }

.form-card fieldset {
  counter-increment: etape;
  position: relative;
  margin: 0 0 var(--space-8);
  padding: 0 0 0 3rem;
  border: 0;
}

.form-card fieldset::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  /* Alignement optique : un badge de 32 px face a un texte de 18 px. */
  top: -5px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--deep);
  color: #FFFFFF;
  font-family: var(--ff-heading);
  font-weight: 800;
  font-size: .9375rem;
}

.form-card .fieldset-legend {
  font-family: var(--ff-heading);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--deep);
  padding: 0;
}

/* --- Les choix deviennent de grandes cartes cliquables --- */
.choice {
  /* Une regle heritee mettait ces labels en colonne, ce qui centrait la case
     au-dessus du texte. Le brief la veut a gauche du texte. */
  display: flex;
  flex-direction: row;
  min-height: 56px;
  align-items: center;
  text-align: left;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--t) ease, background-color var(--t) ease;
}

.choice:hover { border-color: var(--primary-300); }

.choice:has(input:checked) {
  border-color: var(--deep);
  background: var(--bg-alt);
}

.choice input { width: 20px; height: 20px; margin-top: 0; accent-color: var(--deep); }

/* Cibles tactiles de 48 px dans les formulaires. */
.field input,
.field select,
.field textarea { min-height: 48px; }

/* --- Colonne laterale --- */
.demande-aside {
  padding: var(--space-6);
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.demande-aside h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--ff-heading);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--deep);
}

.apres {
  counter-reset: a;
  list-style: none;
  margin: 0;
  padding: 0;
}

.apres li {
  counter-increment: a;
  position: relative;
  padding: 0 0 var(--space-4) 2.25rem;
}

.apres li::before {
  content: counter(a);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--deep);
  font-family: var(--ff-heading);
  font-weight: 800;
  font-size: .8125rem;
}

.apres strong {
  display: block;
  font-family: var(--ff-heading);
  color: var(--deep);
}

.apres span { color: var(--muted); font-size: .9375rem; }

.apres-tel {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9375rem;
}

/* ============================================================
   16. Tarifs, zones, recherche dans les questions
   ============================================================ */

.tarifs {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-8) var(--space-12);
}

@media (min-width: 720px) {
  .tarifs { grid-template-columns: 1fr 1fr; }
}

.tarif {
  padding: var(--space-6);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.tarif-social { background: var(--deep); color: #FFFFFF; box-shadow: none; }

.tarif-t {
  margin: 0 0 var(--space-3);
  font-family: var(--ff-heading);
  font-weight: 700;
  color: var(--coral);
}

.tarif-social .tarif-t { color: var(--apricot); }

.tarif-v {
  margin: 0 0 var(--space-3);
  font-family: var(--ff-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
}

.tarif-u {
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
}

.tarif-social .tarif-u { color: #C3DBE0; }

.tarif-d { margin: 0; }
.tarif-social .tarif-d { color: #E8F1F2; }

/* --- Communes couvertes --- */
.communes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}

.communes li {
  padding: var(--space-5);
  background: var(--bg-alt);
  border-radius: var(--radius);
  font-family: var(--ff-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--deep);
}

/* --- Recherche dans les questions --- */
.faq-recherche { max-width: 34rem; margin-bottom: var(--space-5); }

.faq-recherche input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--muted);
  border-radius: var(--radius-btn);
}

.faq-vide {
  max-width: 44rem;
  padding: var(--space-4);
  background: var(--bg-alt);
  border-radius: var(--radius);
}

/* ============================================================
   17. Etudiants, qualite, soutenir, a propos, legales, 404
   ============================================================ */

/* --- Ouverture inversee --- */
.ouverture-sombre {
  margin-inline: calc(var(--space-6) * -1);
  padding: var(--space-10) var(--space-6) var(--space-12);
  background: var(--deep);
  border-radius: var(--radius);
  color: #FFFFFF;
}

.ouverture-sombre h1 { color: #FFFFFF; }
.ouverture-sombre .ouverture-p { color: #E8F1F2; }
.ouverture-sombre .mot-accent { color: var(--apricot); }
.ouverture-sombre .ouverture-tel,
.ouverture-sombre .ouverture-note { color: #C3DBE0; }
.ouverture-sombre .ouverture-tel a { color: #FFFFFF; }

/* --- Ce que nous offrons --- */
.offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-6) var(--space-12);
}

.offre {
  padding: var(--space-5);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.offre-t {
  margin: 0 0 var(--space-2);
  font-family: var(--ff-heading);
  font-weight: 700;
  color: var(--deep);
}

.offre-d { margin: 0; color: var(--muted); }

/* --- Les cinq modules : defilement par a-coups sur telephone, grille ensuite --- */
.modules {
  counter-reset: none;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-12);
  padding: 0 0 var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.module-f {
  scroll-snap-align: start;
  padding: var(--space-5);
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.module-n {
  margin: 0 0 var(--space-2);
  font-family: var(--ff-heading);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--coral);
}

.module-f h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--ff-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--deep);
}

.module-f p { margin: 0; color: var(--muted); }

@media (min-width: 900px) {
  .modules {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-columns: auto;
    overflow-x: visible;
  }
}

/* --- Trois entrees de soutien --- */
.entrees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-6) var(--space-12);
}

.entree {
  display: block;
  padding: var(--space-6);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
}

.entree-forte { background: var(--deep); color: #FFFFFF; box-shadow: none; }

.entree-t {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--ff-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--deep);
}

.entree-forte .entree-t { color: var(--apricot); }

.entree-d { display: block; color: var(--muted); }
.entree-forte .entree-d { color: #E8F1F2; }

/* --- IBAN copiable --- */
.iban {
  max-width: 34rem;
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.iban-t { margin: 0 0 var(--space-2); font-weight: 700; color: var(--deep); }

.iban-v code {
  font-size: 1.125rem;
  letter-spacing: .04em;
  word-break: break-all;
}

/* --- Pages legales : colonne de lecture confortable --- */
.legal .prose { max-width: 42rem; }
.legal .page-head { padding-bottom: var(--space-6); }

/* --- 404 : un blob qui respire, purement decoratif --- */
.souffle-404 {
  width: 130px;
  height: 130px;
  margin: var(--space-12) 0 0;
  background: var(--apricot);
  border-radius: 62% 38% 55% 45% / 45% 52% 48% 55%;
  animation: respire var(--souffle) ease-in-out infinite,
             deforme 18s ease-in-out infinite;
}

.souffle-404::before,
.souffle-404::after { content: none; }

/* ============================================================
   18. Carte des communes
   Contours reels, voir partials/carte-communes.php. Les communes
   couvertes se remplissent en cascade a l'apparition.
   ============================================================ */

.carte-wrap {
  margin: var(--space-6) 0 var(--space-10);
  max-width: 44rem;
}

.carte {
  display: block;
  width: 100%;
  height: auto;
}

.carte-c {
  fill: var(--bg-alt);
  stroke: var(--bg);
  stroke-width: 3;
  stroke-linejoin: round;
}

.carte-c--couverte {
  fill: var(--deep);
  /* Remplissage en cascade : chaque commune couverte arrive a son tour. */
  animation: remplir .7s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms + 200ms);
}

@keyframes remplir {
  from { fill: var(--bg-alt); }
  to   { fill: var(--deep); }
}

.carte-source {
  margin: var(--space-3) 0 0;
  font-size: .8125rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .carte-c--couverte { animation: none; fill: var(--deep); }
}

/* ============================================================
   19. Porte de l'espace equipe
   Page nue : ni navigation marketing, ni appel a l'action parent.
   ============================================================ */

.masthead--nu { justify-content: space-between; }

.colophon--court {
  margin-top: var(--space-12);
  padding-block: var(--space-6);
}

.porte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding-block: var(--space-16);
}

.porte-carte {
  width: 100%;
  max-width: 26rem;
  padding: var(--space-8);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.porte-carte h1 {
  margin: 0;
  font-family: var(--ff-heading);
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--deep);
}

.porte-sub {
  margin: var(--space-2) 0 var(--space-6);
  color: var(--muted);
  font-size: .9375rem;
}

.porte-carte .field { margin-bottom: var(--space-4); }
.porte-carte .actions { margin: var(--space-6) 0 0; }
.porte-carte .btn { width: 100%; }

.porte-aide {
  margin: 0;
  color: var(--muted);
  font-size: .875rem;
  text-align: center;
}