/* ==========================================================================
   Maison Aleva — site vitrine
   Palette et signes graphiques relevés dans la plaquette imprimée du cabinet.
   Parti pris : composition éditoriale. Filets d'un pixel, angles francs,
   aucune ombre portée. La typographie et l'espace portent la hiérarchie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Jetons
   -------------------------------------------------------------------------- */
:root{
  /* Couleurs — valeurs relevées dans la plaquette */
  --vert-fonce:#16402D;
  --vert-nuit:#0E2A1D;
  --creme:#F3ECDD;
  --or:#C0954A;
  --or-clair:#D9B36A;          /* doré sur fond sombre */
  --or-fonce:#8A6420;          /* doré sur fond clair — contraste AA */
  --encre:#21302A;
  --encre-attenue:#4F5F56;
  --encre-inverse:#10261A;     /* texte posé sur un aplat or */
  --texte-clair:#F0EADD;
  --texte-attenue:#C9D6C6;
  --gris-graphe:#6D8571;      /* courbe secondaire — 3,4:1 sur crème (WCAG 1.4.11) */

  /* Filets */
  --trait-or:rgba(192,149,74,.30);
  --trait-sombre:rgba(240,234,221,.16);
  --trait-clair:rgba(33,48,42,.15);
  --trait-clair-or:rgba(138,100,32,.30);

  /* Anneau de focus : dessiné en dehors de l'élément, donc toujours
     contrasté avec le fond de section et jamais avec le bouton lui-même */
  --focus:var(--or-clair);

  /* Espacement — base 8, échelle fixe */
  --e1:4px;  --e2:8px;   --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px;  --e8:64px; --e9:96px;

  /* Rythme vertical : deux valeurs seulement, la seconde pour les
     respirations (hero, prise de contact) */
  --section-y:clamp(72px,8vw,120px);
  --section-y-ample:clamp(96px,10vw,160px);

  /* Échelle typographique */
  --t-micro:.625rem;       /* 10 — sous-titre du logo */
  --t-overline:.6875rem;   /* 11 — capitales espacées, boutons, nav */
  --t-label:.75rem;        /* 12 — nom du logo, mentions légales */
  --t-caption:.8125rem;    /* 13 — liens texte, légendes */
  --t-body-s:.9375rem;     /* 15 — texte de colonne */
  --t-body:1rem;           /* 16 — texte courant */
  --t-lead:clamp(1.0625rem,.4vw + 1rem,1.1875rem);
  --t-h3:1.0625rem;
  --t-h2:clamp(1.75rem,3.2vw,2.5rem);
  --t-h1:clamp(2.5rem,5.6vw,4.25rem);
  --t-nombre:clamp(1.875rem,3.2vw,2.375rem);
  --t-citation:clamp(1.375rem,2.8vw,2rem);

  /* Trame */
  --max:1260px;
  --gutter:clamp(22px,5vw,50px);
  --libelle:168px;
  --colonne-gap:clamp(32px,4.5vw,72px);
  --entete-h:78px;

  /* Mouvement — micro-interactions uniquement */
  --duree-1:150ms;
  --duree-2:220ms;
  /* Le survol des boutons : plus long et plus amorti que les transitions
     de base — « ca doit etre smooth », demande du cabinet du 22 septembre
     2026. Meme courbe que les revelations de la page. */
  --duree-douce:320ms;
  --ease-douce:cubic-bezier(.22,1,.36,1);
  --ease:cubic-bezier(.2,.6,.35,1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--vert-fonce);
  color:var(--encre);
  font-family:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(15.5px,.35vw + 15px,16.5px);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
svg{max-width:100%}
a{color:inherit}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
::selection{background:var(--or);color:var(--encre-inverse)}

/* Les listes gardent leur sémantique : list-style est retiré au cas par cas,
   avec role="list" sur l'élément (Safari perd le rôle sinon). */
[role="list"]{margin:0;padding:0;list-style:none}
dl,dd{margin:0}

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */
h1,h2,h3{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-weight:600;
  margin:0;
}
h1{
  font-size:var(--t-h1);
  line-height:1.03;
  letter-spacing:-.022em;
  max-width:16ch;          /* force une césure choisie, pas subie */
  text-wrap:balance;
}
h2{
  font-size:var(--t-h2);
  line-height:1.12;
  letter-spacing:-.017em;
  max-width:26ch;
  text-wrap:balance;
}
h3{font-size:var(--t-h3);line-height:1.3;letter-spacing:-.005em;font-weight:700}

.kicker{
  margin:0;
  font-size:var(--t-overline);
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1.6;
}
.sombre .kicker{color:var(--or-clair)}
.clair .kicker{color:var(--or-fonce)}

/* Filet court sous les H2 — reprise de la plaquette */
.filet::after{
  content:"";
  display:block;
  width:44px;
  height:2px;
  margin-top:var(--e5);
  background:var(--or);
}
.clair .filet::after{background:var(--or-fonce)}

.lead{font-size:var(--t-lead);line-height:1.62}
.mesure{max-width:62ch}   /* ~68 caractères de mesure sur le corps de texte */

.sombre{background:var(--vert-fonce);color:var(--texte-clair)}
.sombre p{color:var(--texte-attenue)}
.sombre h1,.sombre h2,.sombre h3{color:var(--texte-clair)}
.clair{background:var(--creme);color:var(--encre)}
.clair p{color:var(--encre-attenue)}
.or{color:var(--or)}
.clair .or{color:var(--or-fonce)}

/* --------------------------------------------------------------------------
   Trame
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
section{
  position:relative;
  padding:var(--section-y) 0;
  /* Cale le titre 40px sous l'en-tête, et non le bord de la section :
     sans cela le padding de section repousse le titre hors du regard. */
  scroll-margin-top:calc(var(--entete-h) + 40px - var(--section-y));
  overflow-x:clip;          /* contient les ornements sans créer de
                               conteneur de défilement, qui casserait sticky */
}
.section--ample{
  padding:var(--section-y-ample) 0;
  scroll-margin-top:calc(var(--entete-h) + 40px - var(--section-y-ample));
}

/* Colonne de libellés + colonne de contenu */
.bloc{display:grid;grid-template-columns:1fr;gap:var(--e5)}
.bloc-contenu{min-width:0}
.suite{margin-top:var(--e8)}
.suite-serree{margin-top:var(--e6)}
.sur-fond{position:relative;z-index:2}

/* Bloc introduit par un filet horizontal */
.filet-haut{padding-top:var(--e5);border-top:1px solid var(--trait-or)}
.clair .filet-haut{border-top-color:var(--trait-clair-or)}

/* --------------------------------------------------------------------------
   Accessibilité
   -------------------------------------------------------------------------- */
.evitement{
  position:absolute;left:var(--gutter);top:-100px;z-index:300;
  background:var(--or);color:var(--encre-inverse);
  font-size:var(--t-caption);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:var(--e3) var(--e4);text-decoration:none;
  transition:top var(--duree-2) var(--ease);
}
.evitement:focus{top:14px}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.clair :focus-visible{--focus:var(--or-fonce)}

.hors-ecran{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.entete{
  position:sticky;top:0;z-index:200;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--duree-2) var(--ease),border-color var(--duree-2) var(--ease);
}
.entete.est-defile,
.entete[data-menu="true"]{
  background:var(--vert-nuit);
  border-bottom-color:var(--trait-or);
}
/* Avancement de lecture : la page fait plus de 8 000 px. */
.progression{
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--or);transform:scaleX(0);transform-origin:0 50%;
}
.entete-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--e5);min-height:var(--entete-h);
}
.logo{display:flex;align-items:center;gap:var(--e3);text-decoration:none;flex:0 0 auto}
.logo-mark{width:34px;height:34px;color:var(--or);flex:0 0 auto}
.logo-nom,.logo-sous{display:block;white-space:nowrap;text-transform:uppercase}
.logo-nom{
  font-size:var(--t-label);font-weight:700;letter-spacing:.26em;
  color:var(--texte-clair);
}
.logo-sous{
  margin-top:var(--e1);
  font-size:var(--t-micro);letter-spacing:.24em;
  color:var(--or-clair);
}

/* Ecart resserre (19 px au plus, contre 30) : c'est ce qui laisse de la marge
   au-dela de 1280 px, ou le menu s'affiche en ligne avec les deux boutons et
   le drapeau. Mesure a 1280 px, il restait sinon 4 px avant le bord. */
.nav{display:flex;align-items:center;gap:clamp(16px,1.3vw,19px)}
@media (min-width:1280px){
  /* Au-dela de 1280 px, le menu est en ligne et le conteneur plafonne a
     1 160 px utiles, quelle que soit la largeur de l'ecran. La page francaise,
     aux libelles plus longs (« Prendre rendez-vous »), les depassait de 37 px.
     Deux boutons un peu moins larges et un ecart de 20 px entre les blocs la
     font tenir dans la colonne, alignee sur le contenu. */
  .entete-in{gap:20px}
  .entete-cta .btn{padding-left:20px;padding-right:20px}
}
.nav a{
  position:relative;padding:var(--e2) 0;
  font-size:var(--t-overline);font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--texte-attenue);text-decoration:none;white-space:nowrap;
  transition:color var(--duree-1) var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--or);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--duree-2) var(--ease);
}
.nav a:hover{color:var(--texte-clair)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--or-clair)}

/* --------------------------------------------------------------------------
   Boutons et liens
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--e3);
  padding:var(--e4) var(--e6);
  font-size:var(--t-overline);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  /* En pilule : extremites entierement arrondies, quelle que soit la hauteur
     du bouton. Le reflet (::after) reste dans la forme grace a overflow. */
  border-radius:999px;
  /* L'OMBRE est desormais animee, elle aussi : elle surgissait d'un coup au
     survol, alors que le reste glissait — c'est ce qui rendait le geste sec. */
  transition:background var(--duree-douce) var(--ease-douce),
             color var(--duree-douce) var(--ease-douce),
             border-color var(--duree-douce) var(--ease-douce),
             transform var(--duree-douce) var(--ease-douce),
             box-shadow var(--duree-douce) var(--ease-douce);
}
.btn--or{background:var(--or);color:var(--encre-inverse)}
.btn--or:hover{background:var(--or-clair)}
.btn--contour{background:transparent;border-color:var(--trait-or);color:var(--or-clair)}
.btn--contour:hover{background:var(--or);border-color:var(--or);color:var(--encre-inverse)}
.btn:active{transform:translateY(1px)}
.btn[aria-disabled="true"],.btn:disabled{
  opacity:.45;pointer-events:none;transform:none;
}
.btn--compact{padding:var(--e3) var(--e5)}
    /* Deux actions dans l'en-tete depuis l'ajout de l'espace client :
       sans gouttiere elles se toucheraient. La regle est ici, dans le
       flux normal, pour que la media query qui masque le bloc en mobile
       continue de l'emporter — elle vient plus loin dans la feuille. */
    /* `stretch` et non `center` : entre 900 et 1200 px les libelles reviennent
       a la ligne, et les deux boutons prenaient alors des hauteurs
       differentes (63 px contre 81). Ils font desormais la meme, quoi
       qu'il arrive. */
    .entete-cta{display:flex;gap:var(--e3);align-items:stretch;justify-content:center}
    /* Une seule ligne, texte centre, meme hauteur. « Prendre rendez-vous »
       passait a la ligne : les deux boutons n'avaient alors ni la meme
       hauteur (63 px contre 45) ni la meme largeur, et leur libelle restait
       cale a gauche. La largeur COMMUNE n'est imposee qu'au-dela de 1200 px,
       ou la place existe ; en dessous, chacun garde sa largeur naturelle
       plutot que de deborder sur la navigation. */
    .entete-cta .btn{justify-content:center;text-align:center}
    /* Une seule ligne ET une largeur commune SEULEMENT au-dela de 1200 px.
       Mesure a 985 px avec `nowrap` pose partout : la page debordait de
       211 px et le bouton dore sortait de l'ecran. En dessous, les libelles
       peuvent donc revenir a la ligne, comme avant, mais centres. */
    @media (min-width:900px){.entete-cta .btn{white-space:nowrap}}
    /* La largeur COMMUNE des deux boutons (13,5 rem) est RETIREE le
       22 septembre 2026 : elle ajoutait 68 px a un en-tete qui n'en avait
       pas un de trop, et aucune largeur d'ecran ne lui laissait la place une
       fois le drapeau de langue pose — le conteneur plafonne a 1 160 px
       utiles. Chaque bouton garde sa largeur naturelle, sur une ligne. */
.fleche{width:20px;height:8px;flex:0 0 auto;transition:transform var(--duree-2) var(--ease)}
.btn:hover .fleche{transform:translateX(4px)}

.lien{
  display:inline-flex;align-items:center;
  padding:var(--e1) 0 var(--e2);
  font-size:var(--t-caption);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-clair);text-decoration:none;
  border-bottom:1px solid var(--trait-or);
  transition:color var(--duree-1) var(--ease),border-color var(--duree-1) var(--ease);
}
.lien:hover{color:var(--or-clair);border-bottom-color:var(--or)}

/* --------------------------------------------------------------------------
   Menu mobile
   -------------------------------------------------------------------------- */
.burger{
  display:none;width:44px;height:44px;padding:0;
  background:transparent;border:1px solid var(--trait-or);
  /* Rond, pour ne pas jurer a cote des boutons en pilule sur tablette. */
  border-radius:50%;
  color:var(--or-clair);cursor:pointer;
  align-items:center;justify-content:center;flex:0 0 auto;
  transition:border-color var(--duree-douce) var(--ease-douce);
}
.burger span{position:relative;display:block;width:17px;height:1px;background:transparent}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:17px;height:1px;background:currentColor;
  transition:transform var(--duree-2) var(--ease);
}
.burger span::before{top:-4px}
.burger span::after{top:4px}
.burger[aria-expanded="true"] span::before{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-4px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{
  display:flex;align-items:center;
  min-height:clamp(560px,88vh,860px);
  padding:calc(var(--entete-h) + var(--e9)) 0 var(--e8);
}
.etiquette{
  display:flex;align-items:center;gap:var(--e3);
  margin:0 0 var(--e6);
  font-size:var(--t-overline);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--or-clair);
}
.etiquette::before{content:"";width:36px;height:1px;background:var(--or);flex:0 0 auto}
.hero h1{margin-bottom:var(--e5)}
.hero .lead{max-width:44ch;color:var(--texte-attenue)}
.hero-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e5) var(--e7);
  margin-top:var(--e7);
}
.garanties{
  display:flex;flex-wrap:wrap;gap:var(--e4) clamp(28px,4.5vw,68px);
  margin-top:var(--e8);padding-top:var(--e5);
  border-top:1px solid var(--trait-or);
}
.garantie{
  display:flex;align-items:center;gap:var(--e2);
  font-size:var(--t-overline);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texte-attenue);
}
.coche{width:13px;height:13px;color:var(--or);flex:0 0 auto}

/* --------------------------------------------------------------------------
   Ornements
   -------------------------------------------------------------------------- */
.rameau{
  position:absolute;z-index:1;pointer-events:none;
  color:var(--or);opacity:.42;
  top:clamp(-30px,-2vw,-8px);right:clamp(-90px,-5vw,-30px);
  width:clamp(240px,36vw,470px);height:auto;
}
.filigrane{
  position:absolute;z-index:0;pointer-events:none;
  color:var(--or);opacity:.055;
  bottom:clamp(26px,4vw,58px);right:var(--gutter);
  width:clamp(150px,17vw,220px);height:auto;
}
.motifs{position:absolute;width:0;height:0}

/* --------------------------------------------------------------------------
   Chiffres clés — un seul filet pour toute la rangée, pas un par cellule :
   la rangée se lit comme un ensemble, non comme quatre cartes.
   -------------------------------------------------------------------------- */
.chiffres{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--e6) var(--e5);
  margin-top:var(--e8);padding-top:var(--e5);
  border-top:1px solid var(--trait-clair-or);
}
.chiffre-val{
  display:block;
  font-family:"Playfair Display",Georgia,serif;font-weight:500;
  font-size:var(--t-nombre);line-height:1;letter-spacing:-.02em;
  color:var(--vert-fonce);
}
.chiffre-lib{
  display:block;margin-top:var(--e3);
  font-size:var(--t-overline);font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  line-height:1.55;color:var(--encre-attenue);
}

/* --------------------------------------------------------------------------
   Colonnes éditoriales — convictions, équipe
   -------------------------------------------------------------------------- */
.colonnes{display:grid;grid-template-columns:1fr;gap:var(--e7)}
.colonne-num{
  display:block;margin-bottom:var(--e4);
  font-family:"Playfair Display",Georgia,serif;font-weight:500;
  font-size:1.375rem;letter-spacing:.04em;line-height:1;color:var(--or);
}
.colonne h3{margin-bottom:var(--e3)}
.colonne p{font-size:var(--t-body-s);line-height:1.62;margin:0}

/* --------------------------------------------------------------------------
   Expertises
   -------------------------------------------------------------------------- */
.expertises{display:grid;grid-template-columns:1fr;gap:var(--e8)}
.expertise h3{margin-bottom:var(--e2)}
.expertise-intro{
  margin-bottom:var(--e5);
  font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;
  font-size:var(--t-body);line-height:1.5;color:var(--encre-attenue);
}
.prestations li{
  position:relative;padding-left:var(--e6);
  margin-bottom:var(--e5);font-size:var(--t-body-s);line-height:1.56;
}
.prestations li:last-child{margin-bottom:0}
.prestations li::before{
  content:"";position:absolute;left:0;top:.78em;
  width:12px;height:1px;background:var(--or-fonce);
}
.prestations strong{display:block;color:var(--encre);font-weight:700}
.prestations span{display:block;margin-top:2px;color:var(--encre-attenue)}

/* --------------------------------------------------------------------------
   Méthode
   -------------------------------------------------------------------------- */
.etapes{position:relative;display:grid;grid-template-columns:1fr;gap:var(--e7)}
.etape{position:relative;z-index:2}
.rond{
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--trait-or);background:var(--vert-fonce);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--e5);
  font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:var(--t-h3);
  color:var(--or-clair);
}
/* Le « 1 » de Playfair porte des approches asymétriques : il paraît décalé
   à gauche dans un cercle. Compensation optique d'un pixel. */
.etape:first-child .rond{padding-left:2px}
.etape h3{margin-bottom:var(--e3)}
.etape p{font-size:var(--t-body-s);line-height:1.62;margin:0}

/* --------------------------------------------------------------------------
   Frais
   -------------------------------------------------------------------------- */
.frais{display:grid;grid-template-columns:1fr;gap:var(--e8);align-items:start}
.graphe-zone{min-width:0}
.graphe{display:block;width:100%;height:auto;margin-top:var(--e2)}

/* Le graphique est piloté par les jetons : aucune couleur en dur dans le SVG */
.graphe text{
  fill:var(--encre-attenue);
  font-family:"Lato",system-ui,sans-serif;
  font-size:11px;letter-spacing:.03em;
}
.graphe .grille{stroke:var(--trait-clair);stroke-width:1}
.graphe .axe{stroke:var(--encre-attenue);stroke-opacity:.8;stroke-width:1}
.graphe .aire{fill:url(#aire-frais)}
.graphe .stop-haut{stop-color:var(--vert-fonce);stop-opacity:.16}
.graphe .stop-bas{stop-color:var(--vert-fonce);stop-opacity:0}
.graphe .courbe{fill:none;stroke-linecap:round;stroke-linejoin:round}
.graphe .courbe--nette{stroke:var(--vert-fonce);stroke-width:2.4}
.graphe .courbe--classique{stroke:var(--gris-graphe);stroke-width:1.9;stroke-dasharray:6 5}
.graphe .borne{fill:var(--creme);stroke:var(--gris-graphe);stroke-width:1.5}
.graphe .borne--nette{fill:var(--or);stroke:none}

.legende{
  display:flex;flex-wrap:wrap;gap:var(--e2) var(--e6);
  margin-top:var(--e5);padding-top:var(--e4);
  border-top:1px solid var(--trait-clair);
}
.legende span{
  display:flex;align-items:center;gap:var(--e2);
  font-size:var(--t-overline);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--encre-attenue);
}
.puce{width:22px;height:2px;flex:0 0 auto;background:var(--vert-fonce)}
/* Tirets calés sur le stroke-dasharray de la courbe */
.puce--tirets{background:repeating-linear-gradient(90deg,var(--gris-graphe) 0 6px,transparent 6px 10px)}

.reperes{display:grid;gap:1px;background:var(--trait-clair-or)}
.repere{background:var(--vert-fonce);padding:var(--e6)}
.repere-et{
  display:block;margin-bottom:var(--e4);
  font-size:var(--t-overline);font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  line-height:1.6;color:var(--or-clair);
}
.repere-val{
  display:block;margin-bottom:var(--e3);
  font-family:"Playfair Display",Georgia,serif;font-weight:500;
  font-size:var(--t-nombre);line-height:1;letter-spacing:-.015em;
  color:var(--texte-clair);
}
.repere p{font-size:var(--t-body-s);line-height:1.58;color:var(--texte-attenue);margin:0}

.mention{
  max-width:82ch;margin-top:var(--e7);padding-top:var(--e4);
  border-top:1px solid var(--trait-clair);
  font-size:var(--t-label);line-height:1.65;font-style:italic;color:var(--encre-attenue);
}
.cloture{
  margin-top:var(--e9);padding-top:var(--e7);
  border-top:1px solid var(--trait-clair-or);
  text-align:center;
}
.cloture p{max-width:54ch;margin:0 auto;font-size:var(--t-lead);color:var(--encre)}
.citation{
  max-width:30ch;margin:var(--e7) auto 0;
  font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;
  font-size:var(--t-citation);line-height:1.32;letter-spacing:-.012em;
  color:var(--vert-fonce);text-wrap:balance;
}
.mono-citation{
  display:block;width:44px;height:44px;margin:var(--e6) auto 0;
  color:var(--or-fonce);opacity:.7;
}

/* --------------------------------------------------------------------------
   Cadre réglementaire — les agréments sortent des mentions légales du pied
   pour être lisibles dans le corps de page.
   -------------------------------------------------------------------------- */
.statuts{
  display:grid;grid-template-columns:1fr;gap:var(--e6) var(--e5);
  margin-top:var(--e8);padding-top:var(--e5);
  border-top:1px solid var(--trait-clair-or);
}
.statut-nom{
  display:block;margin-bottom:var(--e2);
  font-size:var(--t-overline);font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  line-height:1.55;color:var(--or-fonce);
}
.statut-ref{display:block;font-size:var(--t-body-s);line-height:1.5;color:var(--encre)}
.controle{
  margin-top:var(--e6);padding-top:var(--e4);
  border-top:1px solid var(--trait-clair);
  font-size:var(--t-label);line-height:1.75;color:var(--encre-attenue);
}
.controle a{color:var(--or-fonce);text-decoration:none;border-bottom:1px solid var(--trait-clair-or)}
.controle a:hover{border-bottom-color:var(--or-fonce)}

/* --------------------------------------------------------------------------
   Barre d'action mobile — entre la fin du hero et la prise de contact,
   aucun moyen d'agir sur 8 000 px de défilement.
   -------------------------------------------------------------------------- */
.barre-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  display:none;align-items:center;justify-content:space-between;gap:var(--e4);
  padding:var(--e2) var(--gutter);
  background:var(--vert-nuit);border-top:1px solid var(--trait-or);
  transform:translateY(100%);
  transition:transform var(--duree-2) var(--ease);
}
.barre-cta[data-visible="true"]{transform:none}
.barre-cta .btn{white-space:nowrap}
.barre-cta p{
  margin:0;font-size:var(--t-overline);font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--texte-attenue);
}
/* Sous 480px le libellé et le bouton ne tiennent pas côte à côte :
   le bouton prend toute la largeur, le rappel disparaît. */
@media (max-width:479px){
  .barre-cta p{display:none}
  .barre-cta .btn{flex:1;justify-content:center}
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact{background:linear-gradient(178deg,var(--vert-fonce) 0%,var(--vert-nuit) 100%)}
.coordonnees{
  display:grid;grid-template-columns:1fr;gap:var(--e6) var(--e5);
  margin-top:var(--e8);padding-top:var(--e5);
  border-top:1px solid var(--trait-or);
}
.coord-et{
  display:block;margin-bottom:var(--e2);
  font-size:var(--t-overline);font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--or-clair);
}
.coord-val{
  display:block;font-size:var(--t-body-s);font-weight:700;line-height:1.5;
  color:var(--texte-clair);overflow-wrap:break-word;
}
a.coord-val{text-decoration:none;transition:color var(--duree-1) var(--ease)}
a.coord-val:hover{color:var(--or-clair)}
.engagements{
  display:flex;flex-wrap:wrap;gap:var(--e4) clamp(28px,4vw,60px);
  margin-top:var(--e8);padding-top:var(--e5);
  border-top:1px solid var(--trait-or);
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied{
  background:var(--vert-nuit);border-top:1px solid var(--trait-or);
  padding:var(--e8) 0 var(--e6);
}
.pied-haut{padding-bottom:var(--e6);border-bottom:1px solid var(--trait-sombre)}
.pied-legal{
  max-width:96ch;margin:0;
  font-size:var(--t-overline);line-height:1.95;color:var(--texte-attenue);
}
.pied-legal strong{color:var(--texte-clair)}
.pied-legal a{color:var(--or-clair);text-decoration:none;border-bottom:1px solid var(--trait-or)}
.pied-legal a:hover{border-bottom-color:var(--or-clair)}
.ph{color:var(--or-clair);white-space:nowrap}
.pied-bas{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--e2) var(--e5);margin-top:var(--e5);
  font-size:var(--t-overline);letter-spacing:.09em;color:var(--texte-attenue);
}
.pied-liens{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2) var(--e5)}
.pied-liens .sep{opacity:.35}
/* Cible tactile de 28px sur des liens de 11px */
.pied-bas a{
  display:inline-block;padding:var(--e2) 0;
  color:var(--texte-attenue);text-decoration:none;
  transition:color var(--duree-1) var(--ease);
}
.pied-bas a:hover{color:var(--or-clair)}

/* ==========================================================================
   Points de rupture — placés là où la mise en page le demande
   ========================================================================== */
@media (max-width:700px){
  /* Trop peu de place : le filigrane passerait derrière le texte */
  .filigrane{display:none}
  /* Les liens du pied passent a la ligne : un point median resterait seul en
     bout de ligne. L'ecart entre liens suffit a les separer. */
  .pied-liens .sep{display:none}
}
/* LE MENU SE REPLIE JUSQU'A 1279 PX — et non plus 899. Mesure le 22 septembre
   2026 : logo, six liens et deux boutons demandent pres de 1 200 px, et le
   conteneur n'en offre que 1 160 au mieux. Entre 900 et 1279 px, l'en-tete
   deja en ligne debordait de l'ecran — de 145 px a 900 px de large, de 38 a
   1024 — et le bouton de rendez-vous en etait coupe. Les deux boutons et le
   drapeau restent, eux, dans l'en-tete : seuls les liens passent au menu. */
@media (max-width:1279px){
  .nav{
    position:fixed;left:0;right:0;top:var(--entete-h);
    flex-direction:column;align-items:stretch;gap:0;
    padding:var(--e1) var(--gutter) var(--e6);
    background:var(--vert-nuit);border-bottom:1px solid var(--trait-or);
    max-height:calc(100vh - var(--entete-h));overflow-y:auto;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
    transition:opacity var(--duree-2) var(--ease),transform var(--duree-2) var(--ease),
               visibility var(--duree-2) linear;
  }
  .nav[data-ouvert="true"]{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav a{
    padding:var(--e4) 0;font-size:var(--t-caption);letter-spacing:.16em;
    border-bottom:1px solid var(--trait-sombre);
  }
  .nav a::after{display:none}
  .nav .nav-btn{
    align-self:stretch;justify-content:center;text-align:center;
    margin-top:var(--e5);padding:var(--e4) var(--e6);
    background:var(--or);color:var(--encre-inverse);border:1px solid var(--or);
    font-size:var(--t-overline);letter-spacing:.16em;
    border-radius:999px;
  }
  /* Comme dans l'en-tete large : l'espace client en contour, le rendez-vous
     seul en plein. Deux boutons pleins identiques ne disaient plus lequel
     est l'action principale. */
  .nav .nav-btn:not([data-rdv]){background:transparent;border-color:var(--trait-or);color:var(--or-clair)}
  .nav .nav-btn:not([data-rdv]):hover{background:var(--or);border-color:var(--or);color:var(--encre-inverse)}
  /* Les deux boutons du menu se suivent : le second n'a pas a reprendre
     l'ecart qui separe le premier des liens de navigation. */
  .nav .nav-btn + .nav-btn{margin-top:var(--e3)}
  .burger{display:flex}
  /* Le logo pousse le reste a droite ; boutons et drapeau se rangent avant
     le bouton de menu. */
  .logo{margin-right:auto}
  .entete-cta{order:1}
  .burger{order:2}
}
@media (max-width:899px){
  /* Les deux BOUTONS disparaissent — la barre du bas les reprend —, mais pas
     le bloc : il porte le drapeau de langue, qui doit rester visible. */
  .entete-cta .btn{display:none}
}
@media (max-width:899px){
  .barre-cta{display:flex}
}
@media (min-width:560px){
  .chiffres{grid-template-columns:repeat(4,1fr)}
  .statuts{grid-template-columns:repeat(2,1fr)}
  .coordonnees{grid-template-columns:repeat(2,1fr)}
  .expertises{grid-template-columns:repeat(2,1fr);column-gap:var(--colonne-gap)}
}
@media (min-width:900px){
  .nav .nav-btn{display:none}
  .colonnes{grid-template-columns:repeat(3,1fr);gap:var(--colonne-gap)}
  .etapes{grid-template-columns:repeat(4,1fr);gap:var(--e6)}
  /* Filet de liaison : du centre du premier cercle au centre du dernier */
  .etapes::before{
    content:"";position:absolute;z-index:1;
    top:26px;left:26px;right:26px;height:1px;
    background:var(--trait-or);
  }
  .coordonnees{grid-template-columns:repeat(4,1fr)}
  .statuts{grid-template-columns:repeat(4,1fr)}
  .frais{grid-template-columns:minmax(0,1.85fr) minmax(230px,1fr)}
}
@media (min-width:1024px){
  .bloc{grid-template-columns:var(--libelle) minmax(0,1fr);gap:var(--colonne-gap)}
  /* Aligne la ligne de base du libellé sur celle de la première ligne du H2,
     puis le retient pendant la lecture de la colonne de contenu. */
  .bloc-libelle{
    padding-top:7px;align-self:start;
    position:sticky;top:calc(var(--entete-h) + 40px);
  }
  .pied-haut.bloc{grid-template-columns:210px minmax(0,1fr)}
}

/* Le SVG est fortement réduit sur petit écran : libellés agrandis,
   graduations intermédiaires retirées. */
@media (max-width:760px){
  .graphe text{font-size:15px}
  .graphe .gr-alt{display:none}
  .graphe .gr-y{transform:translateX(4px)}
}

/* ==========================================================================
   Mouvement — CSS + JS maison, aucune bibliothèque.
   Tout état masqué vit sous html.js-anim, que le script n'ajoute que si le
   visiteur accepte les animations : sans JavaScript ou sous
   prefers-reduced-motion, la page s'affiche complète et immobile, compteurs
   à leur valeur finale, tracés dessinés d'emblée.
   Propriétés animées : transform / opacity (clip-path et dashoffset sur les
   tracés SVG uniquement, hors défilement).
   ========================================================================== */
:root{
  --ease-rev:cubic-bezier(.22,1,.36,1);   /* révélations */
  --duree-rev:.75s;
  --duree-hover:.26s;
}

/* --------------------------------------------------------------------------
   Socle de révélation au défilement
   -------------------------------------------------------------------------- */
.js-anim .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--duree-rev) var(--ease-rev) var(--delay,0ms),
             transform var(--duree-rev) var(--ease-rev) var(--delay,0ms),
             filter var(--duree-rev) var(--ease-rev) var(--delay,0ms),
             translate var(--duree-hover) var(--ease-rev),
             border-color var(--duree-hover) var(--ease),
             box-shadow var(--duree-hover) var(--ease);
}
.js-anim .reveal--fade{transform:none}
.js-anim .reveal--scale{transform:scale(.96)}
.js-anim .reveal--blur{transform:none;filter:blur(6px)}
.js-anim .reveal--gauche{transform:translateX(-28px)}
.js-anim .reveal--droite{transform:translateX(28px)}
.js-anim .reveal--in{opacity:1;transform:none;filter:none}

/* Le filet sous les H2 se dessine de gauche à droite à l'apparition */
.js-anim .filet::after{
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .7s var(--ease-rev) .35s;
}
.js-anim .filet.reveal--in::after{transform:scaleX(1)}

/* --------------------------------------------------------------------------
   En-tête vivant : translucide + flou au défilement, compact
   -------------------------------------------------------------------------- */
.entete.est-defile,
.entete[data-menu="true"]{
  background:rgba(14,42,29,.86);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
}
@media (min-width:900px){
  .entete.est-defile .entete-in{min-height:64px}
}

/* Barre d'avancement de lecture — pilotée par --avancement (JS) */
.progression{height:2px;transform:scaleX(var(--avancement,0))}

/* --------------------------------------------------------------------------
   Séquence d'entrée du hero (au chargement, une seule fois)
   -------------------------------------------------------------------------- */
.js-anim .hero .etiquette,
.js-anim .hero .lead,
.js-anim .hero .hero-actions,
.js-anim .hero .garanties{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease-rev),transform .8s var(--ease-rev);
}
.js-anim.hero-pret .hero .etiquette{opacity:1;transform:none;transition-delay:.15s}
.js-anim.hero-pret .hero .lead{opacity:1;transform:none;transition-delay:.8s}
.js-anim.hero-pret .hero .hero-actions{opacity:1;transform:none;transition-delay:.98s}
.js-anim.hero-pret .hero .garanties{opacity:1;transform:none;transition-delay:1.15s}

/* Titre mot à mot : chaque mot monte depuis un masque (spans posés par JS) */
.mot{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.mot-in{display:inline-block;transform:translateY(115%);transition:transform .8s var(--ease-rev) var(--delay,0ms)}
.hero-pret .mot-in{transform:none}

/* Coches du hero, dessinées une à une après les garanties */
.js-anim .hero .coche{
  clip-path:inset(-2px 105% -2px -2px);
  transition:clip-path .5s var(--ease-rev) var(--delay,1.3s);
}
.js-anim.hero-pret .hero .coche{clip-path:inset(-2px -2px -2px -2px)}

/* --------------------------------------------------------------------------
   Rameau d'olivier : tige tracée, folioles une à une
   (le groupe est inline dans chaque section — une animation posée sur
   l'original de <defs> ne piloterait pas les instances <use>)
   -------------------------------------------------------------------------- */
.js-anim .rameau .tige{stroke-dasharray:1;stroke-dashoffset:1}
.js-anim .rameau .fol{opacity:0}
.js-anim .rameau.trace .tige{
  transition:stroke-dashoffset 1.6s var(--ease-rev) .2s;
  stroke-dashoffset:0;
}
.js-anim .rameau.trace .tige--2{transition-duration:.8s;transition-delay:1.1s}
.js-anim .rameau.trace .fol{opacity:1;transition:opacity .5s var(--ease-rev) var(--df,1s)}

/* Lueur derrière le H1, qui respire */
.lueur{
  position:absolute;z-index:0;pointer-events:none;
  top:4%;left:0;
  width:min(620px,72vw);aspect-ratio:1.15;
  background:radial-gradient(closest-side,rgba(192,149,74,.15),transparent 68%);
  opacity:.6;
}
@keyframes al-respire{from{transform:scale(1);opacity:.5}to{transform:scale(1.08);opacity:.8}}
.js-anim .lueur{animation:al-respire 8s ease-in-out infinite alternate}

/* Indicateur de défilement en bas du hero */
.indic{
  position:absolute;left:50%;bottom:18px;z-index:2;
  width:1px;height:46px;
  background:linear-gradient(var(--or) 40%,transparent);
  transform-origin:top;opacity:.6;
}
@keyframes al-indic{0%,100%{transform:scaleY(.45);opacity:.3}50%{transform:scaleY(1);opacity:.75}}
.js-anim .indic{animation:al-indic 2.8s ease-in-out .8s infinite}

/* Particules de folioles (créées par JS, animées dans la boucle unique) */
.particules{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.particule{position:absolute;top:0;left:0;color:var(--or);will-change:transform}

/* Grain très léger sur les sections sombres — statique */
section.sombre::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Monogramme filigrane : rotation très lente (propriété individuelle
   `rotate`, pour composer avec la parallaxe portée par `translate`) */
@keyframes al-rotation{to{rotate:360deg}}
.js-anim .filigrane{animation:al-rotation 180s linear infinite}

/* --------------------------------------------------------------------------
   Boutons et liens
   -------------------------------------------------------------------------- */
.btn{position:relative;overflow:hidden}
.btn:hover{transform:scale(1.02);box-shadow:0 10px 30px -12px rgba(192,149,74,.55)}
.btn:active{transform:scale(.99)}
.btn::after{
  content:"";position:absolute;top:-2px;bottom:-2px;left:0;width:55%;
  background:linear-gradient(105deg,transparent 8%,rgba(255,255,255,.26) 50%,transparent 92%);
  transform:translateX(-170%) skewX(-8deg);pointer-events:none;
}
.btn:hover::after{transition:transform .9s ease;transform:translateX(300%) skewX(-8deg)}
/* Reflet périodique sur les deux CTA principaux (hero et contact) */
@keyframes al-reflet{
  0%{transform:translateX(-170%) skewX(-8deg)}
  9%{transform:translateX(300%) skewX(-8deg)}
  100%{transform:translateX(300%) skewX(-8deg)}
}
.js-anim .cta-vedette::after{animation:al-reflet 7.5s ease-in-out 2.4s infinite}
.js-anim .cta-vedette:hover::after{animation:none}

.lien{
  background-image:linear-gradient(var(--or-clair),var(--or-clair));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:color var(--duree-1) var(--ease),
             border-color var(--duree-1) var(--ease),
             background-size .38s var(--ease-rev);
}
.lien:hover{background-size:100% 1px}
.pied-legal a,.controle a{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .35s var(--ease-rev),border-color var(--duree-1) var(--ease);
}
.pied-legal a:hover,.controle a:hover{background-size:100% 1px}

/* --------------------------------------------------------------------------
   Cartes : élévation douce + équerres dorées dans deux coins opposés
   (translate en propriété individuelle : ne dispute jamais le transform
   des révélations ni celui du tilt)
   -------------------------------------------------------------------------- */
.colonne,.expertise,.repere,.coordonnees>div{
  position:relative;
  transition:translate var(--duree-hover) var(--ease-rev),
             border-color var(--duree-hover) var(--ease);
}
.expertise:hover,.repere:hover,.coordonnees>div:hover,.colonne:not(.tilt):hover{translate:0 -6px}
.expertise:hover,.coordonnees>div:hover,.colonne:hover{border-top-color:var(--or)}
.repere:hover{box-shadow:0 16px 36px -18px rgba(192,149,74,.4)}

.colonne::before,.expertise::before,.repere::before,.coordonnees>div::before,
.colonne::after,.expertise::after,.repere::after,.coordonnees>div::after{
  content:"";position:absolute;width:14px;height:14px;
  opacity:0;transition:opacity var(--duree-hover) var(--ease),translate var(--duree-hover) var(--ease-rev);
  pointer-events:none;
}
.colonne::before,.expertise::before,.repere::before,.coordonnees>div::before{
  top:-1px;left:0;border-top:1px solid var(--or);border-left:1px solid var(--or);
  translate:-4px -4px;
}
.colonne::after,.expertise::after,.repere::after,.coordonnees>div::after{
  bottom:0;right:0;border-bottom:1px solid var(--or);border-right:1px solid var(--or);
  translate:4px 4px;
}
.colonne:hover::before,.expertise:hover::before,.repere:hover::before,.coordonnees>div:hover::before,
.colonne:hover::after,.expertise:hover::after,.repere:hover::after,.coordonnees>div:hover::after{
  opacity:1;translate:0 0;
}

/* Numéros des convictions : contour doré, remplis au survol */
@supports (-webkit-text-stroke:1px red){
  .js-anim .colonne-num{
    color:transparent;-webkit-text-stroke:1px var(--or);
    transition:color var(--duree-hover) var(--ease);
  }
  .js-anim .colonne:hover .colonne-num{color:var(--or)}
}
/* Petit filet sous le numéro, tracé à l'apparition */
.colonne-num::after{
  content:"";display:block;width:26px;height:1px;margin-top:8px;
  background:var(--or);
}
.js-anim .colonne-num::after{
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--ease-rev) calc(var(--delay,0ms) + 250ms);
}
.js-anim .reveal--in .colonne-num::after{transform:scaleX(1)}

/* Tilt 3D discret sur les convictions (JS, pointeur fin uniquement) */
.js-anim .reveal--in.tilt{
  transform:perspective(720px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease-rev),
             opacity var(--duree-rev) var(--ease-rev) var(--delay,0ms),
             translate var(--duree-hover) var(--ease-rev);
}
.js-anim .reveal--in.tilt.tilt--vif{transition:transform .06s linear}
.tilt:hover{translate:0 -4px}

/* --------------------------------------------------------------------------
   Icônes line-art : tracées à l'apparition, redessinées au survol
   -------------------------------------------------------------------------- */
.icone-box{position:relative;display:inline-block;margin-bottom:var(--e3)}
.icone{display:block;width:48px;height:48px;color:var(--or-fonce)}
.sombre .icone{color:var(--or-clair)}
.icone [pathLength]{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.icone .plein{fill:currentColor;stroke:none}
.js-anim .icone [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.js-anim .icone .plein{opacity:0}
.js-anim .reveal--in .icone [pathLength]{
  transition:stroke-dashoffset .9s var(--ease-rev) calc(var(--delay,0ms) + var(--i,0)*140ms + 200ms);
  stroke-dashoffset:0;
}
.js-anim .reveal--in .icone .plein{
  transition:opacity .4s var(--ease-rev) calc(var(--delay,0ms) + .9s);
  opacity:1;
}
@keyframes al-redessin{0%{stroke-dashoffset:0}45%{stroke-dashoffset:.42}100%{stroke-dashoffset:0}}
.js-anim .reveal--in:hover .icone [pathLength]{animation:al-redessin 1.1s var(--ease-rev)}
/* Halo derrière l'icône au survol (équipe) */
.icone-box::before{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(192,149,74,.28),transparent 72%);
  opacity:0;transition:opacity var(--duree-hover) var(--ease);pointer-events:none;
}
.colonne:hover .icone-box::before{opacity:1}

/* Coches et prestations */
.js-anim .reveal .coche{clip-path:inset(-2px 105% -2px -2px)}
.js-anim .reveal--in .coche{
  clip-path:inset(-2px -2px -2px -2px);
  transition:clip-path .5s var(--ease-rev) calc(var(--delay,0ms) + 250ms);
}
.prestations li::before{transition:translate var(--duree-hover) var(--ease-rev)}
.js-anim .prestations li.reveal::before{transform:scaleX(0);transform-origin:0 50%}
.js-anim .prestations li.reveal--in::before{
  transform:scaleX(1);
  transition:transform .5s var(--ease-rev) calc(var(--delay,0ms) + 200ms),
             translate var(--duree-hover) var(--ease-rev);
}
.prestations li:hover::before{translate:3px 0}
.prestations strong{transition:color var(--duree-hover) var(--ease)}
.prestations li:hover strong{color:var(--or-fonce)}

/* --------------------------------------------------------------------------
   Méthode : la ligne se dessine avec le défilement, les jalons s'allument
   -------------------------------------------------------------------------- */
.rond{
  position:relative;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.etape.atteinte .rond{background:var(--or);border-color:var(--or);color:var(--encre-inverse)}
@keyframes al-halo{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(2)}}
.js-anim .etape.atteinte .rond::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid var(--or);
  animation:al-halo .9s var(--ease-rev) forwards;
}
.js-anim .etape h3,.js-anim .etape p{
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease-rev),transform .7s var(--ease-rev);
}
.js-anim .etape.atteinte h3{opacity:1;transform:none}
.js-anim .etape.atteinte p{opacity:1;transform:none;transition-delay:.12s}
/* La ligne pleine se superpose au filet discret déjà en place (::before) */
@media (min-width:900px){
  .etapes::after{
    content:"";position:absolute;z-index:1;
    top:26px;left:26px;right:26px;height:1px;
    background:var(--or);
    transform:scaleX(var(--p,0));transform-origin:0 50%;
  }
}
/* Version verticale en mobile : jalon à gauche, texte à droite */
@media (max-width:899px){
  .etape{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:var(--e4)}
  .etape .rond{grid-row:1/3;margin-bottom:0}
  .etapes::before{
    content:"";position:absolute;z-index:1;
    left:25.5px;top:26px;bottom:26px;width:1px;
    background:var(--trait-or);
  }
  .etapes::after{
    content:"";position:absolute;z-index:1;
    left:25.5px;top:26px;bottom:26px;width:1px;
    background:var(--or);
    transform:scaleY(var(--p,0));transform-origin:50% 0;
  }
}

/* --------------------------------------------------------------------------
   Graphique : axes puis courbes puis aire, point qui pulse, accolade
   -------------------------------------------------------------------------- */
.js-anim .graphe .grille,
.js-anim .graphe .axe,
.js-anim .graphe text{opacity:0;transition:opacity .7s var(--ease-rev)}
.js-anim .graphe text{transition-delay:.15s}
.js-anim .graphe .courbe--nette{stroke-dasharray:1;stroke-dashoffset:1}
.js-anim .graphe .courbe--classique{clip-path:inset(-4px 100% -4px 0)}
.js-anim .graphe .aire,.js-anim .graphe .borne{opacity:0}
.js-anim .graphe .accolade{stroke-dasharray:1;stroke-dashoffset:1}

.js-anim .graphe-anime .grille,.js-anim .graphe-anime .axe,.js-anim .graphe-anime text{opacity:1}
.js-anim .graphe-anime .courbe--nette{
  transition:stroke-dashoffset 1.6s var(--ease-rev) .35s;stroke-dashoffset:0;
}
.js-anim .graphe-anime .courbe--classique{
  transition:clip-path 1.6s var(--ease-rev) .65s;clip-path:inset(-4px 0% -4px 0);
}
.js-anim .graphe-anime .aire{transition:opacity .9s var(--ease-rev) 1.75s;opacity:1}
.js-anim .graphe-anime .borne{transition:opacity .5s var(--ease-rev) 1.9s;opacity:1}
.js-anim .graphe-anime .accolade{
  transition:stroke-dashoffset .7s var(--ease-rev) 2.1s;stroke-dashoffset:0;
}
.graphe .accolade{fill:none;stroke:var(--or-fonce);stroke-width:1.2;stroke-linecap:round}
.graphe .borne--nette{transform-box:fill-box;transform-origin:center}
@keyframes al-pouls{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.55}}
.js-anim .graphe-anime .borne--nette{animation:al-pouls 2.6s ease-in-out 2.5s infinite}

/* Survol de la légende : la courbe visée s'affirme, l'autre s'efface */
.legende span{cursor:default;transition:color var(--duree-hover) var(--ease)}
.legende span:hover{color:var(--encre)}
.graphe .courbe,.graphe .aire,.graphe .borne{transition:opacity .3s var(--ease),stroke-width .3s var(--ease)}
.survol-nette .courbe--classique,.survol-nette .borne:not(.borne--nette){opacity:.22}
.survol-nette .courbe--nette{stroke-width:3.2}
.survol-classique .courbe--nette,.survol-classique .borne--nette,.survol-classique .aire{opacity:.22}
.survol-classique .courbe--classique{stroke-width:2.8}

/* --------------------------------------------------------------------------
   Décors éditoriaux
   -------------------------------------------------------------------------- */
/* Fin filet vertical le long du bloc de texte d'ouverture */
@media (min-width:1024px){
  #maison .mesure{position:relative}
  #maison .mesure::before{
    content:"";position:absolute;left:-22px;top:6px;bottom:6px;width:1px;
    background:linear-gradient(var(--or-fonce),transparent);opacity:.45;
  }
  .js-anim #maison .mesure::before{
    transform:scaleY(0);transform-origin:top;
    transition:transform 1.4s var(--ease-rev) .4s;
  }
  .js-anim #maison .mesure.reveal--in::before{transform:scaleY(1)}
}

/* Séparateur ornemental : deux demi-filets et un losange */
.separateur{display:block;width:min(300px,62%);height:10px;margin:0 auto var(--e7);color:var(--or-fonce)}
.sombre .separateur{color:var(--or-clair);opacity:.75}
.separateur path{fill:none;stroke:currentColor;stroke-width:1}
.js-anim .separateur [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.js-anim .separateur.reveal--in [pathLength]{
  transition:stroke-dashoffset .9s var(--ease-rev) var(--i,0s);
  stroke-dashoffset:0;
}

/* Guillemets décoratifs derrière la citation */
.citation{position:relative}
.citation::before,.citation::after{
  position:absolute;z-index:-1;
  font-family:"Playfair Display",Georgia,serif;font-style:normal;
  font-size:6.5rem;line-height:1;color:var(--or-fonce);opacity:.12;
  pointer-events:none;
}
.citation::before{content:"«" / "";top:-2.4rem;left:clamp(-2.5rem,-4vw,-1rem)}
.citation::after{content:"»" / "";bottom:-3.4rem;right:clamp(-2.5rem,-4vw,-1rem)}

/* Menu replie : panneau pleine hauteur, liens en cascade. Meme seuil que le
   repli du menu, plus haut. */
@media (max-width:1279px){
  .nav{height:calc(100vh - var(--entete-h));max-height:none}
  .js-anim .nav a{opacity:0;transform:translateY(-10px)}
  .js-anim .nav[data-ouvert="true"] a{
    opacity:1;transform:none;
    transition:opacity .45s var(--ease-rev) var(--n,0ms),transform .45s var(--ease-rev) var(--n,0ms);
  }
  .js-anim .nav[data-ouvert="true"] a:nth-child(1){--n:60ms}
  .js-anim .nav[data-ouvert="true"] a:nth-child(2){--n:120ms}
  .js-anim .nav[data-ouvert="true"] a:nth-child(3){--n:180ms}
  .js-anim .nav[data-ouvert="true"] a:nth-child(4){--n:240ms}
  .js-anim .nav[data-ouvert="true"] a:nth-child(5){--n:300ms}
  .js-anim .nav[data-ouvert="true"] a:nth-child(6){--n:360ms}
  .js-anim .nav[data-ouvert="true"] a:nth-child(7){--n:420ms}
}

/* --------------------------------------------------------------------------
   Modale de réservation — Calendly
   -------------------------------------------------------------------------- */
.rdv{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;
  padding:clamp(10px,3vw,32px);
  --focus:var(--or-fonce);
}
.rdv[hidden]{display:none}
.rdv-fond{
  position:absolute;inset:0;
  background:rgba(14,42,29,.78);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;transition:opacity .25s var(--ease);
}
.rdv-carte{
  position:relative;
  width:min(720px,100%);
  max-height:min(92vh,820px);
  overflow:auto;
  background:var(--creme);color:var(--encre);
  border:1px solid var(--or);border-radius:14px;
  padding:clamp(18px,3.5vw,36px);
  opacity:0;transform:scale(.97);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.rdv[data-ouvert] .rdv-fond{opacity:1}
.rdv[data-ouvert] .rdv-carte{opacity:1;transform:none}
.rdv-carte h2{color:var(--vert-fonce);padding-right:48px}
.rdv-carte h2::after{
  content:"";display:block;width:44px;height:2px;
  margin-top:var(--e3);background:var(--or-fonce);
}
.rdv-sous{margin-top:var(--e3);color:var(--encre-attenue);font-size:var(--t-body-s)}
.rdv-fermer{
  position:absolute;top:14px;right:14px;
  width:40px;height:40px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--trait-clair-or);
  color:var(--or-fonce);font-size:.9375rem;line-height:1;cursor:pointer;
  transition:border-color var(--duree-1) var(--ease),color var(--duree-1) var(--ease);
}
.rdv-fermer:hover{border-color:var(--or-fonce);color:var(--encre)}
.rdv-zone{
  position:relative;margin-top:var(--e5);
  border:1px solid var(--trait-clair-or);
  min-height:120px;
}
.rdv-iframe{display:block;width:100%;height:min(700px,72vh);border:0}  /* 700px : la hauteur minimale que Calendly demande pour afficher le
     calendrier ET les creneaux cote a cote. En dessous, il bascule sur
     une vue empilee qui oblige a faire defiler dans le cadre. */
.rdv-chargement{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  background:var(--creme);
}
.rdv-chargement[hidden]{display:none}
.rdv-filet{
  width:130px;height:2px;overflow:hidden;position:relative;
  background:var(--trait-clair-or);
}
@keyframes al-charge{
  0%{transform:translateX(-100%)}
  55%{transform:translateX(0)}
  100%{transform:translateX(100%)}
}
.rdv-filet::after{
  content:"";position:absolute;inset:0;
  background:var(--or-fonce);
  animation:al-charge 1.2s ease-in-out infinite;
}
.rdv-config{
  padding:clamp(20px,4vw,32px);
  font-size:var(--t-body-s);color:var(--encre-attenue);
}
.rdv-config strong{display:block;margin-bottom:var(--e2);color:var(--encre)}
.rdv-secours{
  margin:var(--e4) 0 0;font-size:var(--t-caption);color:var(--encre-attenue);
}
.rdv-secours .sep{opacity:.4;margin:0 var(--e2)}
.rdv-secours a{color:var(--or-fonce);text-decoration:none;border-bottom:1px solid var(--trait-clair-or)}
.rdv-secours a:hover{border-bottom-color:var(--or-fonce)}
@media (max-width:700px){
  .rdv-iframe{height:80vh}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
  }
}
@media print{
  .entete,.rameau,.filigrane,.evitement,.barre-cta,.particules,.lueur,.indic,.separateur,.rdv{display:none}
  section.sombre::after{display:none}
  body{background:#fff;color:#000}
}

/* --------------------------------------------------------------------------
   Le passage d'une langue a l'autre : un DRAPEAU, celui de la langue
   d'arrivee, colle au bouton de rendez-vous — demande du cabinet du
   22 septembre 2026. Il ne traduit rien de lui-meme : il mene a l'autre page,
   qui est ecrite.

   Il remplace le lien texte « EN », que l'en-tete de bureau masquait faute de
   place (64 px avec ses marges) : un drapeau en prend 32. Sur mobile, les deux
   boutons de l'en-tete disparaissent au profit de la barre du bas, mais le
   drapeau reste, a cote du menu — changer de langue ne doit pas exiger
   d'ouvrir un menu.
   -------------------------------------------------------------------------- */
.drapeau{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;align-self:center;
  /* 24 px de large sur ordinateur, soit le drapeau lui-meme : l'en-tete n'a
     pas un pixel de plus. Mesure a 1280 px avec 32 px, il debordait de 4.
     24 x 32 reste au-dessus de la cible minimale de 24 x 24 (WCAG 2.5.8). */
  width:24px;height:32px;text-decoration:none;
}
.drapeau svg{
  display:block;width:24px;height:16px;border-radius:2px;
  /* Le liseré rend visible la bande blanche du drapeau francais, et donne aux
     deux drapeaux le meme contour que les boutons voisins. */
  box-shadow:0 0 0 1px var(--trait-or);
  transition:transform var(--duree-1) var(--ease),box-shadow var(--duree-1) var(--ease);
}
.drapeau:hover svg{transform:scale(1.1);box-shadow:0 0 0 1px var(--or)}
@media (max-width:1279px){
  /* Cible tactile de 44 px sur mobile et tablette : un doigt n'est pas un
     curseur. */
  .drapeau{width:44px;height:44px}
  .drapeau svg{width:27px;height:18px}
}
@media (max-width:479px){
  /* Sur telephone, logo (217 px), drapeau et bouton de menu ne tenaient pas :
     353 px pour 331 disponibles a 375 px de large, et le bouton de menu
     debordait dans la marge. L'en-tete resserre ses ecarts, et le drapeau
     garde 44 px de HAUT pour le doigt mais n'occupe que 30 px de large —
     au-dessus de la cible minimale de 24 x 24 (WCAG 2.5.8). */
  .entete-in{gap:var(--e3)}
  .logo{gap:var(--e2)}
  .drapeau{width:30px}
}
@media (max-width:374px){
  /* A 360 px — la largeur la plus courante sous Android —, il manquait encore
     10 px. L'espacement des lettres du logo, tres large (.26 em), en rend
     assez sans toucher a son dessin. */
  .logo-nom{letter-spacing:.18em}
  .logo-sous{letter-spacing:.16em}
}
@media (max-width:359px){
  /* A 320 px (iPhone SE de premiere generation), le logo seul ne tenait deja
     pas avec le bouton de menu, avant meme le drapeau. Le monogramme s'efface ;
     le nom du cabinet, lui, reste ecrit en entier. */
  .logo-mark{display:none}
}

/* --------------------------------------------------------------------------
   Pages légales — /mentions-legales et /politique-de-confidentialite.
   Du texte à lire : une seule colonne, fond crème, aucune animation, aucun
   script. L'en-tête et le pied reprennent ceux de l'accueil, en plus sobre.
   -------------------------------------------------------------------------- */
.legal-entete{background:var(--vert-fonce);border-bottom:1px solid var(--trait-or)}
.legal-entete .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--e5);padding-top:var(--e5);padding-bottom:var(--e5);
}
.legal-retour{
  font-size:var(--t-overline);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--or-clair);text-decoration:none;
  padding:var(--e2) 0;
}
.legal-retour:hover{text-decoration:underline;text-underline-offset:3px}
.legal{background:var(--creme);color:var(--encre);padding:var(--section-y) 0}
.legal .kicker{color:var(--or-fonce)}
.legal h1{font-size:clamp(2rem,4.4vw,3rem);max-width:none;margin:var(--e3) 0 var(--e6)}
.legal h2{
  font-size:clamp(1.25rem,2vw,1.5rem);max-width:none;
  margin:var(--e7) 0 var(--e4);padding-top:var(--e5);
  border-top:1px solid var(--trait-clair);
}
.legal-corps{max-width:72ch}
.legal-corps a{color:var(--or-fonce);text-underline-offset:3px}
.legal-corps ul{margin:0 0 1.05em;padding-left:1.2em}
.legal-corps li{margin-bottom:.35em}
.legal-maj{margin-top:var(--e7);font-size:var(--t-caption);color:var(--encre-attenue)}