/* =========================================================
   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); }

/* Lien discret à l'intérieur d'un paragraphe (ex. FAQ) : texte légèrement
   renforcé et fin soulignement champagne, sans bouton ni encadré, pour rester
   sobre et cohérent avec le reste du site. */
.inline-link{
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--dore);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .2s ease;
}
.inline-link:hover, .inline-link:focus-visible{ color:var(--dore); }
.inline-link:focus-visible{
  outline:2px solid var(--dore); outline-offset:3px; border-radius:2px;
}

.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); }

/* Bouton "PDF" (plaquette de présentation) dans la bande verte : volontairement
   compact — icône document + libellé court "PDF" + icône de téléchargement —
   plutôt qu'un intitulé long, pour ne pas prendre de place inutile à côté des
   5 liens de navigation habituels. Forme en pilule fine et sobre (simple
   contour, pas de remplissage plein), cohérente avec le reste de la bande :
   --dore-clair pour le texte/contour au repos (contraste validé sur fond
   vert foncé), passage à blanc + contour --dore au survol/focus, à l'identique
   du traitement des autres liens de ce menu. Une infobulle native (title)
   et un libellé accessible complet (aria-label) précisent qu'il s'agit du
   téléchargement de la présentation de l'entreprise en PDF. */
.nav-links .nav-brochure-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border:1px solid var(--dore-clair);
  border-radius:999px;
  transition:color .2s ease, border-color .2s ease, background-color .2s ease;
}
.nav-links .nav-brochure-link:hover,
.nav-links .nav-brochure-link:focus-visible{
  color:#fff;
  border-color:var(--dore);
  background:rgba(154,107,50,.18);
}
.nav-brochure-icon,
.nav-brochure-download-icon{
  flex-shrink:0;
  stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.nav-brochure-icon{ width:14px; height:14px; }
.nav-brochure-download-icon{ width:11px; height:11px; transition:transform .2s ease; }
.nav-brochure-link:hover .nav-brochure-download-icon,
.nav-brochure-link:focus-visible .nav-brochure-download-icon{
  transform:translateY(2px);
}

/* Le nouveau bouton "PDF" ajoute un peu de largeur à une navigation qui,
   même avant lui, ne tenait déjà plus sur une seule ligne en dessous
   d'environ 1080px avec l'espacement d'origine (gap:44px, padding 40px) —
   ce point de compression existait donc déjà. Léger resserrement, ici
   uniquement de l'espacement et des marges latérales (jamais la taille du
   texte, ni le point de bascule du menu mobile à 860px) pour ramener ce
   seuil aussi près que possible de son niveau d'origine. Sans effet au-delà
   de 1440px, où l'espacement d'origine reste inchangé. */
@media (max-width:1439px){
  .nav{ padding-left:24px; padding-right:24px; }
  .nav-links{ gap:20px; }
}

/* Utilitaire d'accessibilité : contenu présent pour les lecteurs d'écran
   uniquement (ex. précision "document PDF téléchargeable"), invisible et
   sans impact sur la mise en page pour les autres visiteurs. */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.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);
  }
  .nav-links .nav-brochure-link{
    display:inline-flex; margin:12px 24px;
  }
}

/* ---------- 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; }
/* Accueil uniquement : depuis le transfert de "Nos domaines d'intervention"
   vers la page Services, cette section ("Préserver son autonomie") devient la
   dernière du contenu principal, juste avant le pied de page. Un espace
   inférieur plus généreux évite qu'elle ne s'arrête trop brusquement contre
   la bande verte de contact, sans étirer artificiellement son contenu. */
.section--closing-accueil{ padding-bottom:110px; }

.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 (page Services) ----------
   7 blocs strictement standardisés (même gabarit, même typographie, mêmes
   puces) répartis en rangées de 3 sur desktop : la grille CSS classique
   laisserait le 7e bloc seul, aligné à gauche dans sa colonne de grille ; en
   flexbox avec justify-content:center, ce dernier bloc se centre naturellement
   sur sa propre rangée au lieu de sembler ajouté après coup. */
/* Petit intitulé discret introduisant la section, dans le même style que les
   autres petits intitulés du site (.eyebrow), centré au-dessus du titre. */
.domaines-eyebrow{ display:block; text-align:center; margin-bottom:10px; }
.domaines-title{ text-align:center; margin-bottom:44px; }
.domaines-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:36px 22px;
}
.domaine-card{
  text-align:left;
  flex:0 1 calc((100% - 2*22px)/3);
}
.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;
}
/* Paragraphe d'introduction du bloc "Accompagnement relationnel & vie
   sociale" (seul domaine à en comporter un dans le contenu d'origine) : garde
   le texte existant, mais avec la même typographie que les puces du bloc pour
   ne plus se distinguer visuellement des 6 autres domaines. */
.domaine-card-intro{
  font-size:.85rem; color:var(--gris-texte); margin:0 0 8px;
}
.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){
  .domaine-card{ flex-basis:calc((100% - 24px)/2); }
}
@media (max-width:640px){
  .domaine-card{ flex-basis:100%; }
  .domaines-grid{ 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;
  /* Cible réelle du bouton "Découvrir la suite" (FAQ / Contact, cf. js/main.js) :
     ce conteneur porte le titre (h1) et le texte d'introduction du bandeau.
     scroll-margin-top réserve, lors du défilement programmatique déclenché
     par ce bouton, un espace égal à la hauteur de la bande verte fixe
     (.site-header, position:sticky) plus une marge de respiration, afin que
     le titre ne soit jamais masqué par cette bande ni collé à son bord.
     Mesuré à 70-79px aux 4 largeurs de référence (1440/900/768/390px) :
     115px couvre ce cas partout avec une marge cohérente, sans dépendre
     d'un décalage fixe par palier. N'affecte pas le défilement manuel
     normal, ni la mise en page (scroll-margin n'a aucun effet visuel hors
     défilement). */
  scroll-margin-top:115px;
}
.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; }

/* ---------- HERO Services : même principe de composition que le hero
   Accueil (photo+fondu en fond de section, texte en colonne gauche dans la
   zone ivoire de l'image, image "cover" cadrée par palier de largeur). Des
   classes propres à cette page (.services-hero / .services-hero-photo-mobile)
   sont utilisées pour ne modifier ni les règles .hero / .hero-photo-mobile
   ni la page d'accueil ; en revanche .hero-inner, .hero-col-text, .eyebrow,
   .lead et .lead-strong (typographie et largeur de la colonne de texte) sont
   réutilisées telles quelles, à l'identique de l'accueil. Contrairement à
   l'image d'accueil, la scène photographique de ce fichier est cadrée à
   droite (pas centrée) : le cadrage horizontal est donc fixé à "right" et
   seul le cadrage vertical est réglé par palier. */
.services-hero{
  position:relative;
  background-image:url('../images/bg-services.png');
  background-size:cover;
  background-position:right 22%;
  background-repeat:no-repeat;
  padding-top:56px;
  padding-bottom:0;
}
@media (min-width:1000px){
  .services-hero{ background-position:right 15%; }
}
@media (min-width:1110px){
  .services-hero{ background-position:right 10%; }
}
@media (min-width:1440px){
  .services-hero{ background-position:right 4%; }
}
.services-hero-photo-mobile{ display:none; }
@media (max-width:900px){
  .services-hero{ background-image:none; background-color:var(--ivoire); padding-bottom:0; }
  .services-hero-photo-mobile{
    display:block; position:relative; width:100%; aspect-ratio:4/3;
    background-image:url('../images/bg-services.png');
    background-size:cover; background-position:right 12%; background-repeat:no-repeat;
  }
  .services-hero-photo-mobile::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(247,235,213,0) 60%, var(--ivoire) 100%);
  }
}
@media (max-width:640px){
  .services-hero{ padding-top:36px; }
}

/* 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; }

/* ---------- Services : encart "Les petits gestes Sérénia" ----------
   Ce contenu vivait auparavant dans la FAQ (accordéon "Prestations et
   tarifs") ; il alourdissait la partie tarifaire et a été déplacé ici, sur
   la page Services, entre la grille des domaines d'intervention et le
   bandeau de contact final. Volontairement distinct de .domaine-card :
   pas une carte de plus dans la grille (pas de picto, pas de puce dorée "•"
   identique aux domaines), et pas un encart en boîte blanche non plus —
   fond ivoire identique à celui de la section, parfaitement fondu dans la
   page, avec pour seul repère visuel un simple filet doré vertical à
   gauche, marqueur "–" pour les exemples — sobre et chaleureux plutôt que
   criard, tout en restant dans les couleurs et la typographie du site. */
.petits-gestes-panel{
  background:transparent;
  border-left:4px solid var(--dore);
  padding:36px 44px;
}
.petits-gestes-panel h2{
  font-size:clamp(1.3rem, 1.8vw, 1.6rem);
  margin-bottom:.55em;
}
.petits-gestes-panel > p{
  max-width:70ch;
  color:var(--gris-texte);
}
.petits-gestes-examples-intro{
  font-weight:700;
  color:var(--vert-fonce);
  margin-bottom:.6em;
}
.petits-gestes-examples{
  columns:2;
  column-gap:36px;
  margin:0;
  padding-left:0;
  list-style:none;
}
.petits-gestes-examples li{
  position:relative;
  padding-left:18px;
  margin-bottom:10px;
  font-size:.92rem;
  color:var(--gris-texte);
  break-inside:avoid;
}
.petits-gestes-examples li::before{
  content:"–";
  color:var(--dore);
  position:absolute; left:0; font-weight:700;
}
@media (max-width:760px){
  .petits-gestes-panel{ padding:28px 24px; }
  .petits-gestes-examples{ columns:1; }
}

/* ---------- 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; }

/* ---------- Invite "Découvrir la suite" ----------
   FAQ & Tarifs / Décrivez-nous vos besoins uniquement. Le bandeau photo
   (.page-hero) a une hauteur qui suit son aspect-ratio fixe et grandit donc
   linéairement avec la largeur d'écran, alors que la fenêtre du navigateur,
   elle, ne grandit pas dans les mêmes proportions : à partir d'un certain
   seuil de largeur, le bandeau devient plus haut que l'écran réellement
   visible et un bouton placé juste en dessous (dans le flux normal de la
   page) n'apparaît alors plus au premier écran. Deux présentations du même
   bouton coexistent donc dans le HTML ; une seule est affichée à la fois
   (l'autre passe en display:none, donc hors de l'arbre d'accessibilité et de
   l'ordre de tabulation), et js/main.js cible toujours la même section quel
   que soit le bouton effectivement cliqué :

   — au-delà de 820px (ordinateur, la plupart des tablettes en paysage) : le
     bandeau dépasse la hauteur d'écran usuelle, donc le bouton est superposé
     à la photo elle-même (.hero-scrolldown-overlay), dans une zone claire de
     chaque image repérée visuellement (fenêtre floutée à droite sur la photo
     FAQ ; pan de mur/rideau à droite sur la photo Contact), à l'écart de tout
     visage, main, tablette, cadre ou texte, et jamais centrée. Un fond ivoire
     translucide en forme de pastille assure la lisibilité quel que soit le
     ton de la photo à cet endroit, sans recouvrir ni assombrir l'image.
   — à 820px et en dessous (tablette portrait, mobile) : le bandeau tient déjà
     dans le premier écran des appareils courants ; le bouton reste donc sous
     la photo (.hero-scrolldown-bar), dans le flux normal de la page, sur le
     même ivoire que le fondu déjà présent en bas du bandeau (cf.
     .page-hero::after), sans jamais toucher à la hauteur, au cadrage ou au
     dégradé de .page-hero (non modifié ici). */
.hero-scrolldown-bar{
  background:var(--ivoire);
  display:flex;
  justify-content:center;
  padding:10px 0 16px;
}
@media (max-width:1000px){
  /* Continuité exacte avec le fond plein (légèrement plus clair que l'ivoire)
     que .page-hero--text-bottom .container applique sous 1000px pour la
     lisibilité du texte posé sur la photo : évite toute coupure de teinte
     visible entre ce bloc et la bande du bouton, sans modifier cette règle
     existante. */
  .hero-scrolldown-bar{ background:rgba(255,252,244,.97); }
}
/* Habillage premium du bouton — identique sur les deux présentations
   (pastille superposée à la photo / bouton sous la photo) et sur les deux
   pages : forme ovale, contour champagne officiel affirmé (#9A6B32 =
   var(--dore), 2px), fond ivoire nettement visible sur la photographie,
   texte dans le vert officiel du site avec un espacement soigné, chevron
   champagne agrandi et bien identifiable. Une ombre douce mais présente
   détache la pastille de la photo sans jamais devenir un effet brillant.
   Au survol/focus clavier : fond champagne plus marqué, contour approfondi
   (même teinte que le survol des boutons pleins du site), texte inchangé
   (vert foncé), léger déplacement du chevron vers le bas — sans aucune
   autre animation permanente. */
.hero-scrolldown{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  background:rgba(247,235,213,.97);
  border:2px solid var(--dore);
  border-radius:999px;
  margin:0;
  padding:11px 26px;
  cursor:pointer;
  font-family:var(--font-texte);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--vert-fonce);
  box-shadow:0 4px 18px rgba(1,68,48,.17);
  -webkit-tap-highlight-color:transparent;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hero-scrolldown:hover,
.hero-scrolldown:focus-visible{
  background:rgba(154,107,50,.24);
  border-color:#7f5726;
  box-shadow:0 6px 20px rgba(1,68,48,.22);
}
.hero-scrolldown:focus-visible{
  outline:2px solid var(--dore);
  outline-offset:4px;
}
.hero-scrolldown-chevron{
  color:var(--dore);
  flex-shrink:0;
  transform:scale(1.35);
  transition:transform .25s ease;
}
.hero-scrolldown-chevron path{ stroke-width:3.4; }
.hero-scrolldown:hover .hero-scrolldown-chevron,
.hero-scrolldown:focus-visible .hero-scrolldown-chevron{
  transform:scale(1.35) translateY(4px);
}

/* -- Version "sur photo" (> 820px) -- */
.hero-scrolldown-overlay{ display:none; }
@media (min-width:821px){
  .hero-scrolldown-bar{ display:none; }
  .hero-scrolldown-overlay{
    display:block;
    position:absolute;
    z-index:2;
  }
  /* Zone claire repérée sur la photo FAQ : fenêtre floutée en haut à droite,
     à l'écart des deux visages et des mains. */
  .faq-page-hero .hero-scrolldown-overlay{ top:3%; right:2.5%; }
  /* Zone claire repérée sur la photo Contact : bande de mur/rideau tout en
     haut à droite (avant le cadre photo, la tête du collaborateur en
     arrière-plan et la signature texte en haut à gauche, qui reste sur une
     seule ligne mais n'est jamais assez large pour atteindre cette zone,
     même aux plus étroites des largeurs concernées ici). Même inset que la
     photo FAQ : le bouton reste ainsi toujours au-dessus du cadre et de la
     silhouette (qui commencent plus bas sur la photo), quelle que soit la
     largeur d'écran. */
  .form-page-hero .hero-scrolldown-overlay{ top:3%; right:2.5%; }
}