/* ══════════════════════════════════════════════════════════════════════════
   AIFFELLE STUDIO — « L'AUTOCOLLANT »   (direction retenue par Florence le
   2026-08-20, promue site principal le 2026-08-23)

   Les deux autres directions — « L'affiche » et « La planche » — sont parties
   dans archive/aiffelle-studio-directions-ecartees/. Cette feuille est
   désormais LA feuille du site.

   LE SYSTÈME — chaque bloc de contenu est posé sur un autocollant : coin
   arrondi, filet noir fin, aplat pastel, et une ombre PLEINE (jamais floue —
   c'est ce qui fait l'objet imprimé plutôt que la carte d'interface). Le tout
   sur un quadrillage rose, emprunté à « La planche » à sa demande.

   Le geste signature : les autocollants SE POSENT. À l'entrée dans l'écran,
   chacun arrive d'un angle plus marqué et se range à son angle de repos ; au
   survol il se redresse et se soulève. C'est exactement ce que montre sa
   planche « éléments que j'aime bien » — des formes légèrement de travers,
   jamais alignées au cordeau.

   Les étoiles et les smileys sont admis, mais RATIONNÉS dans le CONTENU : une
   étoile par titre de section, un smiley au pied. Le fond, lui, a droit à ses
   autocollants collés sur le quadrillage — ils sont pâles et derrière tout.

   Palette échantillonnée au pixel sur ses visuels :
     #F46060 rouge · #CEDFFD bleu · #DBF58A lime · #FFE9F8 rose · #101010 noir
   ⚠ Aucune n'est lisible en texte : ce sont des fonds à texte NOIR.

   Typographies fournies par Florence : Bebas Neue + Inter, OFL, auto-hébergées.

   ⚠ mentions.html et merci.html chargent cette même feuille : h1, h2, h3 et
   le formulaire sont donc SCOPÉS (.hero-titre h1, .sec-tete h2, #contact form).
   Un `h1` nu passerait les pages légales en Bebas Neue 11 rem.
   ══════════════════════════════════════════════════════════════════════════ */


@font-face{font-family:"Bebas Neue";src:url("../assets/fonts/BebasNeue-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* --accent, --accent-fonce, --encre, --rouge, --bleu, --lime, --rose sont
     injectés par build.py depuis content.json (bloc <style> des trois
     gabarits) : la palette n'est écrite qu'à UN endroit, et c'est content.json.
     Seuls le blanc de l'autocollant et le gris de texte vivent ici. */
  --fond:#FFFFFF;
  --muted:#6b6b6b;
  /* force des smileys du fond : 0 = aucun, 1 = aussi francs que le contenu.
     C'est le seul curseur à toucher pour doser le décor.
     ⚠ Descendu de .5 à .42 le 24/08, quand les smileys sont passés des marges
     au plein milieu de la grille : leurs yeux et leur bouche sont noirs, et à
     .5 ils coupaient les lignes de texte qu'ils croisent. */
  --fond-force:.42;
  --titre:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --corps:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --filet:2.2px solid var(--encre);
  --ombre:0 5px 0 var(--encre);
  --ombre-h:0 9px 0 var(--encre);
  --barre:62px;
  --gouttiere:clamp(18px,4.4vw,50px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  overflow-x:clip; /* 100vw du bandeau ≥ largeur utile quand la barre de défilement est classique */
  margin:0;background:var(--rose);color:var(--encre);
  font-family:var(--corps);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* ── LE FOND : le quadrillage rose et ses autocollants ───────────────────── */
/* Le quadrillage vient de « La planche », choisi par Florence le 20/08 : deux
   dégradés répétés, zéro image, le papier millimétré d'un carnet de graphiste.

   ⚠ ESSAYÉ ET REJETÉ le 23/08 : une couche `position:absolute` haute comme le
   document, qui défilait avec la page. Dylan a tranché — la trame NE BOUGE
   PAS, seul le contenu défile. Le fond est donc un CALQUE D'ÉCRAN.

   Conséquence directe sur les smileys : leurs positions en % sont des % de
   l'ÉCRAN, pas de la page. Ils sont donc visibles en permanence, tous en même
   temps, et le contenu leur passe dessus. D'où : il en faut PEU — cinq. C'est
   une composition d'un seul écran, pas une répartition sur 6 700 px.

   ⚠ Ils étaient tenus dans les marges jusqu'au 24/08, justement pour ne jamais
   croiser un paragraphe. Dylan les veut ÉPARPILLÉS sur toute la grille : ils
   passent donc sous la colonne de texte, et la couche étant fixe, chacun finit
   forcément derrière du texte à un moment du défilement. C'est assumé, et c'est
   `--fond-force` qui tient la lisibilité — les quatre aplats de sa charte,
   atténués de moitié, restent au-dessus de 11:1 avec du texte noir. Baisser ce
   curseur avant de déplacer un smiley si quelque chose accroche.

   La couche entière est aria-hidden et pointer-events:none : ce n'est pas du
   contenu, rien n'est lu par un lecteur d'écran, rien n'est cliquable. */
.fond{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  /* contient les autocollants débordants : sans ça, un objet posé à left:-30px
     rouvrirait une barre de défilement horizontale. */
  overflow:hidden;
  background-image:
    repeating-linear-gradient(0deg,rgba(16,16,16,.085) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(16,16,16,.085) 0 1px,transparent 1px 46px);
}
body > *{position:relative;z-index:1}

/* Les cinq smileys du fond — SON smiley, celui de sa planche « éléments que
   j'aime bien », pas un dessin inventé pour l'occasion. Ils sont PÂLES et
   derrière tout : ils habitent la marge, ils ne se lisent pas. C'est le carnet
   sur lequel la page est posée, pas un élément de plus à regarder.
   Le dessin porte son propre trait : ni bordure ni ombre CSS ici. */
.fond .colle{
  position:absolute;display:block;
  transform:rotate(var(--a,0deg));
}

/* taille · place · couleur · angle — tout est ici, le HTML ne porte qu'une
   classe par smiley.
   --t est un FACTEUR de taille, de .5 à 2 : la consigne est « de 50 % à 200 % »,
   elle se lit donc telle quelle dans la feuille. La taille de référence suit la
   fenêtre, sinon un smiley à 200 % mangerait un écran de 390 px.
   Les angles reprennent ceux de sa planche — elle pose ses deux smileys à
   ±17°, jamais d'aplomb.
   Aucun n'est aligné avec un autre, ni en hauteur ni en largeur : c'est ce qui
   sépare l'éparpillement de la grille régulière. Le premier commence à 13 % —
   au-dessus, c'est l'entête collante, qui est opaque et le mangerait. */
.fond{--base:clamp(52px,5.6vw,80px)}
.fond .colle{width:calc(var(--base) * var(--t,1));height:calc(var(--base) * var(--t,1))}

.c1 {top:13%; left:7%;    --t:2;    color:var(--rouge); --a:-17deg}
.c2 {top:26%; right:11%;  --t:.5;   color:var(--bleu);  --a:17deg}
.c3 {top:45%; left:29%;   --t:1.35; color:var(--lime);  --a:11deg}
.c4 {top:63%; right:31%;  --t:.75;  color:var(--rouge); --a:-13deg}
.c5 {top:81%; left:13%;   --t:1.7;  color:var(--bleu);  --a:21deg}

/* ⚙ LE SEUL RÉGLAGE DU FOND : --fond-force, posé sur :root plus haut.
   Monter vers 1 pour des autocollants francs, descendre vers .2 pour un
   filigrane. ⚠ Ne jamais mettre l'opacité sur .fond entier : elle délaverait
   aussi le quadrillage, qui doit garder sa force. */
.fond .colle{opacity:var(--fond-force)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Base sobre pour mentions.html et merci.html, qui chargent cette feuille : les
   titres d'affiche sont scopés plus bas, un h1 nu reste un h1 de texte. */
h1,h2,h3{font-family:var(--corps);font-weight:700;letter-spacing:-.02em;line-height:1.22}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gouttiere)}
.skip{position:absolute;left:-9999px;background:var(--encre);color:#fff;padding:12px 20px;font-weight:700}
.skip:focus{left:0;top:0;z-index:99}
:focus-visible{outline:3px solid var(--accent-fonce);outline-offset:3px}

/* ── L'autocollant, objet de base de la direction ───────────────────────── */
.sticker{
  border:var(--filet);border-radius:26px;background:var(--fond);
  box-shadow:var(--ombre);
  transform:rotate(var(--a,0deg));
  transition:transform .32s cubic-bezier(.2,.8,.3,1),box-shadow .32s cubic-bezier(.2,.8,.3,1);
}
.sticker:hover{transform:rotate(0deg) translateY(-4px);box-shadow:var(--ombre-h)}

.pilule{
  display:inline-block;padding:9px 22px 10px;border-radius:999px;
  border:var(--filet);background:var(--fond);box-shadow:0 3px 0 var(--encre);
  font-family:var(--corps);font-size:.82rem;font-weight:700;letter-spacing:.02em;
  color:var(--encre);cursor:pointer;
  transform:rotate(var(--a,0deg));
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,background .22s;
}
.pilule:hover{transform:rotate(0deg) translateY(-2px);box-shadow:0 5px 0 var(--encre)}
.pilule:active,.pilule.est-actif{
  background:var(--encre);color:#fff;transform:rotate(0deg) translateY(2px);box-shadow:0 1px 0 var(--encre);
}
.pilule-plate{cursor:default;box-shadow:0 3px 0 var(--encre);padding:6px 16px 7px;font-size:.74rem}
.pilule-plate:hover{transform:rotate(var(--a,0deg));box-shadow:0 3px 0 var(--encre)}

/* l'étoile, rationnée : une par titre de section */
.etoile{width:1em;height:1em;flex:none;display:inline-block}
.etoile path{fill:currentColor}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-block;padding:14px 30px;border-radius:999px;border:var(--filet);
  background:var(--fond);color:var(--encre);box-shadow:var(--ombre);
  font-family:var(--corps);font-size:.86rem;font-weight:800;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s;
}
/* le bouton s'ENFONCE au survol au lieu de léviter : c'est ce geste-là qui
   fait « objet physique » plutôt que « carte d'interface ». */
.btn:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--encre)}
.btn-primary{background:var(--rouge)}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:40;background:var(--fond);border-bottom:var(--filet)}
header nav{
  max-width:1240px;margin:0 auto;padding:0 var(--gouttiere);height:var(--barre);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.brand{font-family:var(--titre);font-size:1.72rem;line-height:1;letter-spacing:.045em;text-decoration:none;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:clamp(12px,2.2vw,26px)}
.nav-links a{font-size:.8rem;font-weight:700;text-decoration:none}
.nav-links a:not(.nav-cta):hover{background:var(--lime);box-shadow:0 0 0 4px var(--lime)}
.nav-cta{
  border:var(--filet);border-radius:999px;padding:7px 18px;background:var(--rouge);
  box-shadow:0 3px 0 var(--encre);transition:transform .2s,box-shadow .2s;
}
.nav-cta:hover{transform:translateY(3px);box-shadow:0 0 0 var(--encre);background:var(--rouge)}

/* ── Le monogramme FL ────────────────────────────────────────────────────── */
/* AIFFELLE se prononce « èf-elle » : ses initiales, F. L., écrites comme on les
   dit (confirmé le 19/08). Ici le sceau est un autocollant comme les autres. */
.sceau{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.7em;height:1.7em;border-radius:999px;flex:none;
  background:var(--rouge);color:var(--encre);border:2px solid var(--encre);
  font-family:var(--titre);font-size:.66em;line-height:1;letter-spacing:.04em;padding-top:.1em;
}
.brand{display:inline-flex;align-items:center;gap:.4em}
.brand .sceau{font-size:.7em;box-shadow:0 2px 0 var(--encre)}
/* SON logotype dans la bannière. Hauteur fixe, largeur libre : le fichier fait
   520×124, le rapport est tenu par le navigateur.
   ⚠ Le « studio » de son logo est un exposant minuscule — descendre sous 26 px
   de haut le rend illisible. */
.brand .logo{height:clamp(26px,3.2vw,32px);width:auto;display:block}

/* #454545 et pas --muted : depuis le bandeau bleu du 28/08 elle est posée
   sur --bleu, où le gris moyen tombait sous 4,5:1. */
.signature{margin:10px 0 0;font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:lowercase;color:#454545}

/* ── Le bandeau défilant ─────────────────────────────────────────────────── */
/* Geste relevé sur tampala.be et studioycidesign.fr, où une bande traverse la
   page en continu. Ici elle porte les VRAIS clients au lieu d'un décor — même
   règle que la bande de pictogrammes de Station 11.
   Deux pistes identiques qui se suivent : quand la première a parcouru sa
   propre largeur, la seconde est exactement à sa place, la boucle est
   invisible. Le second exemplaire est aria-hidden pour ne pas doubler la
   lecture d'écran. */
.bande{
  border-top:var(--filet);border-bottom:var(--filet);background:var(--lime);
  padding:16px 0;overflow:hidden;
  /* le masque évite la coupe nette aux deux bords */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
/* LE GESTE 3 — LA BANDE SUIT LE DÉFILEMENT. Sa vitesse et son SENS répondent
   au scroll, mais TOUT se passe en JS, sur `playbackRate` de cette animation-ci
   (voir main.js) : rien à piloter depuis le CSS.
   ⚠ Ne pas remettre `animation-duration:var(--dur)` ni `animation-direction`
   pilotés en JS — c'est exactement ce qui faisait sauter la bande jusqu'au
   24/08 : changer la durée ou le sens en vol réinterprète le temps écoulé.
   Sans JS, l'animation ci-dessous tourne seule à son régime nominal.

   ⚠ LA DURÉE DÉPEND DE LA LONGUEUR DE LA LISTE, et c'est un piège : le
   keyframe parcourt 50 % de la piste, donc à durée fixe, PLUS LA LISTE EST
   LONGUE, PLUS LA BANDE VA VITE. En passant des 4 clients aux 10 objets
   (954 px → 2 106 px de piste), le régime serait monté de 23 à 50 px/s sans
   qu'on touche à rien. 92 s tient les ~23 px/s avec la liste actuelle ;
   main.js recalcule de toute façon la durée après le chargement des polices,
   pour que la vitesse ne dépende plus jamais du nombre d'entrées. */
.bande-piste{display:flex;width:max-content;animation:defile 92s linear infinite}
.bande:hover .bande-piste{animation-play-state:paused}
.bande ul{display:flex;align-items:center;gap:clamp(20px,3vw,44px);list-style:none;margin:0;padding:0 clamp(10px,1.5vw,22px)}
.bande li{
  display:flex;align-items:center;gap:clamp(20px,3vw,44px);
  font-family:var(--titre);font-size:clamp(1.3rem,2.4vw,2rem);line-height:1;
  letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;
}
.bande li::after{content:"";width:.62em;height:.62em;flex:none;background:var(--encre);
  clip-path:polygon(50% 0,58% 32%,85% 15%,68% 42%,100% 50%,68% 58%,85% 85%,58% 68%,50% 100%,42% 68%,15% 85%,32% 58%,0 50%,32% 42%,15% 15%,42% 32%)}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Héros ───────────────────────────────────────────────────────────────── */
.hero{padding:clamp(38px,6vw,76px) 0 clamp(30px,4.6vw,58px);container-type:inline-size}
.hero-titre h1{
  font-family:var(--titre);font-weight:400;margin:0 0 clamp(22px,3.4vw,40px);
  font-size:clamp(3.6rem,13.4cqw,11rem);line-height:.88;letter-spacing:.008em;
  text-transform:uppercase;
}
.hero-titre h1 span{display:block}
.hero-titre h1 .l2{color:var(--accent-fonce)}

/* Le héros est une seule grille sur deux rangées : le titre et le texte à
   gauche, le portrait et la fiche à droite. La colonne de droite ENJAMBE les
   deux rangées, donc elle démarre tout en haut, à côté du titre — sans quoi
   le coin supérieur droit reste vide et l'œil attend quelque chose qui ne
   vient pas (retour de Dylan, 20/08).
   Le portrait et la fiche se lisent comme un seul bloc — « voici Florence,
   voici ses infos ». `space-between` avait été essayé et rejeté : il repoussait
   la fiche en bas et rouvrait un trou au milieu de la colonne, exactement le
   défaut qu'on corrigeait.
   Les quatre blocs sont des items DIRECTS de la grille, sans conteneur : leur
   ordre dans le HTML est titre → portrait → texte → fiche, ce qui donne
   exactement le bon empilement en mobile sans une seule règle d'ordre. */
.hero-grille{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(20px,2.6vw,34px) clamp(22px,3.6vw,46px);align-items:start;
  position:relative;
}
/* position:relative : SANS ça le titre, statique, passerait SOUS le bandeau
   positionné — l'ordre de peinture ne suit pas l'ordre du HTML entre les deux. */
.hero-titre{grid-column:1;grid-row:1;position:relative}
.hero-portrait{grid-column:2;grid-row:1;justify-self:center}
.hero-txt{grid-column:1;grid-row:2}
.hero-fiche{grid-column:2;grid-row:2;align-self:start}
/* LE BANDEAU BLEU (28/08) — variante A, choisie par Florence parmi trois
   (« une genre de bannière là où il y'a aiffelle studio et ma photo,
   peut-être avec le bleu », référence tampala.be). Un aplat --bleu de bord à
   bord derrière le titre et le portrait, fermé d'un filet — il éteint au
   passage les smileys du fond derrière le titre.
   ⚠ L'objet peint est le ::before en absolu d'un item étiré sur la rangée,
   JAMAIS l'item lui-même : align-self:stretch + marges négatives donne une
   hauteur fausse en grille (mesuré : 17 px au lieu de 362). Le top négatif
   remonte jusque sous la barre en annulant le padding haut de .hero. */
.hero-bande{grid-column:1/-1;grid-row:1;position:relative;align-self:stretch}
.hero-bande::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);width:100vw;
  top:calc(-1 * clamp(38px,6vw,76px));bottom:-20px;
  background:var(--bleu);border-bottom:var(--filet);
}
.hero-txt .chapo{font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.36;font-weight:700;letter-spacing:-.012em;margin:0 0 14px}
/* plus foncé que --muted depuis le 28/08 (demande de Florence) : les
   smileys du fond passaient sous ce paragraphe et le gris moyen se lisait mal. */
.hero-txt .chapo-suite{color:#454545;margin:0 0 26px;max-width:48ch}
.actions{display:flex;flex-wrap:wrap;gap:13px}

/* la pile de pilules du héros — reprise directe de sa planche d'inspiration.
   Elles portent les VRAIES disciplines, pas un décor. */
.pile{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:9px}
.pile li{
  border:var(--filet);border-radius:999px;box-shadow:var(--ombre);
  padding:13px 26px;font-family:var(--titre);font-size:1.5rem;line-height:1.05;
  letter-spacing:.03em;text-transform:uppercase;
  transform:rotate(var(--a));
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.pile li:hover{transform:rotate(0deg) translateX(6px)}
.pile li:nth-child(1){--a:-2.2deg;background:var(--rouge);width:96%}
.pile li:nth-child(2){--a:1.6deg;background:var(--bleu);width:88%;margin-left:6%}
.pile li:nth-child(3){--a:-1deg;background:var(--fond);width:92%;margin-left:2%}
.pile li:nth-child(4){--a:2.4deg;background:var(--lime);width:80%;margin-left:9%}

.hero-fiche{padding:clamp(20px,2.8vw,30px);--a:.9deg;background:var(--fond)}
.hero-fiche dl{margin:0}
.hero-fiche div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:8px 0;border-bottom:1.4px solid rgba(16,16,16,.18)}
.hero-fiche div:last-child{border-bottom:0}
.hero-fiche dt{font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding-top:3px}
.hero-fiche dd{margin:0;font-size:.94rem;font-weight:600;overflow-wrap:anywhere}
/* Sa vraie photo de profil est un disque : l'autocollant devient rond.
   C'est elle qui a composé cet objet (noir et blanc sur aplat + étoile) — on
   le pose tel quel, on ne le recompose pas. */
.hero-portrait{margin:0;--a:-2.2deg;overflow:hidden;padding:0;border-radius:50%;width:min(100%,360px)}
.hero-portrait img{width:100%;border-radius:50%}

/* ── Sections ────────────────────────────────────────────────────────────── */
.sec{
  padding:clamp(46px,6.4vw,88px) 0;scroll-margin-top:calc(var(--barre) + 18px);
  border-top:var(--filet);
  /* ⚠ Le tampon part à scale(1.42) : sur écran étroit, un titre long dépasse
     alors la fenêtre et rend TOUTE la page défilable horizontalement — invisible
     en desktop, flagrant à 390 px. `overflow-x:clip` contient la transformation
     sans créer de conteneur de défilement, donc sans casser les sticky. */
  overflow-x:clip;
}
.sec-tete{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 clamp(26px,3.6vw,44px)}
/* LE GESTE 2 — LE TAMPON. Le titre arrive en surtaille et s'écrase d'un coup
   sur la page, l'étoile se visse en même temps. Un tampon encreur, pas un
   fondu : c'est le registre de l'imprimé, comme l'ombre pleine. */
.js .sec-tete h2,.js .sec-tete .etoile{transform:scale(1.42) rotate(-4deg);opacity:0}
.js .sec-tete.vu h2{transform:none;opacity:1;transition:transform .34s cubic-bezier(.2,.9,.25,1),opacity .16s linear}
.js .sec-tete.vu .etoile{transform:none;opacity:1;transition:transform .46s cubic-bezier(.3,1.5,.4,1) .08s,opacity .2s linear .08s}
.sec-tete h2{
  font-family:var(--titre);font-weight:400;margin:0;
  font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:1.02;letter-spacing:.012em;
  text-transform:uppercase;
}
.sec-tete .etoile{width:clamp(26px,4vw,46px);height:clamp(26px,4vw,46px)}
.sec-tete .lbl{
  margin-left:auto;font-size:.68rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);
}
.s-rouge{color:var(--rouge)} .s-bleu{color:#7ea6ee} .s-lime{color:#9ec93f} .s-rose{color:#e78bc6}

/* ── Portfolio — la planche d'autocollants (28/08) ───────────────────────────
   DIX projets tiennent dans ~1 400 px : une planche de vignettes carrées —
   toutes visibles d'un coup — et UN SEUL projet déplié dessous, dans un
   panneau qui montre tous ses visuels en bande horizontale.
   Le choix est porté par :target : les autocollants sont des liens d'ancre,
   aucun JavaScript ne conditionne l'affichage. Tant que rien n'est ciblé, le
   premier projet sert de panneau par défaut (:has en garde-fou — un
   navigateur sans :has montre la planche seule, et tout s'ouvre au clic).
   ⚠ L'ancienne grille de grandes cartes ferait plus de 4 000 px à dix
   projets, et grandirait à chacun de plus ; ici c'est le panneau qui absorbe
   la croissance, la section garde sa hauteur. */
.planche ol{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(92px,11vw,148px),1fr));
  gap:clamp(10px,1.8vw,20px);
  /* la perspective du décollement vit sur la grille, comme avant sur .projets */
  perspective:1400px;perspective-origin:50% 40%;
}
/* angles irréguliers : une planche cesse de faire « IA » dès qu'elle cesse
   d'être régulière. Cycle de 6 — jamais deux voisines dans le même sens. */
.vignette{transform:rotate(var(--a,0deg));transform-style:preserve-3d;will-change:transform}
.vignette:nth-child(6n+1){--a:-2deg}
.vignette:nth-child(6n+2){--a:1.6deg}
.vignette:nth-child(6n+3){--a:-1.1deg}
.vignette:nth-child(6n+4){--a:2.1deg}
.vignette:nth-child(6n+5){--a:-1.7deg}
.vignette:nth-child(6n+6){--a:1.3deg}
.vignette a{
  display:block;padding:6px 6px 0;border:var(--filet);border-radius:16px;
  background:var(--fond);box-shadow:var(--ombre);
  text-decoration:none;color:inherit;
}
.vignette img{display:block;width:100%;height:auto;border-radius:11px}
.vignette-nom{
  display:block;text-align:center;padding:6px 4px 8px;
  font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  line-height:1.2;
}
/* l'autocollant actif — posé par le JS. Sans JS, pas de marque : le panneau
   dit lui-même où on est, son client y est écrit en toutes lettres. */
.vignette.est-actif a{background:var(--lime)}

/* LE GESTE 1 — LE DÉCOLLEMENT, hérité des grandes cartes et déjà dosé à 20 %
   le 24/08 (voir NOTES) : il suit maintenant les vignettes de la planche.
   L'ombre vit sur le lien (c'est lui qui porte le blanc), la bascule sur la
   vignette — les deux transitions vont ensemble. */
@media (hover:hover){
  .js .vignette.pose.souleve{
    transform:rotate(var(--a,0deg)) rotate3d(var(--rx,1),var(--ry,0),0,var(--amp,0deg)) translateZ(4px);
    transition:transform .18s linear;
  }
  .js .vignette.pose.souleve a{
    box-shadow:calc(var(--ry,0) * -2.8px) calc(var(--rx,0) * 2.8px + 6.4px) 0 var(--encre);
    transition:box-shadow .18s linear;
  }
  .js .vignette.pose.repose{transition:transform .5s cubic-bezier(.34,1.4,.5,1)}
  .js .vignette.pose.repose a{transition:box-shadow .5s cubic-bezier(.34,1.4,.5,1)}
}

.panneaux{list-style:none;margin:clamp(22px,3vw,34px) 0 0;padding:0}
.panneau{
  display:none;
  background:var(--fond);border:var(--filet);border-radius:26px;box-shadow:var(--ombre);
  /* l'ancre laisse la dernière rangée de la planche visible au-dessus du
     panneau : on garde sous les yeux le choix qu'on vient de faire. */
  scroll-margin-top:clamp(110px,24vh,260px);
}
.panneau:target{display:block}
.panneaux:not(:has(:target)) .panneau:first-child{display:block}

.panneau-txt{padding:clamp(18px,2.6vw,30px) clamp(18px,2.6vw,30px) 0}
.panneau .meta{display:flex;align-items:center;gap:11px;margin:0 0 12px;flex-wrap:wrap}
.panneau h3{font-family:var(--titre);font-weight:400;margin:0;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.04;letter-spacing:.012em;text-transform:uppercase}
.panneau .client{margin:2px 0 0;font-size:.85rem;font-weight:700;color:var(--muted)}
/* Une couleur de pilule par projet — le nth-child compte, la boucle du
   gabarit sort dix fois le même HTML. */
.panneau:nth-child(4n+1) .meta .pilule{background:var(--rouge)}
.panneau:nth-child(4n+2) .meta .pilule{background:var(--bleu)}
.panneau:nth-child(4n+3) .meta .pilule{background:var(--lime)}
.panneau:nth-child(4n+4) .meta .pilule{background:var(--rose)}

/* La bande de visuels : hauteur commune, largeurs naturelles — une étagère de
   tirages, pas une grille. Elle défile horizontalement dans le panneau ;
   l'image coupée au bord dit d'elle-même qu'il y en a d'autres.
   ⚠ width:auto est OBLIGATOIRE : l'attribut width de chaque <img> (posé pour
   le ratio) vaudrait sinon comme largeur, et la hauteur imposée déformerait. */
.panneau-visuels{
  list-style:none;display:flex;gap:clamp(10px,1.6vw,18px);
  margin:clamp(16px,2.2vw,24px) 0 0;
  padding:0 clamp(18px,2.6vw,30px) clamp(18px,2.6vw,30px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:thin;
}
.panneau-visuels li{flex:0 0 auto;scroll-snap-align:start}
.panneau-visuels img{
  display:block;height:clamp(300px,38vw,470px);width:auto;
  border:var(--filet);border-radius:14px;
}

/* ── Le studio ───────────────────────────────────────────────────────────── */
.studio-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(22px,3.6vw,50px);align-items:start}
.studio-txt .lead{font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.5;font-weight:600;margin:0 0 16px}
.studio-txt p{max-width:56ch}
.outils{margin:24px 0 0;padding:16px 22px;border:var(--filet);border-radius:22px;background:var(--bleu);box-shadow:var(--ombre);font-size:.9rem;font-weight:600}
.outils b{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
/* SA DEVISE — « Parce qu'il n'y a pas de mauvais projets. », ses mots.
   En Bebas, comme son logotype, et en --accent-fonce qui est la seule de ses
   couleurs lisible en texte (5,0:1). Nettement sous le h2 de section, pour
   qu'elle ne lui dispute pas la place. */
.devise{
  font-family:var(--titre);font-weight:400;color:var(--accent-fonce);
  font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.06;letter-spacing:.014em;
  text-transform:uppercase;margin:26px 0 0;max-width:20ch;
}

.studio-col{display:flex;flex-direction:column;align-items:center}
/* Sa vraie photo (25/08). Autocollant rectangulaire, pas un disque : le rond
   était imposé par le bouche-trou, dont le fichier était un disque sur un fond
   sale. Et plus de filtre gris — il n'existait que pour que la photo du héros,
   réemployée ici, ne se lise pas comme un doublon.
   ⚠ Cadrage CARRÉ, et largeur plafonnée à 340 px. Deux réglages essayés et
   rejetés le 25/08 : en 4/5 sur toute la colonne (536 px), la photo devenait
   plus haute que la colonne de texte entière et poussait le post-it hors de
   l'écran ; et le 4/5 ne garde que 1093 px de large sur 2048, soit un très gros
   plan qui perd le parc et la lumière — tout ce qui fait la photo. Le carré en
   garde 1366 et laisse respirer autour du visage.
   Le recadrage ne porte que sur la LARGEUR : toute la hauteur est conservée. */
.studio-visu{margin:0;padding:0;overflow:hidden;width:min(100%,340px);--a:2deg}
.studio-visu img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center;border-radius:23px}

/* LE POST-IT. Collé en travers du bas de la photo, débordant des deux côtés :
   c'est le geste de sa planche — un objet posé sur un autre, jamais aligné.
   Il remplace la timeline datée, retirée le 24/08. */
.post-it{
  position:relative;z-index:2;align-self:stretch;margin-top:-46px;
  padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,30px);
  background:var(--lime);--a:-2.2deg;
}
.post-it h3{
  font-family:var(--titre);font-weight:400;margin:0 0 14px;
  font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.05;letter-spacing:.014em;
  text-transform:uppercase;
}
.post-it .gr{
  margin:16px 0 6px;font-size:.66rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;
}
.post-it h3 + .gr{margin-top:0}
.post-it ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.post-it li{position:relative;padding-left:15px;font-size:.92rem;font-weight:600;line-height:1.42}
.post-it li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:6px;height:6px;border-radius:50%;background:var(--encre);
}

/* ── Prestations ─────────────────────────────────────────────────────────── */
/* Chaque ligne s'ouvre au clic, en <details>/<summary> NATIF : ça marche sans
   JavaScript, au clavier, et un lecteur d'écran annonce « développé / réduit »
   tout seul. Aucun état à câbler, aucun aria à tenir à jour.
   ⚠ Le prix reste VISIBLE ligne fermée : c'est ce qu'on vient chercher, il ne
   se mérite pas au clic. Seul le détail se replie. */
.tarifs{list-style:none;margin:0;padding:0;display:grid;gap:14px}
/* ⚠ L'enfant DIRECT, pas le descendant : `.tarifs li` attrapait aussi les <li>
   des livrables, qui prenaient la couleur de leur propre rang dans leur propre
   liste — une pilule « Motifs » rouge sur une ligne rouge, illisible. */
.tarifs > li{padding:0;overflow:hidden}
/* cycle de 4 couleurs : la liste peut s'allonger sans qu'une ligne sorte nue */
.tarifs > li:nth-child(4n+1){--a:-.5deg;background:var(--fond)}
.tarifs > li:nth-child(4n+2){--a:.4deg;background:var(--rouge)}
.tarifs > li:nth-child(4n+3){--a:-.35deg;background:var(--bleu)}
.tarifs > li:nth-child(4n+4){--a:.55deg;background:var(--lime)}

.tarifs summary{
  display:flex;align-items:center;gap:clamp(12px,1.8vw,20px);flex-wrap:wrap;
  padding:clamp(18px,2.4vw,26px) clamp(20px,2.6vw,30px);
  cursor:pointer;list-style:none;
}
.tarifs summary::-webkit-details-marker{display:none}   /* la flèche par défaut */
.tarifs summary::marker{content:""}
.tarifs .nm{font-family:var(--titre);font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.02;letter-spacing:.014em;text-transform:uppercase;flex:1;min-width:180px}
.tarifs .pr{
  font-family:var(--titre);font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1;letter-spacing:.014em;
  white-space:nowrap;background:var(--fond);border:var(--filet);border-radius:999px;
  padding:7px 20px 8px;box-shadow:0 3px 0 var(--encre);
}

/* LA COMMANDE D'OUVERTURE. Un « + » seul, posé à droite après le prix, se
   ratait : on lit le titre à gauche, le prix à droite, et le petit rond entre
   les deux passe pour une décoration. Trois corrections, dans cet ordre
   d'efficacité :
     1. UN MOT. « Voir le détail » / « Réduire ». Une icône seule se rate, un
        libellé jamais. Les deux états sont dans le HTML, le CSS en cache un —
        jamais de texte écrit dans une feuille de style.
     2. LA FORME D'UN BOUTON. Même pilule à filet noir et ombre pleine que le
        prix : sur les quatre couleurs de ligne, un aplat blanc cerclé de noir
        se lit toujours comme une commande.
     3. LE GESTE MAISON. Elle s'ENFONCE au survol, comme .btn — sur ce site
        c'est ce geste-là qui dit « objet sur lequel on appuie ». */
.tarifs .ouvrir{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  border:var(--filet);border-radius:999px;background:var(--fond);
  box-shadow:0 3px 0 var(--encre);padding:7px 16px 8px 12px;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .2s,box-shadow .2s;
}
.tarifs summary:hover .ouvrir{transform:translateY(3px);box-shadow:0 0 0 var(--encre)}
.tarifs .lbl-moins{display:none}
.tarifs details[open] .lbl-plus{display:none}
.tarifs details[open] .lbl-moins{display:inline}

/* Le « + » qui devient « × ». Deux filets et une rotation : pas d'icône, pas de
   police, rien à charger. */
.tarifs .plus{
  position:relative;flex:none;width:15px;height:15px;
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.tarifs .plus::before,.tarifs .plus::after{
  content:"";position:absolute;inset:50% 0;border-top:2.6px solid var(--encre);
}
.tarifs .plus::after{transform:rotate(90deg)}
.tarifs details[open] .plus{transform:rotate(135deg)}

.tarifs .deroule{
  padding:0 clamp(20px,2.6vw,30px) clamp(22px,2.8vw,30px);
  animation:ouvre .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes ouvre{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.tarifs .q{margin:0 0 7px;font-size:clamp(1rem,1.5vw,1.12rem);font-weight:800;line-height:1.35}
.tarifs .d{margin:0;max-width:62ch;font-size:.95rem;font-weight:500;line-height:1.55}
/* Les prestations sans question ni livrables sortent un bloc vide : il ne doit
   pas occuper de place. ⚠ :empty ne tolère AUCUN blanc — c'est pour ça que la
   boucle des livrables tient sur une seule ligne dans le gabarit. */
.tarifs .q:empty{display:none}
.modifs-incluses{margin:14px 0 0;font-size:.9rem;font-weight:700}
.modifs-incluses:empty{display:none}
.livrables{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.livrables:empty{display:none}
.livrables li{
  border:1.8px solid var(--encre);border-radius:999px;background:var(--fond);
  padding:5px 14px 6px;font-size:.78rem;font-weight:700;letter-spacing:.01em;
}
/* toujours blanches : c'est le seul aplat lisible sur les quatre couleurs de
   ligne, et ça garde la couleur comme signal de la LIGNE, pas du livrable. */
.note{margin:22px 0 0;font-size:.92rem;color:var(--muted);max-width:64ch}

.bandeau{
  margin-top:clamp(34px,4.6vw,58px);padding:clamp(24px,3.2vw,40px);
  background:var(--rouge);--a:-.45deg;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.bandeau h3{font-family:var(--titre);font-weight:400;margin:0 0 4px;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.03;letter-spacing:.012em;text-transform:uppercase}
.bandeau p{margin:0;max-width:50ch;font-weight:500}

/* ── Contact ─────────────────────────────────────────────────────────────── */
.contact-grille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,3.6vw,50px);align-items:start}
.coords .lead{font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.5;font-weight:600;margin:0 0 22px;max-width:42ch}
.coords-carte{padding:clamp(20px,2.8vw,30px);background:var(--bleu);--a:-1.2deg}
.coords-carte div{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:9px 0;border-bottom:1.4px solid rgba(16,16,16,.2)}
.coords-carte div:last-child{border-bottom:0}
.coords-carte dt{font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding-top:3px}
.coords-carte dd{margin:0;font-size:.92rem;font-weight:600;overflow-wrap:anywhere}
.coords-carte a{text-decoration:none;border-bottom:2px solid var(--encre)}
.refs{margin:22px 0 0;font-size:.9rem;color:var(--muted)}
.refs b{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre);margin-bottom:5px}

#contact form{padding:clamp(22px,3vw,34px);background:var(--fond);--a:.9deg}
#contact form > div{margin-bottom:16px}
#contact label{display:block;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
#contact input,#contact textarea{
  width:100%;padding:13px 17px;border:var(--filet);border-radius:16px;
  background:var(--fond);color:var(--encre);font-family:var(--corps);font-size:1rem;line-height:1.5;
  transition:background .18s;
}
#contact textarea{resize:vertical;min-height:130px}
#contact input:focus,#contact textarea:focus{background:var(--lime);outline:none}
#contact form .btn{width:100%;margin-top:4px}
.hidden-field{position:absolute;left:-9999px}

/* ── Pied ────────────────────────────────────────────────────────────────── */
/* ── Le pied noir ────────────────────────────────────────────────────────── */
/* Choisi par Florence sur la capture du 20/08 : fond encre, nom en rose pâle,
   smiley lime. Il ferme la page sur un aplat plein, après une suite
   d'autocollants clairs — c'est le seul plan sombre du site, et ça suffit. */
footer{
  background:var(--encre);color:var(--rose);border-top:var(--filet);
  padding:clamp(38px,5vw,64px) 0 clamp(28px,3.6vw,44px);
}
.pied-haut{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.brand-pied{font-family:var(--titre);font-weight:400;margin:0;font-size:clamp(2.4rem,8.6vw,5.8rem);line-height:.92;letter-spacing:.025em;text-transform:uppercase}
.smiley{width:clamp(40px,6vw,70px);height:clamp(40px,6vw,70px);flex:none;color:var(--lime)}
.fine{margin:0 0 6px;font-size:.8rem;opacity:.72}
.fine a{color:inherit}

/* ── Les autocollants se posent ──────────────────────────────────────────── */
/* Uniquement si le JS a tourné : sans lui rien n'est jamais caché ni tourné. */
.js .pose{opacity:0;transform:rotate(calc(var(--a,0deg) * 3.2)) translateY(26px) scale(.97)}
.js .pose.vu{opacity:1;transform:rotate(var(--a,0deg));transition:opacity .5s cubic-bezier(.2,.8,.3,1),transform .62s cubic-bezier(.28,1.3,.42,1)}

@media (max-width:940px){
  .hero-grille,.studio-grille,.contact-grille{grid-template-columns:1fr}
  /* rangées explicites depuis le bandeau du 28/08 : la bande doit couvrir
     titre + portrait, il lui faut des rangées nommables. L'ordre visuel reste
     celui du HTML. */
  .hero-titre{grid-column:1;grid-row:1}
  .hero-portrait{grid-column:1;grid-row:2}
  .hero-txt{grid-column:1;grid-row:3}
  .hero-fiche{grid-column:1;grid-row:4}
  .hero-bande{grid-row:1/3}
  .hero-bande::before{bottom:-12px}
  .hero-portrait{width:min(74%,320px);justify-self:start}
  .studio-col{align-items:flex-start}
  .studio-visu{width:min(68%,300px)}
  .post-it{align-self:stretch;margin-top:-38px}
  .hero-titre h1{font-size:clamp(3.2rem,17cqw,7rem)}
  .parcours li{grid-template-columns:74px 1fr}
  .parcours .annee{font-size:1.5rem}
}
/* Sous 1100 px la colonne de texte touche les bords : les cinq smileys sont
   alors DERRIÈRE le texte en permanence, plus seulement de temps en temps. Ils
   restent tous les cinq — c'est la consigne — mais nettement plus pâles, et
   deux d'entre eux repartent vers les bords pour dégager le milieu. */
@media (max-width:1100px){
  .fond{--fond-force:.28}
  .c1 {left:-4%}
  .c4 {right:-6%}
}

@media (max-width:680px){
  body{font-size:16px}
  .js .sec-tete h2,.js .sec-tete .etoile{transform:scale(1.18) rotate(-3deg)}
  .nav-links a:not(.nav-cta){display:none}
  .hero-fiche div,.coords-carte div{grid-template-columns:84px 1fr;gap:10px}
  /* le nom prend toute la largeur, prix et commande se rangent dessous */
  .tarifs summary{flex-wrap:wrap;gap:12px}
  .tarifs .nm{flex:1 0 100%}
  .pile li{font-size:1.2rem;width:100% !important;margin-left:0 !important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js .pose{opacity:1;transform:rotate(var(--a,0deg))}
  .bande-piste{animation:none}
  .js .sec-tete h2,.js .sec-tete .etoile{transform:none;opacity:1}
  .js .vignette.pose.souleve{transform:rotate(var(--a,0deg))}
  .js .vignette.pose.souleve a{box-shadow:var(--ombre)}
}