/* ==========================================================================
   7MSHOOTS — feuille de style du site
   Idée directrice : le diaphragme du logo. Noir du logo, blanc neutre,
   un seul accent (le point d'enregistrement). Une famille, l'Archivo,
   déclinée de l'étroit au très large.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-v.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-v-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --encre: #0C0C0C;
  --papier: #F1F1EF;
  --accent: #E2341D;
  --blanc: #FFFFFF;

  --encre-2: #171716;
  --encre-3: #232322;
  --gris-f: #5f5f5b;
  --gris: #8a8a85;
  --gris-c: #c9c9c4;
  --papier-2: #e4e4e0;
  --encre-2: color-mix(in srgb, var(--encre) 90%, var(--papier));
  --encre-3: color-mix(in srgb, var(--encre) 80%, var(--papier));
  --gris-f: color-mix(in srgb, var(--encre) 62%, var(--papier));
  --gris: color-mix(in srgb, var(--encre) 45%, var(--papier));
  --gris-c: color-mix(in srgb, var(--encre) 20%, var(--papier));
  --papier-2: color-mix(in srgb, var(--encre) 8%, var(--papier));

  --police: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --cote: clamp(16px, 4.6vw, 64px);
  --max: 1520px;
  --entete: 64px;
  --barre: calc(66px + env(safe-area-inset-bottom, 0px));
  --rapide: 180ms;
  --moyen: 420ms;
  --sortie: cubic-bezier(.2, .7, .1, 1);
  --entree: cubic-bezier(.7, 0, .84, 0);
  --lames: 15deg;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--entete) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  font-stretch: 100%;
  font-kerning: normal;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100vh;
  min-height: 100svh;
}
body.theme-sombre { background: var(--encre); color: var(--papier); }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong, b { font-weight: 700; }
::selection { background: var(--accent); color: var(--blanc); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.evitement {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--encre); color: var(--papier); padding: 10px 14px;
}
.evitement:focus { top: 12px; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------- Mise en page */
.cadre {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--cote);
  container-type: inline-size;
}
.methode-texte, .page-tete-texte, .service-heros > div, .service-texte, .appli-duo > * { container-type: inline-size; }
main { display: block; min-height: 60vh; }
main:focus { outline: none; }

[data-theme="sombre"] { background: var(--encre); color: var(--papier); }
[data-theme="clair"] { background: var(--papier); color: var(--encre); }
[data-theme] { position: relative; }

section { position: relative; }

/* Grain argentique sur les fonds sombres */
html[data-grain="1"] [data-theme="sombre"]::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  mix-blend-mode: screen;
  z-index: 1;
}
.pied::after { display: none !important; }

/* --------------------------------------------------------------- Typographie */
.titre-xxl, .titre-xl, .titre-l, .titre-m {
  font-family: var(--police);
  text-wrap: balance;
  font-kerning: normal;
}
.titre-xxl { --car: .94; --taille: clamp(2.4rem, 8.6vw, 10.4rem); font-size: var(--taille); line-height: .96; overflow-wrap: break-word; }
.titre-xl { --car: .94; --taille: clamp(1.9rem, 5.2vw, 5.6rem); font-size: var(--taille); line-height: .98; overflow-wrap: break-word; }
@supports (width: 1cqi) {
  .titre-xxl[style*="--mot"], .titre-xl[style*="--mot"] { font-size: min(var(--taille), calc(100cqi / (var(--mot) * var(--car)))); }
}
.titre-l { font-size: clamp(1.6rem, 3.4vw, 3.4rem); line-height: 1.08; }
.titre-m { font-size: clamp(1.25rem, 1.9vw, 1.8rem); line-height: 1.18; }

html[data-titres="large"] .titre-xxl { font-stretch: 125%; font-weight: 900; letter-spacing: -.012em; }
html[data-titres="large"] .titre-xl { font-stretch: 125%; font-weight: 850; letter-spacing: -.012em; }
html[data-titres="large"] .titre-l { font-stretch: 108%; font-weight: 700; letter-spacing: -.01em; }
html[data-titres="large"] .titre-m { font-stretch: 112%; font-weight: 750; }
html[data-titres="classique"] .titre-xxl,
html[data-titres="classique"] .titre-xl { font-stretch: 100%; font-weight: 800; letter-spacing: -.03em; --car: .78; }
html[data-titres="classique"] .titre-l { font-stretch: 100%; font-weight: 700; letter-spacing: -.02em; }
html[data-titres="classique"] .titre-m { font-stretch: 100%; font-weight: 700; }
html[data-titres="etroit"] .titre-xxl { font-stretch: 62%; font-weight: 300; letter-spacing: 0; line-height: .92; --taille: clamp(3.2rem, 13vw, 14rem); --car: .54; }
html[data-titres="etroit"] .titre-xl { font-stretch: 62%; font-weight: 350; letter-spacing: 0; --taille: clamp(2.5rem, 7vw, 7.4rem); --car: .54; }
html[data-titres="etroit"] .titre-l { font-stretch: 75%; font-weight: 400; }
html[data-titres="etroit"] .titre-m { font-stretch: 75%; font-weight: 500; }
html[data-capitales="1"] .titre-xxl,
html[data-capitales="1"] .titre-xl { text-transform: uppercase; }

.chapeau { font-size: clamp(1.12rem, 1.5vw, 1.4rem); line-height: 1.5; }
.petit { font-size: .875rem; }
.etroit { font-stretch: 70%; }
.marque {
  font-stretch: 75%;
  font-weight: 600;
  font-size: .9rem;
}
.legende {
  display: inline-flex; align-items: center; gap: 10px;
  font-stretch: 75%; font-weight: 500;
  font-size: .95rem; letter-spacing: .02em;
  color: color-mix(in srgb, currentColor 72%, transparent);
}
.rec {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
}
.album-direct .rec { animation: rec 1.6s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .25; } }
html.calme .rec { animation: none; }

.sec-tete {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.sec-sous { max-width: 36ch; color: color-mix(in srgb, currentColor 70%, transparent); }

/* --------------------------------------------------------------- Liens et boutons */
.lien-fleche {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 650; font-stretch: 105%;
  text-decoration: none;
  padding-block: 6px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size var(--moyen) var(--sortie);
}
.lien-fleche .ic { width: 20px; height: 20px; transition: transform var(--moyen) var(--sortie); }
.lien-fleche:hover { background-size: 100% 1.5px; }
.lien-fleche:hover .ic { transform: translateX(4px); }

.lien-bouton {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}

.btn {
  --fond: var(--encre); --texte: var(--papier); --bord: var(--encre);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 24px;
  border: 1.5px solid var(--bord);
  background: var(--fond); color: var(--texte);
  font-weight: 700; font-stretch: 108%; font-size: 1rem; letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  overflow: hidden; isolation: isolate;
  transition: color var(--moyen) var(--sortie), border-color var(--moyen) var(--sortie);
  -webkit-tap-highlight-color: transparent;
}
.btn .ic { width: 20px; height: 20px; flex: none; }
/* Le survol balaie le bouton en biais, à l'angle des lames du logo */
.btn::before {
  content: ""; position: absolute; inset: -2px -30%;
  background: var(--balayage, var(--accent));
  transform: translateX(-102%) skewX(calc(-1 * var(--lames)));
  transition: transform var(--moyen) var(--sortie);
  z-index: -1;
}
.btn:focus-visible::before { transform: translateX(0) skewX(calc(-1 * var(--lames))); }
@media (hover: hover) {
  .btn:hover::before { transform: translateX(0) skewX(calc(-1 * var(--lames))); }
  .btn:hover { color: var(--blanc); border-color: var(--balayage, var(--accent)); }
}
.btn:active { transform: translateY(1px); }
.btn-clair { --fond: var(--papier); --texte: var(--encre); --bord: var(--papier); }
.btn-trait { --fond: transparent; --texte: currentColor; --bord: currentColor; color: inherit; }
[data-theme="sombre"] .btn-trait, .theme-sombre .btn-trait { --balayage: var(--papier); }
@media (hover: hover) { [data-theme="sombre"] .btn-trait:hover { color: var(--encre); border-color: var(--papier); } }
[data-theme="clair"] .btn-trait { --balayage: var(--encre); }
@media (hover: hover) { [data-theme="clair"] .btn-trait:hover { color: var(--papier); border-color: var(--encre); } }
.btn-accent { --fond: var(--accent); --texte: var(--blanc); --bord: var(--accent); --balayage: var(--papier); }
@media (hover: hover) { .btn-accent:hover { color: var(--encre); border-color: var(--papier); } }
.btn-petit { min-height: 42px; padding: 0 16px; font-size: .92rem; }
.btn-ligne { --fond: transparent; --texte: currentColor; --bord: color-mix(in srgb, currentColor 30%, transparent); color: inherit; }
html.calme .btn::before { transition: none; }

/* --------------------------------------------------------------- Rideau (transition entre pages) */
.rideau {
  position: fixed; inset: 0; z-index: 150;
  pointer-events: none;
  display: none;
}
.rideau canvas { width: 100%; height: 100%; }
html.entree .rideau { display: block; background: var(--encre); }
.rideau.actif { display: block; }

/* --------------------------------------------------------------- Ouverture (première visite) */
.intro { display: none; }
html.avec-intro .intro {
  position: fixed; inset: 0; z-index: 160;
  display: grid; place-items: center;
  background: var(--encre); color: var(--papier);
}
.intro-iris { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-logo { position: relative; width: min(56vw, 360px); opacity: 0; transform: scale(.92); }
.intro-logo .logo-svg { width: 100%; height: auto; }
.intro-passer {
  position: absolute; right: var(--cote); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  background: none; border: 0; color: var(--gris-c); cursor: pointer;
  font-stretch: 75%; font-weight: 600; font-size: .95rem; text-decoration: underline; text-underline-offset: 4px;
}
html.avec-intro body { overflow: hidden; }

/* --------------------------------------------------------------- En-tête */
.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: calc(var(--entete) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--encre);
  transition: transform var(--moyen) var(--sortie), background-color var(--moyen) var(--sortie), color var(--moyen) var(--sortie);
}
.entete[data-sur="sombre"] { color: var(--papier); }
.entete.solide[data-sur="clair"] { background: color-mix(in srgb, var(--papier) 94%, transparent); }
.entete.solide[data-sur="sombre"] { background: color-mix(in srgb, var(--encre) 92%, transparent); }
.entete.solide { -webkit-backdrop-filter: saturate(1.2); backdrop-filter: saturate(1.2); }
.entete.solide::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.entete.cachee { transform: translateY(-110%); }
.entete-int {
  height: var(--entete);
  max-width: var(--max); margin: 0 auto; padding-inline: var(--cote);
  display: flex; align-items: center; gap: 24px;
}
.entete-logo { display: block; width: 86px; flex: none; color: inherit; }
.entete-logo .logo-svg, .entete-logo .logo-img { width: 100%; height: auto; }
.entete[data-sur="sombre"] .logo-img.logo-auto { filter: invert(1); }
.logo-sombre { display: none; }
.entete[data-sur="sombre"] .logo-clair { display: none; }
.entete[data-sur="sombre"] .logo-sombre { display: block; }
.logo-inverse.logo-img { filter: invert(1); }

.nav-principale { display: none; }
.entete-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.lien-espace {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-weight: 600; font-size: .95rem;
}
.lien-espace .ic { width: 22px; height: 22px; }
.lien-espace span { display: none; }
.btn-entete { display: none; min-height: 44px; padding: 0 18px; font-size: .92rem; }
.entete[data-sur="sombre"] .btn-entete { --fond: var(--papier); --texte: var(--encre); --bord: var(--papier); }
.btn-entete .rec { width: 8px; height: 8px; }

@media (min-width: 1100px) {
  :root { --entete: 78px; }
  .entete-logo { width: 98px; }
  .nav-principale { display: flex; gap: clamp(18px, 2vw, 34px); margin-left: clamp(24px, 4vw, 64px); }
  .nav-principale a {
    position: relative; text-decoration: none;
    font-weight: 560; font-size: .98rem; padding: 8px 0;
  }
  .nav-principale a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px;
    background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform var(--moyen) var(--sortie);
  }
  .nav-principale a:hover::after { transform: scaleX(1); transform-origin: left; }
  .nav-principale a[aria-current="page"]::before {
    content: ""; position: absolute; left: 50%; top: -6px; width: 6px; height: 6px; margin-left: -3px;
    border-radius: 50%; background: var(--accent);
  }
  .btn-entete { display: inline-flex; }
}
/* Les libellés des accès clients apparaissent quand la place le permet */
@media (min-width: 1440px) { .lien-espace span { display: inline; } .entete-actions { gap: 22px; } }
.lien-espace { position: relative; }
@media (min-width: 1100px) and (max-width: 1439px) {
  .lien-espace span { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 5px 9px; background: var(--encre); color: var(--papier); font-size: .82rem; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .lien-espace:hover span, .lien-espace:focus-visible span { display: inline; opacity: 1; }
  .lien-espace span { display: inline; }
}

/* --------------------------------------------------------------- Barre d'application (téléphone) */
.barre-appli {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  height: var(--barre);
  padding: 0 6px env(safe-area-inset-bottom, 0px);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
  background: color-mix(in srgb, var(--encre) 96%, transparent);
  color: var(--gris-c);
  border-top: 1px solid color-mix(in srgb, var(--papier) 10%, transparent);
  transition: transform var(--moyen) var(--sortie);
}
.barre-appli a, .barre-appli button {
  appearance: none; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; font-size: .7rem; font-weight: 600; font-stretch: 85%; letter-spacing: .01em;
  color: inherit; -webkit-tap-highlight-color: transparent;
  position: relative;
}
.barre-appli .ic { width: 23px; height: 23px; }
.barre-appli [aria-current="page"] { color: var(--papier); }
.barre-appli [aria-current="page"]::before {
  content: ""; position: absolute; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  transform: translateY(-2px);
}
.barre-appli [aria-current="page"] .ic { visibility: visible; }
.barre-declencheur { margin-top: -18px; }
.declencheur-mini {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--papier);
  display: grid; place-items: center;
  box-shadow: 0 0 0 5px var(--encre), 0 0 0 6px color-mix(in srgb, var(--papier) 18%, transparent);
  transition: transform var(--rapide) var(--sortie);
}
.declencheur-mini i { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); border: 2px solid var(--encre); }
.barre-declencheur:active .declencheur-mini { transform: scale(.92); }
.barre-declencheur[aria-current="page"]::before { display: none; }
@media (min-width: 1100px) { .barre-appli { display: none; } }
@media (max-width: 1099px) {
  body { padding-bottom: var(--barre); }
  .barre-appli.cachee { transform: translateY(100%); }
}

/* Feuille « Plus » */
.feuille { position: fixed; inset: 0; z-index: 120; }
.feuille-voile { position: absolute; inset: 0; background: rgb(0 0 0 / .55); opacity: 0; transition: opacity var(--moyen) var(--sortie); }
.feuille-panneau {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88vh; overflow: auto; overscroll-behavior: contain;
  background: var(--encre); color: var(--papier);
  padding: 10px var(--cote) calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform var(--moyen) var(--sortie);
  clip-path: polygon(0 18px, 100% 0, 100% 100%, 0 100%);
  padding-top: 26px;
}
.feuille.ouverte .feuille-voile { opacity: 1; }
.feuille.ouverte .feuille-panneau { transform: translateY(0); }
.feuille-poignee { width: 44px; height: 4px; background: var(--encre-3); margin: 0 auto 18px; }
.feuille-nav { display: grid; }
.feuille-nav a {
  text-decoration: none; padding: 12px 0;
  font-size: clamp(1.9rem, 9vw, 2.6rem); font-weight: 850; font-stretch: 120%; line-height: 1.05;
  text-transform: uppercase;
  border-bottom: 1px solid color-mix(in srgb, var(--papier) 10%, transparent);
}
.feuille-raccourcis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.feuille-raccourcis a[href$="/retrouver"] { grid-column: 1 / -1; }
.feuille-raccourcis a {
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 14px;
  background: var(--encre-2); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.feuille-raccourcis .ic { width: 22px; height: 22px; color: var(--gris-c); }

/* WhatsApp flottant */
.wa-flottant {
  position: fixed; right: 14px; bottom: calc(var(--barre) + 14px); z-index: 80;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 16px 0 14px;
  background: var(--papier); color: var(--encre);
  text-decoration: none; font-weight: 700; font-size: .92rem;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / .45);
  transition: transform var(--moyen) var(--sortie), opacity var(--moyen);
}
.wa-flottant .ic { width: 22px; height: 22px; }
.wa-flottant span { display: none; }
@media (min-width: 1100px) {
  .wa-flottant { bottom: 24px; right: 24px; }
  .wa-flottant span { display: inline; }
}
.wa-flottant.cachee { transform: translateY(160%); opacity: 0; }
.mode-appli .wa-flottant { display: none; }

/* Toasts */
.toasts {
  position: fixed; left: 50%; top: calc(var(--entete) + 12px + env(safe-area-inset-top, 0px)); z-index: 170;
  transform: translateX(-50%);
  display: grid; gap: 8px; width: min(92vw, 520px); pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; background: var(--encre); color: var(--papier);
  border: 1px solid color-mix(in srgb, var(--papier) 16%, transparent);
  box-shadow: 0 16px 40px -16px rgb(0 0 0 / .5);
  font-weight: 550; line-height: 1.4;
  animation: toast-in var(--moyen) var(--sortie);
}
.toast .ic { color: var(--accent); }
.toast.ok .ic { color: #3fb26b; }
.toast .ic { width: 22px; height: 22px; flex: none; margin-top: 1px; }
@keyframes toast-in { from { transform: translateY(-12px); opacity: 0; } }

/* --------------------------------------------------------------- Héros */
.heros {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
}
.heros-epingle {
  flex: 1;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  padding-top: calc(var(--entete) + env(safe-area-inset-top, 0px) + 6px);
  padding-bottom: 18px;
}
.heros-scene {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: 14px;
  position: relative; z-index: 2;
}
.heros-texte { display: contents; }
.heros .legende { order: 2; }
.heros-titre { order: 3; color: var(--papier); }
.heros-titre .ligne { display: block; padding-bottom: .02em; }
.heros-titre .ligne > span { display: inline-block; padding-top: .08em; }
.heros-intro {
  order: 4;
  max-width: 44ch;
  color: color-mix(in srgb, var(--papier) 76%, transparent);
  font-size: clamp(.98rem, 1.2vw, 1.15rem);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.heros-actions { order: 5; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.heros-actions .btn { flex: 1 1 0; padding: 0 10px; min-height: 48px; font-size: .92rem; white-space: nowrap; }
.heros-actions .btn .ic { display: none; }

.objectif {
  order: 1;
  position: relative;
  width: min(62vw, 33vh, 420px);
  aspect-ratio: 1;
  align-self: center;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  margin-bottom: 26px;
}
.objectif-cadre { position: absolute; inset: 0; }
.objectif-photos {
  position: absolute; inset: 9.5%;
  border-radius: 50%; overflow: hidden;
  background: var(--encre-2);
}
.objectif-photo, .objectif-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
}
.objectif-photo.est-visible, .objectif-video.est-visible { opacity: 1; transform: scale(1); transition: transform 3.6s linear; }
.objectif-iris { position: absolute; inset: 9.5%; width: 81%; height: 81%; }
.objectif-bague { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--papier); overflow: visible; }
.bague-trait { fill: none; stroke: color-mix(in srgb, var(--papier) 26%, transparent); stroke-width: 1; }
.bague-trait.fin { stroke-width: .6; stroke-dasharray: 1 5.2; stroke: color-mix(in srgb, var(--papier) 50%, transparent); }
.bague-graduations line { stroke: color-mix(in srgb, var(--papier) 45%, transparent); stroke-width: 1; }
.bague-graduations line.longue { stroke: var(--papier); stroke-width: 1.4; }
.bague-texte { fill: color-mix(in srgb, var(--papier) 70%, transparent); font-size: 11.5px; font-weight: 600; font-stretch: 70%; letter-spacing: .18em; }
.objectif-lecture {
  position: absolute; left: 50%; bottom: -4px; transform: translate(-50%, 100%);
  display: flex; gap: 18px; white-space: nowrap;
  font-stretch: 62%; font-weight: 600; font-size: .85rem; letter-spacing: .12em;
  color: var(--gris-c);
}
.lecture-f { color: var(--papier); min-width: 5.2ch; }
.lecture-v { min-width: 6ch; }
.lecture-vue, .lecture-v { display: inline-block; overflow: hidden; vertical-align: bottom; }
.roule { display: inline-block; animation: roule 380ms var(--sortie); }
@keyframes roule { from { transform: translateY(105%); } }
.lecture-f::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }
.objectif-aide { display: none; }

@media (max-width: 1099px) { .heros { min-height: calc(100svh - var(--barre)); } .heros-epingle { padding-bottom: 14px; } }
@media (max-height: 760px) and (max-width: 1023px) { .heros-intro { display: none; } }
@media (min-width: 720px) and (max-width: 1023px) {
  .objectif { width: min(56vw, 40vh); }
  .heros-actions .btn { flex: 0 0 auto; padding: 0 24px; }
}
@media (min-width: 1024px) {
  .heros-epingle { padding-bottom: 28px; }
  .heros-scene { justify-content: flex-end; gap: 0; padding-bottom: 6vh; }
  .heros .legende { order: 1; margin-bottom: 18px; }
  .heros-titre { order: 2; position: relative; z-index: 2; mix-blend-mode: difference; color: #fff; pointer-events: none; text-wrap: nowrap; }
  @supports (width: 1cqi) { .heros-titre[style*="--ligne"] { font-size: min(var(--taille), calc(100cqi / (var(--ligne) * var(--car))), 19vh); } }
  .heros-intro { order: 3; margin-top: 30px; max-width: 40ch; display: block; }
  .heros-actions { order: 4; margin-top: 26px; gap: 10px; }
  .heros-actions .btn { flex: 0 0 auto; padding: 0 24px; min-height: 52px; font-size: 1rem; }
  .heros-actions .btn .ic { display: block; }
  .objectif {
    position: absolute; z-index: 1;
    right: calc(-1 * clamp(0px, 4vw, 90px)); top: 50%;
    width: min(48vw, 82vh, 860px);
    transform: translateY(-50%);
    margin: 0;
  }
  .objectif-aide {
    display: block; position: absolute; left: 50%; top: -4px; transform: translate(-50%, -100%);
    font-stretch: 75%; font-size: .88rem; color: var(--gris);
  }
}

/* Mise au point des titres : du flou au net */
[data-mise-au-point] .ligne > span { filter: blur(0); }
html.js [data-mise-au-point]:not(.net) .ligne > span { filter: blur(18px); opacity: .2; transform: translateY(.18em); }
html.js [data-mise-au-point] .ligne > span {
  transition: filter 900ms var(--sortie), opacity 900ms var(--sortie), transform 900ms var(--sortie);
}
[data-mise-au-point] .ligne:nth-child(2) > span { transition-delay: 120ms; }
[data-mise-au-point] .ligne:nth-child(3) > span { transition-delay: 240ms; }
html.calme [data-mise-au-point] .ligne > span { filter: none !important; opacity: 1 !important; transform: none !important; }

/* --------------------------------------------------------------- Vision */
.vision { padding: clamp(72px, 12vw, 180px) 0 clamp(64px, 9vw, 140px); }
.vision-phrase { max-width: 24ch; }
@media (min-width: 1024px) { .vision-phrase { max-width: 27ch; font-size: clamp(2.2rem, 3.9vw, 4.2rem); } }
.vision-phrase .mot { display: inline-block; transition: filter 200ms linear, opacity 200ms linear; will-change: filter; }
.vision-bas {
  display: grid; gap: 32px; margin-top: clamp(40px, 7vw, 110px);
}
.vision-image { aspect-ratio: 4 / 5; overflow: hidden; background: var(--papier-2); }
.vision-image img { width: 100%; height: 100%; object-fit: cover; }
.vision-texte { display: grid; gap: 22px; align-content: start; max-width: 54ch; }
@media (min-width: 900px) {
  .vision-bas { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 120px); align-items: end; }
  .vision-image { aspect-ratio: 4 / 5; transform: translateY(var(--para, 0)); }
  .vision-texte { padding-bottom: 6vw; }
}

/* --------------------------------------------------------------- Pellicule (services) */
.pellicule { padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 8vw, 110px); overflow: clip; }
.pellicule-tete { display: grid; gap: 18px; margin-bottom: clamp(26px, 3vw, 44px); }
.pellicule-sous { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline; }
.pellicule-tete p { color: color-mix(in srgb, var(--papier) 72%, transparent); max-width: 46ch; margin-bottom: 12px; }
.pellicule-bande {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: var(--cote);
  scroll-padding-inline: var(--cote);
}
.pellicule-bande::-webkit-scrollbar { display: none; }
.pellicule-piste {
  display: flex; gap: 0;
  width: max-content;
  background: #050505;
  padding: 0 6px;
}
.vue {
  flex: none;
  width: min(78vw, 420px);
  scroll-snap-align: start;
  background: #050505;
  padding: 0 6px;
}
.vue > a {
  display: grid; grid-template-rows: auto auto 1fr auto;
  height: 100%;
  text-decoration: none; color: var(--papier);
}
.vue-bord {
  display: flex; justify-content: space-between; align-items: center;
  height: 34px; padding: 0 10px;
  font-stretch: 62%; font-weight: 600; font-size: .66rem; letter-spacing: .16em;
  color: #e9a23b;
  /* perforations de la pellicule */
  background:
    radial-gradient(circle at 50% 50%, transparent 0, transparent 0) ,
    repeating-linear-gradient(90deg, transparent 0 9px, color-mix(in srgb, var(--papier) 82%, transparent) 9px 19px, transparent 19px 28px) 0 50% / 100% 12px no-repeat;
  -webkit-mask: linear-gradient(#000, #000);
}
.vue-bord b { background: #050505; padding: 0 6px; font-weight: 600; position: relative; z-index: 1; }
.vue-image {
  aspect-ratio: 3 / 2; overflow: hidden; background: var(--encre-2);
  border-radius: 6px;
}
.vue-image img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transform: scale(1.04);
  transition: filter 700ms var(--sortie), transform 1.2s var(--sortie);
}
.vue > a:hover .vue-image img, .vue.au-centre .vue-image img { filter: none; transform: scale(1); }
.vue-corps { display: grid; gap: 8px; align-content: start; padding: 18px 8px 22px; min-height: 210px; }
.vue-num { font-stretch: 62%; font-weight: 600; font-size: .8rem; letter-spacing: .14em; color: var(--accent); }
.vue-titre { font-size: clamp(1.2rem, 1.9vw, 1.7rem); font-weight: 820; font-stretch: 104%; line-height: 1.05; text-transform: uppercase; overflow-wrap: break-word; }
.vue-accroche { color: color-mix(in srgb, var(--papier) 70%, transparent); font-size: .98rem; line-height: 1.45; }
.vue-prix { margin-top: 6px; font-weight: 650; font-stretch: 90%; }
.vue-fin { width: min(78vw, 380px); }
.vue-fin > a { grid-template-rows: 1fr; align-items: center; background: var(--encre-2); margin: 34px 0; border-radius: 6px; }
.vue-fin .vue-corps { padding: 28px; gap: 16px; }
.vue-fin .btn { justify-self: start; margin-top: 8px; }

@media (min-width: 1024px) {
  .pellicule-tete .titre-xl { --taille: clamp(1.9rem, 4.4vw, 4.6rem); }
  html.js:not(.calme) .pellicule[data-epingle] { padding: 0; }
  html.js:not(.calme) .pellicule[data-epingle] .pellicule-scene {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
  }
  html.js:not(.calme) .pellicule[data-epingle] .pellicule-bande { overflow: visible; scroll-snap-type: none; }
  html.js:not(.calme) .pellicule[data-epingle] .pellicule-piste { will-change: transform; }
  .vue { width: clamp(340px, 27vw, 440px); }
}

/* --------------------------------------------------------------- Négatif qui se développe */
html.js[data-negatif="1"]:not(.calme) .developpe img {
  filter: invert(1) sepia(.55) saturate(2.4) hue-rotate(168deg) contrast(.88) brightness(.92);
  transform: scale(1.05);
  transition: filter 1500ms cubic-bezier(.3,.1,.2,1), transform 1700ms var(--sortie);
}
html.js[data-negatif="1"]:not(.calme) .developpe.revele img { filter: none; transform: none; }

/* --------------------------------------------------------------- Planche contact */
.planche-sec { padding: clamp(72px, 10vw, 150px) 0; }
.planche {
  background: #0a0a0a; color: var(--papier);
  padding: 14px 10px 18px;
  transform: rotate(-.4deg);
  box-shadow: 0 30px 60px -40px rgb(0 0 0 / .6);
}
.planche-marge {
  display: flex; justify-content: space-between;
  font-stretch: 62%; font-weight: 600; font-size: .66rem; letter-spacing: .2em; color: #e9a23b;
  padding: 0 6px 10px;
}
.planche-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 8px; }
.planche-vue a { display: block; position: relative; text-decoration: none; }
.planche-vue img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--encre-2); }
.planche-num {
  display: block; margin-top: 4px;
  font-stretch: 62%; font-size: .66rem; font-weight: 600; letter-spacing: .16em; color: #e9a23b;
}
.planche-legende {
  position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: 12px;
  background: linear-gradient(transparent 45%, rgb(0 0 0 / .78));
  opacity: 0; transition: opacity var(--moyen) var(--sortie);
}
.planche-legende b { font-weight: 750; font-stretch: 105%; line-height: 1.15; font-size: .98rem; }
.planche-legende i { font-style: normal; color: var(--gris-c); font-size: .82rem; }
.planche-vue a:hover .planche-legende, .planche-vue a:focus-visible .planche-legende { opacity: 1; }
.crayon {
  position: absolute; pointer-events: none; overflow: visible; z-index: 2;
  color: var(--accent);
}
.crayon path {
  fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: .92;
  stroke-dasharray: var(--l, 1000); stroke-dashoffset: var(--l, 1000);
  transition: stroke-dashoffset 900ms cubic-bezier(.6,.1,.3,1);
}
.crayon.trace path { stroke-dashoffset: 0; }
@media (min-width: 720px) {
  .planche { padding: 18px 16px 22px; }
  .planche-grille { grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
}
@media (hover: none) {
  .planche-legende { opacity: 1; background: linear-gradient(transparent 60%, rgb(0 0 0 / .7)); }
  .planche-legende i { display: none; }
}

/* --------------------------------------------------------------- Méthode (diaphragme en six étapes) */
.methode { padding: clamp(72px, 10vw, 150px) 0; }
.methode-grille { display: grid; gap: 34px; }
.methode-scene {
  position: sticky; top: calc(var(--entete) + 8px); z-index: 2;
  height: min(46vh, 86vw); display: grid; place-items: center;
  background: var(--encre);
  margin-inline: calc(-1 * var(--cote)); padding: 6px 0 10px;
}
.methode-iris { position: relative; height: 100%; aspect-ratio: 1; }
.methode-photo { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--encre-2); }
.methode-photo img { width: 100%; height: 100%; object-fit: cover; }
.methode-iris canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.methode-f {
  position: absolute; right: -6%; bottom: 4%;
  font-stretch: 62%; font-weight: 600; letter-spacing: .1em; font-size: .95rem; color: var(--papier);
  background: var(--encre); padding: 4px 8px;
}
.methode-f::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }
.methode-texte h2 { margin-bottom: 28px; }
.etape {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px;
  padding: 26px 0 34px;
  border-top: 1px solid color-mix(in srgb, var(--papier) 14%, transparent);
  min-height: 34vh;
  opacity: .32; transition: opacity var(--moyen) var(--sortie);
}
.etape.active { opacity: 1; }
.etape-num { font-stretch: 62%; font-weight: 600; letter-spacing: .12em; color: var(--accent); padding-top: .45em; }
.etape h3 { font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: 850; font-stretch: 120%; text-transform: uppercase; line-height: 1; }
.etape p { grid-column: 2; color: color-mix(in srgb, var(--papier) 76%, transparent); max-width: 40ch; font-size: 1.08rem; }
@media (min-width: 1024px) {
  .methode-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
  .methode-scene { height: calc(100vh - var(--entete) - 40px); top: calc(var(--entete) + 20px); margin: 0; background: none; }
  .methode-iris { height: auto; width: min(100%, 72vh); }
  .etape { min-height: 52vh; padding-top: 34px; }
}
html.calme .etape { opacity: 1; }

/* --------------------------------------------------------------- Univers */
.univers { padding: clamp(72px, 10vw, 150px) 0; }
.univers-titre { margin-bottom: clamp(28px, 4vw, 56px); max-width: 16ch; }
.univers-liste { border-top: 1.5px solid var(--encre); }
.univers-ligne {
  display: grid; grid-template-columns: 2.4em 1fr; gap: 4px 12px; align-items: baseline;
  padding: 18px 0 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--encre) 16%, transparent);
  cursor: default; outline: none;
  position: relative;
}
.u-num { font-stretch: 62%; font-weight: 600; letter-spacing: .12em; font-size: .8rem; color: var(--gris-f); }
.u-nom {
  font-size: clamp(1.45rem, 3.4vw, 3.4rem); line-height: 1; font-weight: 850; font-stretch: 118%; text-transform: uppercase;
  transition: transform var(--moyen) var(--sortie), color var(--moyen);
}
.u-desc { grid-column: 2; color: var(--gris-f); max-width: 46ch; }
.u-image { display: none; }
.univers-ligne.ouverte .u-image { display: block; grid-column: 1 / -1; margin-top: 12px; aspect-ratio: 16 / 9; overflow: hidden; }
.univers-ligne.ouverte .u-image img { width: 100%; height: 100%; object-fit: cover; }
.viseur {
  position: fixed; left: 0; top: 0; z-index: 40;
  width: 300px; aspect-ratio: 4 / 5;
  pointer-events: none;
  opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.9);
  transition: opacity 260ms var(--sortie), transform 260ms var(--sortie);
}
.viseur img { width: 100%; height: 100%; object-fit: cover; }
.viseur.visible { opacity: 1; }
.viseur .af { position: absolute; width: 22px; height: 22px; border: 0 solid var(--papier); transition: all 380ms var(--sortie); }
.viseur .a1 { left: 18%; top: 18%; border-left-width: 2px; border-top-width: 2px; }
.viseur .a2 { right: 18%; top: 18%; border-right-width: 2px; border-top-width: 2px; }
.viseur .a3 { left: 18%; bottom: 18%; border-left-width: 2px; border-bottom-width: 2px; }
.viseur .a4 { right: 18%; bottom: 18%; border-right-width: 2px; border-bottom-width: 2px; }
.viseur.net .a1 { left: 36%; top: 36%; border-color: var(--accent); }
.viseur.net .a2 { right: 36%; top: 36%; border-color: var(--accent); }
.viseur.net .a3 { left: 36%; bottom: 36%; border-color: var(--accent); }
.viseur.net .a4 { right: 36%; bottom: 36%; border-color: var(--accent); }
.viseur-point { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity 200ms 300ms; }
.viseur.net .viseur-point { opacity: 1; }
@media (hover: hover) and (min-width: 1024px) {
  .univers-ligne { grid-template-columns: 4em minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; padding: 26px 0; cursor: crosshair; }
  .u-desc { grid-column: 3; justify-self: end; text-align: right; }
  .univers-ligne:hover .u-nom { transform: translateX(14px); }
  .univers-ligne:hover .u-num { color: var(--accent); }
}

/* --------------------------------------------------------------- Abonnements et formules */
.abonnements { padding: clamp(72px, 10vw, 150px) 0; }
.abos { display: grid; gap: 14px; }
.abo {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px 22px 24px;
  background: var(--encre-2);
}
.abo-conseil { background: var(--papier); color: var(--encre); }
.abo-nom { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: 1; }
.abo-nom > span { position: relative; display: inline-block; }
.abo-note { font-style: normal; font-size: .82rem; font-weight: 600; font-stretch: 80%; letter-spacing: .02em; text-transform: none; color: var(--accent); transform: rotate(-4deg); }
.abo-prix { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 300; font-stretch: 75%; line-height: 1; letter-spacing: -.01em; }
.abo-prix small { font-size: .9rem; font-weight: 500; font-stretch: 90%; letter-spacing: 0; color: var(--gris); }
.abo-cible { color: color-mix(in srgb, currentColor 72%, transparent); }
.abo-liste { display: grid; gap: 8px; margin-bottom: 8px; }
.abo-liste li { padding-left: 22px; position: relative; }
.abo-liste li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 1.5px; background: currentColor; transform: rotate(calc(-1 * var(--lames))); }
.abo .btn { margin-top: auto; align-self: flex-start; }
.abo-conseil .btn-accent:hover { color: var(--blanc); }
.abo-conseil .btn-accent { --balayage: var(--encre); }
.abos-bas { margin-top: 28px; }
@media (min-width: 900px) {
  .abos { grid-template-columns: 1fr 1.12fr 1fr; align-items: stretch; gap: 0; }
  .abo { padding: 34px 30px; }
  .abo-conseil { margin-block: -22px; padding-block: 56px; z-index: 1; }
}

/* --------------------------------------------------------------- Raisons */
.raisons { padding: clamp(72px, 10vw, 150px) 0; }
.raisons-titre { max-width: 17ch; margin-bottom: clamp(36px, 5vw, 72px); }
.raisons-liste { display: grid; }
.raison {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 18px;
  padding: 22px 0;
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.raison-num {
  grid-row: span 2;
  font-size: clamp(3rem, 7vw, 6.5rem); line-height: .8; font-weight: 200; font-stretch: 62%;
  min-width: .9em;
  color: color-mix(in srgb, currentColor 30%, transparent);
  transition: color var(--moyen);
}
.raison:hover .raison-num { color: var(--accent); }
.raison h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 780; font-stretch: 112%; line-height: 1.12; align-self: end; }
.raison p { color: var(--gris-f); max-width: 52ch; }
[data-theme="sombre"] .raison p { color: color-mix(in srgb, var(--papier) 72%, transparent); }
@media (min-width: 1024px) {
  .raisons-liste { grid-template-columns: repeat(6, 1fr); column-gap: 32px; }
  .raison { grid-column: span 2; grid-template-columns: 1fr; padding: 28px 0 40px; }
  .raison:nth-child(4) { grid-column: 2 / span 2; }
  .raison-num { grid-row: auto; margin-bottom: 18px; }
}

/* --------------------------------------------------------------- Témoignages et partenaires */
.temoignages { padding: clamp(72px, 10vw, 140px) 0; }
.temoignages h2 { margin-bottom: 36px; }
.temoins { display: grid; grid-auto-flow: column; grid-auto-columns: min(86vw, 520px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.temoins::-webkit-scrollbar { display: none; }
.temoin { scroll-snap-align: start; padding: 28px; background: var(--encre-2); display: flex; flex-direction: column; gap: 22px; }
.temoin blockquote p { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; }
.temoin blockquote p::before { content: "« "; }
.temoin blockquote p::after { content: " »"; }
.temoin figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.temoin figcaption span:last-child { display: grid; }
.temoin figcaption i { font-style: normal; color: var(--gris); font-size: .9rem; }
.temoin-photo img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.partenaires { padding: 56px 0; border-top: 1px solid color-mix(in srgb, var(--encre) 12%, transparent); }
.partenaires h2 { margin-bottom: 26px; }
.partenaires-liste { display: flex; flex-wrap: wrap; gap: 26px 48px; align-items: center; }
.partenaires-liste img { max-height: 46px; width: auto; filter: grayscale(1); opacity: .8; transition: filter var(--moyen), opacity var(--moyen); }
.partenaires-liste a:hover img { filter: none; opacity: 1; }

/* --------------------------------------------------------------- Journal */
.journal-sec { padding: clamp(72px, 10vw, 140px) 0; }
.articles-grille { display: grid; gap: 40px 28px; }
.carte-article a { display: grid; gap: 12px; text-decoration: none; }
.carte-article figure { aspect-ratio: 3 / 2; overflow: hidden; background: var(--papier-2); }
.carte-article img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sortie); }
.carte-article a:hover img { transform: scale(1.04); }
.carte-meta { display: flex; gap: 14px; font-stretch: 75%; font-size: .85rem; letter-spacing: .04em; color: var(--gris-f); }
.carte-meta span { color: var(--encre); font-weight: 650; }
.carte-article h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 760; font-stretch: 108%; line-height: 1.15; }
.carte-article a:hover h3 { text-decoration: underline; text-decoration-thickness: 1.5px; }
.carte-chapo { color: var(--gris-f); }
@media (min-width: 720px) { .articles-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .articles-grille { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------- Ensemble (appel final) */
.ensemble { padding: clamp(90px, 14vw, 200px) 0; overflow: hidden; }
.ensemble-fond { position: absolute; inset: 0; opacity: .5; }
.ensemble-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--encre) 18%, color-mix(in srgb, var(--encre) 55%, transparent) 70%, color-mix(in srgb, var(--encre) 20%, transparent)); }
.ensemble-fond img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2) brightness(.7); }
.ensemble-int { position: relative; z-index: 2; display: grid; justify-items: start; gap: 22px; }
.ensemble-titre { max-width: 12ch; }
.ensemble-texte { font-size: clamp(1.15rem, 2vw, 1.7rem); max-width: 30ch; color: color-mix(in srgb, var(--papier) 82%, transparent); }
.declencheur {
  display: inline-flex; align-items: center; gap: 20px;
  text-decoration: none; margin: 18px 0 8px;
  -webkit-tap-highlight-color: transparent;
}
.declencheur-bouton {
  width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--papier);
  transition: transform var(--rapide) var(--sortie);
}
.declencheur-bouton i {
  width: 74px; height: 74px; border-radius: 50%; background: var(--accent);
  box-shadow: inset 0 -6px 0 rgb(0 0 0 / .18);
  transition: transform 160ms var(--sortie), box-shadow 160ms;
}
.declencheur:hover .declencheur-bouton i { transform: scale(.94); }
.declencheur:active .declencheur-bouton i, .declencheur.declenche .declencheur-bouton i { transform: scale(.86); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .2); }
.declencheur-texte { font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 850; font-stretch: 118%; text-transform: uppercase; line-height: 1; }
.flash { position: fixed; inset: 0; background: #fff; z-index: 180; pointer-events: none; opacity: 0; }
.flash.go { animation: flash 420ms ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.ensemble-contacts { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 10px; }
.ensemble-contacts a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; color: var(--gris-c); }
.ensemble-contacts a:hover { color: var(--papier); }
.ensemble-contacts .ic { width: 20px; height: 20px; }

/* --------------------------------------------------------------- Pied de page */
.pied { padding: 72px 0 calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid color-mix(in srgb, var(--papier) 10%, transparent); }
.pied-grille { display: grid; gap: 40px 28px; grid-template-columns: 1fr 1fr; }
.pied-marque { grid-column: 1 / -1; display: grid; gap: 18px; max-width: 46ch; }
.pied-logo { width: 150px; display: block; color: var(--papier); }
.pied-logo .logo-svg, .pied-logo .logo-img { width: 100%; height: auto; }
.pied-marque p { color: var(--gris); }
.pied-col { display: grid; gap: 10px; align-content: start; justify-items: start; }
.pied-col a, .pied-col span, .pied-col .lien-bouton { color: var(--gris-c); text-decoration: none; font-size: .98rem; }
.pied-col a:hover, .pied-col .lien-bouton:hover { color: var(--papier); text-decoration: underline; }
.pied-col .lien-bouton { text-decoration: none; }
.pied-titre { font-stretch: 75%; font-weight: 600; font-size: .9rem; color: var(--gris); margin-bottom: 6px; }
.pied-gros { font-size: 1.3rem !important; font-weight: 700; color: var(--papier) !important; font-stretch: 105%; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 56px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--papier) 10%, transparent); font-size: .88rem; color: var(--gris); }
.pied-bas a { color: var(--gris); }
@media (min-width: 1024px) {
  .pied-grille { grid-template-columns: 1.6fr repeat(4, 1fr); }
  .pied-marque { grid-column: auto; }
}

/* ==========================================================================
   PAGES INTÉRIEURES
   ========================================================================== */
.page-tete { padding: calc(var(--entete) + clamp(40px, 8vw, 110px)) 0 clamp(36px, 5vw, 70px); }
.page-tete .titre-xxl { max-width: 100%; }
.page-tete .chapeau { max-width: 52ch; margin-top: 22px; color: var(--gris-f); }
[data-theme="sombre"] .page-tete .chapeau, .theme-sombre .page-tete .chapeau { color: color-mix(in srgb, var(--papier) 72%, transparent); }
.fil { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: .9rem; color: var(--gris-f); }
.fil a { color: inherit; }
.fil span::before { content: "/"; margin-right: 8px; color: var(--gris-c); }

/* Services */
.services-liste { counter-reset: s; padding-bottom: clamp(60px, 9vw, 140px); }
.service-ligne {
  display: grid; gap: 20px;
  padding: clamp(28px, 4vw, 56px) 0;
  border-top: 1.5px solid var(--encre);
}
.service-ligne figure { aspect-ratio: 16 / 10; overflow: hidden; background: var(--papier-2); }
.service-ligne figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--sortie); }
.service-ligne a:hover figure img { transform: scale(1.04); }
.service-ligne a { text-decoration: none; display: contents; }
.service-num { font-stretch: 62%; font-weight: 600; letter-spacing: .14em; font-size: .8rem; color: var(--accent); }
.service-ligne h2 { font-size: clamp(1.9rem, 4.2vw, 4rem); font-weight: 880; font-stretch: 122%; line-height: .98; text-transform: uppercase; margin: 8px 0 12px; }
.service-ligne .accroche { font-size: 1.15rem; max-width: 40ch; color: var(--gris-f); }
.service-etiquettes { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; color: var(--gris-f); font-size: .95rem; }
.service-etiquettes li::after { content: "·"; margin-left: 14px; color: var(--gris-c); }
.service-etiquettes li:last-child::after { content: none; }
.service-pied { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 24px; }
.service-prix { font-weight: 650; }
@media (min-width: 1024px) {
  .service-ligne { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
  .service-ligne:nth-child(even) figure { order: 2; }
}

.service-tete { padding: calc(var(--entete) + clamp(28px, 6vw, 80px)) 0 0; }
.service-heros { display: grid; gap: 28px; align-items: end; }
.service-heros figure { aspect-ratio: 16 / 9; overflow: hidden; }
.service-heros figure img { width: 100%; height: 100%; object-fit: cover; }
.service-corps { display: grid; gap: 40px; padding-block: clamp(40px, 6vw, 90px); }
.prestations { columns: 1; column-gap: 40px; }
.prestations li { break-inside: avoid; padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--encre) 12%, transparent); font-size: 1.08rem; display: flex; gap: 14px; }
.prestations li::before { content: ""; width: 12px; height: 1.5px; background: var(--accent); margin-top: .8em; flex: none; transform: rotate(calc(-1 * var(--lames))); }
.prestations .groupe { border: 0; padding: 22px 0 6px; font-stretch: 75%; font-weight: 700; font-size: .98rem; color: var(--gris-f); }
.prestations .groupe::before { display: none; }
.encart-prix { padding: 26px; background: var(--encre); color: var(--papier); display: grid; gap: 12px; align-content: start; }
.encart-prix .montant { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 300; font-stretch: 70%; line-height: 1; }
.encart-prix p { color: var(--gris-c); }
@media (min-width: 720px) { .prestations { columns: 2; } }
@media (min-width: 1024px) {
  .service-heros { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .service-corps { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
  .encart-prix { position: sticky; top: calc(var(--entete) + 24px); }
}
.formules-sec { padding: clamp(56px, 8vw, 120px) 0; }
.formules { display: grid; gap: 14px; }
.formule { padding: 26px 22px; background: var(--encre-2); display: flex; flex-direction: column; gap: 14px; position: relative; }
.formule.abo-conseil { background: var(--papier); color: var(--encre); }
.formule h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 850; font-stretch: 118%; text-transform: uppercase; line-height: 1.02; }
.formule .abo-prix { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.formule .btn { margin-top: auto; align-self: flex-start; }
@media (min-width: 720px) { .formules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .formules.f3 { grid-template-columns: repeat(3, 1fr); } .formules.f4 { grid-template-columns: repeat(4, 1fr); } }
.suite-service { display: block; text-decoration: none; padding: clamp(48px, 7vw, 100px) 0; border-top: 1px solid color-mix(in srgb, var(--papier) 12%, transparent); }
.suite-service span { display: block; color: var(--gris); margin-bottom: 8px; }
.suite-service strong { display: inline-flex; align-items: center; gap: 18px; font-size: clamp(1.8rem, 5vw, 4.4rem); font-weight: 880; font-stretch: 122%; text-transform: uppercase; line-height: 1; }
.suite-service .ic { width: clamp(30px, 4vw, 56px); height: auto; transition: transform var(--moyen) var(--sortie); }
.suite-service:hover .ic { transform: translateX(10px); }

/* Tarifs */
.tarifs-nav {
  position: sticky; top: calc(var(--entete) + env(safe-area-inset-top, 0px)); z-index: 20;
  background: var(--papier); border-bottom: 1px solid color-mix(in srgb, var(--encre) 12%, transparent);
}
.tarifs-nav ul { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--cote); max-width: var(--max); margin: 0 auto; }
.tarifs-nav ul::-webkit-scrollbar { display: none; }
.tarifs-nav a { display: block; padding: 14px 0; white-space: nowrap; text-decoration: none; font-weight: 600; color: var(--gris-f); border-bottom: 2px solid transparent; }
.tarifs-nav a.actif, .tarifs-nav a:hover { color: var(--encre); border-bottom-color: var(--encre); }
.famille { padding: clamp(48px, 7vw, 100px) 0 0; scroll-margin-top: calc(var(--entete) + 60px); }
.famille-tete { display: grid; gap: 8px; margin-bottom: 26px; }
.famille .formule { background: var(--blanc); color: var(--encre); border: 1px solid color-mix(in srgb, var(--encre) 10%, transparent); }
.famille .formule.abo-conseil { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.famille .formule.abo-conseil .abo-prix small { color: var(--gris-c); }
.famille .formule .abo-prix small { color: var(--gris-f); }
.famille .formule .btn-trait { --balayage: var(--encre); }
.famille .formule .btn-trait:hover { color: var(--papier); }
.famille .formule.abo-conseil .btn-accent { --balayage: var(--papier); }
.periode { font-size: .9rem; color: var(--gris-f); }

.simulateur { margin-top: clamp(56px, 8vw, 110px); padding: clamp(28px, 4vw, 48px); background: var(--encre); color: var(--papier); display: grid; gap: 28px; }
.simulateur h2 { max-width: 20ch; }
.sim-liste { display: grid; gap: 8px; max-height: 420px; overflow: auto; overscroll-behavior: contain; padding-right: 6px; }
.sim-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--encre-2); cursor: pointer; }
.sim-item input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.sim-item span { flex: 1; }
.sim-item b { font-weight: 600; white-space: nowrap; font-stretch: 90%; }
.sim-total { display: grid; gap: 12px; align-content: start; }
.sim-total .montant { font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 300; font-stretch: 68%; line-height: 1; }
.sim-total p { color: var(--gris-c); font-size: .95rem; }
@media (min-width: 1024px) { .simulateur { grid-template-columns: 1.4fr 1fr; align-items: start; } .simulateur h2 { grid-column: 1 / -1; } }

.conditions { padding: clamp(56px, 8vw, 120px) 0; }
.conditions ol { counter-reset: c; display: grid; gap: 0; max-width: 980px; }
.conditions li { counter-increment: c; display: grid; grid-template-columns: 3.2em 1fr; padding: 18px 0; border-top: 1px solid color-mix(in srgb, var(--encre) 12%, transparent); font-size: 1.1rem; }
.conditions li::before { content: counter(c, decimal-leading-zero); font-stretch: 62%; font-weight: 600; letter-spacing: .1em; color: var(--accent); padding-top: .15em; }
.faq { padding-bottom: clamp(56px, 8vw, 120px); }
.faq details { border-top: 1px solid color-mix(in srgb, var(--encre) 14%, transparent); max-width: 980px; }
.faq details:last-child { border-bottom: 1px solid color-mix(in srgb, var(--encre) 14%, transparent); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: center;
  padding: 20px 0; font-weight: 700; font-stretch: 105%; font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { width: 22px; height: 22px; flex: none; transition: transform var(--moyen) var(--sortie); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; max-width: 70ch; color: var(--gris-f); }

/* Réalisations */
.filtres { display: flex; gap: 6px 22px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-bottom: 26px; }
.filtres::-webkit-scrollbar { display: none; }
.filtres button {
  appearance: none; background: none; border: 0; padding: 8px 0; cursor: pointer; white-space: nowrap;
  font-weight: 600; color: var(--gris); border-bottom: 2px solid transparent;
}
.filtres button sup { font-stretch: 62%; font-size: .7rem; margin-left: 3px; letter-spacing: .06em; }
.filtres button[aria-pressed="true"] { color: var(--papier); border-bottom-color: var(--accent); }
.mosaique { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding-bottom: clamp(56px, 8vw, 120px); }
.mosaique-item { position: relative; overflow: hidden; background: var(--encre-2); }
.mosaique-item.cache { display: none; }
.mosaique-item a, .mosaique-item button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; color: inherit; }
.mosaique-item img { width: 100%; height: 100%; aspect-ratio: var(--ratio, 4 / 5); object-fit: cover; transition: transform 1.2s var(--sortie); }
.mosaique-item:hover img { transform: scale(1.03); }
.mosaique-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 12px; background: linear-gradient(transparent, rgb(0 0 0 / .72)); display: grid; gap: 2px; pointer-events: none; }
.mosaique-info b { font-weight: 750; line-height: 1.15; font-stretch: 105%; }
.mosaique-info i { font-style: normal; font-size: .82rem; color: var(--gris-c); }
.mosaique-num { position: absolute; top: 8px; left: 10px; font-stretch: 62%; font-size: .68rem; letter-spacing: .16em; font-weight: 600; color: #e9a23b; pointer-events: none; text-shadow: 0 1px 2px rgb(0 0 0 / .5); }
.mosaique-video::after { content: ""; position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
@media (min-width: 720px) { .mosaique { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (min-width: 1200px) {
  .mosaique { grid-template-columns: repeat(4, 1fr); }
  .mosaique-item.grand { grid-column: span 2; grid-row: span 2; }
  .mosaique-item.grand > a, .mosaique-item.grand > button { height: 100%; }
  .mosaique-item.grand img { aspect-ratio: auto; height: 100%; }
}
.mosaique-vide { padding: 40px 0 120px; color: var(--gris); }

.realisation-tete { padding: calc(var(--entete) + clamp(28px, 5vw, 70px)) 0 28px; }
.realisation-infos { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 22px; color: var(--gris-c); }
.realisation-infos dt { font-stretch: 75%; font-size: .88rem; font-weight: 600; color: var(--gris); }
.realisation-infos dd { margin: 2px 0 0; font-weight: 600; color: var(--papier); }
.realisation-couverture { max-height: 86vh; overflow: hidden; }
.realisation-couverture img { width: 100%; max-height: 86vh; object-fit: cover; }
.realisation-texte { padding: clamp(40px, 6vw, 90px) 0; display: grid; gap: 22px; }
.realisation-texte p { max-width: 62ch; font-size: 1.12rem; color: color-mix(in srgb, var(--papier) 82%, transparent); }
.video-cadre { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-cadre iframe, .video-cadre video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.realisation-medias { display: grid; gap: 10px; padding-bottom: 60px; }
.realisation-medias button { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; width: 100%; }
@media (min-width: 900px) { .realisation-medias { grid-template-columns: repeat(2, 1fr); } .realisation-medias .large { grid-column: 1 / -1; } }
.precsuiv { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid color-mix(in srgb, var(--papier) 12%, transparent); }
.precsuiv a { padding: 32px 0; text-decoration: none; display: grid; gap: 6px; }
.precsuiv a:last-child { text-align: right; justify-items: end; }
.precsuiv span { color: var(--gris); font-size: .9rem; }
.precsuiv strong { font-size: clamp(1.1rem, 2.4vw, 2rem); font-weight: 820; font-stretch: 115%; text-transform: uppercase; line-height: 1.05; }

/* Visionneuse */
.visionneuse {
  position: fixed; inset: 0; z-index: 140;
  background: #050505; color: var(--papier);
  display: grid; grid-template-rows: auto 1fr auto;
  touch-action: none;
}
.visionneuse[hidden] { display: none; }
.vis-haut, .vis-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) var(--cote) 10px; }
.vis-bas { padding: 10px var(--cote) calc(14px + env(safe-area-inset-bottom, 0px)); }
.vis-compteur { font-stretch: 62%; font-weight: 600; letter-spacing: .14em; font-size: .85rem; color: #e9a23b; }
.vis-scene { position: relative; overflow: hidden; display: grid; place-items: center; }
.vis-scene img, .vis-scene iframe, .vis-scene video { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 260ms var(--sortie), opacity 200ms; user-select: none; -webkit-user-drag: none; }
.vis-scene iframe { width: min(100%, 160vh); aspect-ratio: 16 / 9; height: auto; border: 0; }
.vis-legende { font-weight: 600; max-width: 60ch; }
.vis-btn { appearance: none; background: none; border: 1px solid color-mix(in srgb, var(--papier) 20%, transparent); color: var(--papier); width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; flex: none; }
.vis-btn .ic { width: 22px; height: 22px; }
.vis-btn:hover { background: var(--papier); color: var(--encre); }
.vis-nav { display: flex; gap: 8px; }
.vis-chargement { position: absolute; inset: 0; display: grid; place-items: center; font-stretch: 62%; letter-spacing: .14em; color: var(--gris); pointer-events: none; }

/* Journal, article */
.journal-filtres { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 30px; }
.journal-filtres a { text-decoration: none; color: var(--gris-f); font-weight: 600; padding: 6px 0; border-bottom: 2px solid transparent; }
.journal-filtres a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--accent); }
.journal-liste { padding-bottom: clamp(56px, 8vw, 120px); }
.article-tete { padding: calc(var(--entete) + clamp(32px, 6vw, 90px)) 0 30px; }
.article-tete .titre-xl { max-width: 22ch; }
html[data-capitales] .article-tete .titre-xl { text-transform: none; font-stretch: 112%; font-weight: 800; letter-spacing: -.015em; line-height: 1.02; --car: .8; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; color: var(--gris-f); font-size: .95rem; }
.article-couverture { max-width: var(--max); margin: 0 auto; padding-inline: var(--cote); }
.article-couverture img { width: 100%; max-height: 78vh; object-fit: cover; }
.article-plan { max-width: var(--max); margin: 0 auto; padding-inline: var(--cote); }
.article-gauche, .article-droite { display: none; }
.article-corps { max-width: 720px; margin: 0 auto; padding: clamp(36px, 6vw, 80px) 0; font-size: 1.14rem; line-height: 1.72; }
.article-corps h2 { scroll-margin-top: calc(var(--entete) + 24px); }
.article-corps > * + * { margin-top: 1.1em; }
.article-corps h2, .article-corps h3 { font-weight: 800; font-stretch: 110%; line-height: 1.15; margin-top: 1.8em; }
.article-corps h2 { font-size: 1.6rem; }
.article-corps h3 { font-size: 1.3rem; }
.article-corps ul, .article-corps ol { padding-left: 1.2em; list-style: disc; }
.article-corps ol { list-style: decimal; }
.article-corps li + li { margin-top: .4em; }
.article-corps blockquote { border-left: 3px solid var(--accent); padding-left: 20px; font-size: 1.3rem; line-height: 1.45; font-weight: 500; }
.article-corps img { margin: 1.6em 0; }
.article-corps a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.chapo { font-size: 1.3rem; line-height: 1.5; font-weight: 500; }
.article-partage { display: flex; flex-wrap: wrap; gap: 10px; max-width: 720px; margin: 0 auto; padding: 0 var(--cote) 60px; }

/* Contact */
.contact-grille { display: grid; gap: 40px; padding-bottom: clamp(56px, 8vw, 120px); }
.contact-canaux { display: grid; gap: 10px; align-content: start; }
.canal { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--encre-2); text-decoration: none; transition: background var(--rapide); }
.canal:hover { background: var(--encre-3); }
.canal .ic { width: 26px; height: 26px; flex: none; color: var(--accent); }
.canal span { display: grid; }
.canal small { color: var(--gris); font-size: .85rem; }
.canal b { font-size: 1.15rem; font-weight: 700; font-stretch: 105%; }
@media (min-width: 1024px) { .contact-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(40px, 6vw, 110px); } }

/* --------------------------------------------------------------- Formulaires */
.formulaire { display: grid; gap: 18px; }
.ligne-champs { display: grid; gap: 18px; }
@media (min-width: 720px) { .ligne-champs.deux { grid-template-columns: 1fr 1fr; } }
.champ { display: grid; gap: 7px; }
.champ > label, .champ > .etiquette { font-weight: 650; font-size: .95rem; }
.champ .aide { font-size: .86rem; color: var(--gris); }
.champ input, .champ textarea, .champ select {
  width: 100%; min-height: 52px; padding: 13px 14px;
  font: inherit; font-size: 16px; color: inherit;
  background: transparent;
  border: 1.5px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 0;
  transition: border-color var(--rapide);
  -webkit-appearance: none; appearance: none;
}
.champ select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
[data-theme="sombre"] .champ select option { background: var(--encre); }
.champ textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: currentColor; }
.champ.invalide input, .champ.invalide textarea, .champ.invalide select { border-color: var(--accent); }
.champ-erreur { color: var(--accent); font-weight: 650; font-size: .92rem; }
[data-theme="sombre"] .champ-erreur { color: #ff6a52; }
.champ-tel { display: flex; }
.champ-tel span { display: grid; place-items: center; padding: 0 12px; border: 1.5px solid color-mix(in srgb, currentColor 22%, transparent); border-right: 0; font-weight: 600; color: var(--gris); }
.pot { position: absolute; left: -9999px; }
.alerte {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; margin-bottom: 18px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font-weight: 600; line-height: 1.45;
}
.alerte .ic { width: 22px; height: 22px; flex: none; color: var(--accent); }
.alerte.ok { background: color-mix(in srgb, #2f9e5b 10%, transparent); border-color: color-mix(in srgb, #2f9e5b 50%, transparent); }
.alerte.ok .ic { color: #2f9e5b; }
.actions-form { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
@media (max-width: 719px) { .actions-form { justify-content: center; } }

/* Barre de progression d'envoi et de téléchargement */
.progression {
  position: fixed; left: 50%; bottom: calc(var(--barre) + 16px); z-index: 175;
  transform: translateX(-50%);
  width: min(92vw, 460px);
  background: var(--encre); color: var(--papier);
  padding: 14px 16px; box-shadow: 0 20px 50px -20px rgb(0 0 0 / .6);
  display: grid; gap: 8px;
}
@media (min-width: 1100px) { .progression { bottom: 28px; } }
.progression-ligne { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: .92rem; }
.progression-ligne b { font-stretch: 70%; font-size: 1.1rem; font-weight: 700; }
.progression-barre { height: 4px; background: var(--encre-3); overflow: hidden; }
.progression-barre i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 160ms linear; }

/* --------------------------------------------------------------- Devis (assistant) */
.devis { padding: calc(var(--entete) + 18px) 0 40px; }
.devis-grille { display: grid; gap: 28px; }
.devis-progres { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.devis-progres ol { display: flex; gap: 4px; flex: 1; }
.devis-progres li { height: 3px; flex: 1; background: color-mix(in srgb, var(--encre) 14%, transparent); }
.devis-progres li.fait { background: var(--encre); }
.devis-progres li.courant { background: var(--accent); }
.devis-progres span { font-stretch: 62%; font-weight: 600; letter-spacing: .12em; font-size: .8rem; white-space: nowrap; }
.devis-etape { display: none; animation: etape-in 420ms var(--sortie); border: 0; margin: 0; padding: 0; min-width: 0; }
.devis-etape.courante { display: block; }
@keyframes etape-in { from { opacity: 0; transform: translateX(14px); } }
.devis-etape h1, .devis-etape h2 { font-size: clamp(1.7rem, 4vw, 3rem); font-weight: 880; font-stretch: 118%; text-transform: uppercase; line-height: 1; margin-bottom: 8px; }
.devis-etape .sous { color: var(--gris-f); margin-bottom: 22px; }
.choix-services { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.choix {
  position: relative; display: grid; align-content: end;
  min-height: 118px; padding: 12px;
  background: var(--encre); color: var(--papier);
  border: 0; cursor: pointer; text-align: left; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.choix img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: grayscale(1); transition: opacity var(--moyen), filter var(--moyen), transform 1s var(--sortie); }
.choix span { position: relative; font-weight: 780; font-stretch: 108%; line-height: 1.1; font-size: 1.02rem; }
.choix small { position: relative; color: var(--gris-c); font-size: .8rem; margin-top: 4px; }
.choix[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: -3px; }
.choix[aria-pressed="true"] img { opacity: .7; filter: none; transform: scale(1.05); }
.choix[aria-pressed="true"]::after { content: ""; position: absolute; top: 10px; right: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--encre); }
.choix-formules { display: grid; gap: 8px; }
.choix-formule {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center;
  padding: 16px; border: 1.5px solid color-mix(in srgb, var(--encre) 16%, transparent);
  background: var(--blanc); cursor: pointer; text-align: left;
}
.choix-formule .pastille { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--encre); display: grid; place-items: center; }
.choix-formule[aria-pressed="true"] { border-color: var(--encre); background: var(--encre); color: var(--papier); }
.choix-formule[aria-pressed="true"] .pastille { border-color: var(--papier); }
.choix-formule[aria-pressed="true"] .pastille::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.choix-formule b { font-weight: 780; font-stretch: 108%; }
.choix-formule small { grid-column: 2 / -1; color: var(--gris); font-size: .86rem; }
.choix-formule em { font-style: normal; font-weight: 650; white-space: nowrap; font-stretch: 90%; }
.options { display: grid; gap: 8px; margin-top: 18px; }
.option { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid color-mix(in srgb, var(--encre) 14%, transparent); cursor: pointer; background: var(--blanc); }
.option input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.option span { flex: 1; font-weight: 600; }
.option small { display: block; font-weight: 400; color: var(--gris); font-size: .85rem; }
.option em { font-style: normal; color: var(--gris-f); font-size: .9rem; white-space: nowrap; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { appearance: none; border: 1.5px solid color-mix(in srgb, var(--encre) 18%, transparent); background: var(--blanc); padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: .95rem; }
.puce[aria-pressed="true"] { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.calendrier { background: var(--blanc); border: 1.5px solid color-mix(in srgb, var(--encre) 12%, transparent); padding: 12px; }
.cal-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cal-tete b { font-weight: 750; font-stretch: 108%; text-transform: capitalize; }
.cal-tete button { appearance: none; background: none; border: 0; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.cal-tete .ic { width: 22px; height: 22px; }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-grille .jsem { font-stretch: 62%; font-size: .72rem; letter-spacing: .1em; color: var(--gris); padding: 6px 0; text-transform: uppercase; }
.cal-jour { appearance: none; border: 0; background: none; aspect-ratio: 1; display: grid; place-items: center; cursor: pointer; font-weight: 600; font-size: .95rem; position: relative; }
.cal-jour:hover { background: var(--papier-2); }
.cal-jour.passe { color: var(--gris-c); }
.cal-jour.complet { color: var(--gris); text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.cal-jour.aujourdhui::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--encre); }
.cal-jour[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
.cal-legende { display: flex; gap: 16px; margin-top: 10px; font-size: .82rem; color: var(--gris-f); }
.cal-legende s { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.devis-nav {
  position: sticky; bottom: var(--barre); z-index: 30;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0 calc(12px);
  background: var(--papier);
  border-top: 1px solid color-mix(in srgb, var(--encre) 10%, transparent);
  margin-top: 26px;
}
@media (min-width: 1100px) { .devis-nav { bottom: 0; } }
.devis-nav .btn { min-width: 150px; }
.devis-retour { appearance: none; background: none; border: 0; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; padding: 12px 0; }
.devis-retour .ic { width: 20px; height: 20px; }
.recap { background: var(--encre); color: var(--papier); padding: 22px; display: grid; gap: 14px; align-content: start; }
.recap h3 { font-stretch: 75%; font-weight: 700; font-size: .92rem; color: var(--gris); }
.recap dl { display: grid; gap: 10px; margin: 0; }
.recap dt { font-size: .8rem; color: var(--gris); }
.recap dd { margin: 0; font-weight: 600; }
.recap .estimation { border-top: 1px solid var(--encre-3); padding-top: 14px; }
.recap .estimation strong { display: block; font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 300; font-stretch: 68%; line-height: 1.05; }
.recap .estimation small { color: var(--gris-c); font-size: .85rem; }
.recap-mobile { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: var(--encre); color: var(--papier); margin-bottom: 18px; }
.recap-mobile b { font-stretch: 75%; font-weight: 600; font-size: 1.1rem; }
.recap-mobile small { color: var(--gris); font-size: .8rem; }
@media (min-width: 1024px) {
  .devis-grille { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: clamp(32px, 4vw, 70px); align-items: start; }
  .recap { position: sticky; top: calc(var(--entete) + 24px); padding: 30px; }
  .recap-mobile { display: none; }
  .choix-services { grid-template-columns: repeat(4, 1fr); }
  .choix { min-height: 150px; }
  .choix-formules { grid-template-columns: 1fr 1fr; }
}
.brouillon { font-size: .85rem; color: var(--gris-f); display: flex; align-items: center; gap: 8px; }
.brouillon .ic { width: 16px; height: 16px; }
.merci { padding: calc(var(--entete) + clamp(40px, 8vw, 100px)) 0 80px; }
.merci-ref { display: inline-block; padding: 16px 20px; background: var(--encre); color: var(--papier); font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 300; font-stretch: 68%; letter-spacing: .06em; margin: 18px 0; }

/* --------------------------------------------------------------- Suivi et espace client */
.appli-ecran { padding: calc(var(--entete) + 22px) 0 40px; min-height: calc(100svh - var(--barre)); }
.appli-carte { background: var(--blanc); padding: clamp(22px, 3vw, 36px); border: 1px solid color-mix(in srgb, var(--encre) 8%, transparent); }
.appli-duo { display: grid; gap: 22px; }
@media (min-width: 1024px) { .appli-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; } }
.appli-titre { font-size: var(--taille-appli, clamp(2rem, 5vw, 4rem)); font-weight: 900; font-stretch: 122%; text-transform: uppercase; line-height: .96; margin-bottom: 12px; }
.chronologie { display: grid; gap: 0; }
.chrono { display: grid; grid-template-columns: 34px 1fr; gap: 12px; position: relative; padding-bottom: 18px; }
.chrono::before { content: ""; position: absolute; left: 16px; top: 30px; bottom: 0; width: 1.5px; background: color-mix(in srgb, var(--encre) 14%, transparent); }
.chrono:last-child::before { display: none; }
.chrono-point { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--encre) 22%, transparent); display: grid; place-items: center; font-stretch: 62%; font-weight: 700; font-size: .8rem; background: var(--blanc); position: relative; z-index: 1; }
.chrono.fait .chrono-point { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.chrono.courant .chrono-point { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.chrono h3 { font-weight: 760; font-stretch: 108%; font-size: 1.1rem; padding-top: 5px; }
.chrono p { color: var(--gris-f); font-size: .95rem; }
.chrono small { color: var(--gris); font-size: .82rem; }
.montants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 16px 0; }
.montants div { background: var(--papier); padding: 12px; display: grid; gap: 2px; }
.montants small { font-size: .78rem; color: var(--gris-f); }
.montants b { font-stretch: 80%; font-weight: 700; font-size: clamp(.98rem, 1.6vw, 1.2rem); }
.liste-paiements { display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.liste-paiements li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--papier); font-size: .95rem; }
.etat { font-stretch: 75%; font-weight: 700; font-size: .84rem; }
.etat.valide { color: #2f8a52; }
.etat.en_attente { color: #b4720f; }
.etat.refuse { color: var(--accent); }
.moyens { display: grid; gap: 8px; margin: 14px 0; }
.moyen { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px; background: var(--papier); }
.moyen b { display: block; }
.moyen small { color: var(--gris-f); }
.moyen code { font-family: var(--police); font-stretch: 75%; font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; }
.copier { appearance: none; border: 1.5px solid var(--encre); background: none; padding: 8px 12px; cursor: pointer; font-weight: 650; font-size: .88rem; display: inline-flex; gap: 6px; align-items: center; }
.copier .ic { width: 16px; height: 16px; }
.depot { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1.5px dashed color-mix(in srgb, var(--encre) 30%, transparent); cursor: pointer; font-weight: 600; }
.depot .ic { width: 24px; height: 24px; flex: none; }
.depot.ok { border-style: solid; border-color: #2f9e5b; }

.galerie-tete { padding: calc(var(--entete) + 18px) 0 16px; display: grid; gap: 14px; }
.galerie-barre {
  position: sticky; top: calc(var(--entete) + env(safe-area-inset-top, 0px)); z-index: 20;
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between;
  padding: 10px 0; background: var(--encre);
  border-bottom: 1px solid var(--encre-3);
}
.galerie-barre .groupe { display: flex; gap: 8px; flex-wrap: wrap; }
.galerie-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 6px 0 60px; }
.gphoto { position: relative; background: var(--encre-2); aspect-ratio: 1; overflow: hidden; }
.gphoto.cache { display: none; }
.gphoto > button.ouvrir { padding: 0; border: 0; background: none; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.gphoto img { width: 100%; height: 100%; object-fit: cover; }
.gphoto .selection {
  position: absolute; right: 6px; bottom: 6px; width: 40px; height: 40px;
  appearance: none; border: 0; cursor: pointer; background: rgb(0 0 0 / .35); border-radius: 50%;
  display: grid; place-items: center; color: var(--papier);
}
.gphoto .selection .ic { width: 24px; height: 24px; }
.gphoto.favori .selection { background: var(--accent); }
.gphoto.favori::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--accent); pointer-events: none; }
@media (min-width: 720px) { .galerie-grille { grid-template-columns: repeat(4, 1fr); gap: 6px; } }
@media (min-width: 1200px) { .galerie-grille { grid-template-columns: repeat(6, 1fr); } }
.compte-favoris { font-stretch: 75%; font-weight: 700; }
.galeries-liste { display: grid; gap: 12px; }
.galerie-carte { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 10px; background: var(--blanc); text-decoration: none; }
.galerie-carte img { width: 96px; height: 96px; object-fit: cover; background: var(--papier-2); }
.galerie-carte b { display: block; font-weight: 760; font-stretch: 108%; font-size: 1.1rem; }
.galerie-carte small { color: var(--gris-f); }
.galerie-carte .ic { width: 22px; height: 22px; }

.album-tete { padding: calc(var(--entete) + 22px) 0 18px; }
.album-direct { display: inline-flex; align-items: center; gap: 8px; font-stretch: 70%; font-weight: 600;  font-size: .82rem; color: var(--gris-c); margin-top: 12px; }
.album-grille { columns: 2; column-gap: 6px; padding-bottom: 60px; }
.album-grille .aphoto { break-inside: avoid; margin-bottom: 6px; position: relative; }
.album-grille .aphoto button { padding: 0; border: 0; background: none; display: block; width: 100%; cursor: zoom-in; }
.album-grille .aphoto.nouvelle { animation: nouvelle 1.4s var(--sortie); }
@keyframes nouvelle { from { opacity: 0; transform: scale(.96); } }
@media (min-width: 720px) { .album-grille { columns: 3; } }
@media (min-width: 1200px) { .album-grille { columns: 4; column-gap: 8px; } }

/* --------------------------------------------------------------- Pages d'erreur et travaux */
.erreur-page { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 40px var(--cote); background: var(--encre); color: var(--papier); }
.erreur-page .iris-fixe { width: min(56vw, 260px); margin: 0 auto 28px; }
.erreur-page h1 { font-size: clamp(2.2rem, 7vw, 5rem); font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: .95; }
.erreur-page p { max-width: 42ch; margin: 16px auto 26px; color: var(--gris-c); }
.erreur-page .boutons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* --------------------------------------------------------------- Mentions */
.texte-long { max-width: 760px; padding-bottom: 100px; font-size: 1.08rem; }
.texte-long p + p { margin-top: 1em; }
.texte-long .intertitre { font-weight: 800; font-stretch: 110%; margin-top: 2em; font-size: 1.2rem; }

/* --------------------------------------------------------------- Réduction des animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .entete, .barre-appli, .wa-flottant, .pied, .rideau, .intro { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
}

/* --------------------------------------------------------------- Suivi : onglets sur téléphone, colonnes sur ordinateur */
.chrono-point .ic { width: 16px; height: 16px; }
.onglets-appli { display: flex; gap: 4px; margin: 14px 0; background: var(--papier-2); padding: 4px; }
.onglets-appli button { flex: 1; appearance: none; border: 0; background: none; padding: 11px 6px; font-weight: 650; cursor: pointer; color: var(--gris-f); }
.onglets-appli button[aria-selected="true"] { background: var(--blanc); color: var(--encre); box-shadow: 0 1px 0 rgb(0 0 0 / .06); }
.suivi-grille { display: grid; gap: 16px; }
.panneau-onglet { display: none; }
.panneau-onglet.actif { display: block; }
.defilant { max-height: 58vh; overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
@media (min-width: 1024px) {
  .onglets-appli { display: none; }
  .suivi-grille { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; margin-top: 18px; }
  .panneau-onglet { display: block; max-height: calc(100vh - var(--entete) - 170px); overflow: auto; overscroll-behavior: contain; }
}
.merci-iris { width: 96px; color: var(--encre); margin-bottom: 22px; }

/* Titres secondaires ajustés au mot le plus long (aucun débordement sur téléphone) */
.service-ligne h2, .suite-service strong, .appli-titre { overflow-wrap: break-word; }
@supports (width: 1cqi) {
  .service-ligne h2[style*="--mot"] { font-size: min(clamp(1.9rem, 4.2vw, 4rem), calc(100cqi / (var(--mot) * .94))); }
  .suite-service strong[style*="--mot"] { font-size: min(clamp(1.8rem, 5vw, 4.4rem), calc(100cqi / (var(--mot) * .94))); }
  .appli-titre[style*="--mot"] { font-size: min(var(--taille-appli, clamp(2rem, 5vw, 4rem)), calc(100cqi / (var(--mot) * .94))); }
}

.pied a[href^="tel:"], a.tel, .tel-affiche { white-space: nowrap; }
@media (max-width: 719px) { .pied-col:has(.pied-gros) { grid-column: 1 / -1; } }
.pied-gros { font-size: clamp(1.15rem, 5.4vw, 1.3rem) !important; }

/* =====================================================================
   Objectif : déclenchement, mise au point automatique, minuteur
   ===================================================================== */
.objectif-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 2; }
.objectif-flash.go { animation: flash-objectif 420ms cubic-bezier(.1,.6,.2,1); }
@keyframes flash-objectif { 0% { opacity: .95; } 100% { opacity: 0; } }

.objectif-photo.cherche { animation: af-photo 950ms cubic-bezier(.3,.6,.2,1) both; }
@keyframes af-photo {
  0% { filter: blur(11px) brightness(1.25); }
  34% { filter: blur(0) brightness(1); }
  50% { filter: blur(3.2px); }
  66% { filter: blur(0); }
  80% { filter: blur(.9px); }
  100% { filter: blur(0); }
}
html.calme .objectif-photo { transition: opacity 700ms ease; transform: none; }
html.calme .objectif-photo.cherche { animation: none; }

.objectif-af {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 19%; aspect-ratio: 1; overflow: visible; pointer-events: none;
  transform: translate(calc(-50% + var(--afx, 0%)), calc(-50% + var(--afy, 0%)));
  opacity: 0;
}
.objectif-af path { fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: square; }
.objectif-af .af-centre { stroke-width: 1.4; }
.objectif-af.vise { animation: af-vise 1150ms linear both; }
.objectif-af.vise path { animation: af-confirme 1150ms steps(1) both; }
@keyframes af-vise {
  0% { opacity: 0; scale: 1.8; }
  22% { opacity: 1; scale: 1; }
  36% { scale: 1.14; }
  50% { scale: .95; }
  62% { scale: 1; }
  86% { opacity: 1; }
  100% { opacity: 0; scale: 1; }
}
@keyframes af-confirme { 0% { stroke: #fff; } 63% { stroke: var(--accent); } }

.objectif-minuteur { position: absolute; inset: -1.5%; width: 103%; height: 103%; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .4s; }
.objectif-minuteur circle { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 100; stroke-dashoffset: 100; }
.objectif.auto .objectif-minuteur { opacity: .9; }
.objectif.auto.pause .objectif-minuteur { opacity: .35; }

/* =====================================================================
   Traversée de l'objectif : on défile, on passe à travers la lentille
   ===================================================================== */
.heros.traverse { display: block; height: calc(100vh + 72vh); height: calc(100svh + 72vh); overflow: visible; overflow: clip; }
.heros.traverse .heros-epingle { position: sticky; top: 0; height: 100vh; height: 100svh; }
.heros.traverse .objectif-cadre { transform-origin: 50% 50%; will-change: transform; }
.heros.traverse .heros-titre .ligne { will-change: transform, opacity; }
@media (max-width: 1099px) {
  .heros.traverse { height: calc(100vh - var(--barre) + 58vh); height: calc(100svh - var(--barre) + 58vh); }
  .heros.traverse .heros-epingle { height: calc(100vh - var(--barre)); height: calc(100svh - var(--barre)); }
}
.heros.traverse.traversee .objectif { pointer-events: none; }
.heros-vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgb(0 0 0 / .55) 100%);
}

/* =====================================================================
   Compteur de vues (ordinateur) : le disque d'un boîtier argentique
   ===================================================================== */
.compteur-vues {
  position: fixed; left: 22px; bottom: 22px; z-index: 60;
  width: 74px; height: 74px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; color: var(--papier);
  opacity: 0; transform: scale(.8); transition: opacity .4s, transform .4s var(--sortie);
}
.compteur-vues.visible { opacity: 1; transform: none; }
.compteur-vues.sur-pied { opacity: 0; transform: scale(.8); pointer-events: none; }
.compteur-vues svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cv-fond { fill: #0d0d0c; stroke: color-mix(in srgb, var(--papier) 22%, transparent); stroke-width: 1; }
.cv-moletage line { stroke: color-mix(in srgb, var(--papier) 30%, transparent); stroke-width: 1; }
.cv-disque { transform-origin: 50px 50px; transition: transform 360ms cubic-bezier(.3,1.6,.5,1); }
.cv-disque text { fill: color-mix(in srgb, var(--papier) 62%, transparent); font-size: 7px; font-weight: 700; font-stretch: 70%; text-anchor: middle; }
.cv-disque circle { fill: color-mix(in srgb, var(--papier) 45%, transparent); }
.cv-index { fill: var(--accent); }
.cv-n { fill: var(--papier); font-size: 19px; font-weight: 800; font-stretch: 80%; text-anchor: middle; }
.cv-mot { fill: var(--gris); font-size: 6.5px; font-weight: 600; font-stretch: 75%; text-anchor: middle; }
.compteur-vues:hover .cv-fond { stroke: var(--accent); }
.compteur-vues:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html.avec-intro .compteur-vues, body.feuille-ouverte .compteur-vues { display: none; }
@media (max-width: 1099px), (hover: none) { .compteur-vues { display: none; } }

/* =====================================================================
   Loupe de photographe (compte-fils) sur les planches
   ===================================================================== */
.loupe {
  position: fixed; left: 0; top: 0; z-index: 90;
  width: 200px; height: 200px; margin: -100px 0 0 -100px;
  pointer-events: none; opacity: 0;
  transition: opacity .25s;
}
.loupe.visible { opacity: 1; }
.loupe-verre {
  position: absolute; inset: 0; border-radius: 50%;
  background-color: var(--encre-2); background-repeat: no-repeat;
  box-shadow: 0 18px 50px -12px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(255 255 255 / .2);
  transform: scale(.6); transition: transform .35s var(--sortie);
}
.loupe.visible .loupe-verre { transform: none; }
.loupe-reticule { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loupe-reticule circle { fill: none; stroke: #fff; stroke-width: 1.2; opacity: .85; }
.loupe-reticule path { stroke: #fff; stroke-width: .8; opacity: .7; }
.loupe-x {
  position: absolute; right: 6px; bottom: 14px;
  padding: 2px 6px; background: var(--accent); color: #fff;
  font-size: .72rem; font-weight: 800; font-stretch: 75%;
}
.loupe-actif { cursor: none; }

/* =====================================================================
   Pellicule : filé quand elle défile vite
   ===================================================================== */
@media (min-width: 1024px) {
  html.js:not(.calme) .pellicule[data-epingle] .vue-image {
    transform: skewX(calc(var(--file, 0) * -7deg));
    filter: blur(calc(var(--file-abs, 0) * 2.6px));
  }
}

/* =====================================================================
   Visionneuse : l'autofocus cherche puis accroche
   ===================================================================== */
.vis-scene img.cherche { animation: af-photo 950ms cubic-bezier(.3,.6,.2,1) both; }
.vis-af { position: absolute; left: 50%; top: 50%; width: min(18vw, 150px); aspect-ratio: 1; overflow: visible; pointer-events: none; transform: translate(-50%, -50%); opacity: 0; z-index: 2; }
.vis-af path { fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: square; }
.vis-af.vise { animation: af-vise 1150ms linear both; }
.vis-af.vise path { animation: af-confirme 1150ms steps(1) both; }
html.calme .vis-scene img.cherche { animation: none; }
html.calme .vis-af { display: none; }


/* =====================================================================
   Article sur grand écran : repères, texte, projet
   ===================================================================== */
.article-colle { position: sticky; top: calc(var(--entete) + 28px); display: grid; gap: 30px; padding-top: clamp(36px, 6vw, 80px); padding-bottom: 40px; }
.article-reperes { display: grid; gap: 14px; }
.article-reperes dt { font-stretch: 75%; font-weight: 600; font-size: .86rem; color: var(--gris-f); }
.article-reperes dd { font-weight: 650; }
.sommaire-titre { font-stretch: 75%; font-weight: 700; font-size: .9rem; color: var(--gris-f); margin-bottom: 10px; }
.sommaire ol { display: grid; gap: 2px; border-left: 1px solid color-mix(in srgb, var(--encre) 14%, transparent); }
.sommaire a { display: grid; grid-template-columns: 2.2em 1fr; gap: 4px; padding: 7px 0 7px 14px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--gris-f); font-size: .95rem; line-height: 1.35; transition: color .2s, border-color .2s; }
.sommaire a span { font-stretch: 70%; font-weight: 700; color: color-mix(in srgb, var(--encre) 35%, transparent); }
.sommaire a:hover { color: var(--encre); }
.sommaire a.actif { color: var(--encre); border-left-color: var(--accent); font-weight: 650; }
.sommaire a.actif span { color: var(--accent); }
.lecture-jauge { height: 2px; background: color-mix(in srgb, var(--encre) 10%, transparent); }
.lecture-jauge i { display: block; height: 100%; width: 0; background: var(--accent); }
.article-partage-vertical { display: grid; gap: 4px; justify-items: start; }
.article-partage-vertical a, .article-partage-vertical .lien-bouton { display: inline-flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--encre); text-decoration: none; font-weight: 600; font-size: .95rem; }
.article-partage-vertical .ic { width: 18px; height: 18px; }
.article-partage-vertical a:hover, .article-partage-vertical .lien-bouton:hover { color: var(--accent); }
.encart-projet { padding: 26px 24px; background: var(--encre); color: var(--papier); display: grid; gap: 14px; }
.encart-projet-titre { font-size: 1.5rem; font-weight: 850; font-stretch: 112%; line-height: 1.05; }
.encart-projet p:not(.encart-projet-titre) { color: color-mix(in srgb, var(--papier) 72%, transparent); font-size: .98rem; }
.encart-projet .btn { justify-content: space-between; }
.a-lire { display: grid; gap: 4px; }
.a-lire-item { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--encre) 10%, transparent); text-decoration: none; color: var(--encre); }
.a-lire-image { aspect-ratio: 1; overflow: hidden; background: var(--encre-2); }
.a-lire-image img { width: 100%; height: 100%; object-fit: cover; }
.a-lire-item b { display: block; font-weight: 750; line-height: 1.25; font-size: .98rem; }
.a-lire-item small { color: var(--gris-f); font-size: .85rem; }
.a-lire-item:hover b { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
@media (min-width: 900px) {
  .article-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: clamp(36px, 4vw, 72px); align-items: start; }
  .article-corps { margin: 0; max-width: 720px; }
  .article-droite { display: block; }
  .article-partage { max-width: var(--max); }
}
@media (min-width: 1200px) {
  .article-plan { grid-template-columns: minmax(200px, 250px) minmax(0, 720px) minmax(260px, 310px); justify-content: space-between; }
  .article-gauche { display: block; }
  .article-partage { display: none; }
  .article-suite { display: none; }
}

/* =====================================================================
   Pages de texte (mentions légales) : sommaire et contact en marge
   ===================================================================== */
.texte-plan { display: grid; gap: 34px; }
.texte-plan .texte-long { max-width: 70ch; }
.texte-marge { display: none; }
@media (min-width: 1100px) {
  .texte-plan { grid-template-columns: minmax(200px, 260px) minmax(0, 70ch) minmax(240px, 300px); justify-content: space-between; align-items: start; }
  .texte-marge { display: block; position: sticky; top: calc(var(--entete) + 28px); }
  .texte-plan .intertitre { scroll-margin-top: calc(var(--entete) + 24px); }
}

/* =====================================================================
   Réalisation sur grand écran : l'image à gauche, le récit à droite
   ===================================================================== */
.realisation-plan { display: grid; gap: 34px; }
.realisation-recit { display: grid; gap: 24px; align-content: start; }
.realisation-recit .realisation-texte { padding: 0; max-width: 60ch; }
.realisation-recit .btn { justify-self: start; }
@media (min-width: 1024px) {
  .realisation-plan { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: clamp(36px, 4vw, 72px); align-items: start; }
  .realisation-recit { position: sticky; top: calc(var(--entete) + 28px); }
  .realisation-plan .realisation-couverture img { max-height: none; }
}

/* =====================================================================
   Tarifs sur grand écran : les familles se rangent deux par deux
   ===================================================================== */
@media (min-width: 1100px) {
  .familles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 56px); }
  .familles .famille.large { grid-column: 1 / -1; }
  .familles .famille:not(.large) .formules.f2 { grid-template-columns: repeat(2, 1fr); }
}
.formules.f1 { grid-template-columns: 1fr !important; }

/* Service : une seule formule, accompagnée des options */
.formule-duo { display: grid; gap: 14px; }
.formule-options { padding: 26px 24px; border: 1px solid color-mix(in srgb, var(--papier) 14%, transparent); display: grid; gap: 14px; align-content: start; }
.formule-options h3 { font-size: 1.25rem; font-weight: 800; font-stretch: 108%; }
.formule-options ul { display: grid; gap: 0; }
.formule-options li { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--papier) 10%, transparent); color: color-mix(in srgb, var(--papier) 82%, transparent); }
.formule-options li b { font-weight: 650; color: var(--papier); white-space: nowrap; }
.formule-options p { color: var(--gris-c); font-size: .95rem; }
@media (min-width: 900px) { .formule-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }

.encart-lien { display: flex; align-items: center; gap: 10px; color: var(--papier); text-decoration: none; font-weight: 650; overflow-wrap: anywhere; }
.encart-lien .ic { width: 20px; height: 20px; flex: none; color: var(--accent); }
.encart-lien:hover span { text-decoration: underline; text-decoration-color: var(--accent); }
@media (min-width: 1100px) {
  .tarifs-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 4vw, 80px); align-items: start; padding-top: clamp(56px, 8vw, 120px); }
  .tarifs-bas .conditions { padding-top: 0; }
  .tarifs-bas .faq { padding-bottom: clamp(56px, 8vw, 120px); }
}

/* =====================================================================
   Retrouver ses photos par le visage
   ===================================================================== */
.viseur-visage { width: 100%; height: 100%; overflow: visible; display: block; }
.vv-bague { fill: none; stroke: color-mix(in srgb, var(--papier) 30%, transparent); stroke-width: 1; }
.vv-graduations { fill: none; stroke: color-mix(in srgb, var(--papier) 45%, transparent); stroke-width: 3; stroke-dasharray: .8 4.54; }
.vv-hexagone { fill: color-mix(in srgb, var(--papier) 5%, transparent); stroke: color-mix(in srgb, var(--papier) 22%, transparent); stroke-width: 1; }
.vv-af { transform-origin: 60px 60px; animation: vv-af 2.8s cubic-bezier(.3,.6,.2,1) infinite; }
.vv-af path { fill: none; stroke: var(--papier); stroke-width: 2; stroke-linecap: square; animation: vv-af-c 2.8s steps(1) infinite; }
.vv-point { fill: var(--accent); }
@keyframes vv-af { 0% { transform: scale(1.35); opacity: 0; } 18% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.08); } 42% { transform: scale(.97); } 52%, 88% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes vv-af-c { 0% { stroke: var(--papier); } 50% { stroke: var(--accent); } }
html.calme .vv-af, html.calme .vv-af path { animation: none; }

.album-conservation { display: flex; gap: 8px; align-items: center; margin-top: 12px; color: var(--gris-c); font-size: .92rem; }
.album-conservation .ic { width: 18px; height: 18px; flex: none; color: var(--accent); }
.album-visage { padding: 8px 0 26px; }
.bande-visage {
  display: grid; grid-template-columns: 72px 1fr; gap: 14px 18px; align-items: center;
  padding: 18px; background: var(--encre-2); color: var(--papier); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--papier) 10%, transparent);
  transition: border-color .25s;
}
.bande-visage:hover { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.bande-visage-viseur { width: 72px; height: 72px; }
.bande-visage-texte { display: grid; gap: 4px; }
.bande-visage-texte b { font-size: 1.2rem; font-weight: 820; font-stretch: 110%; line-height: 1.1; }
.bande-visage-texte span { color: var(--gris-c); font-size: .95rem; line-height: 1.45; }
.bande-visage .btn { grid-column: 1 / -1; justify-self: center; }
@media (min-width: 720px) {
  .bande-visage { grid-template-columns: 92px 1fr auto; padding: 22px 26px; }
  .bande-visage-viseur { width: 92px; height: 92px; }
  .bande-visage .btn { grid-column: auto; }
}

.retrouver-confiance { display: flex; gap: 12px; align-items: flex-start; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--papier) 12%, transparent); color: var(--gris-c); font-size: .95rem; line-height: 1.5; }
.retrouver-confiance .ic { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 2px; }

/* Page d'entrée */
.retrouver { padding: calc(var(--entete) + clamp(28px, 6vw, 80px)) 0 clamp(56px, 8vw, 110px); min-height: calc(100svh - var(--barre)); }
.retrouver-plan { display: grid; gap: 48px; }
.retrouver-intro { display: grid; gap: 22px; align-content: start; }
.retrouver-intro .chapeau { color: var(--gris-c); max-width: 46ch; }
.retrouver-code { display: grid; gap: 8px; padding: 22px; background: var(--encre-2); }
.retrouver-code label { font-weight: 650; }
.retrouver-saisie { display: grid; gap: 12px; }
.retrouver-saisie input { min-height: 54px; font-size: 1.1rem; padding: 0 16px; background: var(--encre); color: var(--papier); border: 1px solid color-mix(in srgb, var(--papier) 22%, transparent); border-radius: 0; }
.retrouver-saisie input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.retrouver-saisie .btn { justify-self: center; }
.retrouver-etapes { display: grid; gap: 0; }
.retrouver-etapes li { display: grid; grid-template-columns: 3em 1fr; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--papier) 10%, transparent); color: var(--gris-c); line-height: 1.5; }
.retrouver-etapes li b { display: block; color: var(--papier); font-weight: 700; margin-bottom: 2px; }
.retrouver-etapes span { grid-row: span 2; font-stretch: 62%; font-weight: 700; color: var(--accent); padding-top: .15em; }
.evenements { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.evenement { display: grid; grid-template-rows: auto 1fr auto; background: var(--encre-2); color: var(--papier); text-decoration: none; border: 1px solid transparent; transition: border-color .25s; }
.evenement:hover { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.evenement-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.evenement-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sortie); }
.evenement:hover .evenement-image img { transform: scale(1.05); }
.evenement-voile { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: rgb(0 0 0 / .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.evenement-voile .ic { width: 30px; height: 30px; color: var(--papier); }
.evenement-texte { display: grid; gap: 4px; padding: 16px 16px 6px; }
.evenement-texte b { font-weight: 780; font-stretch: 105%; line-height: 1.2; }
.evenement-texte small { color: var(--gris-c); font-size: .88rem; }
.evenement-action { display: flex; align-items: center; gap: 8px; padding: 12px 16px 16px; font-weight: 700; color: var(--papier); }
.evenement-action .ic { width: 20px; height: 20px; color: var(--accent); }
.retrouver-vide { display: grid; gap: 18px; justify-items: center; text-align: center; padding: 40px 20px; border: 1px dashed color-mix(in srgb, var(--papier) 18%, transparent); color: var(--gris-c); }
.retrouver-vide-viseur { width: 140px; height: 140px; }
@media (min-width: 720px) { .retrouver-saisie { grid-template-columns: 1fr auto; } .retrouver-saisie .btn { justify-self: stretch; } }
@media (min-width: 1024px) {
  .retrouver-plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(48px, 5vw, 96px); align-items: start; }
  .retrouver-liste { position: sticky; top: calc(var(--entete) + 28px); }
}

/* Page de selfie */
.scan { padding: calc(var(--entete) + clamp(14px, 3vw, 40px)) 0 clamp(40px, 6vw, 90px); min-height: calc(100svh - var(--barre)); }
.scan-plan { display: grid; gap: 26px; }
.scan-scene { display: grid; gap: 16px; justify-items: center; align-content: start; }
.scan-viseur { position: relative; width: min(84vw, 52vh, 560px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #070707; isolation: isolate; }
.scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); opacity: 0; transition: opacity .5s; }
[data-etat="capture"] .scan-video, [data-etat="chargement"] .scan-video { opacity: 1; }
.scan-iris { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.scan-bague { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; transform: rotate(-90deg); }
.sb-trait { fill: none; stroke: color-mix(in srgb, var(--papier) 26%, transparent); stroke-width: 1; }
.sb-graduations line { stroke: color-mix(in srgb, var(--papier) 40%, transparent); stroke-width: 1; }
.sb-graduations line.longue { stroke: var(--papier); stroke-width: 1.4; }
.sb-etape { fill: none; stroke: var(--accent); stroke-width: 6; stroke-dasharray: 0 300; transition: stroke-dasharray .7s var(--sortie); }
.sb-etape.e2 { stroke-dashoffset: -100; }
.sb-etape.e3 { stroke-dashoffset: -200; }
.scan-viseur.e1 .sb-etape.e1, .scan-viseur.e2 .sb-etape.e2, .scan-viseur.e3 .sb-etape.e3 { stroke-dasharray: 96 204; }
.scan-af { position: absolute; z-index: 2; width: 30%; height: 30%; left: 35%; top: 30%; overflow: visible; opacity: 0; pointer-events: none; transition: left 140ms linear, top 140ms linear, width 140ms linear, height 140ms linear, opacity .2s; }
.scan-af path { fill: none; stroke: #fff; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linecap: square; transition: stroke .2s; }
.scan-af.visible { opacity: 1; }
.scan-af.net path { stroke: var(--accent); }
.scan-flash { position: absolute; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; }
.scan-flash.go { animation: flash-objectif 420ms cubic-bezier(.1,.6,.2,1); }
.scan-repos { position: absolute; inset: 14%; z-index: 2; transition: opacity .4s; }
.scan:not([data-etat="intro"]) .scan-repos { opacity: 0; }
.scan-consigne { position: absolute; left: 50%; bottom: 13%; z-index: 4; transform: translateX(-50%); width: max-content; max-width: 78%; padding: 8px 14px; background: rgb(12 12 12 / .78); color: #fff; font-weight: 650; text-align: center; line-height: 1.3; opacity: 0; transition: opacity .25s; }
[data-etat="capture"] .scan-consigne:not(:empty) { opacity: 1; }
.scan-recherche { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; text-align: center; opacity: 0; transition: opacity .3s; pointer-events: none; }
.scan-recherche span { font-size: clamp(2.6rem, 9vw, 4.6rem); font-weight: 300; font-stretch: 66%; line-height: 1; color: #fff; }
.scan-recherche small { color: var(--gris-c); font-stretch: 75%; font-weight: 600; }
[data-etat="recherche"] .scan-recherche { opacity: 1; }
.scan-jauges { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; color: var(--gris); font-size: .9rem; font-weight: 600; opacity: 0; transition: opacity .3s; }
[data-etat="capture"] .scan-jauges { opacity: 1; }
.sj { display: inline-flex; align-items: center; gap: 8px; }
.sj i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--gris); transition: background .3s, border-color .3s; }
.sj.fait { color: var(--papier); }
.sj.fait i { background: var(--accent); border-color: var(--accent); }
.scan-texte { display: grid; align-content: start; gap: 18px; }
.scan-bloc { display: grid; gap: 18px; align-content: start; }
.scan-bloc[hidden] { display: none; }
.scan-titre { font-size: clamp(1.9rem, 4.2vw, 3.4rem); font-weight: 880; font-stretch: 118%; line-height: .98; text-transform: uppercase; }
html[data-capitales="0"] .scan-titre { text-transform: none; }
.scan-texte .chapeau { color: var(--gris-c); max-width: 48ch; }
.scan-note { display: flex; gap: 10px; align-items: flex-start; color: var(--gris-c); font-size: .95rem; }
.scan-note .ic { width: 18px; height: 18px; flex: none; color: var(--accent); margin-top: 2px; }
.scan-etapes { display: grid; }
.scan-etapes li { display: grid; grid-template-columns: 2.6em 1fr; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--papier) 10%, transparent); color: var(--gris-c); }
.scan-etapes span { font-stretch: 62%; font-weight: 700; color: var(--accent); }
.scan-accord { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-weight: 600; line-height: 1.4; }
.scan-accord input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); margin-top: 1px; }
.scan-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center; }
.scan-import { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.scan-import .ic { width: 18px; height: 18px; }
.scan-poids { color: var(--gris); font-size: .86rem; text-align: center; }
.scan-erreur { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; line-height: 1.45; }
.scan-erreur .ic { width: 22px; height: 22px; flex: none; color: var(--accent); }
.scan-barre { height: 4px; background: color-mix(in srgb, var(--papier) 12%, transparent); }
.scan-barre i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.scan-pourcent { font-size: clamp(2.4rem, 7vw, 4rem); font-weight: 300; font-stretch: 66%; line-height: 1; }
.scan-moi { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--encre), 0 0 0 4px var(--accent); }
.scan-moi canvas { width: 100%; height: 100%; display: block; }
.scan-direct { display: flex; gap: 10px; align-items: center; color: var(--gris-c); font-size: .92rem; }
.scan-direct .rec { animation: rec 1.6s steps(2, jump-none) infinite; }
.scan-resultats { padding-top: clamp(26px, 4vw, 50px); }
.scan-resultats[hidden] { display: none; }
.scan-possibles { margin-top: clamp(40px, 6vw, 80px); display: grid; gap: 14px; }
.scan-grille { columns: 2; column-gap: 8px; }
.scan-photo { display: block; width: 100%; margin: 0 0 8px; padding: 0; border: 0; position: relative; overflow: hidden; background: var(--encre-2); cursor: zoom-in; break-inside: avoid; }
.scan-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--sortie); }
.scan-photo:hover img { transform: scale(1.03); }
.scan-cadre {
  position: absolute; pointer-events: none; --c: 12px; --e: 2px;
  background:
    linear-gradient(#fff, #fff) left top / var(--c) var(--e) no-repeat, linear-gradient(#fff, #fff) left top / var(--e) var(--c) no-repeat,
    linear-gradient(#fff, #fff) right top / var(--c) var(--e) no-repeat, linear-gradient(#fff, #fff) right top / var(--e) var(--c) no-repeat,
    linear-gradient(#fff, #fff) left bottom / var(--c) var(--e) no-repeat, linear-gradient(#fff, #fff) left bottom / var(--e) var(--c) no-repeat,
    linear-gradient(#fff, #fff) right bottom / var(--c) var(--e) no-repeat, linear-gradient(#fff, #fff) right bottom / var(--e) var(--c) no-repeat;
  filter: drop-shadow(0 0 2px rgb(0 0 0 / .5));
}
.scan-photo:hover .scan-cadre { filter: drop-shadow(0 0 2px rgb(0 0 0 / .5)) sepia(1) saturate(30) hue-rotate(-12deg); }
.scan-photo.nouvelle { animation: nouvelle-photo 1s var(--sortie); }
@keyframes nouvelle-photo { 0% { opacity: 0; transform: scale(.94); filter: brightness(2.2); } 100% { opacity: 1; transform: none; filter: none; } }
@media (min-width: 720px) { .scan-grille { columns: 3; column-gap: 10px; } .scan-photo { margin-bottom: 10px; } .scan-actions { justify-content: flex-start; } .scan-poids { text-align: left; } }
@media (min-width: 1024px) {
  .scan-plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 100px); align-items: center; min-height: calc(100svh - var(--entete) - 120px); }
  .scan-viseur { width: min(42vw, 70vh, 600px); }
  .scan-grille { columns: 4; }
}
@media (min-width: 1500px) { .scan-grille { columns: 5; } }

/* Ma sélection */
.selection-tete { padding: calc(var(--entete) + clamp(24px, 5vw, 64px)) 0 28px; }
.selection-plan { display: grid; gap: 22px; }
.selection-plan .chapeau { color: var(--gris-c); }
.selection-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center; }
@media (min-width: 1024px) {
  .selection-plan { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .selection-actions { justify-content: flex-end; }
}

/* Accueil : retrouver ses photos */
.accueil-visage { padding: clamp(64px, 9vw, 130px) 0; }
.accueil-visage-plan { display: grid; gap: 34px; align-items: center; }
.accueil-visage-viseur { width: min(64vw, 380px); aspect-ratio: 1; justify-self: center; }
.accueil-visage-texte { display: grid; gap: 22px; justify-items: start; }
.accueil-visage-texte .chapeau { color: var(--gris-c); max-width: 46ch; }
@media (min-width: 1024px) {
  .accueil-visage-plan { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 6vw, 120px); }
  .accueil-visage-viseur { width: min(34vw, 460px); }
}

.scan-apercu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(var(--zoom, 1.4)); transition: opacity .35s; z-index: 0; }
.scan-apercu.visible { opacity: 1; }
.scan-viseur.diaporama .scan-repos { opacity: 0; }
[data-etat="resultats"] .scan-viseur:not(.diaporama) .scan-repos { opacity: 1; }
.lien-icone { display: inline-flex; align-items: center; gap: 8px; }
.lien-icone .ic { width: 20px; height: 20px; flex: none; }

/* Téléphone : l'écran d'accueil du selfie tient sur une hauteur */
@media (max-width: 1023px) {
  [data-etat="intro"] .scan-viseur { width: min(46vw, 24vh, 260px); }
  .scan-viseur { transition: width .5s var(--sortie); }
  [data-etat="intro"] .scan-scene { gap: 0; }
  .scan-etapes { display: none; }
  .scan-bloc { gap: 14px; }
  .scan-texte .fil { display: none; }
  [data-etat="intro"] .scan-titre { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .scan-texte .chapeau { font-size: 1.02rem; }
  .retrouver-confiance { font-size: .88rem; padding-top: 12px; }
  .scan-plan { gap: 18px; }
}
.titre-xl .ligne, .titre-xxl .ligne, .titre-l .ligne { display: block; }

.article-reperes dd, .chiffres-visages dd { margin: 0; }