/* =====================================================================
   LAMPION — couche WEB uniquement.

   ISOLATION : ce fichier n'est chargé QUE par le site (base.html.twig) et
   toutes ses règles sont préfixées par .web-app, posé sur <body> par ce même
   gabarit. L'application Capacitor ne charge jamais ce fichier — elle copie
   lampion.css et moteur.css dans son dossier vendor/, et rien d'autre.

   Conséquence pratique : lampion.css et moteur.css sont PARTAGÉS et ne
   doivent pas servir de terrain de refonte desktop. Tout ce qui suit
   surcharge, sans jamais les modifier.

   Le site reste mobile-first : les règles de base ne s'activent qu'à partir
   de 768 px, pour que le web mobile continue de ressembler à l'application.
   ===================================================================== */

/* ---------------------------------------------------------------- largeur */

.web-app {
  --web-largeur: 1200px;     /* la maquette demande 1100-1280 */
  --web-marge: 24px;
}

/* ---------------------------------------------------------------- le hero

   UNE seule composition, pas deux colonnes collées.

   L'illustration occupe tout le hero. Le texte est posé PAR-DESSUS, rendu
   lisible par un voile dégradé du côté où il se trouve — sombre là où on lit,
   transparent là où l'illustration doit rester visible. C'est ce que montre
   la maquette, et c'est aussi ce qui évite la couture verticale.

   La bannière est un asset WEB DÉDIÉ (hero-web-*.jpg), en format large avec
   le personnage à droite. Les assets de l'application (hero-*.jpg, 4:3) ne
   sont pas touchés : formats différents, besoins différents.
   ---------------------------------------------------------------------- */

.web-app .hero-web {
  position: relative;
  isolation: isolate;
  margin-bottom: 22px;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--fond-3);
  min-height: 260px;
  display: flex;
  align-items: center;
}

.web-app .hero-web-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 22%;   /* personnage à droite, visage préservé */
}

/* Le voile : opaque là où le texte se lit, transparent sur le personnage.
   Il est SOUS le texte et AU-DESSUS de l'image — d'où les trois z-index
   explicites : sans eux, l'ordre de peinture dépend du balisage. */
.web-app .hero-web-voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(7,10,30,.55), rgba(7,10,30,.20) 45%, rgba(7,10,30,.72)),
    linear-gradient(to right, rgba(7,10,30,.94) 0%, rgba(7,10,30,.86) 26%,
                              rgba(7,10,30,.45) 52%, rgba(7,10,30,0) 78%);
}

.web-app[data-theme="rose"] .hero-web-voile {
  background:
    linear-gradient(to bottom, rgba(38,5,26,.55), rgba(38,5,26,.20) 45%, rgba(38,5,26,.72)),
    linear-gradient(to right, rgba(38,5,26,.94) 0%, rgba(38,5,26,.86) 26%,
                              rgba(38,5,26,.45) 52%, rgba(38,5,26,0) 78%);
}

[dir="rtl"] .web-app .hero-web-voile,
.web-app[dir="rtl"] .hero-web-voile { transform: scaleX(-1); }

/* En arabe on lit de droite à gauche : l'illustration n'est pas miroitée,
   le personnage reste donc du bon côté sans retoucher l'asset. */
[dir="rtl"] .web-app .hero-web-image { transform: scaleX(-1); }

.web-app .hero-web-mots {
  position: relative;
  z-index: 2;
  padding: 30px 22px;
  max-width: 640px;
}

.web-app .hero-web-salut {
  margin: 0;
  font-family: var(--titre);
  font-size: clamp(2rem, 7vw, 2.4rem);
  font-weight: 800;
  line-height: 1.05;
  color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

.web-app .hero-web-salut b { color: var(--or); font-weight: inherit; }

.web-app .hero-web-question {
  margin: 6px 0 0;
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(1.05rem, 3.6vw, 1.2rem);
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

.web-app .hero-web-texte {
  margin: 10px 0 0;
  font-size: .95rem;
  max-width: 42ch;
  /* Blanc légèrement atténué — jamais une couleur de thème, qui finirait
     sombre sur sombre selon l'endroit de l'illustration. */
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

.web-app .hero-web-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--or);
  color: var(--encre);
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.web-app .hero-web-cta:hover { background: var(--or-clair); }
[dir="rtl"] .web-app .hero-web-cta svg { transform: scaleX(-1); }

/* ------------------------------------------------------- raccourcis */

/* Plus petits et plus sobres que les blocs actuels : des repères, pas des
   widgets d'administration. */
.web-app .raccourcis-web {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.web-app .raccourci {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-radius: var(--r-m);
  background: var(--carte);
  border: 1px solid var(--bord);
  transition: border-color .15s, transform .15s;
}

.web-app .raccourci:hover { border-color: var(--or-bord); transform: translateY(-2px); }

.web-app .raccourci-icone {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 12px;
  background: var(--voile);
  color: var(--accent-2);
}

.web-app .raccourci-icone svg { width: 21px; height: 21px; }
.web-app .raccourci strong { display: block; font-size: .94rem; }
.web-app .raccourci em { font-style: normal; font-size: .75rem; color: var(--doux); }

/* ------------------------------------------------------- continuer */

.web-app .reprise-web {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: var(--r-m);
  background: var(--carte);
  border: 1px solid var(--bord);
}

.web-app .reprise-web-image {
  width: 110px; flex: none;
  border-radius: var(--r-s);
  overflow: hidden; line-height: 0;
}

.web-app .reprise-web-image svg { width: 100%; height: auto; display: block; }
.web-app .reprise-web-corps { flex: 1; min-width: 0; }
.web-app .reprise-web-corps strong { display: block; font-size: 1.02rem; }
.web-app .reprise-web-corps span { font-size: .84rem; color: var(--doux); }

.web-app .reprise-jauge {
  height: 6px; margin-top: 8px;
  border-radius: 999px; background: var(--voile-fort); overflow: hidden;
}
.web-app .reprise-jauge i { display: block; height: 100%; background: var(--or); }

/* ------------------------------------------------------- rubriques */

.web-app .rubrique-web {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}

.web-app .rubrique-web h2 { margin: 0; font-family: var(--titre); font-size: 1.28rem; }
.web-app .rubrique-web a { color: var(--or); font-weight: 700; font-size: .9rem; flex: none; }

/* ------------------------------------------------------- catalogue compact */

.web-app .filtres-web {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.web-app .filtres-web input[type="search"],
.web-app .filtres-web select {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-m);
  border: 1px solid var(--bord);
  background: var(--carte);
  color: var(--texte);
  font: inherit;
}

.web-app .filtres-web input[type="search"] { border-radius: 999px; }
.web-app .filtres-web select option { color: #2E1F48; background: #FFF6E2; }

.web-app .filtres-bascules { display: flex; gap: 8px; }

.web-app .filtre-puce {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: var(--carte);
  color: var(--doux);
  font: inherit; font-weight: 700; font-size: .86rem;
  cursor: pointer;
}

.web-app .filtre-puce[aria-pressed="true"] {
  background: var(--or); border-color: var(--or); color: var(--encre);
}

.web-app .liste-web { display: flex; flex-direction: column; gap: 8px; }

.web-app .ligne-web {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px 9px 9px;
  border-radius: var(--r-m);
  background: var(--carte);
  border: 1px solid var(--bord);
  transition: border-color .15s;
}

.web-app .ligne-web:hover { border-color: var(--or-bord); }

.web-app .ligne-web-image {
  width: 96px; flex: none;
  border-radius: var(--r-s);
  overflow: hidden; line-height: 0;
}
.web-app .ligne-web-image svg { width: 100%; height: auto; display: block; }

.web-app .ligne-web-corps { flex: 1; min-width: 0; }
.web-app .ligne-web-corps strong { display: block; font-size: .98rem; }
.web-app .ligne-web-meta { font-size: .8rem; color: var(--doux); }

.web-app .ligne-web-actions { display: flex; align-items: center; gap: 4px; flex: none; }

.web-app .coeur-web {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: transparent; color: var(--doux);
  cursor: pointer;
}
.web-app .coeur-web[aria-pressed="true"] { color: var(--faux); }
.web-app .coeur-web svg { width: 20px; height: 20px; }

.web-app .aucun-resultat { color: var(--doux); font-style: italic; text-align: center; padding: 30px 0; }

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

.web-app .nav-web {
  display: none;              /* mobile et tablette : voir la barre du bas */
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}

.web-app .nav-web a {
  padding: 9px 13px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
  color: var(--doux);
  white-space: nowrap;
}

.web-app .nav-web a:hover { color: var(--texte); background: var(--voile); }

.web-app .nav-web a[aria-current="page"] {
  color: var(--or);
  background: var(--or-voile);
}


/* Logo officiel : le même fichier que l'application, dimensionné pour le web. */
.web-app .entete .marque-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  flex: none;
  box-shadow: 0 2px 10px var(--ombre-teinte);
}

@media (min-width: 1024px) {
  .web-app .entete .marque-logo { width: 52px; height: 52px; border-radius: 14px; }
  .web-app .entete .reglages { margin-inline-start: 10px; }
}

/* =====================================================================
   TABLETTE — à partir de 768 px
   La maquette la traite comme un format à part, pas comme un desktop
   rétréci : la navigation reste compacte, mais la grille respire.
   ===================================================================== */

@media (min-width: 768px) {

  .web-app .ecran {
    max-width: var(--web-largeur);
    padding-inline: var(--web-marge);
    margin-inline: auto;
  }

  .web-app .entete {
    max-width: var(--web-largeur);
    margin-inline: auto;
    padding-inline: var(--web-marge);
  }

  .web-app .hero-web { min-height: 360px; }
  .web-app .hero-web-mots { padding: 40px 34px; }

  .web-app .raccourcis-web { grid-template-columns: repeat(4, 1fr); }

  .web-app .filtres-web {
    grid-template-columns: 2fr 1fr 1fr auto;
    align-items: center;
  }
  .web-app .filtres-bascules { grid-column: auto; }

  .web-app .ligne-web-image { width: 120px; }
}

/* =====================================================================
   DESKTOP — à partir de 1024 px
   ===================================================================== */

@media (min-width: 1024px) {

  /* Navigation dans l'en-tête, et plus de barre d'onglets fixe : sur un
     écran d'ordinateur elle mangerait de la hauteur pour rien. */
  .web-app .nav-web { display: flex; }
  .web-app .onglets { display: none; }
  .web-app { padding-bottom: 30px; }

  .web-app .hero-web { min-height: 430px; }
  .web-app .hero-web-mots { padding: 52px 48px; }
  .web-app .hero-web-salut { font-size: 3.1rem; }
  .web-app .hero-web-question { font-size: 1.35rem; }
  .web-app .hero-web-texte { font-size: 1rem; }

  /* Quatre cartes de front, comme la maquette. */
  .web-app .grille-contes { grid-template-columns: repeat(4, 1fr); }

  .web-app .raccourci { padding: 15px 16px; }
}

@media (min-width: 1440px) {
  /* Au-delà, on cesse d'étirer : une ligne de texte trop longue devient
     pénible à lire, et les cartes deviendraient disproportionnées. */
  .web-app { --web-largeur: 1280px; }
}


/* =====================================================================
   PAGES DE TEXTE — confidentialité, mentions

   Mesure limitée à 68 caractères : au-delà, l'œil perd sa ligne en
   revenant à la marge. C'est la seule page du site où cette contrainte
   compte vraiment, le reste étant fait de cartes et de listes.
   ===================================================================== */

.web-app .page-texte {
  max-width: 68ch;
  margin-inline: auto;
  padding-block: 8px 40px;
}

.web-app .page-texte .chapeau {
  font-size: 1.06rem;
  color: var(--texte);
  border-inline-start: 3px solid var(--or);
  padding-inline-start: 14px;
  margin: 18px 0 26px;
}

.web-app .page-texte section { margin-bottom: 26px; }

.web-app .page-texte h2 {
  font-family: var(--titre);
  font-size: 1.16rem;
  margin: 0 0 8px;
  color: var(--or);
}

.web-app .page-texte p {
  margin: 0 0 10px;
  line-height: 1.62;
  color: var(--doux);
}

.web-app .page-texte ul { margin: 6px 0 12px; padding-inline-start: 20px; }
.web-app .page-texte li { margin-bottom: 5px; line-height: 1.55; color: var(--doux); }

.web-app .page-texte .maj {
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid var(--bord);
  font-size: .84rem;
  font-style: italic;
}

/* Le pied de page qui mène à cette page, discret sur toutes les autres. */
.web-app .pied {
  max-width: var(--web-largeur);
  margin: 32px auto 0;
  padding: 18px max(15px, env(safe-area-inset-left));
  border-top: 1px solid var(--bord);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  font-size: .84rem;
  color: var(--doux);
}

.web-app .pied a { color: var(--doux); text-decoration: underline; }
.web-app .pied a:hover { color: var(--texte); }
.web-app .pied .pied-marque { margin-inline-end: auto; }

/* =====================================================================
   Bloc 5 — langues et bandeau de l'application (site uniquement).
   Rien ici ne touche le hero : tout est préfixé et nouveau.
   ===================================================================== */

/* ---- Choix de la langue (en-tête) */
/* Le menu s'ancre au bord du groupe de réglages, pas au bouton : sur
   téléphone, le bouton de thème suit et le menu sortirait de l'écran. */
.web-app .entete .reglages { position: relative; }
.web-app .langues-web { position: static; }
.web-app .langues-web > summary { list-style: none; color: var(--texte); }
.web-app .langues-web > summary::-webkit-details-marker { display: none; }
.web-app .langues-web-icone svg { width: 17px; height: 17px; display: block; }
.web-app .langues-web-chevron { font-size: .7rem; opacity: .7; transition: transform .15s ease; }
.web-app .langues-web[open] .langues-web-chevron { transform: rotate(180deg); }
.web-app .langues-web[open] > summary { border-color: var(--or-bord); }

.web-app .langues-web-liste {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 40;
  width: min(300px, calc(100vw - 30px));
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: var(--r-m);
  border: 1px solid var(--bord);
  background: var(--fond-2);
  box-shadow: var(--ombre);
}

.web-app .langue-web {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 10px 8px 14px;
  border-radius: var(--r-s);
  border: 2px solid transparent;
  background: var(--carte);
  color: var(--texte);
  text-decoration: none;
}
.web-app .langue-web:hover { background: var(--carte-2); }
.web-app .langue-web.on { border-color: var(--or); background: var(--carte-2); }
.web-app .langue-web-noms { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.web-app .langue-web-noms strong { font: 700 1.1rem/1.2 var(--titre); }
.web-app .langue-web-noms > * { align-self: flex-start; }
.web-app .langue-web-noms small { color: var(--doux); font-size: .78rem; font-weight: 600; }
.web-app .langue-web-rond {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--bord);
  color: var(--encre); font-size: .8rem; font-weight: 900;
}
.web-app .langue-web.on .langue-web-rond { background: var(--or); border-color: var(--or); }
.web-app .etiquette-nouveau-web {
  padding: 3px 8px; border-radius: 8px;
  background: var(--juste); color: #0E2A23;
  font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}

/* ---- Fiche : lire ce conte en… */
.web-app .lire-en-web { margin: 6px 0 16px; display: flex; flex-direction: column; gap: 8px; }
.web-app .lire-en-web-titre {
  margin: 0; color: var(--doux);
  font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.web-app .segments-web {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(96px, max-content);
  gap: 6px;
  padding: 5px;
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--r-m);
  background: var(--fond-3);
  justify-self: start;
  align-self: flex-start;
}
.web-app .segment-web {
  display: grid; place-items: center;
  min-height: 44px; padding: 0 16px;
  border-radius: 14px;
  color: var(--texte); opacity: .8;
  font: 800 .95rem var(--corps);
  text-decoration: none;
}
.web-app .segment-web:hover { opacity: 1; background: var(--voile); }
.web-app .segment-web.on { background: var(--or); color: var(--encre); opacity: 1; }

/* ---- Accueil : dans d'autres langues */
.web-app .ailleurs-web { margin-top: 26px; }
.web-app .rubrique-aide-web { margin: -4px 0 12px; color: var(--doux); font-size: .9rem; }
.web-app .liste-ailleurs-web {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 10px;
}
.web-app .ligne-ailleurs-web {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-m);
  background: var(--carte); border: 1px solid var(--bord);
  color: var(--texte); text-decoration: none;
}
.web-app .ligne-ailleurs-web:hover { background: var(--carte-2); }
.web-app .ligne-ailleurs-web-corps { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.web-app .ligne-ailleurs-web-corps strong { font: 700 1.05rem/1.25 var(--titre); }
.web-app .badges-langue-web { display: flex; gap: 5px; flex-wrap: wrap; }
.web-app .badge-langue-web {
  padding: 2px 8px; border-radius: 8px;
  background: var(--voile-fort); font-size: .72rem; font-weight: 800;
}
.web-app .ligne-ailleurs-web-chevron { font-size: 1.4rem; opacity: .55; }
[dir="rtl"] .web-app .ligne-ailleurs-web-chevron { transform: scaleX(-1); }

/* ---- Bandeau de l'application (téléphones) */
.bandeau-app {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  background: var(--fond-3);
  border-bottom: 1px solid var(--bord);
  color: var(--texte);
}
.bandeau-app[hidden] { display: none; }
.bandeau-app-logo { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.bandeau-app-mots { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.bandeau-app-mots strong { font: 700 1rem/1.2 var(--titre); }
.bandeau-app-mots em {
  font-style: normal; font-size: .78rem; color: var(--doux);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bandeau-app-obtenir {
  flex: none;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--or);
  color: var(--encre);
  font-weight: 800;
  font-size: .88rem;
  text-decoration: none;
}
.bandeau-app-fermer {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: transparent; color: var(--doux);
  cursor: pointer;
}
.bandeau-app-fermer:hover { background: var(--voile); color: var(--texte); }

/* ---- Pied : les magasins */
.web-app .pied .pied-app {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding-top: 10px;
}
.web-app .pied .badge-magasin {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--or-bord);
  background: var(--or-voile);
  color: var(--texte);
  font-weight: 700;
  text-decoration: none;
}
.web-app .pied .badge-magasin:hover { background: var(--or); color: var(--encre); }
.web-app .pied .badge-magasin[hidden] { display: none; }

/* ---- Fiche d'un conte (site uniquement)
   Dans l'application, le titre remonte sur le bas de l'illustration. Sur le
   site, l'illustration a un cadre : le titre et les infos le traversaient.
   Ici, le texte vient SOUS l'image (téléphone) ou À CÔTÉ (ordinateur). */
.web-app .fiche-image::after { display: none; }
.web-app .fiche-corps { margin-top: 18px; padding: 0; }

@media (min-width: 1024px) {
  body.web-app[data-page="fiche"] .ecran {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 44px;
    align-items: start;
  }
  body.web-app[data-page="fiche"] .retour { grid-column: 1 / -1; }
  body.web-app[data-page="fiche"] .fiche-image { position: sticky; top: 104px; }
  .web-app .fiche-corps { margin-top: 0; padding-top: 6px; }
  .web-app .fiche-corps .titre-page { font-size: 2.2rem; line-height: 1.15; margin-bottom: 12px; }
  .web-app .fiche-meta { font-size: .9rem; margin-bottom: 18px; }
  .web-app .fiche-resume { font-size: 1.08rem; line-height: 1.6; }
}