:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fond: #0c0b10;
  --texte: #f4f1f3;
  --lilas: #dcb8ec;
  --lilas-vif: #c99be0;
  --violet: #774b86;
  --trait: #e9d9ed;
  background: var(--fond);
  color: var(--texte);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Défilement bloqué sur html SEULEMENT : sur body aussi, body deviendrait un
   conteneur de défilement et la scène sticky se recalerait sur lui (écran noir
   constaté à l'ouverture d'une fiche). */
html.fiche-ouverte { overflow: hidden; }
body { margin: 0; min-width: 320px; background: var(--fond); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid #dbb4ff; outline-offset: 4px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; flex: none; }
.viewport-probe { position: fixed; top: 0; left: 0; width: 0; height: 100vh; height: 100lvh; visibility: hidden; pointer-events: none; }
.eyebrow { margin: 0 0 14px; color: var(--lilas); font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }

.site-header { position: fixed; z-index: 20; inset: 0 0 auto; height: 72px; padding: 0 clamp(20px, 4vw, 68px); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(#0b0a0ed8, transparent); }
.brand { font-size: 20px; font-weight: 760; white-space: nowrap; }
.brand span:first-child { color: #d9c6df; }
.brand-dot { color: #b88bcf; }
.site-header nav { display: flex; gap: clamp(18px, 3vw, 42px); font-size: 13px; font-weight: 620; }
.site-header nav a { opacity: .88; }
.site-header nav a:hover { opacity: 1; }
.in-work .site-header { background: #0c0b10eb; border-bottom: 1px solid #ffffff1c; backdrop-filter: blur(10px); }
.site-header { transition: opacity .25s ease; }
.spot-open .site-header { opacity: 0; pointer-events: none; }

/* ── Visite ──────────────────────────────────────────────────────────────── */
/* 12 s de mouvement + 3 paliers d'arrêt de 1,4 s, à 35 vh par seconde. */
.experience { height: 670vh; position: relative; }
.experience-sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: #0b0a0f; isolation: isolate; }
/* Scène plein écran, sur ordinateur (film 16:9) comme sur téléphone en portrait (film 9:16). */
.scene-bande { position: absolute; inset: 0; overflow: hidden; }
/* Le cadre est déplacé par transform (compositeur) : jamais de repeint des vidéos.
   Son fond est l'affiche du film, visible tant que la première image n'est pas prête. */
.scene-cadre { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; background: #0b0a0f url("./poster.jpg") center / cover no-repeat; }
.tour-video, .loop-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tour-video { z-index: 0; }
/* Film de lecture à 60 i/s (D-152) : au-dessus du film de défilement, sous les boucles ; visible seulement pendant la balade et la visite avec arrêts. */
.lecture-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.lecture-video.active { visibility: visible; }
.loop-layer { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
/* Apparition immédiate (30/09) : la 1re image de la boucle EST l'image de la
   visite (raccord), et une vidéo semi-transparente s'affiche plus claire (+2,7 %
   mesuré pendant l'ancien fondu). Disparition en fondu : la boucle a avancé. */
.loop-layer.visible { opacity: 1; visibility: visible; transition: none; }
.loop-video { z-index: 1; }
.film-shade { z-index: 2; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #09090dc4 0%, #09090d3a 46%, transparent 78%), linear-gradient(0deg, #08080bd6, transparent 38%); transition: opacity .35s ease; }
/* Le voile reste en place quand un poste s'ouvre (30/09) : le retirer éclaircissait
   tout le décor de 24 % d'un coup, puis l'assombrissait à la fermeture. */
/* Voile plus dense de l'accueil (titre sur le décor) : un calque qui fond, au lieu
   d'un dégradé remplacé d'un coup au lancement de la visite. */
.film-shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #09090d66 0%, #09090d59 42%, transparent 74%), linear-gradient(0deg, #08080b33, transparent 42%); opacity: 0; transition: opacity .6s ease; }
.experience-sticky:has(.stage-copy[data-etat="entree"]) .film-shade::after { opacity: 1; }

.stage-copy { position: absolute; z-index: 3; left: clamp(20px, 4vw, 68px); bottom: clamp(118px, 15vh, 170px); max-width: min(600px, 62vw); transition: opacity .25s ease, transform .25s ease; }
.spot-open .stage-copy { opacity: 0; transform: translateY(12px); pointer-events: none; }
.etape-badge { display: inline-flex; align-items: center; margin: 0 0 12px; color: var(--lilas); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: font-size .25s ease, padding .25s ease, background-color .25s ease, color .25s ease; }
.arret-badge { display: none; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 13px; font-weight: 700; color: #f6eefa; }
.arret-point { width: 9px; height: 9px; border-radius: 50%; background: #8ff0b0; box-shadow: 0 0 0 4px #8ff0b033; }
.stage-copy .titre-spot { margin: 0; font-size: clamp(34px, 3.6vw, 58px); font-weight: 680; line-height: 1.04; transition: font-size .25s ease; }
.stage-description { max-width: 38ch; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.42; color: #e9e6eb; margin: 14px 0 24px; }
/* Carton d'arrêt : impossible de le rater. */
.stage-copy[data-etat="arret"] .etape-badge { padding: 7px 13px; border-radius: 3px; background: var(--lilas); color: #1a1220; font-size: 15px; }
.stage-copy[data-etat="arret"] .arret-badge { display: inline-flex; margin-left: 12px; vertical-align: 1px; }
.stage-copy[data-etat="arret"] .titre-spot { font-size: clamp(42px, 4.6vw, 76px); }

/* Entrée de l'atelier : promesse, puis les deux façons de visiter. */
.entree { display: none; }
.stage-copy[data-etat="entree"] .entree { display: block; }
.stage-copy[data-etat="entree"] :is(.etape-badge, .arret-badge, .titre-spot, .stage-description) { display: none; }
.stage-copy[data-etat="fin"] :is(.etape-badge, .arret-badge) { display: none; }
.entree-titre { margin: 0 0 22px; max-width: 22ch; font-size: clamp(28px, 2.7vw, 44px); font-weight: 680; line-height: 1.08; letter-spacing: -.012em; }
.entree-chapeau { max-width: 46ch; margin: 14px 0 22px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.45; color: #e9e6eb; }
.parcours-label { margin: 18px 0 10px; color: var(--lilas); font-size: 12px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.choix-textes { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.choix-detail { font-size: 12px; font-weight: 560; color: #ddd3e2b8; }
.choix-detail[hidden] { display: none; }
.stage-copy:is([data-etat="entree"], [data-etat="fin"]) .play-button { min-height: 58px; }
/* « Retour à l'accueil » et « Recommencer » : même style que les autres boutons de la rangée (02/10, cohérence). */
/* « Voir les projets » : un vrai choix, au même rang que les deux parcours (30/09). */
.stage-actions .choix-projets { display: none; color: #f6f1f7; text-decoration: none; }
.stage-copy:is([data-etat="entree"], [data-etat="fin"]) .stage-actions .choix-projets { display: inline-flex; }

/* Panneau d'une étape (la vitrine) : sorties en tête. */
.vitrine-sorties { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex: none; }
/* Sorties toujours à l'écran (30/09) : la vitrine défile, et « Fermer » partait
   par le haut ; sur iPhone, plus rien n'indiquait comment sortir. Collées en
   haut pendant le défilement, à leur place d'origine au repos (à droite du
   titre : la marge négative remonte l'en-tête sous elles). */
.vitrine-cadre > .vitrine-sorties { position: sticky; top: 0; z-index: 8; width: min(100%, 1180px); margin: 0 0 -50px; padding: env(safe-area-inset-top) 0 0; pointer-events: none; }
.vitrine-cadre > .vitrine-sorties > * { pointer-events: auto; box-shadow: 0 6px 20px #0008; }
.stage-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.primary-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 50px; padding: 0 18px; border: 1px solid var(--trait); border-radius: 3px; background: #ede7ee; color: #151019; font-size: 13.5px; font-weight: 780; }
.primary-button:hover { background: #fff; }
.primary-button.is-away { display: none; }
.play-button { display: inline-flex; align-items: center; gap: 11px; min-height: 50px; padding: 0 18px 0 15px; border: 1px solid #e9d9ed8c; border-radius: 3px; background: #121016b0; color: #f6f1f7; font-size: 13px; font-weight: 720; font-variant-numeric: tabular-nums; }
.play-button:hover { background: #1d1922d8; border-color: var(--trait); }
/* « Voir cette étape » (02/10) : déclaré ici, avant les règles par format d'écran, pour suivre exactement la
   hauteur, l'arrondi et la typographie de « Continuer » et « Retour à l'accueil » ; seul l'accent lilas le distingue. */
.voir-etape { display: inline-flex; align-items: center; gap: 11px; min-height: 50px; padding: 0 18px 0 15px; border: 1px solid var(--lilas); border-radius: 3px; background: #1d1624e6; color: #f6eefa; font-size: 13px; font-weight: 720; }
@media (hover: hover) { .voir-etape:hover { background: #2a2131; } }
.play-button[data-etat="chargement"] { color: #f6f1f7cc; }
.play-button[data-etat="chargement"] .icon { animation: tourner 1s linear infinite; }
.play-button[data-etat="lecture"] { border-color: var(--lilas); }
@keyframes tourner { to { transform: rotate(1turn); } }
.tour-hint { margin: 16px 0 0; max-width: 44ch; font-size: 12.5px; line-height: 1.45; color: #e2dce4b8; }
.tour-error { margin: 16px 0 0; max-width: 42ch; font-size: 13px; line-height: 1.45; color: #ffd9dc; }
.tour-error button { margin-left: 6px; padding: 4px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; font-weight: 700; }

/* ── Frise de visite ─────────────────────────────────────────────────────── */
.frise { position: absolute; z-index: 5; left: clamp(20px, 4vw, 68px); right: clamp(20px, 4vw, 68px); bottom: 26px; height: 64px; transition: opacity .25s ease; }
.spot-open .frise { opacity: 0; pointer-events: none; }
.frise-piste { position: absolute; left: 0; right: 0; bottom: 14px; height: 36px; cursor: pointer; touch-action: none; }
.frise-rail { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: #ffffff2e; overflow: hidden; }
.frise-charge, .frise-rempli { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); }
.frise-charge { background: #ffffff2a; transition: transform .2s linear; }
.frise-rempli { background: linear-gradient(90deg, #a877c2, var(--lilas)); }
.frise-etape { position: absolute; left: var(--x); top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; padding: 0; border: 0; background: transparent; color: #f3ecf6b8; }
.frise-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e3d2ea88; background: #141119d9; font-size: 11px; font-weight: 800; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.frise-nom { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.frise-etape.passee .frise-num { border-color: var(--lilas); color: var(--lilas); }
.frise-etape.active { color: #fff; }
.frise-etape.active .frise-num { background: var(--violet); border-color: #f0dcf8; color: #fff; transform: scale(1.12); }
.frise-etape:hover .frise-num { border-color: #fff; }
.frise-curseur { position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px #dcb8ec40, 0 2px 10px #0008; cursor: grab; will-change: transform; touch-action: none; z-index: 2; }
.frise-curseur:active { cursor: grabbing; }

/* ── Vitrine d'un spot ───────────────────────────────────────────────────── */
/* overflow-x masqué : les cartes voisines de l'anneau dépassent volontairement les bords (constaté : défilement horizontal parasite sur mobile). */
.vitrine { position: fixed; inset: 0; z-index: 40; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .35s ease; }
.vitrine.est-ouverte { opacity: 1; }
.vitrine.se-ferme { opacity: 0; pointer-events: none; }
.vitrine-voile { position: fixed; inset: 0; background: radial-gradient(ellipse 70% 62% at 50% 46%, #0b0a0f55 0%, #0b0a0fb8 64%, #0b0a0fe8 100%); pointer-events: none; }
.vitrine-cadre { --carte-l: min(58vw, 1000px, max(300px, calc((100dvh - 430px) * 1.7778))); position: relative; overflow-x: clip; min-height: 100%; display: flex; flex-direction: column; align-items: center; padding: 26px clamp(18px, 4vw, 60px) 30px; }
.vitrine-tete { width: min(100%, 1180px); display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.vitrine-tete h2 { margin: 0; font-size: clamp(26px, 2.4vw, 38px); font-weight: 680; line-height: 1.08; }
.vitrine-tete .eyebrow { margin-bottom: 8px; }
.vitrine-intro { margin: 8px 0 0; max-width: 70ch; font-size: 14px; line-height: 1.45; color: #ddd5e0; }
/* Sorties du panneau (02/10) : « Agrandir » et « Fermer », même forme, même hauteur, même typographie ;
   « Agrandir » porte l'accent lilas du site, « Fermer » reste neutre. */
.vitrine-fermer, .vitrine-agrandir { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid #e9d9ed66; border-radius: 3px; background: #15121acc; color: #f3edf5; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; }
.vitrine-fermer span { font-size: 22px; line-height: 1; }
@media (hover: hover) { .vitrine-fermer:hover { border-color: var(--trait); } }
.vitrine-agrandir { border-color: var(--lilas); background: #1d1624e6; color: var(--lilas); }
@media (hover: hover) { .vitrine-agrandir:hover { background: #2a2033; color: #f1e2f8; } }
.vitrine-agrandir .icon { width: 17px; height: 17px; }
.vitrine-agrandir .agrandir-reduire, .vitrine-agrandir[aria-pressed="true"] .agrandir-ouvrir { display: none; }
.vitrine-agrandir[aria-pressed="true"] .agrandir-reduire { display: inline; }
/* « Ouvrir en grand » d'une réalisation (vitrine.js) : le panneau est déjà plein écran, un seul bouton d'agrandissement. */
.vitrine.en-grand .vitrine-agrandir { display: none; }

.anneau { --zone-h: calc(var(--carte-l) * .5625); --anneau-marge: 56px; position: relative; width: 100%; height: calc(var(--carte-l) * .5625 + 56px); margin-top: 18px; perspective: 1500px; perspective-origin: 50% 45%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.anneau.glisse { cursor: grabbing; }
/* Place donnée à la carte de face (29/09) : vitrine.js y calcule la forme
   exacte du média affiché (plein cadre, aucune bande). Invisible. */
.anneau-gabarit { position: absolute; left: 0; top: 0; width: var(--carte-l); height: var(--zone-h); visibility: hidden; pointer-events: none; }
.anneau-scene { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.carte { position: absolute; left: calc(var(--carte-l) / -2); top: calc(var(--carte-l) * -.28125); width: var(--carte-l); aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #141118; border: 1px solid #ffffff1c; box-shadow: 0 30px 80px #000a, 0 0 0 1px #0006; will-change: transform, opacity; backface-visibility: hidden; cursor: pointer; }
.carte.est-face { cursor: default; border-color: #e9d9ed40; }
.carte-voile { position: absolute; inset: 0; z-index: 9; background: #0b0a10; pointer-events: none; }
.carte-affiche, .carte-canvas, .site-vue img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-source { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.carte-canvas { opacity: 0; transition: opacity .45s ease; }
.carte:is(.media-pret, .apercu-pret) .carte-canvas { opacity: 1; }
.carte-chargement { position: absolute; left: 18%; right: 18%; bottom: 18px; z-index: 6; height: 3px; border-radius: 2px; background: #ffffff30; overflow: hidden; opacity: 0; transition: opacity .3s ease; }
.carte.est-active:not(.media-pret):not(.media-erreur) .carte-chargement { opacity: 1; }
.carte-chargement-barre { display: block; height: 100%; background: var(--lilas); transform-origin: 0 50%; transform: scaleX(0); transition: transform .15s linear; }
.etiquette { position: absolute; top: 14px; z-index: 5; padding: 6px 10px; border-radius: 3px; background: #0d0b11c7; color: #f7f0fa; font-size: 12px; font-weight: 750; letter-spacing: .03em; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.etiquette-avant { left: 14px; }
.carte .etiquette { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etiquette-apres { right: 14px; }
.carte.est-active:is(.media-pret, .apercu-pret) .etiquette { opacity: 1; }
/* Ligne « Avant/Après » (28/09) : une bande de 44 px centrée sur la ligne,
   sur toute la hauteur de l'image (posée par vitrine.js), se saisit au doigt
   comme à la souris. touch-action: pan-y et non none : un doigt qui part à
   la verticale sur la ligne fait toujours défiler la page (jamais bloquée),
   un doigt qui part à l'horizontale déplace la ligne. */
.balayeur { position: absolute; top: 0; left: 0; z-index: 6; width: 44px; height: 100%; margin-left: -22px; opacity: 0; transition: opacity .3s ease; touch-action: pan-y; cursor: ew-resize; }
.balayeur[hidden], .carte:not(.est-face) .balayeur { display: none; }
.carte.est-active:is(.media-pret, .apercu-pret) .balayeur { opacity: 1; }
.balayeur-ligne { position: absolute; top: 0; bottom: 0; left: 21px; width: 2px; background: #fff; box-shadow: 0 0 12px #000a; }
.balayeur-poignee { position: absolute; top: 50%; left: 0; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: #ffffffe6; box-shadow: 0 4px 18px #0009; }
.balayeur-poignee::before, .balayeur-poignee::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-left: 2px solid #1b1420; border-bottom: 2px solid #1b1420; }
.balayeur-poignee::before { left: 12px; transform: rotate(45deg); }
.balayeur-poignee::after { right: 12px; transform: rotate(-135deg); }
.balayeur:focus-visible { outline: none; }
.balayeur:focus-visible .balayeur-poignee { outline: 2px solid #dbb4ff; outline-offset: 3px; }

.carte-site { display: flex; flex-direction: column; background: #f4f2f3; }
.navigateur { flex: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; background: #1b1820; border-bottom: 1px solid #ffffff14; overflow-x: auto; scrollbar-width: none; }
.navigateur-points { flex: none; width: 42px; height: 10px; margin-right: 6px; background: radial-gradient(circle at 5px 5px, #ff6b6b 4px, transparent 4.5px), radial-gradient(circle at 21px 5px, #f5c451 4px, transparent 4.5px), radial-gradient(circle at 37px 5px, #58c96d 4px, transparent 4.5px); }
.onglet { flex: none; min-height: 30px; padding: 0 11px; border: 0; border-radius: 3px; background: transparent; color: #cfc6d4; font-size: 12px; font-weight: 700; white-space: nowrap; }
.onglet[aria-selected="true"] { background: #ffffff1c; color: #fff; }
/* Scène 3D (Orchestrator) : bandeau sobre, sans les trois points d'un navigateur. */
.navigateur-scene { background: #121016; }
.carte-scene { background: #121016; }
.carte:not(.est-face) .navigateur { pointer-events: none; }
/* Démonstrations (28/09) : chaque image est posée par vitrine.js à son cadre
   calculé, au ratio exact du fichier 1600 × 1000 : jamais rognée, jamais
   agrandie au delà de la zone (plus d'object-fit: cover). */
.site-vue { position: relative; flex: 1; overflow: hidden; background: #121016; }
.site-vue .carte-affiche { object-fit: contain; }
.site-vue .site-apres, .site-vue .site-avant { inset: auto; object-fit: contain; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.carte-site.media-pret .site-vue img.montre { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }

/* Site créé, rendu final (poste 02, 27/09 soir) : fenêtre de navigateur et
   téléphone qui la chevauche en bas à droite. Toutes les mesures sont relatives
   à la carte (unités cq) : chaque vue reste DANS la carte, jamais sur les
   commandes. Vues : data-vue = deux (défaut), ordinateur, telephone. */
.carte-rendu { container-type: size; background: radial-gradient(ellipse at 72% 18%, #2a1f33 0%, #121016 64%); }
.rendu-scene { position: absolute; inset: 0; overflow: hidden; }
.rendu-fenetre { position: absolute; left: 3cqw; top: 9cqh; width: 72cqw; border-radius: max(6px, .9cqw); overflow: hidden; background: #111; box-shadow: 0 2cqw 5cqw #000a; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; }
.rendu-barre { display: flex; align-items: center; gap: 1.2cqw; height: 5.4cqh; min-height: 18px; margin: 0; padding: 0 1.2cqw; background: #1d1a24; color: #b9aebf; font-size: clamp(9px, 1.1cqw, 13px); white-space: nowrap; }
.rendu-points { display: flex; gap: .6cqw; flex: none; }
.rendu-points i { width: max(6px, .8cqw); aspect-ratio: 1; border-radius: 50%; background: #ff5f57; }
.rendu-points i:nth-child(2) { background: #febc2e; }
.rendu-points i:nth-child(3) { background: #28c840; }
.rendu-titre { overflow: hidden; text-overflow: ellipsis; }
.rendu-ecran { position: relative; overflow: hidden; aspect-ratio: 1440 / 900; background: #07060a; }
.rendu-affiche, .rendu-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* Jamais une cible du toucher (28/09) : sur iPhone, un doigt posé sur une
   vidéo peut ne pas faire défiler la vitrine (carte bloquée, retour de Loan). */
.rendu-affiche, .rendu-video { pointer-events: none; }
.rendu-video { opacity: 0; transition: opacity .35s ease; }
.carte-rendu.video-lue .rendu-video { opacity: 1; }
.rendu-telephone { position: absolute; right: 7cqw; bottom: 4cqh; height: 84cqh; padding: 1.2cqh; border-radius: 6cqh; background: #0a0a0d; box-shadow: 0 0 0 2px #2c2833, 0 2cqw 5cqw #000b; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; }
.rendu-telephone .rendu-ecran { height: 100%; aspect-ratio: 786 / 1704; border-radius: 4.8cqh; }
.rendu-badge { position: absolute; left: 3cqw; top: 2cqh; z-index: 4; padding: .35em .9em; border: 1px solid #d8b56a; border-radius: 99px; background: #120f16d9; color: #f0d493; font-size: clamp(9.5px, 1.15cqw, 13px); font-weight: 650; white-space: nowrap; }
.carte-rendu.est-active.rendu-charge .carte-chargement { opacity: 1; }
/* Fenêtre et téléphone posés par vitrine.js (placerRendu, 29/09) : la carte
   prend la forme de ce qui est montré ; l'autre élément s'efface. */
.carte-rendu[data-vue="ordinateur"] .rendu-telephone { opacity: 0; pointer-events: none; }
.carte-rendu[data-vue="telephone"] .rendu-fenetre { opacity: 0; pointer-events: none; }
.carte-rendu[data-vue="telephone"] { background: #0a0a0d; }

.carte-processus { display: flex; flex-direction: column; justify-content: center; padding: clamp(18px, 3vw, 38px); background: radial-gradient(ellipse at 50% 0%, #2a1d33 0%, #141118 70%); }
.processus-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 clamp(14px, 2.2vw, 26px); }
.processus-titre { margin: 0; color: var(--lilas); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.processus-exemple { margin: 0; padding: 3px 8px; border-radius: 4px; background: #f2d4791a; border: 1px solid #f2d47966; color: #f6e4a8; font-size: 11px; font-weight: 700; white-space: nowrap; }
/* Progression pilotée par vitrine.js (--progression, de 0 à 1) : la ligne se
   remplit jusqu'à l'étape courante, le point lumineux la suit (27/09). */
.processus-flux { position: relative; height: 2px; margin: 0 calc(50% / var(--etapes)); background: #6d4b7c55; }
.processus-piste { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--progression, 0) * 100%); background: linear-gradient(90deg, #8f63a3, #f1dcf9); transition: width .5s ease; }
.processus-impulsion { position: absolute; left: 100%; top: -4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px #dcb8ecaa; }
.processus-etapes { display: grid; grid-template-columns: repeat(var(--etapes), minmax(0, 1fr)); gap: clamp(6px, 1vw, 14px); margin: -16px 0 0; padding: 0; list-style: none; }
.processus-etape { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.processus-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #dcb8ec77; background: #18131d; color: var(--lilas); font-size: 11px; font-weight: 800; transition: background .3s, color .3s, box-shadow .3s; }
.processus-etape.est-faite .processus-num { background: #3a2a44; color: #f1dcf9; border-color: #b88bcf88; }
.processus-etape.est-courante .processus-num { background: var(--violet); color: #fff; border-color: #f1dcf9; box-shadow: 0 0 18px #c99be077; }
.processus-etape.etape-humaine .processus-num { border-style: dashed; border-color: #f2d479; }
.processus-etape strong { font-size: clamp(11.5px, 1.05vw, 14px); line-height: 1.2; color: #d9cfdd; }
.processus-etape.est-courante strong { color: #fff; }
/* L'explication de l'étape courante et ce qu'elle produit : dans le journal. */
.processus-texte { display: none; }
.processus-journal { margin-top: clamp(16px, 2.4vw, 28px); padding: 12px 16px; min-height: 96px; border-radius: 6px; background: #0e0c12cc; border: 1px solid #ffffff17; }
.journal-etape { margin: 0 0 4px; color: var(--lilas); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.journal-texte { margin: 0 0 6px; color: #f3eef5; font-size: 14px; line-height: 1.35; }
.journal-sortie { margin: 0; color: #9fe0b6; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
.journal-sortie::before { content: "→ "; }
.journal-humain { display: none; margin: 8px 0 0; color: #f2d479; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.processus-journal.humain .journal-humain { display: block; }

/* ── Automatisations animées, poste 03 (27/09) ────────────────────────────────
   Déclencheur, jeton de données qui circule d'étape en étape, journal
   d'exécution qui défile, carte de résultat propre à chaque catégorie.
   Couleur propre à chaque système : --accent (realisations.js). Tailles en
   unités de conteneur (cqw) : la carte se lit pareil, petite ou en grand. */
.vitrine-mention { margin: 10px 0 0; max-width: 88ch; padding: 8px 12px; border-left: 3px solid #f2d479; border-radius: 3px; background: #f2d47914; color: #f6ecc8; font-size: 12.5px; line-height: 1.45; }
.vitrine-mention[hidden] { display: none; }
.carte-processus { --accent: var(--lilas); container-type: inline-size; justify-content: center; padding: clamp(12px, 2.2vw, 30px) clamp(14px, 2.6vw, 34px); }
.processus-tete { align-items: flex-start; margin-bottom: 0; }
.processus-titres { display: grid; gap: 3px; min-width: 0; }
.processus-titre { color: var(--accent); font-size: clamp(10.5px, 2.1cqw, 13px); }
.processus-declencheur { margin: 0; color: #d9cfdd; font-size: clamp(10.5px, 2cqw, 13px); line-height: 1.3; }
.declencheur-libelle { display: inline-block; margin-right: 4px; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); font-size: .86em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.processus-exemple { font-size: clamp(9.5px, 1.8cqw, 11px); }
.processus-flux { margin-top: clamp(26px, 5.4cqw, 40px); }
.processus-piste { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, #1a1520), var(--accent)); }
.processus-impulsion { box-shadow: 0 0 14px 4px color-mix(in srgb, var(--accent) 70%, transparent); }
.processus-jeton { position: absolute; left: calc(var(--progression, 0) * 100%); bottom: 9px; transform: translateX(-50%); max-width: 26cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 24%, #120f16); color: #fff; font-size: clamp(9.5px, 1.9cqw, 12px); font-weight: 750; transition: left .5s ease; }
.processus-etape strong { font-size: clamp(9.5px, 2cqw, 14px); }
.processus-num { width: clamp(24px, 5.2cqw, 32px); height: clamp(24px, 5.2cqw, 32px); }
.processus-etape.est-faite .processus-num { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.processus-etape.est-courante .processus-num { background: var(--accent); color: #16121a; border-color: #fff; box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent); }
.processus-donnee-etape { display: none; }
.processus-bas { flex: none; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(8px, 1.8cqw, 16px); margin-top: clamp(10px, 2.4cqw, 22px); }
.processus-bas .processus-journal { margin: 0; min-height: 0; overflow: hidden; padding: clamp(7px, 1.6cqw, 14px) clamp(9px, 2cqw, 16px); }
.journal-etape { font-size: clamp(10px, 2cqw, 12px); }
.journal-texte { font-size: clamp(11px, 2.3cqw, 14px); margin-bottom: 4px; }
.journal-lignes { margin: 0; padding: 0; list-style: none; color: #9d93a3; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(9.5px, 1.9cqw, 12px); line-height: 1.45; }
.journal-lignes li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: journal-monte .45s ease both; }
.journal-lignes li::before { content: "✓ "; color: color-mix(in srgb, var(--accent) 80%, #fff); }
.journal-sortie { font-size: clamp(10px, 2cqw, 12.5px); line-height: 1.45; color: #9fe0b6; }
.journal-sortie::before { content: "▸ "; color: var(--accent); }
.journal-ligne { display: inline; animation: journal-monte .45s ease both; }
.journal-heure { color: #7e7486; margin-right: 2px; }
@keyframes journal-monte { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.processus-resultat { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: clamp(6px, 1.5cqw, 12px) clamp(8px, 1.8cqw, 14px); border-radius: 6px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: #0e0c12e0; color: #efe8f2; font-size: clamp(9.5px, 1.9cqw, 12.5px); line-height: 1.35; opacity: .5; transition: opacity .45s ease, box-shadow .45s ease; }
.processus-resultat.est-pret { opacity: 1; box-shadow: 0 0 0 1px var(--accent), 0 0 26px color-mix(in srgb, var(--accent) 30%, transparent); }
.resultat-etat { margin: 0 0 5px; color: var(--accent); font-size: .82em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.resultat-etat-pret, .processus-resultat.est-pret .resultat-etat-attente { display: none; }
.processus-resultat.est-pret .resultat-etat-pret { display: inline; }
.resultat-corps { display: grid; gap: 5px; min-height: 0; }
.resultat-corps p { margin: 0; }
.resultat-pastilles { display: flex; flex-wrap: wrap; gap: 4px; }
.pastille-ok { padding: 1px 6px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); font-size: .88em; font-weight: 700; white-space: nowrap; }
/* E-mail : en-tête, extrait, contrôles, compteur. */
.resultat-email { display: grid; gap: 1px; margin: 0; }
.resultat-email div { display: flex; gap: 6px; min-width: 0; }
.resultat-email dt { flex: none; width: 3.6em; color: #9d93a3; }
.resultat-email dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.resultat-extrait { color: #cfc6d4; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultat-compteur { color: var(--accent); font-weight: 800; }
/* Page : vignette de la page publiée. */
.resultat-page { border-radius: 4px; overflow: hidden; border: 1px solid #ffffff22; background: #f6f1ea; color: #2a2118; }
.resultat-adresse { padding: 2px 6px; background: #1b1820; color: #cfc6d4; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultat-heros { display: grid; justify-items: start; gap: 2px; padding: 6px 8px 7px; background: linear-gradient(120deg, #3b2a1d 0%, #7a5534 55%, #c39461 100%); color: #fff7ee; }
.resultat-heros b { font-size: 1.12em; }
.resultat-heros span { font-size: .9em; opacity: .9; }
.resultat-bouton { margin-top: 2px; padding: 1px 7px; border-radius: 99px; background: #fff7ee; color: #3b2a1d; font-weight: 800; opacity: 1 !important; }
.resultat-mention { padding: 2px 6px; font-size: .78em; color: #6b5a4a; }
/* Vidéo : illustration, volumes gris et trajectoire, puis rendu éclairé. */
.resultat-video { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.resultat-volet { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; }
.video-avant { background: linear-gradient(#6b6870, #4b4950); }
.video-avant .volet-forme { position: absolute; inset: 0; background:
  linear-gradient(#8d8a93, #8d8a93) 58% 72% / 16% 30% no-repeat,
  linear-gradient(#a3a0a8, #a3a0a8) 30% 80% / 22% 18% no-repeat,
  radial-gradient(circle at 12% 30%, transparent 52%, #f5b36b 54%, #f5b36b 60%, transparent 62%) 0 0 / 100% 100% no-repeat; }
.video-apres { background: radial-gradient(ellipse at 70% 20%, #ffd9a1 0%, #d98a4e 30%, #5d2f35 70%, #1e1420 100%); }
.video-apres .volet-forme { position: absolute; inset: 0; background: linear-gradient(#ffe7c455, #ffe7c455) 58% 72% / 16% 30% no-repeat, radial-gradient(ellipse at 58% 60%, #fff2d8aa 0%, transparent 35%); }
.volet-libelle { position: absolute; left: 4px; bottom: 3px; padding: 0 4px; border-radius: 2px; background: #0d0b11c7; font-size: .8em; font-weight: 750; }
.resultat-note { color: #9d93a3; font-size: .85em; }
/* Telegram : bulle de message et boutons. */
.resultat-bulle { justify-self: start; max-width: 100%; padding: 5px 8px; border-radius: 10px 10px 10px 2px; background: #1e2c3a; border: 1px solid #6cc4f533; }
.bulle-auteur { color: var(--accent); font-size: .85em; font-weight: 800; }
.bulle-boutons { display: flex; gap: 4px; }
.bulle-boutons span { flex: 1 1 0; padding: 2px 4px; border-radius: 5px; background: #1e2c3a; border: 1px solid #6cc4f555; text-align: center; font-weight: 700; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Vivier : jauge d'autonomie, seuils 10 et 14 jours. */
.resultat-autonomie { font-size: 1.05em; }
.resultat-autonomie span { color: #9d93a3; }
.resultat-autonomie b { color: var(--accent); font-size: 1.25em; }
.resultat-jauge { position: relative; height: 9px; margin: 2px 0 14px; border-radius: 99px; background: #ffffff14; }
.jauge-rempli { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--apres) * 100%); border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, #1a1520), var(--accent)); transition: width 1s ease; }
.processus-resultat:not(.est-pret) .jauge-rempli { width: calc(var(--avant) * 100%); }
.jauge-avant { position: absolute; top: -3px; bottom: -3px; left: calc(var(--avant) * 100%); width: 2px; background: #fff; }
.jauge-seuil { position: absolute; top: 11px; left: calc(var(--x) * 100%); transform: translateX(-50%); color: #9d93a3; font-size: .78em; }
.jauge-seuil::before { content: ""; position: absolute; left: 50%; top: -13px; width: 1px; height: 11px; background: #ffffff55; }
/* Sur ordinateur, la carte d'automatisation est un peu plus haute que 16:9 :
   étapes, journal et résultat y tiennent sans être tassés. */
@media not all and (max-aspect-ratio: 4/5) {
  /* Plus haute que 16:9 seulement là où le contenu en a besoin (petites cartes). */
  /* v2 (27/09) : la scène de résultat a besoin de hauteur ; sur un petit écran
     d'ordinateur, carte d'au moins 560 px de large et jusqu'à 420 px de haut,
     bornée par la hauteur d'écran pour que les flèches restent visibles sans
     défiler (1280×720 : 560 × 396 px). */
  .vitrine-cadre:has(.anneau[data-type="processus"]) { --carte-l: min(58vw, 1000px, max(560px, calc((100dvh - 430px) * 1.7778))); }
  .anneau[data-type="processus"] { --carte-hp: clamp(calc(var(--carte-l) * .5625), min(420px, calc(100dvh - 324px)), calc(var(--carte-l) * .76)); height: calc(var(--carte-hp) + 16px); }
  .anneau[data-type="processus"] .carte { aspect-ratio: auto; height: var(--carte-hp); top: calc(var(--carte-hp) / -2); }
  .vitrine.en-grand .vitrine-cadre:has(.anneau[data-type="processus"]) { --carte-l: min(94vw, calc((100dvh - 150px) * 1.47)); }
}

/* ── Automatisations v2 (27/09, demande de Loan) ─────────────────────────────
   Rythme lent (environ 4,5 s par étape, minuteur de vitrine.js), quatre
   phases visibles sous les étapes, barre de progression par étape, étapes
   cliquables, pause au survol et au doigt posé, scène de résultat concrète
   qui se construit au fil des étapes (data-des / data-jusqua, classe .vu). */
.carte-processus { justify-content: flex-start; }
/* Jeton : collé à gauche de sa pastille au départ, à droite à l'arrivée,
   centré entre les deux ; il ne sort jamais de la carte. */
.processus-jeton { transform: translateX(calc(var(--progression, 0) * -100%)); }
.carte-processus.saut :is(.processus-jeton, .processus-piste, .processus-barre-rempli) { transition: none; }
.processus-choix { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.processus-choix:focus-visible { outline: none; }
.processus-choix:focus-visible .processus-num { outline: 2px solid #fff; outline-offset: 2px; }
.processus-choix:hover .processus-num { border-color: var(--accent); }
.carte:not(.est-face) .processus-choix { pointer-events: none; }
.processus-barre { display: block; width: min(100%, 72px); height: 3px; margin-top: 5px; border-radius: 99px; background: #ffffff1a; overflow: hidden; }
.processus-barre-rempli { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--rempli, 0)); transition: transform .12s linear; }
.processus-etape.est-faite .processus-barre-rempli { background: color-mix(in srgb, var(--accent) 55%, #3a3140); }
.processus-phases { display: grid; grid-template-columns: repeat(var(--etapes), minmax(0, 1fr)); gap: clamp(6px, 1vw, 14px); margin-top: clamp(6px, 1.4cqw, 12px); }
.processus-phase { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: flex-start; gap: 3px; min-width: 0; padding-top: 5px; border-top: 2px solid #ffffff22; color: #8a8090; font-size: clamp(9px, 1.6cqw, 12px); font-weight: 750; line-height: 1.2; transition: color .4s, border-color .4s; }
.phase-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; border: 1px solid currentColor; font-size: .9em; font-weight: 800; }
.phase-nom { min-width: 0; max-width: 100%; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; padding-top: .1em; }
/* Carte étroite (petit écran d'ordinateur) : le nom de phase seul, sans numéro. */
@container (min-width: 420px) and (max-width: 640px) { .phase-num { display: none; } .processus-phase { font-size: 9.5px; } .processus-tete { flex-wrap: wrap; row-gap: 4px; } .processus-exemple { white-space: normal; } .processus-titres { flex: 1 1 100%; } }
.processus-phase.est-faite { color: #cfc6d4; border-top-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.processus-phase.est-courante { color: var(--accent); border-top-color: var(--accent); }
.processus-bas { flex: 1 1 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: minmax(0, 1fr); }
.processus-bas .processus-journal { position: relative; }
.journal-phase { margin: 0 0 3px; color: var(--accent); font-size: clamp(8.5px, 1.6cqw, 11px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.journal-pause { display: none; position: absolute; top: 7px; right: 8px; margin: 0; padding: 1px 8px; border-radius: 99px; border: 1px solid #ffffff2e; background: #231d29; color: #d9cfdd; font-size: clamp(8.5px, 1.5cqw, 10.5px); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.carte.est-active.en-pause .journal-pause { display: block; }
.carte.est-active.en-pause .journal-phase { padding-right: 76px; }
.carte.est-active.en-pause .processus-etape.est-courante .processus-barre-rempli { opacity: .55; }
.journal-texte { transition: opacity .35s; }
.processus-resultat { opacity: 1; }
.processus-resultat .resultat-corps { flex: 1 1 0; min-height: 0; }
.processus-resultat :is([data-des], [data-jusqua]) { transition: opacity .5s ease; }
.processus-resultat :is([data-des], [data-jusqua]):not(.vu) { opacity: 0; fill-opacity: 0; pointer-events: none; }
.processus-resultat .remplace:not(.vu) { display: none; }

/* E-mail : le brouillon contrôlé, l'envoi, puis la boîte de réception. */
.sorte-email .resultat-corps { display: flex; flex-direction: column; gap: 6px; }
.email-brouillon { display: grid; gap: 5px; align-content: start; padding: 8px 10px; border-radius: 6px; background: #ffffff08; border: 1px solid #ffffff14; }
.email-envol { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 800; }
.email-envol-barre { position: relative; flex: 1; height: 3px; border-radius: 99px; background: #ffffff1a; overflow: hidden; }
.email-envol-barre::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; border-radius: 99px; background: var(--accent); animation: email-envol 1.3s ease-in-out infinite; }
@keyframes email-envol { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.boite-reception { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; background: #f7f5fa; color: #1e1a24; box-shadow: 0 10px 26px #0007; }
.boite-barre { flex: none; display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 5px 9px; background: #e9e4f0; font-size: .92em; }
.boite-barre span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6a6272; }
.boite-liste { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.boite-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding: 3px 9px; border-top: 1px solid #e3dfe8; }
.boite-de, .boite-objet, .boite-extrait { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boite-de { font-weight: 650; }
.boite-heure { color: #7b7383; font-size: .86em; }
.boite-objet { grid-column: 1 / -1; color: #3b3542; }
.boite-extrait { grid-column: 1 / -1; color: #6a6272; font-size: .9em; }
/* Messages plus anciens : une seule ligne (expéditeur, objet, heure). */
.boite-liste li:not(.boite-nouveau) { grid-template-columns: auto minmax(0, 1fr) auto; color: #6a6272; }
.boite-liste li:not(.boite-nouveau) .boite-de { grid-column: 1; grid-row: 1; }
.boite-liste li:not(.boite-nouveau) .boite-objet { grid-column: 2; grid-row: 1; color: #6a6272; }
.boite-liste li:not(.boite-nouveau) .boite-heure { grid-column: 3; grid-row: 1; }
.boite-nouveau { background: color-mix(in srgb, var(--accent) 24%, #fff); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 70%, #3a2360); }
.boite-nouveau .boite-de, .boite-nouveau .boite-objet { font-weight: 800; color: #1e1a24; }
.boite-reception.vu .boite-nouveau { animation: boite-arrive .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes boite-arrive { from { transform: translateY(-12px); opacity: 0; } }
.email-compte { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; }
.email-jour { color: #fff; font-weight: 800; }

/* Page : le dossier de photos, la page assemblée, le contrôle, la mise en ligne. */
.sorte-page .resultat-corps { display: flex; flex-direction: column; gap: 6px; }
.page-vignette { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; border: 1px solid #ffffff22; background: #2a2530; box-shadow: 0 10px 26px #0007; }
.page-barre { flex: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 3px 7px; background: #1b1820; color: #cfc6d4; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .86em; }
.page-points { flex: none; width: 24px; height: 7px; background: radial-gradient(circle at 3.5px 3.5px, #ff6b6b 3px, transparent 3.5px), radial-gradient(circle at 12px 3.5px, #f5c451 3px, transparent 3.5px), radial-gradient(circle at 20.5px 3.5px, #58c96d 3px, transparent 3.5px); }
.page-adresse { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-en-ligne { flex: none; padding: 0 7px; border-radius: 99px; background: var(--accent); color: #0f1a12; font-family: system-ui, sans-serif; font-weight: 800; }
.page-ecran { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.page-dossier { position: absolute; inset: 6px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 5px; }
.page-photo { border-radius: 3px; background: linear-gradient(135deg, #e3c9a6, #a77c52); }
.page-photo:nth-child(2n) { background: linear-gradient(160deg, #c7a47c, #6d4a2e); }
.page-photo:nth-child(3n) { background: linear-gradient(120deg, #f0dcc0, #b88a5c); }
.page-dossier.vu .page-photo { animation: photo-pose .45s ease both; }
.page-dossier.vu .page-photo:nth-child(2) { animation-delay: .12s; }
.page-dossier.vu .page-photo:nth-child(3) { animation-delay: .24s; }
.page-dossier.vu .page-photo:nth-child(4) { animation-delay: .36s; }
.page-dossier.vu .page-photo:nth-child(5) { animation-delay: .48s; }
.page-dossier.vu .page-photo:nth-child(6) { animation-delay: .6s; }
@keyframes photo-pose { from { transform: scale(.7); opacity: 0; } }
.page-maquette, .page-capture { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-capture { object-fit: cover; object-position: 50% 0; }
.page-maquette { display: flex; flex-direction: column; background: #f6f1ea; color: #2a2118; }
.maquette-nav { flex: none; display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 3px 8px; font-size: .82em; }
.maquette-liens { width: 38%; height: 4px; background: repeating-linear-gradient(90deg, #6b5a4a 0 20%, transparent 20% 28%); opacity: .55; }
.page-maquette .resultat-heros { flex: 1 1 auto; align-content: center; padding: 6px 10px; }
.page-maquette .resultat-heros b { font-size: 1.25em; }
.maquette-photos { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0; padding: 5px 8px 3px; }
.maquette-photos span { height: 2.3em; border-radius: 2px; background: linear-gradient(135deg, #e3c9a6, #a77c52); }
.maquette-photos span:nth-child(2) { background: linear-gradient(160deg, #c7a47c, #6d4a2e); }
.maquette-photos span:nth-child(3) { background: linear-gradient(120deg, #f0dcc0, #b88a5c); }
.page-maquette .resultat-mention { flex: none; }
.page-scan { position: absolute; left: 0; right: 0; top: 0; height: 34%; background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 38%, transparent)); border-bottom: 2px solid var(--accent); animation: page-scan 1.8s ease-in-out infinite alternate; }
@keyframes page-scan { from { transform: translateY(-100%); } to { transform: translateY(200%); } }
.page-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 5px 10px; }
.page-palette { display: flex; align-items: center; gap: 4px; }
.page-couleur { width: 1.15em; height: 1.15em; border-radius: 50%; border: 1px solid #ffffff44; }
.page-palette-texte { margin-left: 3px; color: #cfc6d4; }

/* Vidéo : scénario, trajectoire de la caméra, validation, aperçu Blender,
   puis balayage vers le rendu final (mêmes images, même caméra). */
.sorte-video .resultat-corps { display: flex; flex-direction: column; gap: 5px; }
.video-scene { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 6px; overflow: hidden; background: #16131a linear-gradient(#ffffff08 1px, transparent 1px) 0 0 / 100% 14px; }
.video-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease, filter .6s ease; }
.sorte-video:is([data-scene="camera"], [data-scene="valide"]) .video-avant { filter: brightness(.5) saturate(.6); }
.video-apres { clip-path: inset(0 0 0 100%); }
.video-apres.vu { animation: balayage-rendu 5.2s ease-in-out forwards; }
@keyframes balayage-rendu { 0% { clip-path: inset(0 0 0 100%); } 42% { clip-path: inset(0 0 0 0); } 64% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 50%); } }
.video-coupe { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px #000a; }
.video-coupe.vu { animation: balayage-coupe 5.2s ease-in-out forwards; }
@keyframes balayage-coupe { 0% { left: 100%; } 42% { left: 0; } 64% { left: 0; } 100% { left: 50%; } }
.video-script { position: absolute; inset: 10% 14%; display: grid; align-content: center; gap: 4px; padding: 8px 14px; border-radius: 5px; background: #fbf6ec; color: #2a2118; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; box-shadow: 0 10px 24px #0008; }
.video-script b { color: #8a5a1c; font-size: .85em; letter-spacing: .12em; text-transform: uppercase; }
.video-script.vu span { animation: journal-monte .5s ease both; }
.video-script.vu span:nth-of-type(2) { animation-delay: .5s; }
.video-script.vu span:nth-of-type(3) { animation-delay: 1s; }
.video-trajectoire { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-trajectoire path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.video-trajectoire.vu path { animation: trace-camera 2.6s ease forwards; }
.video-trajectoire circle { fill: #fff; stroke: var(--accent); stroke-width: 1.2; }
@keyframes trace-camera { to { stroke-dashoffset: 0; } }
.video-tampon { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border: 2px solid #f2d479; border-radius: 3px; background: #0d0b11b8; color: #f2d479; font-size: .86em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-4deg); }
.video-tampon.vu { animation: tampon .35s cubic-bezier(.2, .8, .2, 1.3) both; }
@keyframes tampon { from { transform: rotate(-4deg) scale(1.6); opacity: 0; } }
.etiquette-video { position: absolute; top: 6px; padding: 2px 7px; border-radius: 3px; background: #0d0b11c7; color: #f7f0fa; font-size: .84em; font-weight: 750; }
.etiquette-video.gauche { left: 6px; }
.etiquette-video.droite { right: 6px; }

/* Telegram : le téléphone reçoit l'alerte, un bouton est touché, la confirmation s'affiche. */
.sorte-telegram .resultat-corps { display: flex; justify-content: center; }
.telephone { display: flex; width: min(100%, 330px); height: 100%; padding: 5px; border-radius: 20px; background: #0a0a0e; border: 1px solid #ffffff2e; box-shadow: 0 10px 26px #0008; }
.tel-ecran { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 15px; overflow: hidden; background: #0e1621; }
.tel-tete { flex: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 5px 10px; background: #1f2a37; font-size: .92em; }
.tel-avatar { width: 1.5em; height: 1.5em; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #2a6fa0); }
.tel-notif { position: absolute; left: 5px; right: 5px; top: 4px; z-index: 2; display: grid; margin: 0; padding: 5px 9px; border-radius: 10px; background: #f2f4f7f0; color: #1b1f24; font-size: .86em; box-shadow: 0 6px 16px #0009; }
.tel-notif span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-notif.vu { animation: notif-arrive 3.4s cubic-bezier(.2, .8, .2, 1) both; }
/* La notification descend, reste lisible, puis remonte : le message est dans le fil. */
@keyframes notif-arrive { 0% { transform: translateY(-130%); } 12%, 72% { transform: none; } 100% { transform: translateY(-130%); visibility: hidden; } }
.tel-fil { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 7px 8px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 22px); mask-image: linear-gradient(transparent, #000 22px); }
.tel-vide { margin: auto 0; color: #7f8b98; text-align: center; font-size: .9em; }
.tel-fil .resultat-bulle { align-self: flex-start; max-width: 94%; }
.tel-fil .resultat-bulle.vu, .tel-reponse.vu { animation: journal-monte .45s ease both; }
.bulle-boutons { margin-top: 5px; }
.bulle-boutons span { position: relative; overflow: visible; transition: background .3s, border-color .3s, transform .2s; }
.sorte-telegram:is([data-scene="touche"], [data-scene="confirme"], [data-scene="retabli"]) .bouton-cible { background: color-mix(in srgb, var(--accent) 45%, #1e2c3a); border-color: var(--accent); color: #fff; }
.tel-doigt { position: absolute; left: 50%; top: 50%; width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em; border-radius: 50%; background: #ffffffb0; pointer-events: none; }
.tel-doigt.vu { animation: doigt 1.5s ease-out infinite; }
@keyframes doigt { from { transform: scale(.5); opacity: .95; } to { transform: scale(1.5); opacity: 0; } }
.tel-reponse { align-self: flex-start; max-width: 94%; margin: 0; padding: 5px 8px; border-radius: 10px 10px 10px 2px; background: #1e2c3a; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.tel-retabli { border-color: #8ff0b077; }

/* Vivier : carte stylisée des trois zones, fiches qui s'y posent, doublons
   écartés, puis les prospects obtenus et l'autonomie remontée. */
.sorte-vivier .resultat-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 8px; align-items: center; }
.vivier-carte { display: block; width: 100%; height: 100%; min-height: 0; }
.vivier-zone { fill: color-mix(in srgb, var(--accent) 7%, #1a1720); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1; transition: fill .6s ease; }
.sorte-vivier[data-scene="rempli"] .vivier-zone { fill: color-mix(in srgb, var(--accent) 16%, #1a1720); }
.vivier-point { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.vivier-point.vu { animation: point-pose .45s ease both; animation-delay: var(--d, 0s); }
@keyframes point-pose { from { transform: scale(0); } }
.sorte-vivier:is([data-scene="tri"], [data-scene="rempli"]) .vivier-doublon { fill: #ff8a7a; opacity: .22; }
.vivier-libelle { fill: #e9e1ed; font-size: 9px; font-weight: 700; }
.vivier-compte { fill: var(--accent); font-weight: 800; }
.vivier-cote { display: grid; gap: 5px; align-content: center; min-width: 0; }
.vivier-cote .resultat-jauge { margin-bottom: 12px; }
.vivier-prospects { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.vivier-prospects li { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 2px 6px; border-radius: 4px; background: #ffffff0a; border-left: 2px solid var(--accent); }
.vivier-prospects b { flex: none; }
.vivier-prospects b, .vivier-prospects span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vivier-prospects span { color: #9d93a3; font-size: .88em; }
.vivier-prospects.vu li { animation: journal-monte .45s ease both; }
.vivier-prospects.vu li:nth-child(2) { animation-delay: .25s; }
.vivier-prospects.vu li:nth-child(3) { animation-delay: .5s; }
.vivier-mention { justify-self: start; padding: 1px 6px; border-radius: 4px; background: #f2d4791a; border: 1px solid #f2d47966; color: #f6e4a8; font-size: .82em; font-weight: 700; }

/* Commandes de la réalisation de face : comparer (à gauche), lire et agrandir
   (à droite). Séparées des flèches qui changent de projet, en dessous. */
.media-commandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; width: min(100%, calc(var(--carte-l) + 160px)); margin: 4px 0 8px; }
.groupe-comparer, .groupe-lecture { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.groupe-comparer[hidden], .commande[hidden] { display: none; }
.segment { display: inline-flex; border: 1px solid #e9d9ed44; border-radius: 4px; overflow: hidden; background: #15121acc; }
.segment-bouton { min-height: 40px; padding: 0 14px; border: 0; background: transparent; color: #e9e1ed; font-size: 12.5px; font-weight: 700; }
.segment-bouton + .segment-bouton { border-left: 1px solid #e9d9ed2e; }
.segment-bouton[aria-checked="true"] { background: var(--lilas); color: #1a1220; }
.commande { min-height: 40px; padding: 0 14px; border: 1px solid #e9d9ed44; border-radius: 4px; background: #15121acc; color: #e9e1ed; font-size: 12.5px; font-weight: 700; }
.commande[aria-pressed="true"] { border-color: var(--lilas); color: #fff; }
.segment-bouton:hover, .commande:hover { color: #fff; }
.segment-bouton[aria-checked="true"]:hover { color: #1a1220; }
.segment-bouton:focus-visible, .commande:focus-visible { outline: 2px solid #dbb4ff; outline-offset: 2px; }

/* « Ouvrir en grand » : la carte de face occupe l'écran, le reste s'efface. */
.vitrine.en-grand .vitrine-cadre { --carte-l: min(94vw, calc((100dvh - 150px) * 1.7778)); padding-top: 14px; }
.vitrine.en-grand .vitrine-intro, .vitrine.en-grand .vitrine-controles, .vitrine.en-grand .vitrine-fiche { display: none; }
.vitrine.en-grand .carte:not(.est-face) { visibility: hidden; }

.vitrine-controles { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 6px; width: min(100%, 1180px); position: relative; }
.rond { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #e9d9ed66; background: #15121acc; color: #fff; }
.rond:hover { border-color: #fff; }
.vitrine-position { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 120px; }
.vitrine-compteur { font-size: 12.5px; font-weight: 750; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: #efe6f3; }
.vitrine-points { display: flex; gap: 2px; }
.vitrine-point { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; position: relative; }
.vitrine-point::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #ffffff55; transition: background-color .2s ease, transform .2s ease; }
.vitrine-point[aria-current="true"]::after { background: var(--lilas); transform: scale(1.35); }
.vitrine-fiche { width: min(100%, calc(var(--carte-l) + 160px)); display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 1.4fr); column-gap: clamp(20px, 3vw, 44px); margin-top: 12px; padding: 16px 22px; border-radius: 8px; background: #121016e6; border: 1px solid #ffffff14; }
.fiche-nature { grid-column: 1 / -1; margin: 0 0 6px; color: var(--lilas); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fiche-titre { margin: 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 690; line-height: 1.12; }
.fiche-sous-titre { margin: 6px 0 0; font-size: 13.5px; color: #cfc5d4; }
.fiche-description { margin: 0; font-size: 14.5px; line-height: 1.52; color: #e5dee8; }
.fiche-points { margin: 10px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 5px 18px; }
.fiche-points li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.4; color: #d3cad8; }
.fiche-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--lilas); }
.fiche-points li.point-libelle b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lilas); margin-bottom: 1px; }
.fiche-outils { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.fiche-lien { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--lilas); font-size: 13.5px; font-weight: 750; border-bottom: 1px solid transparent; }
.fiche-lien:hover { border-bottom-color: currentColor; }
/* Lien vers la fiche de la carte de face : en haut, avant les médias et le texte (27/09). */
.vitrine-lien { width: min(100%, 1180px); margin: 4px 0 0; }
.vitrine-lien .fiche-lien { margin-top: 0; font-size: 14.5px; }
/* Partager ce poste (30/09) : à côté du lien de la fiche, même style, plus discret. */
.vitrine-lien { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.bouton-partager { padding: 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--doux, #cbbfd1); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.bouton-partager:hover { color: var(--lilas); border-bottom-color: currentColor; }
.vitrine-lien .fiche-lien[hidden] { display: none; }
/* Fiche du projet et tarifs : deux vrais boutons (02/10, Loan : « un peu caché »), même gabarit que
   Fermer et Agrandir ; la fiche en plein (la couleur du site), les tarifs en contour. */
.vitrine-lien.vitrine-boutons { gap: 10px 12px; }
.bouton-etape { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid var(--lilas); border-radius: 3px; font-size: 14px; font-weight: 750; line-height: 1.15; text-decoration: none; }
.bouton-etape[hidden] { display: none; }
.bouton-fiche { background: var(--lilas); color: #170f1c; }
.bouton-tarifs { background: #1d1624e6; color: #f6eefa; border-color: #e9d9ed66; }
@media (hover: hover) { .bouton-fiche:hover { background: #ead2f5; } .bouton-tarifs:hover { border-color: var(--lilas); background: #2a2131; } }
.vitrine-boutons .bouton-partager { margin-left: 6px; }
.vitrine.en-grand .vitrine-lien { display: none; }
.carte-projet .carte-affiche { object-fit: cover; }
.carte-projet { display: flex; flex-direction: column; justify-content: center; padding: clamp(16px, 3%, 34px); background: radial-gradient(circle at 80% 20%, #774b8655, transparent 55%), #141118; }
.projet-flux-titre { margin: 0 0 12px; color: var(--lilas); font-size: clamp(12px, 1.1vw, 14px); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.projet-flux { display: grid; gap: clamp(6px, 1vw, 10px); margin: 0; padding: 0; list-style: none; }
.projet-flux li { display: flex; align-items: center; gap: 12px; padding: clamp(8px, 1.1vw, 12px) 14px; border-radius: 6px; background: #1d1924; border: 1px solid #ffffff14; font-size: clamp(13px, 1.3vw, 17px); font-weight: 650; color: #f3ecf6; }
.projet-flux li span { color: var(--lilas); font-size: .75em; font-weight: 800; }
.carte-statut { position: absolute; left: 14px; bottom: 14px; z-index: 5; padding: 6px 11px; border-radius: 99px; background: #0d0b11d0; color: #f4ecf7; font-size: 12px; font-weight: 700; }
.puce { padding: 4px 9px; border-radius: 20px; border: 1px solid #dcb8ec55; color: #ecdff2; font-size: 12px; font-weight: 700; }

/* ── Sous l'atrium : portfolio calme et lisible (lot B3) ─────────────────── */
.accueil { width: min(100% - 32px, 1180px); margin: 0 auto; padding: clamp(64px, 9vw, 120px) 0 0; }
.accueil-tete { max-width: 720px; margin-bottom: 34px; }
.accueil-tete h2 { margin: 0 0 12px; font-size: clamp(30px, 3.6vw, 50px); font-weight: 680; line-height: 1.06; letter-spacing: -.015em; }
.accueil-tete > p:not(.eyebrow) { margin: 0; color: #cfc5d3; font-size: 17px; line-height: 1.55; }
/* Composition : une grande réalisation, puis des formats différents, jamais une grille de cartes identiques. */
.composition { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: 18px; }
.projet-accueil { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: #131118; border: 1px solid #ffffff1c; transition: border-color .2s ease; }
.projet-accueil:hover { border-color: #dcb8ec88; }
.projet-accueil .visuel { position: relative; display: block; overflow: hidden; background: #0b0a0f; }
.projet-accueil .visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.projet-accueil:hover .visuel img { transform: scale(1.02); }
.projet-accueil .corps { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 20px 20px; }
.projet-accueil .cat { color: var(--lilas); font-size: 12.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.projet-accueil .titre { font-size: clamp(20px, 1.9vw, 27px); font-weight: 680; line-height: 1.15; }
.projet-accueil .resume { color: #c9bfcd; font-size: 14.5px; line-height: 1.5; max-width: 52ch; }
.projet-accueil .statut { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 3px 10px 3px 8px; border-radius: 99px; border: 1px solid #e9d9ed40; font-size: 12px; font-weight: 650; color: #eee4f2; }
.projet-accueil .statut > span { width: 7px; height: 7px; border-radius: 50%; background: #9c92a3; }
.projet-accueil .statut[data-etat="termine"] > span, .projet-accueil .statut[data-etat="en-ligne"] > span { background: #8ff0b0; }
.projet-accueil .statut[data-etat="prototype"] > span { background: #f2d479; }
.projet-accueil .statut[data-etat="pause"] > span { background: #f0a58f; }
.projet-accueil .voir { margin-top: 8px; font-size: 13.5px; font-weight: 750; }
.pastille { position: absolute; left: 16px; bottom: 14px; padding: 6px 12px; border-radius: 99px; background: #0c0b10c0; font-size: 12.5px; font-weight: 700; }
.projet-accueil.vedette { grid-column: 1 / span 8; grid-row: span 2; }
/* La grande réalisation remplit toute sa hauteur : jamais de bande vide sous le texte. */
.projet-accueil.vedette .visuel { flex: 1 1 auto; min-height: 320px; }
.projet-accueil.vedette .visuel img { position: absolute; inset: 0; }
.projet-accueil.vedette .titre { font-size: clamp(26px, 2.6vw, 36px); }
.projet-accueil.texte { grid-column: 9 / span 4; }
.projet-accueil.haut { grid-column: 9 / span 4; }
.projet-accueil.haut .visuel { aspect-ratio: 16 / 9; }
.projet-accueil.large { grid-column: span 6; }
.projet-accueil.large .visuel { aspect-ratio: 16 / 8; }
/* Carte large seule sur sa ligne (27/09/2026) : pleine largeur, visuel plus bas. */
.projet-accueil.large.pleine { grid-column: 1 / -1; }
.projet-accueil.large.pleine .visuel { aspect-ratio: 16 / 5; }
.flux { display: grid; gap: 6px; padding: 20px 20px 4px; }
.flux span { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; background: #1a1720; font-size: 13.5px; font-weight: 650; color: #efe6f3; }
.flux i { font-style: normal; color: var(--lilas); font-size: 11px; font-weight: 800; }
.aussi { display: grid; grid-template-columns: minmax(160px, auto) 1fr auto; align-items: center; gap: 18px 28px; margin-top: 26px; padding: 20px 0; border-top: 1px solid #ffffff1c; border-bottom: 1px solid #ffffff1c; }
.aussi h3 { margin: 0; font-size: 15px; color: #cfc5d3; }
.aussi ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.aussi li a { display: grid; padding: 4px 0; }
.aussi li b { font-size: 15px; }
.aussi li span { color: #a99eaf; font-size: 12.5px; }
.aussi li a:hover b { color: var(--lilas); }
/* Accueil sans carte « haut » (jeu en développement, 27/09) : la vedette tient sur une ligne. */
.projet-accueil.vedette.une-ligne { grid-row: auto; }
/* Projets en développement (27/09) : section à part, sous les projets terminés. */
.accueil-developpement .accueil-tete { margin-bottom: 26px; }
.accueil-developpement .eyebrow { color: #f2d479; }
.developpement { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 18px; border: 1px dashed #f2d47966; border-radius: 14px; background: #f2d4790a; }
.projet-dev { display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: #131118; border: 1px solid #ffffff1c; transition: border-color .2s ease; }
.projet-dev:hover { border-color: #f2d47999; }
.projet-dev .visuel { position: relative; display: block; aspect-ratio: 16 / 8; overflow: hidden; background: #0b0a0f; }
.projet-dev .visuel img { width: 100%; height: 100%; object-fit: cover; }
.badge-dev { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 99px; background: #1b1610e6; border: 1px solid #f2d479; color: #f6e4a8; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; }
.projet-dev .corps { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px 18px; }
.projet-dev .cat { color: #f2d479; font-size: 12.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.projet-dev .titre { font-size: clamp(20px, 1.8vw, 25px); font-weight: 680; line-height: 1.15; }
.projet-dev .resume { color: #c9bfcd; font-size: 14.5px; line-height: 1.5; }
.projet-dev .statut { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 3px 10px 3px 8px; border-radius: 99px; border: 1px solid #e9d9ed40; font-size: 12px; font-weight: 650; color: #eee4f2; }
.projet-dev .statut > span { width: 7px; height: 7px; border-radius: 50%; background: #f2d479; }
.projet-dev .voir { margin-top: 6px; font-size: 13.5px; font-weight: 750; }
.tous { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 4px; background: var(--lilas); color: #1a1220; font-size: 14px; font-weight: 750; white-space: nowrap; }
.methode-etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid #ffffff1c; }
.methode-etapes li { padding: 22px 26px 0 0; }
.methode-etapes b { font-size: 20px; }
.methode-etapes p { margin: 8px 0 0; color: #c9bfcd; font-size: 15px; line-height: 1.55; }
.credit { margin: 26px 0 0; color: #a99eaf; font-size: 13px; }
.accueil-apropos .accueil-tete { max-width: 780px; margin-bottom: 0; }
.accueil-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(64px, 9vw, 120px); padding: clamp(28px, 4vw, 44px); border-radius: 14px; background: #1a1720; border: 1px solid #ffffff26; }
.accueil-contact h2 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); }
.accueil-contact p { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0; }
.accueil-contact .bouton, .domaines-suite .bouton { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 4px; background: var(--lilas); color: #1a1220; font-weight: 750; }
.accueil-contact .courriel { color: var(--lilas); font-weight: 700; }
.site-footer { margin-top: 80px; }
.site-footer { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 35px clamp(20px, 4vw, 68px); background: var(--fond); font-size: 14px; }
.site-footer span:first-child { font-weight: 760; }
.site-footer nav { display: flex; gap: 24px; flex-wrap: wrap; }
.site-footer a:hover { color: #dab8eb; }

@media (max-width: 760px) {
  .vitrine-cadre > .vitrine-sorties { margin-bottom: 10px; justify-content: space-between; }
  .site-header { height: 62px; }
  .site-header nav { gap: 14px; font-size: 12px; }
  .nav-secondaire { display: none; }
  .entree-titre { margin-bottom: 16px; font-size: clamp(23px, 6.3vw, 28px); }
  .entree-chapeau { margin: 10px 0 16px; font-size: 14px; }
  .brand { font-size: 17px; }
  .film-shade { background: linear-gradient(0deg, #07070cea, #07070c1c 46%, transparent 70%), linear-gradient(90deg, #07070c6b, transparent 75%); }
  .stage-copy { max-width: calc(100% - 40px); bottom: 104px; }
  .stage-copy .titre-spot { font-size: clamp(30px, 8vw, 44px); }
  .stage-copy[data-etat="arret"] .titre-spot { font-size: clamp(36px, 10vw, 50px); }
  .stage-copy[data-etat="arret"] .arret-badge { display: flex; margin: 0 0 10px; }
  .stage-description { margin: 10px 0 16px; font-size: 14px; }
  .stage-actions { gap: 10px; }
  .primary-button, .play-button, .voir-etape { min-height: 46px; }
  .tour-hint { display: none; }
  .frise { bottom: 16px; height: 60px; }
  .frise-nom { display: none; }
  .frise-etape.active .frise-nom { display: block; }
  .vitrine-cadre { --carte-l: min(88vw, calc((100dvh - 300px) * 1.7778)); padding: 16px 16px 24px; }
  .vitrine-tete { flex-direction: column-reverse; gap: 10px; }
  .vitrine-fermer { align-self: flex-end; }
  .vitrine-intro { font-size: 13px; }
  .anneau { --anneau-marge: 34px; height: calc(var(--carte-l) * .5625 + 34px); margin-top: 10px; }
  .vitrine-controles { flex-wrap: wrap; gap: 12px; }
  .vitrine-fiche { display: block; padding: 16px; }
  .fiche-corps { margin-top: 12px; }
  .navigateur { height: 34px; }
  .onglet { font-size: 10.5px; padding: 0 8px; }
  .processus-etapes { gap: 4px; }
  .processus-texte { display: none; }
  .processus-etape strong { font-size: 10px; }
  .processus-num { width: 26px; height: 26px; font-size: 10px; }
  .composition { grid-template-columns: 1fr; }
  .projet-accueil.vedette, .projet-accueil.texte, .projet-accueil.haut, .projet-accueil.large { grid-column: auto; grid-row: auto; }
  /* Cartes mobiles allégées : titre, statut et lien ; le texte reste sur la carte sans image. */
  .projet-accueil:not(.texte) .resume { display: none; }
  .projet-accueil.texte .flux { display: none; }
  .projet-accueil.large .visuel, .projet-accueil.vedette .visuel, .projet-accueil.large.pleine .visuel { aspect-ratio: 16 / 9; min-height: 0; }
  .projet-accueil.vedette .visuel img { position: static; }
  .aussi { grid-template-columns: 1fr; }
  .developpement { grid-template-columns: 1fr; padding: 12px; }
  .projet-dev .visuel { aspect-ratio: 16 / 9; }
  .aussi ul { display: grid; gap: 4px; }
  .methode-etapes { grid-template-columns: 1fr; }
  .methode-etapes li { padding: 18px 0 0; }
  .site-footer { flex-wrap: wrap; }
}
/* ── Téléphone à l'horizontale (hauteur très réduite) ──────────────────────── */
@media (max-height: 500px) and (min-aspect-ratio: 4/5) {
  /* iPhone couché : sorties réduites à deux ronds à icône, en haut à droite, hors de la ligne des commandes. */
  .vitrine-cadre > .vitrine-sorties { justify-content: flex-end; margin-bottom: -44px; }
  .vitrine-cadre > .vitrine-sorties .vitrine-fermer { width: 44px; min-height: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; font-size: 0; }
  .vitrine-cadre > .vitrine-sorties .vitrine-fermer span { font-size: 19px; }
  .vitrine-cadre > .vitrine-sorties .vitrine-agrandir { width: 44px; min-height: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; }
  .vitrine-cadre > .vitrine-sorties .agrandir-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-header { height: 52px; }
  .stage-copy { bottom: 78px; max-width: min(520px, 60vw); }
  .etape-badge { margin-bottom: 8px; }
  .stage-copy .titre-spot, .stage-copy[data-etat="arret"] .titre-spot { font-size: 30px; }
  .stage-description, .tour-hint { display: none; }
  .stage-copy .titre-spot { margin-bottom: 12px; }
  .primary-button, .play-button, .voir-etape { min-height: 44px; }
  .frise { bottom: 6px; }
  .vitrine-cadre { --carte-l: min(62vw, calc((100dvh - 150px) * 1.7778)); padding-top: 12px; }
  .vitrine-intro { display: none; }
  .anneau { margin-top: 8px; }
}

/* ── Téléphone et tablette en portrait (option B, 2026-09-26) ───────────────
   Même système que sur ordinateur : la visite remplit l'écran, le texte et la
   frise se posent dessus en bas, sur un dégradé. Le film est la visite
   verticale 1080×1920 (site.js, FORMATS) ; cadrePortrait la remonte au besoin
   pour que le sujet de chaque arrêt reste entre l'en-tête et le texte. */
@media (max-aspect-ratio: 4/5) {
  .site-header { height: calc(58px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: linear-gradient(#0b0a0fdd, #0b0a0f00); }
  .scene-cadre { background-image: url("./poster-9x16.jpg"); }
  /* Bas opaque : il couvre aussi la bande éventuellement libérée sous le film (jeuBas). */
  .film-shade { background: linear-gradient(0deg, #0b0a0f 0%, #0b0a0f 14%, #0b0a0fd9 24%, #0b0a0f80 34%, #0b0a0f00 46%); }
  .stage-copy { top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); left: 20px; right: 20px; max-width: none; }
  .etape-badge { font-size: 12px; margin-bottom: 8px; }
  .stage-copy[data-etat="arret"] .etape-badge { font-size: 13px; padding: 5px 11px; }
  .stage-copy[data-etat="arret"] .arret-badge { display: inline-flex; margin: 0 0 8px 10px; }
  .stage-copy .titre-spot { font-size: clamp(28px, 8.2vw, 36px); }
  .stage-copy[data-etat="arret"] .titre-spot { font-size: clamp(32px, 9.4vw, 42px); }
  .stage-description { margin: 6px 0 14px; font-size: 14.5px; line-height: 1.38; max-width: none; color: #ece8ee; }
  /* Deux boutons côte à côte : l'interface reste basse et laisse le sujet visible. */
  .stage-actions { flex-wrap: nowrap; gap: 10px; }
  .primary-button, .play-button, .voir-etape { flex: 1 1 0; min-width: 0; min-height: 48px; justify-content: center; padding: 0 12px; font-size: 13.5px; white-space: nowrap; }
  .primary-button { justify-content: space-between; gap: 10px; }
  .libelle-long, .tour-hint { display: none; }
  .frise { bottom: calc(8px + env(safe-area-inset-bottom)); left: 20px; right: 20px; }
  /* Le titre juste au-dessus nomme déjà l'étape : les noms de la frise passaient sur les boutons. */
  .frise-nom, .frise-etape.active .frise-nom { display: none; }
  /* Entrée : les deux parcours en pleine largeur, le lien vers les projets dessous. */
  .stage-copy:is([data-etat="entree"], [data-etat="fin"]) .stage-actions { flex-wrap: wrap; }
  .stage-copy:is([data-etat="entree"], [data-etat="fin"]) .choix-projets { flex: 1 1 100%; }
  /* Retour à l'accueil : un carré avec l'icône maison, les deux autres boutons gardent la place. */
  /* Recommencer et Accueil : deux carrés à icône ; le bouton principal garde la place. */
  :is(#visite-accueil, #visite-recommencer) { flex: 0 0 48px; padding: 0; justify-content: center; }
  /* Accueil : les sous-titres des choix peuvent passer à la ligne plutôt qu'être coupés. */
  .stage-copy:is([data-etat="entree"], [data-etat="fin"]) .choix-textes > span { white-space: normal; }
  .stage-copy:is([data-etat="entree"], [data-etat="fin"]) .play-button { white-space: normal; height: auto; padding-top: 8px; padding-bottom: 8px; }
  .entree-chapeau { display: none; }
  .choix-textes { align-items: center; text-align: center; }
  .vitrine-sorties { justify-content: space-between; width: 100%; }
}
/* Petits téléphones (iPhone SE) : titres et marges resserrés. */
@media (max-aspect-ratio: 4/5) and (max-height: 720px) {
  .stage-copy { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .stage-copy .titre-spot { font-size: 28px; }
  .stage-copy[data-etat="arret"] .titre-spot { font-size: 31px; }
  .stage-description { margin: 4px 0 12px; font-size: 13.5px; }
  .primary-button, .play-button, .voir-etape { min-height: 46px; }
}
/* Tablette en portrait : le libellé complet a la place. */
@media (max-aspect-ratio: 4/5) and (min-width: 600px) {
  .libelle-long { display: inline; }
  .stage-copy { right: auto; width: min(560px, calc(100% - 40px)); }
}
@media (max-aspect-ratio: 4/5) {

  /* Vitrines verticales : chaque carte montre l'avant AU-DESSUS de l'après. */
  .vitrine-cadre { --carte-l: min(88vw, 540px); padding: calc(14px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
  /* Téléphone debout : les sorties ont leur propre ligne, au-dessus du titre. */
  .vitrine-cadre > .vitrine-sorties { margin-bottom: 10px; justify-content: space-between; top: 6px; }
  .vitrine-tete { flex-direction: column-reverse; gap: 10px; }
  .vitrine-fermer { align-self: flex-end; }
  .vitrine-intro { font-size: 13.5px; }
  .anneau { --carte-h: calc(var(--carte-l) * 1.125); --zone-h: calc(var(--carte-l) * 1.25 + 40px); --anneau-marge: 26px; height: calc(var(--carte-h) + 26px); margin-top: 12px; }
  .vitrine.en-grand .anneau { --zone-h: calc(100dvh - 190px); }
  .anneau[data-type="ecrans-avant-apres"] { --carte-h: calc(var(--carte-l) * 1.25 + 34px); }
  .anneau[data-type="processus"] { --carte-h: calc(var(--carte-l) * 1.42); }
  .carte { aspect-ratio: auto; height: var(--carte-h); top: calc(var(--carte-h) / -2); border-radius: 12px; }
  .vitrine.en-grand .vitrine-cadre { --carte-l: min(96vw, calc((100dvh - 190px) / 1.25)); }
  .media-commandes { gap: 8px; }
  .segment-bouton, .commande { padding: 0 11px; min-height: 44px; }
  /* Libellés posés par vitrine.js sur leur image (28/09). Affiche entière,
     centrée, comme la vue « Avant/Après » d'ouverture. */
  .etiquette { font-size: 11px; }
  .carte-video .carte-affiche { object-fit: contain; }
  .navigateur { height: 34px; }
  .onglet { font-size: 11px; padding: 0 9px; }
  .carte-processus { justify-content: flex-start; padding: 22px 18px; }
  .processus-flux { display: none; }
  .processus-etapes { grid-template-columns: 1fr; gap: 0; margin: 0; position: relative; }
  .processus-etapes::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(#dcb8ec66, #6d4b7c44); }
  .processus-etape { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: center; text-align: left; padding: 2px 0; }
  .processus-num { width: 28px; height: 28px; font-size: 10.5px; position: relative; }
  .processus-etape strong { font-size: 14px; }
  .processus-texte { display: none; }
  .processus-tete { margin-bottom: 12px; flex-wrap: wrap; }
  .processus-journal { margin-top: 12px; min-height: 0; padding: 10px 12px; }
  .journal-texte { font-size: 13px; }
  .vitrine-controles { flex-wrap: wrap; gap: 14px; }
  .vitrine-fiche { display: block; padding: 16px; }
  .fiche-corps { margin-top: 12px; }
  .fiche-points { grid-template-columns: 1fr; }
}

/* Automatisations sur téléphone : étapes en ligne de points numérotés (le nom
   de l'étape courante est dans le journal), jeton sur la ligne, journal puis
   résultat. Carte compacte : les flèches restent atteignables sans perdre de
   vue le lien vers la fiche. */
@media (max-aspect-ratio: 4/5) {
  .anneau[data-type="processus"] { --carte-h: calc(var(--carte-l) * 1.3); }
  .carte-processus { justify-content: flex-start; padding: 16px 14px; }
  .processus-tete { margin-bottom: 0; }
  .processus-titre { font-size: 11.5px; }
  .processus-declencheur { font-size: 12px; }
  .processus-exemple { font-size: 10.5px; }
  .processus-flux { display: block; margin-top: 30px; }
  .processus-jeton { font-size: 11px; max-width: 46cqw; }
  .processus-etapes { grid-template-columns: repeat(var(--etapes), minmax(0, 1fr)); gap: 0; margin: -13px 0 0; }
  .processus-etapes::before { display: none; }
  .processus-etape { display: flex; flex-direction: column; align-items: center; padding: 0; }
  .processus-etape strong, .processus-etape .processus-donnee-etape { display: none; }
  .processus-num { width: 26px; height: 26px; font-size: 10px; }
  .processus-bas { grid-template-columns: 1fr; margin-top: 12px; gap: 10px; }
  .journal-lignes li:not(:last-child) { display: none; }
  .journal-lignes, .journal-sortie { font-size: 11.5px; }
  .journal-texte { font-size: 13px; }
  .processus-resultat { font-size: 12px; }
  /* Poste avec mention (études de refonte) : la mention remplace l'introduction
     sur téléphone, pour que le lien vers la fiche reste visible sans défiler. */
  .vitrine-tete:has(.vitrine-mention:not([hidden])) .vitrine-intro { display: none; }
  /* Poste 03 : l'introduction (quatre lignes) repoussait les flèches sous le
     bas de l'écran ; le texte complet reste dans la fiche sous la carte. */
  .vitrine:has(.anneau[data-type="processus"]) .vitrine-intro { display: none; }
  .vitrine-mention { margin-top: 6px; padding: 6px 10px; font-size: 12px; line-height: 1.4; }
}
/* Automatisations v2 sur téléphone : phases réduites à leur numéro (le nom
   complet est dans le journal), journal sans historique, le résultat prend
   toute la place restante. Aucune hauteur de carte ajoutée : le lien vers la
   fiche reste visible sans défiler (débordement corrigé le 27/09). */
@media (max-aspect-ratio: 4/5) {
  /* Plus haute qu'avant la v2 : la scène de résultat doit se lire. Les flèches
     restent atteignables en défilant, le lien vers la fiche reste au-dessus. */
  .anneau[data-type="processus"] { --carte-h: calc(var(--carte-l) * 1.46); }
  .carte.est-active.en-pause .journal-pause { display: none; }
  .carte.est-active.en-pause .journal-phase { padding-right: 0; }
  .processus-exemple { white-space: normal; }
  .processus-flux { margin-top: 26px; }
  .processus-barre { margin-top: 3px; }
  .processus-phases { gap: 0; margin-top: 5px; }
  .processus-phase { padding-top: 3px; font-size: 10px; }
  .phase-nom { display: none; }
  .processus-bas { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); margin-top: 8px; gap: 8px; }
  .journal-lignes { display: none; }
  .processus-bas .processus-journal { padding: 7px 10px; }
  .journal-texte { margin-bottom: 2px; line-height: 1.3; }
  .processus-resultat { font-size: 11.5px; padding: 6px 8px; }
  .resultat-etat { margin-bottom: 3px; }
  .boite-liste li { padding: 3px 8px; }
  .boite-extrait { display: none; }
  .telephone { width: min(100%, 250px); }
}
@media (max-width: 380px) { .site-header nav a:first-child { display: none; } .play-button { padding: 0 13px 0 11px; } }
/* Très petits iPhone (320 px) : « Découvrir » sans sa flèche, marges resserrées, jamais coupé. */
@media (max-width: 360px) { .stage-actions .primary-button { padding: 0 10px; gap: 6px; justify-content: center; } .stage-actions .primary-button > span[aria-hidden] { display: none; } .stage-actions .play-button { padding: 0 9px; gap: 7px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .loop-layer, .loop-layer.visible, .stage-copy, .film-shade, .frise, .frise-charge, .vitrine, .carte-canvas, .etape-badge, .stage-copy .titre-spot { transition: none; }
  .film-shade::after { transition: none; }
  .play-button[data-etat="chargement"] .icon { animation: none; }
  .processus-piste, .processus-num, .processus-jeton, .processus-resultat, .jauge-rempli { transition: none; }
  .journal-lignes li, .journal-ligne { animation: none; }
  /* Rien n'avance seul : le résultat est lisible d'emblée. */
  .processus-resultat { opacity: 1; }
  .processus-resultat:not(.est-pret) .jauge-rempli { width: calc(var(--apres) * 100%); }
  /* v2 : scènes figées, avant/après montré d'emblée en deux moitiés. */
  .processus-barre-rempli, .processus-phase, .video-image, .processus-resultat :is([data-des], [data-jusqua]) { transition: none; }
  .email-envol-barre::after, .boite-reception.vu .boite-nouveau, .page-dossier.vu .page-photo, .page-scan, .video-script.vu span, .video-trajectoire.vu path, .video-tampon.vu, .tel-notif.vu, .tel-fil .resultat-bulle.vu, .tel-reponse.vu, .tel-doigt.vu, .vivier-point.vu, .vivier-prospects.vu li { animation: none; }
  .video-trajectoire path { stroke-dashoffset: 0; }
  .video-apres.vu { animation: none; clip-path: inset(0 0 0 50%); }
  .video-coupe.vu { animation: none; left: 50%; }
  .tel-notif { display: none; }
}

/* Site créé sur téléphone (portrait) : depuis le 29/09, fenêtre et téléphone
   sont posés par vitrine.js (placerRendu) à la forme exacte de la vue ; ces
   valeurs ne servent qu'avant le premier calcul. */
@media (max-aspect-ratio: 4/5) {
  .rendu-fenetre { left: 3.5cqw; top: 9cqh; width: 93cqw; }
  .rendu-barre { height: 26px; }
  .rendu-telephone { right: 4cqw; bottom: 3cqh; height: 58cqh; border-radius: 4.4cqh; }
  .rendu-telephone .rendu-ecran { border-radius: 3.4cqh; }
  .rendu-badge { top: 2.2cqh; font-size: 11px; }
  /* Quatre onglets (démonstrations, 27/09) : sans les trois points, plus serrés ;
     la barre défile encore si un libellé long ne tient pas (vitrine.js la cale
     sur l'onglet choisi). */
  .carte-site .navigateur-points { display: none; }
  .carte-site .navigateur { gap: 2px; padding: 0 6px; }
  .carte-site .onglet { padding: 0 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .rendu-fenetre, .rendu-telephone, .rendu-video { transition: none; }
}

/* Raccourcis clavier (30/09) : ordinateur seulement (souris ou pavé tactile). */
.aide-clavier-ouvrir { display: none; margin-top: 6px; padding: 4px 0; border: 0; background: none; color: #d8cfdd; font: inherit; font-size: 12.5px; cursor: pointer; }
.aide-clavier-ouvrir:hover { color: var(--lilas); }
kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border: 1px solid #e9d9ed55; border-bottom-width: 2px; border-radius: 4px; background: #16131b; color: #f6f1f7; font: 600 12px/1.4 inherit; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .aide-clavier-ouvrir { display: inline-flex; gap: 6px; align-items: center; }
}
.aide-clavier { position: fixed; z-index: 70; left: clamp(16px, 4vw, 68px); bottom: 120px; width: min(360px, calc(100vw - 32px)); padding: 18px 20px 16px; border: 1px solid #ffffff1f; border-radius: 10px; background: #100e14f2; box-shadow: 0 20px 60px #0009; backdrop-filter: blur(8px); }
.aide-clavier h2 { margin: 0 0 10px; font-size: 16px; }
.aide-clavier dl { display: grid; gap: 8px; margin: 0 0 14px; }
.aide-clavier dl > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; font-size: 13.5px; color: #e2dbe5; }
.aide-clavier dt { display: flex; gap: 4px; }
.aide-clavier dd { margin: 0; }
.aide-clavier-fermer { min-height: 40px; padding: 0 14px; border: 1px solid #e9d9ed55; border-radius: 3px; background: #15121a; color: #f3edf5; font-weight: 700; cursor: pointer; }

/* Bouton WhatsApp (30/09, variante V3 choisie par Loan) : en bas à droite sur
   tout le site, icône blanche (le règlement WhatsApp n'autorise pas le logo
   recoloré ; icône schématique, pas le logo officiel), masqué dès qu'un
   panneau est ouvert. */
.bouton-wa { position: fixed; z-index: 35; right: max(16px, calc(env(safe-area-inset-right) + 12px)); bottom: calc(env(safe-area-inset-bottom) + 22px); display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(145deg, #c99be0, #774b86); box-shadow: 0 0 0 6px #dcb8ec22, 0 10px 28px #0009; color: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.bouton-wa:hover { transform: translateY(-2px); box-shadow: 0 0 0 7px #dcb8ec33, 0 12px 30px #000a; }
.bouton-wa:focus-visible { outline: 2px solid #dcb8ec; outline-offset: 4px; }
.bouton-wa .icone-wa { width: 24px; height: 24px; }
:is(body.spot-open, html.visionneuse-ouverte, html:has(.comparateur.en-grand), html:has(.aide-clavier:not([hidden]))) .bouton-wa { display: none; }
@media (prefers-reduced-motion: reduce) { .bouton-wa { transition: none; } }
/* L'espace : la frise laisse la place du bouton, à sa droite ; le bas de page aussi. */
.frise { right: calc(clamp(20px, 4vw, 68px) + 64px); }
.site-footer { padding-bottom: 88px; }

/* ── Tous les projets, par domaine, juste après la visite ; mention de création (01/10, D-152) ── */
.tuiles-domaines { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.tuile-domaine { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 12px; background: #131118; border: 1px solid #ffffff1c; text-decoration: none; transition: border-color .2s ease; }
.tuile-domaine:hover { border-color: #dcb8ec88; }
.tuile-visuel { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(circle at 70% 30%, #774b8655, transparent 60%), #0b0a0f; }
.tuile-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tuile-domaine:hover .tuile-visuel img { transform: scale(1.02); }
.tuile-corps { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.tuile-corps b { font-size: 21px; font-weight: 680; }
.tuile-nombre { color: var(--lilas); font-size: 12.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.tuile-intro { color: #c9bfcd; font-size: 14.5px; line-height: 1.5; }
.domaines-suite { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 26px 0 0; }
.lien-tarifs { color: var(--lilas); font-weight: 700; text-underline-offset: 3px; }
.pied-credit { display: block; margin-top: 4px; color: #c9bfcd; font-size: 12.5px; font-weight: 500; }

/* ── Panneau d'une étape (01/10, plan validé par Loan) ─────────────────────
   À l'arrivée sur une étape, l'animation démarre seule, puis la vitrine
   glisse depuis son côté : à droite (étape 1, robot cadreur à gauche), à
   gauche (étapes 2 et 3, plus étroit pour la colonne centrale), en bas sur
   téléphone (55 % de la hauteur). La scène reste animée et nette derrière :
   le voile plein écran disparaît, seul le panneau a un fond sombre. */
.spot-open .film-shade { opacity: 0; }
.spot-open .film-shade::after { opacity: 0; transition-duration: .35s; }
/* Le cadre se décale (site.js, decalagePanneau) seulement caméra immobile. */
.scene-bande { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.vitrine { container-type: inline-size; overflow: hidden; overflow-y: hidden; display: flex; flex-direction: column; inset: 0 auto 0 0; width: min(44vw, 700px); border-right: 1px solid #ffffff17; box-shadow: 24px 0 60px #0007; transform: translate3d(-102%, 0, 0); transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .3s ease; }
.vitrine[data-cote="droite"] { left: auto; right: 0; border-right: 0; border-left: 1px solid #ffffff17; box-shadow: -24px 0 60px #0007; transform: translate3d(102%, 0, 0); }
.vitrine[data-etape="3"] { width: min(38vw, 600px); }
.vitrine.est-ouverte { opacity: 1; transform: none; }
.vitrine.se-ferme { opacity: 0; transition-duration: .34s, .3s; }
.vitrine-voile { position: absolute; inset: 0; background: linear-gradient(180deg, #0d0b11eb, #0d0b11de 60%, #0d0b11f0); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vitrine .vitrine-cadre { flex: 1 1 auto; min-height: 0; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; padding: 22px clamp(16px, 2vw, 28px) 18px; }
/* Les cartes voisines de l'anneau débordent volontairement : coupées au bord de l'anneau (le cadre défile en
   hauteur, il ne peut donc pas les couper lui-même sans devenir défilable en largeur). */
.vitrine .anneau { overflow-x: clip; overflow-clip-margin: 24px; }
/* Le cadre défile dans le panneau : ses blocs gardent leur hauteur (sinon l'anneau s'écrasait à 14 px). */
.vitrine .vitrine-cadre > * { flex-shrink: 0; }
.vitrine .vitrine-cadre, .vitrine .vitrine-cadre:has(.anneau[data-type="processus"]) { --carte-l: min(calc(100cqw - 48px), 1000px, max(240px, calc((100dvh - 470px) * 1.7778))); }
.vitrine .vitrine-cadre > .vitrine-sorties { width: 100%; margin: 0 0 12px; justify-content: flex-end; }
.vitrine .vitrine-tete { width: 100%; }
.vitrine .vitrine-tete h2 { font-size: clamp(24px, 2vw, 32px); }
.vitrine .vitrine-lien, .vitrine .vitrine-controles { width: 100%; }
.vitrine .vitrine-fiche { width: 100%; }
/* Panneau plus étroit que l'ancienne vitrine plein écran : la carte d'automatisation garde sa hauteur utile
   (sinon la boîte de réception, le journal et le résultat s'écrasaient). */
@media not all and (max-aspect-ratio: 4/5) {
  .vitrine .anneau[data-type="processus"] { --carte-hp: clamp(calc(var(--carte-l) * .5625), min(460px, calc(100dvh - 300px)), var(--carte-l)); }
}
@container (max-width: 640px) {
  .vitrine .vitrine-fiche { display: block; padding: 16px; }
  .vitrine .fiche-corps { margin-top: 12px; }
}
/* Ouvrir en grand : le panneau prend tout l'écran le temps de regarder. */
.vitrine.en-grand { inset: 0; width: auto; height: auto; transform: none; }
.vitrine.en-grand .vitrine-cadre { --carte-l: min(calc(100cqw - 48px), calc((100dvh - 190px) * 1.7778)); }
/* Agrandir (02/10) : le panneau d'une étape occupe toute la page, comme l'ancienne vue des projets ;
   le contenu se centre sur 1180 px au plus et la réalisation de face grandit. */
.vitrine.panneau-plein, .vitrine[data-etape="3"].panneau-plein { inset: 0; width: auto; border: 0; box-shadow: none; transform: none; }
.vitrine.panneau-plein .vitrine-cadre, .vitrine.panneau-plein .vitrine-cadre:has(.anneau[data-type="processus"]) { --carte-l: min(calc(100cqw - 64px), 1000px, max(300px, calc((100dvh - 430px) * 1.7778))); padding-left: clamp(18px, 4vw, 60px); padding-right: clamp(18px, 4vw, 60px); }
.vitrine.panneau-plein :is(.vitrine-cadre > .vitrine-sorties, .vitrine-tete, .vitrine-lien, .vitrine-controles) { width: min(100%, 1180px); }
.vitrine.panneau-plein .vitrine-fiche { width: min(100%, calc(var(--carte-l) + 160px)); }
.vitrine.panneau-plein .etape-actions { width: 100%; max-width: none; padding-left: max(clamp(16px, 2vw, 28px), calc((100% - 1180px) / 2)); padding-right: max(clamp(16px, 2vw, 28px), calc((100% - 1180px) / 2)); }
/* Quatre actions, toujours au même endroit : la barre du bas du panneau. */
.etape-actions { position: relative; flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px clamp(16px, 2vw, 28px) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #ffffff17; background: #0b0a0ff2; }
.etape-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 48px; padding: 6px; border: 1px solid #e9d9ed66; border-radius: 3px; background: #16131bcc; color: #f6f1f7; font-size: 13px; font-weight: 720; line-height: 1.2; text-align: center; }
/* Survol seulement avec une vraie souris (02/10) : sur iPhone, le toucher laissait « Étape suivante » éclairci à l'étape d'après. */
@media (hover: hover) { .etape-action:hover:not(:disabled) { border-color: var(--trait); background: #221d29; } }
.etape-action:disabled { opacity: .38; cursor: default; }
/* Action principale (02/10) : « Étape suivante », puis « Accéder au portfolio », en lilas plein aux trois
   étapes, comme les boutons principaux du site ; plus aucun bouton à fond blanc dans la visite. */
.etape-action-suivante { border-color: var(--lilas); background: var(--lilas); color: #1a1220; }
@media (hover: hover) { .etape-action-suivante:hover:not(:disabled) { border-color: #e9cdf5; background: #e9cdf5; color: #1a1220; } }
/* Même présentation aux trois étapes (02/10) : elle dépend de la largeur de l'écran, jamais de celle du
   panneau (l'étape 3, plus étroite, empilait seule ses actions). Libellés sur deux lignes au besoin. */
.etape-action span { text-wrap: balance; }
@media (max-width: 1180px) and (min-aspect-ratio: 4/5) {
  .etape-action { flex-direction: column; gap: 4px; font-size: 12px; padding: 6px 4px; }
  .etape-action-suivante { flex-direction: column-reverse; }
}
.panneau-poignee { display: none; }
/* « Voir cette étape » (défilement libre) : un bouton discret, jamais une ouverture automatique. */
.voir-etape.is-away { display: none; }

/* Téléphone couché (hauteur très réduite) : panneau plus large, carte calée sur la hauteur. */
@media (max-height: 500px) and (min-aspect-ratio: 4/5) {
  .vitrine, .vitrine[data-etape="3"] { width: min(56vw, 700px); }
  .vitrine .vitrine-cadre, .vitrine .vitrine-cadre:has(.anneau[data-type="processus"]) { --carte-l: min(calc(100cqw - 40px), calc((100dvh - 150px) * 1.7778)); padding-top: 12px; }
  .etape-actions { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .etape-action { min-height: 44px; }
}
@media (max-aspect-ratio: 4/5) {
  .vitrine, .vitrine[data-cote] { inset: auto 0 0 0; width: auto; height: 55%; border: 0; border-top: 1px solid #ffffff1f; border-radius: 16px 16px 0 0; box-shadow: 0 -20px 50px #0008; transform: translate3d(0, 102%, 0); transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .3s ease, height .35s ease; }
  .vitrine.est-ouverte { transform: none; }
  /* Agrandir (bouton ou poignée) : le panneau du bas passe en plein écran, puis revient à 55 %. */
  .vitrine.panneau-plein, .vitrine[data-etape="3"].panneau-plein { inset: auto 0 0 0; height: 100%; border-radius: 0; border-top: 0; }
  .vitrine.panneau-plein .panneau-poignee { margin-top: env(safe-area-inset-top); }
  .vitrine.panneau-plein .vitrine-cadre, .vitrine.panneau-plein .vitrine-cadre:has(.anneau[data-type="processus"]) { --carte-l: min(88vw, 540px); padding-left: 16px; padding-right: 16px; }
  .vitrine .vitrine-cadre { padding: 6px 16px 14px; }
  .vitrine .vitrine-cadre, .vitrine .vitrine-cadre:has(.anneau[data-type="processus"]) { --carte-l: min(88vw, 540px); }
  .vitrine .vitrine-cadre > .vitrine-sorties { top: 0; margin: 0 0 10px; justify-content: flex-end; }
  .vitrine .vitrine-intro { font-size: 13px; }
  .panneau-poignee { display: flex; position: relative; z-index: 2; flex: none; align-items: center; justify-content: center; width: 100%; height: 26px; padding: 0; border: 0; background: transparent; touch-action: none; }
  .panneau-poignee span { width: 44px; height: 5px; border-radius: 3px; background: #ffffff55; }
  .etape-actions { gap: 6px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  .etape-action { flex-direction: column; gap: 3px; min-height: 54px; padding: 5px 3px; font-size: 11.5px; }
  .etape-action-suivante { flex-direction: column-reverse; }
  .vitrine.en-grand { inset: 0; height: auto; border-radius: 0; }
  /* Frise du téléphone : les noms en petit sous 01 02 03. */
  .frise-nom, .frise-etape.active .frise-nom { display: block; top: 100%; bottom: auto; margin: -4px 0 0; font-size: 10px; font-weight: 650; color: #e9e1edcc; }
  .frise-etape.active .frise-nom { color: #fff; }
  .voir-etape { flex: 1 1 0; min-width: 0; justify-content: center; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-bande, .vitrine, .vitrine[data-cote] { transition: none; }
}

/* ── Ambiance sonore (01/10, consigne de Loan) ────────────────────────────────
   Un vrai petit cadre en haut à droite de la visite : bouton « Son activé /
   Son coupé », puis deux curseurs légendés. Sur téléphone, il se replie en
   bouton seul (le bouton de réglage le déplie). Jamais sur le menu, la frise,
   les actions, le bouton WhatsApp ni le panneau d'une étape. */
.son-visite { position: fixed; z-index: 21; top: 84px; right: clamp(20px, 4vw, 68px); display: grid; gap: 10px; width: 220px; padding: 10px 12px 12px; border: 1px solid #ffffff26; border-radius: 12px; background: #16131bd9; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 32px #0007; transition: opacity .25s ease; }
.son-tete { display: flex; align-items: center; gap: 8px; }
.son-bouton { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px; border: 1px solid #e9d9ed55; border-radius: 999px; background: #0b0a0fb3; color: var(--texte); font-size: 14px; font-weight: 700; }
.son-bouton:hover { border-color: #dcb8ec99; }
.son-bouton[aria-pressed="true"] { border-color: #dcb8ec99; color: var(--lilas); }
.son-bouton .icon { width: 20px; height: 20px; }
.son-bouton .son-ondes { display: none; }
.son-bouton[aria-pressed="true"] .son-ondes { display: inline; }
.son-bouton[aria-pressed="true"] .son-barre { display: none; }
.son-deplier { display: none; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #e9d9ed55; border-radius: 50%; background: #0b0a0fb3; color: var(--texte); }
.son-deplier[aria-expanded="true"] { border-color: var(--lilas); color: var(--lilas); }
.son-reglages { display: grid; gap: 6px; }
.son-curseur { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; color: #e9e1ed; font-size: 12.5px; font-weight: 650; }
.son-curseur input { width: 100%; min-width: 120px; height: 28px; margin: 0; accent-color: var(--lilas); }
/* Curseurs dessinés (le moteur de Safari ignore accent-color) : rail lisible, pouce lilas bien visible. */
.son-curseur input { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.son-curseur input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #a877c2, var(--lilas)) 0 / var(--rempli, 50%) 100% no-repeat, #ffffff33; }
.son-curseur input::-moz-range-track { height: 6px; border-radius: 3px; background: #ffffff33; }
.son-curseur input::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--lilas); }
.son-curseur input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 2px solid #fff; border-radius: 50%; background: var(--lilas); box-shadow: 0 2px 8px #0008; }
.son-curseur input::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: var(--lilas); }
.son-visite.est-coupe .son-reglages { opacity: .55; }
/* Hors de la visite (02/10) : toujours visible et utilisable, replié en bouton seul pour ne pas couvrir le texte. */
.son-visite.son-compact { width: auto; padding: 6px; gap: 8px; }
.son-visite.son-compact .son-deplier { display: inline-flex; }
.son-visite.son-compact .son-reglages { display: none; width: 200px; padding: 2px 4px 4px; }
.son-visite.son-compact[data-deplie="true"] .son-reglages { display: grid; }
/* Visible partout sur l'accueil, portfolio compris (02/10) ; caché seulement sous l'aide clavier et un panneau plein écran. */
html:has(.aide-clavier:not([hidden])) .son-visite { opacity: 0; pointer-events: none; }
/* Panneau de l'étape 1 (à droite) : le cadre du son passe à gauche, jamais dessous. */
body.spot-open:has(#vitrine[data-cote="droite"]) .son-visite { right: auto; left: clamp(20px, 4vw, 68px); top: 24px; }
body.spot-open:has(#vitrine[data-cote="gauche"]) .son-visite { top: 24px; }
body:has(.vitrine.en-grand) .son-visite, body:has(.vitrine.panneau-plein) .son-visite { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .son-visite { top: 72px; } }
@media (max-height: 500px) and (min-aspect-ratio: 4/5) { .son-visite { top: 60px; } }
@media (max-aspect-ratio: 4/5) {
  .son-visite { top: calc(66px + env(safe-area-inset-top)); right: 12px; width: auto; padding: 6px; gap: 8px; }
  .son-bouton { padding: 0 12px; font-size: 13px; }
  .son-deplier { display: inline-flex; }
  .son-reglages { display: none; width: 200px; padding: 2px 4px 4px; }
  .son-visite[data-deplie="true"] .son-reglages { display: grid; }
  .son-curseur input { min-width: 100px; }
  body.spot-open .son-visite, body.spot-open:has(#vitrine[data-cote]) .son-visite { top: calc(12px + env(safe-area-inset-top)); right: 12px; left: auto; }
}
@media (prefers-reduced-motion: reduce) { .son-visite { transition: none; } }

/* Petits téléphones (320 à 420 px, texte agrandi compris) : « Voir cette étape » passe sur deux lignes
   plutôt que d'être coupé (verrou tests/navigateur/site-ouvertures.test.js, 02/10). */
@media (max-width: 420px) {
  .voir-etape { white-space: normal; line-height: 1.15; text-align: center; }
}

/* Défilement avant la fin du chargement de la visite (02/10, iPhone) : un mot clair, au centre. */
.avis-chargement { position: fixed; left: 50%; top: 42%; z-index: 35; width: min(86vw, 360px); margin: 0; padding: 14px 18px; border: 1px solid #e9d9ed40; border-radius: 12px; background: #0c0b10e6; color: #f6eefa; font-size: 15px; font-weight: 650; line-height: 1.4; text-align: center; transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 12px 30px #0009; }
.avis-chargement[hidden] { display: none; }
/* Téléphone : fiche et tarifs côte à côte (02/10), pour garder les réalisations dans l'écran. */
@media (max-width: 760px) {
  .vitrine-lien.vitrine-boutons { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 8px; align-items: stretch; }
  .vitrine-boutons .bouton-etape { min-height: 44px; padding: 4px 8px; gap: 6px; font-size: 13px; line-height: 1.15; text-align: center; }
  .vitrine-boutons .bouton-etape[hidden] + .bouton-etape { grid-column: 1 / 3; }
  /* Partager : une icône sur la même rangée (son libellé reste lu par les lecteurs d'écran). */
  .vitrine-boutons .bouton-partager { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; border: 1px solid #e9d9ed40; border-radius: 3px; font-size: 18px; }
  .vitrine-boutons .bouton-partager .partager-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Plein écran d'une réalisation (02/10, Loan) : le média de face remplit l'écran, sur fond noir ; seuls
   restent ses commandes (dont « Réduire »). Vrai plein écran du navigateur quand il le permet. */
.vitrine.en-grand, .vitrine[data-etape].en-grand { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none; transform: none; background: #000; }
.vitrine.en-grand :is(.vitrine-voile, .panneau-poignee, .vitrine-sorties, .vitrine-tete, .vitrine-lien, .vitrine-controles, .vitrine-fiche, .etape-actions) { display: none !important; }
.vitrine.en-grand .vitrine-cadre { justify-content: center; padding: calc(8px + env(safe-area-inset-top)) 12px calc(8px + env(safe-area-inset-bottom)); overflow: hidden; background: #000;
  --carte-l: min(calc(100vw - 24px), calc((100dvh - 96px) * 1.7778)); }
.vitrine.en-grand .vitrine-cadre:has(.anneau[data-type="processus"]) { --carte-l: min(calc(100vw - 24px), calc((100dvh - 96px) * 1.7778)); }
.vitrine.en-grand .anneau { margin-top: 0; }
@media (max-width: 760px) {
  .vitrine.en-grand .vitrine-cadre, .vitrine.en-grand .vitrine-cadre:has(.anneau[data-type="processus"]) { --carte-l: min(calc(100vw - 16px), calc((100dvh - 110px) / 1.25)); padding-left: 8px; padding-right: 8px; }
}
/* Téléphone tenu droit : le média se centre dans l'écran, et une vidéo en largeur invite à tourner le
   téléphone (elle remplit alors l'écran). */
@media (max-width: 760px) and (orientation: portrait) {
  .vitrine.en-grand .vitrine-cadre { min-height: 100%; }
  .vitrine.en-grand .media-commandes::after { content: "Tournez le téléphone pour voir en plus grand."; flex-basis: 100%; margin-top: 4px; color: #cfc6d3; font-size: 13px; text-align: center; }
  .vitrine.en-grand .anneau:not([data-type="video-avant-apres"]) ~ .media-commandes::after { content: none; }
}
.vitrine:fullscreen { background: #000; }