/* ==========================================================================
   Physioptimum — feuille de style principale
   Direction artistique reprise de la maquette « Accueil v2 ».
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de design
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs */
  --creme:        #F7F5F0;  /* fond général */
  --creme-fonce:  #EFEBE1;  /* fond des sections en retrait */
  --blanc:        #FFFFFF;
  --champ-fond:   #FDFCFA;  /* fond des champs de formulaire */
  --encre:        #14212B;  /* texte principal, fond du pied de page */
  --bleu:         #1B4A8A;  /* couleur d'accent */
  --bleu-clair:   #8FB0DE;  /* accent sur fond sombre */
  --texte:        #4A5560;  /* paragraphes */
  --texte-doux:   #5E6773;  /* mentions secondaires — 5,26:1 sur crème, 4,82:1 sur crème foncé */
  --gris:         #8B94A0;  /* mentions tertiaires — réservé au fond sombre (5,34:1 sur l'encre) */
  --ligne:        #E3DFD5;  /* filets */
  --ligne-forte:  #D9D3C4;  /* bordures de champs */
  --fleche:       #B9BFC7;
  --erreur:       #A8322A;

  /* Typographie */
  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rythme */
  --marge-page:   clamp(20px, 4vw, 44px);
  --largeur-max:  1200px;
  --rayon:        10px;
  --rayon-carte:  14px;

  /* Transitions */
  --transition: .25s ease;
}

/* --------------------------------------------------------------------------
   2. Réinitialisation
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--encre); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--bleu); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; margin: 0; line-height: 1.15; }

p { margin: 0 0 1em; text-wrap: pretty; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* Anneau de focus visible, indispensable à la navigation au clavier. */
:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Le pied de page est sur fond encre : l'anneau bleu n'y tiendrait qu'à
   1,87:1, sous les 3:1 exigés pour un indicateur (WCAG 2.2, 1.4.11).
   En crème, il remonte à 15,03:1. */
.pied :focus-visible { outline-color: var(--creme); }

/* Lien d'évitement pour les lecteurs d'écran. */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--encre);
  color: var(--creme);
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 var(--rayon) 0;
}
.saut-contenu:focus { left: 0; color: var(--creme); }

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

/* --------------------------------------------------------------------------
   3. Éléments typographiques récurrents
   -------------------------------------------------------------------------- */
.surtitre {
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 16px;
}

.titre-page {
  font-size: clamp(32px, 3.6vw, 50px);
  margin: 0 0 14px;
}

/* Variante à poser sur un H1 que ne suit aucune `.intro` : la maquette laisse
   alors respirer le titre avant le contenu (contact.php, blog.php sans filtre)
   au lieu des 14 px de `.titre-page`. */
.titre-page-espace { margin-bottom: 44px; }

.intro {
  font-size: 15px;
  line-height: 1.65;
  color: var(--texte);
  max-width: 560px;
  margin: 0 0 54px;
}

.numero { font-size: 11px; color: var(--bleu); }

.etiquette {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.etiquette-bleue { color: var(--bleu); }
/* Ces étiquettes (dates d'articles, fil d'Ariane, compteur de pagination)
   vivent sur fond clair, où `--gris` ne tient qu'à 2,82:1. */
.etiquette-grise { color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   4. Boutons et liens d'action
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  border: none;
  border-radius: 999px;
  padding: 13px 26px;
  font-size: 13.5px;
  letter-spacing: .04em;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn-plein { background: var(--bleu); color: var(--creme); }
.btn-plein:hover { background: var(--encre); color: var(--creme); }

.btn-contour {
  background: transparent;
  color: var(--encre);
  border: 1px solid var(--encre);
  padding: 9px 20px;
  font-size: 12.5px;
  letter-spacing: .06em;
}
.btn-contour:hover { background: var(--bleu); border-color: var(--bleu); color: var(--creme); }

.lien-souligne {
  font-size: 13.5px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.lien-fleche {
  font-size: 13px;
  color: var(--bleu);
  border-bottom: 1px solid var(--bleu);
  padding-bottom: 2px;
  display: inline-block;
}
.lien-fleche:hover { color: var(--encre); border-color: var(--encre); }

/* --------------------------------------------------------------------------
   5. Mise en page générale
   -------------------------------------------------------------------------- */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.contenu-centre {
  max-width: var(--largeur-max);
  margin: 0 auto;
  width: 100%;
}

.section {
  flex: 1;
  padding: 70px var(--marge-page) 90px;
}
.section-creme { background: var(--creme-fonce); }

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--marge-page);
  border-bottom: 1px solid var(--ligne);
  background: var(--creme);
  position: relative;
  z-index: 20;
}

.logo {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.logo em { font-style: italic; color: var(--bleu); }

.menu {
  display: flex;
  gap: 34px;
  font-size: 13.5px;
  letter-spacing: .04em;
}
.menu a.actif { color: var(--bleu); }

/* Bouton hamburger — masqué sur grand écran. */
.bouton-menu {
  display: none;
  background: none;
  border: 1px solid var(--ligne-forte);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  line-height: 0;
}
.bouton-menu span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--encre);
  margin: 4px 0;
  transition: transform var(--transition), opacity var(--transition);
}
.bouton-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bouton-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .entete { flex-wrap: wrap; }
  .bouton-menu { display: block; order: 3; }
  .menu,
  .entete .btn-contour { display: none; }
  .entete.menu-ouvert .menu,
  .entete.menu-ouvert .btn-contour { display: flex; }
  .entete.menu-ouvert .menu {
    order: 4;
    flex-direction: column;
    gap: 0;
    width: 100%;
    border-top: 1px solid var(--ligne);
    margin-top: 8px;
    font-size: 15px;
  }
  .entete.menu-ouvert .menu a {
    padding: 14px 2px;
    border-bottom: 1px solid var(--ligne);
  }
  .entete.menu-ouvert .btn-contour {
    order: 5;
    width: 100%;
    margin: 16px 0 6px;
    padding: 13px 20px;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   7. Accueil — grille principale
   -------------------------------------------------------------------------- */
.accueil-grille {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(340px, 1fr) minmax(320px, 400px);
  gap: 24px;
  align-items: center;
  padding: 0 var(--marge-page);
  min-height: 620px;
}

.accueil-titre {
  font-size: clamp(34px, 3.4vw, 50px);
  line-height: 1.08;
  margin: 0 0 18px;
}
.accueil-titre em { font-style: italic; color: var(--bleu); }

.accueil-accroche {
  font-size: 15px;
  line-height: 1.65;
  color: var(--texte);
  margin: 0 0 26px;
}
.accueil-accroche strong { font-weight: 600; color: var(--encre); }

.accueil-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.accueil-note {
  border-top: 1px solid var(--ligne);
  padding-top: 16px;
  font-size: 12.5px;
  color: var(--texte-doux);
  line-height: 1.7;
  max-width: 300px;
}

/* Colonne centrale : la silhouette animée. */
.silhouette {
  position: relative;
  height: calc(100vh - 130px);
  min-height: 560px;
  perspective: 1000px;
}

.silhouette-orbites {
  position: absolute;
  left: 50%; top: 50%;
  width: min(560px, 90%);
  aspect-ratio: 1;
  height: auto;
  transform: translate(-50%, -50%);
  animation: rotation-lente 100s linear infinite;
}

.silhouette-balancement {
  position: absolute;
  inset: 0;
  animation: balancement var(--duree-balancement, 18s) ease-in-out infinite alternate;
  transform-style: preserve-3d;
}

.silhouette-respiration {
  position: absolute;
  inset: 0;
  animation: respiration 7s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.silhouette-dessin { height: min(88%, 640px); overflow: visible; }

.silhouette-zones rect { cursor: crosshair; fill: #000; fill-opacity: 0; }

.silhouette-infobulle {
  position: absolute;
  left: 0; top: 0;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
  z-index: 5;
  transform: translate(4px, -130%);
  background: var(--encre);
  color: var(--creme);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 11.5px;
  letter-spacing: .06em;
  white-space: nowrap;
  display: flex;
  gap: 8px;
  align-items: center;
}
.silhouette-infobulle .numero { color: var(--bleu-clair); }

.silhouette-zone-active {
  position: absolute;
  left: 50%; bottom: 6px;
  transform: translateX(-50%);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bleu);
  white-space: nowrap;
  text-align: center;
}

/* Groupes de tracés commutés au survol. */
.trait-base { transition: opacity .6s; }
.famille-surbrillance { opacity: 0; transition: opacity .45s; }
.famille-surbrillance.active { opacity: 1; }

/* --------------------------------------------------------------------------
   8. Accueil — panneau des services
   -------------------------------------------------------------------------- */
.panneau-services { max-width: 400px; }

.familles {
  display: flex;
  flex-direction: column;
  margin-bottom: 26px;
}

.famille {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--ligne);
  cursor: pointer;
  background: none;
  border-left: 0; border-right: 0; border-bottom: 0;
  width: 100%;
  text-align: left;
  color: inherit;
}
.familles .famille:last-child { border-bottom: 1px solid var(--ligne); }

.famille-nom {
  font-family: var(--serif);
  font-size: 18px;
  border-bottom: 1.5px solid transparent;
  transition: border-color .3s;
  padding-bottom: 2px;
}
.famille[aria-selected="true"] .famille-nom { border-bottom-color: var(--bleu); }

.panneaux { display: grid; min-height: 250px; }

/* Un panneau inactif reste dans le flux (le fondu croisé en dépend) mais doit
   sortir du parcours clavier et des lecteurs d'écran : `visibility` s'en
   charge, avec un délai égal à la durée du fondu pour ne pas couper la
   disparition. Sans lui, `opacity: 0` laisserait les liens des panneaux
   inactifs atteignables à la tabulation. */
.panneau {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .4s, transform .45s, visibility 0s .4s;
}
.panneau.actif {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .4s, transform .45s, visibility 0s;
}

.panneau p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--texte);
  margin: 0 0 16px;
}

.pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding: 0;
  list-style: none;
}
.pastilles li {
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
}

/* Bandeau de coordonnées en bas de l'accueil. */
.bandeau-bas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 15px var(--marge-page);
  border-top: 1px solid var(--ligne);
  font-size: 12px;
  color: var(--texte-doux);
}
.bandeau-bas .mention {
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--bleu);
}
.bandeau-bas a { color: var(--texte-doux); }

@media (max-width: 1080px) {
  .accueil-grille {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 32px var(--marge-page) 48px;
    gap: 32px;
  }
  .silhouette { height: 56vh; min-height: 420px; width: 100%; }
  .accueil-texte, .panneau-services { max-width: 560px; width: 100%; }
}

/* --------------------------------------------------------------------------
   9. Équipe
   -------------------------------------------------------------------------- */
.grille-equipe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px 28px;
}

.carte-therapeute {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.photo-therapeute {
  aspect-ratio: 3 / 3.6;
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--creme-fonce);
}
.photo-therapeute img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Emplacement en attente de photo. */
.photo-attente {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  border: 1px dashed var(--ligne-forte);
  border-radius: var(--rayon);
  /* Fond crème foncé : `--gris` n'y atteint que 2,58:1. */
  color: var(--texte-doux);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(139,148,160,.06) 12px, rgba(139,148,160,.06) 24px);
}

.entete-therapeute {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--encre);
  padding-top: 12px;
}
.nom-therapeute { font-family: var(--serif); font-size: 21px; }
.role-therapeute {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-top: 6px;
}
.specialites-therapeute {
  font-size: 13px;
  color: var(--texte-doux);
  margin-top: 8px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   10. Blog
   -------------------------------------------------------------------------- */
.article-une {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  border-top: 1px solid var(--encre);
  padding: 32px 0 40px;
}
.article-une-image {
  flex: 1 1 380px;
  max-width: 560px;
  aspect-ratio: 16 / 10;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--creme-fonce);
}
.article-une-image img { width: 100%; height: 100%; object-fit: cover; }
.article-une-texte { flex: 1 1 340px; max-width: 480px; }
.article-une-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.article-une h2 {
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15;
  margin: 0 0 14px;
}
.article-une p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--texte);
  margin: 0 0 18px;
}

.grille-articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 40px;
  border-top: 1px solid var(--ligne);
}

.carte-article {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 0;
  border-bottom: 1px solid var(--ligne);
}
.carte-article-meta { display: flex; gap: 14px; flex-wrap: wrap; }
.carte-article-titre {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.25;
  transition: color var(--transition);
}
.carte-article:hover .carte-article-titre { color: var(--bleu); }
.carte-article-extrait {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texte-doux);
}

.vide {
  padding: 48px 0;
  color: var(--texte-doux);
  font-size: 15px;
  border-top: 1px solid var(--ligne);
}

/* Page d'un article */
.article-entete { max-width: 720px; margin-bottom: 40px; }
.article-image {
  max-width: 900px;
  aspect-ratio: 16 / 9;
  border-radius: var(--rayon);
  overflow: hidden;
  margin-bottom: 44px;
  background: var(--creme-fonce);
}
.article-image img { width: 100%; height: 100%; object-fit: cover; }

.article-corps {
  max-width: 660px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--texte);
}
.article-corps p { margin: 0 0 1.4em; }
.article-corps strong { color: var(--encre); font-weight: 600; }

/* La réinitialisation met tous les titres à `margin: 0`. Dans un long texte
   (article, mentions légales), il faut leur rendre leur respiration, sans quoi
   chaque titre colle à son premier paragraphe. Les marges sont en `em` : elles
   suivent donc la taille du titre. La graisse et la sérif viennent du § 2. */
.article-corps h2 { margin: 2em 0 .6em; }
.article-corps h3 { margin: 1.6em 0 .5em; }
.article-corps h2:first-child,
.article-corps h3:first-child { margin-top: 0; }

.article-pied {
  max-width: 660px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--ligne);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.encart-rdv {
  max-width: 660px;
  margin-top: 44px;
  background: var(--creme-fonce);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  padding: 32px;
}
.encart-rdv h2 { font-size: 26px; margin: 0 0 10px; }
.encart-rdv p { font-size: 14.5px; color: var(--texte); margin: 0 0 20px; }

/* --------------------------------------------------------------------------
   11. Contact
   -------------------------------------------------------------------------- */
.contact-colonnes {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
}
.contact-infos { flex: 1 1 320px; max-width: 420px; }
.contact-infos p { font-size: 15px; line-height: 1.65; color: var(--texte); margin: 0 0 34px; }
.contact-infos strong { font-weight: 600; color: var(--encre); }

.liste-coordonnees {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 14.5px;
}
.coordonnee-label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 4px;
}
.coordonnee-tel { font-family: var(--serif); font-size: 22px; }
.contact-acces {
  border-top: 1px solid var(--ligne-forte);
  padding-top: 18px;
  color: var(--texte-doux);
  font-size: 13.5px;
  line-height: 1.6;
}

.carte-formulaire {
  flex: 1 1 460px;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  padding: clamp(24px, 4vw, 40px);
  align-self: flex-start;
}

.formulaire {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.pleine-largeur { grid-column: 1 / -1; }

.champ label,
.legende {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 6px;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ligne-forte);
  border-radius: 8px;
  background: var(--champ-fond);
  font-size: 14px;
  color: var(--encre);
  transition: border-color var(--transition);
}
.champ textarea { resize: vertical; min-height: 110px; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--bleu); outline: none; box-shadow: 0 0 0 3px rgba(27, 74, 138, .12); }

.champ-erreur input,
.champ-erreur select,
.champ-erreur textarea { border-color: var(--erreur); }
.message-erreur { color: var(--erreur); font-size: 12.5px; margin-top: 6px; }

.choix-lieu {
  display: flex;
  gap: 22px;
  font-size: 14px;
  padding: 4px 2px;
  border: 0;
  margin: 0;
}
.choix-lieu label { display: flex; align-items: center; gap: 8px; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--encre); margin: 0; }
.choix-lieu input[type="radio"] { accent-color: var(--bleu); width: 16px; height: 16px; }

.ligne-envoi {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.ligne-envoi .btn { padding: 14px 32px; font-size: 14px; }
.delai-reponse { font-size: 12.5px; color: var(--texte-doux); }

/* Champ piège anti-robots : invisible pour un humain, rempli par les robots. */
.piege {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 420px;
  gap: 14px;
}
.confirmation-titre { font-family: var(--serif); font-size: 26px; }
.confirmation p { font-size: 14.5px; color: var(--texte); line-height: 1.6; max-width: 320px; margin: 0; }

.alerte {
  grid-column: 1 / -1;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 4px;
}
/* Le site public n'affiche que des alertes d'erreur : la réussite d'un envoi
   passe par l'écran `.confirmation` du formulaire de rendez-vous, repris de la
   maquette. Les messages de réussite de l'administration ont leur propre style
   dans admin.css. */
.alerte-erreur { background: #FBEDEC; color: var(--erreur); border: 1px solid #E9C9C6; }

/* --------------------------------------------------------------------------
   12. Pied de page
   -------------------------------------------------------------------------- */
.pied {
  background: var(--encre);
  color: #C9CFD6;
  padding: 60px var(--marge-page) 32px;
}
.pied a { color: #C9CFD6; }
.pied a:hover { color: var(--blanc); }

.pied-colonnes {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: space-between;
}
.pied-marque { flex: 1 1 260px; max-width: 340px; }
.pied-logo { font-family: var(--serif); font-size: 24px; color: var(--creme); }
.pied-logo em { font-style: italic; color: var(--bleu-clair); }
.pied-marque p { font-size: 13.5px; line-height: 1.65; margin: 14px 0 0; color: var(--gris); }

.pied-titre {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bleu-clair);
  margin-bottom: 16px;
}
.pied-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  list-style: none;
  padding: 0; margin: 0;
}

.pied-bas {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid #22303C;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--gris);
}
.pied-bas nav { display: flex; gap: 24px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   13. Animations
   -------------------------------------------------------------------------- */
@keyframes trace-apparition { to { stroke-dashoffset: 0; } }
@keyframes bande-scan { from { transform: translateY(var(--depart)); } to { transform: translateY(var(--arrivee)); } }
@keyframes halo { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes balancement { from { transform: rotateY(-10deg); } to { transform: rotateY(10deg); } }
@keyframes respiration { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes cotes { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes rotation-lente {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Respect du réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .silhouette-orbites,
  .silhouette-balancement,
  .silhouette-respiration { animation: none !important; }
}

/* --------------------------------------------------------------------------
   14. Ajustements mobiles
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .section { padding: 48px var(--marge-page) 64px; }
  .intro { margin-bottom: 36px; }
  .contact-colonnes { gap: 40px; }
  .article-une { gap: 24px; }
  .grille-articles { gap: 0 24px; }
  .pied { padding-top: 48px; }
  .pied-colonnes { gap: 32px; }
  .bandeau-bas { justify-content: flex-start; gap: 6px; flex-direction: column; align-items: flex-start; }
}

@media print {
  .entete, .pied, .bandeau-bas, .bouton-menu, .encart-rdv { display: none; }
  body { background: #fff; }
}

/* --------------------------------------------------------------------------
   15. Compléments — page d'accueil
   Anciennement dans `assets/css/sup-accueil.css`, chargé par un <link> posé
   dans le <body> : une requête bloquante de plus, et un bref instant où la
   silhouette apparaissait entièrement tracée avant que l'animation ne reparte
   de zéro. Les règles sont reprises dans leur ordre d'origine.

   Elles remplacent les attributs style="" de l'export « Claude Design ». Les
   keyframes, elles, vivent au § 13 : on ne fait ici que les appliquer. Les
   durées et retards qui varient d'un tracé à l'autre passent par des variables
   CSS posées en ligne dans le SVG.
   -------------------------------------------------------------------------- */

/* 15.1 Animations du dessin */

/* Tracés qui se dessinent au chargement. */
.trait-trace {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: trace-apparition var(--duree, 1.2s) ease var(--retard, 0s) forwards;
}

/* Bande de balayage qui parcourt la zone mise en avant. */
.bande-scan {
  animation: bande-scan var(--duree, 2.6s) linear infinite;
}

/* Cage thoracique : dilatation continue, très légère. */
.silhouette-cotes {
  animation: cotes 4.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* Halo qui s'échappe d'une articulation. */
.halo-articulation {
  animation: halo 3.4s ease-out var(--retard, 0s) infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* 15.2 Traits de base
   Pleins tant que le visiteur n'a rien exploré ; atténués ensuite pour que la
   famille active ressorte. La classe « exploree » est posée par accueil.js. */
.silhouette .trait-base { opacity: 1; }
.silhouette.exploree .trait-base { opacity: .35; }

/* 15.3 Infobulle */
.silhouette-infobulle.visible { opacity: 1; }

/* `.infobulle-nom` n'est qu'un point d'accroche pour accueil.js, qui y réécrit
   le nom de la famille survolée. Aucun style n'est attendu : dans la maquette,
   seul le numéro qui la précède est coloré (voir `.silhouette-infobulle .numero`
   au § 7). La règle est écrite pour que la classe ne paraisse pas orpheline. */
.infobulle-nom { color: inherit; }

/* Réglage « réduire les animations » : l'infobulle se pose en haut de la
   colonne au lieu de poursuivre le curseur. */
.silhouette-infobulle.fixe {
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
}

/* 15.4 Panneaux de services
   Le durcissement de `.panneau` (visibility) est remonté au § 8, auprès de la
   déclaration d'origine : deux règles pour le même sélecteur dans une même
   feuille n'auraient été qu'un doublon à maintenir. */

/* 15.5 Confort tactile
   Sous 1080 px la liste des familles devient le seul contrôle réellement
   utilisable : on lui donne des cibles de taille suffisante. */
@media (max-width: 1080px) {
  .famille { padding: 14px 0; }
}

/* 15.6 « Réduire les animations » pour les tracés ci-dessus
   Le bloc du § 13 les couvre déjà en ramenant les durées à .01 ms, mais deux
   cas méritent d'être posés explicitement. */
@media (prefers-reduced-motion: reduce) {
  /* Le tracé doit se poser d'emblée : laissé à `stroke-dashoffset: 1`, le
     dessin resterait purement et simplement invisible. */
  .trait-trace {
    animation: none !important;
    stroke-dashoffset: 0;
  }
  /* Bande de balayage : purement décorative, et figée elle laisserait un
     aplat dégradé en haut de la zone mise en avant. */
  .bande-scan {
    animation: none !important;
    opacity: 0;
  }
  /* Côtes et halos retrouvent leur état de repos, sans mouvement. */
  .silhouette-cotes,
  .halo-articulation { animation: none !important; }
}