/* Marie Baume — feuille de style.
   Univers : la monographie de photographe. Papier blanc, encre profonde, grandes planches,
   légendes précises, marges larges. Un seul accent : la garance du logo, réservée à ce qui est
   vivant ou cliquable. */
:root{
  --papier:#FFFFFF; --encre:#141316; --encre-2:#55524F; --pierre:#EEEEEC; --nuit-2:#25232A;
  --garance:#C4464C;

  --titre:'Libre Caslon Display',Didot,'Times New Roman',serif;
  --texte:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;

  --t-1:clamp(46px,6.6vw,96px);
  --t-2:clamp(34px,4vw,60px);
  --t-3:clamp(24px,2.1vw,30px);
  --t-corps:18px;
  --t-petit:15px;

  --marge:clamp(20px,5vw,80px);
  --large:1440px;
  --section:clamp(96px,12vw,190px);
  --sortie:cubic-bezier(.16,1,.3,1);
}

/* ---------- socle ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px;scrollbar-color:var(--encre) var(--pierre)}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--texte);font-size:var(--t-corps);line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--encre);color:var(--papier)}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit;text-decoration-color:var(--garance);text-decoration-thickness:1.5px;text-underline-offset:.25em}
a:hover{color:var(--garance)}
:focus-visible{outline:2px solid var(--garance);outline-offset:4px}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
h1,h2{font-family:var(--titre);letter-spacing:-.02em;line-height:1.02}
h1{font-size:var(--t-1)}
h2{font-size:var(--t-2)}
h3{font-family:var(--texte);font-size:var(--t-corps);font-weight:600;line-height:1.4}
p{margin:0 0 1em;max-width:60ch}
ul,ol{margin:0;padding:0;list-style:none}
.num{font-variant-numeric:tabular-nums lining-nums}
.skip{position:absolute;left:-999px;top:8px;background:var(--encre);color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:var(--large);margin:0 auto;padding:0 var(--marge)}
.declaration{font-family:var(--titre);font-size:var(--t-3);line-height:1.3;letter-spacing:-.01em;max-width:30ch;margin:0}
.note{font-size:var(--t-petit);color:var(--encre-2)}

section{padding:var(--section) 0}
.nuit{background:var(--encre);color:var(--papier)}
/* deux sections sur papier qui se suivent : un seul espace, pas deux */
main>section:not(.nuit):not(.final):not(.titre)+section:not(.nuit){padding-top:0}
.final:not(.nuit){background:var(--pierre);padding-top:var(--section)!important}
.final:not(.nuit) .btn:hover{background:transparent}
.nuit .note,.nuit .planche figcaption{color:#B9B5B0}
.nuit a:hover,.nuit .lien:hover{color:#fff}

/* ---------- boutons et liens ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;background:var(--encre);color:var(--papier);font-family:var(--texte);font-weight:500;font-size:var(--t-petit);letter-spacing:.01em;text-decoration:none;border:1.5px solid var(--encre);cursor:pointer;transition:background-color .25s,color .25s}
.btn:hover{background:var(--papier);color:var(--encre)}
.nuit .btn{background:var(--papier);color:var(--encre);border-color:var(--papier)}
.nuit .btn:hover{background:transparent;color:var(--papier)}
.btn.second{background:transparent;color:inherit;border-color:currentColor}
.btn.second:hover{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.nuit .btn.second:hover{background:var(--papier);color:var(--encre)}
.lien{font-weight:500;text-decoration:underline;text-decoration-color:var(--garance);text-decoration-thickness:1.5px;text-underline-offset:.3em}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}

/* ---------- en-tête ---------- */
header.top{position:sticky;top:0;z-index:50;background:var(--papier)}
.topin{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px}
.mark{display:block;line-height:0;flex:none}
.mark img{height:24px;width:auto}
nav.main{display:flex;align-items:center;gap:clamp(14px,1.6vw,28px);font-size:var(--t-petit)}
nav.main a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.45em;white-space:nowrap;padding:6px 0;transition:text-decoration-color .25s}
nav.main a:hover{color:inherit;text-decoration-color:var(--encre)}
nav.main a[aria-current]{text-decoration-color:var(--garance)}
nav.main a.btn{min-height:44px;padding:0 20px;margin-left:8px}
nav.main a.btn:hover{color:var(--encre)}
.burger{display:none;width:48px;height:48px;border:0;background:none;color:var(--encre);align-items:center;justify-content:center;cursor:pointer}

/* ---------- planches (photographies légendées) ---------- */
.planche{margin:0}
.planche .cadre{overflow:hidden;background:var(--pierre)}
.planche .cadre picture{height:100%}
.planche img{width:100%;height:100%;object-fit:cover;object-position:50% var(--y,50%)}
.planche figcaption{font-size:var(--t-petit);color:var(--encre-2);margin-top:14px;max-width:46ch;line-height:1.5}
.planche.portrait .cadre{aspect-ratio:4/5}
.planche.paysage .cadre{aspect-ratio:3/2}
.planche.carre .cadre{aspect-ratio:1}

/* ---------- page de titre (accueil et pages intérieures) ---------- */
.titre{padding:clamp(40px,6vw,96px) 0 0}
.titre .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:clamp(28px,4vw,72px);align-items:end}
.titre h1{max-width:13ch}
.titre aside p{margin:0}
.titre aside .actions{margin-top:22px}
.titre .bandeau-photo{margin-top:clamp(40px,5vw,72px)}
.titre .bandeau-photo .cadre{height:min(64vh,720px);min-height:340px}
.titre .bandeau-photo img{object-position:50% var(--y,38%)}
/* photo verticale (portrait) : bandeau plus haut pour garder visage et tête entiers */
.titre .bandeau-photo.vertical .cadre{height:auto;min-height:0;aspect-ratio:3/2;max-height:none}
.titre .bandeau-photo figcaption{padding:0 var(--marge);max-width:none}
.statut{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:var(--t-petit)}
.statut::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--encre-2);flex:none}
.statut[data-etat="ouvert"]::before{background:var(--garance)}

/* ---------- compositions ---------- */
.duo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,120px);align-items:end}
.duo.inverse{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.duo.haut{align-items:start}
.duo h2+p,.duo h2+.declaration,.duo h2+blockquote{margin-top:28px}
.entete{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,6vw,120px);align-items:end;margin-bottom:clamp(44px,5vw,80px)}
.entete p{margin:0}
.debord-g{margin-left:calc(-1 * var(--marge))}
.debord-d{margin-right:calc(-1 * var(--marge))}
.debord-g figcaption{padding-left:var(--marge)}

/* suite de planches : une grande, puis des plus petites décalées */
.suite{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,32px);align-items:start}
.suite .planche:nth-child(1){grid-column:1/8}
.suite .planche:nth-child(2){grid-column:8/13;margin-top:clamp(60px,10vw,180px)}
.suite .planche:nth-child(3){grid-column:3/7}
.suite .planche:nth-child(4){grid-column:7/13}
.suite .planche:nth-child(1) .cadre{aspect-ratio:4/5}
.suite .planche:nth-child(2) .cadre{aspect-ratio:3/4}
.suite .planche:nth-child(3) .cadre{aspect-ratio:4/5}
.suite .planche:nth-child(4) .cadre{aspect-ratio:3/2}

/* listes de prix et de faits : lignes sur marche de ton, jamais de filets */
.prix{display:grid;gap:3px;margin:34px 0 0}
.prix>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;background:var(--pierre);padding:15px 20px}
.prix strong{font-weight:500;font-size:var(--t-corps);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.nuit .prix>div,.nuit .liste li{background:var(--nuit-2)}
.liste{display:grid;gap:3px;margin-top:30px}
.liste li{background:var(--pierre);padding:15px 20px;line-height:1.5}
.liste strong{font-weight:600;margin-right:.6em}
.faits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px)}
.faits h3{margin-bottom:10px}
.faits p{margin:0;color:var(--encre-2)}
.nuit .faits p{color:#C9C5C0}

.citation{margin:0;font-family:var(--titre);font-size:clamp(28px,2.3vw,34px);line-height:1.35;max-width:32ch}
.citation p{max-width:none;margin:0}

/* sommaire : table des matières des prestations, la planche apparaît à côté */
.sommaire{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,120px);align-items:start}
.sommaire li a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:24px;padding:22px 0;text-decoration:none;transition:padding-left .45s var(--sortie),color .25s}
.sommaire li+li{margin-top:3px}
.sommaire li a{background:var(--pierre);padding-left:22px;padding-right:22px}
.sommaire .t{font-family:var(--titre);font-size:var(--t-3);line-height:1.3}
.sommaire .p{font-size:var(--t-corps);color:var(--encre-2);white-space:nowrap}
.sommaire li a:hover,.sommaire li a:focus-visible,.sommaire li a.actif{padding-left:38px;color:var(--encre);background:#E4E4E1}
.sommaire .apercu{position:sticky;top:110px}
.sommaire .apercu .cadre{aspect-ratio:4/5;position:relative;background:var(--pierre)}
.sommaire .apercu picture{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--sortie)}
.sommaire .apercu picture.vu{opacity:1}

/* réalisations : grille de planches, alimentée par Instagram quand le flux est configuré */
.flux-section{padding-top:clamp(56px,6vw,96px)}
.flux{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(16px,2vw,32px);align-items:start}
.flux .planche:nth-child(3n+2){margin-top:clamp(40px,6vw,96px)}
.flux figcaption time{display:block;margin-top:4px;color:var(--encre-2)}
.flux a.planche{text-decoration:none;color:inherit}
.flux a.planche:hover figcaption{color:var(--encre)}

/* marques : un colophon */
.marques{display:flex;flex-wrap:wrap;gap:6px 30px;font-family:var(--titre);font-size:var(--t-3);line-height:1.3;margin-top:26px}

/* étapes (prothèses) */
.etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;counter-reset:e;margin-top:clamp(36px,4vw,60px)}
.etapes li{background:var(--pierre);padding:26px 24px 30px;counter-increment:e}
.etapes li::before{content:counter(e);display:block;font-family:var(--titre);font-size:var(--t-2);line-height:1;margin-bottom:18px}
.etapes h3{margin-bottom:8px}
.etapes p{margin:0}

/* classes de prothèses */
.classes{display:grid;gap:3px}
.classes>div{background:var(--nuit-2);padding:24px 26px;display:grid;grid-template-columns:1fr auto;gap:4px 24px;align-items:baseline}
.classes strong{font-family:var(--titre);font-weight:400;font-size:clamp(30px,3.4vw,52px);line-height:1;white-space:nowrap}
.classes p{grid-column:1/3;margin:8px 0 0;color:#C9C5C0}

/* questions */
.faq details{background:var(--pierre);margin-bottom:3px}
.faq summary{list-style:none;cursor:pointer;padding:20px 60px 20px 22px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:26px;top:50%;width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--sortie)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 22px 22px;margin:0;color:var(--encre-2)}

/* tarifs */
.carte-tarifs{columns:2 440px;column-gap:clamp(32px,5vw,96px)}
.rubrique{break-inside:avoid;margin:0 0 clamp(44px,5vw,80px)}
.rubrique h2{font-size:var(--t-3);margin-bottom:18px}
.tarif{width:100%;border-collapse:separate;border-spacing:0 3px}
.tarif td{background:var(--pierre);padding:13px 18px;vertical-align:baseline}
.tarif td:last-child{text-align:right;white-space:nowrap;font-weight:500;font-variant-numeric:tabular-nums lining-nums}

.horaires{display:grid;gap:3px;margin-top:20px}
.horaires div{display:flex;justify-content:space-between;background:var(--pierre);padding:11px 18px;font-size:var(--t-petit)}
.horaires div.auj{background:var(--encre);color:var(--papier)}

/* botanique : planches anciennes des plantes tinctoriales */
.herbier{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.8vw,28px)}
.herbier .cadre{aspect-ratio:3/4;background:var(--papier)}
.herbier img{object-position:50% 40%}
.herbier figcaption{color:inherit}
.herbier figcaption i{display:block;color:#B9B5B0}

.prose h2{font-size:var(--t-3);margin:52px 0 14px}

.final .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,6vw,120px);align-items:end}
.final p{margin:22px 0 0}

/* ---------- pied de page ---------- */
footer{background:var(--papier);padding:clamp(80px,9vw,140px) 0 40px}
.signature{display:block;width:min(100%,520px);height:auto;margin-bottom:clamp(48px,6vw,90px)}
.pieds{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:clamp(28px,4vw,72px)}
.pieds h2{font-size:var(--t-3);margin-bottom:18px}
.pieds p{margin:0 0 .7em}
.social{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px}
.mentions{margin-top:64px;display:flex;flex-wrap:wrap;gap:8px 30px;font-size:var(--t-petit);color:var(--encre-2)}
.barre{display:none}

/* ---------- mouvement : les planches se posent, une fois ---------- */
@keyframes poser{from{transform:scale(1.06)}to{transform:scale(1)}}
.js .titre .bandeau-photo img{animation:poser 1.6s var(--sortie) both}
.js .planche.entre{transform:translateY(20px);transition:transform 1s var(--sortie);transition-delay:calc(var(--i,0) * 80ms)}
.js .planche.entre.vu{transform:none}
.js .planche.entre img{transform:scale(1.05);transition:transform 1.6s var(--sortie)}
.js .planche.entre.vu img{transform:none}
.js .planche.entre figcaption{transform:translateY(14px);transition:transform 1.1s var(--sortie) .15s}
.js .planche.entre.vu figcaption{transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .planche.entre,.js .planche.entre img,.js .planche.entre figcaption{transform:none}
}

/* ---------- tablette ---------- */
@media (max-width:1180px){nav.main{gap:14px}}
@media (max-width:1260px){
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--papier);padding:8px var(--marge) 28px;font-size:var(--t-3);font-family:var(--titre)}
  nav.main.ouvert{display:flex}
  nav.main a{padding:12px 0}
  nav.main a.btn{margin:16px 0 0;font-family:var(--texte);font-size:var(--t-petit)}
  .burger{display:inline-flex}
}
/* ---------- téléphone ---------- */
@media (max-width:900px){
  body{padding-bottom:76px}
  .titre .wrap,.duo,.duo.inverse,.entete,.sommaire,.final .wrap{grid-template-columns:minmax(0,1fr)}
  .titre .bandeau-photo .cadre{height:auto;aspect-ratio:4/5;min-height:0}
  .titre .bandeau-photo.vertical .cadre{aspect-ratio:4/5}
  .duo>.planche,.duo.inverse>.planche{order:2}
  .sommaire li a{display:block}
  .sommaire .t{display:block;font-size:28px}
  .sommaire .p{display:block;margin-top:6px;font-size:var(--t-petit)}
  .faits{grid-template-columns:minmax(0,1fr)}
  .flux{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flux .planche:nth-child(3n+2){margin-top:0}
  .flux .planche:nth-child(2n){margin-top:clamp(32px,8vw,64px)}
  .suite{grid-template-columns:1fr 1fr}
  .suite .planche:nth-child(n){grid-column:auto;margin-top:0}
  .suite .planche:nth-child(1),.suite .planche:nth-child(4){grid-column:1/3}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .herbier{grid-template-columns:repeat(2,minmax(0,1fr))}
  .herbier .planche:last-child{grid-column:1/3}
  .herbier .planche:last-child .cadre{aspect-ratio:3/2}
  .sommaire .apercu{display:none}
  .pieds{grid-template-columns:minmax(0,1fr)}
  .debord-g,.debord-d{margin-left:calc(-1 * var(--marge));margin-right:calc(-1 * var(--marge))}
  .debord-g figcaption,.debord-d figcaption{padding:0 var(--marge)}
  .barre{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:4px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));background:var(--papier)}
  .barre .btn{flex:1;padding:0 6px;min-height:52px}
}
@media (max-width:560px){
  .flux{grid-template-columns:minmax(0,1fr)}
  .flux .planche:nth-child(n){margin-top:0}
  .citation{font-size:24px}
  .etapes{grid-template-columns:minmax(0,1fr)}
  .classes>div{grid-template-columns:minmax(0,1fr)}
  .classes p{grid-column:1}
  .prix>div{flex-direction:column;gap:2px}
}