/* ==========================================================================
   The 6 Musts to Move the Room — feuille principale
   Toutes les valeurs réglables sont dans tokens.css.
   Pas de dégradé, pas d'ombre portée : le deck est plat, franc, contrasté.
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--gris);
  color: var(--noir);
  font-family: var(--f-corps);
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.contenu {
  width: 100%;
  max-width: var(--max-largeur);
  margin-inline: auto;
  padding-inline: var(--marge-page);
}

/* Masqué visuellement mais lu par les lecteurs d'écran */
.lecteur-seul {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Lien d'évitement, premier élément focusable de la page */
.evitement {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 100;
  padding: .75rem 1.5rem;
  background: var(--orange);
  color: var(--blanc);
  font-weight: 700;
  transition: transform 180ms var(--courbe);
}
.evitement:focus { transform: translate(-50%, 0); }


/* --- Apparition au défilement --------------------------------------------
   Les éléments portant [data-apparait] démarrent décalés et transparents.
   Le script ajoute .vu quand ils entrent dans la fenêtre.
   --etape porte le rang de l'élément dans sa séquence.                      */

[data-apparait] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   var(--duree) var(--courbe),
    transform var(--duree) var(--courbe);
  transition-delay: calc(var(--etape, 0) * var(--pas));
}
[data-apparait].vu {
  opacity: 1;
  transform: none;
}
/* Sans JavaScript, tout reste visible : le contenu prime sur l'effet. */
.sans-js [data-apparait] { opacity: 1; transform: none; }


/* --- En-tête -------------------------------------------------------------- */

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  height: var(--header-h);
  background: color-mix(in srgb, var(--gris) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--filet) solid transparent;
  transform: translateY(-100%);
  transition: transform 380ms var(--courbe), border-color 380ms var(--courbe);
}
.entete.montre {
  transform: none;
  border-bottom-color: var(--gris-ligne);
}

.entete .contenu {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

/* Le logo est le fichier de marque d'origine, pas une reconstitution en texte :
   le « . AGENCY » et le calage des lettres font partie du dessin. Sa largeur est
   calée sur le deck, où le bloc occupe environ 17 % de la largeur de page. */
.marque {
  display: block;
  margin-right: auto;
  line-height: 0;
}
.marque__logo {
  width: var(--logo-l, 150px);
  height: auto;
}

.langues {
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: clamp(11px, 1.45vh, 15px);
  letter-spacing: .02em;
  color: var(--navy);
}
.langues li:not(:last-child)::after {
  content: "-";
  margin-left: .5em;
  opacity: .45;
}
.entete .marque__logo { --logo-l: clamp(118px, 11vw, 185px); }
.langues [aria-current="true"] {
  color: var(--orange);
  font-weight: 700;
}

.cta-entete {
  padding: .6em 1.25em;
  background: var(--orange);
  color: var(--blanc);
  font-size: var(--t-menu);
  font-weight: 700;
  letter-spacing: var(--ls-menu);
  text-transform: uppercase;
  transition: background 200ms var(--courbe);
}
.cta-entete:hover { background: var(--navy); }

@media (max-width: 700px) {
  .langues { display: none; }
}

/* Portrait (telephone) : le titre et la phrase blanche descendent pour que
   la phrase vienne juste au-dessus de la main. La main occupe le bas de la
   photo (cadree en hauteur en portrait), on decale en svh pour suivre la
   hauteur d'ecran. Demande du 19 aout 2026. */
@media (max-width: 700px) and (orientation: portrait) {
  .hero__corps { translate: 0 8.5svh; }
}


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

.hero {
  position: relative;
  isolation: isolate;          /* contexte d'empilement propre : les z-index ci-dessous
                                  se comparent tous ici, entre photo, filet, main et texte */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + 2rem) 0;
  overflow: hidden;
  background: var(--noir);
}

/* Ordre d'empilement du hero :
   0  photo de fond
   1  filet orange
   2  main détourée  (occulte le filet)
   3  logo, titre, texte de signature  (au-dessus de tout) */
.hero__fond,
.hero__main {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% center;          /* identique sur les deux, sinon désalignement */
  filter: grayscale(1) contrast(1.06);  /* même rendu que la photo, superposition invisible */
}
.hero__fond { z-index: 0; }
.hero__main {
  z-index: 2;
  pointer-events: none;   /* purement visuel, ne bloque aucun clic */
}

/* Vidéo de la main : posée en absolu par-dessus la photo, calée par le script.
   Masquée à la SILHOUETTE de la main (le reste transparent → la photo transparaît),
   et remontée au-dessus du filet (z-index 2 > filet 1, < texte 3) : la main occulte
   ainsi la barre orange, qui se coupe à gauche et reprend à droite. */
.hero__video {
  position: absolute;
  z-index: 2;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;                                  /* fondu déclenché sur canplay */
  transition: opacity 250ms var(--courbe);
  -webkit-mask-image: url("../assets/videos/hand-mask.png");
          mask-image: url("../assets/videos/hand-mask.png");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.hero__video.pret { opacity: 1; }

/* Mode calibration : ?debug=align → vidéo semi-transparente + contour rouge. */
.hero__video.debug-align { opacity: .5; outline: 2px solid red; }

/* Mouvement réduit : pas de vidéo, la photo seule reste. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}
/* Pas de voile dégradé sur le hero : le deck pose l'orange directement sur la
   photo, et le brief exclut les dégradés. La photo est assez sombre à gauche. */

/* Comme sur la page 1 du deck : logo foncé posé en haut à gauche de la photo,
   à 3,4 % du haut, et sélecteur de langue juste en dessous. Mesuré au rendu :
   le bloc de marque occupe 16,9 % de la largeur de page. */
.hero__marque {
  position: absolute;
  top: clamp(1rem, 3.4vh, 2.75rem);
  left: var(--marge-page);
  z-index: 3;
}
.hero__marque .marque__logo { --logo-l: clamp(170px, 17vw, 310px); }
.hero__marque .langues { margin-top: .7em; }

/* Sur grand écran, le contenu du hero ne se centre pas dans le max-width global
   (1560px) : il reste aligné à gauche sur la marge de page, comme le logo. Sinon
   sur large écran (Safari plein écran) le titre paraît rentré vers le centre. */
.hero > .contenu { max-width: none; }

.hero__corps {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
}

.hero__titre {
  font-family: var(--f-titre);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: var(--lh-serre);
  letter-spacing: var(--ls-titre);
  color: var(--orange);
  max-width: 15ch;
}
.hero__titre .chiffre {
  font-size: 1.32em;
  line-height: 0;
  vertical-align: -.06em;
}

/* Le « 6 » respire : inspiration ample et lente, puis expiration, en boucle
   douce. En transform seul (aucun reflow du texte autour). Déclenché par le
   script quand le principe est visible ; en pause sinon. */
.beat {
  display: inline-block;
  transform-origin: center;
  will-change: transform;
  animation: beat 5.2s ease-in-out infinite;
  animation-play-state: paused;   /* ne démarre pas au chargement */
}
.beat.actif { animation-play-state: running; }
/* Le titre « Emotion » respire, ancré à gauche pour ne pas déborder. */
.principe__titre .beat { transform-origin: left center; }
/* Respiration lourde et lente : inspiration ample, palier « poumons pleins »
   (chargé), puis longue expiration. Pas de rebond, pas de battement sec. */
@keyframes beat {
  0%   { transform: scale(1);    }   /* poumons vides */
  40%  { transform: scale(1.16); }   /* inspiration lente et pleine */
  58%  { transform: scale(1.16); }   /* palier : poumons pleins, chargé */
  100% { transform: scale(1);    }   /* expiration lente */
}
@media (prefers-reduced-motion: reduce) {
  .beat { animation: none; }
}
.hero__accroche {
  margin-top: .6em;
  font-family: var(--f-titre);
  font-size: var(--t-sous);
  font-weight: 700;
  color: var(--blanc);
  /* Le point final est calé par le script sous le point de « Room. ». Le début
     est légèrement rentré vers la droite (le C ne colle pas au fût du R).
     inline-grid : les deux phrases se superposent dans la même cellule, donc la
     hauteur réservée est celle de la plus haute et rien ne bouge dessous au swap. */
  display: inline-grid;
  margin-left: clamp(3px, 0.42vw, 8px);
  letter-spacing: -0.01em;
  perspective: 700px;                      /* pour le flip 3D des phrases */
}
/* Tagline alternante : deux phrases empilées qui basculent en flip vertical
   (haut → bas). Apparition ET passage d'une phrase à l'autre = même flip. */
.acc-phrase {
  grid-area: 1 / 1;
  white-space: nowrap;
  transform-origin: center top;            /* pivot en haut → le flip se déroule vers le bas */
  backface-visibility: hidden;
  opacity: 0;
  /* Alternance 100% CSS (aucun minuteur JS) : chaque phrase joue le même flip en
     boucle, la phrase B décalée d'une demi-période → elles se relaient. */
  animation: acc-flip 7.2s cubic-bezier(.2, .7, .2, 1) infinite;
}
.acc-phrase--b { animation-delay: -3.6s; }   /* décalée d'une demi-période */
/* Maintien ~2,4s par phrase (inchangé) ; le flip lui-même est plus lent (~1,2s). */
@keyframes acc-flip {
  0%, 33.3%     { transform: rotateX(0deg);   opacity: 1; }   /* à plat, lisible (maintien) */
  50%           { transform: rotateX(90deg);  opacity: 0; }   /* bascule vers le bas et sort */
  50.01%, 83.3% { transform: rotateX(-90deg); opacity: 0; }   /* repliée vers le haut, cachée */
  100%          { transform: rotateX(0deg);   opacity: 1; }   /* rebascule à plat (entrée) */
}
/* Mouvement réduit : phrase A affichée en statique, pas d'alternance ni de flip. */
@media (prefers-reduced-motion: reduce) {
  .acc-phrase { animation: none; transform: none; }
  .acc-phrase--a { opacity: 1; }
  .acc-phrase--b { opacity: 0; }
}

/* --- Indice de défilement (chevron) -------------------------------------- */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 6;                 /* au-dessus du contenu et de la vidéo du hero */
  display: grid;
  place-items: center;
  width: 58px; height: 58px;  /* zone cliquable */
  color: var(--blanc);        /* hérité de la palette claire du hero, jamais noir pur */
  cursor: pointer;
  transition: opacity 300ms var(--courbe);
}
@media (max-width: 700px) { .hero__cue { bottom: 4px; translate: 26px 0; } }   /* chevron 26px a droite sur telephone (20 aout 2026) */
.hero__cue.cachee { opacity: 0; pointer-events: none; }  /* effacé dès qu'on a défilé */

/* Chevron unique, plus grand : descente douce + léger fondu, en boucle. */
.hero__cue__ico {
  display: block;
  animation: cue-bob 2s ease-in-out infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(0);   opacity: 1;   }
  50%      { transform: translateY(8px); opacity: .45; }
}
/* Survol : on fige l'animation. */
.hero__cue:hover .hero__cue__ico { animation-play-state: paused; }
/* Mouvement réduit : chevron visible et cliquable, mais statique. */
@media (prefers-reduced-motion: reduce) {
  .hero__cue__ico { animation: none; opacity: 1; transform: none; }
}

/* Signature auteur : filet orange pleine largeur, « by » en Times italique.
   Pas de z-index ici : sinon .signature deviendrait un contexte d'empilement et
   emprisonnerait le filet, qui doit passer sous le calque de la main. */
.signature {
  position: relative;
  margin-top: auto;
  padding-block: 1.1rem 1.6rem;
}
.signature__filet {
  position: relative;
  z-index: 1;                 /* passe DERRIÈRE le calque de la main (z-index 2) */
  height: 2px;
  background: var(--orange);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms var(--courbe) 380ms;
}
.hero.vu .signature__filet { transform: scaleX(1); }

.signature__ligne {
  position: relative;
  z-index: 3;                 /* le texte reste au-dessus du calque de la main */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  margin-top: .85rem;
  color: var(--blanc);
}
.signature__agence {
  font-size: var(--t-menu);
  letter-spacing: var(--ls-menu);
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}

/* Ligne de gauche animée : trois phrases en fondu croisé.
   Les phrases partagent la même cellule de grille, donc le conteneur prend
   la taille de la plus longue et rien ne bouge autour pendant la rotation. */
.rotor {
  display: inline-grid;
  vertical-align: bottom;
}
.rotor__phrase {
  grid-area: 1 / 1;                 /* toutes empilées au même endroit */
  opacity: 0;
  transition: opacity 400ms var(--courbe);
}
.rotor__phrase.est-active { opacity: 1; }

/* Sans animation : seule la première phrase existe visuellement, sans transition. */
@media (prefers-reduced-motion: reduce) {
  .rotor__phrase { transition: none; }
  .rotor__phrase:not(:first-child) { display: none; }
}
.signature__auteur {
  font-family: var(--f-titre);
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.signature__by {
  font-family: var(--f-citation);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  opacity: .9;
}

@media (max-width: 620px) {
  .signature__ligne { flex-direction: column; align-items: flex-start; gap: .4rem; }
}


/* --- Les six principes ---------------------------------------------------- */

/* --rythme : espacement vertical unique, celui validé entre les blocs 1 et 2.
   Il sert à la fois entre chaque bloc et au-dessus du premier (sous le hero). */
.principes {
  --rythme: clamp(3rem, 12vh, 6.4rem);
  padding-top: var(--rythme);
  padding-bottom: 0;   /* la citation de transition vient se caler juste sous le 6 */
  background: var(--blanc);   /* fond blanc de la section des principes */
}

/* Chaque bloc : chiffre à gauche, texte à sa droite, tous deux alignés en haut.
   --decale : décalage horizontal propre au bloc ; c'est lui qui crée le quinconce,
   volontairement dissymétrique (posé en style inline sur chaque article).
   --largeur : largeur du texte propre au bloc, réglée pour que l'accroche tienne
   sur une ligne et le paragraphe sur quatre lignes au plus. La dissymétrie des
   largeurs est voulue. */
.principe {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2.4vw, 2.5rem);
  margin-top: var(--rythme);
  margin-left: var(--decale, 0px);
}
.principe:first-of-type { margin-top: 0; }

.principe__chiffre {
  flex: 0 0 auto;
  font-family: var(--f-titre);
  font-size: var(--t-chiffre);
  font-weight: 700;
  line-height: .74;
  letter-spacing: -0.06em;
  color: var(--orange);
  user-select: none;
  will-change: transform;   /* décalage de parallaxe posé par le script */
}

.principe__texte { width: var(--largeur, 34ch); max-width: 100%; }

/* Empêche une phrase de fin d'être coupée en plein milieu : elle bascule
   entière à la ligne suivante. Neutralisé en une colonne (mobile) où couper
   redevient nécessaire pour ne pas déborder. */
.insecable { white-space: nowrap; }
@media (max-width: 860px) { .insecable { white-space: normal; } }

/* L'accroche tient sur une seule ligne. */
.principe__accroche { white-space: nowrap; }

/* Surlignage marqueur : au survol du bloc, le fond jaune fluo se déploie de
   gauche à droite derrière le texte, comme un coup de surligneur. */
.surligne {
  --fluo: #EEFF00;
  padding: .08em .14em;
  background-image: linear-gradient(var(--fluo), var(--fluo));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;              /* fond plein derrière le texte */
  transition: background-size 380ms var(--courbe);
}
.principe:hover .surligne,
.principe:focus-within .surligne,
.principe.surligne-actif .surligne { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) {
  .surligne { transition: none; }
}

.principe__titre {
  font-family: var(--f-titre);
  font-size: var(--t-principe);
  font-weight: 700;
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
}
.principe__accroche {
  margin-top: .35em;
  font-size: var(--t-sous);
  font-weight: 500;
}
.principe__citation {
  margin-top: 1.5em;
  font-family: var(--f-citation);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  line-height: 1.35;
  color: var(--orange);
}
.principe__para {
  margin-top: .9em;
  text-wrap: pretty;
}
.principe__para strong { font-weight: 700; }
.principe__para em { font-style: italic; }

@media (max-width: 860px) {
  /* Une colonne : chiffre au-dessus, texte dessous. Décalages et largeurs
     dissymétriques neutralisés, l'accroche peut repasser sur deux lignes. */
  .principe {
    flex-direction: column;
    gap: .5rem;
    margin-left: 0 !important;
  }
  /* La citation de transition : sur desktop elle remonte de 3rem au niveau
     du bas du chiffre 6 ; en colonne le chiffre est au-dessus du texte et
     elle venait se poser SUR le dernier paragraphe. Ici elle passe sous le
     texte, avec un peu d'air, avant l'image qui suit. */
  section.transition { margin-top: 0; padding-top: 2rem; padding-bottom: 2rem; }   /* meme air au-dessus et au-dessous ; en padding, pas en marge : la marge laissait voir le gris de la page entre les deux blancs (selecteur renforce : la regle de base, plus bas dans le fichier, gagnait) */
  .principe__chiffre { font-size: clamp(7rem, 34vw, 12rem); }
  .principe__texte { width: 100%; }
  .principe__accroche { white-space: normal; }
}


/* --- Citation de transition ------------------------------------------------ */

/* Citation de transition remontée : elle conclut le principe 6 comme dans le
   deck (elle était en bas de la slide Emotion), donc peu d'espace au-dessus et
   pas de filet de séparation. L'espace sous elle prépare la section suivante. */
/* La citation appartient au 6e principe : même fond blanc, collée dessous,
   elle prolonge la section des principes plutôt que d'ouvrir une section à part. */
.transition {
  padding-top: 0;
  margin-top: -3rem;   /* remonte le haut de la citation au niveau du bas du chiffre 6 */
  padding-bottom: clamp(3rem, 9vh, 7rem);
  background: var(--blanc);
}
.transition__texte {
  font-family: var(--f-citation);
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 3.6rem);
  line-height: 1.15;
  color: var(--orange);
  text-wrap: balance;
  text-align: right;   /* citation alignée à droite */

  /* Soulignement bleu-noir dynamique : caché au repos (transparent + posé bas),
     il remonte et se colore quand la phrase atteint le milieu vertical de
     l'écran (classe posée par le script). */
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: .06em;
  text-underline-offset: .55em;
  transition: text-decoration-color 550ms var(--courbe),
              text-underline-offset 550ms var(--courbe);
}
.transition__texte.souligne-actif {
  text-decoration-color: var(--navy);
  text-underline-offset: .16em;
}
@media (prefers-reduced-motion: reduce) {
  .transition__texte { transition: none; }
}


/* --- Livrables -------------------------------------------------------------- */

/* Filet de séparation : ferme la section principes + citation, ouvre les livrables. */
#livrables { border-top: var(--filet) solid var(--gris-ligne); }

.livrables {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  background: var(--gris);
}

/* Bichromie orange, reproduite en CSS : l'image passe en niveaux de gris puis
   se multiplie sur un aplat orange. Les noirs restent noirs, les blancs
   deviennent orange. Même principe que le montage du deck. */
.duo {
  position: relative;
  background: var(--orange);
  isolation: isolate;
  overflow: hidden;
}
.duo__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 55% center;
  filter: grayscale(1) contrast(1.08) brightness(1.06);
  mix-blend-mode: multiply;
}

.livrables__visuel {
  position: relative;
  min-height: 60vh;
}

/* Titre de la section, posé en blanc en haut de la photo. */
.livrables__titre {
  position: absolute;
  top: clamp(1rem, 3vw, 2.5rem);
  left: clamp(1rem, 3vw, 2.5rem);
  right: clamp(1rem, 3vw, 2.5rem);
  z-index: 3;
  margin: 0;
  font-family: var(--f-titre);
  font-size: var(--t-section);
  font-weight: 700;
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
  color: var(--blanc);
}

.vignettes {
  position: absolute;
  left: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  max-width: 62%;
}
.vignette {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .9rem;
  border-radius: 10px;   /* coins légèrement arrondis, façon app */
  background: var(--blanc);
  color: var(--navy);
}
.vignette__cle {
  font-family: var(--f-titre);
  font-size: var(--t-menu);
  font-weight: 700;
  letter-spacing: var(--ls-menu);
  text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
}
.vignette__quoi {
  font-size: var(--t-petit);
  line-height: 1.3;
}

.livrables__contenu {
  padding: clamp(2rem, 5vw, 4.5rem) var(--marge-page);
}

.familles {
  --fam-gap: clamp(1.5rem, 3vw, 2.75rem);
  --filet-retrait: clamp(.75rem, 1.5vw, 1.25rem);  /* retrait haut/bas des filets verticaux */
  display: grid;
  gap: var(--fam-gap);
  grid-template-columns: repeat(4, 1fr);   /* 1440+ : quatre colonnes */
  align-items: stretch;                     /* colonnes de même hauteur : les 3 filets ont
                                               la même longueur et démarrent à la même altitude,
                                               même si « Raise » n'a que 2 items */
}
.famille { position: relative; }           /* ancre le filet vertical (::before) */

/* Filets verticaux entre les colonnes 2, 3 et 4. Mêmes variables que le filet
   horizontal de .deja (--filet + --gris-ligne) : liés, ils suivent si tu changes
   la variable. En retrait haut/bas (--filet-retrait). Centrés dans le gap
   (left = -gap/2) : autant de dégagement de chaque côté, sans rétrécir les
   colonnes (pas de padding, donc aucun retour à la ligne provoqué). */
.famille:not(:first-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--fam-gap) / -2);
  top: var(--filet-retrait);
  bottom: var(--filet-retrait);
  width: var(--filet);
  background: var(--gris-ligne);
}

/* 768 : deux colonnes → un filet vertical au centre de chaque rangée
   (colonne de droite) + un filet horizontal pleine largeur entre les rangées
   (même retrait latéral que le filet du bas, soit aucun). */
@media (max-width: 860px) {
  .familles { grid-template-columns: repeat(2, 1fr); }
  .famille:nth-child(odd)::before { content: none; }
  .famille:nth-child(n+3) {
    border-top: var(--filet) solid var(--gris-ligne);
    padding-top: var(--fam-gap);
  }
}

/* 390 : une colonne empilée → aucun filet vertical.
   Option A (par défaut) : un filet horizontal entre chaque groupe.
   Option B : aucun filet (commenter le bloc border-top ci-dessous). */
@media (max-width: 520px) {
  .familles { grid-template-columns: 1fr; }
  .famille::before { content: none; }
  .famille:not(:first-child) {                 /* Option A */
    border-top: var(--filet) solid var(--gris-ligne);
    padding-top: var(--fam-gap);
  }

  /* Accordeon (telephone, comme la section Ddddd du site) : les quatre
     familles sont repliees, Raise s'ouvre tout seul au bout de 1,12 s quand
     le bloc arrive a l'ecran, les autres au tap sur leur titre ; une seule
     ouverte a la fois. Le script pose .est-ouverte (js/main.js). */
  .famille__titre {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .famille__titre::after {                 /* chevron discret, tourne a l'ouverture */
    content: "";
    width: .55em;
    height: .55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-right: .2em;
    transition: transform 300ms var(--courbe);
    opacity: .7;
  }
  .famille.est-ouverte .famille__titre::after { transform: rotate(225deg) translate(-.1em, -.1em); }
  /* (selecteurs renforces de .familles : les regles de base de ces classes
     sont ecrites plus bas dans le fichier et gagneraient sinon) */
  .familles { gap: 1rem; }                                   /* vignettes moins hautes */
  .familles .famille:not(:first-child) { padding-top: 1rem; }
  .familles .famille { cursor: pointer; -webkit-tap-highlight-color: transparent; }   /* toute la vignette est cliquable */
  .familles .famille__sous { min-height: 0; margin-top: .25em; }
  .familles .famille__liste {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 380ms var(--courbe), opacity 280ms var(--courbe), margin-top 380ms var(--courbe);
  }
  .familles .famille.est-ouverte .famille__liste {
    max-height: 40rem;
    opacity: 1;
    margin-top: 1.2em;
  }
}

/* Niveau 1 — titre : le plus fort, uppercase, tracking large. */
.famille__titre {
  font-family: var(--f-titre);
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
}
/* Niveau 2 — sous-titre : une respiration. Une taille en dessous, léger, estompé. */
.famille__sous {
  margin-top: .4em;
  min-height: 2.6em;   /* réserve 2 lignes → les 1ers items s'alignent entre colonnes */
  font-family: var(--f-corps);
  font-size: var(--t-petit);
  font-weight: 300;
  line-height: 1.3;
  color: var(--navy);
  opacity: .6;
}
/* Niveau 3 — items : taille de lecture, poids normal, interligne généreux. */
.famille__liste {
  margin-top: 1.8em;   /* écart sous-titre → 1er item plus grand que l'écart entre items */
  display: grid;
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
  color: var(--navy);
}
.famille__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;                  /* la précision passe sous le libellé plutôt que de le couper */
  gap: 0 .5em;
  min-height: 44px;                 /* zone cliquable */
  color: inherit;
  text-decoration: none;
  transition: color 200ms var(--courbe);
}
.famille__item:hover,
.famille__item:focus-visible { color: var(--orange); }   /* hover subtil, cohérent avec le site */
.famille__note {                    /* précision « Investor · Startup » */
  font-size: .82em;
  color: var(--gris-texte);
}
/* Badge « New » : petit, discret, n'affecte pas la ligne. */
.famille__badge {
  font-family: var(--f-titre);
  font-size: .58em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blanc);
  background: var(--orange);
  padding: .2em .5em;
  border-radius: 5px;
  line-height: 1;
  vertical-align: middle;
}

/* Ligne transversale Redesign / Review : point d'entrée différent, pleine
   largeur, séparée par un filet fin. Volontairement en ligne, pas en colonne. */
.deja {
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  border-top: var(--filet) solid var(--gris-ligne);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .1em .8em;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
}
.deja__q { color: var(--navy); }
.deja__fleche { color: var(--gris-texte); }
.deja__liens {
  font-family: var(--f-titre);
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--gris-texte);
}
.deja__liens a {
  color: var(--orange);
  text-decoration: none;
  transition: opacity 200ms var(--courbe);
}
.deja__liens a:hover,
.deja__liens a:focus-visible { opacity: .65; }

/* Le bloc ajouté : imprimé/PDF contre keynote joué sur scène */
.usages {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: var(--filet) solid var(--gris-ligne);
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.usage__titre {
  font-family: var(--f-titre);
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  font-weight: 700;
  letter-spacing: var(--ls-titre);
}
.usage__titre span { color: var(--orange); }
.usage__texte { margin-top: .5em; font-size: var(--t-petit); line-height: 1.6; }

.livrables__accroche {
  padding: 0 var(--marge-page) clamp(2rem, 5vw, 4rem);
  font-family: var(--f-titre);
  font-size: var(--t-section);
  font-weight: 700;
  letter-spacing: var(--ls-titre);
  line-height: var(--lh-titre);
  color: var(--orange);
}

@media (max-width: 900px) {
  .livrables { grid-template-columns: 1fr; }
  .livrables__visuel { min-height: 52vh; }
  .vignettes { max-width: none; right: clamp(1rem, 3vw, 2.5rem); }
}


/* --- Portfolio -------------------------------------------------------------- */

.portfolio {
  padding-block: var(--section-y);
  border-top: var(--filet) solid var(--gris-ligne);
  background: var(--blanc);   /* fond blanc pour détacher la section du gris de la page */
}

.portfolio__entete {
  display: flex;
  align-items: flex-end;              /* titre à gauche et légende à droite alignés par le bas */
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
.portfolio__legende {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--f-titre);
  font-size: var(--t-menu);
  font-weight: 700;
  letter-spacing: var(--ls-menu);
  text-transform: uppercase;
  color: var(--navy);
}
.portfolio__legende .puce {
  display: grid;
  place-items: center;
  width: 1.9em; height: 1.9em;
  background: var(--orange);
  color: var(--blanc);
  border-radius: 6px;   /* rayon des cards (8px) ramené à l'échelle du N°. (~23px) pour un arrondi perçu identique */
}

/* Titre de la section portfolio, en noir. */
.portfolio__titre {
  font-family: var(--f-titre);
  /* Réduit par rapport à --t-section : l'accroche est forcée sur deux lignes
     insécables (coupe après « attract »), donc la taille s'adapte pour que la
     ligne 2 « millions for our startups & clients. » tienne jusqu'à 390px sans
     déborder ni passer sur une 3e ligne. ~21px à 390 (> corps), 4rem sur desktop. */
  font-size: clamp(1.2rem, 5.4vw, 4rem);
  font-weight: 700;
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
  color: var(--noir);
  margin: 0;   /* l'espacement bas est porté par .portfolio__entete */
}
/* Coupe intentionnelle : chaque ligne est un bloc insécable. La répartition
   des mots ne change jamais (pas de text-wrap: balance, pas de max-width). */
.portfolio__titre span { display: block; white-space: nowrap; }

/* Piste du carrousel : deux vues de six cartes.
   La zone porte les chevrons (hors du .piste qui, lui, masque la vue
   hors-champ par overflow:hidden — sinon il clipperait aussi les chevrons). */
.piste-zone { position: relative; }
.piste {
  position: relative;
  overflow: hidden;
}
.piste__rail {
  display: flex;
  transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .piste__rail { transition: none; }   /* changement de page instantané */
}
.vue {
  flex: 0 0 100%;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;        /* toutes les rangées à la hauteur de la plus haute => cartes homogènes */
  align-items: stretch;
}

/* --- Cartes qui se retournent (vraie rotation 3D) -------------------------
   Bouton porteur de la perspective. Les deux faces sont empilées dans la même
   cellule de grille (.carte__inner) : la hauteur du conteneur suit donc
   automatiquement la face la plus haute et s'applique aux deux — aucune hauteur
   en dur, aucun saut de layout, et le texte du dos ne peut pas déborder. */
.carte {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  perspective: 1000px;
  touch-action: manipulation;               /* pas de délai 300ms ni double-tap zoom */
  -webkit-tap-highlight-color: transparent;  /* remplacé par le retour :active ci-dessous */
}
.carte:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.carte__inner {
  position: relative;
  height: 100%;                              /* remplit la carte (rangée homogène de la grille) */
  display: grid;                             /* les deux faces empilées => hauteur = face la plus haute */
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(.4, 0, .2, 1);
}
.carte__face {
  grid-area: 1 / 1;                          /* empilement exact */
  overflow: hidden;
  background: var(--blanc);                  /* même carte des deux côtés */
  border: var(--filet) solid var(--gris-ligne);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: border-color 340ms var(--courbe);
}
.carte:hover .carte__face { border-color: var(--orange); }
.carte:focus-visible .carte__face { border-color: var(--orange); }
.carte__face--avant   { display: grid; position: relative; }   /* le média remplit la face */
/* Dos pré-tourné, ET décalé de 1px en profondeur : la face active (opaque)
   occulte toujours l'autre. Sans ce décalage les deux faces sont coplanaires
   à z=0 → le dos (et ses bordures) transparaît à travers l'avant, et au survol
   le badge / le bloc-titre de l'avant restaient visibles par-dessus le dos. */
.carte__face--arriere { display: grid; transform: rotateX(180deg) translateZ(2px); }

/* État retourné : latch pour le tap tactile et le clavier. */
.carte[aria-expanded="true"] .carte__inner { transform: rotateX(180deg); }

/* Desktop (pointeur fin, survol possible) : rotation au survol.
   Le focus clavier passe par aria-expanded (piloté en JS) pour que Entrée /
   Espace puissent rebasculer sans que :focus-visible fige la face arrière. */
@media (hover: hover) and (pointer: fine) {
  .carte__inner { transition-delay: 80ms; }   /* sortie légèrement retardée : anti-clignotement au frôlement */
  .carte:hover .carte__inner {
    transform: rotateX(180deg);
    transition-delay: 0ms;                     /* entrée immédiate */
  }
}
/* Tactile : geste direct, rotation un peu plus rapide, retour au contact. */
@media (hover: none) {
  .carte__inner { transition-duration: 500ms; }
  .carte { transition: transform 120ms var(--courbe); }
  .carte:active { transform: scale(.985); }    /* confirme le contact (remplace le tap-highlight) */
}
/* Accessibilité mouvement : bascule instantanée, pas d'animation. */
@media (prefers-reduced-motion: reduce) {
  .carte__inner { transition: none; }
}

.carte__media {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;              /* remplit la face quand la carte est étirée (homogénéité) : sinon le fond navy apparaissait en bande sombre en bas */
  aspect-ratio: 16 / 9;      /* garde la hauteur naturelle 16/9 quand c'est la face avant qui commande la taille */
  overflow: hidden;
  background: var(--navy);
}
.carte__img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Affordance tactile uniquement : indique qu'on peut retourner la carte. */
.carte__pivot { display: none; }
@media (hover: none) {
  .carte__pivot {
    display: grid;
    place-items: center;
    position: absolute;
    right: .55rem; bottom: .55rem;
    z-index: 3;
    color: var(--blanc);
    opacity: .5;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
    transition: opacity 300ms var(--courbe);
  }
  .carte[aria-expanded="true"] .carte__pivot { opacity: 0; }   /* disparaît quand retournée */
}

.carte__badge {
  position: absolute;
  top: .55rem; right: .55rem;   /* badge flottant façon notification d'app */
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 2.2em;
  min-height: 2.2em;             /* = min-width : un seul chiffre => fond carré (le contenu long, ex. « 30+ », s'élargit) */
  padding: .25em .5em;
  border-radius: 8px;            /* carré aux coins arrondis, comme un badge non lu */
  background: var(--orange);
  color: var(--blanc);
  font-family: var(--f-titre);
  font-size: clamp(.85rem, 1.1vw, 1.05rem);
  font-weight: 700;
  text-align: center;
  transform: scale(.86);
  transform-origin: top right;
  opacity: .92;
  transition: transform 340ms var(--courbe), opacity 340ms var(--courbe);
}
.carte:hover .carte__badge,
.carte:focus-within .carte__badge { transform: scale(1); opacity: 1; }

/* Face avant : titre posé à même le média (badge + surtitre). */
.carte__sur {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  padding: .7em .85em;
  color: var(--blanc);
}
/* Comme dans le deck : le titre est posé à même la photo, sauf sur les trois
   cartes dont l'image est trop claire, qui reçoivent un aplat de couleur. */
.carte__sur--bloc { background: var(--teinte, rgba(0,0,0,.55)); }
.carte__secteur {
  display: block;
  font-family: var(--f-titre);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.carte__type {
  display: block;
  margin-top: .25em;
  font-size: var(--t-petit);
  font-weight: 300;   /* sous-titre en light, comme le deck */
  line-height: 1.25;
  opacity: .92;
}

/* Face arrière : texte descriptif, centré verticalement, padding généreux. */
.carte__dos {
  display: grid;
  align-content: center;
  gap: .55rem;
  padding: clamp(1rem, 3vw, 1.6rem);
}
.carte__etape {
  display: block;
  font-weight: 700;
  font-size: var(--t-petit);
  line-height: 1.3;
}
.carte__desc {
  display: block;
  font-size: var(--t-petit);
  font-weight: 300;   /* paragraphe en light, comme le deck */
  line-height: 1.45;
  color: var(--gris-texte);
}
.carte__services {
  display: grid;
  gap: .3em;
  padding-top: .55rem;
  border-top: var(--filet) solid var(--gris-ligne);
  font-size: var(--t-petit);
  font-weight: 300;   /* liste de prestations en light */
  line-height: 1.35;
}
.carte__services > span { display: flex; gap: .5em; }
.carte__services > span::before { content: "•"; color: var(--orange); }

/* Chevrons de pagination oversize, centrés sous la grille : pour deux pages,
   ils tiennent lieu d'indicateur (l'état désactivé marque la position) et
   remplacent les points. */
.piste-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.piste__fleche {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;           /* grande zone cliquable */
  background: none;
  border: 0;
  color: var(--navy);                  /* palette, pas de noir pur */
  cursor: pointer;
}
.piste__chevron {
  display: block;
  width: 54px; height: 54px;           /* chevrons oversize */
  transition: transform 200ms var(--courbe);
}
/* Hover / focus : translation vers l'extérieur, sans changement de taille. */
.piste__fleche--prec:hover .piste__chevron,
.piste__fleche--prec:focus-visible .piste__chevron { transform: translateX(-3px); }
.piste__fleche--suiv:hover .piste__chevron,
.piste__fleche--suiv:focus-visible .piste__chevron { transform: translateX(3px); }
.piste__fleche[disabled] { opacity: .25; pointer-events: none; cursor: default; }

.points { display: none; }             /* remplacés par les chevrons du bas */

.portfolio__accroche {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  font-family: var(--f-titre);
  font-size: clamp(1.1rem, 3vw, 2.9rem);   /* réduit pour tenir sur une seule ligne */
  font-weight: 700;
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
  color: var(--noir);
  white-space: nowrap;
  text-align: center;   /* centrée au milieu de la page */
}
@media (max-width: 720px) {
  .portfolio__accroche { white-space: normal; font-size: 1.39rem; }   /* sur mobile, on autorise le retour à la ligne ; corps +26% (1.1rem x 1.26) */
}

/* Deux colonnes : les marges latérales sont trop étroites pour loger les
   les chevrons restent centrés sous la grille. */
@media (max-width: 1080px) {
  .vue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mobile : une seule colonne. La pagination par 6 n'a plus de sens :
   liste verticale complète des 12 cartes, chevrons masqués. */
@media (max-width: 680px) {
  /* Telephone : les 12 cartes defilent a l'horizontale au doigt, une carte
     par ecran (82% de large), aimantees au centre (scroll-snap). Les deux
     « vues » de six disparaissent en tant que boites (display: contents), la
     piste devient une seule rangee. Chevrons masques, la pagination par 6
     ne joue plus. Demande du 19 aout 2026. */
  .piste {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .25rem;
    margin-inline: calc(-1 * var(--marge-page));   /* les cartes filent jusqu'aux bords */
    padding-inline: var(--marge-page);
  }
  .piste::-webkit-scrollbar { display: none; }
  .piste__rail {
    flex-direction: row;
    gap: var(--gap);
    transform: none !important;
    transition: none;
  }
  .vue { display: contents; }
  .carte {
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
  /* Proportion du desktop (1,6 : cartes de 420x258 a 1440) plutot que le
     16/9 strict : la boite a ce rapport, la face avant la remplit, et le
     dos (description + services) est pose en absolu dedans ; corps reduit
     pour que les quatre services tiennent, et defilement interne en
     dernier recours. */
  .carte__inner { position: relative; aspect-ratio: 1.6; height: auto; }
  .carte__face--avant { position: absolute; inset: 0; }
  .carte__media { height: 100%; aspect-ratio: auto; }
  .carte__face--arriere {
    position: absolute;
    inset: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* le dos tient dans la boite : corps 11.5px, marges serrees (les tailles
     de base sont en rem, un em sur la face ne suffisait pas) */
  .carte__dos { padding: .7rem .8rem; gap: .35rem; }
  .carte__etape, .carte__desc, .carte__services { font-size: 11.5px; }
  .carte__desc { line-height: 1.35; }
  .carte__services { gap: .15em; padding-top: .35rem; line-height: 1.3; }
  .piste-nav { display: none; }
  /* barre de defilement sous les cartes : piste grise pleine largeur (meme
     gris et meme epaisseur que les traits du manifeste), curseur orange qui
     glisse avec le defilement et que l'on peut saisir. Zone de prise plus
     haute que le trait, pour le doigt. */
  .cartes__barre {
    position: relative;
    height: 3px;
    margin: 1.1rem 0 0;
    background: rgba(0,0,0,.22);
    touch-action: none;
    cursor: pointer;
  }
  .cartes__barre::before {            /* zone de prise invisible, 28px de haut */
    content: "";
    position: absolute;
    inset: -12px 0;
  }
  .cartes__curseur {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 28px;
    background: var(--orange);
    will-change: transform;
  }
}
@media (min-width: 681px) {
  .cartes__barre { display: none; }
}


/* --- Manifeste à photo tournante -------------------------------------------- */

.manifeste {
  position: relative;
  background: var(--gris);
  transition: background 700ms var(--courbe);
}
.manifeste.est-sombre { background: var(--sombre); }

/* La piste est haute d'une fenêtre par photo : c'est cette hauteur qui donne
   au défilement de quoi enchaîner les cinq images sous le cadre collant. */
.manifeste__piste {
  position: relative;
  height: calc(var(--etapes, 5) * 100svh);
}

.manifeste__cadre {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 47%) minmax(0, 53%);
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
}

.manifeste__texte {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 6vh, 5rem) var(--marge-page);
  transition: color 700ms var(--courbe);
}

/* Manifeste en Inter Tight (police web chargée) plutôt qu'Helvetica Neue :
   rendu identique Safari/Chrome, alors qu'Helvetica Neue (système) était
   substituée plus petite sur Safari. Le reste du site garde Helvetica Neue. */
.manifeste__titre {
  font-family: "Inter Tight", var(--f-titre);
  font-size: var(--t-geant);
  font-weight: 700;
  line-height: var(--lh-serre);
  letter-spacing: var(--ls-titre);
  color: var(--orange);
  max-width: 11ch;
}
.manifeste__para {
  margin-top: 1.1em;
  max-width: 38ch;
  font-family: "Inter Tight", var(--f-corps);
  /* Taille propre plutot que --t-corps : celui-ci plafonne a 1.2rem des
     1670px de large, si bien que le paragraphe se tassait sur les grandes
     fenetres pendant que le titre, lui, continuait de suivre. Meme pente
     (1.15vw) et meme valeur qu'avant a 1512px, plafond simplement repousse
     pour que le bloc reste d'un seul tenant. */
  font-size: clamp(1rem, 1.15vw, 1.8rem);
  color: var(--noir);
  transition: color 700ms var(--courbe);
}
.manifeste.est-sombre .manifeste__para { color: var(--blanc); }
.manifeste__para strong { font-weight: 700; }

/* Machine à écrire : chaque caractère est masqué mais réserve sa place
   (visibility → aucun reflow, la mise en ligne finale est fixée dès le départ),
   puis révélé un par un. Le curseur suit la frappe via ::after sur le dernier
   caractère saisi, et clignote. currentColor : orange dans le titre, noir/blanc
   dans le paragraphe, sans réglage supplémentaire. */
.tw__c { visibility: hidden; }
.tw__c.vu { visibility: visible; }
.tw__c--actif { position: relative; }
.tw__c--actif::after {
  content: "";
  position: absolute;
  right: -0.09em;
  top: 0.06em;
  bottom: 0.04em;
  width: 0.07em;
  background: currentColor;
  animation: tw-blink 1.05s steps(1) infinite;
}
@keyframes tw-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
/* Mouvement réduit : pas de machine à écrire, texte affiché normalement. */
@media (prefers-reduced-motion: reduce) {
  .tw__c { visibility: visible; }
  .tw__c--actif::after { display: none; }
}

/* Les photos sont empilées et se fondent l'une dans l'autre */
.manifeste__photos {
  position: absolute;
  inset: 0 0 0 47%;
  transition: inset 760ms var(--courbe);
}
.manifeste.est-sombre .manifeste__photos { inset: 0; }

.manifeste__photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 760ms var(--courbe);
}
.manifeste__photo.active { opacity: 1; }
.manifeste__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Portrait vertical (1re photo) : montré en entier sur toute la hauteur du cadre,
   pas recadré comme les autres. */
.manifeste__photo[data-photo="0"] img { object-fit: contain; }

.manifeste__reperes {
  position: absolute;
  right: var(--marge-page);
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  z-index: 3;
  display: flex;
  gap: .55rem;
}
.repere {
  width: 28px; height: 3px;
  background: rgba(0,0,0,.22);
  transition: background 400ms var(--courbe);
}
.repere[aria-current="true"] { background: var(--orange); }
.manifeste.est-sombre .repere { background: rgba(255,255,255,.28); }
.manifeste.est-sombre .repere[aria-current="true"] { background: var(--orange); }

@media (max-width: 900px) {
  /* Sur mobile, plus de scroll pinné : on empile texte puis photos en fondu */
  .manifeste__cadre {
    position: relative;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .manifeste__piste { height: auto; }
  .manifeste__photos {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 5;
  }
  .manifeste.est-sombre .manifeste__photos { inset: auto; }
  .manifeste__reperes { position: static; margin: 1rem var(--marge-page) 2rem; }
  /* Telephone : le portrait (1re photo, bras croises) remplit le cadre bord a
     bord comme la seconde, au lieu d'etre montre entier avec des bandes sur
     les cotes. Demande du 19 aout 2026. */
  .manifeste__photo[data-photo="0"] img { object-fit: cover; object-position: center 20%; }

  /* Essai du 20 aout 2026 : le texte est POSE SUR la photo, en bas a
     gauche, sur les deux photos. Un voile sombre monte du bas de la photo
     pour la lisibilite ; titre orange conserve, paragraphe en blanc. */
  .manifeste__cadre { position: relative; }
  .manifeste__texte {
    position: absolute;
    left: 0;
    right: 0;
    /* bas de la photo = bas du cadre moins la barre de reperes (1rem + 3px + 2rem) */
    bottom: calc(3rem + 3px);
    z-index: 2;
    padding: 0 var(--marge-page) 1.1rem;
  }
  /* +28% et colonne etroite : les lignes tombent en « There are / really
     no / excuses to / have a bad / presentation / anymore. » */
  .manifeste__titre { font-size: 2.05rem; max-width: none; }   /* les retours sont des br-mobile */
  .manifeste__para { color: var(--blanc); font-size: .92rem; margin-top: .7em; }
  /* La 2e photo arrive de droite a gauche : elle part decalee de 18% a
     droite et finit sa course a sa place, dans le temps du fondu.
     Demande du 20 aout 2026. */
  .manifeste__photo[data-photo="1"] img {
    transform: translateX(18%);
    transition: transform 760ms var(--courbe);
  }
  .manifeste__photo[data-photo="1"].active img {
    transform: translateX(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .manifeste__photo[data-photo="1"] img { transform: none; transition: none; }
  }

  .manifeste__photos::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.62));
    pointer-events: none;
  }
}


/* --- Formulaire --------------------------------------------------------------- */

.contact {
  padding-block: var(--section-y);
  border-top: var(--filet) solid var(--gris-ligne);
}

.contact__titre {
  font-family: var(--f-titre);
  font-size: var(--t-geant);
  font-weight: 700;
  line-height: var(--lh-serre);
  letter-spacing: var(--ls-titre);
  color: var(--orange);
  text-align: right;
  margin-bottom: clamp(2rem, 6vh, 4rem);
}

/* Les champs vivent dans la phrase : pas de cadre, un simple filet dessous. */
.phrase {
  font-family: var(--f-titre);
  font-size: clamp(1.15rem, 2.6vw, 2.35rem);
  font-weight: 400;
  line-height: 2;
  letter-spacing: -0.01em;
}
.phrase p { display: block; }

.champ {
  display: inline-block;
  min-width: 6ch;
  padding: 0 .35em .1em;
  border: 0;
  border-bottom: 2px solid var(--navy);
  background: transparent;
  font: inherit;
  font-size: .72em;
  color: var(--noir);
  transition: border-color 220ms var(--courbe), background 220ms var(--courbe);
}
.champ::placeholder { color: var(--gris-texte); opacity: .75; }
.champ:hover { border-bottom-color: var(--orange); }
.champ:focus {
  outline: none;
  border-bottom-color: var(--orange);
  background: color-mix(in srgb, var(--orange) 8%, transparent);
}
.champ--court  { width: 12ch; }
.champ--moyen  { width: 20ch; }
.champ--long   { width: 30ch; }
.champ--select { padding-right: 1.2em; }

/* État d'erreur, sans casser la mise en page : le filet passe en orange
   et le message s'affiche sous la ligne, en petit. */
.champ[aria-invalid="true"] { border-bottom-color: var(--orange); border-bottom-width: 3px; }
.erreur {
  display: block;
  min-height: 1.1em;
  margin-top: -.6em;
  font-family: var(--f-corps);
  font-size: var(--t-petit);
  line-height: 1.2;
  color: var(--orange);
}
.erreur:empty { min-height: 0; }
/* L'erreur d'acceptation Privacy est placée SOUS le pied (case + bouton), pas
   sous un champ : on annule le retrait négatif qui la faisait chevaucher le bouton. */
.erreur[data-erreur-de="f-accord"] { margin-top: .6em; }

.contact__pied {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
  margin-top: clamp(2rem, 5vh, 3.5rem);
}

.accord {
  display: flex;
  align-items: center;
  gap: .6em;
  font-size: var(--t-petit);
}
.accord input { width: 1.1em; height: 1.1em; accent-color: var(--orange); }
.accord a { text-decoration: underline; text-underline-offset: 2px; }

.envoyer {
  display: inline-flex;
  align-items: center;
  gap: .9em;
  padding: .85em 2em;
  background: var(--navy);
  color: var(--blanc);
  font-family: var(--f-titre);
  font-size: var(--t-menu);
  font-weight: 700;
  letter-spacing: var(--ls-menu);
  text-transform: uppercase;
  transition: background 220ms var(--courbe);
}
.envoyer:hover:not([disabled]) { background: var(--orange); }
.envoyer[disabled] { opacity: .45; cursor: not-allowed; }
.envoyer .pastille {
  width: .55em; height: .55em;
  border-radius: 50%;
  background: currentColor;
  transition: transform 400ms var(--courbe);
}
.envoyer.envoi .pastille { transform: scale(1.9); }

.retour {
  margin-top: 1.25rem;
  text-align: right;
  font-size: var(--t-petit);
  color: var(--orange);
  min-height: 1.2em;
}
.retour--succes { color: var(--navy); font-weight: 700; }


/* --- Pied de page --------------------------------------------------------------- */

.pied {
  padding-block: clamp(2rem, 5vh, 3.5rem);
  border-top: var(--filet) solid var(--gris-ligne);
  font-size: var(--t-petit);
  color: var(--gris-texte);
}
.pied .contenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}
.pied a:hover { color: var(--orange); }

/* Retour a la ligne reserve au telephone (« You only get one chance / to make
   a good first impression »). */
.br-mobile { display: none; }
@media (max-width: 700px) { .br-mobile { display: inline; } }

/* Formulaire a trous : « and I work with » reste soude a son champ (le
   champ suit sur la meme ligne), et sur telephone chaque phrase prend un
   peu d'air au-dessus. Demandes du 19 aout 2026. */
.phrase .tient { white-space: nowrap; }
@media (max-width: 720px) {
  .phrase p + .erreur + p,
  .phrase p + p { margin-top: calc(.75em + 5px); }
  /* le champ colle a sa question : interligne resserre a l'interieur des
     phrases (l'air entre questions vient des marges ci-dessus) */
  .phrase { line-height: 1.5; }
  /* la ligne « and I work with … » descend de 7px sous « Hi! My name is » */
  .phrase .tient { display: inline-block; margin-top: 7px; }
}

/* La legende du portfolio est une legende - plus petite, en gris clair,
   sans graisse ; le carre orange reste mais vide (le N° disparait).
   Telephone ET desktop. Demandes des 19-20 aout 2026. */
.portfolio__legende {
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .12em;
  color: #b3b3b3;
}
.portfolio__legende .puce {
  font-size: 0;              /* efface le N° sans toucher au markup */
  width: 1.1rem; height: 1.1rem;
  border-radius: 4px;
}
@media (max-width: 720px) {
  .portfolio__legende { font-size: .62rem; }
  .portfolio__legende .puce { width: 1.05rem; height: 1.05rem; }
}

/* Telephone : « to start the conversation. » disparait (demandes du 20
   aout 2026 : d'abord seul sous le champ, puis retire). Le desktop garde
   la phrase filee. */
@media (max-width: 720px) {
  .phrase .tient.sa-ligne-seule { display: none; }   /* (bat le display:inline-block de .phrase .tient) */
}

/* Telephone : chaque question du formulaire porte sa bande de fond, une
   sur deux un chouia plus claire que le gris de page, pour marquer les
   blocs question + champ. Demande du 20 aout 2026. */
@media (max-width: 720px) {
  .phrase > p:not(.retour) {
    padding: .55rem .65rem;
    margin-inline: -.65rem;
  }
  .phrase > p:not(.retour):nth-of-type(even) {
    background: rgba(255, 255, 255, .55);
  }
}

/* Pied de page : le monogramme SA (la forme du disque du hero du site,
   sans le disque), centre tout en bas, qui ramene au site ; et la mention
   de droits dessous. La forme est decoupee par masque dans sa-plain.png,
   sa couleur vient du CSS (navy, orange au survol). Demande du 20 aout
   2026. */
.pied__marque {
  flex-direction: column;
  justify-content: center;
  gap: .8rem;
  margin-bottom: 1.6rem;
}
.pied__sa {
  display: block;
  width: 64px;
  height: 33px;   /* rapport du fichier (1400x717) */
  background-color: var(--navy);
  -webkit-mask-image: url("../assets/img/sa-plain.png");
          mask-image: url("../assets/img/sa-plain.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  transition: background-color 200ms var(--courbe);
}
.pied__sa:hover { background-color: var(--orange); }
.pied__droits {
  font-size: var(--t-petit);
  color: var(--gris-texte);
}

/* En bas a gauche (rangee du pied) : le SA et stayingalive.agency, lien
   vers le site, sans soulignement. Le monogramme suit la couleur du lien
   (orange au survol). Sur desktop, le grand SA centre laisse la place a
   cette version en ligne ; sur telephone c'est l'inverse. Demande du 20
   aout 2026. */
.pied__site {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: inherit;
  text-decoration: none;
  transition: color 200ms var(--courbe);
}
.pied__site:hover { color: var(--orange); }
.pied__sa-mini {
  display: inline-block;
  width: 30px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask-image: url("../assets/img/sa-plain.png");
          mask-image: url("../assets/img/sa-plain.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}
@media (min-width: 701px) {
  /* Desktop : plus de bloc centre - les droits suivent la ligne du deck
     (« … by Michaël Weizmann · All rights reserved © 2026 »), le SA vit
     en bas a gauche. */
  .pied .contenu.pied__marque { display: none; }   /* (bat .pied .contenu, plus specifique) */

  /* Le trait (border-top) ne bouge pas ; la rangee de texte se centre
     exactement entre le trait et le bas de page. Demande du 20 aout 2026. */
  .pied {
    padding-block: 0;
    min-height: clamp(4.5rem, 11vh, 7.5rem);
    display: flex;
    align-items: center;
  }
  .pied > .contenu { width: 100%; }
}
@media (max-width: 700px) {
  .pied__droits-inline { display: none; }   /* sur telephone, les droits sont dans le bloc centre */
}
@media (max-width: 700px) {
  .pied__site .pied__sa-mini { display: none; }   /* le grand SA centre suffit */
  /* le bloc SA + droits passe tout en bas, sous les mentions ;
     « Back to top » en orange. Demandes du 20 aout 2026. */
  /* 20 aout 2026 : la mention du deck colle au trait (padding haut
     reduit), le bloc SA + droits garde sa place par rapport au bas (la
     marge reprend ce que le padding a rendu), et « Back to top ↑ » vit
     en orange AU-DESSUS du trait, a droite. stayingalive.agency reste
     retire. */
  .pied { display: flex; flex-direction: column; position: relative; padding-top: .55rem; }
  /* la mention du deck centree ; le SA vire a l'orange au tap (et plus
     de voile gris d'iOS sur le tap) */
  .pied > .contenu { justify-content: center; text-align: center; }
  .pied__sa { -webkit-tap-highlight-color: transparent; }
  /* les droits sortent du flux : a gauche, sur la ligne du SA */
  .pied__droits {
    color: #b3b3b3;
    position: absolute;
    left: var(--marge-page);
    top: 1.15rem;
    margin: 0;
  }
  .pied__sa.sa-touche { background-color: var(--orange) !important; transition: none; }
  /* le SA se centre entre la fin des droits (~150px) et le debut de
     « Back to top » (~280px), pas sur la page */
  .pied .contenu.pied__marque .pied__sa { translate: 36px 0; }
  /* orange INSTANTANE au toucher : la transition de 200ms faisait passer
     le navy par un brun boueux, et la navigation partait avant la fin -
     on ne voyait que ce brun. */
  .pied__sa:active, .pied__sa:focus-visible {
    background-color: var(--orange);
    transition: none;
  }
  /* 20 aout 2026 (dernier arbitrage) : sous le trait, une seule ligne -
     le SA (meme taille) a gauche avec « All rights reserved · © 2026 »
     colle a sa droite, et « Back to top » a droite. « The 6 Musts… »
     reste centre au-dessus du trait. */
  .pied .contenu.pied__marque {
    order: 2;
    margin: .1rem 0 0;
    flex-direction: row;
    justify-content: center;   /* le SA au milieu de la page (20 aout 2026) */
    align-items: center;
  }
  .pied > .contenu:not(.pied__marque) > span {
    position: absolute;
    top: -2.2rem;
    left: 0;
    right: 0;
    text-align: center;
  }
  .pied__site { display: none; }
  .pied a[href="#top"] {
    display: block;
    position: absolute;
    top: 1.05rem;   /* centre sur la ligne du SA (33px de haut sous .55rem de padding) */
    right: var(--marge-page);
    color: var(--orange);
  }
}