/* ---------------------------------------------------------------------
     Le thème : six couleurs et une police. Repris tel quel de la page de
     service, pour que les deux pages soient le même objet.
     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);
    --t-erreur: #A3281B;
    --t-ease: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* ====================================================================
     LES SURFACES DU NAVIGATEUR
     --------------------------------------------------------------------
     Sélection, curseur, barre de défilement, ancrage : ce que le
     navigateur dessine tout seul appartient aussi au thème.
     ==================================================================== */
  ::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
  /* Pas de défilement fluide : une ancre qui traverse quatre hauteurs
     d'écran épinglées deviendrait un voyage de plusieurs secondes. */
  html { caret-color: var(--sc-accent); }
  * { scrollbar-color: rgba(38,38,38,0.34) transparent; scrollbar-width: thin; }
  *::-webkit-scrollbar { width: 11px; height: 11px; }
  *::-webkit-scrollbar-thumb {
    background: rgba(38,38,38,0.28);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
  }
  *::-webkit-scrollbar-thumb:hover { background: rgba(38,38,38,0.46); background-clip: content-box; }
  *::-webkit-scrollbar-track { background: transparent; }

  /* ====================================================================
     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 au-dessus du titre, ponctuent la liste des
     services, marquent l'étape courante de l'approche, deviennent les deux
     personnes de l'équipe, puis se posent sur les deux cercles du logo.
     Piloté par trema.js, sans toucher au moteur.
     ==================================================================== */
  .trema-suit { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
  .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); }

  /* Libellé lu par les lecteurs d'écran seulement. Le moteur ne le
     fournit pas : les pastilles sociales en ont besoin. */
  .sc-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 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 focus, partout, avant tout le reste. */
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--sc-ink);
    outline-offset: 3px;
    border-radius: 4px;
  }
  .t-fin a:focus-visible, .t-fin button:focus-visible {
    outline-color: var(--sc-accent);
  }

  /* --- 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.
     La phrase est plus longue que « Sites web » de la page de service :
     l'échelle descend d'un cran pour que la ligne tienne sans se couper
     à 320 px comme à 1920 px. */
  .t-h1 .m-xl {
    font-size: clamp(2.35rem, 7.4vw, 6.4rem);
    line-height: 0.9;
    letter-spacing: -0.042em;
  }
  .t-h1 .m-lg {
    font-size: clamp(2.05rem, 6.5vw, 5.6rem);
    line-height: 0.96;
    letter-spacing: -0.038em;
    /* Le jaune du logo. Sur fond papier il mesure 1,9:1 : il ne porte
       jamais de texte courant, seulement cette ligne de titre, doublée
       par le texte noir juste au-dessus. Voir la note du BRIEF. */
    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;
  }

  /* Les deux appels de l'affiche. Un seul est jaune : la règle de la
     charte tient acte par acte, pas seulement écran par écran. */
  .t-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 3.4vw, 40px); }
  .t-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 15px 30px;
    border: 1.5px solid transparent; border-radius: 999px;
    font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1;
    text-decoration: none; cursor: pointer;
    transition: background-color 200ms var(--t-ease), border-color 200ms var(--t-ease),
                color 200ms var(--t-ease), transform 200ms var(--t-ease);
  }
  .t-btn--p { background: var(--sc-accent); color: var(--sc-accent-ink); }
  .t-btn--p:hover { background: #D69A02; transform: translateY(-2px); }
  .t-btn--s { border-color: var(--sc-ink); color: var(--sc-ink); background: transparent; }
  .t-btn--s:hover { background: var(--sc-ink); color: var(--sc-surface); transform: translateY(-2px); }
  .t-micro { margin: clamp(16px, 2vw, 22px) 0 0; font-size: 0.875rem; color: var(--sc-ink-soft); }

  .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 : le menu des services -------------------------------- */
  /* La grammaire de la page de service : une liste à grande échelle, pas
     une grille de cartes. Le contraste d'échelle avec l'affiche fait le
     travail que ferait la photographie. */
  .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-serv {
    display: block;
    padding: clamp(18px, 2.4vw, 30px) 0 clamp(18px, 2.4vw, 30px) clamp(46px, 6vw, 96px);
    color: var(--sc-ink); text-decoration: none;
  }
  .t-serv__t {
    display: block;
    font-size: clamp(1.5rem, 4.4vw, 3.4rem);
    font-weight: 600; letter-spacing: -0.025em; line-height: 1.12;
  }
  @media (min-width: 940px) {
    /* En colonne unique, la moitié droite d'un écran large restait vide.
       Le titre tient la gauche, la description la droite, sur la même
       ligne de base. */
    .t-serv {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
      gap: clamp(24px, 3.4vw, 64px);
      align-items: baseline;
    }
    /* La colonne est plus étroite que la pleine largeur : à 3,4 rem les
       titres longs cassaient en deux lignes et la rangée devenait bancale.
       « Infolettres et courriels » est le plus long des six. */
    .t-serv__t { font-size: clamp(1.5rem, 2.9vw, 2.5rem); }
    .t-serv__d { margin-top: 0; }
  }
  .t-serv__d {
    display: block; max-width: 52ch;
    margin-top: clamp(8px, 1vw, 13px);
    font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
    font-weight: 400; line-height: 1.55; color: var(--sc-ink-soft);
  }
  /* Seul le service qui mène quelque part est un lien. Les cinq autres
     sont du texte : un lien qui ne va nulle part est un défaut. */
  a.t-serv:hover .t-serv__t { color: var(--t-accent-ink); }
  a.t-serv:hover .t-suite { color: var(--sc-ink); border-bottom-color: currentColor; }
  .t-suite {
    display: inline-block; margin-left: 14px; vertical-align: middle;
    font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--sc-ink-soft);
    border-bottom: 1px solid var(--t-line); padding-bottom: 2px;
    transition: color 200ms var(--t-ease), border-color 200ms var(--t-ease);
  }

  /* --- ACTE 3 : l'approche, quatre étapes --------------------------- */
  /* Acte épinglé : le bandeau d'accroche tient la scène pendant que les
     quatre étapes se relaient. La numérotation porte l'information —
     c'est une séquence, l'ordre compte. */
  .t-app { display: grid; gap: clamp(26px, 4vw, 54px); align-content: center; }
  @media (min-width: 940px) { .t-app { grid-template-columns: 1fr 1.25fr; gap: clamp(40px, 6vw, 96px); align-items: center; } }

  .t-band {
    margin: 0;
    font-size: clamp(1.75rem, 3.9vw, 2.9rem);
    font-weight: 600; line-height: 1.16; letter-spacing: -0.028em;
    max-width: 15ch; text-wrap: balance;
  }
  .t-band em { font-style: normal; color: var(--t-accent-ink); }
  .t-band__n { margin: clamp(18px, 2.4vw, 26px) 0 0; font-size: 0.9375rem; color: var(--sc-ink-soft); max-width: 34ch; }

  .t-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .t-etape {
    display: grid; grid-template-columns: auto 1fr;
    gap: clamp(16px, 2.2vw, 30px);
    padding: clamp(16px, 2.1vw, 26px) 0;
    border-top: 1px solid var(--t-line);
  }
  .t-etape:last-child { border-bottom: 1px solid var(--t-line); }
  .t-etape__n {
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    font-weight: 700; letter-spacing: -0.02em; line-height: 1.3;
    color: var(--t-accent-ink);
    font-variant-numeric: tabular-nums;
  }
  .t-etape__t { margin: 0; font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-weight: 600; letter-spacing: -0.022em; line-height: 1.2; }
  .t-etape__d { margin: 7px 0 0; font-size: clamp(0.9375rem, 1.05vw, 1.0625rem); line-height: 1.55; color: var(--sc-ink-soft); max-width: 54ch; }

  /* L'étape courante monte au premier plan. Le fondu a été essayé et
     retiré : à 0,34 d'opacité la description tombait à 1,6:1, et même à
     0,80 elle ne repassait pas 4,5:1. Un texte affiché doit rester
     lisible — l'emphase passe donc par un palier de couleur, jamais par
     de la transparence. Les quatre étapes se lisent toutes, tout le temps. */
  .t-etape__t { color: var(--sc-ink-soft); transition: color 380ms var(--t-ease); }
  .t-etape__n { transition: color 380ms var(--t-ease); }
  .t-etape[data-active="1"] .t-etape__t { color: var(--sc-ink); }
  .t-etape[data-active="1"] .t-etape__n { color: var(--sc-ink); }
  @media (prefers-reduced-motion: reduce) {
    .t-etape__t, .t-etape__n { transition: none; }
  }

  /* --- ACTE 4 : l'offre sites web ----------------------------------- */
  .t-duo { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }
  @media (min-width: 940px) { .t-duo { grid-template-columns: 1.15fr 1fr; gap: clamp(44px, 6vw, 88px); } }

  .t-h2 {
    margin: clamp(10px, 1.4vw, 16px) 0 0;
    font-size: clamp(1.9rem, 4.2vw, 3.1rem);
    font-weight: 700; letter-spacing: -0.032em; line-height: 1.06;
    max-width: 20ch; text-wrap: balance;
  }
  .t-corps {
    margin-top: clamp(14px, 2vw, 22px);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.62; color: var(--sc-ink-soft); max-width: 62ch;
    text-wrap: pretty;
  }

  /* Puces tréma : deux cercles au lieu d'un point. */
  .t-puces { list-style: none; margin: clamp(20px, 2.6vw, 30px) 0 0; padding: 0; display: grid; gap: 13px; }
  .t-puces li { position: relative; padding-left: 34px; max-width: 58ch; font-size: 1rem; line-height: 1.5; }
  .t-puces li::before, .t-puces li::after {
    content: ''; position: absolute; top: 0.6em;
    width: 6px; height: 6px; border-radius: 50%;
  }
  .t-puces li::before { left: 0; background: var(--sc-accent); }
  .t-puces li::after { left: 11px; background: var(--sc-ink); }

  /* Le chiffre-clé. Pas une carte : un bloc de papier plus dense que le
     sol, tenu par un filet. */
  .t-prix {
    padding: clamp(26px, 3.4vw, 44px);
    background: var(--sc-surface);
    border: 1px solid var(--t-line);
    border-radius: 16px;
  }
  .t-prix__l {
    margin: 0; font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-soft);
  }
  .t-prix__v {
    display: block; margin: clamp(12px, 1.6vw, 18px) 0 clamp(12px, 1.6vw, 18px);
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    font-weight: 700; line-height: 1.02; letter-spacing: -0.035em;
    color: var(--sc-ink); text-wrap: balance;
  }
  .t-prix__n { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--sc-ink-soft); }
  .t-prix .t-btn { margin-top: clamp(20px, 2.6vw, 28px); width: 100%; }

  /* --- ACTE 5 : l'équipe -------------------------------------------- */
  .t-equipe { display: grid; gap: clamp(30px, 4vw, 52px); margin-top: clamp(26px, 3.4vw, 44px); }
  @media (min-width: 720px) { .t-equipe { grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 4vw, 64px); } }

  /* Aucune photo n'est fournie. Plutôt qu'un rond gris qui attend une
     image, le repli est typographique : les initiales à grande échelle,
     dans le jaune lisible. Il tient tout seul. */
  .t-pers__i {
    display: grid; place-items: center;
    aspect-ratio: 1 / 1; max-width: 220px;
    border: 1px solid var(--t-line); border-radius: 16px;
    background: var(--sc-surface);
    font-size: clamp(2.6rem, 5.5vw, 4rem);
    font-weight: 700; letter-spacing: -0.04em;
    color: var(--t-accent-ink);
  }
  .t-pers__n { margin: clamp(16px, 2vw, 22px) 0 0; font-size: clamp(1.3rem, 2.1vw, 1.75rem); font-weight: 700; letter-spacing: -0.028em; }
  .t-pers__f { margin: 5px 0 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-accent-ink); }
  .t-pers__d { margin: clamp(11px, 1.4vw, 15px) 0 0; font-size: 1rem; line-height: 1.6; color: var(--sc-ink-soft); max-width: 46ch; }

  /* --- ACTE 6 : la soumission --------------------------------------- */
  .t-soum { display: grid; gap: clamp(30px, 4vw, 52px); align-items: start; }
  @media (min-width: 940px) { .t-soum { grid-template-columns: 1fr 1.35fr; gap: clamp(40px, 5vw, 80px); } }

  .t-form {
    padding: clamp(24px, 3.4vw, 40px);
    background: var(--sc-surface);
    border: 1px solid var(--t-line);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(38, 38, 38, 0.07);
  }
  .t-champs { display: grid; gap: clamp(15px, 1.8vw, 20px); }
  @media (min-width: 620px) {
    .t-champs { grid-template-columns: repeat(2, 1fr); }
    .t-champ--l { grid-column: 1 / -1; }
  }
  .t-champ { display: grid; gap: 6px; }
  .t-champ label { font-size: 0.875rem; font-weight: 500; }
  .t-champ .t-fac { color: var(--sc-ink-soft); font-weight: 400; }

  .t-champ input, .t-champ select, .t-champ textarea {
    width: 100%;
    padding: 13px 15px;
    font: inherit;
    font-size: 16px;   /* 16 px minimum : sans quoi iOS zoome au focus */
    color: var(--sc-ink);
    background: var(--sc-surface);
    border: 1.5px solid var(--t-line);
    border-radius: 10px;
    transition: border-color 180ms var(--t-ease), box-shadow 180ms var(--t-ease);
  }
  .t-champ textarea { resize: vertical; min-height: 116px; line-height: 1.55; }
  .t-champ select {
    appearance: none; padding-right: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235E5E5E' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  }
  .t-champ input:hover, .t-champ select:hover, .t-champ textarea:hover { border-color: rgba(38,38,38,0.3); }
  .t-champ input:focus, .t-champ select:focus, .t-champ textarea:focus {
    outline: none;
    border-color: var(--sc-accent);
    box-shadow: 0 0 0 4px rgba(236, 171, 2, 0.16);
  }
  .t-champ input:focus-visible, .t-champ select:focus-visible, .t-champ textarea:focus-visible {
    outline: 3px solid var(--sc-ink); outline-offset: 3px;
  }
  .t-champ[data-erreur="oui"] input,
  .t-champ[data-erreur="oui"] select,
  .t-champ[data-erreur="oui"] textarea { border-color: var(--t-erreur); }
  .t-err { font-size: 0.875rem; line-height: 1.4; color: var(--t-erreur); }
  .t-err:empty { display: none; }
  .t-err--c { margin: 12px 0 0; text-align: center; }

  .t-consent { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; margin-top: 4px; }
  .t-consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--sc-accent); flex: none; }
  .t-consent label { font-size: 0.9375rem; line-height: 1.5; font-weight: 400; }
  .t-form .t-btn { width: 100%; margin-top: clamp(18px, 2.2vw, 24px); }
  .t-form__n { margin: 12px 0 0; font-size: 0.875rem; color: var(--sc-ink-soft); }

  /* Piège à pourriels : hors écran, jamais visible ni focusable. */
  .t-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .t-merci { display: grid; gap: 10px; }
  .t-merci h3 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -0.025em; }
  .t-merci p { margin: 0; color: var(--sc-ink-soft); line-height: 1.6; }
  [hidden] { display: none !important; }

  /* --- ACTE 7 : la fin ---------------------------------------------- */
  /* Le charbon arrive par-dessous, pas par un changement de classe : le
     sol dérive vers #262626 et ce voile finit le passage sans coupure. */
  .t-fin { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
  .t-fin__fond {
    position: absolute; inset: 0;
    background: var(--sc-ink);
    opacity: var(--fond, 0);
    pointer-events: none;
  }
  .t-fin__c {
    position: relative; z-index: 1;
    width: 100%; max-width: 1280px;
    padding-inline: clamp(20px, 5vw, 72px);
    text-align: center;
    color: #FFFFFF;
  }
  .t-marque { width: min(340px, 62vw); height: auto; margin-inline: auto; }

  .t-fin__c h2 {
    margin: clamp(28px, 4vw, 46px) 0 0;
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 700; letter-spacing: -0.032em; line-height: 1.08;
    max-width: 18ch; margin-inline: auto; text-wrap: balance;
  }
  .t-fin__pt {
    margin: clamp(14px, 1.8vw, 20px) auto 0;
    max-width: 48ch;
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
  }
  .t-cta {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 54px; padding: 16px 34px;
    background: var(--sc-accent); color: var(--sc-accent-ink);
    border-radius: 999px; text-decoration: none;
    font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em;
    transition: background-color 200ms var(--t-ease), transform 200ms var(--t-ease);
  }
  .t-cta:hover { background: #D69A02; transform: translateY(-2px); }
  .fin__cta-l { margin: clamp(24px, 3vw, 34px) 0 0; }

  .t-liens { margin: clamp(22px, 2.8vw, 30px) 0 0; font-size: 0.9375rem; line-height: 2; }
  .t-liens a {
    color: var(--sc-accent); text-decoration: none;
    border-bottom: 1px solid transparent; padding-bottom: 2px;
    transition: border-color 180ms var(--t-ease);
  }
  .t-liens a:hover { border-bottom-color: var(--sc-accent); }
  .t-sep { color: rgba(255, 255, 255, 0.34); margin: 0 10px; }

  .t-reseaux { display: flex; gap: 12px; justify-content: center; margin: clamp(22px, 2.8vw, 30px) 0 0; padding: 0; list-style: none; }
  .t-reseaux a {
    display: grid; place-items: center; width: 46px; height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%;
    color: #FFFFFF;
    transition: background-color 200ms var(--t-ease), color 200ms var(--t-ease), border-color 200ms var(--t-ease);
  }
  .t-reseaux a:hover { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
  .t-reseaux svg { width: 19px; height: 19px; }

  .t-droits { margin: clamp(26px, 3.2vw, 38px) 0 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.52); }

  /* Sans mouvement, le charbon est posé d'emblée : le texte blanc ne doit
     jamais se retrouver sur le papier pâle. */
  @media (prefers-reduced-motion: reduce) {
    .t-fin__fond { opacity: 1; }
  }