/* Notiflair · site public
   Les couleurs, espacements, rayons et rayons de coin viennent de tokens.css,
   genere depuis le design system mobile. Aucune valeur de couleur en dur ici,
   hors transparences calculees sur une couleur du DS. */

/* ------------------------------------------------------------------ police */

@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-condensed-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-condensed-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plex-condensed-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plex-condensed-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/plex-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/plex-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/plex-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/plex-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ mesure */

/* La maquette fait 903 px de large : son contenu (796 px) devient ici le cadre
   de 1140 px d'une page de 1280. Toutes les valeurs de ce fichier viennent de
   ce relevé au pixel.
   --vu : 1 px de la page de référence (1280), réduit en proportion en dessous.
   --u  : 1 px de la maquette, soit 1,432 --vu. Les illustrations sont posées
          dans cette unité, aux coordonnées relevées, et se réduisent d'un bloc. */
:root {
  --vu: min(1px, calc(100vw / 1280));
  --u: calc(1.432 * var(--vu));
  --bord-carte: 1px solid var(--c-field);
}

/* ------------------------------------------------------------------- socle */

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

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

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-textPrimary);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure, ul, ol, dialog { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
a { color: var(--c-primaryText); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--rayon-badge);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone { flex: none; fill: none; stroke: currentColor; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.evitement {
  position: absolute;
  left: var(--espace-s5);
  top: calc(-1 * var(--espace-s16));
  z-index: 50;
  padding: var(--espace-s3) var(--espace-s5);
  background: var(--c-surface);
  color: var(--c-textPrimary);
  border-radius: var(--rayon-control);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--duree-state);
}
.evitement:focus { top: var(--espace-s3); }

.cadre {
  width: min(100% - 32px, calc(1140 * var(--vu)));
  margin-inline: auto;
}

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  border: 0;
  border-radius: var(--rayon-pill);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duree-press), transform var(--duree-press);
}
.bouton--encre { background: var(--marque-ink); color: var(--marque-ivory); }
.bouton--encre:hover { background: color-mix(in srgb, var(--marque-ink) 86%, var(--marque-turquoise)); }
.bouton--encre:active { transform: translateY(1px); }
.bouton__fleche { font-weight: 400; }

/* ------------------------------------------------------------------ entete */

.entete {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--c-surface);
}

.entete__interieur {
  display: flex;
  align-items: center;
  height: max(60px, calc(70 * var(--vu)));
}

.marque { display: inline-flex; flex: none; }
.marque picture { display: contents; }
.marque__logo { width: auto; height: max(38px, calc(53 * var(--vu))); }

.nav {
  display: flex;
  gap: calc(44 * var(--vu));
  margin-inline-start: calc(205 * var(--vu));
}
.nav a,
.connexion {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
  color: var(--c-textPrimary);
  font-size: max(14px, calc(17 * var(--vu)));
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover,
.connexion:hover { color: var(--c-primaryText); }

.entete__actions {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--vu));
  margin-inline-start: auto;
}
.connexion { gap: calc(13 * var(--vu)); }
.connexion .icone { width: max(16px, calc(20 * var(--vu))); height: max(16px, calc(20 * var(--vu))); }

.magasins { display: flex; align-items: center; gap: calc(17 * var(--vu)); }
.magasins img { width: auto; height: max(32px, calc(40 * var(--vu))); }
.magasins--grand img { height: max(44px, calc(53 * var(--vu))); }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--cible-min);
  height: var(--cible-min);
  margin-inline-start: auto;
  background: none;
  border: 1px solid var(--c-borderSubtle);
  border-radius: var(--rayon-control);
  cursor: pointer;
}
.burger__fermer { display: none; }
.burger[aria-expanded='true'] .burger__ouvrir { display: none; }
.burger[aria-expanded='true'] .burger__fermer { display: block; }

.menu-mobile {
  border-top: 1px solid var(--c-borderSubtle);
  background: var(--c-surface);
  padding-block: var(--espace-s3) var(--espace-s5);
}
.menu-mobile nav { display: flex; flex-direction: column; }
.menu-mobile a {
  display: flex;
  align-items: center;
  min-height: var(--cible-min);
  color: var(--c-textPrimary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--c-borderSubtle);
}
.menu-mobile .magasins { margin-top: var(--espace-s5); }
.menu-mobile .magasins img { height: 40px; }

/* ------------------------------------------------------------------- heros */

/* Le bandeau coupe ce qui déborde sur les côtés (scène, notifications), pas
   vers le bas : la liste de la recherche doit pouvoir en sortir. */
.heros {
  background: var(--marque-turquoise);
  color: var(--marque-ink);
  overflow-x: clip;
}

/* Ce qui suit le bandeau passe par-dessus son contenu quand il descend au
   défilement (voir plus bas) ; la liste de la recherche, ouverte, reste devant. */
.heros ~ * { position: relative; z-index: 2; background: var(--c-canvas); }
.heros__interieur:focus-within { z-index: 3; }

/* Le bandeau fait la hauteur de la scène : 351 px de maquette. */
.heros__interieur {
  position: relative;
  min-height: calc(351 * var(--u));
}

.heros__texte {
  position: relative;
  z-index: 1;
  width: calc(676 * var(--vu));
  padding-block: calc(83 * var(--vu)) calc(40 * var(--vu));
}

.heros__titre {
  font-size: calc(84 * var(--vu));
  line-height: calc(71.6 * var(--vu));
  font-weight: 700;
}

.heros__promesse {
  margin-top: calc(4 * var(--vu));
  font-size: calc(37 * var(--vu));
  line-height: calc(44.4 * var(--vu));
  font-weight: 700;
}

.heros__detail {
  margin-top: calc(11.6 * var(--vu));
  font-size: max(16px, calc(27 * var(--vu)));
  line-height: calc(32.2 * var(--vu));
}

/* ---------------------------------------------------------------- recherche */

/* Le champ, commun à toutes les pages. La liste s'ouvre dessous, à sa largeur. */
.recherche {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--c-surface);
  border-radius: var(--rayon-pill);
}
.recherche__loupe { flex: none; color: var(--c-textPrimary); }
.recherche__champ {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: var(--c-textPrimary);
  font: inherit;
}
.recherche__champ::placeholder { color: var(--c-textSecondary); }
.recherche__champ:focus { outline: none; }
.recherche__champ::-webkit-search-cancel-button { display: none; }
.recherche__valider { flex: none; }

/* La croix : 13 px dessinés, 40 px de zone de clic. */
.recherche__effacer {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-inline-end: 12px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--rayon-pill);
  color: var(--c-textSecondary);
  cursor: pointer;
}
.recherche__effacer[hidden] { display: none; }
.recherche__effacer .icone { width: 16px; height: 16px; }
.recherche__effacer:hover { color: var(--c-textPrimary); background: var(--c-field); }

/* Accueil : sur le turquoise, le repère de focus est à l'encre. */
.recherche--heros {
  margin-top: calc(24.6 * var(--vu));
  height: max(52px, calc(61.6 * var(--vu)));
  padding-inline: calc(20 * var(--vu)) max(4px, calc(5.7 * var(--vu)));
}
.recherche--heros:focus-within { outline: 2px solid var(--marque-ink); outline-offset: 2px; }
.recherche--heros .recherche__loupe { width: max(20px, calc(28 * var(--vu))); height: max(20px, calc(28 * var(--vu))); }
.recherche--heros .recherche__champ { margin-inline-start: calc(25 * var(--vu)); font-size: max(16px, calc(21 * var(--vu))); }
.recherche--heros .recherche__valider {
  height: max(44px, calc(48.5 * var(--vu)));
  width: max(112px, calc(166 * var(--vu)));
  font-size: max(15px, calc(20.5 * var(--vu)));
}

/* ------------------------------------------------------ liste de suggestions */

/* Relevé de la maquette de la liste (1522 px de large), ramené à l'échelle de
   la page (x 0,727). Sous 560 px, la variante mobile de la même maquette. */
.liste {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 25;
  padding: 16.9px 0 19.4px;
  background: var(--c-surface);
  border-radius: 17.5px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c-borderSubtle) 60%, transparent),
    0 18px 44px -18px color-mix(in srgb, var(--marque-ink) 35%, transparent);
  color: var(--c-textPrimary);
  text-align: left;
}
.liste[hidden] { display: none; }

/* Une etiquette en CAPITALES : le role « micro » du DS de l'app, le meme partout
   (app, site, extension), regle de David du 08-10-2026. Aucune etiquette ne
   redefinit sa taille, sa graisse, son espacement ou sa couleur ailleurs. */
.liste__intitule,
.prenom__categorie,
.prochaine__libelle,
.notif-carte__collection,
.moto-course__sous-titre,
.moto-section,
.pitch-eyebrow {
  color: var(--c-textSecondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.liste__intitule { padding-inline: 23.3px; }
.liste__groupe { display: grid; gap: 5px; }
.liste__intitule + .liste__option { margin-top: 7px; }
.liste__groupe--catalogue {
  margin: 15.3px 23.3px 0;
  padding-top: 16.9px;
  border-top: 1px solid var(--c-borderSubtle);
}
.liste__groupe--catalogue .liste__intitule { padding-inline: 0; }
.liste__groupe--catalogue .liste__option { margin-inline: -10.3px; }

.liste__option {
  display: flex;
  align-items: center;
  min-height: 77px;
  margin-inline: 13px;
  padding-inline: 11px 10.9px;
  border-radius: 13px;
  color: inherit;
  text-decoration: none;
}
.liste__option.est-active { background: color-mix(in srgb, var(--c-selected) 60%, var(--c-surface)); }

.liste__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 61px;
  height: 61px;
  border-radius: 50%;
  font-size: 38.2px;
  font-weight: 700;
  line-height: 1;
}
.liste__avatar--turquoise { background: color-mix(in srgb, var(--marque-turquoise) 24%, var(--c-surface)); color: var(--marque-turquoise); }
.liste__avatar--menthe { background: var(--marque-mint); color: var(--marque-turquoise); }
.liste__avatar--soleil { background: color-mix(in srgb, var(--marque-yellow) 45%, var(--c-surface)); color: color-mix(in srgb, var(--marque-yellow) 65%, var(--c-warning)); }

.liste__vignette {
  flex: none;
  width: 69px;
  height: 69px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--c-field);
}
.liste__vignette--lettre { display: grid; place-items: center; color: var(--c-textSecondary); font-size: 30px; font-weight: 700; }

.liste__texte {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
  margin-inline-start: 23px;
  padding-bottom: 6px;
}
.liste__option--catalogue .liste__texte { margin-inline-start: 25px; }
.liste__titre {
  overflow: hidden;
  font-size: 21.7px;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.liste__detail {
  overflow: hidden;
  font-size: 18.4px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liste__pastille {
  flex: none;
  display: grid;
  place-items: center;
  height: 30.5px;
  padding-inline: 16px;
  border-radius: var(--rayon-pill);
  background: var(--c-selected);
  color: var(--c-selectedText);
  font-size: 14.8px;
  font-weight: 500;
}
/* Le chevron dessiné fait 8 x 14,5 px ; sa boîte de 26,8 px porte les marges du dessin. */
.liste__chevron { flex: none; width: 26.8px; height: 26.8px; margin-inline-start: 48px; color: var(--c-textSecondary); }
.liste__option--catalogue .liste__chevron { margin-inline-start: auto; }

.liste__tout {
  justify-content: center;
  gap: 17.2px;
  min-height: 60px;
  margin: 19.6px 5.8px 0;
  padding-inline: 20px;
  background: var(--c-field);
  border-radius: 11.6px;
  font-size: 18.8px;
}
.liste__tout.est-active { background: color-mix(in srgb, var(--c-selected) 70%, var(--c-field)); }
.liste__tout-loupe { flex: none; width: 31.6px; height: 31.6px; color: var(--c-primaryText); }

.liste__aides {
  display: flex;
  justify-content: center;
  gap: 29px;
  margin-top: 15.1px;
  color: var(--c-textSecondary);
  font-size: 16.7px;
  line-height: 1.2;
}
.liste__aides span { display: inline-flex; align-items: center; gap: 6px; }
.liste__aides kbd { font: inherit; font-weight: 600; }

/* Aucun résultat : relevé de la variante mobile, la seule dessinée. */
.liste__vide { display: grid; justify-items: center; padding: 6px 24px 0; text-align: center; }
.liste__vide-image { width: 101px; height: auto; }
.liste__vide-titre { margin-top: 12px; font-size: 21.2px; font-weight: 700; line-height: 1.2; }
.liste__vide-texte { margin-top: 5px; font-size: 15.5px; line-height: 1.3; }
.liste__vide-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--c-primaryText);
  font-size: 15.9px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.liste__vide-lien .icone { width: 16px; height: 16px; }
.liste__vide + .liste__aides { margin-top: 26px; font-size: 13.3px; }

/* Au doigt, les touches du clavier n'ont rien à faire là. */
@media (hover: none) and (pointer: coarse) {
  .liste__aides { display: none; }
}

/* ------------------------------------------------------------------ scène */

/* Origine : le point (470, 49) de la maquette. Chaque valeur est un pixel
   relevé, multiplié par --u. */
.scene {
  position: absolute;
  top: 0;
  left: calc(417 * var(--u));
  width: calc(420 * var(--u));
  height: calc(351 * var(--u));
}
.scene > * { position: absolute; }

/* Deux cartes pâles derrière le téléphone : contour relevé, teintes mesurées
   (85 % et 43 % de blanc sur le turquoise). */
.scene__fond { inset: 0; width: 100%; height: 100%; overflow: visible; }
.scene__carte-arriere { fill: color-mix(in srgb, var(--c-surface) 43%, var(--marque-turquoise)); }
.scene__carte-avant { fill: color-mix(in srgb, var(--c-surface) 85%, var(--marque-turquoise)); }

.telephone {
  left: calc(116 * var(--u));
  top: calc(14 * var(--u));
  width: calc(161 * var(--u));
  height: calc(328 * var(--u));
  padding: calc(5 * var(--u));
  background: var(--marque-ink);
  border-radius: calc(24 * var(--u));
  box-shadow:
    inset 0 0 0 calc(1 * var(--u)) color-mix(in srgb, var(--marque-ivory) 22%, transparent),
    0 calc(14 * var(--u)) calc(26 * var(--u)) calc(-10 * var(--u)) color-mix(in srgb, var(--marque-ink) 55%, transparent);
}

/* L'écran : 151 x 318 px de maquette, repère en haut à gauche. */
.ecran {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--c-surface);
  border-radius: calc(19 * var(--u));
  color: var(--c-textPrimary);
}
.ecran > * { position: absolute; }

.ecran__heure {
  left: calc(19 * var(--u));
  top: calc(4 * var(--u));
  font-size: calc(8.6 * var(--u));
  line-height: calc(10 * var(--u));
  font-weight: 600;
}
.ecran__ilot {
  left: calc(51 * var(--u));
  top: calc(4 * var(--u));
  width: calc(51 * var(--u));
  height: calc(15 * var(--u));
  background: var(--marque-ink);
  border-radius: var(--rayon-pill);
}
.ecran__etat {
  left: calc(110 * var(--u));
  top: calc(7.5 * var(--u));
  width: calc(30 * var(--u));
  height: calc(6.7 * var(--u));
  fill: currentColor;
}

.appli {
  display: grid;
  place-items: center;
  background: var(--marque-turquoise);
}
.appli img { width: 72%; height: auto; }

.ecran__appli {
  left: calc(39 * var(--u));
  top: calc(28 * var(--u));
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  border-radius: calc(4 * var(--u));
}
.ecran__loupe {
  left: calc(132 * var(--u));
  top: calc(33.5 * var(--u));
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  fill: none;
  stroke: currentColor;
}
.ecran__titre {
  left: calc(41 * var(--u));
  top: calc(53 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(16.8 * var(--u));
  font-weight: 700;
}
.ecran__filet {
  left: calc(7 * var(--u));
  top: calc(78 * var(--u));
  width: calc(137 * var(--u));
  height: 1px;
  background: var(--c-field);
}

.ecran__liste {
  left: calc(8 * var(--u));
  right: calc(10 * var(--u));
  top: calc(88 * var(--u));
  display: grid;
  gap: calc(5 * var(--u));
}
.ecran__ligne {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(43 * var(--u));
}
.ecran__vignette {
  flex: none;
  width: calc(47 * var(--u));
  height: calc(43 * var(--u));
  border-radius: calc(5 * var(--u));
  object-fit: cover;
  background: var(--c-field);
}
.ecran__nom {
  flex: 1;
  min-width: 0;
  font-size: calc(9 * var(--u));
  line-height: calc(10.5 * var(--u));
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ecran__chevron {
  flex: none;
  width: calc(4.5 * var(--u));
  height: calc(8 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mon fil : l'icône de la fiche sur la teinte de sa catégorie, le nom, la prochaine date. */
.ecran__tuile {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: calc(7 * var(--u));
}
.ecran__tuile svg { width: 56%; height: 56%; }
/* Une ligne de grille ne rétrécit pas sous son contenu sans ça : la cloche sortait de l'écran. */
.ecran__liste .ecran__ligne { min-width: 0; }
.ecran__texte {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(1.5 * var(--u));
}
.ecran__texte .ecran__nom { line-height: calc(10 * var(--u)); }
.ecran__date {
  color: var(--c-textSecondary);
  font-size: calc(7 * var(--u));
  line-height: calc(8.5 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ecran__cloche {
  flex: none;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  fill: none;
  stroke: currentColor;
}

/* Barre du bas : centres relevés à 18,3 ; 54,8 ; 94 et 132,8. */
.ecran__onglet {
  top: calc(282.5 * var(--u));
  width: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2.9 * var(--u));
  color: var(--c-textSecondary);
  font-size: calc(6.5 * var(--u));
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
}
.ecran__onglet svg { width: calc(12.5 * var(--u)); height: calc(12.5 * var(--u)); fill: none; stroke: currentColor; }
.ecran__onglet--1 { left: calc(-1.7 * var(--u)); }
.ecran__onglet--2 { left: calc(34.8 * var(--u)); }
.ecran__onglet--3 { left: calc(74 * var(--u)); }
.ecran__onglet--4 { left: calc(112.8 * var(--u)); }
.ecran__onglet--actif { color: var(--c-primaryText); }
.ecran__rond {
  display: grid;
  place-items: center;
  width: calc(12.5 * var(--u));
  height: calc(12.5 * var(--u));
  background: var(--marque-turquoise);
  border-radius: 50%;
  color: var(--c-onPrimary);
}
.ecran__rond svg { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }

/* Notifications posées sur la scène, dessinées comme sur un vrai téléphone.
   Mesures relevées en dp (Android, sur un Pixel) et en pt (iPhone, iOS 26),
   posées ici un peu plus grandes que le téléphone pour rester lisibles :
   --d vaut un dp ou un pt. */
.notif {
  --d: calc(0.56 * var(--u));
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  transform: rotate(var(--r));
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) calc(-6 * var(--u)) color-mix(in srgb, var(--marque-ink) 40%, transparent);
  color: var(--n-titre);
  line-height: normal;
}
.notif--1 { --x: -55; --y: 40; --r: -7.6deg; }
.notif--2 { --x: 206; --y: 118; --r: 9deg; }
/* La 3e, sous la 2e : un rappel perso. */
.notif--3 { --x: 204; --y: 236; --r: -5deg; }

/* Android : carte teintée, rond de l'appli, « Notiflair · Maintenant », titre,
   texte, bouton pour replier. */
.notif--android {
  --n-fond: #E8F1EF; --n-titre: #171D1C; --n-texte: #3F4947; --n-bouton: #D3E4E1;
  width: calc(379 * var(--d));
  box-sizing: border-box;
  padding: calc(16 * var(--d)) calc(16 * var(--d)) calc(16 * var(--d)) calc(72 * var(--d));
  background: var(--n-fond);
  border-radius: calc(28 * var(--d));
  font-family: 'Google Sans Text', 'Google Sans', Roboto, system-ui, sans-serif;
}
.notif--android .notif__appli {
  position: absolute;
  left: calc(16 * var(--d));
  top: calc(16 * var(--d));
  width: calc(40 * var(--d));
  height: calc(40 * var(--d));
  border-radius: 50%;
}
.notif--android .notif__appli img { width: 55%; }
.notif--android .notif__texte { display: flex; flex-direction: column; }
.notif--android .notif__entete { font-size: calc(13 * var(--d)); line-height: calc(20 * var(--d)); color: var(--n-texte); }
.notif--android .notif__titre { margin-top: calc(3 * var(--d)); font-size: calc(14 * var(--d)); line-height: calc(20 * var(--d)); font-weight: 500; }
.notif--android .notif__corps { margin-top: calc(6 * var(--d)); font-size: calc(14 * var(--d)); line-height: calc(20 * var(--d)); color: var(--n-texte); }
.notif__replier {
  position: absolute;
  right: calc(16 * var(--d));
  top: calc(16 * var(--d));
  width: calc(26 * var(--d));
  height: calc(20 * var(--d));
  display: grid;
  place-items: center;
  background: var(--n-bouton);
  border-radius: var(--rayon-pill);
}
.notif__replier svg { width: calc(14 * var(--d)); height: calc(14 * var(--d)); fill: none; stroke: var(--n-titre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* iPhone : verre dépoli, icône carrée arrondie, titre en gras et heure à droite. */
.notif--ios {
  --n-fond: rgba(255, 255, 255, 0.8); --n-bord: rgba(255, 255, 255, 0.7); --n-titre: #000; --n-heure: rgba(60, 60, 67, 0.6);
  width: calc(374 * var(--d));
  box-sizing: border-box;
  padding: calc(12 * var(--d)) calc(16 * var(--d)) calc(13 * var(--d)) calc(66 * var(--d));
  background: var(--n-fond);
  border: 1px solid var(--n-bord);
  border-radius: calc(24 * var(--d));
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.notif--ios .notif__appli {
  position: absolute;
  left: calc(14 * var(--d));
  top: 50%;
  width: calc(38 * var(--d));
  height: calc(38 * var(--d));
  transform: translateY(-50%);
  border-radius: calc(9 * var(--d));
}
.notif--ios .notif__appli img { width: 62%; }
.notif--ios .notif__texte { display: flex; flex-direction: column; }
.notif__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: calc(8 * var(--d)); }
.notif--ios .notif__titre { font-size: calc(15 * var(--d)); line-height: calc(18.5 * var(--d)); font-weight: 600; white-space: nowrap; }
.notif__heure { flex: none; padding-right: calc(2 * var(--d)); font-size: calc(13 * var(--d)); color: var(--n-heure); }
.notif--ios .notif__corps { font-size: calc(15 * var(--d)); line-height: calc(18.5 * var(--d)); }

/* Thème sombre : les couleurs sombres de chaque téléphone. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .notif--android { --n-fond: #1B2726; --n-titre: #DEE4E2; --n-texte: #BEC9C6; --n-bouton: #2E3B39; }
  :root:not([data-theme='light']) .notif--ios { --n-fond: rgba(44, 44, 46, 0.82); --n-bord: rgba(255, 255, 255, 0.1); --n-titre: #FFF; --n-heure: rgba(235, 235, 245, 0.6); }
}
:root[data-theme='dark'] .notif--android { --n-fond: #1B2726; --n-titre: #DEE4E2; --n-texte: #BEC9C6; --n-bouton: #2E3B39; }
:root[data-theme='dark'] .notif--ios { --n-fond: rgba(44, 44, 46, 0.82); --n-bord: rgba(255, 255, 255, 0.1); --n-titre: #FFF; --n-heure: rgba(235, 235, 245, 0.6); }
/* Au chargement, les notifications arrivent l'une après l'autre, comme reçues :
   elles tombent un peu d'en haut et rebondissent.
   Rien ne bouge si l'appareil demande moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  /* Une fois posées, elles flottent très légèrement, chacune à son rythme. */
  .scene .notif--1 { animation: notif-arrive 700ms cubic-bezier(0.2, 1.35, 0.45, 1) 700ms both, notif-flotte 5s ease-in-out 1400ms infinite; }
  .scene .notif--2 { animation: notif-arrive 700ms cubic-bezier(0.2, 1.35, 0.45, 1) 1900ms both, notif-flotte 6s ease-in-out 2600ms infinite reverse; }
  .scene .notif--3 { animation: notif-arrive 700ms cubic-bezier(0.2, 1.35, 0.45, 1) 3100ms both, notif-flotte 5.5s ease-in-out 3800ms infinite; }
}
@keyframes notif-arrive {
  from { opacity: 0; transform: translateY(calc(-16 * var(--u))) scale(0.86) rotate(var(--r)); }
  to { opacity: 1; transform: rotate(var(--r)); }
}
@keyframes notif-flotte {
  0%, 100% { transform: rotate(var(--r)); }
  50% { transform: translateY(calc(-2.5 * var(--u))) rotate(calc(var(--r) + 0.8deg)); }
}
/* Au défilement, tout le contenu du bandeau (texte et téléphone ensemble)
   descend moins vite que la page : il semble rester, puis passe sous la
   section suivante. Là où le navigateur sait lier une animation au défilement. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .heros__interieur { animation: heros-reste linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes heros-reste { to { translate: 0 50vh; } }
.notif__source {
  display: flex;
  justify-content: space-between;
  color: var(--c-textSecondary);
  font-size: calc(var(--fs) * var(--u));
  line-height: calc(8 * var(--u));
}

/* ---------------------------------------------------------------- sections */

.section[hidden] { display: none; }
.section--featured { padding-top: calc(22.6 * var(--vu)); }
.section--collections { padding-block: calc(23.3 * var(--vu)) calc(55.8 * var(--vu)); }

.section__titre {
  margin-bottom: calc(11.7 * var(--vu));
  font-size: max(24px, calc(38 * var(--vu)));
  line-height: 1.15;
  font-weight: 700;
}

/* ---------------------------------------------------------------- featured */

/* Le visuel est la couverture 16:9 servie, montrée entière : c'est lui qui
   donne sa hauteur à la carte, jamais l'inverse. Une image qui ne serait pas
   en 16:9 garde ses bords, avec un fond neutre autour. */
.featured {
  display: grid;
  grid-template-columns: 39.1% minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  background: var(--c-field);
  border-radius: calc(8.6 * var(--vu));
}
.featured__visuel {
  align-self: stretch;
  display: grid;
  align-items: center;
  background: var(--c-field);
}
.featured__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.featured__corps {
  display: flex;
  flex-direction: column;
  padding: calc(24 * var(--vu)) calc(20 * var(--vu)) calc(24 * var(--vu)) calc(28 * var(--vu));
}
.featured__titre {
  font-size: max(22px, calc(40 * var(--vu)));
  line-height: 1.15;
  font-weight: 700;
}
.featured__accroche {
  margin-top: calc(2.5 * var(--vu));
  font-size: max(17px, calc(29 * var(--vu)));
  line-height: 1.2;
}
.featured__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-s3);
  margin-top: calc(21.9 * var(--vu));
}
.featured__dates {
  display: inline-flex;
  align-items: center;
  gap: calc(15.8 * var(--vu));
  margin-inline-end: auto;
  font-size: max(15px, calc(22 * var(--vu)));
  font-weight: 500;
}
.featured__dates .icone { width: calc(24.3 * var(--vu)); height: calc(28.6 * var(--vu)); min-width: 18px; min-height: 18px; }
.featured .bouton {
  height: max(44px, calc(47.3 * var(--vu)));
  width: max(150px, calc(178 * var(--vu)));
  font-size: max(15px, calc(19 * var(--vu)));
}

/* --------------------------------------------------------------- carrousel */

/* Plusieurs cartes : une piste qui défile d'une carte à la fois. Le balayage au
   doigt et au pavé est natif (accroche par carte) ; la souris et le défilement
   automatique sont dans app.js. */
/* `position: relative` : sans elle, un texte masqué pour lecteur d'écran de la
   2e carte (positionné en absolu) sort de la piste et élargit toute la page. */
.carrousel__piste {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  column-gap: var(--espace-s6);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__piste > .featured { scroll-snap-align: start; scroll-snap-stop: always; }
.carrousel__piste:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; border-radius: calc(8.6 * var(--vu)); }
.carrousel__piste.est-tiree { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.carrousel__piste.est-tiree a { pointer-events: none; }

.carrousel__commandes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-s2);
  margin-top: var(--espace-s2);
}
.carrousel__points { display: flex; align-items: center; }

/* Le point se voit à 8 px, sa zone de clic fait 32 px. */
.carrousel__point {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.carrousel__point::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--rayon-pill);
  background: var(--c-borderControl);
  transition: width var(--duree-state), background-color var(--duree-state);
}
.carrousel__point[aria-current='true']::before { width: 24px; background: var(--c-textPrimary); }
.carrousel__point:hover::before { background: var(--c-textSecondary); }
.carrousel__point[aria-current='true']:hover::before { background: var(--c-textPrimary); }

.carrousel__lecture {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 1px solid var(--c-borderSubtle);
  border-radius: var(--rayon-pill);
  color: var(--c-textSecondary);
  cursor: pointer;
}
.carrousel__lecture:hover { color: var(--c-textPrimary); border-color: var(--c-borderControl); }
.carrousel__lecture .icone { fill: currentColor; stroke: none; }
.carrousel__jouer { display: none; }
.carrousel.est-arrete .carrousel__pause { display: none; }
.carrousel.est-arrete .carrousel__jouer { display: block; }

/* ------------------------------------------------------------- collections */

.grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18.6 * var(--vu)) calc(31.5 * var(--vu));
}

.carte {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--c-surface);
  border: var(--bord-carte);
  border-radius: calc(9 * var(--vu));
}
.carte__image {
  width: 100%;
  aspect-ratio: 251 / 243.5;
  object-fit: cover;
  background: var(--c-field);
}
.carte__image--vide { height: auto; }
.carte__corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(12 * var(--vu)) calc(23 * var(--vu)) calc(12.8 * var(--vu));
}
.carte__titre {
  font-size: max(17px, calc(24 * var(--vu)));
  line-height: 1.2;
  font-weight: 600;
}
.carte__compte {
  margin-top: calc(1.7 * var(--vu));
  color: var(--c-textSecondary);
  font-size: max(15px, calc(22 * var(--vu)));
  line-height: 1.3;
}

/* Lien d'action : la zone de clic déborde le texte pour atteindre 48 px. */
.lien-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: calc(5.65 * var(--vu));
  padding: 0;
  background: none;
  border: 0;
  color: var(--c-primaryText);
  font-size: max(15px, calc(21 * var(--vu)));
  line-height: 1.3;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.lien-action::after { content: ''; position: absolute; inset: -12px -8px; }
.lien-action:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Dans une carte, la zone de clic du lien couvre toute la carte. */
.carte .lien-action { position: static; }
.carte .lien-action::after { inset: 0; }
.carte:hover .lien-action { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------- comment ça marche */

.section--comment { padding-bottom: calc(40 * var(--vu)); }

/* Le panneau dépasse le cadre de 24 px de maquette de chaque côté. */
.comment {
  margin-inline: calc(-24 * var(--u));
  padding: calc(17.6 * var(--vu)) calc(24 * var(--u)) calc(21.5 * var(--vu));
  background: var(--c-selected);
  border-radius: calc(18.6 * var(--vu));
}
.comment .section__titre { margin-bottom: calc(8.9 * var(--vu)); }

/* Trois colonnes égales de 265,3 px de maquette. Chaque élément est posé par
   rapport au coin haut gauche de sa colonne, aux coordonnées relevées. */
.etapes { position: relative; }
.etapes__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.etape__scene {
  position: relative;
  height: calc(120 * var(--u));
}
.etape__scene > * { position: absolute; }

.etape__numero {
  top: calc(13.9 * var(--u));
  color: var(--marque-turquoise);
  font-size: calc(40 * var(--u));
  line-height: calc(40 * var(--u));
  font-weight: 700;
}
.etape--1 .etape__numero { left: 0; }
.etape--2 .etape__numero { left: calc(-4.5 * var(--u)); }
.etape--3 .etape__numero { left: 0; top: calc(12.4 * var(--u)); }

.etape__carte {
  background: var(--c-surface);
  border-radius: calc(8 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-6 * var(--u)) color-mix(in srgb, var(--marque-ink) 22%, transparent);
  color: var(--c-textPrimary);
}
.etape--1 .etape__carte { left: calc(61 * var(--u)); top: calc(14 * var(--u)); width: calc(151 * var(--u)); height: calc(90 * var(--u)); }
.etape--2 .etape__carte { left: calc(52.7 * var(--u)); top: 0; width: calc(163 * var(--u)); height: calc(104 * var(--u)); }
.etape--3 .etape__carte {
  left: calc(52 * var(--u));
  top: calc(-4 * var(--u));
  width: calc(183 * var(--u));
  height: calc(124 * var(--u));
  transform: rotate(-3.4deg);
}

/* Étape 01 : la liste à cocher. Un nom trop long finit par « … », comme dans « Mon fil ». */
.choix ul {
  position: absolute;
  left: calc(9 * var(--u));
  right: calc(9 * var(--u));
  top: calc(8 * var(--u));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(7.5 * var(--u));
}
.choix__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.choix li {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  height: calc(20 * var(--u));
  font-size: calc(10.8 * var(--u));
  white-space: nowrap;
}
.case {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border: calc(2 * var(--u)) solid var(--c-textPrimary);
  border-radius: calc(4 * var(--u));
}
.case--cochee { background: var(--marque-turquoise); border-color: var(--marque-turquoise); color: var(--c-onPrimary); }
.case svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

/* Étape 02 : le fil. */
.fil__titre {
  position: absolute;
  left: calc(7 * var(--u));
  top: calc(5.5 * var(--u));
  font-size: calc(12.5 * var(--u));
  line-height: calc(15 * var(--u));
  font-weight: 700;
}
.fil ul {
  position: absolute;
  left: calc(5.5 * var(--u));
  right: calc(13 * var(--u));
  top: calc(27.5 * var(--u));
  border-top: 1px solid var(--c-field);
}
.fil li {
  display: flex;
  align-items: center;
  gap: calc(7.3 * var(--u));
  height: calc(34 * var(--u));
  font-size: calc(9.3 * var(--u));
}
.fil li + li { height: calc(35 * var(--u)); border-top: 1px solid var(--c-field); }
.fil__vignette {
  flex: none;
  width: calc(30 * var(--u));
  height: calc(28 * var(--u));
  border-radius: calc(5 * var(--u));
  object-fit: cover;
  background: var(--c-field);
}
.fil__nom { flex: 1; min-width: 0; white-space: nowrap; }
/* Mon fil : l'icône de la fiche sur la teinte de sa catégorie, le nom, la prochaine date. */
.fil__tuile {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: calc(6 * var(--u));
}
.fil__tuile svg { width: 56%; height: 56%; }
.fil__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.fil__texte .fil__nom { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.fil__date {
  color: var(--c-textSecondary);
  font-size: calc(7.4 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fil__cloche { flex: none; width: calc(15 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: currentColor; }

/* Étape 03 : le haut d'un téléphone qui reçoit la notification (heure, réseau,
   batterie), le bas fondu. */
.telephone-etape {
  padding: calc(5 * var(--u)) calc(5 * var(--u)) 0;
  background: var(--marque-ink);
  border-radius: calc(30 * var(--u)) calc(30 * var(--u)) 0 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.telephone-etape__ecran {
  position: relative;
  height: 100%;
  border-radius: calc(25 * var(--u)) calc(25 * var(--u)) 0 0;
  background: linear-gradient(165deg, #BDEFEA 0%, var(--marque-mint) 55%, var(--marque-yellow) 130%);
  color: var(--marque-ink);
  overflow: hidden;
}
.telephone-etape__ecran > * { position: absolute; }
.telephone-etape__ilot {
  left: 50%;
  top: calc(6 * var(--u));
  width: calc(44 * var(--u));
  height: calc(14 * var(--u));
  border-radius: 99px;
  background: #0E1716;
  transform: translateX(-50%);
}
.telephone-etape__heure { left: calc(17 * var(--u)); top: calc(8 * var(--u)); font-size: calc(9.8 * var(--u)); font-weight: 700; }
.telephone-etape__etat { right: calc(13 * var(--u)); top: calc(10 * var(--u)); width: calc(26 * var(--u)); height: calc(6 * var(--u)); fill: currentColor; }
.telephone-etape__notif {
  left: calc(7 * var(--u));
  right: calc(7 * var(--u));
  top: calc(30 * var(--u));
  display: flex;
  gap: calc(7 * var(--u));
  align-items: flex-start;
  padding: calc(7 * var(--u));
  background: rgba(255, 255, 255, 0.92);
  border-radius: calc(11 * var(--u));
  box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(23, 45, 44, 0.18);
}
.telephone-etape__appli { flex: none; width: calc(25 * var(--u)); height: calc(25 * var(--u)); border-radius: calc(6 * var(--u)); }
.telephone-etape__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1.5 * var(--u)); }
/* L'écran reste clair en mode sombre : couleurs fixes, jamais celles du thème. */
.telephone-etape .notif__source { color: #2E4644; font-size: calc(7.6 * var(--u)); line-height: calc(9 * var(--u)); }
.telephone-etape .notif__source span:first-child { color: var(--marque-deepTurquoise); font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; }
.telephone-etape__titre { font-size: calc(10.2 * var(--u)); line-height: 1.2; font-weight: 700; }
.telephone-etape__corps { font-size: calc(8.8 * var(--u)); line-height: 1.3; color: #2E4644; }

/* Étape 03, ancienne carte seule (plus utilisée par l'accueil). */
.notif-etape__appli {
  position: absolute;
  left: calc(11.1 * var(--u));
  top: calc(11.5 * var(--u));
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: calc(7 * var(--u));
}
.notif-etape__texte {
  position: absolute;
  left: calc(53 * var(--u));
  right: calc(9.6 * var(--u));
  top: calc(12 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(8.2 * var(--u));
}
.notif-etape .notif__source { font-size: calc(9.5 * var(--u)); line-height: calc(10 * var(--u)); }
.notif-etape__titre {
  font-size: calc(11.4 * var(--u));
  line-height: calc(14 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}

/* Flèches : ligne centrale relevée sur la maquette, trait de 1,8 px. */
.fleche {
  position: absolute;
  overflow: visible;
  fill: none;
  stroke: var(--marque-turquoise);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fleche--1 { left: calc(216 * var(--u)); top: calc(49 * var(--u)); width: calc(86 * var(--u)); height: calc(25 * var(--u)); }
.fleche--2 { left: calc(487 * var(--u)); top: calc(52 * var(--u)); width: calc(86 * var(--u)); height: calc(24 * var(--u)); }

/* Légendes : centrées sur leur colonne, décalées des écarts relevés. */
.etape__legende {
  margin-top: calc(16 * var(--vu));
  font-size: max(15px, calc(20 * var(--vu)));
  line-height: 1.3;
  font-weight: 600;
  text-align: center;
}
.etape--1 .etape__legende { transform: translateX(calc(6.35 * var(--u))); }
.etape--2 .etape__legende { transform: translateX(calc(1.05 * var(--u))); }
.etape--3 .etape__legende { transform: translateX(calc(9.15 * var(--u))); }

.comment__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espace-s4) calc(37 * var(--vu));
  margin-top: calc(29.9 * var(--vu));
  padding-top: calc(21.5 * var(--vu));
  border-top: 1.5px solid color-mix(in srgb, var(--marque-turquoise) 70%, transparent);
}
.comment__accroche {
  font-size: max(16px, calc(21 * var(--vu)));
  font-weight: 600;
}

/* ------------------------------------------------------------------- pied */

.pied { padding-block: calc(40 * var(--vu)) calc(43 * var(--vu)); }
.pied__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-s4);
}
.pied .marque__logo { height: max(32px, calc(41.5 * var(--vu))); }
.pied__liens { display: flex; flex-wrap: wrap; gap: 0 calc(33.5 * var(--vu)); }
.pied__liens a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
  color: var(--c-textPrimary);
  font-size: max(14px, calc(16 * var(--vu)));
  text-decoration: none;
}
.pied__liens a:hover { color: var(--c-primaryText); text-decoration: underline; }

/* ----------------------------------------------------------------- feuille */

.feuille {
  width: min(100% - 2 * var(--espace-s4), 560px);
  max-height: min(84vh, 720px);
  padding: 0;
  overflow: auto;
  background: var(--c-surfaceRaised);
  color: var(--c-textPrimary);
  border: 0;
  border-radius: var(--rayon-sheet);
}
.feuille::backdrop { background: color-mix(in srgb, var(--marque-ink) 55%, transparent); }
.feuille__entete {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--espace-s4);
  padding: var(--espace-s6) var(--espace-s6) var(--espace-s4);
  background: var(--c-surfaceRaised);
}
.feuille__titre { font-size: 20px; font-weight: 700; line-height: 1.2; }
.feuille__accroche { color: var(--c-textSecondary); font-size: 14px; }
.feuille__accroche:empty { display: none; }
.feuille__compte { margin-top: var(--espace-s1); color: var(--c-textSecondary); font-size: 13px; }
.feuille__fermer {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--cible-min);
  height: var(--cible-min);
  margin-inline-start: auto;
  background: var(--c-field);
  border: 0;
  border-radius: var(--rayon-pill);
  cursor: pointer;
}
.feuille__corps { padding: 0 var(--espace-s6) var(--espace-s6); }

.apercu { display: grid; gap: var(--espace-s1); }
.apercu__ligne {
  display: flex;
  align-items: center;
  gap: var(--espace-s3);
  min-height: var(--cible-min);
  padding: var(--espace-s2) 0;
  border-bottom: 1px solid var(--c-borderSubtle);
}
.apercu__ligne:last-child { border-bottom: 0; }
.apercu__vignette {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--rayon-thumbnail);
  object-fit: cover;
}
.apercu__vignette--lettre {
  display: grid;
  place-items: center;
  background: var(--teinte);
  color: var(--marque-ivory);
  font-weight: 700;
}
.apercu__texte { display: grid; min-width: 0; }
.apercu__titre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apercu__detail { color: var(--c-textSecondary); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apercu__quand { margin-inline-start: auto; color: var(--c-textSecondary); font-size: 13px; white-space: nowrap; }
.apercu__vide, .apercu__reste { color: var(--c-textSecondary); font-size: 14px; }
.apercu__reste { margin-top: var(--espace-s4); }

/* ============================================================= petits écrans

   Sous 900 px, la page s'empile. Les illustrations gardent leur composition
   exacte : seule leur unité --u change pour tenir dans la largeur. */

@media (max-width: 900px) {
  .cadre { width: calc(100% - 2 * var(--espace-s5)); }

  .entete__interieur { height: 64px; }
  .marque__logo { height: 40px; }
  .nav, .entete__actions { display: none; }
  .burger { display: inline-flex; }

  .heros__interieur { display: flex; flex-direction: column; min-height: 0; }
  .heros__texte { width: auto; padding-block: var(--espace-s8) 0; }
  .heros__titre { font-size: clamp(40px, 7vw, 56px); line-height: 1.05; }
  .heros__promesse { margin-top: var(--espace-s2); font-size: clamp(20px, 3.4vw, 28px); line-height: 1.25; }
  .heros__detail { margin-top: var(--espace-s3); font-size: 18px; line-height: 1.35; }
  .recherche--heros {
    margin-top: var(--espace-s6);
    height: 56px;
    padding-inline: var(--espace-s4) var(--espace-s1);
  }
  .recherche--heros .recherche__loupe { width: 22px; height: 22px; }
  .recherche--heros .recherche__champ { margin-inline-start: var(--espace-s3); font-size: 16px; }
  .recherche--heros .recherche__valider { height: 48px; width: auto; padding-inline: var(--espace-s5); font-size: 16px; }

  .scene {
    --u: min(1.25px, calc((100vw - 40px) / 420));
    position: relative;
    left: auto;
    align-self: center;
    margin-top: var(--espace-s8);
  }
  /* Sur un téléphone, la scène touche les bords : les notifications restent dedans. */
  .notif--1 { --x: 0; }
  .notif--2, .notif--3 { --x: 206; }

  .section--featured { padding-top: var(--espace-s8); }
  .section--collections { padding-block: var(--espace-s8) var(--espace-s10); }
  .section__titre { margin-bottom: var(--espace-s4); font-size: 26px; }

  .featured { grid-template-columns: minmax(0, 1fr); border-radius: var(--rayon-thumbnail); }
  .featured__visuel { aspect-ratio: 16 / 9; }
  .featured__corps { padding: var(--espace-s5); }
  .featured__titre { font-size: 26px; }
  .featured__accroche { margin-top: var(--espace-s1); font-size: 18px; }
  .featured__pied { margin-top: var(--espace-s4); }
  .featured__dates { gap: var(--espace-s2); font-size: 16px; }
  .featured__dates .icone { width: 20px; height: 20px; }
  .featured .bouton { height: 48px; width: auto; padding-inline: var(--espace-s5); font-size: 16px; }

  .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-s4); }
  .carte { border-radius: var(--rayon-thumbnail); }
  .carte__corps { padding: var(--espace-s3) var(--espace-s4) var(--espace-s3); }
  .carte__titre { font-size: 18px; }
  .carte__compte { font-size: 15px; }
  .lien-action { margin-top: var(--espace-s1); font-size: 15px; }

  .comment {
    --u: min(1.25px, calc((100vw - 80px) / 270));
    margin-inline: 0;
    padding: var(--espace-s6) var(--espace-s5);
    border-radius: var(--rayon-feature);
  }
  .comment .section__titre { margin-bottom: var(--espace-s5); }
  .etapes__liste { grid-template-columns: minmax(0, 1fr); gap: var(--espace-s8); }
  .etape { display: flex; flex-direction: column; align-items: center; }
  .etape__scene { width: calc(268 * var(--u)); }
  .etape__legende { margin-top: var(--espace-s3); font-size: 16px; }
  .etape--1 .etape__legende,
  .etape--2 .etape__legende,
  .etape--3 .etape__legende { transform: none; }
  .fleche { display: none; }
  .comment__pied { margin-top: var(--espace-s8); padding-top: var(--espace-s6); gap: var(--espace-s4); }
  .comment__accroche { width: 100%; text-align: center; font-size: 17px; }
  .magasins--grand img { height: 48px; }

  .pied { padding-block: var(--espace-s8); }
  .pied__interieur { flex-direction: column; align-items: flex-start; }
  .pied__liens { gap: 0 var(--espace-s6); }
}

@media (max-width: 560px) {
  .cadre { width: calc(100% - 2 * var(--espace-s4)); }
  .grille { grid-template-columns: minmax(0, 1fr); }
  .recherche--heros .recherche__valider { padding-inline: var(--espace-s4); }
}

/* ------------------------------------------------------- mouvement réduit */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
}

/* ============================================================= page prénom

   Relevé de la maquette de la page prénom (1092 px de large, contenu de
   1005 px). --p vaut 1 px de cette maquette : 1,1343 px de la page de 1280. */

.page-prenom,
.page-competition { --p: calc(1.1343 * var(--vu)); }
.page-prenom .pied,
.page-competition .pied { margin-top: calc(29.5 * var(--vu)); border-top: 1px solid var(--c-borderSubtle); }

/* ------------------------------------------------------------ fil d'Ariane */

.ariane { padding-top: calc(18.7 * var(--vu)); }
.ariane ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: max(14px, calc(18.5 * var(--vu)));
  line-height: 1.2;
}
.ariane li { display: inline-flex; align-items: center; }
.ariane li + li::before {
  content: '/';
  margin-inline: calc(15.9 * var(--vu));
  color: var(--c-textSecondary);
}
.ariane a { color: var(--c-primaryText); text-decoration: none; }
.ariane a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ariane [aria-current] { color: var(--c-textPrimary); font-weight: 600; }

/* ------------------------------------------------------------------ haut */

.prenom {
  display: grid;
  grid-template-columns: calc(388 * var(--p)) minmax(0, 1fr);
  column-gap: calc(33 * var(--p));
  align-items: start;
  margin-top: calc(28.3 * var(--vu));
}

/* Le visuel : la lettre du prénom (texte) sur le décor de la maquette. */
/* Le cadre descend jusqu'au bas de « Prochaine fête » ; la composition de
   402 px de la maquette reste entière, centrée dans la hauteur. */
.prenom__visuel {
  position: relative;
  align-self: stretch;
  min-height: calc(402 * var(--p));
  overflow: hidden;
  background: var(--c-selected);
  border-radius: calc(20 * var(--p));
}
.prenom__lettre {
  position: absolute;
  inset-inline: 0;
  top: calc(50% - 194.2 * var(--p));
  color: var(--marque-turquoise);
  font-size: calc(346.3 * var(--p));
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transform: translateX(calc(3.2 * var(--p)));
}
.prenom__decor { position: absolute; inset-inline: 0; top: calc(50% - 201 * var(--p)); width: 100%; height: calc(402 * var(--p)); }

.prenom__infos { padding-top: calc(16.2 * var(--vu)); }
.prenom__titre {
  margin-top: calc(14.4 * var(--vu));
  font-size: calc(65.5 * var(--vu));
  font-weight: 700;
  line-height: 1.1;
}
.prenom__phrase { margin-top: calc(7.3 * var(--vu)); font-size: calc(28.5 * var(--vu)); line-height: 1.3; }
.prenom__rythme { margin-top: calc(1.7 * var(--vu)); color: var(--c-textSecondary); font-size: calc(21 * var(--vu)); line-height: 1.3; }

.prenom__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-s3) calc(38 * var(--p));
  margin-top: calc(27.3 * var(--vu));
}
.prenom__rappel {
  gap: calc(18 * var(--p));
  width: calc(354 * var(--p));
  height: calc(54 * var(--p));
  min-height: var(--cible-min);
  border-radius: calc(12 * var(--p));
  font-size: calc(22.4 * var(--vu));
}
.prenom__rappel .icone { width: calc(27 * var(--p)); height: calc(27 * var(--p)); }
.prenom__partager {
  display: inline-flex;
  align-items: center;
  gap: calc(18 * var(--p));
  min-height: var(--cible-min);
  padding: 0;
  background: none;
  border: 0;
  color: var(--c-primaryText);
  font-size: calc(21 * var(--vu));
  cursor: pointer;
}
.prenom__partager .icone { width: calc(21 * var(--p)); height: calc(21 * var(--p)); }
.prenom__partager-texte { text-decoration: underline; text-underline-offset: 3px; }

/* La prochaine fête. */
.prochaine {
  display: flex;
  align-items: flex-start;
  min-height: calc(153 * var(--p));
  margin-top: calc(24 * var(--p));
  padding: 0 calc(20 * var(--p)) calc(20 * var(--p)) calc(26 * var(--p));
  background: var(--c-selected);
  border-radius: calc(16 * var(--p));
}
.prochaine__rond {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(94 * var(--p));
  height: calc(94 * var(--p));
  margin-top: calc(22 * var(--p));
  border-radius: 50%;
  background: color-mix(in srgb, var(--marque-turquoise) 22%, var(--c-surface));
  color: var(--marque-turquoise);
}
.prochaine__rond .icone { width: calc(50 * var(--p)); height: calc(50 * var(--p)); }
.prochaine__texte { margin-inline-start: calc(23 * var(--p)); padding-top: calc(23.5 * var(--vu)); }
.prochaine__date { margin-top: calc(7 * var(--vu)); font-size: calc(59.5 * var(--vu)); font-weight: 700; line-height: 1.1; }
.prochaine__rappel {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--p));
  margin-top: calc(10.9 * var(--vu));
  font-size: calc(22 * var(--vu));
  line-height: 1.3;
}
.prochaine__rappel .icone { width: calc(24 * var(--p)); height: calc(24 * var(--p)); }

.separateur {
  height: 0;
  margin: calc(34 * var(--vu)) 0 0;
  border: 0;
  border-top: 1px solid var(--c-borderSubtle);
}

/* ---------------------------------------------------------------- origine */

.origine { padding-top: calc(27.7 * var(--vu)); }
.origine__titre { font-size: calc(43 * var(--vu)); font-weight: 700; line-height: 1.15; }
.origine__corps { display: flex; gap: calc(26 * var(--p)); margin-top: calc(21.5 * var(--vu)); }
.origine__rond {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(113 * var(--p));
  height: calc(112 * var(--p));
  border-radius: 50%;
  background: color-mix(in srgb, var(--marque-turquoise) 18%, var(--c-surface));
  color: var(--marque-turquoise);
}
.origine__rond .icone { width: calc(58 * var(--p)); height: calc(48 * var(--p)); }
.origine__texte { margin-top: calc(-2.5 * var(--vu)); }
.origine__sous-titre { font-size: calc(29.6 * var(--vu)); font-weight: 700; line-height: 1.2; }
.origine__paragraphe {
  max-width: calc(640 * var(--p));
  margin-top: calc(7.6 * var(--vu));
  font-size: calc(28 * var(--vu));
  line-height: calc(32.3 * var(--vu));
}
.origine__source { margin-top: calc(14.9 * var(--vu)); font-size: calc(21 * var(--vu)); line-height: 1.2; }
.origine__source a {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--p));
  color: var(--c-primaryText);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.origine__source .icone { width: calc(20 * var(--p)); height: calc(20 * var(--p)); }

/* ------------------------------------------------------------------ promo */

.separateur + .promo-section { margin-top: calc(34 * var(--vu)); }
.origine + .promo-section { margin-top: calc(23.7 * var(--vu)); }

/* Le bandeau déborde le cadre de 13 px de maquette de chaque côté. */
.promo {
  position: relative;
  height: calc(263 * var(--p));
  margin-inline: calc(-13 * var(--p));
  background: var(--c-selected);
  border-radius: calc(10 * var(--p));
}
.promo__texte { position: relative; z-index: 1; padding: calc(25.5 * var(--vu)) 0 0 calc(36 * var(--p)); }
.promo__titre { font-size: calc(43 * var(--vu)); font-weight: 700; line-height: 1.15; }
.promo__liste { margin-top: calc(5.9 * var(--vu)); font-size: calc(27.2 * var(--vu)); line-height: calc(32.9 * var(--vu)); }
.promo__detail { margin-top: calc(12.6 * var(--vu)); font-size: calc(22.7 * var(--vu)); line-height: 1.3; }
/* Badges officiels : leur format ne se déforme pas, seule leur hauteur suit la maquette. */
.magasins--promo { gap: calc(15 * var(--p)); margin-top: calc(18.8 * var(--vu)); }
.magasins--promo img { height: calc(50 * var(--p)); }

.promo__scene {
  position: absolute;
  left: calc(599 * var(--p));
  top: 0;
  width: calc(432 * var(--p));
  height: calc(264 * var(--p));
}
.promo__objets { width: 100%; height: 100%; }
.promo__notif {
  position: absolute;
  left: calc(164.5 * var(--p));
  top: calc(161.75 * var(--p));
  width: calc(224 * var(--p));
  height: calc(78 * var(--p));
  background: var(--c-surface);
  border-radius: calc(10 * var(--p));
  box-shadow: 0 calc(8 * var(--p)) calc(18 * var(--p)) calc(-6 * var(--p)) color-mix(in srgb, var(--marque-ink) 30%, transparent);
  transform: rotate(-6deg);
}
.promo__appli {
  position: absolute;
  left: calc(11.7 * var(--p));
  top: calc(11 * var(--p));
  width: calc(44 * var(--p));
  height: calc(44 * var(--p));
  border-radius: calc(10 * var(--p));
}
.promo__notif-texte { position: absolute; left: calc(68 * var(--p)); top: calc(6 * var(--p)); display: grid; }
.promo__source { color: var(--c-primaryText); font-size: calc(15.3 * var(--p)); line-height: calc(17 * var(--p)); }
.promo__message {
  margin-top: calc(5.5 * var(--p));
  color: var(--c-textPrimary);
  font-size: calc(16.3 * var(--p));
  font-weight: 700;
  line-height: calc(22.1 * var(--p));
  white-space: nowrap;
}

/* ---------------------------------------------------- un autre prénom ? */

.autre { margin-top: calc(15 * var(--p)); }
.autre__bloc {
  position: relative;
  min-height: calc(224 * var(--p));
  padding: calc(22.8 * var(--vu)) calc(35 * var(--p)) calc(32.2 * var(--vu));
  background: var(--c-selected);
  border-radius: calc(16 * var(--p));
}
.autre__titre { font-size: calc(35.5 * var(--vu)); font-weight: 700; line-height: 1.15; }
.autre__texte { margin-top: calc(3.6 * var(--vu)); font-size: calc(23.4 * var(--vu)); line-height: 1.3; }

.recherche--bloc {
  z-index: 2;
  width: calc(823 * var(--p));
  max-width: 100%;
  height: calc(56 * var(--p));
  min-height: 52px;
  margin: calc(17 * var(--vu)) 0 0 calc(-2 * var(--p));
  padding-inline: calc(22 * var(--p)) calc(7 * var(--p));
  border: 1px solid var(--c-borderSubtle);
}
.recherche--bloc:focus-within { border-color: var(--marque-turquoise); box-shadow: 0 0 0 1px var(--marque-turquoise); }
.recherche--bloc .recherche__loupe { width: calc(30 * var(--p)); height: calc(30 * var(--p)); }
.recherche--bloc .recherche__champ { margin-inline-start: calc(15 * var(--p)); font-size: max(16px, calc(20.7 * var(--vu))); }
.recherche--bloc .recherche__valider {
  width: calc(189 * var(--p));
  height: calc(45 * var(--p));
  min-height: 44px;
  font-size: max(15px, calc(20 * var(--vu)));
}
.recherche__effacer .icone { width: 26px; height: 26px; }
.recherche__effacer { margin-inline-end: 7.5px; }

.autre__liens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-s2) calc(28 * var(--p));
  margin-top: calc(17.9 * var(--vu));
  font-size: calc(21.5 * var(--vu));
  line-height: 1.2;
}
.autre__liens a {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--p));
  color: var(--c-primaryText);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.autre__liens .icone { width: calc(20 * var(--p)); height: calc(20 * var(--p)); }
.autre__barre { width: 1px; height: calc(21 * var(--p)); background: var(--c-borderControl); }
.autre__fleur {
  position: absolute;
  left: calc(861 * var(--p));
  top: calc(45 * var(--p));
  width: calc(141 * var(--p));
  height: auto;
  pointer-events: none;
}

/* ============================================ petits écrans : page prénom */

@media (max-width: 900px) {
  .page-prenom,
  .page-competition { --p: calc((100vw - 40px) / 1005); }
  .ariane { padding-top: var(--espace-s5); }
  .ariane ol { font-size: 15px; }
  .ariane li + li::before { margin-inline: 8px; }

  .prenom { grid-template-columns: minmax(0, 1fr); row-gap: var(--espace-s6); margin-top: var(--espace-s5); }
  .prenom__visuel {
    --p: calc(min(100vw - 40px, 440px) / 388);
    justify-self: center;
    width: calc(388 * var(--p));
    height: calc(402 * var(--p));
  }
  .prenom__infos { padding-top: 0; }
  .prenom__titre { margin-top: var(--espace-s2); font-size: clamp(34px, 8vw, 52px); }
  .prenom__phrase { margin-top: var(--espace-s2); font-size: 20px; }
  .prenom__rythme { font-size: 17px; }
  .prenom__actions { margin-top: var(--espace-s5); }
  .prenom__rappel { width: 100%; height: 52px; border-radius: var(--rayon-control); font-size: 17px; }
  .prenom__rappel .icone { width: 22px; height: 22px; }
  .prenom__partager { font-size: 17px; }
  .prenom__partager .icone { width: 20px; height: 20px; }

  .prochaine { min-height: 0; margin-top: var(--espace-s5); padding: var(--espace-s4); border-radius: var(--rayon-card); }
  .prochaine__rond { width: 64px; height: 64px; margin-top: 0; }
  .prochaine__rond .icone { width: 32px; height: 32px; }
  .prochaine__texte { margin-inline-start: var(--espace-s4); padding-top: 0; }
  .prochaine__date { margin-top: var(--espace-s1); font-size: clamp(28px, 7vw, 40px); }
  .prochaine__rappel { margin-top: var(--espace-s2); gap: var(--espace-s2); font-size: 16px; }
  .prochaine__rappel .icone { width: 18px; height: 18px; }

  .separateur { margin-top: var(--espace-s8); }
  .origine { padding-top: var(--espace-s6); }
  .origine__titre { font-size: 26px; }
  .origine__corps { gap: var(--espace-s4); margin-top: var(--espace-s4); }
  .origine__rond { width: 64px; height: 64px; }
  .origine__rond .icone { width: 32px; height: 28px; }
  .origine__texte { margin-top: 0; }
  .origine__sous-titre { font-size: 20px; }
  .origine__paragraphe { margin-top: var(--espace-s1); font-size: 17px; line-height: 1.45; }
  .origine__source { margin-top: var(--espace-s2); font-size: 15px; }
  .origine__source .icone { width: 16px; height: 16px; }

  .separateur + .promo-section,
  .origine + .promo-section { margin-top: var(--espace-s8); }
  .promo { height: auto; margin-inline: 0; padding-bottom: var(--espace-s5); border-radius: var(--rayon-feature); }
  .promo__texte { padding: var(--espace-s6) var(--espace-s5) 0; }
  .promo__titre { font-size: 26px; }
  .promo__liste { margin-top: var(--espace-s2); font-size: 18px; line-height: 1.35; }
  .promo__liste br { display: none; }
  .promo__detail { margin-top: var(--espace-s2); font-size: 16px; }
  .magasins--promo { margin-top: var(--espace-s4); gap: var(--espace-s3); }
  .magasins--promo img { height: 44px; }
  .promo__scene {
    --p: calc(min(100vw - 80px, 432px) / 432);
    position: relative;
    left: auto;
    margin: var(--espace-s4) auto 0;
  }

  .autre { margin-top: var(--espace-s5); }
  .autre__bloc { min-height: 0; padding: var(--espace-s6) var(--espace-s5); border-radius: var(--rayon-feature); }
  .autre__titre { font-size: 24px; }
  .autre__texte { margin-top: var(--espace-s1); font-size: 16px; }
  .recherche--bloc { width: 100%; height: 56px; margin: var(--espace-s4) 0 0; padding-inline: var(--espace-s4) var(--espace-s1); }
  .recherche--bloc .recherche__loupe { width: 22px; height: 22px; }
  .recherche--bloc .recherche__champ { margin-inline-start: var(--espace-s3); font-size: 16px; }
  .recherche--bloc .recherche__valider { width: auto; height: 48px; padding-inline: var(--espace-s5); font-size: 16px; }
  .autre__liens { margin-top: var(--espace-s4); font-size: 16px; }
  .autre__liens .icone { width: 16px; height: 16px; }
  .autre__barre { height: 18px; }
  .autre__fleur { display: none; }
}

/* ================================== liste de suggestions : variante mobile */

@media (max-width: 560px) {
  .liste { top: calc(100% + 7px); padding: 10.5px 0 14px; border-radius: 16px; }
  .liste__intitule { padding-inline: 15.8px; }
  .liste__intitule + .liste__option { margin-top: 12px; }
  .liste__option { min-height: 62.3px; margin-inline: 7.2px; padding-inline: 7.9px 7.5px; border-radius: 11px; }
  .liste__avatar { width: 48px; height: 48px; font-size: 30.7px; }
  .liste__texte { gap: 1px; margin-inline-start: 19px; padding-bottom: 2px; }
  .liste__titre { font-size: 18px; }
  .liste__detail { font-size: 15.1px; }
  .liste__pastille { height: 28.6px; padding-inline: 12px; font-size: 12.4px; }
  .liste__chevron { width: 22px; height: 22px; margin-inline-start: 30px; }
  .liste__tout { gap: 13.6px; min-height: 45.8px; margin: 9.3px 7px 0; font-size: 15.6px; }
  .liste__tout-loupe { width: 25px; height: 25px; }
  .liste__aides { gap: 20px; margin-top: 10.5px; font-size: 13.3px; }
  .recherche__effacer { width: 36px; height: 36px; margin-inline-end: 4px; }
  .recherche__effacer .icone { width: 22px; height: 22px; }
}

/* ================================== calendrier des prénoms et pages lettre

   Relevé des maquettes « Calendrier » et « Prénoms en M » (1024 px de large,
   contenu de 934 px). --m vaut 1 px de ces maquettes : 1,2206 px de la page
   de 1280. */

.page-prenoms,
.page-lettre { --m: calc(1.2206 * var(--vu)); --p: calc(1.1343 * var(--vu)); }
.page-prenoms .pied,
.page-lettre .pied { border-top: 1px solid var(--c-borderSubtle); }

.calendrier__titre,
.a-z__titre {
  font-size: calc(35.7 * var(--vu));
  font-weight: 700;
  line-height: 1.15;
}
.calendrier__titre:focus { outline: none; }
.calendrier__sous-titre {
  margin-top: calc(9 * var(--m));
  color: var(--c-textSecondary);
  font-size: calc(21.5 * var(--vu));
  line-height: 1.3;
}
.calendrier__sous-titre--accent { color: var(--c-primaryText); }

/* ----------------------------------------------------------------- en-tête */

.calendrier-tete { margin-top: calc(13 * var(--m)); }
.calendrier-tete__bloc {
  display: grid;
  grid-template-columns: calc(164 * var(--m)) minmax(0, 1fr);
  column-gap: calc(27 * var(--m));
  align-items: center;
  margin-inline: calc(-4 * var(--m));
  padding: calc(17 * var(--m)) calc(18 * var(--m)) calc(23 * var(--m));
  background: var(--c-selected);
  border-radius: calc(12 * var(--m));
}
/* Sans image, le texte prend toute la largeur. */
.calendrier-tete__bloc:not(:has(> .calendrier-tete__image)) { grid-template-columns: minmax(0, 1fr); }
/* Le visuel servi est carré (square) : un cadre carré, rien n'est coupé. */
.calendrier-tete__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(10 * var(--m));
}
.calendrier-tete__collection { font-size: calc(24.1 * var(--vu)); font-weight: 700; line-height: 1.2; }
.calendrier-tete__titre { margin-top: calc(2 * var(--m)); font-size: calc(58.8 * var(--vu)); font-weight: 700; line-height: 1.1; }
.calendrier-tete__phrase { margin-top: calc(6 * var(--m)); font-size: calc(23 * var(--vu)); line-height: 1.3; }
.calendrier-tete__compte { margin-top: calc(4 * var(--m)); font-size: calc(22 * var(--vu)); line-height: 1.3; }

.recherche--tete {
  grid-column: 1 / -1;
  width: 100%;
  height: calc(40 * var(--m));
  min-height: 48px;
  margin: calc(14 * var(--m)) 0 0;
  padding-inline: calc(17 * var(--m)) calc(3 * var(--m));
}
.recherche--tete .recherche__loupe { width: calc(24 * var(--m)); height: calc(24 * var(--m)); }
.recherche--tete .recherche__champ { margin-inline-start: calc(16 * var(--m)); }
.recherche--tete .recherche__valider { width: calc(178 * var(--m)); height: calc(36 * var(--m)); min-height: 40px; }

/* --------------------------------------------------- aujourd'hui, à venir */

.calendrier {
  display: grid;
  grid-template-columns: minmax(0, 642fr) minmax(0, 262fr);
  column-gap: calc(32 * var(--m));
  align-items: start;
  margin-top: calc(20 * var(--m));
}
.calendrier__principal { display: grid; row-gap: calc(22 * var(--m)); }
.calendrier__jours { display: grid; row-gap: calc(11 * var(--m)); margin-top: calc(15 * var(--m)); }

.jour {
  display: grid;
  grid-template-columns: calc(128 * var(--m)) minmax(0, 1fr);
  min-height: calc(84 * var(--m));
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-borderSubtle);
  border-radius: calc(8 * var(--m));
}
.jour__date { background: color-mix(in srgb, var(--c-selected) 55%, var(--c-surface)); }
.jour__date time {
  display: grid;
  place-content: center;
  justify-items: center;
  height: 100%;
  padding-block: calc(6 * var(--m));
  text-align: center;
}
.jour__etiquette { color: var(--marque-turquoise); font-size: calc(20.6 * var(--vu)); font-weight: 700; line-height: 1.1; }
/* Sans « Aujourd'hui » ni « Demain », le jour de la semaine (« MER. », tuile unique du 08-10-2026). */
.jour__semaine { color: var(--c-textSecondary); font-size: calc(20.6 * var(--vu)); font-weight: 600; line-height: 1.1; }
.jour__numero { font-size: calc(52 * var(--vu)); font-weight: 700; line-height: 1; }
.jour__mois { margin-top: calc(3 * var(--m)); font-size: calc(17.9 * var(--vu)); font-weight: 400; line-height: 1.2; }
.jour--aujourdhui .jour__mois { margin-top: calc(2 * var(--m)); }

.jour__liste { display: grid; padding-inline: calc(13 * var(--m)) calc(12 * var(--m)); }
.jour__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-s3);
  min-height: calc(38 * var(--m));
}
.jour__ligne + .jour__ligne { border-top: 1px solid var(--c-borderSubtle); }
.jour__prenom {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--m));
  min-height: 40px;
  color: var(--c-primaryText);
  font-size: calc(19.6 * var(--vu));
  font-weight: 700;
  text-decoration: none;
}
.jour__prenom:hover { text-decoration: underline; text-underline-offset: 3px; }
.jour__prenom .icone { width: calc(13 * var(--m)); height: calc(13 * var(--m)); color: var(--c-textPrimary); }
.jour__rappel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: calc(8 * var(--m));
  width: calc(122 * var(--m));
  height: calc(31 * var(--m));
  min-height: 36px;
  border: 1.5px solid var(--marque-turquoise);
  border-radius: calc(8 * var(--m));
  color: var(--c-primaryText);
  font-size: calc(14.5 * var(--vu));
  text-decoration: none;
  white-space: nowrap;
}
.jour__rappel:hover { background: var(--c-selected); }
.jour__rappel .icone { width: calc(16 * var(--m)); height: calc(16 * var(--m)); }
.jour__aucun {
  padding: var(--espace-s5);
  background: var(--c-surface);
  border: 1px solid var(--c-borderSubtle);
  border-radius: calc(8 * var(--m));
  color: var(--c-textSecondary);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(9 * var(--m));
  margin-top: calc(-3 * var(--m));
}
.pagination__courante,
.pagination__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--m));
  height: calc(37 * var(--m));
  min-height: 44px;
  padding-inline: calc(24 * var(--m));
  border-radius: var(--rayon-pill);
  font-size: calc(17 * var(--vu));
  line-height: 1;
}
.pagination__courante { background: var(--marque-ink); color: var(--marque-ivory); font-weight: 500; }
.pagination__bouton { border: 1px solid var(--c-borderSubtle); color: var(--c-primaryText); text-decoration: none; }
.pagination__bouton:hover { border-color: var(--c-borderControl); }
.pagination__bouton .icone { width: calc(18 * var(--m)); height: calc(18 * var(--m)); }
.pagination__retour { transform: scaleX(-1); }

/* ------------------------------------------------ une petite attention */

/* La colonne des jours est plus haute que l'encart : il l'accompagne au défilement,
   sous l'en-tête collant. */
.attention {
  position: sticky;
  top: calc(max(60px, calc(70 * var(--vu))) + var(--espace-s5));
  display: grid;
  justify-items: start;
  align-content: start;
  min-height: calc(553 * var(--m));
  padding: calc(15 * var(--m)) calc(14 * var(--m)) calc(70 * var(--m)) calc(20 * var(--m));
  background: var(--c-selected);
  border-radius: calc(12 * var(--m));
}
.attention__titre { font-size: calc(32.5 * var(--vu)); font-weight: 700; line-height: 1.1; }
.attention__texte { margin-top: calc(12 * var(--m)); font-size: calc(22 * var(--vu)); line-height: 1.3; }
.attention__texte--bas { margin-top: calc(10 * var(--m)); }

/* La scène : le haut du téléphone des fiches qui reçoit la notification, un cœur
   (coordonnées en --m). Le nom tient sur deux lignes, « … » au-delà (demande de David du 08-10). */
.attention__scene { position: relative; width: 100%; height: calc(160 * var(--m)); }
.attention .fiche-telephone { --u: calc(1.2 * var(--m)); margin: calc(8 * var(--m)) 0 0 calc(10 * var(--m)); }
.attention .telephone-etape__titre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* La notif tombe dans l'écran quand le téléphone entre à l'écran (app.js), comme celles de l'accueil. */
@media (prefers-reduced-motion: no-preference) {
  [data-notif-arrive].est-attendue .telephone-etape__notif { opacity: 0; }
  [data-notif-arrive].est-arrivee .telephone-etape__notif { --r: 0deg; animation: notif-arrive 700ms cubic-bezier(0.2, 1.35, 0.45, 1) 300ms both; }
}

/* La notification inclinée de la bande « proches » (pages lettre). */
.attention__notif {
  position: absolute;
  left: calc(8 * var(--m));
  top: calc(40 * var(--m));
  width: calc(213 * var(--m));
  height: calc(62 * var(--m));
  background: var(--c-surface);
  border-radius: calc(9 * var(--m));
  box-shadow: 0 calc(8 * var(--m)) calc(18 * var(--m)) calc(-6 * var(--m)) color-mix(in srgb, var(--marque-ink) 30%, transparent);
  transform: rotate(-5deg);
}
.attention__appli {
  position: absolute;
  left: calc(12 * var(--m));
  top: calc(13 * var(--m));
  width: calc(38 * var(--m));
  height: calc(38 * var(--m));
  border-radius: calc(9 * var(--m));
}
/* Le message tient dans la carte : deux lignes au plus, « … » au-delà (demande de David du 08-10). */
.attention__notif-texte { position: absolute; inset: 0 calc(12 * var(--m)) 0 calc(60 * var(--m)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.attention__source { color: var(--c-primaryText); font-size: calc(14 * var(--m)); line-height: 1.2; }
.attention__message { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: calc(3 * var(--m)); color: var(--c-textPrimary); font-size: calc(14 * var(--m)); font-weight: 700; line-height: 1.15; }

.coeur { position: absolute; fill: color-mix(in srgb, var(--marque-turquoise) 45%, var(--c-surface)); }
.coeur--1 { right: calc(16 * var(--m)); bottom: calc(-6 * var(--m)); width: calc(44 * var(--m)); height: calc(40 * var(--m)); }
.coeur--2 { right: calc(18 * var(--m)); bottom: calc(10 * var(--m)); width: calc(54 * var(--m)); height: calc(50 * var(--m)); }

.magasins--colonne { flex-direction: column; align-items: flex-start; gap: calc(12 * var(--m)); margin-top: calc(22 * var(--m)); margin-inline-start: calc(23 * var(--m)); }
.magasins--colonne img { height: calc(50 * var(--m)); }

/* ---------------------------------------------------------------- A à Z */

.page-prenoms .separateur { margin-top: calc(66 * var(--m)); }
.a-z { padding-top: calc(24 * var(--m)); padding-bottom: calc(42 * var(--m)); }
.a-z__lettres {
  display: flex;
  justify-content: space-between;
  margin-top: calc(14 * var(--m));
  padding-inline: calc(1 * var(--m));
}
.a-z__lettre {
  display: grid;
  place-items: center;
  width: calc(33 * var(--m));
  height: calc(33 * var(--m));
  min-width: 24px;
  min-height: 32px;
  border-radius: calc(6 * var(--m));
  color: var(--c-primaryText);
  font-size: calc(22 * var(--vu));
  text-decoration: none;
}
.a-z__lettre:hover { background: var(--c-selected); }
.a-z__lettre[aria-selected='true'],
.a-z__lettre[aria-current] { background: var(--marque-turquoise); color: var(--c-onPrimary); font-weight: 600; }

.lettre { margin-top: calc(28 * var(--m)); }
.lettre[hidden] { display: none; }
.lettre__titre { font-size: calc(33.2 * var(--vu)); font-weight: 700; line-height: 1.2; }
.lettre__noms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--espace-s2) var(--espace-s5);
  margin-top: calc(16 * var(--m));
}
.lettre__noms a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--c-primaryText);
  font-size: calc(24 * var(--vu));
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lettre__tout {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--m));
  margin-top: calc(24 * var(--m));
  min-height: 32px;
  color: var(--c-primaryText);
  font-size: calc(21.2 * var(--vu));
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lettre__tout .icone { width: calc(18 * var(--m)); height: calc(18 * var(--m)); }

/* ------------------------------------------------------ page d'une lettre */

.lettre-tete { margin-top: calc(14 * var(--m)); }
.lettre-tete__bloc {
  display: grid;
  grid-template-columns: calc(137 * var(--m)) minmax(0, 1fr);
  column-gap: calc(29 * var(--m));
  align-items: center;
  margin-inline: calc(-4 * var(--m));
  padding: calc(17 * var(--m)) calc(20 * var(--m)) calc(20 * var(--m)) calc(23 * var(--m));
  background: var(--c-selected);
  border-radius: calc(12 * var(--m));
}
.lettre-tete__tuile {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--marque-turquoise) 26%, var(--c-surface));
  border-radius: calc(16 * var(--m));
  color: var(--marque-turquoise);
  font-size: calc(110 * var(--m));
  font-weight: 700;
  line-height: 1;
}
.lettre-tete__titre { font-size: calc(64 * var(--vu)); font-weight: 700; line-height: 1.05; }
.lettre-tete__phrase { margin-top: calc(8 * var(--m)); font-size: calc(23.5 * var(--vu)); line-height: 1.3; }
.lettre-tete .recherche--tete { margin-top: calc(16 * var(--m)); height: calc(41 * var(--m)); }

.a-z__lettres--liens { margin-top: calc(17 * var(--m)); }

.liste-lettre { margin-top: calc(26 * var(--m)); }
.liste-lettre__colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(38 * var(--m));
  margin-top: calc(8 * var(--m));
}
.liste-lettre__colonne { padding: 0; list-style: none; }
.liste-lettre__ligne {
  display: grid;
  grid-template-columns: calc(52 * var(--m)) minmax(0, 1fr) auto;
  align-items: center;
  min-height: calc(59.7 * var(--m));
  border-bottom: 1px solid var(--c-borderSubtle);
}
.liste-lettre__rang {
  padding-inline-start: calc(2 * var(--m));
  color: var(--c-textSecondary);
  font-size: calc(19 * var(--vu));
}
.liste-lettre__texte { display: grid; }
.liste-lettre__prenom {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--m));
  justify-self: start;
  color: var(--c-primaryText);
  font-size: calc(24.5 * var(--vu));
  font-weight: 700;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.liste-lettre__prenom .icone { width: calc(16 * var(--m)); height: calc(16 * var(--m)); color: var(--c-textPrimary); }
.liste-lettre__date { color: var(--c-textSecondary); font-size: calc(19.5 * var(--vu)); line-height: 1.3; }
.liste-lettre__rappel {
  display: grid;
  place-items: center;
  width: calc(48 * var(--m));
  height: calc(40 * var(--m));
  min-width: 44px;
  min-height: 40px;
  border: 1.5px solid var(--marque-turquoise);
  border-radius: calc(6 * var(--m));
  color: var(--c-primaryText);
}
.liste-lettre__rappel:hover { background: var(--c-selected); }
/* Ligne ouverte depuis la recherche : repérée, sous l'en-tête collant. */
.liste-lettre__ligne { scroll-margin-top: 96px; }
.liste-lettre__ligne:target { background: var(--c-selected); }
.liste-lettre__rappel .icone { width: calc(22 * var(--m)); height: calc(22 * var(--m)); }

.pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(9 * var(--m));
  margin-top: calc(18 * var(--m));
}
.pages__numero,
.pages__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--m));
  min-width: calc(40 * var(--m));
  height: calc(40 * var(--m));
  min-height: 40px;
  border: 1px solid var(--c-borderSubtle);
  border-radius: calc(8 * var(--m));
  color: var(--c-primaryText);
  font-size: calc(19.5 * var(--vu));
  text-decoration: none;
}
.pages__numero { min-width: 40px; }
.pages__numero--courant { background: var(--marque-ink); border-color: var(--marque-ink); color: var(--marque-ivory); }
.pages__bouton { padding-inline: calc(17 * var(--m)); border-radius: var(--rayon-pill); }
.pages__numero:hover,
.pages__bouton:hover { border-color: var(--c-borderControl); }
.pages__bouton .icone { width: calc(18 * var(--m)); height: calc(18 * var(--m)); }

/* Les fêtes de tes proches. */
.proches { margin-top: calc(26 * var(--m)); padding-bottom: calc(30 * var(--m)); }
.proches__bloc {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(290 * var(--m)) auto;
  align-items: center;
  column-gap: calc(24 * var(--m));
  min-height: calc(153 * var(--m));
  margin-inline: calc(-4 * var(--m));
  padding: calc(18 * var(--m)) calc(26 * var(--m)) calc(18 * var(--m)) calc(23 * var(--m));
  background: var(--c-selected);
  border-radius: calc(12 * var(--m));
}
.proches__titre { font-size: calc(35 * var(--vu)); font-weight: 700; line-height: 1.12; }
.proches__phrase { max-width: calc(380 * var(--m)); margin-top: calc(12 * var(--m)); font-size: calc(20.5 * var(--vu)); line-height: 1.4; }
.proches__scene { position: relative; height: calc(120 * var(--m)); }
.proches__notif { left: calc(6 * var(--m)); top: calc(25 * var(--m)); }
.coeur--3 { right: calc(0 * var(--m)); top: calc(20 * var(--m)); width: calc(56 * var(--m)); height: calc(52 * var(--m)); }
.proches__magasins { margin: 0; }
.proches__retour { margin-top: calc(22 * var(--m)); font-size: calc(20.5 * var(--vu)); }
.proches__retour a {
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--m));
  min-height: var(--cible-min);
  color: var(--c-primaryText);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.proches__retour .icone { width: calc(18 * var(--m)); height: calc(18 * var(--m)); transform: scaleX(-1); }

/* ===================================== petits écrans : calendrier et lettre */

@media (max-width: 900px) {
  .page-prenoms,
  .page-lettre { --m: calc((100vw - 40px) / 934); }

  .calendrier__titre,
  .a-z__titre { font-size: 24px; }
  .calendrier__sous-titre { margin-top: var(--espace-s1); font-size: 16px; }

  .calendrier-tete__bloc,
  .lettre-tete__bloc {
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: var(--espace-s4);
    margin-inline: 0;
    padding: var(--espace-s5);
    border-radius: var(--rayon-feature);
  }
  .calendrier-tete__image { height: 88px; border-radius: var(--rayon-thumbnail); }
  .calendrier-tete__collection { font-size: 16px; }
  .calendrier-tete__titre { font-size: clamp(26px, 6vw, 40px); }
  .calendrier-tete__phrase { grid-column: 1 / -1; margin-top: var(--espace-s3); font-size: 17px; }
  .calendrier-tete__texte { display: contents; }
  .calendrier-tete__compte { grid-column: 1 / -1; margin-top: var(--espace-s1); font-size: 16px; }
  .calendrier-tete__collection,
  .calendrier-tete__titre { grid-column: 2; }
  .calendrier-tete__image { grid-row: 1 / span 2; }
  .calendrier-tete__bloc:not(:has(> .calendrier-tete__image)) :is(.calendrier-tete__collection, .calendrier-tete__titre) { grid-column: 1; }
  .recherche--tete { height: 56px; margin-top: var(--espace-s4); padding-inline: var(--espace-s4) var(--espace-s1); }
  .recherche--tete .recherche__loupe { width: 22px; height: 22px; }
  .recherche--tete .recherche__champ { margin-inline-start: var(--espace-s3); font-size: 16px; }
  .recherche--tete .recherche__valider { width: auto; height: 48px; padding-inline: var(--espace-s5); font-size: 16px; }

  .calendrier { grid-template-columns: minmax(0, 1fr); row-gap: var(--espace-s8); margin-top: var(--espace-s6); }
  .calendrier__principal { row-gap: var(--espace-s8); }
  .calendrier__jours { row-gap: var(--espace-s3); margin-top: var(--espace-s4); }
  .jour { grid-template-columns: 96px minmax(0, 1fr); min-height: 96px; border-radius: var(--rayon-card); }
  .jour__etiquette, .jour__semaine { font-size: 16px; }
  .jour__numero { font-size: 40px; }
  .jour__mois { font-size: 13px; }
  .jour__liste { padding-inline: var(--espace-s3); }
  .jour__ligne { min-height: 56px; }
  .jour__prenom { gap: var(--espace-s2); font-size: 18px; }
  .jour__prenom .icone { width: 14px; height: 14px; }
  .jour__rappel { width: auto; height: 40px; padding-inline: var(--espace-s3); border-radius: var(--rayon-control); font-size: 14px; }
  .jour__rappel .icone { width: 18px; height: 18px; }
  .pagination { margin-top: 0; }
  .pagination__courante,
  .pagination__bouton { height: 44px; padding-inline: var(--espace-s5); font-size: 15px; }
  .pagination__bouton .icone { width: 16px; height: 16px; }

  .attention { position: relative; top: auto; min-height: 0; padding: var(--espace-s6) var(--espace-s5); border-radius: var(--rayon-feature); }
  .attention__titre { font-size: 24px; }
  .attention__texte { margin-top: var(--espace-s2); font-size: 17px; }
  .attention__scene { --m: calc(min(100vw - 80px, 262px) / 262); }
  .magasins--colonne { flex-direction: row; flex-wrap: wrap; margin: var(--espace-s4) 0 0; }
  .magasins--colonne img { height: 44px; }

  .page-prenoms .separateur { margin-top: var(--espace-s10); }
  .a-z { padding-top: var(--espace-s6); padding-bottom: var(--espace-s8); }
  .a-z__lettres { flex-wrap: wrap; justify-content: flex-start; gap: var(--espace-s1); margin-top: var(--espace-s4); padding: 0; }
  .a-z__lettre { width: 40px; height: 40px; font-size: 17px; border-radius: var(--rayon-badge); }
  .lettre { margin-top: var(--espace-s6); }
  .lettre__titre { font-size: 22px; }
  .lettre__noms { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--espace-s3); }
  .lettre__noms a { min-height: var(--cible-min); font-size: 18px; }
  .lettre__tout { margin-top: var(--espace-s3); min-height: var(--cible-min); font-size: 16px; }
  .lettre__tout .icone { width: 16px; height: 16px; }

  .lettre-tete__tuile { font-size: 64px; border-radius: var(--rayon-card); }
  .lettre-tete__titre { font-size: clamp(28px, 6.5vw, 44px); }
  .lettre-tete__phrase { margin-top: var(--espace-s1); font-size: 16px; }
  .lettre-tete__texte { display: contents; }
  .lettre-tete__titre,
  .lettre-tete__phrase { grid-column: 2; }
  .lettre-tete__tuile { grid-row: 1 / span 2; }
  .lettre-tete .recherche--tete { grid-column: 1 / -1; height: 56px; }

  .liste-lettre { margin-top: var(--espace-s6); }
  .liste-lettre__colonnes { grid-template-columns: minmax(0, 1fr); margin-top: var(--espace-s3); }
  .liste-lettre__ligne { grid-template-columns: 40px minmax(0, 1fr) auto; min-height: 64px; }
  .liste-lettre__rang { font-size: 14px; }
  .liste-lettre__prenom { gap: var(--espace-s2); font-size: 18px; }
  .liste-lettre__prenom .icone { width: 14px; height: 14px; }
  .liste-lettre__date { font-size: 15px; }
  .liste-lettre__rappel { width: 48px; height: 44px; border-radius: var(--rayon-badge); }
  .liste-lettre__rappel .icone { width: 22px; height: 22px; }
  .pages { margin-top: var(--espace-s5); }
  .pages__numero,
  .pages__bouton { height: 44px; min-width: 44px; font-size: 16px; }

  .proches__bloc {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--espace-s4);
    margin-inline: 0;
    padding: var(--espace-s6) var(--espace-s5);
    border-radius: var(--rayon-feature);
  }
  .proches__titre { font-size: 24px; }
  .proches__titre br { display: none; }
  .proches__phrase { max-width: none; margin-top: var(--espace-s2); font-size: 16px; }
  .proches__scene { --m: calc(min(100vw - 80px, 290px) / 290); width: calc(290 * var(--m)); justify-self: center; }
  .proches__retour { font-size: 16px; }
  .proches__retour .icone { width: 16px; height: 16px; }
}

@media (max-width: 560px) {
  .page-prenoms,
  .page-lettre { --m: calc((100vw - 32px) / 934); }
  .lettre__noms { grid-template-columns: minmax(0, 1fr); }
  .jour { grid-template-columns: 88px minmax(0, 1fr); }
  .jour__etiquette, .jour__semaine { font-size: 14px; }
  .jour__numero { font-size: 32px; }
  /* Téléphone : la cloche seule dans un rond ; le texte reste lu par les lecteurs d'écran. */
  .jour__rappel { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
  .jour__rappel .icone { display: block; width: 20px; height: 20px; }
  .jour__rappel-texte { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .a-z__lettre { width: calc((100vw - 32px - 6 * 4px) / 7); }
}

/* ======================================== compétition et calendrier des matchs

   Relevé des maquettes « Ligue 1 » et « Calendrier de la Ligue 1 » (1024 px
   de large, contenu de 962 px). --s vaut 1 px de ces maquettes : 1,185 px de
   la page de 1280. Couleurs, rayons, graisses et boutons suivent le DS :
   un seul bouton plein (le « Suivre » du bandeau), les suivis d'une liste
   sont en contour, l'identité d'une entité porte sa couleur résolue. */

.page-competition { --s: calc(1.185 * var(--vu)); }

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

/* DS C02 « Suivre » : plein pour l'action unique, contour dans une liste. */
.suivre {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-s2);
  padding-inline: var(--espace-s4);
  border-radius: var(--rayon-control);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duree-press);
}
.suivre__plus { width: 16px; height: 16px; }
.suivre--plein { background: var(--c-primary); color: var(--c-onPrimary); }
.suivre--plein:hover,
.suivre--plein:active { background: var(--c-primaryPressed); }
.suivre--contour,
.suivre--rond { background: var(--c-surface); color: var(--c-primaryText); border: 1px solid var(--c-primaryText); }
.suivre--contour:hover,
.suivre--rond:hover { background: var(--c-selected); }
.suivre--rond { width: calc(18 * var(--s)); height: calc(18 * var(--s)); min-width: 20px; min-height: 20px; padding: 0; border-radius: 50%; }
.suivre--rond .suivre__plus { width: 70%; height: 70%; }

/* DS C01 secondaire : surface, texte et contour turquoise profond. */
.bouton-secondaire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-s2);
  padding-inline: var(--espace-s4);
  background: var(--c-surface);
  border: 1px solid var(--c-primaryText);
  border-radius: var(--rayon-control);
  color: var(--c-primaryText);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duree-press);
}
.bouton-secondaire:hover { background: var(--c-selected); }
.bouton-secondaire[hidden] { display: none; }

/* L'identité d'une entité : sa couleur résolue, son icône en noir ou blanc
   selon le contraste (la règle de l'app). */
.identite {
  display: grid;
  place-items: center;
  flex: none;
  background: var(--teinte, var(--c-field));
  color: var(--glyphe, var(--c-textPrimary));
  border-radius: var(--rayon-thumbnail);
}
.identite__lettre { font-weight: 700; line-height: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .identite { background: var(--teinte-sombre, var(--c-field)); color: var(--glyphe-sombre, var(--c-textPrimary)); }
}
:root[data-theme='dark'] .identite { background: var(--teinte-sombre, var(--c-field)); color: var(--glyphe-sombre, var(--c-textPrimary)); }

/* ------------------------------------------------------------------ bandeau */

.competition-tete { margin-top: calc(10.5 * var(--s)); }
.competition-tete__bloc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'identite texte actions'
    'onglets onglets onglets';
  align-items: start;
  column-gap: calc(26 * var(--s));
  margin-inline: calc(-6 * var(--s));
  padding: calc(15 * var(--s)) calc(20 * var(--s)) 0 calc(19 * var(--s));
  background: var(--c-selected);
  border-radius: var(--rayon-card);
}
.competition-tete__identite { grid-area: identite; width: calc(66 * var(--s)); height: calc(66 * var(--s)); }
.competition-tete__identite .identite__icone { width: calc(50 * var(--s)); height: calc(50 * var(--s)); }
.competition-tete__texte { grid-area: texte; min-width: 0; }
.competition-tete__titre { font-size: calc(34.4 * var(--s)); font-weight: 700; line-height: 1.1; }
.competition-tete__phrase {
  margin-top: calc(4 * var(--s));
  color: var(--c-textSecondary);
  font-size: max(15px, calc(13.2 * var(--s)));
  line-height: 1.3;
}
.competition-tete__actions { grid-area: actions; display: flex; gap: calc(9 * var(--s)); margin-top: calc(15 * var(--s)); }
.competition-tete__actions .suivre,
.competition-tete__actions .bouton-secondaire { height: calc(35 * var(--s)); min-height: 36px; }
.competition-tete__actions .suivre { min-width: calc(129 * var(--s)); font-size: max(15px, calc(15.8 * var(--s))); }
.competition-tete__actions .bouton-secondaire { min-width: calc(125 * var(--s)); font-size: max(15px, calc(14.3 * var(--s))); }
.competition-tete__actions .bouton-secondaire .icone { width: 20px; height: 20px; }

/* Les onglets mènent aux deux sections de la page ; « Équipes » s'allume
   quand on y est arrivé par son lien. */
.onglets { grid-area: onglets; display: flex; gap: calc(19 * var(--s)); margin-top: calc(9 * var(--s)); }
.onglet {
  display: flex;
  align-items: center;
  height: calc(35 * var(--s));
  min-height: 40px;
  padding: 0 calc(9 * var(--s));
  border-bottom: calc(4 * var(--s)) solid transparent;
  color: var(--c-textPrimary);
  font-size: max(15px, calc(13.4 * var(--s)));
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.onglet:hover { color: var(--c-primaryText); }
.onglet--calendrier,
.page-competition:has(#equipes:target) .onglet--equipes { color: var(--c-primaryText); border-bottom-color: var(--c-primary); }
.page-competition:has(#equipes:target) .onglet--calendrier { color: var(--c-textPrimary); border-bottom-color: transparent; }

/* ------------------------------------------------------- prochains matchs */

.section-sport__titre { font-size: calc(32.2 * var(--s)); font-weight: 700; line-height: 1.15; }
.section-sport__sous-titre { color: var(--c-textSecondary); font-size: max(15px, calc(14.5 * var(--s))); line-height: 1.3; }

.proches { margin-top: calc(16 * var(--s)); }
.proches__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espace-s6); }

/* DS C04 : libellé au-dessus, zone `field` bordée `borderControl`, 52 minimum. */
.champ-equipe { flex: none; width: calc(322 * var(--s)); }
.champ-equipe__libelle { display: block; font-size: max(14px, calc(14.3 * var(--s))); font-weight: 600; line-height: 1.3; }
.champ-equipe__zone {
  display: flex;
  align-items: center;
  min-height: var(--champ-min);
  margin-top: var(--espace-s2);
  padding-inline: var(--espace-s4) var(--espace-s1);
  background: var(--c-field);
  border: 1px solid var(--c-borderControl);
  border-radius: var(--rayon-control);
}
.champ-equipe__zone:focus-within { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.champ-equipe__loupe { width: 24px; height: 24px; color: var(--c-iconPrimary); }
.champ-equipe__saisie {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  margin-inline-start: var(--espace-s3);
  padding: 0;
  background: none;
  border: 0;
  color: var(--c-textPrimary);
  font: inherit;
  font-size: max(16px, calc(14.3 * var(--s)));
}
.champ-equipe__saisie::placeholder { color: var(--c-textSecondary); }
.champ-equipe__saisie:focus { outline: none; }
.champ-equipe__saisie::-webkit-search-cancel-button { display: none; }
.champ-equipe__effacer {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--cible-min);
  height: var(--cible-min);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--rayon-pill);
  color: var(--c-textSecondary);
  cursor: pointer;
}
.champ-equipe__effacer[hidden] { display: none; }
.champ-equipe__effacer:hover { color: var(--c-textPrimary); }
.champ-equipe__effacer .icone { width: 20px; height: 20px; }

.proches__liste { width: calc(688 * var(--s)); max-width: 100%; margin: calc(11 * var(--s)) auto 0; }
.proches-jour + .proches-jour { padding-top: calc(23.7 * var(--s)); }
.proches-jour__titre {
  padding-bottom: calc(10.1 * var(--s));
  border-bottom: 1px solid var(--c-borderSubtle);
  font-size: calc(19.3 * var(--s));
  font-weight: 700;
  line-height: 1.2;
}
.proches__vide { padding-block: var(--espace-s6); color: var(--c-textSecondary); text-align: center; }

.match {
  display: grid;
  grid-template-columns: calc(75.8 * var(--s)) calc(26 * var(--s)) minmax(0, 1fr) auto;
  align-items: center;
  min-height: calc(60.7 * var(--s));
  border-bottom: 1px solid var(--c-borderSubtle);
}
.match__heure { font-size: calc(17.2 * var(--s)); line-height: 1.2; font-variant-numeric: tabular-nums; }
.match__heure--vide { color: var(--c-textSecondary); font-size: max(13px, calc(13.5 * var(--s))); }
.match__quand { display: flex; flex-direction: column; }
.match__chaine { color: var(--c-textSecondary); font-size: 13px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.match__centre { min-width: 0; }
.match__competition { margin: 2px 0 0; color: var(--c-textSecondary); font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; }
.match__icone { width: calc(26 * var(--s)); height: calc(26 * var(--s)); color: var(--c-iconPrimary); }
.match__affiche {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: calc(19 * var(--s));
  margin-inline-start: calc(44.2 * var(--s));
  font-size: calc(17.2 * var(--s));
  font-weight: 600;
  line-height: 1.25;
}
.match__contre { font-weight: 700; }
.match__suivre { width: calc(121 * var(--s)); height: calc(36 * var(--s)); min-height: 36px; font-size: max(14px, calc(16.5 * var(--s))); }

/* Le lien texte garde 48 px de zone : 12 px de chaque côté du texte. */
.proches__suite {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--s));
  width: fit-content;
  min-height: var(--cible-min);
  margin: calc(18.4 * var(--s) - 12px) auto 0;
  color: var(--c-primaryText);
  font-size: calc(16.5 * var(--s));
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.proches__suite .icone { width: calc(19 * var(--s)); height: calc(19 * var(--s)); }

/* ----------------------------------------------------------------- équipes */

.equipes { margin-top: calc(29.7 * var(--s) - 12px); }
.equipes .section-sport__titre { font-size: calc(30.3 * var(--s)); }
.equipes__grille {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(9 * var(--s)) calc(7 * var(--s));
  margin-top: calc(11 * var(--s));
}
.equipe {
  display: flex;
  flex-direction: column;
  padding: var(--espace-s3);
  background: var(--c-surface);
  border: 1px solid var(--c-borderSubtle);
  border-radius: var(--rayon-card);
}
.equipe__tete { display: flex; align-items: center; gap: calc(9 * var(--s)); }
.equipe__identite { width: calc(48 * var(--s)); height: calc(48 * var(--s)); }
.equipe__identite .identite__icone { width: calc(32 * var(--s)); height: calc(32 * var(--s)); }
.equipe__nom { min-width: 0; font-size: max(15px, calc(12.9 * var(--s))); font-weight: 600; line-height: 1.2; overflow-wrap: break-word; }
.equipe__lien { color: inherit; text-decoration: none; }
.equipe__lien:hover { text-decoration: underline; text-underline-offset: 3px; }
/* La prochaine date sous le nom : on voit que la carte est à jour. */
.equipe__prochaine { margin-top: calc(5 * var(--s)); color: var(--c-textSecondary); font-size: max(13px, calc(10.7 * var(--s))); line-height: 1.3; overflow-wrap: break-word; }
.equipe__matchs {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 4px;
  margin-top: auto;
  padding-top: calc(5 * var(--s));
  color: var(--c-primaryText);
  font-size: max(14px, calc(10.7 * var(--s)));
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.equipe__matchs .icone { width: calc(15 * var(--s)); height: calc(15 * var(--s)); }
.equipe__suivre { width: 100%; height: calc(27 * var(--s)); min-height: 36px; margin-top: calc(4 * var(--s)); font-size: 14px; }

.equipes + .promo-section { margin-top: calc(24 * var(--s)); }
.calendrier-matchs + .promo-section { margin-top: calc(10 * var(--s)); }

/* -------------------------------------------------------------- calendrier

   Relevé de la maquette « Calendrier de la Ligue 1 » : son bandeau et ses
   cartes tiennent toute la largeur du cadre. */

.competition-tete--calendrier .competition-tete__bloc {
  grid-template-areas: 'identite texte actions';
  align-items: center;
  column-gap: calc(22 * var(--s));
  margin-inline: 0;
  padding: calc(8.75 * var(--s)) calc(15 * var(--s)) calc(8.75 * var(--s)) calc(16 * var(--s));
}
.competition-tete--calendrier .competition-tete__identite { width: calc(59 * var(--s)); height: calc(59 * var(--s)); }
.competition-tete--calendrier .competition-tete__identite .identite__icone { width: calc(44 * var(--s)); height: calc(44 * var(--s)); }
.competition-tete--calendrier .competition-tete__titre { font-size: calc(31.5 * var(--s)); }
.competition-tete--calendrier .competition-tete__actions { margin-top: 0; }
.competition-tete--calendrier .suivre { min-width: calc(182 * var(--s)); }

.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-s3) calc(16.5 * var(--s)); margin-top: calc(15 * var(--s)); }
.filtre { position: relative; display: flex; align-items: center; }
.filtre--equipe { width: calc(187 * var(--s)); }
.filtre--depuis { width: calc(245 * var(--s)); }
.filtre--duree { width: calc(161 * var(--s)); }
.filtre select {
  width: 100%;
  min-height: var(--champ-min);
  padding: 0 36px 0 var(--espace-s4);
  appearance: none;
  background: var(--c-field);
  border: 1px solid var(--c-borderControl);
  border-radius: var(--rayon-control);
  color: var(--c-textPrimary);
  font: inherit;
  font-size: max(15px, calc(13 * var(--s)));
  text-overflow: ellipsis;
  cursor: pointer;
}
.filtre select:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.filtre select:disabled { background: var(--c-disabledSurface); color: var(--c-disabledText); cursor: default; }
.filtre--depuis select { padding-inline-start: calc(42 * var(--s)); }
.filtre__calendrier { position: absolute; left: calc(12 * var(--s)); width: 20px; height: 20px; color: var(--c-iconPrimary); pointer-events: none; }
.filtre__chevron { position: absolute; right: calc(12 * var(--s)); width: 18px; height: 18px; color: var(--c-iconPrimary); transform: rotate(90deg); pointer-events: none; }
.filtres__plage { margin-inline: auto calc(10 * var(--s)); font-size: max(15px, calc(13.5 * var(--s))); line-height: 1.3; }
.filtres__point { margin-inline: calc(7 * var(--s)); }

/* Deux colonnes : la première moitié des jours à gauche, comme la maquette. */
.calendrier-matchs__jours {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: calc(19 * var(--s));
  margin-top: calc(16 * var(--s));
}
.calendrier-matchs__colonne { display: grid; row-gap: calc(9 * var(--s)); }
.calendrier-matchs__vide { grid-column: 1 / -1; padding-block: var(--espace-s6); color: var(--c-textSecondary); text-align: center; }
.jour-matchs {
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-borderSubtle);
  border-radius: var(--rayon-card);
}
.jour-matchs__titre {
  display: flex;
  align-items: baseline;
  gap: calc(12 * var(--s));
  padding: calc(5.5 * var(--s)) calc(15 * var(--s)) calc(5 * var(--s));
  background: var(--c-selected);
  font-size: calc(15.8 * var(--s));
  font-weight: 700;
  line-height: 1.2;
}
.jour-matchs__semaine { color: var(--c-textSecondary); font-size: max(13px, calc(13 * var(--s))); font-weight: 400; }
.jour-matchs__liste { padding-inline: calc(15 * var(--s)); }

/* Heure, domicile calé à droite, point centré, extérieur, « + » : les
   colonnes de la maquette (50 / 181 / 58 / 19). */
.match--compact {
  grid-template-columns: calc(50 * var(--s)) minmax(0, 1fr) auto;
  min-height: calc(25 * var(--s));
  border-bottom: 0;
}
.match--compact + .match--compact { border-top: 1px solid var(--c-borderSubtle); }
.match--compact .match__heure { font-size: max(14px, calc(12.9 * var(--s))); }
.match--compact .match__heure--vide { font-size: 13px; }
.match--compact .match__affiche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(58 * var(--s)) minmax(0, 1fr);
  column-gap: 0;
  margin-inline: 0 calc(56 * var(--s));
  font-size: max(14px, calc(12.9 * var(--s)));
  font-weight: 400;
}
.match--compact .match__equipe:first-child { text-align: right; }
.match--compact .match__contre { text-align: center; }
.match--compact .suivre--rond { width: calc(19 * var(--s)); height: calc(19 * var(--s)); }

.calendrier-matchs__pied { display: flex; justify-content: center; margin-top: calc(9 * var(--s)); }
.calendrier-matchs__suite { gap: calc(8 * var(--s)); min-width: calc(210 * var(--s)); min-height: calc(32 * var(--s)); padding-block: 4px; font-size: max(15px, calc(14 * var(--s))); font-weight: 500; }
.calendrier-matchs__suite .icone { width: 18px; height: 18px; }

/* ============================= petits écrans : compétition et calendrier

   Sous 900 px, tout s'empile ; les cibles reprennent les 48 px du DS (bouton
   rond de 36 dans une ligne de 48, champs de 52). */

@media (max-width: 900px) {
  .page-competition { --s: calc((100vw - 40px) / 962); }

  .competition-tete { margin-top: var(--espace-s4); }
  .competition-tete__bloc {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      'identite texte'
      'actions actions'
      'onglets onglets';
    align-items: center;
    column-gap: var(--espace-s4);
    margin-inline: 0;
    padding: var(--espace-s5) var(--espace-s5) 0;
    border-radius: var(--rayon-feature);
  }
  .competition-tete__identite,
  .competition-tete--calendrier .competition-tete__identite { width: 64px; height: 64px; }
  .competition-tete__identite .identite__icone,
  .competition-tete--calendrier .competition-tete__identite .identite__icone { width: 48px; height: 48px; }
  .competition-tete__titre { font-size: clamp(28px, 6vw, 36px); }
  .competition-tete__phrase { margin-top: var(--espace-s1); font-size: 16px; }
  .competition-tete__actions { flex-wrap: wrap; gap: var(--espace-s3); margin-top: var(--espace-s4); }
  .competition-tete__actions .suivre,
  .competition-tete__actions .bouton-secondaire { flex: 1 1 140px; height: 48px; min-width: 0; font-size: 16px; }
  .onglets { gap: var(--espace-s2); margin-top: var(--espace-s2); }
  .onglet { height: 48px; padding-inline: var(--espace-s3); border-bottom-width: 3px; font-size: 16px; }

  .competition-tete--calendrier .competition-tete__bloc {
    grid-template-areas:
      'identite texte'
      'actions actions';
    column-gap: var(--espace-s4);
    padding: var(--espace-s5);
  }
  .competition-tete--calendrier .competition-tete__titre { font-size: clamp(26px, 6vw, 34px); }
  .competition-tete--calendrier .competition-tete__actions { margin-top: var(--espace-s4); }
  .competition-tete--calendrier .suivre { min-width: 0; }

  .section-sport__titre,
  .equipes .section-sport__titre { font-size: 26px; }
  .section-sport__sous-titre { font-size: 16px; }

  .proches { margin-top: var(--espace-s8); }
  .proches__tete { flex-direction: column; align-items: stretch; gap: var(--espace-s4); }
  .champ-equipe { width: 100%; }
  .champ-equipe__libelle { font-size: 14px; }
  .proches__liste { width: 100%; margin-top: var(--espace-s5); }
  .proches-jour + .proches-jour { padding-top: var(--espace-s6); }
  .proches-jour__titre { padding-bottom: var(--espace-s2); font-size: 20px; }
  .match { grid-template-columns: 56px 24px minmax(0, 1fr) auto; min-height: 64px; }
  .match__heure { font-size: 17px; }
  .match__heure--vide { font-size: 13px; }
  .match__icone { width: 24px; height: 24px; }
  .match__affiche { column-gap: var(--espace-s2); margin-inline: var(--espace-s3); font-size: 17px; }
  .match__suivre { width: auto; height: 40px; font-size: 14px; }
  .proches__suite { margin-top: var(--espace-s3); font-size: 17px; }
  .proches__suite .icone { width: 18px; height: 18px; }

  .equipes { margin-top: var(--espace-s8); }
  .equipes__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-s3); margin-top: var(--espace-s4); }
  .equipe__tete { gap: var(--espace-s3); }
  .equipe__identite { width: 48px; height: 48px; }
  .equipe__identite .identite__icone { width: 32px; height: 32px; }
  .equipe__nom { font-size: 16px; }
  .equipe__matchs { min-height: 44px; padding-top: var(--espace-s2); font-size: 15px; }
  .equipe__matchs .icone { width: 16px; height: 16px; }
  .equipe__suivre { height: 40px; margin-top: var(--espace-s1); }

  .equipes + .promo-section,
  .calendrier-matchs + .promo-section { margin-top: var(--espace-s8); }

  .filtres { gap: var(--espace-s3); margin-top: var(--espace-s5); }
  .filtre--equipe,
  .filtre--depuis,
  .filtre--duree { flex: 1 1 220px; width: auto; }
  .filtre select { font-size: 16px; }
  .filtre--depuis { order: 1; flex-basis: 100%; }
  .filtre--depuis select { padding-inline-start: 44px; }
  .filtre__calendrier { left: var(--espace-s4); }
  .filtre__chevron { right: var(--espace-s3); }
  .filtres__plage { order: 2; width: 100%; margin-inline-start: 0; font-size: 15px; }
  .calendrier-matchs__jours { grid-template-columns: minmax(0, 1fr); row-gap: var(--espace-s3); margin-top: var(--espace-s4); }
  .calendrier-matchs__colonne { row-gap: var(--espace-s3); }
  .jour-matchs__titre { padding: var(--espace-s3) var(--espace-s4); font-size: 18px; }
  .jour-matchs__semaine { font-size: 14px; }
  .jour-matchs__liste { padding-inline: var(--espace-s4) var(--espace-s1); }
  .match--compact { grid-template-columns: 64px minmax(0, 1fr) 48px; min-height: 48px; }
  .match--compact .match__heure { font-size: 16px; }
  .match--compact .match__affiche { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); margin-inline: 0; font-size: 16px; }
  .match--compact .suivre--rond { justify-self: center; width: 36px; height: 36px; }
  .suivre--rond .suivre__plus { width: 18px; height: 18px; }
  .calendrier-matchs__pied { margin-top: var(--espace-s5); }
  .calendrier-matchs__suite { min-height: 48px; font-size: 16px; }
}

@media (max-width: 560px) {
  .equipes__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .match { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .match__icone { display: none; }
  .match__affiche { margin-inline: var(--espace-s2); font-size: 16px; }
  .match__suivre { padding-inline: var(--espace-s3); }
  .match--compact { grid-template-columns: 56px minmax(0, 1fr) 48px; }
  .match--compact .match__affiche { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); font-size: 15px; }
}

/* ================================ accueil : « Aujourd'hui » et les collections

   Canevas « Site · accueil, propositions », validé le 23-09-2026. « Aujourd'hui »
   est un bandeau menthe de cartes-notifications, une au plus par collection ;
   les collections sont des visuels carrés, filtrés par pastilles de thème. */

.aujourdhui { padding-block: max(28px, calc(40 * var(--vu))) max(32px, calc(44 * var(--vu))); background: var(--c-selected); }
.aujourdhui[hidden] { display: none; }
.aujourdhui__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espace-s4); }
.aujourdhui .section__titre { margin-bottom: 0; }
.aujourdhui__date { margin-top: 6px; color: var(--c-textSecondary); font-size: max(17px, calc(19 * var(--vu))); }
.aujourdhui__fleches { display: flex; gap: 10px; }
.aujourdhui__fleche {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-textPrimary);
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--marque-ink) 35%, transparent);
  cursor: pointer;
}
.aujourdhui__fleche[hidden] { display: none; }
.aujourdhui__fleche .icone { width: 20px; height: 20px; }
.aujourdhui__fleche--gauche .icone { transform: scaleX(-1); }
.aujourdhui__rail {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  padding: 4px 2px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.aujourdhui__rail::-webkit-scrollbar { display: none; }
.aujourdhui__element { flex: 0 0 320px; scroll-snap-align: start; }

.notif-carte {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 12px;
  background: var(--c-surface);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--marque-ink) 35%, transparent);
}
.notif-carte:hover .notif-carte__titre { text-decoration: underline; text-underline-offset: 3px; }
.notif-carte__image { display: block; flex: none; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--c-field); }
/* Sans image : l'icône sur sa couleur (`.identite`), servies par l'API. */
.notif-carte__image.identite { display: grid; background: var(--teinte, var(--c-field)); }
.notif-carte__image .identite__icone { width: 32px; height: 32px; }
.notif-carte__pile { position: relative; flex: none; }
.notif-carte__nombre {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 2px solid var(--c-surface);
  border-radius: 999px;
  background: var(--c-textPrimary);
  color: var(--c-canvas);
  font-size: 13px;
  font-weight: 700;
}
.notif-carte__texte { display: grid; gap: 2px; flex: 1; min-width: 0; }
.notif-carte__titre { font-size: 17px; font-weight: 700; line-height: 1.25; }
.notif-carte__sous-titre { min-height: 1.3em; color: var(--c-textSecondary); font-size: 15px; line-height: 1.3; }
/* Deux lignes, le titre et le sous-titre : ce qui dépasse finit par « … ». */
.notif-carte__collection,
.notif-carte__titre,
.notif-carte__sous-titre { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--c-borderSubtle);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-textPrimary);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.pastille[aria-pressed='true'] { background: var(--c-textPrimary); border-color: var(--c-textPrimary); color: var(--c-canvas); }
.pastille__nombre { font-weight: 500; opacity: 0.7; }

.collections-grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; margin-top: 24px; }
/* Deux lignes au plus sur l'accueil ; « Voir les N collections » mène au reste. */
.collections-grille:not(.collections-grille--toutes) > :nth-child(n + 13) { display: none; }
.collection-carte[hidden] { display: none; }
.collection-carte__lien { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.collection-carte__lien:hover .collection-carte__nom { text-decoration: underline; text-underline-offset: 3px; }
.collection-carte__image { display: block; width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 6px; border-radius: 16px; object-fit: cover; background: var(--c-field); }
.collection-carte__nom { font-size: 18px; font-weight: 700; line-height: 1.25; }
.collection-carte__compte { color: var(--c-textSecondary); font-size: 15px; }
.collections-suite { display: flex; justify-content: center; margin-top: 32px; }
.collections-suite .bouton-secondaire { min-height: 48px; padding-inline: 24px; }
.collections-suite .icone { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .collections-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .collections-grille:not(.collections-grille--toutes) > :nth-child(n + 7) { display: none; }
}
@media (max-width: 560px) {
  .aujourdhui__fleches { display: none; }
  .aujourdhui__element { flex-basis: 280px; }
  .pastilles { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .pastilles::-webkit-scrollbar { display: none; }
  .collections-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .collections-grille:not(.collections-grille--toutes) > :nth-child(n + 5) { display: none; }
  .collection-carte__nom { font-size: 17px; }
  .collections-suite .bouton-secondaire { width: 100%; justify-content: center; }
}

/* ------------------------------------------- pages de texte (confidentialité, mentions) */

.texte-fixe { max-width: 720px; padding-block: var(--espace-s5) 64px; font-size: 17px; line-height: 1.55; }
.texte-fixe h1 { margin: 0 0 4px; font-size: 34px; line-height: 1.15; }
.texte-fixe h2 { margin: 32px 0 8px; font-size: 21px; }
.texte-fixe__date { margin: 0 0 24px; color: var(--c-textSecondary); }
.texte-fixe ul { padding-inline-start: 1.2em; }
.texte-fixe li + li { margin-top: 6px; }
.texte-fixe a { color: var(--c-primaryText); }

/* Bêta Android : deux étapes, chacune avec l'aperçu de la page Google qu'elle ouvre.
   L'aperçu reprend les couleurs de Google, pas celles du DS. */
.beta { max-width: 560px; display: flex; flex-direction: column; gap: var(--espace-s4); }
.beta h1 { margin: 0; }
.beta p { margin: 0; }
.beta__puce { align-self: flex-start; padding: 4px 12px; border-radius: var(--rayon-pill); background: var(--c-selected); color: var(--c-selectedText); font-size: 13px; font-weight: 700; }
.beta__intro { color: var(--c-textSecondary); }
.beta__conseil { padding: 12px 14px; border-radius: var(--rayon-control); background: var(--c-field); font-size: 15px; }
.beta__etapes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--espace-s3); }
.texte-fixe .beta__etape + .beta__etape { margin-top: 0; }
.beta__etape { padding: 18px; border: 1px solid var(--c-borderSubtle); border-radius: var(--rayon-card); background: var(--c-surface); display: flex; flex-direction: column; gap: 14px; }
.beta__tete { display: flex; gap: 12px; align-items: center; }
.beta__tete h2 { margin: 0 0 2px; font-size: 19px; }
.beta__tete p { font-size: 15px; line-height: 1.4; color: var(--c-textSecondary); }
.beta__num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--c-textPrimary); color: var(--c-surface); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.beta__apercu { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.beta__apercu figcaption { font-size: 12px; color: var(--c-textSecondary); }
.beta__ecran { width: 220px; box-sizing: border-box; border: 6px solid var(--c-textPrimary); border-radius: 22px; background: #FFFFFF; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; font-family: system-ui, sans-serif; line-height: 1.35; }
.beta__ecran > :not(.beta__adresse) { margin-inline: 12px; }
.beta__adresse { padding: 6px 10px; background: #F1F3F4; font-size: 11px; color: #5F6368; text-align: center; }
.beta__petit { font-size: 12px; color: #5F6368; }
.beta__titre { font-size: 17px; color: #202124; }
.beta__cible { align-self: flex-start; padding: 7px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; box-shadow: 0 0 0 3px #F4E69A; }
.beta__cible--contour { border: 1px solid #DADCE0; color: #1A73E8; }
.beta__cible--plein { background: #01875F; color: #FFFFFF; }
.beta__ligne { height: 8px; width: 80%; border-radius: 4px; background: #F1F3F4; }
.beta__ligne--courte { width: 60%; }
.texte-fixe .beta__bouton,
.texte-fixe .beta__retour { min-height: 48px; border-radius: var(--rayon-control); font-size: 16px; }
.texte-fixe .beta__bouton { background: var(--c-primary); color: var(--c-onPrimary); }
.texte-fixe .beta__bouton:hover { background: var(--c-primaryPressed); }
.texte-fixe .beta__retour { background: var(--c-surface); color: var(--c-primaryText); border: 1.5px solid var(--c-primaryText); white-space: normal; text-align: center; }
.beta__retour[hidden] { display: none; }

/* ======================================================= fiche : une seule page

   Sous la date : les rappels. Sur ordinateur, le QR pour l'ouvrir sur son
   téléphone. Un seul téléphone par page (demande de David du 08-10) : celui de
   « Comment ça marche ? », plus bas. .fiche-telephone reste le cadre du téléphone
   de l'encart (collections, prénoms) ; son unité --u y est recalculée. */

.fiche-suite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-s6);
  margin-top: var(--espace-s5);
}
.fiche-rappels { display: grid; gap: var(--espace-s3); font-size: 16px; font-weight: 500; }
.fiche-rappels li { display: flex; gap: 10px; align-items: flex-start; }
.fiche-rappels .icone { flex: none; width: 20px; height: 20px; color: var(--c-textSecondary); }
.fiche-telephone {
  --u: 1.432px;
  position: relative;
  flex: none;
  width: calc(183 * var(--u));
  height: calc(124 * var(--u));
}
.fiche-telephone > .telephone-etape { position: absolute; inset: 0; transform: rotate(-3.4deg); }
.fiche-qr {
  display: flex;
  align-items: center;
  gap: var(--espace-s5);
  margin-top: var(--espace-s6);
  padding: var(--espace-s4);
  background: var(--c-surface);
  border: 1px solid var(--c-borderSubtle);
  border-radius: var(--rayon-feature);
}
.fiche-qr > img { flex: none; width: 120px; height: 120px; }
.fiche-qr__titre { font-size: 18px; font-weight: 700; }
.fiche-qr__texte { margin-top: 4px; color: var(--c-textSecondary); font-size: 15px; }
.fiche-qr__magasins { display: flex; gap: 8px; margin-top: 10px; }
.fiche-qr__magasins img { height: 38px; width: auto; }
@media (max-width: 900px) {
  .fiche-qr { display: none; }
  .fiche-suite { flex-direction: column; align-items: stretch; }
  .fiche-telephone { --u: 1.3px; align-self: center; margin-top: var(--espace-s3); }
}