/* ==========================================================================
   Cabinet Dentaire de l'Olympe — Yutz — Feuille de style commune
   --------------------------------------------------------------------------
   Charte graphique :
     - Bleu Égée    #0A2E3D  (ancrage profond, aplats sombres)
     - Bleu mer     #5AA0B5  (secondaire clair, illustrations)
     - Bleu pétrole #0F4254  (boutons, navbar, titres)
     - Turquoise    #2F8299  (hover, icônes, tags)
     - Marbre       #ECF1F3  (fonds de sections, cartes)
     - Blanc marbre #FAFCFD  (fond général)
     - Cuivre       #C08A5E  (accent discret : tirets, filets)
   Typographie :
     - Titres        : Georgia (serif)
     - Corps / nav   : Trebuchet MS (sans-serif)
   ========================================================================== */


/* ----- 1. Variables & reset ----------------------------------------------- */
:root {
  /* Couleurs */
  --bleu-egee:    #0A2E3D;
  --bleu-mer:     #5AA0B5;
  --petrole:      #0F4254;
  --turquoise:    #2F8299;
  --marbre:       #ECF1F3;
  --blanc-marbre: #FAFCFD;
  --texte:        #1B2A30;       /* gris-bleu foncé pour le corps de texte */
  --texte-doux:   #55696F;       /* texte secondaire / muted */
  --cuivre:       #C08A5E;       /* accent discret (tirets, traits) */
  --bordure:      rgba(15,66,84,.10);

  /* Typo */
  --serif:        Georgia, "Times New Roman", serif;
  --sans:         "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;

  /* Layout */
  --maxw:         73.75rem;   /* 1180px au réglage par défaut, mais suit la taille de police du visiteur */
  --radius:       14px;
  --radius-sm:    10px;
  --shadow-sm:    0 2px 6px rgba(10,46,61,.06);
  --shadow:       0 10px 30px rgba(10,46,61,.10), 0 2px 6px rgba(10,46,61,.06);
  --shadow-lg:    0 24px 50px rgba(10,46,61,.14);
  --transition:   .25s ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* min-height et non height : « height: 100% » combiné au « overflow-x:
   hidden » plus bas transformait le corps de page en zone de défilement de
   la hauteur exacte de la fenêtre. Invisible à l'écran, désastreux à
   l'impression : la feuille était rognée après la première page et la
   barre de défilement s'imprimait. */
html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--blanc-marbre);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

a {
  color: var(--petrole);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--turquoise); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--petrole);
  line-height: 1.25;
  margin: 0 0 .6rem;
}
h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; }

.container {
  width: min(100% - 2rem, var(--maxw));
  margin-inline: auto;
}


/* ----- 2. Boutons --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.4rem;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-1px); }

/* Bouton principal (vert sapin) */
.btn-primary {
  background: var(--petrole);
  color: var(--blanc-marbre);
}
.btn-primary:hover {
  background: var(--turquoise);
  color: var(--blanc-marbre);
}

/* Bouton secondaire (contour) */
.btn-outline {
  background: transparent;
  color: var(--petrole);
  border-color: var(--petrole);
}
.btn-outline:hover {
  background: var(--petrole);
  color: var(--blanc-marbre);
}

/* Bouton "ghost" sur fond foncé */
.btn-ghost {
  background: transparent;
  color: var(--blanc-marbre);
  border-color: rgba(255,255,255,.4);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--blanc-marbre);
}


/* ----- 3. Header / Navbar sticky ------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blanc-marbre);
  border-bottom: 1px solid var(--bordure);
  /* NOTE : on évite volontairement backdrop-filter / filter / transform ici,
     car ces propriétés créent un "containing block" qui casserait le
     position:fixed du menu mobile (le menu serait confiné dans le header). */
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
}

.nav .brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: var(--petrole);
}
.nav .brand img,
.nav .brand svg {
  width: auto;
  height: 76px;
}
.nav .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.nav .brand-text strong {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--petrole);
}
.nav .brand-text span {
  font-size: .72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--turquoise);
}

.nav ul.menu {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Les éléments du menu sont des éléments flexibles : par défaut ils se
   compriment quand la barre manque de place, et leur texte passe alors à
   la ligne — « Consignes » au-dessus de son chevron, « Urgences » sous sa
   pastille. On interdit et la compression et le retour à la ligne : si la
   place manque, c'est le menu hamburger qui doit prendre le relais. */
.nav ul.menu > li { flex-shrink: 0; }
.nav ul.menu > li > a { white-space: nowrap; }
.nav ul.menu a {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  color: var(--petrole);
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.nav ul.menu a:hover,
.nav ul.menu a.active {
  color: var(--turquoise);
  border-bottom-color: var(--turquoise);
}
.nav ul.menu a.btn,
.nav ul.menu a.btn:hover {
  border-bottom: none;
  color: var(--blanc-marbre);
}
/* Bouton d'appel dans la navbar — plus large, avec icône téléphone */
.nav ul.menu a.btn-primary {
  padding: .7rem 1.5rem;
  white-space: nowrap;
  gap: .5rem;
  font-size: .92rem;
}
.nav ul.menu a.btn-primary svg {
  flex-shrink: 0;
}

/* Rubrique « Urgences ». Elle doit se repérer sans crier : le rouge est
   celui des encadrés d'urgence du site, pas une couleur de plus, et la
   pastille attire l'œil là où un simple gras se perdrait dans la barre. */
.nav ul.menu a.nav-urgence { color: #C0392B; font-weight: 700; }
.nav ul.menu a.nav-urgence::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: .4rem;
  border-radius: 50%;
  background: #C0392B;
  vertical-align: 1px;
}
.nav ul.menu a.nav-urgence:hover,
.nav ul.menu a.nav-urgence.active { color: #922B21; }
.nav ul.menu a.nav-urgence.active::after { background: #C0392B; }

/* Toggle mobile */
/* Le cadre a saute. Il etait trace en vert sapin, la teinte la plus foncee
   de la charte : le bouton pesait donc visuellement plus lourd que le logo
   a cote de lui. Son angle de 8 px jurait en plus avec les boutons du site,
   qui sont tous des pilules.
   Mais retirer le cadre sans rien mettre a la place supprime aussi le seul
   indice qu il s agit d un bouton. On garde donc un etat : un halo rond
   apparait au survol, a l appui et au focus clavier, et l icone elle-meme
   devient une croix quand le menu est ouvert. La cible tactile de 48 px est
   inchangee, elle est simplement invisible au repos. */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: .5rem;
  cursor: pointer;
  color: var(--petrole);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--transition);
}
.menu-toggle:hover,
.menu-toggle:active,
.menu-toggle[aria-expanded="true"] { background: rgba(15, 66, 84, .09); }
.menu-toggle:focus-visible {
  background: rgba(15, 66, 84, .09);
  outline: 2px solid var(--turquoise);
  outline-offset: 2px;
}
.menu-toggle svg { width: 24px; height: 24px; display: block; }

/* Trois traits qui se replient en croix.
   L ordre compte : la translation est ecrite APRES la rotation pour qu elle
   s applique en premier et amene le trait au centre, que la rotation fait
   ensuite pivoter sur place. Ecrit dans l autre sens, la croix serait
   decentree. */
.menu-toggle .bar {
  transform-origin: 12px 12px;
  transition: transform var(--transition), opacity var(--transition);
}
.menu-toggle[aria-expanded="true"] .bar-haut   { transform: rotate(45deg) translateY(6px); }
.menu-toggle[aria-expanded="true"] .bar-milieu { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bar-bas    { transform: rotate(-45deg) translateY(-6px); }

/* Un utilisateur qui a demande moins d animations voit la croix apparaitre
   sans transition, mais il la voit. */
@media (prefers-reduced-motion: reduce) {
  .menu-toggle .bar { transition: none; }
}

/* Menu déroulant (sous-menu "Consignes") */
.nav ul.menu li.has-submenu {
  position: relative;
}
.nav ul.menu li.has-submenu > a .chev {
  display: inline-block;
  margin-left: .25rem;
  transition: transform var(--transition);
  font-size: .7rem;
  vertical-align: middle;
}
.nav ul.menu li.has-submenu:hover > a .chev,
.nav ul.menu li.has-submenu:focus-within > a .chev {
  transform: rotate(180deg);
}
.nav ul.menu .submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 280px;
  background: var(--blanc-marbre);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: .5rem;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 110;
}
.nav ul.menu li.has-submenu:hover > .submenu,
.nav ul.menu li.has-submenu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav ul.menu .submenu li { width: 100%; }
.nav ul.menu .submenu a {
  display: block;
  width: 100%;
  padding: .65rem .9rem;
  border-bottom: none !important;
  border-radius: 8px;
  font-weight: 500;
  font-size: .92rem;
  color: var(--petrole);
}
.nav ul.menu .submenu a:hover,
.nav ul.menu .submenu a.active {
  background: var(--marbre);
  color: var(--turquoise);
}

@media (max-width: 75em) {
  .nav ul.menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    height: 100vh;
    height: 100dvh; /* hauteur dynamique : gère la barre d'URL d'iOS Safari */
    width: min(82%, 360px);
    background: var(--blanc-marbre);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5rem 1.5rem 2rem;
    gap: 1rem;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto;
    z-index: 200; /* au-dessus du header (z:100) et du contenu */
  }
  .nav ul.menu.open { transform: translateX(0); }
  .nav ul.menu a { font-size: 1.05rem; width: 100%; }
  .menu-toggle { display: inline-flex; }

  /* Sous-menu en version mobile : déplié en ligne sous le parent */
  .nav ul.menu li.has-submenu { width: 100%; }
  .nav ul.menu li.has-submenu > a .chev { display: none; }
  .nav ul.menu .submenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: .25rem 0 .5rem .8rem;
    margin-top: .3rem;
    border-left: 2px solid var(--bordure);
  }
  .nav ul.menu .submenu a {
    font-size: .95rem;
    padding: .45rem .6rem;
  }
}


/* ----- 4. Hero ------------------------------------------------------------ */
.hero {
  padding: clamp(2rem, 2rem + 3vw, 5rem) 0;
  background:
    radial-gradient(900px 500px at 90% 10%, rgba(90, 160, 181,.15), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(47, 130, 153,.12), transparent 60%),
    var(--blanc-marbre);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero h1 { margin-bottom: 1rem; }
.hero .lead {
  font-size: 1.15rem;
  color: var(--texte-doux);
  max-width: 55ch;
}
.hero .eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-bottom: 1rem;
}
.hero .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.6rem;
}
.hero-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 1620 / 1080;  /* le rapport exact de la photo de salle de soins :
                                 elle est montree entiere, sans recadrage. */
  background: var(--marbre);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Coordonnees sous les boutons : en feuille et non en ligne, pour pouvoir
   les reordonner sur mobile. */
.hero .hero-coord { margin-top: 1.4rem; font-size: .92rem; }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* Cadrage un peu plus large que sur grand ecran : on rogne du plafond
     et du sol, qui n apprennent rien, pour que le bouton de rendez-vous
     reste au-dessus de la ligne de flottaison. */
  .hero-photo { max-width: 600px; margin: 0 auto; aspect-ratio: 16 / 9; }

  /* La photo passe entre le titre et le paragraphe.
     Mesure avant : elle commencait a 741 px sur un ecran de 812, dont
     l ecran utile n est que d environ 650 une fois les barres du
     navigateur deduites — autrement dit, personne ne la voyait jamais.
     display: contents fait remonter les enfants du bloc texte au rang
     d elements de la grille, seule facon de les intercaler avec la photo
     sans dupliquer le balisage. */
  .hero-text { display: contents; }
  .hero-text > .eyebrow { order: 1; }
  .hero-text > h1       { order: 2; }
  .hero-photo           { order: 3; }
  .hero-text > .lead    { order: 4; }
  .hero-text > .cta     { order: 5; }
  .hero-text > .hero-coord { order: 6; }

  /* Les marges des enfants feraient doublon avec le gap de la grille. */
  .hero .eyebrow,
  .hero h1          { margin-bottom: 0; }
  .hero .cta        { margin-top: 0; }
  .hero .hero-coord { margin-top: 0; }

  /* Chaque ligne gagnee remonte la photo dans l ecran. */
  .hero { padding: 1.9rem 0 2.4rem; }
  .hero .eyebrow { font-size: .72rem; letter-spacing: 2px; }
  /* Le titre reste sur trois lignes : il faudrait descendre a 24,9 px
     pour en gagner une, ce qui est petit pour un h1 et surtout fragile —
     l allemand, plus long, repasserait a trois de toute facon. On reduit
     donc pour la lisibilite, pas pour compter les lignes. */
  .hero h1 { font-size: 1.8rem; }
  /* Le corps du texte ne descend pas sous 16 px : en dessous, la lecture
     devient penible sur telephone. */
  .hero .lead { font-size: 1rem; }
}


/* ----- 5. Sections génériques --------------------------------------------- */
section { padding: clamp(3rem, 2rem + 3vw, 5rem) 0; }

.section-soft { background: var(--marbre); }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.5rem;
}
.section-head .eyebrow,
.equip-texte .eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-bottom: .8rem;
}
.section-head p { color: var(--texte-doux); }


/* ----- 6. Cartes services ------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.service-card {
  background: var(--marbre);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--turquoise);
}
.service-card .icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--petrole);
  color: var(--blanc-marbre);
  display: grid;
  place-items: center;
  margin-bottom: .6rem;
}
/* Les icones Flaticon sont plus detaillees que des traits simples :
   on les affiche un peu plus grand pour rester lisibles a petite taille. */
.service-card .icon svg { width: 32px; height: 32px; }
.service-card h3 { margin: 0; }
.service-card p { color: var(--texte-doux); margin: 0; }

@media (max-width: 880px) { .services-grid { grid-template-columns: 1fr; } }
@media (min-width: 881px) and (max-width: 1100px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }


/* ----- 7. Équipe ---------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.team-card {
  text-align: center;
  background: var(--blanc-marbre);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--bordure);
}
.team-card .avatar {
  width: 100%;
  max-width: 260px;
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  object-fit: cover;
  margin: 0 auto 1rem;
  box-shadow: var(--shadow);
}
.team-card .role {
  display: inline-block;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--turquoise);
  background: var(--marbre);
  padding: .35rem .9rem;
  border-radius: 999px;
  margin-bottom: .8rem;
}
.team-card h3 { font-size: 1.4rem; margin-bottom: .4rem; }
.team-card p { color: var(--texte-doux); margin: 0; }

@media (max-width: 880px) { .team-grid { grid-template-columns: 1fr; } }


/* ----- 8. Consignes post-opératoires -------------------------------------- */
.consignes-list {
  display: grid;
  gap: 1.2rem;
  max-width: 860px;
  margin: 0 auto;
}
.consigne {
  background: var(--blanc-marbre);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--turquoise);
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.6rem;
}
.consigne h3 {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .4rem;
}
.consigne h3 svg {
  flex-shrink: 0;
  color: var(--turquoise);
  /* Les icones Flaticon portent plus de detail que des traits simples : elles
     ont besoin d'un peu plus de place. La taille ne vient plus des attributs
     width/height du HTML, qui ont ete retires avec les anciens dessins. */
  width: 26px;
  height: 26px;
}
.consigne ul {
  margin: .5rem 0 0;
  padding-left: 1.2rem;
}
.consigne ul li {
  margin-bottom: .35rem;
  color: var(--texte);
}
.consigne ul li strong { color: var(--petrole); }

/* Aide-memoire visuel des consignes post-extraction.
   Ces pictogrammes sont volontairement EN COULEUR : ils doivent trancher avec
   les icones vertes des titres, pour se retenir d'un coup d'oeil. */
.memo {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem .6rem;
  margin: 1.3rem 0 .2rem;
  padding: 1.2rem .8rem 1rem;
  list-style: none;
  background: var(--marbre);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
}
.memo li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
  margin: 0;
}
.memo svg { width: 54px; height: 54px; flex-shrink: 0; }
.memo span {
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--petrole);
}
@media (max-width: 620px) {
  .memo { grid-template-columns: repeat(3, 1fr); padding: 1.1rem .6rem; }
  .memo svg { width: 46px; height: 46px; }
  .memo span { font-size: .74rem; }
}

.alert-box {
  background: #FFF3E6;
  border-left: 4px solid #C8881C;
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  max-width: 860px;
  margin: 0 auto 2rem;
  font-size: .95rem;
}
.alert-box strong { color: #8B5A00; }


/* ----- 9. Contact --------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info {
  background: var(--marbre);
  border-radius: var(--radius);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-info h3 { margin-bottom: .2rem; }
.contact-info .info-item {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}
.contact-info .info-item svg {
  flex-shrink: 0;
  color: var(--turquoise);
  margin-top: .2rem;
}
.contact-info .info-item b {
  display: block;
  color: var(--petrole);
  margin-bottom: .15rem;
}

/* Formulaire */
form.contact-form {
  display: grid;
  gap: 1rem;
  background: var(--blanc-marbre);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1.8rem;
}
.contact-form label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--petrole);
  margin-bottom: .3rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: .8rem 1rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--texte);
  background: var(--blanc-marbre);
  border: 1.5px solid var(--bordure);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--turquoise);
  box-shadow: 0 0 0 4px rgba(47, 130, 153,.15);
}
.contact-form textarea { min-height: 130px; resize: vertical; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  color: var(--texte-doux);
  font-weight: 400;
}
.consent input { margin-top: .25rem; accent-color: var(--petrole); }

.alert {
  padding: .9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: none;
}
.alert.success {
  display: block;
  background: #E8F5EC;
  color: #1F5132;
  border: 1px solid #B6D9BF;
}
.alert.error {
  display: block;
  background: #FCEBEA;
  color: #842029;
  border: 1px solid #F1B0B7;
}

.map-embed {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}


/* ----- 10. Footer --------------------------------------------------------- */
.site-footer {
  background: var(--petrole);
  color: #BFD4DB;
  padding: 3rem 0 1.5rem;
  margin-top: 4rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.site-footer h3 {
  color: var(--blanc-marbre);
  font-family: var(--serif);
  font-size: 1.05rem;
  margin-bottom: .8rem;
}
.site-footer a { color: #BFD4DB; }
.site-footer a:hover { color: var(--blanc-marbre); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: .4rem; font-size: .95rem; }
.site-footer .footer-brand { display: flex; gap: .8rem; align-items: center; margin-bottom: .8rem; }
.site-footer .footer-brand img,
.site-footer .footer-brand svg { width: auto; height: 56px; }
.site-footer .footer-brand strong {
  font-family: var(--serif);
  color: var(--blanc-marbre);
  font-size: 1.1rem;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .85rem;
  color: #8FAAB4;
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}


/* ----- 11. Page-header (bandeau page interne) ----------------------------- */
.page-header {
  background:
    linear-gradient(rgba(15, 66, 84,.78), rgba(15, 66, 84,.92)),
    radial-gradient(circle at 20% 80%, var(--bleu-egee), var(--petrole));
  color: var(--blanc-marbre);
  padding: clamp(3rem, 2rem + 3vw, 5rem) 0;
  text-align: center;
}
.page-header .eyebrow { color: var(--cuivre); }
.page-header h1 { color: var(--blanc-marbre); }
.page-header p { color: rgba(250, 252, 253,.85); max-width: 60ch; margin: .8rem auto 0; }


/* ----- 12. Bannière CTA — appel téléphonique --------------------------- */
.cta-band {
  background: var(--petrole);
  color: var(--blanc-marbre);
  padding: 3rem 0;
  text-align: center;
}
.cta-band h2 { color: var(--blanc-marbre); margin-bottom: .8rem; }
.cta-band p { color: rgba(250, 252, 253,.85); max-width: 55ch; margin: 0 auto 1.6rem; }
/* Un lien en texte courant sur la bande verte : le vert forêt du site y est
   illisible. On le passe en or doux, souligné pour rester identifiable. */
.cta-band p a {
  color: var(--cuivre);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cta-band p a:hover { color: var(--blanc-marbre); }


/* ----- 12 bis. Sélecteur de langue --------------------------------------- */
.nav ul.menu li.lang-picker {
  position: relative;
  margin-left: .4rem;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: transparent;
  border: 1.5px solid var(--bordure);
  border-radius: 999px;
  padding: .35rem .7rem;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 600;
  color: var(--petrole);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.lang-btn:hover {
  border-color: var(--turquoise);
  background: var(--marbre);
}
.lang-btn .flag { font-size: 1.05rem; line-height: 1; }
.lang-btn .chev { font-size: .65rem; opacity: .7; transition: transform var(--transition); }
.lang-picker.open .lang-btn .chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--blanc-marbre);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  list-style: none;
  margin: 0;
  padding: .35rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 120;
}
.lang-picker.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-menu li { width: 100%; }
.lang-menu button {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: .55rem .8rem;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 500;
  color: var(--petrole);
  cursor: pointer;
  text-align: left;
}
.lang-menu button:hover { background: var(--marbre); color: var(--turquoise); }
.lang-menu button.active {
  background: var(--marbre);
  font-weight: 700;
  color: var(--turquoise);
}
.lang-menu .flag { font-size: 1.1rem; line-height: 1; }

@media (max-width: 75em) {
  .nav ul.menu li.lang-picker { margin-left: 0; width: 100%; padding-top: .5rem; border-top: 1px solid var(--bordure); margin-top: .5rem; }
  .lang-btn { width: 100%; justify-content: flex-start; }
  .lang-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: .25rem 0 0;
    margin-top: .3rem;
    display: none;
  }
  .lang-picker.open .lang-menu { display: flex; }
}

/* ----- 12 ter. Bannière "site en construction" --------------------------- */
.construction-banner {
  background: #FFF8EC;
  color: #6E5616;
  border-bottom: 1px solid #E8D9B8;
  padding: .55rem 2.6rem .55rem 1rem;
  text-align: center;
  font-size: .85rem;
  font-family: var(--sans);
  position: relative;
  line-height: 1.4;
}
.construction-banner .banner-close {
  position: absolute;
  top: 50%;
  right: .6rem;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #6E5616;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: .15rem .45rem;
  border-radius: 6px;
  opacity: .7;
  transition: opacity var(--transition), background var(--transition);
}
.construction-banner .banner-close:hover {
  opacity: 1;
  background: rgba(110,86,22,.12);
}


/* ----- 13. Helpers -------------------------------------------------------- */
.text-center { text-align: center; }
.muted { color: var(--texte-doux); }
.tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--turquoise);
  background: var(--marbre);
  padding: .3rem .8rem;
  border-radius: 999px;
}


/* ==========================================================================
   14. CORRECTIFS & AJOUTS  (revue technique)
   ========================================================================== */

/* ----- 14.1 Accessibilité : lien d'évitement clavier ---------------------- */
/* Titre de structure, lu par les lecteurs d'écran mais non affiché.
   display:none le retirerait de l'arbre d'accessibilité : il faut le sortir
   du flux visuel sans le retirer du document. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--petrole);
  color: var(--blanc-marbre);
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-family: var(--sans);
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
  color: var(--blanc-marbre);
}

/* ----- 14.2 Focus visible (navigation clavier) ---------------------------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--turquoise);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----- 14.3 Ancres : ne plus passer sous le header sticky ----------------- */
html { scroll-padding-top: 7rem; }

/* ----- 14.4 Menu mobile : bouton toujours cliquable + voile --------------- */
/* Le panneau du menu (z-index 200) recouvrait le bouton hamburger :
   il devenait impossible de refermer le menu autrement qu'en cliquant un lien. */
.menu-toggle {
  position: relative;
  z-index: 210;
}
.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 66, 84,.45);
  /* Doit rester SOUS .site-header (z-index:100), car le header crée son propre
     contexte d'empilement : le panneau du menu (z:200) et le bouton (z:210)
     y sont confinés et seraient masqués par un voile à z-index > 100. */
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.menu-backdrop.show { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
@media (min-width: 75.01em) {
  .menu-backdrop { display: none; }
  body.menu-open { overflow: auto; }
}

/* ----- 14.5 Respect de « prefers-reduced-motion » ------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .service-card:hover, .team-preview-card:hover { transform: none; }
}


/* ==========================================================================
   15. ENCART « ÉQUIPE » — page d'accueil
   ========================================================================== */
.team-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 980px;
  margin: 0 auto;
}
.team-preview-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.5rem;
  align-items: start;
  background: var(--blanc-marbre);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.team-preview-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--turquoise);
}
.team-preview-card .avatar {
  width: 150px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.team-preview-card .role {
  display: inline-block;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--turquoise);
  background: var(--marbre);
  padding: .3rem .8rem;
  border-radius: 999px;
  margin-bottom: .6rem;
}
.team-preview-card h3 { font-size: 1.25rem; margin: 0 0 .5rem; }
.team-preview-card p {
  color: var(--texte-doux);
  font-size: .95rem;
  margin: 0 0 .9rem;
}
.cv-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .9rem;
  color: var(--turquoise);
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition);
}
.cv-link:hover { border-bottom-color: var(--turquoise); }
.cv-link svg { width: 15px; height: 15px; flex-shrink: 0; }

@media (max-width: 1000px) { .team-preview-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .team-preview-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .team-preview-card .avatar { width: 170px; }
}


/* ==========================================================================
   16. PAGES CV / PARCOURS
   ========================================================================== */
.cv-intro-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}
.cv-portrait {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 3 / 4;
  background: var(--marbre);
  position: sticky;
  top: 7rem;
}
.cv-portrait img { width: 100%; height: 100%; object-fit: cover; }
.cv-identity .role {
  display: inline-block;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--turquoise);
  background: var(--marbre);
  padding: .35rem .9rem;
  border-radius: 999px;
  margin-bottom: .9rem;
}
.cv-identity h2 { margin-top: 0; }
.cv-identity p { color: var(--texte-doux); }

/* Petites méta-infos (origine, langues, diplôme…) */
.cv-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}
.cv-facts li {
  background: var(--marbre);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
}
.cv-facts b {
  display: block;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-bottom: .25rem;
}
.cv-facts span { font-size: .95rem; }

/* ----- Frise chronologique ------------------------------------------------ */
.timeline {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding-left: 2.2rem;
  list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  left: .48rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: linear-gradient(var(--turquoise), var(--cuivre));
  border-radius: 2px;
}
.timeline > li {
  position: relative;
  padding: 0 0 1.8rem;
}
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: -2.2rem;
  top: .45rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blanc-marbre);
  border: 3px solid var(--turquoise);
  box-shadow: 0 0 0 4px var(--blanc-marbre);
}
.section-soft .timeline > li::before { box-shadow: 0 0 0 4px var(--marbre); }
.timeline .tl-year {
  display: inline-block;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--turquoise);
  margin-bottom: .2rem;
}
.timeline h3 {
  font-size: 1.08rem;
  margin: 0 0 .25rem;
}
.timeline p {
  margin: 0;
  color: var(--texte-doux);
  font-size: .95rem;
}

/* ----- Compétences (puces) ------------------------------------------------ */
.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  max-width: 860px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.skill-tags li {
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 600;
  color: var(--petrole);
  background: var(--blanc-marbre);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--turquoise);
  border-radius: var(--radius-sm);
  padding: .6rem 1rem;
}

/* ----- Encart « engagement / humanitaire » -------------------------------- */
.highlight-box {
  max-width: 860px;
  margin: 0 auto;
  background: var(--marbre);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--cuivre);
  border-radius: var(--radius-sm);
  padding: 1.6rem 1.8rem;
}
.highlight-box h3 { margin-top: 0; }
.highlight-box p:last-child { margin-bottom: 0; }
.section-soft .highlight-box { background: var(--blanc-marbre); }

/* ----- Navigation entre les deux CV --------------------------------------- */
.cv-switch {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

@media (max-width: 880px) {
  .cv-intro-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cv-portrait { position: static; max-width: 280px; margin: 0 auto; }
}

/* ----- 16 bis. Marqueur « contenu a completer » (visible en relecture) ----- */
.todo {
  background: #FFF8EC;
  border-left-color: #D9A404 !important;
}
.todo .tl-year, .todo b { color: #8A6D0B; }
.todo::after {
  content: attr(data-todo);
  display: inline-block;
  margin-left: .5rem;
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8A6D0B;
  background: #F7E7BF;
  padding: .15rem .5rem;
  border-radius: 999px;
  vertical-align: middle;
}


/* ==========================================================================
   17. DRAPEAUX DU SÉLECTEUR DE LANGUE
   --------------------------------------------------------------------------
   Les emoji drapeaux (🇫🇷 🇬🇧 …) ne sont PAS rendus par Windows : le
   navigateur affiche les deux lettres du code pays, ce qui donnait
   « FR FR », « GB EN », « DE DE », « LU LB » dans le sélecteur.
   On masque donc le caractère emoji (déjà présent dans le HTML) et on
   affiche à la place un petit drapeau SVG, identique sur tous les systèmes.
   ========================================================================== */
.flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 2px;
  border: 1px solid rgba(15, 66, 84,.18);
  background-size: cover;
  background-position: center;
  /* masque l'emoji présent dans le HTML */
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent;
  overflow: hidden;
  vertical-align: middle;
}

.flag-fr,
.lang-menu button[data-lang="fr"] .flag {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23fff'/%3E%3Crect width='1' height='2' fill='%230055A4'/%3E%3Crect x='2' width='1' height='2' fill='%23EF4135'/%3E%3C/svg%3E");
}

.flag-en,
.lang-menu button[data-lang="en"] .flag {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0 0 60 30M60 0 0 30' stroke='%23fff' stroke-width='7'/%3E%3Cpath d='M0 0 60 30M60 0 0 30' stroke='%23C8102E' stroke-width='3'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='11'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
}



/* Le code langue reste lisible à côté du drapeau */
.lang-btn .lang-code { font-size: .85rem; line-height: 1; }


/* ----- 18. Frise groupée par année (formation continue) ------------------- */
/* Une puce = une année ; les formations de l'année sont listées en dessous. */
.timeline .tl-items {
  margin: .45rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .45rem;
}
.timeline .tl-items li {
  font-size: .95rem;
  line-height: 1.45;
  padding-left: .9rem;
  position: relative;
}
.timeline .tl-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cuivre);
}
.timeline .tl-items strong {
  font-weight: 600;
  color: var(--texte);
}
.timeline .tl-items .org {
  color: var(--texte-doux);
  font-size: .9rem;
}
.timeline > li.year > .tl-year {
  font-size: .95rem;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--petrole);
  font-family: var(--serif);
}


/* ----- 18 bis. Jalons dans la frise (diplômes / exercice) ----------------- */
/* La frise mélange formation initiale, exercice et formation continue.
   Les jalons (diplôme obtenu, poste occupé) sont mis en avant par rapport
   aux formations continues, listées plus sobrement. */
.timeline .tl-items li.milestone {
  padding-top: .15rem;
  padding-bottom: .15rem;
}
.timeline .tl-items li.milestone::before {
  width: 7px;
  height: 7px;
  top: .58em;
  left: -1px;
  background: var(--turquoise);
}
.timeline .tl-items li.milestone strong {
  color: var(--petrole);
  font-weight: 700;
}
.tl-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--turquoise);
  background: var(--blanc-marbre);
  border: 1px solid var(--bordure);
  padding: .1rem .45rem;
  border-radius: 999px;
  margin-right: .45rem;
  vertical-align: 1px;
}
.section-soft .tl-tag { background: var(--marbre); }
.tl-note {
  display: block;
  color: var(--texte-doux);
  font-size: .85rem;
  margin-top: .1rem;
}

/* ----- 18 ter. Formations à venir (inscrites, pas encore réalisées) ------- */
/* Puce creuse + étiquette ambrée : on distingue d'un coup d'œil ce qui est
   acquis de ce qui est programmé. */
.timeline .tl-items li.upcoming::before {
  width: 7px;
  height: 7px;
  top: .55em;
  left: -1px;
  background: transparent;
  border: 2px solid #D9A404;
}
.timeline .tl-items li.upcoming strong { color: var(--texte-doux); }
.tl-tag.tag-soon {
  color: #8A6D0B;
  background: #FFF8EC;
  border-color: #E8D9B8;
}


/* ==========================================================================
   19. PAGES D'INFORMATION — questions / réponses
   --------------------------------------------------------------------------
   Accordéon en <details>/<summary> natif : fonctionne sans JavaScript,
   accessible au clavier et aux lecteurs d'écran, et Google sait le lire.
   ========================================================================== */
.faq {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: .9rem;
}

.faq details {
  background: var(--blanc-marbre);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--turquoise);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.faq details[open] {
  box-shadow: var(--shadow-sm);
  border-left-color: var(--cuivre);
}
.faq details:hover { border-color: var(--turquoise); }

.faq summary {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--petrole);
  line-height: 1.35;
  list-style: none;                 /* masque le triangle par défaut */
}
.faq summary::-webkit-details-marker { display: none; }

/* Chevron dessiné en CSS, pivote à l'ouverture */
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-left: auto;
  margin-top: .35em;
  border-right: 2px solid var(--turquoise);
  border-bottom: 2px solid var(--turquoise);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.faq details[open] summary::after { transform: rotate(-135deg); }

.faq .answer {
  padding: 0 1.3rem 1.3rem;
  color: var(--texte-doux);
}
.faq .answer > *:last-child { margin-bottom: 0; }
.faq .answer ul {
  margin: .6rem 0 1rem;
  padding-left: 1.2rem;
}
.faq .answer li { margin-bottom: .35rem; }
.faq .answer strong { color: var(--texte); }

/* Encadré « à retenir » à l'intérieur d'une réponse */
.faq .keypoint {
  background: var(--marbre);
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
  margin: .9rem 0 0;
  font-size: .95rem;
}

/* ----- Repères par âge --------------------------------------------------- */
.age-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.age-card {
  background: var(--blanc-marbre);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1.4rem;
  text-align: center;
}
.age-card .age {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--turquoise);
  margin-bottom: .4rem;
}
.age-card h3 { font-size: 1rem; margin-bottom: .4rem; }
.age-card p {
  margin: 0;
  font-size: .9rem;
  color: var(--texte-doux);
}

@media (max-width: 900px) { .age-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .age-grid { grid-template-columns: 1fr; } }

/* ----- Encadré urgence --------------------------------------------------- */
.urgence-box {
  max-width: 820px;
  margin: 0 auto;
  background: #FFF5F5;
  border: 1px solid #F0C9C9;
  border-left: 4px solid #C0392B;
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.6rem;
}
.urgence-box h3 { color: #922B21; margin-top: 0; }
.urgence-box p:last-child { margin-bottom: 0; }

/* (l'ancien style « lien en savoir plus » a ete remplace par les boutons
   de carte de la section 23 — regles supprimees car plus specifiques,
   elles ecrasaient la nouvelle pastille et la reduisaient a 18 px.) */


/* ==========================================================================
   20. PHOTOS CLINIQUES EN ÉTAPES
   --------------------------------------------------------------------------
   Trois photos légendées qui racontent le déroulé d'un traitement.
   ========================================================================== */
.photo-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
.photo-steps figure {
  margin: 0;
  background: var(--blanc-marbre);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.photo-steps img {
  height: auto;                     /* sinon l'attribut HTML height fige la hauteur */
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.photo-steps figcaption {
  padding: 1rem 1.1rem 1.2rem;
}
.photo-steps .step-num {
  display: inline-block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-bottom: .3rem;
}
.photo-steps figcaption strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--petrole);
  margin-bottom: .3rem;
}
.photo-steps figcaption span.txt {
  display: block;
  font-size: .9rem;
  color: var(--texte-doux);
  line-height: 1.5;
}
.photo-credit {
  text-align: center;
  font-size: .82rem;
  color: var(--texte-doux);
  margin: 1.2rem auto 0;
  max-width: 1000px;
}

@media (max-width: 880px) { .photo-steps { grid-template-columns: 1fr; max-width: 420px; } }


/* ----- Avantages / limites ----------------------------------------------- */
.proscons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 940px;
  margin: 0 auto;
}
.proscons > div {
  background: var(--blanc-marbre);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
}
.proscons h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 0;
  font-size: 1.1rem;
}
.proscons ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.proscons li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .7rem;
  font-size: .95rem;
  color: var(--texte-doux);
  line-height: 1.5;
}
.proscons li:last-child { margin-bottom: 0; }
.proscons .pros { border-left: 3px solid var(--turquoise); }
.proscons .cons { border-left: 3px solid var(--cuivre); }
.proscons .pros li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--turquoise);
  border-bottom: 2px solid var(--turquoise);
  transform: rotate(-45deg);
}
.proscons .cons li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .62em;
  width: 8px;
  height: 2px;
  background: #C9A227;
}

@media (max-width: 780px) { .proscons { grid-template-columns: 1fr; } }


/* ----- Déroulé en 2 séances ---------------------------------------------- */
.seances {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 860px;
  margin: 0 auto;
}
.seance {
  background: var(--marbre);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  position: relative;
}
.seance .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--petrole);
  color: var(--blanc-marbre);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .8rem;
}
.seance h3 { margin-bottom: .5rem; }
.seance p { margin: 0; color: var(--texte-doux); font-size: .95rem; }

@media (max-width: 780px) { .seances { grid-template-columns: 1fr; } }

/* ==========================================================================
   21. FIGURE ILLUSTRATIVE (matériel, détail technique)
   --------------------------------------------------------------------------
   Petite photo légendée, à placer dans une réponse de FAQ ou une section.
   ========================================================================== */
.inline-figure {
  margin: 1.2rem auto 0;
  max-width: 340px;
  background: var(--blanc-marbre);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.inline-figure img {
  height: auto;                     /* idem : laisse agir aspect-ratio */
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Les photos d'equipement sont souvent verticales. Sans cette variante,
   le cadre 4/3 ci-dessus en decoupait la moitie. */
.inline-figure.portrait { max-width: 300px; }
.inline-figure.portrait img { aspect-ratio: 3 / 4; }
.inline-figure figcaption {
  padding: .7rem .9rem .8rem;
  font-size: .85rem;
  color: var(--texte-doux);
  line-height: 1.45;
}
.inline-figure figcaption b {
  display: block;
  color: var(--petrole);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: .2rem;
}
/* Deux figures côte à côte */
.figure-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 760px;
  margin: 0 auto;
}
.figure-pair .inline-figure { margin: 0; max-width: none; }
@media (max-width: 700px) { .figure-pair { grid-template-columns: 1fr; max-width: 340px; } }

/* ----- 21 bis. Comparaison en deux cartes (gingivite / parodontite) ------- */
.compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 940px;
  margin: 0 auto;
}
.compare-card {
  background: var(--blanc-marbre);
  border: 1px solid var(--bordure);
  border-top: 4px solid var(--turquoise);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
}
.compare-card.warn { border-top-color: #D9A404; }
.compare-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--turquoise);
  background: var(--marbre);
  padding: .25rem .7rem;
  border-radius: 999px;
  margin-bottom: .7rem;
}
.compare-card.warn .compare-tag { color: #8A6D0B; background: #FFF8EC; }
.compare-card h3 { margin-bottom: .5rem; }
.compare-card p { margin: 0; color: var(--texte-doux); font-size: .95rem; }
@media (max-width: 780px) { .compare { grid-template-columns: 1fr; } }

/* Variante 3 colonnes de la grille de repères */
.age-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .age-grid.three { grid-template-columns: 1fr; max-width: 480px; } }

/* ==========================================================================
   22. VIDÉO AUTO-HÉBERGÉE
   --------------------------------------------------------------------------
   Lecture au clic uniquement, aucun service tiers, aucun cookie : rien n'est
   chargé tant que le visiteur ne le demande pas (preload="metadata").
   ========================================================================== */
.video-block {
  max-width: 820px;
  margin: 0 auto;
  background: var(--blanc-marbre);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.video-block video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--petrole);
}
.video-block figcaption {
  padding: 1rem 1.3rem 1.2rem;
  font-size: .9rem;
  color: var(--texte-doux);
  line-height: 1.5;
}
.video-block figcaption b {
  display: block;
  color: var(--petrole);
  font-family: var(--serif);
  font-size: 1.02rem;
  margin-bottom: .25rem;
}
.video-credit {
  display: block;
  margin-top: .5rem;
  font-size: .8rem;
  color: var(--texte-doux);
  font-style: italic;
}

/* Dans une paire, on montre les clichés en entier plutôt que recadrés :
   sur une photo clinique ou une radio, chaque bord compte. */
.figure-pair .inline-figure img {
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--marbre);
}
.figure-pair { align-items: start; }

/* ==========================================================================
   23. BOUTONS DE NAVIGATION DANS LES CARTES
   --------------------------------------------------------------------------
   Les liens « en savoir plus » des cartes de service étaient de simples liens
   soulignés : peu visibles, et surtout de trop petites cibles tactiles.
   Ils deviennent des boutons pleine largeur, hauteur minimale 48 px.
   ========================================================================== */
.card-link {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  min-height: 52px;
  margin-top: .5rem;
  padding: .5rem .5rem .5rem 1.1rem;
  background: var(--blanc-marbre);
  border: 1px solid var(--bordure);
  /* Pilule, comme les .btn du site : les boutons de carte appartiennent
     visiblement à la même famille que « Prendre rendez-vous ». */
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-family: var(--sans);
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.3;
  color: var(--petrole);
  text-align: left;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition), color var(--transition);
}
.card-link > span { flex: 1; min-width: 0; }

/* La flèche devient une pastille ronde pleine : c'est elle qui signale
   « ceci est un bouton » et qui donne au bloc son point d'accroche. */
.card-link svg {
  width: 34px;
  height: 34px;
  padding: 9px;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--petrole);
  color: var(--blanc-marbre);
  transition: background var(--transition), transform var(--transition);
}
.card-link:hover,
.card-link:focus-visible {
  border-color: var(--turquoise);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  color: var(--turquoise);
}
.card-link:hover svg,
.card-link:focus-visible svg {
  background: var(--turquoise);
  transform: translateX(3px);
}

/* Sur fond clair (cartes .age-card, encart équipe), on teinte le bouton
   pour qu'il se détache du fond au lieu de s'y fondre. */
.age-card .card-link,
.team-preview-card .card-link { background: var(--marbre); }

/* Le premier bouton est repoussé en bas : les groupes de boutons
   s'alignent d'une carte à l'autre, quel que soit leur nombre. */
.service-card .card-link:first-of-type { margin-top: auto; }

/* Un peu d'air entre le dernier bouton et le bord de la carte */
.service-card .card-link:last-of-type { margin-bottom: .15rem; }


/* ==========================================================================
   24. CONFORT TACTILE — cibles d'au moins 44 px sur petits écrans
   --------------------------------------------------------------------------
   Recommandation WCAG 2.5.8 : toute cible interactive doit mesurer au
   minimum 44 x 44 px. Plusieurs liens du site étaient sous ce seuil.
   ========================================================================== */
@media (max-width: 75em) {

  /* Menu principal */
  .nav ul.menu > li > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: .35rem 0;
  }
  .nav ul.menu .submenu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .5rem .7rem;
    font-size: 1rem;
  }
  .lang-menu button { min-height: 48px; font-size: 1rem; }
  .lang-btn { min-height: 48px; }

  /* Bouton de fermeture de la bannière */
  .construction-banner {
    padding-right: 3.2rem;
    font-size: .82rem;
  }
  .construction-banner .banner-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    right: .2rem;
  }

  /* Liens du pied de page : plus d'air entre les lignes */
  .site-footer ul li { margin-bottom: .2rem; }
  .site-footer ul li a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Boutons d'action : pleine largeur, plus faciles à viser */
  .hero .cta .btn,
  .cta-band .cta .btn,
  .cv-switch .btn { width: 100%; justify-content: center; }
  .hero .cta, .cta-band .cta, .cv-switch { width: 100%; }

  /* Accordéons de FAQ */
  .faq summary { min-height: 56px; padding: 1rem 1.1rem; }
  .faq .answer { padding: 0 1.1rem 1.1rem; }
}

/* Très petits écrans : on resserre les marges internes sans rogner le texte */
@media (max-width: 420px) {
  .container { width: min(100% - 1.5rem, var(--maxw)); }
  .service-card, .age-card, .compare-card, .seance,
  .proscons > div, .highlight-box, .urgence-box { padding: 1.2rem 1.1rem; }
  .cv-facts { grid-template-columns: 1fr; }
  .timeline { padding-left: 1.7rem; }
  .timeline > li::before { left: -1.7rem; }
  .nav .brand img, .nav .brand svg { width: 56px; height: 56px; }
  .nav .brand-text strong { font-size: .95rem; }
  .nav .brand-text span { font-size: .62rem; letter-spacing: 1.4px; }
}

/* Aucun débordement horizontal, quel que soit le contenu */
html, body { overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }

/* Correctifs de cibles tactiles releves au test sur 375 px */
@media (max-width: 75em) {
  .menu-toggle { min-width: 48px; min-height: 48px; justify-content: center; }
  .site-footer ul li a,
  .footer-bottom a { min-height: 44px; }
}

/* Liens autonomes et coordonnees : zone tactile elargie sur mobile.
   Pour un element inline, le padding vertical agrandit la zone cliquable
   SANS modifier l'interligne — on gagne en confort sans casser le texte.
   Les liens inseres dans une phrase courante restent inchanges : la regle
   WCAG 2.5.8 les exempte, et les agrandir disloquerait le paragraphe. */
@media (max-width: 880px) {
  .cv-link { min-height: 44px; }
  .contact-info .info-item a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  a[href^="tel:"]:not(.btn):not(.card-link),
  a[href^="mailto:"]:not(.btn):not(.card-link) { padding-block: .5rem; }
}

/* ----- 26. Questionnaire médical -----------------------------------------
   Formulaire strictement local : aucun envoi, aucun stockage. La sortie
   utile est la version imprimée, d'où une feuille d'impression soignée
   en fin de section. */

/* Rappel du questionnaire, dans le formulaire de contact */
.ctc-premiere {
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  background: var(--marbre);
  border-left: 3px solid var(--turquoise);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  line-height: 1.5;
}
.ctc-premiere strong { color: var(--petrole); }

.q-privacy {
  max-width: 860px;
  margin: 0 auto 2.2rem;
  background: #E9F1F4;
  border: 1px solid #C4DAE1;
  border-left: 4px solid var(--turquoise);
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.6rem;
}
.q-privacy h2 { margin: 0 0 .7rem; font-size: 1.15rem; color: var(--petrole); }
.q-privacy p { margin: 0 0 .6rem; font-size: .95rem; }
.q-privacy p:last-child { margin-bottom: 0; }
.q-privacy .q-warn {
  margin-top: .9rem;
  padding: .7rem .9rem;
  background: #FFF6E8;
  border-radius: var(--radius-sm);
  font-size: .92rem;
}

.q-form { max-width: 860px; margin: 0 auto; }

.q-block {
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  background: var(--blanc-marbre);
  padding: 1.3rem 1.5rem 1.5rem;
  margin: 0 0 1.2rem;
}
.q-block legend {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--petrole);
  padding: 0 .5rem;
  margin-left: -.5rem;
}

.q-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 1.1rem; }
.q-field { display: block; }
/* L'attribut hidden vient de la feuille du navigateur : une classe le
   supplante. Il faut donc le réaffirmer, sinon les champs « si oui »
   masqués restent affichés — et s'impriment. */
.q-field[hidden],
.q-detail[hidden] { display: none !important; }
.q-field.q-wide { grid-column: 1 / -1; }
.q-field > span {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--petrole);
  margin-bottom: .25rem;
}
/* Champ obligatoire : l'astérisque est ajoutée par le style, pour que la
   chaîne traduite reste du texte pur. */
.q-field > span.q-req::after { content: " *"; color: #C0392B; font-weight: 700; }

.q-field input,
.q-field textarea,
.q-inline {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--texte);
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  padding: .55rem .7rem;
}
.q-field input:focus-visible,
.q-field textarea:focus-visible,
.q-inline:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 1px;
}
.q-field textarea { resize: vertical; }
.q-court input { max-width: 260px; }
.q-hint {
  display: block;
  margin-top: .25rem;
  font-size: .8rem;
  font-style: normal;
  color: var(--texte-doux);
}

.q-q { padding: .9rem 0; border-top: 1px solid var(--bordure); }
.q-q:first-of-type { border-top: 0; padding-top: .3rem; }
.q-ask { margin: 0 0 .5rem; font-weight: 600; color: var(--petrole); }
.q-ask em { display: block; font-weight: 400; font-style: italic; font-size: .88rem; color: var(--texte-doux); }

/* Oui / Non : cases dessinées, pour qu'elles restent lisibles à l'impression */
.q-yn { display: flex; gap: .5rem; flex-wrap: wrap; }
.q-yn input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.q-yn label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .4rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: #fff;
  font-size: .92rem;
  font-weight: 600;
  color: var(--texte-doux);
  cursor: pointer;
}
.q-yn label::before {
  content: "";
  width: 14px; height: 14px;
  border: 1.5px solid var(--texte-doux);
  border-radius: 50%;
  flex-shrink: 0;
}
.q-yn input[type=radio]:checked + label {
  border-color: var(--turquoise);
  background: var(--marbre);
  color: var(--petrole);
}
.q-yn input[type=radio]:checked + label::before {
  border-color: var(--turquoise);
  background: var(--turquoise);
  box-shadow: inset 0 0 0 3px #fff;
}
.q-yn input[type=radio]:focus-visible + label { outline: 2px solid var(--turquoise); outline-offset: 2px; }

.q-check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  min-height: 44px;
  padding: .5rem 0;
  font-size: .95rem;
  cursor: pointer;
}
.q-check input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  margin-top: .15rem;
  border: 1.5px solid var(--texte-doux);
  border-radius: 3px;
  background: #fff;
  flex-shrink: 0;
  display: grid;
  place-content: center;
}
.q-check input[type=checkbox]::after {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform .12s ease;
}
.q-check input[type=checkbox]:checked { background: var(--turquoise); border-color: var(--turquoise); }
.q-check input[type=checkbox]:checked::after { transform: rotate(-45deg) scale(1); }
.q-check input[type=checkbox]:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }

.q-inline { margin: 0 0 .6rem 1.7rem; width: calc(100% - 1.7rem); }
.q-note { font-size: .87rem; color: var(--texte-doux); margin: .3rem 0 .8rem; }
.q-detail { margin-top: .7rem; }

.q-attest p { font-size: .95rem; }
.q-sign { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-top: .9rem; }
.q-signline { height: 46px; border-bottom: 1px solid var(--texte-doux); }

.q-actions {
  max-width: 860px;
  margin: 1.6rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
}
.q-actions .q-note { flex-basis: 100%; margin: .2rem 0 0; }

.q-print-head { display: none; }

@media (max-width: 700px) {
  .q-grid, .q-sign { grid-template-columns: 1fr; }
  .q-block { padding: 1.1rem 1rem 1.2rem; }
  .q-actions .btn { width: 100%; justify-content: center; }
}

/* ----- 26 bis. Impression du questionnaire -------------------------------
   La sortie papier est le seul « livrable » du formulaire. Elle doit tenir
   sur une feuille, se lire d'un coup d'œil au fauteuil, et montrer les
   réponses cochées même quand le navigateur n'imprime pas les fonds.

   Deux partis pris :
   - question et réponse sur la même ligne, comme sur un formulaire papier,
     plutôt qu'empilées comme à l'écran ;
   - les consignes de remplissage disparaissent : « cochez si… », « ne
     remplissez que si… » ne servent qu'à celui qui saisit, pas à celui qui
     lit la copie. */
@media print {

  /* Ceinture de sécurité : rien ne doit rogner la feuille. */
  html, body {
    height: auto !important;
    overflow: visible !important;
  }

  .site-header,
  .site-footer,
  .construction-banner,
  .skip-link,
  .page-header,
  .q-privacy,
  .q-actions,
  .q-note,
  .cta-band { display: none !important; }

  body { background: #fff; color: #000; font-size: 9.5pt; line-height: 1.35; }
  section { padding: 0 !important; }
  .container { max-width: none; width: auto; padding: 0; }
  .q-form { max-width: none; }

  /* En-tête du document */
  .q-print-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1.2pt solid #000;
    padding-bottom: 3pt;
    margin-bottom: 5pt;
  }
  .q-print-head strong { font-family: var(--serif); font-size: 14pt; }
  .q-print-head span { font-size: 8pt; }

  /* Sections : un simple titre souligné, sans encadré ni encoche */
  .q-block {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
    margin: 0 0 5pt;
    break-inside: avoid;
  }
  .q-block legend {
    display: block;
    width: 100%;
    font-family: var(--serif);
    font-size: 10pt;
    font-weight: 700;
    color: #000;
    padding: 0 0 1pt;
    margin: 0 0 3pt;
    border-bottom: .6pt solid #000;
  }

  /* Identité : trois colonnes, libellé au-dessus du trait de saisie */
  .q-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3pt 8pt; }
  .q-field.q-wide { grid-column: 1 / -1; }
  .q-field > span { color: #000; font-size: 7.5pt; margin: 0; }
  .q-field > span.q-req::after { content: ""; }
  .q-hint { display: none; }

  /* Question et réponse sur une seule ligne */
  .q-q {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8pt;
    padding: 1.5pt 0;
    border-top: .4pt solid #d0d0d0;
  }
  .q-q:first-of-type { border-top: 0; padding-top: 0; }
  .q-ask { flex: 1 1 auto; margin: 0; color: #000; font-weight: 600; }
  .q-ask em { display: inline; font-size: 8pt; font-weight: 400; }
  .q-yn { flex: 0 0 auto; gap: 8pt; }
  .q-detail { flex: 1 1 100%; margin: 1pt 0 0 10pt; }
  .q-detail > span { font-weight: 400; }

  /* Champs saisis : on garde le trait, on retire le décor */
  .q-field input,
  .q-field textarea,
  .q-inline {
    border: 0;
    border-bottom: .5pt solid #999;
    border-radius: 0;
    padding: 0;
    font-size: 9.5pt;
    background: none;
    min-height: 0;
  }
  /* Deux lignes suffisent : les réponses tiennent en une phrase, et la
     hauteur d'origine faisait basculer la copie sur une seconde page. */
  .q-field textarea { height: 2.1em; resize: none; }
  .q-court input { max-width: 120pt; }
  .q-field input::placeholder,
  .q-inline::placeholder { color: transparent; }
  input[type=date]::-webkit-calendar-picker-indicator { display: none; }

  /* Cases cochées : les fonds doivent être imprimés, sinon la réponse
     disparaît sur les navigateurs qui les suppriment par défaut. */
  .q-yn label {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none !important;
    color: #999;
    font-size: 9.5pt;
    gap: 3pt;
  }
  .q-yn input[type=radio]:checked + label { color: #000; font-weight: 700; }
  .q-yn label::before { width: 8pt; height: 8pt; border-color: #666; }
  .q-yn input[type=radio]:checked + label::before {
    background: #000 !important;
    border-color: #000;
    box-shadow: inset 0 0 0 1.6pt #fff;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .q-check { min-height: 0; padding: .5pt 0; font-size: 9.5pt; gap: 5pt; }
  .q-check input[type=checkbox] { width: 9pt; height: 9pt; margin-top: 1pt; border-color: #666; }
  .q-check input[type=checkbox]:checked {
    background: #000 !important;
    border-color: #000;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .q-inline { margin: 0 0 2pt 14pt; width: calc(100% - 14pt); }
  /* Un champ « Lequel ? » resté vide affiche encore son texte d'invite :
     :placeholder-shown permet donc de le repérer et de le retirer, au lieu
     de laisser un trait vide creuser la liste des médicaments. */
  .q-inline:placeholder-shown { display: none; }

  /* Attestation : le texte, puis date et signature côte à côte */
  .q-attest { break-inside: avoid; margin-top: 6pt; }
  .q-attest p { font-size: 8.5pt; margin: 0 0 4pt; }
  .q-sign { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12pt; margin-top: 2pt; }
  .q-signline { height: 26pt; border-bottom: .8pt solid #000; }

  @page { margin: 12mm; }
}

/* ----- 27. Bande équipement de l'accueil -----------------------------------
   Le souhait initial était un bandeau qui fasse défiler les photos tout seul.
   Une bande fixe le remplace : les deux images sont visibles en même temps,
   personne n'attend son tour, et rien ne bouge sous le curseur au moment du
   clic. La photo est verticale, d'où la colonne étroite à gauche. */
.equip-band { background: var(--marbre); }

.equip-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
}
.equip-photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--blanc-marbre);
}
.equip-photo img {
  display: block;
  width: 100%;
  height: auto;
}
/* Photo isolee, presentee en pleine largeur de la colonne de texte.
   Contrairement a .equip-photo, elle n'est pas contrainte a une vignette
   sur petit ecran : une photo de groupe doit rester lisible. */
.photo-large {
  margin: 0 auto 2.5rem;
  max-width: 980px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--marbre);
}
.photo-large img { display: block; width: 100%; height: auto; }
.photo-large figcaption {
  padding: .7rem 1rem 1rem;
  font-size: .85rem;
  color: var(--texte-doux);
  text-align: center;
}

.equip-texte h2 { margin: .3rem 0 1rem; }
.equip-texte p  { margin: 0 0 1rem; }
.equip-texte .btn { margin-top: .4rem; }

@media (max-width: 880px) {
  .equip-grid { grid-template-columns: 1fr; }
  /* En colonne unique la photo prend toute la largeur et devient
     envahissante : on la ramène à une taille de vignette, centrée. */
  .equip-photo { max-width: 230px; margin: 0 auto; }
  .equip-texte { text-align: center; }
}

/* ----- 28. Fiche annoncée mais pas encore écrite ---------------------------
   Un <span> et non un <a> : tant que la page n'existe pas, un lien
   renverrait une erreur 404. On garde la forme de pilule pour que la carte
   reste lisible, mais l'aplat et l'ombre disparaissent — l'œil comprend
   avant de lire que ce bouton n'emmène nulle part. */
.card-link-soon {
  cursor: default;
  background: transparent;
  border-style: dashed;
  /* --bordure est a 10 % d'opacite : en pointilles, elle disparaissait
     completement. Juste assez de contraste pour qu'on voie le trait. */
  border-color: rgba(15, 66, 84, .22);
  box-shadow: none;
  color: var(--texte-doux);
}
.card-link-soon:hover {
  background: transparent;
  border-color: rgba(15, 66, 84, .22);
  transform: none;
}
.card-link-soon em {
  margin-left: auto;
  padding: .18rem .55rem;
  border-radius: 999px;
  background: var(--marbre);
  color: var(--turquoise);
  font-family: var(--sans);
  font-size: .68rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}