/* ==========================================================================
   APAISIA FAMILLE — feuille de style unique, partagée par les 3 pages.
   Design repris des maquettes du 18/08/2026 (marine / crème / or,
   Inter seule), réintégré ici avec ce que les maquettes n'avaient pas :
   focus clavier visible, menu mobile, tailles en rem, contrastes WCAG AA.
   ========================================================================== */

:root{
  /* Marine */
  --navy:#1B2B3C;
  --navy-light:#26394D;
  --navy-badge:#1E3040;

  /* Crème */
  --cream:#F7F1E4;
  --cream-warm:#F1E7D3;
  /* Troisième teinte de la même famille (pas une couleur en plus) : pour un
     bandeau qui doit se détacher franchement du crème et du crème chaud
     voisins, sans sortir de la palette à trois couleurs du site. */
  --cream-deep:#E8D8B8;

  /* Or — deux valeurs volontairement distinctes :
     --gold sert aux fonds, bordures et décorations, et au texte posé sur le
     marine (5,42 sur --navy) ; --gold-deep sert au texte et aux boutons sur
     fond crème. La valeur des maquettes (#A17E43) échouait WCAG AA
     (3,34 sur crème, 3,76 pour le blanc posé dessus) : assombrie ici à
     5,03 sur crème et 5,67 pour le blanc des boutons. */
  --gold:#C19856;
  --gold-deep:#80622F;
  /* Or légèrement éclairci pour le texte posé sur --navy-light, plus clair
     que --navy : --gold n'y atteignait que 4,45 (seuil 4,5). Ici 4,83. */
  --gold-on-light:#C89F5D;


  --text:#2B2A26;
  --text-soft:#5C5647;
  --line:#DED2B8;

  --shadow-sm:0 1px 3px rgba(27,43,60,.07);
  --shadow-md:0 10px 26px rgba(27,43,60,.09);
  --shadow-lg:0 18px 40px rgba(27,43,60,.16);

  --radius-md:1rem;
  --radius-pill:1.875rem;

  --wrap:70rem;

  /* Rythme vertical des sections. Une seule source pour toute la page :
     modifier ces trois valeurs recale l'ensemble du site. */
  --section-haut:2.5rem;   /* au-dessus du sur-titre d'une section */
  --section-bas:3.5rem;    /* sous le dernier élément */
  --bandeau-y:1.5rem;      /* bandeaux de couleur pleine, symétriques */
}

*{box-sizing:border-box; margin:0; padding:0;}
/* Filet de sécurité : une image trop large ne peut pas élargir la page. */
img{max-width:100%; height:auto;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;}
a{color:inherit;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 2rem; position:relative; z-index:1;}

/* ── Focus clavier ─────────────────────────────────────────────────────────
   Absent des maquettes : sans ça, naviguer au clavier est impossible à suivre.
   Un seul style global, décliné en clair sur les fonds marine.            */
:focus-visible{
  outline:3px solid var(--gold-deep);
  outline-offset:3px;
  border-radius:2px;
}
header :focus-visible,
.quote-band :focus-visible,
.final-cta :focus-visible,
footer :focus-visible{
  outline-color:var(--gold);
}

/* ── Lien d'évitement ───────────────────────────────────────────────────── */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:var(--cream);
  padding:.75rem 1.25rem; text-decoration:none; font-weight:600;
}
.skip-link:focus{left:0;}

/* ── Décor ─────────────────────────────────────────────────────────────── */
.decor-blob{position:absolute; border-radius:50%; pointer-events:none; z-index:0;}
.decor-blob.gold{background:radial-gradient(circle at 35% 35%, rgba(198,154,75,.14), transparent 70%);}
.decor-blob.navy{background:radial-gradient(circle at 35% 35%, rgba(27,43,60,.06), transparent 70%);}

/* ── Apparition au défilement ──────────────────────────────────────────────
   L'état masqué n'est appliqué que si js/anim.js a pu poser la classe
   `js-anim` sur <html>. Sans JavaScript, tout le contenu reste visible :
   dans les maquettes, un blocage du JS rendait la page entièrement vide.  */
.js-anim .reveal{opacity:0; transform:translateY(1rem); transition:opacity .6s ease, transform .6s ease;}
.js-anim .reveal.in{opacity:1; transform:none;}

/* ==========================================================================
   EN-TÊTE & NAVIGATION
   ========================================================================== */
header{
  background:var(--navy); color:var(--cream);
  box-shadow:0 2px 12px rgba(0,0,0,.12);
  position:sticky; top:0; z-index:50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-top:.875rem; padding-bottom:.875rem;
}

.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; flex:none;}
.brand-mark{
  width:3.25rem; height:3.25rem; border-radius:50%;
  border:2px solid var(--gold); padding:2px; background:var(--navy); flex:none;
}
.brand-mark img{width:100%; height:100%; border-radius:50%; object-fit:cover;}
/* display:block : ce sont des <span> (un <a> ne doit contenir que de
   l'inline ici), il faut donc forcer l'empilement des deux lignes. */
.brand-name{display:block; font-size:.9375rem; font-weight:700; letter-spacing:.08em; line-height:1.2;}
.brand-sub{display:block; font-size:.75rem; color:var(--gold); letter-spacing:.06em; text-transform:uppercase; margin-top:2px; line-height:1.2;}

.nav-links{display:flex; gap:1.75rem; align-items:center; list-style:none;}
.nav-links a{
  color:var(--cream); text-decoration:none; font-size:.875rem; font-weight:600;
  opacity:.88; transition:opacity .2s ease, color .2s ease;
  display:inline-block; padding:.5rem 0;
}
.nav-links a:hover{opacity:1; color:var(--gold);}
.nav-links a[aria-current="page"]{color:var(--gold); opacity:1;}

.header-actions{display:flex; align-items:center; gap:1.125rem; flex:none;}
.header-phone{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--cream); text-decoration:none; font-size:.9375rem; font-weight:600;
  opacity:.92; white-space:nowrap;
}
.header-phone svg{
  width:1.0625rem; height:1.0625rem; flex:none;
  stroke:currentColor; fill:none; stroke-width:1.7; stroke-linejoin:round;
  color:var(--gold);
}
.header-phone:hover svg{color:inherit;}
.header-phone:hover{color:var(--gold); opacity:1;}
.header-cta{
  background:var(--gold-deep); color:#fff; text-decoration:none;
  padding:.625rem 1.375rem; border-radius:var(--radius-pill);
  font-size:.8125rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  transition:background .2s ease; white-space:nowrap;
}
.header-cta:hover{background:var(--gold); color:var(--navy);}

/* Bouton burger — masqué sur grand écran, seul moyen d'ouvrir le menu
   sous 900px. Les maquettes faisaient disparaître la nav sans remplacement. */
.nav-toggle{
  display:none;
  background:none; border:0; cursor:pointer;
  width:2.75rem; height:2.75rem;           /* cible tactile WCAG 2.5.5 */
  padding:.625rem; flex-direction:column; justify-content:space-between;
}
.nav-toggle span{display:block; height:2px; width:100%; background:var(--cream); border-radius:2px;}

@media (max-width:900px){
  /* Cibles tactiles portées à 44 px (WCAG 2.5.5) sur les écrans où l'on touche
     du doigt. Sur ordinateur, à la souris, la taille d'origine suffit et le
     dessin des boutons reste inchangé. */
  .header-cta{padding:.8125rem 1.375rem;}
  .radio-item{padding:.75rem .5rem .75rem 0;}
  .nav-toggle{display:flex;}
  .header-inner{flex-wrap:wrap;}
  .nav-links{
    display:none;
    order:3; width:100%;
    flex-direction:column; align-items:stretch; gap:0;
    border-top:1px solid rgba(247,241,228,.15);
    margin-top:.75rem; padding-top:.5rem;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:.875rem .25rem; font-size:1rem;}
  .header-actions{gap:.875rem;}
}
@media (max-width:560px){
  .wrap{padding:0 1.25rem;}
  .brand-mark{width:2.75rem; height:2.75rem;}
  .brand-name{font-size:.8125rem;}
  /* Sous 560px, la marque + le burger remplissent déjà la première ligne :
     le numéro et le bouton passent sur une seconde ligne, centrée, pour
     que ça reste lisible plutôt que tassé à gauche. */
  .header-actions{order:4; width:100%; justify-content:center; gap:1.25rem;}
  .header-phone{font-size:1rem;}
}

/* ── Bandeau doré ──────────────────────────────────────────────────────── */
.gold-banner{background:var(--gold); text-align:center; padding:.625rem 1rem;}
.gold-banner span{color:var(--navy); font-weight:700; font-size:.875rem; letter-spacing:.02em;}

/* ==========================================================================
   BLOCS COMMUNS
   ========================================================================== */
.eyebrow{
  /* Agrandis le 21/08 pour qu'ils portent davantage. L'interlettrage est
     resserré en proportion : à .16em, 18 px devenaient trop aérés. */
  display:inline-block; font-size:1.125rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:700; margin-bottom:1rem;
}
.section-head{text-align:center; max-width:50rem; margin:0 auto 2.5rem; position:relative; z-index:1;}
/* Filets dorés de part et d'autre du sur-titre. inline-flex et non flex : le
   bloc reste un élément en ligne, donc centré par le text-align:center du
   conteneur, au lieu de s'étirer sur toute la largeur. Les filets sont des
   pseudo-éléments, aucun balisage supplémentaire dans le HTML. */
.section-head .eyebrow{
  margin-bottom:.75rem;
  display:inline-flex; align-items:center; justify-content:center; gap:1rem;
}
.section-head .eyebrow::before,
.section-head .eyebrow::after{
  content:""; height:1px; width:3rem; flex:none; background:var(--gold);
}
@media (max-width:560px){
  .section-head .eyebrow{gap:.625rem;}
  .section-head .eyebrow::before,
  .section-head .eyebrow::after{width:1.5rem;}
}
.section-head h2{
  font-family:'Inter',system-ui,sans-serif; font-weight:700;
  font-size:clamp(1.5rem,3vw,2rem); color:var(--navy); margin-bottom:.75rem; line-height:1.3;
}
.section-head p{max-width:38rem; margin:0 auto; color:var(--text-soft); font-size:.9375rem; line-height:1.65;}
.section-head p + p{margin-top:.75rem;}
/* Accueil, « Vous vivez loin de la Touraine… » : exactement deux lignes
   (question / réponse) sur ordinateur, quelle que soit la largeur de la
   fenêtre — la taille se réduit légèrement si la fenêtre est étroite.
   Sur mobile, le texte revient à la ligne normalement. */
.section-head p.section-head-large{max-width:none;}
@media (min-width:760px){
  .section-head-large .hero-sub-accent{white-space:nowrap; font-size:min(1.1875rem, calc((100vw - 4rem) / 40));}
}

/* Boutons remplis avec --gold, l'or du bandeau « Un accompagnement pensé
   pour vous ». Le texte est obligatoirement marine, pas blanc : sur cet or
   clair, le blanc ne donne que 2,66 de contraste (illisible), le marine 5,42
   — c'est exactement le couple utilisé par le bandeau. */
.btn-primary{
  display:inline-block; background:var(--gold); color:var(--navy); text-decoration:none;
  padding:1rem 2.375rem; border-radius:var(--radius-pill);
  font-size:.8125rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:var(--shadow-md);
  transition:background .2s ease, color .2s ease, transform .2s ease;
  border:0; cursor:pointer; font-family:inherit; text-align:center;
}
.btn-primary:hover{background:var(--navy); color:var(--cream); transform:translateY(-1px);}
.btn-secondary{
  display:inline-block; background:var(--gold); color:var(--navy); text-decoration:none;
  padding:.9375rem 2.25rem; border-radius:var(--radius-pill);
  font-size:.8125rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border:1.5px solid var(--gold);
  transition:background .2s ease, color .2s ease, border-color .2s ease; text-align:center;
}
.btn-secondary:hover{background:var(--navy); border-color:var(--navy); color:var(--cream);}
/* align-items:stretch et non center : quand la rangee contient le bouton sur
   deux lignes (.formules-cta), le bouton voisin s'etire a la meme hauteur au
   lieu de flotter au milieu. Sur les rangees ou les deux boutons font une seule
   ligne, cela ne change rien. */
.btn-cta-row{display:flex; align-items:stretch; justify-content:center; gap:1rem; flex-wrap:wrap;}
.btn-cta-row .btn-primary,.btn-cta-row .btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
}
/* Variante agrandie, posee a la main sur les deux boutons secondaires de
   l'accueil : ils voisinent le grand bouton « Me contacter » et doivent
   partager sa taille de police. Une classe explicite plutot qu'un selecteur
   :has() — celui-ci echouerait en silence sur un navigateur ancien, et la page
   Formules garde son couple de boutons a 13 px. */
.btn-secondary-lg{font-size:1rem;}

/* Variantes sur fond marine : le principal reste or, le secondaire redevient
   un bouton à contour clair — sans `background` explicite il héritait du
   remplissage or et les deux devenaient indistinguables sur le bloc bleu. */
.on-navy .btn-secondary{background:transparent; border-color:var(--cream); color:var(--cream);}
.on-navy .btn-secondary:hover{background:var(--cream); border-color:var(--cream); color:var(--navy);}
.on-navy .btn-primary:hover{background:var(--cream); color:var(--navy);}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding:2.25rem 0 2.25rem; text-align:center; position:relative; overflow:hidden;}
/* Titre du hero en Inter. Le serif italique Fraunces des maquettes a été
   jugé trop vieillot et retiré de tout le site. Graisse forte et interlettrage resserré pour un rendu
   contemporain, et une seule couleur marine sur toute la phrase. */
.hero h1{
  font-family:'Inter',system-ui,sans-serif; font-style:normal; font-weight:700;
  font-size:clamp(1.875rem,4.4vw,3rem); line-height:1.18; letter-spacing:-.02em;
  max-width:56rem; margin:0 auto 1.375rem; color:var(--navy);
}
/* « À vos côtés, je vous aide. » en or. Pas l'or décoratif --gold (#C19856) : sur fond
   crème il ne donne que 2,36, sous le seuil de 3,0 des grands textes.
   --gold-deep atteint 5,03 et reste l'or déjà utilisé par les boutons. */
.hero-h1-accent{color:var(--gold-deep);}
/* Sur-titre du hero de l'accueil : en simple texte, il se fondait dans la page
   juste sous l'en-tête. Passé en badge plein (même langage que .hero-offre et
   .badge-diplome) pour qu'il se détache nettement au premier coup d'œil,
   au lieu d'être lu comme une légende discrète. Accueil uniquement — le
   sur-titre de la page Formules garde le style .eyebrow simple. */
.hero-eyebrow-badge{
  /* --navy-light plutôt que --navy-badge : bleu plus clair, déjà de la palette
     du site (utilisé sur les cartes .pilier) et déjà apparié à --gold-on-light
     pour le contraste (4,83). */
  display:inline-flex; background:var(--navy-light); color:var(--gold-on-light);
  padding:.75rem 1.5rem; border-radius:var(--radius-pill);
  border:1.5px solid var(--gold); /* même principe que .badge-diplome */
  box-shadow:var(--shadow-sm); margin-bottom:1.5rem;
  /* Reste en Inter (deux polices essayées, aucune retenue le 15/09/2026) :
     le contraste vient d'une casse normale — pas de majuscules forcées comme
     .eyebrow — et d'une taille nettement plus grande que le badge d'origine. */
  font-family:'Inter',system-ui,sans-serif; font-weight:700;
  text-transform:none; letter-spacing:-.005em; font-size:1.0625rem;
}
.hero-sub{max-width:35rem; margin:0 auto 2.125rem; color:var(--text-soft); font-size:1.0625rem; line-height:1.7;}
/* Photo ajoutée le 15/09/2026 à côté du texte de présentation, en deux
   colonnes. Le texte repasse à gauche (le reste du hero reste centré). */
.hero-sub-row{
  display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:stretch;
  max-width:52rem; margin:0 auto 2.125rem; text-align:left;
}
.hero-sub-row .hero-sub{
  margin:0; max-width:none;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-sub-photo{
  display:block; width:100%; height:auto;
  border-radius:var(--radius-md); box-shadow:var(--shadow-md);
}
@media (max-width:760px){
  .hero-sub-row{grid-template-columns:1fr; text-align:center; gap:1.25rem; max-width:30rem;}
}
/* Mention conservée seule en haut de la page Formules, à la place du bouton
   « Me contacter » retiré le 21/08 : la page en comptait quatre, ce qui finit
   par paraître insistant sur un site qui parle de deuil. L'information, elle,
   méritait de rester tout en haut. */
.hero-offre{
  /* Badge plutôt que simple ligne : l'information méritait de tenir seule en
     haut de page après le retrait du bouton. Même langage que le badge
     « Diplômée clerc de notaire » de l'accueil. */
  display:inline-flex; align-items:center; gap:.625rem;
  background:var(--navy-badge); color:var(--cream);
  padding:.625rem 1.25rem; border-radius:var(--radius-pill);
  font-size:.9375rem; font-weight:600; margin-bottom:1.25rem;
}
.hero-offre .mot-fort{color:var(--gold);}
/* Silhouettes pleines et non en trait : à cette taille, deux personnages en
   contour se brouillent l'un dans l'autre. Une bulle de conversation avait été
   essayée puis écartée — elle évoque l'échange écrit, alors que ce qui est
   promis ici est un contact humain. */
.hero-offre-icone{display:inline-flex; flex:none; color:var(--gold);}
.hero-offre-icone svg{width:1.375rem; height:1.375rem;}
.hero-sub-lead{font-weight:600; color:var(--text);}
/* Deuxième ligne du chapeau en or, en écho à la 2e ligne du titre. --gold-deep
   ne se distinguait pas du texte à cette taille : or plus lumineux (3,49 sur
   crème), compensé par une taille et une graisse de « grand texte » (seuil 3,0). */
.hero-sub-accent{color:#A07A3A; font-size:1.1875rem; font-weight:700;}
/* Page Formules : la phrase « Je me déplace chez vous… » tient sur une seule
   ligne sur ordinateur (chapeau élargi), et revient à la ligne sur mobile. */
.hero-sub-large{max-width:46rem;}
@media (min-width:760px){.hero-sub-une-ligne{white-space:nowrap;}}

.hero-person-row{display:flex; align-items:center; justify-content:center; gap:1.375rem; margin-bottom:2rem;}
.hero-line{
  flex:1; max-width:7.5rem; height:2px; position:relative;
  background:linear-gradient(to right, transparent, var(--gold) 35%, var(--gold) 65%, transparent);
  opacity:.85;
}
.hero-line-dot{
  position:absolute; top:50%; left:50%; width:6px; height:6px; border-radius:50%;
  background:var(--gold); transform:translate(-50%,-50%) rotate(45deg);
}
.hero-person{display:inline-flex; align-items:center; gap:1.125rem; flex:none;}
.hero-person img{
  /* 128px affichés pour un fichier source de 480px : encore net sur les
     écrans à haute densité (256px nécessaires en 2x). */
  width:8rem; height:8rem; border-radius:50%; object-fit:cover;
  border:3px solid var(--gold); box-shadow:var(--shadow-sm); flex:none;
}
.hero-person-text{text-align:left;}
.hero-person-name{font-weight:700; font-size:1.0625rem; color:var(--navy); line-height:1.3;}
.hero-person-fondatrice{font-size:.9375rem; color:var(--text-soft); line-height:1.4; margin-top:1px;}
.hero-person-role{
  font-size:.75rem; color:var(--gold-deep); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; margin-top:2px;
}
/* Page Formules uniquement. Vient après le rôle en capitales, d'où la marge un
   peu plus large : sans elle, la phrase se collait sous l'interlettrage. */
.hero-person-expertise{
  font-size:.9375rem; color:var(--text-soft); line-height:1.4; margin-top:.375rem;
}
.badge-diplome{
  display:inline-flex; align-items:center; gap:.625rem;
  background:var(--navy-badge); color:var(--cream);
  padding:.625rem 1rem; border-radius:.625rem;
  font-size:.8125rem; font-weight:600; border:1px solid var(--gold);
  margin-top:.625rem; line-height:1.4; text-align:left;
}
.badge-diplome::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none;}

/* Les trois piliers, repris du PDF « les piliers flyer » : cartes marine,
   filet doré en haut, titre doré, sous-titre clair. */
.piliers{
  margin:2.5rem auto 0; max-width:64rem; list-style:none;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;
}
.pilier{
  background:var(--navy-light); border-top:5px solid var(--gold);
  border-radius:.5rem; padding:1.625rem 1.125rem;
  display:flex; flex-direction:column; justify-content:flex-start; gap:.5rem;
  text-align:center; box-shadow:var(--shadow-sm);
}
.pilier-titre{
  font-family:'Inter',system-ui,sans-serif; font-weight:700;
  /* --gold-on-light : sur --navy-light, --gold ne tient pas le seuil AA. */
  color:var(--gold-on-light); font-size:clamp(1.25rem,2.2vw,1.5rem); line-height:1.15;
}
.pilier-desc{color:var(--cream); font-size:.9375rem; line-height:1.45;}
/* Pilier crédit d'impôt : "de crédit d'impôt" reprend directement .pilier-titre
   (même taille, graisse et couleur qu'« Apaisement » ou « 20 ans »), sur sa
   propre ligne grâce à la colonne flex du .pilier — seul "sur la part réalisée
   à domicile" reste en .pilier-desc, en dessous. */
/* 4e pilier (crédit d'impôt, ajouté le 15/09/2026) : la grille passe par 2
   colonnes avant de s'empiler, pour ne jamais serrer 4 cartes sur un écran
   moyen. */
@media (max-width:860px){.piliers{grid-template-columns:repeat(2,1fr); max-width:34rem;}}
@media (max-width:640px){
  .piliers{grid-template-columns:1fr; max-width:22rem; gap:1rem;}
  .pilier{padding:1.25rem 1rem;}
}

@media (max-width:560px){
  .hero{padding:1.5rem 0 1.75rem;}
  .hero-person-row{flex-direction:column; gap:.875rem;}
  .hero-line{display:none;}
  .hero-person{flex-direction:column; text-align:center;}
  .hero-person-text{text-align:center;}
  .badge-diplome{text-align:center;}
  .decor-blob{display:none;}
}

/* ==========================================================================
   VIDÉOS
   ========================================================================== */
/* Vignettes rondes : ce ne sont plus des lecteurs, juste des déclencheurs. Un
   simple <img> (le cliché déjà extrait), pas de <video> tant que rien n'est
   cliqué. Le clic ouvre js/main.js → la fenêtre .video-modal, agrandie mais
   pas plein écran. Le titre reste sur l'image (voile dégradé pour rester
   lisible quel que soit le cliché dessous) : demande explicite, malgré
   l'espace restreint qu'impose un cercle. */
.videos{background:var(--cream); padding:var(--section-haut) 0 var(--section-bas); position:relative; overflow:hidden;}
/* Variante resserrée, sur une teinte plus soutenue : pensée pour un bandeau
   coincé entre le hero et la section suivante, qui doit se voir comme un
   passage à part plutôt que comme une section de plus. */
/* Remonté sur le hero (marge négative) plutôt que rétréci : le bandeau
   garde une taille correcte, seul l'espace au-dessus se resserre. */
.videos-compact{background:var(--cream-deep); margin-top:-1.5rem; padding:1.25rem 0 1.5rem;}
.videos-compact .section-head{margin-bottom:1rem;}
/* Intro de la section vidéos : une composition à deux cercles avait été
   essayée le 15/09/2026 (inspirée d'un visuel fourni par Aurélie) puis
   écartée le même jour — jugée redondante avec les vraies vignettes vidéo
   juste en dessous, et mal alignée avec leur rangée centrée. Un essai en
   remplacement complet du texte a été refait le 16/09/2026 avec un nouveau
   visuel, puis écarté à son tour le jour même : le texte reste l'intro,
   le visuel sert plutôt à remplacer le petit logo central (.videos-badge
   plus bas), à la place des vraies vidéos qu'il ne remplace pas. */
.videos-intro h2{
  max-width:46rem; margin-left:auto; margin-right:auto;
  font-size:clamp(1.125rem,2vw,1.375rem);
}
@media (min-width:1100px){
  .videos-intro h2{white-space:nowrap; max-width:none; font-size:1.25rem;}
}
.videos-intro-accent{color:var(--gold-deep);}
.videos-grid{display:flex; justify-content:center; align-items:center; gap:1.5rem; flex-wrap:wrap;}

/* Vignettes agrandies sur Guide pratique (4 vidéos) — l'accueil (2 vidéos,
   avec logo central) garde sa taille d'origine. */
.videos-compact .video-trigger{width:10rem;}
.videos-compact .videos-diviseur{height:10rem;}
@media (max-width:480px){
  .videos-compact .video-trigger{width:7.5rem;}
  .videos-compact .videos-diviseur{height:7.5rem;}
}

/* Diamètre agrandi le 16/09/2026 (8rem → 10rem), demandé par Aurélie —
   .videos-diviseur juste plus bas est calé sur la même hauteur, à garder
   synchronisé si la taille rechange. */
.video-trigger{
  position:relative; width:10rem; aspect-ratio:1/1; flex:none;
  border-radius:50%; border:3px solid var(--gold); overflow:hidden;
  background:var(--navy); box-shadow:var(--shadow-md); cursor:pointer; padding:0;
  transition:transform .2s ease, box-shadow .2s ease;
}
.video-trigger:hover,
.video-trigger:focus-visible{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.video-trigger img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
/* Voile réduit au strict minimum : seuls les ~25% du bas du cercle
   s'assombrissent (pour porter le titre), le reste de l'image — visage,
   couleurs — reste parfaitement net, sans le voile marine qui donnait un
   rendu grisâtre sur toute la vignette. */
.video-trigger-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:1; height:42%;
  display:flex; align-items:center; justify-content:center;
  padding:0 1.5rem;
  background:linear-gradient(to top, rgba(27,43,60,.92) 0%, rgba(27,43,60,.55) 55%, rgba(27,43,60,0) 100%);
}
/* Bouton de lecture centré sur l'image nette, indépendant du voile du bas. */
/* Anneau qui respire autour du bouton, en boucle : c'est le mouvement qui
   attire l'œil vers « il faut cliquer ici », sans bouger l'icône elle-même
   (rien qui gêne la lecture du triangle). Basé sur box-shadow, donc aucun
   élément supplémentaire dans le HTML. Neutralisé pour qui a demandé moins
   de mouvement (règle prefers-reduced-motion en fin de fichier). */
@keyframes video-play-pulse{
  0%{box-shadow:0 3px 10px rgba(0,0,0,.4), 0 0 0 0 rgba(193,152,86,.65);}
  70%{box-shadow:0 3px 10px rgba(0,0,0,.4), 0 0 0 .875rem rgba(193,152,86,0);}
  100%{box-shadow:0 3px 10px rgba(0,0,0,.4), 0 0 0 0 rgba(193,152,86,0);}
}
.video-play-icon{
  position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); z-index:1;
  display:flex; align-items:center; justify-content:center; flex:none;
  width:2.125rem; height:2.125rem; border-radius:50%;
  background:var(--gold); color:var(--navy);
  animation:video-play-pulse 2.2s ease-out infinite;
  transition:background .2s ease, transform .2s ease;
}
.video-trigger:hover .video-play-icon,
.video-trigger:focus-visible .video-play-icon{background:#fff; transform:translate(-50%,-50%) scale(1.08); animation-play-state:paused;}
.video-play-icon svg{width:.9375rem; height:.9375rem; fill:currentColor; margin-left:2px;}
/* Titre « en surbrillance » : pastille dorée pleine, posée sur la bande
   sombre réduite du bas — le contraste doré-sur-navy est net, sans plus
   dépendre du cliché en dessous puisque le voile ne couvre plus toute
   l'image. « Présentation d'APAISIA » ne tient pas sur une ligne dans le
   cercle et passe sur deux lignes : sans width:fit-content, un inline-block
   qui doit couper son texte s'étire à toute la largeur disponible du
   conteneur flex au lieu de se limiter à la ligne la plus longue — la
   pastille paraissait alors bien plus large que le texte qu'elle porte
   (signalé le 16/09/2026). Le cercle se rétrécit vite près du bord : même
   ligne la plus longue mesurée, la pastille sur 2 lignes descend assez bas
   dans le cercle pour que ses coins touchent encore le cadre rond — police
   réduite (.625rem au lieu de .6875rem) et marge horizontale de l'overlay
   agrandie pour garder les coins nettement à l'intérieur. « Mon histoire »,
   qui tient sur une ligne, n'est pas concerné. */
.video-trigger-titre{
  display:inline-block; width:fit-content; max-width:100%;
  font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:.625rem;
  line-height:1.25; color:var(--navy); background:var(--gold);
  padding:.1875rem .5rem; border-radius:1rem;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}

/* Fin filet doré séparant chaque vignette du badge central. */
.videos-diviseur{width:1px; height:10rem; background:var(--gold); opacity:.55; flex:none; align-self:center;}

/* Badge central entre les deux vidéos : remplace l'ancien petit logo rond
   (4rem) le 16/09/2026, par un visuel fourni par Aurélie qui reprend le
   message « Deux courtes vidéos... » — voir le commentaire au-dessus de
   .videos-intro h2. Taille proche de .video-trigger (8rem) pour rester
   équilibré dans la rangée ; le cercle est déjà dessiné dans l'image, pas
   besoin de bordure ni de fond en plus. */
.videos-badge{width:8rem; height:auto; flex:none; box-shadow:var(--shadow-sm);}

@media (max-width:480px){
  .videos-grid{gap:1rem;}
  .video-trigger{width:7.5rem;}
  .video-trigger-overlay{padding:0 .875rem;}
  .video-play-icon{width:1.875rem; height:1.875rem;}
  .video-trigger-titre{font-size:.6875rem;}
  .videos-diviseur{height:7.5rem;}
  .videos-badge{width:5.5rem;}
}

/* ── Fenêtre de lecture (modale) ──────────────────────────────────────────
   Ouverte au clic sur une vignette. Plus grande que la vignette, mais ne
   recouvre jamais tout l'écran (max-height 85vh, max-width 92vw) : on garde
   le contexte de la page visible autour, sur ordinateur comme sur téléphone. */
.video-modal{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:1.5rem;}
.video-modal[hidden]{display:none;}
.video-modal-backdrop{position:absolute; inset:0; background:rgba(20,28,38,.88);}
.video-modal-dialog{position:relative; z-index:1; line-height:0;}
.video-modal-player{
  display:block; width:auto; height:auto;
  max-width:92vw; max-height:85vh; aspect-ratio:9/16;
  border-radius:var(--radius-md); background:#000; box-shadow:var(--shadow-lg);
}
.video-modal-close{
  position:absolute; top:-1rem; right:-1rem; z-index:2;
  width:2.5rem; height:2.5rem; border-radius:50%; border:2px solid var(--navy);
  background:var(--gold); color:var(--navy);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.3);
}
.video-modal-close:hover{background:#fff;}
.video-modal-close svg{width:1.125rem; height:1.125rem; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round;}
@media (max-width:480px){
  .video-modal-close{top:-.75rem; right:0;}
}
/* Empêche la page de défiler derrière la fenêtre de lecture ouverte. */
body.video-modal-open{overflow:hidden;}

/* ==========================================================================
   BANDEAU DE RÉASSURANCE
   ========================================================================== */
.trustbar{background:var(--cream-warm); padding:2rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.trustbar-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;}
.trust-item{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.625rem;}
.trust-item-icon{
  width:2.75rem; height:2.75rem; border-radius:.75rem;
  background:var(--navy-badge); color:var(--gold);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.trust-item-icon svg{width:1.375rem; height:1.375rem; stroke:currentColor; fill:none;}
.trust-item-label{font-size:.8125rem; font-weight:600; color:var(--navy); line-height:1.45;}
@media (max-width:760px){.trustbar-grid{grid-template-columns:1fr 1fr; gap:1.75rem 1rem;}}

/* ==========================================================================
   ÉTAPES
   ========================================================================== */
.steps{background:var(--cream-warm); padding:var(--section-haut) 0 var(--section-bas); position:relative; overflow:hidden;}
/* <ol> : les étapes sont numérotées et ordonnées. Le numéro visible est la
   pastille .step-num, donc on retire la puce native de la liste. */
.steps-row{display:grid; grid-template-columns:repeat(4,1fr); position:relative; z-index:1; list-style:none;}
.step{text-align:center; padding:0 1rem; position:relative;}
.step::before{
  content:""; position:absolute; top:1.4375rem; left:-50%; width:100%; height:1px;
  background:var(--gold); opacity:.5; z-index:0;
}
.step:first-child::before{display:none;}
.step-num{
  width:2.875rem; height:2.875rem; border-radius:50%;
  background:var(--navy); color:var(--gold);
  font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:1.125rem;
  display:flex; align-items:center; justify-content:center; margin:0 auto 1rem;
  position:relative; z-index:1; box-shadow:0 0 0 6px var(--cream-warm);
}
.step-title{font-size:1.0625rem; font-weight:700; color:var(--navy); margin-bottom:.375rem; line-height:1.35;}
.step-desc{font-size:.9375rem; color:var(--text-soft); line-height:1.55;}
@media (max-width:760px){
  .steps-row{grid-template-columns:1fr 1fr; row-gap:2.25rem;}
  .step::before{display:none;}
}

/* ==========================================================================
   CARTES « CE QUE JE PRENDS EN CHARGE »
   ========================================================================== */
.services{background:var(--cream); padding:var(--section-haut) 0 var(--section-bas); position:relative; overflow:hidden;}
/* Espace resserré entre l'accroche « Résiliations, transferts… » et le premier
   point de la liste : le retrait global de .section-head (2,5 rem) s'ajoutait au
   padding haut du premier .svc-item (1,25 rem), soit 60 px. Réglage local — la
   classe .services n'existe que sur l'accueil, les autres sections gardent le
   rythme commun. */
.services .section-head{margin-bottom:1rem;}
/* Liste sur deux colonnes plutôt que six cartes blanches : ni fond, ni ombre,
   ni bordure, juste un filet de séparation. Remplissage en colonnes
   (grid-auto-flow) pour que l'ordre du HTML corresponde à la lecture
   colonne par colonne. */
.svc-list{
  list-style:none; max-width:56rem; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,auto);
  grid-auto-flow:column; column-gap:3rem;
}
.svc-item{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.25rem 0; border-bottom:1px solid var(--line);
}
.svc-item:nth-child(3n){border-bottom:0;}   /* dernier de chaque colonne */
.svc-item-icon{flex:none; width:1.75rem; height:1.75rem; color:var(--gold-deep); margin-top:.125rem;}
.svc-item-icon svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.5;}
.svc-item h3{font-size:1.0625rem; font-weight:700; color:var(--navy); margin-bottom:.25rem; line-height:1.4;}
.svc-item p{font-size:.9375rem; color:var(--text-soft); line-height:1.6;}
/* Renvoi vers la page Formules, présenté en encart (choix du 21/08). Le filet
   de séparation a disparu : le panneau se détache déjà de lui-même. Il garde la
   largeur de la liste juste au-dessus, pour rester dans le même alignement.
   Le bouton est en contour plutôt qu'en aplat : c'est une action tertiaire,
   elle ne doit pas concurrencer « Me contacter » en haut de page. */
/* Renvoi vers la page Formules. Le cadre a ete abandonne le 21/08 : une boite
   encadree avec du texte centre se lit comme un encadre de manuel scolaire, et
   la phrase decrivait l'offre au lieu de donner une raison d'aller voir.
   L'accroche promet desormais un benefice, et le bouton passe en aplat dore —
   il devient une vraie invitation, plus une note de bas de section. */
/* Le bloc se noyait dans la liste : meme couleur, meme graisse, taille a peine
   superieure. Trois choses l'en detachent maintenant, sans le remettre dans un
   cadre — beaucoup d'air au-dessus, un titre a la taille des titres de section,
   et un court trait dore qui annonce un changement de registre. */
.svc-plus{max-width:46rem; margin:2.5rem auto 0; text-align:center;}
/* Bandeau fourni par Aurélie le 15/09/2026, en remplacement du titre et du
   texte : formulation « 50 % sur mes prestations » plus large que sur
   services.html (où seule la part réalisée à domicile est présentée comme
   éligible) — décision assumée d'Aurélie après signalement. Image remplacée
   le 16/09/2026 puis le 06/10/2026 (bandeau horizontal, d'où la pleine
   largeur : à 32rem le texte devenait trop petit). */
.svc-plus-bandeau{
  display:block; width:100%; height:auto; margin:0 auto 1.5rem;
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  border:2px solid var(--gold);
}
.svc-plus-image{margin-top:1.25rem;}
/* Bandeau crédit d'impôt déplacé le 06/10/2026 sous la frise des 4 étapes. */
.steps-bandeau{max-width:46rem; margin:2.5rem auto 0; position:relative; z-index:1;}
.steps-bandeau .svc-plus-bandeau{margin:0;}
.svc-plus::before{
  content:""; display:block; width:3rem; height:3px;
  background:var(--gold); border-radius:2px; margin:0 auto 1.5rem;
}
.svc-plus-titre{
  font-family:'Inter',system-ui,sans-serif; font-weight:700; color:var(--navy);
  font-size:clamp(1.5rem,3vw,2rem); line-height:1.3;
  letter-spacing:-.015em; margin:0 auto .625rem; max-width:32rem;
}
/* Or foncé plutôt que le gris des paragraphes de la liste, dont cette ligne
   était indiscernable. Il relie aussi les trois éléments dorés du bloc : le
   trait au-dessus, cette ligne, le bouton en dessous. C'est --gold-deep et non
   --gold : sur ce fond crème, l'or clair tombe à 2,36 de contraste. */
.svc-plus-texte{
  font-size:1.0625rem; color:var(--gold-deep); font-weight:700; line-height:1.6;
  margin:0 auto 1.5rem;
}
@media (min-width:560px){.svc-plus-texte{white-space:nowrap;}}
.svc-plus-lien{
  display:inline-flex; align-items:center; gap:.625rem;
  padding:.875rem 2rem; border-radius:var(--radius-pill);
  background:var(--gold); border:1.5px solid var(--gold); color:var(--navy);
  font-size:.8125rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; box-shadow:var(--shadow-md);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.svc-plus-lien:hover{background:var(--navy); border-color:var(--navy); color:var(--cream); transform:translateY(-2px);}
.svc-plus-lien svg{width:1rem; height:1rem; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* La promesse — le contrepoint au « dix » martelé juste au-dessus. Composée
   comme un visuel de pub (un chiffre choc, centré, puis une accroche courte
   en dessous) plutôt que casée à côté d'un paragraphe : c'est ce qui lui
   donne du poids. Pas de fond plat, pas de cadre, pas de quatrième couleur
   (le rouge « annulé » aurait été le réflexe facile — le marine fait le
   même travail sans sortir de la palette à trois couleurs du site). */
/* Le titre et le « 10 → 1 » réunis dans une carte marine — comme les autres
   moments forts du site (.quote-band, .final-cta), pas comme une carte de
   contenu ordinaire. Sur fond clair, le doré et le crème restent discrets ;
   sur marine, c'est leur terrain : c'est là qu'ils sont censés claquer. */
.svc-plus-card{
  position:relative; overflow:hidden;
  background:var(--navy); border-radius:var(--radius-md);
  padding:2.5rem 1.75rem 2.25rem;
  max-width:32rem; margin:0 auto 1.75rem;
  box-shadow:var(--shadow-lg);
}
.svc-plus-card > *{position:relative; z-index:1;}
.svc-plus-card .svc-plus-titre{color:var(--cream);}
.svc-plus-promesse{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  max-width:24rem; margin:1.5rem auto 0; gap:.375rem;
}
.svc-plus-chiffres{
  display:inline-flex; align-items:baseline; gap:1.125rem; margin-bottom:.625rem;
}
/* Le « 10 », barré d'un trait doré épais et légèrement penché — un tampon
   « annulé », pas un simple text-decoration. Le trait se dessine de gauche à
   droite une fois le bloc apparu ; visible d'emblée si JavaScript est absent. */
.svc-plus-dix-barre{
  position:relative; font-family:'Inter',system-ui,sans-serif; font-weight:700;
  font-size:2.25rem; line-height:1; color:rgba(247,241,228,.55);
}
.svc-plus-dix-barre::after{
  content:''; position:absolute; left:-6px; right:-6px; top:52%; height:3px;
  background:var(--gold); transform:translateY(-50%) rotate(-9deg);
}
.js-anim .svc-plus-dix-barre::after{
  transform:translateY(-50%) rotate(-9deg) scaleX(0); transform-origin:left;
  transition:transform .45s ease .5s;
}
.js-anim .reveal.in .svc-plus-dix-barre::after{transform:translateY(-50%) rotate(-9deg) scaleX(1);}
.svc-plus-un{
  font-family:'Inter',system-ui,sans-serif; font-weight:700;
  font-size:5.5rem; line-height:1; color:var(--gold);
  text-shadow:0 2px 24px rgba(193,152,86,.35);
}
.svc-plus-promesse-titre{margin:0; font-size:1.5rem; font-weight:700; color:var(--cream); line-height:1.3;}
.svc-plus-promesse-sous{margin:0; font-size:.9375rem; font-weight:600; color:rgba(247,241,228,.75);}
@media (max-width:480px){
  .svc-plus-card{padding:2rem 1.25rem 1.75rem;}
  .svc-plus-un{font-size:4rem;}
  .svc-plus-dix-barre{font-size:1.75rem;}
  .svc-plus-promesse-titre{font-size:1.25rem;}
}
.svc-plus-action{display:inline-flex; align-items:center; gap:1rem; justify-content:center; flex-wrap:wrap;}
.svc-plus-photo{
  width:3.5rem; height:3.5rem; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid var(--gold); box-shadow:var(--shadow-sm);
}
@media (max-width:760px){
  .svc-list{grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row;}
  .svc-item:nth-child(3n){border-bottom:1px solid var(--line);}
  .svc-item:last-child{border-bottom:0;}
}

/* ==========================================================================
   FORMULES
   ========================================================================== */
.formules{background:var(--cream); padding:var(--section-haut) 0 var(--section-bas); position:relative; overflow:hidden;}
.formules-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start;}
.formule-card{
  /* Fond crème chaud plutôt que blanc (choix du 20/08) : même teinte que le
     bandeau beige et que les cartes de prestations complémentaires, donc
     aucune couleur nouvelle dans la palette. */
  background:var(--cream-warm); border:2px solid var(--gold); border-radius:var(--radius-md);
  /* Arête haute en relief : le bord doré y est plus large, un liseré clair
     court juste en dessous, et une ombre interne courte tombe sous la bande.
     Ces trois éléments ensemble donnent l'impression que le haut du cadre est
     posé au-dessus de la carte, et non peint dessus. */
  border-top-width:6px;
  padding:1.5rem 1.125rem 1.5rem;
  /* Relief : trois ombres superposées plutôt qu'une seule — une ombre de
     contact serrée au ras du cadre, une diffusion moyenne, une large et très
     douce. C'est ce cumul qui donne l'épaisseur ; une ombre unique paraît
     toujours plate ou sale. Le liseré blanc intérieur en haut simule la
     lumière qui accroche l'arête supérieure. */
  box-shadow:
    0 1px 2px rgba(27,43,60,.05),
    0 12px 24px rgba(27,43,60,.14),
    0 24px 46px rgba(27,43,60,.09),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 10px 10px -9px rgba(27,43,60,.38);
  display:flex; flex-direction:column; height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.formule-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 2px 4px rgba(27,43,60,.06),
    0 18px 32px rgba(27,43,60,.17),
    0 34px 62px rgba(27,43,60,.12),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 10px 10px -9px rgba(27,43,60,.38);
}
/* Plus aucune règle pour .formule-card.featured : les trois panneaux sont
   volontairement identiques depuis le 20/08 (cadre doré 2 px et ombre
   renforcée pour tous). La classe .featured reste dans le HTML de la formule
   Complète comme point d'accroche, si on veut un jour remettre en avant la
   formule recommandée. */
/* Badge, étoiles, nom et tarif tiennent sur une seule ligne. Dans une carte
   de 3 colonnes il reste ~317 px : tailles resserrées en conséquence, et le
   badge de la formule recommandée dit « Recommandée » et non « Formule
   recommandée », qui ne rentrait pas. flex-wrap sert de filet de sécurité :
   si une police plus large déborde, c'est le tarif qui passe dessous plutôt
   que de sortir de la carte. */
.formule-badge{
  display:inline-block; flex:none; background:var(--navy-badge); color:var(--gold);
  font-size:.6875rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:.25rem .5rem; border-radius:var(--radius-pill); white-space:nowrap;
}
.formule-top{display:flex; align-items:center; gap:.3125rem; flex-wrap:wrap; margin-bottom:.25rem;}
.formule-stars{color:var(--gold); font-size:.75rem; letter-spacing:0; flex:none; white-space:nowrap;}
.formule-nom{font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:1.1875rem; color:var(--navy); line-height:1.2; white-space:nowrap;}
.formule-prix{font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:1.3125rem; color:var(--gold-deep); white-space:nowrap; margin-left:auto;
  /* Souligne dore, decale sous la ligne de base et epaissi : sans ces deux
     reglages, un souligne par defaut colle aux jambages et fait « lien
     cliquable ». */
  text-decoration:underline; text-decoration-color:var(--gold);
  text-decoration-thickness:2px; text-underline-offset:4px;
}
/* Neuf caracteres pour « Sur devis » contre cinq pour « 350 € » : sans cette
   reduction, la ligne de titre de la formule Premium deborde et le tarif
   bascule sous le nom. */
.formule-prix.sur-devis{font-size:1.1875rem; font-weight:600;}   /* italique retiré : Inter italique n'est pas chargé */
/* flex:1 repris de .formule-liste (supprimée) : c'est lui qui pousse le
   bouton en bas de la carte. */
.formule-desc{font-size:1.0625rem; color:var(--text-soft); margin:.75rem 0 1rem; line-height:1.6; flex:1;}
/* Un seul bouton sous les trois panneaux plutot qu'un par panneau : les trois
   menaient au meme endroit et repetaient la meme mention, pour des panneaux
   devenus tres courts. Il est plus grand que les boutons ordinaires du site
   (16 px au lieu de 13) parce qu'il porte seul l'action de toute la section. */
/* Ce qui est commun aux trois formules, placé entre les panneaux et le bouton :
   le lecteur vient de les comparer, il apprend ce qu'elles partagent, puis il
   agit. Le déplacement à domicile n'était écrit nulle part. */
.formules-domicile{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:2rem; text-align:center;
  font-size:1.0625rem; font-weight:600; color:var(--navy); line-height:1.45;
}
.formules-domicile-icone{display:inline-flex; flex:none; color:var(--gold-deep);}
.formules-domicile-icone svg{
  /* Aplat et non contour : en trait la maison passait inaperçue à côté du
     texte. La porte est découpée en evenodd, donc c'est un vrai trou — elle
     reste juste quel que soit le fond. */
  width:1.125rem; height:1.125rem;
}
@media (max-width:480px){.formules-domicile{align-items:flex-start; text-align:left;}}
.formules-action{text-align:center; margin-top:2.5rem;}
.formules-cta{
  display:inline-flex; flex-direction:column; align-items:center; gap:.4375rem;
  text-decoration:none; background:var(--gold); color:var(--navy);
  border:1.5px solid var(--gold); border-radius:var(--radius-pill);
  padding:.9375rem 3rem 1rem; box-shadow:var(--shadow-md);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.formules-cta:hover{
  background:var(--navy); border-color:var(--navy); color:var(--cream);
  transform:translateY(-3px); box-shadow:var(--shadow-lg);
}
.formules-cta-main{
  display:flex; align-items:center; gap:.625rem;
  font-family:'Inter',system-ui,sans-serif; font-weight:700;
  font-size:1rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.3;
}
/* Combine et camera : les deux memes icones que l'en-tete et que « Rendez-vous
   en visio ». Elles heritent de la couleur du bouton, donc elles passent au
   creme au survol comme le texte. */
.formules-cta-moyens{display:inline-flex; align-items:center; gap:.375rem;}
.formules-cta-moyens svg{
  width:1.125rem; height:1.125rem; flex:none;
  stroke:currentColor; fill:none; stroke-width:1.7; stroke-linejoin:round;
}
/* La mention passe en pastille marine a texte dore : sur un bouton dore, du
   texte marine simple se noyait. Le blanc etait exclu — il ne donne que 2,66
   de contraste sur cet or, donc illisible. Au survol le bouton devient marine,
   la pastille s'inverse en creme pour rester detachee. */
.formules-cta-note{
  font-size:.8125rem; font-weight:600; line-height:1.4;
  background:var(--navy); color:var(--gold);
  padding:.25rem .875rem; border-radius:var(--radius-pill);
  transition:background .2s ease, color .2s ease;
}
.formules-cta:hover .formules-cta-note{background:var(--cream); color:var(--navy-badge);}

/* Variante du haut de page uniquement (accueil et Formules). Le hero est sur le
   fond crème de la page, pas sur un bandeau de couleur : la pastille marine y
   était l'élément le plus sombre de tout l'écran et creusait un trou au milieu
   du bouton doré. L'or foncé reste dans le ton du bouton tout en s'en détachant.
   Un terracotta avait été essayé le 21/08 : trop criant, et il aurait ajouté
   une quatrième couleur à une palette qui n'en compte que trois. Réglé par le
   contexte .hero, sans classe supplémentaire : les deux autres boutons du site
   gardent la pastille marine. */
.hero .formules-cta-note{background:var(--gold-deep); color:var(--cream);}
/* Au survol le bouton devient marine, sur lequel l'or foncé ne se détache plus
   (2,5 de contraste) : la pastille passe alors au crème. */
.hero .formules-cta:hover .formules-cta-note{background:var(--cream); color:var(--navy-badge);}
@media (max-width:480px){
  .formules-cta{padding:.875rem 1.25rem 1rem; width:100%;}
  .formules-cta-note{font-size:.8125rem;}
}
/* Mot mis en valeur en capitales — boutons des formules et bandeau beige.
   Les majuscules viennent du CSS, pas du texte : le mot reste ecrit « offert »
   dans le code, ce qu'un lecteur d'ecran prononce normalement, alors qu'un
   « OFFERT » en dur peut etre epele lettre par lettre. */
.mot-fort{font-weight:700; text-transform:uppercase; letter-spacing:.03em;}
.formules-note{
  text-align:center; margin-top:2rem;
  font-family:'Inter',system-ui,sans-serif; font-weight:500; color:var(--text-soft); font-size:1rem;
}
@media (max-width:860px){.formules-grid{grid-template-columns:1fr; max-width:32rem; margin:0 auto;}}


/* ==========================================================================
   SERVICES À LA CARTE
   ========================================================================== */
.carte{background:var(--cream-warm); padding:var(--section-haut) 0 var(--section-bas); position:relative; overflow:hidden;}
/* Les dix services étaient une liste de dix lignes d'égale importance, dans un
   ordre arbitraire, enfermées dans un cadre. L'œil n'avait aucune prise. Ils
   sont désormais réunis en trois familles : l'argent, les biens, la présence
   humaine — ce qui montre au passage l'étendue du métier. Le cadre a disparu :
   trois colonnes se lisent d'elles-mêmes. */
.carte-groupes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem 2rem;
  max-width:60rem; margin:0 auto;
}
.carte-groupe-titre{
  font-family:'Inter',system-ui,sans-serif; font-weight:700;
  font-size:.9375rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-deep); padding-top:.875rem; margin-bottom:1rem;
  border-top:3px solid var(--gold);
}
/* Or foncé : 4,62 de contraste sur le crème chaud de cette section. */
/* Pas de white-space:nowrap ici : c'est une phrase, pas un montant. Empêchée
   de se couper, elle débordait de l'écran sur téléphone et faisait défiler
   toute la page horizontalement. */
.carte-devis{color:var(--gold-deep); font-weight:700;}
.carte-list{display:flex; flex-direction:column; gap:.75rem; list-style:none;}
/* Petites cartes plutôt que des lignes de liste : ça invite au survol, et
   l'apparition en cascade (une par une, pas toutes d'un coup) évite l'effet
   « mur de texte » d'une énumération de onze services. */
.carte-item{
  display:flex; align-items:flex-start; gap:.875rem;
  background:var(--cream); border-radius:.75rem; padding:.75rem .875rem;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.carte-item:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.carte-texte{display:flex; flex-direction:column; gap:.125rem; min-width:0;}
.carte-icon{
  width:2.25rem; height:2.25rem; border-radius:.625rem; flex:none;
  background:var(--cream-warm); color:var(--gold-deep);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.carte-item:hover .carte-icon{background:var(--gold-deep); color:#fff; transform:scale(1.08) rotate(-4deg);}
.carte-icon svg{width:1.125rem; height:1.125rem; stroke:currentColor; fill:none; stroke-width:1.5;}
.carte-label{font-size:.9375rem; font-weight:600; color:var(--navy); line-height:1.35;}
/* L'explication doit rester nettement secondaire : c'est le nom du service que
   l'on parcourt, la phrase ne se lit que si l'on s'arrête dessus. */
.carte-desc{font-size:.8125rem; font-weight:400; color:var(--text-soft); line-height:1.45;}

/* Apparition en cascade, groupe par groupe : chaque service se pose l'un
   après l'autre plutôt que tous en même temps, comme si on les cochait un
   par un. Rejoué à chaque passage dans le champ de vision. */
@keyframes carte-apparition{
  0%{opacity:0; transform:translateY(14px) scale(.96);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
.js-anim .carte-item{opacity:0;}
.js-anim .reveal.in .carte-item{animation:carte-apparition .5s cubic-bezier(.22,.8,.32,1) both;}
.carte-list li:nth-child(1){animation-delay:.05s !important;}
.carte-list li:nth-child(2){animation-delay:.16s !important;}
.carte-list li:nth-child(3){animation-delay:.27s !important;}
.carte-list li:nth-child(4){animation-delay:.38s !important;}
@media (max-width:860px){
  .carte-groupes{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .carte-groupes{grid-template-columns:1fr; gap:2rem;}
}
.carte-note{
  text-align:center; margin-top:1.75rem;
  font-family:'Inter',system-ui,sans-serif; font-weight:500; color:var(--text-soft); font-size:1rem;
}

/* ==========================================================================
   CRÉDIT D'IMPÔT SERVICES À LA PERSONNE (page Formules)
   ========================================================================== */
/* Réintroduit le 15/09/2026 — supprimé le 21/08/2026 quand la déclaration SAP
   avait été abandonnée (condition d'activité exclusive jugée incompatible à
   l'époque). Voir SUIVI-PROJET.md, "Session du 15/09/2026", pour le contexte
   complet. Seule la part du travail réalisée physiquement au domicile du
   client ouvre droit au crédit d'impôt : systématique pour le déplacement
   d'ouverture de dossier, variable pour le reste selon que le remplissage des
   formulaires (assurance vie, immobilier, véhicule, CESU, abonnements...) a
   lieu chez le client ou non. Les visios et les rendez-vous chez un tiers
   (notaire, banque) n'y ouvrent jamais droit. */
.credit-impot{background:var(--cream); padding:var(--section-haut) 0 var(--section-bas);}
.credit-carte{
  max-width:52rem; margin:0 auto; display:flex; gap:1.5rem;
  background:var(--cream-warm); border-radius:var(--radius-md);
  border-left:4px solid var(--gold); box-shadow:var(--shadow-sm);
  padding:1.75rem 2rem;
}
.credit-carte-icone{
  flex:none; width:2.75rem; height:2.75rem; border-radius:50%;
  background:var(--navy-badge); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.credit-carte-icone svg{width:1.375rem; height:1.375rem;}
.credit-carte-corps{flex:1; min-width:0; font-size:.9375rem; line-height:1.65; color:var(--text-soft);}
/* .en-cours (définie plus haut, page Mentions légales) réutilisée telle
   quelle pour le numéro SAP tant qu'il n'est pas obtenu : même ton neutre,
   même code couleur pour tout ce qui est "en attente" sur le site. */
.credit-sap{margin-top:.75rem; font-size:.8125rem; color:var(--text-soft);}
@media (max-width:700px){.credit-carte{flex-direction:column; padding:1.5rem;}}

/* ==========================================================================
   POURQUOI ME CONFIER VOS DÉMARCHES
   ========================================================================== */
.why{background:var(--cream); padding:var(--section-haut) 0 var(--section-bas);}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;}
.why-item{
  display:flex; align-items:center; gap:1rem;
  background:var(--cream-warm); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:1.125rem 1.25rem; box-shadow:var(--shadow-sm);
}
.why-icon{
  width:2.5rem; height:2.5rem; border-radius:.625rem; flex:none;
  background:var(--navy-badge); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.why-icon svg{width:1.25rem; height:1.25rem; stroke:currentColor; fill:none; stroke-width:1.6;}
.why-label{font-size:.9375rem; font-weight:600; color:var(--navy); line-height:1.4;}
@media (max-width:860px){.why-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   GUIDE PRATIQUE
   ========================================================================== */
/* Deux fonds qui alternent pour séparer les trois parties de la page ; le hero
   étant sur le crème du corps, la première section prend le crème chaud. */
.guide{background:var(--cream-warm); padding:var(--section-haut) 0 var(--section-bas); position:relative; overflow:hidden;}
.guide-alt{background:var(--cream); padding:var(--section-haut) 0 var(--section-bas); position:relative; overflow:hidden;}

/* Volontairement un seul bloc de texte dense, sans colonnes ni puces : une
   liste organisée en catégories claires se lit comme « c'est balisé, donc
   gérable ». L'énumération continue, elle, ne donne aucune prise — jusqu'à
   « et bien d'autres », qui n'annonce même pas de fin. */
/* Badge plutôt qu'un simple paragraphe : la phrase qui doit peser le plus
   (la charge, l'interlocuteur qui change à chaque fois) sort du flux de
   texte gris pour devenir un bloc qu'on ne peut pas survoler du regard. */
/* Le mot répété trois fois pulse en cascade (délais/documents/interlocuteur),
   comme un martèlement plutôt qu'un simple texte statique. Neutralisé par la
   règle prefers-reduced-motion globale en fin de fichier. */
@keyframes mot-marque-pulse{
  0%, 60%, 100%{transform:scale(1); color:var(--gold);}
  20%{transform:scale(1.18); color:#fff;}
}
.mot-marque{
  display:inline-block; margin:0 .25rem;
  animation:mot-marque-pulse 1.8s ease-in-out infinite;
}

/* Même martèlement, adapté à un fond clair : --gold y tombe à 2,36 de
   contraste (illisible), --gold-deep tient la route. Le pic passe au marine
   plutôt qu'au blanc, pour la même raison. */
@keyframes mot-marque-pulse-clair{
  0%, 60%, 100%{transform:scale(1); color:var(--gold-deep);}
  20%{transform:scale(1.18); color:var(--navy);}
}
.mot-marque-clair{
  display:inline-block; margin:0 .2rem;
  animation:mot-marque-pulse-clair 1.8s ease-in-out infinite;
}

.section-head .guide-badge-accroche{
  display:inline-block; text-align:left;
  max-width:32rem; margin:0 auto 1rem;
  background:var(--navy-badge); color:var(--gold);
  border:1px solid var(--gold); border-radius:.75rem;
  padding:.875rem 1.5rem; font-weight:700; font-size:.9375rem; line-height:1.55;
}
/* Second temps de la phrase, inversé — fond doré, texte marine — pour qu'il
   se détache du reste du badge au lieu de se fondre dans le même doré. */
.guide-badge-fort{
  display:inline-block; margin-top:.375rem;
  background:var(--gold); color:var(--navy);
  padding:.1875rem .625rem; border-radius:.5rem;
}

/* Photo entre les deux badges : piles de dossiers papier, pour incarner la
   charge plutôt que la dire — remplace le visage dessiné, jugé raté. */
/* Photo et badge côte à côte plutôt qu'empilés : deux blocs qui se
   partagent une même ligne de hauteur au lieu de s'additionner. */
.guide-badge-row{
  display:flex; align-items:center; gap:1.25rem; justify-content:center;
  max-width:36rem; margin:0 auto 1rem;
}
/* Une pile de feuilles illustrée plutôt qu'une photo : trois photos
   essayées, aucune ne collait à l'identité du site (crème/marine/doré,
   jamais de photographie réaliste hors le portrait). Chaque feuille est une
   carte comme les autres cartes du site — juste plus petite, tournée, et
   empilée — avec des filets qui suggèrent du texte, sans en écrire. */
.guide-pile{
  position:relative; flex:none; width:11rem; height:10.5rem; margin:0 .75rem;
}
.guide-pile-feuille{
  position:absolute; width:6.5rem; height:8.25rem;
  background-color:var(--cream);
  background-image:repeating-linear-gradient(
    to bottom, var(--line) 0, var(--line) 3px, transparent 3px, transparent 14px
  );
  background-position:1rem 1.25rem; background-repeat:no-repeat;
  background-size:calc(100% - 2rem) calc(100% - 2.25rem);
  border:2px solid var(--gold); border-radius:.625rem;
  box-shadow:var(--shadow-md);
}
@media (max-width:560px){
  .guide-pile{width:9.5rem; height:9rem;}
  .guide-pile-feuille{width:5.5rem; height:7rem;}
}
.guide-badge-row .guide-badge-accroche{margin:0; max-width:26rem;}
@media (max-width:560px){
  .guide-badge-row{flex-direction:column; gap:.875rem;}
}

/* Questions qui s'enchaînent sans réponse. En flux plutôt qu'empilées une
   par ligne : plusieurs tiennent sur une même ligne, ce qui divise la
   hauteur du bloc par trois environ tout en gardant tailles et angles
   différents pour chacune — l'effet « pensées qui se bousculent » sans
   le défilement à rallonge d'une colonne unique. */
/* Grille à 3 colonnes plutôt qu'un flux qui s'enchaîne : le flux laissait le
   navigateur décider où chaque ligne se coupe, et tout ce qui était petit
   finissait regroupé sur la dernière ligne, d'un seul côté. La grille impose
   une répartition égale ; l'alignement du texte (gauche/centre/droite)
   alterne case par case pour garder un peu de désordre sans jamais tout
   pousser vers un bord. */
.guide-questions{
  max-width:48rem; margin:0 auto; position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem 1.5rem;
  align-items:center;
}
.guide-question{margin:0; font-weight:700; line-height:1.35;}
.guide-question:nth-child(1){font-size:1.25rem; transform:rotate(-2.5deg); color:var(--navy); text-align:left;}
.guide-question:nth-child(2){font-size:1rem; transform:rotate(1.5deg); color:var(--gold-deep); font-weight:600; text-align:center;}
.guide-question:nth-child(3){font-size:1.4375rem; transform:rotate(-1deg); color:var(--text-soft); font-weight:600; text-align:right;}
.guide-question:nth-child(4){font-size:1.0625rem; transform:rotate(2deg); color:var(--navy); text-align:right;}
.guide-question:nth-child(5){font-size:1.1875rem; transform:rotate(-2.5deg); color:var(--gold-deep); text-align:center;}
.guide-question:nth-child(6){font-size:1.0625rem; transform:rotate(1deg); color:var(--text-soft); font-weight:600; text-align:left;}
.guide-question:nth-child(7){font-size:1.25rem; transform:rotate(-1.5deg); color:var(--navy); text-align:left;}
.guide-question:nth-child(8){font-size:1.0625rem; transform:rotate(2deg); color:var(--gold-deep); text-align:right;}
.guide-question:nth-child(9){font-size:1.125rem; transform:rotate(-1.5deg); color:var(--text-soft); font-weight:600; text-align:center;}
@media (max-width:700px){
  .guide-questions{grid-template-columns:1fr 1fr; gap:1rem;}
}
@media (max-width:560px){
  .guide-questions{grid-template-columns:1fr; gap:.75rem; text-align:center !important;}
  .guide-question{transform:none !important; text-align:center !important;}
}

/* <ol> : ces trois démarches sont ordonnées, chacune conditionne la suivante.
   Le numéro visible est la pastille, d'où le retrait de la puce native. */
.guide-etapes{
  max-width:50rem; margin:0 auto; list-style:none;
  display:flex; flex-direction:column; gap:1.75rem; position:relative; z-index:1;
}
.guide-etape{display:flex; align-items:flex-start; gap:1.25rem;}
.guide-num{
  width:2.5rem; height:2.5rem; border-radius:50%; flex:none;
  background:var(--navy-badge); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:1.0625rem;
}
.guide-etape h3{
  display:flex; align-items:center; flex-wrap:wrap; gap:.625rem;
  font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:1.125rem;
  color:var(--navy); line-height:1.35; margin-bottom:.375rem;
}
/* Le délai est l'information la plus utile de la page : il sort du titre sous
   forme d'étiquette pour être repérable en diagonale. */
.guide-delai{
  font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-deep); background:#fff; border:1px solid var(--line);
  padding:.1875rem .625rem; border-radius:var(--radius-pill); white-space:nowrap;
}
.guide-etape p{font-size:.9375rem; color:var(--text-soft); line-height:1.65;}

/* <dl> : c'est une liste de définitions, le balisage le dit. */
.lexique{
  max-width:58rem; margin:0 auto; position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:1.75rem 2.5rem;
}
.lexique-item{border-top:2px solid var(--gold); padding-top:.75rem;}
.lexique dt{
  font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:.9375rem;
  color:var(--navy); line-height:1.35; margin-bottom:.25rem;
}
.lexique dd{font-size:.875rem; color:var(--text-soft); line-height:1.6;}
.guide-avertissement{
  max-width:42rem; margin:2.75rem auto 0; text-align:center;
  font-size:.8125rem; color:var(--text-soft); line-height:1.6; position:relative; z-index:1;
}
@media (max-width:760px){
  .lexique{grid-template-columns:1fr; gap:1.5rem;}
}
@media (max-width:480px){
  .guide-etape{gap:.875rem;}
  .guide-num{width:2.125rem; height:2.125rem; font-size:.9375rem;}
}

/* ==========================================================================
   ZONE D'INTERVENTION (villes)
   ========================================================================== */
.zone{background:var(--cream-warm); padding:var(--section-haut) 0 var(--section-bas);}
/* Historique des versions écartées le 15/09/2026 (liste de pastilles trop
   encombrante ; tracé de département dessiné à la main jugé moche ; hexagone
   à rayons ; forme ovale codée en SVG, jugée "horrible" à son tour) — voir
   SUIVI-PROJET.md. Version retenue : une image fournie par Aurélie
   (illustration générée, dans le style d'une carte régionale), enregistrée
   dans images/carte-indre-et-loire.jpg (recadrée en JPEG 900×900 depuis
   l'original 1254×1254 fourni, pour le poids). Toujours en deux colonnes
   avec la liste « Mon secteur d'intervention » à droite, qui reste la
   source de référence pour les 9 villes en texte réel et accessible. */
.zone-layout{
  display:grid; grid-template-columns:1.15fr 1fr; gap:2.5rem;
  align-items:center; max-width:56rem; margin:0 auto;
}
.zone-carte img{
  display:block; width:100%; height:auto; border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
}
.zone-sidebar-titre{
  display:flex; align-items:center; gap:.5rem;
  font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.875rem;
}
.zone-sidebar-titre svg{
  width:1.125rem; height:1.125rem; flex:none; color:var(--gold-deep);
  stroke:currentColor; fill:none; stroke-width:1.6;
}
.zone-sidebar-list{
  list-style:none; display:grid; grid-template-columns:1fr 1fr;
  gap:.5rem 1rem; margin:0 0 1.25rem; padding:0;
}
.zone-sidebar-list li{
  font-size:.875rem; color:var(--text-soft); position:relative; padding-left:.875rem;
}
.zone-sidebar-list li::before{content:"•"; position:absolute; left:0; color:var(--gold-deep); font-weight:700;}
.zone-note{font-size:.875rem; color:var(--text-soft); margin:0;}
@media (max-width:760px){
  .zone-layout{grid-template-columns:1fr; gap:1.5rem; max-width:26rem;}
  .zone-carte{max-width:22rem; margin:0 auto;}
}
@media (max-width:480px){.zone-carte-point-label{font-size:.5625rem;}}

/* ==========================================================================
   BANDEAU CITATION
   ========================================================================== */
/* Même bleu que .final-cta juste en dessous (--navy-light, et non --navy) :
   demandé le 15/09/2026 pour que les deux bandeaux se lisent comme un seul
   bloc continu plutôt que deux blocs de bleus différents. */
.quote-band{background:var(--navy-light); color:var(--cream); padding:var(--bandeau-y) 0; text-align:center; position:relative; overflow:hidden;}
.quote-band .decor-blob{background:radial-gradient(circle, rgba(198,154,75,.16), transparent 70%);}
/* Photo et citation sur la même ligne : portrait à gauche, citation et
   signature à droite. Grille plutôt que flex, pour que la photo occupe les
   deux rangées sans avoir à ajouter un conteneur dans le HTML. */
.quote-band figure{
  display:grid; grid-template-columns:auto 1fr; column-gap:1.5rem; row-gap:.25rem;
  align-items:center; max-width:44rem; margin:0 auto; text-align:left;
}
.quote-photo{
  width:4.875rem; height:4.875rem; border-radius:50%; overflow:hidden;
  border:2.5px solid var(--gold); margin:0; position:relative; z-index:1;
  grid-row:1 / 3; align-self:center;
}
.quote-photo img{width:100%; height:100%; object-fit:cover;}
.quote-text{
  position:relative; z-index:1;
  font-family:'Inter',system-ui,sans-serif; font-weight:700;
  font-size:clamp(1.0625rem,2vw,1.25rem); margin:0; line-height:1.45;
  grid-column:2;
}
.quote-name{
  position:relative; z-index:1; color:var(--gold); grid-column:2;
  font-size:.8125rem; font-weight:600; letter-spacing:.04em;
}

/* ==========================================================================
   APPEL À L'ACTION FINAL
   ========================================================================== */
.final-cta{background:var(--navy-light); padding:var(--bandeau-y) 0; text-align:center; position:relative; overflow:hidden;}
.final-cta h2{
  font-family:'Inter',system-ui,sans-serif; font-weight:700;
  font-size:clamp(1.25rem,2.4vw,1.5rem); color:#fff; max-width:44rem; margin:0 auto .5rem; line-height:1.35;
}
.final-cta > .wrap > p{color:rgba(247,241,228,.88); max-width:34rem; margin:0 auto .875rem; font-size:.875rem; line-height:1.6;}
.final-cta .btn-cta-row{margin-bottom:.75rem;}
/* Boutons un cran moins hauts dans ce bandeau seulement : ailleurs sur le site
   ils gardent leur taille pleine. */
.final-cta .btn-primary,.final-cta .btn-secondary{padding:.8125rem 2rem;}
.final-contact-row{display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; margin-bottom:.875rem;}
.final-contact-row a{color:var(--gold-on-light); text-decoration:none; font-size:.9375rem; font-weight:600;}
.final-contact-row a:hover{color:var(--cream); text-decoration:underline;}
/* Quand la rangée de boutons termine le bandeau (accueil, depuis la
   suppression de la ligne « Devis gratuit · Sans engagement · Réponse sous
   24 h »), son retrait bas fausserait la symétrie du bandeau. */
.final-cta .btn-cta-row:last-child{margin-bottom:0;}
.final-tag{font-size:.8125rem; color:rgba(247,241,228,.8);}

.contact-badge{
  width:6.25rem; margin:0 auto 1.5rem; text-align:center; position:relative; z-index:1;
}
.contact-badge img{
  width:4.5rem; height:4.5rem; border-radius:50%; margin:0 auto .5rem;
  border:2px solid var(--gold); object-fit:cover;
}
.contact-badge-title{font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:1.25rem; color:var(--gold); line-height:1.1;}
.contact-badge-sub{font-size:.9375rem; letter-spacing:.02em; color:rgba(247,241,228,.9);}

/* ==========================================================================
   PAGE CONTACT
   ========================================================================== */
.page-head{padding:var(--section-haut) 0 2rem; text-align:center; position:relative; overflow:hidden;}
/* Page Contact : le portrait à gauche du titre, pour qu'on voie à qui l'on
   écrit avant de remplir un formulaire. L'ensemble reste centré dans la page,
   mais son contenu s'aligne à gauche — un titre centré à côté d'une photo
   donne un bloc bancal. Sur petit écran, la photo repasse au-dessus et tout
   redevient centré. */
.page-head-row{
  display:flex; align-items:center; justify-content:center; gap:1.5rem;
  max-width:44rem; margin:0 auto; text-align:left; position:relative; z-index:1;
}
.page-head-photo{
  width:7rem; height:7rem; border-radius:50%; object-fit:cover; flex:none;
  border:3px solid var(--gold); box-shadow:var(--shadow-sm);
}
.page-head-row .eyebrow{margin-bottom:.5rem;}
.page-head-row h1{margin:0;}
@media (max-width:640px){
  .page-head-row{flex-direction:column; gap:1rem; text-align:center;}
  .page-head-photo{width:5.5rem; height:5.5rem;}
}
.page-head h1{
  font-family:'Inter',system-ui,sans-serif; font-weight:700;
  font-size:clamp(1.875rem,4vw,2.75rem); color:var(--navy); line-height:1.25;
  max-width:40rem; margin:0 auto .875rem;
}
.page-head p{max-width:35rem; margin:0 auto; color:var(--text-soft); font-size:1.0625rem; line-height:1.7;}

/* Accroche en deux encarts (constat, puis appel à l'action) plutôt qu'un
   paragraphe unique : la même idée que .page-head p, mais chaque phrase
   respire dans son propre cadre. */
.page-head-encarts{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  max-width:44rem; margin:1.75rem auto 0; text-align:left;
}
.page-head-encart{
  background:var(--cream-warm); border:2px solid var(--gold); border-top-width:6px;
  border-radius:var(--radius-md); padding:1.25rem 1.375rem;
  box-shadow:
    0 1px 2px rgba(27,43,60,.05),
    0 12px 24px rgba(27,43,60,.14),
    0 24px 46px rgba(27,43,60,.09),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 10px 10px -9px rgba(27,43,60,.38);
  font-size:1.0625rem; line-height:1.6; color:var(--text-soft);
}
.page-head-encart strong{color:var(--navy);}
.page-head-encart:first-child{color:var(--navy); font-weight:600;}
@media (max-width:640px){.page-head-encarts{grid-template-columns:1fr;}}

.contact-section{padding:1rem 0 var(--section-bas);}
.contact-grid{display:grid; grid-template-columns:1fr 1.35fr; gap:2.5rem; align-items:stretch;}

/* Premier essai (encart ancré tout en bas, colonne nue) jugé pire : un grand
   vide se formait juste au-dessus de l'encart au lieu d'en dessous. Solution
   retenue : toute la colonne devient un même panneau (fond + cadre), qui
   s'étire à la hauteur du formulaire — l'espace en bas se lit alors comme du
   confort intérieur de carte, pas comme un trou. */
.contact-info{
  display:flex; flex-direction:column;
  background:var(--cream-warm); border:2px solid var(--gold); border-top-width:6px;
  border-radius:var(--radius-md); padding:1.75rem 2rem;
  box-shadow:
    0 1px 2px rgba(27,43,60,.05),
    0 12px 24px rgba(27,43,60,.14),
    0 24px 46px rgba(27,43,60,.09),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 10px 10px -9px rgba(27,43,60,.38);
}
.contact-info h2{font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:1.5rem; color:var(--navy); margin-bottom:.875rem;}
.contact-info > p{color:var(--text-soft); font-size:.9375rem; line-height:1.7; margin-bottom:1.75rem;}
/* Comble le vide laissé par l'étirement de la colonne (voir .contact-info
   plus haut) : ce conteneur occupe TOUT l'espace libre restant (flex:1) et
   centre le logo en son sein, horizontalement et verticalement — plus fiable
   que deux marges automatiques réparties entre le logo et .contact-reassur. */
.contact-info-spacer{flex:1 1 auto; min-height:2rem; display:flex; align-items:center; justify-content:center;}
.contact-info-logo{display:block; width:20rem; height:20rem; max-width:90%; opacity:.9;}

.contact-items{margin-bottom:1.75rem;}
.contact-item{padding:.875rem 0; border-bottom:1px solid var(--line);}
.contact-item:last-child{border-bottom:0;}
.contact-item-icon{
  width:2.25rem; height:2.25rem; border-radius:.5rem; flex:none;
  background:var(--navy-badge); color:var(--gold);
  display:inline-flex; align-items:center; justify-content:center;
}
.contact-item-icon svg{width:1.125rem; height:1.125rem; stroke:currentColor; fill:none; stroke-width:1.5;}
/* L'icône est dans le <dt> : une <dl> n'accepte que des <dt>/<dd>. */
.contact-label{
  display:flex; align-items:center; gap:.625rem;
  font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:.25rem;
}
.contact-item dd{padding-left:2.875rem;}
.contact-val{font-size:1rem; font-weight:600; color:var(--navy); text-decoration:none; line-height:1.45;}
.contact-horaires{display:block; font-size:.8125rem; font-weight:400; color:var(--text-soft); line-height:1.4; margin-top:.125rem;}
a.contact-val:hover{color:var(--gold-deep); text-decoration:underline;}

/* Plus de cadre propre depuis que .contact-info est elle-même devenue un
   panneau à cadre doré (voir plus haut) : une carte dans une carte aurait
   surchargé le bloc. Un simple filet du haut suffit à séparer cette partie
   de la liste de coordonnées. */
.contact-reassur{
  border-top:1px solid var(--line); padding-top:1.25rem;
}
.contact-reassur dt{font-size:.9375rem; font-weight:700; color:var(--navy);}
.contact-reassur dd{font-size:.875rem; color:var(--text-soft); line-height:1.6; margin-bottom:.875rem;}
.contact-reassur dd:last-child{margin-bottom:0;}

/* ── Formulaire ────────────────────────────────────────────────────────── */
.form-devis{
  /* Crème chaud plutôt que blanc (choix du 21/08) : c'était le dernier panneau
     blanc du site. Les champs de saisie, restés en crème clair, deviennent du
     coup plus clairs que le panneau — la disposition habituelle, et la plus
     lisible : le regard va naturellement vers les zones à remplir. */
  background:var(--cream-warm); border:2px solid var(--gold); border-top-width:6px;
  border-radius:var(--radius-md); padding:2rem;
  box-shadow:
    0 1px 2px rgba(27,43,60,.05),
    0 12px 24px rgba(27,43,60,.14),
    0 24px 46px rgba(27,43,60,.09),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 10px 10px -9px rgba(27,43,60,.38);
}
.form-titre{font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:1.5rem; color:var(--navy); margin-bottom:.375rem;}
.form-sous-titre{font-size:.9375rem; color:var(--text-soft); margin-bottom:1.75rem; line-height:1.6;}

.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.form-group{margin-bottom:1.125rem;}
.form-group label,
.form-group legend{
  display:block; font-size:.8125rem; font-weight:700; color:var(--navy);
  margin-bottom:.375rem; letter-spacing:.01em;
}
.form-group input,
.form-group textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--text);
  background:var(--cream); border:1px solid var(--line); border-radius:.625rem;
  padding:.75rem .875rem; transition:border-color .2s ease, background .2s ease;
}
.form-group textarea{min-height:7.5rem; resize:vertical; line-height:1.6;}
.form-group input::placeholder,
.form-group textarea::placeholder{color:#8A8272;}
.form-group input:hover,
.form-group textarea:hover{border-color:var(--gold);}
.form-group input:focus,
.form-group textarea:focus{background:#fff; border-color:var(--gold-deep);}

fieldset.form-group{border:0;}
fieldset.form-group legend{padding:0; font-size:1rem;}
label[for="message"]{font-size:1rem;}
.form-radio-group{display:flex; flex-direction:column; gap:.125rem;}
.radio-item{
  display:flex !important; align-items:center; gap:.625rem;
  font-size:.9375rem !important; font-weight:400 !important; color:var(--text) !important;
  margin-bottom:0 !important; padding:.5rem .5rem .5rem 0; cursor:pointer; line-height:1.45;
  border-radius:.375rem;
}
/* Blanc et non crème : sur le panneau crème chaud, le survol doit se
   distinguer des champs de saisie, qui sont eux en crème clair. */
.radio-item:hover{background:#fff;}
.radio-item input{width:auto; accent-color:var(--gold-deep); flex:none; margin:0;}

.form-rule{height:1px; background:var(--line); margin:1.5rem 0;}

/* Logo à gauche du bouton d'envoi : il signe la démarche au moment où la
   personne s'apprête à l'envoyer. Le fichier étant détouré (fond transparent),
   il se pose directement sur le crème sans cadre ni pastille. */
.form-envoi{display:flex; align-items:center; gap:1rem; margin-top:.5rem;}
.form-logo{width:3.5rem; height:3.5rem; flex:none; object-fit:contain;}
.form-submit{width:auto; flex:1; margin-top:0;}
@media (max-width:420px){
  .form-logo{width:2.75rem; height:2.75rem;}
  .form-envoi{gap:.75rem;}
}

.form-mention{font-size:.75rem; color:var(--text-soft); line-height:1.6; margin-top:1rem;}

/* Champ piège anti-spam : invisible pour l'humain, rempli par les robots. */
.form-honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.form-success,
.form-error{display:none; margin-top:1.25rem; padding:1rem 1.125rem; border-radius:.625rem; font-size:.9375rem; line-height:1.6;}
.form-success{background:#EAF3EA; border:1px solid #A8C7A8; color:#254A25;}
.form-error{background:#FBEAEA; border:1px solid #D8A7A7; color:#7A2020;}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr; gap:2rem;}
}
@media (max-width:560px){
  .form-row{grid-template-columns:1fr; gap:0;}
  .form-devis{padding:1.5rem 1.25rem;}
}

/* ==========================================================================
   PAGE MENTIONS LÉGALES
   ========================================================================== */
.legal{padding:1rem 0 var(--section-bas);}
.legal-contenu{max-width:46rem; margin:0 auto;}
.legal-contenu h2{
  font-size:1.25rem; font-weight:700; color:var(--navy);
  margin:2.25rem 0 .75rem; padding-top:1.25rem; border-top:1px solid var(--line);
}
.legal-contenu h2:first-of-type{margin-top:.5rem;}
.legal-contenu h3{font-size:1rem; font-weight:700; color:var(--navy); margin:1.5rem 0 .5rem;}
.legal-contenu p{color:var(--text-soft); font-size:.9375rem; line-height:1.75; margin-bottom:.875rem;}
.legal-contenu a{color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px;}
.legal-contenu strong{color:var(--text);}

.legal-liste{display:grid; grid-template-columns:14rem 1fr; gap:.5rem 1.5rem; margin-bottom:.5rem;}
.legal-liste dt{font-size:.9375rem; font-weight:700; color:var(--navy);}
.legal-liste dd{font-size:.9375rem; color:var(--text-soft); line-height:1.6;}
@media (max-width:640px){
  .legal-liste{grid-template-columns:1fr; gap:.125rem;}
  .legal-liste dd{margin-bottom:.875rem;}
}

/* Marqueur des informations en attente de l'immatriculation (SIRET, forme
   juridique...) : ton neutre et pro, pas une alerte — c'est un état attendu
   et daté, pas un oubli. */
.en-cours{
  color:var(--gold-deep); font-style:italic;
}
.legal-info{
  background:var(--cream-deep); border:1px solid var(--gold); color:var(--text);
  border-radius:.625rem; padding:1rem 1.125rem; margin-bottom:1.5rem;
  font-size:.9375rem; line-height:1.6;
}
.legal-info strong{color:var(--gold-deep);}
.legal-maj{font-style:normal;}

/* ==========================================================================
   COMPARATIF SEULE / AVEC APAISIA (page Formules)
   ========================================================================== */
/* Fond marine plein — pas un fond clair qui aurait prolongé le bandeau de
   réassurance juste au-dessus : ici on change franchement de registre. La
   colonne « Seule » n'a ni cadre ni fond : elle s'efface dans le marine.
   « Avec APAISIA » est la seule à recevoir une vraie carte lumineuse — c'est
   elle qui doit accrocher l'œil. Un badge « VS » tranche entre les deux. */
.comparatif{background:var(--navy); padding:var(--section-haut) 0 var(--section-bas); position:relative; overflow:hidden;}
.comparatif .section-head .eyebrow{color:var(--gold);}
.comparatif .section-head h2{color:var(--cream);}
.comparatif .section-head p{color:rgba(247,241,228,.75);}

.comparatif-grid{
  display:grid; grid-template-columns:1fr auto 1fr; gap:1.5rem;
  max-width:52rem; margin:0 auto; align-items:center; position:relative; z-index:1;
}
.comparatif-col{padding:1.75rem 1.625rem;}
.comparatif-seule{padding-left:0;}
.comparatif-avec{
  background:var(--cream-warm); border:2px solid var(--gold); border-radius:var(--radius-md);
  box-shadow:
    0 1px 2px rgba(0,0,0,.15), 0 16px 32px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.5);
}
/* Le visage sur la carte gagnante : on achète à quelqu'un, pas à une liste
   de puces. Le portrait déborde du haut de la carte comme un badge, pour
   qu'il se voie avant même de lire la première ligne. */
.comparatif-photo{
  display:block; width:4.5rem; height:4.5rem; margin:-3.5rem auto 1rem;
  border-radius:50%; object-fit:cover; border:3px solid var(--gold);
  box-shadow:var(--shadow-md); position:relative; z-index:1;
}
.comparatif-titre{
  font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:1.125rem;
  margin-bottom:1.375rem; text-align:center;
}
.comparatif-seule .comparatif-titre{color:rgba(247,241,228,.6);}
.comparatif-avec .comparatif-titre{color:var(--gold-deep);}
.comparatif-list{list-style:none; display:flex; flex-direction:column; gap:.9375rem;}
.comparatif-list li{display:flex; align-items:flex-start; gap:.75rem; font-size:.9375rem; line-height:1.5;}
.comparatif-seule li{color:rgba(247,241,228,.5);}
.comparatif-avec li{color:var(--navy); font-weight:600;}
.comparatif-icone{flex:none; width:1.25rem; height:1.25rem; margin-top:.125rem;}
.comparatif-icone svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.comparatif-seule .comparatif-icone{color:rgba(247,241,228,.45);}
.comparatif-avec .comparatif-icone{color:var(--gold-deep);}

/* Le badge « VS » qui tranche entre les deux façons de faire — respire tout
   seul, en boucle, pour rester la première chose que l'œil accroche. */
.comparatif-vs{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:3.25rem; height:3.25rem; border-radius:50%;
  background:var(--navy-badge); border:2px solid var(--gold); color:var(--gold);
  font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:.875rem; letter-spacing:.05em;
  position:relative; z-index:2;
}
@keyframes comparatif-vs-respire{
  0%,100%{box-shadow:0 0 0 0 rgba(193,152,86,.55);}
  50%{box-shadow:0 0 0 10px rgba(193,152,86,0);}
}
.comparatif-vs{animation:comparatif-vs-respire 2.4s ease-out infinite;}

/* Deux entrées volontairement différentes : la colonne « Seule » tremble en
   apparaissant (énergie nerveuse), « Avec APAISIA » s'installe calmement et
   son coche se dessine trait par trait — le contraste se joue autant dans le
   mouvement que dans la couleur. Rejouée à chaque passage dans le champ de
   vision (pas seulement une fois), pour qui reviendrait sur la page. */
@keyframes comparatif-secousse{
  0%{opacity:0; transform:translateX(0);}
  15%{opacity:1;}
  30%{transform:translateX(-5px) rotate(-1.2deg);}
  50%{transform:translateX(4px) rotate(1deg);}
  70%{transform:translateX(-3px) rotate(-.6deg);}
  85%{transform:translateX(2px) rotate(.3deg);}
  100%{opacity:1; transform:translateX(0) rotate(0);}
}
@keyframes comparatif-installe{
  0%{opacity:0; transform:translateY(12px) scale(.94);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes comparatif-dessine{to{stroke-dashoffset:0;}}

.js-anim .comparatif-seule li,
.js-anim .comparatif-avec li{opacity:0;}
.js-anim .comparatif-avec .comparatif-icone svg path{stroke-dasharray:22; stroke-dashoffset:22;}

.js-anim .reveal.in .comparatif-seule li{animation:comparatif-secousse .5s ease-out both;}
.js-anim .reveal.in .comparatif-avec li{animation:comparatif-installe .55s cubic-bezier(.22,.8,.32,1) both;}
.js-anim .reveal.in .comparatif-avec .comparatif-icone svg path{animation:comparatif-dessine .4s ease-out both;}

.comparatif-list li:nth-child(1){animation-delay:.05s !important;}
.comparatif-list li:nth-child(2){animation-delay:.18s !important;}
.comparatif-list li:nth-child(3){animation-delay:.31s !important;}
.comparatif-list li:nth-child(4){animation-delay:.44s !important;}
.comparatif-list li:nth-child(5){animation-delay:.57s !important;}
.comparatif-avec li:nth-child(1) .comparatif-icone svg path{animation-delay:.35s !important;}
.comparatif-avec li:nth-child(2) .comparatif-icone svg path{animation-delay:.48s !important;}
.comparatif-avec li:nth-child(3) .comparatif-icone svg path{animation-delay:.61s !important;}
.comparatif-avec li:nth-child(4) .comparatif-icone svg path{animation-delay:.74s !important;}
.comparatif-avec li:nth-child(5) .comparatif-icone svg path{animation-delay:.87s !important;}

/* Une fois dessiné, le coche respire doucement — confiance calme, jamais
   nerveuse, à l'opposé du tremblement de la colonne d'en face. */
@keyframes comparatif-pulse-doux{0%,100%{transform:scale(1);} 50%{transform:scale(1.18);}}
.comparatif-avec .comparatif-icone{animation:comparatif-pulse-doux 2.6s ease-in-out infinite;}

@media (max-width:640px){
  .comparatif-grid{grid-template-columns:1fr;}
  .comparatif-vs{margin:.5rem auto;}
  .comparatif-seule{padding-left:1.625rem;}
}

/* Appel à l'action de clôture : on ne laisse pas retomber la tension du
   contraste qui précède, on la transforme tout de suite en geste concret —
   la flèche qui rebondit pousse littéralement le regard vers les tarifs. */
.comparatif-cta{text-align:center; margin-top:2.75rem; position:relative; z-index:1;}
.comparatif-cta p{
  color:var(--cream); font-size:1.1875rem; font-weight:700; margin-bottom:1.25rem;
}
.comparatif-cta-lien{
  display:inline-flex; align-items:center; gap:.625rem;
  background:var(--gold); color:var(--navy); text-decoration:none;
  padding:.9375rem 2.25rem; border-radius:var(--radius-pill);
  font-size:.8125rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  box-shadow:var(--shadow-md);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.comparatif-cta-lien:hover{background:var(--cream); color:var(--navy); transform:translateY(-2px);}
@keyframes comparatif-fleche-rebond{0%,100%{transform:translateY(0);} 50%{transform:translateY(4px);}}
.comparatif-cta-fleche{
  width:1rem; height:1rem; flex:none; stroke:currentColor; fill:none;
  stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  animation:comparatif-fleche-rebond 1.4s ease-in-out infinite;
}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
footer{background:var(--navy-badge); color:rgba(247,241,228,.85); padding:3rem 0 1.5rem;}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2.5rem;}
.footer-brand-name{font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:1.375rem; color:var(--gold); margin-bottom:.75rem;}
.footer-brand p{font-size:.875rem; line-height:1.7; color:rgba(247,241,228,.85);}
.footer-col h2{
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.875rem;
}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:.5rem; font-size:.875rem; line-height:1.6;}
.footer-col a{color:rgba(247,241,228,.85); text-decoration:none;}
.footer-col a:hover{color:var(--gold); text-decoration:underline;}
.footer-horaires{color:rgba(247,241,228,.7); font-size:.8125rem;}
.footer-bottom{
  margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid rgba(247,241,228,.15);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.8125rem; color:rgba(247,241,228,.75);
}
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr; gap:2rem;}
  .footer-bottom{flex-direction:column; gap:.5rem;}
}

/* ==========================================================================
   MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Bandeau citation sur petit écran : photo et citation restent sur la même
   ligne, le portrait rétrécit pour laisser la place au texte. */
@media (max-width:560px){
  .quote-band figure{column-gap:1rem;}
  .quote-photo{width:3.5rem; height:3.5rem; border-width:2px;}
}