/* ═══════════════════════════════════════════════════════════════
   OFFRE — WEB DESIGN (/services-design.html) · 11/10/2026

   La signature de la page : le design qui se construit sous les
   yeux. Une planche d'outil de design où la grille se pose, où les
   blocs filaires arrivent puis se remplissent ; des poignées de
   sélection ; des courbes de Bézier dorées qui se tracent.

   Tout est préfixé `.od-` : trois autres pages d'offre sont refaites
   en parallèle et ne doivent jamais croiser ces règles.

   L'ÉTAT DE REPOS EST L'ÉTAT FINAL. Les animations partent toujours
   d'un état initial décrit dans leurs images clés (remplissage
   `backwards`) ou sous `html.od-anime`, classe posée par
   js/v4/offre-design.js seulement si le mouvement est permis. Sans
   script, ou avec le mouvement réduit, la page est complète.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Les titres de section ─── */
.od-h2 { max-width: 20ch; margin-bottom: var(--e7); }

/* Les poignées de sélection, partagées par les cartes de la page :
   un cadre doré et quatre carrés crème aux angles, comme l'outil de
   design quand on clique sur un calque. */
.od-poignees {
  position: absolute;
  inset: -1px;
  border: 1.5px solid var(--or);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--pose) ease;
}
.od-poignees b,
.od-sel b {
  position: absolute;
  width: 9px; height: 9px;
  background: var(--fond);
  border: 1.5px solid var(--or);
}
.od-poignees b:nth-child(1), .od-sel b:nth-child(1) { top: -5px; left: -5px; }
.od-poignees b:nth-child(2), .od-sel b:nth-child(2) { top: -5px; right: -5px; }
.od-poignees b:nth-child(3), .od-sel b:nth-child(3) { bottom: -5px; left: -5px; }
.od-poignees b:nth-child(4), .od-sel b:nth-child(4) { bottom: -5px; right: -5px; }

/* Les tracés dessinés : chaque chemin porte pathLength="1". */
.od-effet-glyphe *, .od-etape-glyphe *, .od-objet-vue svg *, .od-autre-glyphe * {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.od-glyphe-plein { fill: var(--or); fill-opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   1. L'OUVERTURE
   ═══════════════════════════════════════════════════════════════ */
.od-ouverture { padding-bottom: var(--e9); }
.od-boutons-ouverture { margin-top: var(--e3); }

/* Le mot doré du titre est SÉLECTIONNÉ, comme un calque : cadre
   doré et quatre poignées. Le texte lui-même n'est jamais masqué ni
   retardé (c'est le plus grand élément du premier écran). */
.od-titre em {
  position: relative;
  display: inline-block;
  padding: 0 0.1em;
}
.od-titre em::before,
.od-titre em::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.od-titre em::before {
  inset: 0.04em -0.02em -0.02em;
  border: 2px solid var(--or);
}
.od-titre em::after {
  inset: calc(0.04em - 6px) calc(-0.02em - 6px) calc(-0.02em - 6px);
  background:
    linear-gradient(var(--fond), var(--fond)) 3px 3px / 7px 7px no-repeat,
    linear-gradient(var(--fond), var(--fond)) calc(100% - 3px) 3px / 7px 7px no-repeat,
    linear-gradient(var(--fond), var(--fond)) 3px calc(100% - 3px) / 7px 7px no-repeat,
    linear-gradient(var(--fond), var(--fond)) calc(100% - 3px) calc(100% - 3px) / 7px 7px no-repeat,
    linear-gradient(var(--or), var(--or)) 0 0 / 13px 13px no-repeat,
    linear-gradient(var(--or), var(--or)) 100% 0 / 13px 13px no-repeat,
    linear-gradient(var(--or), var(--or)) 0 100% / 13px 13px no-repeat,
    linear-gradient(var(--or), var(--or)) 100% 100% / 13px 13px no-repeat;
}
/* PAS D'ANIMATION ICI, ET C'EST MESURÉ. Le moindre mouvement des
   pseudo-éléments du titre (même un simple `scale`) fait déclarer
   par Chrome un nouveau « plus grand rendu » à la fin de l'animation :
   le LCP du téléphone passait de 0,1 s à 1,7 s. Le cadre est donc
   posé d'emblée ; c'est la planche, dessous, qui bouge. */

/* ─── Les trois mesures : un panneau de propriétés ───
   Les pastilles communes (.hero-mesure) deviennent ici les cellules
   d'un inspecteur : une carte, trois propriétés séparées par un
   pointillé doré. Au survol, la cellule est SÉLECTIONNÉE comme le mot
   « tient » du titre : cadre doré et quatre poignées. */
.od-ouverture .od-proprietes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: 1080px;
  margin-top: var(--e6);
  padding: 6px;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--r3);
  box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.35);
}
.od-ouverture .od-propriete {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 3px;
  padding: 16px 20px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  text-align: left;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  animation: od-propriete-entree 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.od-ouverture .od-propriete:nth-child(2) { animation-delay: 0.12s; }
.od-ouverture .od-propriete:nth-child(3) { animation-delay: 0.24s; }
/* Le pointillé entre deux cellules. */
.od-ouverture .od-propriete + .od-propriete::after {
  content: '';
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  border-left: 1px dashed rgba(209, 163, 38, 0.55);
  transition: opacity 0.3s ease;
}
.od-propriete-icone {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 11px;
  background: rgba(209, 163, 38, 0.13);
  color: var(--or-lisible);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.od-propriete-icone svg { width: 21px; height: 21px; }
.od-ouverture .od-propriete .donnee { font-size: 11px; line-height: 1.2; }
.od-ouverture .od-propriete .hero-mesure-valeur {
  font-size: var(--p-4);
  font-weight: 600;
  line-height: 1.3;
}
/* La sélection : cadre et poignées, posés d'un seul pseudo-élément. */
.od-ouverture .od-propriete::before {
  content: '';
  position: absolute;
  inset: -4px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  background:
    linear-gradient(var(--or), var(--or)) 0 0 / 8px 8px no-repeat,
    linear-gradient(var(--or), var(--or)) 100% 0 / 8px 8px no-repeat,
    linear-gradient(var(--or), var(--or)) 0 100% / 8px 8px no-repeat,
    linear-gradient(var(--or), var(--or)) 100% 100% / 8px 8px no-repeat;
}
.od-ouverture .od-propriete:hover {
  background: rgba(209, 163, 38, 0.06);
  box-shadow: inset 0 0 0 1.5px var(--or);
}
.od-ouverture .od-propriete:hover::before { opacity: 1; transform: none; }
.od-ouverture .od-propriete:hover .od-propriete-icone {
  background: var(--or);
  color: #111;
  transform: rotate(-6deg) scale(1.06);
}
/* Le pointillé s'efface quand une cellule voisine est sélectionnée. */
.od-ouverture .od-propriete:hover::after,
.od-ouverture .od-propriete:hover + .od-propriete::after { opacity: 0; }
/* Glissement SEUL, sans fondu : sur téléphone, la valeur d'une de ces
   cellules est le plus grand texte du premier écran (l'élément LCP).
   Partie d'une opacité nulle, elle n'était « peinte » qu'à la fin de
   l'animation : LCP retardé d'une seconde. */
@keyframes od-propriete-entree {
  from { transform: translateY(14px); }
}
@media (max-width: 760px) {
  .od-ouverture .od-proprietes { grid-template-columns: minmax(0, 1fr); max-width: 26rem; }
  .od-ouverture .od-propriete { padding: 14px 16px; }
  .od-ouverture .od-propriete + .od-propriete::after {
    left: 16px; right: 16px; top: 0; bottom: auto;
    border-left: 0;
    border-top: 1px dashed rgba(209, 163, 38, 0.55);
  }
}
@media (prefers-reduced-motion: reduce) {
  .od-ouverture .od-propriete { animation: none; }
  .od-ouverture .od-propriete::before, .od-propriete-icone { transition: none; }
}

/* ─── Les outils ───
   Même geste que le signe Figma de l'accueil (tuile blanche, ombre
   douce, animation `flotter`), mais six fois et réparties de part et
   d'autre du titre. La liste est posée en `static` pour que les
   badges se placent par rapport à la SECTION, pas à elle. Chaque
   badge entre en deux temps : il apparaît (li), puis sa tuile flotte
   (span) — deux transformations sur un même élément se battraient. */
.od-ouverture > .od-outils {
  position: static;
  margin: 0; padding: 0;
  list-style: none;
}
.od-outil-badge {
  position: absolute;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  animation: od-outil-entree 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.od-outil-tuile {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--carte, #fff);
  border: 1px solid transparent;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.4);
  animation: flotter 6s ease-in-out infinite;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.od-outil-tuile img { width: 26px; height: 26px; object-fit: contain; }
/* Le nom : une étiquette de calque, comme celle du curseur « Thomax »
   de la planche. Cachée sur grand écran, révélée au survol. */
.od-outil-nom {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--or);
  color: #111;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.od-outil-badge:hover .od-outil-tuile {
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(209, 163, 38, 0.18), 0 18px 34px -16px rgba(0, 0, 0, 0.45);
}
/* Pas de nom au survol (demande du 11/10) : les logos se suffisent.
   Le nom reste lu par les lecteurs d'écran, et visible sur mobile. */
@media (min-width: 1101px) {
  .od-outil-nom {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

.od-outil-badge--1 { top: 104px; left: 6%;  animation-delay: 0.15s; }
.od-outil-badge--2 { top: 252px; left: 2.5%; animation-delay: 0.3s; }
.od-outil-badge--3 { top: 400px; left: 7.5%; animation-delay: 0.45s; }
.od-outil-badge--4 { top: 96px;  right: 7%; animation-delay: 0.22s; }
.od-outil-badge--5 { top: 244px; right: 3%; animation-delay: 0.37s; }
.od-outil-badge--6 { top: 392px; right: 8%; animation-delay: 0.52s; }
/* Retards de flottement tous différents : six tuiles à la même phase
   montent et descendent ensemble, et l'on voit une rangée. */
.od-outil-badge--1 .od-outil-tuile { animation-delay: 0s; }
.od-outil-badge--2 .od-outil-tuile { animation-delay: -1.1s; }
.od-outil-badge--3 .od-outil-tuile { animation-delay: -2.3s; }
.od-outil-badge--4 .od-outil-tuile { animation-delay: -3s; }
.od-outil-badge--5 .od-outil-tuile { animation-delay: -4.1s; }
.od-outil-badge--6 .od-outil-tuile { animation-delay: -5.2s; }
@keyframes od-outil-entree {
  from { opacity: 0; transform: scale(0.6) translateY(16px); }
}

/* Sous 1240 px, la marge ne tient plus que deux tuiles par côté. */
@media (max-width: 1240px) {
  .od-outil-badge--2, .od-outil-badge--5 { display: none; }
}
/* Sous 1100 px, pas de marge du tout : les six descendent en rangée
   sous le titre, le nom visible. C'est l'information de la page. */
@media (max-width: 1100px) {
  .od-ouverture > .od-outils {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e4) var(--e3);
    max-width: 30rem;
    margin: var(--e7) auto 0;
    padding-inline: var(--gouttiere);
  }
  .od-outil-badge,
  .od-outil-badge--2, .od-outil-badge--5 { position: static; display: grid; }
  .od-outil-tuile { width: 48px; height: 48px; border-radius: 14px; animation: none; }
  .od-outil-tuile img { width: 22px; height: 22px; }
  .od-outil-nom {
    opacity: 1; transform: none;
    background: none; color: var(--encre-2);
    padding: 0; font-weight: 500;
  }
}
/* Sur téléphone, six en une rangée de cinq laissaient Notion seul :
   deux rangées de trois. */
@media (max-width: 600px) {
  .od-ouverture > .od-outils {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 20rem;
  }
}

/* La maquette interactive a sa propre feuille, chargée sans bloquer
   le premier affichage : css/v4/offre-design-figma.css. Ici, seulement
   sa PLACE : la boîte a sa taille définitive dès le premier rendu et
   son contenu reste invisible tant que la feuille n'est pas arrivée.
   Sans cela, le contenu brut s'affichait puis se recomposait (CLS
   mesuré à 0,42 sur téléphone). */
.od-planche-cadre { margin-top: var(--e8); max-width: 1368px; }
.fg {
  position: relative;
  height: 700px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 18px;
  background: #0E0E0E;
}
.fg > * { visibility: hidden; }
@media (max-width: 1100px) { .fg { height: 640px; } }
@media (max-width: 900px) {
  .od-planche-cadre { padding-inline: 12px; }
  .fg { height: 600px; border-radius: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   2. CE QUE ÇA CHANGE — le spécimen
   ═══════════════════════════════════════════════════════════════ */
.od-planche-specimen {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--e5);
}
.od-spec-etiquette {
  margin-bottom: var(--e5);
  font-size: var(--p-5);
  letter-spacing: 0.04em;
  color: var(--encre-3);
}
/* Le spécimen présente l'identité d'ORÉE, le site fictif de la
   maquette : ses couleurs et ses polices, pas celles du studio. */
.od-spec-typo {
  position: relative;
  padding: var(--e6);
  border-radius: var(--r4);
  background: #EEF3F1;
  color: #17322E;
  overflow: hidden;
  font-family: 'Fraunces', Georgia, serif;
}
.od-spec-typo .od-spec-etiquette { font-family: var(--police); color: #4F6461; }
.od-spec-logo { display: block; width: auto; height: 46px; aspect-ratio: 5393 / 1700; margin-bottom: var(--e4); overflow: visible; }
.od-spec-tete {
  display: flex;
  align-items: flex-end;
  gap: var(--e6);
  padding-bottom: var(--e5);
  border-bottom: 1px dashed rgba(168, 78, 46, 0.6);
}
.od-spec-aa {
  position: relative;
  font-size: clamp(6.5rem, 13vw, 11.5rem);
  font-weight: 400;
  line-height: 0.74;
  letter-spacing: -0.04em;
}
.od-spec-graisses { display: grid; gap: 4px; padding-bottom: 6px; font-size: var(--t5); line-height: 1.2; }
.od-spec-echelle { margin-top: var(--e4); display: grid; font-size: clamp(1rem, 1.45vw, 1.3rem); }
.od-spec-echelle li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--e3);
  padding: 6px 0;
  border-bottom: 1px solid rgba(23, 50, 46, 0.12);
  white-space: nowrap;
  overflow: hidden;
}
.od-spec-px { font-family: var(--police); font-size: var(--p-5); color: #A84E2E; font-variant-numeric: tabular-nums; }
.od-spec-mot { font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; }
.od-spec-mot--texte { font-family: 'Instrument Sans', system-ui, sans-serif; letter-spacing: 0; }

.od-spec-palette {
  padding: var(--e6);
  border-radius: var(--r4);
  background: #17322E;
  color: #EEF3F1;
}
.od-spec-palette .od-spec-etiquette { color: rgba(238, 243, 241, 0.72); }
.od-nuancier { display: grid; gap: 10px; }
.od-nuance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nom hex" "ratio ratio";
  align-content: end;
  gap: 2px var(--e3);
  min-height: 84px;
  padding: 12px 16px;
  border-radius: var(--r3);
  font-family: 'Instrument Sans', system-ui, sans-serif;
}
.od-nuance-nom { grid-area: nom; font-size: var(--p); font-weight: 600; }
.od-nuance-hex { grid-area: hex; font-size: var(--p-5); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.od-nuance-ratio { grid-area: ratio; font-size: var(--p-5); }
.od-nuance--pin        { background: #17322E; color: #EEF3F1; box-shadow: inset 0 0 0 1px rgba(238, 243, 241, 0.25); }
.od-nuance--ecume      { background: #EEF3F1; color: #17322E; }
.od-nuance--terracotta { background: #A84E2E; color: #FFFFFF; }
.od-nuance--lagon      { background: #1F6F78; color: #FFFFFF; }

.od-effets {
  margin-top: var(--e7);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e6);
}
.od-effet { display: grid; align-content: start; gap: var(--e3); padding-top: var(--e5); border-top: 1px solid var(--trait); }
.od-effet-glyphe { width: 44px; height: 44px; margin-bottom: var(--e2); fill: none; stroke: var(--or-titre); stroke-width: 1.6; stroke-linejoin: round; }
.od-effet-nom { font-size: var(--t5); font-weight: 500; }
.od-effet-quoi { color: var(--encre-3); font-size: var(--p-2); max-width: 34ch; }

/* ═══════════════════════════════════════════════════════════════
   3. LA MÉTHODE — un tracé à la plume, ancre après ancre
   ═══════════════════════════════════════════════════════════════ */
.od-temps { display: grid; }
.od-etape {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem 2.5rem minmax(0, 1fr) 9.5rem;
  gap: var(--e5);
  align-items: start;
  padding-bottom: var(--e8);
}
.od-etape:last-child { padding-bottom: 0; }
.od-etape-num {
  font-size: clamp(3.4rem, 6vw, 5.4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--or);
  -webkit-text-stroke: 1px var(--or);
  transition: color 600ms ease;
}
/* Le segment qui relie une ancre à la suivante. */
.od-etape:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1.6rem;
  bottom: -0.2rem;
  left: calc(7.5rem + var(--e5) + 1.25rem - 1px);
  width: 2px;
  background: linear-gradient(var(--or), rgba(209, 163, 38, 0.35));
  transform-origin: top;
  transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1);
}
.od-ancre {
  position: relative;
  justify-self: center;
  margin-top: 0.85rem;
  width: 14px; height: 14px;
  background: var(--noir);
  border: 2px solid var(--or);
  z-index: 1;
  transition: background 400ms ease;
}
.od-etape.est-actif .od-ancre, .od-ancre { background: var(--or); }
/* Les deux bras de la poignée de Bézier, de part et d'autre. */
.od-ancre-bras {
  position: absolute;
  top: 50%; left: 50%;
  width: 34px; height: 1px;
  background: rgba(255, 253, 247, 0.55);
  transform-origin: left center;
  transform: rotate(-20deg);
  transition: transform 700ms var(--ressort) 200ms;
}
.od-ancre-bras + .od-ancre-bras { transform: rotate(160deg); }
.od-ancre-bras::after {
  content: '';
  position: absolute;
  right: -4px; top: -3.5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--noir);
  border: 1.5px solid var(--or);
}
.od-etape-texte { display: grid; gap: var(--e3); padding-top: 0.6rem; }
.od-etape-texte .temps-nom { font-size: var(--t3); font-weight: 500; line-height: 1.12; margin: 0; }
.od-etape-texte .temps-quoi { margin: 0; font-size: var(--p); max-width: 46ch; }
.od-etape-glyphe {
  width: 100%;
  margin-top: 0.6rem;
  fill: none;
  stroke: var(--or);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.od-etape-glyphe .od-glyphe-faible, .od-objet-vue .od-glyphe-faible { stroke: rgba(255, 253, 247, 0.4); }

/* L'état « pas encore atteint », seulement si le mouvement joue. */
.od-anime .od-etape:not(.est-actif) .od-etape-num { color: transparent; }
.od-anime .od-etape:not(.est-actif)::after { transform: scaleY(0); }
.od-anime .od-etape:not(.est-actif) .od-ancre { background: var(--noir); }
.od-anime .od-etape:not(.est-actif) .od-ancre-bras { transform: rotate(-20deg) scaleX(0); }
.od-anime .od-etape:not(.est-actif) .od-ancre-bras + .od-ancre-bras { transform: rotate(160deg) scaleX(0); }
.od-anime .od-etape-glyphe * { transition: stroke-dashoffset 1100ms cubic-bezier(0.65, 0, 0.35, 1), fill-opacity 500ms ease 900ms; }
.od-anime .od-etape-glyphe *:nth-child(2) { transition-delay: 150ms, 1000ms; }
.od-anime .od-etape-glyphe *:nth-child(3) { transition-delay: 300ms, 1100ms; }
.od-anime .od-etape-glyphe *:nth-child(4) { transition-delay: 450ms, 1200ms; }
.od-anime .od-etape-glyphe *:nth-child(5) { transition-delay: 600ms, 1300ms; }
.od-anime .od-etape:not(.est-actif) .od-etape-glyphe * { stroke-dashoffset: 1; fill-opacity: 0; }
.od-anime .od-etape-texte { transition: transform 800ms var(--ressort), opacity 800ms ease; }
.od-anime .od-etape:not(.est-actif) .od-etape-texte { opacity: 0.001; transform: translateX(-16px); }

/* La planche de la méthode : css/v4/offre-design-figma.css (feuille
   différée, la section est loin sous la ligne de flottaison). */

/* ═══════════════════════════════════════════════════════════════
   4. LES LIVRABLES — la mosaïque est dans css/v4/offre-design-figma.css
   (feuille différée : ~16 Ko de moins à bloquer au premier rendu).
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   5. LA PREUVE — le cas, puis les projets
   ═══════════════════════════════════════════════════════════════ */
/* Le cas (pellicule) : css/v4/offre-design-figma.css, feuille différée. */
.od-autres-projets-titre {
  margin-top: var(--e9);
  font-size: var(--t3);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: center;
}
.od-projets {
  margin-top: var(--e6);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e5);
}
.od-projets .projet-nom { font-size: var(--t5); }
.od-projets .projet-quoi { font-size: var(--p-3); }
.od-projets-pied { margin-top: var(--e6); text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   6. RÉSERVER — l'encart d'appel (remplace les périmètres le 11/10)
   Styles dans css/v4/offre-design-figma.css (feuille différée).
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   7. LES QUESTIONS
   ═══════════════════════════════════════════════════════════════ */
/* La FAQ : css/v4/offre-design-figma.css (feuille différée). */

/* ═══════════════════════════════════════════════════════════════
   8. ALLER PLUS LOIN
   ═══════════════════════════════════════════════════════════════ */
/* « Aller plus loin » : css/v4/offre-design-figma.css (feuille différée). */

/* ═══════════════════════════════════════════════════════════════
   9. LE FINAL — le pavé noir et or, les trois boutons
   ═══════════════════════════════════════════════════════════════ */
.od-final { margin-top: var(--e9); }
.plage.plan-contre.od-final > .cadre {
  position: relative;
  overflow: hidden;
  padding: var(--e10) var(--e7);
  text-align: center;
  background:
    radial-gradient(60% 70% at 50% 115%, rgba(209, 163, 38, 0.26), rgba(209, 163, 38, 0) 70%),
    var(--noir);
}
.od-final-art {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.od-final-trace { fill: none; stroke: var(--or); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.75; vector-effect: non-scaling-stroke; }
.od-final-trace--fin { stroke-width: 1; opacity: 0.35; }
.od-final-poignee { fill: none; stroke: rgba(255, 253, 247, 0.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.od-final-ancre { fill: var(--noir); stroke: var(--or); stroke-width: 2; vector-effect: non-scaling-stroke; }
.od-final-point { fill: var(--noir); stroke: var(--or); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.od-final-corps { position: relative; z-index: 1; max-width: 1060px; margin-inline: auto; display: grid; justify-items: center; gap: var(--e5); }
.od-final-sur { color: var(--sur-noir-2) !important; }
.od-final-titre {
  font-size: clamp(2.5rem, 5.6vw, 5.2rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--sur-noir);
}
.od-final-titre em { font-style: normal; color: var(--or); }
.od-final-lead { max-width: 40ch; }
.od-final-boutons {
  margin-top: var(--e4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e4);
}
.od-aimant { display: inline-block; transition: transform 600ms var(--ressort); will-change: transform; }
.od-bouton {
  overflow: hidden;
  padding: 18px 24px;
  font-size: var(--p-4);
  gap: 12px;
}
.od-bouton .bouton-fleche { width: 13px; height: 13px; }
/* Le reflet : une lame de lumière qui traverse le bouton au survol. */
.od-bouton::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.6) 48%, transparent 64%);
  transform: translateX(-130%);
  pointer-events: none;
}
.od-bouton.bouton-clair::after,
.od-bouton--trait::after { background: linear-gradient(105deg, transparent 30%, rgba(209, 163, 38, 0.55) 48%, transparent 64%); }
.od-bouton:hover::after, .od-bouton:focus-visible::after { transform: translateX(130%); transition: transform 900ms cubic-bezier(0.33, 1, 0.68, 1); }
/* La flèche sort par le haut à droite et revient par le bas à gauche. */
.od-bouton:hover .bouton-fleche, .od-bouton:focus-visible .bouton-fleche { animation: od-fleche 620ms cubic-bezier(0.33, 1, 0.68, 1); }
@keyframes od-fleche {
  0%   { transform: translate(0, 0); opacity: 1; }
  45%  { transform: translate(16px, -16px); opacity: 0; }
  46%  { transform: translate(-16px, 16px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
.od-bouton--trait {
  --fond-bouton: transparent;
  --encre-bouton: var(--sur-noir);
  --trait-bouton: rgba(255, 255, 255, 0.5);
  box-shadow: none;
}
.od-bouton--trait:hover { --trait-bouton: var(--or); }
.od-bouton:focus-visible { outline-color: var(--or); }
/* Dans un pavé noir, `.plage.plan-contre .bouton` repasse tous les
   boutons en blanc (pages.css, trois classes) : les variantes du
   final reprennent la main avec une spécificité supérieure. */
.plage.plan-contre .od-bouton.bouton-or { --fond-bouton: var(--or); --encre-bouton: var(--noir); --trait-bouton: rgba(0, 0, 0, 0.3); }
.plage.plan-contre .od-bouton.bouton-clair { --fond-bouton: var(--sur-noir); --encre-bouton: var(--noir); --trait-bouton: rgba(0, 0, 0, 0.22); }
.plage.plan-contre .od-bouton.od-bouton--trait { --fond-bouton: transparent; --encre-bouton: var(--sur-noir); --trait-bouton: rgba(255, 255, 255, 0.5); }
.plage.plan-contre .od-bouton.od-bouton--trait:hover { --trait-bouton: var(--or); }

/* Deux curseurs, le vôtre et le nôtre : on dessine ensemble. */
.od-final-curseur {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}
.od-final-curseur svg { width: 22px; height: 22px; stroke-width: 1.2; }
.od-final-curseur span {
  margin: 18px 0 0 -4px;
  padding: 4px 10px;
  border-radius: 7px 7px 7px 2px;
  font-size: var(--p-5);
  font-weight: 500;
  white-space: nowrap;
}
.od-final-curseur--vous { left: 7%; bottom: 11%; animation: od-flotte-a 7s ease-in-out infinite; }
.od-final-curseur--vous svg { fill: var(--or); stroke: var(--noir); }
.od-final-curseur--vous span { background: var(--or); color: var(--noir); }
.od-final-curseur--nous { right: 11%; top: 16%; animation: od-flotte-b 8s ease-in-out infinite; }
.od-final-curseur--nous svg { fill: var(--fond); stroke: var(--noir); }
.od-final-curseur--nous span { background: var(--fond); color: var(--noir); }
@keyframes od-flotte-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, -12px); } }
@keyframes od-flotte-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-16px, 14px); } }

/* L'entrée du final : les courbes se tracent, puis le texte monte. */
.od-anime .od-final-trace { transition: stroke-dashoffset 2200ms cubic-bezier(0.65, 0, 0.35, 1); }
.od-anime .od-final-trace--fin { transition-delay: 300ms; }
.od-anime .od-final .cadre:not(.est-vu) .od-final-trace { stroke-dashoffset: 1; }
.od-anime .od-final-ancre, .od-anime .od-final-point, .od-anime .od-final-poignee { transition: opacity 600ms ease 1200ms; }
.od-anime .od-final .cadre:not(.est-vu) :is(.od-final-ancre, .od-final-point, .od-final-poignee) { opacity: 0; }
.od-anime .od-final-corps > * { transition: opacity 800ms ease, transform 900ms var(--ressort); }
.od-anime .od-final-corps > :nth-child(2) { transition-delay: 120ms; }
.od-anime .od-final-corps > :nth-child(3) { transition-delay: 240ms; }
.od-anime .od-final-corps > :nth-child(4) { transition-delay: 360ms; }
.od-anime .od-final .cadre:not(.est-vu) .od-final-corps > * { opacity: 0.001; transform: translateY(34px); }
.od-anime .od-final-curseur { transition: opacity 600ms ease 900ms; }
.od-anime .od-final .cadre:not(.est-vu) .od-final-curseur { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════
   10. LES AUTRES MÉTIERS
   ═══════════════════════════════════════════════════════════════ */
/* « Les autres métiers » : css/v4/offre-design-figma.css (feuille différée). */

/* ═══════════════════════════════════════════════════════════════
   LES ENTRÉES AU DÉFILEMENT
   `--od-i` est posé par le script : le rang du bloc dans sa rangée.
   Remplissage `backwards` : une fois l'entrée jouée, la feuille
   reprend la main (et les survols qui déplacent la carte marchent).
   ═══════════════════════════════════════════════════════════════ */
.od-anime [data-od-vu]:not(.est-vu) { opacity: 0; }
.od-anime [data-od-vu].est-vu { animation: od-monte 900ms var(--ressort) calc(var(--od-i, 0) * 90ms) backwards; }
@keyframes od-monte { from { opacity: 0; transform: translateY(36px); } }

/* Les tracés des livrables et des effets se dessinent à l'entrée. */
.od-anime [data-od-vu].est-vu :is(.od-objet-vue, .od-effet-glyphe) * {
  animation: od-trace 1200ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--od-i, 0) * 90ms + 250ms) backwards;
}
.od-anime [data-od-vu].est-vu .od-objet-vue .od-glyphe-plein { animation-name: od-trace-plein; }
@keyframes od-trace-plein { from { stroke-dashoffset: 1; fill-opacity: 0; } 60% { fill-opacity: 0; } }

/* Le spécimen : les nuances se peignent, l'échelle descend. */
.od-anime .od-nuance { transition: clip-path 900ms cubic-bezier(0.65, 0, 0.35, 1); }
.od-anime .od-nuance:nth-child(2) { transition-delay: 120ms; }
.od-anime .od-nuance:nth-child(3) { transition-delay: 240ms; }
.od-anime .od-nuance:nth-child(4) { transition-delay: 360ms; }
.od-anime .od-planche-specimen:not(.est-vu) .od-nuance { clip-path: inset(0 100% 0 0 round var(--r3)); }
.od-anime .od-spec-echelle li, .od-anime .od-spec-graisses li, .od-anime .od-spec-aa { transition: opacity 700ms ease, transform 800ms var(--ressort); }
.od-anime .od-spec-echelle li:nth-child(2), .od-anime .od-spec-graisses li:nth-child(2) { transition-delay: 80ms; }
.od-anime .od-spec-echelle li:nth-child(3), .od-anime .od-spec-graisses li:nth-child(3) { transition-delay: 160ms; }
.od-anime .od-spec-echelle li:nth-child(4), .od-anime .od-spec-graisses li:nth-child(4) { transition-delay: 240ms; }
.od-anime .od-spec-echelle li:nth-child(5) { transition-delay: 320ms; }
.od-anime .od-planche-specimen:not(.est-vu) :is(.od-spec-echelle li, .od-spec-graisses li) { opacity: 0.001; transform: translateX(-20px); }
.od-anime .od-planche-specimen:not(.est-vu) .od-spec-aa { opacity: 0.001; transform: translateY(24px); }

/* ═══════════════════════════════════════════════════════════════
   LES ÉCRANS MOYENS ET PETITS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
}

@media (max-width: 900px) {

  .od-planche-specimen { grid-template-columns: minmax(0, 1fr); }
  .od-effets { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }

  .od-etape {
    grid-template-columns: 1.6rem minmax(0, 1fr);
    grid-template-areas: "ancre num" "ancre texte" "ancre glyphe";
    gap: var(--e3) var(--e4);
    padding-bottom: var(--e7);
  }
  .od-etape-num { grid-area: num; font-size: 2.6rem; }
  .od-ancre { grid-area: ancre; margin-top: 0.9rem; }
  .od-etape-texte { grid-area: texte; padding-top: 0; }
  .od-etape-glyphe { grid-area: glyphe; width: 110px; margin-top: 0; }
  .od-etape:not(:last-child)::after { left: calc(0.8rem - 1px); top: 1.8rem; }
  .od-ancre-bras { width: 22px; }

  .od-projets { grid-template-columns: minmax(0, 1fr); }
  .plage.plan-contre.od-final > .cadre { padding: var(--e9) var(--e5); }
  .od-final-curseur--vous { left: 6%; bottom: 5%; }
  .od-final-curseur--nous { right: 6%; top: 5%; }
}

@media (max-width: 600px) {
  .od-spec-typo, .od-spec-palette { padding: var(--e5); }
  .od-spec-tete { gap: var(--e4); }
  .od-spec-aa { font-size: 5.6rem; }
  .od-spec-graisses { font-size: 1.1rem; }
  .od-final-titre { font-size: 2.45rem; }
  .od-final-boutons { flex-direction: column; align-items: stretch; width: 100%; }
  .od-final-boutons .od-aimant, .od-final-boutons .bouton { display: flex; width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   LE MOUVEMENT RÉDUIT
   La feuille de base ramène les durées à presque rien, mais PAS les
   délais, et une boucle infinie de 0,001 ms clignote : on coupe donc
   tout. Chaque élément retombe sur son état de repos, qui est l'état
   final. La sélection reste posée sur le titre.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .od-planche, .od-planche *, .od-titre em::before, .od-titre em::after,
  .od-final-curseur, .od-autre-glyphe *, .od-bouton .bouton-fleche,
  .od-outil-badge, .od-outil-tuile {
    animation: none !important;
  }
  .fg, .fg-curseur, .fg-pin-fil, .fg-bulle-demo, .fg-toast { animation: none !important; }
  .o-site, .o-site * { transition: none !important; }
  .od-aimant { transition: none; }
  .od-bouton::after { display: none; }
}