/* =========================================================
   RÉSEAU PRODUITS
   Noir profond + or #D39B3E (échantillonné dans le logo)
   Titres Cormorant Garamond, secondaire Barlow Condensed
   ========================================================= */

:root{
  --noir:#070707;
  --noir-2:#0B0C0D;
  --ligne:rgba(255,255,255,.10);
  --or:#D39B3E;
  --or-clair:#E8C07C;
  --blanc:#FFFFFF;
  --gris:#B7BABC;
  --gris-2:#878B8E;

  /* duree de l'ecran de marque a l'ouverture */
  --intro:1.95s;

  --max:1200px;
  --pad:clamp(20px,5vw,48px);
  --r:12px;

  --f-titre:'Cormorant','Cormorant Garamond',Georgia,'Times New Roman',serif;
  --f-texte:'Barlow Cond','Barlow Condensed','Roboto Condensed',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--noir);
  color:var(--gris);
  font-family:var(--f-texte);
  /* Barlow Condensed est étroit : on monte le corps et l'interligne */
  font-size:clamp(17px,1.2vw,18.5px);
  line-height:1.66;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3{
  font-family:var(--f-titre);
  color:var(--blanc);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.005em;
  margin:0 0 .42em;
}
h1{font-size:clamp(2.7rem,6.6vw,5.1rem);line-height:1.07}
h2{font-size:clamp(2.05rem,4.1vw,3.25rem);line-height:1.09}
h3{font-size:clamp(1.35rem,2vw,1.65rem);line-height:1.15}
h4{
  font-family:var(--f-texte);font-size:.86rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin:0 0 .75rem;
}
p{margin:0 0 1em}
strong,b{color:#E9EAEA;font-weight:600}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--or);color:#000;padding:12px 20px;font-weight:600;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:4px}

/* ---------- Amorces de section ---------- */
.kicker{
  font-family:var(--f-texte);font-size:.84rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--or);
  margin:0 0 1.05rem;display:flex;align-items:center;gap:.62rem;
}
.kicker svg{
  width:23px;height:23px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  overflow:visible;
  transform:translateY(-1px);
}
.lead{font-size:clamp(1.06rem,1.4vw,1.22rem);color:#C8CBCC}
.intro{max-width:780px}

/* ---------- Boutons ---------- */
.btn{
  --bg:transparent;--fg:#fff;--bd:currentColor;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--f-texte);font-weight:600;font-size:.94rem;
  letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;padding:.82em 1.85em;border-radius:4px;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
  cursor:pointer;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{--bg:var(--or);--fg:#0A0A0A;--bd:var(--or);box-shadow:0 8px 24px -14px rgba(211,155,62,.9)}
.btn-gold:hover{--bg:var(--or-clair);--bd:var(--or-clair)}
.btn-ghost{--bd:rgba(255,255,255,.28);--fg:#fff}
.btn-ghost:hover{--bd:var(--or);color:var(--or)}
.btn-dark{--bg:#0A0A0A;--fg:#fff;--bd:#0A0A0A}
.btn-dark:hover{--bg:#000}
.btn-sm{padding:.62em 1.25em;font-size:.86rem}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* ---------- Devise de marque ---------- */
.devise{
  font-family:var(--f-texte);font-weight:500;font-size:clamp(.95rem,1.4vw,1.08rem);
  letter-spacing:.2em;text-transform:uppercase;color:#E0E2E3;margin:0;
}
.devise i{font-style:normal;color:var(--or);padding-inline:.35em;opacity:.8}
.devise.petite{font-size:.84rem;letter-spacing:.17em;color:var(--gris-2)}

/* =========================================================
   ÉCRAN DE MARQUE À L'OUVERTURE
   Le logo occupe l'écran, tient une seconde, puis s'efface
   pendant que le site se met en place derrière. Durée totale
   2,6 s, tout en CSS : aucun script n'est nécessaire, donc
   l'effet passe aussi là où le JavaScript est bloqué.
   ========================================================= */
.intro-marque{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;
  background:var(--noir);
  animation:marque-sortie .85s cubic-bezier(.55,0,.35,1) calc(var(--intro) - .1s) both;
}
.intro-marque > div{display:grid;justify-items:center;gap:1.6rem;padding:var(--pad)}
.intro-marque img{
  width:min(42vw,208px);height:auto;border-radius:18px;
  animation:marque-logo 1s cubic-bezier(.2,.7,.25,1) .1s both;
}
.intro-marque .devise{
  animation:marque-devise .9s cubic-bezier(.2,.7,.25,1) .55s both;
  text-align:center;
}
@keyframes marque-logo{
  from{opacity:0;transform:scale(.88)}
  to  {opacity:1;transform:none}
}
@keyframes marque-devise{
  from{opacity:0;transform:translateY(10px);letter-spacing:.34em}
  to  {opacity:1;transform:none}
}
@keyframes marque-sortie{
  from{opacity:1;visibility:visible}
  99% {opacity:0;visibility:visible}
  to  {opacity:0;visibility:hidden}
}

/* =========================================================
   EN-TÊTE
   ========================================================= */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease;
}
.site-header.scrolled{
  background:rgba(7,7,7,.9);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--ligne);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.8rem}

.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.brand-mark{width:44px;height:44px;border-radius:8px;flex:none}
.brand-text{
  font-family:var(--f-texte);font-weight:600;font-size:1.02rem;letter-spacing:.2em;
  color:var(--or);text-transform:uppercase;line-height:1;
}
.brand-text strong{color:var(--blanc);font-weight:600}

.nav{display:flex;align-items:center;gap:clamp(.9rem,1.9vw,1.85rem)}
.nav a{
  font-family:var(--f-texte);font-size:.98rem;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:#D5D8D9;text-decoration:none;position:relative;padding:.3rem 0;
  transition:color .2s ease;
}
.nav a.btn{padding:.62em 1.25em;text-transform:uppercase}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--or);transition:width .26s ease}
.nav a:not(.btn):hover{color:var(--blanc)}
.nav a:not(.btn):hover::after,.nav a.active::after{width:100%}
.nav a.active{color:var(--or)}

.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:10px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .3s ease,opacity .25s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

@media (max-width:1000px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(88vw,340px);
    background:rgba(9,9,10,.98);backdrop-filter:blur(18px);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:1.3rem;padding:2rem clamp(24px,7vw,44px);
    transform:translateX(100%);transition:transform .38s cubic-bezier(.6,.05,.2,1);
    border-left:1px solid var(--ligne);
  }
  .nav.open{transform:translateX(0)}
  .nav a{font-size:1.2rem}
  .nav-cta{margin-top:.4rem}
}

/* =========================================================
   HÉROS
   ========================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-block:clamp(118px,16vh,168px) clamp(56px,10vh,88px);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;will-change:transform,opacity}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:72% 45%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(4,5,6,.97) 0%,rgba(4,5,6,.91) 34%,rgba(4,5,6,.58) 62%,rgba(4,5,6,.7) 100%),
    radial-gradient(120% 90% at 0% 55%,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 60%),
    linear-gradient(to top,var(--noir) 1%,rgba(7,7,7,0) 44%);
}
.hero-inner{position:relative;z-index:2;max-width:920px;will-change:transform,opacity}
.eyebrow{
  font-family:var(--f-texte);font-size:.88rem;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--or);margin-bottom:1.5rem;
}
.hero h1{margin-bottom:1rem;text-wrap:balance}
.hero h1 em{font-style:italic;font-weight:600;color:var(--or)}
.hero .lead{max-width:54ch;margin-bottom:2.1rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:3rem}
.hero .devise{padding-top:1.4rem;border-top:1px solid var(--ligne);max-width:620px}

/* entrée du héros au chargement */
.hero-inner>*{animation:apparait .9s cubic-bezier(.2,.65,.25,1) both}
.hero-inner>*:nth-child(1){animation-delay:calc(var(--intro) + .05s)}
.hero-inner>*:nth-child(2){animation-delay:calc(var(--intro) + .14s)}
.hero-inner>*:nth-child(3){animation-delay:calc(var(--intro) + .24s)}
.hero-inner>*:nth-child(4){animation-delay:calc(var(--intro) + .34s)}
.hero-inner>*:nth-child(5){animation-delay:calc(var(--intro) + .44s)}
@keyframes apparait{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.scroll-hint{position:absolute;left:50%;bottom:24px;translate:-50% 0;z-index:3;width:23px;height:38px;border:1.5px solid rgba(255,255,255,.28);border-radius:13px;display:grid;place-items:start center;padding-top:7px}
.scroll-hint span{width:3px;height:8px;border-radius:2px;background:var(--or);animation:sd 1.9s ease-in-out infinite}
@keyframes sd{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(11px);opacity:.25}}
@media (max-width:1000px){.scroll-hint{display:none}}

/* =========================================================
   BANDE ANNONCE
   ========================================================= */
.annonce{background:var(--or);color:#0A0A0A}
.annonce-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-block:.85rem}
.annonce p{margin:0;font-size:1rem;font-weight:400;letter-spacing:.02em}
.annonce b{color:#0A0A0A;font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.9rem}
.annonce time{font-weight:600}
.annonce a{
  font-weight:600;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:#0A0A0A;
  text-decoration:none;border-bottom:1.5px solid rgba(10,10,10,.4);padding-bottom:1px;
}
.annonce a:hover{border-bottom-color:#0A0A0A}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{padding-block:clamp(68px,10vw,124px);overflow-x:clip}
/* clip et non hidden : hidden ferait de la section un conteneur de
   defilement et casserait les animations liees au defilement */
.section-alt{background:var(--noir-2)}
.section-serre{padding-top:clamp(34px,5vw,62px)}

.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.1rem,5vw,4.4rem);align-items:center}
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr;gap:2.3rem}
}

.hl{border-left:2px solid var(--or);padding-left:1.05rem;color:#DFE1E2}

.ticks{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.55rem}
.ticks li{position:relative;padding-left:1.6rem;font-size:1rem}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.48em;width:6px;height:11px;
  border:1.7px solid var(--or);border-top:0;border-left:0;transform:rotate(42deg);
}

/* ---------------------------------------------------------
   Titre a gauche, texte a droite
   Remplace les blocs image + texte : le rythme vient de la
   mise en page, pas d'une photo posee a cote du paragraphe.
   --------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(280px,.86fr) 1fr;gap:clamp(1.8rem,5vw,4.5rem);align-items:start}
.split-titre h2{margin-bottom:0}
.split-texte>p:first-child{margin-top:.25rem}
.mention{
  font-family:var(--f-texte);font-size:.86rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gris-2);
  margin:1.1rem 0 0;display:inline-block;
  border:1px solid var(--ligne);border-radius:4px;padding:.35rem .8rem;
}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:1.6rem}
}

/* ---------- Secteurs ---------- */
.secteurs{margin-top:clamp(2.6rem,5vw,4rem)}
.secteurs h3{
  font-family:var(--f-texte);font-size:.84rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gris-2);margin-bottom:1.1rem;
}
.secteurs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.secteurs li{
  border:1px solid var(--ligne);border-radius:999px;
  padding:.35rem 1.05rem;font-size:.98rem;letter-spacing:.05em;color:#CFD2D3;
  transition:border-color .25s ease,color .25s ease;
}
.secteurs li:hover{border-color:rgba(211,155,62,.55);color:var(--or)}

/* ---------------------------------------------------------
   Photo depuis un bord de l'ecran
   La photo demarre au bord de la fenetre et se dissout de
   l'autre cote, dans la marge. Pas de recadrage : elle est
   montree entiere. Le texte reste aligne sur la grille du
   reste de la page.
   --------------------------------------------------------- */
.bord{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:clamp(1.8rem,4vw,3.6rem);
}
.bord-texte{padding-block:clamp(.5rem,2vw,1.5rem)}
.bord-photo-droite .bord-texte{
  padding-left:max(var(--pad),(100vw - var(--max)) / 2);
  padding-right:var(--pad);
}
/* le bord interieur de la photo de droite est adouci, sinon la coupe
   verticale est trop franche contre le noir */
.bord-photo-droite .bord-visuel img{
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 4%,#000 62%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:
    linear-gradient(to right,transparent 0,#000 4%,#000 62%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.bord-photo-gauche .bord-texte{
  padding-right:max(var(--pad),(100vw - var(--max)) / 2);
  padding-left:var(--pad);
}
.bord-visuel{margin:0}
.bord-visuel img{width:100%;height:auto}
/* le fondu tombe toujours a droite : les sujets (le micro a gauche
   du cadre, les personnes au centre) restent nets dans les deux sens */
.bord-visuel img{
  -webkit-mask-image:
    linear-gradient(to right,#000 0,#000 62%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:
    linear-gradient(to right,#000 0,#000 62%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
@media (max-width:900px){
  .bord{grid-template-columns:1fr;gap:1.6rem}
  .bord-photo-gauche .bord-visuel{order:-1}
  .bord-texte{padding-inline:var(--pad) !important}
  .bord-visuel img{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 76%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 76%,transparent 100%);
  }
}

/* ---------- Événement vedette ---------- */
.event-feature{
  display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(1.6rem,3.6vw,3rem);align-items:center;
  margin-top:clamp(2.4rem,4.5vw,3.4rem);
}
.event-poster{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--ligne)}
.event-poster img{width:100%;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.event-poster:hover img{transform:scale(1.025)}
.event-date{
  font-family:var(--f-texte);font-weight:600;color:var(--or);
  font-size:clamp(1.1rem,1.8vw,1.32rem);letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:.9rem;
}
@media (max-width:900px){.event-feature{grid-template-columns:1fr}}

/* ---------- Liste des formats ---------- */
.formats-list{margin:clamp(2.6rem,5vw,4rem) auto 0}
.formats-list>div{
  padding:1.4rem 0;border-top:1px solid var(--ligne);
  display:grid;grid-template-columns:minmax(180px,.4fr) 1fr;gap:.35rem 2.5rem;
}
.formats-list>div:last-child{border-bottom:1px solid var(--ligne)}
.formats-list dt{
  font-family:var(--f-titre);font-weight:600;font-size:1.42rem;color:var(--blanc);
  line-height:1.15;
}
.formats-list dd{margin:0;font-size:1rem}
@media (max-width:760px){
  .formats-list>div{grid-template-columns:1fr;gap:.25rem}
}

/* ---------- Section partenaires ---------- */
.section-gold{
  background:
    radial-gradient(85% 110% at 12% 0%,rgba(211,155,62,.15) 0%,rgba(211,155,62,0) 55%),
    linear-gradient(180deg,var(--noir) 0%,#0F0C07 52%,var(--noir) 100%);
  border-block:1px solid var(--ligne);
  padding-top:0;
}
.section-gold .intro{margin-top:clamp(1rem,2vw,1.8rem)}
/* ---------------------------------------------------------
   Bande pleine largeur
   Une photo qui traverse l'ecran et dont le bord se dissout
   dans le fond de page. Peu d'images, mais grandes : c'est ce
   qui separe une photographie d'une vignette d'illustration.
   --------------------------------------------------------- */
.bande{margin:0;width:100%;overflow:hidden}
.bande img{
  width:100%;height:clamp(230px,40vh,420px);object-fit:cover;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 60%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 60%,transparent 100%);
}
/* en tete de section : bord haut franc, seul le bas se dissout */
.bande-haute img{
  height:auto;max-height:min(38vh,320px);
  border-bottom:1px solid var(--ligne);
  -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);
}
.bande-haute{margin-bottom:clamp(2.8rem,6vw,4.6rem)}
@media (max-width:700px){
  .bande img{height:clamp(200px,34vh,280px)}
}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(2.4rem,4.5vw,3.4rem)}
.tier{padding:0 clamp(1.2rem,2.4vw,2rem);border-left:1px solid var(--ligne)}
.tier:first-child{padding-left:0;border-left:0}
.tier:last-child{padding-right:0}
.tier-num{
  font-family:var(--f-texte);font-weight:600;font-size:1.05rem;color:var(--or);
  margin:0 0 .5rem;letter-spacing:.22em;
}
.tier h3{margin-bottom:.4em}
@media (max-width:880px){
  .tiers{grid-template-columns:1fr;gap:2.2rem}
  .tier{padding:0 0 0 1.2rem;border-left:1px solid var(--ligne)}
  .tier:first-child{padding-left:1.2rem;border-left:1px solid var(--ligne)}
}

.tiers-note{margin-top:clamp(1.8rem,3vw,2.4rem);font-family:var(--f-titre);font-style:italic;font-size:1.2rem;color:var(--gris-2)}

.cta-band{
  margin-top:clamp(2.2rem,4vw,3.2rem);
  background:var(--or);border-radius:var(--r);
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1.5rem,3.2vw,2.8rem);
  display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;
}
.cta-band h3{color:#0A0A0A;margin-bottom:.15rem}
.cta-band p{color:rgba(10,10,10,.78);margin:0}

/* ---------- Fondateur ---------- */
.founder{display:grid;grid-template-columns:250px 1fr;gap:clamp(1.9rem,5vw,3.8rem);align-items:center}
.founder-photo{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);border:1px solid rgba(211,155,62,.3)}
.founder blockquote{
  margin:1.5rem 0 0;padding-left:1.3rem;border-left:2px solid var(--or);
  font-family:var(--f-titre);font-style:italic;font-weight:500;
  font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.38;color:#E6E8E9;
}
.founder blockquote::before{content:"« "}
.founder blockquote::after{content:" »"}
@media (max-width:780px){.founder{grid-template-columns:1fr}.founder-photo{max-width:200px}}

/* ---------- Formulaires ---------- */
input,select,textarea{
  width:100%;font-family:inherit;font-size:1rem;color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid var(--ligne);border-radius:6px;
  padding:.78rem 1rem;transition:border-color .22s ease,background .22s ease;
}
input::placeholder,textarea::placeholder{color:#75797B}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--or);background:rgba(255,255,255,.065)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--or) 50%),linear-gradient(135deg,var(--or) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
select option{background:#111;color:#fff}
textarea{resize:vertical;min-height:118px}

.contact-grid{align-items:start}
.contact-form{
  display:grid;gap:.95rem;
  border:1px solid var(--ligne);border-radius:var(--r);
  padding:clamp(1.4rem,3vw,2.2rem);background:rgba(255,255,255,.02);
}
.field{display:grid;gap:.32rem}
.field label{font-size:.83rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gris-2)}
.form-note{margin:.3rem 0 0;font-size:.95rem;min-height:1.1em;width:100%}
.form-note.ok{color:var(--or)}
.form-note.err{color:#E58080}

.contact-list{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.85rem}
.contact-list li{display:flex;align-items:center;gap:.9rem}
.contact-list a{text-decoration:none;color:#DBDEDF;transition:color .2s ease}
.contact-list a:hover{color:var(--or)}
.ci svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ci{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(211,155,62,.35);border-radius:6px;color:var(--or);
  background:rgba(211,155,62,.05);
}

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.site-footer{background:#050506;border-top:1px solid var(--ligne);padding-top:clamp(44px,6vw,68px)}
.footer-top{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(2rem,5vw,4rem);padding-bottom:clamp(30px,5vw,48px)}
.footer-brand img{border-radius:8px;margin-bottom:.9rem}
.footer-lettre{max-width:390px}
.footer-lettre p{font-size:1rem;margin-bottom:1rem}
.newsletter{display:flex;flex-wrap:wrap;gap:.6rem}
.newsletter input{flex:1 1 190px}

.footer-nav{display:flex;gap:clamp(2rem,4vw,3.5rem)}
.footer-nav div{display:grid;gap:.42rem;align-content:start}
.footer-nav a{font-size:1rem;color:#ACAFB1;text-decoration:none;transition:color .2s ease}
.footer-nav a:hover{color:var(--or)}
@media (max-width:980px){
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:640px){
  .footer-top{grid-template-columns:1fr}
  .footer-nav{flex-wrap:wrap;gap:2rem}
}

.footer-bottom{
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;justify-content:space-between;
  border-top:1px solid var(--ligne);padding-block:1.2rem;
  font-size:.94rem;color:var(--gris-2);
}
.footer-bottom p{margin:0}
.footer-bottom a{color:var(--gris-2);text-decoration:none}
.footer-bottom a:hover{color:var(--or)}

@keyframes heros-sortie{
  from{opacity:1;transform:none}
  to  {opacity:0;transform:translate3d(0,-56px,0)}
}
@keyframes heros-fond{
  from{opacity:1;transform:scale(1)}
  to  {opacity:.45;transform:scale(1.07)}
}

@keyframes devoile{
  from{opacity:0;transform:translate3d(0,64px,0)}
  to  {opacity:1;transform:none}
}
@keyframes devoile-visuel{
  from{opacity:0;transform:translate3d(0,56px,0) scale(1.05);clip-path:inset(42% 0 0 0)}
  to  {opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}

/* =========================================================
   LE SITE SE DEVOILE AU DEFILEMENT
   Chaque element arrive separement : opacite, remontee de
   64 px, flou qui se resorbe. Les visuels s'ouvrent en plus
   par un balayage du bas vers le haut.
   La course est calee sur la hauteur de la fenetre (cover) et
   non sur celle de l'element (entry) : avec entry, un
   paragraphe de 80 px se formait en 80 px de defilement,
   c'est-a-dire trop vite pour etre percu.
   ========================================================= */
@supports (animation-timeline: view()){
  /* les conteneurs ne bougent plus, ce sont leurs elements qui arrivent */
  .reveal,.js .reveal{opacity:1;transform:none;filter:none;animation:none}

  .split-titre > *,
  .split-texte > *,
  .bord-texte > *,
  .intro > *,
  .secteurs > *,
  .event-info > *,
  .founder-text > *,
  .col-text > *,
  .formats-list > div,
  .tiers > .tier,
  .contact-form,
  .cta-band > *,
  .tiers-note,
  .episodes > .episode,
  .js .split-titre > *,
  .js .split-texte > *,
  .js .bord-texte > *,
  .js .intro > *,
  .js .secteurs > *,
  .js .event-info > *,
  .js .founder-text > *,
  .js .col-text > *,
  .js .formats-list > div,
  .js .tiers > .tier,
  .js .contact-form,
  .js .cta-band > *,
  .js .tiers-note,
  .js .episodes > .episode{
    animation:devoile linear both;
    animation-timeline:view();
    animation-range:cover 2% cover 44%;
    will-change:opacity,transform;
  }

  .bande,
  .bord-visuel,
  .event-poster,
  .founder-photo,
  .js .bande,
  .js .bord-visuel,
  .js .event-poster,
  .js .founder-photo{
    animation:devoile-visuel linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 36%;
    will-change:opacity,transform,clip-path;
  }

  /* le heros sort en remontant pendant qu'on descend */
  .hero-inner{
    animation:heros-sortie linear both;
    animation-timeline:scroll(root);
    animation-range:0 78vh;
  }
  .hero-bg{
    animation:heros-fond linear both;
    animation-timeline:scroll(root);
    animation-range:0 78vh;
  }
  .hero-inner>*{animation:apparait .9s cubic-bezier(.2,.65,.25,1) both}
}

/* ---------------------------------------------------------
   Repli pour les navigateurs sans animation liee au
   defilement : le script pose une variable --p entre 0 et 1
   sur les memes elements, le rendu est identique.
   --------------------------------------------------------- */
.js .split-titre > *,
.js .split-texte > *,
.js .bord-texte > *,
.js .intro > *,
.js .secteurs > *,
.js .event-info > *,
.js .founder-text > *,
.js .col-text > *,
.js .formats-list > div,
.js .tiers > .tier,
.js .contact-form,
.js .cta-band > *,
.js .tiers-note,
.js .episodes > .episode{
  opacity:var(--p,0);
  transform:translate3d(0,calc((1 - var(--p,0)) * 64px),0);
}

.js .bande,
.js .bord-visuel,
.js .event-poster,
.js .founder-photo{
  opacity:var(--p,0);
  transform:translate3d(0,calc((1 - var(--p,0)) * 56px),0);
  filter:none;
  clip-path:inset(calc((1 - var(--p,0)) * 42%) 0 0 0);
}


@keyframes devoile-doux{from{opacity:0}to{opacity:1}}
@keyframes marque-doux{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  /* le fondu reste, le mouvement disparait */
  .split-titre > *,
  .split-texte > *,
  .bord-texte > *,
  .intro > *,
  .secteurs > *,
  .event-info > *,
  .founder-text > *,
  .col-text > *,
  .formats-list > div,
  .tiers > .tier,
  .contact-form,
  .cta-band > *,
  .tiers-note,
  .episodes > .episode,
  .bande,
  .bord-visuel,
  .event-poster,
  .founder-photo,
  .js .split-titre > *,
  .js .split-texte > *,
  .js .bord-texte > *,
  .js .intro > *,
  .js .secteurs > *,
  .js .event-info > *,
  .js .founder-text > *,
  .js .col-text > *,
  .js .formats-list > div,
  .js .tiers > .tier,
  .js .contact-form,
  .js .cta-band > *,
  .js .tiers-note,
  .js .episodes > .episode,
  .js .bande,
  .js .bord-visuel,
  .js .event-poster,
  .js .founder-photo{
    animation-name:devoile-doux;
  }
  .js .split-titre > *,
  .js .split-texte > *,
  .js .bord-texte > *,
  .js .intro > *,
  .js .secteurs > *,
  .js .event-info > *,
  .js .founder-text > *,
  .js .col-text > *,
  .js .formats-list > div,
  .js .tiers > .tier,
  .js .contact-form,
  .js .cta-band > *,
  .js .tiers-note,
  .js .episodes > .episode,
  .js .bande,
  .js .bord-visuel,
  .js .event-poster,
  .js .founder-photo{
    transform:none !important;filter:none !important;clip-path:none !important;
  }
  .reveal,.js .reveal{opacity:1;transform:none;filter:none;animation:none}

  .hero-inner,.hero-bg{animation:none !important}
  .hero-inner>*{animation-name:devoile-doux;animation-duration:.6s}

  .intro-marque{animation:marque-sortie .6s linear calc(var(--intro) - .5s) both}
  .intro-marque img{animation:marque-doux .5s linear both}
  .intro-marque .devise{animation:marque-doux .5s linear .3s both}

  .event-poster:hover img{transform:none}
  .scroll-hint span{animation:none}
}

/* =========================================================
   PAGE PODCAST
   En-tete de page, liste des episodes, emplacements
   commanditaires.
   ========================================================= */
.page-tete{
  position:relative;
  display:flex;align-items:flex-end;
  min-height:clamp(400px,58svh,560px);
  padding-block:clamp(132px,16vh,178px) clamp(40px,6vh,64px);
  overflow:hidden;
}
.page-tete-fond{position:absolute;inset:0;z-index:0}
.page-tete-fond img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.page-tete::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(7,7,7,.86) 0%,rgba(7,7,7,.42) 34%,rgba(7,7,7,.88) 86%,var(--noir) 100%),
    linear-gradient(90deg,rgba(7,7,7,.84) 0%,rgba(7,7,7,.44) 48%,rgba(7,7,7,.24) 100%);
}
.page-tete-corps{position:relative;z-index:2;max-width:880px}
.page-tete h1{margin-bottom:.85rem;text-wrap:balance;font-size:clamp(2.4rem,5.4vw,4.3rem)}
.page-tete h1 em{font-style:italic;font-weight:600;color:var(--or)}
.page-tete .lead{max-width:56ch;margin-bottom:1.1rem}
.page-tete-compte{
  font-size:.86rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris-2);margin:0;
}
.page-tete-corps>*{animation:apparait .85s cubic-bezier(.2,.65,.25,1) both}
.page-tete-corps>*:nth-child(1){animation-delay:.05s}
.page-tete-corps>*:nth-child(2){animation-delay:.13s}
.page-tete-corps>*:nth-child(3){animation-delay:.21s}
.page-tete-corps>*:nth-child(4){animation-delay:.29s}
.page-tete-corps>*:nth-child(5){animation-delay:.37s}

/* ---------- Liste des episodes ---------- */
.episodes{margin-top:clamp(2.4rem,4.5vw,3.6rem)}
.episode{
  display:grid;
  grid-template-columns:clamp(78px,9vw,104px) 1fr auto;
  gap:clamp(1.1rem,3vw,2.4rem);
  align-items:start;
  padding-block:clamp(1.5rem,2.6vw,2.1rem);
  border-top:1px solid var(--ligne);
}
.episode:last-child{border-bottom:1px solid var(--ligne)}

.ep-num{display:grid;gap:.55rem;justify-items:start}
.ep-num>span:first-child{
  font-family:var(--f-texte);font-weight:600;
  font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1;
  color:var(--or);letter-spacing:.04em;
}
.ep-pastille{
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris-2);border:1px solid var(--ligne);
  border-radius:3px;padding:.18em .6em;white-space:nowrap;
}
.ep-pastille-live{color:var(--or);border-color:rgba(211,155,62,.5)}

.ep-corps h3{margin-bottom:.22em;text-wrap:balance}
.ep-invite{margin:0;font-size:1rem;color:#DBDEDF}
.ep-invite .ep-entreprise{color:var(--gris-2)}
.ep-invite .ep-entreprise::before{content:"·";padding-inline:.45em;color:var(--ligne)}
.ep-invite-vide{
  font-family:var(--f-titre);font-style:italic;font-size:1.12rem;color:var(--gris-2);
}
.ep-resume{margin:.5rem 0 0;font-size:1rem}
.ep-commandite{
  margin:.95rem 0 0;font-size:.76rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--gris-2);
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.ep-commandite img{max-height:26px;width:auto}
.ep-commandite a{color:inherit;text-decoration:none;transition:color .2s ease}
.ep-commandite a:hover{color:var(--or)}
.ep-commandite-libre a{border-bottom:1px dashed rgba(255,255,255,.22);padding-bottom:2px}

.ep-cote{display:grid;gap:.8rem;justify-items:end;align-content:start}
.ep-meta{
  margin:0;display:flex;gap:.55rem;flex-wrap:wrap;justify-content:flex-end;
  font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-2);
}
.ep-meta span+span::before{content:"·";padding-right:.55em;color:var(--ligne)}

@media (max-width:820px){
  .episode{grid-template-columns:1fr;gap:.85rem}
  .ep-num{grid-auto-flow:column;justify-content:start;align-items:center;gap:.9rem}
  .ep-cote{justify-items:start}
  .ep-meta{justify-content:flex-start}
}

/* ---------- Variante sobre de l'en-tete de page ---------- */
.page-tete-sobre{
  min-height:0;
  padding-block:clamp(126px,15vh,168px) clamp(30px,5vh,52px);
  background:
    radial-gradient(120% 130% at 12% 0%,rgba(211,155,62,.10) 0%,rgba(211,155,62,0) 58%),
    var(--noir);
  border-bottom:1px solid var(--ligne);
}
.page-tete-sobre::after{display:none}
.page-tete-sobre h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}

.ou-ecouter{margin-top:clamp(2.2rem,4vw,3rem)}

.tiers-note a{color:var(--or);text-decoration:none;border-bottom:1px solid rgba(211,155,62,.4)}
.tiers-note a:hover{border-bottom-color:var(--or)}

/* la liste des secteurs sert aussi de liste de domaines recherches */
#commanditer .secteurs{margin-top:clamp(2.2rem,4vw,3.2rem)}
.section-serre > .episodes{margin-top:0}

/* ---------- Page commanditer ---------- */
.cta-band-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.field label .facultatif{
  font-weight:400;letter-spacing:.12em;color:#6E7274;margin-left:.5em;text-transform:none;
}
.form-mention{margin:.2rem 0 0;font-size:.92rem;color:var(--gris-2);line-height:1.5}
#champ-episode[hidden]{display:none}
.section-fin{padding-block:clamp(30px,4vw,54px)}
.rappel-episode{
  margin:0 0 1rem;padding:.7rem 1rem;max-width:60ch;
  border-left:2px solid var(--or);background:rgba(211,155,62,.08);
  color:#DFE1E2;font-size:1rem;
}

/* ---------- Bloc de l'animatrice ---------- */
.founder-anim{grid-template-columns:300px 1fr;align-items:start}
.founder-anim .founder-photo{border-color:rgba(211,155,62,.45)}
.founder-anim .devise{margin:.2rem 0 1.3rem}
.founder-anim p{margin-bottom:1em}
@media (max-width:780px){.founder-anim{grid-template-columns:1fr}}

/* ---------- Prix des forfaits de partenariat ---------- */
/* Barlow et non Cormorant : les chiffres elzeviriens de Cormorant
   rendent « 10 000 $ » illisible, comme pour les numeros de formule. */
.tier-prix{
  font-family:var(--f-texte);font-weight:600;
  font-size:clamp(1.6rem,2.4vw,2.05rem);letter-spacing:.02em;
  color:var(--blanc);margin:-.1rem 0 .55rem;line-height:1.1;
}
.tier-num{margin-bottom:.15rem}
/* piege a robots : jamais vu ni atteint par une personne */
.piege{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}