/* =============================================================================
   Napoléapp — feuille de style du site public
   =============================================================================
   Trois pages : la vitrine, la présentation d'ElfiPlan, et la politique de
   confidentialité. Cette dernière est relue par les équipes de Google Play
   avant publication, et par des parents qui se demandent où partent les photos
   de leurs enfants. Elle doit donc être CRÉDIBLE et LISIBLE avant d'être jolie.

   D'où le parti pris : l'énergie néon du logo (cyan -> magenta -> orange) est
   réservée à l'identité — en-tête, filets, accents. Le corps du texte reste
   sur une surface calme, en mesure courte, avec un interlignage généreux. Un
   texte juridique en néon sur noir ne se lit pas, et ce qui ne se lit pas
   n'inspire pas confiance.

   DEUX MONDES, ET C'EST VOULU
   ---------------------------
   Le site appartient à Napoléapp (indigo profond, néon), mais la page produit
   doit montrer le monde d'ElfiPlan (crème, vert sapin, rouge). Les jetons
   --ep-* portent la palette de l'application, et ne servent que là : dans la
   coque de l'éditeur, on reconnaît l'éditeur ; à l'intérieur de la fiche, on
   reconnaît le produit. C'est la convention des sites d'éditeurs, et elle
   évite qu'une capture d'ElfiPlan ait l'air posée sur la mauvaise page.
   ============================================================================= */

:root {
  /* Fond éclairci : l'ancien #0b0a16 tirait vers le noir, ce qui durcissait
     toute la page et donnait un site « technique » là où on vend une
     tradition de Noël. On garde une base sombre — les couleurs néon du logo
     n'existent que sur fond sombre — mais franchement remontée. */
  --fond: #232042;
  --surface: #2e2a52;
  --surface-haute: #393463;
  --trait: #4c4680;

  --encre: #f3f1fb;
  --encre-douce: #c0bade;

  --cyan: #3ee0f0;
  --magenta: #ff3d9a;
  --orange: #ffa552;
  --neon: linear-gradient(90deg, var(--cyan), var(--magenta), var(--orange));

  /* --- Palette d'ElfiPlan, reprise de l'application ----------------------- */
  --ep-creme: #faf8f3;
  --ep-parchemin: #fefce8;
  --ep-vert: #173f32;
  --ep-vert-clair: #2e7d5b;
  --ep-rouge: #c62828;
  --ep-rouge-vif: #dc2626;
  --ep-or: #d6a44c;
  --ep-encre: #1f2937;
  --ep-encre-douce: #64748b;

  --mesure: 68ch;
  --large: 1080px;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: "Plus Jakarta Sans", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  /* Halo très diffus repris du logo : présent, jamais gênant pour la lecture. */
  background-image:
    radial-gradient(80rem 40rem at 15% -10%, rgba(62, 224, 240, 0.13), transparent 60%),
    radial-gradient(70rem 35rem at 95% 5%, rgba(255, 61, 154, 0.12), transparent 60%);
  background-repeat: no-repeat;
}

.enveloppe {
  max-width: var(--mesure);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* La fiche produit respire plus large que le texte juridique : on y montre
   des écrans côte à côte, pas des paragraphes. */
.enveloppe.vitrine { max-width: var(--large); }

/* --- En-tête --------------------------------------------------------------- */

.bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  border-bottom: 1px solid var(--trait);
  padding: 1.5rem 0 1.25rem;
}

.marque {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  color: inherit;
}

.marque img {
  width: 52px;
  height: 52px;
  flex: none;
}

.marque-nom {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.marque-sous {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--encre-douce);
  letter-spacing: 0.01em;
}

/* --- Navigation ------------------------------------------------------------ */

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.nav a {
  display: block;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--encre-douce);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.nav a:hover {
  color: var(--encre);
  background: var(--surface);
  border-color: var(--trait);
}

/* La page courante se signale par aria-current, pas par une classe : le
   lecteur d'écran l'annonce, et le style suit l'information plutôt que
   l'inverse. Le sélecteur accepte TOUTE valeur — « page » désigne la page
   exacte, « true » une rubrique dont on lit une sous-page (elfiplan.html est
   dans « Nos applications » sans être « Nos applications »). */
.nav a[aria-current] {
  color: var(--encre);
  background: var(--surface-haute);
  border-color: var(--trait);
}

/* --- Vitrine --------------------------------------------------------------- */

.heros {
  padding: 3.5rem 0 2rem;
  text-align: center;
}

.heros img {
  width: min(210px, 52vw);
  height: auto;
  margin-bottom: 1.5rem;
}

h1 {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 0.8rem;
}

.accroche {
  color: var(--encre-douce);
  font-size: 1.05rem;
  margin: 0 auto;
  max-width: 46ch;
}

.produit {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 18px;
  padding: 1.6rem 1.5rem;
  margin: 2.5rem 0;
  position: relative;
  overflow: hidden;
}

/* Le filet néon signe la carte sans envahir le contenu. */
.produit::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--neon);
}

.produit h2 { margin: 0 0 0.4rem; font-size: 1.3rem; letter-spacing: -0.02em; }
.produit p { margin: 0 0 1rem; color: var(--encre-douce); }

.etiquettes { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.etiquette {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--trait);
  background: var(--surface-haute);
  color: var(--encre-douce);
}

/* --- Texte juridique ------------------------------------------------------- */

main { padding: 2.5rem 0 4rem; }

h2 {
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  margin: 2.6rem 0 0.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--trait);
}

h2:first-of-type { border-top: 0; padding-top: 0; }

h3 { font-size: 1.02rem; margin: 1.6rem 0 0.4rem; color: var(--cyan); }

p { margin: 0 0 1rem; }

ul { margin: 0 0 1rem; padding-left: 1.3rem; }
li { margin-bottom: 0.45rem; }

a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: var(--magenta); }

strong { color: #fff; }

.date { color: var(--encre-douce); font-size: 0.9rem; }

/* L'essentiel, dit avant les onze sections : c'est ce que 90 % des lecteurs
   liront réellement. */
.resume {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 1.25rem 1.4rem 1.25rem 1.7rem;
  margin: 2rem 0 2.5rem;
  overflow: hidden;
}

/* Le filet néon par un pseudo-élément, et non par `border-image` : cette
   propriété remplace les QUATRE bordures à la fois, elle ne sait pas n'en
   peindre qu'une. */
.resume::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--neon);
}

.resume p:last-child { margin-bottom: 0; }

.encart {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  margin: 1.4rem 0;
}
.encart p:last-child { margin-bottom: 0; }

/* --- Sélecteur de langue --------------------------------------------------- */

/* Le sélecteur vit dans `main`, en tête du document, et non dans l'en-tête :
   il commande la langue du TEXTE JURIDIQUE, pas celle du site. Le placer dans
   la barre de navigation aurait laissé croire qu'il traduit tout. */
.langues {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1.8rem;
}

.langues button {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--trait);
  background: var(--surface);
  color: var(--encre-douce);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.langues button:hover { color: var(--encre); border-color: var(--cyan); }

.langues button[aria-pressed="true"] {
  color: #17142c;
  background: var(--cyan);
  border-color: var(--cyan);
}

/* =============================================================================
   FICHE PRODUIT
   ============================================================================= */

/* --- Ouverture ------------------------------------------------------------- */

.fiche-heros {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  padding: 3rem 0 1rem;
  text-align: center;
}

@media (min-width: 860px) {
  .fiche-heros {
    grid-template-columns: 1.1fr 0.9fr;
    text-align: left;
    gap: 3rem;
    padding: 4rem 0 2rem;
  }
}

.fiche-identite {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.4rem;
}

@media (min-width: 860px) {
  .fiche-identite { justify-content: flex-start; }
}

.fiche-identite img {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  flex: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.fiche-nom {
  font-family: "Mountains of Christmas", Georgia, serif;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--encre);
  display: block;
}

.fiche-editeur {
  font-size: 0.85rem;
  color: var(--encre-douce);
  font-weight: 600;
}

.fiche-heros h1 { font-size: clamp(2rem, 5.2vw, 2.9rem); }

.fiche-promesse {
  font-size: 1.12rem;
  color: var(--encre-douce);
  max-width: 44ch;
  margin: 0 auto 1.6rem;
}

@media (min-width: 860px) {
  .fiche-promesse { margin-left: 0; }
}

.fiche-mascotte {
  width: min(360px, 78vw);
  height: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45));
}

/* --- Appels à l'action ----------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}

@media (min-width: 860px) {
  .actions { justify-content: flex-start; }
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  font-size: 0.97rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--trait);
  background: var(--surface-haute);
  color: var(--encre);
  transition: transform 0.15s, border-color 0.15s, background-color 0.15s;
}

.bouton:hover {
  color: var(--encre);
  border-color: var(--cyan);
  transform: translateY(-1px);
}

.bouton-vif {
  border-color: transparent;
  background: var(--neon);
  color: #17142c;
}

.bouton-vif:hover { color: #17142c; filter: brightness(1.08); }

/* L'application n'est pas encore publiée. Annoncer « Télécharger » sur un
   bouton qui ne télécharge rien est la meilleure façon de perdre la confiance
   d'un visiteur en un clic — on annonce la date, et on propose d'être
   prévenu. */
.disponibilite {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.5rem 0 0;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px dashed var(--trait);
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--encre-douce);
}

.pastille {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}

/* --- Bandeau de chiffres --------------------------------------------------- */

.chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: 18px;
  overflow: hidden;
  margin: 3rem 0;
}

@media (min-width: 720px) {
  .chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.chiffre {
  background: var(--surface);
  padding: 1.3rem 1rem;
  text-align: center;
}

.chiffre b {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  background: var(--neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.chiffre span {
  display: block;
  font-size: 0.83rem;
  color: var(--encre-douce);
  margin-top: 0.3rem;
}

/* --- Sections de la fiche -------------------------------------------------- */

.section { padding: 3rem 0; border-top: 1px solid var(--trait); }

.section > h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
}

.section-intro {
  color: var(--encre-douce);
  max-width: 56ch;
  margin-bottom: 2rem;
}

/* --- Écrans de l'application ----------------------------------------------- */
/*  Ces trois écrans sont reconstruits en HTML plutôt que photographiés.
    Raison : une capture PNG lisible sur un écran Retina pèse 300 à 500 Ko
    pièce, soit plus que tout le reste du site réuni, et se floute au premier
    redimensionnement. Reconstruits, ils restent nets à toute densité, pèsent
    zéro octet de plus, et se corrigent en une ligne le jour où l'application
    change. Le contenu affiché est celui que l'application produit vraiment. */

.ecrans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  justify-items: center;
}

/* Seuil haut, et c'est délibéré. Le contenu des écrans est dimensionné en
   pixels — comme dans l'application, qui ne met pas son interface à l'échelle
   non plus. En dessous de 980 px, trois colonnes rétrécissent le châssis sous
   272 px et la dernière étape de la « marche à suivre » se fait couper au
   milieu d'une phrase. Un écran tronqué ne vend rien : on empile plutôt. */
@media (min-width: 980px) {
  .ecrans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
}

.ecran-bloc { max-width: 300px; }

.ecran-legende {
  margin-top: 1.1rem;
  text-align: center;
}

.ecran-legende b {
  display: block;
  font-size: 1rem;
  color: var(--encre);
  margin-bottom: 0.2rem;
}

.ecran-legende span {
  font-size: 0.89rem;
  color: var(--encre-douce);
  line-height: 1.55;
}

/* Le châssis. Le liseré clair au-dessus du cadre noir imite le reflet d'une
   tranche de téléphone — sans lui, le cadre ressemble à une bordure CSS. */
.telephone {
  width: 100%;
  max-width: 272px;
  margin: 0 auto;
  padding: 9px;
  border-radius: 38px;
  background: linear-gradient(160deg, #4a4470, #1a172e 42%, #14121f);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.ecran {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  background: var(--ep-creme);
  color: var(--ep-encre);
  font-size: 12px;
  line-height: 1.45;
  aspect-ratio: 9 / 17.5;
  display: flex;
  flex-direction: column;
}

/* L'encoche. Purement décorative, donc invisible aux lecteurs d'écran. */
.encoche {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 20px;
  background: #14121f;
  border-radius: 0 0 12px 12px;
  z-index: 3;
}

.ecran-entete {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 26px 12px 10px;
  background: #fff;
  border-bottom: 1px solid #eceae4;
  flex: none;
}

.ecran-entete img {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  flex: none;
}

/* `display: block` sur les deux : sans lui, le titre et sa légende se
   suivent sur la même ligne et l'en-tête du téléphone ne ressemble plus à
   celui de l'application. */
.ecran-titre {
  display: block;
  font-family: "Mountains of Christmas", Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ep-vert);
  line-height: 1.1;
}

.ecran-sous {
  display: block;
  font-size: 9.5px;
  color: var(--ep-vert-clair);
  font-weight: 600;
  line-height: 1.35;
}

.ecran-corps {
  padding: 12px;
  flex: 1;
  overflow: hidden;
}

.ecran-pied {
  display: flex;
  justify-content: space-around;
  padding: 8px 4px 12px;
  background: #fff;
  border-top: 1px solid #eceae4;
  flex: none;
}

.onglet {
  font-size: 8.5px;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
  line-height: 1.5;
}

.onglet em { display: block; font-size: 13px; font-style: normal; }
.onglet.actif { color: var(--ep-rouge); }

/* Cartes internes */

.puce {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  margin-bottom: 6px;
}

.betise-nom {
  font-family: "Mountains of Christmas", Georgia, serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--ep-vert);
  line-height: 1.1;
  margin-bottom: 8px;
}

.jetons { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }

.jeton {
  font-size: 8.5px;
  font-weight: 600;
  padding: 2.5px 7px;
  border-radius: 999px;
  border: 1px solid #e2e0d8;
  background: #fff;
  color: var(--ep-encre-douce);
}

.bloc {
  border-radius: 10px;
  padding: 9px 10px;
  margin-bottom: 8px;
  font-size: 10.5px;
  line-height: 1.5;
}

.bloc-titre {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.bloc-scene { background: #fffbeb; border: 1px solid #fde68a; }
.bloc-scene .bloc-titre { color: #b45309; }

.bloc-etapes { background: #f0fdf4; border: 1px solid #bbf7d0; }
.bloc-etapes .bloc-titre { color: var(--ep-vert-clair); }

.bloc-etapes ol { margin: 0; padding-left: 14px; }
.bloc-etapes li { margin-bottom: 3px; }

/* Le mot du lutin : bordure rouge en tirets et écriture manuscrite, exactement
   comme dans l'application. C'est l'écran qui vend le produit — c'est celui
   que l'enfant lit à voix haute au petit déjeuner. */
.parchemin {
  background: var(--ep-parchemin);
  border: 3px dashed var(--ep-rouge-vif);
  border-radius: 14px;
  padding: 14px 13px;
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 16px;
  line-height: 1.62;
  color: #3f2d1a;
}

.parchemin-titre {
  font-family: "Mountains of Christmas", Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ep-vert);
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.15;
}

.parchemin p { margin: 0 0 9px; }
.parchemin p:last-child { margin-bottom: 0; }

.signature { color: var(--ep-rouge); }

/* Le planning : les 24 cases, en six colonnes.
   En quatre colonnes il fallait six rangées, la dernière tombait sous le bord
   de l'écran et le mois avait l'air tronqué — exactement le contraire du
   message. Six colonnes tiennent décembre entier d'un seul regard. */
.grille-24 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 8px;
}

.case-jour {
  aspect-ratio: 1;
  border-radius: 7px;
  border: 1px solid #e2e0d8;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ep-encre-douce);
  line-height: 1;
}

.case-jour i { font-style: normal; font-size: 8px; margin-top: 1.5px; }

.case-jour.faite {
  background: #dcfce7;
  border-color: #86efac;
  color: var(--ep-vert-clair);
}

.case-jour.prevue {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}

.case-jour.aujourdhui {
  background: var(--ep-rouge);
  border-color: var(--ep-rouge);
  color: #fff;
  box-shadow: 0 3px 10px rgba(198, 40, 40, 0.4);
}

/* --- Fonctions -------------------------------------------------------------- */

.fonctions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .fonctions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .fonctions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.fonction {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 16px;
  padding: 1.3rem 1.25rem;
}

.fonction .icone {
  font-size: 1.5rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.7rem;
}

.fonction h3 {
  color: var(--encre);
  font-size: 1.02rem;
  margin: 0 0 0.4rem;
}

.fonction p {
  color: var(--encre-douce);
  font-size: 0.93rem;
  margin: 0;
  line-height: 1.6;
}

/* --- L'offre ---------------------------------------------------------------- */

.offres {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}

@media (min-width: 760px) {
  .offres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.offre {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 18px;
  padding: 1.6rem 1.5rem;
  overflow: hidden;
}

.offre.mise-en-avant { border-color: var(--cyan); }

.offre.mise-en-avant::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--neon);
}

.offre h3 {
  color: var(--encre);
  font-size: 1.22rem;
  margin: 0 0 0.25rem;
}

.offre .prix {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 1rem;
  display: block;
}

.offre ul { list-style: none; padding: 0; margin: 0; }

.offre li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.94rem;
  color: var(--encre-douce);
  line-height: 1.55;
}

.offre li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ep-or);
  font-weight: 800;
}

.offre .mention {
  margin: 1.2rem 0 0;
  font-size: 0.83rem;
  color: var(--encre-douce);
  opacity: 0.85;
}

/* --- Bandeau de clôture ----------------------------------------------------- */

.cloture {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 22px;
  padding: 2.5rem 1.5rem;
  margin: 3rem 0 0;
  position: relative;
  overflow: hidden;
}

.cloture::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--neon);
}

.cloture h2 {
  border-top: 0;
  padding-top: 0;
  margin: 0 0 0.7rem;
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
}

.cloture p {
  color: var(--encre-douce);
  max-width: 46ch;
  margin: 0 auto 1.6rem;
}

/* --- Carte d'application (page « Nos applications ») ------------------------ */

.carte-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 20px;
  padding: 1.8rem 1.6rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, transform 0.18s;
}

.carte-app::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--neon);
}

.carte-app:hover { border-color: var(--cyan); transform: translateY(-2px); }

@media (min-width: 700px) {
  .carte-app { grid-template-columns: 132px minmax(0, 1fr); gap: 2rem; }
}

.carte-app img {
  width: 116px;
  height: 116px;
  border-radius: 28px;
  justify-self: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.carte-app h2 {
  border-top: 0;
  padding-top: 0;
  margin: 0 0 0.35rem;
  font-size: 1.4rem;
  color: var(--encre);
}

.carte-app p { color: var(--encre-douce); margin: 0 0 0.9rem; font-size: 0.96rem; }

.carte-app .lire { font-weight: 700; color: var(--cyan); font-size: 0.93rem; }

.a-venir {
  background: var(--surface);
  border: 1px dashed var(--trait);
  border-radius: 20px;
  padding: 1.5rem 1.6rem;
  color: var(--encre-douce);
}

.a-venir h3 { color: var(--encre); margin-top: 0; }
.a-venir p:last-child { margin-bottom: 0; }

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

footer {
  border-top: 1px solid var(--trait);
  padding: 2rem 0 3rem;
  color: var(--encre-douce);
  font-size: 0.88rem;
}

footer p { margin: 0 0 0.4rem; }

.footer-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.8rem;
}

/* --- Accessibilité ---------------------------------------------------------- */

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

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}