/* ============================================================
   ÉCRINS — feuille de style commune
   body.celebrer  : ivoire, cobalt, rythme serré
   body.transmettre : anthracite, doré, beaucoup d'air
   ============================================================ */

:root{
  --cobalt:#3557d4;
  --cobalt-fonce:#2946b8;
  --ivoire:#f8f6f2;
  --gris:#d9d5cf;
  --encre:#313131;
  --or:#c7a66a;
  --nuit:#26262a;

  --serif:"DM Serif Display",Georgia,serif;
  --logo:"Cormorant Garamond",Georgia,serif;
  --sans:"Poppins",-apple-system,Segoe UI,sans-serif;
  --script:"La Belle Aurore","Segoe Script",cursive;

  --gut:clamp(1.5rem,5vw,5rem);
}

/* ---------- les deux thèmes ---------- */
body.celebrer{
  --bg:var(--ivoire);
  --fg:var(--encre);
  --accent:var(--cobalt);
  --accent-hover:var(--cobalt-fonce);
  --muted:#5a5a5a;
  --script-c:#55524d;
  --rule:var(--gris);
  --rule-soft:var(--gris);
  --visuel:var(--gris);
}
body.transmettre{
  --bg:var(--nuit);
  --fg:var(--ivoire);
  --accent:var(--or);
  --accent-hover:#d8b87e;
  --muted:#b3aea6;
  --script-c:#cac4bb;
  --rule:rgba(199,166,106,.32);
  --rule-soft:rgba(248,246,242,.14);
  --visuel:#3a3a3f;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(15px,1.05vw,17px);line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Héritage respire davantage */
body.transmettre{line-height:1.9;letter-spacing:.005em}

/* ---------- logotype ---------- */
/* logo image (extrait de la charte) */
.logo{display:inline-block;line-height:0;text-decoration:none}
.logo img{display:block;height:clamp(22px,5.5vw,32px);width:auto}
.site-header .logo img{height:clamp(22px,5.5vw,32px)}
.site-footer .logo img{height:clamp(20px,4.5vw,26px)}
.carte .logo img{height:clamp(20px,5vw,26px)}
body.transmettre .site-header .logo img,
body.transmettre .site-footer .logo img{content:url("img/logo-ecrins-ivoire.png")}
/* coin haut-gauche, détaché */
.logo .s::before{top:-.26em;left:-.34em;border-right:0;border-bottom:0}
/* coin bas-droite, détaché */
.logo .s::after{bottom:-.26em;right:-.38em;border-left:0;border-top:0}

/* ---------- navigation ---------- */
.site-header{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.1rem var(--gut);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-soft);
}
.site-header .logo{font-size:1.05rem;color:var(--fg)}
.site-nav{display:flex;align-items:center;gap:clamp(.9rem,2.2vw,2rem);
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase}
.site-nav a{text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-color:var(--accent)}

.porte{padding-left:clamp(.9rem,2.2vw,2rem);
  border-left:1px solid var(--rule-soft);color:var(--muted)}
body.celebrer .porte:hover{border-bottom-color:var(--or);color:var(--encre)}
body.transmettre .porte:hover{border-bottom-color:var(--cobalt);color:var(--ivoire)}
/* bouton hamburger — caché sur grand écran */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;
  padding:.5rem;margin:-.5rem;color:var(--fg);z-index:40}
.nav-toggle svg{display:block}

@media(max-width:820px){
  /* le backdrop-filter casse le position:fixed des enfants → on le retire ici */
  .site-header{backdrop-filter:none;background:var(--bg);z-index:39}
  .nav-toggle{display:inline-flex;position:relative;z-index:41}
  .site-nav{
    position:fixed;inset:0 0 0 auto;width:min(78vw,20rem);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:1.6rem;padding:2rem 2.4rem;
    background:var(--bg);
    border-left:1px solid var(--rule-soft);
    box-shadow:-12px 0 40px rgba(0,0,0,.12);
    transform:translateX(100%);transition:transform .3s ease;
    font-size:1rem;z-index:38;
  }
  .site-nav.ouvert{transform:translateX(0)}
  .site-nav a{padding:.2rem 0}
  .porte{padding-left:0;border-left:0;border-top:1px solid var(--rule-soft);
    padding-top:1.4rem;width:100%}
  /* voile derrière le menu */
  .nav-voile{position:fixed;inset:0;background:rgba(38,38,42,.4);
    opacity:0;visibility:hidden;transition:opacity .3s;z-index:35}
  .nav-voile.ouvert{opacity:1;visibility:visible}
  body.menu-ouvert{overflow:hidden}
}

/* ---------- boutons ---------- */
.cta{display:inline-block;font-weight:500;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:1.05rem 2.2rem;transition:background .25s,color .25s,transform .25s}
body.celebrer .cta{background:var(--cobalt);color:#fff}
body.celebrer .cta:hover{background:var(--cobalt-fonce);transform:translateY(-2px)}
body.transmettre .cta{background:transparent;color:var(--or);border:1px solid var(--or)}
body.transmettre .cta:hover{background:var(--or);color:var(--nuit);transform:translateY(-2px)}

.lien-souligne{text-decoration:none;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;border-bottom:1px solid currentColor;
  padding-bottom:3px;color:var(--accent)}

/* ---------- blocs ---------- */
.bloc{padding:clamp(4.5rem,11vh,8rem) var(--gut)}
body.transmettre .bloc{padding:clamp(5.5rem,15vh,11rem) var(--gut)}
.eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin:0 0 1.1rem}
.intro{max-width:62ch;margin-bottom:clamp(3rem,6vw,4.5rem)}
body.transmettre .intro{max-width:54ch;margin-bottom:clamp(4rem,8vw,6rem)}
.intro h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.08;margin:0 0 1rem}
body.transmettre .intro h2{font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.18}
.intro p{margin:0;max-width:52ch;color:var(--muted)}
.script{font-family:var(--script);color:var(--script-c);line-height:1.45}

/* ---------- hero ---------- */
.hero{padding:clamp(5rem,14vh,10rem) var(--gut) clamp(4rem,10vh,7rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(2rem,6vw,5rem);align-items:end;
  border-bottom:1px solid var(--rule-soft)}
@media(max-width:860px){.hero{grid-template-columns:1fr;align-items:start}}
.hero h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1.02;
  letter-spacing:-.015em;margin:0 0 1.4rem}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .lede{max-width:46ch;margin:0}
.hero-side{padding-bottom:.4rem}
.hero-side p{max-width:34ch;font-size:.92rem;color:var(--muted);margin:0 0 2rem}

/* ---------- piliers ---------- */
.piliers{display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--rule-soft)}
@media(max-width:780px){.piliers{grid-template-columns:1fr}}
.pilier{padding:clamp(2.4rem,5vw,3.6rem) var(--gut);
  border-right:1px solid var(--rule-soft)}
.pilier:last-child{border-right:0}
@media(max-width:780px){
  .pilier{border-right:0;border-bottom:1px solid var(--rule-soft)}
  .pilier:last-child{border-bottom:0}
}
.pilier h3{font-family:var(--serif);font-weight:400;font-size:1.45rem;margin:0 0 .5rem}
.pilier p{margin:0;font-size:.9rem;color:var(--muted);max-width:32ch}

/* ---------- cartes Célébrer : cadres ouverts ---------- */
.triptyque{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.6rem)}
@media(max-width:900px){.triptyque{grid-template-columns:1fr;max-width:34rem}}
.ecrin{position:relative;display:block;text-decoration:none;
  padding:clamp(1.8rem,3vw,2.6rem);transition:transform .35s ease}
.ecrin::before,.ecrin::after{content:"";position:absolute;width:34px;height:34px;
  border:1px solid var(--fg);transition:width .35s,height .35s,border-color .35s}
.ecrin::before{top:0;left:0;border-right:0;border-bottom:0}
.ecrin::after{bottom:0;right:0;border-left:0;border-top:0}
.ecrin:hover{transform:translateY(-4px)}
.ecrin:hover::before,.ecrin:hover::after{width:56px;height:56px;border-color:var(--accent)}
.ecrin .visuel{aspect-ratio:3/4;background:var(--visuel);overflow:hidden;margin-bottom:1.4rem}
.ecrin .visuel img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9);transform:scale(1);
  transition:transform .7s ease,filter .4s}
.ecrin:hover .visuel img{transform:scale(1.04);filter:saturate(1)}
.ecrin h3{font-family:var(--serif);font-weight:400;font-size:1.6rem;
  letter-spacing:.04em;margin:0 0 .1rem}
.ecrin .sig{font-family:var(--script);color:var(--script-c);
  font-size:1.5rem;line-height:1.45;margin:.15rem 0 .9rem}
.ecrin .desc{font-size:.86rem;color:var(--muted);margin:0}

/* ---------- voir un Écrin ---------- */
.voir{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
@media(max-width:860px){.voir{grid-template-columns:1fr}}

.scene{position:relative;padding:clamp(1.4rem,3vw,2.2rem)}
.scene::before,.scene::after{content:"";position:absolute;width:26px;height:26px;
  border:1px solid var(--fg)}
.scene::before{top:0;left:0;border-right:0;border-bottom:0}
.scene::after{bottom:0;right:0;border-left:0;border-top:0}
.socle{aspect-ratio:4/3;background:#ded7ca;display:flex;
  align-items:center;justify-content:center;padding:clamp(1.2rem,4vw,2.4rem)}

/* la Carte Écrin, dessinée */
.carte{width:100%;max-width:23rem;aspect-ratio:85/55;background:var(--ivoire);
  box-shadow:0 10px 30px rgba(49,49,49,.18);
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:1rem;padding:clamp(1rem,3vw,1.6rem)}
.carte .marque{font-size:clamp(1rem,3.2vw,1.5rem);color:var(--encre)}
.carte .devise{font-size:.6rem;letter-spacing:.02em;color:#6a6761;margin:.5rem 0 0}
.carte .scan{font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8a867f;margin:.7rem 0 0}
.carte .qr{width:clamp(52px,12vw,72px);height:clamp(52px,12vw,72px);flex:none}

/* ---------- les étapes numérotées ---------- */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
@media(max-width:820px){.etapes{grid-template-columns:1fr;max-width:34rem}}
.etape{border-top:1px solid var(--rule);padding-top:1.4rem}
.etape .num{font-family:var(--serif);font-size:1.6rem;color:var(--accent);
  display:block;line-height:1;margin-bottom:.7rem}
.etape h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:0 0 .4rem}
.etape p{margin:0;font-size:.88rem;color:var(--muted)}

/* ---------- le seuil : passage d'un univers à l'autre ---------- */
.seuil{padding:clamp(4rem,9vw,6.5rem) var(--gut)}
body.celebrer .seuil{background:var(--nuit);color:var(--ivoire)}
body.transmettre .seuil{background:var(--ivoire);color:var(--encre)}
.seuil-inner{position:relative;max-width:44rem;margin:0 auto;text-align:center;
  padding:clamp(2.6rem,5vw,3.6rem) clamp(1.5rem,4vw,3rem)}
/* vers Héritage : le cadre est fermé */
body.celebrer .seuil-inner::before{content:"";position:absolute;inset:0;
  border:1px solid var(--or);pointer-events:none}
body.celebrer .seuil .eyebrow{color:var(--or)}
body.celebrer .seuil .cta{background:transparent;color:var(--or);border:1px solid var(--or)}
body.celebrer .seuil .cta:hover{background:var(--or);color:var(--nuit)}
/* vers Célébrer : les coins sont ouverts */
body.transmettre .seuil-inner::before,
body.transmettre .seuil-inner::after{content:"";position:absolute;
  width:40px;height:40px;border:1px solid var(--cobalt);pointer-events:none}
body.transmettre .seuil-inner::before{top:0;left:0;border-right:0;border-bottom:0}
body.transmettre .seuil-inner::after{bottom:0;right:0;border-left:0;border-top:0}
body.transmettre .seuil .eyebrow{color:var(--cobalt)}
body.transmettre .seuil .cta{background:var(--cobalt);color:#fff;border:0}
body.transmettre .seuil .cta:hover{background:var(--cobalt-fonce)}
.seuil p.phrase{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.5;
  max-width:32ch;margin:0 auto 2rem}
body.celebrer .seuil .phrase{color:var(--ivoire)}
body.transmettre .seuil .phrase{color:var(--encre)}

/* ---------- listes de caractéristiques ---------- */
.caracs{list-style:none;margin:2.2rem 0 2.6rem;padding:0;border-top:1px solid var(--rule)}
.caracs li{display:flex;justify-content:space-between;gap:1.5rem;
  padding:.95rem 0;border-bottom:1px solid var(--rule);font-size:.86rem}
.caracs span:first-child{color:var(--muted)}
.caracs span:last-child{text-align:right}

/* ---------- pied ---------- */
.final{text-align:center;border-top:1px solid var(--rule-soft)}
.final h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,4vw,3rem);margin:0 0 1.6rem}
.site-footer{padding:2.5rem var(--gut);border-top:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;
  align-items:center;justify-content:space-between;
  font-size:.76rem;letter-spacing:.08em;color:var(--muted)}
.site-footer .logo{font-size:.9rem;color:var(--fg)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.site-footer nav a{text-decoration:none}
.site-footer nav a:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- iconographie ---------- */
.ico{
  width:38px;height:38px;display:block;margin:0 0 1rem;
  color:var(--fg);
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:butt;stroke-linejoin:miter;
  transition:color .3s;
}
.ico .gras{stroke-width:2.6}
.pilier:hover .ico,.etape:hover .ico{color:var(--accent)}


/* ---------- formulaire ---------- */
.form{display:grid;gap:1.4rem;max-width:34rem}
.champ{display:grid;gap:.4rem}
.champ label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.champ input,.champ select,.champ textarea{
  font-family:var(--sans);font-weight:300;font-size:.95rem;color:var(--fg);
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:.6rem 0;border-radius:0;transition:border-color .25s}
.champ textarea{min-height:7rem;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-bottom-color:var(--accent)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media(max-width:640px){.duo{grid-template-columns:1fr}}
.form .cta{justify-self:start;margin-top:.6rem;border:0;cursor:pointer;
  font-family:var(--sans)}
.mention{font-size:.78rem;color:var(--muted);max-width:44rem}

/* ---------- contact : colonne latérale ---------- */
.deux-col{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,6vw,5rem)}
@media(max-width:860px){.deux-col{grid-template-columns:1fr}}
.encart{border-top:1px solid var(--rule);padding-top:1.4rem}
.encart h3{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin:0 0 .4rem}
.encart p{margin:0 0 1.6rem;font-size:.88rem;color:var(--muted)}
.encart a{color:var(--accent)}

/* ---------- pages de texte ---------- */
.texte{max-width:70ch}
.texte h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.4rem,2.6vw,1.9rem);margin:2.8rem 0 .8rem}
.texte h2:first-child{margin-top:0}
.texte p,.texte li{font-size:.95rem;color:var(--muted)}
.texte ul{padding-left:1.1rem}
.texte li{margin-bottom:.5rem}
.texte strong{color:var(--fg);font-weight:400}
.texte .maj{color:var(--muted);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:2.5rem}
.acompleter{background:rgba(53,87,212,.09);color:var(--accent);
  padding:.05em .4em;border-radius:2px;font-size:.92em}