/* Hallmark · pages intérieures, même système que l'accueil de test (bleu-tokens.css + bleu.css)
 * theme: studied-DNA (source: pletor.ai) · gris papier + outremer · Space Mono / Archivo / IBM Plex Mono
 */

/* ---------- commun aux pages intérieures ---------- */
.page .pied > .conteneur { margin-top: 0; padding-top: var(--sec-96); }
.nav__liens > a[aria-current="page"] { color: var(--color-bleu); }

.page-tete { padding: calc(var(--sec-144) + 40px) 0 var(--sec-96); }
.page-tete .conteneur { display: grid; justify-items: start; }
.page-titre { font: 800 expanded var(--t-titre-hero)/1.08 var(--font-display); letter-spacing: -0.03em; max-width: 20ch; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
.page-tete .sous-titre { margin-top: var(--s-32); color: var(--color-texte-2); }

/* ---------- Comprendre · le portable ---------- */
/* premier écran : le titre posé sur le portable, qui s'efface avec la progression --p écrite par bleu.js */
.portable-section--ouverture .portable-collant { overflow: hidden; }
.portable-ouverture {
  position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--sec-144) + 16px);
  display: grid; justify-items: center; padding: 0 var(--marge); text-align: center;
  opacity: calc(1 - var(--p, 0) * 7); transform: translateY(calc(var(--p, 0) * -6vh));
}
.portable-ouverture .surtitre { justify-content: center; }
.portable-ouverture .page-titre { max-width: 16ch; }
.portable-label {
  position: absolute; z-index: 2; left: var(--marge); right: var(--marge); bottom: var(--s-24);
  display: flex; justify-content: space-between; gap: var(--s-16);
  font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texte-2);
  opacity: calc(1 - var(--p, 0) * 7); pointer-events: none;
}
.portable-label span:first-child { color: var(--color-bleu); }
.portable-collant [data-portable] { z-index: 1; }
.intro-comprendre {
  max-width: 44ch; margin-bottom: var(--sec-96); padding-bottom: var(--s-48);
  font: 400 var(--t-heading-lg)/1.35 var(--font-body); letter-spacing: -0.02em; text-wrap: pretty;
  border-bottom: var(--bord) solid var(--color-encre);
}
@media (prefers-reduced-motion: reduce) {
  .portable-ouverture, .portable-label { opacity: 1; transform: none; }
  .portable-ouverture { position: relative; top: auto; padding-top: calc(var(--sec-144) + 16px); }
  .portable-section--ouverture .portable-collant { height: auto; }
  .portable-section--ouverture .portable-collant [data-portable] { position: relative; inset: auto; height: 70svh; }
  .portable-label { position: relative; left: auto; right: auto; bottom: auto; padding: var(--s-16) var(--marge) var(--s-24); }
}
@media (max-width: 479px) { .portable-label span:last-child { display: none; } }
.portable-section { position: relative; height: 320vh; }
.portable-collant { position: sticky; top: 0; height: 100vh; height: 100svh; }
.portable-collant [data-portable] { position: absolute; inset: 0; }

/* ---------- Comprendre · la pyramide ---------- */
.feuille.pyramide-section { margin-top: 0; padding: var(--sec-96) 0; }
.pyramide { display: grid; justify-items: center; gap: 0; margin-top: var(--s-64); }
.etage {
  --largeur: 100%;
  position: relative; width: var(--largeur);
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; align-items: center; justify-items: center;
  gap: 0 var(--s-16);
  min-height: clamp(4.5rem, 3.6rem + 3vw, 6.5rem);
  padding: var(--s-16) var(--s-24);
  border: var(--bord) solid var(--color-encre);
  border-bottom-width: 0;
  background: var(--color-feuille);
  color: var(--color-encre);
  text-align: center;
}
.etage:last-child { border-bottom-width: var(--bord); }
.etage--1 { --largeur: 100%; background: var(--color-encre); color: var(--color-blanc); }
.etage--2 { --largeur: 84%; background: var(--color-feuille); }
.etage--3 { --largeur: 68%; background: var(--color-papier); }
.etage--4 { --largeur: 52%; background: var(--color-feuille); }
.etage--5 { --largeur: 36%; background: var(--color-bleu); color: var(--color-blanc); border-color: var(--color-bleu); }
.etage__num { grid-column: 1; justify-self: start; align-self: start; font: 500 11px/1 var(--font-mono); letter-spacing: 0.05em; opacity: 0.7; }
.etage__titre { grid-column: 2; font: 800 expanded clamp(1rem, 0.8rem + 1vw, 1.6rem)/1.15 var(--font-display); letter-spacing: -0.025em; text-transform: uppercase; overflow-wrap: anywhere; min-width: 0; }
.etage__detail { grid-column: 2; margin-top: 6px; font: 400 var(--t-small)/1.4 var(--font-mono); opacity: 0.85; }
.etage--1 .etage__detail, .etage--5 .etage__detail { opacity: 0.9; }

@media (prefers-reduced-motion: no-preference) {
  .js .pyramide .etage { opacity: 0; transform: translateY(24px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
  .js .pyramide.est-pose .etage { opacity: 1; transform: none; }
  .js .pyramide.est-pose .etage--1 { transition-delay: 0s; }
  .js .pyramide.est-pose .etage--2 { transition-delay: 0.1s; }
  .js .pyramide.est-pose .etage--3 { transition-delay: 0.2s; }
  .js .pyramide.est-pose .etage--4 { transition-delay: 0.3s; }
  .js .pyramide.est-pose .etage--5 { transition-delay: 0.4s; }
}

/* ---------- Comprendre · le registre ---------- */
.chiffres { padding: var(--sec-96) 0; background: var(--color-feuille-papier); border-top: var(--bord) solid var(--color-filet); }
.chiffres__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-48) var(--gout); align-items: start; }
.chiffres__aside { grid-column: 1 / span 4; position: sticky; top: 110px; }
.chiffres__aside .texte { margin-top: var(--s-24); }
.chiffres__liste { grid-column: 6 / -1; }
.chiffres__liste li {
  display: grid; grid-template-columns: 2.5rem minmax(0, 13rem) minmax(0, 1fr); gap: var(--s-8) var(--s-24);
  padding: var(--s-24) 0; border-top: var(--bord) solid var(--color-filet);
}
.chiffres__liste li:last-child { border-bottom: var(--bord) solid var(--color-filet); }
.chiffres__liste .idx { font: 500 12px/1.9 var(--font-mono); color: var(--color-texte-2); }
.chiffres__liste .num { display: flex; flex-direction: column; font: 800 expanded var(--t-heading-sm)/1.2 var(--font-display); letter-spacing: -0.025em; }
.chiffres__liste .num i { font-style: normal; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; color: var(--color-bleu); }
.chiffres__liste .num small { margin-top: 8px; font: 400 var(--t-tag)/1.35 var(--font-mono); letter-spacing: 0; color: var(--color-texte-2); }
.chiffres__liste p { color: var(--color-encre); max-width: 60ch; }
.chiffres__liste .src { display: block; margin-top: var(--s-8); font: 400 12px/1.4 var(--font-mono); color: var(--color-texte-2); }

/* ---------- Comprendre · ce que l'agence en fait ---------- */
.usages-section { padding: var(--sec-96) 0; background: var(--color-feuille-papier); }
.usages-section .sous-titre { margin-top: var(--s-24); color: var(--color-texte-2); }
.usages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); margin-top: var(--s-48); }
.usage { display: flex; flex-direction: column; gap: var(--s-16); padding: var(--s-32); background: var(--color-teinte-papier); border-radius: var(--r-panneau); }
.usage__chiffre { font: 800 expanded clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem)/1 var(--font-display); letter-spacing: -0.035em; color: var(--color-bleu); }
.usage b { font: 800 expanded var(--t-heading-sm)/1.25 var(--font-display); letter-spacing: -0.02em; }
.usage p { color: var(--color-texte-2); font-size: var(--t-small); line-height: 1.55; }
.usages__action { margin-top: var(--s-48); }

/* ---------- tablette et téléphone ---------- */
@media (max-width: 991px) {
  .chiffres__aside, .chiffres__liste { grid-column: 1 / -1; }
  .chiffres__aside { position: static; }
  .usages { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .etage { grid-template-columns: 1.6rem minmax(0, 1fr) 1.6rem; padding: var(--s-16) var(--s-8); }
  .etage--2 { --largeur: 90%; } .etage--3 { --largeur: 80%; } .etage--4 { --largeur: 70%; } .etage--5 { --largeur: 60%; }
  .chiffres__liste li { grid-template-columns: 2rem minmax(0, 1fr); }
  .chiffres__liste li p { grid-column: 1 / -1; }
}

/* ---------- pages générées : feuille commune ---------- */
.page .feuille { margin-top: 0; padding: var(--sec-96) 0; }
.page-tete__action { margin-top: var(--s-32); }
.page-tete__note { margin-top: var(--s-16); font: 400 var(--t-tag)/1.4 var(--font-mono); color: var(--color-texte-2); }
.page-fin { padding: var(--sec-96) 0; background: var(--color-feuille-papier); }
.page-fin .conteneur { display: grid; justify-items: start; gap: var(--s-24); }

/* ---------- Tarifs ---------- */
.creation-carte { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-48) var(--gout); padding: var(--s-48); background: var(--color-teinte-papier); border-radius: var(--r-panneau); }
.creation-carte .h2 { max-width: 24ch; }
.creation-carte__liste { margin-top: var(--s-32); }
.creation-carte__prix { display: flex; flex-direction: column; justify-content: center; gap: var(--s-16); padding: var(--s-32); background: var(--metal); border: 1px solid var(--color-filet-fort); border-radius: var(--r-carte); }
.creation-carte__montant { font: 800 expanded clamp(3rem, 2rem + 3.4vw, 5rem)/1 var(--font-display); letter-spacing: -0.035em; color: var(--color-bleu); }
.creation-carte__detail { font: 500 var(--t-small)/1.4 var(--font-mono); }
.creation-carte__prix .texte { color: var(--color-encre); }
.formule__liste li { display: flex; gap: 12px; padding: var(--s-8) 0; border-top: 1px solid var(--color-filet); font-size: var(--t-small); line-height: 1.5; }
.formule__liste li::before { content: ""; width: 6px; height: 6px; margin-top: 0.55em; background: var(--color-encre); flex: none; }
.tarifs-mois { margin-top: var(--sec-96); }
.tarifs-mois .sous-titre { margin-top: var(--s-24); color: var(--color-texte-2); }
.formules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gout); margin-top: var(--s-48); }
.formule { display: flex; flex-direction: column; gap: var(--s-16); padding: var(--s-32); background: var(--color-teinte-papier); border-radius: var(--r-panneau); }
.formule__pastille { align-self: flex-start; padding: 6px 10px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; background: var(--color-blanc); border-radius: var(--r-bouton); }
.formule__nom { font: 800 expanded var(--t-titre-md)/1.1 var(--font-display); letter-spacing: -0.03em; }
.formule__prix { align-self: stretch; }
.formule__texte { color: var(--color-texte-2); }
.formule__pour { margin-top: auto; padding-top: var(--s-16); font: 400 var(--t-small)/1.5 var(--font-mono); color: var(--color-texte-2); }
.tarifs-faq { background: var(--color-feuille-papier); }
.tarifs-regles { padding: var(--sec-96) 0; background: var(--color-feuille-papier); border-top: var(--bord) solid var(--color-filet); }
.tarifs-regles__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-48) var(--gout); }
.tarifs-regles .texte, .photos-carte { margin-top: var(--s-24); }
.photos-carte { display: grid; gap: var(--s-16); padding: var(--s-24); background: var(--color-teinte-papier); border-radius: var(--r-carte); }
.photos-carte p { color: var(--color-texte-2); }
.photos-carte b { color: var(--color-encre); }

/* ---------- Réalisations ---------- */

/* ---------- Instagram ---------- */
.packs-section { padding: var(--sec-96) 0; background: var(--color-feuille-papier); border-top: var(--bord) solid var(--color-filet); }
.packs-section .sous-titre { margin-top: var(--s-24); color: var(--color-texte-2); }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gout); margin-top: var(--s-48); }
.pack { display: flex; flex-direction: column; gap: var(--s-16); padding: var(--s-32); background: var(--color-teinte-papier); border-radius: var(--r-panneau); }
.pack__quoi { font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-2); }
.pack__nom { font: 800 expanded var(--t-titre-md)/1.1 var(--font-display); letter-spacing: -0.03em; }
.pack__bientot { margin-top: auto; align-self: flex-start; padding: 6px 10px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-blanc); background: var(--color-encre); border-radius: var(--r-bouton); }

/* ---------- Contact ---------- */
/* le formulaire à gauche, WhatsApp à droite : les deux se voient d'un coup ; sur téléphone, WhatsApp passe en premier */
.contact-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "ecrire wa" "ecrire autres"; gap: var(--s-32) var(--gout); align-items: start; }
.contact-ecrire { grid-area: ecrire; }
.contact-wa { grid-area: wa; display: grid; gap: var(--s-16); justify-items: start; padding: var(--s-32); background: var(--color-feuille); border: 1px solid var(--color-bord-vig); border-radius: var(--r-carte); }
.contact-wa__titre { font: 800 expanded var(--t-heading-md)/1.1 var(--font-display); letter-spacing: -0.03em; }
.contact-wa__texte { font-size: var(--t-small); color: var(--color-texte-2); }
.contact-tete__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-48) var(--gout); align-items: end; justify-items: stretch; }
.contact-tete .exemples { position: static; }
.btn-wa { display: inline-flex; align-items: center; gap: var(--s-16); padding: var(--s-16) var(--s-24); color: var(--color-blanc); background: var(--color-encre); border-radius: var(--r-carte); text-decoration: none; transition: background-color var(--dur-court) ease; }
.btn-wa:hover, .btn-wa:focus-visible { background: var(--color-bleu); }
.btn-wa svg { width: 2rem; height: 2rem; flex: none; }
.btn-wa span { display: grid; gap: 4px; }
.btn-wa b { font: 800 expanded var(--t-heading-sm)/1.2 var(--font-display); letter-spacing: -0.02em; }
.btn-wa small { font: 400 var(--t-small)/1 var(--font-mono); opacity: 0.85; }
.contact-note { margin-top: var(--s-24); }
.contacts { grid-area: autres; display: grid; gap: var(--gout); }
.contact-carte { display: grid; gap: var(--s-8); padding: var(--s-24); background: var(--color-teinte-papier); border-radius: var(--r-carte); }
.contact-carte__quoi { font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-2); }
.contact-carte .val { font: 800 expanded var(--t-heading-sm)/1.25 var(--font-display); letter-spacing: -0.02em; color: var(--color-encre); text-decoration: none; overflow-wrap: anywhere; }
.contact-carte a.val:hover { color: var(--color-bleu); }
.contact-carte p { color: var(--color-texte-2); font-size: var(--t-small); }
.exemples { position: sticky; top: 110px; padding: var(--s-32); background: var(--color-teinte-papier); border-radius: var(--r-panneau); }
.exemples ul { display: grid; gap: var(--s-8); justify-items: end; }
.exemples li { max-width: 90%; padding: 10px 14px; background: var(--color-blanc); border-radius: var(--r-carte) var(--r-carte) 2px var(--r-carte); font-size: var(--t-small); box-shadow: 0 0 30px var(--color-ombre); }
.exemples figcaption { margin-top: var(--s-24); font-size: var(--t-small); color: var(--color-texte-2); }
.contact-fin { margin-top: var(--s-64); color: var(--color-texte-2); }

/* ---------- Mentions légales ---------- */
.legal-colonne { max-width: 52rem; }
.legal-colonne > * + * { margin-top: var(--s-16); }
.legal-titre { margin-top: var(--s-64) !important; }
.legal-colonne > .legal-titre:first-child { margin-top: 0 !important; }
.legal { margin-top: var(--s-24) !important; }
.legal div { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--s-16); padding: var(--s-16) 0; border-top: var(--bord) solid var(--color-filet); }
.legal dt { font: 500 var(--t-tag)/1.5 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-texte-2); }
.legal dd a, .legal-texte a { color: var(--color-encre); text-decoration: underline; text-underline-offset: 0.2em; }
.legal-maj { margin-top: var(--s-48) !important; font: 400 12px/1.4 var(--font-mono); color: var(--color-texte-2); }

@media (max-width: 991px) {
  .creation-carte, .formules, .tarifs-regles__grille, .contact-grille, .packs, .contact-tete__grille { grid-template-columns: minmax(0, 1fr); }
  .contact-grille { grid-template-areas: "wa" "ecrire" "autres"; }
  .exemples { position: static; }
}
@media (max-width: 599px) {
  .creation-carte, .formule, .pack { padding: var(--s-24); }
  .legal div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---------- Réalisations · le ruban 3D d'origine (ruban.js inchangé), dans un cadre brutaliste ---------- */
.realisations-page .ruban { margin: 0; }
.ruban__scene {
  position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 82svh; overflow: hidden;
  color: var(--color-texte-nuit);
  background: radial-gradient(80% 70% at 50% 45%, var(--color-nuit-2) 0%, var(--color-nuit) 70%);
  border: var(--bord) solid var(--color-encre); border-radius: var(--r-panneau);
}
.ruban__grille { position: absolute; inset: 0; overflow: hidden; pointer-events: none; perspective: 700px; perspective-origin: 50% 70%; --case: 2.8rem; }
.ruban__grille .sol {
  position: absolute; left: -60%; right: -60%; top: 70%; height: 160%; transform-origin: 50% 0; transform: rotateX(70deg);
  background: linear-gradient(var(--color-grille-sol) 1px, transparent 1px) 50% 0 / var(--case) var(--case), linear-gradient(90deg, var(--color-grille-sol) 1px, transparent 1px) 50% 0 / var(--case) var(--case);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, oklch(0% 0 0 / 0.18) 18%, oklch(0% 0 0 / 0.6) 45%, oklch(0% 0 0) 100%);
  mask-image: linear-gradient(180deg, transparent 0%, oklch(0% 0 0 / 0.18) 18%, oklch(0% 0 0 / 0.6) 45%, oklch(0% 0 0) 100%);
}
.ruban__grille .fond {
  position: absolute; left: 0; right: 0; top: 0; height: 70%;
  background: linear-gradient(var(--color-grille-fond) 1px, transparent 1px) 50% 100% / var(--case) var(--case), linear-gradient(90deg, var(--color-grille-fond) 1px, transparent 1px) 50% 100% / var(--case) var(--case);
  -webkit-mask-image: linear-gradient(180deg, transparent 20%, oklch(0% 0 0 / 0.5) 75%, oklch(0% 0 0) 100%);
  mask-image: linear-gradient(180deg, transparent 20%, oklch(0% 0 0 / 0.5) 75%, oklch(0% 0 0) 100%);
}
.ruban__grille .horizon { position: absolute; left: 0; right: 0; top: 55%; height: 30%; background: radial-gradient(55% 50% at 50% 50%, var(--color-grille-fond) 0%, transparent 70%); }
.ruban__toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; outline: none; }
.ruban.is-tire .ruban__toile { cursor: grabbing; }
.ruban__toile:focus-visible { box-shadow: inset 0 0 0 2px var(--color-bleu-sur-nuit); }
.ruban__hud { position: absolute; left: var(--s-24); right: var(--s-24); top: var(--s-24); display: flex; justify-content: space-between; gap: var(--s-16); font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texte-nuit-2); pointer-events: none; }
.ruban__cartel { position: absolute; left: var(--s-24); right: var(--s-24); bottom: var(--s-24); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-24); pointer-events: none; }
.ruban__genre { font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-bleu-sur-nuit); }
.ruban__nom { margin-top: var(--s-8); max-width: 30ch; font: 800 expanded var(--t-heading-lg)/1.2 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; }
.ruban__fleches { display: flex; gap: var(--s-8); pointer-events: auto; }
.ruban__fleches button {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  font: 500 1.1rem/1 var(--font-mono); color: var(--color-texte-nuit);
  background: transparent; border: var(--bord) solid var(--color-filet-nuit-fort); border-radius: var(--r-bouton);
  cursor: pointer; transition: background-color var(--dur-court) ease, border-color var(--dur-court) ease;
}
.ruban__fleches button:hover { background: var(--color-bleu); border-color: var(--color-bleu); }
.ruban__fleches button:active { background: var(--color-bleu-presse); border-color: var(--color-bleu-presse); }
.ruban__fleches button:focus-visible { outline: 2px solid var(--color-focus-nuit); outline-offset: 3px; }
.ruban.is-sans-webgl { display: none; }
/* la grille de secours se retire dès que le ruban peut tourner */
.js .ruban:not(.is-sans-webgl) + .realisations__secours { display: none; }
@media (max-width: 60rem) {
  .ruban__scene { aspect-ratio: 4 / 3.4; }
  .ruban__cartel { flex-direction: column; align-items: flex-start; gap: var(--s-16); left: 0; right: 0; bottom: 0; padding: 3.4rem var(--s-16) var(--s-16); background: linear-gradient(180deg, var(--color-nuit-transparente) 0%, var(--color-nuit-voile) 24%, var(--color-nuit-voile-fort) 46%, var(--color-nuit) 62%); }
  .ruban__hud { left: var(--s-16); right: var(--s-16); top: var(--s-16); }
  .ruban__nom { font-size: var(--t-heading-md); max-width: 100%; }
}
@media (max-width: 479px) { .ruban__aide { display: none; } }

/* ---------- Instagram · les téléphones à droite, des publications de cabinet ---------- */
.insta-tete { padding-bottom: var(--sec-96); }
.insta-tete .conteneur.insta-tete__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-48) var(--gout); align-items: center; justify-items: stretch; }
.insta-tete__texte { display: grid; justify-items: start; }
.exemples-tete { margin-bottom: var(--s-48); }
.legende-exemple__quoi { font: 500 var(--t-tag)/1.4 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texte-2); }
.exemple-conseil { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-48) var(--gout); align-items: center; margin-top: var(--sec-96); }
.exemple-conseil img { width: 100%; height: auto; border-radius: var(--r-vignette); box-shadow: 0 0 30px var(--color-ombre); }
@media (max-width: 991px) {
  .insta-tete .conteneur.insta-tete__grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .exemple-conseil { grid-template-columns: minmax(0, 1fr); }
  .exemple-conseil img { max-width: 20rem; }
}
/* le compte fictif : le texte à gauche, l'iPhone à droite */
.compte { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-48) var(--gout); align-items: center; }
.compte__texte .h2 { max-width: 18ch; }
.compte__texte .sous-titre { margin-top: var(--s-24); color: var(--color-texte-2); }
.carrousel-bloc { margin-top: var(--sec-144); }
@media (max-width: 991px) {
  .compte { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Instagram · les carrousels en pile de cartes (pile-bleu.js) ---------- */
.lecteur-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.publications { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sec-96) var(--s-64); }
/* un seul carrousel : il prend la largeur, la légende à côté de la pile */
.publications--une { grid-template-columns: minmax(0, 1fr); max-width: 56rem; }
.publication { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--s-32) clamp(5rem, 7vw, 7rem); align-items: start; }
.publication__texte { display: grid; justify-items: start; gap: var(--s-16); padding-top: var(--s-24); border-top: var(--bord) solid var(--color-encre); }
.publication__texte .surtitre { margin-bottom: 0; }
.publication__legende { color: var(--color-texte-2); max-width: 44ch; }
.pile { position: relative; display: grid; gap: var(--s-16); justify-items: center; border-radius: var(--r-carte); }
.pile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 8px; }
.pile__cartes { position: relative; width: 100%; aspect-ratio: var(--ratio, 4 / 5); perspective: 600px; }
.pile__carte {
  position: absolute; inset: 0; margin: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  transform: translateX(var(--x, 0px)) rotateY(var(--ry, 0deg));
  transition: transform 0.55s var(--ease-ressort);
}
.pile__carte[data-dessus] { cursor: grab; }
.pile__carte.est-tiree { cursor: grabbing; transition: none; }
.pile__face {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-carte); background: var(--color-papier-2);
  box-shadow: 0 1px 2px var(--color-ombre-proche), 0 24px 48px -24px var(--color-ombre-carte);
  transform-origin: 90% 90%;
  transform: rotateZ(calc(var(--d, 0) * 4deg)) scale(calc(1 - var(--d, 0) * 0.06));
  transition: transform 0.55s var(--ease-ressort), opacity 0.3s ease;
}
/* au-delà de la quatrième carte, la pile ne montre plus rien : elle resterait un éventail illisible */
.pile__carte[data-d="4"] .pile__face { opacity: 0; }
.pile__face img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.pile__commandes { display: flex; align-items: center; gap: var(--s-16); }
.pile__fleche {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  font: 500 1rem/1 var(--font-mono); color: var(--color-encre);
  background: transparent; border: var(--bord) solid var(--color-filet-fort); border-radius: var(--r-bouton);
  cursor: pointer; transition: border-color var(--dur-court) ease, color var(--dur-court) ease;
}
.pile__fleche:hover, .pile__fleche:focus-visible { border-color: var(--color-bleu); color: var(--color-bleu); }
.pile__fleche:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.pile__fleche:active { border-color: var(--color-bleu-presse); color: var(--color-bleu-presse); }
.pile__compte { min-width: 5.5ch; text-align: center; font: 800 expanded var(--t-heading-md)/1 var(--font-display); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--color-texte-2); }
.pile__compte b { color: var(--color-encre); }
.pile__pastilles { display: flex; }
.pile__pastilles button { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; padding: 0; background: none; border: 0; cursor: pointer; }
.pile__pastilles span { width: 8px; height: 8px; background: var(--color-filet-fort); transition: width var(--dur-court) ease, background-color var(--dur-court) ease; }
.pile__pastilles button:hover span { background: var(--color-encre); }
.pile__pastilles button[aria-current] span { width: 22px; background: var(--color-bleu); }
.pile__pastilles button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .pile__carte, .pile__face { transition: none; } }
@media (max-width: 1199px) {
  .publications { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .publication { grid-template-columns: minmax(0, 1fr); }
  .pile__cartes { width: min(78vw, 18rem); }
}

/* ---------- Comprendre · le fil de lecture (fil-bleu.js) ---------- */
.fil { position: fixed; z-index: 40; left: clamp(8px, 1.6vw, 28px); top: 7.5rem; bottom: 2.5rem; width: 14px; }
.fil__piste { position: absolute; left: 6px; top: 0; bottom: 0; width: 1.5px; background: var(--color-filet-fort); }
.fil__rempli { position: absolute; inset: 0; background: var(--color-bleu); transform: scaleY(0); transform-origin: top; }
.fil__reperes { position: absolute; inset: 0; }
.fil__reperes li { position: absolute; left: 0; top: 0; }
.fil__reperes a { position: relative; display: block; width: 14px; height: 14px; margin-top: -7px; text-decoration: none; color: var(--color-texte-2); }
/* la zone de clic dépasse le carré, pour le doigt */
.fil__reperes a::before { content: ""; position: absolute; inset: -10px; }
.fil__carre { position: absolute; left: 1px; top: 1px; width: 12px; height: 12px; background: var(--color-papier); border: var(--bord) solid var(--color-encre); transition: background-color var(--dur-court) ease, border-color var(--dur-court) ease; }
.fil__reperes a.est-passe .fil__carre, .fil__reperes a[aria-current] .fil__carre { background: var(--color-bleu); border-color: var(--color-bleu); }
.fil__reperes a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
/* le nom de la partie, écrit le long du trait, sous son carré : il ne mord pas sur le texte */
.fil__nom {
  position: absolute; left: 1px; top: 22px; writing-mode: vertical-rl;
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: var(--color-bleu); opacity: 0; transition: opacity var(--dur-court) ease;
}
.fil__reperes a[aria-current] .fil__nom, .fil__reperes a:hover .fil__nom, .fil__reperes a:focus-visible .fil__nom { opacity: 1; }
.fil__reperes a.nom-haut .fil__nom { top: auto; bottom: 22px; }
@media (max-width: 767px) {
  .fil { left: 4px; top: 6rem; width: 10px; }
  .fil__piste { left: 4px; }
  .fil__reperes a { width: 10px; height: 10px; margin-top: -5px; }
  .fil__carre { width: 9px; height: 9px; left: 0; top: 0; }
  .fil__nom { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fil__carre, .fil__nom { transition: none; } }
html:has([data-fil]) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has([data-fil]) { scroll-behavior: auto; } }

.offre-bientot { display: grid; justify-items: start; gap: var(--s-16); margin-top: var(--s-48); padding-top: var(--s-24); border-top: var(--bord) solid var(--color-encre); }


/* ---------- Réalisations : les mesures du site livré ---------- */
.mesures { padding: var(--sec-96) 0; background: var(--color-feuille-papier); border-top: var(--bord) solid var(--color-filet); }
.mesures__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-48) var(--gout); align-items: start; }
.mesures__texte { grid-column: 1 / span 7; }
.mesures__texte .h2 { max-width: 18ch; }
.mesures__texte .sous-titre { margin-top: var(--s-32); color: var(--color-texte-2); }
.notes { margin-top: var(--s-48); border-bottom: 1px solid var(--color-encre); }
.note { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px var(--s-24); align-items: baseline; padding: var(--s-16) 0; border-top: 1px solid var(--color-filet-fort); }
.note:first-child { border-top-color: var(--color-encre); }
.note dt { grid-column: 2; grid-row: 1; font: 500 var(--t-tag)/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.note__chiffre { grid-column: 1; grid-row: 1 / span 2; font: 800 expanded clamp(2.6rem, 1.6rem + 2.8vw, 4.2rem)/0.9 var(--font-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.note--forte .note__chiffre { color: var(--color-bleu); }
.note__texte { grid-column: 2; grid-row: 2; font-size: var(--t-small); line-height: 1.5; color: var(--color-texte-2); }
.mesures__limite { margin-top: var(--s-24); font-size: var(--t-small); color: var(--color-texte-2); }
.mesures__boutons { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-32); }
.mesures__source { margin-top: var(--s-16); font-size: var(--t-small); color: var(--color-texte-2); }
.mesures__capture { grid-column: 9 / -1; justify-self: end; width: min(100%, 19rem); position: sticky; top: 7.5rem; }
.mesures__capture img { width: 100%; height: auto; border: 1px solid var(--color-bord-vig); border-radius: var(--r-carte); background: var(--color-blanc); box-shadow: 0 18px 40px -12px var(--color-ombre); }
.mesures__capture figcaption { margin-top: var(--s-16); font-size: var(--t-small); color: var(--color-texte-2); }
@media (max-width: 991px) {
  .mesures__texte, .mesures__capture { grid-column: 1 / -1; }
  .mesures__capture { position: static; justify-self: start; }
}
@media (max-width: 479px) {
  .note { grid-template-columns: 6.75rem minmax(0, 1fr); gap: 4px var(--s-16); }
  .note__chiffre { font-size: 2.3rem; }
}

/* ---------- Réalisations : le scroll interactif ---------- */
/* sans JavaScript ou avec les animations réduites : l'image fixe, dans son cadre */
.scroll-demo { padding: var(--sec-96) 0; background: var(--color-feuille-papier); border-top: var(--bord) solid var(--color-filet); }
.scroll-demo__tete .h2 { max-width: 16ch; }
.scroll-demo__tete .sous-titre { max-width: 56ch; margin-top: var(--s-32); color: var(--color-texte-2); }
.scroll-demo__piste { position: relative; margin-top: var(--s-48); }
.scroll-demo__scene { width: 100%; max-width: 90rem; margin: 0 auto; padding: 0 var(--marge); }
.scroll-demo__cadre {
  position: relative; overflow: hidden; margin: 0 auto;
  width: min(100%, calc((100svh - 5.5rem - var(--s-24)) * 1280 / 956)); aspect-ratio: 1280 / 956;
  border: 1px solid var(--color-bord-vig); border-radius: var(--r-panneau); background: var(--color-nuit);
}
.scroll-demo__poster, .scroll-demo__toile { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scroll-demo__toile, .scroll-demo__piece, .scroll-demo__rail { display: none; }
.scroll-demo__piece {
  position: absolute; left: 14px; top: 14px; padding: 6px 8px;
  background: var(--color-blanc); border-radius: var(--r-bouton);
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase;
}
.scroll-demo__rail { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 3px; background: var(--color-voile); }
.scroll-demo__rail i { position: absolute; inset: 0; background: var(--color-bleu); transform: scaleX(0); transform-origin: 0 50%; }
/* avec le moteur : la scène reste à l'écran pendant que la piste défile */
.scroll-demo[data-mode="sequence"] { padding-bottom: 0; }
.scroll-demo[data-mode="sequence"] .scroll-demo__scene { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: 5.5rem; padding-bottom: var(--s-24); }
.scroll-demo[data-mode="sequence"] .scroll-demo__toile, .scroll-demo[data-mode="sequence"] .scroll-demo__piece, .scroll-demo[data-mode="sequence"] .scroll-demo__rail { display: block; }

/* ---------- Contact : le formulaire de message, avant WhatsApp ---------- */
.contact-form { width: 100%; padding: var(--s-32); background: var(--color-feuille); border: 1px solid var(--color-bord-vig); border-radius: var(--r-carte); }
.contact-form__titre { grid-column: 1 / -1; font: 800 expanded var(--t-heading-md)/1.1 var(--font-display); letter-spacing: -0.03em; }
.contact-form__large { grid-column: 1 / -1; }
.contact-form .miroir__boutons { justify-content: flex-start; }
.contact-page .miroir__suite { margin-top: var(--s-16); }

/* ---------- Tarifs : « Prendre contact » sous chaque formule ---------- */
.formule__action { margin-top: var(--s-24); }
.tarifs-fin__boutons { display: flex; flex-wrap: wrap; gap: var(--s-8); }
@media (max-width: 767px) { .contact-form { padding: var(--s-24) var(--s-16); } }
/* sur téléphone, WhatsApp remonte : les exemples de questions laissent la place */
@media (max-width: 767px) { .contact-tete .exemples { display: none; } }