/* =============================================================================
   capofish.com — feuille de style unique
   -----------------------------------------------------------------------------
   Jetons de la charte v2 (docs/charte/capofish-tokens.css), palette nuit : le
   site est en thème nuit pour tout le monde, sur toutes les pages.
   - L'ambre ne marque que la marque, l'activité (échelle, fenêtre) et le focus.
   - Une seule action ambre par écran ; le badge Google Play garde ses couleurs.
   - Aucune ombre : la profondeur vient des surfaces et des filets.
   - Chiffres tabulaires partout, pas de capitales dans les titres.
   ========================================================================== */

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

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.2066f51561.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* L'arabe (D30) : IBM Plex Sans Arabic, sous licence SIL OFL, auto-hébergée et
   découpée sur les seules plages arabes. Archivo garde le latin et les chiffres, et
   seule une page en arabe réclame ces fichiers : les autres ne les chargent pas. */
@font-face {
  font-family: "Plex Arabic";
  src: url("../fonts/plex-arabic-400.76e036cf92.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plex Arabic";
  src: url("../fonts/plex-arabic-700.9645c9c1e1.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ jetons */

:root {
  /* nuit */
  --encre: #0B0805;
  --encre-2: #171208;
  --encre-3: #221A0E;
  --lamparo: #F2A03D;
  --lamparo-vif: #FFC069;
  --ecume: #E8DCC8;
  --ecume-sourde: #8C8271;
  --lagune-nuit: #3FA3B1;
  --hair: rgba(232, 220, 200, .08);
  --hair-2: rgba(232, 220, 200, .14);
  --sur-lamparo: #0B0805;
  --focus: #FFC069;
  --zone-filet: rgba(232, 220, 200, .24);
  --zone-fond: rgba(242, 160, 61, .08);

  /* échelle d'activité : Calme, Faible, Moyen, Bon, Excellent */
  --act-0: rgba(140, 130, 113, .35);
  --act-1: rgba(242, 160, 61, .35);
  --act-2: rgba(242, 160, 61, .62);
  --act-3: #F2A03D;
  --act-4: #FFC069;

  /* forme */
  --r-chip: 8px;
  --r-ctl: 14px;
  --r-card: 18px;
  --r-sheet: 28px;
  --ctl-h: 48px;

  /* espace, base 4 */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-6: 24px;
  --e-8: 32px;
  --e-12: 48px;
  --e-16: 64px;
  --e-24: 96px;
  --gouttiere: 20px;
  --largeur: 72rem;
  --entete-h: 64px;

  /* type : Archivo largeur 100, échelle mobile de la charte agrandie au clamp() */
  --police: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem);    /* 44 → 72 */
  --fs-titre: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);     /* 28 → 40 */
  --fs-sous-titre: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); /* 20 → 24 */
  --fs-intro: clamp(1.0625rem, .95rem + .5vw, 1.375rem);   /* 17 → 22 */
  --fs-corps: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);   /* 17 → 19 */
  --fs-petit: clamp(.9375rem, .9rem + .15vw, 1rem);        /* 15 → 16 */
  --fs-legende: .8125rem;                                  /* 13 */
  --fs-donnee: .75rem;                                     /* 12 */
}

/* Une page en arabe ajoute sa police après Archivo : les lettres arabes, absentes
   d'Archivo, tombent sur Plex Arabic, et le latin comme les chiffres ne bougent pas. */
:root:lang(ar) {
  --police: "Archivo", "Plex Arabic", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------ jour */

/* La palette jour « en miroir » de la charte (D26). Depuis D27, le site est en jour pour
   tout le monde : chaque page porte data-theme="jour", et c'est ce premier bloc qui
   s'applique. Le second, pour un téléphone réglé en clair, lui reste identique : une
   garde le vérifie. La palette nuit reste dans :root, prête à revenir. */
:root[data-theme="jour"] {
  color-scheme: light;
  --encre: #F2F5F4;
  --encre-2: #FFFFFF;
  --encre-3: #DCE4E2;
  --lamparo: #D98A2C;
  --lamparo-vif: #E8A04A;
  --ecume: #0E2A33;
  --ecume-sourde: #4E6268;
  --lagune-nuit: #0E5560;
  --hair: rgba(14, 42, 51, .10);
  --hair-2: rgba(14, 42, 51, .18);
  --sur-lamparo: #0E2A33;
  --focus: #0E5560;
  --zone-filet: rgba(14, 42, 51, .24);
  --zone-fond: rgba(217, 138, 44, .10);
  --act-0: rgba(14, 42, 51, .14);
  --act-1: rgba(242, 160, 61, .42);
  --act-2: rgba(242, 160, 61, .70);
  --act-3: #F2A03D;
  --act-4: #D98A2C;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="nuit"]) {
    color-scheme: light;
    --encre: #F2F5F4;
    --encre-2: #FFFFFF;
    --encre-3: #DCE4E2;
    --lamparo: #D98A2C;
    --lamparo-vif: #E8A04A;
    --ecume: #0E2A33;
    --ecume-sourde: #4E6268;
    --lagune-nuit: #0E5560;
    --hair: rgba(14, 42, 51, .10);
    --hair-2: rgba(14, 42, 51, .18);
    --sur-lamparo: #0E2A33;
    --focus: #0E5560;
    --zone-filet: rgba(14, 42, 51, .24);
    --zone-fond: rgba(217, 138, 44, .10);
    --act-0: rgba(14, 42, 51, .14);
    --act-1: rgba(242, 160, 61, .42);
    --act-2: rgba(242, 160, 61, .70);
    --act-3: #F2A03D;
    --act-4: #D98A2C;
  }
}

@media (min-width: 48em) {
  :root { --gouttiere: 32px; }
}

@media (min-width: 60em) {
  :root { --entete-h: 72px; }
}

@media (min-width: 75em) {
  :root { --gouttiere: 48px; }
}

/* -------------------------------------------------------------------- base */

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

html {
  color-scheme: dark;
  background-color: var(--encre);
  scroll-padding-top: calc(var(--entete-h) + var(--e-2));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--encre);
  color: var(--ecume);
  font-family: var(--police);
  font-size: var(--fs-corps);
  font-weight: 400;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

h1, h2, h3, p, ul, ol, figure {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

strong {
  font-weight: 700;
}

[hidden] {
  display: none !important;
}

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

/* ------------------------------------------------------------- typographie */

h1, h2, h3 {
  font-weight: 700;
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
}

h2 {
  font-size: var(--fs-titre);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -.014em;
}

h3 {
  font-size: var(--fs-sous-titre);
  line-height: 1.2;
}

p {
  max-width: 34em;
  text-wrap: pretty;
}

.intro {
  font-size: var(--fs-intro);
  line-height: 1.45;
  max-width: 30em;
}

.legende {
  font-size: var(--fs-legende);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ecume-sourde);
}

.a-completer {
  padding-inline: .3em;
  border: 1px dashed var(--ecume-sourde);
  border-radius: 4px;
  background-color: var(--encre-3);
  color: var(--ecume);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ------------------------------------------------------------------ mise en page */

.conteneur {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.conteneur--etroit {
  max-width: calc(46rem + 2 * var(--gouttiere));
}

.bloc {
  padding-block: var(--e-16);
  border-top: 1px solid var(--hair);
}

.bloc__entete {
  margin-bottom: var(--e-12);
}

.bloc__entete .intro,
.bloc__texte > .intro {
  margin-top: var(--e-4);
}

.grille-2,
.grille-3 {
  display: grid;
  gap: var(--e-3);
}

.grille-2 {
  gap: var(--e-12);
}

.deux-colonnes {
  display: grid;
  gap: var(--e-12);
  align-items: center;
}

.deux-colonnes--haut {
  align-items: start;
}

@media (min-width: 48em) {
  .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 60em) {
  .bloc { padding-block: var(--e-24); }
  .grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); }
  .deux-colonnes { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-16); }
  .deux-colonnes--inverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .deux-colonnes--inverse > .telephone { order: -1; }
}

/* ------------------------------------------------------------------ évitement */

.evitement {
  position: absolute;
  z-index: 100;
  top: var(--e-2);
  inset-inline-start: var(--e-4);
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl-h);
  padding-inline: var(--e-4);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-ctl);
  background-color: var(--encre-3);
  color: var(--ecume);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.evitement:focus {
  transform: none;
}

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

/* L'en-tête refait (D61). Sur téléphone, une seule ligne : le logo, Google Play, la
   langue et le menu. Sur grand écran, les liens de la page, la section où l'on est
   soulignée d'ambre. Le fond laisse deviner la page qui passe dessous. */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--hair);
  background-color: var(--encre);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (background-color: color-mix(in srgb, red 50%, blue)) {
  .entete {
    background-color: color-mix(in srgb, var(--encre) 86%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

.entete__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--e-2);
  min-height: var(--entete-h);
}

.entete__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl-h);
  margin-inline-end: auto;
  border-radius: var(--r-chip);
}

.entete__logo img {
  width: auto;
  height: 40px;
}

/* L'écart garde au badge son espace libre d'un quart de sa hauteur (9 px à 36 px). */
.entete__actions {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

/* Google Play en haut de chaque page (D61) : « Bientôt » aujourd'hui, le badge
   officiel le jour de la sortie (docs/exploitation/jour-de-la-sortie.md). Le repère ne tient pas sur un petit
   téléphone à côté du menu : il n'y paraît qu'à partir de 30em. */
.entete__bientot {
  white-space: nowrap;
}

@media (max-width: 29.99em) {
  .entete__bientot { display: none; }
}

.entete .badge-play {
  --badge-h: 32px;
}

/* Les liens de la page. */
.entete__nav ul {
  display: flex;
  column-gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.entete__nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--ctl-h);
  padding-inline: var(--e-3);
  border-radius: var(--r-ctl);
  color: var(--ecume);
  font-size: var(--fs-petit);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}

.entete__nav a:hover {
  background-color: var(--encre-3);
}

/* La section où l'on est, marquée par site.js : un trait ambre sous le mot. */
.entete__nav a[aria-current="location"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--e-3);
  bottom: 8px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--lamparo);
}

/* Les icônes ne s'affichent que dans le menu ouvert du téléphone. */
.entete__icone {
  display: none;
  flex: none;
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 8px;
  border-radius: 12px;
  background-color: var(--encre-3);
  color: var(--ecume);
}

/* Le choix de la langue (D30) : des liens, rien d'autre — ni cookie, ni redirection
   automatique. Un <details> les replie sous la langue de la page : il s'ouvre et se
   ferme sans script ; site.js le referme seulement quand on clique ailleurs. */
.langues {
  position: relative;
}

.langues summary {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--ctl-h);
  padding-inline: var(--e-3);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-ctl);
  color: var(--ecume);
  font: 600 var(--fs-petit)/1 var(--police);
  list-style: none;
  cursor: pointer;
}

.langues summary::-webkit-details-marker {
  display: none;
}

.langues summary:hover,
.langues[open] summary {
  background-color: var(--encre-3);
}

.langues__globe {
  width: 18px;
  height: 18px;
}

.langues__chevron {
  width: 16px;
  height: 16px;
}

.langues[open] .langues__chevron {
  transform: rotate(180deg);
}

.langues ul {
  position: absolute;
  top: calc(100% + var(--e-2));
  inset-inline-end: 0;
  min-width: 11rem;
  margin: 0;
  padding: var(--e-1);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-card);
  background-color: var(--encre);
  box-shadow: 0 .75rem 2rem rgba(14, 42, 51, .16);
  list-style: none;
}

.langues__choix {
  display: flex;
  align-items: center;
  min-height: var(--ctl-h);
  padding-inline: var(--e-3);
  border-radius: var(--r-ctl);
  color: var(--ecume);
  font-size: var(--fs-petit);
  text-decoration: none;
}

a.langues__choix:hover {
  background-color: var(--encre-3);
}

.langues__choix.est-active {
  background-color: var(--encre-3);
  font-weight: 700;
}

/* Le bouton du menu : trois traits qui deviennent une croix. */
.entete__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-width: var(--ctl-h);
  min-height: var(--ctl-h);
  padding-inline: var(--e-3);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-ctl);
  background-color: transparent;
  color: var(--ecume);
  font: 600 var(--fs-petit)/1 var(--police);
  cursor: pointer;
}

.entete__menu[aria-expanded="true"] {
  background-color: var(--encre-3);
}

.entete__traits {
  width: 22px;
  height: 22px;
}

.entete__traits .trait {
  transform-box: view-box;
  transform-origin: 12px 12px;
}

.entete__menu[aria-expanded="true"] .trait--1 { transform: rotate(45deg) translateY(5px); }
.entete__menu[aria-expanded="true"] .trait--2 { opacity: 0; }
.entete__menu[aria-expanded="true"] .trait--3 { transform: rotate(-45deg) translateY(-5px); }

@media (prefers-reduced-motion: no-preference) {
  .entete__traits .trait { transition: transform .25s ease, opacity .2s ease; }
  .langues__chevron { transition: transform .2s ease; }
}

/* Sur un téléphone, le bouton ne garde que ses traits ; son nom reste lu. */
@media (max-width: 29.99em) {
  .entete__menu > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .langues__chevron { display: none; }
}

/* Le bouton nuit/jour, retiré des pages en D27 : son style attend son retour. */
.entete__theme {
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl-h);
  margin-inline-end: var(--e-2);
  padding-inline: var(--e-4);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-ctl);
  background-color: transparent;
  color: var(--ecume);
  font: 500 var(--fs-petit)/1 var(--police);
  cursor: pointer;
}

.entete__theme[aria-pressed="true"] {
  background-color: var(--encre-3);
}

@media (min-width: 60em) {
  /* Sur grand écran, le bouton passe après les liens de la page. */
  .entete__theme { order: 1; margin-inline-end: 0; }
}

/* Les images en deux versions : seule celle du thème actif s'affiche, et les
   captures cachées, en loading="lazy", ne se chargent pas (D26). Depuis D27, les pages
   ne citent plus que la version jour : ces règles attendent le retour de la nuit. */
:root[data-theme="nuit"] .jour-seulement,
:root[data-theme="jour"] .nuit-seulement {
  display: none;
}

@media not all and (prefers-color-scheme: light) {
  :root:not([data-theme="jour"]) .jour-seulement { display: none; }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="nuit"]) .nuit-seulement { display: none; }
}

@media (max-width: 74.99em) {
  /* Sans JavaScript : les liens passent sur une deuxième ligne. */
  .entete__nav {
    order: 3;
    flex-basis: 100%;
  }

  .entete__nav ul {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--e-2));
  }

  .entete__nav a {
    padding-inline: var(--e-2);
  }
}

/* Avec JavaScript : un panneau qui se déplie sous l'en-tête, de grandes lignes avec
   leur icône. Aucune classe posée par un script dans le HTML (CSP) : la requête
   média suffit, et rien ne clignote. Jusqu'à 75em : en dessous, les cinq liens, Google
   Play et la langue ne tiennent pas sur une ligne dans toutes les langues. */
@media (max-width: 74.99em) and (scripting: enabled) {
  .entete__nav {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    max-height: calc(100dvh - var(--entete-h));
    overflow-y: auto;
    padding: var(--e-3) var(--gouttiere) var(--e-6);
    border-bottom: 1px solid var(--hair-2);
    background-color: var(--encre);
    box-shadow: 0 1.5rem 3rem rgba(14, 42, 51, .18);
  }

  .entete__nav.est-ouvert {
    display: block;
  }

  .entete__nav ul {
    flex-direction: column;
    gap: var(--e-1);
    overflow: visible;
    margin-inline: 0;
  }

  .entete__nav a {
    gap: var(--e-4);
    min-height: 60px;
    padding-inline: var(--e-2);
    border-radius: var(--r-card);
    font-size: var(--fs-corps);
    font-weight: 600;
  }

  .entete__nav a[aria-current="location"] {
    background-color: var(--encre-3);
  }

  .entete__nav a[aria-current="location"]::after {
    display: none;
  }

  .entete__icone {
    display: block;
  }

  .entete__nav a[aria-current="location"] .entete__icone {
    background-color: var(--encre);
  }

  @media (prefers-reduced-motion: no-preference) {
    .entete__nav.est-ouvert {
      animation: menu-deplie .22s ease-out;
    }

    .entete__nav.est-ouvert li {
      animation: menu-ligne .32s ease-out both;
    }

    .entete__nav.est-ouvert li:nth-child(2) { animation-delay: .03s; }
    .entete__nav.est-ouvert li:nth-child(3) { animation-delay: .06s; }
    .entete__nav.est-ouvert li:nth-child(4) { animation-delay: .09s; }
    .entete__nav.est-ouvert li:nth-child(5) { animation-delay: .12s; }
  }
}

@keyframes menu-deplie {
  from { opacity: 0; transform: translateY(-.5rem); }
  to { opacity: 1; transform: none; }
}

@keyframes menu-ligne {
  from { opacity: 0; transform: translateY(-.35rem); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 60em) {
  .entete__logo img { height: 36px; }
  .entete .badge-play { --badge-h: 36px; }
}

@media (min-width: 75em) {
  .entete__nav { margin-inline-end: var(--e-2); }
  .entete__menu { display: none !important; }
}

/* ------------------------------------------------------- badge et installation */

/* Badge officiel Google Play : jamais retouché. Hauteur ≥ 28 px ; l'espace libre
   (un quart de la hauteur) est tenu par les écarts autour du lien. */
.badge-play {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: var(--ctl-h);
  border-radius: var(--r-chip);
}

.badge-play img {
  width: auto;
  height: var(--badge-h, 40px);
}

.installer {
  --badge-h: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--badge-h) / 4) var(--e-6);
}

.installer--moyen {
  --badge-h: 48px;
}

/* Sous une capture, le badge garde son espace libre (un quart de sa hauteur). */
.deux-colonnes + .installer {
  margin-top: var(--e-6);
}

.installer--centre {
  justify-content: center;
}

/* « Bientôt sur iPhone » : un repère neutre, jamais un badge. */
.bientot {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: var(--e-3);
  border-radius: var(--r-chip);
  background-color: var(--encre-2);
  color: var(--ecume-sourde);
  font-size: var(--fs-legende);
  font-weight: 500;
  line-height: 1.4;
}

/* ------------------------------------------------------------------ lamparo */

/* La lumière de la marque : lune, ondes et halo du fond « signature ». */
.lamparo {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

/* ------------------------------------------------------------------ téléphone */

.telephone {
  width: var(--tel-l, 16rem);
  max-width: 100%;
  margin-inline: auto;
  padding: var(--e-2);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-sheet);
  background-color: var(--encre-3);
}

.telephone img,
.telephone video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
  background-color: var(--encre);
}

/* L'écran animé (D67) : une vraie vidéo de l'app à la place d'une capture, au même
   format. site.js ne la lance que quand on la voit, jamais si le téléphone demande
   moins de mouvement ; sans script, son image fixe reste. Le bouton la met en pause :
   elle boucle plus de 5 secondes (WCAG 2.2.2). */
.telephone--video {
  position: relative;
}

/* Lu par les lecteurs d'écran, invisible à l'écran : ce que montre l'écran animé. */
.pour-lecteur {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ecran-anime__bouton {
  position: absolute;
  inset-block-end: calc(var(--e-2) + var(--e-3));
  inset-inline-end: calc(var(--e-2) + var(--e-3));
  min-width: var(--ctl-h);
  min-height: var(--ctl-h);
  padding-inline: var(--e-3);
  border: 0;
  border-radius: var(--r-ctl);
  background-color: rgba(14, 42, 51, .82);
  color: #FFFFFF;
  font: 600 var(--fs-legende)/1 var(--police);
  cursor: pointer;
}

/* ------------------------------------------------------------ première vue */

/* La première vue s'engage dans un seul monde : la mer à l'heure dorée, sur une
   vraie photo (D37). Elle ne suit pas le thème clair du reste du site : elle
   redéfinit ses jetons en nuit, pour que le texte se lise sur l'image. */
.premiere-vue {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: var(--e-10) var(--e-16);
  background-color: #0B0805;
  color-scheme: dark;
  --encre: #0B0805;
  --encre-2: #171208;
  --encre-3: #0E1418;
  --lamparo: #F2A03D;
  --lamparo-vif: #FFC069;
  --ecume: #FFF6E8;
  --ecume-sourde: #CFC3AF;
  --hair: rgba(232, 220, 200, .16);
  --hair-2: rgba(232, 220, 200, .24);
  --sur-lamparo: #0B0805;
  --focus: #FFC069;
  color: var(--ecume);
}

.premiere-vue__fond {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.premiere-vue__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

/* Le voile. Il descend, jamais de côté : en arabe, la page se renverse. */
.premiere-vue::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(to bottom,
    rgba(6, 10, 14, .88), rgba(6, 10, 14, .66) 48%, rgba(6, 10, 14, .80));
}

.premiere-vue__grille {
  display: grid;
  gap: var(--e-8);
  align-items: center;
}

/* « bon moment » : le seul mot du titre à porter l'accent. */
.premiere-vue h1 em {
  color: var(--lamparo);
  font-style: normal;
}

.premiere-vue__phrase {
  margin-top: var(--e-6);
}

.premiere-vue__visuel {
  --tel-l: 13rem;
}

.premiere-vue .installer {
  margin-top: var(--e-8);
}

.premiere-vue .surtitre {
  color: var(--lamparo-vif);
}

@media (min-width: 60em) {
  .premiere-vue {
    padding-block: var(--e-12) var(--e-16);
  }

  /* Le texte tient une colonne, le téléphone l'autre sur toute la hauteur. */
  .premiere-vue__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--e-12);
    row-gap: var(--e-8);
    align-items: start;
  }

  .premiere-vue__accroche { grid-area: 1 / 1; }
  .premiere-vue__suite { grid-area: 2 / 1; }

  .premiere-vue__visuel {
    --tel-l: 17.5rem;
    grid-area: 1 / 2 / span 2;
    align-self: center;
  }
}

/* Le surtitre : il nomme le métier avant que le titre ne promette. */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
  color: var(--ecume-sourde);
  font-size: var(--fs-legende);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.surtitre::before {
  content: "";
  width: 22px;
  height: 2px;
  background-color: var(--lamparo);
}

/* Les quatre piliers, dont la carte GPS est mise en avant. */
.piliers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3);
  max-width: 44rem;
}

.pilier {
  display: grid;
  align-content: start;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-3) var(--e-4);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-card);
  background-color: rgba(10, 16, 21, .74);
}

.pilier--cle {
  border-color: rgba(242, 160, 61, .55);
  background-image: linear-gradient(rgba(242, 160, 61, .16), rgba(242, 160, 61, .16));
}

.pilier__icone {
  width: 26px;
  height: 26px;
  color: var(--lamparo-vif);
}

.pilier b {
  font-weight: 700;
}

.pilier span {
  color: var(--ecume-sourde);
  font-size: var(--fs-legende);
  line-height: 1.35;
}

@media (min-width: 48em) {
  .piliers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------- la carte GPS et la traîne */

/* Une photo en pleine largeur, en tête de section : elle montre la sortie dont
   la carte parle, sans rien promettre de plus. */
.photo-bandeau {
  margin-bottom: var(--e-12);
  overflow: hidden;
  border-radius: var(--r-card);
}

.photo-bandeau img {
  display: block;
  width: 100%;
  height: auto;
}

/* Les trois temps de la traîne, dans une colonne : c'est une vraie suite. */
.etapes--serrees {
  gap: var(--e-6);
  margin-top: var(--e-8);
}

@media (min-width: 48em) {
  .etapes.etapes--serrees {
    grid-template-columns: minmax(0, 1fr);
  }

  .etapes.etapes--serrees .etape {
    grid-template-columns: var(--ctl-h) minmax(0, 1fr);
    column-gap: var(--e-4);
  }

  .etapes.etapes--serrees .etape__num {
    grid-row: 1 / span 2;
  }

  .etapes.etapes--serrees .etape h3 {
    margin-top: 0;
    align-self: center;
  }

  .etapes.etapes--serrees .etape:not(:last-child)::after {
    content: none;
  }
}

.etapes--serrees + .legende {
  margin-top: var(--e-8);
}

/* ------------------------------------------- conditions de lancer et calcul */

.liste-plate {
  margin-top: var(--e-8);
  border-top: 1px solid var(--hair);
}

.liste-plate > li {
  padding-block: var(--e-4);
  border-bottom: 1px solid var(--hair);
  font-size: var(--fs-intro);
}

/* Les neuf données qui nourrissent le score. */
.matiere {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--e-4);
}

.matiere > li {
  display: grid;
  align-content: start;
  gap: var(--e-1);
  padding: var(--e-4);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  background-color: var(--encre-2);
}

.matiere b {
  font-weight: 700;
}

.matiere span {
  color: var(--ecume-sourde);
  font-size: var(--fs-petit);
  line-height: 1.4;
}

/* Neuf données : trois rangées de trois, pas une rangée bancale. */
@media (min-width: 48em) {
  .matiere {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------ ce que ça change */

.carte {
  padding: var(--e-6);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  background-color: var(--encre-2);
}

.constat {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.constat__avant {
  max-width: none;
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--hair);
  color: var(--ecume-sourde);
  font-size: var(--fs-petit);
}

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

.etapes {
  display: grid;
  gap: var(--e-8);
}

.etape {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--e-3);
}

.etape__num {
  display: grid;
  place-items: center;
  width: var(--ctl-h);
  height: var(--ctl-h);
  border: 1px solid var(--hair-2);
  border-radius: 50%;
  font-weight: 700;
}

.etape h3 {
  margin-top: var(--e-2);
}

@media (min-width: 48em) {
  .etapes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-6);
  }

  .etape:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--ctl-h) / 2);
    inset-inline-start: calc(var(--ctl-h) + var(--e-3));
    inset-inline-end: calc(-1 * var(--e-3));
    border-top: 1px dashed var(--hair-2);
  }
}

/* ------------------------------------------------------------------ du bord */

.points {
  margin-top: var(--e-8);
  border-top: 1px solid var(--hair);
}

.points > li {
  display: grid;
  gap: var(--e-2);
  padding-block: var(--e-6);
  border-bottom: 1px solid var(--hair);
}

.carnet__forfait {
  margin-top: var(--e-4);
}

.deux-colonnes > .telephone {
  --tel-l: 16rem;
}

@media (min-width: 60em) {
  .deux-colonnes > .telephone { --tel-l: 18.75rem; }
}

/* Les cinq niveaux d'activité, toujours avec leurs chiffres. */
.echelle {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--e-1);
  margin-top: var(--e-3);
}

.echelle > li {
  display: grid;
  justify-items: start;
  gap: 2px;
}

.echelle__point {
  width: 12px;
  height: 12px;
  margin-bottom: var(--e-1);
  border-radius: 50%;
  background-color: var(--act-0);
}

.echelle > li:nth-child(2) .echelle__point { background-color: var(--act-1); }
.echelle > li:nth-child(3) .echelle__point { background-color: var(--act-2); }
.echelle > li:nth-child(4) .echelle__point { background-color: var(--act-3); }
.echelle > li:nth-child(5) .echelle__point { background-color: var(--act-4); }

.echelle__nom {
  font-size: var(--fs-legende);
  font-weight: 500;
  line-height: 1.4;
}

.echelle__plage {
  color: var(--ecume-sourde);
  font-size: var(--fs-donnee);
  font-weight: 500;
  line-height: 1.3;
}

/* ------------------------------------------------------------------ schémas */

.schema {
  padding: var(--e-6);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  background-color: var(--encre-2);
}

.schema figcaption {
  margin-top: var(--e-4);
  color: var(--ecume-sourde);
  font-size: var(--fs-legende);
  font-weight: 500;
  line-height: 1.4;
}

.schema__repere {
  color: var(--ecume-sourde);
  font-size: var(--fs-legende);
  font-weight: 500;
  line-height: 1.4;
}

.schema__cadre {
  position: relative;
}

.schema__dessin {
  width: 100%;
  height: auto;
}

.marqueur {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--ecume-sourde);
  border-radius: 50%;
  background-color: var(--encre);
  color: var(--ecume);
  font-size: var(--fs-donnee);
  font-weight: 600;
  line-height: 1;
}

.schema__cadre .marqueur {
  position: absolute;
  transform: translate(-50%, -50%);
}

/* Place des repères numérotés sur les schémas, en % du dessin. */
/* Un graphique et une carte ne se retournent pas en arabe (D30) : à l'intérieur du
   cadre, le sens reste celui du dessin. La légende, elle, suit la lecture. */
:lang(ar) .barre24,
:lang(ar) .schema__cadre {
  direction: ltr;
}

/* Les positions de la carte et des barres horaires restent physiques, à dessein :
   une carte et un graphique ne se retournent pas en arabe (D30). */
.marqueur--large-1 { left: 31%; top: 84%; }
.marqueur--large-2 { left: 88%; top: 20%; }
.marqueur--large-3 { left: 62%; top: 60%; }
.marqueur--large-4 { left: 79%; top: 68%; }
.marqueur--traine-1 { left: 13%; top: 72%; }
.marqueur--traine-2 { left: 55%; top: 44%; }
.marqueur--traine-3 { left: 31%; top: 80%; }

.schema__legende {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

.schema__legende li {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--fs-petit);
  line-height: 1.35;
}

@media (min-width: 30em) {
  .schema__legende {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--e-4);
  }
}

/* Traits des schémas : filets fins, pointillés écume pour les routes. */
.s-grille { fill: none; stroke: var(--hair); stroke-width: 1; }
.s-terre { fill: var(--encre-3); stroke: var(--hair-2); stroke-width: 1.5; }
.s-route,
.s-trace { fill: none; stroke: var(--ecume); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 7; }
.s-route { stroke-opacity: .8; }
.s-trace { stroke-opacity: .6; }
.s-fin { fill: none; stroke: var(--ecume-sourde); stroke-width: 1.5; stroke-linecap: round; }
.s-sens { fill: none; stroke: var(--ecume); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-toi,
.s-prise { fill: var(--ecume); }
.s-halo { fill: none; stroke: var(--ecume); stroke-opacity: .35; stroke-width: 1.5; }
.s-compas { fill: var(--encre); stroke: var(--hair-2); stroke-width: 1.5; }
.s-aiguille-nord { fill: var(--ecume); }
.s-aiguille-sud { fill: var(--ecume-sourde); }

.s-grille,
.s-terre,
.s-route,
.s-trace,
.s-fin,
.s-sens,
.s-halo,
.s-compas {
  vector-effect: non-scaling-stroke;
}

/* L'alerte : la veille, puis la barre des 24 heures du lendemain. */
.schema-alerte {
  margin-top: var(--e-12);
}

.schema-alerte__corps {
  display: grid;
  gap: var(--e-8);
}

.schema-alerte__veille {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--e-3);
}

.schema-alerte__veille .picto {
  grid-row: span 2;
  width: 44px;
  height: auto;
}

.schema-alerte__fenetre {
  margin-top: 2px;
  font-weight: 600;
}

.barre24 {
  margin-top: var(--e-6);
}

.barre24__piste {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2px;
  height: 20px;
}

.barre24__piste > span {
  grid-row: 1;
  border-radius: 3px;
  background-color: var(--act-0);
}

.barre24__piste > .n1 { background-color: var(--act-1); }
.barre24__piste > .n2 { background-color: var(--act-2); }
.barre24__piste > .n3 { background-color: var(--act-3); }
.barre24__piste > .n4 { background-color: var(--act-4); }

/* La fenêtre : une zone ambre à 8 % bornée par deux filets. */
.barre24__piste > .barre24__zone {
  margin-block: -12px;
  border-inline: 1px solid var(--zone-filet);
  border-radius: 0;
  background-color: var(--zone-fond);
}

.barre24__heures {
  position: relative;
  height: 1.4em;
  margin-top: var(--e-4);
  color: var(--ecume-sourde);
  font-size: var(--fs-donnee);
  font-weight: 500;
}

.barre24__heures > span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.barre24__heures > span:first-child { transform: none; }
.barre24__heures > span:last-child { transform: translateX(-100%); }

/* Positions dans la barre et sur l'axe : des classes, aucun style dans le HTML (CSP). */
.plage-00-05 { grid-column: 1 / 6; }
.plage-05-08 { grid-column: 6 / 9; }
.plage-08-11 { grid-column: 9 / 12; }
.plage-11-15 { grid-column: 12 / 16; }
.plage-15-18 { grid-column: 16 / 19; }
.plage-18-20 { grid-column: 19 / 21; }
.plage-20-24 { grid-column: 21 / 25; }

.barre24__heures > span:nth-child(1) { left: 0; }
.barre24__heures > span:nth-child(2) { left: 25%; }
.barre24__heures > span:nth-child(3) { left: 50%; }
.barre24__heures > span:nth-child(4) { left: 75%; }
.barre24__heures > span:nth-child(5) { left: 100%; }

@media (min-width: 48em) {
  .schema-alerte__corps {
    grid-template-columns: 12rem minmax(0, 1fr);
    align-items: center;
    gap: var(--e-12);
  }
}

/* ------------------------------------------------------------------ en bateau */

.fonction {
  display: grid;
  align-content: start;
  gap: var(--e-3);
}

.fonction .schema {
  margin-top: var(--e-3);
}

/* ------------------------------------------------------------------ forfaits */

.forfaits {
  display: grid;
  gap: var(--e-3);
}

.forfait {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.forfait__acces {
  color: var(--ecume-sourde);
  font-size: var(--fs-petit);
}

.forfait__plus {
  margin-top: var(--e-4);
  color: var(--ecume-sourde);
  font-size: var(--fs-petit);
}

.forfait__liste {
  margin-top: var(--e-4);
  border-top: 1px solid var(--hair);
}

.forfait__plus + .forfait__liste {
  margin-top: var(--e-2);
}

.forfait__liste > li {
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--hair);
}

.forfaits + .installer {
  margin-top: var(--e-8);
}

@media (min-width: 48em) {
  .forfaits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ données */

.engagements {
  border-top: 1px solid var(--hair);
}

.engagements > li {
  padding-block: var(--e-6);
  border-bottom: 1px solid var(--hair);
}

.engagements strong {
  display: block;
  margin-bottom: var(--e-2);
  font-size: var(--fs-sous-titre);
  line-height: 1.25;
}

.lien-suite {
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl-h);
  margin-top: var(--e-4);
  color: var(--lagune-nuit);
  font-weight: 500;
}

/* ------------------------------------------------------------------ questions */

.faq {
  border-top: 1px solid var(--hair);
}

.faq details {
  border-bottom: 1px solid var(--hair);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--e-16);
  padding-block: var(--e-3);
  font-size: var(--fs-sous-titre);
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: var(--e-2);
  border-right: 2px solid var(--ecume-sourde);
  border-bottom: 2px solid var(--ecume-sourde);
  transform: translateY(-3px) rotate(45deg);
}

.faq details[open] > summary::after {
  transform: translateY(3px) rotate(-135deg);
}

.faq summary:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.faq__reponse {
  padding-bottom: var(--e-6);
}

/* ------------------------------------------------------------------ dernier appel */

.appel {
  position: relative;
  overflow: clip;
  isolation: isolate;
  text-align: center;
}

.appel__contenu,
.perdu__contenu {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--e-4);
  padding-top: 280px;
}

/* La lune au-dessus du titre ; le halo déborde vers le haut, sans bord net. */
.appel .lamparo,
.perdu .lamparo {
  top: -300px;
  width: 1000px;
}

.appel p {
  margin-inline: auto;
}

.appel .installer {
  margin-top: var(--e-4);
}

/* ------------------------------------------------------------------ pied de page */

.pied {
  padding-block: var(--e-12);
  border-top: 1px solid var(--hair);
}

.pied__grille {
  display: grid;
  gap: var(--e-6);
}

.pied__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl-h);
  border-radius: var(--r-chip);
}

.pied__logo img {
  width: auto;
  height: 40px;
}

.pied__marque .legende {
  margin-top: var(--e-3);
}

.pied__liens a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl-h);
  font-size: var(--fs-petit);
}

.pied__contact {
  font-size: var(--fs-petit);
}

.pied__marques {
  max-width: none;
  padding-top: var(--e-6);
  border-top: 1px solid var(--hair);
}

@media (min-width: 60em) {
  .pied__grille {
    grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
    column-gap: var(--e-8);
    align-items: start;
  }

  .pied__marques {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------ pages légales */

.page-legale {
  padding-block: var(--e-12) var(--e-16);
}

.texte-legal > h1 {
  font-size: var(--fs-titre);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -.014em;
}

.texte-legal h2 {
  margin-top: var(--e-12);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.texte-legal h3 {
  margin-top: var(--e-8);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.texte-legal p,
.texte-legal ul,
.texte-legal ol,
.texte-legal .tableau,
.texte-legal .encadre {
  margin-top: var(--e-4);
}

.texte-legal ul:not([class]),
.texte-legal ol:not([class]) {
  padding-left: 1.25em;
}

.texte-legal li + li {
  margin-top: var(--e-2);
}

.texte-legal li::marker {
  color: var(--ecume-sourde);
}

.texte-legal .date {
  margin-top: var(--e-2);
  color: var(--ecume-sourde);
}

.tableau {
  overflow-x: auto;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-card);
}

.tableau table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--fs-petit);
  line-height: 1.45;
}

.tableau th,
.tableau td {
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--hair-2);
  text-align: left;
  vertical-align: top;
}

.tableau tbody tr:last-child > td {
  border-bottom: 0;
}

.tableau th {
  background-color: var(--encre-2);
  font-weight: 600;
}

.encadre {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-3);
  padding: var(--e-4) var(--e-6) var(--e-4) var(--e-4);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-card);
  background-color: var(--encre-2);
}

.encadre__icone {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background-color: var(--lamparo);
  color: var(--sur-lamparo);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.texte-legal .encadre p {
  margin-top: 0;
}

/* ------------------------------------------------------------------ page perdue */

.perdu {
  position: relative;
  overflow: clip;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding-block: var(--e-12) var(--e-16);
  text-align: center;
}

.perdu p {
  margin-inline: auto;
}

/* Le seul bouton ambre du site : l'action principale de la page perdue. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ctl-h);
  margin-top: var(--e-4);
  padding-inline: var(--e-6);
  border-radius: var(--r-ctl);
  background-color: var(--lamparo);
  color: var(--sur-lamparo);
  font-weight: 700;
  text-decoration: none;
}

.bouton:hover {
  background-color: var(--lamparo-vif);
}

/* La couverture, annoncée sous l'appel à installer (refonte du 11/10, D33). */
.disponibilite {
  margin-top: var(--e-3);
  color: var(--ecume-sourde);
  font: 500 var(--fs-petit)/1.5 var(--police);
}

.disponibilite strong { color: var(--ecume); font-weight: 600; }


/* ------------------------------------------------------------- les animations */

/* Les animations de l'accueil (D58). Rien ne bouge sans script, ni quand le
   téléphone demande moins de mouvement : site.js ne pose la classe « anime » que
   dans ce cas, et sans elle tout reste affiché, immobile. La trace GPS et le
   bandeau de notification n'existent qu'avec elle. Chaque animation joue une fois,
   et dure moins de 5 secondes (WCAG 2.2.2). */

/* Changer de page ou de langue se fait en fondu, sans flash blanc. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

.gps-trace,
.bandeau {
  display: none;
}

@media screen {
  /* Les téléphones montent et s'éclairent à l'arrivée sur l'écran. La transition
     n'est que sur l'état visible : quand le script cache les téléphones, ils
     disparaissent d'un coup, sans fondu à l'envers. */
  .anime .bloc .telephone.est-visible {
    transition: opacity .7s ease-out, transform .7s cubic-bezier(.2, .7, .2, 1);
  }

  .anime .bloc .telephone:not(.est-visible) {
    opacity: 0;
    transform: translateY(2rem);
  }

  .anime .telephone--gps,
  .anime .telephone--alertes {
    position: relative;
  }

  /* La route se trace du bateau jusqu'au point, puis le point lance trois ondes.
     La trace est posée exactement sur l'image : mêmes marges que la capture, et le
     même repère de 600 × 1300 que la maquette de la carte (outils/maquettes). La
     carte ne se retourne pas en arabe (D30) : la trace non plus, d'où « left ». */
  .anime .gps-trace {
    display: block;
    position: absolute;
    top: var(--e-2);
    left: var(--e-2);
    width: calc(100% - 2 * var(--e-2));
    height: auto;
    overflow: visible;
    pointer-events: none;
  }

  .gps-trace__route {
    fill: none;
    stroke: var(--lamparo-vif);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
  }

  .gps-trace__onde {
    fill: none;
    stroke: var(--lamparo-vif);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
  }

  .est-visible .gps-trace__route {
    animation: trace-route 3.6s .6s ease-in-out both;
  }

  .est-visible .gps-trace__onde {
    animation: onde-du-point 1.2s 1.9s ease-out 3 both;
  }

  /* La notification glisse du haut de l'écran, reste le temps de la lire, et
     repart : l'écran des alertes redevient la vraie capture. */
  .anime .telephone--alertes {
    overflow: clip;
  }

  .anime .bandeau {
    display: block;
    position: absolute;
    top: calc(var(--e-2) + .75rem);
    left: calc(var(--e-2) + (100% - 2 * var(--e-2)) * .03);
    width: calc((100% - 2 * var(--e-2)) * .94);
    opacity: 0;
    transform: translateY(-130%);
    pointer-events: none;
  }

  .bandeau img {
    border-radius: .65rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
  }

  .est-visible .bandeau {
    animation: notification-arrive 4.8s .9s both;
  }
}

@keyframes trace-route {
  0% { stroke-dashoffset: 1; opacity: .95; }
  40% { stroke-dashoffset: 0; opacity: .95; }
  75% { stroke-dashoffset: 0; opacity: .95; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes onde-du-point {
  from { transform: scale(1); opacity: .9; }
  to { transform: scale(4.5); opacity: 0; }
}

@keyframes notification-arrive {
  0% { transform: translateY(-130%); opacity: 0; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  12% { transform: translateY(0); opacity: 1; }
  88% { transform: translateY(0); opacity: 1; animation-timing-function: ease-in; }
  100% { transform: translateY(-130%); opacity: 0; }
}

/* ------------------------------------------------------------------ spot partagé */

/* La page d'un spot partagé (D73) : la mise en page de la page perdue, le nom du spot
   en titre. Le nom vient de n'importe qui : il se coupe où il faut, sans déborder. */
.spot__nom {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.spot__details {
  display: grid;
  justify-items: center;
  gap: var(--e-2);
}

.spot__details .lien-suite {
  margin-top: 0;
}

.spot__coordonnees bdi {
  font-weight: 600;
}

.spot__langues ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--e-4);
  margin-top: var(--e-6);
  padding: 0;
  list-style: none;
}

.spot__langues a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl-h);
  color: var(--ecume-sourde);
  font-size: var(--fs-petit);
}

.spot__langues a[aria-current="page"] {
  color: var(--ecume);
  font-weight: 600;
}