/* ---------------------------------------------------------------------
     Le thème : six couleurs et une police. Tout le reste dérive de là.
     Fond papier, encre charbon, jaune moutarde. Aucun dégradé, jamais de
     blanc sur le jaune.
     --------------------------------------------------------------------- */
  :root {
    --sc-canvas:     #FAF8F5;
    --sc-surface:    #FFFFFF;
    --sc-ink:        #262626;
    --sc-ink-soft:   #5E5E5E;
    --sc-accent:     #ECAB02;
    --sc-accent-ink: #383838;
    --sc-font-display: 'Poppins', system-ui, sans-serif;
    --sc-font-text:    'Poppins', system-ui, sans-serif;

    /* Le jaune lisible en TEXTE sur fond pâle. Le jaune vif n'y passe pas. */
    --t-accent-ink: #7A5B00;
    --t-line: rgba(38, 38, 38, 0.14);
  }

  /* ====================================================================
     LE MOUVEMENT SIGNATURE — le tréma qui suit le visiteur
     --------------------------------------------------------------------
     Deux points fixes qui ne quittent jamais l'écran. Ils changent de rôle
     acte par acte : ils arrivent, ils deviennent la puce de la liste, le
     séparateur du prix, les deux personnes, puis le logo. Piloté par
     trema.js à partir du défilement de la page, sans toucher au moteur.
     ==================================================================== */
  .trema-suit {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
  }
  /* Chaque point est ressorté séparément : c'est le décalage entre les deux
     qui donne le poids et la vie. Le second est un peu plus mou, donc il
     traîne et se replace après le premier. */
  .trema-pt {
    position: absolute;
    left: 0; top: 0;
    border-radius: 50%;
    transform-origin: 50% 50%;
    will-change: transform;
    backface-visibility: hidden;
  }
  .trema-pt--a { background: var(--sc-accent); }
  .trema-pt--b { background: var(--pt-b, #262626); }

  /* ====================================================================
     COMPOSITION
     ==================================================================== */
  body { font-family: var(--sc-font-text); }

  .t-wrap {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 72px);
  }

  .t-evite {
    position: absolute; left: 16px; top: 12px; z-index: 90;
    padding: 12px 20px; border-radius: 999px;
    background: var(--sc-accent); color: var(--sc-accent-ink);
    font-weight: 600; font-size: 15px; text-decoration: none;
    transform: translateY(-160%);
  }
  .t-evite:focus-visible { transform: translateY(0); }

  /* Dans un acte épinglé, la scène fait un écran plein : sans centrage
     vertical le contenu se colle en haut et laisse un trou sous lui. */
  [data-sc-stage] > .t-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
  /* Le constructeur est en deux colonnes : il ne suit pas le centrage
     en colonne unique des autres scènes épinglées. */
  [data-sc-stage] > .t-wrap.bat { display: grid; }

  /* --- Acte 1 : l'affiche ------------------------------------------- */
  .t-affiche { display: flex; flex-direction: column; justify-content: center; height: 100%; }

  .t-h1 { margin: 0; font-weight: 700; text-transform: none; }
  .t-h1 span { display: block; }
  .t-h1 .m-sm {
    font-size: clamp(0.95rem, 1.5vw, 1.35rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--sc-ink-soft);
    margin-bottom: clamp(12px, 2vw, 28px);
  }
  /* Le contraste d'échelle fait tout le travail que ferait la photo. */
  .t-h1 .m-xl {
    font-size: clamp(3.1rem, 12.2vw, 11rem);
    line-height: 0.86;
    letter-spacing: -0.045em;
  }
  .t-h1 .m-lg {
    font-size: clamp(2.1rem, 8.2vw, 7.4rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
    /* Demandé : le jaune exact du logo. Voir la note de contraste dans le
       BRIEF — sur fond papier ce jaune mesure 1,9:1, sous le seuil AA.
       Revenir à var(--t-accent-ink) suffit à repasser au vert. */
    color: var(--sc-accent);
  }

  .t-lede {
    max-width: 46ch;
    margin-top: clamp(24px, 4vw, 52px);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.55;
    color: var(--sc-ink-soft);
    text-wrap: pretty;
  }
  /* Invitation à défiler. La skill l'interdit explicitement ; ajoutée à la
     demande d'Elliot. Texte seul, aucune flèche, aucune icône animée. */
  .t-defile-zone {
    position: absolute;
    left: 0; right: 0;
    bottom: clamp(22px, 4vw, 44px);
  }
  .t-defile {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sc-ink-soft);
  }

  .t-hors {
    position: absolute; top: clamp(18px, 3vw, 34px); right: clamp(20px, 5vw, 72px);
    font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em;
    color: var(--sc-ink-soft); text-decoration: none;
    border-bottom: 1px solid var(--t-line);
    padding-bottom: 3px;
  }
  .t-hors:hover { color: var(--sc-ink); border-bottom-color: currentColor; }

  /* --- Acte 2 : la liste nue ---------------------------------------- */
  .t-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--t-line); }
  .t-liste li { border-bottom: 1px solid var(--t-line); }
  .t-liste a, .t-liste span {
    display: block;
    padding: clamp(14px, 2.2vw, 26px) 0 clamp(14px, 2.2vw, 26px) clamp(46px, 6vw, 96px);
    font-size: clamp(1.5rem, 4.4vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: var(--sc-ink);
    text-decoration: none;
  }
  .t-liste a:hover { color: var(--t-accent-ink); }
  .t-liste .t-suite { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--sc-ink-soft); margin-left: 14px;
    vertical-align: middle; }

  /* --- Acte 2 : l'inventaire ---------------------------------------- */
  .t-inv { display: grid; gap: clamp(38px, 5vw, 60px); margin-top: clamp(22px, 3vw, 38px); }
  @media (min-width: 940px) {
    .t-inv { grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3vw, 44px); align-items: start; }
  }
  .t-inv__g h2 {
    margin: 0 0 clamp(12px, 1.6vw, 20px);
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
    font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
  }
  /* L'inventaire remplace l'échelle du menu de services par une échelle de
     liste : le contraste avec le héros reste le moteur de la composition. */
  .t-inv .t-liste span {
    padding: clamp(9px, 1.1vw, 14px) 0 clamp(9px, 1.1vw, 14px) clamp(28px, 2.6vw, 38px);
    font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.45;
  }

  /* --- Les contrôles du questionnaire -------------------------------- */
  .calc__q[hidden] { display: none; }
  .calc__q { margin: 0; padding: 0; border: 0; }
  .calc__q legend {
    padding: 0;
    font-size: clamp(1.0625rem, 1.5vw, 1.3rem);
    font-weight: 600; letter-spacing: -0.015em; line-height: 1.35;
    max-width: 40ch;
  }
  .calc__aide { margin: 6px 0 0; font-size: 0.875rem; color: var(--sc-ink-soft); }

  .calc__opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(14px, 1.8vw, 20px); }
  .calc__opt { position: relative; }
  /* La case reste dans le DOM pour le clavier et les lecteurs d'écran :
     elle est rendue invisible, jamais retirée. */
  .calc__opt input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
  }
  .calc__opt span {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 10px 20px;
    border: 1.5px solid var(--t-line); border-radius: 999px;
    font-size: 0.9375rem; font-weight: 500; line-height: 1.3;
    background: var(--sc-surface);
    transition: border-color 200ms cubic-bezier(0.16,1,0.3,1),
                background-color 200ms cubic-bezier(0.16,1,0.3,1),
                color 200ms cubic-bezier(0.16,1,0.3,1);
  }
  .calc__opt input:hover + span { border-color: var(--sc-ink); }
  .calc__opt input:checked + span {
    background: var(--sc-accent); border-color: var(--sc-accent);
    color: var(--sc-accent-ink); font-weight: 600;
  }
  .calc__opt input:focus-visible + span { outline: 3px solid var(--sc-ink); outline-offset: 3px; }

  /* =====================================================================
     L'INDICE DE SUITE — indicateur et commande à la fois
     ===================================================================== */
  .bat__suite {
    display: flex; align-items: center; gap: 14px;
    width: 100%; min-height: 56px;
    margin: clamp(22px, 3vw, 34px) 0 0;
    padding: 12px 18px 12px 12px;
    background: var(--sc-surface);
    border: 1.5px solid var(--t-line); border-radius: 999px;
    cursor: pointer; text-align: left;
    transition: border-color 220ms cubic-bezier(0.16,1,0.3,1),
                transform 220ms cubic-bezier(0.16,1,0.3,1),
                box-shadow 220ms cubic-bezier(0.16,1,0.3,1);
  }
  .bat__suite:hover {
    border-color: var(--sc-ink);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(56,56,56,0.09);
  }
  .bat__suite:focus-visible { outline: 3px solid var(--sc-ink); outline-offset: 3px; }

  /* Le chevron. Deux traits, pas une police d'icônes. */
  .bat__suite-c {
    flex: none; position: relative;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--sc-accent);
  }
  .bat__suite-c::before {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 9px; height: 9px; margin: -7px 0 0 -5px;
    border-right: 2px solid var(--sc-accent-ink);
    border-bottom: 2px solid var(--sc-accent-ink);
    transform: rotate(45deg);
  }
  @media (prefers-reduced-motion: no-preference) {
    .bat__suite-c::before { animation: batDescend 1.8s ease-in-out infinite; }
  }
  @keyframes batDescend {
    0%, 100% { transform: rotate(45deg) translate(-2px, -2px); }
    55%      { transform: rotate(45deg) translate(3px, 3px); }
  }
  .bat__suite-tx { display: grid; gap: 1px; }
  .bat__suite-t {
    font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 600; color: var(--sc-ink-soft);
  }
  .bat__suite-n { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--sc-ink); }

  /* =====================================================================
     LA DÉMONSTRATION ELEMENTOR — on modifie au lieu d'affirmer
     ===================================================================== */
  .sc-section--edi { align-items: center; }
  .edi__h {
    margin: var(--sc-3, 12px) 0 0;
    font-size: clamp(1.9rem, 4.2vw, 3.1rem);
    font-weight: 700; letter-spacing: -0.03em; line-height: 1.06;
    max-width: 22ch;
  }
  .edi__lede { margin-top: clamp(14px, 2vw, 20px); font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.6; color: var(--sc-ink-soft); max-width: 62ch; }

  .edi { display: grid; gap: clamp(24px, 3vw, 44px); margin-top: clamp(28px, 4vw, 48px); align-items: center; }
  @media (min-width: 940px) { .edi { grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 4vw, 64px); } }

  .edi__site { border: 1px solid var(--t-line); border-radius: 14px; background: var(--sc-surface);
    overflow: hidden; box-shadow: 0 18px 44px rgba(56,56,56,0.09); }
  .edi__barre { display: flex; justify-content: center; padding: 8px; background: #F4F1EC;
    border-bottom: 1px solid var(--t-line); }
  .edi__url { font-size: 11px; color: var(--sc-ink-soft); background: var(--sc-surface);
    border-radius: 999px; padding: 3px 14px; }
  .edi__page { padding: 16px; display: grid; gap: 14px; }
  .edi__entete { display: flex; align-items: center; }
  .edi__logo { width: 28px; height: 10px; border-radius: 3px; background: #383838; }
  .edi__nav { display: flex; gap: 5px; margin-left: auto; }
  .edi__nav i { display: block; width: 18px; height: 5px; border-radius: 2px; background: #DCD8D0; }

  .edi__carte { padding: clamp(18px, 3vw, 28px); border-radius: 10px; background: #FBF8F2; text-align: center; }
  .edi__ct { margin: 0; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
    font-weight: 600; color: var(--sc-ink-soft); }
  /* L'élément « sélectionné dans l'éditeur » : contour pointillé et étiquette,
     comme une poignée d'Elementor. */
  .edi__cp {
    position: relative; display: inline-block;
    margin: 14px 0 0; padding: 6px 14px;
    font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700;
    letter-spacing: -0.04em; line-height: 1;
    font-variant-numeric: tabular-nums;
    outline: 2px dashed var(--sc-accent); outline-offset: 3px; border-radius: 4px;
  }
  .edi__etiq {
    position: absolute; top: -11px; left: -2px;
    padding: 2px 7px; border-radius: 4px;
    background: var(--sc-accent); color: var(--sc-accent-ink);
    font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .edi__cn { margin: 14px 0 0; font-size: 0.875rem; color: var(--sc-ink-soft); }

  .edi__panneau { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--t-line);
    border-radius: 14px; background: var(--sc-surface); }
  .edi__pt { margin: 0; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 700; color: var(--t-accent-ink); }
  .edi__pl { display: block; margin-top: 16px; font-size: 0.9375rem; font-weight: 600; }
  .edi__pa { margin: 12px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--sc-ink-soft); }
  .edi__aussi { margin-top: clamp(18px, 2vw, 24px); padding-top: clamp(16px, 2vw, 20px);
    border-top: 1px solid var(--t-line); }
  .edi__aussi li { font-size: 0.9375rem; }

  /* Le curseur, dessiné à la main pour rester dans la palette. */
  .edi__range { -webkit-appearance: none; appearance: none; width: 100%; margin-top: 14px;
    background: transparent; }
  .edi__range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: #E4DFD5; }
  .edi__range::-moz-range-track { height: 6px; border-radius: 999px; background: #E4DFD5; }
  .edi__range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 28px; height: 28px; margin-top: -11px;
    border: 0; border-radius: 50%; background: var(--sc-accent);
    box-shadow: 0 2px 8px rgba(56,56,56,0.22); cursor: grab;
  }
  .edi__range::-moz-range-thumb {
    width: 28px; height: 28px; border: 0; border-radius: 50%;
    background: var(--sc-accent); box-shadow: 0 2px 8px rgba(56,56,56,0.22); cursor: grab;
  }
  .edi__range:focus-visible { outline: 3px solid var(--sc-ink); outline-offset: 6px; border-radius: 999px; }

  /* =====================================================================
     LE CONSTRUCTEUR — la surface où le site s'assemble
     ===================================================================== */
  .bat { display: grid; gap: clamp(24px, 3vw, 44px); align-items: center; height: 100%; }
  @media (min-width: 940px) { .bat { grid-template-columns: 1fr 1fr; gap: clamp(36px, 4vw, 72px); } }

  /* --- L'aperçu ------------------------------------------------------- */
  .apercu {
    border: 1px solid var(--t-line);
    border-radius: 14px;
    background: var(--sc-surface);
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(56, 56, 56, 0.09);
  }
  .apercu__barre {
    display: flex; align-items: center; justify-content: center;
    padding: 8px; border-bottom: 1px solid var(--t-line);
    background: #F4F1EC;
  }
  .apercu__url {
    font-size: 11px; letter-spacing: 0.04em; color: var(--sc-ink-soft);
    background: var(--sc-surface); border-radius: 999px; padding: 3px 14px;
  }
  .apercu__ecran {
    display: grid; gap: 9px;
    padding: 12px;
    min-height: clamp(220px, 34vh, 330px);
    align-content: start;
  }

  /* Les pièces. Grises au départ : c'est un gabarit tant que le style n'est
     pas décidé. Elles prennent les couleurs de marque à la dernière question. */
  .ap-entete { display: flex; align-items: center; gap: 6px; }
  .ap-logo { width: 26px; height: 10px; border-radius: 3px; background: var(--ap-fort, #C9C4BA); }
  .ap-nav { display: flex; gap: 5px; margin-left: auto; }
  .ap-nav i { display: block; width: 16px; height: 5px; border-radius: 2px; background: var(--ap-doux, #DCD8D0); }
  .ap-jeton {
    font-size: 9px; letter-spacing: 0.04em; padding: 3px 7px; border-radius: 999px;
    background: var(--ap-jeton-fond, #EDEAE4); color: var(--ap-jeton-ink, #6E6A62);
    white-space: nowrap;
  }
  .ap-heros {
    display: grid; gap: 6px; padding: 14px 12px 16px;
    border-radius: 8px; background: var(--ap-heros, #F1EEE8);
  }
  .ap-t1 { width: 72%; height: 13px; border-radius: 3px; background: var(--ap-fort, #C9C4BA); }
  .ap-t2 { width: 46%; height: 13px; border-radius: 3px; background: var(--ap-accent, #D8D3CA); }
  .ap-btn { width: 62px; height: 15px; border-radius: 999px; background: var(--ap-btn, #CFCAC1); margin-top: 4px; }
  .ap-blocs { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
  .ap-blocs i {
    display: block; height: 30px; border-radius: 5px;
    background: var(--ap-doux, #DCD8D0);
  }
  .ap-mods { display: flex; flex-wrap: wrap; gap: 5px; }
  .ap-mod {
    font-size: 9px; padding: 4px 9px; border-radius: 6px;
    background: var(--ap-mod, #EDEAE4); color: var(--ap-mod-ink, #6E6A62);
  }
  .ap-pied { display: flex; justify-content: flex-end; }

  /* Une pièce absente ne prend pas de place : le site rétrécit vraiment. */
  .apercu [data-ap] { display: none; }
  .apercu [data-ap].est-la { display: inline-block; }

  /* Style « j'ai mes éléments » : le gabarit prend les couleurs de la marque. */
  .apercu.est-habille {
    --ap-fort: #383838; --ap-doux: #D9D3C6; --ap-accent: var(--sc-accent);
    --ap-btn: var(--sc-accent); --ap-heros: #FBF8F2;
    --ap-jeton-fond: #383838; --ap-jeton-ink: #FFFFFF;
    --ap-mod: #F0E7D2; --ap-mod-ink: #5A4A1E;
  }

  /* Animations : les pièces respirent, comme le site fini. */
  @media (prefers-reduced-motion: no-preference) {
    .apercu.est-anime .ap-t1,
    .apercu.est-anime .ap-t2 { animation: apRespire 2.6s ease-in-out infinite; }
    .apercu.est-anime .ap-t2 { animation-delay: 0.18s; }
    .apercu.est-anime .ap-blocs i { animation: apMonte 3.2s ease-in-out infinite; }
    .apercu.est-anime .ap-blocs i:nth-child(2n) { animation-delay: 0.22s; }
    .apercu.est-anime .ap-blocs i:nth-child(3n) { animation-delay: 0.44s; }
    .apercu.est-anime .ap-btn { animation: apPulse 2.2s ease-in-out infinite; }
  }
  @keyframes apRespire { 0%,100% { transform: none; } 50% { transform: translateX(4px); } }
  @keyframes apMonte   { 0%,100% { transform: none; } 50% { transform: translateY(-3px); } }
  @keyframes apPulse   { 0%,100% { transform: none; } 50% { transform: scale(1.06); } }

  /* Toute pièce qui apparaît ou disparaît le fait en douceur. */
  .apercu * { transition: background-color 320ms cubic-bezier(0.16,1,0.3,1),
                          color 320ms cubic-bezier(0.16,1,0.3,1); }

  .bat__prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: clamp(12px, 1.6vw, 18px) 0 0; }
  .bat__prix-l { font-size: 0.875rem; color: var(--sc-ink-soft); }
  .bat__prix-n { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .bat__prix-d { font-size: 0.8125rem; color: var(--sc-ink-soft); }
  .bat__prix-d:empty { display: none; }

  /* --- Les questions --------------------------------------------------- */
  .bat__q { position: relative; }
  .bat__sur { margin: 0 0 14px; }
  .bat__etape {
    margin: 0 0 10px;
    font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 600; color: var(--t-accent-ink);
  }
  .bat__rail { display: flex; gap: 6px; list-style: none; margin: 0 0 clamp(18px, 2.4vw, 26px); padding: 0; }
  .bat__rail li { flex: 1 1 0; }
  /* Les étapes sont cliquables : un visiteur qui n'a pas compris qu'il faut
     défiler peut toujours atteindre une question directement. */
  .bat__rail button {
    display: block; width: 100%; min-height: 44px;
    padding: 8px 0 0; margin: 0;
    background: none; border: 0; border-top: 2px solid var(--t-line);
    text-align: left; cursor: pointer;
    transition: border-color 300ms ease;
  }
  .bat__rail span {
    display: block;
    font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--sc-ink-soft);
    transition: color 300ms ease;
  }
  .bat__rail button:hover { border-top-color: var(--sc-ink); }
  .bat__rail button:hover span { color: var(--sc-ink); }
  .bat__rail button:focus-visible { outline: 3px solid var(--sc-ink); outline-offset: 3px; }
  .bat__rail li.est-fait button { border-top-color: var(--t-accent-ink); }
  .bat__rail li.est-ici button { border-top-color: var(--sc-accent); }
  .bat__rail li.est-ici span { color: var(--sc-ink); font-weight: 600; }


  .bat__panneau {
    transition: opacity 340ms cubic-bezier(0.16,1,0.3,1),
                transform 340ms cubic-bezier(0.16,1,0.3,1);
  }
  .bat__panneau:not(.est-ici) {
    position: absolute; inset: auto 0 auto 0;
    opacity: 0; transform: translateY(14px); pointer-events: none;
  }
  .bat__panneau.est-ici { position: relative; opacity: 1; transform: none; }

  .bat .calc__q { border-top: 0; padding-top: 0; }
  .bat .calc__q + .calc__q { margin-top: clamp(18px, 2vw, 26px); }
  .bat .calc__q legend { font-size: clamp(1.15rem, 1.9vw, 1.6rem); max-width: 30ch; }

  /* --- La clôture ------------------------------------------------------ */
  .sc-section--fin { position: relative; padding: 0; min-height: 100vh; min-height: 100dvh; }
  .fin__estim { margin: clamp(24px, 3vw, 36px) 0 0; font-size: clamp(1rem, 1.6vw, 1.25rem); }
  .fin__estim strong { font-weight: 700; }
  .fin__devis { color: rgba(255,255,255,0.6); }
  .fin__devis:empty { display: none; }
  .fin__detail {
    list-style: none; margin: clamp(14px, 2vw, 20px) auto 0; padding: 0;
    max-width: 34ch; display: grid; gap: 6px; text-align: left;
  }
  .fin__detail:empty { display: none; }
  .fin__detail li {
    display: flex; justify-content: space-between; gap: 14px;
    padding-top: 6px; border-top: 1px solid var(--c-line-dark, rgba(255,255,255,0.14));
    font-size: 0.8125rem;
  }
  .fin__detail em { font-style: normal; color: rgba(255,255,255,0.6); white-space: nowrap; }

  .fin__note { margin: 8px auto 0; max-width: 46ch; font-size: 0.8125rem; color: rgba(255,255,255,0.6); }
  .fin__cta-l { margin-top: clamp(22px, 3vw, 34px); }

  /* --- Acte 4 : le silence ------------------------------------------ */
  .t-gens { display: grid; gap: clamp(36px, 7vw, 96px); }
  @media (min-width: 760px) { .t-gens { grid-template-columns: 1fr 1fr; } }
  .t-gens > div { padding-top: clamp(20px, 3vw, 40px); border-top: 1px solid var(--t-line); }
  .t-gens h2 {
    margin: 0;
    font-size: clamp(2.4rem, 6.4vw, 5rem);
    font-weight: 700; letter-spacing: -0.035em; line-height: 0.98;
  }
  .t-gens p { margin: 14px 0 0; color: var(--sc-ink-soft);
    font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55; max-width: 34ch; }
  .t-gens__r { font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase;
    font-weight: 600; color: var(--t-accent-ink); margin-top: 16px; }

  /* --- Acte 6 : le sommet, la page s'inverse ------------------------ */
  .t-fin {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    /* L'encre est redéclarée ET la couleur restituée : redéfinir le jeton
       seul ne ré-encre pas le texte déjà résolu sur <body>. */
    --sc-ink: #FFFFFF;
    --sc-ink-soft: rgba(255, 255, 255, 0.66);
    color: var(--sc-ink);
  }
  .t-fin__fond {
    position: absolute; inset: 0;
    background: #262626;
    opacity: var(--fond, 0);
  }
  .t-fin__c { position: relative; text-align: center; padding-inline: clamp(20px, 5vw, 72px); }
  .t-marque {
    display: block; margin-inline: auto;
    width: clamp(210px, 34vw, 460px); height: auto;
  }
  .t-fin h2 {
    margin: clamp(28px, 4vw, 48px) 0 0;
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    font-weight: 600; letter-spacing: -0.015em;
  }
  .t-fin__pt { margin: 14px auto 0; max-width: 40ch; font-size: 0.9375rem; color: var(--sc-ink-soft); }
  .t-liens {
    margin: clamp(30px, 5vw, 52px) 0 0;
    font-size: 0.875rem; line-height: 2.1; color: var(--sc-ink-soft);
  }
  .t-liens a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px;
    text-decoration-thickness: 1px; text-decoration-color: var(--sc-accent); }
  .t-liens a:hover { text-decoration-thickness: 2px; }
  .t-liens .t-sep { opacity: 0.4; padding: 0 10px; }
  .t-cta { color: #FFFFFF; font-weight: 600; font-size: 1.0625rem;
    text-decoration: underline; text-underline-offset: 6px;
    text-decoration-thickness: 2px; text-decoration-color: var(--sc-accent); }

  /* Le point jaune du mot TRËMA, sur fond foncé */
  .t-fin :focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce) {
    .trema-suit { display: none; }
    .t-fin__fond { opacity: 1; }
  }