/* =========================================================
   Sérénia Senior — V2 COMPARATIVE (fidèle aux maquettes Canva)
   Couleurs échantillonnées directement depuis les exports Canva
   ========================================================= */

:root{
  /* Vert officiel Sérénia pour le texte de contenu et les icônes (audit
     couleurs) : #014430, distinct de --vert-nav ci-dessous qui reste la
     couleur de fond des bandes vertes (header, bandeau contact, citation),
     volontairement plus sombre et non concernée par cette règle. */
  --vert-fonce:#014430;
  --vert-nav:#00261b;        /* fond des bandes vertes (échantillonné depuis Canva) */
  --dore:#9a6b32;            /* texte/liens dorés (valeur validée Canva) */
  --dore-clair:#c9a877;      /* dorés clairs sur fond vert */
  --dore-ligne:#ab8b4c;      /* traits/soulignements dorés (échantillonné) */
  --ivoire:#f7ebd5;          /* fond ivoire (échantillonné depuis Canva) */
  --blanc:#ffffff;
  --gris-texte:#014430;      /* vert officiel Sérénia (même valeur que --vert-fonce) */
  --font-titres:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-texte:'Montserrat', 'Segoe UI', Arial, sans-serif;
  --largeur-max:1440px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-texte);
  color:var(--vert-fonce);
  background:var(--ivoire);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--font-titres);
  color:var(--vert-fonce);
  line-height:1.15;
  margin:0 0 .5em 0;
  font-weight:700;
}
h1{ font-size:clamp(2.1rem, 4.1vw, 3.4rem); }
h2{ font-size:clamp(1.6rem, 2.3vw, 2rem); }
h3{ font-size:clamp(1.15rem, 1.6vw, 1.4rem); }
p{ margin:0 0 1em 0; }

.container{
  max-width:var(--largeur-max);
  margin:0 auto;
  padding:0 40px;
}
@media (max-width:640px){
  .container{ padding:0 22px; }
}

.eyebrow{
  display:inline-block;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--vert-fonce);
  margin-bottom:.7em;
}

/* Mise en valeur champagne/dorée réutilisable pour des expressions clés dans
   n'importe quel bloc de texte (pas seulement dans le hero). */
.accent{ color:var(--dore); }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--dore); color:#fff;
  padding:12px 20px; z-index:1000;
  border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:14px 30px; border-radius:999px;
  font-weight:700; font-size:.95rem; letter-spacing:.02em;
  border:2px solid var(--dore); cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.btn--plein{ background:var(--dore); color:#fff; }
.btn--plein:hover, .btn--plein:focus-visible{ background:#7f5726; border-color:#7f5726; transform:translateY(-2px); }
.btn--contour{ background:transparent; color:var(--dore); }
.btn--contour:hover, .btn--contour:focus-visible{ background:var(--dore); color:#fff; }
.btn:focus-visible{ outline:3px solid var(--vert-fonce); outline-offset:3px; }

/* ---------- En-tête / Navigation (bande verte supérieure) ---------- */
.site-header{
  background:var(--vert-nav);
  position:sticky; top:0; z-index:500;
}
/* Double liseré champagne sur le bord inférieur de la bande verte, identique
   sur les 4 pages puisqu'il appartient au composant d'en-tête partagé. */
.site-header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:5px;
  background-image:linear-gradient(var(--dore), var(--dore)), linear-gradient(var(--dore), var(--dore));
  background-repeat:no-repeat;
  background-size:100% 1.5px, 100% 1.5px;
  background-position:0 0, 0 3.5px;
  pointer-events:none;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 40px;
  max-width:var(--largeur-max); margin:0 auto;
}
@media (max-width:640px){ .nav{ padding:12px 20px; } }

.logo{ display:flex; align-items:center; }
.logo-img{ height:44px; width:auto; display:block; }
.logo:focus-visible{ outline:2px solid var(--dore); outline-offset:4px; border-radius:4px; }
@media (max-width:900px){ .logo-img{ height:38px; } }

.nav-links{
  display:flex; gap:44px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  color:var(--dore-clair); font-weight:700; font-size:.92rem;
  letter-spacing:.05em; text-transform:uppercase;
  padding:6px 2px; border-bottom:2px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.nav-links a:hover, .nav-links a:focus-visible{ color:#fff; border-bottom-color:var(--dore); }
.nav-links a[aria-current="page"]{ color:#fff; border-bottom-color:var(--dore); }

.nav-toggle{
  display:none; background:none; border:2px solid var(--dore-clair);
  border-radius:8px; padding:8px 10px; cursor:pointer;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:""; display:block; width:24px; height:2px; background:var(--dore-clair);
  margin:5px 0; transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span{ opacity:0; }
.nav-toggle[aria-expanded="true"]::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after{ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--vert-nav);
    flex-direction:column; gap:0; max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav-links.is-open{ max-height:400px; }
  .nav-links a{ display:block; padding:16px 24px; border-bottom:1px solid rgba(255,255,255,.08); }
}

/* ---------- Bandeau contact (bande verte inférieure) ----------
   Identique sur les 4 pages : logo à gauche, coordonnées à droite.
   Le padding vertical est calé sur celui de la bande verte supérieure
   (.nav : 14px) afin que les deux bandes vertes aient la même hauteur
   visuelle, sans réduire la taille des pictogrammes ni du texte. */
.contact-bar{ background:var(--vert-nav); padding:14px 0; }
.contact-bar .container{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:32px;
}
.footer-logo{ display:flex; align-items:center; flex-shrink:0; }
.footer-logo-img{ height:42px; width:auto; display:block; }
.footer-logo:focus-visible{ outline:2px solid var(--dore); outline-offset:4px; border-radius:4px; }

.contact-items{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:40px; text-align:center;
}
.contact-bar .contact-item{ display:flex; align-items:center; gap:14px; }
.contact-bar .contact-item .picto{ width:40px; height:40px; flex-shrink:0; }
.contact-bar a, .contact-bar span.label{
  font-weight:700; font-size:1.02rem; color:var(--dore-clair);
}
.contact-bar a:hover, .contact-bar a:focus-visible{ color:#fff; }
.contact-bar small{
  display:block; font-weight:500; font-size:.72rem; letter-spacing:.05em;
  text-transform:uppercase; color:#c9b48f; margin-top:2px;
}
/* Lien WhatsApp (wa.me) ajouté dans la légende ".contact-bar small" : sans cette
   règle, ".contact-bar a" (plus spécifique que la légende) forcerait le mot
   "WhatsApp" en gras/doré/plus grand, cassant l'aspect uniforme de la légende
   existante. On restaure ici exactement le style hérité de la légende, avec le
   même effet au survol que les autres liens de la bande de contact. */
.contact-bar small a{
  color:inherit; font-weight:inherit; font-size:inherit;
  text-transform:inherit; letter-spacing:inherit;
}
.contact-bar small a:hover, .contact-bar small a:focus-visible{ color:#fff; }

@media (max-width:700px){
  .contact-bar .container{ flex-direction:column; gap:24px; }
  .contact-items{ gap:26px; }
}

.site-footer{
  background:#001812; color:#7d977f; text-align:center; padding:18px 0; font-size:.78rem;
}

/* ---------- HERO Accueil : reproduction fidèle de la maquette ---------- */
.hero{
  position:relative;
  background-image:url('../images/bg-accueil.png');
  background-size:cover;
  background-position:center 49%;
  background-repeat:no-repeat;
  padding-top:56px;
  padding-bottom:0;
}
/* Le cadrage vertical de la photo (background-position) doit être réajusté
   par palier de largeur : la hauteur du bandeau (donc la fenêtre visible de
   l'image en mode "cover") varie beaucoup selon le nombre de lignes du texte,
   qui se stabilise à des largeurs différentes. Un seul réglage pour toutes
   les largeurs ne peut pas à la fois masquer le bandeau vert et le liseré
   doré intégrés en haut du fichier photo ET garder les deux visages
   entièrement visibles à toutes les largeurs ; ces paliers ont été vérifiés
   un par un (capture d'écran) pour que ce soit le cas partout entre 901px et
   1920px. */
@media (min-width:1000px){
  .hero{ background-position:center 34%; }
}
@media (min-width:1110px){
  .hero{ background-position:center 23%; }
}
@media (min-width:1440px){
  .hero{ background-position:center 16%; }
}
.hero-inner{
  max-width:var(--largeur-max); margin:0 auto; padding:0 40px;
  position:relative;
}
/* Largeur en % (plafonnée) plutôt qu'en px fixe : le fondu ivoire/photo de la
   photo d'accueil est positionné en proportion de la largeur de l'image, pas
   en pixels fixes. Une largeur de texte fixe finissait par déborder sur la
   photo dès que la fenêtre n'était pas exactement à 1440px. Cette valeur
   garde le texte dans la zone ivoire, à toutes les largeurs desktop. */
.hero-col-text{
  max-width:min(520px, 36%);
  padding-bottom:60px;
}
.hero-col-text h1{ margin:.35em 0 .5em; }
.hero-col-text .lead{ font-size:1.1rem; }
.hero-col-text .lead-strong{ font-weight:700; }

.hero-trio{
  display:flex; align-items:flex-start; gap:24px; margin:56px 0 10px;
}
.hero-trio-item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; flex:1;
}
.hero-trio-item .picto{ width:50px; height:50px; flex-shrink:0; }
.hero-trio-item span{ font-size:.92rem; line-height:1.3; }

.hero-actions{ margin-top:30px; display:flex; gap:16px; flex-wrap:wrap; max-width:600px; }

.hero-photo-mobile{ display:none; }

/* En dessous de 900px, le fondu horizontal ivoire/photo (pensé pour une large
   largeur de bureau) n'a plus la place de se déployer et le texte finit par
   chevaucher la photo : le bandeau repasse alors sur un fond ivoire uni, et la
   photo est reprise sous le texte dans un bloc dédié, avec son propre fondu
   vertical vers l'ivoire, pour rester fidèle à l'identité Canva. */
@media (max-width:900px){
  .hero{ background-image:none; background-color:var(--ivoire); padding-bottom:0; }
  .hero-col-text{ max-width:100%; padding-bottom:28px; }
  .hero-trio{ flex-wrap:wrap; }
  .hero-trio-item{ min-width:44%; }
  .hero-photo-mobile{
    display:block; position:relative; width:100%; aspect-ratio:4/3;
    background-image:url('../images/bg-accueil.png');
    background-size:cover; background-position:center 18%; background-repeat:no-repeat;
  }
  .hero-photo-mobile::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(247,235,213,0) 60%, var(--ivoire) 100%);
  }
}
/* Entre 641 et 900px, les trois icônes du triptyque restent sur une seule
   ligne à trois colonnes égales (comme sur desktop) plutôt que de passer en
   grille à deux colonnes (ce qui isolait la troisième icône, seule, centrée
   sur sa propre ligne). Le passage en une seule colonne verticale reste
   inchangé en dessous de 640px. */
@media (min-width:641px) and (max-width:900px){
  .hero-trio{ flex-wrap:nowrap; }
  .hero-trio-item{ min-width:0; }
}
@media (max-width:640px){
  .hero{ padding-top:36px; }
  .hero-inner{ padding:0 22px; }
  .hero-trio{ flex-direction:column; gap:16px; }
}

/* ---------- Sections générales ---------- */
.section{ padding:70px 0; }
.section--ivoire{ background:var(--ivoire); }
.section--blanc{ background:#fff; }
/* Réduit l'espace vide entre la fin d'un bandeau photo+fondu et la section qui
   suit immédiatement (ex. QSN), sans toucher aux autres sections. */
.section--tight-top{ padding-top:26px; }

.two-col{
  display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start;
}
@media (max-width:820px){
  .two-col{ grid-template-columns:1fr; gap:40px; }
}
.two-col-autonomie{
  align-items:stretch;
}
.two-col-autonomie > .icon-block--lg{
  align-items:center;
}
@media (max-width:640px){
  .two-col-autonomie > .icon-block--lg{
    align-items:flex-start;
  }
}

.section-title-underline{
  display:inline-block; position:relative; padding-bottom:14px; margin-bottom:.3em;
}
.section-title-underline::after{
  content:""; position:absolute; left:0; bottom:0; width:70px; height:2px; background:var(--dore-ligne);
}

/* Titre de section précédé d'un pictogramme (ex. "Préserver son autonomie"). */
.section-heading-picto{ display:flex; align-items:center; gap:18px; margin-bottom:.5em; }
.section-heading-picto .picto{ width:176px; height:176px; flex-shrink:0; }
.section-heading-picto h2{ margin-bottom:0; }

/* Le texte d'intro qui suit un titre précédé d'un pictogramme démarre sur le
   même axe gauche que le titre lui-même (décalé par le pictogramme + son
   espacement), plutôt que sur l'axe du conteneur. */
.autonomie-intro{ margin-left:194px; }
/* Sous 640px, l'icône doublée (176px) ne laisse plus assez de largeur pour ce
   paragraphe aligné sur le texte du titre : il repasse sur l'axe du
   conteneur, comme le fait déjà le titre lui-même une fois empilé. */
@media (max-width:640px){
  .autonomie-intro{ margin-left:0; }
}

/* Version agrandie d'un pictogramme d'icon-block, pour les cas signalés comme
   trop petits par rapport aux autres pictogrammes du même bloc — alignée sur
   la même taille que le pictogramme de titre ci-dessus pour une cohérence
   visuelle entre les trois icônes de ce bloc (taille doublée sur demande). */
.picto-lg{ width:176px !important; height:176px !important; }

/* ---------- Domaines d'intervention (Accueil) ---------- */
.domaines-title{ text-align:center; margin-bottom:44px; }
.domaines-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:22px;
}
.domaine-card{ text-align:left; }
.domaine-card .picto{ width:46px; height:46px; margin-bottom:16px; }
.domaine-card h3{
  font-family:var(--font-texte); font-size:.85rem; letter-spacing:.03em;
  text-transform:uppercase; font-weight:700; margin-bottom:12px; min-height:2.4em;
}
.domaine-card ul{ margin:0; padding-left:0; list-style:none; }
.domaine-card li{
  position:relative; padding-left:16px; margin-bottom:8px; font-size:.85rem; color:var(--gris-texte);
}
.domaine-card li::before{ content:"•"; color:var(--dore); position:absolute; left:0; font-weight:700; }

@media (max-width:1100px){ .domaines-grid{ grid-template-columns:repeat(3,1fr); gap:32px 24px; } }
@media (max-width:640px){ .domaines-grid{ grid-template-columns:1fr; gap:32px; } }

/* Bloc "Accompagnement relationnel & vie sociale" : ajouté sous la grille des
   domaines, sans y ajouter de 7e colonne. Réutilise exactement la typographie
   des domaine-card (h3 en majuscules, puces dorées) pour rester cohérent avec
   les autres domaines, sans toucher à .domaine-card ni à sa grille. */
.domaine-highlight{
  display:flex; align-items:flex-start; gap:28px;
  margin-top:40px;
}
.domaine-highlight-icon{ width:46px; height:46px; flex-shrink:0; }
.domaine-highlight-text h3{
  font-family:var(--font-texte); font-size:.85rem; letter-spacing:.03em;
  text-transform:uppercase; font-weight:700; margin-bottom:12px;
}
/* Taille alignée sur .icon-block p (.98rem), à la demande explicite du
   client, pour ce seul paragraphe descriptif — le reste du bloc (titre,
   liste à puces) garde sa taille d'origine. */
.domaine-highlight-text > p{ color:var(--gris-texte); font-size:.98rem; max-width:70ch; margin-bottom:12px; }
.domaine-highlight-text ul{ margin:0; padding-left:0; list-style:none; }
.domaine-highlight-text li{
  position:relative; padding-left:16px; margin-bottom:8px; font-size:.85rem; color:var(--gris-texte);
}
.domaine-highlight-text li::before{ content:"•"; color:var(--dore); position:absolute; left:0; font-weight:700; }
@media (max-width:640px){
  .domaine-highlight{ flex-direction:column; align-items:flex-start; gap:16px; }
}

.note-box{
  margin-top:44px; text-align:center;
  border-top:1px solid #e3d9c2; padding-top:32px;
}
.note-box p{ margin:0 auto; font-weight:700; max-width:70ch; }

.disclaimer{
  text-align:center; color:var(--gris-texte); font-size:.92rem; max-width:70ch; margin:0 auto;
}

/* ---------- Bandeau titre pages internes (avec photo Canva + fondu) ----------
   Le fondu vers l'ivoire est déjà présent dans l'image (comme sur Canva) : le
   bandeau conserve le ratio réel de l'export Canva (aspect-ratio) afin que le
   fondu reste toujours entièrement visible, à toutes les largeurs, plutôt que
   d'être rogné par un "cover" sur une hauteur fixe. */
.page-hero{
  position:relative;
  background-image:url('../images/bg-qui-sommes-nous.jpg');
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
  aspect-ratio:1280/850;
  width:100%;
  display:flex;
  flex-direction:column;
}
.page-hero.faq-page-hero{ background-image:url('../images/bg-faq.jpg'); aspect-ratio:1280/1000; }
.page-hero.form-page-hero{ background-image:url('../images/bg-formulaire.jpg'); aspect-ratio:1280/1000; }
.page-hero .container{ position:relative; z-index:1; max-width:900px; width:100%; }
.page-hero h1{ margin-bottom:.3em; }
.page-hero p{ max-width:60ch; font-size:1.05rem; }
/* La phrase signature ("UN ACCOMPAGNEMENT DE CONFIANCE AU QUOTIDIEN") doit
   rester strictement identique à sa version Accueil (même taille, même
   graisse) sur les 4 pages. Comme c'est un <p class="eyebrow">, elle était
   involontairement recapturée par les règles ci-dessus (.page-hero p et
   .page-hero--text-top p, plus spécifiques que .eyebrow seul), ce qui la
   faisait apparaître plus grande sur QSN/FAQ/Contact et moins grasse sur
   QSN. Cette règle, plus spécifique, restaure sa taille et sa graisse
   d'origine sans toucher aux vrais paragraphes de texte. */
.page-hero .eyebrow{ font-size:.85rem; font-weight:700; }

/* Filet de sécurité : fondu vers l'ivoire exact du site (var(--ivoire)) tout en
   bas du bandeau, pour que la jonction avec la section suivante soit
   parfaitement continue, sans dépendre de la teinte exacte du JPEG exporté.
   z-index:0 (associé au z-index:1 de .page-hero .container ci-dessus) place
   explicitement ce calque SOUS le texte du bandeau : sur les pages
   --text-bottom (FAQ/Contact), le paragraphe d'intro se trouve dans cette
   zone de fondu et ne doit plus être recouvert/délavé par le dégradé. */
.page-hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:14%; z-index:0;
  background:linear-gradient(to bottom, rgba(247,235,213,0) 0%, var(--ivoire) 100%);
  pointer-events:none;
}

/* QSN : le titre + le texte d'introduction Canva sont posés directement sur la
   photo (zone claire en haut à gauche), comme dans la maquette d'origine. */
.page-hero--text-top{
  justify-content:flex-start;
}
.page-hero--text-top .container{
  padding-top:clamp(28px,6%,64px);
  padding-bottom:clamp(24px,5%,48px);
}
.page-hero--text-top::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(255,252,244,.72) 0%, rgba(255,252,244,.55) 32%, rgba(255,252,244,0) 62%);
  pointer-events:none;
}
.page-hero--text-top .container{ max-width:500px; margin:0; padding-left:40px; }
.page-hero--text-top h1, .page-hero--text-top .eyebrow, .page-hero--text-top p{ color:var(--vert-fonce); }
.page-hero--text-top p{ font-weight:500; }
.page-hero--text-top p + p{ margin-top:1em; }

/* FAQ / Contact : sur Canva, le titre est posé sous la photo, sur l'ivoire du
   fondu — pas sur la photo elle-même. */
.page-hero--text-bottom{
  justify-content:flex-end;
}
.page-hero--text-bottom .container{
  padding-bottom:clamp(28px,6%,56px);
  /* Bloc éditorial recentré horizontalement (la boîte de 900px est déjà
     centrée sur la page ; le texte lui-même doit l'être aussi, plutôt que
     de rester aligné à gauche à l'intérieur de cette boîte centrée). */
  text-align:center;
}
.page-hero--text-bottom h1, .page-hero--text-bottom .eyebrow{ color:var(--vert-fonce); }
.page-hero--text-bottom p{ color:var(--gris-texte); margin-left:auto; margin-right:auto; }

/* Page "Décrivez-nous vos besoins" uniquement : rapprocher légèrement le bloc
   d'introduction du début du formulaire (espace jugé trop important), sans
   toucher au bandeau FAQ qui partage la même classe .page-hero--text-bottom,
   et sans déplacer le formulaire lui-même (géré par .section, non modifié
   ici) — seul le bloc d'introduction descend, via une réduction de son
   propre espace inférieur. */
.form-page-hero.page-hero--text-bottom .container{
  padding-bottom:clamp(18px,4%,38px);
}
@media (max-width:1000px){
  .form-page-hero.page-hero--text-bottom .container{
    padding-bottom:clamp(16px,4%,26px);
  }
}

/* Signature standardisée "Un accompagnement de confiance au quotidien" en
   haut à gauche, immédiatement sous la bande verte supérieure, y compris
   lorsqu'elle se superpose à la photo (FAQ / Décrivez-nous vos besoins).
   Seule la couleur du texte est adaptée pour le contraste : on ne modifie
   ni la photo, ni sa composition. */
.page-hero-signature{
  position:absolute;
  top:clamp(14px,3vw,24px);
  left:40px;
  z-index:2;
  margin:0;
  max-width:calc(100% - 80px);
  text-align:left;
  color:var(--vert-fonce);
  text-shadow:0 1px 5px rgba(255,255,255,.65), 0 0 14px rgba(255,255,255,.4);
}
/* Contact : la phrase doit rester sur une seule ligne, mais elle ne tient
   plus dans la largeur disponible sous ~480px (texte + marges plus large que
   l'écran). On bascule alors vers une seconde version, avec le même saut de
   ligne contrôlé que sur FAQ, plutôt que de laisser le texte déborder de
   l'écran (nowrap) ou se couper à un endroit imprévisible (wrap libre). */
.page-hero-signature .sig-2l{ display:none; }
.page-hero-signature .sig-1l{ white-space:nowrap; }
@media (max-width:510px){
  .page-hero-signature .sig-1l{ display:none; }
  .page-hero-signature .sig-2l{ display:inline; }
}
@media (max-width:640px){
  .page-hero-signature{ left:22px; max-width:calc(100% - 44px); }
}

/* Sous 760px, le bandeau devient trop court (ratio conservé) pour que le fondu
   ivoire natif de la photo suffise à porter le titre + le texte de présentation
   sans les faire déborder sur la photo : un fond ivoire plein assure la
   lisibilité, quelle que soit la hauteur de texte nécessaire à cette largeur. */
@media (max-width:1000px){
  .page-hero--text-bottom .container{
    background:rgba(255,252,244,.97);
    padding:20px 22px clamp(24px,6%,36px);
    max-width:100%;
  }
}

/* Sous 760px, le texte (titre + 3 paragraphes) devient trop long pour tenir
   dans la zone claire de la photo utilisée sur bureau : il est replacé sous la
   photo, sur un fondu ivoire renforcé, afin de rester lisible quelle que soit
   la longueur du texte — plutôt que de dégrader la lisibilité en conservant
   la superposition d'origine. */
@media (max-width:1000px){
  .page-hero--text-top{ justify-content:flex-end; }
  .page-hero--text-top::before{ content:none; }
  .page-hero--text-top .container{
    background:rgba(255,252,244,.97);
    padding:22px 22px clamp(24px,6%,40px);
    max-width:100%;
  }
}
/* Entre 641 et 1000px, l'opacité à 97% laissait transparaître un effet
   fantôme du visage/de la chevelure de la photo derrière le texte
   d'introduction QSN. Fond porté à 100% opaque dans cette plage uniquement. */
@media (min-width:641px) and (max-width:1000px){
  .page-hero--text-top .container{
    background:rgba(255,252,244,1);
  }
}

/* ---------- QSN : blocs mission/approche/valeurs/différence ---------- */
.icon-block{ display:flex; gap:18px; align-items:flex-start; }
/* Légère augmentation (42px -> 48px) pour une meilleure lisibilité des
   pictogrammes QSN, sans en faire de gros pictogrammes. Les blocs Accueil
   utilisant .picto-lg conservent leur propre taille (58px, !important). */
.icon-block .picto{ width:48px; height:48px; flex-shrink:0; margin-top:4px; }
/* "Notre mission" : ce fichier source a un cadre plus large que haut
   (1402×1122) alors que les pictogrammes voisins sont quasi carrés ; forcé
   dans la même case carrée que les autres, le cercle qu'il contient
   ressortait ovale. On lui donne une largeur proportionnelle à son cadre
   d'origine (même ratio ≈1,25:1) en conservant la même hauteur que les
   autres icônes de la page (48px), ce qui restitue un cercle parfaitement
   rond avec la même présence visuelle, sans toucher au personnage ni à
   aucune autre icône de la page. */
.icon-block img[src$="notre-mission.png"]{ width:60px; height:48px; }
.icon-block h3{ margin-bottom:.35em; }
/* Les blocs Accueil dont l'icône est doublée (176px, .picto-lg) n'ont plus
   assez de largeur restante pour le texte à côté sur petit mobile : l'icône
   passe au-dessus du texte à partir de cette largeur, uniquement pour ces
   blocs (les 6 blocs QSN, plus petits, restent inchangés). */
@media (max-width:640px){
  .icon-block--lg{ flex-direction:column; }
}
.icon-block p{ font-size:.98rem; }

.quote-block{
  text-align:center; padding:64px 24px; background:var(--vert-nav); color:#fff;
}
.quote-block blockquote{
  margin:0 auto; max-width:820px; font-family:var(--font-titres);
  font-size:clamp(1.35rem,2.6vw,1.9rem); font-style:italic; color:var(--dore-clair);
}

.medical-block{ text-align:center; max-width:760px; margin:0 auto; position:relative; }
.medical-block .strong-line{ font-size:1.2rem; font-weight:700; margin-top:16px; }

/* ---------- FAQ ---------- */
.accordion{ max-width:960px; margin:0 auto; }

.accordion-item{ border-bottom:1.5px solid var(--dore); }
.accordion-question{
  position:relative;
  width:100%; display:flex; align-items:center;
  background:none; border:none; text-align:left; padding:24px 6px; cursor:pointer;
  font-family:var(--font-titres); font-weight:700; font-size:1.2rem; color:var(--vert-fonce);
}
.accordion-question:hover{ color:var(--dore); }
.accordion-question:focus-visible{ outline:3px solid var(--dore); outline-offset:2px; border-radius:6px; }
/* Les chevrons doivent former une colonne verticale unique : plutôt que de
   suivre chaque texte (ce qui les décale tous différemment), ils sont
   positionnés à une distance fixe depuis le bord gauche, calculée une fois
   sur la question la plus longue de la FAQ (« Puis-je être véhiculé(e)
   pour un rendez-vous et combien cela coûte ? », ≈559px à cette taille de
   police) plus environ 1cm. Sur mobile, où les questions passent sur
   plusieurs lignes, cette colonne fixe en pixels n'a plus de sens : le
   chevron repasse près du bord droit, à une distance identique pour toutes
   les questions. */
.accordion-icon{
  position:absolute; left:597px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; font-weight:700; color:var(--dore);
  transition:transform .25s ease;
}
.accordion-question[aria-expanded="true"] .accordion-icon{ transform:translateY(-50%) rotate(45deg); color:var(--dore); }
@media (max-width:760px){
  .accordion-question{ padding-right:50px; }
  .accordion-icon{ left:auto; right:8px; }
}
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.accordion-panel-inner{ padding:0 6px 24px; color:var(--gris-texte); font-size:1rem; max-width:75ch; }
.accordion-panel-inner ul{ margin:0 0 1em; padding-left:0; list-style:none; }
.accordion-panel-inner li{ position:relative; padding-left:16px; margin-bottom:6px; }
.accordion-panel-inner li::before{ content:"•"; color:var(--dore); position:absolute; left:0; font-weight:700; }

/* Accroche "Les petits gestes Sérénia" dans l'accordéon "Prestations et
   tarifs" : mise en valeur champagne/doré, cohérente avec .accent et les
   petits titres en majuscules déjà utilisés ailleurs sur le site, afin que
   cette information soit immédiatement visible avant les tarifs. */
.petits-gestes-titre{
  display:block;
  color:var(--dore);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:.5em;
}

/* ---------- FAQ : sous-accordéons "Nos formules d'accompagnement" ----------
   Second niveau, imbriqué dans le panneau "Nos formules d'accompagnement".
   Réutilise la classe .accordion-question (mêmes couleurs/police/icône
   "+" avec rotation) mais dans un gabarit plus compact, et repositionne
   l'icône à droite plutôt que sur la colonne fixe à 597px calculée pour
   les questions de premier niveau (qui n'a pas de sens à cette échelle). */
.sub-accordion{ margin-top:28px; border-top:1px solid var(--dore-ligne); }
.sub-accordion-item{ border-bottom:1px solid var(--dore-ligne); }
.sub-accordion-question{
  padding:16px 40px 16px 4px;
  font-size:1.05rem;
}
.sub-accordion-question .accordion-icon{
  left:auto; right:4px; width:28px; height:28px; font-size:1.4rem;
}
.sub-accordion-panel-inner{ padding:0 4px 22px; max-width:none; }

/* Bloc secondaire blanc contenant l'exemple de composition/calcul d'une
   formule : se détache du fond ivoire du panneau parent. */
.formule-example{
  background:var(--blanc);
  border:1px solid var(--dore-clair);
  border-radius:10px;
  padding:20px 22px;
}
.formule-example p{ margin:0 0 12px; }
.formule-example p:last-child{ margin-bottom:0; }
.formule-example ul{ margin:0 0 12px; }
.formule-note{ font-style:italic; }
.formule-ligne{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; font-weight:600; }
.formule-total{ border-top:1px solid var(--dore-clair); padding-top:12px; margin-top:4px; }
.formule-montant{ font-size:1.15rem; font-weight:700; }
@media (max-width:480px){
  .formule-example{ padding:16px; }
}

/* ---------- Formulaire (page complète, sans carte encadrée, fidèle à Canva) ---------- */
.form-page-inner{ max-width:820px; margin:0 auto; }
.form-row{ margin-bottom:22px; }
.form-row--split{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:560px){ .form-row--split{ grid-template-columns:1fr; } }
label{ display:block; font-weight:700; margin-bottom:8px; font-size:1rem; color:var(--vert-fonce); }
.required-mark{ color:var(--dore); }
input[type="text"], input[type="tel"], input[type="email"], textarea{
  width:100%; padding:13px 16px; border:1.5px solid var(--dore-ligne); border-radius:10px;
  font-family:var(--font-texte); font-size:1rem; color:var(--vert-fonce); background:#fffdf8;
  transition:border-color .2s ease, box-shadow .2s ease;
}
textarea{ resize:vertical; min-height:130px; }
input:focus-visible, textarea:focus-visible{
  outline:none; border-color:var(--dore); box-shadow:0 0 0 3px rgba(154,107,50,.18);
}
input[aria-invalid="true"], textarea[aria-invalid="true"]{ border-color:#b1442e; }
.error-msg{ color:#b1442e; font-size:.86rem; margin-top:6px; min-height:1.2em; }
fieldset{ border:none; padding:0; margin:0; }
legend{ font-weight:700; padding:0; margin-bottom:14px; font-size:1.05rem; color:var(--vert-fonce); }
.radio-group{ display:flex; gap:30px; flex-wrap:wrap; justify-content:center; }
.radio-group label{ display:flex; align-items:center; gap:8px; font-weight:600; cursor:pointer; }
.radio-group input[type="radio"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:22px; height:22px; margin:0; flex-shrink:0; padding:0;
  border:2px solid var(--vert-fonce); border-radius:50%;
  background-color:#fffdf8;
  display:inline-grid; place-content:center;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.radio-group input[type="radio"]::before{
  content:""; width:10px; height:10px; border-radius:50%;
  background-color:var(--dore); transform:scale(0); transition:transform .15s ease;
}
.radio-group input[type="radio"]:checked::before{ transform:scale(1); }
.radio-group input[type="radio"]:hover{ border-color:var(--dore); }
.radio-group input[type="radio"]:focus-visible{
  outline:3px solid var(--dore); outline-offset:2px;
}
.form-actions{ text-align:center; margin-top:8px; }
.form-status{ margin-top:20px; padding:16px 20px; border-radius:10px; font-weight:700; display:none; text-align:center; }
.form-status.is-success{ display:block; background:#e7f2ea; color:#1c5432; }
.form-status.is-error{ display:block; background:#fbeae6; color:#b1442e; }

.contact-direct{ text-align:center; margin-top:40px; padding-top:32px; border-top:1px solid #e3d9c2; }
.contact-direct p{ margin:0 0 4px; }
.contact-direct .contact-line{ font-size:.95rem; color:var(--vert-fonce); }

.center{ text-align:center; }