/* ============================================================
   LE CLOS D'ICELLE — feuille de style
   Palette : bleu d'Uzès, sable, ocre, porte jaune
   ============================================================ */

:root{
  --bleu:#0E3A5B;
  --bleu-nuit:#092639;
  --bleu-clair:#1C567F;
  --or:#E0A83C;
  --or-clair:#F2C230;
  --terre:#B4562F;
  --sable:#F5EFE4;
  --craie:#FDFBF7;
  --encre:#182229;
  --gris:#6E7C85;
  --gris-clair:#D9D2C6;

  --serif:'Cormorant Garamond',Cormorant,Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --wrap:1200px;
  --r:4px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--craie);
  color:var(--encre);
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.72;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.01em}
.ital{font-style:italic;font-weight:300;color:var(--terre)}
.section--dark .ital{color:var(--or-clair)}
.hero .ital{color:var(--or-clair)}

.skip{position:absolute;left:-9999px;top:0;background:var(--bleu);color:#fff;padding:.7rem 1.2rem;z-index:999}
.skip:focus{left:0}

.wrap{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-size:.78rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  padding:1.05rem 2.1rem;border:1px solid transparent;border-radius:var(--r);
  cursor:pointer;transition:all .35s var(--ease);
}
.btn--gold{background:var(--or);color:#1b1206;border-color:var(--or)}
.btn--gold:hover{background:var(--or-clair);border-color:var(--or-clair);transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(224,168,60,.8)}
.btn--ghost{border-color:rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(4px)}
.btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn--sm{padding:.62rem 1.25rem;font-size:.7rem;background:var(--bleu);color:#fff;border-color:var(--bleu)}
.btn--sm:hover{background:var(--or);border-color:var(--or);color:#1b1206}
.btn--full{width:100%;margin-top:.4rem}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:1.4rem 0;
  transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease);
}
.nav.is-stuck{background:rgba(253,251,247,.93);backdrop-filter:blur(14px);padding:.7rem 0;box-shadow:0 1px 0 rgba(24,34,41,.08)}
.nav__inner{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* La signature du portail, detouree, sert de logo.
   Elle est noire : on l'inverse en blanc sur les fonds sombres. */
.brand{display:flex;align-items:center;gap:.9rem}
/* On pilote la HAUTEUR, pas la largeur : c'est elle qui determine
   la hauteur de la barre de navigation. */
.brand__logo{
  height:clamp(38px,4.6vw,52px);width:auto;display:block;
  filter:brightness(0) invert(1);
  transition:filter .4s var(--ease),transform .4s var(--ease);
}
.brand:hover .brand__logo{transform:translateY(-1px) scale(1.02)}
.nav.is-stuck .brand__logo,
.nav.is-menu .brand__logo{filter:none}
/* Les deux etoiles du classement, a cote du nom */
.brand__stars{
  color:var(--or-clair);font-size:.78rem;letter-spacing:.08em;line-height:1;
  margin-left:-.4rem;align-self:center;transition:color .4s;
}
.nav.is-stuck .brand__stars,.nav.is-menu .brand__stars{color:var(--or)}
.brand--foot .brand__stars{color:var(--or);display:inline-block;margin:.4rem 0 0}

.brand__tag{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  color:rgba(255,255,255,.6);padding-left:.9rem;border-left:1px solid rgba(255,255,255,.25);
  transition:color .4s,border-color .4s;
}
.nav.is-stuck .brand__tag,.nav.is-menu .brand__tag{color:var(--gris);border-color:var(--gris-clair)}
@media (max-width:1400px){ .brand__tag{display:none} }

.nav__links{display:flex;align-items:center;gap:1.9rem}
.nav__links>a:not(.btn){
  font-size:.8rem;letter-spacing:.05em;color:rgba(255,255,255,.9);position:relative;padding-bottom:3px;transition:color .3s;
}
.nav.is-stuck .nav__links>a:not(.btn){color:var(--encre)}
.nav__links>a:not(.btn)::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--or);transition:width .35s var(--ease);
}
.nav__links>a:not(.btn):hover::after{width:100%}
.nav__links>a:not(.btn):hover{color:var(--or)}

.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;flex-direction:column;gap:5px}
.burger span{display:block;width:24px;height:1.5px;background:#fff;transition:all .3s var(--ease)}
.nav.is-stuck .burger span{background:var(--encre)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:heroZoom 14s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(9,38,57,.7) 0%,rgba(9,38,57,.26) 34%,rgba(9,38,57,.6) 76%,rgba(9,38,57,.85) 100%),
    linear-gradient(90deg,rgba(9,38,57,.62) 0%,rgba(9,38,57,.3) 38%,transparent 70%);
}
.hero__content{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto;padding:9rem 0 7rem;color:#fff;max-width:1200px}
.hero h1{font-size:clamp(3.6rem,10.5vw,8.2rem);font-weight:300;margin:.5rem 0 1.6rem;text-shadow:0 4px 40px rgba(0,0,0,.35)}
.hero__lead{font-size:clamp(1.02rem,1.6vw,1.22rem);max-width:34rem;color:rgba(255,255,255,.93);margin:0 0 2.4rem;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem}
.hero__rating{display:flex;align-items:center;gap:.75rem;margin-top:2.6rem;font-size:.85rem;color:rgba(255,255,255,.88)}
.hero__rating strong{font-weight:600}
.stars{color:var(--or-clair);letter-spacing:.16em;font-size:.95rem}
.stars--big{font-size:1.5rem;letter-spacing:.1em;display:block;margin-top:.4rem}

.eyebrow{
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:var(--terre);margin:0 0 1rem;
}
.hero .eyebrow,.section--dark .eyebrow{color:var(--or-clair)}
.eyebrow--gold{color:var(--or)}

.hero__scroll{position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);width:26px;height:42px;border:1px solid rgba(255,255,255,.45);border-radius:14px;display:grid;justify-items:center;padding-top:8px}
.hero__scroll span{width:3px;height:7px;border-radius:2px;background:#fff;animation:scrollDot 1.9s infinite}
@keyframes scrollDot{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(15px)}}

/* ---------- repères ---------- */
.reperes{background:var(--bleu);color:#fff;padding:2.6rem 0}
.reperes__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;text-align:center}
.repere{display:flex;flex-direction:column;gap:.15rem;position:relative}
.repere+.repere::before{content:'';position:absolute;left:0;top:12%;height:76%;width:1px;background:rgba(255,255,255,.18)}
.repere__n{font-family:var(--serif);font-size:2.5rem;line-height:1;color:var(--or-clair)}
.repere__n small{font-size:.95rem;margin-left:.12em;letter-spacing:.02em}
.repere__l{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* ---------- sections ---------- */
.section{padding:clamp(4.5rem,9vw,8.5rem) 0}
.section--sand{background:var(--sable)}
.section--dark{background:var(--bleu-nuit);color:#fff}
.section--dark p{color:rgba(255,255,255,.8)}

h2{font-size:clamp(2.15rem,4.6vw,3.5rem)}
.head{margin-bottom:3.4rem;max-width:46rem}
.head--center{text-align:center;margin-inline:auto}
.lead{font-size:1.08rem;color:var(--gris);margin:1.5rem 0 1.1rem;line-height:1.75}
.section--dark .lead{color:rgba(255,255,255,.85)}
.lead--center{margin-inline:auto;max-width:44rem}
.score{display:flex;flex-direction:column;align-items:center;font-size:clamp(3rem,7vw,4.6rem);color:var(--bleu)}

.note{font-size:.8rem;color:var(--gris);text-align:center;margin-top:2.2rem;font-style:italic}
.note--left{text-align:left;margin-top:1rem}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.split--rev .split__txt{order:2}
.split__txt p:last-of-type{margin-bottom:0}
.split__img{position:relative}
.frame{margin:0;overflow:hidden;border-radius:var(--r);box-shadow:0 30px 60px -34px rgba(24,34,41,.55)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.frame:hover img{transform:scale(1.045)}
.frame--tall{aspect-ratio:4/5}
.frame--float{
  position:absolute;right:-2.2rem;bottom:-2.6rem;width:47%;aspect-ratio:1/1;
  border:7px solid var(--craie);
  box-shadow:0 26px 50px -26px rgba(24,34,41,.6);
}
.section--sand .frame--float{border-color:var(--sable)}
.section--dark .frame--float{border-color:var(--bleu-nuit)}
.split--rev .frame--float{right:auto;left:-2.2rem}

.ticks{margin-top:2rem;display:grid;gap:.7rem}
.ticks li{position:relative;padding-left:1.9rem;font-size:.94rem}
.ticks li::before{
  content:'';position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--or);box-shadow:0 0 0 4px rgba(224,168,60,.18);
}

.pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.pills span{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.5rem 1rem;border:1px solid rgba(255,255,255,.28);border-radius:99px;color:rgba(255,255,255,.85);
}

.oasis{
  display:flex;gap:.85rem;align-items:flex-start;
  margin-top:2rem;padding:1.1rem 1.3rem;
  border-left:2px solid var(--or);background:rgba(255,255,255,.05);
  font-size:.87rem;line-height:1.6;
}
.oasis svg{width:22px;height:22px;flex:0 0 22px;color:var(--or-clair);margin-top:.15rem}
.oasis+.oasis{margin-top:.8rem}
.oasis strong{color:#fff;font-weight:500}

/* ---------- appels de note et notes de bas de section ---------- */
.fn{font-size:.62em;line-height:0}
.fn a{
  color:var(--or-clair);text-decoration:none;padding:0 .12em;
  border-bottom:1px solid transparent;transition:border-color .25s;
}
.fn a:hover{border-bottom-color:var(--or-clair)}
.section--dark .fn a{color:var(--or-clair)}

.footnotes{
  margin:2.2rem 0 0;padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.16);
  list-style:none;display:grid;gap:.85rem;counter-reset:none;
}
.footnotes li{
  font-size:.78rem;line-height:1.65;color:rgba(255,255,255,.62);
  padding-left:0;scroll-margin-top:120px;
}
.footnotes li strong{color:var(--or-clair);font-weight:500;margin-right:.3rem}
.footnotes li:target{color:rgba(255,255,255,.95)}

/* ---------- trio ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:clamp(5rem,8vw,7.5rem)}
.card-img{margin:0}
.card-img img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r);transition:transform .9s var(--ease)}
.card-img:hover img{transform:scale(1.03)}
.card-img figcaption{display:block;padding-top:1.1rem;font-size:.9rem;color:var(--gris)}
.card-img figcaption strong{
  display:block;font-family:var(--serif);font-size:1.32rem;font-weight:500;color:var(--encre);margin-bottom:.25rem;
}

/* ---------- équipements ---------- */
.equip{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem}
.equip__col h3{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bleu);padding-bottom:1rem;margin-bottom:1.2rem;border-bottom:1px solid var(--gris-clair);
}
.equip__col li{font-size:.92rem;padding:.36rem 0;color:#45535c}

/* ---------- arrière-saison ---------- */
.saison{background:
  linear-gradient(180deg,var(--craie) 0%,#F7F2EA 100%);
  position:relative;overflow:hidden}
.saison::before{
  content:'';position:absolute;top:-140px;right:-140px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,168,60,.16),transparent 68%);
}
.saison__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:4.5rem}
.scard{
  background:#fff;border:1px solid rgba(24,34,41,.07);border-radius:var(--r);
  padding:2.2rem 1.7rem;transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.scard:hover{transform:translateY(-6px);box-shadow:0 26px 44px -28px rgba(14,58,91,.45)}
.scard__ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--bleu);color:var(--or-clair);margin-bottom:1.3rem}
.scard__ico svg{width:26px;height:26px}
.scard h3{font-size:1.34rem;margin-bottom:.7rem;line-height:1.2}
.scard p{font-size:.9rem;color:var(--gris);margin:0}

/* La photo du jardin du studio a ete retiree d'ici : elle preteait a
   confusion dans une rubrique consacree au terrain voisin. La fiche
   technique occupe donc toute la largeur, et les trois vues du terrain
   viennent juste dessous. */
.saison__strip{display:block;max-width:52rem;margin-inline:auto}
.saison__img{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 56px -32px rgba(24,34,41,.55)}
.saison__img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.saison__specs{display:grid;gap:0}
.saison__specs li{
  display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;align-items:baseline;
  padding:1.05rem 0;border-bottom:1px solid var(--gris-clair);font-size:.94rem;
}
.saison__specs li:first-child{border-top:1px solid var(--gris-clair)}
.saison__specs span{
  font-family:var(--serif);font-size:1.25rem;color:var(--bleu);font-weight:500;
}

/* ---------- galerie ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:15.5rem;gap:.9rem;grid-auto-flow:row dense}
.gal__i{margin:0;overflow:hidden;border-radius:var(--r);cursor:zoom-in;position:relative;background:#e8e2d7}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .5s}
.gal__i::after{content:'';position:absolute;inset:0;background:rgba(14,58,91,0);transition:background .4s}
.gal__i:hover img{transform:scale(1.06)}
.gal__i:hover::after{background:rgba(14,58,91,.16)}
.gal__i--w2{grid-column:span 2}
.gal__i--h2{grid-row:span 2}

/* ---------- distances ---------- */
.dist{margin-top:2rem}
.dist li{
  display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;align-items:baseline;
  padding:.95rem 0;border-bottom:1px solid var(--gris-clair);font-size:.94rem;
}
.dist li:first-child{border-top:1px solid var(--gris-clair)}
.dist span{font-family:var(--serif);font-size:1.2rem;color:var(--terre);font-weight:500}

/* ---------- avis ---------- */
.badges{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  max-width:62rem;margin:0 auto 3.6rem;
}
.badge{
  background:#fff;border:1px solid rgba(24,34,41,.07);border-radius:var(--r);
  padding:2rem 1.6rem;text-align:center;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.badge:hover{transform:translateY(-5px);box-shadow:0 24px 40px -28px rgba(14,58,91,.45)}
.badge__ico{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--sable);color:var(--bleu);margin:0 auto 1.1rem;
}
.badge__ico svg{width:23px;height:23px}
.badge h3{font-size:1.22rem;margin-bottom:.55rem;line-height:1.22}
.badge p{font-size:.85rem;color:var(--gris);margin:0}

.notes{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem 3.5rem;max-width:62rem;margin-inline:auto}
.note-bar{--v:100%;display:grid;grid-template-columns:11rem 1fr 2.4rem;gap:1rem;align-items:center;font-size:.88rem}
.note-bar i{height:3px;background:var(--gris-clair);border-radius:2px;position:relative;overflow:hidden}
.note-bar i::after{
  content:'';position:absolute;inset:0;width:0;background:var(--bleu);border-radius:2px;
  transition:width 1.3s var(--ease);
}
.note-bar.is-in i::after{width:var(--v)}
.note-bar b{font-weight:500;text-align:right;font-family:var(--serif);font-size:1.1rem}

/* ---------- réserver ---------- */
.resa{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.infos{margin:2rem 0 2.4rem}
.infos li{
  display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:.72rem 0;
  border-bottom:1px solid rgba(255,255,255,.13);font-size:.92rem;color:rgba(255,255,255,.85);
}
.infos span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or-clair);align-self:center}

.resa__form{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);border-radius:var(--r);padding:2.2rem;display:grid;gap:1.05rem}
.resa__form label{display:grid;gap:.45rem;font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.resa__form input,.resa__form select,.resa__form textarea{
  font-family:var(--sans);font-size:.94rem;font-weight:300;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:var(--r);
  padding:.85rem 1rem;text-transform:none;letter-spacing:0;transition:border-color .3s,background .3s;
}
.resa__form input::placeholder,.resa__form textarea::placeholder{color:rgba(255,255,255,.38)}
.resa__form input:focus,.resa__form select:focus,.resa__form textarea:focus{
  outline:none;border-color:var(--or);background:rgba(255,255,255,.1);
}
.resa__form select option{background:var(--bleu-nuit);color:#fff}
.resa__form textarea{resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.form__note{font-size:.74rem;color:rgba(255,255,255,.5);text-align:center;margin:.2rem 0 0;font-style:italic}
.form__note.is-ok{color:var(--or-clair);font-style:normal}

/* ---------- footer ---------- */
.foot{background:var(--bleu);color:rgba(255,255,255,.75);padding:4.5rem 0 1.8rem}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:2.5rem;padding-bottom:3rem}
.brand--foot{display:block}
/* height:auto est indispensable : sans lui, le logo herite de la hauteur
   fixee plus haut ET de cette largeur, et se retrouve ecrase. */
.brand--foot .brand__logo{width:min(220px,80%);height:auto;filter:brightness(0) invert(1)}
.foot__p{font-size:.88rem;margin:1.2rem 0 0;max-width:24rem}
.foot__pastille{
  width:132px;height:132px;object-fit:cover;border-radius:50%;
  margin-top:1.6rem;box-shadow:0 8px 24px -10px rgba(0,0,0,.5);
  transition:transform .5s var(--ease);
}
.foot__pastille:hover{transform:rotate(-4deg) scale(1.04)}
.foot__nav{display:flex;flex-direction:column;gap:.55rem;font-size:.88rem}
.foot__nav strong{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or-clair);font-weight:600;margin-bottom:.5rem;
}
.foot__nav a{transition:color .3s,padding-left .3s}
.foot__nav a:hover{color:#fff;padding-left:4px}
.foot__img{border-radius:var(--r);overflow:hidden;align-self:start}
.foot__img img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(1.06);opacity:.8;transition:opacity .5s,filter .5s}
.foot__img:hover img{opacity:1;filter:grayscale(0)}
.foot__bar{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);padding-top:1.6rem;font-size:.75rem;color:rgba(255,255,255,.5);
}

/* ---------- lieux a visiter ---------- */
.lieux{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.lieu{
  position:relative;margin:0;border-radius:var(--r);overflow:hidden;
  aspect-ratio:3/4;isolation:isolate;
}
.lieu--w2{grid-column:span 2;aspect-ratio:3/2}
.lieu img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.lieu:hover img{transform:scale(1.06)}
.lieu figcaption{
  position:absolute;inset:auto 0 0 0;z-index:1;
  padding:2.6rem 1.4rem 1.3rem;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(9,38,57,.88));
}
.lieu figcaption strong{
  display:block;font-family:var(--serif);font-size:1.42rem;font-weight:500;line-height:1.15;margin-bottom:.2rem;
}
.lieu figcaption span{font-size:.78rem;color:rgba(255,255,255,.78);display:block}
.lieu__dist{
  position:absolute;top:.9rem;left:.9rem;z-index:1;
  background:rgba(253,251,247,.92);color:var(--bleu);
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  padding:.35rem .7rem;border-radius:99px;
}

/* ---------- activites sportives ---------- */
.sport{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3.2rem}
.sport__c{
  display:grid;grid-template-columns:44px 1fr;gap:1.1rem;align-items:start;
  padding:1.5rem 1.4rem;border:1px solid rgba(24,34,41,.09);border-radius:var(--r);
  background:#fff;transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.sport__c:hover{transform:translateY(-4px);box-shadow:0 22px 38px -26px rgba(14,58,91,.45)}
.sport__c span[aria-hidden]{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--sable);color:var(--bleu);
}
.sport__c svg{width:22px;height:22px}
.sport__c h3{font-size:1.16rem;margin-bottom:.3rem;line-height:1.2}
.sport__c p{font-size:.85rem;color:var(--gris);margin:0}

.credits{
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--gris-clair);
  font-size:.72rem;color:var(--gris);line-height:1.7;
}
.credits a{color:var(--gris);text-decoration:underline}
.credits a:hover{color:var(--terre)}

/* ---------- calendrier de disponibilites ---------- */
.cal{
  background:#fff;border:1px solid rgba(24,34,41,.09);border-radius:var(--r);
  padding:clamp(1.4rem,3vw,2.4rem);box-shadow:0 26px 50px -34px rgba(14,58,91,.4);
}
.cal__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.6rem}
.cal__label{font-family:var(--serif);font-size:1.5rem;color:var(--bleu)}
.cal__nav{display:flex;gap:.5rem}
.cal__nav button{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--gris-clair);background:#fff;
  color:var(--bleu);font-size:1.2rem;line-height:1;cursor:pointer;transition:all .3s var(--ease);
}
.cal__nav button:hover{background:var(--bleu);border-color:var(--bleu);color:#fff}

.cal__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem}
.cal__mtitle{
  font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--terre);text-align:center;margin-bottom:.9rem;
}
.cal__row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal__row--head span{
  text-align:center;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);padding-bottom:.5rem;
}
.cal__d{
  aspect-ratio:1/1;display:grid;place-items:center;
  border:0;background:var(--sable);color:var(--encre);
  font-family:var(--sans);font-size:.85rem;font-weight:400;
  border-radius:3px;cursor:pointer;position:relative;
  transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease);
}
.cal__d:hover:not(:disabled){background:var(--bleu);color:#fff;transform:scale(1.08)}
.cal__d--void{background:none;cursor:default}
.cal__d.is-past{background:none;color:var(--gris-clair);cursor:default}
.cal__d.is-booked{
  background:repeating-linear-gradient(-45deg,#EDE4D6,#EDE4D6 3px,#E2D6C3 3px,#E2D6C3 6px);
  color:var(--gris);cursor:not-allowed;text-decoration:line-through;
}
.cal__d.is-nopool::after{
  content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--gris-clair);
}
.cal__d.is-start,.cal__d.is-end{background:var(--bleu);color:#fff;font-weight:600}
.cal__d.is-inrange{background:rgba(14,58,91,.14);color:var(--bleu)}

.cal__legend{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.6rem;font-size:.78rem;color:var(--gris)}
.cal__legend span{display:flex;align-items:center;gap:.5rem}
.cal__legend i{width:14px;height:14px;border-radius:3px;display:block}
.cal__legend .l-free{background:var(--sable)}
.cal__legend .l-booked{background:repeating-linear-gradient(-45deg,#EDE4D6,#EDE4D6 3px,#E2D6C3 3px,#E2D6C3 6px)}
.cal__legend .l-sel{background:var(--bleu)}
.cal__legend .l-pool{background:var(--gris-clair);border-radius:50%;width:6px;height:6px}

.cal__foot{
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--gris-clair);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
}
.cal__status{font-size:.92rem;color:var(--gris)}
.cal__status.is-set{color:var(--bleu);font-weight:500}
.cal__reset{
  background:none;border:0;font-family:var(--sans);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--terre);cursor:pointer;text-decoration:underline;
}
.cal__updated{font-size:.72rem;color:var(--gris);font-style:italic;margin-top:1rem}

/* ---------- verrou de reservation ---------- */
.gate{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);padding:1.6rem 1.8rem;margin-top:2rem;
}
.gate__check{display:flex;gap:.9rem;align-items:flex-start;cursor:pointer;font-size:.88rem;line-height:1.55}
.gate__check input{
  appearance:none;-webkit-appearance:none;flex:0 0 20px;width:20px;height:20px;margin-top:.15rem;
  border:1px solid rgba(255,255,255,.4);border-radius:3px;background:transparent;cursor:pointer;
  display:grid;place-items:center;transition:all .25s var(--ease);
}
.gate__check input:checked{background:var(--or);border-color:var(--or)}
.gate__check input:checked::after{content:'✓';color:#1b1206;font-size:.8rem;font-weight:700;line-height:1}
.gate__check input:focus-visible{outline:2px solid var(--or-clair);outline-offset:2px}
.gate__check a{color:var(--or-clair);text-decoration:underline}
.gate .btn{margin-top:1.4rem}
.gate .btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.gate__delay{
  display:flex;gap:.7rem;align-items:flex-start;margin-top:1.3rem;
  font-size:.8rem;color:rgba(255,255,255,.62);line-height:1.55;
}
.gate__delay svg{width:18px;height:18px;flex:0 0 18px;color:var(--or-clair);margin-top:.1rem}

/* ---------- bandeau de consentement ---------- */
.consent{
  position:fixed;left:1.2rem;right:1.2rem;bottom:1.2rem;z-index:180;
  max-width:34rem;background:var(--bleu-nuit);color:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  padding:1.6rem 1.7rem;box-shadow:0 30px 60px -24px rgba(0,0,0,.6);
  animation:consentUp .5s var(--ease) both;
}
@keyframes consentUp{from{opacity:0;transform:translateY(20px)}}
.consent[hidden]{display:none}
.consent h3{font-size:1.2rem;color:#fff;margin-bottom:.5rem}
.consent p{font-size:.85rem;margin:0 0 1.2rem;line-height:1.6}
.consent a{color:var(--or-clair);text-decoration:underline}
.consent__btns{display:flex;flex-wrap:wrap;gap:.7rem}
.consent__btns button{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.75rem 1.4rem;border-radius:var(--r);cursor:pointer;border:1px solid transparent;
  transition:all .3s var(--ease);
}
.consent__btns .c-yes{background:var(--or);color:#1b1206}
.consent__btns .c-yes:hover{background:var(--or-clair)}
.consent__btns .c-no{background:none;border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.8)}
.consent__btns .c-no:hover{border-color:#fff;color:#fff}

/* ---------- selecteur de langue ---------- */
.lang{display:flex;align-items:center;gap:.35rem;font-size:.72rem;letter-spacing:.08em}
.lang a{color:rgba(255,255,255,.6);padding:.2rem .1rem;transition:color .3s}
.lang a:hover{color:var(--or)}
.lang a[aria-current]{color:#fff;font-weight:500}
.lang span{color:rgba(255,255,255,.3)}
.nav.is-stuck .lang a{color:var(--gris)}
.nav.is-stuck .lang a[aria-current]{color:var(--encre)}
.nav.is-stuck .lang span{color:var(--gris-clair)}

/* ---------- pages de documents ---------- */
.page--doc{background:var(--craie)}
.doc-hero{
  background:var(--bleu);color:#fff;padding:11rem 0 4.5rem;
}
.doc-hero h1{font-size:clamp(2.4rem,5vw,3.8rem);margin-bottom:.8rem}
.doc-hero p{color:rgba(255,255,255,.72);font-size:.95rem;margin:0}
.doc{padding:clamp(3.5rem,7vw,6rem) 0;max-width:52rem}
.doc h2{
  font-size:1.9rem;color:var(--bleu);margin:3.2rem 0 1.1rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--gris-clair);
}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:1.3rem;margin:2rem 0 .6rem}
.doc p,.doc li{font-size:.95rem;color:#3d4a53;line-height:1.75}
.doc p{margin:0 0 1rem}
.doc ul{margin:0 0 1.2rem;display:grid;gap:.55rem}
.doc ul li{position:relative;padding-left:1.5rem}
.doc ul li::before{
  content:'';position:absolute;left:.15rem;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--or);
}
.doc table{width:100%;border-collapse:collapse;margin:0 0 1.6rem;font-size:.9rem}
.doc th,.doc td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--gris-clair);vertical-align:top}
.doc th{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bleu);font-weight:600;
}
.doc td:first-child{font-weight:500;white-space:nowrap}
.doc a{color:var(--terre);text-decoration:underline}
.doc__box{
  background:var(--sable);border-left:3px solid var(--or);border-radius:0 var(--r) var(--r) 0;
  padding:1.3rem 1.6rem;margin:0 0 1.8rem;
}
.doc__box p:last-child{margin-bottom:0}
.doc__box strong{color:var(--bleu)}
.doc__draft{
  background:#FDF3E3;border:1px dashed var(--or);border-radius:var(--r);
  padding:1.1rem 1.4rem;margin-bottom:2.5rem;font-size:.86rem;color:#7a5a1e;
}
.doc__toc{
  background:var(--sable);border-radius:var(--r);padding:1.6rem 1.8rem;margin-bottom:3rem;
  display:grid;gap:.5rem;
}
.doc__toc strong{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bleu);margin-bottom:.4rem;
}
.doc__toc a{font-size:.9rem;color:#3d4a53;text-decoration:none;transition:color .25s,padding-left .25s}
.doc__toc a:hover{color:var(--terre);padding-left:4px}
.doc__back{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:2.5rem;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bleu);
}
.doc__back:hover{color:var(--terre)}

/* ---------- champ piege anti-robot ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:200;background:rgba(9,20,28,.95);
  display:grid;place-items:center;padding:3.5rem;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.lb.is-open{opacity:1;pointer-events:auto}
.lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb__x,.lb__p{
  position:absolute;background:none;border:0;color:rgba(255,255,255,.75);cursor:pointer;
  transition:color .25s,transform .25s;line-height:1;
}
.lb__x{top:1.4rem;right:1.8rem;font-size:2.6rem}
.lb__p{top:50%;transform:translateY(-50%);font-size:4rem;padding:0 1.2rem}
.lb__p--prev{left:.6rem}
.lb__p--next{right:.6rem}
.lb__x:hover,.lb__p:hover{color:var(--or-clair)}
.lb__count{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);font-size:.8rem;letter-spacing:.12em}

/* ---------- animation d'apparition ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .equip{grid-template-columns:repeat(2,1fr);gap:2rem 2.6rem}
  .saison__cards{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1.4fr 1fr 1fr}
  .foot__img{display:none}
}

@media (max-width:900px){
  .nav__links{
    position:fixed;inset:0 0 auto 0;top:0;padding:6.5rem 2rem 2.6rem;
    flex-direction:column;align-items:flex-start;gap:1.5rem;
    background:var(--craie);
    transform:translateY(-104%);transition:transform .5s var(--ease);
    box-shadow:0 20px 50px -20px rgba(0,0,0,.3);
  }
  .nav__links.is-open{transform:translateY(0)}
  .nav__links>a:not(.btn){color:var(--encre);font-size:1.15rem;font-family:var(--serif)}
  .burger{display:flex;z-index:2}
  .brand{position:relative;z-index:2}
  .nav.is-menu .burger span{background:var(--encre)}
  .nav.is-menu .brand__txt strong{color:var(--bleu)}
  .nav.is-menu .brand__txt em{color:var(--gris)}

  .reperes__grid{grid-template-columns:repeat(3,1fr);gap:1.6rem 1rem}
  .repere:nth-child(4)::before{display:none}

  .split,.saison__strip,.resa{grid-template-columns:1fr;gap:2.6rem}
  .split--rev .split__txt{order:0}
  .split__img{max-width:32rem}
  .frame--float{width:44%;right:-1rem;bottom:-1.8rem}
  .split--rev .frame--float{left:auto;right:-1rem}
  .trio{grid-template-columns:1fr;gap:2.4rem;max-width:34rem}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:13rem}
  .gal__i--h2{grid-row:span 1}
  .notes{grid-template-columns:1fr;gap:.9rem}
  .cal__grid{grid-template-columns:1fr}
  .lieux{grid-template-columns:repeat(2,1fr)}
  .lieu--w2{grid-column:span 2}
  .sport{grid-template-columns:1fr;max-width:34rem}
  .badges{grid-template-columns:1fr;max-width:34rem;gap:1rem}
  .badge{display:grid;grid-template-columns:46px 1fr;gap:1.2rem;text-align:left;padding:1.5rem}
  /* Le titre ET le paragraphe vont en colonne 2 : sans cela le paragraphe
     retombe dans la colonne de 46 px et se coupe mot a mot. */
  .badge h3,.badge p{grid-column:2}
  .badge__ico{margin:0;grid-row:1}
  .badge h3{font-size:1.12rem}
}

@media (max-width:620px){
  body{font-size:15.5px}
  .hero__content{padding:8rem 0 6rem}
  .hero__cta{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .btn--sm{width:auto}
  .reperes__grid{grid-template-columns:repeat(2,1fr)}
  .repere::before{display:none!important}
  .equip,.saison__cards{grid-template-columns:1fr}
  .saison__specs li,.dist li,.infos li{grid-template-columns:1fr;gap:.15rem}
  .f2{grid-template-columns:1fr}
  .resa__form{padding:1.5rem}
  .frame--float{position:static;width:100%;aspect-ratio:16/10;margin-top:1rem;border-width:0}
  .foot__grid{grid-template-columns:1fr;gap:2.2rem}
  .lb{padding:1.2rem}
  .lb__p{font-size:2.6rem;padding:0 .5rem}
  .lieux{grid-template-columns:1fr}
  .lieu,.lieu--w2{aspect-ratio:4/3;grid-column:span 1}
  .cal{padding:1.1rem}
  .cal__d{font-size:.78rem}
  .cal__label{font-size:1.2rem}
  .consent{left:.7rem;right:.7rem;bottom:.7rem;padding:1.3rem}
  .doc-hero{padding:8.5rem 0 3.5rem}
  .doc table{display:block;overflow-x:auto;white-space:nowrap}
  .gate{padding:1.2rem}
}

/* le selecteur de langue reste visible dans le menu mobile */
@media (max-width:900px){
  .nav__links .lang{margin-top:.6rem}
  .nav__links .lang a{color:var(--encre)}
  .nav__links .lang span{color:var(--gris-clair)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ==========================================================
   LE TERRAIN — bandeau de trois vues
   Ajoute sous la fiche technique de l'arriere-saison, pour
   montrer la geographie des lieux : le champ est hors de la
   propriete, ouvert sur la route et non cloture.
   ========================================================== */
.terrain__vues{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:1.4rem;
}
.terrain__vues figure{margin:0}
.terrain__vues img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r);display:block;
}
.terrain__vues figcaption{
  font-size:.82rem;color:var(--gris);margin-top:.5rem;line-height:1.4;
}
@media (max-width:760px){
  .terrain__vues{grid-template-columns:1fr;gap:1.2rem}
}


/* ==========================================================
   RECONNAISSANCES INTERNATIONALES
   Traitement typographique plutot que logos : on cite la source
   et l'annee, sans emprunter des marques deposees.
   ========================================================== */
.distinctions{
  list-style:none;padding:0;margin:2.6rem auto 0;max-width:62rem;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
}
.distinctions li{
  padding:0 1.6rem;text-align:center;
  border-left:1px solid rgba(14,58,91,.14);
}
.distinctions li:first-child{border-left:0}
.distinctions__src{
  display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--terre);margin-bottom:.6rem;
}
.distinctions p{
  margin:0 0 .5rem;font-size:.98rem;line-height:1.55;
}
.distinctions__an{
  font-size:.76rem;color:var(--gris);letter-spacing:.04em;
}

/* ==========================================================
   RAYONNEMENT — ce qu'on atteint depuis le Clos
   ========================================================== */
.rayonner{
  display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;
  align-items:start;margin-top:3.4rem;
}
.rayonner h3{margin:0 0 1rem}
.rayonner__txt p{margin:0 0 1rem}
.rayonner__liste{list-style:none;padding:0;margin:0}
.rayonner__liste li{
  display:flex;gap:1.1rem;align-items:baseline;
  padding:.72rem 0;border-bottom:1px solid rgba(14,58,91,.12);
  font-size:.96rem;
}
.rayonner__liste li:last-child{border-bottom:0}
.rayonner__liste span{
  flex:0 0 4.6rem;font-weight:600;color:var(--terre);
  font-size:.86rem;letter-spacing:.03em;
}

@media (max-width:820px){
  .distinctions{grid-template-columns:1fr;gap:1.6rem}
  .distinctions li{border-left:0;padding:0}
  .distinctions li + li{border-top:1px solid rgba(14,58,91,.14);padding-top:1.6rem}
  .rayonner{grid-template-columns:1fr;gap:2rem}
}


/* ==========================================================
   TITRES DE SECTION EN BLEU DE MARQUE
   Ils heritaient de l'encre presque noire du corps de texte,
   d'ou la rupture entre la bande bleue et la suite du site.
   Les sections sombres gardent leur blanc.
   ========================================================== */
h1,h2{color:var(--bleu)}
.hero h1,.hero h2,
.section--dark h1,.section--dark h2,
.reperes h1,.reperes h2{color:inherit}

/* ==========================================================
   FORMULAIRE : AUTORISER LE RETRECISSEMENT
   Les champs de date portent un min-width:auto natif qui les
   empeche de descendre sous leur largeur intrinseque. Sur un
   ecran de 360 px, le formulaire imposait alors une colonne de
   345 px dans un conteneur de 318, et la page glissait
   lateralement de six pixels.
   ========================================================== */
.resa>*{min-width:0}
.resa__form input,
.resa__form select,
.resa__form textarea{min-width:0;max-width:100%}

/* ==========================================================
   LISIBILITE SUR PETIT ECRAN
   Les surtitres et les libelles de repere descendaient sous
   12 px sur telephone : trop juste pour des capitales espacees.
   ========================================================== */
@media (max-width:640px){
  .eyebrow{font-size:.76rem;letter-spacing:.18em}
  .repere__l{font-size:.74rem;letter-spacing:.12em}
}

/* ==========================================================
   BLOC DE CONTACT — a la place du formulaire
   Le site n'envoie pas de courriel : il affiche l'adresse des
   hotes pour les questions, et renvoie vers le moteur de
   reservation pour le reste.
   ========================================================== */
.resa__contact{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);
  padding:clamp(1.8rem,4vw,2.6rem);
}
.resa__contact h3{color:#fff;font-size:1.6rem;margin:0 0 .9rem}
.resa__contact p{color:rgba(255,255,255,.82);font-size:.95rem;margin:0 0 1.2rem}
.resa__contact .eyebrow{color:var(--or-clair)}
.resa__mail{
  display:inline-block;font-family:var(--serif);font-size:clamp(1.15rem,2.6vw,1.45rem);
  color:var(--or-clair);text-decoration:none;letter-spacing:.01em;
  border-bottom:1px solid rgba(242,194,48,.45);padding-bottom:.15rem;
  transition:color .3s var(--ease),border-color .3s var(--ease);
  word-break:break-word;
}
.resa__mail:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.resa__note{
  margin:1.6rem 0 0;font-size:.85rem;color:rgba(255,255,255,.6);
  padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);
}

/* ==========================================================
   TAMPON GAY FRIENDLY EN GRAND, DANS LE BANDEAU D'ACCUEIL
   A 34 px dans la barre de navigation, ni l'arc-en-ciel ni le
   texte n'etaient lisibles. Le tampon est donc repris ici en
   grand format, sur la photo d'accueil, cote oppose au titre.
   ========================================================== */
.hero__tampon{
  position:absolute;z-index:3;
  right:clamp(1.5rem,5vw,4.5rem);
  bottom:clamp(4.5rem,11vh,9rem);
  width:clamp(126px,15vw,210px);
  height:auto;aspect-ratio:1;
  border-radius:50%;
  background:#f3ece0;
  box-shadow:0 18px 44px rgba(9,38,57,.42);
  transform:rotate(-7deg);
  transition:transform .6s var(--ease);
}
.hero__tampon:hover{transform:rotate(-3deg) scale(1.04)}

/* Sur telephone il passe sous le titre, centre, sans recouvrir le texte. */
@media (max-width:820px){
  .hero__tampon{
    position:static;display:block;
    width:clamp(112px,32vw,150px);
    margin:.4rem 0 1.8rem;transform:rotate(-5deg);
  }
}

/* Le paragraphe d'accroche du studio reprend l'encre du corps de texte :
   le gris tranchait avec le paragraphe suivant, dans un meme bloc. */
#studio .lead{color:var(--encre)}