/* ===========================================================
   GemChain — feuille de style unique
   Identité reprise du booklet « Les opportunités du moment » :
   vert sapin profond, panneaux crème, Playfair italique, Poppins.
   =========================================================== */

:root{
  --vert:        #0d2b28;   /* vert sapin — bandeaux, boutons */
  --vert-2:      #143f3a;   /* vert intermédiaire (survols)   */
  --vert-clair:  #9dbbb2;   /* vert doux (eyebrows sur fond sombre) */
  --creme:       #efe9dd;   /* panneaux crème du booklet      */
  --creme-2:     #f6f2ea;   /* variante claire                */
  --fond:        #fbfaf7;   /* fond de page                   */
  --blanc:       #ffffff;
  --encre:       #1c2b3a;   /* texte courant (bleu nuit)      */
  --titre:       #0d2b28;   /* titres                         */
  --gris:        #7d8a85;
  --ligne:       rgba(13,43,40,.14);
  --ligne-creme: rgba(13,43,40,.10);

  --serif: "Playfair Display", "Didot", "Bodoni 72", Georgia, serif;
  --sans:  "Poppins", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --max: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:var(--sans);
  font-weight:300;
  font-size:16.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--vert);color:#fff}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.18;margin:0;color:var(--titre)}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.7}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--vert);
  margin:0 0 1rem;
}
.center{text-align:center}

/* signature serif italique (baseline, titres de panneaux) */
.sig{font-family:var(--serif);font-style:italic;font-weight:500}

/* ---------- apparitions au défilement ---------- */
@media (prefers-reduced-motion: no-preference){
  html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  html.js .rv.in{opacity:1;transform:none}
  html.js .rv-d1{transition-delay:.08s}html.js .rv-d2{transition-delay:.16s}html.js .rv-d3{transition-delay:.24s}
}

/* ---------- boutons ---------- */
.btn{
  display:inline-block;padding:.9em 2.1em;border:1px solid var(--vert);
  background:var(--vert);color:#fff;text-decoration:none;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  transition:background .25s var(--ease),color .25s,border-color .25s,transform .25s;cursor:pointer;
}
.btn:hover{background:var(--vert-2);border-color:var(--vert-2);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--vert)}
.btn--ghost:hover{background:var(--vert);color:#fff}
.btn--light{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.btn--light:hover{background:#fff;border-color:#fff;color:var(--vert)}

/* ---------- logo ---------- */
.brand{display:flex;flex-direction:column;align-items:center;text-decoration:none;line-height:1;gap:.28em}
.brand .monogram{
  font-family:var(--serif);font-weight:400;font-size:2.15rem;letter-spacing:-.34em;
  padding-right:.34em; /* compense le letter-spacing du dernier glyphe */
}
.brand .monogram i{font-style:normal;opacity:.85}
.brand .wordmark{
  font-family:var(--sans);font-weight:400;font-size:.66rem;letter-spacing:.5em;
  text-transform:uppercase;padding-left:.5em;
}

/* ---------- en-tête ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--vert);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.06)}
.site-header__inner{
  max-width:var(--max);margin:0 auto;padding:12px var(--pad) 10px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.site-header .brand{color:#fff}
.nav{display:flex;gap:clamp(16px,2.6vw,38px);align-items:center}
.nav a{
  font-family:var(--sans);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:300;text-decoration:none;color:rgba(255,255,255,.85);
  padding-bottom:4px;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.nav a:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.nav a[aria-current="page"]{color:#fff;border-color:#fff}
.header-tools{display:flex;align-items:center;gap:14px}
.selection-btn{
  background:none;border:1px solid rgba(255,255,255,.4);border-radius:999px;
  padding:.5em 1.1em;font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;
  cursor:pointer;color:#fff;transition:border-color .25s,background .25s;
}
.selection-btn:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.burger{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:#fff;padding:4px 8px}

@media (max-width:960px){
  .burger{display:block}
  .nav{
    position:absolute;top:100%;left:0;right:0;background:var(--vert);
    flex-direction:column;gap:0;padding:0 var(--pad);
    border-top:1px solid rgba(255,255,255,.1);max-height:0;overflow:hidden;
    transition:max-height .35s var(--ease);
  }
  .nav.open{max-height:360px;padding-block:12px}
  .nav a{padding:12px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.1)}
}

/* ---------- hero (accueil) ---------- */
.hero{background:var(--vert);color:#fff;position:relative;overflow:hidden}
.hero--photo{min-height:min(76vh,640px);display:grid;align-items:center}
.hero--photo .hero__bg{position:absolute;inset:0}
.hero--photo .hero__bg img{width:100%;height:100%;object-fit:cover}
.hero--photo .hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,30,27,.94) 0%,rgba(13,43,40,.85) 40%,rgba(13,43,40,.5) 72%,rgba(13,43,40,.28) 100%)}
.hero--photo .hero__inner{position:relative;max-width:var(--max);margin:0 auto;width:100%;
  padding:clamp(60px,9vw,110px) var(--pad)}
.hero--photo h1{color:#fff;font-style:italic;max-width:17ch}
.hero--photo .lead{color:rgba(255,255,255,.92);max-width:50ch;margin-top:1.4rem}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:rgba(255,255,255,.1)}
.hero__grid{
  max-width:var(--max);margin:0 auto;padding:clamp(56px,8vw,104px) var(--pad);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;
}
@media (max-width:880px){.hero__grid{grid-template-columns:1fr}}
.hero h1{color:#fff;font-style:italic;font-weight:500;max-width:16ch}
.hero .baseline{
  font-family:var(--serif);font-style:italic;font-size:clamp(.98rem,1.4vw,1.15rem);
  color:var(--vert-clair);margin:0 0 1.2rem;
}
.hero p.lead{color:rgba(255,255,255,.88);max-width:48ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem}
.hero__figure{background:var(--creme);padding:clamp(18px,2.5vw,30px);position:relative}
.hero__figure img{width:100%;height:auto;display:block}
.hero__figure figcaption{
  font-family:var(--serif);font-style:italic;color:var(--vert);
  text-align:center;padding-top:14px;font-size:.95rem;
}

/* bandeau de page intérieure */
.pagehead{background:var(--vert);color:#fff;padding:clamp(44px,6.5vw,84px) 0}
.pagehead__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,72px);align-items:end}
.pagehead h1{color:#fff;font-style:italic}
.pagehead p{color:rgba(255,255,255,.88);margin:0}
.pagehead a{color:#fff}
@media (max-width:820px){.pagehead__grid{grid-template-columns:1fr;align-items:start}}

/* ---------- sections ---------- */
section{padding:clamp(48px,7vw,96px) 0}
.section--tight{padding-block:clamp(32px,4vw,56px)}
.section--vert{background:var(--vert);color:#fff}
.section--vert .eyebrow{color:var(--vert-clair)}
.section--vert h2,.section--vert h3{color:#fff}
.section--creme{background:var(--creme)}
.intro{max-width:70ch}

/* panneau crème générique (booklet) */
.panel{background:var(--creme);padding:clamp(26px,4vw,48px)}
.panel__title{
  font-family:var(--serif);font-style:italic;font-weight:500;color:var(--titre);
  font-size:clamp(1.15rem,2vw,1.5rem);text-align:center;margin:0 0 1.6em;
}

/* ---------- grille produits ---------- */
.grid{display:grid;gap:clamp(20px,2.6vw,34px)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){.grid--4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.grid--4,.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid--4,.grid--3{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:340px){.grid--4,.grid--3{grid-template-columns:1fr}}

.card{background:var(--blanc);text-decoration:none;color:inherit;display:flex;flex-direction:column;
  border:1px solid var(--ligne-creme);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(13,43,40,.12);border-color:var(--ligne)}
.card__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:16px}
.card__media img{width:100%;height:100%;object-fit:contain;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.card__media .card__alt{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);
  object-fit:contain;opacity:0}
.card:hover .card__media .card__alt{opacity:1}
.card:hover .card__media .card__first{opacity:0}
.card:hover .card__media img.solo{transform:scale(1.045)}
.card__badge{
  position:absolute;top:10px;left:10px;z-index:2;
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--vert);background:rgba(255,255,255,.94);border:1px solid var(--vert);
  padding:.32em .65em;line-height:1;
}
.card__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:5px;flex:1;
  border-top:1px solid var(--ligne-creme)}
.card__cat{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.card__name{font-family:var(--serif);font-size:1.1rem;line-height:1.3;color:var(--titre)}
.card__price{margin-top:auto;padding-top:.5em;font-size:.95rem;color:var(--vert);font-weight:400}
.card__carat{font-size:.74rem;color:var(--gris)}

/* ---------- filtres boutique ---------- */
.shopbar{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between;
  padding-bottom:22px;border-bottom:1px solid var(--ligne);margin-bottom:clamp(24px,4vw,44px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--ligne);background:transparent;color:var(--encre);
  padding:.5em 1.1em;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:.76rem;letter-spacing:.06em;font-weight:300;
  transition:all .25s var(--ease);
}
.chip:hover{border-color:var(--vert);color:var(--vert)}
.chip[aria-pressed="true"]{background:var(--vert);border-color:var(--vert);color:#fff}
.shopbar select{
  font-family:var(--sans);font-size:.82rem;padding:.55em 2.2em .55em .9em;
  border:1px solid var(--ligne);background:var(--blanc);color:var(--encre);border-radius:0;
}
.count{font-size:.82rem;color:var(--gris)}

/* ---------- fiche produit ---------- */
.product-head{text-align:center;padding-top:clamp(30px,4vw,52px)}
.product-head .crumbs{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin-bottom:1.2em}
.product-head .crumbs a{text-decoration:none;color:var(--vert)}
.product-head h1{font-style:italic}
.price-line{margin:.7em 0 0;font-family:var(--sans)}
.price-line .price{font-size:clamp(1.35rem,2.4vw,1.8rem);color:var(--vert);font-weight:500;letter-spacing:.02em}
.price-line .per-carat{display:block;font-size:.9rem;color:var(--gris);margin-top:.15em}

.product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start;
  margin-top:clamp(28px,4vw,48px)}
@media (max-width:900px){.product{grid-template-columns:1fr}}
.gallery{display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:start}
.gallery__main{background:#fff;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--ligne-creme);
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,2vw,26px)}
.gallery__main img{width:100%;height:100%;object-fit:contain;transition:opacity .3s}
.gallery__thumbs{display:flex;flex-direction:column;gap:10px;order:-1}
.gallery__thumbs button{width:78px;height:78px;padding:6px;border:1px solid var(--ligne);
  background:#fff;cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;
  transition:border-color .25s}
.gallery__thumbs button:hover{border-color:var(--vert-clair)}
.gallery__thumbs button[aria-current="true"]{border-color:var(--vert)}
.gallery__thumbs img{width:100%;height:100%;object-fit:contain}
@media (max-width:640px){
  .gallery{grid-template-columns:1fr}
  .gallery__thumbs{flex-direction:row;order:0}
}

/* panneau certification (booklet) */
.certif{margin-top:clamp(36px,5vw,60px)}
.certif__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,44px)}
@media (max-width:700px){.certif__grid{grid-template-columns:1fr}}
.spec{display:flex;gap:16px;align-items:flex-start;padding:.85em 0}
.spec + .spec{border-top:1px solid var(--ligne-creme)}
.spec svg{flex:none;width:34px;height:34px;color:var(--vert);opacity:.85;margin-top:.15em}
.spec dl{margin:0}
.spec dt{display:inline;font-weight:500;color:var(--titre);font-size:.88rem}
.spec dd{display:inline;margin:0;font-size:.88rem}
.spec .row{display:block;line-height:1.6}

/* œil de l'expert */
.expert{max-width:78ch;margin:0 auto}
.expert__title{
  font-family:var(--serif);font-style:italic;font-weight:500;text-align:center;
  font-size:clamp(1.15rem,2vw,1.45rem);color:var(--titre);margin:0 0 1.2em;
}
.expert p{font-size:.96rem}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6em;justify-content:flex-start}
.actions .btn{padding:.85em 1.6em;font-size:.74rem}
.note{font-size:.83rem;color:var(--gris);margin-top:1.2em;line-height:1.7}

/* certificat pleine largeur */
.certificat{display:block;margin:1.6rem auto 0;max-width:820px;background:#fff;
  border:1px solid var(--ligne);padding:clamp(12px,2vw,22px);
  transition:border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.certificat:hover{border-color:var(--vert);box-shadow:0 14px 34px rgba(13,43,40,.12);transform:translateY(-2px)}
.certificat img{width:100%;height:auto}

/* ---------- listes d'arguments ---------- */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.8em}
.ticks--2{grid-template-columns:1fr 1fr;gap:.8em 3rem}
@media (max-width:760px){.ticks--2{grid-template-columns:1fr}}
.ticks li{position:relative;padding-left:1.7em;font-size:.97rem}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  background:currentColor;opacity:.5;transform:rotate(45deg)}
.ticks li strong{font-weight:500}

/* bande guide (accueil, section verte) */
.guide-bande{margin-top:2.2em;padding:1.4em 1.6em;border:1px solid rgba(255,255,255,.25);
  display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.guide-bande p{margin:0;max-width:58ch}

/* ---------- composition de l'accueil (reprise du site d'origine) ---------- */

/* hero scindé : bloc plein / photo sur blanc */
.split-hero{display:grid;grid-template-columns:1fr 1fr;min-height:min(72vh,600px)}
@media (max-width:820px){.split-hero{grid-template-columns:1fr}}
.split-hero__bloc{background:var(--vert);color:#fff;display:grid;place-items:center;
  padding:clamp(48px,7vw,90px) var(--pad)}
.split-hero__contenu{max-width:460px;text-align:center}
.split-hero__contenu h1{
  color:#fff;font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1.32;
  text-transform:uppercase;letter-spacing:.03em;font-weight:500;font-style:normal}
.split-hero__contenu p{color:rgba(255,255,255,.88);margin:1.6em auto 2em;max-width:40ch;font-size:.98rem}
.split-hero__photo{background:#fff;overflow:hidden}
.split-hero__photo img{width:100%;height:100%;object-fit:cover;min-height:320px}
.btn--pill{border-radius:999px;background:transparent;border-color:rgba(255,255,255,.75);color:#fff;
  padding:.9em 2.4em;text-transform:none;letter-spacing:.06em;font-size:.9rem}
.btn--pill:hover{background:#fff;border-color:#fff;color:var(--vert);transform:none}

/* titre de section centré, grand serif */
.titre-collection{font-size:clamp(2.1rem,4.4vw,3.4rem);color:var(--vert);font-weight:500}

/* carrousel produits */
.carrousel{position:relative;margin-top:clamp(28px,4vw,48px)}
.carrousel__piste{display:grid;grid-auto-flow:column;gap:clamp(16px,2vw,28px);
  grid-auto-columns:calc((100% - 3*clamp(16px,2vw,28px))/4);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-block:10px;scrollbar-width:none}
.carrousel__piste::-webkit-scrollbar{display:none}
.carrousel__piste .card{scroll-snap-align:start}
@media (max-width:1024px){.carrousel__piste{grid-auto-columns:calc((100% - 2*clamp(16px,2vw,28px))/3)}}
@media (max-width:760px){.carrousel__piste{grid-auto-columns:calc((100% - clamp(16px,2vw,28px))/2)}}
@media (max-width:480px){.carrousel__piste{grid-auto-columns:78%}}
.carrousel__fleche{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--ligne);background:#fff;
  color:var(--vert);font-size:1.6rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(13,43,40,.12);transition:background .2s,color .2s}
.carrousel__fleche:hover{background:var(--vert);color:#fff}
.carrousel__fleche--g{left:clamp(4px,1.5vw,20px)}
.carrousel__fleche--d{right:clamp(4px,1.5vw,20px)}
.carrousel__fleche[disabled]{opacity:.35;pointer-events:none}

/* Les + : photo / bloc plein */
.split-plus{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
@media (max-width:820px){.split-plus{grid-template-columns:1fr}}
.split-plus__photo{overflow:hidden;background:var(--vert)}
.split-plus__photo img{width:100%;height:100%;object-fit:cover;min-height:320px}
.split-plus__bloc{background:var(--vert);color:#fff;display:grid;align-items:center;
  padding:clamp(48px,6vw,84px) var(--pad)}
.split-plus__contenu{max-width:520px}
.split-plus__contenu h2{color:#fff;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:500;margin-bottom:1.2em}
.split-plus__contenu ul{margin:0;padding-left:1.15em;display:grid;gap:.55em}
.split-plus__contenu li{font-size:.94rem;line-height:1.65;color:rgba(255,255,255,.92)}
.split-plus__contenu li::marker{color:var(--vert-clair)}
.split-plus__contenu a{color:#fff;text-underline-offset:3px}
.split-plus__contenu p{color:rgba(255,255,255,.92);font-size:.95rem}

/* atouts : 4 colonnes centrées, grands pictos fins */
.atouts{display:grid;grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.atouts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.atouts{grid-template-columns:1fr}}
.atout{padding:clamp(44px,4.5vw,64px) clamp(22px,2.4vw,34px);min-height:380px;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.atout svg{width:clamp(64px,6vw,88px);height:clamp(64px,6vw,88px);margin-bottom:1.4em;opacity:.95}
.atout h3{font-size:clamp(1rem,1.4vw,1.2rem);text-transform:uppercase;letter-spacing:.06em;
  font-style:normal;font-weight:500;margin-bottom:1em;color:inherit}
.atout p{margin:0 0 .7em;font-size:.93rem;line-height:1.75;max-width:30ch}
.atout--a{background:#1c2b3a;color:#fff}
.atout--b{background:#3e6459;color:#fff}
.atout--b h3{color:#b5d8c6}
.atout--c{background:#e8eae3;color:var(--encre)}
.atout--c h3,.atout--c svg{color:var(--vert)}
.atout--d{background:#c3d4cd;color:var(--encre)}
.atout--d h3,.atout--d svg{color:#1c2b3a}
.atout--a h3{color:#fff}

/* dispositif (accueil) */
.dispo{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
@media (max-width:880px){.dispo{grid-template-columns:1fr}}
.dispo__item{background:var(--blanc);border:1px solid var(--ligne-creme);padding:clamp(24px,3vw,36px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.dispo__item:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(13,43,40,.1)}
.dispo__item svg{width:40px;height:40px;color:var(--vert);margin-bottom:1em}
.dispo__item h3{font-size:1.12rem;margin-bottom:.55em}
.dispo__item p{margin:0;font-size:.93rem;color:var(--encre)}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ligne)}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pillars{grid-template-columns:1fr}}
.pillar{background:var(--fond);padding:clamp(26px,3vw,40px)}
.pillar h3{margin-bottom:.5em;font-size:1.08rem;font-style:italic}
.pillar p{margin:0;font-size:.92rem;color:var(--encre)}

/* ---------- à propos (composition du site d'origine) ---------- */
.apropos-hero{display:grid;grid-template-columns:3fr 1.15fr;min-height:620px}
@media (max-width:880px){.apropos-hero{grid-template-columns:1fr}}
.apropos-hero__bloc{background:var(--vert);color:#fff;display:grid;align-items:center;
  padding:clamp(48px,6vw,84px) var(--pad)}
.apropos-hero__contenu{max-width:560px;margin-left:clamp(0px,8vw,120px)}
.apropos-hero__contenu h1{color:#fff;font-size:clamp(2.4rem,4.6vw,3.6rem)}
.apropos-hero__contenu h2{color:#fff;font-size:clamp(1.25rem,2vw,1.7rem);margin:.5em 0 1.2em}
.apropos-hero__contenu p{color:rgba(255,255,255,.9);font-size:.97rem}
.apropos-hero__appel{font-family:var(--serif);font-style:normal;color:var(--vert-clair)!important;
  font-size:clamp(1.15rem,1.8vw,1.5rem)!important;line-height:1.45;margin:1.4em 0 1.6em}
.apropos-hero__guide{background:#3e6459;color:#fff;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9em;
  padding:clamp(44px,5vw,70px) clamp(22px,2.5vw,40px)}
.apropos-hero__guide h2{color:#b5d8c6;text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(1.1rem,1.7vw,1.4rem);font-weight:500}
.apropos-hero__guide .auteurs{margin:0;font-size:.92rem;color:rgba(255,255,255,.85)}
.apropos-hero__guide .guide-cover{max-width:180px;margin:.4em auto;box-shadow:0 16px 36px rgba(0,0,0,.35)}
.apropos-hero__guide .sig{color:#fff}

.atouts--apropos .atout--liste{background:#c3d4cd;color:var(--encre);align-items:flex-start;text-align:left}
.atouts--apropos .atout--liste svg{color:var(--vert);align-self:center}
.atouts--apropos .atout--liste h3{color:var(--vert);align-self:center}
.atouts--apropos .atout--liste ul{margin:0;padding-left:1.1em;display:grid;gap:.55em}
.atouts--apropos .atout--liste li{font-size:.9rem;line-height:1.6}
.atouts--apropos .atout--a{background:#1c2b3a}
.atouts--apropos .atout--a svg{color:#fff}
.atouts--apropos .atout--a h3{color:#b5d8c6}
.atouts--apropos .atout--b{background:#3e6459}
.atouts--apropos .atout--b h3{color:#b5d8c6}
.atouts--apropos .atout--c{background:#e8eae3;color:var(--encre)}
.atouts--apropos .atout--c svg,.atouts--apropos .atout--c h3{color:var(--vert)}

/* ---------- deux colonnes (à propos) ---------- */
.split{display:grid;grid-template-columns:1.15fr .85fr;min-height:520px}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.split__left{background:var(--vert);color:#fff;padding:clamp(40px,6vw,84px) var(--pad)}
.split__right{background:var(--creme);color:var(--titre);padding:clamp(40px,6vw,84px) var(--pad);text-align:center}
.split__left h1,.split__left h2{color:#fff;font-style:italic}
.split__inner{max-width:600px;margin-left:auto;padding-right:clamp(0px,3vw,40px)}
.guide-cover{max-width:220px;margin:1.6rem auto;box-shadow:0 20px 44px rgba(13,43,40,.3)}

/* ---------- formulaire ---------- */
.form{display:grid;gap:20px;max-width:620px}
.field{display:grid;gap:6px}
.field label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.field input,.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--encre);
  border:0;border-bottom:1px solid var(--ligne);background:transparent;padding:.6em 0;border-radius:0;
  transition:border-color .25s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--vert)}
.field textarea{min-height:130px;resize:vertical}
.form-status{margin-top:1em;padding:.9em 1.1em;font-size:.9rem;display:none}
.form-status.ok{display:block;background:#e7efe9;border-left:3px solid var(--vert);color:#173d33}
.form-status.ko{display:block;background:#fdecec;border-left:3px solid #b3423f;color:#7a2422}
.form-status.wait{display:block;background:var(--creme-2);border-left:3px solid var(--gris);color:var(--encre)}

/* ---------- lieux ---------- */
.places{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,48px)}
@media (max-width:760px){.places{grid-template-columns:1fr}}
.place{background:var(--blanc);padding:clamp(26px,3vw,40px);border-left:3px solid var(--vert);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.place:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(13,43,40,.1)}
.place h3{font-size:1.2rem;margin-bottom:.4em;font-style:italic}
.place address{font-style:normal;color:var(--encre);line-height:1.9;font-size:.95rem}
.place .tag{display:inline-block;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--vert);border:1px solid var(--vert);padding:.3em .75em;margin-bottom:1em}

/* ---------- pied de page ---------- */
.site-footer{background:var(--vert);color:rgba(255,255,255,.75);padding:clamp(44px,5vw,68px) 0 26px;font-size:.88rem}
.site-footer a{color:rgba(255,255,255,.75);text-decoration:none;transition:color .2s}
.site-footer a:hover{color:#fff}
.site-footer .brand{color:#fff;align-items:flex-start}
.site-footer .baseline{
  font-family:var(--serif);font-style:italic;color:var(--vert-clair);
  margin-top:1.1em;max-width:34ch;font-size:.95rem;line-height:1.6;
}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr}}
.site-footer h4{font-family:var(--sans);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin:0 0 1.1em;font-weight:500}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.6em}
.copyright{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.55)}

/* ---------- tiroir sélection ---------- */
.drawer{position:fixed;inset:0 0 0 auto;width:min(420px,100%);background:var(--fond);
  transform:translateX(100%);transition:transform .38s var(--ease);z-index:80;display:flex;flex-direction:column;
  box-shadow:-16px 0 44px rgba(13,43,40,.22)}
.drawer.open{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad);
  border-bottom:1px solid var(--ligne);background:var(--creme)}
.drawer__head strong{font-family:var(--serif);font-style:italic;font-size:1.25rem;font-weight:500;color:var(--titre)}
.drawer__body{flex:1;overflow:auto;padding:16px var(--pad)}
.drawer__foot{padding:20px var(--pad);border-top:1px solid var(--ligne)}
.drawer__item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--ligne)}
.drawer__item img{width:58px;height:58px;object-fit:contain;background:#fff;border:1px solid var(--ligne-creme)}
.drawer__item button{background:none;border:0;cursor:pointer;color:var(--gris);font-size:1.1rem}
.scrim{position:fixed;inset:0;background:rgba(13,43,40,.5);opacity:0;pointer-events:none;transition:opacity .38s;z-index:70}
.scrim.open{opacity:1;pointer-events:auto}

/* ---------- pages légales ---------- */
.legal{max-width:78ch}
.legal h2{font-size:clamp(1.2rem,2.2vw,1.55rem);margin:2.4em 0 .7em;font-style:italic}
.legal h2:first-of-type{margin-top:1.6em}
.legal ul{padding-left:1.2em;margin:0 0 1.1em}
.legal li{margin-bottom:.4em}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--creme);padding:.15em .4em}
.legal-table{width:100%;border-collapse:collapse;margin:1.2em 0 1.8em}
.legal-table th,.legal-table td{text-align:left;padding:.8em 1em .8em 0;
  border-bottom:1px solid var(--ligne);vertical-align:top;font-weight:300}
.legal-table th{width:38%;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);font-weight:500;padding-right:1.6em}
@media (max-width:620px){
  .legal-table th,.legal-table td{display:block;width:auto;border:0;padding:0}
  .legal-table th{padding-top:1.1em}
  .legal-table td{padding-bottom:.9em;border-bottom:1px solid var(--ligne)}
}
.todo{display:inline-block;background:#f6ecd2;border-bottom:2px solid #b99936;
  color:#5a4a10;padding:.1em .45em;font-size:.92em}
.placeholder-notice{background:#f6ecd2;border-left:3px solid #b99936;padding:16px 20px;
  margin-bottom:2rem;font-size:.9rem;color:#5a4a10}

/* specs héritées (tableau simple, pages sans panneau booklet) */
.specs{width:100%;border-collapse:collapse;margin:1.6em 0}
.specs th,.specs td{text-align:left;padding:.72em 0;border-bottom:1px solid var(--ligne);vertical-align:top}
.specs th{width:42%;font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.specs td{font-size:.95rem}