/* ==========================================================================
   Mythes & Marmites — feuille de style unique
   Studio d'édition & de récits — Maud Lenoir
   ========================================================================== */

/* ---------- Polices ---------- */
@font-face{font-family:'Pacaembu';src:url('/fonts/Pacaembu-Light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'Pacaembu';src:url('/fonts/Pacaembu-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Pacaembu';src:url('/fonts/Pacaembu-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Pacaembu';src:url('/fonts/Pacaembu-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'Pacaembu';src:url('/fonts/Pacaembu-Black.otf') format('opentype');font-weight:800;font-display:swap}
@font-face{font-family:'IM Fell English';src:url('/fonts/IMFellEnglish-Regular.ttf') format('truetype');font-style:normal;font-display:swap}
@font-face{font-family:'IM Fell English';src:url('/fonts/IMFellEnglish-Italic.ttf') format('truetype');font-style:italic;font-display:swap}
@font-face{font-family:'Homemade Apple';src:url('/fonts/HomemadeApple-Regular.ttf') format('truetype');font-display:swap}

/* ---------- Jetons ---------- */
:root{
  --lait:#F8F5F4;
  --encre:#534741;
  --pomme:#EB6755;   /* le conte */
  --haricot:#62B47E; /* le partage */
  --reverie:#9599EA; /* on repart */
  --or:#F4CC71;      /* la tablée */
  --encre-80:rgba(83,71,65,.82);
  --encre-70:rgba(83,71,65,.72);
  --encre-55:rgba(83,71,65,.78); /* nom conservé (utilisé partout), opacité relevée de .55 à .78 : à .55 le texte .small ne passait pas 4,5:1 sur --lait (2,71:1 mesuré) */
  --hairline:rgba(83,71,65,.12);
  --hairline-soft:rgba(83,71,65,.08);
  --sans:'Pacaembu',system-ui,sans-serif;
  --serif:'IM Fell English',Georgia,serif;
  --main:1080px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- Bases ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--lait);color:var(--encre);overflow-x:hidden;
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;
}
img{max-width:100%;display:block}
picture{display:contents} /* le <picture> des photos WebP+repli ne doit rien changer à la mise en page */
.contents{display:contents} /* balise <article> sémantique autour d'une vignette, sans influer sur la grille */
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.04}
p{margin:0}
ul,ol{margin:0}
a{color:var(--pomme);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--encre)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* Double anneau : quel que soit le fond (clair ou la bande sombre --encre),
   l'un des deux anneaux reste visible. --pomme seul ne passe pas 3:1 sur
   --lait (2,93:1 mesuré) même à pleine opacité : l'anneau extérieur encre
   assure le contraste sur fond clair, l'anneau intérieur clair fait le
   même travail sur fond sombre. */
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--lait),0 0 0 4.5px var(--encre);border-radius:6px}
::selection{background:var(--or);color:var(--encre)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:var(--main);margin:0 auto;padding:0 40px}
.sec{padding-top:56px;padding-bottom:56px}
.sec--tight{padding-top:0;padding-bottom:56px}
/* Deux sections qui se suivent : on ne cumule pas complètement les marges. */
.band + .band > .wrap.sec{padding-top:26px}
/* Sous-section à l'intérieur d'un même bloc (page Parcours). */
.subsec{margin-top:44px}
.subsec:first-child{margin-top:0}
.hide{display:none !important}

/* ---------- Échelle typographique ----------
   Une seule échelle, du plus grand au plus petit, réutilisée partout
   (cohérence + plan de titres net pour le référencement) :
     .page-title  -> le <h1> de chaque page
     .sec-title   -> les <h2> de section (serif, coloré selon la charte)
     .h3          -> les sous-titres (services, compétences, entrées…)
     .eyebrow / .card__kicker -> intitulé court AU-DESSUS d'un titre
*/
.eyebrow,.card__kicker{font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--pomme);line-height:1.3}
.eyebrow--green,.card__kicker--green{color:var(--haricot)}
.eyebrow--violet,.card__kicker--violet{color:var(--reverie)}
.eyebrow--or{color:var(--or)} /* uniquement sur panneau sombre */
.eyebrow--mute{color:var(--encre-55)}
.eyebrow--ink{color:var(--encre)}

.page-title{font-size:clamp(32px,4.4vw,46px);line-height:1.07;font-weight:800;letter-spacing:-.02em}
.display{font-size:clamp(32px,4.4vw,46px);line-height:1.07} /* alias historique */
.h2{font-size:clamp(27px,3.1vw,36px);line-height:1.1}

.sec-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(25px,2.7vw,32px);line-height:1.15;letter-spacing:0;color:var(--pomme)}
.sec-title--vert{color:var(--haricot)}
.sec-title--violet{color:var(--reverie)}
.sec-title--ink{color:var(--encre)}
.panel .sec-title,.panel--ink .sec-title{color:inherit}

.h3,h3.card__title,.card--r16 .card__title{font-size:clamp(18px,1.5vw,20.5px);line-height:1.28;font-weight:700;letter-spacing:-.01em}
.h3--lg{font-size:clamp(19px,1.8vw,22px)}

.lede{font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.9vw,22px);line-height:1.5;color:var(--encre-80)}
.lede--big{font-size:clamp(24px,3.2vw,38px);line-height:1.35;color:var(--encre)}
.serif{font-family:var(--serif);font-style:italic}
.script{font-family:'Homemade Apple',cursive}
.body{font-size:16.5px;line-height:1.7;color:rgba(83,71,65,.86)}
.small{font-size:14px;color:var(--encre-55)}
/* Filet pointillé sous le titre : reprend sa couleur. */
.sec-title + .dotted{background-image:radial-gradient(circle,var(--pomme) 1.4px,transparent 1.7px);opacity:.75}
.sec-title--vert + .dotted{background-image:radial-gradient(circle,var(--haricot) 1.4px,transparent 1.7px)}
.sec-title--violet + .dotted{background-image:radial-gradient(circle,var(--reverie) 1.4px,transparent 1.7px)}

/* ---------- Filet pointillé (signature) ---------- */
.dotted{
  height:3px;max-width:180px;margin:14px 0 44px;opacity:.32;
  background-image:radial-gradient(circle,var(--encre) 1.4px,transparent 1.7px);
  background-size:12px 3px;background-repeat:repeat-x;
}
.dotted--pomme{background-image:radial-gradient(circle,var(--pomme) 1.4px,transparent 1.7px);opacity:1}
.dotted--violet{background-image:radial-gradient(circle,var(--reverie) 1.4px,transparent 1.7px);opacity:1}
.dotted--green{background-image:radial-gradient(circle,var(--haricot) 1.4px,transparent 1.7px);opacity:1}
.dotted--full{max-width:none}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--pomme);color:var(--lait);font-weight:700;font-size:16px;
  padding:15px 28px;border-radius:999px;cursor:pointer;
  transition:background .15s ease,transform .12s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{background:#d95745;color:var(--lait)}
.btn:active{transform:translateY(1px)}
.btn--green{background:var(--haricot)}
.btn--green:hover{background:#4fa46f}
.btn--ink{background:var(--encre)}
.btn--ink:hover{background:#3f3631}
.btn--light{background:var(--lait);color:var(--pomme)}
.btn--light:hover{background:#fff;color:var(--pomme)}
.btn--ghost{background:none;color:var(--encre);border:1.5px solid rgba(83,71,65,.25);padding:13.5px 28px}
.btn--ghost:hover{background:var(--encre);border-color:var(--encre);color:var(--lait)}
.btn--ghost-light{background:none;color:var(--lait);border:1.5px solid rgba(248,245,244,.4);padding:11px 22px;font-size:14.5px}
.btn--ghost-light:hover{background:var(--lait);border-color:var(--lait);color:var(--encre)}
.btn--ghost-ink{background:none;color:var(--encre);border:1.5px solid rgba(83,71,65,.4);padding:11px 22px;font-size:14.5px}
.btn--ghost-ink:hover{background:var(--encre);border-color:var(--encre);color:var(--lait)}
.btn--sm{font-size:14.5px;padding:11px 22px}
.btn .ar{transition:transform .18s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

/* ---------- Mentions d'info · paire réutilisable ---------- */
/* Deux mentions non cliquables côte à côte (zone d'intervention, modalités…).
   Générique : réutilisable partout via
     <div class="info-tags">
       <span class="info-tag">…</span>
       <span class="info-tag">…</span>
     </div>
   Pas de pastille : simple texte vert (vert de la charte), sans fond ni contour.
   (nom distinct de .badge, déjà utilisé ailleurs pour un autre composant)
   Sous 480 px, les deux mentions passent l'une sous l'autre. */
.info-tags{
  display:flex;flex-wrap:wrap;gap:8px 22px;
  margin:22px 0 30px;padding:0;list-style:none;
}
.info-tag{
  color:var(--haricot);
  font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;line-height:1.3;
}
@media (max-width:480px){
  .info-tags{flex-direction:column;align-items:flex-start}
}

/* Lien d'action « … → » */
.more{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14.5px;color:var(--pomme);cursor:pointer}
.more .ar{transition:transform .18s var(--ease)}
.more:hover{color:var(--encre)}
.more:hover .ar{transform:translateX(5px)}
.more--green{color:var(--haricot)}
.more--violet{color:var(--reverie)}

/* ---------- En-tête ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(248,245,244,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 40px;max-width:var(--main);margin:0 auto}
.nav__logo img{height:34px;width:auto;transition:transform .25s var(--ease)}
.nav__logo:hover img{transform:rotate(-1.5deg) scale(1.02)}
.nav__links{display:flex;align-items:center;gap:26px;font-size:14.5px;white-space:nowrap}
.navlink{position:relative;padding-bottom:5px;color:rgba(83,71,65,.72);font-weight:500;cursor:pointer;transition:color .15s ease}
.navlink:hover{color:var(--encre)}
.navlink.is-on{color:var(--encre);font-weight:700}
.navlink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background-image:radial-gradient(circle,var(--pomme) 1.4px,transparent 1.7px);
  background-size:12px 3px;background-repeat:repeat-x;
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
}
.navlink:hover::after,.navlink.is-on::after{transform:scaleX(1)}

/* ---------- Cartes ---------- */
.card{
  background:#fff;border:1px solid rgba(83,71,65,.1);border-radius:20px;padding:34px;
  transition:transform .2s var(--ease),border-color .2s ease;
}
.card--r16{border-radius:16px;padding:26px}
.card--flat{background:var(--lait)}
.card__ill{transition:transform .3s var(--ease)}
a.card,.card--link{display:block;cursor:pointer;color:inherit}
.card--link:hover{transform:translateY(-4px);border-color:rgba(235,103,85,.5)}
.card--link:hover .card__ill{transform:rotate(-4deg) scale(1.05)}
.card--link:hover .card__title{color:var(--pomme)}
.card__title{font-weight:700;font-size:19px;line-height:1.25;transition:color .15s ease}
.card__kicker{font-weight:800;font-size:11.5px;letter-spacing:.03em;color:var(--pomme)}
.card__kicker--green{color:var(--haricot)}
.card__kicker--violet{color:var(--reverie)}
.card__text{font-size:14.5px;line-height:1.55;color:var(--encre-70)}

/* Portes de l'accueil */
.door{display:block}
.door .more{transition:color .15s ease}
.door:hover .card__ill{transform:rotate(-4deg) scale(1.06)}
.door:hover h3{color:var(--pomme)}
.door h3{transition:color .15s ease}
.door:hover .ar{transform:translateX(5px)}

/* Dépliage « voir plus » : filet pointillé + pastille centrale */
.disclose{display:inline-flex;align-items:center;gap:10px;flex:none;
  border:1.5px solid rgba(83,71,65,.2);border-radius:999px;padding:10px 22px;
  font-weight:700;font-size:14.5px;color:var(--encre);background:var(--lait);
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.disclose:hover{background:var(--pomme);border-color:var(--pomme);color:var(--lait)}
.disclose:active{transform:translateY(1px)}
.disclose__ar{transition:transform .25s var(--ease)}
.disclose:hover .disclose__ar{transform:translateY(3px)}
.disclose[aria-expanded="true"] .disclose__ar{transform:rotate(180deg)}
.disclose[aria-expanded="true"]:hover .disclose__ar{transform:rotate(180deg) translateY(3px)}
.reveal{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;
  transition:grid-template-rows .38s var(--ease),opacity .28s ease}
.reveal>*{min-height:0}
.reveal.is-open{grid-template-rows:1fr;opacity:1}

/* ---------- Grilles ---------- */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.row{display:flex;gap:40px;flex-wrap:wrap}
.row--tight{gap:24px}
.between{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px}

/* ---------- Emplacements photo ---------- */
.ph{
  position:relative;display:grid;place-items:center;text-align:center;
  background:#fff;border:1px dashed rgba(83,71,65,.3);border-radius:16px;
  padding:22px;overflow:hidden;
  font-size:13px;line-height:1.5;color:var(--encre-55);
  transition:border-color .2s ease,color .2s ease,transform .2s var(--ease);
}
.ph::before{
  content:"";position:absolute;inset:10px;border-radius:10px;
  background-image:radial-gradient(circle,rgba(83,71,65,.1) 1px,transparent 1.4px);
  background-size:14px 14px;pointer-events:none;
  transition:opacity .2s ease;opacity:.7;
}
.ph span{position:relative;max-width:24ch}
.ph:hover{border-color:var(--pomme);color:var(--pomme)}
.ph:hover::before{opacity:.35}
.ph--r20{border-radius:20px}

/* Cadre contenant une vraie photo : le pointillé et la trame disparaissent */
.ph.has-img{border:0;padding:0;background:none}
.ph.has-img::before{display:none}
.ph>img,.ph>picture>img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit;display:block}
/* Cadre pleine hauteur : occupe toute la carte, quelle que soit la hauteur du texte */
/* Carte \u00e0 deux colonnes (portrait + texte) : grille pour \u00e9galiser les hauteurs */
.card[style*="align-items:stretch"]{display:grid !important;grid-template-columns:1fr 1.25fr;align-items:stretch}
.card[style*="align-items:stretch"]>div{min-width:0 !important;min-height:0 !important;position:relative}
.ph--fill{position:absolute;inset:0;height:auto !important;width:auto !important}
:has(>.ph--fill){position:relative}
@media (max-width:820px){
  .card[style*="align-items:stretch"]{grid-template-columns:1fr}
  .card[style*="align-items:stretch"]>div:first-child{aspect-ratio:4/5}
}
.ph--fill{width:100%;height:100%;border-radius:0;border-left:0;border-top:0;border-bottom:0}

/* Carrousel horizontal */
.rail{display:flex;gap:18px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.rail>*{flex:none;scroll-snap-align:start}
.rail::-webkit-scrollbar{height:7px}
.rail::-webkit-scrollbar-thumb{background:rgba(83,71,65,.22);border-radius:999px}
.rail::-webkit-scrollbar-track{background:rgba(83,71,65,.07);border-radius:999px}

/* ---------- Panneaux ---------- */
.panel{border-radius:24px;padding:56px;position:relative;overflow:hidden}
.panel--ink{background:var(--encre);color:var(--lait)}
.panel--pomme{background:var(--pomme);color:var(--lait)}
.panel--haricot{background:var(--haricot);color:var(--lait)}
.panel--reverie{background:var(--reverie);color:var(--lait)}
.panel--jaune{background:var(--or);color:var(--encre)}
.panel--or{background:var(--or);color:var(--encre);border-radius:20px;padding:34px 36px}
.panel__ill{position:absolute;pointer-events:none;transition:transform .5s var(--ease)}
.panel:hover .panel__ill{transform:translateY(-6px) rotate(-2deg)}
.on-ink{color:rgba(248,245,244,.8)}
.on-light{color:var(--encre)}
.tile{background:rgba(248,245,244,.06);border-radius:16px;padding:26px;transition:background .18s ease,transform .2s var(--ease)}
.tile--link{cursor:pointer}
.tile--link:hover{background:rgba(248,245,244,.12);transform:translateY(-4px)}
.tile--link:hover .card__ill{transform:rotate(-4deg) scale(1.05)}

/* Bandeau d'état */
.badge{
  display:inline-flex;align-items:center;gap:10px;background:#fff;
  border:1px solid rgba(83,71,65,.14);border-radius:999px;padding:9px 20px;
  font-size:14px;color:rgba(83,71,65,.75);
}
.badge__dot{width:8px;height:8px;border-radius:999px;background:var(--or)}

/* Chiffres */
.stat{background:#fff;border:1px solid rgba(83,71,65,.1);border-radius:16px;padding:26px;transition:border-color .2s ease,transform .2s var(--ease)}
.stat:hover{transform:translateY(-3px);border-color:rgba(83,71,65,.3)}
.stat__n{font-weight:800;font-size:30px}
.stat__l{font-size:14px;color:var(--encre-70);margin-top:6px}

/* ---------- Sections ---------- */
/* Fond crème partout (celui du body). .band ne sert plus qu'à ancrer une
   illustration : conteneur positionné, il rogne la part qui sort. */
.band{position:relative;overflow:hidden}
.band>.wrap{position:relative}

/* Illustration en filigrane de section : grande, posée sur un bord, très
   discrète (filigrane), toujours derrière le contenu, jamais un obstacle
   à la lecture. Masquée sous 1080px. */
.has-anchor{position:relative}
.has-anchor>:not(.sec-anchor){position:relative;z-index:1}
.sec-anchor{position:absolute;pointer-events:none;z-index:0;height:auto;user-select:none;opacity:.06}
@media (max-width:1080px){.sec-anchor{display:none}}

/* Logo d'établissement (page Parcours) : cadre clair uni, sans contour,
   assez grand pour que le logo respire. */
.logo-box{flex:none;width:96px;height:96px;background:#fff;border-radius:16px;display:grid;place-items:center;padding:14px}
.logo-box img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:600px){.logo-box{width:76px;height:76px;padding:11px}}

/* ---------- Blocs en aplat de couleur ---------- */
/* Couleur pleine de la charte, sans opacité, sans contour. Le corps de
   texte long reste sur crème (dans .card__inset le cas échéant). */
.card--pomme,.card--vert,.card--violet,.card--or,.card--ink{border:0}
.card--pomme{background:var(--pomme);color:var(--lait)}
.card--vert{background:var(--haricot);color:var(--lait)}
.card--violet{background:var(--reverie);color:var(--lait)}
.card--or{background:var(--or);color:var(--encre)}
.card--ink{background:var(--encre);color:var(--lait)}
.card--pomme .card__title,.card--vert .card__title,.card--violet .card__title,.card--ink .card__title,
.card--pomme h3,.card--vert h3,.card--violet h3,.card--ink h3{color:var(--lait)}
.card--pomme .card__kicker,.card--vert .card__kicker,.card--violet .card__kicker,.card--ink .card__kicker{color:var(--lait)}
.card--pomme .card__text,.card--vert .card__text,.card--violet .card__text,.card--ink .card__text{color:var(--lait)}
.card--or,.card--or .card__kicker,.card--or h3,.card--or .card__text,.card--or .small,.card--or p,.card--or strong{color:var(--encre)}
.card--pomme .more,.card--vert .more,.card--violet .more,.card--ink .more{color:var(--lait)}
.card--or .more{color:var(--encre)}
.card--pomme.card--link:hover,.card--vert.card--link:hover,.card--violet.card--link:hover,.card--or.card--link:hover{transform:translateY(-4px)}
.card--pomme.card--link:hover .card__title,.card--vert.card--link:hover .card__title,.card--violet.card--link:hover .card__title{color:var(--or)}
.card--or.card--link:hover .card__title{color:var(--pomme)}

/* Encart crème dans une carte de couleur : pour un paragraphe qui doit
   rester lisible (texte --encre sur crème). */
.card__inset{background:var(--lait);color:var(--encre);border-radius:14px;padding:16px 18px;margin-top:16px}
.card__inset .card__text,.card__inset .small,.card__inset .body{color:var(--encre-70)}
.card__inset strong{color:var(--encre)}

/* Numéro d'étape : pastille de couleur pleine. */
.card__num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;
  background:var(--pomme);color:var(--lait);font-weight:800;font-size:19px;font-style:normal}

/* ---------- « Ce que je fais » ---------- */
/* Hiérarchie par la couleur et la graisse, sans bloc de fond. Même motif
   sur l'accueil et sur le studio. */
.svc__item{padding:26px 0;border-bottom:2px solid var(--hairline)}
.svc__item:last-child{border-bottom:0}
/* En grille (2 colonnes), pas de filet : l'espacement suffit. */
.svc.grid .svc__item{border-bottom:0;padding:16px 0}
.svc.grid{gap:10px 44px}
.svc__h{font-size:clamp(19px,1.9vw,23px);font-weight:800;line-height:1.22;letter-spacing:-.01em;margin:0 0 9px}
.svc__h--pomme{color:var(--pomme)}
.svc__h--vert{color:var(--haricot)}
.svc__h--violet{color:var(--reverie)}
.svc__item .body{max-width:64ch}
.svc__note{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--encre-55);max-width:64ch}
.svc__more{display:inline-block;margin-top:12px}

/* Bloc projet pleine largeur : la photo apporte la couleur, le texte reste
   sur crème, aucun aplat sous le paragraphe. */
.projet{display:flex;flex-wrap:wrap;gap:34px;align-items:flex-start}
.projet__media{flex:1.1;min-width:280px}
.projet__body{flex:1;min-width:260px}
@media (max-width:700px){
  .projet{gap:22px}
  .projet__media,.projet__body{flex:1 1 100%;min-width:0}
}

/* ---------- Filtres ---------- */
.chips{display:flex;gap:12px;flex-wrap:wrap}
.chip{
  border:1.5px solid rgba(83,71,65,.2);border-radius:999px;padding:7.5px 18px;
  font-weight:700;font-size:13.5px;white-space:nowrap;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease;
}
.chip:hover{border-color:var(--encre);background:#fff}
.chip:active{transform:translateY(1px)}
.chip.is-on{background:var(--encre);border-color:var(--encre);color:var(--lait)}
.chip__n{opacity:.55;font-weight:500}

/* ---------- Pagination ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 20px}
.pager__b{
  min-width:42px;height:42px;padding:0 14px;border-radius:999px;
  border:1.5px solid rgba(83,71,65,.2);font-weight:700;font-size:14.5px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.pager__b:hover{background:#fff;border-color:var(--encre)}
.pager__b.is-on{background:var(--pomme);border-color:var(--pomme);color:var(--lait)}
.pager__b[disabled]{opacity:.35;cursor:default}
.pager__b[disabled]:hover{background:none;border-color:rgba(83,71,65,.2)}

/* ---------- Article ---------- */
.article-lead{max-width:760px}
.article-meta{display:flex;gap:26px;flex-wrap:wrap;font-size:13.5px;color:rgba(83,71,65,.6);padding-bottom:34px;border-bottom:1px solid var(--hairline)}
.recipe-step{display:flex;gap:16px}
.recipe-step__n{font-weight:800;font-size:20px;color:rgba(83,71,65,.28);width:26px;flex:none}
.recipe-step__t{font-size:15.5px;line-height:1.65;color:rgba(83,71,65,.85)}
.ing{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;font-size:15.5px;line-height:1.5}
.quote-mark{border-left:3px solid var(--haricot);padding-left:18px}
.back{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:rgba(83,71,65,.6);cursor:pointer}
.back:hover{color:var(--pomme)}
.back .ar{transition:transform .18s var(--ease)}
.back:hover .ar{transform:translateX(-4px)}

/* ---------- Formulaire ---------- */
.field{display:block}
.field__l{display:block;font-weight:600;font-size:13.5px;margin-bottom:8px}
.input,.select,.textarea{
  width:100%;border:1.5px solid rgba(83,71,65,.2);border-radius:10px;
  padding:13px 14px;font-family:var(--sans);font-size:15px;color:var(--encre);
  background:var(--lait);transition:border-color .15s ease,background .15s ease;
}
.input:hover,.select:hover,.textarea:hover{border-color:rgba(83,71,65,.4)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--pomme);background:#fff}
.textarea{line-height:1.6;resize:vertical}
.select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23534741' stroke-width='1.6' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 16px center}

/* ---------- Pied ---------- */
.foot{background:var(--encre);color:var(--lait);margin-top:20px}
.foot__in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:34px;padding:54px 40px;max-width:var(--main);margin:0 auto}
.foot a,.foot .navlink{color:rgba(248,245,244,.85)}
.foot a:hover{color:#fff}
.foot .navlink::after{background-image:radial-gradient(circle,var(--or) 1.4px,transparent 1.7px)}
.foot .navlink:hover{color:#fff}

/* ---------- Apparitions ---------- */
/* Apparition au défilement : le contenu est visible par défaut ; il n'est
   masqué (puis animé) que si le JS a posé .js sur <html>. Sans JS, ou si
   le script échoue, rien ne disparaît. */
.rise{opacity:1;transform:none}
.js .rise{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s var(--ease)}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise,.js .rise{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- Menu mobile ---------- */
.burger{display:none;width:44px;height:44px;margin-right:-11px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--encre);transition:transform .2s var(--ease),opacity .15s ease}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Souple ---------- */
@media (max-width:1000px){
  .wrap{padding:0 28px}
  .nav__in{padding:14px 28px}
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel{padding:38px}
  .sec{padding-top:56px;padding-bottom:56px}
}

@media (max-width:820px){
  /* Une seule gouttière pour tout le site : en-tête, contenu, pied */
  body{--gut:26px}
  .burger{display:flex}
  .wrap,.nav__in,.foot__in,.nav__links{padding-left:var(--gut) !important;padding-right:var(--gut) !important}
  .page>.wrap{padding-left:var(--gut) !important;padding-right:var(--gut) !important}
  .nav__in{padding-top:13px;padding-bottom:13px}
  .nav__logo img{height:30px}
  .nav__links{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--lait);border-bottom:1px solid var(--hairline);
    padding-top:0;padding-bottom:0;max-height:0;overflow:hidden;
    transition:max-height .28s var(--ease),padding .28s var(--ease);
  }
  body.menu-open .nav__links{max-height:360px;padding-top:8px;padding-bottom:22px}
  .nav__links .navlink{padding:16px 0;font-size:17px;font-weight:600;border-bottom:1px solid var(--hairline-soft)}
  .nav__links .navlink:last-of-type{border-bottom:0}
  .nav__links .navlink::after{display:none}
  .nav__links .btn{margin-top:14px;justify-content:center;padding:15px 24px;font-size:16px}

  /* Colonnes empilées : on neutralise les min-width des mises en page larges */
  .row>*{min-width:0 !important;flex:1 1 100% !important}
  .row{gap:34px !important}
  .between{align-items:flex-start}

  /* Respiration verticale des pages */
  .page>.wrap{padding-top:44px !important}
  .page>.wrap[style*="padding-bottom:74px"]{padding-bottom:52px !important}
  .sec{padding-top:46px;padding-bottom:46px}
  .row[style*="margin-bottom:70px"],
  .grid[style*="margin-bottom:70px"],
  .card[style*="margin-bottom:70px"]{margin-bottom:46px !important}

  /* Hauteurs d'images ramenées à l'échelle du téléphone */
  .ph{height:auto !important;min-height:0;aspect-ratio:4/3;padding:18px;font-size:12.5px}
  .ph--fill{aspect-ratio:4/3;min-height:0}
  .card[style*="display:flex"] .ph--fill{border-radius:0}

  /* Le carrousel file jusqu'au bord, mais démarre sur la gouttière */
  .rail{margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));
        padding-left:var(--gut);padding-right:var(--gut);gap:14px}
  .rail .ph{width:78vw !important;max-width:400px;aspect-ratio:4/3}

  /* En-tête opaque : le contenu ne fantomise plus derrière en défilant */
  .nav{background:var(--lait);backdrop-filter:none}
  .panel{padding:32px 26px !important;border-radius:20px}
  .panel__ill{width:118px !important;opacity:.13 !important;right:18px !important;bottom:-8px !important}
  .panel--or{padding:28px 26px}
  .card{padding:28px !important}
  .card[style*="padding:0"]{padding:0 !important}
  .card>div[style*="padding:46px"]{padding:30px 26px !important}
  .article-lead{margin-top:26px !important}
}

@media (max-width:600px){
  body{--gut:22px}
  /* Titres : moins de lignes bâtardes */
  .h2{font-size:26px !important;letter-spacing:-.01em}
  .panel .h2{font-size:27px !important}
  .panel .serif{font-size:18px !important}
  h3[style*="font-size:25px"]{font-size:21px !important}
  h2[style*="font-size:28px"]{font-size:24px !important}
  .panel .serif[style*="font-size:30px"]{font-size:22px !important;line-height:1.4 !important}
  .card .serif[style*="font-size:30px"]{font-size:23px !important}
  .card .serif[style*="font-size:24px"]{font-size:20px !important}
  .panel--or .serif,.panel--or h2{font-size:22px !important}

  /* Filtres : pastilles compactes, deux à trois par ligne */
  .chips{gap:8px}
  .chip{padding:9px 14px;font-size:13px;border-width:1px}
  .chips+.dotted{margin:22px 0 26px !important}

  .tile{padding:22px}
  .pager{gap:7px;flex-wrap:wrap}
  .pager__b{min-width:42px;height:42px;padding:0 10px;font-size:14px}
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .grid{gap:18px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .foot__in{padding-top:38px;padding-bottom:40px;gap:30px}
  .foot__in>div{max-width:none}
  .foot__in>div:last-child{gap:30px}
  .ing{grid-template-columns:1fr}
  .article-meta{gap:8px 20px;padding-bottom:26px}
  .card{padding:24px !important;border-radius:16px}
  .card--r16{padding:22px !important}
  .panel{padding:28px 22px !important}
  .panel--or{padding:24px 22px}
  .stat{padding:20px}
  .stat__n{font-size:26px}
  .lede{font-size:19px !important}
  .lede--big{font-size:25px !important}
  .sec-title{font-size:24px}
  .display{font-size:clamp(29px,8.2vw,40px) !important}
  .recipe-step__n{font-size:18px;width:22px}
  .quote-mark{padding-left:14px}
  .badge{padding:11px 18px;font-size:13.5px;line-height:1.45}
  .dotted{margin-bottom:30px}
  .btn{width:100%;justify-content:center}
  .nav__in>.btn--sm{width:auto}
  .more{width:auto}
  h1,h2,h3{overflow-wrap:break-word}
  h1[style*="max-width"],p[style*="max-width"]{max-width:none !important}
}

@media (max-width:370px){
  body{--gut:20px}
  .grid-4{grid-template-columns:minmax(0,1fr)}
  .display{font-size:29px !important}
}