/* =============================================================================
   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;
}

/* ------------------------------------------------------------------ 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);

  /* é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 */
}

@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(--lamparo-vif);
  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);
  left: 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 */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--hair);
  background-color: var(--encre);
}

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

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

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

.entete__nav ul {
  display: flex;
  column-gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.entete__nav a {
  display: flex;
  align-items: center;
  min-height: var(--ctl-h);
  padding-inline: var(--e-3);
  border-radius: var(--r-ctl);
  font-size: var(--fs-petit);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.entete__nav a:hover {
  text-decoration: underline;
}

.entete__menu {
  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: transparent;
  color: var(--ecume);
  font: 500 var(--fs-petit)/1 var(--police);
  cursor: pointer;
}

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

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

@media (max-width: 59.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 menu qui se replie sous l'en-tête. Aucune classe posée par
   un script dans le HTML (CSP) : la requête média suffit, et rien ne clignote. */
@media (max-width: 59.99em) and (scripting: enabled) {
  .entete__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--e-2) var(--gouttiere) var(--e-4);
    border-bottom: 1px solid var(--hair-2);
    background-color: var(--encre);
  }

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

  .entete__nav ul {
    flex-direction: column;
    overflow: visible;
    margin-inline: 0;
  }

  .entete__nav a {
    padding-inline: 0;
    border-bottom: 1px solid var(--hair);
    border-radius: 0;
    font-size: var(--fs-corps);
  }
}

@media (min-width: 60em) {
  .entete__logo img { height: 36px; }
  .entete__nav { margin-right: var(--e-3); }
  .entete__menu { display: none !important; }
  .entete .badge-play { --badge-h: 40px; }
}

/* ------------------------------------------------------- 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;
}

.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 {
  width: 100%;
  border-radius: var(--r-card);
  background-color: var(--encre);
}

/* ------------------------------------------------------------------ ouverture */

.ouverture {
  position: relative;
  overflow-x: clip;
  padding-block: var(--e-8) var(--e-16);
}

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

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

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

.ouverture__visuel {
  --tel-l: 15rem;
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--tel-l) * .7);
}

.ouverture__visuel .lamparo {
  top: calc(var(--tel-l) * -1.333);
  width: calc(var(--tel-l) * 3.333);
}

@media (min-width: 60em) {
  .ouverture {
    padding-block: var(--e-12) var(--e-24);
  }

  .ouverture__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  /* Le titre démarre à hauteur de la lune, pas au milieu du téléphone. */
  .ouverture__texte {
    padding-top: 8.5rem;
  }

  .ouverture__visuel {
    --tel-l: 18.75rem;
  }
}

/* ------------------------------------------------------------ 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);
    left: calc(var(--ctl-h) + var(--e-3));
    right: 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. */
.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 rgba(232, 220, 200, .24);
  border-radius: 0;
  background-color: rgba(242, 160, 61, .08);
}

.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(--encre);
  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(--encre);
  font-weight: 700;
  text-decoration: none;
}

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