/* Empreinte — feuille de style unique (version commerciale, écrite pour ce projet).
   Organisation : jetons → fondations → typographie → liens et boutons → gabarit (barre, pied)
   → sections (ouverture, sélection, caractères, en-tête, collection, études, étude de cas, à propos, contact)
   → outils typographiques (testeur, graisses, glyphes) → accessibilité.
   Points de rupture : 834 px (tablette) et 1194 px (bureau). */

@font-face{font-family:"Bricolage";src:url(../fonts/BricolageGrotesque-VF.ttf) format("truetype");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Martian";src:url(../fonts/MartianMono-VF.ttf) format("truetype");font-weight:100 800;font-stretch:75% 112.5%;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../fonts/Fraunces-VF.ttf) format("truetype");font-weight:100 900;font-display:swap}

/* ---------- Jetons ---------- */
:root{
  --encre:#0b0a09;
  --encre-2:#161513;      /* surfaces : barre, fonds d'image */
  --encre-3:#1f1e1b;      /* survol du menu */
  --gris-carte:#2e2b29;   /* cartes des outils typographiques */
  --gris-trait:#2c2a26;   /* filets de chapitre */
  --gris-moyen:#5d5952;
  --gris-survol:#3a3633;  /* survol des graisses */
  --gris:#9b968c;
  --papier:#f4f1ea;
  --vermillon:#ff5a2a;
  --filet:color-mix(in srgb,var(--papier) 10%,transparent);

  --sans:"Bricolage","Helvetica Neue",Arial,sans-serif;
  --mono:"Martian",ui-monospace,monospace;

  --marge:16px;                         /* gouttière de page */
  --col:8px;                            /* gouttière de grille */
  --gout:clamp(16px,1.8vw,30px);        /* écart des grilles de cartes */
  --pad:clamp(16px,1.8vw,30px);         /* intérieur des cartes */
  --rayon:6px;
  --rayon-s:4px;
  --cote:20rem;                         /* largeur de la barre et de la colonne latérale */

  --sortie:cubic-bezier(.2,.75,.25,1);  /* courbe maison : départ vif, arrivée longue */
  --entree:cubic-bezier(.7,0,.9,1);
  --douce:cubic-bezier(.6,0,.35,1);
}

/* ---------- Fondations ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{background:var(--encre);color-scheme:dark;-webkit-text-size-adjust:100%;height:100%}
body{background:var(--encre);color:var(--papier);font-family:var(--sans);font-size:12px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100%}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none}
button{cursor:pointer}
ol,ul{list-style:none}
h1,h2,h3,h4,p,dl,dd{font:inherit}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gris{color:var(--gris)}
.couvre{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--encre-2)}

/* ---------- Typographie ---------- */
.t-titre,.t-titre-xl,.t-sous,.t-grand{font-family:var(--sans);font-weight:300;font-stretch:75%;font-variation-settings:"opsz" 48}
.t-titre{font-size:26px;line-height:1.2}
.t-titre-xl{font-size:36px;line-height:1}
.t-sous{font-size:23px;line-height:1.2}
.t-grand{font-size:26px;line-height:1.2}
.t-corps{font-size:15px;line-height:1.25;font-weight:350}
.t-petit{font-size:13px;line-height:1.25;font-weight:350}
.t-mono,.t-micro{font-family:var(--mono);font-stretch:87.5%;text-transform:uppercase;letter-spacing:.02em;line-height:1;position:relative;top:1px}
.t-mono{font-size:11px}
.t-micro{font-size:9px}
@media (min-width:834px){
  .t-titre{font-size:38px;line-height:1.1;letter-spacing:-.01em}
  .t-titre-xl{font-size:48px;letter-spacing:-.01em}
  .t-sous{font-size:24px}
  .t-grand{font-size:32px;line-height:1.15}
  .t-corps{font-size:16px}
  .t-petit{font-size:14px}
}
.pastille{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--p1);box-shadow:10px 0 0 var(--p2),20px 0 0 var(--p3);margin-right:24px;vertical-align:middle}

/* Identités de projet */
[data-projet=le-sechoir]{--p1:#D9922E;--p2:#1E3A2C;--p3:#F1E8D6}
[data-projet=marges]{--p1:#E1341E;--p2:#111111;--p3:#F4F1EA}
[data-projet=prends-l-air]{--p1:#FFD93B;--p2:#14254A;--p3:#7CC3F2}

/* ---------- Liens et boutons ---------- */
/* Filet qui entre par la gauche au survol et sort par la droite */
.souligne{position:relative;display:inline-block}
.souligne::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.7;transform:scaleX(0);transform-origin:right;transition:transform .24s var(--douce)}
.souligne:hover::after,.souligne:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* Lien entre crochets : les crochets s'écartent */
.crochets{display:inline-flex;gap:.55em;white-space:nowrap}
.crochets>span:first-child,.crochets>span:last-child{display:inline-block;transition:transform .3s var(--sortie)}
.crochets:hover>span:first-child,.crochets:focus-visible>span:first-child{transform:translateX(-4px)}
.crochets:hover>span:last-child,.crochets:focus-visible>span:last-child{transform:translateX(4px)}

.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 22px;border:1px solid currentColor;border-radius:var(--rayon);font-family:var(--mono);font-stretch:87.5%;font-size:11px;line-height:1.2;text-transform:uppercase;letter-spacing:.02em;transition:background-color .2s,color .2s,border-color .2s}
.bouton--petit{padding:7px 14px}
.bouton--grand{padding:12px 26px;font-size:12px}
.bouton--large{width:100%}
.bouton--plein{background:var(--papier);color:var(--encre);border-color:var(--papier)}
.bouton--plein:hover{background:transparent;color:var(--papier)}
.bouton--encre{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.bouton--encre:hover{background:transparent;color:var(--encre)}
.bouton--contour:hover,.bouton--contour[aria-pressed=true]{background:var(--papier);color:var(--encre);border-color:var(--papier)}
.bouton--accent{background:var(--vermillon);border-color:var(--vermillon);color:var(--encre)}
.bouton--accent:hover{background:transparent;color:var(--vermillon)}
.etiquette{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--vermillon);color:var(--papier);font-family:var(--mono);font-stretch:87.5%;font-size:9px;line-height:1.15;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}

/* ---------- Barre d'en-tête ---------- */
.evitement{position:absolute;left:-999px;top:8px;z-index:300;background:var(--papier);color:var(--encre);padding:8px 12px}
.evitement:focus{left:16px}
.barre{position:fixed;top:var(--marge);left:var(--marge);right:var(--marge);z-index:40}
.barre__corps{position:relative;background:var(--encre-2);border-radius:var(--rayon-s)}
.barre__ligne{display:flex;align-items:center;height:44px;padding:0 8px 0 12px}
.barre__logo{font-weight:800;font-stretch:75%;font-size:17px;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.barre__page{min-width:0;padding-left:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barre__heure{display:none;margin-left:auto;padding:0 12px;color:var(--gris);white-space:nowrap}
/* Bouton du menu : libellé lisible et pastille vermillon, pour qu'on comprenne qu'il s'ouvre */
.barre__bouton{margin-left:auto;display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:var(--encre-3);border:1px solid color-mix(in srgb,var(--papier) 14%,transparent);flex-shrink:0;transition:background-color .2s,border-color .2s}
.barre__bouton:hover,.barre.ouvert .barre__bouton{background:var(--gris-trait);border-color:color-mix(in srgb,var(--papier) 30%,transparent)}
.barre__libelle{top:0}
.barre__point{width:6px;height:6px;border-radius:50%;background:var(--vermillon);transition:transform .25s var(--sortie)}
.barre.ouvert .barre__point{transform:scale(.6)}
@media (min-width:834px){
  .barre{right:auto}
  .barre__corps{width:var(--cote)}
  .barre__ligne{height:48px}
  .barre__heure{display:block}
  .barre__bouton{margin-left:0}
}
/* Ouverture du menu : la rangée passe de 0 à sa hauteur, le contenu descend et apparaît */
.barre__menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .27s var(--douce) .05s}
.barre.ouvert .barre__menu{grid-template-rows:1fr;transition:grid-template-rows .24s var(--sortie)}
.barre__menu>div{overflow:hidden;min-height:0}
.barre__nav{display:flex;flex-direction:column;padding:8px 6px 10px;opacity:0;transform:translateY(-16px);transition:opacity .16s linear,transform .18s var(--entree)}
.barre.ouvert .barre__nav{opacity:1;transform:none;transition:opacity .2s linear .04s,transform .3s var(--sortie)}
/* Entrée du menu : le libellé monte, sa description arrive par-dessous */
.menu-lien{position:relative;display:block;padding:8px}
.menu-lien__fond{position:absolute;inset:2px 12px;border-radius:10px;background:var(--encre-3);opacity:0;transition:opacity .14s linear .07s}
.menu-lien__piste{position:relative;display:block;height:20px;overflow:hidden}
.menu-lien__a,.menu-lien__b{display:block;line-height:20px}
.menu-lien__a{transition:transform .32s var(--sortie) .07s}
.menu-lien__b{position:absolute;inset:0;transform:translateY(20px);color:var(--gris);transition:transform .1s var(--entree)}
.menu-lien:hover .menu-lien__fond,.menu-lien:focus-visible .menu-lien__fond{opacity:1;transition-delay:0s;transition-duration:.18s}
.menu-lien:hover .menu-lien__a,.menu-lien:focus-visible .menu-lien__a{transform:translateY(-20px);transition:transform .14s var(--entree)}
.menu-lien:hover .menu-lien__b,.menu-lien:focus-visible .menu-lien__b{transform:none;transition:transform .16s var(--sortie) .12s}
.menu-lien[aria-current] .menu-lien__a::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--vermillon);margin:0 8px 2px 0;vertical-align:middle}

/* ---------- Pied de page ---------- */
.pied{color:var(--gris-moyen);padding:64px var(--marge) var(--marge)}
.pied__grille{display:grid;grid-template-columns:1fr;column-gap:var(--col);border-top:1px solid var(--filet);padding-top:12px}
.pied__mention{padding-bottom:12px}
.pied__liens{display:flex;flex-wrap:wrap;align-items:center;gap:8px 36px}
@media (min-width:1194px){
  .pied{padding-top:96px}
  .pied__grille{grid-template-columns:repeat(16,1fr)}
  .pied__mention{grid-column:span 7}
  .pied__liens{grid-column:span 9}
}

/* ---------- Accueil : ouverture ---------- */
.ouverture{position:relative;padding:0 var(--marge);height:calc(100lvh + 100svh)}
.ouverture__scene{position:sticky;top:0;height:100lvh}
.ouverture__cadre{position:absolute;z-index:10;top:0;left:calc(var(--marge) * -1);width:100vw;height:100svh;overflow:hidden;background:#000;pointer-events:none;clip-path:inset(var(--c-haut,0px) var(--c-cote,0px) var(--c-bas,0%) var(--c-cote,0px) round var(--c-rayon,0px))}
.ouverture__media{position:absolute;inset:0;opacity:0;transform:translateY(var(--m-y,0%));animation:apparition 1.4s linear forwards}
.ouverture__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 45%,rgb(0 0 0 / .6))}
.diapo{opacity:0;animation:diaporama 18s infinite;animation-delay:calc(var(--i) * 6s)}
@keyframes diaporama{0%{opacity:0}4%{opacity:1}33%{opacity:1}37%{opacity:0}100%{opacity:0}}
@keyframes apparition{to{opacity:1}}
.ouverture__titres{position:absolute;z-index:11;left:var(--marge);right:var(--marge);bottom:92px;mix-blend-mode:exclusion;opacity:0;animation:apparition .9s linear .45s forwards;pointer-events:none}
.ouverture__titres>*{opacity:var(--t-op,1)}
.ouverture__contenu{position:relative;display:flex;flex-direction:column;height:100lvh;padding:8px 0 40px}
.ouverture__repere{aspect-ratio:377/250;margin:0 -8px}
.ouverture__bloc{display:flex;flex-direction:column;gap:32px;padding-top:56px}
.ouverture__intro{transform:translateY(calc(var(--i-y,1) * 75svh))}
.ouverture__liens{display:flex;flex-wrap:wrap;gap:12px 24px}
@media (min-width:1194px){
  .ouverture__titres{bottom:24px;display:grid;grid-template-columns:repeat(16,1fr);column-gap:var(--col)}
  .ouverture__titres>div{grid-column:span 8;padding-left:12px}
  .ouverture__contenu{padding-bottom:0}
  .ouverture__repere{aspect-ratio:1496/216}
  .ouverture__bloc{width:calc((100% + var(--col)) * 9 / 16 - var(--col));gap:80px;padding-top:40px}
  .ouverture__intro,.ouverture__liens{padding-left:12px}
}
/* Lignes masquées (découpage maison) */
.masque{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.masque>span{display:block;transform:translateY(calc(var(--l-y,1) * 100%))}

/* ---------- Accueil : sélection de projets ---------- */
.selection{padding:0 var(--marge) 64px}
.selection__grille{display:grid;grid-template-columns:1fr;column-gap:var(--col)}
.selection__colonne{padding-bottom:32px}
.selection__collant{display:flex;flex-direction:column;gap:12px}
.selection__defile,.selection__bas{display:none}
.pile{display:grid}
.pile>*{grid-area:1/1}
.selection__defile{position:relative;overflow:hidden}
.selection__defile>*{grid-area:1/1}
.selection__defile>*{transition:transform .14s var(--entree)}
.selection__defile>[data-etat=avant]{transform:translateY(-100%)}
.selection__defile>[data-etat=apres]{transform:translateY(100%)}
.selection__defile>[data-etat=actif]{transform:none;transition:transform .36s var(--sortie)}
.selection__fondu>*{opacity:0;transition:opacity .16s linear}
.selection__fondu>[data-etat=actif]{opacity:1;transition-delay:.32s}
.selection__desc{display:grid;grid-template-columns:repeat(6,1fr);column-gap:var(--col)}
.selection__desc>.pile{grid-column:span 4}
.selection__vignette{display:flex;align-items:center;gap:16px}
.selection__vignette>div:first-child{position:relative;width:40px;height:40px;overflow:hidden;border-radius:2px;flex-shrink:0}
.selection__vignette>div:last-child{display:flex;flex-direction:column;gap:6px;padding:2px 0 4px}
.selection__medias{display:flex;flex-direction:column;gap:24px}
.selection__item{transition:opacity .18s linear}
.selection__item a{display:flex;flex-direction:column;gap:12px}
.selection__image{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--rayon-s)}
.selection__legende{padding:2px 20px 4px 0}
.selection__tous{display:none}
@media (min-width:834px){
  .selection__image{aspect-ratio:16/9;border-radius:var(--rayon)}
}
@media (min-width:1194px){
  .selection{padding-bottom:160px}
  .selection__grille{grid-template-columns:repeat(16,1fr)}
  .selection__colonne{grid-column:span 6;padding-bottom:0}
  .selection__collant{position:sticky;top:0;height:100svh;padding:30svh 0 24px 12px}
  .selection__defile{display:grid}
  .selection__bas{display:flex;flex-direction:column;gap:48px;margin-top:auto}
  .js .selection [data-fondu]{opacity:var(--fondu,0)}
  .selection__medias{grid-column:span 10;gap:12px}
  .selection__item{opacity:.2}
  .selection__item[data-actif]{opacity:1}
  .selection__legende{display:none}
  .selection__tous{display:flex;align-items:flex-end;justify-content:flex-end;aspect-ratio:922/168;padding:36px;border-radius:var(--rayon);background:color-mix(in srgb,var(--papier) 8%,transparent);transition:background-color .25s}
  .selection__tous:hover{background:color-mix(in srgb,var(--papier) 13%,transparent)}
}

/* ---------- Bandeau de section (grille 2 puis 4 colonnes) ---------- */
.bandeau{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gout);align-items:baseline;margin-bottom:30px}
.bandeau--filet{border-top:1px solid var(--filet);padding-top:24px}
.bandeau__titre{font-family:var(--mono);font-stretch:87.5%;font-size:11px;font-weight:500;line-height:1.3;text-transform:uppercase;letter-spacing:.02em}
.bandeau__info{font-family:var(--mono);font-stretch:87.5%;font-size:11px;line-height:1.5;text-transform:uppercase;letter-spacing:.02em;color:var(--gris)}
.bandeau__droite{justify-self:end;text-align:right}
@media (min-width:834px){.bandeau{grid-template-columns:repeat(4,1fr)}}

/* ---------- Apparition au défilement ---------- */
.js .apparait{opacity:0;transform:translateY(28px);transition:opacity .7s var(--sortie),transform .7s var(--sortie);transition-delay:calc(var(--rang,0) * 90ms)}
.js .apparait.vu{opacity:1;transform:none}

/* ---------- Spécimens (cartes de caractères) ---------- */
.caracteres{padding:0 var(--marge) 64px}
.specimens{display:grid;grid-template-columns:1fr;gap:var(--gout)}
@media (min-width:600px){.specimens{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1194px){.specimens{grid-template-columns:repeat(4,1fr)}.caracteres{padding-bottom:148px}}
.specimen{position:relative;height:100%}
.specimen__lien{display:flex;flex-direction:column;aspect-ratio:8/11;height:100%;padding:var(--pad);border-radius:var(--rayon);background:var(--p2);color:var(--p3);transition:background-color .5s var(--sortie),color .5s var(--sortie)}
.specimen__tete{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.specimen__titre{font-size:clamp(16px,1.25vw,20px);font-weight:500;line-height:1.3}
.specimen__desc{font-size:12px;line-height:1.5;opacity:.85}
.specimen__zone{position:relative;flex:1;display:grid;align-items:end;font-family:var(--f);font-weight:var(--w);font-variation-settings:var(--axes)}
.specimen__zone>*{grid-area:1/1}
.specimen__aa{font-size:clamp(84px,8.2vw,140px);line-height:1;color:var(--p1);transition:opacity .45s var(--sortie)}
.specimen__survol{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;padding-top:16px}
.specimen__pangramme{font-size:clamp(24px,2.35vw,40px);line-height:1.1;opacity:0;transform:translateY(10px);transition:opacity .45s var(--sortie),transform .45s var(--sortie)}
.specimen__survol .bouton{opacity:0;transform:translateY(10px);transition:opacity .45s var(--sortie) .04s,transform .45s var(--sortie) .04s,background-color .2s,color .2s}
.specimen__lien:hover .specimen__aa,.specimen__lien:focus-visible .specimen__aa{opacity:0}
.specimen__lien:hover .specimen__pangramme,.specimen__lien:focus-visible .specimen__pangramme,
.specimen__lien:hover .specimen__survol .bouton,.specimen__lien:focus-visible .specimen__survol .bouton{opacity:1;transform:none}
.specimen>.etiquette{position:absolute;top:-9px;right:16px}
.carte-dispo{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:8/11;height:100%;padding:var(--pad);border-radius:var(--rayon);background:var(--papier);color:var(--encre)}
.carte-dispo__texte{font-size:clamp(14px,1.1vw,18px);line-height:1.3;margin-top:24px}
.carte-dispo .bouton{margin-top:24px}
@media (max-width:599px){.specimen__lien,.carte-dispo{aspect-ratio:auto;min-height:420px}}

/* ---------- En-tête de page (Projets, À propos) ---------- */
.en-tete{padding:96px var(--marge) 0}
.en-tete__cadre{display:flex;flex-direction:column;gap:24px}
.en-tete__gauche{min-width:0}
.en-tete__titre{font-weight:300;font-stretch:75%;letter-spacing:-.02em;line-height:1;white-space:nowrap;font-size:calc(clamp(48px,5.56vw,96px) * var(--ajuste,1));margin-bottom:22px}
.en-tete__desc,.en-tete__note{font-size:clamp(14px,1.1vw,18px);line-height:1.5}
.en-tete__desc{max-width:27em}
.en-tete__droite{display:flex;flex-direction:column;gap:24px}
.en-tete__boutons{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:1194px){
  .en-tete{padding-top:112px}
  .en-tete__cadre{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:52px}
  .en-tete__gauche{flex:0 1 55%}
  .en-tete__droite{margin-top:12px;flex:0 0 auto}
}

/* ---------- Projets : galerie à onglets et filtres ---------- */
.collection{padding:32px var(--marge) 0}
.onglets{display:flex;gap:12px}
.onglets [role=tab]{font-family:var(--mono);font-stretch:87.5%;font-size:11px;text-transform:uppercase;letter-spacing:.02em;color:var(--gris);transition:color .2s}
.onglets [role=tab][aria-selected=true]{color:var(--vermillon)}
.onglets [role=tab]:hover{color:var(--papier)}
.filtres{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.filtres .bouton{border-color:color-mix(in srgb,var(--papier) 35%,transparent)}
.liste-specimens{display:flex;flex-direction:column;gap:var(--gout)}
.specimen-large{display:block;padding:var(--pad);border-radius:var(--rayon);background:var(--gris-carte);transition:background-color .5s var(--sortie),color .5s var(--sortie)}
.specimen-large:hover,.specimen-large:focus-visible{background:var(--p2);color:var(--p3)}
.specimen-large__tete{display:grid;grid-template-columns:repeat(2,1fr);gap:12px var(--gout);margin-bottom:56px;font-size:12px;line-height:1.5}
.specimen-large__titre{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;font-size:clamp(14px,1.1vw,18px);font-weight:500;line-height:1.3}
.specimen-large__tete .gris{transition:color .5s}
.specimen-large:hover .specimen-large__tete .gris{color:inherit}
.specimen-large__action{justify-self:end}
.specimen-large__zone{position:relative;display:grid;align-items:end;overflow:hidden;font-family:var(--f);font-weight:var(--w);font-variation-settings:var(--axes);color:var(--p1)}
.specimen-large__zone>*{grid-area:1/1;white-space:nowrap;transition:opacity .45s var(--sortie),transform .45s var(--sortie)}
.specimen-large__aa{font-size:clamp(84px,12vw,200px);line-height:1}
.specimen-large__pangramme{font-size:clamp(32px,4vw,68px);line-height:1;opacity:0;transform:translateY(12px)}
.specimen-large:hover .specimen-large__aa{opacity:0}
.specimen-large:hover .specimen-large__pangramme{opacity:1;transform:none}
@media (min-width:834px){.specimen-large__tete{grid-template-columns:repeat(4,1fr)}}

/* ---------- Projets : études de cas en galerie ---------- */
.etudes{padding:24px var(--marge) 64px}
.etudes__tete{display:flex;flex-direction:column;padding-bottom:24px}
.etudes__grille{display:grid;grid-template-columns:1fr;row-gap:36px}
.etudes__paire{display:grid;grid-template-columns:1fr;gap:36px var(--col)}
.carte-etude{display:block}
.carte-etude__image{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--rayon);margin-bottom:12px}
.carte-etude__image img{transition:transform .8s var(--sortie)}
.carte-etude:hover .carte-etude__image img{transform:scale(1.025)}
.carte-etude__texte{display:flex;flex-direction:column;gap:12px;padding-right:12px}
.carte-etude__texte>div:first-child{display:flex;flex-direction:column;gap:6px}
.carte-etude__puces{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.puce{display:flex;align-items:center;padding:8px;border-radius:2px;background:color-mix(in srgb,var(--papier) 10%,transparent);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}
@media (min-width:1194px){
  .etudes{padding-top:96px}
  .etudes__tete{flex-direction:row;gap:8px;border-top:1px solid var(--filet);padding:24px 12px}
  .etudes__grille{grid-template-columns:7fr 9fr;column-gap:12px;padding:0 12px}
  .etudes__paire{grid-template-columns:1fr 1fr;column-gap:12px}
  .carte-etude--grande .carte-etude__texte{padding-right:48px}
}

/* ---------- Étude de cas ---------- */
.etude{display:flex;flex-direction:column;column-gap:16px;padding:0 var(--marge)}
.etude__cote{width:100%;flex-shrink:0;padding-top:80px}
.etude__cote>div{display:flex;flex-direction:column;gap:24px}
.etude__puces{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.etude__puces>p{padding-right:8px}
.fiche{display:flex;flex-direction:column;padding-right:8px}
.fiche>div,.ligne-info{display:grid;grid-template-columns:repeat(6,1fr);column-gap:var(--col);border-top:1px solid var(--filet);padding:8px 0}
.fiche dt,.ligne-info>:first-child{grid-column:span 2;color:var(--gris);padding-top:3px}
.fiche dd,.ligne-info>:last-child{grid-column:span 4}
.ligne-info{padding:12px 0}
.sommaire{display:none;flex-direction:column;padding:0 12px}
.sommaire ol{display:flex;flex-direction:column;gap:2px}
.sommaire a{color:var(--gris);transition:color .17s}
.sommaire a:hover,.sommaire a[aria-current]{color:var(--papier)}
.sommaire a[aria-current]::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--p1,var(--vermillon));margin:0 8px 2px -14px}
.etude__article{flex:1;min-width:0;padding-top:16px}
.etude__une{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--rayon)}
.etude__chapitres{padding-top:12px}
.chapitre{padding-top:4px;scroll-margin-top:72px}
.chapitre__tete,.suite{display:grid;grid-template-columns:1fr;row-gap:36px;border-top:1px solid var(--gris-trait);padding:24px 0 12px}
.chapitre__label{padding:0 8px}
.chapitre__texte{display:flex;flex-direction:column;gap:16px;padding:0 8px}
.chapitre__texte dl{display:flex;flex-direction:column;padding-top:8px}
.suite{margin-top:24px;padding-top:24px}
.suite a{display:block}
.suite a .gris{transition:color .2s}
.suite a:hover .gris{color:var(--papier)}
.media-bloc{padding-bottom:8px}
.media{position:relative}
.media__cadre{position:relative;overflow:hidden;border-radius:var(--rayon)}
.media figcaption,.legende{color:var(--gris);padding:8px 0}
.paire{display:flex;gap:8px;padding-bottom:8px}
.paire>.media{width:50%}
.planche svg{position:absolute;inset:0;width:100%;height:100%}
@media (min-width:1194px){
  .etude{flex-direction:row}
  .etude__cote{width:var(--cote);position:sticky;top:0;height:100svh;overflow-y:auto;padding-bottom:16px}
  .sommaire{display:flex}
  .chapitre__tete,.suite{grid-template-columns:1fr 1fr;column-gap:var(--col);row-gap:12px;padding:12px 0 36px}
  .chapitre__label{padding:8px 0 0 24px}
  .chapitre__texte{gap:24px;padding:8px 0 0}
  .suite{padding-top:24px}
}

/* Bannière illustrée à parallaxe */
.banniere__carte{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:17/7;padding:var(--pad);border-radius:var(--rayon);background:var(--papier);color:var(--encre);text-align:center}
.banniere__fond{position:absolute;inset:0;overflow:hidden}
.banniere__fond img{position:absolute;left:0;top:0;width:100%;height:135%;object-fit:cover;transform:translateY(calc(var(--prog,.5) * -25.9%));will-change:transform}
.banniere__carte>.etiquette{position:absolute;top:var(--pad);left:50%;transform:translateX(-50%)}
.banniere__texte{position:relative;max-width:720px;margin-top:30px}
.banniere__titre{font-size:clamp(28px,3vw,48px);line-height:1}
.banniere__phrase{font-size:clamp(16px,1.45vw,24px);line-height:1.5;margin-top:14px}
@media (max-width:833px){.banniere__carte{aspect-ratio:4/5}}

/* ---------- Outils typographiques ---------- */
.carte-outil{border-radius:var(--rayon);padding:var(--pad)}
/* Testeur de caractère variable */
.testeur__carte{display:flex;flex-direction:column;align-items:center;background:var(--papier);color:var(--encre)}
.testeur__texte{margin:clamp(48px,7vw,104px) 0;max-width:100%;font-size:clamp(44px,5.7vw,96px);line-height:1.1;text-align:center;overflow-wrap:anywhere}
.testeur__texte:focus{outline:none}
.testeur__reglages{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.axe{display:flex;align-items:center;gap:14px;padding:10px 20px;border-radius:999px;background:var(--encre);color:var(--papier);font-size:clamp(11px,.86vw,14px);line-height:1.5}
.axe label{font-weight:530;min-width:3.5em;line-height:1.2}
.axe output{min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums}
.axe input{-webkit-appearance:none;appearance:none;width:clamp(96px,9vw,140px);height:2px;background:color-mix(in srgb,var(--papier) 30%,transparent);border-radius:2px}
.axe input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--papier);cursor:grab}
.axe input::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--papier)}
.lecture{width:38px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--rayon);background:var(--encre);color:var(--papier);font-family:var(--mono);font-size:11px}
.lecture svg{width:12px;height:12px}
/* Graisses */
.graisses__tete{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--gout);margin:22px 0}
.graisses__nombre{font-size:clamp(17px,1.55vw,26px);font-weight:500;line-height:1.3}
.graisses__corps{display:grid;grid-template-columns:1fr;gap:var(--gout)}
.graisses__apercu{display:flex;align-items:center;justify-content:center;aspect-ratio:1.44;padding:var(--pad);border-radius:var(--rayon);background:var(--gris-carte);color:var(--papier)}
.graisses__apercu p{font-size:clamp(32px,3.05vw,52px);line-height:1;text-align:center;font-weight:var(--g,400);transition:font-weight .2s}
.graisses__liste{display:grid;gap:12px}
.graisses__item{display:flex;justify-content:space-between;align-items:center;padding:22px;border-radius:var(--rayon);background:var(--gris-carte);font-size:clamp(17px,1.55vw,26px);line-height:1.5;cursor:default;transition:background-color .2s}
.graisses__item:hover,.graisses__item:focus-visible,.graisses__item[aria-current]{background:var(--gris-survol)}
.graisses__item span:last-child{font-size:clamp(11px,.86vw,14px);font-weight:600;color:var(--vermillon)}
@media (min-width:834px){.graisses__corps{grid-template-columns:2fr 3fr}}
/* Inspecteur de glyphes */
.glyphes__grille{display:grid;grid-template-columns:1fr;gap:var(--gout)}
.glyphes__titre{margin-bottom:16px}
.glyphes__groupe{margin-bottom:24px}
.glyphes__groupe h4{font-family:var(--mono);font-stretch:87.5%;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.02em}
.glyphes__liste{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:15px;font-size:clamp(24px,2.55vw,40px)}
.glyphes__case{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:32%;background:var(--gris-carte);cursor:default;transition:background-color .15s,color .15s}
.glyphes__case:hover,.glyphes__case[aria-selected=true]{background:var(--papier);color:var(--encre)}
.glyphes__vue{position:relative;aspect-ratio:1;border-radius:var(--rayon);background:var(--encre-2)}
.glyphes__vue canvas{position:absolute;inset:0}
.glyphes__droite{align-self:start}
@media (min-width:834px){
  .glyphes__grille{grid-template-columns:1fr 1fr}
  .glyphes__droite{position:sticky;top:80px}
}

/* ---------- À propos ---------- */
.apropos{padding:36px var(--marge) 0}
.portrait{display:flex;gap:8px;padding-bottom:24px}
.portrait figure{width:100%}
.portrait__reperes{display:none}
.bloc{display:grid;grid-template-columns:1fr;row-gap:24px;border-top:1px solid var(--gris-trait);padding:24px 0 36px}
.bloc__label{padding:0 8px}
.bloc__texte{display:flex;flex-direction:column;gap:16px;padding:0 8px}
.bloc__liens{display:flex;flex-wrap:wrap;gap:12px 24px}
@media (min-width:1194px){
  .portrait figure{width:50%}
  .portrait__reperes{display:flex;width:50%;flex-direction:column;justify-content:flex-end;gap:8px;padding-left:16px}
  .bloc{grid-template-columns:1fr 1fr;column-gap:var(--col);row-gap:12px;padding:12px 0 48px}
  .bloc__label{padding:8px 0 0 24px}
  .bloc__texte{gap:24px;padding:8px 0 0}
}

/* ---------- Contact ---------- */
.contact{padding:96px var(--marge) 0}
.contact__grille{display:grid;grid-template-columns:1fr;row-gap:48px;padding-bottom:44px}
.contact__droite{display:flex;flex-direction:column;gap:12px}
.rubrique{padding:12px 0 36px}
.rubrique::before{content:"";display:block;border-top:1px solid var(--filet);margin-bottom:12px}
.rubrique__grille{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--col)}
.rubrique__liens{display:flex;flex-direction:column;gap:2px;color:var(--gris)}
.rubrique__desc{display:none}
.rubrique--form .rubrique__grille{grid-template-columns:1fr}
.rubrique--form .rubrique__grille>div{padding-bottom:24px}
.formulaire{display:flex;flex-direction:column;gap:20px}
.champ-bloc{display:flex;flex-direction:column;gap:8px}
.champ{width:100%;background:color-mix(in srgb,var(--papier) 5%,transparent);border:1px solid var(--filet);border-radius:2px;padding:12px;color:var(--papier);font-size:15px;transition:border-color .2s,background-color .2s}
.champ:focus{outline:none;border-color:var(--vermillon);background:color-mix(in srgb,var(--papier) 8%,transparent)}
select.champ{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),linear-gradient(135deg,var(--gris) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.formulaire .bouton{align-self:flex-start}
@media (min-width:1194px){
  .contact{padding-top:172px}
  .contact__grille{grid-template-columns:repeat(16,1fr);column-gap:var(--col);padding-bottom:0}
  .contact__gauche{grid-column:1 / span 5;padding-left:12px}
  .contact__droite{grid-column:8 / span 9}
  .rubrique{padding-bottom:48px}
  .rubrique::before{margin-right:12px}
  .rubrique__grille,.rubrique--form .rubrique__grille{grid-template-columns:3fr 5fr 1fr}
  .rubrique__desc{display:block}
  .rubrique--form .rubrique__grille>div{padding-bottom:0}
  .formulaire{padding-right:12px}
}

/* ---------- Accessibilité ---------- */
:focus-visible{outline:1px solid var(--vermillon);outline-offset:3px;border-radius:2px}
::selection{background:var(--vermillon);color:var(--encre)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ouverture{height:auto}
  .ouverture__scene{position:relative}
  .ouverture__media,.ouverture__titres{opacity:1}
  .ouverture__intro{transform:none}
  .masque>span{transform:none}
  .diapo{animation:none}
  .diapo[style*="--i:0"]{opacity:1}
}