/* ============================================================================
   TEMPLATE SITE VITRINE — DEVOLIM
   ----------------------------------------------------------------------------
   Tout ce qui se personnalise par application est dans le bloc « IDENTITÉ »
   ci-dessous. Le reste du fichier est structurel : n'y touchez que si vous
   voulez faire évoluer la charte pour TOUS les sites.
   ========================================================================= */


/* ============================================================================
   1. IDENTITÉ — LA ZONE À PERSONNALISER
   ========================================================================= */

/* --- 1.a  Polices ----------------------------------------------------------
   Outfit porte les titres, comme dans l'application. Elle est AUTO-HÉBERGÉE :
   aucun appel à fonts.googleapis.com, qui transmettrait l'adresse IP du
   visiteur à Google sans consentement (voir fonts/README).

   Deux graisses seulement, sous-ensemblées au latin étendu : 13 ko chacune.
   Le corps de texte reste sur la police du système, comme dans l'application :
   c'est la mieux dessinée pour lire, et elle ne coûte rien à charger.        */

@font-face {
  font-family: "Outfit";
  src: url("/fonts/display-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/fonts/display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Titres */
  --font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Texte courant */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* --- 1.b  Couleurs, thème clair ---------------------------------------
     Reprises de lib/core/theme/app_palette.dart : un teal profond posé sur
     des neutres très légèrement teintés vers le vert.                      */
  --ground:      #FAFCFB;   /* canvasDay                   */
  --surface:     #FFFFFF;   /* surfaceDay                  */
  --surface-2:   #E7F3F2;   /* teal50                      */
  --ink:         #16201F;   /* inkDay                      */
  --ink-soft:    #4A5654;   /* inkMutedDay                 */
  --ink-faint:   #85918F;   /* inkFaintDay                 */
  --line:        #E0E8E7;   /* outlineDay                  */

  --accent:      #0E6E6E;   /* teal600                     */
  --accent-deep: #0A4344;   /* teal800                     */
  --accent-wash: #E7F3F2;   /* teal50                      */
  --on-accent:   #FFFFFF;

  /* Touche chaude, employée avec parcimonie, comme dans l'application :
     l'étoile du premium, un détail. Jamais une surface entière.            */
  --amber:       #9A6510;   /* amber assombri : 4,8:1 sur le fond clair      */
  --amber-line:  #E8A33D;

  /* Vert et rouge d'appel : conventions du système, jamais des couleurs de
     marque. Identiques dans les deux thèmes.                               */
  --call-accept: #22A45D;
  --call-decline:#D2382E;

  /* Écran d'appel de la maquette : sombre dans les deux thèmes, puisque
     c'est ainsi que l'iPhone l'affiche.                                    */
  --screen-top:  #17282B;
  --screen-bot:  #0A1718;

  /* --- 1.c  Rythme (rarement modifié) ------------------------------------ */
  --radius:      16px;
  --radius-sm:   10px;
  --page:        1080px;    /* largeur maximale du site    */
  --reading:     68ch;      /* largeur des pages de texte  */
  --gap:         clamp(1rem, 3vw, 2rem);
  --section:     clamp(3rem, 7vw, 4.75rem);
}

/* --- 1.d  Couleurs, thème sombre ------------------------------------------
   L'application traite le thème sombre comme son mode principal : elle sert
   surtout le soir. Le site suit le réglage du visiteur.                     */
@media (prefers-color-scheme: dark) {
  :root {
    --ground:      #101616;   /* canvasNight                 */
    --surface:     #182120;   /* surfaceNight                */
    --surface-2:   #222D2C;   /* surfaceHighNight            */
    --ink:         #E4EDEC;   /* inkNight                    */
    --ink-soft:    #A9B5B3;   /* inkMutedNight               */
    --ink-faint:   #869291;   /* inkFaintNight               */
    --line:        #222D2C;

    --accent:      #5CC4BE;   /* tealLight                   */
    --accent-deep: #B2D9D6;   /* teal200                     */
    --accent-wash: #0A4344;   /* teal800                     */
    --on-accent:   #101616;

    --amber:       #E8A33D;
    --amber-line:  #E8A33D;
  }
}


/* ============================================================================
   2. BASE
   ========================================================================= */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Lien d'évitement — accessibilité, ne pas retirer */
.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--on-accent);
  padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

.container { max-width: var(--page); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.section   { padding-block: var(--section); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; }
p  { margin: 0 0 1rem; }

.lead { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--ink-soft); }
.eyebrow {
  font-size: .75rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .75rem;
}


/* ============================================================================
   3. EN-TÊTE
   ========================================================================= */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; gap: 1rem;
  min-height: 62px;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  color: var(--ink); text-decoration: none; margin-right: auto;
}
.brand img { width: 28px; height: 28px; border-radius: 7px; }

.lang { display: flex; gap: .1rem; align-items: center; font-size: .78rem; }
.lang a {
  color: var(--ink-faint); text-decoration: none;
  padding: .25rem .45rem; border-radius: 5px; font-weight: 600;
}
.lang a[aria-current="true"] { color: var(--ink); background: var(--surface-2); }
.lang span { color: var(--line); }


/* ============================================================================
   4. BOUTONS
   ========================================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.35rem;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: .92rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary   { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-deep); color: var(--on-accent); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: var(--surface-2); color: var(--ink); }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn-sm { padding: .45rem 1rem; font-size: .82rem; }


/* ============================================================================
   5. ACCUEIL
   ========================================================================= */

.hero { padding-block: clamp(3rem, 8vw, 5.5rem) var(--section); }
.hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }
.hero p.lead { max-width: 46ch; }
.hero-btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.75rem; }
.hero-note { font-size: .82rem; color: var(--ink-faint); margin-top: .9rem; }
.hero-visual { display: flex; justify-content: center; }
.hero-visual img {
  border-radius: var(--radius);
  max-width: 300px;
  max-height: 620px;
  width: 100%;
  object-fit: contain;
}

.features-grid {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }
.feature { background: var(--ground); padding: 1.4rem 1.5rem; }
.feature h3 { margin-bottom: .35rem; }
.feature p  { color: var(--ink-soft); font-size: .92rem; margin: 0; }

.screens-row {
  display: grid; gap: var(--gap); margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.screen figcaption {
  font-size: .82rem; color: var(--ink-soft); margin-top: .7rem; text-align: center;
}
.screen img { border-radius: var(--radius); border: 1px solid var(--line); }

.premium {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem);
}
.premium ul { margin: 1.25rem 0 1.5rem; padding-left: 1.2rem; color: var(--ink-soft); }
.premium li { margin-bottom: .45rem; }
.premium li::marker { color: var(--accent); }


/* ============================================================================
   6. PAGES DE TEXTE (légal, support)
   ========================================================================= */

.legal { padding-block: clamp(2.5rem, 6vw, 4rem) var(--section); }
.legal .container { max-width: calc(var(--reading) + 6rem); }
.legal h1 { font-size: clamp(1.8rem, 4.5vw, 2.4rem); margin-bottom: .4rem; }
.legal h2 {
  font-size: 1.18rem; margin: 2.5rem 0 .7rem;
  padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.legal h3 { font-size: .98rem; margin: 1.6rem 0 .4rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal ul, .legal ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.legal li { margin-bottom: .45rem; }

.updated {
  font-size: .82rem; color: var(--ink-faint);
  margin: 0 0 2rem; font-variant-numeric: tabular-nums;
}
.back { display: inline-block; font-size: .85rem; margin-bottom: 1.5rem; }

/* Résumé en tête de la politique de confidentialité */
.summary {
  background: var(--accent-wash); border-radius: var(--radius);
  padding: 1.15rem 1.4rem; margin: 0 0 2rem;
}
.summary p { color: var(--ink); margin-bottom: .6rem; }
.summary p:last-child { margin-bottom: 0; }

/* Sommaire ancré */
.toc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.4rem; margin: 0 0 2.5rem;
}
.toc p { font-size: .72rem; font-weight: 600; letter-spacing: .1em;
         text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .6rem; }
.toc ol { columns: 2; column-gap: 2rem; margin: 0; padding-left: 1.1rem; font-size: .88rem; }
@media (max-width: 620px) { .toc ol { columns: 1; } }
.toc li { break-inside: avoid; margin-bottom: .25rem; }

/* Tableaux (durées de conservation, sous-traitants) */
.table-wrap { overflow-x: auto; border: 1px solid var(--line);
              border-radius: var(--radius-sm); margin: 1.25rem 0 1.75rem; }
table { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 480px; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
th { background: var(--surface-2); font-weight: 600; color: var(--ink); }
td { color: var(--ink-soft); }
tbody tr:last-child td { border-bottom: 0; }

/* Encadré d'avertissement */
.warning {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.05rem 1.3rem; margin: 1.5rem 0;
}
.warning p:last-child { margin-bottom: 0; }

/* FAQ de la page support */
.faq details {
  border-bottom: 1px solid var(--line); padding: .9rem 0;
}
.faq summary {
  cursor: pointer; font-weight: 600; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: .7rem 0 0; }


/* ============================================================================
   7. PIED DE PAGE
   ========================================================================= */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: 2.5rem 2rem;
  font-size: .86rem;
}
.footer-grid {
  display: flex; flex-wrap: wrap; gap: 1.5rem 3rem;
  justify-content: space-between; margin-bottom: 1.75rem;
}
.footer-col p {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .6rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .35rem; }
.footer-col a { color: var(--ink-soft); text-decoration: none; }
.footer-col a:hover { color: var(--accent); }
.footer-legal {
  border-top: 1px solid var(--line); padding-top: 1.25rem;
  color: var(--ink-faint); font-size: .8rem;
}
.footer-legal p { margin: 0 0 .3rem; }


/* ============================================================================
   8. PAGE 404
   ========================================================================= */

.notfound { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.notfound .code {
  font-family: var(--font-display); font-size: clamp(3.5rem, 12vw, 6rem);
  font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: .5rem;
}


/* ============================================================================
   9. FAUX APPEL — SPÉCIFIQUE À CETTE APPLICATION
   ----------------------------------------------------------------------------
   Tout ce qui suit n'appartient qu'à ce site : les graisses de l'application,
   la maquette d'écran d'appel de l'accueil, les personnages et les
   apparitions au défilement. Rien au-dessus n'a été modifié, hors section 1.
   ========================================================================= */

/* --- 9.a  Graisses ---------------------------------------------------------
   L'application est entièrement en gras : plancher à 600 pour le corps et les
   libellés, 700 pour les titres. La hiérarchie se joue sur la taille et la
   couleur, jamais sur la graisse. Le site applique la même règle.           */

body { font-weight: 600; letter-spacing: -.005em; }
h1, h2 { font-weight: 700; }
h3, h4 { font-weight: 700; }
.legal p, .legal li, .legal td { font-weight: 500; }
.legal strong { font-weight: 700; color: var(--ink); }
th { font-weight: 700; }
.btn { font-weight: 700; letter-spacing: .01em; }
.lead { font-weight: 600; }


/* --- 9.b  Apparitions au défilement ---------------------------------------
   Retiré d'office si le visiteur a demandé moins d'animations : la règle de
   la section 2 neutralise déjà transitions et animations, celle-ci rend en
   plus le contenu immédiatement visible.                                    */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}
.reveal-1 { transition-delay: .08s; }
.reveal-2 { transition-delay: .16s; }
.reveal-3 { transition-delay: .24s; }
.reveal-4 { transition-delay: .32s; }
.reveal-5 { transition-delay: .40s; }


/* --- 9.c  Accueil ---------------------------------------------------------- */

.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute; inset: -30% -20% auto -20%; height: 130%;
  background:
    radial-gradient(45% 55% at 78% 18%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    radial-gradient(50% 60% at 8% 0%,   color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; }

.hero h1 .accent {
  background: linear-gradient(100deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--amber-line)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Trois garanties courtes sous les boutons */
.hero-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.hero-points li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .92rem; color: var(--ink-soft);
}
.hero-points svg { flex: none; margin-top: .18rem; color: var(--accent); }

/* Bouton App Store : l'icône est une forme, pas une image distante */
.btn svg { flex: none; }


/* --- 9.d  Maquette d'écran d'appel ----------------------------------------
   Dessinée en CSS, pas photographiée : aucune image à charger, nette à toutes
   les densités, et rien à refaire quand l'application change de version.    */

.phone-wrap { position: relative; display: flex; justify-content: center; }

.phone-glow {
  position: absolute; inset: 8% -12% 2%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%);
  filter: blur(28px); pointer-events: none;
}

.phone {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 9 / 19.2;
  border-radius: 42px;
  padding: 9px;
  background: linear-gradient(160deg, #3A4948, #141C1C 42%, #2A3837);
  box-shadow: 0 26px 60px rgba(4, 26, 26, .34), 0 2px 0 rgba(255,255,255,.08) inset;
  animation: phone-float 7s ease-in-out infinite;
}
@keyframes phone-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.phone-screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 34px;
  background: linear-gradient(180deg, var(--screen-top), var(--screen-bot));
  color: #F1F6F5;
  display: flex; flex-direction: column;
  padding: 1.45rem 1.15rem 1.3rem;
  font-size: 14px;
}
/* Ondes de l'appel, derrière le nom */
.phone-screen::before {
  content: "";
  position: absolute; left: 50%; top: 27%;
  width: 320px; height: 320px; margin: -160px 0 0 -160px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  animation: ring-out 3.2s ease-out infinite;
}
.phone-screen::after {
  content: "";
  position: absolute; left: 50%; top: 27%;
  width: 320px; height: 320px; margin: -160px 0 0 -160px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  animation: ring-out 3.2s ease-out 1.6s infinite;
}
@keyframes ring-out {
  0%   { transform: scale(.34); opacity: .85; }
  70%  { opacity: .12; }
  100% { transform: scale(1); opacity: 0; }
}

.screen-status {
  position: relative; display: flex; justify-content: space-between;
  font-size: .7rem; color: #B7C6C4; letter-spacing: .02em;
}
.screen-status span { display: inline-flex; align-items: center; gap: .3rem; }

.screen-call { position: relative; margin-top: 17%; text-align: center; }
.screen-avatar {
  width: 74px; height: 74px; margin: 0 auto .85rem;
  border-radius: 50%;
  background: linear-gradient(150deg, #2F4644, #1B2A29);
  border: 1px solid rgba(241,246,245,.14);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.6rem; color: #CFE0DE;
}
.screen-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.85rem; letter-spacing: -.02em; margin: 0;
}
.screen-sub { margin: .3rem 0 0; font-size: .82rem; color: #9FB2B0; }

.screen-actions {
  position: relative; margin-top: auto;
  display: flex; justify-content: space-between; padding: 0 .6rem;
}
.screen-action { text-align: center; width: 62px; }
.screen-action .key {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto .4rem;
  color: #fff;
}
.screen-action .key.decline { background: var(--call-decline); }
.screen-action .key.accept  {
  background: var(--call-accept);
  animation: key-pulse 2.1s ease-in-out infinite;
}
@keyframes key-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34,164,93,.55); }
  55%      { transform: scale(1.07); box-shadow: 0 0 0 16px rgba(34,164,93,0); }
}
.screen-action p { margin: 0; font-size: .7rem; color: #A9BAB8; }


/* --- 9.e  Les personnages -------------------------------------------------- */

.cast {
  display: grid; gap: .75rem; margin-top: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.cast figure {
  margin: 0; padding: .9rem .5rem .75rem;
  background: linear-gradient(180deg, var(--accent-wash), var(--surface) 62%);
  border: 1px solid var(--line);
  border-radius: var(--radius); text-align: center;
  transition: transform .25s ease, border-color .25s ease;
}
.cast figure:hover { transform: translateY(-4px); border-color: var(--accent); }
.cast img { width: 100%; max-width: 140px; margin: 0 auto .5rem; }
.cast figcaption { font-size: .88rem; color: var(--ink); }

/* Bandeau sous les personnages */
.cast-note {
  margin-top: 1.25rem; font-size: .88rem; color: var(--ink-soft);
}


/* --- 9.f  Détails ---------------------------------------------------------- */

/* Deux colonnes de texte pour la section « comment ça marche » */
.steps { counter-reset: step; display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
.step { position: relative; padding-top: 2.6rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
}
.step h3 { margin-bottom: .3rem; }
.step p  { color: var(--ink-soft); font-size: .92rem; margin: 0; }

/* Badge doré du bloc abonnement */
.premium { position: relative; overflow: hidden; }
.premium::after {
  content: ""; position: absolute; inset: auto -40% -60% auto;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--amber-line) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.premium .eyebrow { color: var(--amber); }
.premium li::marker { color: var(--amber-line); }
.premium > * { position: relative; }

/* Encadré de rappel, réutilisé sur l'accueil et dans les pages de texte */
.notice {
  border: 1px solid var(--line); border-left: 3px solid var(--amber-line);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.05rem 1.3rem; margin: 2rem 0 0;
  font-size: .92rem; color: var(--ink-soft);
}
.notice strong { color: var(--ink); }
.notice p:last-child { margin-bottom: 0; }

/* Lisibilité des mentions secondaires. Le gris le plus clair de la charte
   tombe à 3,2:1 sur le fond de cette application : sous le seuil AA. Les
   mentions qui portent une information réelle repassent d'un cran. */
.hero-note { color: var(--ink-soft); }

/* Pied de page : la ligne de l'éditeur */
.footer-legal p { line-height: 1.6; }