/* ============================================================
   Les Ateliers du Soleil — feuille de style
   Palette dérivée du logo : vert #015A40, ambre #FFBA06.
   ============================================================ */

/* ---------- 1. Jetons ---------- */
:root{
  /* couleurs */
  --nuit:      #0E1C17;   /* ardoise verte profonde — le sol du showroom */
  --nuit-2:    #172B23;   /* panneaux en relief */
  --vert:      #015A40;   /* vert de marque */
  --vert-fonce:#014430;
  --ambre:     #FFBA06;   /* jaune de marque — seul accent */
  --jour:      #E9EEEA;   /* lumière du jour, froide (jamais crème) */
  --jour-2:    #DCE4DE;
  --brume:     #93A99E;   /* texte secondaire sur fond sombre */
  --brume-2:   #46584F;   /* texte secondaire sur fond clair */
  --bois:      #8A6A45;   /* lames de chêne des murs */

  --rule-dark: rgba(233,238,234,.14);
  --rule-light:rgba(14,28,23,.16);

  /* typographie */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;

  --t-xs:   .72rem;
  --t-sm:   .875rem;
  --t-base: 1.075rem;
  --t-lead: clamp(1.14rem, 1.25vw, 1.35rem);
  --t-h3:   clamp(1.2rem, 1.7vw, 1.5rem);
  --t-h2:   clamp(1.75rem, 4.6vw, 3.6rem);
  --t-h1:   clamp(2.15rem, 5.5vw, 5.1rem);

  /* mesures */
  --shell:  1180px;
  --shell-w:1440px;
  --pad:    clamp(1.25rem, 4vw, 3rem);
  --radius: 3px;
  --spine:  86px;
  --gap:    2px;
  --ease:   cubic-bezier(.2,.7,.2,1);
}

/* ---------- 2. Remise à zéro ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--nuit);
  color:var(--jour);
  font-family:var(--body);
  font-size:var(--t-base);
  line-height:1.72;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ambre);outline-offset:3px;border-radius:2px}
::selection{background:var(--ambre);color:var(--nuit)}

html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ambre);color:var(--nuit);padding:.7rem 1.1rem;
  font-family:var(--display);font-size:var(--t-sm);font-weight:600;
}
.skip:focus{left:0}

/* ---------- 3. Typographie ---------- */
.display{
  font-family:var(--display);
  font-weight:800;
  font-stretch:125%;
  text-transform:uppercase;
  line-height:.93;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.display em{font-style:normal;color:var(--ambre)}

.eyebrow{
  font-family:var(--display);
  font-size:var(--t-xs);
  font-weight:600;
  font-stretch:80%;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--ambre);
  margin:0 0 1.1rem;
}
.lead{font-size:var(--t-lead);line-height:1.62;color:var(--jour)}

/* ---------- 4. Trame ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.shell--wide{max-width:var(--shell-w)}

.section{padding-block:clamp(4.5rem,9vw,8.5rem);position:relative}
.section--nuit{background:var(--nuit);color:var(--jour)}
.section--vert{background:var(--vert);color:#fff}
.section--jour{background:var(--jour);color:var(--nuit)}
.section--flush{padding-block-start:0}

/* Trame fine de cellules — le motif du module PV et du carrelage */
.section--nuit::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,186,6,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,186,6,.05) 1px, transparent 1px);
  background-size:86px 86px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 75%);
}
.section--nuit > *{position:relative;z-index:1}

.head{max-width:56rem;margin-bottom:clamp(2.5rem,4.5vw,4rem)}
.head--tight{margin-bottom:clamp(2rem,3.5vw,3rem)}
.head__title{font-size:var(--t-h2)}
.head__lead{margin-top:1.5rem;max-width:46rem;color:var(--brume)}
.section--jour .head__lead{color:var(--brume-2)}
.section--vert .eyebrow{color:var(--ambre)}
/* L'accent s'inverse avec le fond : ambre sur le sombre, vert sur le clair.
   L'ambre sur fond clair tombe à ~1,6:1, très en dessous du minimum lisible. */
.section--jour .eyebrow{color:var(--vert)}

/* ---------- 5. Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-size:.86rem;font-weight:700;font-stretch:92%;
  text-transform:uppercase;letter-spacing:.08em;text-decoration:none;
  padding:1rem 1.6rem;border:1px solid transparent;border-radius:var(--radius);
  cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn--amber{background:var(--ambre);color:var(--nuit);border-color:var(--ambre)}
.btn--amber:hover{background:#FFD05A;border-color:#FFD05A}
/* Attention : ne pas utiliser currentColor pour le fond au survol —
   il se résout sur la nouvelle couleur du texte et le bouton disparaît. */
.btn--ghost{background:transparent;color:var(--jour);border-color:rgba(233,238,234,.55)}
.btn--ghost:hover{background:var(--jour);color:var(--nuit);border-color:var(--jour)}
.section--vert .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.section--vert .btn--ghost:hover{background:#fff;color:var(--vert);border-color:#fff}
.section--jour .btn--ghost{color:var(--nuit);border-color:rgba(14,28,23,.35)}
.section--jour .btn--ghost:hover{background:var(--nuit);color:var(--jour);border-color:var(--nuit)}
.btn--sm{padding:.62rem 1rem;font-size:.76rem}
.btn--full{width:100%;padding-block:1.1rem}
.btn:active{transform:translateY(1px)}

/* ---------- 6. Marque ---------- */
/* Le PNG contient le logo complet ; on n'affiche que la maison + le soleil,
   posés dans un disque clair — comme l'enseigne lumineuse du showroom. */
.brand__disc{
  --d:42px;
  display:grid;place-items:center;flex:none;
  width:var(--d);height:var(--d);border-radius:50%;
  background:var(--jour);
  box-shadow:0 0 0 1px rgba(255,186,6,.5), 0 0 18px -2px rgba(255,186,6,.45);
}
.brand__disc--lg{--d:64px}
.brand__mark{
  --w:calc(var(--d) * .64);
  display:block;
  width:var(--w);height:calc(var(--w) * .674);
  background-image:url("img/logo.png");
  background-repeat:no-repeat;
  background-size:calc(var(--w) * 1.495) calc(var(--w) * 1.495);
  background-position:calc(var(--w) * -.256) calc(var(--w) * -.220);
}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand__name{
  font-family:var(--display);font-size:.78rem;font-weight:800;font-stretch:105%;
  text-transform:uppercase;letter-spacing:.05em;line-height:1.12;color:var(--jour);
}

/* ---------- 7. Barre supérieure ---------- */
.topbar{
  position:fixed;inset:0 0 auto;z-index:50;
  transition:background .4s,border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.topbar.is-stuck{
  background:rgba(14,28,23,.92);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--rule-dark);
}
.topbar__in{display:flex;align-items:center;gap:2rem;min-height:76px}
.nav{display:flex;gap:1.75rem;margin-inline:auto}
.nav a{
  font-family:var(--display);font-size:.79rem;font-weight:600;font-stretch:88%;
  text-transform:uppercase;letter-spacing:.11em;text-decoration:none;
  color:var(--jour);padding-block:.4rem;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--ambre);transition:width .3s var(--ease);
}
.nav a:hover::after,.nav a.is-here::after{width:100%}
.topbar__act{display:flex;align-items:center;gap:1rem}
.tel{
  font-family:var(--display);font-size:.86rem;font-weight:700;font-stretch:88%;
  letter-spacing:.04em;text-decoration:none;color:var(--ambre);white-space:nowrap;
}

@media (max-width:1040px){
  .nav{display:none}
  .topbar__in{justify-content:space-between}
}
@media (max-width:560px){
  .brand__name{display:none}
  .tel{font-size:.8rem}
}
/* Téléphones étroits : le numéro et le bouton doivent tenir tous les deux. */
@media (max-width:430px){
  .topbar__in{gap:.55rem;min-height:66px}
  .brand__disc{--d:36px}
  .tel{font-size:.76rem}
  .btn--sm{padding:.55rem .8rem;font-size:.68rem;letter-spacing:.05em}
}

/* ---------- 8. Héros ---------- */
.hero{
  position:relative;isolation:isolate;
  min-height:min(94svh,900px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:120px;
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(14,28,23,.88) 0%, rgba(14,28,23,.44) 28%,
    rgba(14,28,23,.74) 62%, var(--nuit) 100%);
}
.hero__sun{
  position:absolute;left:50%;bottom:26%;z-index:-1;pointer-events:none;
  width:min(140vw,1500px);aspect-ratio:2.1/1;
  transform:translate(-50%,50%);
  background:radial-gradient(ellipse at 50% 100%,
    rgba(255,186,6,.40) 0%, rgba(255,186,6,.13) 36%, transparent 68%);
  animation:sunrise 1.7s var(--ease) both;
}
@keyframes sunrise{
  from{opacity:0;transform:translate(-50%,92%) scaleY(.55)}
  to  {opacity:1;transform:translate(-50%,50%) scaleY(1)}
}

.hero__in{padding-bottom:clamp(3rem,6vw,5.5rem)}
.hero__eyebrow{color:var(--ambre)}
.hero__title{font-size:var(--t-h1);max-width:21ch}
.hero__lead{margin-top:1.85rem;max-width:44rem;color:#D7E0D9}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem}

.hero__bar{border-top:1px solid var(--rule-dark);background:rgba(14,28,23,.55);backdrop-filter:blur(6px)}
.hero__bar-in{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;
  padding-block:1.05rem;
  font-family:var(--display);font-size:var(--t-xs);font-stretch:85%;font-weight:500;
  text-transform:uppercase;letter-spacing:.13em;color:var(--brume);
}
.hero__bar-in a{color:var(--jour);text-decoration:none;border-bottom:1px solid var(--rule-dark)}
.hero__bar-in a:hover{color:var(--ambre);border-bottom-color:var(--ambre)}
.hero__dot{width:3px;height:3px;background:var(--ambre);border-radius:50%;flex:none}

/* ---------- 9. Le mur (élément signature) ---------- */
.wall{
  display:flex;gap:var(--gap);
  height:min(72vh,640px);min-height:470px;
  background:var(--nuit-2);
  border:1px solid var(--rule-dark);
  border-radius:var(--radius);
  overflow:hidden;
}
.bay{
  position:relative;display:flex;flex:none;overflow:hidden;
  width:var(--spine);
  transition:width .7s var(--ease);
}
.bay.is-open{width:calc(100% - 3 * var(--spine) - 3 * var(--gap))}

/* la tranche : lames de chêne verticales, comme les murs du showroom */
.bay__spine{
  flex:none;width:var(--spine);margin:0;position:relative;z-index:2;
  background-color:var(--bois);
  background-image:repeating-linear-gradient(90deg,
    rgba(0,0,0,.55) 0 2px,
    rgba(0,0,0,.22) 2px 4px,
    rgba(255,255,255,.055) 4px 15px,
    rgba(0,0,0,.20) 15px 17px);
}
.bay__spine::after{
  content:"";position:absolute;inset:0;background:rgba(14,28,23,.42);
  transition:background .5s;pointer-events:none;
}
.bay.is-open .bay__spine::after{background:rgba(14,28,23,.06)}

.bay__btn{
  all:unset;box-sizing:border-box;
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  width:100%;height:100%;padding:1.6rem 0;
  writing-mode:vertical-rl;transform:rotate(180deg);
  cursor:pointer;
}
.bay__label{
  font-family:var(--display);font-size:.9rem;font-weight:700;font-stretch:82%;
  text-transform:uppercase;letter-spacing:.14em;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.75);
}
.bay__plus{
  flex:none;width:13px;height:13px;position:relative;
  transform:rotate(180deg);
}
.bay__plus::before,.bay__plus::after{
  content:"";position:absolute;inset:50% 0 auto;height:1.5px;background:var(--ambre);
  transition:transform .45s var(--ease);
}
.bay__plus::after{transform:rotate(90deg)}
.bay.is-open .bay__plus::after{transform:rotate(0deg)}
.bay__btn:focus-visible{outline:2px solid var(--ambre);outline-offset:-4px}

.bay__body{position:relative;flex:1;min-width:0;overflow:hidden}
.bay__inner{position:absolute;inset:0;isolation:isolate}
.bay__inner::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(14,28,23,.95) 0%, rgba(14,28,23,.86) 26%,
    rgba(14,28,23,.50) 62%, rgba(14,28,23,.12) 100%);
}
.bay__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 1.4s var(--ease),opacity .6s;
  opacity:0;
}
.bay.is-open .bay__img{transform:scale(1);opacity:1}
.bay__text{
  position:absolute;left:0;bottom:0;z-index:2;
  width:min(46ch, calc(100vw - 12rem));
  padding:2.2rem clamp(1.5rem,2.5vw,2.6rem);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s .28s,transform .6s .28s var(--ease);
}
.bay.is-open .bay__text{opacity:1;transform:none}
.bay__kicker{
  font-family:var(--display);font-size:var(--t-xs);font-weight:600;font-stretch:80%;
  text-transform:uppercase;letter-spacing:.2em;color:var(--ambre);margin-bottom:.8rem;
}
.bay__text p{color:#DCE5DE}

.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.4rem}
.tags li{
  font-family:var(--display);font-size:.68rem;font-weight:500;font-stretch:82%;
  text-transform:uppercase;letter-spacing:.11em;color:var(--jour);
  border:1px solid var(--rule-dark);border-radius:var(--radius);
  padding:.34rem .6rem;
}

.wall__hint{
  margin-top:1.1rem;text-align:right;
  font-family:var(--display);font-size:var(--t-xs);font-stretch:82%;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;color:var(--brume);
}

@media (max-width:900px){
  .wall{display:block;height:auto;min-height:0}
  .bay{display:block;width:auto}
  .bay.is-open{width:auto}
  .bay + .bay{border-top:1px solid var(--rule-dark)}
  .bay__spine{width:auto;height:auto}
  .bay__btn{
    writing-mode:horizontal-tb;transform:none;
    padding:1.2rem clamp(1.1rem,4vw,1.8rem);
  }
  .bay__plus{transform:none}
  .bay__body{
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .55s var(--ease);
  }
  .bay.is-open .bay__body{grid-template-rows:1fr}
  .bay__inner{position:static;min-height:0;overflow:hidden}
  .bay__inner::after{display:none}
  .bay__img{
    position:relative;inset:auto;height:auto;aspect-ratio:4/3;
    transform:none;opacity:1;
  }
  .bay__text{
    position:relative;left:auto;bottom:auto;width:auto;
    opacity:1;transform:none;transition:none;
    padding:1.5rem clamp(1.1rem,4vw,1.8rem) 2rem;
  }
  .wall__hint{text-align:left}
}

/* ---------- 10. Engagements ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.2)}
.pillar{background:var(--vert);padding:2rem 1.6rem 2.2rem}
.pillar__t{
  font-family:var(--display);font-size:var(--t-h3);font-weight:800;font-stretch:112%;
  text-transform:uppercase;letter-spacing:-.005em;margin-bottom:.8rem;color:var(--ambre);
}
.pillar p{color:rgba(255,255,255,.9);font-size:1.02rem;line-height:1.65}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pillars{grid-template-columns:1fr}}

/* ---------- 11. Showroom ---------- */
.show{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.show__text .lead{margin-top:1.6rem}
.show__text p + p{margin-top:1.1rem}
.show__text > p:last-of-type{color:var(--brume)}
.show__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}
.show__figs{display:grid;gap:1rem}
.show__figs img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius)}
.show__figs img:first-child{aspect-ratio:16/11}
@media (max-width:880px){.show{grid-template-columns:1fr}}

/* ---------- 12. Parcours ---------- */
.steps{
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--rule-light);
}
.step{position:relative;display:flex;flex-direction:column;padding:1.8rem 1.6rem 0 0}
.step::before{
  content:"";position:absolute;top:0;left:0;width:2px;height:18px;background:var(--vert);
}
.step:last-child::before{height:30px;background:var(--ambre)}
.step__t{
  font-family:var(--display);font-size:1.02rem;font-weight:800;font-stretch:105%;
  text-transform:uppercase;letter-spacing:.01em;margin-bottom:.7rem;
}
.step p{font-size:1rem;line-height:1.62;color:var(--brume-2);margin-bottom:1.4rem}
.step__out{
  margin-top:auto;padding-top:.75rem;border-top:1px solid var(--rule-light);
  font-family:var(--display);font-size:var(--t-xs);font-weight:600;font-stretch:82%;
  text-transform:uppercase;letter-spacing:.13em;color:var(--vert);
}
.step:last-child .step__out{color:#7A5800}
@media (max-width:980px){
  .steps{grid-template-columns:repeat(2,1fr);gap:0 1.5rem}
  .step{padding-bottom:1.8rem}
}
@media (max-width:600px){
  .steps{grid-template-columns:1fr}
}

/* ---------- 13. Réalisations ---------- */
.works{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.75rem,1.4vw,1.25rem);align-items:stretch}
.work{grid-column:span 2;margin:0;display:flex;flex-direction:column;height:100%}
.work--wide{grid-column:span 4}
.work--full{grid-column:span 6}
.work img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);flex:none}
.work--wide img{aspect-ratio:16/9}
.work--full img{aspect-ratio:21/9}
/* Voisine d'une image large : proportion calculée pour que les deux
   fassent la même hauteur, quelle que soit la largeur de la page. */
.work--tall img{aspect-ratio:.864}
.work figcaption{
  flex:none;margin-top:.7rem;font-size:.94rem;line-height:1.5;color:var(--brume-2);
  max-width:44ch;
}
@media (max-width:820px){
  .works{grid-template-columns:repeat(2,1fr)}
  .work,.work--wide,.work--full{grid-column:span 1}
  .work--full{grid-column:span 2}
  .work--wide img,.work--tall img{aspect-ratio:4/3}
  .work--full img{aspect-ratio:16/9}
}
@media (max-width:520px){
  .works{grid-template-columns:1fr}
  .work--full{grid-column:span 1}
}

/* ---------- 13 bis. Questions fréquentes ---------- */
/* Même encre que .section--jour, fond légèrement plus dense : sépare la FAQ
   des réalisations sans introduire de couleur supplémentaire. */
.section--pale{background:var(--jour-2)}

.faq{border-top:1px solid var(--rule-light)}
.faq__item{
  display:grid;grid-template-columns:minmax(0,32%) minmax(0,1fr);
  gap:clamp(1.25rem,4vw,4rem);
  padding-block:clamp(1.8rem,3.2vw,2.8rem);
  border-bottom:1px solid var(--rule-light);
}
.faq__q{
  font-family:var(--display);font-size:clamp(1.15rem,1.75vw,1.5rem);
  font-weight:700;font-stretch:108%;line-height:1.16;letter-spacing:-.005em;
  text-wrap:balance;
}
.faq__a{margin:0}
.faq__a p{color:var(--brume-2);max-width:56ch}

/* Les preuves reprennent le repère du parcours : un tiret vert avant chaque ligne. */
.proofs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(1.25rem,2.5vw,2.5rem)}
.proofs li{
  position:relative;padding:.8rem 0 .8rem 1.15rem;
  border-top:1px solid var(--rule-light);
  font-size:1rem;line-height:1.45;
}
.proofs li:first-child,.proofs li:nth-child(2){border-top:0;padding-top:0}
.proofs li::before{
  content:"";position:absolute;left:0;top:calc(.8rem + .5em);
  width:8px;height:2px;background:var(--vert);
}
.proofs li:first-child::before,.proofs li:nth-child(2)::before{top:.5em}
@media (max-width:800px){
  .faq__item{grid-template-columns:1fr;gap:.9rem}
}
@media (max-width:620px){
  .proofs{grid-template-columns:1fr}
  .proofs li:nth-child(2){border-top:1px solid var(--rule-light);padding-top:.8rem}
  .proofs li:nth-child(2)::before{top:calc(.8rem + .5em)}
}

/* ---------- 14. Contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem)}
.contact__side .lead{margin-top:1.4rem;color:var(--brume)}
.coord{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 1.5rem;
  margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--rule-dark);
}
.coord dt{
  font-family:var(--display);font-size:var(--t-xs);font-weight:600;font-stretch:80%;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ambre);margin-bottom:.45rem;
}
.coord dd{margin:0;font-size:1rem;line-height:1.6}
.coord a{color:var(--jour);text-decoration:none;border-bottom:1px solid var(--rule-dark)}
.coord a:hover{color:var(--ambre);border-bottom-color:var(--ambre)}
.contact__shop{
  margin-top:2.4rem;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 32%;
  border-radius:var(--radius);
}
@media (max-width:880px){
  .contact{grid-template-columns:1fr}
}
@media (max-width:420px){.coord{grid-template-columns:1fr}}

/* ---------- 15. Formulaire ---------- */
.form{
  background:var(--nuit-2);
  border:1px solid var(--rule-dark);
  border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.4rem);
}
.form__intro{font-size:1rem;color:var(--brume);margin-bottom:1.8rem}
.field{display:flex;flex-direction:column;gap:.42rem;margin-bottom:1.1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field label{
  font-family:var(--display);font-size:var(--t-xs);font-weight:600;font-stretch:82%;
  text-transform:uppercase;letter-spacing:.13em;color:var(--brume);
}
.field__opt{color:rgba(147,169,158,.6);letter-spacing:.06em}
.field input,.field select,.field textarea{
  width:100%;
  background:rgba(233,238,234,.06);
  border:1px solid rgba(233,238,234,.22);
  border-radius:var(--radius);
  padding:.82rem .9rem;
  font-family:var(--body);font-size:1.02rem;color:var(--jour);
  transition:border-color .25s,background .25s;
}
.field textarea{resize:vertical;min-height:110px}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ambre) 50%),
                   linear-gradient(135deg,var(--ambre) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1.28rem),calc(100% - 14px) calc(1.28rem);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field select option{background:var(--nuit-2);color:var(--jour)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(233,238,234,.3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ambre);background:rgba(233,238,234,.08);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(147,169,158,.55)}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#E06B4F}
.field__err{
  font-family:var(--display);font-size:var(--t-xs);font-stretch:85%;font-weight:500;
  letter-spacing:.06em;color:#F09077;
}

.check{display:flex;gap:.75rem;align-items:flex-start;margin:1.4rem 0 1.6rem}
.check input{
  flex:none;width:19px;height:19px;margin-top:3px;accent-color:var(--ambre);cursor:pointer;
}
.check label{font-size:.94rem;line-height:1.55;color:var(--brume);cursor:pointer}
.check.is-bad label{color:#F09077}

.honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.form__note{margin-top:1.1rem;font-size:.96rem;line-height:1.55;min-height:1.4em}
.form__note.is-ok{color:var(--ambre)}
.form__note.is-ko{color:#F09077}

.form.is-sending .btn--full{opacity:.6;pointer-events:none}

@media (max-width:480px){.field-row{grid-template-columns:1fr;gap:0}}

/* ---------- 16. Pied de page ---------- */
.site-footer{background:var(--nuit);border-top:1px solid var(--rule-dark);padding-top:clamp(3rem,5vw,4.5rem)}
.footer__in{
  display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:2.5rem;
  padding-bottom:3rem;
}
.footer__brand{display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start}
.footer__tag{
  font-family:var(--display);font-size:1.02rem;font-weight:800;font-stretch:112%;
  text-transform:uppercase;line-height:1.1;letter-spacing:-.005em;
}
.footer__nav{display:flex;flex-direction:column;gap:.55rem}
.footer__nav a{
  font-family:var(--display);font-size:.79rem;font-weight:500;font-stretch:86%;
  text-transform:uppercase;letter-spacing:.13em;text-decoration:none;color:var(--brume);
  width:fit-content;
}
.footer__nav a:hover{color:var(--ambre)}
.footer__addr{font-style:normal;font-size:.98rem;line-height:1.75;color:var(--brume)}
.footer__addr a{color:var(--jour);text-decoration:none;border-bottom:1px solid var(--rule-dark)}
.footer__addr a:hover{color:var(--ambre)}
.footer__base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;
  padding-block:1.4rem;border-top:1px solid var(--rule-dark);
  font-family:var(--display);font-size:var(--t-xs);font-stretch:82%;font-weight:500;
  text-transform:uppercase;letter-spacing:.13em;color:var(--brume);
}
@media (max-width:820px){.footer__in{grid-template-columns:1fr;gap:2rem}}

/* ---------- 16 bis. Ajustements petits écrans ---------- */
@media (max-width:640px){
  /* Les capitales très larges débordent sur les écrans étroits :
     « KILOWATTHEURE » à 125 % dépasse la largeur d'un téléphone de 360 px. */
  .display{line-height:.99;letter-spacing:-.005em;font-stretch:110%}
  .hero{min-height:0;padding-top:104px}
  .hero__eyebrow{margin-bottom:1.4rem}
  .hero__in{padding-bottom:clamp(2.5rem,8vw,3.5rem)}
  .hero__lead{margin-top:1.5rem}
  .hero__cta{gap:.7rem}
  .hero__cta .btn{width:100%}
  .show__cta .btn{width:100%}
  .hero__bar-in{gap:.55rem .8rem;letter-spacing:.1em}
}

/* ---------- 17. Apparitions au défilement ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  .hero__sun{animation:none;opacity:1}
}