/* ==========================================================================
   Studio Mille Pages · feuille de style unique
   Maud Lenoir, designer éditoriale et maquettiste
   ========================================================================== */

/* ---------- 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{
  /* Charte Studio Mille Pages. Fonds et texte : Pot au Lait et Encre.
     Accents : le vert, le jaune et le violet des plis du logo ; Pomme
     d'Amour reste un accent secondaire, utilisé avec parcimonie.
     Contrastes (WCAG) : Encre sur Boucle d'Or 5,85 ; Encre sur Haricot
     3,56, sur Violet 3,42, sur Violet clair 4,19 (grand texte seulement) ;
     aucune couleur d'accent ne passe 3:1 sur Pot au Lait : jamais de
     texte en couleur sur fond clair, jamais de texte clair sur Boucle d'Or. */
  --pot-au-lait:#F8F5F4;
  --encre:#534741;
  --haricot:#62B47E;     --haricot-2:#55A270;
  --boucle-dor:#F4CC71;  --boucle-dor-2:#EBBE5C;
  --violet:#9599EA;      --violet-2:#A9ACEF;
  --pomme:#EB6755;       /* accent secondaire, utilisé avec parcimonie */
  --encre-80:rgba(83,71,65,.82);
  --encre-70:rgba(83,71,65,.8); /* nom conservé, opacité relevée de .72 à .8 : 4,86:1 sur Pot au Lait (AA) */
  --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(--pot-au-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(--encre);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(--pot-au-lait),0 0 0 4.5px var(--encre);border-radius:6px}
::selection{background:var(--boucle-dor);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(--encre);line-height:1.3}
.eyebrow--or{color:var(--boucle-dor)} /* uniquement sur panneau sombre */
/* Repère de couleur : un pli devant l'intitulé (le texte reste en Encre).
   Sur les vignettes du blog, la couleur du pli signale la rubrique. */
.eyebrow::before,.card--link .card__kicker::before{
  content:"";display:inline-block;width:.62em;height:.95em;margin-right:.55em;vertical-align:-.12em;
  background:var(--pli,var(--violet));clip-path:polygon(0 0,100% 18%,100% 100%,0 82%)}
.eyebrow--green{--pli:var(--haricot)}
.eyebrow--or{--pli:var(--boucle-dor)}
.card--link .card__kicker{--pli:var(--boucle-dor)}
.card--link .card__kicker--green{--pli:var(--haricot)}
.card--link .card__kicker--violet{--pli:var(--violet)}
.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(--sans);font-style:normal;font-weight:800;font-size:clamp(25px,2.7vw,32px);line-height:1.12;letter-spacing:-.02em;color:var(--encre);margin-bottom:40px}
.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)}

/* Texte d'accompagnement : Pacaembu Light (l'IM Fell English italique se lisait mal, surtout sur mobile). */
.lede{font-family:var(--sans);font-style:normal;font-weight:300;font-size:clamp(19px,1.9vw,22px);line-height:1.5;color:var(--encre)}
.lede--big{font-size:clamp(24px,3.2vw,38px);line-height:1.35;color:var(--encre)}
.serif{font-family:var(--sans);font-style:normal;font-weight:300}
.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é (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--full{max-width:none}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--boucle-dor);color:var(--encre);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:var(--boucle-dor-2);color:var(--encre)}
.btn:active{transform:translateY(1px)}
.btn--green{background:var(--haricot)}
.btn--green:hover{background:#4fa46f}
.btn--ink{background:var(--encre);color:var(--pot-au-lait)}
.btn--ink:hover{background:#3f3631;color:var(--pot-au-lait)}
.btn--light{background:var(--pot-au-lait);color:var(--encre)}
.btn--light:hover{background:#fff;color:var(--encre)}
.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(--pot-au-lait)}
.btn--ghost-light{background:none;color:var(--pot-au-lait);border:1.5px solid rgba(248,245,244,.4);padding:11px 22px;font-size:14.5px}
.btn--ghost-light:hover{background:var(--pot-au-lait);border-color:var(--pot-au-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(--pot-au-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(--encre);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(--violet)}

/* ---------- 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}

/* ---------- 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(--pot-au-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:var(--haricot)}
.card--link:hover .card__ill{transform:rotate(-4deg) scale(1.05)}
.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}
.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(--pot-au-lait);
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.disclose:hover{background:var(--pomme);border-color:var(--pomme);color:var(--pot-au-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(--haricot);color:var(--encre)}
.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(--pot-au-lait)}
.panel--pomme{background:var(--pomme);color:var(--pot-au-lait)}
/* Aplat Violet clair : texte Encre en grand corps uniquement (4,19:1). */
.panel--violet{background:var(--violet-2);color:var(--encre)}
.panel--violet .panel__appel{font-size:clamp(24px,2.4vw,26px);line-height:1.35}
.panel--haricot{background:var(--haricot);color:var(--pot-au-lait)}
.panel--reverie{background:var(--violet);color:var(--pot-au-lait)}
.panel--jaune{background:var(--boucle-dor);color:var(--encre)}
.panel--or{background:var(--boucle-dor);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:var(--encre-80);
}
.badge__dot{width:8px;height:8px;border-radius:999px;background:var(--pomme)}

/* 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;color:var(--encre)}
.stat--haricot{box-shadow:inset 0 5px 0 var(--haricot)}
.stat--boucle-dor{box-shadow:inset 0 5px 0 var(--boucle-dor)}
.stat--violet{box-shadow:inset 0 5px 0 var(--violet)}
.stat--violet-2{box-shadow:inset 0 5px 0 var(--violet-2)}
.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:.09}
@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(--pot-au-lait)}
.card--vert{background:var(--haricot);color:var(--pot-au-lait)}
.card--violet{background:var(--violet);color:var(--pot-au-lait)}
.card--or{background:var(--boucle-dor);color:var(--encre)}
.card--ink{background:var(--encre);color:var(--pot-au-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(--pot-au-lait)}
.card--pomme .card__kicker,.card--vert .card__kicker,.card--violet .card__kicker,.card--ink .card__kicker{color:var(--pot-au-lait)}
.card--pomme .card__text,.card--vert .card__text,.card--violet .card__text,.card--ink .card__text{color:var(--pot-au-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(--pot-au-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(--boucle-dor)}
.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(--pot-au-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(--pot-au-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(--violet)}
.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(--pot-au-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(--boucle-dor);border-color:var(--boucle-dor);color:var(--encre)}
.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:var(--encre-55);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:var(--encre-55);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:var(--encre-55);cursor:pointer}
.back:hover{color:var(--encre)}
.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(--pot-au-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(--violet);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(--pot-au-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: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(--pot-au-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;scroll-padding-inline:var(--gut)}
  .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(--pot-au-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}
  .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}
}

/* ==========================================================================
   Mise en page (refonte d'octobre 2026)
   Structure sobre, titres de section en couleurs franches de la charte,
   pas d'aplat de couleur pour rythmer les sections : le blanc et les
   titres font le rythme. Illustrations en filigrane, discrètes.
   ========================================================================== */

/* Lien d'évitement : invisible jusqu'au premier Tab. */
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--encre);color:var(--pot-au-lait);
  padding:10px 18px;border-radius:999px;font-weight:700;font-size:14.5px;transition:top .15s ease}
.skip:focus,.skip:focus-visible{top:12px;color:var(--pot-au-lait)}
main:focus{outline:none;box-shadow:none}

/* Chiffres romains : vert, jaune, violet, puis vert foncé pour le IV, dans
   l'ordre des plis du logo. Ornement (aria-hidden) : l'intitulé qui suit
   porte le sens, en Encre. */
.c-haricot{color:var(--haricot)}
.c-boucle-dor{color:var(--boucle-dor-2)}
.c-violet{color:var(--violet)}
.c-haricot-2{color:var(--haricot-2)}

/* Accueil : mots mis en avant dans le grand titre, surlignés en vert
   (texte Encre : 3,56:1 sur Haricot, grand texte). */
.surligne{background:linear-gradient(transparent 80%,var(--haricot) 80%,var(--haricot) 94%,transparent 94%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em}

/* ---------- En-tête : logo centré, deux liens de part et d'autre ---------- */
.nav{position:relative;background:none;backdrop-filter:none;border:0}
.mast{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:48px;
  max-width:var(--main);margin:0 auto;padding:28px 40px 4px}
.mast>.navlink:first-child{justify-self:end}
.mast>.navlink:last-child{justify-self:start}
.mast .navlink{font-size:15.5px;font-weight:700;color:var(--encre)}
.mast__logo{display:block}
.mast__logo img{height:60px;width:auto;transition:transform .25s var(--ease)}
.mast__logo:hover img{transform:rotate(-1.5deg) scale(1.02)}

/* Intitulé court au-dessus d'un titre */
.nowrap{white-space:nowrap}
.kicker{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre);margin-bottom:18px}

/* ---------- Accueil ---------- */
.hero{position:relative;overflow:hidden}
.hero__in{text-align:center;padding-top:clamp(48px,8vw,104px);padding-bottom:clamp(36px,5vw,64px);max-width:1160px}
/* Titre d'accueil : deux lignes au plus sur ordinateur, coupées après
   « papeterie, » (le <br class="hero__br"> n'existe qu'au-delà de 820px).
   La première ligne mesure 24,8em en Pacaembu 800 : le bloc fait 25,6em,
   et la taille suit la largeur d'écran ((100vw - 80px) / 25,6, arrondi
   par défaut) pour que cette ligne tienne toujours dans le contenu de
   .hero__in (1080px au plus). Sous 820px, le titre s'écoule librement
   sur trois ou quatre lignes équilibrées. La poule décorative est posée
   à hauteur du sous-titre (top:270px) pour ne pas passer sous le titre. */
.hero__title{font-size:clamp(28px,calc(3.9vw - 4px),42px);line-height:1.12;letter-spacing:-.022em;font-weight:800;max-width:25.6em;margin:0 auto;text-wrap:balance}
.hero__br{display:none}
@media (min-width:821px){.hero__br{display:inline}}
.hero__sub{font-weight:400;font-size:clamp(18px,2vw,24px);color:var(--encre-80);margin-top:16px;text-wrap:balance}
.hero__place{font-weight:300;font-size:clamp(18px,1.9vw,22px);margin-top:26px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:34px}

.block{padding-top:clamp(56px,7vw,96px);padding-bottom:8px}
.block[id]{scroll-margin-top:20px}
.t-sec{font-size:clamp(30px,3.8vw,46px);line-height:1.06;letter-spacing:-.025em;font-weight:800;margin-bottom:36px;text-wrap:balance}

/* Chiffres romains : romain droit, gras, en couleur */
/* Chiffres romains : IM Fell English en romain droit (lisible à cette taille). */
.num{display:block;font-family:var(--serif);font-style:normal;font-weight:400;font-size:clamp(52px,6vw,76px);line-height:.85;letter-spacing:.01em;margin-bottom:14px}

.offers{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}
@media (max-width:1000px){.offers{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 44px}}
.offer{display:flex;flex-direction:column;align-items:flex-start}
.offer__t{font-size:clamp(20px,1.9vw,23px);line-height:1.2;font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
.offer__t .badge-or{display:table;margin-top:10px}
.offer__d{font-weight:300;font-size:17px;line-height:1.55;margin-bottom:14px;flex:1}

.badge-or{display:inline-block;background:var(--boucle-dor);color:var(--encre);font-weight:800;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;border-radius:999px;padding:4px 11px 3px;line-height:1.35;vertical-align:middle}
.hl{font-weight:700;background:linear-gradient(transparent 58%,rgba(244,204,113,.9) 58%);padding:0 2px}

.glance{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:56px;align-items:center}
.glance__img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.glance .t-sec{margin-bottom:24px}
.facts-list{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-direction:column;gap:14px;
  font-size:18px;font-weight:300;line-height:1.5;max-width:46ch}
.facts-list li{padding-left:24px;position:relative}
.facts-list li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:999px;background:var(--haricot)}
.facts-list li:nth-child(3n+2)::before{background:var(--boucle-dor)}
.facts-list li:nth-child(3n)::before{background:var(--violet)}

.closing{text-align:center;padding-bottom:80px}
.closing .t-sec{margin-bottom:26px}

/* ---------- Pages intérieures ---------- */
.pagehead{padding-top:clamp(48px,7vw,88px);padding-bottom:8px}
.pagehead .page-title{max-width:20ch;font-size:clamp(34px,5vw,56px);text-wrap:balance}
.pagehead .lede{margin-top:22px;max-width:54ch}
[data-page="contact"] .pagehead{padding-bottom:72px}
.contact__ill{width:min(240px,60%);height:auto}

/* Studio : une entrée par public */
.entry__head{display:flex;gap:22px;align-items:flex-start;margin-bottom:20px}
.entry__head .num{margin:0;min-width:1.3em}
.entry__head .t-sec{margin-bottom:10px}
.for{font-weight:300;font-size:clamp(19px,2vw,23px);line-height:1.45;max-width:46ch;margin:0 0 22px}
.kinds{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:8px 10px}
.kinds li{border:1.5px solid rgba(83,71,65,.28);border-radius:999px;padding:6px 14px;font-size:14.5px;font-weight:600;background:#fff}
.price{font-size:17px;font-weight:700}
/* Emplacements à remplir par l'autrice : volontairement voyants. */
.tbd{display:inline-block;font-weight:700;font-size:14px;line-height:1.4;background:var(--boucle-dor);color:var(--encre);
  border:1.5px dashed var(--encre);border-radius:6px;padding:2px 8px}
.todo{aspect-ratio:16/10;display:grid;place-items:center;border:2px dashed var(--encre);border-radius:6px;
  background:repeating-linear-gradient(45deg,rgba(244,204,113,.3) 0 12px,transparent 12px 24px);
  font-weight:700;font-size:15px;color:var(--encre)}
.minihead{margin:52px 0 22px;font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}

.project{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:36px;align-items:start;margin-bottom:52px}
.project:last-child{margin-bottom:0}
.project__media img{width:100%;height:auto;border-radius:6px}
.project__gallery{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.project__gallery figure{margin:0}
.project__gallery figure:first-child{grid-column:1/-1}
.project__gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.project__gallery figure:first-child img{aspect-ratio:1500/857}
.project__gallery figcaption{font-size:13px;color:var(--encre-55);margin-top:6px}
/* Galerie de quatre photos : grille 2 x 2, sans image pleine largeur. */
.project__gallery--grille figure:first-child{grid-column:auto}
.project__gallery--grille figure:first-child img{aspect-ratio:4/3}
.project__more{margin-top:20px;font-size:16px}
.project__t{font-size:clamp(20px,2vw,24px);font-weight:800;line-height:1.2;letter-spacing:-.01em;margin-bottom:18px}
.facts{margin:0}
.facts dt{font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-55);margin-top:14px}
.facts dt:first-child{margin-top:0}
.facts dd{margin:3px 0 0;font-size:16px;line-height:1.6;color:rgba(83,71,65,.9)}

/* Méthode */
.steps{list-style:none;padding:0;margin:0 0 40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 48px}
.steps li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start}
/* Pastilles vert, jaune, violet, violet clair : chiffres Encre de 22px gras
   (grand texte, 3:1 minimum, tenu sur les quatre). */
.steps__n{display:grid;place-items:center;width:52px;height:52px;border-radius:999px;background:var(--haricot);color:var(--encre);font-weight:800;font-size:22px}
.steps li:nth-child(2) .steps__n{background:var(--boucle-dor)}
.steps li:nth-child(3) .steps__n{background:var(--violet)}
.steps li:nth-child(4) .steps__n{background:var(--violet-2)}
.steps__t{font-size:19px;font-weight:800;line-height:1.3;margin:4px 0 6px}
.steps p{font-size:16px;line-height:1.6}

/* Parcours */
.bio{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:52px;align-items:center}
.bio__img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.bio__txt .t-sec{margin-bottom:20px}
.bio__lead{font-weight:300;font-size:clamp(22px,2.5vw,28px);line-height:1.35;margin-bottom:22px;max-width:28ch}
.bio__txt .body{margin-bottom:16px;max-width:56ch}
.quiet{color:var(--encre);font-weight:700;border-bottom:2px solid var(--boucle-dor);white-space:nowrap}
.quiet::after{content:"\00a0→"}
.quiet:hover{color:var(--encre);border-color:var(--haricot)}

.cv{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:26px}
.cv__row{display:flex;gap:22px;align-items:center}
.cv__row>div:last-child{flex:1;min-width:0}
.cv__k{display:inline-block;font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--boucle-dor);color:var(--encre);border-radius:999px;padding:3px 10px;margin-bottom:6px}
.cv__k--plain{background:none;padding:0;color:var(--encre-55)}
.cv__t{font-size:clamp(18px,1.7vw,20.5px);font-weight:700;line-height:1.3;letter-spacing:-.01em}
.cv__w{font-size:14.5px;color:var(--encre-70);margin-top:3px}

.shot{margin:0}
.shot img{height:clamp(220px,26vw,290px);width:auto;max-width:none;object-fit:cover;border-radius:6px}
.shot figcaption{width:0;min-width:100%;font-size:13px;line-height:1.45;color:var(--encre-55);margin-top:8px}
.rail__hint{margin-top:4px}

.skills{margin:0 0 40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 48px}
.skills dt{font-weight:800;font-size:17px;margin-bottom:4px}
.skills dd{margin:0;font-size:15.5px;line-height:1.6;color:var(--encre-80)}

/* ---------- Pied de page : colophon ---------- */
.foot__in{gap:34px 48px}
.foot__id{max-width:280px;font-size:14px;line-height:1.6;color:rgba(248,245,244,.78)}
.foot__col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:14.5px}
.foot__h{font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--boucle-dor);margin-bottom:4px}
.foot__colophon{max-width:270px;gap:0;font-size:13.5px;line-height:1.65;color:rgba(248,245,244,.78)}
.foot__colophon .foot__h{margin-bottom:10px}
.foot__quote{margin-top:10px;font-weight:300;font-size:16px;color:var(--boucle-dor)}

@media (max-width:820px){
  .mast{padding:20px var(--gut) 0;gap:22px}
  .mast__logo img{height:42px}
  .mast .navlink{font-size:14.5px}
  .offers{grid-template-columns:minmax(0,1fr);gap:36px}
  .glance{grid-template-columns:minmax(0,1fr);gap:28px}
  .glance__img{max-width:260px}
  .project{grid-template-columns:minmax(0,1fr);gap:22px}
  .bio{grid-template-columns:minmax(0,1fr);gap:26px}
  .bio__img{max-width:420px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .skills{grid-template-columns:minmax(0,1fr);gap:20px}
  .t-sec{margin-bottom:28px}
}
@media (max-width:600px){
  .hero__title{font-size:clamp(23px,6.4vw,26px);line-height:1.16}
  .hero__sub{font-size:18px;margin-top:12px}
  .hero__actions{width:100%}
  .entry__head{gap:14px}
  .foot__colophon,.foot__id{max-width:none}
}
@media (max-width:370px){
  .hero__title{font-size:21.5px}
  .hero__sub{font-size:17px}
  .mast{gap:14px}
  .mast .navlink{font-size:13.5px}
}

/* ==========================================================================
   Plis du leporello : la petite bande de six plis du logo (vert, vert
   foncé, jaune, jaune foncé, violet, violet clair) se déplie de gauche à
   droite, pli après pli, en 0,4 s.
     - sous les liens de navigation, au survol ou au focus clavier (le lien
       de la page courante garde sa bande dépliée) ;
     - sous les grands titres de section, à leur apparition au défilement
       (classe .in posée par script.js ; sans JavaScript, la bande est
       simplement affichée).
   CSS seul : un pseudo-élément, découpé en six plis par clip-path. Chaque
   étape de l'animation ouvre un pli de plus, avec sa propre courbe
   (d'où le léger décalage). Avec prefers-reduced-motion, les plis
   apparaissent directement, sans mouvement.
   ========================================================================== */
:root{
  --plis:linear-gradient(90deg,
    var(--haricot) 0 16.667%,var(--haricot-2) 0 33.333%,
    var(--boucle-dor) 0 50%,var(--boucle-dor-2) 0 66.667%,
    var(--violet) 0 83.333%,var(--violet-2) 0);
  --plis-ouverts:polygon(0 0,16.667% 30%,33.333% 0,50% 30%,66.667% 0,83.333% 30%,100% 0,100% 70%,83.333% 100%,66.667% 70%,50% 100%,33.333% 70%,16.667% 100%,0 70%);
  --plis-replies:polygon(0 0,0 30%,0 0,0 30%,0 0,0 30%,0 0,0 70%,0 100%,0 70%,0 100%,0 70%,0 100%,0 70%);
}
@keyframes plis-deplie{
  0%{clip-path:polygon(0 0,0 30%,0 0,0 30%,0 0,0 30%,0 0,0 70%,0 100%,0 70%,0 100%,0 70%,0 100%,0 70%)}
  16.67%{clip-path:polygon(0 0,16.667% 30%,16.667% 0,16.667% 30%,16.667% 0,16.667% 30%,16.667% 0,16.667% 70%,16.667% 100%,16.667% 70%,16.667% 100%,16.667% 70%,16.667% 100%,0 70%)}
  33.33%{clip-path:polygon(0 0,16.667% 30%,33.333% 0,33.333% 30%,33.333% 0,33.333% 30%,33.333% 0,33.333% 70%,33.333% 100%,33.333% 70%,33.333% 100%,33.333% 70%,16.667% 100%,0 70%)}
  50%{clip-path:polygon(0 0,16.667% 30%,33.333% 0,50% 30%,50% 0,50% 30%,50% 0,50% 70%,50% 100%,50% 70%,50% 100%,33.333% 70%,16.667% 100%,0 70%)}
  66.67%{clip-path:polygon(0 0,16.667% 30%,33.333% 0,50% 30%,66.667% 0,66.667% 30%,66.667% 0,66.667% 70%,66.667% 100%,66.667% 70%,50% 100%,33.333% 70%,16.667% 100%,0 70%)}
  83.33%{clip-path:polygon(0 0,16.667% 30%,33.333% 0,50% 30%,66.667% 0,83.333% 30%,83.333% 0,83.333% 70%,83.333% 100%,66.667% 70%,50% 100%,33.333% 70%,16.667% 100%,0 70%)}
  100%{clip-path:polygon(0 0,16.667% 30%,33.333% 0,50% 30%,66.667% 0,83.333% 30%,100% 0,100% 70%,83.333% 100%,66.667% 70%,50% 100%,33.333% 70%,16.667% 100%,0 70%)}
}
.plis,.t-sec::after,.sec-title::after,.navlink::after{
  content:"";display:block;background:var(--plis);clip-path:var(--plis-ouverts);pointer-events:none}

/* Liens de navigation (en-tête et pied de page) */
.navlink::after{position:absolute;left:0;right:0;bottom:-3px;height:6px;clip-path:var(--plis-replies)}
.navlink:hover::after,.navlink:focus-visible::after{animation:plis-deplie .4s cubic-bezier(.3,.7,.4,1) both}
.navlink.is-on::after{clip-path:var(--plis-ouverts);animation:none}

/* Grands titres de section */
.plis{width:132px;height:9px}
.t-sec::after,.sec-title::after{width:132px;height:9px;margin-top:16px}
.closing .t-sec::after,#contact-sent .t-sec::after{margin-inline:auto}
.js .plis:not(.in),.js .t-sec:not(.in)::after,.js .sec-title:not(.in)::after{clip-path:var(--plis-replies)}
.js .plis.in,.js .t-sec.in::after,.js .sec-title.in::after{animation:plis-deplie .4s cubic-bezier(.3,.7,.4,1) .1s both}

@media (prefers-reduced-motion:reduce){
  .navlink:hover::after,.navlink:focus-visible::after,
  .js .plis,.js .t-sec::after,.js .sec-title::after{animation:none !important;clip-path:var(--plis-ouverts) !important}
}

/* ---------- Logo Studio Mille Pages ----------
   Fichiers de la charte, texte vectorisé (scripts/generate-logos.py).
   Jamais étiré (hauteur automatique), ni ombre ni contour. Tailles
   minimales : horizontal 140 px de large. Zone de protection : la largeur
   d'un pli (7 % de la largeur du logo horizontal), tenue par les marges. */
.mast__logo img{height:auto;width:320px;transform:none;transition:none}
.mast__logo:hover img{transform:none}
.foot__logo{display:block;width:240px;height:auto;margin-bottom:18px}
@media (max-width:1000px){.mast__logo img{width:280px}}
@media (max-width:820px){.mast__logo img{width:220px}}
@media (max-width:600px){
  .mast{gap:14px}
  .mast .navlink{white-space:nowrap}
  .mast__logo img{width:150px}
}
/* Très petits écrans : le logo passe au-dessus des deux liens pour garder
   sa taille minimale et sa zone de protection. */
@media (max-width:359px){
  .mast{grid-template-columns:1fr 1fr;row-gap:12px}
  .mast__logo{grid-column:1/-1;grid-row:1;justify-self:center}
  .mast__logo img{width:180px}
}

/* Appel du jeu sur aplat Violet clair : jamais sous 24px (grand texte). */
.panel--violet .panel__appel{font-size:clamp(24px,2.4vw,26px) !important}