/* =================================================================
   CARTEL CARATS — Maison française de haute joaillerie
   Direction : Place Vendôme. Ivoire, Garamond, bleu profond,
   un trait d'or à peine posé. Jamais de clinquant.
   ================================================================= */

:root{
  --ivoire:     #faf8f3;   /* le fond — porcelaine chaude */
  --ivoire-2:   #f3f0e8;   /* panneaux, cadres de vitrine */
  --encre:      #1f2430;   /* texte — bleu-noir profond */
  --bleu:       #1e2d4f;   /* bleu de France assombri — titres, panneau rdv */
  --or:         #a8854b;   /* or mat — filets et ornements UNIQUEMENT */
  --gris:       #767268;   /* texte secondaire */
  --filet:      #ddd6c8;   /* lignes fines */

  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
  --ease:  cubic-bezier(.22,1,.36,1);
  --marge: clamp(1.4rem, 5vw, 5rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }

body{
  background:var(--ivoire);
  color:var(--encre);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
}

::selection{ background:var(--bleu); color:var(--ivoire); }
a{ color:inherit; text-decoration:none; }

/* ---- Petites capitales à la française ---- */
.surtitre{
  font-size:.72rem; font-weight:400; letter-spacing:.4em; text-transform:uppercase;
  color:var(--or);
}
.surtitre--clair{ color:#cdb98f; }

.lozenge{ font-size:.45rem; color:var(--or); transform:translateY(-1px); }

/* ---- Filets ornementaux ---- */
.filet{
  width:min(220px, 50vw); height:1px; margin:0 auto;
  background:linear-gradient(90deg, transparent, var(--or), transparent);
  position:relative;
}
.filet::after{
  content:"◆"; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); font-size:.45rem; color:var(--or);
  background:var(--ivoire); padding:0 .6em;
}

/* =================================================================
   RÉVÉLATIONS AU DÉFILEMENT
   ================================================================= */
[data-reveal]{ opacity:0; transform:translateY(18px);
  transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* =================================================================
   MASTHEAD — centré, classique
   ================================================================= */
.maison-head{
  position:relative;
  text-align:center;
  padding:clamp(2rem,4vw,3rem) var(--marge) 0;
  border-bottom:1px solid var(--filet);
}
/* Sélecteur de langue */
.langue{
  position:absolute; top:clamp(1.2rem,2.5vw,1.8rem); right:var(--marge);
  font-size:.68rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gris); border-bottom:1px solid var(--filet); padding-bottom:.3rem;
  transition:color .35s, border-color .35s;
}
.langue:hover{ color:var(--or); border-color:var(--or); }
.maison-head__over{
  font-size:.66rem; font-weight:400; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gris);
}
.maison-head__logo{
  display:block; margin:.9rem auto .2rem;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2rem,5.5vw,3.4rem); letter-spacing:.16em; text-transform:uppercase;
  color:var(--bleu); line-height:1;
}
.maison-head__city{
  font-size:.72rem; letter-spacing:.55em; text-transform:uppercase;
  color:var(--or); padding-left:.55em; /* compense le tracking du dernier caractère */
}
.maison-head__nav{
  margin-top:1.6rem; padding:1rem 0;
  border-top:1px solid var(--filet);
  display:flex; align-items:center; justify-content:center; gap:1.4rem; flex-wrap:wrap;
}
.maison-head__nav a{
  font-size:.72rem; font-weight:400; letter-spacing:.24em; text-transform:uppercase;
  color:var(--encre); transition:color .35s;
}
.maison-head__nav a:hover{ color:var(--or); }

/* =================================================================
   OUVERTURE
   ================================================================= */
.ouverture{
  text-align:center;
  padding:clamp(4rem,9vw,7.5rem) var(--marge);
  display:flex; flex-direction:column; align-items:center; gap:1.8rem;
}
.filet--haut{ margin-bottom:.6rem; }
.filet--bas{ margin-top:.6rem; }

.ouverture__titre{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem,7vw,5.2rem); line-height:1.08; color:var(--encre);
}
.ouverture__titre em{ font-style:italic; color:var(--bleu); }
.ouverture__texte{
  max-width:56ch; color:var(--gris); font-size:1.02rem;
}

.bouton-filet{
  display:inline-block; margin-top:.4rem;
  font-size:.74rem; font-weight:400; letter-spacing:.28em; text-transform:uppercase;
  color:var(--bleu); border:1px solid var(--bleu);
  padding:1em 2.4em; transition:all .4s var(--ease);
}
.bouton-filet:hover{ background:var(--bleu); color:var(--ivoire); }

/* =================================================================
   EN-TÊTES DE SECTION
   ================================================================= */
.entete-section{
  text-align:center; max-width:760px;
  margin:0 auto clamp(2.5rem,5vw,4rem);
}
.entete-section__ornement{
  display:block; font-size:.5rem; color:var(--or); margin-bottom:1.1rem;
}
.entete-section h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.9rem,4.5vw,3rem); letter-spacing:.08em; text-transform:uppercase;
  color:var(--bleu);
}
.entete-section p{ margin-top:.9rem; color:var(--gris); font-size:.98rem; }

/* =================================================================
   LES CRÉATIONS — vitrines de boutique
   ================================================================= */
.creations{
  padding:clamp(4rem,9vw,7rem) var(--marge);
  border-top:1px solid var(--filet);
}
.vitrines{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3.5vw,3rem);
}
.vitrine{ text-align:center; }

/* Le cadre de vitrine : double encadrement, comme un écrin */
.vitrine__cadre{
  position:relative; aspect-ratio:4/5;
  background:
    radial-gradient(120% 90% at 50% 0%, #fffdf8 0%, var(--ivoire-2) 55%),
    var(--ivoire-2);
  border:1px solid var(--filet);
  padding:14px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.vitrine:hover .vitrine__cadre{ box-shadow:0 14px 38px -18px rgba(31,36,48,.22); }
.vitrine__cadre::before{
  content:""; position:absolute; inset:10px;
  border:1px solid var(--or); opacity:.45;
  transition:opacity .5s, inset .5s var(--ease);
  pointer-events:none;
}
.vitrine:hover .vitrine__cadre{ border-color:var(--or); }
.vitrine:hover .vitrine__cadre::before{ opacity:.9; inset:14px; }

.vitrine__gemme{
  width:60%; overflow:visible;
  transition:transform .8s var(--ease);
}
.vitrine:hover .vitrine__gemme{ transform:scale(1.04); }

/* ---- La pierre vit : flottement, ombre qui respire ---- */
.gemme-corps{
  transform-box:fill-box; transform-origin:center;
  animation:gem-flotte 7s ease-in-out infinite;
}
.gemme-ombre{
  transform-box:fill-box; transform-origin:center;
  animation:gem-ombre 7s ease-in-out infinite;
}
.vitrine:nth-child(2) .gemme-corps,
.vitrine:nth-child(2) .gemme-ombre{ animation-delay:-2.3s; }
.vitrine:nth-child(2) .gem-sweep{ animation-delay:-1.8s; }
.vitrine:nth-child(3) .gemme-corps,
.vitrine:nth-child(3) .gemme-ombre{ animation-delay:-4.6s; }
.vitrine:nth-child(3) .gem-sweep{ animation-delay:-3.6s; }
@keyframes gem-flotte{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}
@keyframes gem-ombre{
  0%,100%{ transform:scaleX(1); opacity:1; }
  50%{ transform:scaleX(.88); opacity:.55; }
}

/* ---- Le balayage de lumière sur les facettes ---- */
.gem-sweep{
  animation:gem-balaye 5.6s ease-in-out infinite;
}
@keyframes gem-balaye{
  0%{ transform:translateX(-70px) skewX(-18deg); }
  55%,100%{ transform:translateX(245px) skewX(-18deg); }
}

/* ---- Les étincelles ---- */
.gem-etincelle{
  transform-box:fill-box; transform-origin:center;
  opacity:0;
  animation:gem-scintille 4.4s ease-in-out infinite;
}
@keyframes gem-scintille{
  0%,70%,100%{ opacity:0; transform:scale(.2) rotate(0deg); }
  79%{ opacity:1; transform:scale(1) rotate(25deg); }
  88%{ opacity:0; transform:scale(.25) rotate(45deg); }
}

/* ---- Reflet de verre sur l'écrin, au survol ---- */
.vitrine__cadre{ overflow:hidden; }
.vitrine__cadre::after{
  content:""; position:absolute; top:-20%; bottom:-20%; left:0; width:42%;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  transform:translateX(-170%) skewX(-12deg);
  pointer-events:none;
}
.vitrine:hover .vitrine__cadre::after{
  transform:translateX(330%) skewX(-12deg);
  transition:transform 1.1s ease;
}

.vitrine__nom{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:1.7rem; color:var(--encre); margin-top:1.4rem;
}
.vitrine__detail{
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--or); margin-top:.45rem;
}
.vitrine__texte{
  max-width:30ch; margin:.9rem auto 0; color:var(--gris); font-size:.92rem;
}
.vitrine__mention{
  display:inline-block; margin-top:1rem;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gris);
  border-top:1px solid var(--filet); padding-top:.8rem;
}

/* =================================================================
   ENCART LES PIERRES
   ================================================================= */
.bandeau-pierres{
  padding:clamp(3.5rem,8vw,6rem) var(--marge);
  border-top:1px solid var(--filet);
  text-align:center;
}
.bandeau-pierres__corps{ max-width:680px; margin:0 auto; }
.bandeau-pierres__titre{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.7rem,4vw,2.6rem); letter-spacing:.06em;
  text-transform:uppercase; color:var(--bleu); margin-top:.4rem;
}
.bandeau-pierres__texte{
  margin:1.2rem auto 1.8rem; color:var(--gris); font-size:.98rem; max-width:56ch;
}

/* =================================================================
   LA MAISON — manifeste
   ================================================================= */
.maison{
  padding:clamp(4rem,9vw,7rem) var(--marge);
  border-top:1px solid var(--filet);
  background:var(--ivoire-2);
}
.maison__corps{ max-width:760px; margin:0 auto; text-align:center; }
.maison__manifeste{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(1.35rem,3vw,1.9rem); line-height:1.55; color:var(--encre);
}
.maison__signature{
  margin-top:1.8rem;
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--or);
}

/* =================================================================
   LE SAVOIR-FAIRE
   ================================================================= */
.savoirfaire{
  padding:clamp(4rem,9vw,7rem) var(--marge);
  border-top:1px solid var(--filet);
}
.etapes{
  list-style:none; max-width:1080px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.8rem,4vw,3.5rem);
  text-align:center;
}
.etape__numero{
  font-family:var(--serif); font-style:italic; font-size:1.9rem; color:var(--or);
}
.etape h3{
  font-family:var(--serif); font-weight:500; font-size:1.5rem;
  color:var(--bleu); margin:.7rem 0 .7rem;
}
.etape p{ color:var(--gris); font-size:.94rem; max-width:32ch; margin:0 auto; }

/* =================================================================
   RENDEZ-VOUS — panneau bleu profond
   ================================================================= */
.rdv{ padding:clamp(3rem,7vw,6rem) var(--marge); }
.rdv__panneau{
  max-width:880px; margin:0 auto; text-align:center;
  background:var(--bleu); color:var(--ivoire);
  padding:clamp(3rem,6vw,5rem) clamp(1.6rem,5vw,4rem);
  position:relative;
}
.rdv__panneau::before{
  content:""; position:absolute; inset:12px;
  border:1px solid rgba(205,185,143,.4); pointer-events:none;
}
.rdv__titre{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,5vw,3.2rem); margin-top:1.2rem; line-height:1.1;
}
.rdv__texte{
  max-width:46ch; margin:1.2rem auto 2rem; color:#c9cedb; font-size:.98rem;
}
.rdv__bouton{
  display:inline-flex; align-items:center; gap:.8rem;
  font-size:.78rem; font-weight:400; letter-spacing:.26em; text-transform:uppercase;
  color:var(--bleu); background:var(--ivoire);
  padding:1.1em 2.4em; transition:all .4s var(--ease);
  position:relative; z-index:1;
}
.rdv__bouton svg{ width:1.15em; height:1.15em; }
.rdv__bouton:hover{ background:#cdb98f; color:var(--bleu); }
.rdv__note{
  margin-top:1.4rem; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:#8d96ad;
}

/* =================================================================
   PIED DE PAGE
   ================================================================= */
.pied{
  text-align:center;
  padding:clamp(2.5rem,5vw,4rem) var(--marge) 2.5rem;
}
.pied .filet{ margin-bottom:2.2rem; }
.pied__logo{
  font-family:var(--serif); font-weight:500;
  font-size:1.5rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bleu);
}
.pied__devise{
  margin-top:.5rem; font-size:.68rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gris);
}
.pied__social{
  margin-top:1.6rem; display:flex; align-items:center; justify-content:center; gap:1.2rem;
}
.pied__social a{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--encre); transition:color .35s;
}
.pied__social a:hover{ color:var(--or); }
.pied__copy{
  margin-top:1.8rem; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gris);
}

/* =================================================================
   PAGE LES PIERRES — documentation de la Maison
   ================================================================= */
.maison-head--page{ padding-bottom:0; }
.maison-head__nav .actif{ color:var(--or); }

.doc__ouverture{
  text-align:center;
  padding:clamp(3.5rem,8vw,6rem) var(--marge) clamp(3rem,6vw,5rem);
  display:flex; flex-direction:column; align-items:center; gap:1.6rem;
}
.doc__titre{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.8rem,8vw,5.6rem); line-height:1.05;
  letter-spacing:.06em; text-transform:uppercase; color:var(--bleu);
}
.doc__chapeau{
  max-width:62ch; color:var(--gris); font-size:1.02rem;
}
.doc__sommaire{
  margin-top:.8rem; display:flex; flex-wrap:wrap; justify-content:center;
  gap:.8rem 2rem;
}
.doc__sommaire a{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--encre); border-bottom:1px solid var(--filet);
  padding-bottom:.4rem; transition:color .35s, border-color .35s;
}
.doc__sommaire a:hover{ color:var(--or); border-color:var(--or); }

.chapitre{
  padding:clamp(3.5rem,8vw,6.5rem) var(--marge);
  border-top:1px solid var(--filet);
}
.chapitre--fond{ background:var(--ivoire-2); }
.chapitre__tete{
  max-width:760px; margin:0 auto clamp(2.5rem,5vw,4rem); text-align:center;
}
.chapitre__numero{
  display:block; font-family:var(--serif); font-style:italic;
  font-size:1.05rem; color:var(--or); margin-bottom:.8rem;
}
.chapitre__tete h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.8rem,4.5vw,2.8rem); letter-spacing:.08em;
  text-transform:uppercase; color:var(--bleu);
}
.chapitre__tete p{ margin-top:1.1rem; color:var(--gris); font-size:.98rem; }

/* Fiches de pierre */
.fiche{
  max-width:720px; margin:0 auto; padding:clamp(1.8rem,4vw,2.6rem) 0;
  border-top:1px solid var(--filet); text-align:left;
}
.fiche:last-child{ padding-bottom:0; }
.fiche__nom{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:1.6rem; color:var(--bleu);
}
.fiche__formule{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--or); margin:.5rem 0 1rem;
}
.fiche p:not(.fiche__formule){ color:var(--encre); font-size:.97rem; max-width:65ch; }
.fiche--sombre .fiche__nom{ color:var(--encre); }
.fiche--sombre .fiche__formule{ color:var(--gris); }

/* Provenances */
.provenances{
  list-style:none; max-width:720px; margin:0 auto;
}
.provenances li{
  padding:clamp(1.4rem,3vw,2rem) 0; border-top:1px solid var(--filet);
}
.provenances h3{
  font-family:var(--serif); font-weight:500; font-size:1.35rem; color:var(--bleu);
  margin-bottom:.5rem;
}
.provenances p{ color:var(--gris); font-size:.95rem; max-width:65ch; }

/* Engagements */
.engagements{
  list-style:none; max-width:1080px; margin:0 auto;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1.8rem,4vw,3rem);
}
.engagements li{ text-align:center; padding:0 clamp(.5rem,2vw,1.5rem); }
.engagements__num{
  font-family:var(--serif); font-style:italic; font-size:1.9rem; color:var(--or);
}
.engagements h3{
  font-family:var(--serif); font-weight:500; font-size:1.4rem;
  color:var(--bleu); margin:.6rem 0 .6rem;
}
.engagements p{ color:var(--gris); font-size:.93rem; max-width:42ch; margin:0 auto; }

.doc__appel{
  margin-top:clamp(3rem,6vw,4.5rem); text-align:center;
}
.doc__appel-texte{
  font-family:var(--serif); font-style:italic; font-size:1.3rem;
  color:var(--encre); margin-bottom:1.4rem;
}

/* =================================================================
   VOILE D'ENTRÉE — chaque page se dévoile
   ================================================================= */
body::before{
  content:""; position:fixed; inset:0; z-index:90;
  background:var(--ivoire); opacity:0; pointer-events:none;
  animation:voile 1s ease .05s both;
}
@keyframes voile{ from{ opacity:1; } to{ opacity:0; } }
/* Filet de sécurité : si l'animation ne joue pas (vieux navigateur,
   rendu figé), le voile est retiré par JavaScript après 1 seconde. */
body.voile-fini::before{ display:none; }

/* =================================================================
   TÊTE DE PAGE (pages intérieures)
   ================================================================= */
.page-tete{
  text-align:center;
  padding:clamp(3.5rem,8vw,6rem) var(--marge) clamp(2.5rem,5vw,4rem);
  display:flex; flex-direction:column; align-items:center; gap:1.5rem;
}
.page-tete__titre{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem,7vw,5rem); line-height:1.06;
  letter-spacing:.05em; text-transform:uppercase; color:var(--bleu);
}
.page-tete__chapeau{ max-width:58ch; color:var(--gris); font-size:1.02rem; }

/* =================================================================
   PORTAILS — les portes des salons (accueil)
   ================================================================= */
.portails{
  padding:clamp(3rem,7vw,5.5rem) var(--marge);
  border-top:1px solid var(--filet);
}
.portails__grille{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1.4rem,3vw,2.4rem);
}
.portail{
  position:relative; display:block; text-align:center;
  border:1px solid var(--filet);
  padding:clamp(2.4rem,5vw,3.6rem) 1.6rem;
  background:
    radial-gradient(120% 100% at 50% 0%, #fffdf8 0%, var(--ivoire) 60%);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease),
             transform .5s var(--ease);
}
.portail::before{
  content:""; position:absolute; inset:9px;
  border:1px solid var(--or); opacity:.35;
  transition:opacity .5s, inset .5s var(--ease);
  pointer-events:none;
}
.portail:hover{
  border-color:var(--or); transform:translateY(-4px);
  box-shadow:0 18px 44px -22px rgba(31,36,48,.25);
}
.portail:hover::before{ opacity:.85; inset:13px; }
.portail--large{ grid-column:1 / -1; }
.portail__ornement{ display:block; font-size:.55rem; color:var(--or); margin-bottom:1rem; }
.portail__titre{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.5rem,3.5vw,2.1rem); letter-spacing:.1em;
  text-transform:uppercase; color:var(--bleu);
}
.portail__texte{
  max-width:40ch; margin:.9rem auto 0; color:var(--gris); font-size:.93rem;
}
.portail__entrer{
  display:inline-block; margin-top:1.4rem;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--or);
}

/* Vitrine d'honneur (accueil) */
.honneur{
  padding:clamp(3rem,7vw,5.5rem) var(--marge);
  border-top:1px solid var(--filet);
  text-align:center;
}
.honneur__cadre{ display:block; max-width:340px; margin:0 auto; }
.honneur .vitrine__nom{ margin-top:1.2rem; }

/* =================================================================
   LE PARCOURS — savoir-faire en actes
   ================================================================= */
.parcours{
  list-style:none; max-width:660px; margin:0 auto;
}
.parcours li{
  position:relative; text-align:left;
  padding:0 0 clamp(2.2rem,4.5vw,3rem) clamp(2.6rem,6vw,3.4rem);
  border-left:1px solid var(--filet); margin-left:.4rem;
}
.parcours li:last-child{ border-left-color:transparent; padding-bottom:0; }
.parcours li::before{
  content:"◆"; position:absolute; left:-.36rem; top:.25rem;
  font-size:.55rem; color:var(--or);
  background:var(--ivoire); padding:.25em 0;
}
.parcours__acte{
  font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--or);
}
.parcours h3{
  font-family:var(--serif); font-weight:500; font-size:1.6rem;
  color:var(--bleu); margin:.3rem 0 .6rem;
}
.parcours p{ color:var(--gris); font-size:.96rem; max-width:56ch; }

/* =================================================================
   LES FONDATEURS — médaillons de portrait
   ================================================================= */
.duo{
  max-width:880px; margin:0 auto;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(2.5rem,6vw,4.5rem);
}
.fondateur{ text-align:center; }
.fondateur__medaillon{
  position:relative;
  width:min(250px,64vw); aspect-ratio:4/5;
  margin:0 auto;
  border:1px solid var(--filet);
  border-radius:50%;
  padding:12px;
  background:radial-gradient(120% 100% at 50% 0%, #fffdf8 0%, var(--ivoire-2) 70%);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.fondateur__medaillon::before{
  content:""; position:absolute; inset:7px;
  border:1px solid var(--or); opacity:.45; border-radius:50%;
  pointer-events:none;
  transition:opacity .5s;
}
.fondateur:hover .fondateur__medaillon{
  border-color:var(--or);
  box-shadow:0 16px 40px -22px rgba(31,36,48,.25);
}
.fondateur:hover .fondateur__medaillon::before{ opacity:.85; }
.fondateur__photo{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
}
.fondateur__attente{
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
}
.fondateur__attente .lozenge{ font-size:.6rem; }
.fondateur__attente span:last-child{
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gris);
}
.fondateur__monogramme{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:3.4rem; color:var(--bleu); line-height:1;
}
.fondateur__nom{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:1.7rem; color:var(--encre); margin-top:1.5rem;
}
.fondateur__role{
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--or); margin-top:.45rem;
}
.fondateur__bio{
  max-width:34ch; margin:1rem auto 0; color:var(--gris); font-size:.94rem;
}

/* =================================================================
   CONFIER SON HISTOIRE — le formulaire de l'âme
   ================================================================= */
.confier{
  padding:clamp(3.5rem,8vw,6rem) var(--marge);
  border-top:1px solid var(--filet);
}
.formulaire{
  max-width:660px; margin:0 auto;
  display:grid; gap:1.9rem;
}
.champ{ display:flex; flex-direction:column; gap:.55rem; text-align:left; }
.champ label{
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--or);
}
.champ input,
.champ select,
.champ textarea{
  font-family:var(--sans); font-weight:300; font-size:1.02rem;
  color:var(--encre); background:transparent;
  border:none; border-bottom:1px solid var(--filet);
  border-radius:0; padding:.6em .15em; outline:none;
  transition:border-color .35s;
}
.champ textarea{
  border:1px solid var(--filet); padding:1em 1.1em;
  line-height:1.7; resize:vertical; min-height:11rem;
  background:rgba(255,253,248,.6);
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus{ border-color:var(--or); }
.champ ::placeholder{ color:#b3aea1; opacity:1; }
.champ select{ cursor:pointer; }
.champ--rangee{
  display:grid; grid-template-columns:1fr 1fr; gap:1.9rem;
}
.formulaire__envoyer{
  justify-self:center; cursor:pointer;
  display:inline-flex; align-items:center; gap:.8rem;
  font-family:var(--sans); font-size:.78rem; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--ivoire); background:var(--bleu);
  border:none; padding:1.15em 2.6em;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.formulaire__envoyer svg{ width:1.15em; height:1.15em; }
.formulaire__envoyer:hover{ background:#cdb98f; color:var(--bleu); }
.formulaire__note{
  text-align:center; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gris);
}

/* Appel en bas de page intérieure */
.appel-page{
  text-align:center; padding:clamp(3rem,7vw,5rem) var(--marge);
  border-top:1px solid var(--filet);
}
.appel-page__texte{
  font-family:var(--serif); font-style:italic; font-size:1.35rem;
  color:var(--encre); margin-bottom:1.5rem;
}

/* =================================================================
   ŒUVRE D'ART — le rideau de scène
   Un monogramme se grave en or, puis le rideau se lève.
   (créé par JavaScript à la première visite de la session)
   ================================================================= */
.rideau{
  position:fixed; inset:0; z-index:95;
  background:var(--ivoire);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.6rem;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.rideau--leve{ opacity:0; transform:translateY(-3%); pointer-events:none; }
.rideau svg{ width:min(150px,34vw); overflow:visible; }
.rideau__loz{
  fill:none; stroke:var(--or); stroke-width:1;
  stroke-dasharray:280; stroke-dashoffset:280;
  animation:rideau-grave 1.2s var(--ease) .1s forwards;
}
@keyframes rideau-grave{ to{ stroke-dashoffset:0; } }
.rideau__cc{
  font-family:var(--serif); font-style:italic; font-size:34px;
  fill:var(--bleu); opacity:0;
  animation:rideau-nait .7s ease .75s forwards;
}
@keyframes rideau-nait{ to{ opacity:1; } }
.rideau__nom{
  font-size:.66rem; letter-spacing:.5em; text-transform:uppercase;
  color:var(--gris); padding-left:.5em; opacity:0;
  animation:rideau-nait .7s ease 1s forwards;
}

/* Sortie de page — fondu vers l'ivoire avant de naviguer */
.sortie{
  position:fixed; inset:0; z-index:96;
  background:var(--ivoire); opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.sortie--pleine{ opacity:1; }

/* =================================================================
   ŒUVRE D'ART — poussière d'or en suspension
   ================================================================= */
.ouverture, .page-tete{ position:relative; }
.poussiere{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, #d9c08a 0%, rgba(217,192,138,0) 70%);
  opacity:0; pointer-events:none;
  animation:poussiere-flotte linear infinite;
}
@keyframes poussiere-flotte{
  0%{ transform:translateY(14px); opacity:0; }
  20%{ opacity:.55; }
  55%{ opacity:.2; }
  80%{ opacity:.45; }
  100%{ transform:translateY(-30px); opacity:0; }
}

/* =================================================================
   ŒUVRE D'ART — raffinements typographiques
   ================================================================= */
/* Lettrines de livre ancien (page Les Pierres) */
.fiche > p:not(.fiche__formule)::first-letter{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:2.9em; line-height:.78; color:var(--or);
  float:left; margin-right:.14em; padding-top:.1em;
}
/* Numéros de chapitre en filigrane */
.chapitre{ position:relative; overflow:hidden; }
.chapitre__fond{
  position:absolute; top:clamp(.5rem,3vw,1.5rem); left:50%;
  transform:translateX(-50%);
  font-family:var(--serif); font-style:italic; line-height:1;
  font-size:clamp(9rem,22vw,17rem);
  color:var(--bleu); opacity:.05;
  pointer-events:none; user-select:none;
}
/* Double filet sous le masthead */
.maison-head{ box-shadow:0 4px 0 -3px var(--filet); }
/* Le logo respire au survol */
.maison-head__logo{ transition:letter-spacing .7s var(--ease); }
.maison-head__logo:hover{ letter-spacing:.22em; }
/* Filet d'or naissant sous les liens de navigation */
.maison-head__nav a{ position:relative; padding-bottom:.4rem; }
.maison-head__nav a::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:0; height:1px; background:var(--or);
  transform:translateX(-50%);
  transition:width .45s var(--ease);
}
.maison-head__nav a:hover::after,
.maison-head__nav a.actif::after{ width:100%; }
/* Les boutons s'étirent d'aise */
.bouton-filet{ transition:all .4s var(--ease), letter-spacing .5s var(--ease); }
.bouton-filet:hover{ letter-spacing:.34em; }

/* Barre de défilement à la française */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--ivoire); }
::-webkit-scrollbar-thumb{
  background:#d8cdb4; border:3px solid var(--ivoire); border-radius:8px;
}
::-webkit-scrollbar-thumb:hover{ background:var(--or); }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:880px){
  .engagements{ grid-template-columns:1fr; max-width:480px; }
  .portails__grille{ grid-template-columns:1fr; }
  .duo{ grid-template-columns:1fr; max-width:420px; }
  .champ--rangee{ grid-template-columns:1fr; }
  .vitrines{ grid-template-columns:1fr; max-width:420px; }
  .etapes{ grid-template-columns:1fr; max-width:420px; gap:2.4rem; }
  .maison-head__nav{ gap:.9rem; }
  .maison-head__nav .lozenge{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition-duration:.001s!important; }
  [data-reveal]{ opacity:1; transform:none; }
}