/* ==========================================================================
   DIKENGA — Portfolio UI/UX 2026
   Feuille propre à la page d'accueil. Elle se charge APRÈS styles.css, dont
   elle réutilise la base (reset, focus, burger, carrousel) sans la modifier.
   ========================================================================== */

.pf {
  --encre:      #0D0D0F;   /* noir des fonds et du texte */
  --encre-2:    #1A1A1D;   /* cartes sombres, niveau 2 */
  --papier:     #FFFFFF;
  --papier-2:   #F4F4F2;   /* sections claires */
  --trait:      #E4E4E0;
  --trait-fonce:#2A2A2E;
  --gris-txt:   #6E6E73;
  --gris-clair: rgba(255,255,255,.62);
  --accent:     #22C55E;   /* pastille de disponibilité */

  --r-carte: 0;   /* angles droits */
  --r-inner: 0;   /* angles droits */
  --wrap: 1280px;
  --pad: 24px;
  --section: clamp(72px, 8vw, 140px);
  --ease: cubic-bezier(.22, 1, .36, 1);

  font-family: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
  color: var(--encre);
  background: var(--papier);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.pf .wrap { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--pad); }

/* Lien d'évitement */
.pf .saut {
  position: absolute; left: 50%; top: 0; translate: -50% -130%;
  z-index: 100; padding: 12px 20px; border-radius: 0 0 12px 12px;
  background: var(--encre); color: #fff; text-decoration: none;
  transition: translate .2s var(--ease);
}
.pf .saut:focus { translate: -50% 0; }

/* ----------------------------------------------------- Typographie --- */

.pf h1, .pf h2, .pf h3 { margin: 0; font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; }

.pf h1 { font-size: clamp(38px, 4.4vw, 60px); }
.pf h2 { font-size: clamp(28px, 3.1vw, 44px); line-height: 1.12; }
.pf h3 { font-size: 18px; letter-spacing: -0.02em; }

.pf .label {
  margin: 0 0 18px;
  font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris-txt);
}
.pf p { margin: 0 0 16px; }
.pf p:last-child { margin-bottom: 0; }

.pf .bloc-desc { color: var(--gris-txt); max-width: 62ch; }
.pf .bloc-desc--large { font-size: 18px; max-width: 70ch; }

/* --------------------------------------------------------- Boutons --- */

.pf .btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 20px;
  border: 1px solid var(--trait); border-radius: 999px;
  background: var(--papier); color: var(--encre);
  font: 500 14px/1 inherit; text-decoration: none; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .12s var(--ease);
}
.pf .btn:hover { border-color: var(--encre); }
.pf .btn:active { transform: scale(.97); }
.pf .btn .fleche { transition: transform .25s var(--ease); }
.pf .btn:hover .fleche { transform: translate(2px, -2px); }

.pf .btn--noir { background: var(--encre); border-color: var(--encre); color: #fff; }
.pf .btn--noir:hover { background: #26262B; border-color: #26262B; }

.pf .btn--clair { background: #fff; border-color: #fff; color: var(--encre); }
.pf .btn--clair:hover { background: #E9E9E6; border-color: #E9E9E6; }

.pf .btn--fantome { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.pf .btn--fantome:hover { border-color: #fff; }

.pf .btn--petit { min-height: 38px; padding: 0 16px; font-size: 13px; }

.pf .lien-fleche {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; text-decoration: none; color: var(--encre);
  white-space: nowrap;
}
.pf .lien-fleche .fleche { transition: transform .25s var(--ease); }
.pf .lien-fleche:hover .fleche { transform: translate(2px, -2px); }

/* ---------------------------------------------------------- Pills --- */

.pf .pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.pf .pills li {
  padding: 6px 13px; border-radius: 999px;
  border: 0; background: var(--papier-2);
  font-size: 12.5px; color: var(--encre);
}

/* ---------------------------------------------------------- Entête --- */

.pf-entete { position: sticky; top: 0; z-index: 60; transition: background-color .3s var(--ease), border-color .3s var(--ease); border-bottom: 1px solid transparent; }
.pf-entete.pose { background: rgba(255,255,255,.82); backdrop-filter: saturate(1.4) blur(12px); border-bottom-color: var(--trait); }

.pf-entete-in {
  width: min(100%, var(--wrap)); margin-inline: auto;
  padding: 14px var(--pad);
  display: flex; align-items: center; gap: 24px;
}
.pf-marque { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; color: var(--encre); }
.pf-marque sup { font-size: .55em; top: -.6em; }

.pf-nav { display: flex; gap: 28px; margin-left: auto; font-size: 14px; }
.pf-nav a { color: var(--gris-txt); text-decoration: none; transition: color .2s var(--ease); }
.pf-nav a:hover { color: var(--encre); }

.pf-entete-fin { display: flex; align-items: center; gap: 16px; }
.pf .dispo { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--gris-txt); white-space: nowrap; }
.pf .dispo-point { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

/* ------------------------------------------------------------ Hero --- */

.pf .hero { padding-block: clamp(40px, 6vw, 84px) 0; }

.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .74fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  position: relative;
}
.hero-texte { max-width: 46rem; }
.hero-texte h1 { margin-bottom: 26px; max-width: 16ch; }
.hero-desc { color: var(--gris-txt); max-width: 52ch; margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.hero-actions .btn { padding: 0 17px; }

.hero-visuel { display: flex; justify-content: flex-end; align-items: center; }
.hero-forme { width: 116%; max-width: none; height: auto; display: block; margin-left: -8%; }

.hero-carte {
  margin: 0; padding: 20px 22px;
  width: min(100%, 240px);
  background: var(--papier);
  border-radius: var(--r-inner);
  box-shadow: 0 18px 44px rgba(0,0,0,.08);
}
.hero-carte blockquote { margin: 0 0 14px; font-size: 14px; font-weight: 500; line-height: 1.35; letter-spacing: -0.02em; }
.hero-carte figcaption { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--gris-txt); }

.hero-lieu { position: absolute; right: var(--pad); bottom: -8px; margin: 0; font-size: 12px; color: var(--gris-txt); }

.pf .signature {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin: clamp(30px, 4vw, 52px) 0 0; padding: 0 0 var(--section); list-style: none;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-txt);
}
.pf .signature li { display: flex; align-items: center; gap: 26px; }
.pf .signature li:not(:last-child)::after { content: ""; width: 14px; height: 1px; background: var(--trait); }

/* ---------------------------------------------------------- Blocs --- */

.pf .bloc { padding-block: var(--section); }
.pf .bloc--gris { background: var(--papier-2); }
.pf .bloc--noir { background: var(--encre); color: #fff; }
.pf .bloc--noir .label { color: var(--gris-clair); }
.pf .bloc--noir .bloc-desc { color: var(--gris-clair); }

.bloc-tete {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: clamp(32px, 4vw, 56px);
}
.bloc-tete h2 { margin-bottom: 16px; }
.pf .bloc-titre { margin-bottom: clamp(32px, 4vw, 56px); }

/* -------------------------------------------------------- Projets --- */

.pf .projet {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(20px, 3vw, 44px);
  border-radius: var(--r-carte);
  overflow: hidden;
  margin-bottom: 20px;
}
.pf .projet:last-child { margin-bottom: 0; }

.projet--sombre { background: var(--encre); color: #fff; }
.projet--clair { background: var(--papier); border: 1px solid var(--trait); }

.projet-texte { padding: clamp(26px, 2.6vw, 40px); display: flex; flex-direction: column; }

.projet-id { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
.projet-num { font-size: 12px; font-weight: 600; color: var(--gris-txt); padding-top: 3px; font-variant-numeric: tabular-nums; }
.projet--sombre .projet-num { color: var(--gris-clair); }
.projet-id h3 { font-size: 20px; margin-bottom: 4px; }
.projet-type { margin: 0; font-size: 12px; color: var(--gris-txt); }
.projet--sombre .projet-type { color: var(--gris-clair); }

.projet-accroche {
  font-size: clamp(20px, 1.9vw, 26px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.15;
  margin-bottom: 16px; max-width: 16ch;
}
.pf .projet-desc { font-size: 14px; color: var(--gris-txt); margin-bottom: 24px; max-width: 42ch; }
.projet--sombre .projet-desc { color: var(--gris-clair); }

.projet-meta { display: flex; gap: 40px; margin: 0 0 24px; }
.projet-meta dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-txt); margin-bottom: 6px; }
.projet--sombre .projet-meta dt { color: var(--gris-clair); }
.projet-meta dd { margin: 0; font-size: 13px; line-height: 1.5; }

.projet--sombre .pills li { border: 0; background: rgba(255,255,255,.09); color: rgba(255,255,255,.86); }
.projet-texte .btn { align-self: flex-start; margin-top: auto; }

.projet-visuel { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(18px, 2vw, 32px); }
.projet-visuel img, .projet-visuel video { width: 100%; height: auto; display: block; border-radius: var(--r-inner); }
.projet-annee {
  position: absolute; top: 18px; right: 20px; z-index: 2;
  font-size: 11px; color: var(--gris-txt); font-variant-numeric: tabular-nums;
}
.projet--sombre .projet-annee { color: var(--gris-clair); }

.projet-visuel--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.projet-visuel--duo img { aspect-ratio: 3/4; object-fit: cover; object-position: top center; background: var(--papier-2); }

@media (hover: hover) and (pointer: fine) {
  .projet-visuel img { transition: transform .55s var(--ease); }
  .projet:hover .projet-visuel img { transform: scale(1.02); }
}

/* --------------------------------------------- Colonnes numérotées --- */

.colonnes-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
.col-num { padding: 0 24px 8px 0; }
.col-num + .col-num { padding-left: 0; }
.col-num .num { display: block; font-size: 12px; color: var(--gris-txt); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.col-num h3 { margin-bottom: 16px; }
.col-num ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.col-num li { font-size: 14px; color: var(--gris-txt); }
.colonnes-4--serre .col-num { padding-top: 22px; }

/* ------------------------------------------------- Design System --- */

.systeme { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.systeme-texte h2 { margin-bottom: 20px; }
.systeme-texte .bloc-desc { margin-bottom: 26px; }
.pills--sombre li { border: 0; background: rgba(255,255,255,.09); color: rgba(255,255,255,.86); }

.ds-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ds-carte {
  background: var(--encre-2);
  border-radius: var(--r-inner); padding: 14px; min-height: 104px;
  display: flex; flex-direction: column; gap: 12px;
}
.ds-nom { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-clair); }

.ds-couleurs { display: flex; gap: 7px; }
.ds-couleurs i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--trait-fonce); }

.ds-typo { display: flex; align-items: center; gap: 12px; }
.ds-typo b { font-size: 26px; font-weight: 600; letter-spacing: -0.04em; color: #fff; }
.ds-typo span { display: grid; gap: 5px; flex: 1; }
.ds-typo i { display: block; height: 3px; border-radius: 2px; background: var(--trait-fonce); }
.ds-typo i:nth-child(1) { width: 100%; } .ds-typo i:nth-child(2) { width: 74%; } .ds-typo i:nth-child(3) { width: 48%; }

.ds-boutons { display: grid; gap: 7px; }
.ds-btn { font-style: normal; font-size: 11px; text-align: center; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--trait-fonce); color: rgba(255,255,255,.8); }
.ds-btn--plein { background: #fff; color: var(--encre); border-color: #fff; font-weight: 500; }

.ds-inputs { display: grid; gap: 7px; }
.ds-champ { font-style: normal; font-size: 11px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--trait-fonce); color: var(--gris-clair); }
.ds-champ--actif { border-color: #fff; color: #fff; }

.ds-nav { display: flex; gap: 6px; }
.ds-nav em { font-style: normal; font-size: 10.5px; padding: 5px 9px; border-radius: 7px; color: var(--gris-clair); border: 1px solid transparent; }
.ds-nav em.on { background: #fff; color: var(--encre); font-weight: 500; }

.ds-mini { display: flex; gap: 9px; align-items: center; }
.ds-mini > i { width: 32px; height: 32px; border-radius: 8px; background: var(--trait-fonce); }
.ds-mini span { display: grid; gap: 5px; flex: 1; }
.ds-mini span i { display: block; height: 3px; border-radius: 2px; background: var(--trait-fonce); }
.ds-mini span i:first-child { width: 90%; } .ds-mini span i:last-child { width: 55%; }

.ds-modal { border: 1px solid var(--trait-fonce); border-radius: 9px; padding: 8px; display: grid; gap: 5px; }
.ds-modal i { height: 3px; border-radius: 2px; background: var(--trait-fonce); }
.ds-modal i:first-child { width: 60%; }
.ds-modal em { height: 13px; width: 40%; border-radius: 999px; background: #fff; margin-top: 3px; }

.ds-table { display: grid; gap: 5px; }
.ds-table i { height: 7px; border-radius: 3px; background: var(--trait-fonce); }
.ds-table i:first-child { background: rgba(255,255,255,.34); }

.systeme-faits {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin: clamp(28px, 4vw, 48px) 0 0; padding-top: 28px;
  border-top: 1px solid var(--trait-fonce);
}
/* La valeur passe au-dessus du libellé, comme sur la maquette. */
.systeme-faits > div { display: flex; flex-direction: column; gap: 6px; }
.systeme-faits dd { margin: 0; font-size: 14px; color: #fff; order: 1; }
.systeme-faits dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-clair); order: 2; }
.systeme-faits .chiffre { font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }

/* -------------------------------------------------------- Process --- */

.pf .process {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 46px;
  margin: 0; padding: 0; list-style: none;
}
.pf .process li { padding: 0 12px 0 0; position: relative; }
.pf .process li + li { padding-left: 0; }
/* Flèche de liaison entre deux étapes, posée sur le filet */
.pf .process .fl {
  position: absolute; left: -29px; top: 1px;
  width: 14px; height: 14px;
  display: grid; place-items: center;
  color: var(--gris-txt);
  font-size: 12px; line-height: 1;
}
.pf .process .num { display: block; font-size: 12px; color: var(--gris-txt); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.pf .process h3 { margin-bottom: 8px; }
.pf .process p { font-size: 13.5px; color: var(--gris-txt); margin: 0; }

/* ------------------------------------------------------ What I do --- */

.cartes-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.carte-srv { background: var(--papier); border-radius: var(--r-inner); padding: 24px; }
.carte-srv .num { display: block; font-size: 12px; color: var(--gris-txt); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.carte-srv h3 { margin-bottom: 10px; }
.carte-srv p { font-size: 13.5px; color: var(--gris-txt); margin-bottom: 16px; }
.carte-srv ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; border-top: 1px solid var(--trait); padding-top: 14px; }
.carte-srv li { font-size: 13px; padding-left: 16px; position: relative; }
.carte-srv li::before { content: "→"; position: absolute; left: 0; color: var(--gris-txt); }

/* ---------------------------------------------------------- About --- */

.about { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.about-texte h2 { margin-bottom: 22px; }
.about-texte p { color: var(--gris-txt); }
.about-texte .btn { margin-top: 12px; }
.about-cote .portrait { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; background: var(--papier-2); margin-bottom: 28px; }

.parcours { margin: 0 0 32px; }
.parcours > div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid var(--trait); }
.parcours > div:last-child { border-bottom: 1px solid var(--trait); }
.parcours dt { font-size: 13.5px; }
.parcours dd { margin: 0; font-size: 13px; color: var(--gris-txt); white-space: nowrap; }

.about-cote .outils ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.about-cote .outils li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border: 1px solid var(--trait); border-radius: 999px;
  font-size: 13px; color: var(--encre);
}
.about-cote .outils img { width: 16px; height: 16px; object-fit: contain; }

/* -------------------------------------------------------- Contact --- */

.pf .final-titre { font-size: clamp(32px, 4.6vw, 60px); margin-bottom: 20px; max-width: 18ch; }
.final .bloc-desc { margin-bottom: 34px; }
.final-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(40px, 5vw, 64px); }
.final-faits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding-top: 28px; border-top: 1px solid var(--trait-fonce); }
.final-faits dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-clair); margin-bottom: 8px; }
.final-faits dd { margin: 0; font-size: 14px; }
.final-faits a { color: #fff; }

/* ----------------------------------------------------------- Pied --- */

.pf .pied { padding-block: 56px 28px; border-top: 1px solid var(--trait); font-size: 13px; color: var(--gris-txt); }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 28px; padding-bottom: 36px; }
.pied-nom { font-size: 15px; font-weight: 700; color: var(--encre); margin-bottom: 8px; letter-spacing: -0.02em; }
.pied-nom sup { font-size: .55em; top: -.6em; }
.pf .pied p { margin: 0 0 4px; }
.pied-nav { display: grid; gap: 8px; align-content: start; }
.pf .pied a { color: var(--encre); text-decoration: none; }
.pf .pied a:hover { text-decoration: underline; }
.pied-social { display: grid; gap: 8px; align-content: start; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding-top: 20px; border-top: 1px solid var(--trait); }

/* ---------------------------------------------------- Explorations --- */

.pf .carrousel-commandes { display: flex; align-items: center; gap: 12px; margin-top: 18px; }

/* ==========================================================================
   RESPONSIVE (§35) — 1280 / 1024 / 768 / 390
   ========================================================================== */

@media (max-width: 1180px) {
  .ds-grille { grid-template-columns: repeat(2, 1fr); }
  .pf .process { grid-template-columns: repeat(3, 1fr); }
  .pf .process li:nth-child(3n+1) .fl { display: none; }
  .pf .process li:nth-child(n+4) { padding-top: 28px; }
}

@media (max-width: 1024px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-visuel { order: 0; justify-content: flex-start; margin-top: 4px; }
  .hero-lieu { position: static; margin-top: 18px; }
  .systeme { grid-template-columns: 1fr; }
  .colonnes-4 { grid-template-columns: repeat(2, 1fr); }
  .col-num:nth-child(n+3) { padding-top: 28px; }
  .cartes-4 { grid-template-columns: repeat(2, 1fr); }
  .about { grid-template-columns: 1fr; }
  .pf .projet { grid-template-columns: 1fr; }
  .projet-texte { padding-bottom: 8px; }
  .projet-texte .btn { margin-top: 8px; }
}

@media (max-width: 860px) {
  .pf-entete-fin .dispo { display: none; }
  .systeme-faits, .final-faits { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 700px) {
  /* Panneau de navigation mobile, calé sur le comportement de menu.js */
  .pf-entete { background: var(--papier); }
  .pf-nav {
    position: fixed; inset: 0 0 0 auto; z-index: 50;
    width: min(78vw, 20rem);
    flex-direction: column; gap: 0;
    padding: 88px 28px 32px;
    background: var(--papier);
    box-shadow: rgba(0,0,0,.18) -8px 0 40px;
    transform: translateX(100%); visibility: hidden;
    transition: transform .35s var(--ease), visibility 0s .35s;
  }
  .pf-nav.ouvert { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
  .pf-nav a { font-size: 22px; font-weight: 500; color: var(--encre); padding: 14px 0; border-bottom: 1px solid var(--trait); }
  .pf-entete-in { gap: 12px; }
  .pf-entete-fin { margin-left: 0; }
}

@media (max-width: 620px) {
  .pf { --pad: 18px; }
  .colonnes-4 { grid-template-columns: 1fr; }
  .col-num { padding-left: 0 !important; padding-top: 26px; }
  .colonnes-4 > .col-num:first-child { padding-top: 0; }
  .cartes-4 { grid-template-columns: 1fr; }
  .pf .process { grid-template-columns: 1fr; }
  .pf .process li { padding-left: 0 !important; padding-top: 26px; }
  .pf .process .fl { display: none; }
  .pf .process li:first-child { padding-top: 0; }
  .ds-grille { grid-template-columns: repeat(2, 1fr); }
  .projet-meta { flex-wrap: wrap; gap: 20px 32px; }
  .projet-visuel--duo { grid-template-columns: 1fr; }
  .hero-carte { width: auto; margin-top: 16px; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pf .btn, .pf .btn .fleche, .pf .lien-fleche .fleche,
  .projet-visuel img, .pf-entete, .pf-nav, .pf .saut { transition: none; }
}


/* ==========================================================================
   PROJETS — présentation centrée, reprise de dikengadesign.fr
   Colonne de lecture centrée dans la page, texte aligné à gauche,
   puis le montage en pleine largeur.
   ========================================================================== */

.bloc-tete--centre { display: block; text-align: left; }
.bloc-tete--centre > div { width: min(100%, 620px); margin-inline: auto; }
.bloc-tete--centre .bloc-desc { margin-bottom: 20px; }

.cas { padding-block: clamp(40px, 5vw, 72px) 0; }
.cas:last-child { padding-bottom: 0; }

.cas-texte { width: min(100%, 620px); margin-inline: auto; }
.pf .cas-titre {
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.03em; line-height: 1.14;
  margin-bottom: 18px;
}
.pf .cas-desc { color: var(--gris-txt); margin-bottom: 0; }

.cas-montage {
  width: min(100%, 1200px);
  margin: clamp(22px, 2.4vw, 34px) auto clamp(28px, 3vw, 44px);
  padding-inline: var(--pad);
}
.cas-montage iframe {
  display: block; width: 100%; aspect-ratio: 3 / 2;
  border: 0; background: transparent;
}
.cas-montage--duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.cas-montage--duo img {
  width: 100%; border-radius: var(--r-inner);
  background: var(--papier-2);
  aspect-ratio: 3 / 4; object-fit: cover; object-position: top center;
  transition: transform .55s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .cas-montage--duo img:hover { transform: scale(1.02); }
}

.cas-texte .pills { margin-bottom: 22px; }

/* Les deux captures Delorme restent côte à côte, même sur petit écran :
   empilées, elles faisaient quatre fois la hauteur des autres montages. */
@media (max-width: 620px) {
  .cas-montage--duo { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cas-montage--duo img { transition: none; }
}


/* La présentation StudioBooking remplit son iframe bord à bord, alors que le
   montage Talseume dessine un MacBook entouré de blanc. On conserve le même
   cadre — donc le même rythme vertical — et on ramène la présentation à
   l'emprise visuelle du MacBook. */
.cas-montage--cadre {
  display: grid;
  place-items: center;
}
.cas-montage--cadre iframe {
  width: 78%;
  height: auto;
  aspect-ratio: 3 / 2;
}
@media (max-width: 760px) {
  .cas-montage--cadre iframe { width: 100%; }
}


/* ==========================================================================
   RESPONSIVE — resserrage mobile
   Sur petit écran la page faisait plus de 16 écrans de haut. On réduit
   l'échelle typographique et le rythme vertical, sans toucher au desktop.
   ========================================================================== */

@media (max-width: 760px) {
  .pf {
    --section: 56px;   /* au lieu de 72 px */
    --pad: 20px;
  }

  /* Titres */
  .pf h1 { font-size: 33px; line-height: 1.06; letter-spacing: -0.04em; }
  .pf h2 { font-size: 26px; line-height: 1.12; }
  .pf .cas-titre { font-size: 22px; }
  .pf .final-titre { font-size: 30px; }
  .hero-texte h1 { margin-bottom: 18px; max-width: none; }

  /* Textes courants : c'est là que se gagnait le plus de hauteur */
  .pf { font-size: 15px; line-height: 1.5; }
  .hero-desc { font-size: 15px; margin-bottom: 22px; }
  .pf .bloc-desc--large { font-size: 16px; }
  .pf .cas-desc { font-size: 14px; }
  .pf .label { margin-bottom: 12px; }

  /* Rythme des blocs */
  .bloc-tete { margin-bottom: 26px; }
  .pf .bloc-titre { margin-bottom: 26px; }
  .cas { padding-block: 34px 0; }
  .section-tete { margin-bottom: 26px; }

  /* Colonnes empilées : moins d'air entre chaque groupe */
  .col-num { padding-top: 20px !important; padding-bottom: 0; }
  .col-num .num { margin-bottom: 10px; }
  .col-num h3 { margin-bottom: 10px; }
  .col-num ul { gap: 5px; }
  .pf .process li { padding-top: 20px !important; }
  .pf .process .num { margin-bottom: 8px; }

  /* Cartes */
  .carte-srv { padding: 20px 0; }
  .cartes-4 { gap: 4px; }
  .carte-srv .num { margin-bottom: 12px; }
  .carte-srv p { margin-bottom: 12px; }
  .carte-srv ul { padding-top: 12px; gap: 5px; }

  /* Hero : la citation passe sous le texte, alignée à gauche */
  .hero-visuel { width: 100%; justify-self: stretch; }
  .hero-carte {
    width: 100%; max-width: none; padding: 18px 20px;
    background: var(--papier-2);   /* sans bordure, il lui faut un fond */
    box-shadow: none;
  }
  .hero-carte blockquote { margin-bottom: 10px; }
  .hero-lieu { position: static; margin-top: 14px; }
  .pf .signature { padding-bottom: var(--section); gap: 8px 18px; }
  .pf .signature li { gap: 18px; }

  /* Divers */
  .about-cote .portrait { width: 96px; height: 96px; margin-bottom: 20px; }
  .parcours > div { padding: 10px 0; }
  .systeme-faits, .final-faits { gap: 18px; padding-top: 20px; }
  .final-actions { margin-bottom: 30px; }
  .pf .pied { padding-block: 40px 24px; }
  .pied-grille { padding-bottom: 26px; }
}

@media (max-width: 400px) {
  .pf h1 { font-size: 30px; }
  .pf h2 { font-size: 24px; }
}

/* Empilées, les quatre colonnes d'Expertise et d'IA & Technologie occupaient
   près de 1 400 px de haut sur mobile. En grille 2×2 elles tiennent en deux
   fois moins, et la lecture reste confortable. */
@media (max-width: 760px) {
  .colonnes-4 { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .colonnes-4 .col-num { padding: 0 !important; }
  .colonnes-4 .col-num .num { margin-bottom: 8px; }
  .colonnes-4 .col-num h3 { font-size: 16px; margin-bottom: 8px; }
  .colonnes-4 .col-num li { font-size: 13.5px; line-height: 1.42; }
  .colonnes-4 .col-num ul { gap: 4px; }
}

/* Sous 360 px, deux colonnes casseraient les libellés les plus longs. */
@media (max-width: 360px) {
  .colonnes-4 { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   HERO ÉPURÉ — plus de carte ni de ligne de mots-clés
   ========================================================================== */

.pf .hero { padding-block: clamp(40px, 6vw, 84px) clamp(40px, 5vw, 72px); }
.hero-in { grid-template-columns: 1fr; }
.hero-texte { max-width: 60rem; }
.hero-lieu {
  position: static;
  margin: 26px 0 0;
  font-size: 12px;
  color: var(--gris-txt);
}

/* Bande d'explorations, juste sous le hero : que les visuels. */
.bande-explorations { padding-block: 0 var(--section); background: var(--papier); }

@media (max-width: 760px) {
  .pf .hero { padding-block: 28px 34px; }
  .hero-lieu { margin-top: 20px; }
}

/* ==========================================================================
   RESPIRATION — moins d'air entre les sections
   ========================================================================== */
.pf { --section: clamp(52px, 5.4vw, 92px); }

@media (max-width: 760px) {
  .pf { --section: 44px; }
}

/* ==========================================================================
   GRILLE UNIFIÉE
   Un seul jeton de rythme vertical (--section) et un seul jeton de marge
   latérale (--pad). Toutes les sections, tous les projets et le carrousel
   s'y conforment : même écart partout, mêmes bords partout.
   ========================================================================== */

/* --- Rythme vertical : chaque section porte exactement var(--section) --- */
.pf .hero,
.pf .bloc,
.pf .bande-explorations { padding-block: var(--section); }

/* Les projets suivent le même rythme que les sections : l'écart entre deux
   projets vaut donc 2 × var(--section), comme entre deux sections. */
.pf .cas { padding-block: 0; }
.pf .cas + .cas { margin-top: calc(var(--section) * 2); }

/* --- Bords : tout s'aligne sur la largeur de contenu de .wrap --- */
.pf .cas-montage {
  width: min(100%, var(--wrap));
  padding-inline: var(--pad);
}

/* Le carrousel est cadré comme le reste ; la piste garde ses propres
   coordonnées internes, donc la boucle de défilement n'est pas affectée. */
.bande-explorations .carrousel {
  width: min(100%, var(--wrap));
  margin-inline: auto;
  padding-inline: var(--pad);
}
.bande-explorations .carrousel-commandes { padding-inline: 0; width: auto; }

/* ==========================================================================
   CENTRAGE ET RESPIRATION — système relevé sur julius.fm
   À 1440 px : container de 1080 px (marges de 180), colonne de lecture de
   540 px centrée. Les proportions tiennent à toutes les largeurs.
   ========================================================================== */

.pf {
  --wrap: 1080px;      /* container : 1080 à 1440, marges de 180 */
  --mesure: 540px;     /* colonne de lecture */
}

.pf .wrap,
.pf .cas-montage,
.bande-explorations .carrousel {
  width: min(100% - var(--pad) * 2, var(--wrap));
  margin-inline: auto;
  padding-inline: 0;
}

/* Colonne de lecture centrée */
.pf .cas-texte,
.pf .section-tete { width: min(100%, var(--mesure)); margin-inline: auto; }
.pf .bloc-desc,
.pf .bloc-desc--large { max-width: none; }

/* ==========================================================================
   BOUTONS — anatomie de tes pastilles : pas de bordure, une ombre douce
   portée par un pseudo-élément qui grandit au survol.
   ========================================================================== */

.pf .btn {
  position: relative; isolation: isolate;
  border: 0;
  min-height: 46px;
  padding: 0 20px;
  font-weight: 500;
  transform-origin: 50% center;
  backface-visibility: hidden;
  transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .25s var(--ease), color .25s var(--ease);
}
.pf .btn::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; z-index: -1; pointer-events: none;
  box-shadow: rgba(0, 0, 0, .14) 0 6px 24px;
  transition: box-shadow .3s ease;
}
.pf .btn:hover::after { box-shadow: rgba(0, 0, 0, .2) 0 12px 34px; }
.pf .btn:active { transform: scale(.97); }

/* Le bouton clair garde son fond blanc ; c'est l'ombre qui le détache. */
.pf .btn { background: var(--papier); color: var(--encre); }
.pf .btn:hover { background: var(--papier); }
.pf .btn--noir { background: var(--encre); color: #fff; }
.pf .btn--noir:hover { background: var(--encre); }
.pf .btn--clair { background: #fff; color: var(--encre); }
.pf .btn--clair:hover { background: #fff; }

/* Sur fond noir, l'ombre ne se voit pas : on garde un contour fin. */
.pf .btn--fantome { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.pf .btn--fantome::after { box-shadow: none; }
.pf .btn--fantome:hover { box-shadow: inset 0 0 0 1px #fff; }

/* ==========================================================================
   RYTHME RELEVÉ SUR JULIUS.FM (1440 px)
   22 px entre paragraphes · 36 px entre texte et visuel · 56 px entre blocs.
   Colonne de lecture 540 centrée (450), visuels 1080 centrés (180).
   ========================================================================== */

.pf {
  --r-texte:  22px;   /* paragraphe → paragraphe */
  --r-visuel: 36px;   /* texte ↔ visuel */
  --r-bloc:   56px;   /* bloc → bloc */
  --section:  var(--r-bloc);
}

/* --- Tout le texte passe dans la colonne de lecture centrée --- */
.pf .bloc > .wrap > .label,
.pf .bloc > .wrap > .bloc-titre,
.pf .bloc > .wrap > .bloc-desc,
.pf .bloc-tete > div,
.pf .final-titre,
.pf .final-actions,
.pf .final-faits {
  width: min(100%, var(--mesure));
  margin-inline: auto;
}

/* --- Rythme vertical --- */
.pf .label { margin-bottom: var(--r-texte); }
.pf p { margin-bottom: var(--r-texte); }
.pf p:last-child { margin-bottom: 0; }

.pf .cas-titre { margin-bottom: var(--r-texte); }
.pf .bloc-titre,
.pf .bloc-tete h2,
.pf .section-tete { margin-bottom: var(--r-bloc); }
.pf .final-titre { margin-bottom: var(--r-texte); }

/* Texte ↔ visuel : la même valeur des deux côtés */
.pf .cas-montage { margin-block: var(--r-visuel); }
.pf .cas-texte .pills { margin-bottom: var(--r-texte); }

/* Entre deux projets : le même écart qu'entre deux sections */
.pf .cas + .cas { margin-top: calc(var(--r-bloc) * 2); }

/* Les grilles larges gardent leurs 1080, sous le texte centré */
.pf .colonnes-4,
.pf .cartes-4,
.pf .process,
.pf .ds-grille { margin-top: 0; }

@media (max-width: 760px) {
  .pf { --r-bloc: 40px; --r-visuel: 28px; --r-texte: 18px; }
}

/* Les commandes du carrousel portent .wrap mais sont déjà dans un conteneur
   calé : sans ça, la marge latérale est appliquée deux fois. */
.bande-explorations .carrousel > .wrap.carrousel-commandes {
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
  margin-top: var(--r-texte);
}

/* ==========================================================================
   PASTILLE « RETOUR EN HAUT »
   Géométrie relevée : fixe, centrée, 26 px du bas, 45 px de haut,
   padding 12/12/12/16, corps 17 px, ombre 0 6px 24px.
   ========================================================================== */

.pf .haut {
  position: fixed; left: 50%; bottom: 26px; translate: -50% 0;
  z-index: 70; isolation: isolate;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 45px;
  padding: 12px 12px 12px 16px;
  border: 0; border-radius: 999px;
  background: var(--papier); color: var(--encre);
  font-size: 17px; font-weight: 500; line-height: 21px;
  text-decoration: none;
  opacity: 0; pointer-events: none;
  transform-origin: 50% center; backface-visibility: hidden;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.pf .haut::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; z-index: -1; pointer-events: none;
  box-shadow: rgba(0, 0, 0, .14) 0 6px 24px;
  transition: box-shadow .3s ease;
}
.pf .haut:hover::after { box-shadow: rgba(0, 0, 0, .2) 0 12px 34px; }
.pf .haut:active { transform: scale(.97); }
.pf .haut.visible { opacity: 1; pointer-events: auto; }
.pf .haut-fleche { color: var(--gris-txt); transition: color .3s ease; }
.pf .haut:hover .haut-fleche { color: var(--encre); }

/* Les boutons adoptent le même corps et le même gabarit que la pastille. */
.pf .btn {
  gap: 9px;
  min-height: 45px;
  padding: 12px 14px 12px 16px;
  font-size: 17px; line-height: 21px; font-weight: 500;
}
.pf .btn--petit { min-height: 38px; padding: 8px 12px 8px 14px; font-size: 15px; }

/* Écarts internes restés au-dessus du rythme de bloc */
.pf .systeme-faits,
.pf .final-faits,
.pf .contact-duo,
.pf .duo-colonnes { margin-top: var(--r-visuel); padding-top: var(--r-texte); }
.pf .final-actions { margin-bottom: var(--r-bloc); }
.pf .parcours { margin-bottom: var(--r-bloc); }

@media (max-width: 760px) {
  .pf .haut { bottom: 18px; font-size: 15px; min-height: 42px; }
  .pf .btn { font-size: 15px; min-height: 44px; }
}

/* Aucune marge résiduelle en début ou en fin de bloc : l'écart entre deux
   sections vaut alors exactement 2 × var(--section), sans variation. */
.pf section > .wrap > *:last-child,
.pf .cas > *:last-child,
.pf .cas-texte > *:last-child,
.pf .bloc-tete > div > *:last-child { margin-bottom: 0; }
.pf section > .wrap > *:first-child,
.pf .cas-texte > *:first-child { margin-top: 0; }

/* « À propos » ne contient plus que du texte : une seule colonne, centrée
   comme le reste de la page. */
.pf #about .about-texte {
  width: min(100%, var(--mesure));
  margin-inline: auto;
  max-width: none;
}

/* « Ce que je conçois » : plus de cartes ni de numéros, seulement le texte. */
.pf .carte-srv { background: transparent; padding: 0; }
.pf .carte-srv .num { display: none; }
.pf .cartes-4 { gap: clamp(28px, 3vw, 40px); }

@media (max-width: 620px) {
  .pf .cartes-4 { gap: 32px; }
}

/* Le bloc-tête était en flex avec le bouton repoussé à droite : le titre se
   retrouvait décalé hors de la colonne de lecture. Les deux y reviennent. */
.pf .bloc-tete {
  display: block;
  width: min(100%, var(--mesure));
  margin-inline: auto;
}
.pf .bloc-tete > div { width: 100%; margin-inline: 0; }
.pf .bloc-tete > .btn { margin-top: var(--r-texte); }

/* Pastille « Retour en haut » — gabarit réduit */
.pf .haut {
  min-height: 38px;
  padding: 9px 12px 9px 15px;
  font-size: 14px; line-height: 18px;
  gap: 7px;
}

/* Outils, sous le texte d'À propos, dans la colonne centrée */
.pf .outils { margin-top: var(--r-bloc); }
.pf .outils .label { margin-bottom: var(--r-texte); }
.pf .outils ul {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.pf .outils li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--papier-2);
  font-size: 14px; color: var(--encre);
}
/* Chaque marque garde ses proportions : on fixe la hauteur, la largeur
   suit. Sinon un logotype horizontal comme n8n, écrasé dans un carré, se
   réduit à un filet de quelques pixels de haut. */
.pf .outils img { height: 18px; width: auto; object-fit: contain; }

@media (max-width: 760px) {
  .pf .haut { min-height: 34px; padding: 8px 11px 8px 13px; font-size: 13px; bottom: 16px; }
}

/* Plus aucun numéro au-dessus des titres : Expertise, Méthode, IA. */
.pf .col-num .num,
.pf .process .num { display: none; }

/* ==========================================================================
   ÉCART TITRE → CONTENU
   Relevé sur julius.fm : 22 px entre le titre de chapitre et son texte
   (4 chapitres sur 4). Il était à 56 px ici, d'où l'impression de vide.
   ========================================================================== */
.pf .bloc-titre,
.pf .bloc-tete h2,
.pf .section-tete,
.pf .bloc-tete { margin-bottom: var(--r-texte); }

/* La description sous le titre garde le même rythme de paragraphe. */
.pf .bloc-tete > div > *:last-child { margin-bottom: 0; }

/* Une grille ou un visuel qui suit du texte reste à 36 px. */
.pf .colonnes-4,
.pf .cartes-4,
.pf .process,
.pf .ds-grille { margin-top: var(--r-visuel); }

/* Colonnes égales dans l'aperçu Design System : « 1fr » vaut minmax(auto, 1fr),
   donc une carte large pousse sa colonne. minmax(0, 1fr) les garde identiques. */
.pf .ds-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .pf .ds-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .pf .ds-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   RYTHME FINAL — valeurs relevées sur julius.fm, appliquées strictement
   Bloc → bloc : 56 px. C'est la valeur mesurée là-bas ; le portfolio était
   à 112 px (2 × 56) parce que chaque section portait 56 de chaque côté.
   ========================================================================== */

.pf { --section: 28px; }            /* 28 + 28 = 56 entre deux sections */
.pf .cas + .cas { margin-top: var(--r-bloc); }   /* 56 entre deux projets */


/* Correction : tous les montages reprennent l'écart de 36 px. Le montage
   Talseume porte une marge blanche en haut dans son propre document, donc son
   écart supérieur est mis à zéro — sinon l'espace serait compté deux fois.
   En bas il n'a aucune marge propre : mesuré au pixel, le bouton n'avait que
   3 px de blanc contre 37 px pour les deux autres. Il reprend donc l'écart
   commun sous l'image. */
.pf .cas-montage { margin-block: var(--r-visuel); }
.pf .cas-montage:has(iframe[src*="talseume-montage"]) { margin-block: 0 var(--r-visuel); }

/* Correction : « .btn:hover » imposait un fond blanc à tous les boutons.
   Sur fond noir, le bouton en contour blanc devenait blanc sur blanc,
   donc totalement illisible. Il garde maintenant son fond transparent. */
.pf .btn--fantome,
.pf .btn--fantome:hover,
.pf .btn--fantome:focus-visible {
  background: transparent;
  color: #fff;
}
.pf .btn--fantome:hover { box-shadow: inset 0 0 0 1px #fff; }

/* Aperçu Design System resserré : vignettes plus compactes, mêmes composants. */
.pf .ds-grille { gap: 9px; }
.pf .ds-carte { min-height: 82px; padding: 11px; gap: 9px; }
.pf .ds-nom { font-size: 9.5px; letter-spacing: .1em; }

.pf .ds-couleurs i { width: 17px; height: 17px; }
.pf .ds-typo b { font-size: 21px; }
.pf .ds-btn { font-size: 10px; padding: 5px 8px; }
.pf .ds-champ { font-size: 10px; padding: 6px 8px; }
.pf .ds-nav em { font-size: 9.5px; padding: 4px 7px; }
.pf .ds-mini > i { width: 26px; height: 26px; }
.pf .ds-modal { padding: 6px; }
.pf .ds-modal em { height: 11px; }
.pf .ds-table i { height: 6px; }

/* Respiration entre sections : 80 px partout.
   Chaque section porte 40 px de padding haut et bas (40 + 40 = 80), et deux
   projets consécutifs sont séparés de la même valeur. Une seule source. */
.pf { --section: 40px; }
.pf .cas + .cas { margin-top: calc(var(--section) * 2); }

@media (max-width: 760px) {
  .pf { --section: 32px; }
}

/* ==========================================================================
   MÉTHODE — accordéon sur mobile, ligne horizontale sur desktop
   Le bouton et le panneau existent dans les deux cas : sur desktop le bouton
   se comporte comme du texte et le panneau reste ouvert.
   ========================================================================== */

.pf .process-intro { margin-bottom: var(--r-visuel); }

.pf .etape-tete {
  display: block; width: 100%;
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left;
  cursor: default;
}
.pf .etape-signe { display: none; }
.pf .etape-corps { display: block; }

/* --- Mobile : accordéon --- */
@media (max-width: 760px) {
  .pf .process { border-top: 1px solid var(--trait); }
  .pf .etape {
    padding: 0 !important;
    border-bottom: 1px solid var(--trait);
  }
  .pf .etape .fl { display: none; }

  .pf .etape-tete {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pf .etape-tete .num {
    display: block; margin: 0;
    font-size: 12px; color: var(--gris-txt);
    font-variant-numeric: tabular-nums;
    min-width: 20px;
  }
  .pf .etape-tete h3 { margin: 0; font-size: 16px; flex: 1; }

  /* Le signe + / − */
  .pf .etape-signe {
    display: grid; place-items: center;
    width: 26px; height: 26px; flex: 0 0 auto;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--trait);
    position: relative;
  }
  .pf .etape-signe::before,
  .pf .etape-signe::after {
    content: ""; position: absolute;
    background: var(--encre);
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }
  .pf .etape-signe::before { width: 11px; height: 1.5px; }
  .pf .etape-signe::after  { width: 1.5px; height: 11px; }
  .pf .etape-tete[aria-expanded="true"] .etape-signe::after { transform: rotate(90deg); opacity: 0; }

  /* Le panneau : grille 0fr → 1fr, la seule façon d'animer une hauteur auto */
  .pf .etape-corps {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .32s var(--ease), margin .32s var(--ease);
    margin-bottom: 0;
  }
  .pf .etape-corps > * { overflow: hidden; min-height: 0; }
  .pf .etape-corps.ouvert { grid-template-rows: 1fr; margin-bottom: 16px; }
  .pf .etape-corps p {
    margin: 0;
    background: var(--papier-2);
    padding: 14px 16px;
    font-size: 14px; line-height: 1.5;
    color: var(--gris-txt);
  }

  @media (prefers-reduced-motion: reduce) {
    .pf .etape-corps { transition: none; }
    .pf .etape-signe::before, .pf .etape-signe::after { transition: none; }
  }
}

/* Le padding d'un élément ne peut pas être rogné par « overflow: hidden » :
   il fixait donc un minimum de 28 px à la piste « 0fr ». Le clipping se fait
   maintenant sur une enveloppe sans padding, et le paragraphe garde le sien. */
.pf .etape-clip { display: block; }
@media (max-width: 760px) {
  .pf .etape-corps > .etape-clip { overflow: hidden; min-height: 0; }
  .pf .etape-corps p { padding: 14px 16px; }
}

/* ==========================================================================
   MONTAGES — une seule hauteur pour les trois projets
   Talseume faisait 720 px, StudioBooking 562 et Maison Delorme 707.
   Tout est ramené à une hauteur commune ; les iframes gardent leur rapport
   3/2 en ajustant leur largeur, les images sont recadrées en « cover ».
   ========================================================================== */

.pf { --h-montage: 600px; }

.pf .cas-montage iframe {
  width: min(100%, calc(var(--h-montage) * 1.5));
  height: var(--h-montage);
  aspect-ratio: auto;
  margin-inline: auto;
}
.pf .cas-montage--duo img {
  height: var(--h-montage);
  aspect-ratio: auto;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 1180px) { .pf { --h-montage: 46vw; } }
@media (max-width: 760px)  { .pf { --h-montage: 58vw; } }

/* La paire Maison Delorme occupait toute la largeur du cadre (1080) alors que
   les deux iframes font 900. Elle est ramenée à la même largeur, centrée. */
.pf .cas-montage--duo {
  width: min(100%, calc(var(--h-montage) * 1.5));
  margin-inline: auto;
}

/* ==========================================================================
   AJUSTEMENTS MOBILE — menu à droite, boutons sur une ligne, eyebrow réduit
   ========================================================================== */
@media (max-width: 760px) {

  /* Le bouton burger passe à droite de l'en-tête */
  .pf-entete-in .burger { margin-left: auto; order: 3; }
  .pf-entete-fin { order: 2; }

  /* Les deux boutons du hero tiennent côte à côte */
  .hero-actions { flex-wrap: nowrap; gap: 8px; }
  .hero-actions .btn {
    font-size: 13px; line-height: 17px;
    min-height: 42px;
    padding: 10px 13px;
    white-space: nowrap;
    flex: 0 1 auto;
  }
  .hero-actions .btn .fleche { margin-left: -1px; }

  /* Eyebrow plus discret */
  .pf .hero .label { font-size: 10px; letter-spacing: .12em; }
}

/* ==========================================================================
   DESIGN SYSTEM — fiches documentées
   Chaque famille a son numéro, son titre et une ligne d'explication, dans le
   langage monochrome du site. Trois colonnes sur la largeur de 1080.
   ========================================================================== */

.pf .dsx {
  margin-top: var(--r-bloc);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pf .dsx-fiche {
  background: var(--encre-2);
  padding: 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.pf .dsx-fiche header { display: grid; gap: 4px; }
.pf .dsx-fiche h3 { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.pf .dsx-fiche h3 b { font-weight: 600; color: var(--gris-clair); margin-right: 2px; }
.pf .dsx-fiche header p { margin: 0; font-size: 11.5px; color: var(--gris-clair); }
.pf .dsx code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10.5px; letter-spacing: 0; color: var(--gris-clair);
}

/* 01 — Couleurs */
.pf .dsx-pal { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.pf .dsx-pal li { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: rgba(255,255,255,.86); }
.pf .dsx-pal i { width: 16px; height: 16px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.pf .dsx-pal code { margin-left: auto; }

/* 02 — Typographie */
.pf .dsx-typo { display: flex; align-items: flex-start; gap: 16px; }
.pf .dsx-typo b { font-size: 46px; font-weight: 600; line-height: .85; letter-spacing: -0.045em; color: #fff; }
.pf .dsx-typo dl { margin: 0; flex: 1; display: grid; gap: 6px; }
.pf .dsx-typo dl > div { display: flex; justify-content: space-between; gap: 10px; }
.pf .dsx-typo dt { font-size: 11.5px; color: rgba(255,255,255,.86); }
.pf .dsx-typo dd { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; color: var(--gris-clair); }

/* 03 — Espacements */
.pf .dsx-esp { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.pf .dsx-esp li { display: flex; align-items: center; gap: 10px; }
.pf .dsx-esp i { height: 7px; background: rgba(255,255,255,.3); flex: 0 0 auto; }

/* 04 — Rayons */
.pf .dsx-ray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pf .dsx-ray span { display: grid; gap: 7px; justify-items: center; }
.pf .dsx-ray i { width: 100%; aspect-ratio: 1; background: rgba(255,255,255,.14); display: block; }

/* 05 — Boutons */
.pf .dsx-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf .dsxb {
  font-style: normal; text-align: center;
  padding: 8px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
  color: rgba(255,255,255,.86); box-shadow: inset 0 0 0 1px var(--trait-fonce);
}
.pf .dsxb--plein { background: #fff; color: var(--encre); box-shadow: none; }
.pf .dsxb--nu { box-shadow: none; color: var(--gris-clair); }
.pf .dsxb--off { opacity: .38; }

/* 06 — Champs */
.pf .dsx-champs { display: grid; gap: 8px; }
.pf .dsxf {
  font-style: normal; padding: 9px 11px; font-size: 11.5px;
  color: var(--gris-clair); box-shadow: inset 0 0 0 1px var(--trait-fonce);
}
.pf .dsxf--focus { color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.pf .dsxf--err { color: #F0A0A0; box-shadow: inset 0 0 0 1px #8C4A4A; }

/* 07 — Sélecteurs */
.pf .dsx-sel { display: grid; gap: 10px; }
.pf .dsx-sel span { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: rgba(255,255,255,.82); }
.pf .dsxc, .pf .dsxr, .pf .dsxw {
  font-style: normal; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.pf .dsxc { width: 15px; height: 15px; font-size: 9px; color: transparent; box-shadow: inset 0 0 0 1px var(--trait-fonce); }
.pf .dsxc--on { background: #fff; color: var(--encre); box-shadow: none; }
.pf .dsxr { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--trait-fonce); }
.pf .dsxr--on { box-shadow: inset 0 0 0 1px #fff; }
.pf .dsxr--on::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.pf .dsxw { width: 26px; height: 15px; border-radius: 999px; background: #fff; justify-content: flex-end; padding: 2px; }
.pf .dsxw::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--encre); }

/* 08 — Navigation */
.pf .dsx-nav { display: grid; gap: 12px; }
.pf .dsx-seg { display: inline-flex; gap: 2px; padding: 3px; background: rgba(255,255,255,.07); border-radius: 999px; }
.pf .dsx-seg em { font-style: normal; padding: 5px 10px; border-radius: 999px; font-size: 11px; color: var(--gris-clair); }
.pf .dsx-seg em.on { background: #fff; color: var(--encre); font-weight: 500; }
.pf .dsx-fil { margin: 0; font-size: 11.5px; color: var(--gris-clair); }
.pf .dsx-fil i { font-style: normal; opacity: .5; margin: 0 4px; }
.pf .dsx-fil b { color: #fff; font-weight: 500; }

/* 09 — Tokens */
.pf .dsx-code {
  margin: 0; padding: 12px;
  background: rgba(0,0,0,.4);
  overflow-x: auto;
}
.pf .dsx-code code { color: rgba(255,255,255,.8); line-height: 1.7; white-space: pre; }

@media (max-width: 1100px) { .pf .dsx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .pf .dsx { grid-template-columns: 1fr; } }

/* Fiches compactées : la hauteur d'une rangée est dictée par sa fiche la plus
   haute, d'où la palette repassée sur deux colonnes. */
.pf .dsx { gap: 10px; }
.pf .dsx-fiche { padding: 13px; gap: 11px; }
.pf .dsx-fiche h3 { font-size: 13.5px; }
.pf .dsx-fiche header p { font-size: 10.5px; }
.pf .dsx-fiche header { gap: 3px; }
.pf .dsx code { font-size: 10px; }

.pf .dsx-pal { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.pf .dsx-pal li { font-size: 10.5px; gap: 7px; }
.pf .dsx-pal i { width: 13px; height: 13px; }

.pf .dsx-typo { gap: 13px; }
.pf .dsx-typo b { font-size: 34px; }
.pf .dsx-typo dl { gap: 4px; }
.pf .dsx-typo dt { font-size: 10.5px; }

.pf .dsx-esp { gap: 6px; }
.pf .dsx-esp i { height: 6px; }

.pf .dsx-ray { gap: 8px; }
.pf .dsx-ray i { aspect-ratio: 3 / 2; }
.pf .dsx-ray span { gap: 5px; }

.pf .dsx-btns { gap: 6px; }
.pf .dsxb { padding: 6px 8px; font-size: 10.5px; }

.pf .dsx-champs { gap: 6px; }
.pf .dsxf { padding: 7px 9px; font-size: 10.5px; }

.pf .dsx-sel { gap: 7px; }
.pf .dsx-sel span { font-size: 10.5px; gap: 8px; }
.pf .dsxc, .pf .dsxr { width: 13px; height: 13px; }
.pf .dsxw { width: 23px; height: 13px; }
.pf .dsxw::after { width: 9px; height: 9px; }

.pf .dsx-nav { gap: 9px; }
.pf .dsx-seg em { padding: 4px 9px; font-size: 10.5px; }
.pf .dsx-fil { font-size: 10.5px; }

.pf .dsx-code { padding: 10px; }
.pf .dsx-code code { line-height: 1.55; }

/* Second passage de compactage : la rangée fait 178 px, on vise ~140. */
.pf .dsx { margin-top: var(--r-visuel); gap: 9px; }
.pf .dsx-fiche { padding: 11px; gap: 9px; }
.pf .dsx-fiche h3 { font-size: 12.5px; }
.pf .dsx-fiche header p { font-size: 10px; }

.pf .dsx-pal { gap: 4px 10px; }
.pf .dsx-pal li { font-size: 10px; gap: 6px; }
.pf .dsx-pal i { width: 11px; height: 11px; }

.pf .dsx-typo { gap: 11px; }
.pf .dsx-typo b { font-size: 27px; }
.pf .dsx-typo dl { gap: 3px; }
.pf .dsx-typo dt { font-size: 10px; }

.pf .dsx-esp { gap: 5px; }
.pf .dsx-esp i { height: 5px; }

.pf .dsx-ray { gap: 7px; }
.pf .dsx-ray i { aspect-ratio: 2 / 1; }
.pf .dsx-ray span { gap: 4px; }

.pf .dsx-btns { gap: 5px; }
.pf .dsxb { padding: 5px 7px; font-size: 10px; }

.pf .dsx-champs { gap: 5px; }
.pf .dsxf { padding: 6px 8px; font-size: 10px; }

.pf .dsx-sel { gap: 5px; }
.pf .dsx-sel span { font-size: 10px; }

.pf .dsx-nav { gap: 7px; }
.pf .dsx-seg em { padding: 4px 8px; font-size: 10px; }
.pf .dsx-fil { font-size: 10px; }

.pf .dsx-code { padding: 9px; }
.pf .dsx-code code { line-height: 1.45; font-size: 9.5px; }

.pf .systeme-faits { margin-top: var(--r-texte); padding-top: var(--r-texte); }

/* Le bloc Design System adopte les dimensions des montages projets :
   même largeur (900) et même position gauche (270) que les trois visuels. */
.pf .dsx {
  width: min(100%, calc(var(--h-montage) * 1.5));
  margin-inline: auto;
}

/* Le texte d'introduction du Design System revient dans la colonne de lecture
   centrée, comme celui de toutes les autres sections. */
.pf .systeme-texte {
  width: min(100%, var(--mesure));
  margin-inline: auto;
}

/* La ligne de faits (9 familles / Couleur · Espacement · Rayon / Défaut ·
   Survol…) s'étalait sur 1080 alors que la grille du Design System juste
   au-dessus fait 900. Elle est ramenée sur la même colonne, centrée. */
.pf .systeme-faits {
  width: min(100%, calc(var(--h-montage) * 1.5));
  margin-inline: auto;
}

/* ==========================================================================
   OUTILS — bandeau défilant
   Deux pistes identiques se suivent ; la seconde est masquée aux lecteurs
   d'écran. Chacune glisse de sa propre largeur, ce qui rend la boucle
   invisible. Les bords sont estompés pour que les pastilles n'apparaissent
   pas coupées net.
   ========================================================================== */

.pf .outils-bande {
  display: flex;
  gap: 8px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.pf .outils-bande ul {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px;
  animation: outils-defile 26s linear infinite;
}

.pf .outils-bande li { flex: 0 0 auto; }

.pf .outils-bande:hover ul,
.pf .outils-bande:focus-within ul { animation-play-state: paused; }

@keyframes outils-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--outils-ecart, 8px))); }
}

/* Sans animation : la seconde piste disparaît et la première revient à une
   simple liste qui passe à la ligne, comme avant. */
@media (prefers-reduced-motion: reduce) {
  .pf .outils-bande { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .pf .outils-bande ul { animation: none; flex-wrap: wrap; }
  .pf .outils-bande ul[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   PAGE BLOG — liste des articles
   Même principe que la liste de contact : la colonne de lecture de 540, pas
   de trait ni de cadre, un fond qui se révèle au survol. Le rembourrage est
   compensé à gauche pour que les titres restent alignés sur la colonne.
   ========================================================================== */

.pf .billets {
  width: min(100%, var(--mesure));
  margin-inline: auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.pf .billet {
  display: block;
  margin-inline: -18px;
  padding: 20px 18px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: background-color .25s var(--ease);
}

.pf .billet:hover,
.pf .billet:focus-visible { background: var(--papier-2); }

.pf .billet-meta {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-txt);
}

.pf .billet-titre {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--encre);
}

.pf .billet-extrait {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gris-txt);
}

@media (max-width: 760px) {
  .pf .billet { margin-inline: -14px; padding: 16px 14px; border-radius: 12px; }
  .pf .billet-titre { font-size: 18px; }
  .pf .billet-extrait { font-size: 14px; }
}

/* Les outils perdent leur pastille : plus de fond, plus de bordure, plus de
   coin arrondi. Il ne reste que le logo et son nom, séparés par du vide.
   L'écart entre deux outils (--outils-ecart) sert à la fois de gap et de
   correctif dans l'animation, pour que la boucle reste invisible quel que
   soit l'écart choisi. */
.pf .outils li {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.pf .outils-bande { --outils-ecart: 30px; gap: var(--outils-ecart); }
.pf .outils-bande ul { gap: var(--outils-ecart); }

@media (max-width: 760px) {
  .pf .outils-bande { --outils-ecart: 24px; }
}

/* ==========================================================================
   PAGE BLOG — liste des articles
   Même principe que la liste de contact : la colonne de lecture de 540, pas
   de trait ni de cadre, un fond qui se révèle au survol. Le rembourrage est
   compensé à gauche pour que les titres restent alignés sur la colonne.
   ========================================================================== */

.pf .billets {
  width: min(100%, var(--mesure));
  margin-inline: auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.pf .billet {
  display: block;
  margin-inline: -18px;
  padding: 20px 18px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: background-color .25s var(--ease);
}

.pf .billet:hover,
.pf .billet:focus-visible { background: var(--papier-2); }

.pf .billet-meta {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-txt);
}

.pf .billet-titre {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--encre);
}

.pf .billet-extrait {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gris-txt);
}

@media (max-width: 760px) {
  .pf .billet { margin-inline: -14px; padding: 16px 14px; border-radius: 12px; }
  .pf .billet-titre { font-size: 18px; }
  .pf .billet-extrait { font-size: 14px; }
}

/* Les outils perdent leur pastille : plus de fond, plus de bordure, plus de
   coin arrondi. Il ne reste que le logo et son nom, séparés par du vide.
   L'écart entre deux outils (--outils-ecart) sert à la fois de gap et de
   correctif dans l'animation, pour que la boucle reste invisible quel que
   soit l'écart choisi. */
.pf .outils li {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.pf .outils-bande { --outils-ecart: 30px; gap: var(--outils-ecart); }
.pf .outils-bande ul { gap: var(--outils-ecart); }

@media (max-width: 760px) {
  .pf .outils-bande { --outils-ecart: 24px; }
}

/* ==========================================================================
   PAGE CONTACT
   L'adresse e-mail porte la page : elle est composée en grand, juste sous la
   description, dans la même colonne de lecture que tout le reste du site.
   Le téléphone et les trois réseaux suivent en petit. Aucun cadre, aucune
   pastille, aucun trait — seul le corps du texte hiérarchise.
   ========================================================================== */

.pf .contact-adresse {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  margin-top: var(--r-visuel);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--encre);
  text-decoration: none;
  word-break: break-word;
}

.pf .contact-adresse .fleche {
  font-size: .6em;
  transition: transform .25s var(--ease);
}
.pf .contact-adresse:hover .fleche,
.pf .contact-adresse:focus-visible .fleche { transform: translate(3px, -3px); }
.pf .contact-adresse:hover .contact-adresse-txt,
.pf .contact-adresse:focus-visible .contact-adresse-txt {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.pf .contact-tel {
  margin-top: var(--r-texte);
  font-size: 16px;
  color: var(--gris-txt);
}
.pf .contact-tel a {
  color: var(--encre);
  text-decoration: none;
  font-weight: 500;
}
.pf .contact-tel a:hover { text-decoration: underline; text-underline-offset: 4px; }

.pf .contact-reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: var(--r-bloc);
}
.pf .contact-reseaux a {
  font-size: 14px;
  color: var(--encre);
  text-decoration: none;
}
.pf .contact-reseaux a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pf .contact-reseaux .fleche {
  display: inline-block;
  transition: transform .25s var(--ease);
}
.pf .contact-reseaux a:hover .fleche { transform: translate(2px, -2px); }

/* L'adresse, le téléphone et les réseaux rejoignent la colonne de lecture,
   comme le titre et la description au-dessus. */
.pf .contact-page > .wrap > .contact-adresse,
.pf .contact-page > .wrap > .contact-tel,
.pf .contact-page > .wrap > .contact-reseaux {
  width: min(100%, var(--mesure));
  margin-inline: auto;
}

/* La page ne contient qu'une section : elle doit remplir la hauteur d'écran
   pour que le pied de page ne remonte pas au milieu du navigateur. */
.pf .contact-page { min-height: 62vh; }

@media (max-width: 760px) {
  .pf .contact-reseaux { gap: 18px; }
  .pf .contact-page { min-height: 0; }
}

/* ==========================================================================
   DESIGN SYSTEM SUR MOBILE — bloc réduit
   Sous 680 px les neuf fiches s'empilaient sur une colonne : la section
   faisait 2,3 écrans de haut. Elles repassent sur deux colonnes, et chaque
   contenu interne qui ne tient pas dans 159 px est remis sur une colonne.
   La fiche Tokens, seule sur sa rangée, occupe les deux colonnes.
   ========================================================================== */

@media (max-width: 680px) {
  .pf .dsx { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  /* La palette et les boutons tiennent mal côte à côte dans une demi-fiche. */
  .pf .dsx-pal  { grid-template-columns: 1fr; }
  .pf .dsx-btns { grid-template-columns: 1fr; }
  .pf .dsx-ray  { grid-template-columns: repeat(2, 1fr); }

  /* Le grand « Aa » passe au-dessus de l'échelle, sinon les valeurs de la
     colonne de droite se coupent en deux lignes. */
  .pf .dsx-typo   { flex-direction: column; gap: 8px; }
  .pf .dsx-typo b { font-size: 28px; }

  .pf .dsx-fiche:last-child { grid-column: 1 / -1; }
}

/* Le visuel de la Méthode reprend exactement la géométrie des montages
   projets : 900 de large, 600 de haut, centré à 270. Même règle que celle
   appliquée aux iframes des projets. */
/* Contrairement aux montages projets, ce visuel est déjà dans un .wrap :
   il ne doit pas reprendre la marge latérale une seconde fois, sinon il est
   40 px plus étroit que les autres sur mobile. */
.pf .methode-montage { width: 100%; padding-inline: 0; }

.pf .methode-montage img {
  display: block;
  width: min(100%, calc(var(--h-montage) * 1.5));
  height: var(--h-montage);
  object-fit: cover;
  margin-inline: auto;
}

/* ==========================================================================
   ANIMATIONS
   Courbes et durées relevées sur thierrychopain.com : les transformations
   suivent cubic-bezier(.77, 0, .18, 1) sur 1,2 s, les opacités
   cubic-bezier(.32, .94, .6, 1) sur 0,8 s, les titres se révèlent ligne
   par ligne sur 1,4 s.

   L'état masqué dépend de la classe « js-anim », posée par animations.js.
   Sans JavaScript, ou avec « moins d'animations » activé, tout reste
   visible et immobile.
   ========================================================================== */

.pf {
  --ease-transf: cubic-bezier(.77, 0, .18, 1);
  --ease-appar:  cubic-bezier(.32, .94, .6, 1);
}

/* --- Apparition au défilement --- */

/* L'état masqué est décrit ici, et non posé par le script : appliqué dès le
   premier rendu, il évite que le contenu s'affiche puis s'efface. Le script
   n'a plus qu'à ajouter « vu » au bon moment.

   La règle qui révèle reprend la MÊME liste suivie de .vu. C'est nécessaire :
   :is() adopte la spécificité de son argument le plus fort, donc un simple
   « .vu » serait battu par l'état masqué et rien ne s'afficherait jamais. */

.js-anim .pf :is(
    .hero-texte .label, .hero-role, .hero-logos, .hero-desc, .hero-actions, .hero-portrait,
    .bloc > .wrap > .label, .bloc-desc, .systeme-texte .bloc-desc,
    .pills, .cas-texte, .cas-montage, .methode-montage,
    .colonnes-4 > *, .cartes-4 > *, .expertise-texte, .dsx-fiche, .etape,
    .systeme-faits > div, .final-faits > div, .final-actions,
    .about-texte, .about-cote, .outils, .coord li,
    .contact-lignes, .contact-form
  ) {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s var(--ease-appar), transform 1.2s var(--ease-transf);
  will-change: opacity, transform;
}

.js-anim .pf :is(
    .hero-texte .label, .hero-role, .hero-logos, .hero-desc, .hero-actions, .hero-portrait,
    .bloc > .wrap > .label, .bloc-desc, .systeme-texte .bloc-desc,
    .pills, .cas-texte, .cas-montage, .methode-montage,
    .colonnes-4 > *, .cartes-4 > *, .expertise-texte, .dsx-fiche, .etape,
    .systeme-faits > div, .final-faits > div, .final-actions,
    .about-texte, .about-cote, .outils, .coord li,
    .contact-lignes, .contact-form
  ).vu {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- Titres révélés ligne par ligne --- */

.js-anim .pf .titre-anime .ln {
  display: block;
  overflow: hidden;
  /* Les jambages des lettres seraient rognés par l'overflow : on rend un
     peu de place sous chaque ligne et on la reprend en marge négative. */
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.js-anim .pf .titre-anime .ln-in {
  display: block;
  transform: translateY(105%);
  transition: transform 1.4s var(--ease-transf);
  will-change: transform;
}
.js-anim .pf .titre-anime.vu .ln-in {
  transform: none;
  will-change: auto;
}

/* --- Parallaxe des visuels --- */

.pf .cas-montage iframe,
.pf .cas-montage img,
.pf .methode-montage img { will-change: transform; }

/* --- Survols --- */

/* Le visuel d'un projet se rapproche légèrement au survol de sa carte. */
.pf .cas-montage img,
.pf .methode-montage img { transition: scale 1.2s var(--ease-transf); }
.pf .cas-montage:hover img,
.pf .methode-montage:hover img { scale: 1.015; }

/* Les liens de navigation et de pied de page se soulignent en glissant
   depuis la gauche plutôt qu'en apparaissant d'un bloc. */
.pf .pf-nav a,
.pf .pied-nav a,
.pf .pied-social a { position: relative; }
.pf .pf-nav a::after,
.pf .pied-nav a::after,
.pf .pied-social a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease-transf);
}
.pf .pf-nav a:hover::after,
.pf .pf-nav a:focus-visible::after,
.pf .pied-nav a:hover::after,
.pf .pied-social a:hover::after { transform: scaleX(1); }

/* Le soulignement natif ferait doublon avec le trait animé. */
.pf .pied a:hover { text-decoration: none; }

/* --- Respect du réglage système --- */

@media (prefers-reduced-motion: reduce) {
  .js-anim .pf [class],
  .js-anim .pf .titre-anime .ln-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pf .cas-montage:hover img,
  .pf .methode-montage:hover img { scale: 1; }
  .pf .pf-nav a::after,
  .pf .pied-nav a::after,
  .pf .pied-social a::after { transition: none; }
}

/* ==========================================================================
   HERO — portrait rond à droite
   Disposition relevée sur julius.fm : le texte occupe la colonne de gauche,
   le portrait est un cercle calé sur le bord droit du conteneur. Les trois
   liens remplacent les deux boutons d'action.
   ========================================================================== */

.pf .hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(28px, 3.5vw, 52px);
}

/* Le texte se resserre pour laisser sa place au portrait. */
.pf .hero-texte { max-width: 640px; }

.pf .hero-portrait { margin: 0; }
.pf .hero-portrait img {
  display: block;
  width: clamp(150px, 19vw, 276px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

/* Sous 900 px il n'y a plus la place de deux colonnes : le portrait passe
   au-dessus du texte, en plus petit. */
@media (max-width: 900px) {
  .pf .hero-in { grid-template-columns: 1fr; }
  /* La photo reste au-dessus du texte mais se cale sur le bord droit,
     comme chez julius.fm en 375 px. */
  .pf .hero-portrait { order: -1; margin-left: auto; }
  .pf .hero-portrait img { width: clamp(112px, 26vw, 150px); }
}

/* ==========================================================================
   HERO — nom et rôle en tête, à la manière de julius.fm
   Relevé chez eux à 1440 px : nom 28/700 en encre, rôle 28/400 en gris,
   texte courant 18 px avec une interligne de 27,9 (soit 1,55).
   ========================================================================== */

.pf .hero-nom {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.pf .hero-role {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #9A9A9A;
  margin: 0 0 var(--r-visuel);
}

/* Le texte du hero passe en petit corps, comme chez eux : 18 px, interligne
   1,55, et en encre plutôt qu'en gris — c'est le paragraphe d'accroche. */
.pf .hero-desc {
  font-size: 18px;
  line-height: 1.55;
  color: var(--encre);
  max-width: 46ch;
}

/* La photo grandit maintenant que le grand titre a disparu. */
.pf .hero-portrait img { width: clamp(180px, 24vw, 344px); }

@media (max-width: 900px) {
  .pf .hero-portrait img { width: clamp(130px, 32vw, 190px); }
  .pf .hero-desc { font-size: 16px; }
  .pf .hero-role { margin-bottom: 28px; }
}

/* Déplacée hors de la section À propos, la bande d'outils n'était plus
   contrainte par la colonne de lecture : ses deux pistes la faisaient
   déborder de la page. Elle reprend la colonne centrée du site. */
.pf .outils {
  width: min(100%, var(--mesure));
  margin-inline: auto;
}
.pf .outils-bande { width: 100%; }

/* ==========================================================================
   HERO — ligne de logos et mot manuscrit
   Relevés sur julius.fm à 1440 px : logos de 24 px de haut espacés de 30 px,
   posés entre le rôle et le texte ; note manuscrite en Caveat 27 px à gauche
   de la photo, chaque ligne décalée de 12 px vers la droite.
   ========================================================================== */

.pf .hero-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 30px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.pf .hero-logos li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--encre);
}
.pf .hero-logos img {
  width: auto;
  height: 20px;
  object-fit: contain;
}

/* Le rôle se rapproche des logos, qui portent maintenant la respiration. */
.pf .hero-role { margin-bottom: 22px; }

.pf .hero-portrait { position: relative; }

.pf .hero-mot {
  position: absolute;
  right: calc(100% + 12px);
  bottom: 16%;
  font-family: Caveat, cursive;
  font-weight: 600;
  font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1.02;
  color: var(--encre);
  text-align: right;
  white-space: nowrap;
  pointer-events: none;
}
.pf .hero-mot span { display: block; }
.pf .hero-mot span + span { transform: translateX(12px); }

@media (max-width: 900px) {
  .pf .hero-logos { gap: 12px 20px; margin-bottom: 26px; }
  .pf .hero-logos li { font-size: 13px; }
  .pf .hero-logos img { height: 18px; }
  .pf .hero-mot { bottom: 10%; right: calc(100% + 8px); }
}

/* Sous 380 px la note n'a plus la place de tenir à gauche du portrait. */
@media (max-width: 380px) {
  .pf .hero-mot { display: none; }
}

/* L'en-tête gardait la formule d'origine — largeur 1080 plus 24 px de marge
   interne — alors que .wrap est passé à « 100% moins deux marges, sans
   padding ». Résultat : le logo et le menu étaient 24 px en retrait du
   contenu. Même formule des deux côtés, donc mêmes bords. */
.pf .pf-entete-in {
  width: min(100% - var(--pad) * 2, var(--wrap));
  padding-inline: 0;
}

/* Le burger fait 44 px de large pour rester confortable au doigt, mais ses
   trois traits n'en occupent que 22 et sont centrés dans le bouton : ils
   tombaient 11 px en deçà du bord du contenu. Le bouton est décalé de cette
   moitié, sa zone tactile reste entière. */
@media (max-width: 760px) {
  .pf .pf-entete-in .burger { margin-right: -11px; }
}

/* Même hauteur dans la bande défilante. */
.pf .outils-bande img { height: 18px; width: auto; }

/* ==========================================================================
   EXPERTISE — deux colonnes, cartes empilées
   Principe repris de julianpenin.com : le titre et le texte tiennent la
   colonne de gauche, les domaines deviennent des cartes empilées à droite,
   chacune marquée d'un petit signe. Les couleurs et la typographie restent
   celles du site.
   ========================================================================== */

.pf .expertise-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.pf .expertise-texte .bloc-titre { margin-bottom: var(--r-texte); }
.pf .expertise-texte .bloc-desc { max-width: 40ch; }

/* Les règles de centrage du site visent .bloc > .wrap > … ; ici le titre est
   d'un niveau plus bas et doit rester calé à gauche de sa colonne. */
.pf .expertise-texte .label,
.pf .expertise-texte .bloc-titre,
.pf .expertise-texte .bloc-desc {
  width: auto;
  margin-inline: 0;
}

.pf .expertise-cartes {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf .expertise-carte {
  display: flex;
  gap: 14px;
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--papier-2);
}

.pf .expertise-signe {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 2px;
  background: var(--encre);
  transform: rotate(45deg);
}

.pf .expertise-carte h3 {
  margin: 0 0 7px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--encre);
}

.pf .expertise-carte p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gris-txt);
}

@media (max-width: 900px) {
  .pf .expertise-grille { grid-template-columns: 1fr; gap: 28px; }
  .pf .expertise-texte .bloc-desc { max-width: none; }
  .pf .expertise-carte { padding: 18px 18px; gap: 12px; }
}

/* Cartes d'expertise : angles droits, et chaque intitulé sur sa ligne plutôt
   qu'une suite séparée par des points. */
.pf .expertise-carte { border-radius: 0; }

.pf .expertise-carte ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf .expertise-carte li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris-txt);
}

/* Plus de losange devant les titres de carte : la carte redevient un simple
   bloc, sans la colonne qui accueillait le signe. */
.pf .expertise-carte {
  display: block;
  gap: 0;
}
.pf .expertise-signe { display: none; }

/* Le fond des cartes reprend le gris de julius.fm, relevé sur leur page :
   #F7F7F7, la seule teinte grise qu'ils emploient (7 grands éléments). */
.pf .expertise-carte { background: #F7F7F7; }

/* Le pied de page n'a plus sa colonne de navigation : deux colonnes
   suffisent, l'identité à gauche et les réseaux à droite. */
.pf .pied-grille { grid-template-columns: minmax(0, 1fr) auto; }

/* ==========================================================================
   PAGE CONTACT — deux colonnes
   Structure reprise de julianpenin.com : le texte et les coordonnées à
   gauche, le formulaire à droite. Leur formulaire n'a ni action ni méthode
   et son champ s'appelle « body » : il compose un mailto:. Le site étant
   statique, on fait de même. Les couleurs restent celles du site.
   ========================================================================== */

.pf .contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}

/* Le centrage global vise .bloc > .wrap > … ; ici tout est d'un niveau plus
   bas et doit rester calé à gauche de sa colonne. */
.pf .contact-gauche .label,
.pf .contact-gauche .bloc-titre,
.pf .contact-gauche .bloc-desc {
  width: auto;
  margin-inline: 0;
}
.pf .contact-gauche .bloc-desc { max-width: 42ch; }

/* --- Coordonnées : libellé à gauche, valeur à droite, séparées d'un filet */

.pf .contact-lignes {
  margin: var(--r-bloc) 0 0;
  padding: 0;
  border-top: 1px solid var(--trait);
}
.pf .contact-lignes > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--trait);
}
.pf .contact-lignes dt {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-txt);
}
.pf .contact-lignes dd { margin: 0; font-size: 14.5px; text-align: right; }
.pf .contact-lignes a { color: var(--encre); text-decoration: none; }
.pf .contact-lignes a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Formulaire --- */

.pf .contact-form { display: grid; gap: 18px; }

.pf .champ { display: grid; gap: 8px; }
.pf .champ label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-txt);
}
.pf .champ label span { text-transform: none; letter-spacing: 0; }

.pf .champ input,
.pf .champ textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--papier);
  font: inherit;
  font-size: 15px;
  color: var(--encre);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pf .champ textarea { resize: vertical; min-height: 130px; line-height: 1.55; }

.pf .champ input::placeholder,
.pf .champ textarea::placeholder { color: #A5A5AB; }

.pf .champ input:focus,
.pf .champ textarea:focus {
  outline: none;
  border-color: var(--encre);
  box-shadow: 0 0 0 3px rgba(13, 13, 15, .08);
}

.pf .champ-erreur {
  margin: 0;
  font-size: 13px;
  color: #C0392B;
}

.pf .contact-envoyer { justify-content: center; width: 100%; }
.pf .contact-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gris-txt);
}

@media (max-width: 900px) {
  .pf .contact-grille { grid-template-columns: 1fr; gap: 34px; }
  .pf .contact-gauche .bloc-desc { max-width: none; }
  .pf .contact-lignes { margin-top: 30px; }
}

/* Le bloc contact de l'accueil est sur fond noir : le formulaire et les
   lignes de coordonnées s'y adaptent. */
.pf .bloc--noir .contact-lignes { border-top-color: var(--trait-fonce); }
.pf .bloc--noir .contact-lignes > div { border-bottom-color: var(--trait-fonce); }
.pf .bloc--noir .contact-lignes dt { color: var(--gris-clair); }
.pf .bloc--noir .contact-lignes a { color: #fff; }

.pf .bloc--noir .champ label { color: var(--gris-clair); }
.pf .bloc--noir .champ input,
.pf .bloc--noir .champ textarea {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}
.pf .bloc--noir .champ input::placeholder,
.pf .bloc--noir .champ textarea::placeholder { color: rgba(255, 255, 255, .42); }
.pf .bloc--noir .champ input:focus,
.pf .bloc--noir .champ textarea:focus {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}
.pf .bloc--noir .champ-erreur { color: #FF8A7A; }
.pf .bloc--noir .contact-note { color: var(--gris-clair); }

/* Le titre du bloc contact garde sa grande taille sur l'accueil. */
.pf .final .contact-gauche .bloc-titre { font-size: clamp(32px, 4vw, 52px); }

/* ==========================================================================
   PAGE CONTACT
   Même grille que le reste du portfolio : l'introduction dans la colonne de
   lecture centrée, puis un bloc de 900 calé à 270 — les dimensions des
   montages projets — qui porte les coordonnées et le formulaire.
   ========================================================================== */

.pf .contact-bloc {
  width: min(100%, calc(var(--h-montage) * 1.5));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
}

/* --- Coordonnées : libellé à gauche, valeur à droite --- */

.pf .contact-lignes {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--trait);
}
.pf .contact-lignes > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--trait);
}
.pf .contact-lignes dt {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-txt);
}
.pf .contact-lignes dd { margin: 0; font-size: 14.5px; text-align: right; }
.pf .contact-lignes a { color: var(--encre); text-decoration: none; }
.pf .contact-lignes a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Formulaire, dans le gris des cartes du site --- */

.pf .contact-form {
  display: grid;
  gap: 16px;
  padding: 24px;
  background: #F7F7F7;
}
.pf .contact-form > .label { margin-bottom: 0; }

.pf .champ { display: grid; gap: 7px; }
.pf .champ label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-txt);
}
.pf .champ label span { text-transform: none; letter-spacing: 0; }

.pf .champ input,
.pf .champ textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--trait);
  border-radius: 0;
  background: var(--papier);
  font: inherit;
  font-size: 15px;
  color: var(--encre);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pf .champ textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.pf .champ input::placeholder,
.pf .champ textarea::placeholder { color: #A5A5AB; }
.pf .champ input:focus,
.pf .champ textarea:focus {
  outline: none;
  border-color: var(--encre);
  box-shadow: 0 0 0 3px rgba(13, 13, 15, .08);
}

.pf .champ-erreur { margin: 0; font-size: 13px; color: #C0392B; }
.pf .contact-envoyer { justify-content: center; width: 100%; }
.pf .contact-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--gris-txt); }

@media (max-width: 900px) {
  .pf .contact-bloc { grid-template-columns: 1fr; gap: 30px; }
  .pf .contact-form { padding: 18px; }
}

/* Page contact : tout le texte gris passe en noir — surtitres, description,
   libellés des coordonnées et des champs, note sous le bouton. Les textes
   d'exemple des champs restent gris : en noir, ils se confondraient avec une
   saisie réelle. */
.pf.page-contact .label,
.pf.page-contact .bloc-desc,
.pf.page-contact .contact-lignes dt,
.pf.page-contact .champ label,
.pf.page-contact .contact-note {
  color: var(--encre);
}

/* Le panneau du formulaire portait déjà le gris des cartes, mais les champs
   ressortaient en blanc. Ce sont eux qui deviennent les blocs gris : le
   panneau s'efface, chaque champ prend le #F7F7F7 des cartes de l'accueil. */
.pf.page-contact .contact-form {
  background: transparent;
  padding: 0;
}
.pf.page-contact .champ input,
.pf.page-contact .champ textarea {
  background: #F7F7F7;
  border-color: transparent;
}
.pf.page-contact .champ input:focus,
.pf.page-contact .champ textarea:focus {
  background: #F7F7F7;
  border-color: var(--encre);
}

/* Pied de page resserré : LinkedIn et Instagram côte à côte plutôt qu'empilés,
   et moins d'air autour — le pied n'a plus que deux colonnes depuis le retrait
   de la navigation, il n'avait plus besoin de cette hauteur. */
.pf .pied-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.pf .pied { padding-block: 34px 20px; }
.pf .pied-grille { padding-bottom: 22px; gap: 24px; }
.pf .pied-bas { padding-top: 16px; }

@media (max-width: 760px) {
  .pf .pied { padding-block: 26px 18px; }
  .pf .pied-grille { padding-bottom: 18px; gap: 18px; }
  .pf .pied-social { gap: 18px; }
}


/* Le bloc du hero — nom, logos, texte, portrait — démarre plus bas : c'est la
   section entière qui est décalée, pas l'écart entre ses éléments. */
.pf .hero { padding-top: calc(var(--section) + 56px); }

@media (max-width: 900px) {
  /* Sur mobile le bloc remonte : l'en-tête est déjà collante et la photo
     arrive juste dessous, il n'y a pas besoin d'autant d'air au-dessus. */
  .pf .hero { padding-top: 14px; }
}

/* ==========================================================================
   PASTILLE DE DÉFILEMENT
   Permanente et à deux rôles : descendre d'un écran, puis remonter. Plus
   compacte que le modèle de julius.fm, et animée — la flèche respire tant
   qu'elle invite à descendre, et le libellé se fond quand il change.
   ========================================================================== */

.pf .haut {
  opacity: 1;
  pointer-events: auto;
  min-height: 36px;
  padding: 8px 11px 8px 14px;
  font-size: 13.5px;
  line-height: 17px;
  gap: 7px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .13);
  transition: box-shadow .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.pf .haut:hover,
.pf .haut:focus-visible {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .19);
  transform: translateY(-2px);
}
.pf .haut:active { transform: translateY(0) scale(.97); }

/* Le libellé se fond pendant le changement de rôle. */
.pf .haut-texte,
.pf .haut-fleche {
  display: inline-block;
  transition: opacity .18s ease, transform .18s ease;
}
.pf .haut.change .haut-texte,
.pf .haut.change .haut-fleche { opacity: 0; transform: translateY(3px); }

/* Tant que la pastille invite à descendre, sa flèche respire. */
.pf .haut.vers-le-bas .haut-fleche { animation: haut-respire 1.9s ease-in-out infinite; }

@keyframes haut-respire {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

@media (max-width: 760px) {
  .pf .haut {
    min-height: 34px;
    padding: 8px 10px 8px 13px;
    font-size: 12.5px;
    line-height: 16px;
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf .haut,
  .pf .haut-texte,
  .pf .haut-fleche { transition: none; }
  .pf .haut.vers-le-bas .haut-fleche { animation: none; }
  .pf .haut:hover { transform: none; }
}

/* ==========================================================================
   EFFETS — survol des boutons et pliage des cartes
   Les boutons s'inversent au survol : le blanc devient noir, le noir devient
   blanc. Les cartes se déplient au défilement, pilotées par la timeline de
   vue quand le navigateur la connaît.
   ========================================================================== */

.pf .btn {
  transition: background-color .35s var(--ease-transf),
              color .35s var(--ease-transf),
              box-shadow .35s var(--ease-transf),
              transform .3s cubic-bezier(.22, 1, .36, 1);
}

/* Blanc → noir */
.pf .btn:hover,
.pf .btn:focus-visible { background: var(--encre); color: #fff; }

/* Noir → blanc, avec un filet pour qu'il reste visible sur fond clair */
.pf .btn--noir:hover,
.pf .btn--noir:focus-visible {
  background: var(--papier);
  color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--trait);
}

/* Sur fond sombre, le bouton clair s'inverse aussi */
.pf .btn--clair:hover,
.pf .btn--clair:focus-visible {
  background: var(--encre);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
}

/* Le fantôme se remplit */
.pf .btn--fantome:hover,
.pf .btn--fantome:focus-visible {
  background: #fff;
  color: var(--encre);
  box-shadow: inset 0 0 0 1px #fff;
}

.pf .btn:hover { transform: translateY(-2px); }
.pf .btn:active { transform: translateY(0) scale(.97); }

/* La pastille flotte doucement tant qu'elle invite à descendre. */
.pf .haut.vers-le-bas { animation: haut-flotte 3.4s ease-in-out infinite; }
@keyframes haut-flotte {
  0%, 100% { translate: -50% 0; }
  50%      { translate: -50% -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf .btn { transition: none; }
  .pf .btn:hover { transform: none; }
  .pf .haut.vers-le-bas { animation: none; }
}

/* ==========================================================================
   MENTION VERTICALE
   Reprise du principe de thierrychopain.com : une ligne fixée sur le bord
   gauche, tournée d'un quart de tour, centrée dans la hauteur de l'écran.
   Valeurs relevées chez eux : Manrope 12 px / 400, à 24 px du bord.
   ========================================================================== */

.pf .hero-credit {
  position: fixed;
  right: 22px;
  /* Descendue nettement sous le centre. Le décalage est plafonné par la
     hauteur disponible : la mention mesure ~300 px et ne doit jamais sortir
     du cadre sur un écran court. */
  top: calc(50% + min(140px, (100vh - 300px) / 2 - 24px));
  z-index: 50;
  margin: 0;
  writing-mode: vertical-rl;
  /* « rotate » plutôt que « transform » : une règle qui poserait
     transform: none ne pourrait plus annuler le retournement. */
  rotate: 180deg;
  translate: 0 -50%;
  font-family: Manrope, Inter, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--gris-txt);
  pointer-events: none;
}

/* Sous 1100 px la colonne de contenu descend trop près du bord : la mention
   n'aurait plus sa place et passerait sur le texte. */
@media (max-width: 1100px) {
  .pf .hero-credit { display: none; }
}

/* Portrait nettement plus grand sur mobile : il occupait à peine un tiers de
   la largeur, alors qu'il est le premier élément visible de la page. La
   figure est réduite à la taille de l'image pour que le calage à droite
   fonctionne, et bornée pour ne jamais dépasser sur un écran étroit. */
@media (max-width: 900px) {
  .pf .hero-portrait {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
  }
  .pf .hero-portrait img {
    width: clamp(150px, 46vw, 230px);
    max-width: 100%;
  }
}

/* « 1fr » vaut « minmax(auto, 1fr) » : un contenu plus large que la piste la
   repousse au-delà du conteneur. À 320 px la colonne du hero atteignait
   292 px dans un conteneur de 280, et le portrait débordait. */
@media (max-width: 900px) {
  .pf .hero-in { grid-template-columns: minmax(0, 1fr); }
}

/* Aucune animation sur les cartes, ni sur ordinateur ni sur mobile.
   L'ancienne feuille styles.css anime encore « .billet » via une timeline de
   vue (monte-doux) : elle masquait 27 des 29 articles du blog, dont certains
   visibles à l'écran. On la neutralise ici, cette feuille étant chargée après. */
.pf .billet,
.pf .expertise-carte {
  animation: none !important;
  opacity: 1 !important;
  translate: none !important;
  transform: none !important;
}

/* La ligne de copyright porte le logo plutôt que le nom en toutes lettres. */
.pf .pied-marque {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--encre);
}
.pf .pied-marque sup { font-size: .55em; top: -.6em; }

/* Plus de filet entre les deux rangées du pied : il n'a plus rien à séparer
   depuis que la colonne d'identité a disparu. La grille n'a plus qu'une
   colonne, les réseaux restent calés à droite. */
.pf .pied-bas { border-top: 0; padding-top: 0; }
.pf .pied-grille { grid-template-columns: 1fr; padding-bottom: 14px; }
.pf .pied-social { justify-content: flex-end; }

/* Le pied tient sur une seule ligne : le copyright à gauche, les réseaux à
   droite. Plus de grille ni de rangée séparée, donc moins de hauteur. */
.pf .pied { padding-block: 20px 20px; }
.pf .pied-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding-top: 0;
  border-top: 0;
}
.pf .pied-social { gap: 22px; }

@media (max-width: 760px) {
  .pf .pied { padding-block: 16px 16px; }
  .pf .pied-bas { gap: 10px 18px; }
}

/* Sous 360 px la ligne ne tenait plus et se scindait en deux : on resserre
   l'écart et le corps du texte pour qu'elle reste sur une seule ligne. */
@media (max-width: 360px) {
  .pf .pied { font-size: 12px; }
  .pf .pied-social { gap: 14px; }
  .pf .pied-bas { gap: 8px 14px; flex-wrap: nowrap; }
}


/* ==========================================================================
   BASCULE DE LANGUE
   Principe relevé sur julianpenin.com : pas de contour, juste le code de la
   langue et un chevron ; le choix s'ouvre en dessous. Le déclencheur affiche
   la langue en cours, pas celle vers laquelle on va.
   ========================================================================== */
/* === BASCULE DE LANGUE === */
.pf .pf-langue { position: relative; display: flex; align-items: center; }

.pf .pf-langue-bouton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-start: -10px;   /* le padding ne doit pas décaler le menu */
  padding: 6px 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .07em;
  line-height: 1;
  color: var(--gris-txt);
  cursor: pointer;
  transition: color .2s var(--ease);
}
.pf .pf-langue-bouton:hover,
.pf .pf-langue-bouton[aria-expanded="true"] { color: var(--encre); }

.pf .pf-langue-fleche {
  flex: none;
  transition: rotate .25s var(--ease);
}
.pf .pf-langue-bouton[aria-expanded="true"] .pf-langue-fleche { rotate: 180deg; }

/* --- Le choix --- */
.pf .pf-langue-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -10px;
  z-index: 60;
  min-width: 158px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 14px;
  box-shadow: rgba(13, 13, 15, .10) 0 12px 32px;
}
.pf .pf-langue-menu[hidden] { display: none; }

.pf .pf-nav .pf-langue-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1;
  color: var(--encre);
  transition: background-color .2s var(--ease);
}
/* Le trait qui glisse sous les liens de navigation n'a pas de sens ici. */
.pf .pf-nav .pf-langue-menu a::after { content: none; }
.pf .pf-nav .pf-langue-menu a:hover,
.pf .pf-nav .pf-langue-menu a:focus-visible { background: var(--papier-2); }

.pf .pf-langue-puce {
  flex: none;
  min-width: 26px;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--papier-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-align: center;
  color: var(--gris-txt);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
/* La langue affichée se reconnaît à sa pastille pleine. */
.pf .pf-nav .pf-langue-menu a[aria-current] .pf-langue-puce {
  background: var(--encre);
  color: var(--papier);
}

@media (max-width: 700px) {
  /* Dans le panneau mobile les liens passent à 22px avec un filet en bas :
     la bascule garde sa taille propre et s'ouvre par-dessus. */
  .pf .pf-langue { order: -1; align-self: flex-start; margin-bottom: 18px; }
  .pf .pf-langue-bouton { font-size: 13px; padding: 4px 10px; }
  .pf .pf-langue-menu { top: calc(100% + 8px); }
  .pf .pf-nav .pf-langue-menu a { font-size: 15px; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf .pf-langue-bouton,
  .pf .pf-langue-fleche,
  .pf .pf-nav .pf-langue-menu a,
  .pf .pf-langue-puce { transition: none; }
}