/* ==========================================================================
   Digital Local - jetons et éléments de base

   Ce fichier ne contient aucune mise en page. Uniquement ce qui ne change
   jamais d'une page à l'autre : couleurs, échelle, police, réinitialisation,
   et les quelques éléments qu'on retrouve partout.

   ---- la règle de l'accent ----
   L'orange n'existe que sur le BLANC. Sur le crème, tout est noir : le crème
   sert à contraster les bandes entre elles, pas à porter de la couleur.

   Elle porte sur la SURFACE qui touche le texte, pas sur la bande qui
   l'entoure : une carte blanche posée au milieu d'une bande crème est une
   surface blanche, l'orange y reprend donc ses droits.

   ---- la lisibilité ----
   Aucun texte gris, aucune opacité inférieure à 1 sur du texte. La hiérarchie
   se fait par la taille et la graisse, jamais par un affaiblissement.
   ========================================================================== */

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

:root {
  --encre:   #1e2a24;
  --blanc:   #ffffff;
  --creme:   #e8ece5;
  --creme-2: #dbe2d8;

  /* Les valeurs de l'accent telles qu'elles valent sur blanc, gardées à part
     pour qu'une surface blanche puisse les reprendre où qu'elle soit posée. */
  --accent-sur-blanc:       #7e9e92;                                    /* aplats */
  --accent-texte-sur-blanc: #456558;                                    /* texte : 6,5:1 */
  --accent-doux-sur-blanc:  linear-gradient(135deg, #b9d0c6, #e3ece5);  /* pastilles */

  --accent:       var(--accent-sur-blanc);
  --accent-texte: var(--accent-texte-sur-blanc);
  --accent-doux:  var(--accent-doux-sur-blanc);
  --accent-bord:  var(--accent-sur-blanc);

  --filet:      rgba(30, 42, 36, .14);
  --filet-fort: rgba(30, 42, 36, .26);

  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Un saut franc entre le titre de page et le reste, puis des paliers
     serrés. C'est le rythme typographique relevé sur Ritovex. */
  --t-geant: clamp(2.6rem, 1.5rem + 4.4vw, 4.25rem);
  --t-grand: clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem);
  --t-moyen: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  --t-corps: 1.125rem;
  --t-petit: .9rem;

  --gouttiere: clamp(20px, 3.4vw, 40px);
  --large: 1320px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Trois rayons, pas davantage. */
  --r-bouton: 5px;
  --r-bloc:   14px;
  --r-image:  20px;
}

/* Sur crème : plus d'orange nulle part. */
.bande--creme {
  --accent:       var(--encre);
  --accent-texte: var(--encre);
  --accent-doux:  var(--creme-2);
  --accent-bord:  var(--filet-fort);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--blanc); color: var(--encre);
  font-family: var(--font); font-size: var(--t-corps); font-weight: 500;
  line-height: 1.5; letter-spacing: -.015em; -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.03em; line-height: 1.06; text-wrap: balance; }
h1 { font-size: var(--t-geant); }
h2 { font-size: var(--t-grand); }
h3 { font-size: var(--t-moyen); line-height: 1.15; }
p { max-width: 68ch; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(a, button, summary, input, textarea, select):focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: var(--gouttiere); }
.wrap--etroit { max-width: 900px; }

/* --------------------------------------------------------------- boutons */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--encre); color: var(--blanc);
  padding: 15px 28px; border: 1px solid var(--encre); border-radius: var(--r-bouton);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--blanc); color: var(--encre); }
.btn--clair { background: var(--blanc); color: var(--encre); }
.btn--clair:hover { background: var(--encre); color: var(--blanc); }
.btn--fantome { background: transparent; color: var(--encre); border-color: var(--filet-fort); }
.btn--fantome:hover { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.btn:disabled { cursor: default; background: transparent; color: var(--encre); border-color: var(--filet); }

/* Sur bande sombre, tous les liens passent en blanc. Un bouton clair y
   deviendrait blanc sur blanc : on le rattrape ici. */
.bande--encre a { color: var(--blanc); }
.bande--encre .btn--clair { color: var(--encre); }
.bande--encre .btn--clair:hover { background: var(--encre); color: var(--blanc); border-color: var(--blanc); }

.lien-rond { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; }
.lien-rond i {
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--filet-fort); border-radius: 50%;
  font-style: normal; font-size: .8rem;
  transition: background-color .2s, border-color .2s;
}
.lien-rond:hover i { background: var(--accent); border-color: var(--accent-bord); }

.lien-fleche { color: var(--accent-texte); font-weight: 700; }
.lien-fleche::after { content: " →"; display: inline-block; transition: transform .2s var(--ease); }
.lien-fleche:hover::after { transform: translateX(4px); }

.gros-lien { font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem); font-weight: 700; letter-spacing: -.035em; border-bottom: 2px solid var(--accent-bord); }
.meta { font-size: var(--t-petit); font-weight: 700; }

/* Le sur-titre : minuscule, cerné d'un filet, un point en tête. */
.pastille {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border: 1px solid var(--filet-fort); border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing: -.005em;
}
.pastille::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-bord); flex: none;
}
.pastille--sombre { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); color: var(--blanc); }
.pastille--sombre::before { background: var(--blanc); }

.puces { display: grid; gap: 8px; margin-top: 4px; }
.puces li { position: relative; padding-left: 24px; font-size: var(--t-petit); font-weight: 600; }
.puces li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-texte); font-weight: 700; }

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