/* ═══════════════════════════════════════════════
   SEN TERANGA — Indigo Éditorial
   Big Shoulders Display + Hanken Grotesk
   ═══════════════════════════════════════════════ */

:root{
  --blanc:      #FFFFFF;
  --perle:      #F2F3F5;
  --perle-2:    #E6E8EC;
  --encre:      #111214;
  --encre-70:   #4A4D55;
  --encre-50:   #71757F;
  --indigo:     #2B3A8F;
  --indigo-900: #1E296B;
  --indigo-50:  #EEF0FA;
  --wa:         #128C4A;
  --wa-fonce:   #0E7440;

  --shell: 1240px;
  --r: 4px;
  --t: 260ms cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--blanc);
  color:var(--encre);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:24px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.skip{
  position:absolute; left:-9999px; top:12px; z-index:200;
  background:var(--indigo); color:#fff; padding:12px 20px; border-radius:var(--r);
}
.skip:focus{ left:16px; }

:focus-visible{ outline:3px solid var(--indigo); outline-offset:3px; }

/* ───────── Typographie ───────── */

.eyebrow{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:.75rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--indigo); line-height:1.4;
  margin-bottom:14px;
}

.sec-title{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:700; font-size:clamp(2.6rem,6vw,4.4rem);
  line-height:.94; letter-spacing:-.005em; text-transform:uppercase;
}

.sec-lede{
  max-width:56ch; color:var(--encre-70); margin-top:18px;
}

.sec-head{ margin-bottom:56px; max-width:760px; }

.lien-texte{
  color:var(--indigo); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:2px;
}
.lien-texte:hover{ color:var(--indigo-900); }

/* ───────── Boutons ───────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Hanken Grotesk',sans-serif; font-size:1rem; font-weight:600;
  padding:15px 30px; border:2px solid transparent; border-radius:var(--r);
  cursor:pointer; transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
  min-height:50px;
}
.btn--accent{ background:var(--indigo); color:#fff; }
.btn--accent:hover{ background:var(--indigo-900); }
.btn--ghost{ border-color:var(--perle-2); color:var(--encre); background:transparent; }
.btn--ghost:hover{ border-color:var(--encre); }
.btn--full{ width:100%; }
.btn:active{ transform:translateY(1px); }

/* ───────── WhatsApp (vert réservé) ───────── */

.wa-link,.wa-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--wa); color:#fff; font-weight:600;
  border-radius:var(--r); transition:background var(--t);
}
.wa-link svg,.wa-btn svg{ width:20px; height:20px; fill:currentColor; }
.wa-link:hover,.wa-btn:hover{ background:var(--wa-fonce); }
.wa-link{ padding:11px 20px; font-size:.95rem; }
.wa-btn{ padding:17px 32px; font-size:1.05rem; white-space:nowrap; }

/* ═════════ HEADER ═════════ */

.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--blanc);
  border-bottom:1px solid transparent;
  transition:border-color var(--t),box-shadow var(--t);
}
.site-header.is-scrolled{
  border-bottom-color:var(--perle-2);
  box-shadow:0 2px 20px rgba(17,18,20,.05);
}

.header__inner{
  display:flex; align-items:center; gap:36px;
  height:76px;
}

.logo{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.logo__mark{
  display:grid; place-items:center;
  width:38px; height:38px; background:var(--indigo); color:#fff;
  font-family:'Big Shoulders Display',sans-serif; font-weight:700;
  font-size:1.2rem; letter-spacing:.02em; border-radius:2px;
}
.logo__text{
  font-family:'Big Shoulders Display',sans-serif;
  font-size:1.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.01em; line-height:1;
}

.nav{ display:flex; gap:30px; margin-left:auto; }
.nav a{
  font-size:.95rem; font-weight:500; color:var(--encre-70);
  position:relative; padding:6px 0; transition:color var(--t);
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--indigo); transition:width var(--t);
}
.nav a:hover{ color:var(--encre); }
.nav a:hover::after{ width:100%; }

.burger{
  display:none; flex-direction:column; gap:5px; justify-content:center;
  width:44px; height:44px; background:none; border:none; cursor:pointer;
}
.burger span{
  display:block; height:2px; width:24px; background:var(--encre);
  transition:transform var(--t),opacity var(--t);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ═════════ HERO ═════════ */

.hero{ padding:80px 0 96px; }

.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:64px; align-items:center;
}

.hero__title{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:800; font-size:clamp(4.2rem,11vw,8.5rem);
  line-height:.82; text-transform:uppercase; letter-spacing:-.01em;
  margin-bottom:28px;
}
.hero__title span{ display:block; }
.hero__title .ink-accent{ color:var(--indigo); padding-left:.14em; }

.hero__lede{
  max-width:46ch; color:var(--encre-70); font-size:1.08rem;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

.hero__facts{
  display:flex; gap:40px; margin-top:44px;
  padding-top:26px; border-top:1px solid var(--perle-2);
}
.hero__facts li{ display:flex; flex-direction:column; }
.hero__facts strong{
  font-family:'Big Shoulders Display',sans-serif;
  font-size:2.2rem; font-weight:700; line-height:1;
}
.hero__facts span{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--encre-50); margin-top:6px;
}

.hero__media{ position:relative; }
.hero__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r);
}
.hero__media::before{
  content:''; position:absolute; inset:auto -28px -28px auto;
  width:62%; height:64%; background:var(--indigo-50);
  border-radius:var(--r); z-index:-1;
}
.hero__media figcaption{
  font-size:.82rem; color:var(--encre-50); margin-top:14px;
  letter-spacing:.02em;
}

/* ═════════ DEUX PORTES ═════════ */

.doors{ padding-bottom:96px; }
.doors__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }

.door{
  display:block; background:var(--perle);
  border-radius:var(--r); overflow:hidden;
  transition:transform var(--t);
}
.door img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform 500ms cubic-bezier(.2,.7,.3,1);
}
.door:hover img{ transform:scale(1.04); }
.door:hover{ transform:translateY(-3px); }
.door__body{ padding:28px 30px 32px; }
.door__body h2{
  font-family:'Big Shoulders Display',sans-serif;
  font-size:2.3rem; font-weight:700; text-transform:uppercase;
  line-height:1; margin-bottom:12px;
}
.door__body p{ color:var(--encre-70); max-width:44ch; }
.door__go{
  display:inline-block; margin-top:16px; color:var(--indigo);
  font-weight:600; font-size:.95rem;
}
.door__go::after{ content:' →'; }

/* ═════════ CATALOGUE ═════════ */

.catalogue{ padding:96px 0; }
.catalogue--alt{ background:var(--perle); }

.grid-produits{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}

.carte{
  background:var(--blanc); border:1px solid var(--perle-2);
  border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color var(--t),box-shadow var(--t);
}
.carte:hover{ border-color:var(--encre); box-shadow:0 10px 30px rgba(17,18,20,.07); }

.carte__media{ overflow:hidden; background:var(--perle); }
.carte__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform 500ms cubic-bezier(.2,.7,.3,1);
}
.carte:hover .carte__media img{ transform:scale(1.04); }

.carte__body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.carte__type{
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--encre-50); line-height:1.4;
}
.carte__nom{
  font-family:'Big Shoulders Display',sans-serif;
  font-size:1.75rem; font-weight:700; text-transform:uppercase;
  line-height:1; margin:8px 0 6px;
}
.carte__prix{ font-weight:700; font-size:1.1rem; }

.pointures{ display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 10px; }
.p{
  min-width:42px; height:38px; padding:0 8px;
  background:var(--blanc); border:1.5px solid var(--perle-2);
  border-radius:2px; cursor:pointer;
  font-family:'Hanken Grotesk',sans-serif; font-size:.92rem; font-weight:600;
  color:var(--encre); transition:all var(--t);
}
.p:hover:not(:disabled){ border-color:var(--encre); }
.p.is-selected{ background:var(--indigo); border-color:var(--indigo); color:#fff; }
.p.is-out{
  color:var(--encre-50); cursor:not-allowed; opacity:.55;
  text-decoration:line-through; background:var(--perle);
}

.carte__hint{
  font-size:.82rem; color:var(--encre-50); margin-bottom:14px; min-height:22px;
}
.carte__hint.is-error{ color:var(--indigo); font-weight:600; }
.carte__body .btn{ margin-top:auto; padding:14px 20px; }

.catalogue__note{
  margin-top:44px; text-align:center; color:var(--encre-70);
}

/* ═════════ ATELIER ═════════ */

.atelier{ padding:96px 0; }
.atelier__grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center;
}
.atelier__media img{
  width:100%; aspect-ratio:9/10; object-fit:cover; border-radius:var(--r);
}
.atelier__text p{ color:var(--encre-70); max-width:58ch; margin-top:20px; }
.atelier__text .sec-title{ margin-bottom:4px; }

.chiffres{
  display:flex; flex-wrap:wrap; gap:44px; margin-top:40px;
  padding-top:28px; border-top:1px solid var(--perle-2);
}
.chiffres li{ display:flex; flex-direction:column; }
.chiffres strong{
  font-family:'Big Shoulders Display',sans-serif;
  font-size:3.2rem; font-weight:700; line-height:1; color:var(--indigo);
}
.chiffres span{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--encre-50); margin-top:8px;
}

/* ═════════ POINTURES ═════════ */

.pointures-sec{ padding:96px 0; background:var(--perle); }
.pointures__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:start;
}
.pointures-sec p{ color:var(--encre-70); max-width:56ch; margin-top:20px; }
.pointures-sec .sec-title{ margin-bottom:4px; }

.alerte{
  background:var(--indigo-50); border-left:3px solid var(--indigo);
  padding:20px 24px; border-radius:var(--r); color:var(--encre) !important;
  margin-top:28px !important;
}

.tableau-wrap{ background:var(--blanc); border-radius:var(--r); overflow:hidden; }
.tableau{ width:100%; border-collapse:collapse; }
.tableau th{
  text-align:left; padding:16px 24px; background:var(--encre); color:#fff;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
}
.tableau td{
  padding:14px 24px; border-bottom:1px solid var(--perle-2); font-size:1rem;
}
.tableau tbody tr:last-child td{ border-bottom:none; }
.tableau td:last-child{ font-weight:700; }

/* ═════════ LIVRAISON ═════════ */

.livraison{ padding:96px 0; }

.zones{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:0 48px; border-top:1px solid var(--perle-2);
}
.zones li{
  display:grid; grid-template-columns:1fr auto auto; gap:20px; align-items:center;
  padding:17px 0; border-bottom:1px solid var(--perle-2);
}
.zone__nom{ font-weight:500; }
.zone__prix{ font-weight:700; color:var(--indigo); }
.zone__delai{
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--encre-50); min-width:88px; text-align:right;
}

.paiement{
  margin-top:52px; padding:32px 36px;
  background:var(--perle); border-radius:var(--r);
}
.paiement h3{
  font-family:'Big Shoulders Display',sans-serif;
  font-size:1.9rem; font-weight:700; text-transform:uppercase; line-height:1;
}
.paiement__liste{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 14px; }
.paiement__liste li{
  background:var(--blanc); border:1px solid var(--perle-2);
  padding:9px 18px; border-radius:2px; font-weight:600; font-size:.95rem;
}
.paiement p{ color:var(--encre-70); max-width:60ch; }

/* ═════════ AVIS ═════════ */

.avis{ padding:96px 0; background:var(--perle); }
.avis__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.avis__item{
  background:var(--blanc); padding:32px 30px;
  border-radius:var(--r); border-top:3px solid var(--indigo);
}
.avis__item p{ color:var(--encre); max-width:40ch; }
.avis__item p::before{ content:'« '; color:var(--indigo); }
.avis__item p::after{ content:' »'; color:var(--indigo); }
.avis__item cite{
  display:block; margin-top:18px; font-style:normal;
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--encre-50); font-weight:600;
}

/* ═════════ BANDEAU WHATSAPP ═════════ */

.bandeau-wa{ padding:88px 0; }
.bandeau-wa__inner{
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  background:var(--perle); border-radius:var(--r); padding:48px 52px;
}
.bandeau-wa h2{
  font-family:'Big Shoulders Display',sans-serif;
  font-size:clamp(2.1rem,4vw,3.1rem); font-weight:700;
  text-transform:uppercase; line-height:.98; max-width:18ch;
}
.bandeau-wa p{ color:var(--encre-70); margin-top:14px; max-width:48ch; }

/* ═════════ FOOTER ═════════ */

.site-footer{ border-top:1px solid var(--perle-2); padding:64px 0 0; }
.footer__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px;
  padding-bottom:48px;
}
.footer__brand .logo__mark{ margin-bottom:14px; }
.footer__nom{
  font-family:'Big Shoulders Display',sans-serif;
  font-size:1.7rem; font-weight:700; text-transform:uppercase;
  line-height:1; margin-bottom:12px;
}
.footer__brand p{ color:var(--encre-70); font-size:.95rem; }

.site-footer h3{
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; margin-bottom:16px;
}
.site-footer li{ margin-bottom:10px; color:var(--encre-70); font-size:.95rem; }
.site-footer li a:hover{ color:var(--indigo); }

.footer__bas{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:24px; padding-bottom:28px;
  border-top:1px solid var(--perle-2);
  font-size:.85rem; color:var(--encre-50);
}
.footer__bas a{ color:var(--indigo); font-weight:600; }

/* ═════════ BARRE MOBILE ═════════ */

.barre-mobile{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--blanc); border-top:1px solid var(--perle-2);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.barre-mobile a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; border-radius:var(--r); font-weight:600; font-size:.98rem;
}
.barre-mobile__cat{ border:2px solid var(--perle-2); color:var(--encre); }
.barre-mobile__wa{ background:var(--wa); color:#fff; }
.barre-mobile__wa svg{ width:20px; height:20px; fill:currentColor; }

/* ═════════ TOAST ═════════ */

.toast{
  position:fixed; left:50%; bottom:96px; transform:translate(-50%,20px);
  background:var(--encre); color:#fff; padding:13px 24px; border-radius:var(--r);
  font-size:.92rem; font-weight:500; z-index:150;
  opacity:0; pointer-events:none; transition:opacity var(--t),transform var(--t);
  max-width:calc(100% - 32px); text-align:center;
}
.toast.is-visible{ opacity:1; transform:translate(-50%,0); }

/* ═════════ REVEAL ═════════ */

.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity 620ms cubic-bezier(.2,.7,.3,1),transform 620ms cubic-bezier(.2,.7,.3,1);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

@media (max-width:1100px){
  .nav{ gap:22px; }
  .hero__grid{ gap:44px; }
  .grid-produits{ grid-template-columns:repeat(3,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .nav{
    position:fixed; inset:76px 0 auto 0;
    flex-direction:column; gap:0; background:var(--blanc);
    border-bottom:1px solid var(--perle-2);
    padding:8px 24px 24px; margin:0;
    transform:translateY(-120%); transition:transform var(--t);
    max-height:calc(100vh - 76px); overflow-y:auto;
  }
  .nav.is-open{ transform:translateY(0); }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--perle-2); font-size:1.05rem; }
  .nav a::after{ display:none; }
  .burger{ display:flex; margin-left:auto; }
  .header__wa{ display:none; }

  .hero{ padding:56px 0 72px; }
  .hero__grid{ grid-template-columns:1fr; gap:40px; }
  .hero__media::before{ display:none; }
  .hero__facts{ gap:30px; }

  .doors__grid{ grid-template-columns:1fr; }
  .atelier__grid,.pointures__grid{ grid-template-columns:1fr; gap:40px; }
  .avis__grid{ grid-template-columns:1fr; }
  .zones{ grid-template-columns:1fr; gap:0; }

  .bandeau-wa__inner{ flex-direction:column; align-items:flex-start; padding:36px 32px; }
  .bandeau-wa h2{ max-width:none; }

  .barre-mobile{ display:flex; }
  body{ padding-bottom:76px; }
  .toast{ bottom:92px; }
}

@media (max-width:680px){
  .catalogue,.atelier,.pointures-sec,.livraison,.avis{ padding:64px 0; }
  .bandeau-wa{ padding:64px 0; }
  .grid-produits{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .carte__body{ padding:15px 14px 18px; }
  .carte__nom{ font-size:1.35rem; }
  .carte__prix{ font-size:1rem; }
  .p{ min-width:36px; height:34px; font-size:.85rem; }
  .pointures{ gap:5px; }
  .carte__hint{ font-size:.76rem; }
  .carte__body .btn{ padding:12px 14px; font-size:.92rem; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .paiement{ padding:26px 24px; }
  .sec-head{ margin-bottom:36px; }
}

@media (max-width:420px){
  .shell{ padding-inline:18px; }
  .logo__text{ font-size:1.4rem; }
  .hero__facts{ gap:20px; }
  .hero__facts strong{ font-size:1.8rem; }
  .hero__actions .btn{ width:100%; }
  .zones li{ grid-template-columns:1fr auto; }
  .zone__delai{ grid-column:1 / -1; text-align:left; min-width:0; margin-top:-6px; }
}

/* ═════════ ACCESSIBILITÉ MOTION ═════════ */

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

/* ═════════ IMPRESSION ═════════ */

@media print{
  .site-header,.barre-mobile,.bandeau-wa,.toast,.hero__actions{ display:none !important; }
  body{ padding:0; font-size:12pt; }
  .reveal{ opacity:1; transform:none; }
  .carte{ break-inside:avoid; }
}