/*
  Piste A, chantier 04 : habillages 2 et 3, et styles de l'animation « Expressive ».
  Chargé par la v6 seulement (accueil_2026-10-20_v6.html). La v5 et son habillage 1 ne changent pas.

  Bascule Habillage : <html data-habillage="1|2|3"> (tests.js). Habillage 2 = galets et plume (le cerne a été retiré par la tête le 20 octobre). L'habillage 1 est celui de la v5 (disque, cadre décalé,
  trame, pictogramme plat), écrit dans la page ; dès qu'on passe en 2 ou 3, ses éléments sont masqués et ceux du système
  choisi apparaissent. Règles communes : jamais sur du texte, deux éléments au plus par section, toujours dans la couleur
  de la bascule, tenue sur les quatre fonds, masqués sous 960 px (mobile et tablette gardent la page nue).
  Les éléments sont des <span> vides ou des SVG inline (symboles définis une fois en tête de body), aria-hidden.

  Animation : un seul niveau appliqué à tous pour l'instant (« Sobre », décision de Michaël du 20 octobre), piloté par animation.js ;
  la mécanique à deux niveaux reste (<html data-animation="sobre|expressive">, tests.js), le niveau « Expressive » est vide et
  accueillera un futur système de mouvement. Les règles ci-dessous s'appliquent donc à html.js, quel que soit le niveau.
  Expressive = deux moments (le trait autour de « Un expert », l'encart qui s'ouvre) plus l'entrée des éléments d'habillage
  (échelle de 0,6 à 1 et opacité de 0 à 1 en 700 ms depuis leur centre, 120 ms entre deux éléments d'une section, une seule fois). Transform et opacity, plus
  stroke-dashoffset pour le trait (propriété de peinture SVG, sans mise en page ; écart accordé par la tête le 19 octobre).
  Sous 768 px : surlignage et entrée des éléments oui, ouverture de l'encart non. Avec prefers-reduced-motion : tout posé, sans mouvement.
*/

/* ==========================================================
   Exclusion mutuelle des trois habillages
   ========================================================== */
html:not([data-habillage="1"]) .disque,
html:not([data-habillage="1"]) .trame,
html:not([data-habillage="1"]) .scene::after,
html:not([data-habillage="1"]) .decale::before,
html:not([data-habillage="1"]) .mosaique::after { display: none; }
.h2, .h3 { display: none; position: absolute; pointer-events: none; z-index: 0; color: var(--accent); }
html[data-habillage="2"] .h2 { display: block; }
html[data-habillage="3"] .h3 { display: block; }
.h2 svg, .h3 svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Dans les enveloppes .decale de la v5, la règle « .decale > * { position: relative } » est plus tardive dans la cascade : on la contre ici */
.decale > .h2, .decale > .h3 { position: absolute; }
/* Les visuels devant lesquels un élément passe : toujours au-dessus */
.portrait-bloc, .formulaire-bloc { position: relative; }
.portrait-bloc > .portrait, .formulaire-bloc > .formulaire { position: relative; z-index: 1; }
.faq .formulaire-bloc { position: sticky; }
.forfaits > .forfait { z-index: 1; }
/* Éléments de grille (écrits en fin de grille pour ne pas décaler les cartes) : mêmes cellules que la carte maîtresse, à partir de 961 px */
@media (min-width: 961px) {
  .mosaique > .h2, .mosaique > .h3 { grid-area: 1 / 1 / 2 / 3; position: relative; }
  .forfaits > .forfait:nth-child(1) { grid-area: 1 / 1 / 2 / 2; } .forfaits > .forfait:nth-child(2) { grid-area: 1 / 2 / 2 / 3; } .forfaits > .forfait:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
  .forfaits > .h2, .forfaits > .h3 { grid-area: 1 / 2 / 2 / 3; position: relative; }
}
/* En-tête en mode vidéo : aucun élément d'habillage (comme le disque et le cadre de l'habillage 1), la plume jamais */
html:not([data-video="0"]) .hero .h2, html:not([data-video="0"]) .hero .h3 { display: none; }

/* ==========================================================
   Habillage 2 « Plume » : organique et chaud. Galet, plume.
   ========================================================== */
/* Galet : tache organique, accent fondu de 15 % au centre à 6 % au bord, comme une aquarelle qui sèche */
.galet { border-radius: 63% 37% 54% 46% / 44% 58% 42% 56%; background: radial-gradient(ellipse at 36% 34%, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 78%); }
/* Plume : un coup de pinceau effilé, fin aux extrémités, plein au milieu, à 60 % de l'accent, une seule fois dans la page */
.plume svg { fill: color-mix(in srgb, var(--accent) 60%, var(--fond)); stroke: none; }

/* En-tête : deux galets qui se chevauchent derrière la scène, plume sous le panneau */
.hero .galet { width: 760px; height: 560px; left: calc(50% + 120px); top: -40px; --pose: rotate(-14deg); transform: var(--pose); }
.hero .galet-2 { width: 420px; height: 330px; left: calc(50% + 480px); top: 330px; --pose: rotate(22deg); transform: var(--pose); background: radial-gradient(ellipse at 40% 40%, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 5%, transparent) 75%); }
.scene > .plume { width: 112%; height: 300px; left: -6%; bottom: -150px; z-index: -1; }
/* Comment ça marche : galet dans l'angle bas droit */
.marche .galet { width: 480px; height: 380px; right: -140px; bottom: -150px; --pose: rotate(-18deg); transform: var(--pose); }
/* Pour qui : rien en habillage 2 (cerne retiré) */
/* Expert : galet en haut à gauche qui dépasse derrière la photo */
.expert .galet { width: 460px; height: 360px; left: calc(50% - 860px); top: -90px; --pose: rotate(16deg); transform: var(--pose); }
/* Forfaits : galet derrière le forfait conseillé (élément de grille, colonne du milieu ; la forme est un pseudo-élément qui déborde de la cellule) */
.forfaits > .galet { z-index: 0; inset: auto; background: none; border-radius: 0; }
.forfaits > .galet::before { content: ""; position: absolute; inset: -40px -56px -44px -52px; border-radius: 63% 37% 54% 46% / 44% 58% 42% 56%; transform: rotate(-8deg); background: radial-gradient(ellipse at 36% 34%, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 78%); }
/* Encart : galet sous la carte en volume, à droite, déborde du cadre */
.encart-objet .galet { width: 380px; height: 300px; right: -150px; top: -10px; --pose: rotate(-12deg); transform: var(--pose); }
/* FAQ : rien en habillage 2 (cerne retiré) */

/* ==========================================================
   Habillage 3 « Registre » : graphique et typographique. Hachures, réglure, repères, numéro.
   ========================================================== */
/* Hachures : lignes à 45°, 1,5 px tous les 11 px, accent à 34 %, rectangle arrondi décalé derrière un visuel */
.hachures { border-radius: 30px; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 34%, transparent) 0 1.5px, transparent 1.5px 11px); }
/* Réglure : lignes de registre tous les 28 px, filet de tête et marge verticale, fondue vers le centre de la page */
.reglure { background-image: linear-gradient(90deg, transparent 0 55px, color-mix(in srgb, var(--accent) 60%, transparent) 55px 57px, transparent 57px), repeating-linear-gradient(to bottom, color-mix(in srgb, var(--accent) 28%, transparent) 0 1px, transparent 1px 28px); }
.reglure::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
/* Repères : quatre coins de cadrage, bras de 26 px, 2 px, posés à 16 px autour d'un visuel */
.reperes { --b: 26px; --e: 2px; background:
  linear-gradient(currentColor, currentColor) left top / var(--b) var(--e) no-repeat,
  linear-gradient(currentColor, currentColor) left top / var(--e) var(--b) no-repeat,
  linear-gradient(currentColor, currentColor) right top / var(--b) var(--e) no-repeat,
  linear-gradient(currentColor, currentColor) right top / var(--e) var(--b) no-repeat,
  linear-gradient(currentColor, currentColor) left bottom / var(--b) var(--e) no-repeat,
  linear-gradient(currentColor, currentColor) left bottom / var(--e) var(--b) no-repeat,
  linear-gradient(currentColor, currentColor) right bottom / var(--b) var(--e) no-repeat,
  linear-gradient(currentColor, currentColor) right bottom / var(--e) var(--b) no-repeat; }
/* Numéro : glyphe décoratif en filigrane (contour seul à 32 % de l'accent), jamais une vraie numérotation, hors lecture d'écran */
.numero-filigrane { font-family: var(--titres); font-weight: 800; font-size: 170px; line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 32%, transparent); user-select: none; cursor: default; }

/* En-tête : hachures décalées derrière le panneau de la scène, réglure en bloc en haut à droite */
.scene > .hachures { inset: 50px -22px -22px 22px; z-index: -1; }
.hero .reglure { width: 460px; height: 281px; right: 0; top: 48px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
/* Comment ça marche : numéro en haut à droite, réglure dans l'angle bas droit */
.marche .numero-filigrane { right: calc(50% - 570px); top: 56px; }
.marche .reglure { width: 380px; height: 225px; right: 0; bottom: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
/* Pour qui : hachures décalées derrière la grande carte */
.mosaique > .hachures { z-index: 0; --pose: translate(18px, 18px); transform: var(--pose); }
/* Expert : repères et hachures autour du portrait */
.portrait-bloc > .reperes { inset: -16px; }
.portrait-bloc > .hachures { inset: 22px -22px -22px 22px; }
/* Forfaits : numéro en haut à droite, hachures derrière le forfait conseillé (16 px, dans l'espace entre les cartes) */
.tarifs .numero-filigrane { right: calc(50% - 570px); top: 56px; }
.forfaits > .hachures { z-index: 0; --pose: translate(16px, 16px); transform: var(--pose); }
/* Encart : hachures sous la carte en volume, à droite, débordent du cadre */
.encart-objet .hachures { width: 340px; height: 250px; right: -130px; top: 16px; }
/* FAQ : numéro en haut à droite, repères autour du formulaire */
.faq .numero-filigrane { right: calc(50% - 570px); top: 56px; }
.formulaire-bloc > .reperes { inset: -16px; }
@media (min-width: 1600px) { .marche .numero-filigrane, .tarifs .numero-filigrane, .faq .numero-filigrane { right: calc(50% - 640px); } }

@media (max-width: 960px) { .h2, .h3 { display: none !important; } }

/* ==========================================================
   Animation « Expressive »
   ========================================================== */
/* Moment a : le surlignage façon marqueur derrière « Un expert » (section expert) et « votre activité » (titre de « Pour qui »).
   Une bande légèrement irrégulière et inclinée, aux bords doux, accent à 45 % posé sur le fond de la section, derrière les lettres, sur environ 55 % de la hauteur de ligne (du haut des bas-de-casse au bas des descendantes) ;
   elle se remplit de gauche à droite en 600 ms quand le titre entre dans l'écran (classe « rempli » posée par animation.js), une seule fois.
   Lisibilité : encre sur fond mêlé de 45 % d'accent, vérifiée sur les quatre fonds et les trois couleurs (ratios dans le compte rendu). */
.surligne { position: relative; display: inline-block; isolation: isolate; }
.surligne .marqueur { display: none; position: absolute; left: -0.16em; right: -0.2em; top: 0.38em; bottom: -0.06em; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 46% 54% 52% 48% / 58% 42% 58% 42%; filter: blur(0.7px); transform-origin: 0 50%; transform: rotate(-1.5deg) scaleX(0); transition: transform .6s cubic-bezier(.33, 1, .68, 1); }
.surligne.rempli .marqueur { transform: rotate(-1.5deg) scaleX(1); }
html.js .surligne .marqueur { display: block; }

/* Moment b : l'encart s'ouvre jusqu'à la pleine largeur (ordinateur seulement). Le fond est une couche à part mise à l'échelle par transform ; le contenu ne bouge pas.
   Règle (Michaël, 20 octobre) : fermé tant que le bord haut n'a pas atteint le milieu de l'écran ; ouverture jouée par le défilement entre ce point et le moment
   où le bord bas atteint le milieu ; si la page ne peut plus défiler jusque-là, ouverture automatique en 500 ms dès que l'encart est entièrement visible (animation.js). */
.encart-fond { display: none; position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; border-radius: 28px; background: var(--encart-fond); transform-origin: 50% 50%; will-change: transform; }
.encart-fond::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--encart-filet); opacity: var(--bord, 1); }
html.js .encart-bloc { background: transparent; border-color: transparent; isolation: isolate; }
html.js .encart-fond { display: block; }

/* Entrée des éléments d'habillage (les trois systèmes) : opacité de 0 à 1 et échelle de 0,6 à 1 depuis leur centre, en 700 ms, courbe douce,
   retard par élément posé par animation.js (--retard, 120 ms entre deux éléments d'une même section), une seule fois (classe en-place).
   Les cadres de l'habillage 1 sont des pseudo-éléments : la classe en-place se pose sur leur hôte (.decale, .scene, .mosaique). */
.facture .illustration { --pose: rotate(-8deg); --opacite: .18; transform: var(--pose); }
html.js :is(.disque, .trame, .facture .illustration, .h2, .h3) { transition: opacity .7s cubic-bezier(.33, 1, .68, 1), transform .7s cubic-bezier(.33, 1, .68, 1); transition-delay: var(--retard, 0ms); }
html.js :is(.disque, .trame, .facture .illustration, .h2, .h3):not(.en-place) { opacity: 0; transform: var(--pose, none) scale(.6); }
html.js .decale::before, html.js .scene::after, html.js .mosaique::after { transition: opacity .7s cubic-bezier(.33, 1, .68, 1), transform .7s cubic-bezier(.33, 1, .68, 1); transition-delay: var(--retard, 0ms); }
html.js .decale:not(.en-place)::before, html.js .scene:not(.en-place)::after { opacity: 0; transform: scale(.6); }
html.js .mosaique:not(.en-place)::after { opacity: 0; transform: translate(12px, 12px) scale(.6); }

/* Sous 768 px : pas d'ouverture de l'encart (surlignage et entrée des éléments restent) */
@media (max-width: 767px) {
  html.js .encart-fond { display: none; }
  html.js .encart-bloc { background: var(--encart-fond); border-color: var(--encart-filet); }
}
/* prefers-reduced-motion : tout est posé d'emblée, sans mouvement (encart fermé, bande de surlignage pleine, éléments en place) */
@media (prefers-reduced-motion: reduce) {
  html.js .encart-fond { display: none; }
  html.js .encart-bloc { background: var(--encart-fond); border-color: var(--encart-filet); }
  html.js :is(.disque, .trame, .facture .illustration, .h2, .h3):not(.en-place) { opacity: var(--opacite, 1); transform: var(--pose, none); transition: none; }
  html.js .decale:not(.en-place)::before, html.js .scene:not(.en-place)::after { opacity: 1; transform: none; transition: none; }
  html.js .mosaique:not(.en-place)::after { opacity: 1; transform: translate(12px, 12px); transition: none; }
  html.js .surligne .marqueur { transform: rotate(-1.5deg) scaleX(1); transition: none; }
}
/* Ouverture de l'encart en mode « automatique » (page trop courte pour la plage de défilement) : passage en 500 ms, jamais d'état à mi-chemin stable */
.encart-bloc.auto .encart-fond { transition: transform .5s cubic-bezier(.33, 1, .68, 1); }
.encart-bloc.auto .encart-fond::after { transition: opacity .5s linear; }