/* ==========================================================================
   ETALL — Mise en forme des contenus des pages intérieures
   Blocs de texte, niveaux, créneaux, tableaux de tarifs, étapes, encadrés.
   ========================================================================== */

/* --- Version compacte du hero pour les pages intérieures ----------------- */

.hero--page {
  padding-block: clamp(2rem, 1.2rem + 4vw, 4rem) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.hero--page .hero__titre { font-size: var(--t-2xl); }

/* --- Bloc de texte officiel ---------------------------------------------- */

.bloc { max-width: var(--largeur-texte); }

.bloc__titre { color: var(--bleu-profond); }

.bloc__texte {
  margin-top: var(--e-4);
  font-size: var(--t-md);
  color: var(--encre-douce);
}

.bloc__texte + .bloc__texte { margin-top: var(--e-4); }

/* Met en valeur les montants et les durées sans changer un seul mot */
.bloc__texte strong {
  color: var(--bleu-profond);
  font-weight: var(--graisse-forte);
  white-space: nowrap;
}

/* --- Deux colonnes : texte d'un côté, image de l'autre -------------------- */

.duo {
  display: grid;
  gap: var(--e-6);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .duo {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--e-8);
  }
  .duo--inverse .duo__media { order: -1; }
}

.duo__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-levee);
  background: var(--bleu-clair);
}

.duo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duo__media--portrait { aspect-ratio: 3 / 4; }

/* --- Les niveaux A1 → C1 -------------------------------------------------- */

.niveaux {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

/* Variante cliquable : la pastille devient un bouton qui ouvre le détail du
   niveau. Le nom de la classe est répété (.niveau.niveau--bouton) pour que
   la règle pèse plus lourd que .bouton et consorts, quel que soit l'ordre
   de chargement des feuilles. */
.niveau.niveau--bouton {
  cursor: pointer;
  font: inherit;
  font-weight: var(--graisse-forte);
}

.niveau--bouton svg {
  width: 17px;
  height: 17px;
  color: var(--bleu-primaire);
  opacity: .75;
}

.niveau--bouton:hover svg,
.niveau--bouton:focus-visible svg { opacity: 1; }

.niveaux__aide {
  margin-top: var(--e-3);
  font-size: var(--t-sm);
  color: var(--encre-douce);
}

.niveau {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  min-height: 44px;
  background: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: var(--rayon-pilule);
  font-weight: var(--graisse-forte);
  color: var(--bleu-profond);
  transition: transform var(--transition-rapide),
              border-color var(--transition-rapide),
              background-color var(--transition-rapide);
}

.niveau:hover {
  transform: translateY(-3px);
  border-color: var(--bleu-primaire);
  background: var(--bleu-clair);
}


/* --- Lignes de tarif ------------------------------------------------------
   Le cahier des charges donne ces montants dans une phrase, pas dans un
   tableau. Chaque phrase est donc conservée ENTIÈRE, mais posée sur sa
   propre ligne : on gagne la lisibilité d'un tableau sans changer un mot.
   -------------------------------------------------------------------------- */

.liste-tarifs {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-5);
  max-width: var(--largeur-texte);
}

.ligne-tarif {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--bleu-primaire);
  border-radius: var(--rayon-sm);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--encre-douce);
  transition: transform var(--transition-rapide), box-shadow var(--transition-rapide);
}

.ligne-tarif:hover {
  transform: translateX(4px);
  box-shadow: var(--ombre-carte);
}

.ligne-tarif svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  color: var(--bleu-primaire);
}

.ligne-tarif strong {
  color: var(--bleu-profond);
  font-weight: var(--graisse-forte);
  white-space: nowrap;
}

/* --- Bandeau de photos qui défile ----------------------------------------
   Les images avancent lentement et en boucle. La piste contient deux fois
   la même série : quand la première série a fini de passer, la seconde est
   exactement à sa place, et la boucle est invisible.
   -------------------------------------------------------------------------- */

.bandeau-photos {
  overflow: hidden;
  margin-top: var(--e-6);
  /* Les bords s'estompent au lieu d'être coupés net */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* La durée n'est pas la même pour tous les bandeaux : elle est calculée
   pour chacun d'après la largeur de sa piste, et posée sur l'élément par
   l'outil qui fabrique les bandeaux. Sans cela, une durée unique ferait
   défiler vite les pistes larges et lentement les étroites — la vitesse
   apparente variait du simple au double d'un bandeau à l'autre.
   La valeur de repli sert si la variable venait à manquer. */
.bandeau-photos__piste {
  display: flex;
  gap: var(--e-4);
  width: max-content;
  animation: defile-photos var(--defilement, 24s) linear infinite;
}

/* Le défilement s'arrête quand on survole : on peut regarder une photo */
.bandeau-photos:hover .bandeau-photos__piste,
.bandeau-photos:focus-within .bandeau-photos__piste {
  animation-play-state: paused;
}

@keyframes defile-photos {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--e-4) / 2)); }
}

.bandeau-photos__item {
  flex: none;
  width: clamp(260px, 68vw, 420px);
  margin: 0;
}

/* Variante à cadres carrés, pour une série qui contient des portraits :
   un cadre en largeur leur couperait le front et le menton. Les vignettes
   étant plus hautes, on les rétrécit un peu. */
.bandeau-photos--carre .bandeau-photos__item { width: clamp(240px, 58vw, 330px); }
.bandeau-photos--carre .bandeau-photos__cadre { aspect-ratio: 1 / 1; }

.bandeau-photos__cadre {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-carte);
  background: var(--bleu-clair);
}

.bandeau-photos__cadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-lente);
}

.bandeau-photos__item:hover .bandeau-photos__cadre img { transform: scale(1.05); }

.bandeau-photos__legende {
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--encre-douce);
}

/* Si le visiteur a demandé à limiter les animations, le bandeau ne bouge
   plus tout seul : il se fait glisser au doigt ou à la souris. */
@media (prefers-reduced-motion: reduce) {
  .bandeau-photos {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .bandeau-photos__piste { animation: none; }
}

/* --- Créneaux horaires ---------------------------------------------------- */

.creneaux {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--e-6);
}

@media (min-width: 700px) { .creneaux { grid-template-columns: repeat(4, 1fr); } }

.creneau {
  padding: var(--e-4) var(--e-3);
  text-align: center;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  transition: transform var(--transition-rapide), box-shadow var(--transition-rapide);
}

.creneau:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte); }

.creneau svg { margin: 0 auto var(--e-2); color: var(--bleu-primaire); width: 24px; height: 24px; }

.creneau__heure {
  display: block;
  font-size: var(--t-lg);
  font-weight: var(--graisse-forte);
  color: var(--bleu-profond);
  white-space: nowrap;
}

.creneau__type {
  display: block;
  margin-top: var(--e-1);
  font-size: var(--t-sm);
  color: var(--encre-douce);
}

.creneau--soir { background: var(--bleu-clair); border-color: var(--bleu-clair); }

/* --- Puces : compétences, modules, pièces à fournir ---------------------- */

.puces {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: 1fr;
  margin-top: var(--e-6);
}

@media (min-width: 560px) { .puces { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .puces--5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 900px) { .puces--4 { grid-template-columns: repeat(4, 1fr); } }

.puce {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  transition: transform var(--transition-rapide), box-shadow var(--transition-rapide);
}

.puce:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte); }

.puce__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--rayon-sm);
  background: var(--bleu-clair);
  color: var(--bleu-primaire);
}
.puce__icone svg { width: 21px; height: 21px; }

.puce__mot {
  display: block;
  font-weight: var(--graisse-forte);
  color: var(--bleu-profond);
  line-height: 1.25;
}

.puce__trad {
  display: block;
  font-size: var(--t-sm);
  color: var(--encre-douce);
}


/* --- Fiches de l'équipe ---------------------------------------------------
   Une personne = une ligne : le portrait d'un côté, l'explication de son
   rôle de l'autre. Les lignes alternent (photo à gauche, puis à droite) :
   l'œil descend la page sans se lasser. Sous 760 px tout s'empile, photo
   au-dessus du texte.
   -------------------------------------------------------------------------- */

.equipe {
  display: grid;
  gap: var(--e-8);
  margin-top: var(--e-7);
}

.membre {
  display: grid;
  gap: var(--e-5);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .membre { grid-template-columns: 300px minmax(0, 1fr); gap: var(--e-7); }
  .membre--inverse { grid-template-columns: minmax(0, 1fr) 300px; }
  /* La photo passe après le texte, sans changer l'ordre de lecture
     pour un lecteur d'écran : dans le HTML, elle reste au même endroit. */
  .membre--inverse .membre__portrait { order: 2; }
}

.membre__portrait {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--rayon-lg);
  background: var(--bleu-clair);
  box-shadow: var(--ombre-levee);
}

.membre__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le cadre est carré, plusieurs portraits sont en hauteur : c'est donc le
     navigateur qui les rogne. Par défaut il garde le milieu — sur une photo
     en pied, le visage y passerait à la trappe. On remonte le cadrage.
     Sans effet sur les portraits déjà carrés : il n'y a rien à rogner. */
  object-position: 50% 18%;
  transition: transform var(--transition-lente);
}

.membre:hover .membre__portrait img { transform: scale(1.04); }

.membre__nom {
  font-size: var(--t-lg);
  font-weight: var(--graisse-forte);
  line-height: 1.25;
  color: var(--bleu-profond);
}

.membre__role {
  display: inline-block;
  margin-top: var(--e-3);
  padding: 6px var(--e-3);
  font-size: var(--t-sm);
  font-weight: var(--graisse-moyenne);
  color: var(--bleu-profond);
  background: var(--bleu-clair);
  border-radius: 999px;
}

.membre__texte {
  margin-top: var(--e-4);
  line-height: 1.75;
  color: var(--encre-douce);
}

/* --- Boîte à suggestions --------------------------------------------------
   Le site n'a pas de serveur : ce bloc ne « soumet » rien, il prépare un
   message et l'ouvre dans WhatsApp. La mise en forme évite donc tout ce qui
   ferait croire à un envoi depuis le site.
   -------------------------------------------------------------------------- */

.suggestion {
  max-width: 680px;
  margin-inline: auto;
  padding: var(--e-6);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-carte);
}

@media (min-width: 700px) { .suggestion { padding: var(--e-7); } }

.suggestion__mode-emploi {
  line-height: 1.7;
  color: var(--encre-douce);
}

.suggestion__champ { margin-top: var(--e-6); }

.suggestion__etiquette {
  display: block;
  margin-bottom: var(--e-2);
  font-weight: var(--graisse-forte);
  color: var(--bleu-profond);
}

.suggestion__zone,
.suggestion__choix {
  width: 100%;
  padding: var(--e-3) var(--e-4);
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--encre);
  background: var(--bleu-brume);
  border: 2px solid var(--bordure);
  border-radius: var(--rayon-sm);
  transition: border-color var(--transition-rapide), background-color var(--transition-rapide);
}

.suggestion__zone {
  min-height: 160px;
  line-height: 1.65;
  resize: vertical;
}

.suggestion__choix { min-height: 48px; cursor: pointer; }

.suggestion__zone:focus,
.suggestion__choix:focus {
  outline: none;
  background: var(--blanc);
  border-color: var(--vert-whatsapp);
}

.suggestion__compte {
  margin-top: var(--e-2);
  font-size: var(--t-xs);
  text-align: right;
  color: var(--encre-douce);
}

/* « facultatif » à côté d'un intitulé : dit clairement ce qu'on peut sauter */
.suggestion__facultatif {
  margin-left: var(--e-2);
  padding: 2px var(--e-2);
  border-radius: var(--rayon-pilule);
  background: var(--bleu-brume);
  font-size: var(--t-xs);
  font-weight: var(--graisse-normale);
  color: var(--encre-douce);
}

.suggestion__alerte {
  margin-top: var(--e-4);
  padding: var(--e-3) var(--e-4);
  background: var(--bleu-clair);
  border-left: 4px solid var(--bleu-primaire);
  border-radius: var(--rayon-sm);
  font-size: var(--t-sm);
  color: var(--bleu-profond);
}

/* Confirmation d'envoi : le vert du site, celui qui dit « c'est parti » */
.suggestion__alerte--succes {
  background: var(--vert-brume);
  border-left-color: var(--vert-whatsapp);
  color: var(--vert-whatsapp-fonce);
}

.suggestion [data-suggestion-envoi] { margin-top: var(--e-6); }

.suggestion__note {
  margin-top: var(--e-4);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--encre-douce);
}

/* --- Vignette légendée ---------------------------------------------------- */

.vignette {
  margin: 0;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  overflow: hidden;
  box-shadow: var(--ombre-fine);
  transition: transform var(--transition-douce), box-shadow var(--transition-douce);
}

.vignette:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte); }

.vignette img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.vignette figcaption {
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--encre-douce);
}

/* --- Règles listées en points (discipline) -------------------------------- */

.regles {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-5);
  max-width: var(--largeur-texte);
}

.regle {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--encre-douce);
  transition: transform var(--transition-rapide), box-shadow var(--transition-rapide);
}

.regle:hover { transform: translateX(4px); box-shadow: var(--ombre-fine); }

.regle svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--bleu-primaire);
}

/* Ce qui n'est pas admis apparaît en rouge : la règle se lit d'un coup d'œil */
.regle--interdit svg { color: #c62828; }
.regle--interdit { border-left: 3px solid #f3c9c9; }

/* --- Étapes numérotées ---------------------------------------------------- */

.etapes {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
  margin-top: var(--e-6);
  counter-reset: etape;
}

@media (min-width: 700px) {
  .etapes { grid-template-columns: repeat(2, 1fr); }
  /* Quand le nombre d'étapes est impair, la dernière se retrouverait seule
     avec un trou à sa droite. Elle prend alors toute la largeur. La règle
     s'ajuste d'elle-même si le nombre d'étapes change un jour. */
  .etape:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* À côté d'une photo, deux colonnes rendraient chaque étape trop étroite :
   elles s'empilent alors sur une seule colonne. */
.etapes--colonne { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .etapes--colonne { grid-template-columns: 1fr; }
}

.etape {
  position: relative;
  display: flex;
  gap: var(--e-4);
  padding: var(--e-5);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-fine);
  transition: transform var(--transition-douce), box-shadow var(--transition-douce);
}

.etape:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte); }

.etape__numero {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bleu-primaire);
  color: var(--blanc);
  font-size: var(--t-md);
  font-weight: var(--graisse-forte);
  line-height: 1;
}

.etape__texte { color: var(--encre-douce); }

/* --- Encadrés ------------------------------------------------------------- */

.encadre {
  display: flex;
  gap: var(--e-4);
  padding: var(--e-5);
  margin-top: var(--e-6);
  border-radius: var(--rayon-md);
  border-left: 5px solid var(--bleu-primaire);
  background: var(--bleu-clair);
}

.encadre__icone {
  flex: none;
  color: var(--bleu-primaire);
}
.encadre__icone svg { width: 26px; height: 26px; }

.encadre__titre {
  margin-bottom: var(--e-2);
  font-size: var(--t-md);
  font-weight: var(--graisse-forte);
  color: var(--bleu-profond);
}

.encadre__texte { color: var(--encre); }

/* Encadré d'avertissement : paiements, discipline */
.encadre--alerte {
  border-left-color: #c62828;
  background: #fdeeee;
}
.encadre--alerte .encadre__icone { color: #c62828; }
.encadre--alerte .encadre__titre { color: #a01c1c; }

/* --- Options 1 et 2 (page Procédures) ------------------------------------ */

.option {
  padding: var(--e-6);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-carte);
}

.option__etiquette {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
  padding: var(--e-1) var(--e-4);
  border-radius: var(--rayon-pilule);
  background: var(--bleu-primaire);
  color: var(--blanc);
  font-size: var(--t-sm);
  font-weight: var(--graisse-forte);
}

.option__etiquette svg { width: 18px; height: 18px; }

/* ==========================================================================
   Tableaux de tarifs
   Au-dessus de 700 px : un vrai tableau.
   En dessous : chaque ligne devient une carte, avec le nom de la colonne
   rappelé devant chaque prix. Même information, deux présentations.
   ========================================================================== */

.tableau-enveloppe {
  margin-top: var(--e-6);
  border-radius: var(--rayon-md);
  overflow: hidden;
  box-shadow: var(--ombre-carte);
  border: 1px solid var(--bordure);
  background: var(--blanc);
}

.tarifs {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tarifs caption {
  padding: var(--e-4) var(--e-5);
  background: var(--bleu-profond);
  color: var(--blanc);
  font-size: var(--t-md);
  font-weight: var(--graisse-forte);
  text-align: left;
}

/* Filet de sécurité : si le tableau reste plus large que la carte, il défile
   à l'intérieur de la carte — jamais la page entière (chapitre 8). */
.tableau-defile {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tarifs th,
.tarifs td {
  /* Rembourrage horizontal serré : le tableau ECL a 11 colonnes, chaque
     pixel compte pour qu'il tienne sans déborder. */
  padding: var(--e-3) var(--e-2);
  text-align: center;
  border-bottom: 1px solid var(--bordure);
  white-space: nowrap;
}

.tarifs thead th {
  background: var(--bleu-clair);
  color: var(--bleu-profond);
  font-size: var(--t-sm);
  font-weight: var(--graisse-forte);
  line-height: 1.3;
  white-space: normal;      /* les intitulés longs peuvent revenir à la ligne */
}

/* Deuxième ligne d'en-tête : Interne / Externe */
.tarifs thead tr + tr th {
  background: var(--bleu-brume);
  font-size: var(--t-xs);
  font-weight: var(--graisse-moyenne);
}

.tarifs tbody th {
  background: var(--bleu-brume);
  color: var(--bleu-profond);
  font-size: var(--t-md);
  font-weight: var(--graisse-forte);
}

.tarifs tbody tr:hover td { background: var(--bleu-brume); }

.tarifs tbody tr:last-child th,
.tarifs tbody tr:last-child td { border-bottom: 0; }

/* Colonne « Externe » légèrement teintée pour bien séparer les deux tarifs */
.tarifs .externe { background: rgba(0, 49, 209, .045); }

/* --- Quadrillage du tableau ------------------------------------------------
   Onze colonnes et cinq paires Interne/Externe : sans lignes nettes, l'œil
   perd la colonne en cours de lecture et lit le prix de la case d'à côté.
   Trois épaisseurs, qui disent chacune quelque chose :
     — un filet sur chaque case, pour suivre la ligne et la colonne ;
     — un trait épais à la fin de chaque paire, pour séparer les cinq modules ;
     — un trait épais après la colonne « Niveau », qui n'est pas un prix.
   Réservé à la vraie table : en dessous de 900 px, chaque ligne devient une
   fiche empilée, où ce quadrillage n'aurait aucun sens.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {

  .tarifs th,
  .tarifs td { border: 1px solid var(--bordure-forte); }

  .tarifs tbody tr:last-child th,
  .tarifs tbody tr:last-child td { border-bottom: 1px solid var(--bordure-forte); }

  /* Fin de chaque paire Interne / Externe */
  .tarifs .externe,
  .tarifs thead tr + tr th:nth-child(even) { border-right: 3px solid var(--bleu-profond); }

  /* Les intitulés de groupe de la première ligne d'en-tête, et la colonne
     des niveaux, qui sépare les libellés des chiffres */
  .tarifs thead tr:first-child th,
  .tarifs tbody th { border-right: 3px solid var(--bleu-profond); }
}

.tarifs__note {
  padding: var(--e-4) var(--e-5);
  background: var(--bleu-brume);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--encre-douce);
  border-top: 1px solid var(--bordure);
}

/* ---- Présentation empilée en dessous de 700 px -------------------------- */

@media (max-width: 899px) {

  .tableau-enveloppe {
    border: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }

  .tarifs caption {
    border-radius: var(--rayon-md) var(--rayon-md) 0 0;
  }

  /* L'en-tête devient inutile : chaque prix porte son propre libellé */
  .tarifs thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tarifs,
  .tarifs tbody,
  .tarifs tr,
  .tarifs tbody th,
  .tarifs td {
    display: block;
    width: 100%;
  }

  .tarifs tr {
    margin-bottom: var(--e-4);
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-md);
    box-shadow: var(--ombre-fine);
    overflow: hidden;
  }

  .tarifs tbody th {
    padding: var(--e-3) var(--e-4);
    text-align: left;
    background: var(--bleu-primaire);
    color: var(--blanc);
    border-bottom: 0;
  }

  .tarifs td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-4);
    padding: var(--e-3) var(--e-4);
    text-align: right;
    font-weight: var(--graisse-forte);
    color: var(--bleu-profond);
    /* En version empilée, les intitulés peuvent revenir à la ligne */
    white-space: normal;
  }

  .tarifs tbody th { white-space: normal; }

  /* Le nom de la colonne est rappelé devant chaque prix */
  .tarifs td::before {
    content: attr(data-col);
    flex: 1;
    text-align: left;
    font-size: var(--t-sm);
    font-weight: var(--graisse-normale);
    color: var(--encre-douce);
  }

  .tarifs .externe { background: rgba(0, 49, 209, .05); }

  .tarifs__note {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-md);
  }
}

/* --- Réseaux sociaux sur fond clair (page Contact) ------------------------ */

.reseaux-bloc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4) var(--e-6);
  margin-top: var(--e-7);
  padding: var(--e-5) var(--e-6);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
}

.reseaux-bloc__titre {
  font-size: var(--t-md);
  font-weight: var(--graisse-forte);
  color: var(--bleu-profond);
}

.reseaux--clair { margin-top: 0; }

.reseaux--clair .reseau {
  background: var(--bleu-clair);
  color: var(--bleu-primaire);
}

.reseaux--clair .reseau:hover {
  background: var(--bleu-primaire);
  color: var(--blanc);
}

/* --- Fiche de contact (interlocuteur en Allemagne) ------------------------ */

.fiche-contact {
  display: grid;
  gap: var(--e-5);
  padding: var(--e-6);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-left: 5px solid var(--bleu-primaire);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-carte);
}

@media (min-width: 800px) {
  .fiche-contact {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--e-7);
  }
}

.fiche-contact__identite {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
}

.fiche-contact__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bleu-clair);
  color: var(--bleu-primaire);
}
.fiche-contact__icone svg { width: 27px; height: 27px; }

.fiche-contact__nom {
  font-size: var(--t-lg);
  font-weight: var(--graisse-forte);
  color: var(--bleu-profond);
  line-height: 1.2;
}

.fiche-contact__adresse {
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--encre-douce);
}

.fiche-contact__numeros { display: grid; gap: var(--e-2); }

.fiche-contact__numeros li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 44px;
  padding: var(--e-2) var(--e-4);
  background: var(--bleu-brume);
  border-radius: var(--rayon-sm);
  font-size: var(--t-base);
  color: var(--encre);
}

.fiche-contact__numeros svg {
  flex: none;
  width: 19px;
  height: 19px;
  color: var(--bleu-primaire);
}

/* Le logo WhatsApp — le seul icône « plein » de cette liste — passe au vert */
.fiche-contact__numeros svg.plein { color: var(--vert-whatsapp); }

.fiche-contact__numeros strong {
  font-weight: var(--graisse-forte);
  color: var(--bleu-profond);
  white-space: nowrap;
}

.fiche-contact__type {
  font-size: var(--t-sm);
  color: var(--encre-douce);
}

/* --- Rappel d'action en bas de page -------------------------------------- */

.rappel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  padding: var(--e-6);
  margin-top: var(--e-7);
  border-radius: var(--rayon-lg);
  background: var(--bleu-clair);
}

.rappel__texte {
  font-size: var(--t-md);
  font-weight: var(--graisse-forte);
  color: var(--bleu-profond);
}

@media (max-width: 559px) {
  .rappel { flex-direction: column; align-items: stretch; text-align: center; }
  .rappel .bouton { width: 100%; }
}


/* --- Galeries d'équipe -----------------------------------------------------
   Deux besoins à la fois : les photos défilent seules, ET le visiteur doit
   pouvoir les faire défiler à la main.

   Les bandeaux du reste du site ne savent pas faire ça : une piste poussée
   par une animation CSS n'est pas déplaçable, le doigt glisse dessus sans
   effet. On utilise donc ici un VRAI défilement (overflow-x) — que le doigt,
   la molette, la barre de défilement et le clavier savent déjà manipuler —
   et un script vient le pousser tout seul, en s'arrêtant dès qu'on s'en mêle.
   -------------------------------------------------------------------------- */
/* « min-width: 0 » est ici une protection, pas une décoration. Posée dans une
   grille ou dans un flex, une galerie refuserait par défaut de devenir plus
   étroite que sa piste d'images : au lieu de défiler, elle pousserait toute la
   page en largeur. Sur téléphone, le texte voisin déborde alors de l'écran et
   plus rien ne se fait défiler au doigt — c'est la page entière qui glisse.
   La règle est portée par le composant lui-même, pour qu'il se protège
   partout où on le place. */
.galerie { position: relative; min-width: 0; }

.galerie__piste {
  display: flex;
  gap: var(--e-4);
  margin: 0;
  padding: var(--e-2) var(--marge-laterale) var(--e-4);
  list-style: none;
  overflow-x: auto;
  /* « proximity » plutôt que « mandatory » : l'aimantation aide sans
     contrarier un glissement rapide du doigt. */
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.galerie__piste::-webkit-scrollbar { height: 8px; }
.galerie__piste::-webkit-scrollbar-track { background: transparent; }
.galerie__piste::-webkit-scrollbar-thumb {
  background: var(--bordure-forte);
  border-radius: var(--rayon-pilule);
}

.galerie__item { flex: 0 0 164px; scroll-snap-align: center; }
@media (min-width: 700px)  { .galerie__item { flex-basis: 196px; } }
@media (min-width: 1024px) { .galerie__item { flex-basis: 216px; } }

.galerie__figure { margin: 0; }

.galerie__cadre {
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--rayon-lg);
  background: var(--bleu-clair);
  box-shadow: var(--ombre-carte);
}
.galerie__cadre img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Photos en hauteur dans un cadre plus court : on remonte le cadrage pour
     garder le visage, que le navigateur couperait en gardant le milieu. */
  object-position: 50% 16%;
}

.galerie__legende { margin-top: var(--e-3); text-align: center; }
.galerie__nom {
  display: block;
  font-weight: var(--graisse-forte);
  color: var(--bleu-profond);
  line-height: 1.3;
}
.galerie__role {
  display: block;
  margin-top: 2px;
  font-size: var(--t-sm);
  color: var(--encre-douce);
}

/* Les flèches. Sur un écran tactile le doigt suffit : elles n'apparaissent
   qu'à partir des largeurs où l'on a une souris. Elles sont posées à 40 % de
   la hauteur et non à 50 %, pour tomber au milieu des PHOTOS et non au milieu
   du bloc, dont la légende occupe le bas. */
.galerie__fleche {
  display: none;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: var(--ombre-levee);
  color: var(--bleu-profond);
  cursor: pointer;
  transition: background-color var(--transition-rapide), color var(--transition-rapide);
}
.galerie__fleche:hover { background: var(--bleu-clair); }
.galerie__fleche svg { width: 20px; height: 20px; }
.galerie__fleche--prec { left: 10px; }
.galerie__fleche--suiv { right: 10px; }
/* Le chevron du sprite pointe vers le bas : on le fait pivoter. */
.galerie__fleche--prec svg { transform: rotate(90deg); }
.galerie__fleche--suiv svg { transform: rotate(-90deg); }

@media (min-width: 900px) { .galerie__fleche { display: inline-flex; } }


/* --- Témoignages : les mots et les photos côte à côte ---------------------
   Même disposition que la liste de l'équipe : un bloc visuel d'un côté, le
   texte de l'autre, et l'ordre qui s'inverse d'une personne à la suivante.
   La différence : à la place d'un portrait unique, une petite galerie que
   le visiteur fait défiler lui-même.
   -------------------------------------------------------------------------- */
.temoins {
  display: grid;
  gap: var(--e-9);
  margin-top: var(--e-7);
  padding: 0;
  list-style: none;
}

.temoin {
  display: grid;
  gap: var(--e-5);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .temoin { grid-template-columns: 340px minmax(0, 1fr); gap: var(--e-7); }
  .temoin--inverse { grid-template-columns: minmax(0, 1fr) 340px; }
  /* Les photos passent après le texte, sans changer l'ordre de lecture pour
     un lecteur d'écran : dans le HTML, elles restent au même endroit. */
  .temoin--inverse .temoin__photos { order: 2; }
}

/* Dans une grille, un enfant refuse par défaut de devenir plus étroit que son
   contenu : un mot long ou une adresse ferait alors déborder la colonne.
   « min-width: 0 » lève cette règle. */
.temoin__mots,
.temoin__photos { min-width: 0; }

.temoin__nom {
  font-size: var(--t-lg);
  font-weight: var(--graisse-forte);
  line-height: 1.25;
  color: var(--bleu-profond);
}

.temoin__role {
  display: inline-block;
  margin-top: var(--e-3);
  padding: var(--e-1) var(--e-3);
  background: var(--bleu-clair);
  border-radius: var(--rayon-pilule);
  font-size: var(--t-sm);
  font-weight: var(--graisse-moyenne);
  color: var(--bleu-profond);
}

/* La citation garde les mots de la personne, sans guillemets ajoutés dans le
   texte : c'est le trait de couleur qui dit que quelqu'un parle. */
.temoin__citation {
  margin: var(--e-4) 0 0;
  padding-left: var(--e-5);
  border-left: 3px solid var(--bleu-primaire);
  color: var(--encre-douce);
  font-size: var(--t-md);
  line-height: var(--interligne-texte);
}

.temoin__citation p + p { margin-top: var(--e-4); }

/* Galerie réduite, pour tenir dans la colonne d'un témoignage. Le
   rembourrage latéral disparaît : le conteneur de la page le fournit déjà. */
.galerie--compacte .galerie__piste { padding-left: 0; padding-right: 0; gap: var(--e-3); }

/* Sur téléphone, le témoignage tient sur une seule colonne : une vignette de
   190 px y paraîtrait minuscule. On la fait occuper la plus grande part de la
   largeur, en laissant dépasser un morceau de la suivante — c'est ce bout
   d'image qui dit au visiteur qu'il y en a d'autres à faire défiler. */
.galerie--compacte .galerie__item { flex-basis: 72%; }
@media (min-width: 760px) {
  /* Deux colonnes : la galerie n'a plus que 340 px, on revient au fixe. */
  .galerie--compacte .galerie__item { flex-basis: 190px; }
}
.galerie--compacte .galerie__fleche { width: 38px; height: 38px; top: 50%; }
.galerie--compacte .galerie__fleche svg { width: 17px; height: 17px; }
.galerie--compacte .galerie__fleche--prec { left: 6px; }
.galerie--compacte .galerie__fleche--suiv { right: 6px; }

/* --- Bandeau poussable à la main -------------------------------------------
   Cette classe n'est posée QUE par js/bandeaux.js. Tant qu'elle est absente,
   le bandeau garde son animation CSS : sans JavaScript, il défile quand même.

   Avec elle, l'animation s'arrête et laisse place à un défilement réel, celui
   du navigateur — celui que le doigt sait pousser. Les deux ne peuvent pas
   coexister : une animation déplace la piste sans bouger le défilement, si
   bien que l'image sauterait dès qu'on y touche.
   -------------------------------------------------------------------------- */
.bandeau-photos--pousse {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* La barre de défilement du navigateur ferait une ligne grise en travers
     d'un bandeau de photos. Le mouvement et le bout de photo qui dépasse
     disent déjà qu'il y a autre chose à voir. */
  scrollbar-width: none;
  /* Arrivé au bout du bandeau, le geste ne doit pas se propager : sans cela,
     le doigt qui continue déclenche le « retour en arrière » du navigateur
     et le visiteur quitte la page sans l'avoir voulu. */
  overscroll-behavior-x: contain;
  cursor: grab;
}

.bandeau-photos--pousse::-webkit-scrollbar { display: none; }

.bandeau-photos--pousse .bandeau-photos__piste {
  animation: none;
  transform: none;
}

/* Pendant qu'on tire, le curseur montre qu'on tient la barre, et le texte
   des légendes ne se sélectionne pas par accident. */
.bandeau-photos--tire {
  cursor: grabbing;
  user-select: none;
}

.bandeau-photos--tire img { pointer-events: none; }