/* Site Perséides — styles communs à l'accueil et à la page LYRA.
   Reconstruits depuis la remise du 22/10/2026 : les valeurs sont celles de la maquette,
   converties de styles en ligne en classes pour que le téléphone puisse les redéfinir. */

/* ---------- Les polices, servies par le site ---------- */
/* Elles sont dans /polices, sous licence SIL OFL 1.1 — les deux fichiers LICENSE-*.txt
   y sont joints. Aucune page ne contacte un domaine Google pour s'afficher : c'est une
   décision de M, surveillée par server/__tests__/promesses-confidentialite-textes.test.js.
   Atkinson Hyperlegible Next est la même police que celle déjà servie par l'application.
   Archivo porte ses deux axes variables — wdth 62..125 et wght 100..900 — parce que le
   site l'emploie à font-stretch 112 %. Un fichier à un seul axe rendrait la largeur
   normale, et toutes les pages changeraient d'allure sans qu'aucun test ne le dise. */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/polices/atkinson-hyperlegible-next-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/polices/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/polices/archivo-latin-wdth-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/polices/archivo-latin-ext-wdth-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Socle ---------- */

body { margin: 0; background: #020306; }
a { color: #5EE0CB; }
a:hover { color: #9CF0E2; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #5EE0CB; outline-offset: 3px; }

.page {
  background: #020306;
  color: #FFFFFF;
  font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  overflow-x: hidden;
}

.contenu { max-width: 1280px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }

/* Les deux dégradés de la remise, un par page. */
.degrade-accueil {
  --degrade-page: linear-gradient(180deg, #030810 0%, #061324 25%, #0A1F37 55%, #0D2742 78%, #10304F 90%, #17406B 100%);
}
.degrade-lyra {
  --degrade-page: linear-gradient(180deg, #030810 0%, #061324 22%, #0A1F37 52%, #0D2742 78%, #10304F 91%, #17406B 100%);
}

.fond-page {
  background-image: url('/actifs/tuile_etoiles.svg'), var(--degrade-page);
  background-size: 1200px 1200px, 100% 100%;
  background-repeat: repeat, no-repeat;
}

.cretes-bas {
  background-image: url('/actifs/cretes_bas.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 240px;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: #5EE0CB;
  color: #04201B;
  padding: 12px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
}
.lien-evitement:focus { left: 16px; top: 16px; }

/* ---------- Héros et ciel ---------- */

/* Le dégradé du héros reprend celui que le ciel peint lui-même : la page ne part jamais
   d'un noir plat, même avant le premier rendu du canvas ou sans JavaScript. */
.heros {
  position: relative;
  /* Un contexte d'empilement explicite, pour que le ciel puisse passer DERRIERE le
     contenu sans passer derriere le degrade du heros lui-meme. */
  z-index: 0;
  height: 940px;
  overflow: hidden;
  background: linear-gradient(180deg, #020306 0%, #040B16 42%, #0C2440 66%, #1D4B78 80%, #1D4B78 100%);
}

/* Le ciel est decoratif (aria-hidden) : il se peint derriere tout le contenu du heros.
   Sans cela, a largeur telephone ou le texte et les commandes repassent en flux, le canvas
   absolu les recouvre et les rend inertes au doigt : mesure du 22/10/2026, 6 elements
   interactifs masques sur l'accueil et 5 sur LYRA, alors que le bureau etait propre. */
.heros-ciel {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: pan-y;
}

.bandeau { position: absolute; top: 0; left: 0; right: 0; }

.bandeau-interieur {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 40px 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marque { display: flex; align-items: center; gap: 20px; }
.marque-sep { width: 1px; height: 28px; background: rgba(255, 255, 255, 0.3); }
.logo { display: block; line-height: 0; }
.logo-perseides { height: 26px; width: auto; }
.logo-perseides-petit { height: 16px; width: auto; opacity: 0.8; }
.logo-lyra { height: 38px; width: auto; }

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  font-family: 'Archivo', sans-serif;
  font-stretch: 112%;
  font-size: 15px;
}
.nav a { color: #FFFFFF; text-decoration: none; padding: 10px 0; }
.nav-cta {
  color: #04201B;
  background: #5EE0CB;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: 600;
}
.nav a.nav-cta { color: #04201B; }

.heros-texte { position: absolute; left: 0; right: 0; top: 170px; pointer-events: none; }
.heros-bloc { max-width: 720px; pointer-events: auto; }

.badge {
  margin: 0 0 22px;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid rgba(94, 224, 203, 0.5);
  color: #5EE0CB;
  font-size: 15px;
}

.titre-geant {
  margin: 0 0 28px;
  font-family: 'Archivo', sans-serif;
  font-stretch: 112%;
  font-weight: 300;
  font-size: clamp(42px, 5.6vw, 80px);
  line-height: 1;
  letter-spacing: -0.025em;
}

.chapeau { margin: 0 0 40px; font-size: clamp(18px, 1.6vw, 21px); color: #C9DAEC; max-width: 600px; }

.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.bouton {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 4px;
  background: #5EE0CB;
  color: #04201B;
  font-weight: 700;
  text-decoration: none;
}
.bouton:hover { color: #04201B; }

.bouton-second {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 26px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(2, 3, 6, 0.35);
  color: #FFFFFF;
  text-decoration: none;
}
.bouton-second:hover { color: #FFFFFF; }

/* Les deux boutons de la section LYRA de l'accueil : 54 px, et le second sans fond. */
.bouton-54 { min-height: 54px; padding: 0 28px; }
.bouton-second-54 { min-height: 54px; padding: 0 24px; background: none; }

/* Le troisieme appel de la section LYRA : un lien, pas un bouton, dans le turquoise de l'action. */
.lien-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  color: #5EE0CB;
  font-weight: 700;
  text-decoration: none;
}
.lien-action:hover { text-decoration: underline; }

.ciel-commandes {
  position: absolute;
  right: 40px;
  bottom: 36px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.ciel-btn {
  height: 44px;
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(2, 3, 6, 0.5);
  color: #FFFFFF;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.ciel-btn-icone {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(2, 3, 6, 0.5);
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Sections ---------- */

/* Le haut et le bas de chaque section viennent de la maquette, section par section,
   passés en --pt / --pb : les côtés restent redéfinissables par la requête de média. */
.section {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: var(--pt, 40px) 40px var(--pb, 120px);
}

.titre {
  margin: 0 0 24px;
  font-family: 'Archivo', sans-serif;
  font-stretch: 112%;
  font-weight: 300;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.titre-52 { font-size: clamp(32px, 3.7vw, 52px); }
.titre-44 { font-size: clamp(30px, 3.2vw, 44px); }

.intro { margin: 0 0 56px; color: #C9DAEC; font-size: clamp(18px, 1.6vw, 22px); max-width: 700px; }
.intro-20 { font-size: clamp(18px, 1.5vw, 20px); max-width: 680px; }

.sous-titre {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-stretch: 112%;
  font-weight: 400;
  font-size: 26px;
}
.sous-titre-24 { font-size: 24px; }
.sous-titre-22 { font-size: 22px; }
.sous-titre-21 { font-size: 21px; }
.sous-titre-18 { font-size: 18px; }

.texte-doux { margin: 0; color: #C9DAEC; }
.texte-gris { color: #9DB4CE; }
.texte-clair { margin: 0; color: #FFFFFF; }

.deco {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.deco-persee {
  background-image: url('/actifs/persee_deco.svg');
  right: -40px;
  top: 60px;
  width: 520px;
  height: 520px;
  opacity: 0.6;
}
.deco-lyre {
  background-image: url('/actifs/lyre_deco.svg');
  right: 0;
  top: 40px;
  width: 420px;
  height: 420px;
  opacity: 0.55;
}

/* Les grilles */
.grille { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grille-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grille-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px; }
.grille-nue { margin: 0; padding: 0; list-style: none; }

.carte { display: flex; flex-direction: column; gap: 14px; }
.carte-10 { gap: 10px; }
.carte-8 { gap: 8px; }
.carte-6 { gap: 6px; }
.carte-filet { padding-top: 22px; border-top: 2px solid #5EE0CB; }

.etape { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 2px solid #5EE0CB; }
.etape-2 { border-top-color: rgba(94, 224, 203, 0.75); }
.etape-3 { border-top-color: rgba(94, 224, 203, 0.5); }
.etape-4 { border-top-color: rgba(94, 224, 203, 0.3); }
.etape-num { font-family: 'Archivo', sans-serif; font-stretch: 112%; font-size: 15px; color: #5EE0CB; }

.citation { border-left: 2px solid #5EE0CB; padding: 8px 0 8px 40px; max-width: 900px; }
.citation-forte {
  margin: 0 0 18px;
  font-family: 'Archivo', sans-serif;
  font-stretch: 112%;
  font-weight: 300;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.citation-suite { margin: 0; color: #C9DAEC; font-size: 19px; }

.exergue {
  position: relative;
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-stretch: 112%;
  font-weight: 300;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 960px;
}

.conclusion {
  margin: 56px 0 0;
  padding-top: 28px;
  border-top: 1px solid rgba(201, 218, 236, 0.2);
  color: #FFFFFF;
  font-size: 19px;
  max-width: 820px;
}

/* Les duos texte / écran */
.duo { display: flex; flex-wrap: wrap; gap: 80px; align-items: center; }
.duo-64 { gap: 64px; }
.duo-inverse { flex-wrap: wrap-reverse; }
.duo-texte { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.duo-texte-20 { gap: 20px; }
.duo-texte-560 { flex: 999 1 560px; }
.duo-texte-460 { flex: 1 1 460px; }
.duo-visuel { flex: 1 1 320px; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.duo-visuel-420 { flex: 1 1 420px; display: block; }

.telephone {
  width: 320px;
  max-width: 100%;
  border-radius: 40px;
  border: 1px solid rgba(201, 218, 236, 0.3);
  background: #0B2340;
  padding: 12px;
  box-sizing: border-box;
}
.telephone-300 { width: 300px; }
.telephone img { display: block; width: 100%; height: auto; border-radius: 30px; }
.telephone-300 img { border-radius: 28px; }

.legende { margin: 0; font-size: 15px; color: #9DB4CE; }
.legende-haut { margin-top: 10px; }

/* La journée avec LYRA */
.journee { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.journee li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  padding: 26px 0;
  border-top: 1px solid rgba(201, 218, 236, 0.2);
}
.journee li:last-child { border-bottom: 1px solid rgba(201, 218, 236, 0.2); }
.journee-heure {
  flex: 0 0 120px;
  font-family: 'Archivo', sans-serif;
  font-stretch: 112%;
  font-size: 24px;
  color: #5EE0CB;
}
.journee-corps { flex: 1 1 520px; min-width: 0; }
.journee-corps h3 { margin: 0 0 6px; }

/* La carte de dictée */
.note {
  border-radius: 20px;
  background: #0E2A47;
  border: 1px solid rgba(201, 218, 236, 0.22);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.note-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.note-ecoute {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(94, 224, 203, 0.15);
  color: #5EE0CB;
  font-size: 14px;
}
.note-dictee {
  padding: 16px 18px;
  border-radius: 4px;
  border: 1px solid #6F8CB0;
  background: #0B2340;
  font-size: 18px;
  line-height: 1.5;
}
.note-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.note-case { padding: 12px 14px; border-radius: 8px; background: #123459; }
.note-case-etiquette { font-size: 14px; color: #9DB4CE; }
.note-case-valeur { font-family: 'Archivo', sans-serif; font-size: 20px; }
.note-case-texte { font-size: 17px; }
.note-fin { display: flex; gap: 10px; align-items: center; color: #5EE0CB; }

.exemples { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.exemple {
  padding: 8px 14px;
  border-radius: 4px;
  border: 1px solid rgba(201, 218, 236, 0.35);
  color: #C9DAEC;
  font-size: 16px;
}

/* Le profil */
.encart {
  margin-top: 8px;
  padding: 22px 24px;
  border-radius: 12px;
  background: rgba(94, 224, 203, 0.08);
  border: 1px solid rgba(94, 224, 203, 0.28);
}
.encart h3 { margin: 0 0 6px; }

/* Les trois écrans du suivi */
.ecrans { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; }
.ecrans figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.centre { margin: 40px auto 0; max-width: 760px; text-align: center; color: #C9DAEC; }
.centre-petit { margin: 12px auto 0; max-width: 760px; text-align: center; font-size: 15px; color: #9DB4CE; }

/* Le mode urgence */
.urgence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
  padding: 32px 40px;
  border-radius: 16px;
  border: 1px solid rgba(255, 107, 107, 0.45);
  background: rgba(255, 107, 107, 0.06);
}
.urgence-pastille {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 999px;
  background: #FF6B6B;
  color: #2A0606;
  font-family: 'Archivo', sans-serif;
  font-stretch: 112%;
  font-weight: 600;
  font-size: 20px;
}
.urgence-corps { flex: 1 1 420px; min-width: 0; }
.urgence-corps h2 { margin: 0 0 6px; }

/* Le formulaire de la bêta */
.beta { max-width: 860px; margin: 0 auto; padding: 80px 40px 100px; box-sizing: border-box; text-align: center; }
.beta-signe { width: 72px; height: 72px; }
.beta h2 { margin: 20px 0 14px; }
.beta-intro { margin: 0 0 36px; color: #C9DAEC; font-size: 19px; }
.beta-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: flex-end;
  text-align: left;
}
.beta-champ { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.beta-champ label { font-size: 15px; color: #C9DAEC; }
.beta-champ input {
  min-height: 56px;
  padding: 0 18px;
  border-radius: 4px;
  border: 1px solid #6F8CB0;
  background: #0B2340;
  color: #FFFFFF;
  font: inherit;
  box-sizing: border-box;
  width: 100%;
}
.beta-envoyer {
  min-height: 56px;
  padding: 0 30px;
  border-radius: 4px;
  border: 0;
  background: #5EE0CB;
  color: #04201B;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.beta-envoyer[disabled] { opacity: 0.6; cursor: default; }
.beta-reponse { margin: 24px 0 0; color: #5EE0CB; }
.beta-erreur { margin: 24px 0 0; color: #FFB4B4; }

/* Les textes réglementaires */
.mentions {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 40px 80px;
  box-sizing: border-box;
  font-size: 15px;
  color: #9DB4CE;
}
.mentions p { margin: 0 0 14px; }
.mentions p:last-child { margin-bottom: 0; }

/* Le partenariat et le contact */
.contact { margin-top: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

/* ---------- Pied de page ---------- */

.pied { background: #0E2A47; }
.pied-interieur {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 40px 44px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  font-size: 15px;
  color: #C9DAEC;
}
.pied-bloc { display: flex; flex-direction: column; gap: 6px; }
.pied-legal { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.pied-legal a, .pied a { color: #FFFFFF; }


/* ---------- Les cinq ecarts de la page LYRA ---------- */
/* Places avant les requetes de media : a <=860 px, .bandeau-interieur reprend la main,
   et a <=760 px le heros passe en flux, ou top et max-width n'operent plus. */
.bandeau-interieur-32 { padding-top: 32px; }
.nav-28 { gap: 28px; }
.heros-texte-180 { top: 180px; }
.heros-bloc-680 { max-width: 680px; }
.titre-geant-84 { font-size: clamp(42px, 5.9vw, 84px); }
.chapeau-580 { max-width: 580px; }
/* ---------- Téléphone ---------- */

@media (max-width: 860px) {
  .section { padding-left: 20px; padding-right: 20px; padding-bottom: 72px; }
  .bandeau-interieur { padding: 20px 20px 0; gap: 12px; }
  .heros-texte { padding: 0; }
  .contenu { padding: 0 20px; }
  .beta, .mentions { padding-left: 20px; padding-right: 20px; }
  .pied-interieur { padding: 24px 20px 32px; }
  .duo, .duo-64 { gap: 40px; }
  .grille, .grille-320 { gap: 32px; }
  .deco { display: none; }
  .cretes-bas { height: 120px; }
}

@media (max-width: 760px) {
  .heros { height: auto; min-height: 720px; }
  /* A cette largeur la navigation du bandeau tient sur deux lignes et descend a 142 px :
     un degagement de 120 px faisait passer le titre de l'accueil sous elle, de 22 px. */
  .heros-texte { position: static; padding: 160px 20px 0; }
  .heros-bloc { max-width: none; }
  .nav { gap: 14px 18px; font-size: 14px; width: 100%; }
  .nav a { padding: 6px 0; }
  .ciel-commandes {
    position: static;
    justify-content: flex-start;
    padding: 28px 20px 36px;
  }
  .ciel-btn { font-size: 14px; padding: 0 12px; }
  .marque { gap: 12px; }
  .journee-heure { flex: 0 0 auto; }
  .journee-corps { flex: 1 1 100%; }
  .note { padding: 20px; }
  .note-cases { grid-template-columns: 1fr; }
  .urgence { padding: 24px 20px; }
  .citation { padding-left: 20px; }
  .telephone, .telephone-300 { width: 100%; max-width: 320px; }
  .beta-form { flex-direction: column; align-items: stretch; }
  .beta-envoyer { width: 100%; }
  .intro, .intro-20 { margin-bottom: 36px; }
  .conclusion { margin-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .heros-ciel { cursor: default; }
  * { scroll-behavior: auto !important; }
}