/* ===========================================================
   LE PAINSÉUM — V2
   Valeurs mesurées sur la maquette Figma publiée le 06/10/2026.
   =========================================================== */

:root{
  --farine:#F8F6F0;        /* fond de page, mesuré */
  --encre:#11110F;         /* texte et sections sombres */
  --bleu:#0E2773;          /* bleu signature, identique à la V1 */
  --pierre:#DDD7CA;        /* section déjeuner, mesuré */
  --calcaire:#C8C3B8;      /* neutre déclaré page SYSTÈME */
  --filet:rgba(17,17,15,.16);
  --filet-clair:rgba(255,255,255,.22);

  --titre:"Bodoni Moda",Didot,"Times New Roman",serif;
  --courant:"Manrope",system-ui,Arial,sans-serif;

  --gouttiere:clamp(20px,8vw,123px);
  --respiration:clamp(72px,11vw,170px);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--farine);
  color:var(--encre);
  font-family:var(--courant);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

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

a{color:inherit;text-decoration:none}

/* rayon 0 partout — règle de la page SYSTÈME */
button,input,select,textarea,.bouton{border-radius:0}

/* focus bleu 2 px — règle de la page SYSTÈME */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--bleu);
  outline-offset:3px;
}
.sombre a:focus-visible,.sombre button:focus-visible{outline-color:#fff}

/* ----------------------------------------------------------
   TYPOGRAPHIE
   ---------------------------------------------------------- */

.titre{
  font-family:var(--titre);
  font-weight:400;
  margin:0;
  text-wrap:balance;
}

.surtitre{
  font-family:var(--courant);
  font-size:clamp(10px,.72vw,11px);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--encre);
  margin:0;
}
.sombre .surtitre,.bleu .surtitre{color:rgba(255,255,255,.72)}

.numero{
  font-family:var(--titre);
  font-style:italic;
  color:var(--bleu);
}

.courant{
  font-family:var(--courant);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.62;
  max-width:46ch;
}

.capitales{
  font-family:var(--courant);
  font-size:clamp(11px,.85vw,13px);
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  line-height:1.9;
}

/* ----------------------------------------------------------
   MISE EN PAGE
   ---------------------------------------------------------- */

.section{
  padding-block:var(--respiration);
  padding-inline:var(--gouttiere);
}
.section--serree{padding-block:clamp(48px,6vw,96px)}

.sombre{background:var(--encre);color:#fff}
.sombre .titre{color:#fff}
.bleu{background:var(--bleu);color:#fff}
.bleu .titre{color:#fff}
.bleu .numero{color:rgba(255,255,255,.75)}
.pierre{background:var(--pierre)}

/* ----------------------------------------------------------
   EN-TÊTE
   ---------------------------------------------------------- */

.entete{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:clamp(20px,2.2vw,34px) var(--gouttiere);
}

.marque{font-family:var(--titre);line-height:1.05}
.marque b{display:block;font-weight:500;font-size:clamp(17px,1.2vw,18px);letter-spacing:.03em}
.marque span{
  display:block;font-family:var(--courant);font-size:9px;
  font-weight:500;letter-spacing:.3em;color:rgba(17,17,15,.55);margin-top:3px;
}

.nav{display:flex;gap:clamp(18px,2.4vw,38px);align-items:center}
.nav a{
  font-family:var(--courant);font-size:11px;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;
  padding:14px 0;min-height:44px;display:inline-flex;align-items:center;
  border-bottom:1px solid transparent;
}
.nav a:hover{border-bottom-color:var(--encre)}

.trouver{
  font-family:var(--courant);font-size:11px;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.5em;min-height:44px;
}

.burger{display:none;background:none;border:0;padding:10px;min-height:44px;min-width:44px;cursor:pointer}
.burger span{display:block;width:22px;height:1px;background:var(--encre);margin:5px 0}

/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.heros{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  gap:0;
  min-height:min(78vh,720px);
}

.heros-texte{
  padding:clamp(28px,4vw,56px) clamp(24px,4vw,64px) clamp(28px,3vw,44px) var(--gouttiere);
  display:flex;flex-direction:column;justify-content:space-between;
}

.heros h1{
  font-family:var(--titre);font-weight:400;margin:clamp(22px,3vw,44px) 0 0;
  font-size:clamp(52px,9vw,150px);
  line-height:.72;
  letter-spacing:-.06em;
}
.heros h1 em{font-style:italic;color:var(--bleu);display:block}
.heros h1 .ligne{display:block}

.heros-pied{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--filet);
  margin-top:clamp(28px,4vw,56px);
}

.descendre{
  display:inline-flex;align-items:center;gap:1.4em;margin-top:clamp(22px,2.6vw,38px);
  min-height:44px;
}

.heros-image{position:relative;background:var(--calcaire);overflow:hidden}
.heros-image img{width:100%;height:100%;object-fit:cover;object-position:center 42%}

.edition{
  position:absolute;top:clamp(16px,2vw,30px);right:clamp(16px,2vw,30px);
  text-align:right;color:#fff;font-family:var(--courant);
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1.7;
  text-shadow:0 1px 14px rgba(0,0,0,.5);
}

/* réserve photo — reprend la mention portée dans la maquette */
.reserve{
  position:absolute;left:0;bottom:0;
  background:var(--bleu);color:#fff;
  font-family:var(--courant);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:11px 18px;
  display:flex;flex-direction:column;gap:3px;
}
.reserve small{font-weight:400;letter-spacing:.1em;opacity:.8;text-transform:none}

/* ----------------------------------------------------------
   SECTION INTRO
   ---------------------------------------------------------- */

.intro{display:grid;grid-template-columns:auto minmax(190px,1fr) 2fr;gap:clamp(24px,4vw,64px);align-items:start}
.intro .numero{font-size:clamp(18px,1.6vw,24px)}
.intro .phrase{
  font-family:var(--titre);font-weight:400;
  font-size:clamp(30px,4.2vw,66px);line-height:1.04;letter-spacing:-.02em;margin:0;
}

/* ----------------------------------------------------------
   BLOCS TEXTE + IMAGE
   ---------------------------------------------------------- */

.duo{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;min-height:min(72vh,820px)}
.duo-texte{padding:var(--respiration) clamp(24px,4vw,64px) var(--respiration) var(--gouttiere)}
.duo-image{position:relative;align-self:stretch;overflow:hidden;background:var(--calcaire)}
.duo-image img{width:100%;height:100%;object-fit:cover}
.duo--inverse .duo-texte{order:2;padding-inline:clamp(24px,4vw,64px) var(--gouttiere)}
.duo--inverse .duo-image{order:1}

.h2-creations{font-size:clamp(42px,7vw,116px);line-height:.82;letter-spacing:-.05em}
.h2-pain{font-size:clamp(38px,6vw,100px);line-height:.88;letter-spacing:-.05em}
.h2-geste{font-size:clamp(38px,6vw,100px);line-height:.86;letter-spacing:-.05em}
.h2-maison{font-size:clamp(40px,6.8vw,112px);line-height:.82;letter-spacing:-.05em}
.h2-midi{font-size:clamp(40px,6.8vw,112px);line-height:.84;letter-spacing:-.05em}
.h2-pro{font-size:clamp(42px,7.8vw,128px);line-height:.78;letter-spacing:-.06em}
.h2-boutique{font-size:clamp(36px,5.9vw,96px);line-height:.88}

.sous{margin:clamp(18px,2vw,30px) 0 0;font-family:var(--titre);font-size:clamp(16px,1.2vw,18px);line-height:1.5;max-width:34ch}

/* ----------------------------------------------------------
   LIENS ET BOUTONS
   ---------------------------------------------------------- */

.lien{
  display:inline-flex;align-items:center;justify-content:space-between;gap:2.5em;
  margin-top:clamp(26px,3vw,46px);min-width:min(320px,100%);min-height:44px;
  padding-bottom:12px;border-bottom:1px solid var(--filet);
  font-family:var(--courant);font-size:11px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;
  transition:border-color .2s;
}
.lien:hover{border-bottom-color:var(--bleu)}
.sombre .lien,.bleu .lien{border-bottom-color:var(--filet-clair)}
.sombre .lien:hover,.bleu .lien:hover{border-bottom-color:#fff}

.bouton{
  display:inline-flex;align-items:center;justify-content:space-between;gap:3em;
  background:var(--bleu);color:#fff;
  padding:21px 26px;min-height:44px;margin-top:clamp(26px,3vw,46px);
  font-family:var(--courant);font-size:11px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;
}
.bouton:hover{background:var(--encre)}
.bleu .bouton{background:#fff;color:var(--bleu)}
.bleu .bouton:hover{background:var(--encre);color:#fff}

/* ----------------------------------------------------------
   LES TROIS LEVAINS
   ---------------------------------------------------------- */

.levains{list-style:none;margin:clamp(30px,3.4vw,52px) 0 0;padding:0}
.levains li{display:grid;grid-template-columns:3.2em 1fr;gap:1em;align-items:baseline;padding:clamp(14px,1.4vw,20px) 0;border-top:1px solid var(--filet)}
.levains li:last-child{border-bottom:1px solid var(--filet)}
.levains .numero{font-size:clamp(14px,1.05vw,16px)}
.levains h3{font-family:var(--titre);font-weight:400;font-size:clamp(20px,1.6vw,24px);margin:0 0 .25em}
.levains p{margin:0;font-family:var(--courant);font-size:10px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:rgba(17,17,15,.62)}

/* ----------------------------------------------------------
   À LA VITRINE
   ---------------------------------------------------------- */

.vitrine{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,26px);margin-top:clamp(34px,4vw,60px)}
.vitrine figure{margin:0}
.vitrine .cadre{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--calcaire)}
.vitrine img{width:100%;height:100%;object-fit:cover}
.vitrine figcaption{display:grid;grid-template-columns:2.4em 1fr auto;align-items:baseline;gap:.6em;margin-top:clamp(12px,1.2vw,18px)}
.vitrine h3{font-family:var(--titre);font-weight:400;font-size:clamp(19px,2vw,30px);margin:0}
.vitrine .rang{font-family:var(--titre);font-style:italic;font-size:clamp(13px,1vw,15px);color:var(--bleu)}
.vitrine .fleche{font-size:13px;color:rgba(17,17,15,.55)}

/* ----------------------------------------------------------
   LE GESTE
   ---------------------------------------------------------- */

.geste{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,5vw,80px);align-items:end}
.geste .horodatage{font-family:var(--courant);font-size:10px;font-weight:600;letter-spacing:.2em;color:rgba(255,255,255,.7);text-transform:uppercase}

/* ----------------------------------------------------------
   PRESSE
   ---------------------------------------------------------- */

.presse{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(24px,4vw,64px);padding-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--filet);margin-top:clamp(20px,2.2vw,30px)}
.presse span{font-family:var(--titre);font-size:clamp(18px,1.7vw,24px)}

/* ----------------------------------------------------------
   BOUTIQUE
   ---------------------------------------------------------- */

.boutique{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.adresse-geante{font-family:var(--courant);font-weight:600;font-size:clamp(16px,1.55vw,22px);letter-spacing:.15em;line-height:1.3;text-transform:uppercase;margin:clamp(14px,1.6vw,22px) 0 0}
.adresse-geante b{display:block;font-family:var(--titre);font-weight:400;font-size:clamp(56px,7vw,110px);letter-spacing:-.02em;line-height:.9}
.coord{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,30px);margin-top:clamp(26px,3vw,44px);padding-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--filet)}
.coord dt{font-family:var(--courant);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(17,17,15,.55)}
.coord dd{margin:.5em 0 0;font-family:var(--titre);font-size:clamp(16px,1.3vw,19px)}
.tel{font-family:var(--titre);font-size:clamp(20px,1.6vw,24px);display:inline-block;margin-top:clamp(20px,2.2vw,30px);border-bottom:1px solid var(--filet);padding-bottom:6px;min-height:44px}

/* ----------------------------------------------------------
   PIED DE PAGE
   ---------------------------------------------------------- */

.pied{background:var(--encre);color:#fff;padding:clamp(48px,6vw,88px) var(--gouttiere) clamp(30px,3vw,44px)}
.pied-haut{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(26px,4vw,64px);align-items:start}
.pied .marque b{color:#fff}
.pied .marque span{color:rgba(255,255,255,.55)}
.pied-signature{font-family:var(--titre);font-size:clamp(24px,2.4vw,34px);margin:clamp(18px,2vw,28px) 0 0;max-width:16ch}
.pied-liens{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.pied-liens a{font-family:var(--titre);font-size:clamp(16px,1.2vw,17px);min-height:44px;display:inline-flex;align-items:center}
.pied-bas{margin-top:clamp(40px,5vw,72px);padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--filet-clair);font-family:var(--courant);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}

/* ----------------------------------------------------------
   MOBILE — maquette 4 colonnes
   ---------------------------------------------------------- */

@media (max-width:900px){
  .nav,.trouver{display:none}
  .burger{display:block}
  .heros{grid-template-columns:1fr;min-height:0}
  .heros-image{aspect-ratio:4/5}
  .heros-texte{padding:clamp(24px,6vw,40px) var(--gouttiere) clamp(30px,7vw,48px)}
  .intro{grid-template-columns:1fr;gap:clamp(18px,4vw,28px)}
  .duo,.duo--inverse{grid-template-columns:1fr;min-height:0}
  .duo-texte,.duo--inverse .duo-texte{order:2;padding:var(--respiration) var(--gouttiere)}
  .duo-image,.duo--inverse .duo-image{order:1;aspect-ratio:4/5}
  .vitrine{grid-template-columns:repeat(2,1fr)}
  .geste,.boutique,.pied-haut{grid-template-columns:1fr}
  .coord{grid-template-columns:1fr 1fr}
  .lien,.bouton{min-width:100%}
}

@media (max-width:420px){
  .vitrine{grid-template-columns:1fr}
  .coord{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}