/* ===========================================================================
   DEMANDES D'ÉLODIE — annotations du 17 octobre 2026, 11h00 à 11h50.
   Feuille à part, chargée en dernier : rien de son design existant n'est
   réécrit, et tout est réversible en retirant ce seul fichier.
   Chaque bloc porte sa demande, mot pour mot.
   =========================================================================== */

/* « Système zoom/onglets quand souris passe » — sur le menu.
   Le grandissement reste discret : à 1,06 le texte reste net et ne pousse pas
   ses voisins, au-delà il tremble. */
.navigation a,
.nav-appointment,
.booking-header,
.text-link,
.hero-more {
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, color .28s ease;
  will-change: transform;
}
.navigation a:hover,
.navigation a:focus-visible { transform: scale(1.06); color: #2f5d4f; }

/* « Système zoom quand souris passe » — sur les boutons de rendez-vous,
   « Effet Zoom sur tous les boutons Prendre RDV du site ». */
.nav-appointment:hover, .nav-appointment:focus-visible,
.booking-header:hover,  .booking-header:focus-visible,
.booking-button:hover,  .booking-button:focus-visible {
  transform: scale(1.07);
  box-shadow: 0 10px 26px rgba(92,142,118,.32);
}
.text-link:hover, .text-link:focus-visible,
.hero-more:hover, .hero-more:focus-visible { transform: scale(1.05); }

/* « Système zoom / chacuns de ses onglets » — les six valeurs.
   Le libellé et l'icône montent ensemble, sinon l'icône se décolle du texte. */
.values article {
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
.values article:hover,
.values article:focus-within { transform: scale(1.07) translateY(-2px); }
.values article .value-icon { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.values article:hover .value-icon { transform: scale(1.1); }

/* Même demande, appliquée aux cartes d'accompagnement : elles sont cliquables
   au même titre, les laisser inertes aurait été incohérent. */
.service-card { transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease; }
.service-card:hover, .service-card:focus-within {
  transform: scale(1.025) translateY(-3px);
  box-shadow: 0 18px 42px rgba(32,66,56,.22);
}

/* « Flouter mieux » — le bord de la photo du héros.
   Le masque s'arrêtait net à 24 % ; il démarre maintenant plus tôt et passe
   par un palier, ce qui supprime la ligne de coupure visible sur sa capture. */
.hero-image {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 14%, rgba(0,0,0,.72) 30%, #000 46%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 14%, rgba(0,0,0,.72) 30%, #000 46%);
}

/* « Mieux flouter cette zone, toute page » — la bande sous l'en-tête, sur la FAQ.
   Un dégradé doux par-dessus la jonction, posé sans toucher au balisage. */
.page-faq .page-hero,
.page-faq .authorial-faq { position: relative; }
.page-faq .page-hero::before {
  content: "";
  position: absolute; inset: -40px 0 auto 0; height: 120px;
  background: linear-gradient(180deg, rgba(253,249,248,.96) 0%, rgba(253,249,248,.55) 52%, transparent 100%);
  pointer-events: none; z-index: 1;
}

/* « Mettre en valeur les sections — Gras + Couleur plus soutenue mais dans
   même ton + gros — Centré ? » — les titres de la FAQ.
   Même famille de vert que sa charte, simplement plus dense. */
.page-faq .faq-group > h2 {
  text-align: center;
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 38px);
  color: #1f4a3c;
  letter-spacing: .2px;
  margin-bottom: 26px;
}
.page-faq .faq-group > h2::after {
  content: "";
  display: block;
  width: 56px; height: 2px;
  margin: 14px auto 0;
  background: #7fae9c;
  border-radius: 2px;
}

/* « Créer du mouvement léger + Contraste couleur quand on ouvre 1 rubrique ».
   Le mouvement porte sur la réponse qui se déplie, le contraste sur la question
   ouverte : on voit du premier coup d'œil laquelle est dépliée. */
.page-faq details { transition: background .28s ease, box-shadow .28s ease; border-radius: 12px; }
.page-faq details > summary { transition: color .22s ease, padding-left .22s ease; cursor: pointer; }
.page-faq details > summary:hover { color: #2f5d4f; padding-left: 4px; }
.page-faq details[open] {
  background: rgba(127,174,156,.1);
  box-shadow: inset 3px 0 0 #7fae9c;
}
.page-faq details[open] > summary { color: #1f4a3c; font-weight: 600; }
.page-faq details[open] .faq-answer,
.page-faq details[open] > :not(summary) {
  animation: elodie-deplie .34s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes elodie-deplie {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* « Fond nénufar continue d'être là et texte défile dessus ».
   L'eau était collée au bas du DOCUMENT et défilait avec lui : on la quittait
   dès qu'on remontait. Elle est désormais collée au bas de l'ÉCRAN, donc elle
   reste pendant que le contenu passe par-dessus. C'est déjà le comportement
   des deux bordures végétales du cadre, qui sont fixes dans le même conteneur :
   on reste dans sa grammaire, on n'en invente pas une autre. */
.template-water { position: fixed; }

/* « Attention à ne pas avoir trop de liserés lumineux sur l'eau comme en bas
   de la page » — on atténue les reflets sans effacer l'image. */
.template-water { filter: saturate(.94) brightness(.97) contrast(.96); }

/* Mouvement réduit : rien ne bouge. Véto d'accessibilité du Head of Design. */
@media (prefers-reduced-motion: reduce) {
  .navigation a, .nav-appointment, .booking-header, .booking-button,
  .text-link, .hero-more, .values article, .values article .value-icon,
  .service-card, .page-faq details, .page-faq details > summary {
    transition: none !important;
  }
  .navigation a:hover, .nav-appointment:hover, .booking-header:hover,
  .booking-button:hover, .text-link:hover, .hero-more:hover,
  .values article:hover, .values article:hover .value-icon, .service-card:hover {
    transform: none !important;
  }
  .page-faq details[open] .faq-answer,
  .page-faq details[open] > :not(summary) { animation: none !important; }
}

/* CADRAGE DU NOUVEAU PORTRAIT — corrigé le 18/10 après contrôle visuel.
   Les règles existantes calaient le cadrage à 17 %, 18 % et 26 % du haut, valeurs
   justes pour l'ANCIENNE photo où son visage était haut dans l'image. Sur celle
   qu'elle a envoyée, son visage est plus bas : au même réglage, le cercle montrait
   surtout l'arcade du cloître et coupait son menton.
   35 % n'est pas une estimation : c'est la valeur rendue par le gate
   ~/.claude/qa-photo-cadrage/qa_photo_cadrage.py, qui détecte le visage et calcule
   le recadrage sur la boîte RÉELLE relevée au navigateur (316×234, paysage).
   À 17 %, la valeur qui était en ligne, le visage tombait à 68,7 % de la boîte.
   À 35 % il est à 50,2 %, avec 30 % de dégagement au-dessus de la tête.
   Cette feuille étant chargée en dernier, la valeur l'emporte à toutes largeurs,
   ce qui donne un cadrage identique sur ordinateur et sur téléphone. */
.bio-image img { object-position: 50% 35%; }

/* AGENDA NATIF DANS LA PAGE CONTACT — posé le 18/10.
   La section est injectée dans .contact-layout, qui est une grille à deux colonnes
   (le texte d'accueil, le formulaire). Sans cette règle elle deviendrait une troisième
   cellule étriquée : elle prend donc toute la largeur, au-dessus des deux autres. */
.contact-layout { align-items: start; }
.contact-layout .native-booking--calendrier { grid-column: 1 / -1; margin-bottom: 34px; }
.native-booking--calendrier { display: block; }
.native-booking--calendrier .native-booking__intro { margin-bottom: 22px; }
.native-booking--calendrier h2 { margin-top: 8px; }
.native-booking--calendrier iframe { width: 100%; min-height: 720px; border: 0; display: block; border-radius: 14px; }
@media (max-width: 700px) { .native-booking--calendrier iframe { min-height: 640px; } }