/* =========================================================================
   sections.css — Les sections, dans l'ordre de sakazuki.io
   ========================================================================= */

/* =========================================================================
   EN-TÊTE
   ========================================================================= */

.tete {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem var(--marge);
  color: var(--noir);
  /* opacity est dans la liste pour l'arrivée de l'en-tête après l'ouverture
     (voir .ouv-en-cours .tete dans base.css). À ajouter ici, pas dans une
     seconde règle transition, qui écraserait celle-ci au lieu de s'y ajouter. */
  transition: background .6s var(--sortie), box-shadow .6s var(--sortie), color .9s var(--entree-sortie), opacity .8s var(--sortie);
}

/* L'en-tête reste TOUJOURS transparent : aucune bande, à aucun moment. Seule
   la couleur du texte suit le fond de la section traversée. L'état est porté
   par le body, pour que l'en-tête ET la barre basse basculent d'un seul geste. */
body.sur-sombre .tete, body.sur-sombre .cadre-bas { color: var(--clair); }
body.sur-clair  .tete, body.sur-clair  .cadre-bas { color: var(--noir); }

.tete__nav { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 1.9rem); }
.tete__lien {
  position: relative;
  font-family: var(--display);
  font-size: clamp(.8125rem, 1vw, .9375rem);
  font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: inherit;
  transition: opacity .45s var(--sortie);
}
.tete__lien:hover .roule__pile > span:last-child { color: var(--primaire); }

/* La barre qui se charge sous le libellé, de gauche à droite */
.tete__lien::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.4rem;
  height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .55s var(--sortie);
}
.tete__lien:hover::after { transform: scaleX(1); }

/* Les voisins s'effacent pour mettre en avant celui qu'on survole */
.tete__nav:has(.tete__lien:hover) .tete__lien:not(:hover) { opacity: .4; }

/* Le fanion du haut : bord supérieur entaillé d'une encoche en V, épaules
   légèrement biseautées, pointe vers le bas. Dépoli, comme chez eux. */
.tete__triangle {
  position: fixed; left: 50%; top: var(--fanion-haut); z-index: 101;
  /* --dx, --dy et --tour sont écrits par le JS : le fanion descend se loger
     entre les deux lettres du mot du milieu, en faisant un tour sur lui-même.
     La rotation vient en dernier pour qu'elle ne dévie pas les translations. */
  transform: translateX(-50%)
             translate(var(--dx, 0px), var(--dy, 0px))
             rotate(calc(var(--tour, 0) * 1turn));
  width: var(--fanion-l); height: var(--fanion-h);
  /* Le rose de la marque, le même que le survol du menu */
  background: var(--primaire);
  clip-path: polygon(
    6% 0,          /* épaule gauche biseautée */
    43% 0,
    50% 24%,       /* le creux de l'encoche */
    57% 0,
    94% 0,         /* épaule droite biseautée */
    100% 14%,
    50% 100%,      /* la pointe */
    0 14%
  );
  pointer-events: auto; cursor: pointer;
  transition: background .35s var(--sortie);
}
/* Un simple changement de teinte au survol : la position du fanion est un
   transform piloté en JS (--dx, --dy, --tour). Ajouter un transform au survol
   ici écraserait cette transformation au lieu de s'y ajouter. */
.tete__triangle:hover { background: var(--primaire-fonce); }

.tete__droite { display: flex; align-items: center; gap: 1rem; }

/* La pilule à contour, comme leurs boutons SAKE et TABI */
.pilule {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.15rem;
  background: transparent;
  border: 1px solid currentColor; border-radius: 999px;
  font-family: var(--display);
  font-size: clamp(.75rem, .9vw, .875rem);
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: inherit;
  transition: color .4s var(--sortie), border-color .4s var(--sortie), transform .4s var(--sortie);
}
.pilule .fl { font-size: .8em; opacity: .8; }
/* Reste transparent : seuls le texte et le contour passent au rose de la
   marque, toujours le même, comme le fanion du haut. Léger agrandissement. */
.pilule:hover { color: var(--primaire); border-color: var(--primaire); transform: scale(1.06); }

.burger { display: none; width: 40px; height: 40px; position: relative; color: inherit; }
.burger span { position: absolute; left: 9px; right: 9px; height: 1.5px; background: currentColor; transition: transform .5s var(--sortie); }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 23px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.voile { position: fixed; inset: 0; z-index: 95; background: var(--clair); display: flex; flex-direction: column; justify-content: center; padding: 5rem var(--marge) 3rem; opacity: 0; visibility: hidden; transition: opacity .5s var(--sortie), visibility .5s; }
.voile.ouvert { opacity: 1; visibility: visible; }
.voile a { display: block; font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: clamp(1.9rem, 8vw, 3.2rem); line-height: 1.25; padding: .2em 0; border-bottom: 1px solid var(--bordure); opacity: 0; transform: translateY(14px); transition: opacity .5s var(--sortie), transform .5s var(--sortie), color .3s; }
.voile.ouvert a { opacity: 1; transform: none; }
.voile a:hover { color: var(--primaire); }

/* Sur mobile, la nav disparaît au profit du burger. Sans cette règle,
   `justify-content: space-between` n'a plus qu'UN enfant visible et le colle
   à gauche : le bouton « Me suivre » se retrouvait sous le fanion centré, et
   le burger passait derrière lui. La référence ne garde qu'un burger à droite,
   tous les liens étant dans le menu plein écran. */
@media (max-width: 900px) {
  .tete__nav { display: none; }
  .tete { justify-content: flex-end; }
  .tete .pilule { display: none; }
  .burger { display: block; }
}

/* =========================================================================
   LE GRAND VISUEL — un seul écran épinglé, trois temps qui s'enchaînent.
   Le fond passe d'une image à l'autre en fondu, le texte monte au centre,
   et le troisième temps bascule du sombre au clair (fond, texte, tout).
   Même mécanisme que .pas ci-dessous : vue collée + piste à marge négative.
   ========================================================================= */

/* La section porte le MÊME fond que son panneau épinglé, et suit la même
   bascule. Raison : le panneau fait 100svh, la hauteur de fenêtre barres du
   navigateur affichées. Sur mobile, dès qu'on descend, Safari escamote sa
   barre d'adresse et la fenêtre visible grandit : il reste alors en bas de
   l'écran une bande que le panneau ne couvre plus, et qui laissait voir le
   crème du body. Une bande blanche sur le hero sombre, aux deux premiers
   temps seulement, puisqu'au troisième le panneau passe au clair et que la
   bande se confondait.

   Le fond est mis ici plutôt que de passer le panneau en 100lvh ou 100dvh :
   lvh le rendrait trop haut barres affichées, dvh le ferait changer de taille
   pendant le défilement, or page.js mesure vue.offsetHeight pour calculer la
   course de l'épinglage. Peindre derrière ne touche à aucune de ces mesures.
   (.pas et .fo n'ont pas le problème : leur fond de section est déjà celui de
   leur panneau.) */
.mv {
  position: relative;
  background-color: var(--noir);
  transition: background-color .9s var(--entree-sortie);
}
.mv:has(.mv--clair) { background-color: var(--clair); }

.mv__vue {
  position: sticky; top: 0; min-height: 100svh; overflow: hidden;
  background-color: var(--noir);
  transition: background-color .9s var(--entree-sortie);
}
.mv__vue.mv--clair { background-color: var(--clair); }

.mv__fond { position: absolute; inset: 0; z-index: 0; transition: opacity .9s var(--entree-sortie); }
.mv__vue.mv--clair .mv__fond { opacity: 0; }

/* L'image est posée en `background-image` directement dans l'attribut style.
   Surtout pas via une variable CSS : une url() relative placée dans une
   propriété personnalisée est résolue par rapport à la FEUILLE DE STYLE qui
   utilise le var(), donc ici /assets/css/, et l'image part en 404. */
.mv__calque {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0; transform: scale(1.05);
  transition: opacity 1.1s var(--entree-sortie), transform 1.6s var(--entree-sortie);
}
.mv__calque.actif { opacity: 1; transform: scale(1); }

/* Le canevas WebGL, quand il a pu démarrer. Les calques CSS deviennent alors
   le repli et s'effacent : deux rendus superposés se combattraient.
   Règle générale : la fabrique window.Fondu.creer() pose toujours la classe
   `fondu__canvas`, quel que soit l'endroit où elle est appelée (grand visuel,
   parcours). Sans cette règle, un canevas retombe sur sa taille par défaut
   de 300×150 px, posé en haut à gauche de son conteneur. */
.fondu__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mv__fond--webgl .mv__calque { display: none; }

/* Le voile de lisibilité. Chez la référence, les photos sont naturellement
   très sombres et le texte blanc porte tout seul. Deux couches : une nappe
   verticale qui tient le haut et le bas, et un dégradé radial qui assombrit
   le pourtour en laissant respirer le centre de l'image.
   Valeurs allégées le 29/08 : les deux fonds du grand visuel sont désormais
   flous et sombres à la source (flou gaussien cuit dans le fichier, sigma 3,5,
   appliqué à la résolution native puis mise à l'échelle — pas un filter CSS,
   qui ferait recalculer le flou à chaque image du fondu WebGL sur mobile).
   Le voile n'a donc plus à creuser autant, sinon l'image ne se lit plus du
   tout. Si un fond clair revient ici, remonter ces valeurs plutôt que de
   reflouter. */
.mv__voile {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(112% 86% at 50% 48%, rgba(8,8,8,.18) 0%, rgba(8,8,8,.52) 100%),
    linear-gradient(180deg, rgba(8,8,8,.48) 0%, rgba(8,8,8,.28) 42%, rgba(8,8,8,.54) 100%);
  transition: opacity .9s var(--entree-sortie);
}
.mv__vue.mv--clair .mv__voile { opacity: 0; }

.mv__scene { position: relative; z-index: 2; min-height: 100svh; }
.mv__scene { color: var(--clair); transition: color .9s var(--entree-sortie); }
.mv__vue.mv--clair .mv__scene { color: var(--noir); }

/* Un halo sous le texte tant qu'il est sur photo, pour décoller les lettres
   du fond.

   Il était diffusé à 44px. Sur un mot aussi gros que « lemaire », les halos
   des lettres se rejoignaient en une seule nappe sombre qui remplissait toute
   la ligne, et .alL (overflow caché en vertical) la coupait net en haut et en
   bas : ça donnait un rectangle sombre autour du nom. Invisible tant que les
   fonds étaient clairs et chargés, franchement visible depuis qu'ils sont
   sombres et flous, une nappe sombre sur un fond sombre uni montrant ses
   propres bords.

   Diffusion ramenée à 14px : le halo reste collé aux jambages, il ne peut plus
   se refermer en nappe. Si un fond clair revient un jour dans le grand visuel,
   remonter l'opacité plutôt que la diffusion. */
body.sur-sombre .mv__scene {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .42), 0 2px 14px rgba(0, 0, 0, .3);
}

.mv__diapo {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(2.4rem); pointer-events: none;
  transition: opacity .9s var(--sortie), transform .9s var(--sortie);
}
.mv__diapo.actif { opacity: 1; transform: none; pointer-events: auto; z-index: 1; }

/* Le contenu du temps courant monte au fil du scroll. La translation est
   portée par l ENFANT et non par .mv__diapo, dont le transform sert déjà à
   la bascule d un temps à l autre : les deux se marcheraient dessus. */
.mv__diapo > * {
  transform: translate3d(0, calc(var(--monte, 0) * -1vh), 0);
  opacity: var(--vis, 1);
  will-change: transform, opacity;
}

/* Temps 1 : le nom, flanqué de deux légendes de trois lignes.
   Tout se calcule à partir d'une seule mesure, --mot. Les trois lignes de
   côté font 3 × 1.25 × .20 = .75 em du nom, soit très exactement la hauteur
   visuelle du mot en bas-de-casse (hampe du « l » jusqu'à la ligne de pied). */
.mv__flanque {
  --mot: clamp(3.4rem, 13.5vw, 11.5rem);
  width: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(.75rem, 3vw, 2.75rem);
}
.mv__flanc {
  font-family: var(--display);
  font-size: calc(var(--mot) * .20);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: inherit;
}
.mv__flanc--g { text-align: right; }
.mv__flanc--d { text-align: left; }

.mv__nom {
  text-align: center; text-transform: lowercase; color: inherit;
  font-size: var(--mot); line-height: .88;
}

/* Sur mobile, la référence empile en trois temps : la légende alignée à
   GAUCHE, le nom en pleine largeur, la légende alignée à DROITE. Tout centrer,
   comme je le faisais, écrasait la composition et laissait le nom deux fois
   trop petit. 27vw fait tenir « lemaire » d'un bord à l'autre. */
@media (max-width: 760px) {
  .mv__flanque {
    grid-template-columns: 1fr;
    gap: clamp(.6rem, 1.8vh, 1.1rem);
    justify-items: stretch;
  }
  .mv__nom { font-size: min(27vw, 8rem); line-height: .9; text-align: center; }
  .mv__flanc { font-size: clamp(.8125rem, 3.6vw, 1.1rem); line-height: 1.25; }
  .mv__flanc--g { text-align: left; }
  .mv__flanc--d { text-align: right; }
}

/* Temps 2 : petit texte en haut, titre géant sur trois lignes avec le fanion
   logé au milieu, petit texte de trois lignes en bas. */
.mv__centre {
  width: 100%; text-align: center;
  display: grid; align-content: center; justify-items: center;
  gap: clamp(1.75rem, 4.5vh, 3.5rem);
}

/* Proportions relevées sur la référence : le titre fait environ 10vw, les
   petits textes environ 1,55vw, soit un rapport de 0,155 entre les deux. */
.mv__haut, .mv__bas {
  font-family: var(--display);
  font-size: clamp(1rem, 1.55vw, 1.9rem);
  /* 1.3 suffisait tant qu'aucune ligne ne portait d'accent haut. Avec « d'être
     taillé », l'accent du é arrivait au ras de la ligne du dessus. C'est aussi
     la hauteur de la boîte de découpe .alL, donc la remonter écarte les lignes
     ET donne de l'air à l'accent pendant l'animation d'entrée. */
  font-weight: 500; line-height: 1.45; letter-spacing: -.01em;
  color: inherit;
  max-width: 54rem;
}

.mv__titre {
  display: grid; justify-items: center;
  font-size: clamp(2.4rem, 10vw, 12rem);
  line-height: .9;
}
/* .alL est le masque qui fait glisser la ligne du bas vers le haut (overflow
   masqué verticalement). À line-height .9, sa boîte est plus courte que la
   police, donc l'accent d'une capitale y déborde et se fait trancher au repos :
   visible un instant pendant le glissement d'entrée, coupé une fois posé.
   padding-top et margin-top opposés donnent de la place au-dessus SANS
   déplacer le texte ni casser le rythme serré des lignes empilées. */
.mv__titre .alL { line-height: .9; padding-top: .3em; margin-top: -.3em; }

/* La ligne du milieu porte un creux de la largeur exacte du fanion.
   Sa hauteur vaut UNE HAUTEUR DE CAPITALE et il est calé sur la ligne de pied :
   sa boîte couvre donc très exactement le corps des lettres D et E, et son
   milieu est le vrai centre optique du mot. C'est là que le JS vise.
   `middle` visait le milieu de la ligne, ce qui décalait le fanion vers le bas. */
.mv__creux {
  display: inline-block;
  width: var(--fanion-l);
  height: .72em;   /* repli pour les navigateurs sans l'unité cap */
  height: 1cap;
  vertical-align: baseline;
}

/* Temps 3 : la déclaration, portée par le fond qui devient clair */
.mv__decl { text-align: center; max-width: 46rem; padding-inline: var(--marge); }
.mv__decl .display { color: inherit; }

.mv__piste { position: relative; margin-top: -100svh; }
.mv__cran { height: 100svh; }

/* =========================================================================
   LA BARRE BASSE — fixe sur toute la page : réseaux à gauche, lieu au centre,
   bouton Créations à droite. Elle ne capte le clic que sur ses éléments.
   ========================================================================= */

.cadre-bas {
  position: fixed; inset: auto 0 0; z-index: 90;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem;
  padding: clamp(.85rem, 2vh, 1.5rem) var(--marge);
  color: var(--noir);
  pointer-events: none;
  transition: color .9s var(--entree-sortie);
}
.cadre-bas > * { pointer-events: auto; }

.cadre-bas__reseaux { display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.1rem); }
.cadre-bas__reseaux a {
  font-family: var(--display);
  font-size: clamp(.8125rem, 1vw, .9375rem);
  font-weight: 500; letter-spacing: .02em;
  color: inherit;
}
.cadre-bas__reseaux a:hover .roule__pile > span:last-child { color: var(--primaire); }

.cadre-bas__lieu {
  font-family: var(--display);
  font-size: clamp(.75rem, .9vw, .875rem);
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  text-align: center; color: inherit; opacity: .85;
  justify-self: center;
}

.cadre-bas__action { justify-self: end; }

/* Le bouton du coin, à contour carré comme leur MINT */
.encadre {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .7rem 1.25rem;
  background: transparent;
  border: 1px solid currentColor;
  font-family: var(--display);
  font-size: clamp(.8125rem, 1vw, .9375rem);
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: inherit;
  transition: color .4s var(--sortie), border-color .4s var(--sortie), transform .4s var(--sortie);
}
.encadre .fl { letter-spacing: -.15em; font-size: .85em; }
/* Reste transparent : seuls le texte et le contour passent au rose de la
   marque, comme la pilule et le fanion, quel que soit le fond de la section */
.encadre:hover { color: var(--primaire); border-color: var(--primaire); transform: scale(1.06); }

@media (max-width: 700px) {
  .cadre-bas { grid-template-columns: 1fr auto; }
  .cadre-bas__lieu { display: none; }
}

/* =========================================================================
   LE PARCOURS — écran épinglé, étapes qui défilent (leur philosophySection)
   ========================================================================= */

.pas { position: relative; background: var(--troisieme); }

.pas__vue {
  position: sticky; top: 0; z-index: 1;
  height: 100svh; overflow: hidden;
  display: flex; align-items: stretch;
}

/* Trois colonnes : le titre à gauche, l'image au centre, le numéro à droite.
   Chaque colonne pousse son contenu vers le haut ET vers le bas, ce qui crée
   le grand vide central de la référence.

   La grille tient TOUTE la hauteur de l'écran, jusqu'à ses bords réels. Sur
   la référence, le titre en bas de colonne est collé au bord bas de l'écran,
   juste au-dessus de la ligne (X)(IG)(OS). Une hauteur de 80svh centrée,
   comme je l'avais fait, laissait un vide sous le titre : il n'atteignait
   jamais le vrai bas. Le padding-block dégage seulement la place du menu
   fixe en haut et de la barre fixe en bas, sans réduire la hauteur globale. */
.pas__grille {
  width: 100%; height: 100%;
  padding-inline: var(--marge);
  padding-block: clamp(6rem, 14vh, 8.5rem) clamp(5.5rem, 12vh, 7.5rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1rem, 4vw, 5rem);
  align-items: stretch;
}

.pas__gauche, .pas__droite { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.pas__droite { align-items: flex-end; text-align: right; }
.pas__milieu { display: flex; align-items: center; justify-content: center; }

/* --- Le cadre portrait qui accueille le canevas WebGL --- */
/* L'image est plus courte que la colonne de texte : c'est ce décalage qui la
   détache du haut et du bas, et la met en valeur au centre. */
.pas__cadre {
  position: relative; overflow: hidden;
  height: min(64svh, 44rem);
  aspect-ratio: 53 / 100;
  background: var(--noir);
}
/* La taille du canevas est déjà posée par la règle générale .fondu__canvas */

/* Repli sans WebGL : des images empilées en fondu simple */
.pas__repli { position: absolute; inset: 0; }
.pas__repli img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--entree-sortie); }
.pas__repli img.actif { opacity: 1; }
.pas__cadre.fondu--actif .pas__repli { display: none; }

/* --- Colonne de gauche --- */

/* Le sigle : une forme pleine qui change à chaque étape et habille la colonne */
.pas__sigle { display: block; width: clamp(44px, 3.9vw, 78px); color: var(--primaire); }
.pas__sigle svg { display: block; width: 100%; height: auto; }

/* Le jour entre le sigle et l'étiquette, qui fait descendre le titre */
.pas__eti {
  font-family: var(--display); font-size: clamp(.875rem, 1.05vw, 1.15rem);
  font-weight: 500; margin-top: clamp(1.5rem, 3.4vh, 3rem); margin-bottom: .45rem;
}
.pas__paren {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.3vw, 3.9rem);
  font-weight: 400; line-height: 1.05; letter-spacing: -.02em;
  color: var(--noir);
}
.pas__titre {
  font-family: var(--display);
  font-size: clamp(2.1rem, 5.3vw, 6.3rem);
  font-weight: 500; line-height: .98; letter-spacing: -.03em;
  text-transform: none;
  max-width: 11ch;
}

/* --- Colonne de droite --- */
.pas__num {
  font-family: var(--display);
  font-size: clamp(3.5rem, 11.5vw, 14rem);
  font-weight: 400; line-height: .8; letter-spacing: -.04em;
}
.pas__texte {
  font-family: var(--display);
  font-size: clamp(.875rem, 1.1vw, 1.2rem);
  font-weight: 400; line-height: 1.45;
  max-width: 24ch;
}

/* --- Ce qui change d'une étape à l'autre ---
   Toutes les variantes occupent LA MÊME CASE de grille : la pile prend donc
   la hauteur de la plus haute, une fois pour toutes. Avec du positionnement
   absolu, la hauteur suivait la variante active, et le bloc sautait dès qu'un
   titre passait de trois lignes à deux. C'était la cause des décalages. */
.pas__var { display: grid; }
.pas__var > * {
  grid-area: 1 / 1;
  /* Impératif : la règle générale `p + p { margin-top: 1.1em }` s'applique
     sinon aux 2e et 3e variantes, qui sont des <p> frères. Sur le numéro,
     dont le corps fait 14 rem, cela les décalait de 246 px vers le bas. */
  margin: 0;
  transition: opacity .7s var(--sortie), transform .7s var(--sortie);
}
.pas__var > *:not(.actif) { opacity: 0; transform: translateY(1.1rem); pointer-events: none; }
.pas__var > .actif { opacity: 1; transform: none; }

/* Chaque pile est calée dans sa case : tout ce qui doit rester à la même
   hauteur d'une étape à l'autre est aligné en HAUT de sa case. */
.pas__var--sigle { justify-items: start; align-items: start; }
.pas__var--paren { justify-items: start; align-items: start; }
/* Le titre fait exception : il est calé en BAS de sa case, pas en haut.
   La case prend la hauteur du plus long des trois titres. Alignés en haut,
   les titres de deux lignes laissaient une ligne de vide sous eux et
   n'atteignaient jamais le bas de l'écran. Alignés en bas, les trois
   partagent la même ligne de pied, contre le bord bas. */
.pas__var--titre { justify-items: start; align-items: end; }
.pas__var--num   { justify-items: end;   align-items: start; }
.pas__var--texte { justify-items: end;   align-items: start; }

.pas__piste { position: relative; margin-top: -100svh; }
.pas__cran { height: 100svh; }

/* Sur mobile, la référence garde quatre rangs : sigle et numéro côte à côte
   en haut, l'image en pleine largeur, puis le titre et le texte côte à côte.
   J'empilais tout en une colonne avec l'image en premier, ce qui donnait sept
   blocs à la file : ça dépassait la hauteur d'écran et le texte se faisait
   couper par le bord de la vue épinglée.
   `display: contents` dissout les deux colonnes pour que leurs enfants entrent
   directement dans la grille et puissent être placés par zone. */
@media (max-width: 900px) {
  .pas__grille {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "tete  num"
      "image image"
      "titre texte";
    height: auto; align-content: center;
    gap: clamp(.6rem, 2vw, 1.1rem) clamp(1rem, 3vw, 1.5rem);
  }
  .pas__gauche, .pas__droite { display: contents; }
  .pas__gauche > div:first-child { grid-area: tete; }
  .pas__var--titre { grid-area: titre; }
  .pas__milieu     { grid-area: image; }
  .pas__var--num   { grid-area: num; justify-items: end; }
  /* Le titre et le texte partagent la même rangée, mais chacun se calait en
     HAUT de sa case : le texte, plus long, démarrait donc plus haut et se
     terminait bien au-dessus du titre. Les deux s'alignent par le bas, et la
     rangée elle-même s'étire pour que ce bas commun soit le même. */
  .pas__var--texte { grid-area: texte; justify-items: start; text-align: left; align-items: end; }
  .pas__var--titre, .pas__var--texte { align-self: stretch; }

  .pas__cadre { height: min(38svh, 20rem); }
  .pas__num   { font-size: clamp(2.5rem, 13vw, 4.5rem); }
  .pas__titre { font-size: clamp(1.4rem, 6.4vw, 2.4rem); max-width: none; }
  .pas__texte { font-size: clamp(.8125rem, 3.2vw, 1rem); max-width: none; }
  .pas__paren { font-size: clamp(1.15rem, 5.4vw, 2rem); }
  .pas__sigle { width: clamp(38px, 11vw, 56px); }
  .pas__eti   { margin-top: clamp(.6rem, 1.5vh, 1rem); }
}

/* =========================================================================
   LES CRÉATIONS — titre fendu qui s'écarte au scroll (leur Collective)
   ========================================================================= */

/* Section inversée : fond noir, texte crème. Les valeurs claires sont posées
   en jetons locaux, pour que les règles en dessous restent lisibles. */
.crea {
  position: relative; overflow: hidden;
  background: var(--noir);
  color: var(--clair);
  /* Le rose de la marque tombe à 3,3:1 sur du noir, insuffisant pour du petit
     texte. On l'éclaircit dans cette section seulement : 6:1. */
  --accent-inv:  #E8628E;
  --bordure-inv: rgba(244, 237, 229, .2);
  --gris-inv:    rgba(244, 237, 229, .62);
  --fond-inv-2:  #151210;
}
.crea .etiq--rouge, .crea .numero { color: var(--accent-inv); }
.crea .petit { color: var(--gris-inv); }
.crea__fendu { display: grid; justify-items: center; gap: 0; margin-block: clamp(2rem, 6vw, 5rem); }
.crea__fendu span { display: block; will-change: transform; }
.crea__fendu span:nth-child(1) { transform: translateX(calc(var(--fx, 0) * -1px)); }
.crea__fendu span:nth-child(2) { transform: translateX(calc(var(--fx, 0) * 1px)); }

.crea__grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .crea__grille { grid-template-columns: 1.15fr .85fr; } }
.crea__img { position: relative; overflow: hidden; }
.crea__img img { width: 100%; }

/* De vraies gouttières, plus le filet d'un pixel : celui-ci imposait des
   angles vifs, puisque la grille n'était qu'un fond visible entre les cartes. */
.crea__familles {
  display: grid;
  gap: clamp(.7rem, 1.3vw, 1.15rem);
  margin-top: clamp(3rem, 7vw, 5rem);
}
@media (min-width: 640px)  { .crea__familles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .crea__familles { grid-template-columns: repeat(4, 1fr); } }
.famille {
  background: var(--fond-inv-2);
  border: 1px solid var(--bordure-inv);
  border-radius: clamp(14px, 1.5vw, 24px);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; gap: .8rem; align-content: start;
  transition:
    transform .6s var(--sortie),
    background .6s var(--sortie),
    border-color .6s var(--sortie),
    opacity .45s var(--sortie);
}
.famille:hover {
  transform: translateY(-6px);
  background: #1E1A17;
  border-color: rgba(232, 98, 142, .55);
}

/* Comme pour le menu : les autres cartes s'effacent au profit de la survolée */
.crea__familles:has(.famille:hover) .famille:not(:hover) { opacity: .38; }
.famille h3 { line-height: 1.15; }

/* =========================================================================
   LES FORMATIONS — cartes empilées.
   Chaque carte arrive du bas, EN BIAIS, puis se redresse pour couvrir la
   précédente. Les valeurs sont celles relevées dans le CSS de la référence :
   translation de 4 rem et rotation de 4 degrés, de sens ALTERNÉ d'une carte
   à l'autre, encoches à 2,5 / 3,125 rem et cran central à 4,375 / 3,125 rem.
   ========================================================================= */

.fo { position: relative; background: var(--clair); }

.fo__vue { position: sticky; top: 0; height: 100svh; overflow: hidden; }

.fo__carte {
  position: absolute;
  inset: clamp(68px, 8.5vh, 106px) var(--marge) 0;
  background: var(--fond);
  color: var(--encre);
  --cut-x: 2.5rem;   --cut-y: 3.125rem;
  --notch-w: 4.375rem; --notch-d: 3.125rem;
  /* Le bord haut : un pan coupé à chaque angle, et un cran au centre où le
     fanion de l'en-tête vient se loger. */
  clip-path: polygon(
    0 var(--cut-y),
    var(--cut-x) 0,
    calc(50% - var(--notch-w) / 2) 0,
    50% var(--notch-d),
    calc(50% + var(--notch-w) / 2) 0,
    calc(100% - var(--cut-x)) 0,
    100% var(--cut-y),
    100% 100%,
    0 100%
  );
  transform:
    translate3d(calc(var(--tx, 0) * 1rem), calc(var(--ty, 0) * 1%), 0)
    rotate(calc(var(--rot, 0) * 1deg));
  will-change: transform;
}
/* La première est le socle : elle ne bouge jamais */
.fo__carte:first-child { --tx: 0; --ty: 0; --rot: 0; }

.fo__in {
  height: 100%;
  padding: clamp(1.5rem, 2.5vh + .6rem, 4rem) clamp(1.5rem, 4vw, 4rem);
  display: grid; gap: clamp(1.5rem, 3.5vw, 4rem);
  align-content: center;
}
@media (min-width: 900px) {
  .fo__in { grid-template-columns: minmax(0, .44fr) minmax(0, .56fr); align-items: center; }
}

.fo__media { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
.fo__media img { width: 100%; height: 100%; object-fit: cover; }

.fo__corps { position: relative; display: grid; gap: clamp(.85rem, 1.6vh, 1.5rem); align-content: center; }

/* Le pictogramme, dans l'angle haut droit de la carte */
.fo__sigle {
  position: absolute; top: 0; right: 0;
  width: clamp(3rem, 7vw, 7rem);
  opacity: .92;
}
.fo__sigle svg { display: block; width: 100%; height: auto; }

.fo__eti { font-family: var(--display); font-size: clamp(.875rem, 1.1vw, 1.15rem); font-weight: 500; }
.fo__titre {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.4vw, 4.6rem);
  font-weight: 500; line-height: .96; letter-spacing: -.03em;
  text-transform: none;
  max-width: 14ch;
}
/* « Perfectionnement » fait seize signes : à 14ch il passait à la ligne, et
   il était coupé au milieu du mot par un <br> pour l'en empêcher. Le mot est
   d'un seul tenant, c'est la laisse qu'on allonge, pas le mot qu'on casse.
   (En dessous de 900px, .fo__titre passe déjà en max-width: none.) */
.fo__titre--long { max-width: 18ch; }
.fo__chapo { font-size: clamp(.9375rem, 1.15vw, 1.2rem); line-height: 1.5; max-width: 46ch; }

.fo__bloc { display: grid; gap: .4rem; }
.fo__soustitre { font-family: var(--display); font-size: clamp(.875rem, 1.05vw, 1.1rem); font-weight: 500; }
.fo__liste { display: grid; gap: .2rem; }
.fo__liste li {
  position: relative; padding-left: 1.1rem;
  font-size: clamp(.875rem, 1.05vw, 1.1rem); line-height: 1.45;
}
.fo__liste li::before { content: "·"; position: absolute; left: .15rem; }

.fo__note { font-size: clamp(.8125rem, 1vw, 1.05rem); line-height: 1.45; opacity: .82; max-width: 52ch; }
.fo__niveau { font-family: var(--display); font-size: clamp(.75rem, .9vw, .9375rem); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }

.fo__piste { position: relative; margin-top: -100svh; }
.fo__cran { height: 100svh; }

/* Sur mobile, les cartes s'empilent comme sur ordinateur : c'est l'animation
   qui donne son intérêt à la section. Le conflit de défilement imbriqué venait
   du `overflow-y: auto` que j'avais mis pour rattraper un contenu trop haut ;
   la bonne réponse est de faire TENIR le contenu dans l'écran, pas d'ajouter
   un second défilement. D'où les tailles réduites et la note masquée ici. */
@media (max-width: 900px) {
  .fo__carte { --cut-x: 1.25rem; --cut-y: 1.5625rem; --notch-w: 2.1875rem; --notch-d: 1.5625rem; }

  .fo__in {
    padding: clamp(1.1rem, 2vh, 1.75rem) clamp(1.1rem, 4vw, 1.75rem);
    gap: clamp(.7rem, 1.6vh, 1.1rem);
    align-content: center;
  }

  /* Hauteur fixe plutôt qu'un rapport : c'est la hauteur, pas la largeur,
     qui est la ressource rare sur un téléphone. */
  .fo__media { aspect-ratio: auto; height: min(26svh, 13rem); }

  /* Ce cadre est large et court, or trois des quatre photos sont en portrait
     (chevalet, rosace, pièces montées). En `cover` (la règle de base, pensée
     pour le cadre carré du bureau), un cadre aussi large tranchait les côtés
     de ces images verticales. En `contain`, la photo entière tient dans le
     cadre, quitte à ne pas le remplir en largeur : l'espace qui reste est
     transparent, et .fo__carte a déjà son propre aplat de couleur (--fond)
     juste derrière, donc ça se voit comme un cadrage voulu, pas comme un vide. */
  .fo__media img { object-fit: contain; }

  .fo__corps { gap: clamp(.45rem, 1.1vh, .8rem); }
  .fo__sigle { position: static; width: clamp(2.4rem, 9vw, 3.2rem); margin-bottom: .1rem; }
  .fo__eti    { font-size: .8125rem; }
  .fo__titre  { font-size: clamp(1.5rem, 7vw, 2.2rem); max-width: none; }
  .fo__chapo  { font-size: clamp(.8125rem, 3.4vw, .95rem); line-height: 1.4; max-width: none; }
  .fo__soustitre { font-size: .8125rem; }
  .fo__liste li  { font-size: clamp(.75rem, 3.2vw, .9rem); line-height: 1.35; }
  .fo__niveau { font-size: .6875rem; }

  /* Le complément le moins essentiel : il saute pour que tout le reste tienne */
  .fo__note { display: none; }
}

.form-bloc__soustitre { font-family: var(--display); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }

/* =========================================================================
   SAMIRA — leur Founder : portrait, citation, bio, palmarès, bandeau
   ========================================================================= */

/* Section inversée, comme la référence : fond noir, texte crème, le nom en
   très grand sur toute la largeur, puis la citation à gauche et la biographie
   à droite. Mêmes jetons locaux que la section Créations. */
.fond-sec {
  background: var(--noir);
  color: var(--clair);
  --accent-inv:  #E8628E;
  --bordure-inv: rgba(244, 237, 229, .2);
  --gris-inv:    rgba(244, 237, 229, .68);
  --fond-inv-2:  #151210;
}
.fond-sec .etiq--rouge, .fond-sec .distinction__quoi { color: var(--accent-inv); }
.fond-sec .petit { color: var(--gris-inv); }

/* Le nom, pleine largeur, à la mesure de leur A-MASHIRO */
.fond__geant {
  font-family: var(--display);
  font-size: clamp(2.6rem, 11.5vw, 15rem);
  font-weight: 500; line-height: .86; letter-spacing: -.035em;
  text-transform: uppercase;
  margin-block: clamp(.75rem, 2vh, 1.5rem) clamp(2.5rem, 7vh, 6rem);
}

/* Citation à gauche, biographie à droite */
.fond__duo { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 900px) { .fond__duo { grid-template-columns: .85fr 1.15fr; } }

.fond__citation {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 3.6rem);
  font-weight: 500; line-height: 1.02; letter-spacing: -.03em;
  text-transform: none; font-style: normal;
  max-width: 13ch;
}
.fond__bio { display: grid; gap: .35rem; font-size: clamp(.9375rem, 1.15vw, 1.2rem); line-height: 1.5; }
.fond__bio p { margin: 0; }

/* max-width calé sur la photo actuelle (portrait, ratio ~0.986) pour retomber
   sur la même hauteur affichée que l'ancienne photo de boutique (paysage,
   ratio ~1,45) à largeur 100 % : 0.986/1.45 ≈ 68 %. Si la photo change à
   nouveau pour un format différent, recalculer plutôt que de garder 68 % figé. */
.fond__portrait { margin-top: clamp(2.5rem, 6vw, 4.5rem); max-width: 68%; margin-inline: auto; }
.fond__portrait img { width: 100%; }

/* Le palmarès reprend les cartes arrondies de la section Créations */
.palmares { display: grid; gap: clamp(.7rem, 1.3vw, 1.15rem); margin-top: clamp(3rem, 7vw, 5rem); }
@media (min-width: 620px)  { .palmares { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .palmares { grid-template-columns: repeat(4, 1fr); } }
.distinction {
  background: var(--fond-inv-2);
  border: 1px solid var(--bordure-inv);
  border-radius: clamp(14px, 1.5vw, 24px);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; gap: .7rem; align-content: start;
  transition: transform .6s var(--sortie), background .6s var(--sortie),
              border-color .6s var(--sortie), opacity .45s var(--sortie);
}
.distinction:hover { transform: translateY(-6px); background: #1E1A17; border-color: rgba(232, 98, 142, .55); }
.palmares:has(.distinction:hover) .distinction:not(:hover) { opacity: .38; }
.distinction__quoi { font-family: var(--display); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; }

.defile-mots { margin-top: clamp(3rem, 7vw, 5rem); border-block: 1px solid var(--bordure-inv); padding-block: 1.1rem; }
.defile-mots span { display: inline-flex; align-items: center; gap: 1.4rem; padding-right: 1.4rem; font-family: var(--display); font-size: clamp(.9rem, 1.5vw, 1.15rem); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.defile-mots span i { display: block; width: 5px; height: 5px; background: var(--accent-inv); border-radius: 50%; }

/* =========================================================================
   LES DEUX VOIES — leur Journey (TABI / SAKE)
   ========================================================================= */

.voie { position: relative; padding-block: clamp(4rem, 10vh, 8rem); overflow: hidden; }
.voie--a { background: var(--noir); color: var(--clair); }
.voie--b { background: var(--clair); }
.voie__slogan { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* Le mot déborde du conteneur de lecture : il lui faut sa propre mesure,
   calée sur la largeur de la FENÊTRE. Hérité de .t-geant, « CONCOURS »
   dépassait les 1084 px du conteneur et se faisait trancher. */
.voie__mot {
  text-align: center;
  font-size: min(12.5vw, 11rem);
  line-height: .9;
  padding-inline: var(--marge);
}
.voie--a .voie__mot { color: var(--clair); }
.voie__texte { max-width: 44rem; margin-inline: auto; text-align: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.voie--a .voie__texte { color: var(--troisieme); }

/* --- Le ruban d'œuvres --- */
.voie__bandeau {
  margin-block: clamp(2rem, 5vw, 3.5rem);
  /* De l'air en haut et en bas, sinon l'agrandissement au survol serait
     tranché par le `overflow: hidden` du ruban. */
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
}
.voie__bandeau .bandeau__piste { align-items: center; }
.voie__bandeau img {
  height: clamp(90px, 14vw, 190px); width: auto;
  margin-right: clamp(.75rem, 1.4vw, 1.5rem);
  border-radius: clamp(8px, .9vw, 14px);
  transition:
    transform .65s var(--sortie),
    box-shadow .65s var(--sortie),
    opacity .45s var(--sortie);
  will-change: transform;
}
.voie__bandeau img:hover {
  transform: scale(1.14) translateY(-10px);
  box-shadow: 0 26px 55px rgba(0, 0, 0, .55);
}
/* Le ruban s'arrête pendant qu'on regarde une pièce */
.voie__bandeau:hover .bandeau__piste { animation-play-state: paused; }
/* Et les voisines s'effacent, comme partout ailleurs sur le site */
.voie__bandeau .bandeau__piste:has(img:hover) img:not(:hover) { opacity: .4; }
.voie__pied { display: flex; justify-content: center; margin-top: 1rem; }
.voie--a .detail { color: var(--primaire); }

/* --- Le commerce : photo et puces, pour ne pas être qu'un paragraphe --- */
.voie__corps { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .voie__corps { grid-template-columns: .95fr 1.05fr; } }

.voie__photo { position: relative; overflow: hidden; border-radius: clamp(14px, 1.5vw, 24px); }
.voie__photo img { width: 100%; display: block; transition: transform 1.1s var(--entree-sortie); }
.voie__photo:hover img { transform: scale(1.045); }

.voie__contenu { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); }

.voie__puces { display: grid; gap: 1px; background: var(--bordure); border: 1px solid var(--bordure); }
@media (min-width: 560px) { .voie__puces { grid-template-columns: repeat(2, 1fr); } }
.voie__puce {
  background: var(--clair);
  padding: clamp(1.15rem, 2.4vw, 1.75rem);
  display: grid; gap: .5rem; align-content: start;
  transition: background .5s var(--sortie), transform .5s var(--sortie), opacity .4s var(--sortie);
}
.voie__puce p { margin: 0; font-size: .9375rem; line-height: 1.55; }
.voie__puce:hover { background: var(--champ); transform: translateY(-4px); }
.voie__puces:has(.voie__puce:hover) .voie__puce:not(:hover) { opacity: .55; }

/* =========================================================================
   FAQ
   ========================================================================= */

/* Le beige de la référence, pas le crème de la page. Le dégradé fait glisser
   le crème de la section Commerce vers ce beige : sans lui, deux aplats clairs
   très proches se succédaient sans qu'on perçoive la moindre frontière. */
.faq-sec {
  background: linear-gradient(180deg, var(--clair) 0%, var(--troisieme) 22%, var(--troisieme) 100%);
}

/* Pleine largeur, avec la seule marge de page : sur la référence, le filet
   des questions va jusqu'au bord droit de l'écran, pas jusqu'au bord du
   conteneur de lecture. */
.faq__mise {
  width: 100%; padding-inline: var(--marge);
  display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
@media (min-width: 900px) { .faq__mise { grid-template-columns: minmax(0, .88fr) minmax(0, 1.05fr); } }

/* Le mot reste en place pendant que les questions défilent */
.faq__gauche { position: sticky; top: clamp(6rem, 15vh, 10rem); }
.faq__mot {
  font-family: var(--display);
  font-size: clamp(3.2rem, 11.5vw, 15rem);
  font-weight: 500; line-height: .86; letter-spacing: -.035em;
  text-transform: uppercase;
}

/* --- Une question --- */
.faq__item {
  border-top: 1px solid var(--bordure);
  padding-top: clamp(1.4rem, 3vh, 2.4rem);
  padding-bottom: clamp(2.5rem, 7vh, 5.5rem);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.1rem, 2vw, 2rem);
  align-items: start;
}
.faq__item:last-child { padding-bottom: clamp(1.5rem, 4vh, 3rem); }

/* Le badge : le mot QUESTION AU-DESSUS du triangle, le numéro DEDANS.
   Le triangle est un vrai tracé SVG : une bordure découpée en clip-path ne
   suivrait pas les côtés obliques, il n'en resterait que des fragments. */
.faq__badge {
  display: grid; justify-items: center; gap: .3rem;
  width: clamp(84px, 7.4vw, 150px);
}
.faq__eti {
  font-family: var(--display);
  font-size: clamp(.625rem, .78vw, .8125rem);
  font-weight: 500; letter-spacing: .02em;
  color: var(--noir);
}
.faq__tri { position: relative; width: 100%; }
.faq__tri svg { display: block; width: 100%; height: auto; overflow: visible; }
.faq__num {
  position: absolute; top: 26%; left: 50%; transform: translateX(-50%);
  font-family: var(--display);
  font-size: clamp(.75rem, .92vw, .9375rem); font-weight: 500;
  color: var(--noir);
}

.faq__corps { display: grid; gap: clamp(1.1rem, 2.4vh, 2rem); }
.faq__t {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.2rem, 2.05vw, 2.5rem); line-height: 1.14;
  letter-spacing: -.015em;
}
.faq__r {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(.9375rem, 1.2vw, 1.4rem); line-height: 1.4;
  max-width: 48ch;
}

/* La question s'anime au survol : un filet rose se dessine à gauche, le
   triangle se remplit, comme le badge de la référence. */
.faq__item {
  position: relative;
  transition: background .5s var(--sortie);
}
.faq__item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--primaire);
  transform: scaleY(0); transform-origin: top center;
  transition: transform .55s var(--sortie);
}
.faq__item:hover::before { transform: scaleY(1); }
.faq__item:hover { background: var(--champ); }
.faq__tri svg { transition: fill .45s var(--sortie); }
.faq__item:hover .faq__tri svg { fill: var(--primaire); stroke: var(--primaire); }
.faq__item:hover .faq__num { color: var(--clair); }
.faq__item:hover .faq__t { color: var(--primaire); }
.faq__item:hover .faq__eti { color: var(--primaire); }
.faq__t, .faq__num, .faq__eti { transition: color .4s var(--sortie); }

@media (max-width: 900px) {
  .faq__gauche { position: static; }
  .faq__item { grid-template-columns: 1fr; }
}

/* =========================================================================
   CONTACT
   ========================================================================= */

/* Section inversée : sans elle, la fin du site enchaînait TROIS fonds clairs
   d'affilée (Commerce crème, FAQ beige, Contact beige), dont deux identiques,
   et l'alternance franche tenue jusque-là se cassait net. Le noir rétablit la
   respiration et enchaîne naturellement sur le pied de page, lui aussi noir. */
.contact-sec {
  background: var(--noir);
  color: var(--clair);
  --accent-inv:  #E8628E;
  --bordure-inv: rgba(244, 237, 229, .2);
  --gris-inv:    rgba(244, 237, 229, .62);
  --fond-inv-2:  #151210;
}
.contact-sec .etiq--rouge { color: var(--accent-inv); }
.contact-sec .petit { color: var(--gris-inv); }

/* Trois lignes pleine largeur, cliquables : le courriel et les deux réseaux.
   Pas de formulaire : Samira répond elle-même, en direct. */
.contact__voies { margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--bordure-inv); max-width: 46rem; }
.contact__ligne {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3.5vw, 2.25rem) 0 clamp(1.5rem, 3.5vw, 2.25rem) 0;
  border-bottom: 1px solid var(--bordure-inv);
  color: inherit;
  transition: padding-left .5s var(--sortie), background .5s var(--sortie);
}
.contact__ligne::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent-inv);
  transform: scaleY(0); transform-origin: top center;
  transition: transform .55s var(--sortie);
}
.contact__ligne:hover { padding-left: 1.15rem; background: var(--fond-inv-2); }
.contact__ligne:hover::before { transform: scaleY(1); }

.contact__texte { display: grid; gap: .35rem; }
.contact__eti { font-family: var(--display); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gris-inv); }
.contact__val {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 2rem); letter-spacing: -.01em;
  transition: color .4s var(--sortie);
}
.contact__ligne:hover .contact__val { color: var(--accent-inv); }
.contact__ligne .fl { color: var(--accent-inv); font-size: 1.2rem; transition: transform .55s var(--sortie); }
.contact__ligne:hover .fl { transform: translateX(8px); }

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */

.pied { position: relative; background: var(--noir); color: var(--troisieme); padding-block: clamp(3.5rem, 8vw, 6rem) 2rem; }

/* La ligne d'accent qui sépare le pied du reste. C'est la classe .trait de
   base.css (transform/transition/.visible déjà définis là-bas) : on ne pose
   ici que la position et la couleur, pour ne pas dupliquer le mécanisme. */
.pied__trait { position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(90deg, transparent, var(--primaire), transparent); }

.pied a:hover { color: var(--primaire); }
.pied__haut { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 700px) { .pied__haut { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.pied h3 { font-family: var(--display); font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--primaire); margin-bottom: 1.1rem; }
.pied ul { display: grid; gap: .6rem; font-size: .9375rem; }
.pied__logo { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--clair); font-size: 1.05rem; }
.pied__bas { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid rgba(227,216,206,.22); display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between; font-size: .8125rem; }