:root {
    color-scheme: dark;
    --noir: #07070a;
    --panneau: #0e0e13;
    --panneau-haut: #16161d;
    --ligne-or: rgba(227, 182, 92, 0.25);
    --ligne-or-forte: rgba(227, 182, 92, 0.5);
    --os: #f2ede1;
    --sourdine: #b8b3a6;
    --or: #e3b65c;
    --champagne: #f7dc9c;
    --ambre: #b8832f;
    --display: "Italiana", "Didot", "Bodoni 72", serif;
    --body: "Jost", "Futura", "Avenir Next", sans-serif;
    --mono: "Spline Sans Mono", ui-monospace, monospace;
    --sortie: cubic-bezier(0.19, 0.8, 0.22, 1);
    --z-transition: 95;
    --z-nav: 100;
    --z-grain: 110;
    --z-chargement: 120;
    --z-curseur: 130;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--noir); color: var(--os);
    font-family: var(--body); font-weight: 300;
    font-size: 17.5px; line-height: 1.7; letter-spacing: 0.01em;
    overflow-x: hidden;
  }
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(900px 600px at 85% -5%, rgba(227, 182, 92, 0.09), transparent 65%),
      radial-gradient(900px 760px at -12% 50%, rgba(168, 184, 214, 0.05), transparent 62%),
      radial-gradient(700px 500px at 70% 105%, rgba(247, 220, 156, 0.045), transparent 60%);
  }
  ::selection { background: var(--or); color: var(--noir); }
  a { color: inherit; }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; }
  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }

  .grain {
    position: fixed; inset: -50%; width: 200%; height: 200%;
    pointer-events: none; z-index: var(--z-grain); opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain-shift 0.9s steps(4) infinite;
  }
  @keyframes grain-shift {
    0% { transform: translate(0,0); } 25% { transform: translate(-2%,1%); }
    50% { transform: translate(1%,-2%); } 75% { transform: translate(-1%,2%); }
    100% { transform: translate(0,0); }
  }

  /* curseur */
  #cdot, #cring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: var(--z-curseur); display: none; }
  #cdot { width: 5px; height: 5px; background: var(--os); transform: translate(-50%,-50%); }
  #cring { width: 30px; height: 30px; border: 1px solid var(--or); transform: translate(-50%,-50%) scale(1); transition: transform 0.25s var(--sortie), border-color 0.25s; }
  #cring.grow { transform: translate(-50%,-50%) scale(1.8); border-color: var(--champagne); }
  .customcursor #cdot, .customcursor #cring { display: block; opacity: 0; transition: opacity 0.4s; }
  .customcursor.souris #cdot, .customcursor.souris #cring { opacity: 1; }
  .customcursor, .customcursor a, .customcursor button, .customcursor summary { cursor: none; }

  /* chargement */
  #loader { display: none; }
  .js #loader {
    position: fixed; inset: 0; z-index: var(--z-chargement); background: var(--noir);
    display: grid; place-items: center;
    transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1);
  }
  #loader.done { transform: translateY(-101%); }
  #loader .word { font-family: var(--display); font-size: 1.3rem; letter-spacing: 0.55em; color: var(--os); }
  #loader .word em { font-style: normal; color: var(--or); }
  #cnt { position: absolute; right: 36px; bottom: 30px; font-family: var(--mono); font-size: 0.8rem; color: var(--sourdine); font-variant-numeric: tabular-nums; }

  /* navigation */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
    display: flex; justify-content: space-between; align-items: center;
    padding: calc(22px + env(safe-area-inset-top, 0px)) clamp(18px, 4vw, 36px) 22px; mix-blend-mode: difference;
  }
  nav .n-logo { font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.4em; color: #fff; text-decoration: none; }
  nav .n-actions { display: flex; align-items: center; gap: 10px; }
  nav .n-tel { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 0.85rem; font-weight: 500; padding: 9px 6px; }
  nav .n-tel:hover { color: #fff; }
  nav .n-slogan { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
  nav .n-link { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 3px; }

  /* ------------------ heros : l'oeil dans le O ------------------ */
  #hero {
    position: relative; min-height: 94vh; isolation: isolate;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 110px 24px 70px; text-align: center;
  }
  #reseau {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 52%, #000 74%, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 52%, #000 74%, #000 90%, transparent 100%);
  }
  .h-centre { display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }
  #scene3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: none; }
  .mode3d #voyage { height: 210vh; margin-bottom: -40vh; }
  .mode3d #angle { position: relative; z-index: 2; border-top-color: transparent;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40vh); mask-image: linear-gradient(180deg, transparent 0, #000 40vh); }
  .mode3d #hero { position: sticky; top: 0; height: 100vh; min-height: 0; overflow: hidden; }
  .mode3d #scene3d { display: block; }
  .mode3d #reseau { display: none; }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-stopped { overflow: hidden; }
  .h-eyebrow {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.42em;
    text-transform: uppercase; color: var(--or); margin: 0 0 5vh;
    display: flex; align-items: center; gap: 18px;
  }
  .h-eyebrow::before, .h-eyebrow::after { content: ""; width: clamp(20px, 5vw, 52px); height: 1px; background: var(--ligne-or); }
  .wordmark {
    display: flex; align-items: center; justify-content: center; gap: 0.015em;
    font-family: var(--display); font-size: clamp(3.6rem, 16vw, 13rem);
    line-height: 1; color: var(--os); user-select: none; margin: 0; font-weight: 400;
  }
  .wordmark span { display: inline-block; }
  #eyeO {
    position: relative; display: inline-block;
    width: 0.74em; height: 0.74em; margin: 0 0.04em;
    border: 2px solid var(--or); border-radius: 50%;
    box-shadow: 0 0 30px rgba(227, 182, 92, 0.25), inset 0 0 24px rgba(227, 182, 92, 0.15);
    overflow: hidden; background: radial-gradient(circle at 50% 42%, #1e1a12, #050403 72%);
  }
  #iris { position: absolute; inset: 0; width: 100%; height: 100%; }
  #eyelid { position: absolute; inset: -2%; background: var(--noir); border-radius: 50%; transform: scaleY(0); transform-origin: 50% 0; }
  #eyelid.blink { animation: blink 0.26s ease-in-out; }
  @keyframes blink { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
  .h-slogan { font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.2; color: var(--sourdine); margin: 4vh 0 0; }
  .h-slogan b { font-weight: 400; color: var(--or); }
  .h-tagline {
    font-weight: 300; font-size: clamp(1rem, 1.8vw, 1.25rem);
    color: var(--sourdine); max-width: 52ch; margin: 2.2vh 0 0; text-wrap: balance;
  }
  .h-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 4vh 0 0; }
  .btn-ligne {
    display: inline-block; text-decoration: none; font-weight: 500; font-size: 0.85rem; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--sourdine); border: 1px solid var(--ligne-or-forte); padding: 18px 40px; transition: color 0.35s, border-color 0.35s;
  }
  .btn-ligne:hover, .btn-ligne:focus-visible { color: var(--os); border-color: var(--or); }
  .h-faits { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sourdine); margin: 3.2vh 0 0; opacity: 0.85; }
  .h-tagline b { color: var(--os); font-weight: 400; }
  .h-scroll {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.4em;
    text-transform: uppercase; color: var(--sourdine);
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

  #warp { position: fixed; inset: 0; width: 100%; height: 100%; z-index: var(--z-transition); pointer-events: none; display: none; }
  #warpHud {
    position: fixed; left: 50%; bottom: 9vh; transform: translateX(-50%); z-index: var(--z-transition);
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--or); pointer-events: none; display: none; white-space: nowrap; font-variant-numeric: tabular-nums;
  }

  /* ------------------ angles morts : quatre lignes, une lumiere qui passe ------------------ */
  #angle { position: relative; background: var(--noir); border-top: 1px solid var(--ligne-or); border-bottom: 1px solid var(--ligne-or); }
  .am-int { max-width: 1120px; margin: 0 auto; padding: 22vh clamp(20px, 5vw, 56px) 20vh; }
  .am-tete { margin-bottom: 11vh; }
  .am-tete h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: 1.04; margin: 0 0 18px; }
  .am-tete p { color: var(--sourdine); max-width: 46ch; margin: 0; font-size: 1.08rem; }
  .am-liste { list-style: none; margin: 0; padding: 0; }
  .am-liste li {
    position: relative; display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 8px 40px; align-items: baseline;
    padding: 34px 0; border-top: 1px solid rgba(227, 182, 92, 0.14);
  }
  .am-liste li:last-child { border-bottom: 1px solid rgba(227, 182, 92, 0.14); }
  .am-liste li::after {
    content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: linear-gradient(90deg, var(--champagne), var(--or) 40%, transparent);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--sortie);
  }
  .am-quand { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--or); transition: opacity 0.7s var(--sortie); }
  .am-liste p { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 3.3vw, 2.7rem); line-height: 1.22; color: var(--os); transition: color 0.7s var(--sortie), opacity 0.7s var(--sortie), transform 0.9s var(--sortie); }
  .js .am-liste.vivant li:not(.eclaire) p { opacity: 0.3; transform: translateX(-10px); }
  .js .am-liste.vivant li:not(.eclaire) .am-quand { opacity: 0.4; }
  .js .am-liste.vivant li.eclaire p { color: var(--champagne); }
  .js .am-liste.vivant li.eclaire::after { transform: scaleX(1); }
  .am-chute { margin: 9vh 0 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--sourdine); }

  /* ------------------ postes : defilement lateral ------------------ */
  #hwrap { position: relative; }
  .hs-on #hwrap { height: 640vh; }
  #hsticky { display: flex; align-items: center; overflow: hidden; }
  .hs-on #hsticky { position: sticky; top: 0; height: 100vh; }
  #htrack { display: flex; flex-direction: column; gap: 9vh; padding: 14vh clamp(20px, 8vw, 120px); will-change: transform; }
  .hs-on #htrack { flex-direction: row; align-items: center; gap: 6vw; padding: 0 8vw; }
  .panel {
    flex: 0 0 auto; width: min(640px, 100%);
    border: 1px solid var(--ligne-or);
    background: linear-gradient(170deg, var(--panneau), var(--noir));
    padding: clamp(28px, 5vw, 44px) clamp(24px, 4vw, 40px) clamp(32px, 5vw, 48px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(247, 220, 156, 0.2);
    background-image: linear-gradient(118deg, transparent 38%, rgba(255, 255, 255, 0.04) 47%, transparent 56%), linear-gradient(170deg, var(--panneau-haut), var(--noir));
  }
  .hs-on .panel { width: min(640px, 86vw); }
  .panel.intro { border: none; background: none; box-shadow: none; padding: 0; }
  .hs-on .panel.intro { width: min(460px, 80vw); }
  .panel .p-num {
    font-family: var(--display); font-size: clamp(3.6rem, 9vw, 7rem); line-height: 1;
    color: transparent; -webkit-text-stroke: 1px var(--or); display: block; margin-bottom: 18px;
  }
  .p-med {
    position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 22px;
    font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--champagne);
    border: 1px solid var(--or); border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #221d13, #060504 72%);
    box-shadow: 0 0 26px rgba(227, 182, 92, 0.22), inset 0 0 20px rgba(227, 182, 92, 0.14);
  }
  .p-med::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px dashed rgba(247, 220, 156, 0.4); animation: tourne 26s linear infinite; }
  .p-med::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(227, 182, 92, 0.22); border-left-color: transparent; border-right-color: transparent; animation: tourne 38s linear infinite reverse; }
  @keyframes tourne { to { transform: rotate(360deg); } }
  /* la niche : une alcove eclairee ou se tient la figurine */
  .panel.agent { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 0 30px; align-items: center; }
  .panel.agent > :not(.niche) { grid-column: 2; }
  .niche {
    position: relative; grid-column: 1; grid-row: 1 / span 4; width: 172px; height: 300px; padding: 0; overflow: hidden;
    border: 0; border-radius: 86px 86px 14px 14px; background: transparent; box-shadow: none;
  }
  /* screen sur le calque des deux videos : le noir disparait dans la page, l'agent semble pose dans la scene.
     Dans le calque, le salut recouvre le repos (screen sur chaque video les additionnerait : agent en double).
     Le fond des fichiers vaut (6,7,9) et non 0 : contrast(1.1) le ramene a 0 (marge jusqu'a 11), sinon un rectangle clair reste visible sur le panneau */
  .niche-film { position: absolute; inset: 0; z-index: 1; }
  /* repli (navigateur sans video transparente) : video sur fond noir fondue dans la page */
  .niche-film.ecran { mix-blend-mode: screen; filter: contrast(1.1); }
  .niche video, .niche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  /* sol de lumiere sous l'agent */
  .niche::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 2%; height: 10%; z-index: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(240, 197, 106, 0.55), rgba(240, 197, 106, 0.12) 55%, transparent); filter: blur(5px); }
  .p-poste { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--or) !important; margin: 0 0 8px !important; }
  /* l'etat de l'agent : en service aujourd'hui, ou construit sur commande */
  .p-statut { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; margin: 18px 0 0 !important; padding: 7px 12px; border: 1px solid var(--ligne-or); border-radius: 999px; color: var(--sourdine) !important; }
  .p-statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--or); }
  .p-statut.service { color: var(--champagne) !important; border-color: var(--or); }
  .p-statut.service::before { background: var(--or); box-shadow: 0 0 10px rgba(227, 182, 92, 0.7); }
  .p-statut.commande { border-style: dashed; }
  .panel h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.12; margin: 0 0 14px; color: var(--os); }
  .panel p { color: var(--sourdine); margin: 0; max-width: 52ch; }
  .panel .a-promesse { font-family: var(--display); font-size: clamp(1.2rem, 2.1vw, 1.6rem); line-height: 1.28; color: var(--os); margin: 0 0 16px; max-width: 30ch; }
  .a-comp { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
  .a-comp li { position: relative; padding-left: 18px; color: var(--sourdine); font-size: 0.95rem; line-height: 1.45; }
  .a-comp li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 8px; height: 1px; background: var(--or); }
  .panel .a-garde { margin: 16px 0 0; font-size: 0.86rem; color: var(--sourdine); opacity: 0.9; }
  .panel .a-garde::before { content: "Garde-fou"; display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--or); margin-bottom: 4px; }
  .panel .p-rule { width: 64px; height: 1px; background: var(--or); margin: 26px 0 0; }
  .panel.intro h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.1; margin: 0 0 16px; }
  .panel.suite { border-style: dashed; background: none; box-shadow: none; }
  .panel.suite .p-etat { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--or); margin: 0 0 18px; }
  #hprog { position: absolute; left: 8vw; right: 8vw; bottom: 7vh; height: 1px; background: rgba(239, 233, 220, 0.12); display: none; }
  .hs-on #hprog { display: block; }
  #hprog i { display: block; height: 100%; width: 0; background: var(--or); }

  .c-coord { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--sourdine); margin: 28px 0 0; }
  .c-coord a { color: var(--sourdine); text-decoration: none; border-bottom: 1px solid var(--ligne-or); }

  /* ------------------ etre trouve, et choisi ------------------ */
  #outil { border-top: 1px solid var(--ligne-or); }
  .o-int { max-width: 1240px; margin: 0 auto; padding: 16vh clamp(20px, 4vw, 40px) 12vh; }
  .o-int h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.08; margin: 0 0 7vh; max-width: 16ch; }
  .o-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5vh clamp(36px, 7vw, 120px); }
  .o-cols div { border-top: 1px solid var(--ligne-or); padding-top: 24px; }
  .o-cols p:not(.pc-sous) { margin: 0; color: var(--sourdine); max-width: 48ch; }
  .o-chute { font-family: var(--display); font-size: clamp(1.4rem, 2.8vw, 2.3rem); line-height: 1.3; color: var(--os); margin: 8vh 0 0; max-width: 32ch; text-wrap: balance; }
  #visibilite { max-width: 1240px; margin: 0 auto; padding: 16vh clamp(20px, 4vw, 40px) 10vh; }
  .v-tete { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px clamp(36px, 7vw, 120px); align-items: end; margin-bottom: 8vh; }
  .v-tete h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.08; margin: 0; max-width: 14ch; }
  .v-tete p { color: var(--sourdine); margin: 0; max-width: 46ch; }
  .v-liste { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6vh clamp(28px, 4vw, 60px); }
  .v-liste div { border-top: 1px solid var(--ligne-or); padding-top: 26px; }
  .v-liste dt { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; color: var(--champagne); margin: 0 0 12px; }
  .v-liste dd { margin: 0; color: var(--sourdine); max-width: 40ch; }
  .v-regles { margin: 8vh 0 0; padding: 26px clamp(22px, 3vw, 36px); border: 1px dashed var(--ligne-or); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 48px); align-items: center; }
  .v-regles .p-statut { margin: 0 !important; }
  .v-regles p { margin: 0; color: var(--sourdine); max-width: 70ch; }
  .v-regles p b { color: var(--os); font-weight: 400; }

  /* ------------------ exemple sur piece ------------------ */
  #piece { max-width: 1240px; margin: 0 auto; padding: 18vh clamp(20px, 4vw, 40px) 12vh; }
  .pc-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; margin-bottom: 44px; }
  .pc-tete h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.05; margin: 0 0 14px; }
  .pc-tete p { color: var(--sourdine); margin: 0; max-width: 50ch; }
  .pc-onglets { display: flex; gap: 0; border: 1px solid var(--ligne-or); }
  .pc-onglets button {
    font: inherit; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--sourdine); background: none; border: 0; padding: 14px 22px; cursor: pointer;
    transition: color 0.3s, background-color 0.3s;
  }
  .pc-onglets button + button { border-left: 1px solid var(--ligne-or); }
  .pc-onglets button[aria-pressed="true"] { color: var(--noir); background: var(--or); }
  .pc-scene { position: relative; border: 1px solid var(--ligne-or); background: linear-gradient(172deg, var(--panneau-haut), var(--panneau) 40%, var(--noir)); box-shadow: inset 0 1px 0 rgba(247, 220, 156, 0.2), 0 30px 90px rgba(0, 0, 0, 0.6); }
  .pc-bandeau {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 12px clamp(18px, 3vw, 32px); border-bottom: 1px solid var(--ligne-or);
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--or);
  }
  .pc-bandeau span:last-child { color: var(--sourdine); }
  .pc-grille { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .pc-mail { padding: clamp(24px, 4vw, 44px); border-right: 1px solid var(--ligne-or); }
  .pc-mail dl { margin: 0 0 26px; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 0.9rem; }
  .pc-mail dt { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sourdine); padding-top: 4px; }
  .pc-mail dd { margin: 0; color: var(--os); }
  .pc-mail blockquote { margin: 0; padding: 0; font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.45; color: rgba(242, 237, 225, 0.9); }
  .pc-fiche { padding: clamp(24px, 4vw, 44px); }
  .pc-fiche h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 0 0 20px; color: var(--champagne); }
  .pc-champs { margin: 0 0 30px; display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 0; }
  .pc-champs dt, .pc-champs dd { padding: 10px 0; border-bottom: 1px solid rgba(227, 182, 92, 0.14); margin: 0; }
  .pc-champs dt { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sourdine); padding-right: 22px; padding-top: 14px; }
  .pc-champs dd { color: var(--os); }
  .pc-sous { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--or); margin: 0 0 12px; }
  .pc-manque { list-style: none; margin: 0 0 30px; padding: 0; }
  .pc-manque li { position: relative; padding: 6px 0 6px 26px; color: var(--os); }
  .pc-manque li::before { content: ""; position: absolute; left: 0; top: 17px; width: 12px; height: 1px; background: var(--or); }
  .pc-brouillon { border: 1px solid var(--ligne-or-forte); padding: 20px 22px; background: rgba(7, 7, 10, 0.6); }
  .pc-brouillon p { margin: 0; color: rgba(242, 237, 225, 0.88); font-size: 0.98rem; }
  .pc-etat { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 16px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sourdine); }
  .pc-etat b { font-weight: 400; color: var(--noir); background: var(--champagne); padding: 5px 12px; }
  .pc-note { margin: 26px 0 0; color: var(--sourdine); font-size: 0.92rem; max-width: 70ch; }
  .arme .pc-ligne { opacity: 0; transform: translateY(10px); }
  .arme .pc-ligne.vu { opacity: 1; transform: none; transition: opacity 0.6s var(--sortie), transform 0.6s var(--sortie); }

  /* ------------------ deroule ------------------ */
  #deroule { border-top: 1px solid var(--ligne-or); background: var(--noir); }
  .d-int { max-width: 1240px; margin: 0 auto; padding: 16vh clamp(20px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 110px); }
  .d-int h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.08; margin: 0 0 18px; position: sticky; top: 16vh; }
  .d-etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
  .d-etapes li { counter-increment: etape; display: grid; grid-template-columns: clamp(54px, 7vw, 92px) 1fr; gap: 0 18px; padding: 30px 0; border-top: 1px solid var(--ligne-or); }
  .d-etapes li:last-child { border-bottom: 1px solid var(--ligne-or); }
  .d-etapes li::before { content: counter(etape); font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 0.9; color: transparent; -webkit-text-stroke: 1px var(--or); }
  .d-etapes h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 8px; line-height: 1.2; }
  .d-etapes p { margin: 0; color: var(--sourdine); max-width: 56ch; }

  /* ------------------ engagements ------------------ */
  #engagements { max-width: 1240px; margin: 0 auto; padding: 18vh clamp(20px, 4vw, 40px) 10vh; }
  #engagements h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.08; margin: 0 0 8vh; max-width: 18ch; }
  .e-liste { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7vh clamp(36px, 7vw, 120px); }
  .e-liste div:nth-child(even) { margin-top: 9vh; }
  .e-liste dt { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; color: var(--champagne); margin: 0 0 12px; }
  .e-liste dd { margin: 0; color: var(--sourdine); max-width: 46ch; }

  /* ------------------ FAQ ------------------ */
  #faq { border-top: 1px solid var(--ligne-or); }
  .faq-int { max-width: 1240px; margin: 0 auto; padding: 16vh clamp(20px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 110px); }
  .faq-int h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.08; margin: 0 0 18px; }
  .faq-sous { color: var(--sourdine); margin: 0; }
  .faq-liste details { border-top: 1px solid var(--ligne-or); }
  .faq-liste details:last-child { border-bottom: 1px solid var(--ligne-or); }
  .faq-liste summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 0; font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.25; color: var(--os); }
  .faq-liste summary::-webkit-details-marker { display: none; }
  .faq-liste summary::after { content: "+"; font-family: var(--mono); color: var(--or); flex: 0 0 auto; }
  .faq-liste details[open] summary::after { content: "–"; }
  .faq-liste details p { margin: 0 0 26px; color: var(--sourdine); max-width: 60ch; }

  /* ------------------ fiche Iris ------------------ */
  .fiche { margin: 36px 0 0; border: 1px solid var(--ligne-or); background: linear-gradient(170deg, var(--panneau), var(--noir)); }
  .fiche summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; padding: 24px clamp(20px, 3vw, 32px); }
  .fiche summary::-webkit-details-marker { display: none; }
  .fiche summary .pc-sous { margin: 0; }
  .fiche-titre { font-family: var(--display); font-size: clamp(1.2rem, 2.2vw, 1.7rem); color: var(--os); flex: 1 1 auto; }
  .fiche summary::after { content: "+"; font-family: var(--mono); color: var(--or); }
  .fiche[open] summary::after { content: "–"; }
  .fiche-corps { padding: 6px clamp(20px, 3vw, 32px) 32px; }
  .fiche-piliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); }
  .fiche-piliers div { border-top: 1px solid var(--ligne-or); padding-top: 18px; }
  .fiche-scenes { margin-top: 36px; }
  .fiche-scenes ol { margin: 0; padding-left: 20px; color: var(--sourdine); max-width: 70ch; }
  .fiche-scenes li { margin: 0 0 12px; line-height: 1.5; }
  .fiche-scenes li b { color: var(--os); font-weight: 400; }

  /* ------------------ le calcul ------------------ */
  #calcul { max-width: 1120px; margin: 0 auto; padding: 14vh clamp(20px, 4vw, 40px) 8vh; }
  #calcul h2 { font-family: var(--mono); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--or); margin: 0 0 5vh; }
  .c-phrase { font-family: var(--display); font-size: clamp(1.6rem, 3.6vw, 2.9rem); line-height: 1.35; margin: 0 0 1.1em; text-wrap: balance; }
  .c-phrase b { font-weight: 400; color: var(--or); white-space: nowrap; }
  .c-note { color: var(--sourdine); max-width: 64ch; margin: 0; }

  /* le barometre : vos chiffres a gauche, le resultat a droite */
  .cal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 70px); align-items: start; margin: 5vh 0 4vh; padding: clamp(22px, 3.4vw, 40px); border: 1px solid var(--ligne-or); background: linear-gradient(170deg, var(--panneau-haut), var(--noir)); box-shadow: inset 0 1px 0 rgba(247, 220, 156, 0.2), 0 30px 90px rgba(0, 0, 0, 0.6); }
  .cal-champ { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: baseline; margin-bottom: 26px; }
  .cal-champ label { color: var(--os); font-size: 0.98rem; }
  .cal-champ output { font-family: var(--mono); font-size: 0.95rem; color: var(--champagne); font-variant-numeric: tabular-nums; }
  .cal-champ input { grid-column: 1 / -1; width: 100%; appearance: none; -webkit-appearance: none; height: 22px; background: none; margin: 0; }
  .cal-champ input::-webkit-slider-runnable-track { height: 2px; background: rgba(227, 182, 92, 0.35); }
  .cal-champ input::-moz-range-track { height: 2px; background: rgba(227, 182, 92, 0.35); }
  .cal-champ input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: var(--noir); border: 2px solid var(--or); box-shadow: 0 0 12px rgba(227, 182, 92, 0.5); }
  .cal-champ input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--noir); border: 2px solid var(--or); }
  .cal-champ input:focus-visible { outline: 1px solid var(--or); outline-offset: 6px; }
  .cal-plus summary { cursor: pointer; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--or); margin: 4px 0 22px; list-style: none; }
  .cal-plus summary::-webkit-details-marker { display: none; }
  .cal-plus summary::after { content: " +"; } .cal-plus[open] summary::after { content: " \2212"; }
  .cal-resultat { text-align: center; }
  .cal-jauge { width: min(340px, 100%); height: auto; display: block; margin: 0 auto -58px; overflow: visible; }
  .cal-piste, .cal-plein { fill: none; stroke-width: 12; stroke-linecap: round; }
  .cal-piste { stroke: rgba(227, 182, 92, 0.16); }
  .cal-plein { stroke: var(--or); stroke-dasharray: 377; stroke-dashoffset: 377; transition: stroke-dashoffset 0.6s var(--sortie); filter: drop-shadow(0 0 8px rgba(227, 182, 92, 0.45)); }
  .cal-gradu text { fill: var(--sourdine); font-family: var(--mono); font-size: 10px; }
  .cal-heures { margin: 0 0 14px; }
  .cal-heures b { display: block; font-family: var(--body); font-weight: 400; font-size: clamp(3.2rem, 7vw, 4.6rem); line-height: 1; color: var(--os); letter-spacing: -0.01em; }
  .cal-heures span { display: block; margin-top: 8px; color: var(--sourdine); }
  .cal-valeur { margin: 0 0 18px; color: var(--sourdine); } .cal-valeur b { color: var(--os); font-weight: 400; }
  .cal-metre { position: relative; height: 10px; border-radius: 5px; background: rgba(227, 182, 92, 0.85); overflow: hidden; }
  .cal-metre i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #2b2417; border-right: 2px solid var(--noir); transition: width 0.6s var(--sortie); }
  .cal-legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 10px 0 0; font-size: 0.82rem; color: var(--sourdine); }
  .cal-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }
  .cal-legende .p1 { background: rgba(227, 182, 92, 0.85); } .cal-legende .p2 { background: #2b2417; border: 1px solid var(--ligne-or-forte); }
  .cal-verdict { margin: 18px 0 0; color: var(--os); font-size: 1rem; text-wrap: balance; }
  .cal-devis { margin: 12px 0 0; color: var(--sourdine); font-size: 0.92rem; text-wrap: balance; } .cal-devis b { color: var(--champagne); font-weight: 400; }
  #calcul .c-note b { color: var(--os); font-weight: 400; }
  .prix-titre { font-family: var(--mono); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--or); margin: 12vh 0 5vh; }
  .prix-grille { margin: 0 0 5vh; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5vh clamp(36px, 7vw, 120px); }
  .prix-grille div { border-top: 1px solid var(--ligne-or); padding-top: 24px; }
  .prix-grille dt { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.15; color: var(--champagne); margin: 0 0 12px; }
  .prix-grille dt b { display: block; font-weight: 400; color: var(--or); margin-top: 6px; }
  .prix-grille dd { margin: 0; color: var(--sourdine); max-width: 44ch; }

  /* ------------------ manifeste ------------------ */
  #manif { max-width: 900px; margin: 0 auto; padding: 20vh clamp(24px, 4vw, 32px); }
  #manifText { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 4vw, 3.1rem); line-height: 1.35; margin: 0; text-wrap: balance; }
  #manifText .w { color: rgba(242, 237, 225, 0.32); transition: color 0.25s linear; }
  #manifText .w.lit { color: var(--os); }
  #manifText .w.gold.lit { color: var(--or); }

  /* ------------------ fondatrice ------------------ */
  #fondatrice { max-width: 1150px; margin: 0 auto; padding: 14vh clamp(20px, 4vw, 32px); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 80px); align-items: center; border-top: 1px solid var(--ligne-or); }
  .f-portrait { position: relative; width: min(340px, 100%); aspect-ratio: 1; margin: 0 auto; }
  .f-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--champagne); box-shadow: 0 0 26px rgba(247, 220, 156, 0.3), 0 0 100px rgba(227, 182, 92, 0.15); }
  .f-img { position: absolute; inset: 9px; border-radius: 50%; overflow: hidden; }
  .f-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); display: block; }
  #fondatrice h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.12; margin: 0 0 20px; }
  #fondatrice .f-texte { color: var(--sourdine); max-width: 56ch; margin: 0 0 18px; }
  #fondatrice .f-texte strong { color: var(--os); font-weight: 400; }
  .devise { font-family: var(--display); font-size: 1rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--champagne); margin: 30px 0 0; }

  /* ------------------ contact ------------------ */
  #contact { text-align: center; padding: 18vh 24px 20vh; }
  #contact h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.08; margin: 0 0 22px; }
  #contact h2 em { font-style: normal; color: var(--or); }
  #contact p { color: var(--sourdine); max-width: 48ch; margin: 0 auto 44px; }
  .btn-or {
    position: relative; display: inline-block; text-decoration: none; overflow: hidden; isolation: isolate;
    font-weight: 500; font-size: 0.85rem; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--champagne); border: 1px solid var(--or); padding: 18px 40px;
    transition: color 0.35s;
  }
  .btn-or::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, var(--or), var(--champagne));
    transform: translateX(-101%); transition: transform 0.45s var(--sortie);
  }
  .btn-or:hover, .btn-or:focus-visible { color: var(--noir); }
  .btn-or:hover::before, .btn-or:focus-visible::before { transform: translateX(0); }
  .c-adresse { display: block; margin-top: 26px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; color: var(--sourdine); }

  footer { border-top: 1px solid var(--ligne-or); color: var(--sourdine); font-size: 0.85rem; letter-spacing: 0.04em; }
  .p-int { max-width: 1240px; margin: 0 auto; padding: 34px clamp(20px, 4vw, 36px) 44px; }
  .p-ligne { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px; }
  footer details { margin-top: 22px; }
  footer summary { cursor: pointer; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--or); list-style: none; display: inline-block; }
  footer summary::-webkit-details-marker { display: none; }
  footer summary::after { content: " +"; }
  footer details[open] summary::after { content: " \2212"; }
  .mentions { max-width: 78ch; margin-top: 18px; }
  .mentions p { margin: 0 0 10px; }
  .a-completer { color: var(--champagne); border-bottom: 1px dashed var(--or); }

  /* les textes courants arrivent d'un leger flou ; les titres se devoilent comme un rideau qu'on leve */
  .js .fade { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity 1s var(--sortie), transform 1s var(--sortie), filter 1s var(--sortie); }
  .js .fade.in { opacity: 1; transform: none; filter: none; }
  /* le rideau se pose sur un enfant (.rid) : un element entierement masque n'est jamais vu par l'observateur */
  .js h2.fade, .js .c-phrase.fade { opacity: 1; filter: none; transform: none; }
  .js h2.fade .rid, .js .c-phrase.fade .rid, .js .e-liste .fade dt {
    display: block; transform: translateY(0.28em); clip-path: inset(0 0 100% 0);
    transition: clip-path 1.2s var(--sortie), transform 1.2s var(--sortie);
  }
  .js h2.fade.in .rid, .js .c-phrase.fade.in .rid, .js .e-liste .fade.in dt { transform: none; clip-path: inset(-12% -4% -18% -4%); }
  .js .e-liste .fade { opacity: 1; filter: none; transform: none; }
  .js .e-liste .fade dd { opacity: 0; transition: opacity 1s var(--sortie) 0.25s; }
  .js .e-liste .fade.in dd { opacity: 1; }
  .js .d-etapes li.fade:nth-child(2) { transition-delay: 0.08s; }
  .js .d-etapes li.fade:nth-child(3) { transition-delay: 0.16s; }
  .js .d-etapes li.fade:nth-child(4) { transition-delay: 0.24s; }
  .js .d-etapes li.fade:nth-child(5) { transition-delay: 0.32s; }

  @media (max-width: 900px) {
    nav .n-slogan { display: none; }
    .o-cols, .prix-grille, .fiche-piliers, .faq-int { grid-template-columns: 1fr; }
    .h-actions { flex-direction: column; align-items: stretch; }
    .h-actions .btn-or, .h-actions .btn-ligne { text-align: center; padding: 16px 24px; }
    body { font-size: 16.5px; }
    #fondatrice { grid-template-columns: 1fr; gap: 48px; }
    .am-liste li { grid-template-columns: 1fr; padding: 26px 0; }
    .pc-onglets { max-width: 100%; }
    .pc-onglets button { padding: 13px 14px; letter-spacing: 0.14em; }
    .panel.agent { grid-template-columns: 1fr; }
    .panel.agent > :not(.niche) { grid-column: 1; }
    .niche { grid-row: auto; margin: 0 0 22px; }
    .pc-grille { grid-template-columns: 1fr; }
    .pc-mail { border-right: 0; border-bottom: 1px solid var(--ligne-or); }
    .cal { grid-template-columns: 1fr; }
    .d-int { grid-template-columns: 1fr; }
    .d-int h2 { position: static; }
    .e-liste { grid-template-columns: 1fr; }
    .e-liste div:nth-child(even) { margin-top: 0; }
    .v-tete, .v-liste, .v-regles { grid-template-columns: 1fr; }
    #manif { padding: 14vh 24px; }
    .c-phrase b { white-space: normal; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .grain, .h-scroll, .p-med::before, .p-med::after { animation: none; }
    #eyelid.blink { animation: none; }
    .js .fade, .js h2.fade .rid, .js .c-phrase.fade .rid, .js .e-liste .fade dt, .js .e-liste .fade dd { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; }
    .arme .pc-ligne { opacity: 1; transform: none; }
    #manifText .w { color: var(--os) !important; transition: none; }
    #manifText .w.gold { color: var(--or) !important; }
  }

  /* ============ V2 : style « SaaS » : sans-serif gras, coins ronds, pilules, halo ============ */
  :root { --display: "Jost", "Futura", "Avenir Next", sans-serif; --rayon: 22px; --verre: rgba(255, 255, 255, 0.035); --bord: rgba(255, 255, 255, 0.09); --bord-fort: rgba(255, 255, 255, 0.16); }
  body { font-weight: 400; font-size: 17px; letter-spacing: 0; }
  body::before {
    background:
      radial-gradient(70% 38% at 50% -8%, rgba(227, 160, 60, 0.30), transparent 70%),
      radial-gradient(900px 760px at -12% 50%, rgba(168, 184, 214, 0.04), transparent 62%),
      radial-gradient(700px 500px at 70% 105%, rgba(227, 182, 92, 0.06), transparent 60%);
  }
  #hero::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background-image: radial-gradient(circle, rgba(227, 182, 92, 0.32) 1px, transparent 1.6px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(60% 70% at 50% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(60% 70% at 50% 20%, #000 20%, transparent 75%);
    opacity: 0.22;
  }
  h1, h2, h3, .panel h3, .c-phrase, .o-chute, .am-liste p, .panel .a-promesse, .e-liste dt, .v-liste dt, .prix-grille dt, .d-etapes h3, .faq-liste summary, .fiche-titre,
  #manifText, .h-slogan, .pc-mail blockquote, .pc-fiche h3, .cal-heures b, .cal-valeur, .am-tete h2, .v-tete h2, .o-int h2, .faq-int h2, .d-int h2, #engagements h2, #contact h2, .pc-tete h2, #t-fond, .suite h3 {
    font-family: var(--display); font-weight: 600; letter-spacing: -0.03em;
  }
  .wordmark { font-weight: 700; letter-spacing: -0.035em; gap: 0.01em; }
  .h-slogan, .am-tete h2, .o-int h2, .faq-int h2, .d-int h2, #engagements h2, #contact h2, .pc-tete h2, .v-tete h2, #t-fond, .o-chute, .c-phrase { font-weight: 700; }
  .btn-or, .btn-ligne, nav .n-link, .faq-liste summary, .d-etapes li::before, .prix-grille dt { font-weight: 600; }
  #loader .word { font-family: var(--display); font-weight: 500; letter-spacing: 0.3em; }
  .h-slogan { font-size: clamp(1.7rem, 3.6vw, 2.8rem); color: var(--os); letter-spacing: -0.03em; }
  .h-slogan b { color: var(--or); }
  .h-tagline { font-size: clamp(1.05rem, 1.9vw, 1.3rem); }
  .am-liste p, .c-phrase, .o-chute, #manifText { line-height: 1.22; }
  #calcul h2, .prix-titre { letter-spacing: 0.18em; }

  /* badges pilules */
  .h-eyebrow, .pc-sous, #calcul h2, .prix-titre, .p-poste, .panel.suite .p-etat, .am-quand, .pc-bandeau span:first-child {
    display: inline-flex; align-items: center; gap: 9px; width: fit-content;
    padding: 7px 14px; border: 1px solid var(--ligne-or); border-radius: 999px; background: rgba(227, 182, 92, 0.08);
    font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--or);
  }
  .h-eyebrow::before, .pc-sous::before, #calcul h2::before, .prix-titre::before, .p-poste::before, .panel.suite .p-etat::before, .am-quand::before, .pc-bandeau span:first-child::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--or); box-shadow: 0 0 10px var(--or); flex: 0 0 auto;
  }
  .h-eyebrow::after { display: none; }
  .p-poste { margin: 0 0 14px !important; }
  .pc-sous { margin: 0 0 14px; }
  .fiche summary .pc-sous { margin: 0; }
  .o-cols .pc-sous { margin: 0 0 16px; }

  /* boutons pilules */
  .btn-or, .btn-ligne {
    border-radius: 999px; text-transform: none; letter-spacing: 0.01em; font-size: 0.98rem; font-weight: 500; padding: 15px 28px;
  }
  .btn-or { color: var(--noir); border: none; background: linear-gradient(100deg, #f0c56a, var(--or) 55%, #d49a3a); box-shadow: 0 10px 30px rgba(227, 160, 60, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform 0.25s var(--sortie), box-shadow 0.25s; }
  .btn-or::before { display: none; }
  .btn-or:hover, .btn-or:focus-visible { color: var(--noir); transform: translateY(-1px); box-shadow: 0 14px 36px rgba(227, 160, 60, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
  .btn-or::after { content: " →"; }
  .btn-ligne { color: var(--os); border: 1px solid var(--bord-fort); background: var(--verre); }
  .btn-ligne:hover, .btn-ligne:focus-visible { border-color: var(--or); color: var(--os); }
  nav .n-link { border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; padding: 9px 16px; letter-spacing: 0.04em; text-transform: none; font-family: var(--body); font-size: 0.85rem; font-weight: 500; }
  nav .n-logo { letter-spacing: 0.08em; font-weight: 500; }
  nav .n-slogan { text-transform: none; letter-spacing: 0.02em; font-family: var(--body); font-size: 0.85rem; }

  /* cartes arrondies */
  .panel, .pc-scene, .cal, .fiche, .v-regles, .prix-grille div, .faq-liste details, .o-cols div, .e-liste div, .v-liste div {
    border-radius: var(--rayon);
  }
  .panel { border: 1px solid var(--bord); background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), var(--noir); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); }
  .panel.intro { border: none; background: none; box-shadow: none; }
  .panel.suite { border: 1px dashed var(--bord-fort); background: none; }
  .niche { border-radius: 24px; border: 0; }
  .pc-scene, .cal, .fiche { border: 1px solid var(--bord); background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), var(--noir); overflow: hidden; }
  .pc-bandeau { border-radius: var(--rayon) var(--rayon) 0 0; }
  .pc-onglets { border-radius: 999px; overflow: hidden; border-color: var(--bord-fort); padding: 4px; gap: 4px; background: var(--verre); }
  .pc-onglets button { border-radius: 999px; }
  .pc-onglets button + button { border-left: none; }
  .pc-onglets button[aria-pressed="true"] { background: var(--or); color: var(--noir); font-weight: 500; }
  .o-cols div, .e-liste div, .v-liste div, .prix-grille div { border: 1px solid var(--bord); background: var(--verre); padding: 26px 28px 28px; }
  .e-liste div:nth-child(even) { margin-top: 0; }
  .prix-grille div { padding: 32px; }
  .prix-grille dt { font-size: 1.25rem; color: var(--os); }
  .prix-grille dt b { font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--champagne); letter-spacing: -0.03em; margin-top: 10px; }
  .v-regles { border: 1px solid var(--bord); background: var(--verre); }
  .faq-liste details { border: 1px solid var(--bord); background: var(--verre); padding: 0 24px; margin: 0 0 10px; }
  .faq-liste details:last-child { border-bottom: 1px solid var(--bord); }
  .faq-liste summary { font-size: 1.08rem; padding: 20px 0; letter-spacing: -0.01em; }
  .faq-liste summary::after, .fiche summary::after { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--bord-fort); display: grid; place-items: center; font-size: 0.9rem; }
  .p-statut { border-color: var(--bord-fort); background: var(--verre); }
  .p-statut.service { border-color: var(--or); background: rgba(227, 182, 92, 0.12); }

  /* étapes : numéros en pastilles */
  .d-etapes li::before { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(140deg, #f0c56a, var(--or)); color: var(--noir); -webkit-text-stroke: 0; font-size: 1.15rem; font-weight: 500; display: grid; place-items: center; line-height: 1; box-shadow: 0 8px 24px rgba(227, 160, 60, 0.3); }
  .d-etapes li { align-items: start; grid-template-columns: 46px 1fr; gap: 0 22px; border-top: 1px solid var(--bord); }
  .d-etapes li:last-child { border-bottom: 1px solid var(--bord); }

  /* lignes et séparateurs plus neutres */
  #angle, #deroule, #outil, #faq { border-color: var(--bord); }
  .am-liste li, .am-liste li:last-child { border-color: var(--bord); }
  .cal-metre { border-radius: 999px; }
  .cal-champ input::-webkit-slider-thumb { background: var(--or); border-color: var(--or); }

  /* ============ V3 : héros plus court, équipe en onglets ============ */
  #hero { min-height: 86vh; padding-top: 96px; }
  .wordmark { font-size: clamp(2.6rem, 9vw, 7rem); }
  .h-eyebrow { margin-bottom: 3vh; }
  .h-slogan { margin-top: 3vh; font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 16ch; line-height: 1.1; }
  .mode3d #voyage { height: 200vh; margin-bottom: -100vh; }
  .mode3d #angle { background: transparent; border-top-color: transparent; -webkit-mask-image: none; mask-image: none; padding-top: 14vh; min-height: 100vh; }
  .mode3d #angle .am-int { position: relative; z-index: 2; }
  #hwrap { max-width: 1240px; margin: 0 auto; padding: 14vh clamp(20px, 4vw, 40px) 10vh; }
  #hsticky { display: block; overflow: visible; }
  #htrack { display: block; padding: 0; }
  #hprog { display: none !important; }
  .panel.intro { width: auto; max-width: 820px; margin: 0 0 5vh; padding: 0; }
  .panel.intro h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.08; margin: 0 0 18px; }
  .panel.intro p { max-width: 62ch; }
  .ag-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 6px; width: fit-content; max-width: 100%; border: 1px solid var(--bord); border-radius: 999px; background: var(--verre); }
  .ag-onglets button { font: inherit; font-weight: 500; font-size: 0.92rem; color: var(--sourdine); background: none; border: none; border-radius: 999px; padding: 10px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.25s, color 0.25s; }
  .ag-onglets button:hover { color: var(--os); background: rgba(255, 255, 255, 0.05); }
  .ag-onglets button[aria-selected="true"] { background: linear-gradient(100deg, #f0c56a, var(--or)); color: var(--noir); font-weight: 600; }
  .ag-point { width: 7px; height: 7px; border-radius: 50%; background: var(--or); box-shadow: 0 0 10px var(--or); }
  .ag-onglets button[aria-selected="true"] .ag-point { background: var(--noir); box-shadow: none; }
  .panel.agent { width: 100%; max-width: none; grid-template-columns: 250px minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 56px); padding: clamp(28px, 4vw, 48px); min-height: 460px; }
  .panel.agent[hidden] { display: none; }
  .niche { width: 250px; height: 436px; border-radius: 28px; grid-row: 1 / span 5; }
  .panel.agent h3 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 14px; }
  .panel .a-promesse { font-size: clamp(1.3rem, 2.2vw, 1.7rem); max-width: 34ch; margin-bottom: 22px; }
  .a-comp { gap: 10px; }
  .a-comp li { padding-left: 30px; font-size: 1rem; color: var(--os); }
  .a-comp li::before { top: 0.15em; width: 18px; height: 18px; border-radius: 50%; background: rgba(227, 182, 92, 0.15); border: 1px solid var(--ligne-or-forte); }
  .a-comp li::after { content: ""; position: absolute; left: 6px; top: 0.5em; width: 7px; height: 4px; border-left: 1.5px solid var(--or); border-bottom: 1.5px solid var(--or); transform: rotate(-45deg); }
  .panel .a-garde { margin-top: 22px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--bord); }
  .panel.suite { margin-top: 22px; padding: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 36px; align-items: center; }
  .panel.suite h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 0 0 8px; }
  .panel.suite .p-etat { grid-row: 1 / span 2; margin: 0; }
  .panel.suite p { max-width: none; }
  @media (max-width: 900px) {
    .ag-onglets { flex-wrap: nowrap; overflow-x: auto; border-radius: 20px; scrollbar-width: none; }
    .ag-onglets::-webkit-scrollbar { display: none; }
    .ag-onglets button { white-space: nowrap; }
    .panel.agent { min-height: 0; }
    .niche { width: 100%; max-width: 250px; height: 380px; margin: 0 auto 24px; }
    .panel.suite { grid-template-columns: 1fr; }
    .panel.suite .p-etat { grid-row: auto; margin-bottom: 8px; }
  }

  /* ============ V3 : sections en encarts ============ */
  .h-slogan { max-width: 24ch; }
  /* angles morts : quatre cartes */
  .am-tete { margin-bottom: 6vh; }
  .am-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .am-liste li { display: block; padding: 26px 26px 28px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--verre); }
  .am-liste li:last-child { border-bottom: 1px solid var(--bord); }
  .am-liste li::after { display: none; }
  .am-quand { margin-bottom: 18px; }
  .am-liste p { font-size: 1.12rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
  .js .am-liste.vivant li:not(.eclaire) p, .js .am-liste.vivant li:not(.eclaire) .am-quand { opacity: 1; transform: none; }
  .js .am-liste.vivant li.eclaire { border-color: var(--ligne-or-forte); }
  .am-chute { margin-top: 5vh; }
  /* étapes : cinq cartes en ligne */
  .d-int { display: block; }
  .d-int h2 { position: static; margin: 0 0 6vh; max-width: 14ch; }
  .d-etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .d-etapes li { display: block; padding: 24px 22px 28px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--verre); }
  .d-etapes li:last-child { border-bottom: 1px solid var(--bord); }
  .d-etapes li::before { margin-bottom: 18px; }
  .d-etapes h3 { font-size: 1.15rem; margin-bottom: 8px; }
  .d-etapes p { font-size: 0.95rem; }
  /* engagements : quatre cartes */
  #engagements h2 { margin-bottom: 6vh; }
  .e-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .e-liste dt { font-size: 1.2rem; margin-bottom: 10px; }
  .e-liste dd { font-size: 0.95rem; }
  /* prix */
  .prix-grille dd .pc-sous { margin: 18px 0 14px; }
  .prix-grille dd .a-comp li { color: var(--os); }
  /* FAQ : onglets */
  .faq-onglets { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; width: fit-content; max-width: 100%; margin: 0 0 18px; border: 1px solid var(--bord); border-radius: 999px; background: var(--verre); }
  .faq-onglets button { font: inherit; font-weight: 500; font-size: 0.9rem; color: var(--sourdine); background: none; border: none; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
  .faq-onglets button[aria-selected="true"] { background: linear-gradient(100deg, #f0c56a, var(--or)); color: var(--noir); font-weight: 600; }
  .faq-liste details[hidden] { display: none; }
  /* contact : bandeau */
  #contact { max-width: 1240px; margin: 0 auto 8vh; border: 1px solid var(--bord); border-radius: var(--rayon); background: radial-gradient(70% 90% at 50% 0%, rgba(227, 160, 60, 0.18), transparent 70%), var(--verre); padding: 12vh 24px 13vh; }
  /* pied de page en colonnes */
  footer { border-top: 1px solid var(--bord); font-size: 0.9rem; letter-spacing: 0; }
  .p-int { padding: 56px clamp(20px, 4vw, 36px) 44px; }
  .p-colonnes { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px clamp(28px, 4vw, 60px); }
  .p-logo { font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.08em; color: var(--os); margin: 0 0 8px; }
  .p-marque p { margin: 0 0 8px; color: var(--os); }
  .p-marque .p-petit { color: var(--sourdine); max-width: 40ch; }
  .p-titre { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--or); margin: 6px 0 14px; }
  .p-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .p-liens a { color: var(--sourdine); text-decoration: none; }
  .p-liens a:hover { color: var(--os); }
  footer details { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--bord); }
  @media (max-width: 1100px) {
    .am-liste, .e-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .d-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .p-colonnes { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 900px) {
    .am-liste, .e-liste, .d-etapes { grid-template-columns: 1fr; }
    .d-int h2 { max-width: none; }
  }
  @media (max-width: 560px) { .p-colonnes { grid-template-columns: 1fr; } }

  /* ============ V3 : la démo en fil de messages ============ */
  .fil { padding: 0; }
  .fil-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding: 16px clamp(18px, 3vw, 28px); border-bottom: 1px solid var(--bord); font-size: 0.85rem; color: var(--sourdine); }
  .fil-boite { display: inline-flex; align-items: center; gap: 9px; color: var(--os); font-weight: 500; }
  .fil-boite i { width: 8px; height: 8px; border-radius: 50%; background: #58c47a; box-shadow: 0 0 10px rgba(88, 196, 122, 0.8); }
  .fil-exemple { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .fil-messages { list-style: none; margin: 0; padding: clamp(20px, 3vw, 32px) clamp(18px, 3vw, 28px); display: grid; gap: 18px; }
  .msg { max-width: min(640px, 92%); }
  .msg-vous { justify-self: end; text-align: left; }
  .msg-qui { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px 6px; font-size: 0.85rem; color: var(--sourdine); }
  .msg-qui b { color: var(--os); font-weight: 600; }
  .msg-qui time { font-family: var(--mono); font-size: 0.7rem; }
  .msg-etat { font-style: italic; }
  .msg-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; border: 1px solid var(--ligne-or-forte); background: #fff; }
  .msg-bulle { border: 1px solid var(--bord); border-radius: 20px; padding: 16px 20px; background: rgba(255, 255, 255, 0.045); }
  .msg-client .msg-bulle { border-top-left-radius: 6px; }
  .msg-iris .msg-bulle { border-top-left-radius: 6px; border-color: var(--ligne-or-forte); background: linear-gradient(170deg, rgba(227, 182, 92, 0.1), rgba(227, 182, 92, 0.03)); }
  .msg-vous .msg-bulle { border-top-right-radius: 6px; background: rgba(255, 255, 255, 0.03); }
  .msg-objet { margin: 0 0 6px; font-weight: 600; color: var(--os); }
  .msg-corps { margin: 0; color: var(--os); }
  .msg-intro { margin: 0 0 14px; color: var(--os); font-weight: 500; }
  .fil .pc-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
  .fil .pc-champs div { padding: 9px 12px; border-radius: 12px; background: rgba(7, 7, 10, 0.5); border: 1px solid var(--bord); }
  .fil .pc-champs dt, .fil .pc-champs dd { border: 0; padding: 0; }
  .fil .pc-champs dt { margin-bottom: 2px; }
  .fil .pc-champs dd { font-size: 0.95rem; }
  .fil .pc-sous { margin: 0 0 8px; }
  .fil .pc-manque { margin: 0 0 16px; }
  .fil .pc-manque li { padding: 3px 0 3px 22px; font-size: 0.95rem; }
  .fil .pc-manque li::before { top: 13px; }
  .fil .pc-brouillon { border-radius: 14px; padding: 14px 16px; }
  .fil .pc-brouillon p:last-child { font-size: 0.95rem; }
  .msg-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
  .btn-petit { padding: 13px 20px; font-size: 0.9rem; min-height: 44px; }
  .btn-petit:disabled { opacity: 0.45; cursor: default; transform: none; }
  .msg-resultat { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(88, 196, 122, 0.1); border: 1px solid rgba(88, 196, 122, 0.35); color: var(--os); font-size: 0.95rem; }
  .msg-points { display: inline-flex; gap: 6px; padding: 14px 18px; }
  .msg-points i { width: 7px; height: 7px; border-radius: 50%; background: var(--or); animation: points 1.1s ease-in-out infinite; }
  .msg-points i:nth-child(2) { animation-delay: 0.18s; } .msg-points i:nth-child(3) { animation-delay: 0.36s; }
  @keyframes points { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
  .js .fil .msg { opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--sortie), transform 0.5s var(--sortie); }
  .js .fil .msg.vu { opacity: 1; transform: none; }
  .js .fil .msg:not(.vu) { position: absolute; pointer-events: none; }
  .fil-messages { position: relative; }
  .fil-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 16px clamp(18px, 3vw, 28px) 20px; border-top: 1px solid var(--bord); color: var(--sourdine); font-size: 0.86rem; }
  .fil-rejouer { font: inherit; font-weight: 500; font-size: 0.86rem; color: var(--os); background: none; border: 1px solid var(--bord-fort); border-radius: 999px; padding: 8px 16px; cursor: pointer; }
  .fil-rejouer:hover { border-color: var(--or); }
  @media (max-width: 900px) {
    .msg { max-width: 100%; }
    .fil .pc-champs { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) { .msg-points i { animation: none; } .js .fil .msg { opacity: 1; transform: none; transition: none; position: static; } }

  /* ============ V3 : jeu de lumière (fond, logotype, titres) ============ */
  /* fond : deux halos qui respirent lentement */
  body::before {
    background:
      radial-gradient(70% 38% at 50% -8%, rgba(227, 160, 60, 0.34), transparent 70%),
      radial-gradient(40% 30% at 18% 12%, rgba(227, 160, 60, 0.10), transparent 70%),
      radial-gradient(900px 760px at -12% 50%, rgba(168, 184, 214, 0.05), transparent 62%),
      radial-gradient(700px 500px at 70% 105%, rgba(227, 182, 92, 0.07), transparent 60%);
    animation: halo-respire 11s ease-in-out infinite alternate;
  }
  @keyframes halo-respire { from { opacity: 0.8; } to { opacity: 1; } }
  #hero::after {
    content: ""; position: absolute; left: 50%; top: 18%; width: min(760px, 90vw); height: 360px; z-index: -2; pointer-events: none;
    transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(closest-side, rgba(240, 180, 80, 0.26), rgba(227, 160, 60, 0.08) 55%, transparent 72%);
    filter: blur(28px); animation: halo-derive 16s ease-in-out infinite alternate;
  }
  @keyframes halo-derive { 0% { transform: translateX(-56%) scale(1); opacity: 0.75; } 50% { transform: translateX(-50%) scale(1.08); opacity: 1; } 100% { transform: translateX(-44%) scale(0.96); opacity: 0.8; } }

  /* logotype : chaque lettre s'allume à son tour, l'oeil pulse */
  .wordmark span:not(#eyeO) {
    background: linear-gradient(180deg, #fff 0%, var(--os) 55%, rgba(247, 220, 156, 0.85) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: lettre-lueur 7s ease-in-out infinite;
  }
  .wordmark span:nth-child(1) { animation-delay: 0s; }
  .wordmark span:nth-child(2) { animation-delay: 0.45s; }
  .wordmark span:nth-child(3) { animation-delay: 0.9s; }
  .wordmark span:nth-child(4) { animation-delay: 1.35s; }
  .wordmark span:nth-child(6) { animation-delay: 2.25s; }
  @keyframes lettre-lueur {
    0%, 100% { opacity: 0.78; filter: drop-shadow(0 0 0 rgba(247, 220, 156, 0)); }
    18% { opacity: 1; filter: drop-shadow(0 0 22px rgba(247, 220, 156, 0.55)); }
    36% { opacity: 0.86; filter: drop-shadow(0 0 6px rgba(247, 220, 156, 0.15)); }
  }
  #eyeO { animation: oeil-pulse 7s ease-in-out infinite; animation-delay: 1.8s; }
  @keyframes oeil-pulse {
    0%, 100% { box-shadow: 0 0 30px rgba(227, 182, 92, 0.25), inset 0 0 24px rgba(227, 182, 92, 0.15); }
    18% { box-shadow: 0 0 70px rgba(240, 190, 90, 0.75), 0 0 140px rgba(227, 160, 60, 0.35), inset 0 0 30px rgba(247, 220, 156, 0.3); }
  }

  /* titres : dégradé clair et reflet doré sur les mots en or */
  .h-slogan, .am-tete h2, .o-int h2, .faq-int h2, .d-int h2, #engagements h2, #contact h2, .pc-tete h2, .v-tete h2, #t-fond, .panel.intro h2, .o-chute, .c-phrase {
    background: linear-gradient(180deg, #fff 0%, var(--os) 60%, rgba(242, 237, 225, 0.82) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .h-slogan b, #contact h2 em, .c-phrase b {
    background: linear-gradient(100deg, #f6d68a, var(--or) 45%, #f6d68a 80%, var(--or));
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: reflet-or 5.5s linear infinite; filter: drop-shadow(0 0 18px rgba(227, 182, 92, 0.35));
  }
  @keyframes reflet-or { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }
  .panel.agent h3, .prix-grille dt b, .fiche-titre { text-shadow: 0 0 24px rgba(247, 220, 156, 0.18); }
  .p-statut.service { box-shadow: 0 0 24px rgba(227, 182, 92, 0.25); }
  .ag-onglets button[aria-selected="true"], .btn-or { box-shadow: 0 10px 30px rgba(227, 160, 60, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35); }

  @media (prefers-reduced-motion: reduce) {
    body::before, #hero::after, .wordmark span, #eyeO, .h-slogan b, #contact h2 em, .c-phrase b { animation: none !important; }
    .wordmark span:not(#eyeO) { opacity: 1; }
  }

  /* ============ V3 : appels à l'action standard ============ */
  .c-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  #contact .c-adresse { margin-top: 22px; }
  .faq-aide { margin-top: 22px; padding: 26px 28px; border: 1px solid var(--bord); border-radius: var(--rayon); background: radial-gradient(80% 120% at 0% 0%, rgba(227, 160, 60, 0.14), transparent 70%), var(--verre); display: grid; grid-template-columns: 1fr; gap: 18px; }
  .faq-aide p { margin: 0; color: var(--sourdine); max-width: 46ch; }
  .faq-aide-titre { font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--os); margin: 0 0 6px !important; letter-spacing: -0.02em; }
  .faq-aide .msg-boutons { margin: 0; }
  @media (max-width: 900px) { .faq-aide { grid-template-columns: 1fr; } nav .n-tel { display: none; } }

  /* ============ V3 : aperçu Argus sur téléphone ============ */
  #argus { border-top: 1px solid var(--bord); }
  .ar-int { max-width: 1240px; margin: 0 auto; padding: 16vh clamp(20px, 4vw, 40px) 12vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(36px, 6vw, 100px); align-items: center; }
  .ar-texte h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.08; margin: 0 0 20px; }
  .ar-texte > p { color: var(--sourdine); max-width: 52ch; margin: 0 0 22px; }
  .ar-texte .a-comp { margin: 0 0 24px; }
  .ar-note { font-size: 0.88rem; opacity: 0.85; }
  .ar-tel { justify-self: center; width: min(380px, 100%); border: 1px solid var(--bord-fort); border-radius: 36px; background: linear-gradient(170deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), var(--noir); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 8px rgba(255, 255, 255, 0.03), 0 0 90px rgba(227, 160, 60, 0.18); padding: 18px 16px 16px; cursor: pointer; }
  .ar-tete { display: flex; align-items: center; gap: 12px; padding: 6px 8px 16px; border-bottom: 1px solid var(--bord); }
  .ar-tete .msg-avatar { width: 40px; height: 40px; }
  .ar-tete b { display: block; color: var(--os); font-weight: 600; }
  .ar-tete span { font-size: 0.78rem; color: var(--sourdine); }
  .ar-point { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: #58c47a; box-shadow: 0 0 10px rgba(88, 196, 122, 0.8); }
  .ar-fil { list-style: none; margin: 0; padding: 18px 4px 8px; display: grid; gap: 10px; min-height: 330px; align-content: start; }
  .ar-msg { max-width: 86%; padding: 11px 14px 8px; border-radius: 18px; font-size: 0.95rem; line-height: 1.45; }
  .ar-msg p { margin: 0; color: var(--os); }
  .ar-msg time { display: block; text-align: right; font-family: var(--mono); font-size: 0.62rem; color: var(--sourdine); margin-top: 4px; }
  .ar-vous { justify-self: end; background: linear-gradient(120deg, rgba(227, 182, 92, 0.32), rgba(227, 182, 92, 0.18)); border: 1px solid var(--ligne-or-forte); border-bottom-right-radius: 6px; }
  .ar-argus { justify-self: start; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--bord); border-bottom-left-radius: 6px; }
  .js .ar-msg { opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity 0.45s var(--sortie), transform 0.45s var(--sortie); }
  .js .ar-msg.vu { opacity: 1; transform: none; }
  .ar-saisie { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--bord); color: var(--sourdine); font-size: 0.9rem; }
  .ar-saisie i { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(120deg, #f0c56a, var(--or)); }
  @media (max-width: 900px) { .ar-int { grid-template-columns: 1fr; } .ar-tel { justify-self: stretch; } }
  @media (prefers-reduced-motion: reduce) { .js .ar-msg { opacity: 1; transform: none; transition: none; } }

  /* ============ V4 : noir profond, surfaces douces (réglage Vynie 07/10) ============ */
  :root {
    --noir: #050505; --panneau: #121212; --panneau-haut: #1a1a1a;
    --os: #f4f4f2; --sourdine: #a3a39e;
    --bord: rgba(255, 255, 255, 0.07); --bord-fort: rgba(255, 255, 255, 0.14); --verre: rgba(255, 255, 255, 0.025);
    --carte: linear-gradient(170deg, #181818, #0c0c0c);
  }
  body { background: #030303; }
  :root { --noir: #030303; }
  body::before {
    background:
      radial-gradient(70% 36% at 50% -10%, rgba(224, 130, 40, 0.13), transparent 70%),
      radial-gradient(40% 30% at 15% 10%, rgba(224, 130, 40, 0.06), transparent 70%);
  }
  #hero::after { background: radial-gradient(closest-side, rgba(232, 150, 60, 0.12), rgba(224, 130, 40, 0.04) 55%, transparent 72%); }
  .panel, .pc-scene, .cal, .fiche, .v-regles, .prix-grille div, .faq-liste details, .o-cols div, .e-liste div, .v-liste div, .am-liste li, .d-etapes li, .faq-aide, .ar-tel, #contact {
    background: var(--carte); border-color: var(--bord); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 60px rgba(0, 0, 0, 0.45);
  }
  .panel.intro, .panel.suite { background: none; box-shadow: none; }
  .panel.suite { border: 1px dashed var(--bord-fort); }
  .msg-bulle, .ar-argus { background: rgba(255, 255, 255, 0.05); }
  .ag-onglets, .faq-onglets, .pc-onglets { background: #0b0b0b; border-color: var(--bord); }
  .h-faits { opacity: 0.85; }

  /* titre avec avatar incrusté */
  .h-avatar { display: inline-block; width: 0.85em; height: 0.85em; border-radius: 50%; object-fit: cover; object-position: 50% 12%; vertical-align: -0.12em; margin: 0 0.05em; border: 2px solid rgba(255, 255, 255, 0.18); background: #fff; }

  /* onglets d'agents avec vignettes */
  .ag-onglets { gap: 10px; padding: 0; border: none; background: none; }
  .ag-onglets button { padding: 8px 18px 8px 8px; border: 1px solid var(--bord); background: var(--carte); font-size: 0.95rem; color: var(--os); }
  .ag-onglets button img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #fff; border: 1px solid var(--bord-fort); }
  .ag-onglets button[aria-selected="true"] { background: #1c1c1c; color: var(--os); border-color: var(--or); box-shadow: 0 0 0 1px rgba(227, 182, 92, 0.25), 0 0 24px rgba(227, 160, 60, 0.18); font-weight: 600; }
  .ag-onglets button[aria-selected="true"] img { border-color: var(--or); }
  .ag-onglets button[aria-selected="true"] .ag-point { background: var(--or); box-shadow: 0 0 10px var(--or); }

  /* carte agent : « Découvrez Iris », compétences en lignes cochées, bouton */
  .a-decouvrez { font-weight: 600; color: var(--os); }
  .panel.agent h3 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
  .panel .a-promesse { font-weight: 400; color: var(--sourdine); font-size: 1.1rem; }
  .panel.agent .a-comp { gap: 8px; }
  .panel.agent .a-comp li { padding: 12px 16px 12px 46px; border: 1px solid var(--bord); border-radius: 14px; background: rgba(255, 255, 255, 0.03); font-weight: 500; }
  .panel.agent .a-comp li::before { left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: rgba(227, 182, 92, 0.12); }
  .panel.agent .a-comp li::after { left: 20px; top: 50%; transform: translateY(-65%) rotate(-45deg); }
  .a-plus { margin-top: 18px; }
  .panel .a-garde { background: none; border: none; padding: 0; margin-top: 18px; }

  /* Argus : trois colonnes à dépliants */
  .ar-piliers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 8px 0 22px; }
  .ar-piliers .pc-sous { width: 100%; justify-content: center; margin-bottom: 10px; }
  .ar-piliers details { border: 1px solid var(--bord); border-radius: 14px; background: var(--carte); margin: 0 0 8px; padding: 0 14px; }
  .ar-piliers summary { list-style: none; cursor: pointer; padding: 12px 0; font-weight: 500; font-size: 0.92rem; color: var(--os); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .ar-piliers summary::-webkit-details-marker { display: none; }
  .ar-piliers summary::after { content: "⌄"; color: var(--sourdine); font-size: 1rem; line-height: 1; }
  .ar-piliers details[open] summary::after { content: "⌃"; }
  .ar-piliers details p { margin: 0 0 14px; font-size: 0.88rem; color: var(--sourdine); }
  .ar-int { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }

  /* bandeau d'outils */
  .o-outils { margin-top: 8vh; padding-top: 5vh; border-top: 1px solid var(--bord); }

  /* nav : téléphone en pilule */
  nav .n-tel { border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; padding: 9px 16px; }
  nav .n-tel::before { content: "☏ "; }

  /* bloc « encore des questions » : grille de points dorés */
  .faq-aide { position: relative; overflow: hidden; }
  .faq-aide::after { content: ""; position: absolute; right: 24px; top: 18px; bottom: 18px; width: 150px; background-image: radial-gradient(circle, rgba(227, 182, 92, 0.55) 1px, transparent 1.6px); background-size: 9px 9px; -webkit-mask-image: linear-gradient(135deg, transparent 20%, #000 70%); mask-image: linear-gradient(135deg, transparent 20%, #000 70%); opacity: 0.8; pointer-events: none; }

  @media (max-width: 900px) {
    .ar-piliers { grid-template-columns: 1fr; }
    .faq-aide::after { display: none; }
  }

  .c-plus { margin: 22px auto 0 !important; font-size: 0.95rem; }
  .c-plus a { color: var(--os); text-decoration: underline; text-underline-offset: 3px; }

  /* ============ V4 : menu de navigation ============ */
  .n-menu { display: flex; align-items: center; gap: 4px; }
  .n-menu a { color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 8px 12px; border-radius: 999px; transition: color 0.2s, background 0.2s; }
  .n-menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
  .n-burger { display: none; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin-left: auto; }
  .n-burger i { display: block; width: 18px; height: 1.5px; background: #fff; transition: transform 0.25s, opacity 0.25s; }
  .menu-ouvert .n-burger i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-ouvert .n-burger i:nth-child(2) { opacity: 0; }
  .menu-ouvert .n-burger i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  @media (max-width: 1100px) { .n-menu a { padding: 8px 9px; font-size: 0.85rem; } nav .n-tel { display: none; } }
  @media (max-width: 900px) {
    nav { flex-wrap: wrap; gap: 10px; mix-blend-mode: normal; background: rgba(3, 3, 3, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
    .n-burger { display: flex; order: 2; }
    nav .n-actions { order: 3; }
    nav .n-actions .n-link { display: none; }
    .n-menu { display: none; order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 0 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
    .menu-ouvert .n-menu { display: flex; }
    .n-menu a { padding: 14px 10px; font-size: 1.05rem; border-radius: 12px; }
    .menu-ouvert nav .n-actions .n-link { display: inline-block; order: 5; margin: 0 10px 12px; }
  }

  /* ============ V4 : correctifs téléphone (après audit du 08/10) ============ */
  @media (max-width: 900px) {
    .ar-int { grid-template-columns: 1fr; gap: 36px; }
    .ar-tel { width: 100%; max-width: 420px; margin: 0 auto; }
    .ag-onglets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; border-radius: 0; padding: 0; width: 100%; }
    .ag-onglets button { width: 100%; justify-content: flex-start; padding: 7px 12px 7px 7px; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ag-onglets button img { width: 30px; height: 30px; flex: 0 0 auto; }
    .ag-onglets .ag-point { margin-left: auto; }
    .fiche summary { gap: 8px 16px; }
    .fiche summary::after { margin-left: auto; }
    .h-slogan { max-width: none; }
    .o-cols div, .e-liste div, .v-liste div, .prix-grille div { padding: 22px 20px 24px; }
    .faq-int { gap: 28px; }
    .p-int { padding-top: 40px; }
  }
  @media (max-width: 420px) {
    .ag-onglets { grid-template-columns: 1fr 1fr; }
    .ag-onglets button { font-size: 0.86rem; }
  }

  section, footer { scroll-margin-top: 84px; }

  /* ============ V4 : téléphone (cadre orange, encoche, boutons) ============ */
  .iphone { position: relative; width: min(390px, 100%); margin: 0 auto; padding: 11px; border-radius: 60px;
    background: linear-gradient(150deg, #f5b06a 0%, #d8782c 40%, #b85e1c 70%, #ef9d4f 100%);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45), inset 0 0 0 4px rgba(0, 0, 0, 0.55), 0 44px 100px rgba(0, 0, 0, 0.65), 0 0 90px rgba(232, 140, 60, 0.22); }
  .iphone::before { content: ""; position: absolute; left: 50%; top: 24px; transform: translateX(-50%); width: 112px; height: 32px; border-radius: 20px; background: #000; z-index: 3; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
  .iphone::after { content: ""; position: absolute; left: calc(50% + 28px); top: 32px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a3a55, #060a12 65%); z-index: 4; }
  .ip-btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #f0a55c, #a9541a); }
  .ip-mute { left: -3px; top: 118px; height: 30px; }
  .ip-vol1 { left: -3px; top: 168px; height: 58px; }
  .ip-vol2 { left: -3px; top: 240px; height: 58px; }
  .ip-power { right: -3px; top: 190px; height: 92px; }
  .iphone .ar-tel { width: 100%; max-width: none; margin: 0; border: none; border-radius: 50px; background: #050505; box-shadow: none; padding: 14px 14px 18px; min-height: 720px; display: flex; flex-direction: column; cursor: pointer; }
  .ip-statut { display: flex; justify-content: space-between; align-items: center; padding: 10px 22px 0 26px; font-size: 0.92rem; font-weight: 600; color: var(--os); height: 46px; }
  .ip-icones { display: inline-flex; align-items: center; gap: 5px; }
  .ip-icones i { width: 14px; height: 10px; background: linear-gradient(to top, var(--os) 60%, transparent 60%); clip-path: polygon(0 60%, 25% 60%, 25% 30%, 50% 30%, 50% 10%, 75% 10%, 75% 0, 100% 0, 100% 100%, 0 100%); }
  .ip-icones i:nth-child(2) { background: var(--os); clip-path: polygon(50% 0, 100% 35%, 85% 50%, 50% 25%, 15% 50%, 0 35%); height: 10px; width: 14px; }
  .ip-icones b { width: 24px; height: 11px; border: 1.5px solid rgba(255, 255, 255, 0.6); border-radius: 4px; position: relative; }
  .ip-icones b::after { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 70%; background: var(--os); border-radius: 2px; }
  .iphone .ar-tete { padding: 22px 8px 14px; }
  .iphone .ar-fil { flex: 1; min-height: 0; padding: 16px 4px 8px; }
  .iphone .ar-saisie { margin-top: auto; }
  .iphone .ar-saisie::after { content: ""; display: block; }
  .ar-int { align-items: center; }
  @media (max-width: 900px) {
    .iphone { width: min(360px, 100%); border-radius: 54px; }
    .iphone .ar-tel { min-height: 660px; border-radius: 44px; }
    .ip-mute, .ip-vol1, .ip-vol2, .ip-power { display: none; }
  }

  /* ============ V4 : écran façon WhatsApp ============ */
  .wa-mot { color: #25d366; }
  .iphone .ar-tel { background: #0b141a; }
  .iphone .ar-tete { background: #1f2c34; margin: 0 -14px; padding: 14px 16px 12px; border-bottom: none; gap: 10px; border-radius: 0; }
  .iphone .ar-tete b { font-size: 1.02rem; }
  .iphone .ar-tete span { color: #8696a0; font-size: 0.78rem; }
  .wa-retour { color: #53bdeb; font-size: 1.8rem; line-height: 1; margin-right: 2px; }
  .wa-icones { margin-left: auto; display: inline-flex; gap: 18px; }
  .wa-icones i { width: 20px; height: 14px; border: 2px solid #aebac1; border-radius: 4px; position: relative; }
  .wa-icones i:first-child::after { content: ""; position: absolute; right: -8px; top: 0; border: 7px solid transparent; border-left-color: #aebac1; }
  .wa-icones i:last-child { width: 18px; height: 18px; border-radius: 50%; border-width: 2.5px; }
  .iphone .ar-point { display: none; }
  .iphone .ar-fil { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.045) 1px, transparent 1.6px); background-size: 18px 18px; margin: 0 -14px; padding: 14px 12px 10px; }
  .wa-jour { justify-self: center; } .wa-jour span { display: inline-block; font-size: 0.72rem; color: #8696a0; background: #1f2c34; padding: 5px 12px; border-radius: 8px; }
  .js .wa-jour { opacity: 1; transform: none; }
  .iphone .ar-msg { border-radius: 10px; max-width: 82%; padding: 8px 10px 6px; font-size: 0.93rem; }
  .iphone .ar-vous { background: #005c4b; border: none; border-top-right-radius: 2px; }
  .iphone .ar-argus { background: #202c33; border: none; border-top-left-radius: 2px; }
  .iphone .ar-msg time { color: rgba(255, 255, 255, 0.55); font-size: 0.62rem; }
  .iphone .ar-vous time::after { content: " ✓✓"; color: #53bdeb; }
  .iphone .ar-saisie { margin: 10px -4px 0; padding: 8px 8px 8px 12px; border: none; background: #1f2c34; border-radius: 999px; color: #8696a0; gap: 10px; }
  .iphone .ar-saisie b { font-weight: 400; font-size: 1.4rem; color: #8696a0; line-height: 1; }
  .iphone .ar-saisie span { flex: 1; }
  .iphone .ar-saisie i { width: 34px; height: 34px; background: #00a884; }
  .wa-note { margin: 10px 0 0; text-align: center; font-size: 0.68rem; color: #8696a0; }

  /* ============ V4 : héros sur petit écran, rien de coupé ============ */
  @media (max-width: 900px) {
    #hero { justify-content: flex-start; padding-top: calc(96px + env(safe-area-inset-top, 0px)); min-height: 100svh; }
    .mode3d #hero { height: 100svh; }
    .h-eyebrow { margin-bottom: 14px; }
    .h-slogan { margin-top: 14px; font-size: clamp(1.7rem, 8vw, 2.2rem); }
    .h-tagline { margin-top: 10px; font-size: 1rem; }
    .h-actions { margin-top: 18px; }
    .h-faits { margin-top: 14px; font-size: 0.6rem; }
    .h-scroll { bottom: 10px; }
  }
  @media (max-width: 900px) and (max-height: 700px) {
    .wordmark { font-size: clamp(2.2rem, 12vw, 3.2rem); }
    .h-faits { display: none; }
    .h-tagline { max-width: 36ch; }
  }

  /* ============ signature « Ayez la vision. » (décision Vynie 08/10) ============ */
  .c-signature { margin: 9vh auto 0 !important; font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--os); max-width: none; }
  .c-signature b { font-weight: 700; background: linear-gradient(100deg, #f6d68a, var(--or) 45%, #f6d68a 80%, var(--or)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: reflet-or 5.5s linear infinite; }
  .p-signature { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--champagne) !important; margin: 0 0 4px !important; }
  @media (prefers-reduced-motion: reduce) { .c-signature b { animation: none; } }

  /* ============ logotype de la barre : V doré avec l'oeil, « VYFARO » ============ */
  nav .n-logo, .p-logo { display: inline-flex; align-items: center; gap: 9px; letter-spacing: 0.02em; }
  nav .n-logo { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: #fff; }
  nav .n-logo em, .p-logo em { font-style: italic; font-weight: 500; color: var(--or); letter-spacing: 0; }
  .logo-v { width: 30px; height: 26px; flex: 0 0 auto; filter: drop-shadow(0 0 10px rgba(227, 182, 92, 0.35)); }
  .p-logo { font-size: 1.15rem; }
  .p-logo .logo-v { width: 26px; height: 23px; }
  @media (max-width: 900px) { nav .n-logo { font-size: 1.05rem; } .logo-v { width: 26px; height: 23px; } }

  /* ============ l'oeil du logotype : même dessin que l'oeil du grand titre, plus visible et vivant ============ */
  .logo-v { width: 40px; height: 34px; overflow: visible; }
  .p-logo .logo-v { width: 32px; height: 27px; }
  .logo-v .oe-anneau1, .logo-v .oe-anneau2, .logo-v .oe-anneau3, .logo-v .oe-halo { transform-origin: 20px 11.2px; }
  .logo-v .oe-anneau1 { animation: oe-tourne 9s linear infinite; }
  .logo-v .oe-anneau2 { animation: oe-tourne 13s linear infinite reverse; }
  .logo-v .oe-anneau3 { animation: oe-tourne 20s linear infinite; }
  .logo-v .oe-ext { animation: oe-lueur 3.2s ease-in-out infinite; }
  .logo-v .oe-halo { animation: oe-halo 3.2s ease-in-out infinite; }
  @keyframes oe-tourne { to { transform: rotate(360deg); } }
  @keyframes oe-lueur { 0%, 100% { stroke-opacity: 0.75; stroke-width: 0.85px; } 50% { stroke-opacity: 1; stroke-width: 1.15px; } }
  @keyframes oe-halo { 0%, 100% { opacity: 0.5; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.06); } }
  @media (prefers-reduced-motion: reduce) { .logo-v .oe-anneau1, .logo-v .oe-anneau2, .logo-v .oe-anneau3, .logo-v .oe-ext, .logo-v .oe-halo { animation: none; } }

  /* ============ correctif Safari iPhone : dégradé de texte sur l'enfant, pas sur le parent animé ============ */
  h2.fade, .c-phrase.fade { background: none !important; -webkit-background-clip: border-box; background-clip: border-box; color: var(--os) !important; -webkit-text-fill-color: initial; }
  h2.fade > .rid, .c-phrase.fade > .rid { display: inline-block; background: linear-gradient(180deg, #fff 0%, var(--os) 60%, rgba(242, 237, 225, 0.82) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
  h2.fade > .rid em, .c-phrase.fade > .rid b, #contact h2 > .rid em { -webkit-text-fill-color: transparent; }
  @supports (-webkit-touch-callout: none) {
    /* iOS : pas de clip-path ni de transform sur le span porteur du dégradé */
    .js h2.fade .rid, .js .c-phrase.fade .rid { clip-path: none !important; transform: none !important; }
  }

  /* ============ pages intérieures (agents, plateforme, offres, faq) ============ */
  .page-tete { max-width: 1240px; margin: 0 auto; padding: 150px clamp(20px, 4vw, 40px) 2vh; }
  .page-tete h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 5.4vw, 4.4rem); letter-spacing: -0.03em; line-height: 1.05; margin: 16px 0 18px; max-width: 20ch; color: var(--os); }
  .page-tete > p:not(.pc-sous) { color: var(--sourdine); max-width: 60ch; margin: 0; font-size: 1.08rem; }
  body.page #hwrap, body.page #calcul, body.page #faq, body.page #argus { padding-top: 8vh; }
  body.page .faq-int { padding-top: 6vh; }
  .n-menu a.actif { color: #fff; background: rgba(255, 255, 255, 0.09); }
  .plat-grille { margin-top: 0; }
  #offres-apercu { border-top: 1px solid var(--bord); }
  #offres-apercu .prix-grille { margin-top: 5vh; }
  .o-boutons { margin-top: 28px; }
  @media (max-width: 900px) { .page-tete { padding-top: 120px; } }

  /* ============ lumière qui accompagne le défilement ============ */
  .lumiere { position: fixed; left: 50%; top: 0; width: min(900px, 110vw); height: 520px; margin-left: calc(-1 * min(450px, 55vw)); z-index: 0; pointer-events: none;
    background: radial-gradient(closest-side, rgba(236, 170, 80, 0.16), rgba(227, 150, 60, 0.06) 45%, transparent 72%); filter: blur(10px);
    transform: translate3d(0, -40%, 0); will-change: transform, opacity; opacity: 0; transition: opacity 0.8s; }
  .js .lumiere.prete { opacity: 1; }
  main, nav, footer { position: relative; z-index: 1; }
  nav { z-index: var(--z-nav); }
  @media (prefers-reduced-motion: reduce) { .lumiere { transform: translate3d(0, 10vh, 0) !important; } }

  /* ============ outils : vignettes ============ */
  .o-outils { text-align: center; }
  .outils-vignettes { list-style: none; margin: 0 auto 36px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
  .outils-vignettes li { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 112px; padding: 16px 8px 14px; border: 1px solid var(--bord); border-radius: 24px; background: var(--carte); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px rgba(0, 0, 0, 0.45); }
  .outils-vignettes li span { font-size: 0.78rem; color: var(--sourdine); }
  .outils-vignettes li i { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; font-style: normal; font-weight: 700; font-size: 1.35rem; color: #fff; font-family: var(--display); letter-spacing: -0.02em; }
  .outils-vignettes li i { background: #fff; padding: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
  .outils-vignettes li i svg { width: 100%; height: 100%; display: block; }
  .outils-badge { margin: 0 auto 22px; }
  .o-outils .outils-titre { margin-top: 0; }
  .outils-titre { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -0.03em; line-height: 1.08; margin: 0 auto 16px; max-width: 18ch; color: var(--os); }
  .outils-texte { margin: 0 auto; max-width: 62ch; color: var(--sourdine); }
  @media (max-width: 900px) { .outils-vignettes { gap: 10px; } .outils-vignettes li { width: calc(33.333% - 7px); padding: 12px 4px; border-radius: 18px; } .outils-vignettes li i { width: 44px; height: 44px; font-size: 1.1rem; } .outils-vignettes li span { font-size: 0.68rem; } }

  /* ============ offres : trois colonnes ============ */
  .packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 5vh 0 0; align-items: start; }
  .pack { position: relative; padding: 30px 28px 28px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 60px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 10px; }
  .pack-populaire { border-color: rgba(227, 182, 92, 0.55); box-shadow: 0 0 0 1px rgba(227, 182, 92, 0.25), 0 0 70px rgba(227, 160, 60, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  .pack-etiquette { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 999px; background: linear-gradient(100deg, #f0c56a, var(--or)); color: var(--noir); font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
  .pack-nom { font-family: var(--display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; margin: 0; color: var(--os); }
  .pack-desc { margin: 0 0 6px; color: var(--sourdine); font-size: 0.95rem; min-height: 3.2em; }
  .pack-prix { margin: 6px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .pack-prix b { font-family: var(--display); font-weight: 700; font-size: 2.4rem; letter-spacing: -0.03em; color: var(--os); line-height: 1; }
  .pack-prix span { color: var(--sourdine); font-size: 0.9rem; }
  .pack-mise { margin: 0 0 10px; color: var(--champagne); font-size: 0.9rem; }
  .pack .btn-or, .pack .btn-ligne { text-align: center; }
  .pack-liste { list-style: none; margin: 16px 0 0; padding: 18px 0 0; border-top: 1px solid var(--bord); display: grid; gap: 10px; }
  .pack-liste li { position: relative; padding-left: 28px; font-size: 0.93rem; color: var(--os); line-height: 1.4; }
  .pack-liste li.titre { padding-left: 0; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sourdine); margin-bottom: 2px; }
  .pack-liste li.oui::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--or); font-weight: 700; }
  .pack-liste li.non { color: var(--sourdine); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.35); }
  .pack-liste li.non::before { content: "✕"; position: absolute; left: 0; top: 0; color: var(--sourdine); }
  .packs-note { margin-top: 26px; }
  @media (max-width: 1000px) { .packs { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } .pack-populaire { order: -1; } .pack-desc { min-height: 0; } }

  /* ============ héros : le mot tapé lettre à lettre ============ */
  .mot-tourne { display: inline-block; position: relative; color: var(--or); vertical-align: baseline; }
  .mt-mot { display: inline-block; min-width: 0.1ch; }
  .mot-tourne.tape::after { content: ""; display: inline-block; width: 0.08em; height: 0.95em; margin-left: 0.06em; vertical-align: -0.08em; background: var(--or); box-shadow: 0 0 10px rgba(227, 182, 92, 0.8); animation: curseur-tape 0.9s steps(2, start) infinite; }
  @keyframes curseur-tape { to { visibility: hidden; } }

  /* ============ croyance centrale, sous les angles morts ============ */
  .am-domino { margin: 26px 0 0; max-width: 30ch; font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 2.6vw, 2rem); letter-spacing: -0.025em; line-height: 1.15; color: var(--champagne); }

  /* ============ fondatrice : signature et réseaux ============ */
  .f-signature { margin: 26px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; background: linear-gradient(100deg, var(--champagne), var(--or) 60%, #d49a3a); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
  .f-reseaux, .p-reseaux { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
  .reseau { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 12px; border: 1px solid var(--bord-fort); border-radius: 999px; background: var(--verre); color: var(--os); text-decoration: none; font-size: 0.9rem; transition: border-color 0.25s, color 0.25s; }
  .reseau svg { width: 20px; height: 20px; color: var(--or); }
  .reseau:hover, .reseau:focus-visible { border-color: var(--or); color: var(--os); }
  .p-reseaux .reseau { padding: 7px 13px 7px 10px; font-size: 0.82rem; }
  .reseau.en-attente { cursor: default; }
  .reseau.en-attente:hover { border-color: var(--bord-fort); }

  /* ============ grand titre VYFARO (décision Vynie 09/10, maquette ../plateforme-agents/docs/maquettes/nom/vyfaro-anime.html) ============
     V Y nacrés, F en phare (tour, lanterne avec l'oeil, faisceau qui fait la barre haute), A R dorés, O = l'oeil vivant #eyeO (plongée 3D) */
  .wm-vyfaro { align-items: baseline; }
  #hero .wm-vyfaro > .wm-b { background: linear-gradient(180deg, #fff 0%, #fbf8f0 22%, #ece7da 60%, #cfc8b6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  #hero .wm-vyfaro > .wm-o { background: linear-gradient(180deg, #fbe8b4 0%, #ecc574 50%, #d6a650 80%, #bf8f3f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  #hero .wm-vyfaro > .wm-f {
    background: none; color: inherit; animation: none; opacity: 1;
    width: 0.64em; height: 0.74em; margin: 0 -0.085em 0 0.04em; position: relative; z-index: 1;
    filter: drop-shadow(0 0 0.05em rgba(255, 236, 190, 0.95)) drop-shadow(0 0 0.22em rgba(240, 197, 106, 0.7));
  }
  .wm-f svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .wordmark span:nth-child(5) { animation-delay: 1.8s; }
  /* lettres pleines comme la maquette : la pulsation ne descend plus a 78 % (V et Y paraissaient gris) */
  #hero .wm-vyfaro > .wm-l { animation-name: lettre-lueur-vf; }
  @keyframes lettre-lueur-vf {
    0%, 100% { opacity: 0.94; filter: drop-shadow(0 0 0.04em rgba(247, 220, 156, 0.18)); }
    18% { opacity: 1; filter: drop-shadow(0 0 0.14em rgba(247, 220, 156, 0.5)); }
    36% { opacity: 0.97; filter: drop-shadow(0 0 0.06em rgba(247, 220, 156, 0.22)); }
  }
  /* l'oeil du O : anneau dore plus franc et lueur, a la maniere de la maquette */
  #hero .wm-vyfaro #eyeO { width: 0.8em; height: 0.8em; border-width: max(2px, 0.034em); animation-name: oeil-pulse-vf; margin: 0 0.02em 0 0.04em; }
  @keyframes oeil-pulse-vf {
    0%, 100% { box-shadow: 0 0 0.1em rgba(240, 197, 106, 0.55), 0 0 0.28em rgba(227, 160, 60, 0.22), inset 0 0 0.12em rgba(247, 220, 156, 0.28); }
    18% { box-shadow: 0 0 0.2em rgba(247, 220, 156, 0.85), 0 0 0.5em rgba(227, 160, 60, 0.4), inset 0 0 0.16em rgba(247, 220, 156, 0.4); }
  }
  /* la paupière de l'oeil : la règle des lettres (dégradé découpé sur le texte) la rendait invisible */
  #hero .wordmark #eyelid { background: var(--noir); -webkit-background-clip: border-box; background-clip: border-box; animation: none; opacity: 1; filter: none; }
  #hero .wordmark #eyelid.blink { animation: blink 0.26s ease-in-out; }
  .wm-f .oe-anneau1, .wm-f .oe-anneau2, .wm-f .oe-anneau3, .wm-f .oe-halo, .wm-f .faisceau, .wm-f .halo { transform-box: fill-box; }
  .wm-f .oe-anneau1, .wm-f .oe-anneau2, .wm-f .oe-anneau3, .wm-f .oe-halo { transform-origin: center; }
  .wm-f .oe-anneau1 { animation: oe-tourne 9s linear infinite; }
  .wm-f .oe-anneau2 { animation: oe-tourne 13s linear infinite reverse; }
  .wm-f .oe-anneau3 { animation: oe-tourne 21s linear infinite; }
  .wm-f .oe-halo { animation: phare-souffle 5s ease-in-out infinite; }
  .wm-f .faisceau { transform-origin: 0 50%; animation: phare-respire 4.5s ease-in-out infinite; }
  .wm-f .halo { animation: phare-souffle 4.5s ease-in-out infinite; }
  @keyframes phare-respire { 0%, 100% { opacity: 0.6; transform: scaleY(0.86); } 50% { opacity: 1; transform: scaleY(1.06); } }
  @keyframes phare-souffle { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
  /* allumage, joué quand l'écran de chargement s'efface (classe .allume posée par site.js) */
  .allume .wm-f .tour { animation: phare-erige 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s both; }
  .allume .wm-f .lanterne { animation: phare-allume 1s ease-out 1.05s both; }
  .allume .wm-f .halo { animation: phare-allume 1s ease-out 1.05s both, phare-souffle 4.5s ease-in-out 2.05s infinite; }
  .allume .wm-f .faisceau { animation: phare-etend 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.5s both, phare-respire 4.5s ease-in-out 2.6s infinite; }
  @keyframes phare-erige { from { clip-path: inset(55% 0 0 0); } to { clip-path: inset(-20% 0 0 0); } }
  @keyframes phare-allume { from { opacity: 0.2; } to { opacity: 1; } }
  @keyframes phare-etend { from { transform: scaleX(0.15); opacity: 0.3; } to { transform: none; opacity: 1; } }
  .h-vision { margin: 2.4vh -0.62em 0 0; font-family: var(--display); font-weight: 300; font-size: clamp(0.72rem, 1.5vw, 1.1rem); letter-spacing: 0.62em; text-transform: uppercase; color: var(--or); }
  .allume .h-vision { animation: vision-ecarte 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 2.2s both; }
  @keyframes vision-ecarte { from { opacity: 0.25; letter-spacing: 1.1em; } to { opacity: 1; letter-spacing: 0.62em; } }
  /* logotype de barre et de pied : « VY » blanc, « FARO » or */
  nav .n-logo em.faro, .p-logo em.faro, #loader .word em.faro { font-style: normal; font-weight: 700; letter-spacing: 0.02em; color: var(--or); }
  #loader .word em.faro { letter-spacing: inherit; font-weight: inherit; }
  @media (prefers-reduced-motion: reduce) {
    .wm-f .oe-anneau1, .wm-f .oe-anneau2, .wm-f .oe-anneau3, .wm-f .oe-halo, .wm-f .faisceau, .wm-f .halo, .wm-f .tour, .wm-f .lanterne, .h-vision { animation: none !important; }
  }
  /* téléphone : le logo VYFARO garde la vedette sur la phrase (le phare devient illisible en dessous de ~60 px) */
  @media (max-width: 600px) { #hero .wm-vyfaro { font-size: min(17vw, 5.2rem); } }

  /* ============ section « Pourquoi Vyfaro » (textes : ../plateforme-agents/docs/A-TRANSMETTRE-SITE-VYFARO.md) ============ */
  #pourquoi { max-width: 1150px; margin: 0 auto; padding: 12vh clamp(20px, 4vw, 32px); display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 6vw, 80px); align-items: center; border-top: 1px solid var(--ligne-or); }
  .pq-eyebrow { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--or); margin: 0 0 14px; }
  #pourquoi h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; margin: 0 0 10px; color: var(--os); }
  .pq-sous { font-family: var(--display); font-weight: 600; font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--champagne); margin: 0 0 26px; }
  .pq-p { color: var(--sourdine); max-width: 56ch; margin: 0 0 16px; }
  .pq-p strong { color: var(--os); font-weight: 500; }
  .pq-nom { border: 1px solid var(--ligne-or); border-radius: var(--rayon); padding: clamp(24px, 3vw, 34px); background: radial-gradient(120% 90% at 0% 0%, rgba(227, 182, 92, 0.1), transparent 60%), rgba(255, 255, 255, 0.02); }
  .pq-nom h3 { font-family: var(--mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--or); margin: 0 0 16px; }
  .pq-nom p { color: var(--sourdine); font-size: 0.98rem; margin: 0 0 14px; }
  .pq-nom i { color: var(--os); }
  .pq-nom .pq-chute { margin: 18px 0 0; font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: var(--os); }
  @media (max-width: 900px) { #pourquoi { grid-template-columns: 1fr; gap: 36px; padding-block: 10vh; } }

  /* texte lu par Google et les lecteurs d'écran, invisible à l'écran */
  .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* ============ faisceau du phare : balaie la scène toutes les 8 secondes (maquette vyfaro-anime.html) ============ */
  .h-centre { position: relative; }
  .h-centre > :not(.balayage) { position: relative; z-index: 1; }
  .balayage { position: absolute; left: 0; top: 0; width: 150vmax; height: 46vmax; z-index: 0; transform-origin: 0 50%; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, rgba(255, 240, 205, 0.7), rgba(240, 197, 106, 0.18) 45%, transparent 78%);
    clip-path: polygon(0 49%, 100% 0, 100% 100%, 0 51%); filter: blur(6px); }
  .allume .balayage { animation: phare-balaie 2.6s ease-in-out 1.9s both, phare-balaie-boucle 8s ease-in-out 4.6s infinite; }
  @keyframes phare-balaie { 0% { opacity: 0; transform: rotate(-24deg); } 25% { opacity: 1; } 75% { opacity: 0.8; } 100% { opacity: 0; transform: rotate(14deg); } }
  @keyframes phare-balaie-boucle { 0%, 55% { opacity: 0; transform: rotate(-26deg); } 62% { opacity: 0.9; } 88% { opacity: 0.6; } 100% { opacity: 0; transform: rotate(16deg); } }
  @media (prefers-reduced-motion: reduce) { .balayage { display: none; } }
  #hero { overflow-x: clip; }

  /* ============ fiche d'agent V2 (10/10) : le travail produit, la chaîne de validation, l'installation ============ */
  /* C : ce que l'agent pose sur la table (exemple fictif, signalé) */
  .a-piece { margin: 0 0 18px; padding: 12px 16px 12px 14px; border-left: 2px solid var(--or); border-radius: 0 14px 14px 0; background: linear-gradient(90deg, rgba(227, 182, 92, 0.08), rgba(255, 255, 255, 0.02)); }
  .a-piece figcaption { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--or); margin: 0 0 6px; }
  .a-piece .ap-titre { margin: 0 0 8px !important; font-weight: 600; color: var(--os) !important; font-size: 0.98rem; }
  .a-piece ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .a-piece li { display: grid; grid-template-columns: 6.4rem 1fr; gap: 10px; align-items: baseline; font-size: 0.88rem; color: var(--sourdine); }
  .a-piece li span { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne); }
  /* A : la chaîne lit → prépare → vous validez ; le dernier maillon est le vôtre, en or */
  .a-chaine { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: none; }
  .a-chaine li { position: relative; padding: 11px 12px; border: 1px solid var(--bord); border-radius: 14px; background: rgba(255, 255, 255, 0.025); }
  .a-chaine li:not(:last-child)::after { content: "→"; position: absolute; right: -17px; top: 50%; transform: translateY(-50%); color: var(--or); font-size: 0.95rem; opacity: 0.8; }
  .a-chaine b { display: block; font-family: var(--mono); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne); margin-bottom: 4px; }
  .a-chaine span { display: block; font-size: 0.86rem; line-height: 1.35; color: var(--sourdine); }
  .a-chaine li.vous { border-color: var(--ligne-or-forte, rgba(227, 182, 92, 0.55)); background: linear-gradient(160deg, rgba(240, 197, 106, 0.16), rgba(227, 182, 92, 0.05)); box-shadow: 0 0 22px rgba(227, 182, 92, 0.12); }
  .a-chaine li.vous b { color: var(--or); }
  .a-chaine li.vous span { color: var(--os); }
  @media (max-width: 700px) {
    .a-chaine { grid-template-columns: 1fr; gap: 16px; }
    .a-chaine li:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -15px; transform: translateX(-50%); }
  }
  /* B : installé chez vous, sources, validation, délai */
  .a-installe { margin: 16px 0 18px; padding: 12px 14px; border: 1px dashed var(--ligne-or); border-radius: 14px; }
  .a-installe dt { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--or); margin: 0 0 8px; }
  .a-installe div { display: grid; gap: 5px; }
  .a-installe dd { display: grid; grid-template-columns: 6.4rem 1fr; gap: 10px; align-items: baseline; margin: 0; font-size: 0.86rem; color: var(--sourdine); line-height: 1.4; }
  .a-installe dd span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne); }
  @media (max-width: 480px) { .a-installe dd, .a-piece li { grid-template-columns: 1fr; gap: 1px; } }
  .panel.agent .p-poste { max-width: none; }

  /* icônes d'outils : elles s'allument une à une, comme branchées, quand la rangée arrive à l'écran */
  .outils-vignettes.ov-attend:not(.branchees) li { opacity: 0.28; filter: grayscale(1); transform: translateY(4px); }
  .outils-vignettes li { transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease, box-shadow 0.6s ease; }
  .outils-vignettes.branchees li { opacity: 1; filter: none; transform: none; }
  .outils-vignettes.branchees li i { animation: ov-branche 1s ease-out backwards; animation-delay: inherit; }
  .outils-vignettes.branchees li:nth-child(1) { transition-delay: 0s; animation-delay: 0s; }
  .outils-vignettes.branchees li:nth-child(2) { transition-delay: 0.22s; animation-delay: 0.22s; }
  .outils-vignettes.branchees li:nth-child(3) { transition-delay: 0.44s; animation-delay: 0.44s; }
  .outils-vignettes.branchees li:nth-child(4) { transition-delay: 0.66s; animation-delay: 0.66s; }
  .outils-vignettes.branchees li:nth-child(5) { transition-delay: 0.88s; animation-delay: 0.88s; }
  .outils-vignettes.branchees li:nth-child(6) { transition-delay: 1.1s; animation-delay: 1.1s; }
  @keyframes ov-branche { 0% { filter: drop-shadow(0 0 0 rgba(240, 197, 106, 0)) brightness(0.6); } 35% { filter: drop-shadow(0 0 14px rgba(240, 197, 106, 0.85)) brightness(1.25); } 100% { filter: drop-shadow(0 0 0 rgba(240, 197, 106, 0)) brightness(1); } }
  @media (prefers-reduced-motion: reduce) { .outils-vignettes.ov-attend:not(.branchees) li { opacity: 1; filter: none; transform: none; } .outils-vignettes li, .outils-vignettes li i { transition: none; animation: none !important; } }

  /* téléphone : le poste en tête, puis la figurine à gauche du prénom et de la promesse ; le reste de la fiche en pleine largeur dessous */
  @media (max-width: 640px) {
    .panel.agent { grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; align-items: start; }
    .panel.agent > :not(.niche) { grid-column: 1 / -1; }
    .panel.agent > h3:not(.niche), .panel.agent > .a-promesse:not(.niche) { grid-column: 2; }
    .panel.agent > .niche { grid-column: 1; grid-row: 2 / span 2; width: 104px; max-width: none; height: 204px; margin: 4px 0 0; align-self: center; }
    .panel.agent > h3:not(.niche) { align-self: end; margin-bottom: 6px; }
    .panel.agent > .a-promesse:not(.niche) { align-self: start; font-size: 0.98rem; line-height: 1.4; }
    .panel.agent > .a-piece { margin-top: 18px; }
  }