/* ══════════════════════════════════════════════════════════════════
   JAJ — refonte à identité conservée
   Le monde du logo, appliqué : terre cuite et sauge, taupe et crème.
   Règle de fond : le taupe moyen ne porte jamais de texte.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --creme:       #FFFAEF;
  --creme-2:     #F8F1E3;
  --taupe-clair: #A09685;   /* = fond exact du logo extrait — encre 5,68:1 */
  --taupe:       #8A887B;   /* = fond exact du portrait — décor seul */
  --taupe-fonce: #565148;   /* champs à crème    — 7,40:1 */
  --encre:       #221F1A;
  --encre-douce: #5A5449;
  --terre:       #9A5F45;   /* accent principal, lu dans les lettres du logo */
  --terre-fonce: #82492F;
  --rose:        #C08B74;   /* les barres du logo */
  --sauge:       #6F7A4C;   /* l'eucalyptus du logo */
  --rose-creme:  #F0E4D4;

  --filet:       rgba(34,31,26,.14);
  --filet-clair: rgba(255,250,239,.24);

  --ombre-1: 0 1px 2px rgba(34,31,26,.05), 0 6px 16px rgba(34,31,26,.07);
  --ombre-2: 0 3px 8px rgba(34,31,26,.07), 0 16px 40px rgba(34,31,26,.12);

  /* Échelle du petit texte : cinq pas, pas douze. Tout ce qui est sous
     le corps de lecture se range dans l'un de ces cinq crans. */
  --t-micro: .75rem;   /* étiquettes capitales espacées : dt, labels */
  --t-label: .82rem;   /* ordinaux, mention RGPD, ligne légale */
  --t-note:  .9rem;    /* notes, erreurs, avertissements, bouton compact */
  --t-lire:  .97rem;   /* texte secondaire : cartes, listes, étapes */
  --t-base:  1rem;     /* boutons, champs, coordonnées, navigation */

  /* L'arche a été retirée : elle enfermait le portrait dans une niche.
     C'est la vague qui découpe désormais, partout. */
  --arete: 2px;                  /* l'arête du système, partout ailleurs */
  --h-vague: clamp(38px, 4.4vw, 82px);   /* la hauteur des bords ondulés */

  --marge: clamp(1.25rem, 5vw, 4rem);
  --large: 1180px;
  --ease:  cubic-bezier(.2,.8,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--creme);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
  scrollbar-color:var(--taupe) var(--creme-2);
  scrollbar-width:thin;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.68;
  color:var(--encre);
  background:var(--creme);
  overflow-x:hidden;
}

::selection{ background:var(--terre); color:var(--creme); }
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid var(--terre);
  outline-offset:3px; border-radius:var(--arete);
}
.bloc--fonce :focus-visible, .bloc--taupe :focus-visible{ outline-color:var(--creme); }
input,textarea{ caret-color:var(--terre); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--creme-2); }
::-webkit-scrollbar-thumb{ background:var(--taupe); border-radius:var(--arete); border:3px solid var(--creme-2); }

a{ color:inherit; text-underline-offset:.2em; text-decoration-thickness:1px; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{
  width:1.5rem; height:1.5rem; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}

.skip{
  position:fixed; top:-100px; left:1rem; z-index:300;
  background:var(--encre); color:var(--creme);
  padding:.7rem 1.1rem; font-weight:600; text-decoration:none;
  transition:top .18s var(--ease);
}
.skip:focus{ top:1rem; }

.enveloppe{ width:100%; max-width:var(--large); margin-inline:auto; }

/* ══ TYPOGRAPHIE ═══════════════════════════════════════════════════ */

h1,h2,h3{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:400; margin:0; text-wrap:balance;
  letter-spacing:-.005em;
}
h1{ font-size:clamp(2rem,3.9vw,3.25rem); line-height:1.14; }
h2{ font-size:clamp(1.55rem,2.8vw,2.35rem); line-height:1.2; }
h3{ font-size:clamp(1.12rem,1.45vw,1.32rem); line-height:1.25; font-weight:500; }
p{ margin:0 0 1rem; max-width:68ch; }

/* La seule voix de marque : rare, jamais porteuse d'information seule. */
.manuscrit{
  font-family:'Pinyon Script', cursive;
  font-size:clamp(1.45rem,2.6vw,2.15rem);
  line-height:1.5; color:var(--terre);
  margin:1.4rem 0 0; max-width:34ch;
  /* Coupée par le navigateur, pas par un <br> : la césure forcée arrivait
     après un retour naturel et laissait « mieux ; » seul sur sa ligne. */
  text-wrap:balance;
}
.manuscrit--sm{ font-size:clamp(1.3rem,2vw,1.7rem); margin:.2rem 0 1.4rem; }

.intro{ font-size:clamp(1.05rem,1.2vw,1.18rem); max-width:56ch; }
.intro--centre{ margin-inline:auto; text-align:center; max-width:46ch; text-wrap:balance; }

.a-completer{
  display:inline-block; text-wrap:pretty;
  border:1.5px dashed var(--terre);
  background:rgba(154,95,69,.07);
  color:var(--terre-fonce);
  padding:.05em .5em; font-weight:600;
  font-family:'Hanken Grotesk', system-ui, sans-serif;
}
.bloc-a-completer{ display:block; max-width:56ch; padding:.9rem 1rem; font-weight:400; }
.bloc--taupe .a-completer{
  border-color:var(--terre-fonce); color:#2E1D12;
  background:rgba(255,250,239,.34);
}
/* Uniquement sur fond sombre. Le pied n'en fait plus partie depuis qu'il
   est passé en rose-crème : l'y laisser mettait le repère à 1,02:1, donc
   invisible — exactement le contraire de ce qu'un « à compléter » doit
   faire. Sur le rose-crème, la règle de base s'applique. */
.bloc--fonce .a-completer{
  border-color:var(--rose-creme); color:var(--rose-creme);
  background:rgba(255,250,239,.10);
}

/* ══ EN-TÊTE ═══════════════════════════════════════════════════════ */

.entete{
  position:sticky; top:0; z-index:100;
  background:var(--creme);
  box-shadow:0 1px 0 var(--filet);
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.entete.est-collee{ background:rgba(255,250,239,.96); box-shadow:var(--ombre-1); }
.entete__in{
  max-width:var(--large); margin-inline:auto;
  padding:.9rem var(--marge);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

/* ══ LA MARQUE ═════════════════════════════════════════════════════
   Le logo d'origine de la propriétaire, en WebP transparent. Il n'y a
   plus qu'une seule marque sur le site : le monogramme redessiné qui
   la remplaçait a été retiré le 31/08/2026, quand elle a fourni son
   fichier en 1024 px.

   LOI : le logo ne va que sur fond clair. Ses lettres cuivre #7B543C
   donnent 6,35:1 sur la crème, 5,28:1 sur le rose-crème et 1,19:1 sur
   le taupe foncé. C'est la raison pour laquelle le champ de l'accueil
   ET le pied de page sont en rose-crème : le fond suit la marque.
   Ce qui reste du geste — le paraphe, les barres — n'est plus une
   marque concurrente mais un relevé du logo : voir .filet et .vague. */

.marque-logo{ display:inline-block; line-height:0; }
.marque-logo img{
  display:block; width:auto; height:clamp(46px,4.6vw,60px);
}

.nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:clamp(.9rem,1.8vw,1.9rem);
}
.nav a:not(.bouton){
  font-family:'Hanken Grotesk', system-ui, sans-serif; font-size:var(--t-lire); font-weight:400;
  text-decoration:none; color:var(--encre);
  padding:.4rem 0; position:relative;
}
.nav a:not(.bouton)::after{
  content:''; position:absolute; left:0; right:0; bottom:.1rem; height:1.5px;
  background:var(--terre); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:not(.bouton):hover::after,
.nav a:not(.bouton):focus-visible::after,
.nav a.est-active::after{ transform:scaleX(1); }

.nav__bascule{ display:none; font:inherit; font-size:var(--t-base); }

@media (max-width:960px){
  .nav__bascule{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:46px; height:40px; padding:0 8px;
    background:transparent; border:1.5px solid rgba(34,31,26,.35);
    border-radius:var(--arete); cursor:pointer;
  }
  .nav__bascule span{ display:block; height:1.5px; background:var(--encre); transition:transform .3s var(--ease), opacity .2s; }
  .nav__bascule em{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .nav__bascule[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav__bascule[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav__bascule[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .nav ul{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--creme); box-shadow:var(--ombre-2);
    padding:.5rem var(--marge) 1.25rem;
    clip-path:inset(0 0 100% 0); pointer-events:none;
    transition:clip-path .36s var(--ease);
  }
  .nav ul.est-ouverte{ clip-path:inset(0 0 0 0); pointer-events:auto; }
  .nav li{ border-top:1px solid rgba(34,31,26,.14); }
  .nav li:first-child{ border-top:0; }
  .nav a:not(.bouton){ display:block; padding:.85rem 0; }
  .nav a:not(.bouton)::after{ bottom:.55rem; }
  .nav .bouton{ margin-top:.9rem; width:100%; justify-content:center; }
}

/* ══ BOUTONS ═══════════════════════════════════════════════════════ */

.bouton{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Hanken Grotesk', system-ui, sans-serif; font-size:var(--t-base); font-weight:500;
  letter-spacing:.02em; text-decoration:none; cursor:pointer;
  padding:.85rem 1.9rem; border:0; border-radius:var(--arete);
  background:var(--terre); color:var(--creme);
  box-shadow:var(--ombre-1);
  transition:background-color .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease);
}
.bouton:hover, .bouton:focus-visible{
  background:var(--terre-fonce); transform:translateY(-2px); box-shadow:var(--ombre-2);
}
.bouton:active{ transform:translateY(0); }
.bouton--sm{ padding:.55rem 1.15rem; font-size:var(--t-note); }

/* Bouton flottant « retour en haut » — même monde que les autres boutons,
   visible dès qu'on quitte le haut de page (même seuil que l'en-tête
   collée), jamais avant. */
.bouton-haut{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:90;
  display:flex; align-items:center; justify-content:center;
  width:3rem; height:3rem; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:var(--terre); color:var(--creme); box-shadow:var(--ombre-2);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), background-color .22s var(--ease);
}
.bouton-haut.est-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.bouton-haut:hover, .bouton-haut:focus-visible{ background:var(--terre-fonce); }
.bouton-haut svg{
  width:1.3rem; height:1.3rem; flex:none; transform:rotate(-90deg);
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
@media (max-width:560px){
  .bouton-haut{ right:.85rem; bottom:.85rem; width:2.7rem; height:2.7rem; }
}

.lien-fleche{
  font-family:'Hanken Grotesk', system-ui, sans-serif; font-weight:500;
  text-decoration:none; color:var(--encre);
  display:inline-flex; align-items:center; gap:.5rem;
  border-bottom:1.5px solid var(--terre); padding-bottom:.15rem;
}
/* La flèche est un tracé, pas un caractère : elle suit le trait des autres
   icônes de la page et ne dépend pas de la police du système. */
.lien-fleche svg{
  width:1.1em; height:1.1em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .26s var(--ease);
}
.lien-fleche:hover svg, .lien-fleche:focus-visible svg{ transform:translateX(5px); }

/* ══ ACCUEIL ═══════════════════════════════════════════════════════ */

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:stretch;
  background:var(--creme);
  /* Tient entièrement dans la première fenêtre, en-tête déduite. */
  min-height:clamp(520px, calc(100svh - 4.6rem), 660px);
}
.hero__texte{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.25rem,4.5vw,3.5rem) clamp(1.25rem,4vw,3.5rem)
          clamp(2.25rem,4.5vw,3.5rem) max(var(--marge), calc(50vw - var(--large)/2));
}
.hero h1{ max-width:17ch; }
.hero__actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 1.75rem;
  margin-top:clamp(1.5rem,2.6vw,2.1rem);
}
.hero__note{
  margin:1.35rem 0 0; font-size:var(--t-note); color:var(--encre-douce); max-width:44ch;
}

/* Le champ : un aplat de rose-crème dont les bords gauche et bas ondulent,
   du geste même du logo. Aucune arche — elle enfermait le visage dans une
   niche. Le rose-crème est le sol du logo : il n'apparaît qu'ici et au pied
   de page, à l'ouverture et à la fermeture de la page. */
.hero__champ{
  position:relative; overflow:hidden;
  /* Rose-crème et non taupe foncé : le logo de la propriétaire a des lettres
     cuivre qui donnent 5,28:1 ici et 1,19:1 sur le taupe foncé. Le champ suit
     la marque, ce n'est pas à la marque de suivre le champ. */
  background:var(--rose-creme);
  display:grid; place-items:center;
  padding:clamp(2rem,5vw,3.5rem);
}
.hero__logo{
  position:relative; z-index:2;
  width:min(100%, clamp(230px,30vw,420px)); height:auto;
}
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; min-height:0; }
  .hero__texte{ padding-inline:var(--marge); padding-block:clamp(1.75rem,5.5vw,2.5rem); }
  /* Une bande, pas un carré : en 4/3 le monogramme tombait sous la ligne de
     flottaison d'un téléphone, et le contrat le promet dans la première
     fenêtre. La bande le fait entrer sans le rapetisser. */
  .hero__champ{ aspect-ratio:auto; min-height:clamp(158px,45vw,220px); padding:1.4rem 1.75rem; }
  .hero h1{ max-width:none; }
}

/* ══ BLOCS ═════════════════════════════════════════════════════════ */

.bloc{ padding:clamp(3.5rem,8vw,6.5rem) var(--marge); }
.bloc--creme{ background:var(--creme); }
.bloc--taupe{ background:var(--taupe-clair); color:var(--encre); }
.bloc--fonce{ background:var(--taupe-fonce); color:var(--creme); }
.bloc--fonce p{ color:rgba(255,250,239,.90); }

.titre-orne{ text-align:center; margin-bottom:clamp(2rem,4vw,3rem); }
.titre-orne--gauche{ text-align:left; margin-bottom:1.5rem; }
.titre-orne h2{ margin-inline:auto; max-width:22ch; }
.titre-orne--gauche h2{ margin-inline:0; max-width:19ch; }
.titre-orne--gauche .titre-orne .intro{ margin-top:1.25rem; }
/* ══ LE DUO ════════════════════════════════════════════════════════
   Deux sections sur quatre rompent l'axe central : le titre tient une
   colonne étroite à gauche, le contenu occupe la colonne large.        */

.duo{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
@media (max-width:900px){ .duo{ grid-template-columns:1fr; } }
.duo__tete .intro{ margin-bottom:0; }


/* ══ LES VAGUES ════════════════════════════════════════════════════
   Le geste du paraphe, étiré sur toute la largeur. Chaque changement
   de fond se fait par une courbe, jamais par une arête droite. La
   vague est remplie de la couleur de la section qu'on quitte : elle
   déborde dans la suivante, comme une marée qui se retire.          */

.vague{
  position:absolute; left:0; top:0; width:100%;
  height:var(--h-vague); display:block; pointer-events:none; z-index:0;
}
.vague--creme{ fill:var(--creme); }
.vague--taupe{ fill:var(--taupe-clair); }
.vague--fonce{ fill:var(--taupe-fonce); }

/* La section qui reçoit une vague lui cède la place en haut. */
.a-vague{ position:relative; }
.bloc.a-vague{ padding-top:calc(clamp(3.5rem,8vw,6.5rem) + var(--h-vague) * .75); }
.constat.a-vague{ padding-top:calc(clamp(2.5rem,5vw,4rem) + var(--h-vague) * .8); }
.pied.a-vague{ padding-top:calc(clamp(2.5rem,5vw,4rem) + var(--h-vague) * .8); }

/* ══ L'ACCUEIL : BORD ONDULÉ ═══════════════════════════════════════ */

.hero__bord{
  position:absolute; left:-1px; top:0; height:100%;
  width:clamp(26px,3.6vw,64px); fill:var(--creme); z-index:1;
  pointer-events:none;
}
@media (max-width:900px){ .hero__bord{ display:none; } }

/* Le champ ne s'arrête pas non plus sur une droite en bas : il se retire
   dans la crème de la section suivante. */
.hero__pied{
  position:absolute; left:0; bottom:-1px; width:100%;
  height:clamp(22px,2.8vw,50px); fill:var(--creme); z-index:1;
  pointer-events:none;
}

/* ── LA SCÈNE ──────────────────────────────────────────────────────
   Avant / après, de part et d'autre de la vague. Ce n'est pas un
   ornement : c'est l'argument de la section, mis en image. */
.scene{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:clamp(.75rem,2.5vw,2rem);
  width:100%; margin:clamp(2.5rem,5vw,4rem) auto 0;
}
.scene > svg{ display:block; width:100%; height:auto; }
.scene > .scene__lien{ width:clamp(30px,4vw,58px); height:clamp(160px,18vw,270px); flex:none; }
.scene > .scene__lien-h{ display:none; }

/* Chaque moitié sous son étiquette : le visiteur doit savoir du premier
   coup d'œil laquelle des deux est la sienne. */
.scene__cote{ display:grid; gap:.9rem; justify-items:center; width:100%; min-width:0; }
.scene__cote > svg{ display:block; width:100%; height:auto; }
.scene__etiquette{
  margin:0; font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--encre-douce);
}

@media (max-width:760px){
  .scene{ grid-template-columns:1fr; gap:clamp(1.25rem,5vw,2rem); justify-items:center; }
  /* La vague bascule à l'horizontale au lieu de disparaître : sans elle,
     l'« autre côté » n'existe plus sur l'appareil de la plupart des visiteurs. */
  .scene > .scene__lien{ display:none; }
  .scene > .scene__lien-h{
    display:block; width:min(100%,320px); height:clamp(40px,13vw,60px);
  }
  .scene__cote{ max-width:420px; }
}
.scene rect, .scene path, .scene circle{ vector-effect:non-scaling-stroke; }

.scene .feuille rect, .scene__dossier path{
  fill:var(--creme); stroke:rgba(34,31,26,.34); stroke-width:1.3;
}
.scene .feuille path{
  fill:none; stroke:rgba(34,31,26,.24); stroke-width:2.4; stroke-linecap:round;
}
.scene__echeance{
  fill:none; stroke:var(--terre); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.scene__vague{
  fill:none; stroke:var(--rose); stroke-width:3; stroke-linecap:round;
}
.scene .feuille--haut rect{ stroke:rgba(34,31,26,.55); }
.scene__barres rect{ fill:var(--terre); stroke:none; }
.scene__dossier path{ stroke-linejoin:round; }
.scene__cachet{
  fill:none; stroke:var(--sauge); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ── LE FILET ──────────────────────────────────────────────────────
   Le motif du monogramme, en petit, entre le titre et son contenu.
   Un seul vocabulaire graphique sur tout le site. */
.filet{
  display:block; width:clamp(140px,16vw,180px); height:auto;
  margin:1.15rem auto 0;
}
.titre-orne--gauche .filet{ margin-inline:0; }
.filet__regle{ fill:none; stroke:currentColor; stroke-width:1; opacity:.4; }
.filet__barres{ fill:var(--terre); }
/* Sur taupe, la terre cuite s'éteint : les barres prennent l'encre ou la crème. */
.bloc--taupe .filet__barres{ fill:var(--encre); }
.bloc--fonce .filet__barres{ fill:var(--rose-creme); }


/* ══ LES CHARGES ═══════════════════════════════════════════════════ */

.charges{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
}
.charges li{
  display:flex; align-items:center; gap:1.15rem;
  padding:1.55rem .25rem;
  border-bottom:1px solid var(--filet);
  font-size:clamp(1rem,1.15vw,1.1rem);
}
.charges li:first-child{ border-top:1px solid var(--filet); }
.charges .ico{ color:var(--terre); width:1.75rem; height:1.75rem; }

/* ══ LE CONSTAT ════════════════════════════════════════════════════ */

.constat{
  background:var(--taupe-fonce); color:var(--creme);
  padding:clamp(2.5rem,5vw,4rem) var(--marge);
}
.constat p{
  margin:0; max-width:62ch; font-size:clamp(1.1rem,1.7vw,1.45rem);
  line-height:1.5; font-family:'Playfair Display', Georgia, serif; font-weight:400;
}
.constat strong{ font-weight:500; color:var(--creme); }

/* ══ LES OFFRES ════════════════════════════════════════════════════ */

.offres{
  display:grid; gap:clamp(1.25rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
  margin-top:clamp(2rem,4vw,3rem);
}
.offre{
  background:var(--creme); padding:clamp(1.5rem,2.4vw,2.1rem);
  border-radius:var(--arete); box-shadow:var(--ombre-1);
  border-top:2px solid var(--rose);
}
.offre__n{
  font-family:'Hanken Grotesk', system-ui, sans-serif; font-size:var(--t-label); letter-spacing:.16em;
  color:var(--terre); margin:0 0 .7rem; font-weight:500;
}
.offre h3{ margin-bottom:.6rem; }
.offre p{ margin:0; font-size:var(--t-lire); color:var(--encre-douce); }

/* ══ POURQUOI MOI ══════════════════════════════════════════════════ */

.raisons{
  display:grid; gap:clamp(1.75rem,3vw,3rem) clamp(2rem,5vw,4.5rem);
  grid-template-columns:1fr;
}
@media (min-width:720px){ .raisons{ grid-template-columns:1fr 1fr; } }
.raison{ position:relative; padding-top:1.5rem; border-top:2px solid var(--sauge); }
.raison h3{ margin-bottom:.55rem; }
.raison p{ margin:0; color:var(--encre-douce); font-size:var(--t-lire); max-width:46ch; }

/* ══ LES ÉTAPES ════════════════════════════════════════════════════ */

.etapes{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
.etape{ position:relative; padding-top:1.6rem; border-top:1px solid var(--filet-clair); }
.etape .ico{ color:var(--rose); width:2rem; height:2rem; margin-bottom:.9rem; }
.etape h3{ margin-bottom:.55rem; color:var(--creme); }
.etape h3 span{ color:var(--rose-creme); font-weight:400; }
.etape p{ margin:0; font-size:var(--t-lire); }

/* ══ À PROPOS ══════════════════════════════════════════════════════ */

.apropos__grille{
  display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
@media (max-width:820px){ .apropos__grille{ grid-template-columns:1fr; } }
.apropos h2{ margin-bottom:.3rem; }

/* Le visage revient ici, en petit : la taille d'une photo d'identité
   professionnelle, pas d'un gros plan. Découpé dans une forme organique
   et non dans une arche : une arche l'enfermait dans une niche. */
.apropos__portrait{
  margin:0 0 1.75rem; width:min(100%, 250px); overflow:hidden;
  background:var(--taupe);
  /* RÈGLE : sur chaque côté, les deux rayons doivent totaliser EXACTEMENT 100 %.
     En dessous, il reste un segment droit ; au-dessus, le navigateur réduit les
     HUIT rayons d'un même facteur et fait réapparaître du droit sur les côtés
     qui étaient justes. La version précédente déclarait 112 % à droite, ce qui
     ramenait le bord gauche à 78 % : trois côtés plats.
       haut   62+38   droit  52+48   bas  45+55   gauche  35+65
     Les écarts à 50 % restent francs, sinon l'œil lit une ellipse — c'est-à-dire
     une niche en plus rond. */
  border-radius:62% 38% 55% 45% / 35% 52% 48% 65%;
}
.apropos__portrait img{ width:100%; height:auto; display:block; }
.apropos__cadre-titre{
  padding-top:1.25rem; border-top:2px solid var(--sauge); margin-bottom:1.1rem;
}
.engagements{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.engagements li{
  position:relative; padding-left:1.6rem; color:var(--encre-douce);
  font-size:var(--t-lire); line-height:1.55; max-width:40ch;
}
.engagements li::before{
  content:''; position:absolute; left:0; top:.58em;
  width:.7rem; height:.7rem; border-radius:50%;
  border:1.5px solid var(--sauge);
}

/* ══ PARLONS-EN ════════════════════════════════════════════════════ */

.parlons__grille{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4rem); align-items:start;
}
@media (max-width:900px){ .parlons__grille{ grid-template-columns:1fr; } }

.coordonnees{ margin:2rem 0 0; display:grid; gap:1rem; }
.coordonnees > div{ border-top:1px solid rgba(34,31,26,.18); padding-top:.7rem; }
.coordonnees dt{
  font-family:'Hanken Grotesk', system-ui, sans-serif; font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--encre); margin-bottom:.25rem;
}
.coordonnees dd{ margin:0; font-size:var(--t-base); }

.formulaire{
  display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;
  background:var(--creme); padding:clamp(1.4rem,2.6vw,2.1rem);
  border-radius:var(--arete); box-shadow:var(--ombre-2);
}
@media (max-width:560px){ .formulaire{ grid-template-columns:1fr; } }
.champ{ display:grid; gap:.4rem; min-width:0; }
.champ--large{ grid-column:1 / -1; }
.champ label{
  font-family:'Hanken Grotesk', system-ui, sans-serif; font-size:var(--t-micro); letter-spacing:.1em;
  text-transform:uppercase; color:var(--encre-douce); font-weight:500;
}
.opt{ text-transform:none; letter-spacing:.02em; font-weight:400; }
.champ input, .champ textarea{
  font-family:inherit; font-size:var(--t-base); color:var(--encre);
  background:var(--creme); border:1.5px solid rgba(34,31,26,.22);
  border-radius:var(--arete); padding:.7rem .8rem; width:100%;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.champ input:hover, .champ textarea:hover{ border-color:rgba(34,31,26,.42); }
.champ input:focus, .champ textarea:focus{
  border-color:var(--terre); outline-offset:1px;
}
.champ textarea{ resize:vertical; }
.champ ::placeholder{ color:#7B7367; opacity:1; }
.champ [aria-invalid="true"]{ border-color:var(--terre-fonce); background:rgba(154,95,69,.05); }
.erreur{
  margin:0; font-size:var(--t-note); color:var(--terre-fonce); font-weight:600;
}
/* L'aveu passe avant le bouton, pas après : le visiteur sait que la
   demande ne partira pas avant d'avoir rempli quoi que ce soit.
   site.js le retire dès qu'une adresse de réception est renseignée. */
.form-attente{
  grid-column:1 / -1; display:block; margin:.25rem 0 0;
  font-size:var(--t-note); font-weight:500; line-height:1.5; padding:.7rem .9rem;
  border-color:var(--terre); color:var(--terre-fonce);
  background:rgba(154,95,69,.07);
}
.form-attente[hidden]{ display:none; }

.envoi{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; }
.rgpd{ margin:0; font-size:var(--t-label); line-height:1.5; color:var(--encre-douce); max-width:32ch; }
.form-etat{ grid-column:1 / -1; margin:0; font-weight:600; font-size:var(--t-lire); }
.form-etat[data-ok]{ color:var(--sauge); }
.form-etat[data-ko]{ color:var(--terre-fonce); }

/* ══ PIED ══════════════════════════════════════════════════════════ */

/* Rose-crème, comme le champ de l'accueil : c'est le sol du logo, et il
   n'apparaît qu'à ces deux endroits. La page s'ouvre et se ferme dessus.
   Le pied était en taupe foncé, où les lettres cuivre du logo tombent à
   1,19:1 — le fond suit la marque, pas l'inverse. */
.pied{
  background:var(--rose-creme); color:var(--encre);
  padding:clamp(2.5rem,5vw,4rem) var(--marge) 2rem;
}
.pied__logo{ display:block; width:auto; height:clamp(64px,7vw,88px); }
.pied__grille{
  display:grid; grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:2rem; align-items:start;
}
@media (max-width:700px){ .pied__grille{ grid-template-columns:1fr; } }
.pied__accroche{
  font-family:'Pinyon Script', cursive;
  font-size:clamp(1.3rem,2vw,1.7rem);   /* cran « Manuscrit court », cf. DESIGN.md */
  line-height:1.45;
  /* Terre-fonce et non terre : sur téléphone cette ligne descend à 20,8px,
     sous le seuil du « grand texte », et la terre cuite n'y tenait que
     4,09:1. Le ton foncé donne 6,16:1 à toutes les tailles. */
  color:var(--terre-fonce); margin:1.35rem 0 0; max-width:20ch;
  text-wrap:balance;
}
.pied__liens{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(11rem,14rem)); gap:.7rem 2.5rem;
}
@media (max-width:700px){ .pied__liens{ grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); } }
.pied__liens a{ font-size:var(--t-lire); color:var(--encre); text-decoration-color:rgba(34,31,26,.35); }
.pied__liens a:hover{ color:var(--terre); text-decoration-color:var(--terre); }
.pied__social{
  display:flex; gap:.9rem; margin:1.1rem 0 0; list-style:none; padding:0;
}
.pied__social a{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--terre-fonce); transition:color .2s var(--ease);
}
.pied__social a:hover, .pied__social a:focus-visible{ color:var(--terre); }
.pied__social .ico{ width:1.4rem; height:1.4rem; stroke-width:1.4; }

.pied__legal{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  margin:clamp(2rem,4vw,3rem) auto 0; padding-top:1.25rem;
  border-top:1px solid var(--filet);
  font-size:var(--t-label); color:var(--encre-douce); max-width:var(--large);
}

/* ══ RÉVÉLATIONS ═══════════════════════════════════════════════════ */

/* Rien n'est masqué par le CSS : c'est GSAP qui cache, au moment où il
   anime. Si le script échoue ou n'arrive jamais, la page reste entière —
   sans animation, mais lisible. L'inverse (masquer en CSS, révéler en JS)
   transforme la moindre panne de script en page blanche. */

/* Les titres se découvrent ligne par ligne derrière leur propre masque.
   Le masque doit laisser passer les jambages et les accents : d'où la
   marge basse, reprise en négatif pour ne pas casser l'interligne. */
.ligne{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.ligne__i{ display:block; }
.mot{ display:inline-block; }



@media (prefers-reduced-motion:reduce){
  .bouton:hover, .bouton:focus-visible{ transform:none; }
  .lien-fleche svg{ transition:none; }
  .bouton-haut{ transition:opacity .12s linear; transform:none; }
  .bouton-haut.est-visible{ transform:none; }
}
@media print{ .bouton-haut{ display:none; } }

.apropos__nom{
  font-family:'Playfair Display', Georgia, serif; font-weight:500;
  font-size:clamp(1.25rem,2.2vw,1.55rem); margin:.9rem 0 0;
}