/* app.css : mise en page Aurora Bloom. Aucune couleur en dur, tout vient de tokens.css. */

/* Bandeau de consentement commun (css/nd-mesure.css), habille a la charte Aurora (1.4.0). */
:root {
  --nd-fond: var(--creme);
  --nd-texte: var(--prune-fonce);
  --nd-doux: var(--prune-clair);
  --nd-accent: var(--prune);
  --nd-sur-accent: var(--creme);
  --nd-trait: var(--trait);
  --nd-police: var(--police-corps);
  --nd-police-titre: var(--police-titre);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-corps);
  font-size: var(--t-corps);
  overscroll-behavior: none;
  /* 1.5.9 : le zoom est permis (accessibilite), mais pas le double-tap qui zoomerait par erreur. */
  touch-action: manipulation;
}
body { overflow: hidden; }

button { font-family: inherit; font-size: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }

/* ====================== LE FIL ====================== */

#fil {
  position: fixed; inset: 0;
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Le navigateur corrige tout seul la position quand on retire des cartes en
     haut du fil. Comme feed.js la corrige aussi, les deux se cumulaient et on
     reculait de vingt cartes sans rien voir. Ici, une seule correction. */
  overflow-anchor: none;
}
#fil > * { overflow-anchor: none; }
#fil::-webkit-scrollbar { display: none; }

.carte {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 124px en bas : la barre a gagne une ligne de libelles sous les icones. */
  padding: calc(76px + var(--sure-haut)) var(--gap-l) calc(124px + var(--sure-bas));
  text-align: center;
  color: var(--texte-sur-image);
  background: var(--grad-matin);
}

.carte[data-cat="confiance"] { background: var(--grad-confiance); }
.carte[data-cat="amour"]     { background: var(--grad-amour);     color: var(--texte-sur-amour); }
.carte[data-cat="calme"]     { background: var(--grad-calme); }
.carte[data-cat="abondance"] { background: var(--grad-abondance); }
.carte[data-cat="gratitude"] { background: var(--grad-gratitude); color: var(--texte-sur-gratitude); }
.carte[data-cat="force"]     { background: var(--grad-force); }
.carte[data-cat="reussite"]  { background: var(--grad-reussite); }
.carte[data-cat="matin"]     { background: var(--grad-matin);     color: var(--texte-sur-matin); }

.carte-cat {
  font-size: var(--t-petit);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: var(--gap-m);
}

.carte-texte {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--t-affirmation);
  line-height: 1.34;
  max-width: 18ch;
  margin: 0;
  text-wrap: balance;
}

.carte-verrou { display: flex; flex-direction: column; align-items: center; gap: var(--gap-s); }
.carte-verrou .cadenas { font-size: 34px; opacity: 0.9; }
.carte-verrou .flou { filter: blur(9px); opacity: 0.55; user-select: none; pointer-events: none; }
.btn-debloquer {
  margin-top: var(--gap-m);
  padding: 13px 26px;
  border-radius: var(--rayon-rond);
  background: var(--creme);
  color: var(--prune-fonce);
  font-weight: 600;
  box-shadow: 0 8px 26px rgba(0,0,0,0.22);
}

/* ====================== BARRES ====================== */

.barre { position: fixed; left: 0; right: 0; display: flex; align-items: center; z-index: 20; pointer-events: none; }
.barre > * { pointer-events: auto; }

.barre-haut {
  top: 0;
  padding: calc(var(--gap-s) + var(--sure-haut)) var(--gap-m) var(--gap-s);
  justify-content: space-between;
  background: linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0));
}
.barre-bas {
  bottom: 0;
  /* Zone sure Android : sans ca, la barre de navigation mange les boutons. */
  padding: var(--gap-s) var(--gap-l) calc(var(--gap-s) + var(--sure-bas));
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap-l);
  background: linear-gradient(to top, rgba(0,0,0,0.22), rgba(0,0,0,0));
}

.titre-bloc { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.titre-app {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 17px;
  color: var(--texte-sur-image);
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

/* Puce du filtre actif, sous le titre. Toucher la puce rouvre les categories. */
.filtre-actif {
  padding: 4px 11px;
  border-radius: var(--rayon-rond);
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: var(--texte-sur-image);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Bouton de la barre du bas : pastille en haut, libelle en dessous. */
.nav-bouton {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px;
  min-width: 64px;
  padding: 0;
}
.nav-libelle {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--texte-sur-image);
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
  line-height: 1.2;
}

.icone {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--rayon-rond);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: var(--texte-sur-image);
  font-size: 21px;
  transition: transform var(--duree-courte) var(--courbe), background var(--duree-courte);
}
.icone:active, .nav-bouton:active .icone { transform: scale(0.9); }
.icone.actif, .nav-bouton.actif .icone { background: var(--creme); color: var(--prune); }
.icone svg { width: 23px; height: 23px; display: block; }
.icone-sombre svg { width: 20px; height: 20px; display: block; }
.coeur-plein { transition: opacity var(--duree-courte) var(--courbe); }

/* Sur les categories claires, les icones passent en sombre pour rester lisibles. */
.fil-clair .icone { background: rgba(74,49,67,0.12); color: var(--prune-fonce); }
.fil-clair .titre-app { color: var(--prune-fonce); text-shadow: none; }
.fil-clair .nav-libelle { color: var(--prune-fonce); text-shadow: none; }
.fil-clair .filtre-actif { background: rgba(74,49,67,0.12); color: var(--prune-fonce); }
.fil-clair .barre-haut, .fil-clair .barre-bas { background: none; }

/* ====================== PANNEAUX ====================== */

.panneau {
  position: fixed; inset: 0;
  z-index: 40;
  background: var(--fond);
  display: flex; flex-direction: column;
  padding: calc(var(--gap-m) + var(--sure-haut)) var(--gap-m) calc(var(--gap-m) + var(--sure-bas));
  overflow-y: auto;
  animation: monte var(--duree-moyenne) var(--courbe);
}
@keyframes monte { from { transform: translateY(3%); opacity: 0; } to { transform: none; opacity: 1; } }

.panneau-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gap-l); }
.panneau-titre { font-family: var(--police-titre); font-size: var(--t-titre); font-weight: 600; margin: 0; }
.icone-sombre {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--rayon-rond);
  background: var(--creme-tiede);
  color: var(--prune);
  font-size: 20px;
}

/* Ligne de verrouillage en haut du panneau Categories, grisee sur "Toutes". */
#ligne-verrou { margin-bottom: var(--gap-m); transition: opacity var(--duree-courte) var(--courbe); }
#ligne-verrou.desactive { opacity: 0.45; }
#ligne-verrou .champ:disabled { cursor: default; }

.grille-cat { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-s); }
.tuile {
  aspect-ratio: 1 / 1;
  border-radius: var(--rayon);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--gap-s);
  color: var(--texte-sur-image);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 18px;
  text-align: left;
  transition: transform var(--duree-courte) var(--courbe);
}
.tuile:active { transform: scale(0.96); }
.tuile small { display: block; font-family: var(--police-corps); font-weight: 400; font-size: var(--t-petit); opacity: 0.8; }
.tuile[data-cat="confiance"] { background: var(--grad-confiance); }
.tuile[data-cat="amour"]     { background: var(--grad-amour);     color: var(--texte-sur-amour); }
.tuile[data-cat="calme"]     { background: var(--grad-calme); }
.tuile[data-cat="abondance"] { background: var(--grad-abondance); }
.tuile[data-cat="gratitude"] { background: var(--grad-gratitude); color: var(--texte-sur-gratitude); }
.tuile[data-cat="force"]     { background: var(--grad-force); }
.tuile[data-cat="reussite"]  { background: var(--grad-reussite); }
.tuile[data-cat="matin"]     { background: var(--grad-matin);     color: var(--texte-sur-matin); }

.panneau-aide { margin: calc(-1 * var(--gap-m)) 0 var(--gap-m); color: var(--texte-doux); font-size: var(--t-petit); line-height: 1.5; }

.liste-fav { display: flex; flex-direction: column; gap: var(--gap-s); }
.fav {
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: var(--gap-s) var(--gap-s) var(--gap-s) var(--gap-m);
  display: flex; align-items: center; gap: var(--gap-s);
}
/* Le texte est un bouton : le toucher renvoie l affirmation dans le fil. */
.fav-texte {
  flex: 1; min-width: 0;
  text-align: left;
  padding: var(--gap-xs) 0;
  font-family: var(--police-titre); font-size: 17px; line-height: 1.42;
  color: var(--texte);
}
.fav-texte:active { color: var(--prune); }
.vide { text-align: center; color: var(--texte-doux); padding: var(--gap-l) var(--gap-m); line-height: 1.6; }

.ligne {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-m);
  padding: var(--gap-m) 0;
  border-bottom: 1px solid var(--trait);
}
.ligne-label { font-weight: 500; }
.ligne-aide { font-size: var(--t-petit); color: var(--texte-doux); margin-top: 3px; line-height: 1.5; }
.champ {
  padding: 10px 14px;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--trait);
  background: var(--fond-carte);
  color: var(--texte);
  font-size: var(--t-corps);
}
.segment { display: flex; gap: 6px; background: var(--creme-tiede); padding: 4px; border-radius: var(--rayon-rond); }
.segment button { padding: 8px 16px; border-radius: var(--rayon-rond); font-size: 14px; font-weight: 500; }
.segment button.actif { background: var(--fond-carte); color: var(--prune); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* ====================== MUR PAYANT ====================== */

.modale {
  position: fixed; inset: 0; z-index: 60;
  background: var(--voile);
  display: flex; align-items: flex-end;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modale-boite {
  width: 100%;
  background: var(--fond);
  border-radius: var(--rayon) var(--rayon) 0 0;
  padding: var(--gap-l) var(--gap-m) calc(var(--gap-l) + var(--sure-bas));
  animation: monte var(--duree-moyenne) var(--courbe);
  max-height: 92dvh; overflow-y: auto;
}
.modale-titre { font-family: var(--police-titre); font-size: var(--t-titre); font-weight: 600; margin: 0 0 var(--gap-s); text-align: center; }
.modale-sous { text-align: center; color: var(--texte-doux); margin: 0 0 var(--gap-l); line-height: 1.6; }
.avantages { list-style: none; padding: 0; margin: 0 0 var(--gap-l); display: flex; flex-direction: column; gap: var(--gap-s); }
.avantages li { display: flex; gap: var(--gap-s); align-items: center; }
.avantages li::before { content: "\2726"; color: var(--dore); font-size: 17px; }

.btn-primaire {
  display: block; width: 100%;
  padding: 17px;
  border-radius: var(--rayon-rond);
  background: var(--prune);
  color: var(--creme);
  font-weight: 600; font-size: 17px;
  transition: transform var(--duree-courte) var(--courbe);
}
.btn-primaire:active { transform: scale(0.98); }
.btn-discret { display: block; width: 100%; padding: var(--gap-s); color: var(--texte-doux); font-size: var(--t-petit); margin-top: var(--gap-s); }
.note-simule { margin-top: var(--gap-s); text-align: center; font-size: 12px; color: var(--dore); }
/* Prix et renouvellement sous le bouton d achat : lisible, jamais cache (exigence Google). */
.conditions-prix { margin-top: var(--gap-s); text-align: center; font-size: 13px; line-height: 1.45; color: var(--texte-doux); }

/* ====================== PREMIUM, BRANDING « SIGNATURE » (1.4.0, 18/10/2026) ======================
   Choisi par Nathie sur maquette (Pub_et_vente_apps/BRANDING_effets_3_apps_2026-10-17.html) :
   cartes en cascade, trait de lumiere, reflet sur le bouton, « l aube qui se leve ».
   Chaque effet ne joue qu UNE fois, a l ouverture (js/effets.js). Rien ne tourne en boucle. */
@property --prem-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.prem-embleme { position: relative; height: 78px; display: grid; place-items: center; margin: 0 0 var(--gap-s); }
.prem-aube {
  position: absolute; left: 50%; top: 50%;
  width: 190px; height: 118px;
  transform: translate(-50%, -46%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 196, 174, 0.95), rgba(249, 222, 208, 0.55) 55%, transparent 100%);
  opacity: 0.5;
  pointer-events: none;
}
.prem-lotus { position: relative; width: 92px; height: 58px; filter: drop-shadow(0 4px 10px rgba(166, 124, 51, 0.35)); }

.prem-offre {
  position: relative;
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--fond-carte);
  border: 1.5px solid var(--prune);
  box-shadow: inset 4px 0 0 var(--prune);
}
.prem-offre-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-s); }
.prem-offre-nom { font-family: var(--police-titre); font-weight: 600; font-size: 19px; }
.prem-offre-prix { font-weight: 700; white-space: nowrap; }
/* 21/10/2026 (A10) : le code de remise, dans les couleurs de la pastille. */
.prem-remise {
  margin: var(--gap-s) 0 0; text-align: center;
  background: var(--dore); color: var(--marque-prune-fonce); /* 1.5.2 : lisible dans tous les themes */
  font-size: 13.5px; font-weight: 700; line-height: 1.4;
  border-radius: var(--rayon-rond); padding: 6px 14px;
}
.prem-remise[hidden] { display: none; }

.prem-pastille {
  position: absolute; z-index: 3; top: -10px; right: 12px;
  background: var(--dore); color: var(--marque-prune-fonce); /* 1.5.2 : lisible dans tous les themes */
  font-size: 11.5px; font-weight: 700;
  border-radius: var(--rayon-rond); padding: 2px 10px;
}

/* Le trait de lumiere : un seul tour du cadre de la carte Annuel, puis il s eteint. */
.prem-lumiere {
  position: absolute; inset: -1.5px; z-index: 2;
  border-radius: 17.5px;
  pointer-events: none; opacity: 0;
  filter: drop-shadow(0 0 5px rgba(217, 164, 65, 0.85));
}
.prem-lumiere span {
  position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--prem-angle), transparent 0deg 250deg, rgba(217, 164, 65, 0.18) 290deg, #E8C77E 335deg, #FFF3C8 354deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.prem-lumiere.joue { animation: prem-eclat 1.9s ease-out forwards; }
.prem-lumiere.joue span { animation: prem-tour 1.9s cubic-bezier(0.45, 0.05, 0.3, 1) forwards; }
@keyframes prem-tour { from { --prem-angle: -40deg; } to { --prem-angle: 320deg; } }
@keyframes prem-eclat { 0% { opacity: 0; } 10% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }

/* Le reflet : une seule traversee du bouton d achat. */
.prem-bouton {
  position: relative; overflow: hidden;
  margin-top: var(--gap-m);
  background: linear-gradient(135deg, var(--prune), var(--prune-fonce));
}
.prem-bouton::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.15) 56%, transparent 68%);
}
.prem-bouton.eclat::after { animation: prem-reflet 1.05s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes prem-reflet { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.prem-bouton:disabled { opacity: 0.5; }

/* Choix du format d image avant le partage : deux grandes tuiles. */
.choix-format { display: flex; flex-direction: column; gap: var(--gap-s); margin-bottom: var(--gap-s); }
.choix {
  display: flex; align-items: center; gap: var(--gap-m);
  width: 100%;
  padding: var(--gap-s) var(--gap-m);
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  background: var(--fond-carte);
  text-align: left;
  transition: transform var(--duree-courte) var(--courbe);
}
.choix:active { transform: scale(0.98); }
.choix-apercu { flex: 0 0 auto; border-radius: 6px; background: var(--grad-partage); } /* 1.5.2 : comme l image exportee */
.choix-carre { width: 44px; height: 44px; }
.choix-vertical { width: 30px; height: 53px; margin: 0 7px; }
.choix-texte { display: flex; flex-direction: column; gap: 2px; }
.choix-texte strong { font-weight: 600; }
.choix-texte small { font-size: var(--t-petit); color: var(--texte-doux); }

/* ====================== DIVERS ====================== */

.toast {
  position: fixed; left: 50%; bottom: calc(136px + var(--sure-bas));
  transform: translateX(-50%);
  z-index: 80;
  background: var(--prune-fonce);
  color: var(--creme);
  padding: 12px 22px;
  border-radius: var(--rayon-rond);
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}
#canvas-partage { position: fixed; left: -9999px; top: -9999px; }

/* ====================== PREMIUM, LE LOTUS D OR (1.3.1, 15/10/2026) ======================
   Choix de Nathie sur maquette (AuroraBloom/maquettes/badge-premium/). Visible seulement
   chez une abonnee. Couleurs dans tokens.css. */

/* Texte en feuille d or qui ondule, et eclat qui balaie l element toutes les 4,2 s. */
.feuille-or {
  background: var(--or-metal);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: or-lumiere 6s ease-in-out infinite;
}
@keyframes or-lumiere { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.reflet { position: relative; overflow: hidden; }
.reflet::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 250, 230, 0.55), transparent);
  transform: skewX(-18deg);
  animation: or-balayage 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes or-balayage { 0% { left: -60%; } 38% { left: 130%; } 100% { left: 130%; } }

/* L insigne sous le titre « Aurora Bloom » */
.insigne-premium {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 8px;
  border-radius: var(--rayon-rond);
  background: linear-gradient(var(--insigne-fond), var(--insigne-fond)) padding-box, var(--or-metal) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 18px -6px var(--or-lueur);
}
.insigne-premium svg { width: 24px; height: 15px; flex: none; }
.insigne-premium .mot { font-family: var(--police-titre); font-style: italic; font-weight: 600; font-size: 13.5px; letter-spacing: 0.03em; }

/* Le sceau d une affirmation reservee, ouverte par l abonnement.
   Fond prune translucide : lisible sur les degrades sombres comme sur Amour, Gratitude, Matin. */
.sceau-premium {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: var(--gap-s);
  padding: 5px 11px 5px 8px;
  border-radius: var(--rayon-rond);
  background: var(--sceau-fond);
  border: 1px solid var(--or-trait);
}
.sceau-premium svg { width: 22px; height: 14px; flex: none; }
.sceau-premium span { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--or-texte); }

/* La carte de membre des reglages */
.carte-membre {
  margin: 0 0 var(--gap-m);
  border-radius: 22px;
  padding: 18px;
  color: var(--membre-texte);
  background: var(--membre-halo), var(--membre-fond) padding-box, var(--or-metal) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 18px 40px -22px var(--voile);
}
.carte-membre-lien { background: none; border: 0; padding: 8px 0 0; color: var(--dore-clair); text-decoration: underline; font: inherit; font-size: 12.5px; cursor: pointer; }
.carte-membre-haut { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-s); }
.carte-membre-surtitre { font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--dore-clair); font-weight: 600; }
.carte-membre-grand { font-family: var(--police-titre); font-style: italic; font-weight: 600; font-size: 34px; line-height: 1.05; margin-top: 4px; }
.carte-membre-emb { width: 64px; height: 40px; flex: none; filter: drop-shadow(0 0 10px var(--or-lueur)); }
.carte-membre-filet { height: 1px; margin: 14px 0 10px; background: linear-gradient(90deg, transparent, var(--or-trait), transparent); }
.carte-membre-avantages { font-size: 12.5px; line-height: 1.5; }
.carte-membre-gerer { font-size: 11.5px; opacity: 0.7; margin-top: 8px; }

/* Telephone regle pour reduire les animations : tout reste immobile. */
@media (prefers-reduced-motion: reduce) {
  .feuille-or, .reflet::after { animation: none; }
  .reflet::after { display: none; }
}

/* ====================== AVIS (1.5.7) ====================== */
/* La fenetre reprend l embleme du mur payant ; les etoiles sont au trait d or, pleines une fois choisies. */
.avis-etoiles { display: flex; justify-content: center; gap: 6px; margin: 0 0 4px; }
.avis-etoiles button { width: 46px; height: 46px; padding: 5px; border-radius: 50%; transition: transform var(--duree-courte) var(--courbe); }
.avis-etoiles button:active { transform: scale(0.9); }
.avis-etoiles svg { width: 100%; height: 100%; fill: transparent; stroke: var(--dore); stroke-width: 1.4; stroke-linejoin: round; transition: fill var(--duree-courte) var(--courbe); }
.avis-etoiles button.allumee svg { fill: var(--dore); }
.avis-etoiles button:focus-visible { outline: 2px solid var(--prune-clair); outline-offset: 2px; }
.avis-note-mot { min-height: 1.4em; margin: 0 0 var(--gap-s); text-align: center; font-family: var(--police-titre); font-style: italic; color: var(--prune); }
.avis-champ {
  display: block; width: 100%; margin: 0 0 var(--gap-s);
  padding: 12px 14px; border-radius: var(--rayon-petit);
  border: 1px solid var(--trait); background: var(--fond-carte); color: var(--texte);
  font: inherit; font-size: var(--t-corps); resize: vertical;
}
.avis-champ:focus { outline: none; border-color: var(--dore); box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.18); }
.avis-piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.avis-accord { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 var(--gap-m); font-size: var(--t-petit); color: var(--texte-doux); line-height: 1.5; }
.avis-accord input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--prune); flex: none; }
.avis-erreur { margin: 0 0 var(--gap-s); text-align: center; font-size: var(--t-petit); color: #A2463E; }
#btn-avis-envoyer:disabled { opacity: 0.45; }
.avis-discret { margin: var(--gap-s) 0 0; text-align: center; font-size: 12px; line-height: 1.45; color: var(--texte-doux); }
.avis-merci { text-align: center; padding: var(--gap-m) 0 0; }
.avis-merci-lotus { width: 74px; height: 46px; fill: var(--dore); margin: 0 auto var(--gap-s); display: block; }


/* ====================== 1.5.9 (controle du 07/11/2026) ====================== */
/* Avec 4 boutons en bas, un peu moins d ecart sur les petits ecrans. */
@media (max-width: 380px) { .barre-bas { gap: var(--gap-m); } }
/* La photo est maintenant nette : les barres ont leur propre fond fondu, sinon les icones
   se perdent sur une palme ou un rocher sombre. */
.barre-bas { background: linear-gradient(to top, rgba(28, 12, 24, 0.62) 0%, rgba(28, 12, 24, 0.32) 60%, rgba(28, 12, 24, 0)); padding-top: 26px; }
.barre-haut { background: linear-gradient(to bottom, rgba(28, 12, 24, 0.42), rgba(28, 12, 24, 0)); }
.fil-clair .barre-bas { background: linear-gradient(to top, rgba(251, 244, 236, 0.9) 0%, rgba(251, 244, 236, 0.55) 60%, rgba(251, 244, 236, 0)); }
.fil-clair .barre-haut { background: linear-gradient(to bottom, rgba(251, 244, 236, 0.7), rgba(251, 244, 236, 0)); }
.nav-libelle { white-space: nowrap; }

/* La carte du blog, dans le fil. */
.carte-blog .btn-debloquer { margin-top: var(--gap-m); }

/* Sur ordinateur : l aide au defilement, et des icones a taille d ecran. */
.aide-defile { display: none; }
@media (hover: hover) and (pointer: fine) {
  .aide-defile {
    display: block; position: fixed; left: 50%; bottom: 118px; transform: translateX(-50%);
    z-index: 15; pointer-events: none; padding: 8px 16px; border-radius: 999px;
    background: rgba(44, 27, 40, 0.45); color: #FFF8EF; font-size: 14px;
    transition: opacity var(--duree-courte) var(--courbe);
  }
  .a-defile .aide-defile { opacity: 0; }
}
@media (min-width: 900px) and (hover: hover) {
  .icone { width: 54px; height: 54px; }
  .icone svg { width: 27px; height: 27px; }
  .nav-libelle { font-size: 14px; }
  .titre-app { font-size: 22px; }
}

/* 1.5.13 : le pied des Reglages, toutes les creations de Nathie. */
.pied-reglages { margin-top: var(--gap-l); padding-top: var(--gap-m); border-top: 1px solid var(--trait); }
.pied-reglages h3 { font-family: var(--police-titre); font-size: 17px; margin: 0 0 var(--gap-s); color: var(--texte); }
.autres-creations { display: grid; gap: 2px; }
.autres-creations a { display: flex; flex-direction: column; padding: 9px 0; text-decoration: none; color: var(--texte); border-bottom: 1px solid var(--trait); }
.autres-creations a strong { font-weight: 600; font-size: 15px; }
.autres-creations a span { font-size: var(--t-petit); color: var(--texte-doux); }

/* 1.5.14 : deux formules au choix. La carte choisie garde le cadre prune, l autre reste discrete. */
.prem-formules { display: grid; gap: 14px; }
button.prem-offre { display: block; width: 100%; text-align: left; font: inherit; color: var(--texte); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.prem-offre:not(.choisie) { border-color: var(--trait); box-shadow: none; }
.prem-offre[hidden] { display: none; }
.prem-offre:focus-visible { outline: 2px solid var(--dore); outline-offset: 2px; }
.prem-offre-detail { display: block; margin-top: 2px; font-size: var(--t-petit); color: var(--texte-doux); }
.prem-offre-detail[hidden] { display: none; }

/* 1.5.15 : les avis des premieres personnes. */
.temo-etoiles { display: inline-flex; gap: 2px; vertical-align: -2px; }
.temo-etoiles svg { width: 14px; height: 14px; display: block; }
.temo-etoiles .pleine svg { fill: var(--dore); }
.temo-etoiles .vide svg { fill: none; stroke: var(--dore); stroke-width: 1.6; opacity: .6; }
.prem-temoignages { margin: 0 0 var(--gap-m); text-align: center; }
.temo-tete { display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--texte); }
.temo-scene { display: grid; margin-top: 8px; }
.temo-une { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; animation: temo-entre .6s ease-out both; }
.temo-une .temo-etoiles { display: none; }
.temo-une.sort { animation: temo-sort .6s ease-in both; }
.temo-une blockquote { margin: 0; font-family: var(--police-titre); font-style: italic; font-size: 15px; line-height: 1.45; color: var(--texte); }
.temo-une figcaption { font-size: var(--t-petit); color: var(--texte-doux); }
@keyframes temo-entre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes temo-sort { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
.temo-lien { background: none; border: 0; padding: 4px 8px; font: inherit; font-size: var(--t-petit); color: var(--prune); text-decoration: underline; cursor: pointer; }
.temo-liste { display: grid; gap: 10px; margin: var(--gap-m) 0; text-align: left; }
.temo-carte { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--fond-carte); border: 1px solid var(--trait); }
.temo-carte blockquote { margin: 6px 0 4px; font-size: 15px; line-height: 1.5; color: var(--texte); }
.temo-carte figcaption { font-size: var(--t-petit); color: var(--texte-doux); font-weight: 600; }
.temo-langue { text-align: center; font-size: var(--t-petit); color: var(--texte-doux); margin: 0; }
.temo-langue[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .temo-une, .temo-une.sort { animation: none; } }

/* 1.5.15 : les petits coeurs qui montent (js/coeurs.js). */
.coeurs-calque { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.coeur-vol { position: absolute; display: block; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 6px rgba(44, 27, 40, .35)); will-change: transform, opacity; }
.coeur-vol svg { width: 100%; height: 100%; display: block; }
.coeur-grand { filter: drop-shadow(0 4px 18px rgba(44, 27, 40, .45)); }
#fil .carte-texte { -webkit-user-select: none; user-select: none; }