:root {
  /* couleurs fixes */
  --creme: #FBF6EE;
  --creme-2: #F4ECDF;
  --encre: #15212B;          /* bleu-graphite, jamais noir pur */
  --encre-2: #3B4752;        /* texte secondaire — 9,3:1 sur crème */
  --encre-3: #47525C;        /* méta, légendes — 7,4:1 sur crème, 4,6:1 sur ciel */
  --peche: #FFC9A8;
  --abricot: #FF9A5C;
  --ciel: #9CCBF2;
  --menthe: #A6E5CD;
  --sable: #F3DCB2;
  --braise: #B4441A;         /* signal texte (AA sur crème : 5,2:1) */
  --nuit: #121A21;           /* la section sombre ponctuelle */

  /* lumière vivante (publiée par lumiere.js, valeurs « midi » par défaut) */
  --l0: 252 248 240;
  --l1: 164 211 246;
  --l2: 205 234 251;
  --l3: 181 235 212;
  --l4: 255 215 188;

  /* matières */
  --verre: rgb(255 255 255 / .52);
  --verre-fort: rgb(255 255 255 / .74);
  --verre-bord: rgb(255 255 255 / .78);
  --filet: rgb(21 33 43 / .13);
  --filet-fort: rgb(21 33 43 / .24);
  --ombre: 0 1px 0 rgb(255 255 255 / .85) inset, 0 24px 60px -28px rgb(30 45 60 / .28), 0 2px 6px -2px rgb(30 45 60 / .06);

  /* typographie */
  --f-titre: "Clash Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-texte: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* mouvement */
  --e-sortie: cubic-bezier(.16, 1, .3, 1);      /* « se lève » */
  --e-doux: cubic-bezier(.45, 0, .2, 1);        /* « glisse » */
  --d-court: .28s;
  --d-moyen: .7s;
  --d-long: 1.2s;

  /* mise en page */
  --gouttiere: clamp(16px, 4vw, 56px);
  --max: 1360px;
  --rayon: 28px;
  --rayon-s: 16px;
}

/* ---------- Base ---------- */

/* ===== Base ===== */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-texte); font-size: 17px; line-height: 1.55; color: var(--encre); background: var(--creme); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
.cadre { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.page { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; } /* le pied reste en bas de l'écran même sur une page courte */
.page > main { flex: 1 0 auto; }

/* ===== Fond vivant (repris de la charte) ===== */
.ciel { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: rgb(var(--l0)); overflow: hidden; }
.ciel canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.gl-pret .ciel canvas { opacity: 1; }
.ciel__repli { position: absolute; inset: -25%;
  background: radial-gradient(38% 42% at 22% 22%, rgb(var(--l1)) 0%, rgb(var(--l1) / 0) 70%),
    radial-gradient(40% 46% at 84% 28%, rgb(var(--l2)) 0%, rgb(var(--l2) / 0) 70%),
    radial-gradient(46% 44% at 30% 84%, rgb(var(--l3)) 0%, rgb(var(--l3) / 0) 70%),
    radial-gradient(42% 46% at 80% 78%, rgb(var(--l4)) 0%, rgb(var(--l4) / 0) 70%), rgb(var(--l0)); }

/* ===== Typographie ===== */
.titre { font-family: var(--f-titre); font-weight: 400; letter-spacing: -.035em; line-height: .98; font-size: clamp(40px, 6vw, 76px); }
.titre-2 { font-family: var(--f-titre); font-weight: 450; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(28px, 3.4vw, 42px); }
.titre-3 { font-family: var(--f-titre); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; font-size: 22px; }
.chapo { font-size: clamp(17px, 1.4vw, 19px); color: var(--encre-2); max-width: 34em; }
.micro { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.discret { color: var(--encre-3); font-size: 14px; }

/* ===== En-tête : opaque, simple, identique partout ===== */
.tete { position: sticky; top: 0; z-index: 20; background: #FBF6EE; border-bottom: 1px solid var(--filet);
  -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); }
.tete__barre { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo svg { width: 28px; height: 28px; }
.logo span { font-family: var(--f-titre); font-weight: 520; font-size: 21px; letter-spacing: -.025em; }
.nav { display: flex; gap: 6px; }
.nav a { padding: 9px 14px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 15px; color: var(--encre-2); white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { background: #fff; color: var(--encre); }
.tete .bouton { height: 42px; padding: 0 18px; font-size: 14.5px; }
.nav-mobile { display: none; }
@media (max-width: 860px) {
  .tete__barre { height: 60px; }
  .tete .nav { display: none; }
  .nav-mobile { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; }
  .nav-mobile::-webkit-scrollbar { display: none; }
  .nav-mobile a { flex: none; padding: 6px 11px; border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--encre-2); background: rgb(255 255 255 / .6); }
  .nav-mobile a[aria-current="page"] { background: var(--encre); color: var(--creme); }
  .tete .bouton { height: 38px; padding: 0 14px; font-size: 13.5px; }
}

/* ===== Boutons (jamais de flèche) ===== */
.bouton { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--encre); color: var(--creme); font-weight: 600; font-size: 15.5px; text-decoration: none; white-space: nowrap; transition: transform .15s ease, background .2s ease; }
.bouton:hover { background: #22323f; }
.bouton:active { transform: scale(.98); }
.bouton--clair { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 1px var(--filet-fort); }
.bouton--clair:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--encre); }
.bouton--plein { width: 100%; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===== Cartes ===== */
.carte { background: rgb(255 255 255 / .74); border: 1px solid rgb(255 255 255 / .9); border-radius: 24px; box-shadow: 0 20px 50px -30px rgb(30 45 60 / .35); }

/* ===== Sections ===== */
.bloc { padding: clamp(28px, 4vw, 48px) 0; }
.bloc__tete { display: grid; gap: 10px; margin-bottom: 28px; max-width: 40em; }

/* ===== Accueil : premier écran ===== */
.haut { padding: clamp(28px, 5vw, 64px) 0 clamp(24px, 4vw, 48px); }
.haut__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.haut__marque { font-family: var(--f-titre); font-weight: 500; font-size: 20px; letter-spacing: -.02em; color: var(--encre-2); margin-bottom: 10px; }
.points { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 14px; }
.points li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--filet); }
.points b { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); font-weight: 500; }
@media (max-width: 860px) { .haut__grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .points li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ===== Encart horoscope du jour ===== */
.horo { padding: 22px; }
.horo__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.signes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.signes button, .signes a { height: 38px; border: 0; border-radius: 999px; background: rgb(21 33 43 / .05); font-weight: 600; font-size: 14px; cursor: pointer; display: grid; place-items: center; text-decoration: none; white-space: nowrap; }
.signes button:hover, .signes a:hover { background: rgb(21 33 43 / .1); }
.signes [aria-pressed="true"], .signes [aria-current="page"] { background: var(--encre); color: var(--creme); }
.horo__signe { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--filet); }
.horo__nom { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.horo__nom h2, .horo__nom h3 { font-family: var(--f-titre); font-weight: 300; font-size: 44px; letter-spacing: -.04em; line-height: 1; }
.horo__phrase { margin: 10px 0 16px; font-weight: 500; font-size: 17px; }
.jauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.jauge span { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--encre-3); }
.jauge b { font-family: var(--f-titre); font-weight: 300; font-size: 26px; letter-spacing: -.03em; }
.jauge b small { font-size: 13px; color: var(--encre-3); }
.jauge i { display: block; height: 3px; border-radius: 3px; background: rgb(21 33 43 / .1); margin-top: 4px; overflow: hidden; }
.jauge i::after { content: ""; display: block; height: 100%; width: calc(var(--v) * 10%); background: var(--braise); border-radius: 3px; }

/* ===== Offre horoscope personnalisé (bande réutilisée) ===== */
.offre { padding: clamp(22px, 3vw, 32px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-areas: "texte durees" "cta durees"; gap: 18px 24px; align-items: center; }
.offre__texte { grid-area: texte; align-self: end; }
.offre > .durees { grid-area: durees; }
.offre__cta { grid-area: cta; justify-self: start; align-self: start; }
.durees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.duree { display: grid; gap: 2px; padding: 16px; border-radius: 18px; background: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px var(--filet); transition: box-shadow .2s ease; }
.duree:hover, .duree.est-choisie { box-shadow: inset 0 0 0 2px var(--encre); }
.duree span { font-weight: 600; }
.duree b { font-family: var(--f-titre); font-weight: 400; font-size: 30px; letter-spacing: -.03em; line-height: 1.1; }
.duree small { color: var(--encre-3); font-size: 13px; }
@media (max-width: 860px) { .offre { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "durees" "cta"; } .offre__texte { align-self: auto; } .offre__cta { justify-self: stretch; align-self: auto; } }
@media (max-width: 420px) { .duree { padding: 12px; } .duree b { font-size: 24px; } }

/* ===== Page signe ===== */
details.plus { border-top: 1px solid var(--filet); padding-top: 12px; }
details.plus summary { cursor: pointer; font-weight: 600; font-size: 14.5px; list-style: none; }
details.plus summary::-webkit-details-marker { display: none; }
details.plus summary::after { content: " +"; }
details.plus[open] summary::after { content: " −"; }
details.plus p { margin-top: 10px; font-size: 15px; color: var(--encre-2); }
details.plus dl { margin: 10px 0 0; display: grid; gap: 8px; font-size: 15px; }
details.plus dt { font-weight: 600; }
details.plus dd { margin: 0; color: var(--encre-2); }
.signes--rang { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 700px) { .signes--rang { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== Formulaires ===== */
.formulaire { padding: clamp(22px, 3vw, 30px); display: grid; gap: 14px; }
.champs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.champ { display: grid; gap: 6px; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-size: 13.5px; font-weight: 600; color: var(--encre-2); }
.champ input, .champ select { height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--filet-fort); background: #fff; width: 100%; min-width: 0; font-size: 16px; }
.champ input:focus, .champ select:focus { outline: 2px solid var(--encre); outline-offset: 1px; }
.case { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--encre-2); }
.case input { width: 18px; height: 18px; accent-color: var(--encre); }
.message { padding: 16px 18px; border-radius: 16px; background: #E9F6EF; font-weight: 500; }
@media (max-width: 520px) { .champs { grid-template-columns: minmax(0, 1fr); } }

/* ===== Deux colonnes génériques ===== */
.deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .deux { grid-template-columns: minmax(0, 1fr); } }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.etiquettes span, .etiquettes button { padding: 8px 14px; border: 0; color: var(--encre); border-radius: 999px; background: #fff; font-weight: 600; font-size: 14px; box-shadow: inset 0 0 0 1px var(--filet); }

/* ===== Formules ===== */
.periode { display: inline-flex; padding: 4px; border-radius: 999px; background: rgb(21 33 43 / .06); margin-bottom: 22px; }
.periode button { height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.periode button[aria-pressed="true"] { background: var(--encre); color: var(--creme); }
.formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.formule { padding: 24px; display: grid; gap: 16px; align-content: start; }
.formule--vedette { background: var(--encre); color: var(--creme); border-color: var(--encre); }
.formule--vedette .discret, .formule--vedette .micro { color: rgb(251 246 238 / .7); }
.formule--vedette .bouton { background: var(--creme); color: var(--encre); }
.prix { font-family: var(--f-titre); font-weight: 300; font-size: 48px; letter-spacing: -.04em; line-height: 1; }
.prix small { font-family: var(--f-texte); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 15.5px; }
.liste li { padding-left: 22px; position: relative; }
.liste li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--abricot); }
.formule .bouton { margin-top: auto; }
@media (max-width: 900px) { .formules { grid-template-columns: minmax(0, 1fr); } }

/* ===== Prévisions IA ===== */
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.etape { padding: 22px; display: grid; gap: 8px; }
.etape b { font-family: var(--f-titre); font-weight: 300; font-size: 34px; line-height: 1; color: var(--braise); }
.produits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.produit { padding: 24px; display: grid; gap: 12px; align-content: start; }
.produit .bouton { margin-top: 6px; }
.paquets { display: grid; gap: 8px; }
.paquet { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); }
.paquet b { font-family: var(--f-titre); font-weight: 400; font-size: 22px; }
@media (max-width: 900px) { .etapes, .produits { grid-template-columns: minmax(0, 1fr); } }

/* ===== Pied ===== */
.pied { border-top: 1px solid var(--filet); padding: 28px 0 40px; margin-top: clamp(32px, 5vw, 64px); background: rgb(251 246 238 / .9); }
.pied__barre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; }
.pied nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14.5px; }
.pied nav a { text-decoration: none; color: var(--encre-2); }
.pied nav a:hover { color: var(--encre); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.offre .titre-2 { font-size: clamp(24px, 2.4vw, 32px); }

/* ===== Accueil : accroche + trois tuiles (remplace le pavé de texte) ===== */
.accroche { font-family: var(--f-titre); font-weight: 450; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 24px; max-width: 14em; }
.offres3, .offres4 { display: grid; gap: 12px; }
/* quatre tuiles : la colonne de gauche prend la hauteur de l'encart des signes (les tuiles se partagent la place), les deux se terminent sur la même ligne */
@media (min-width: 861px) {
  .haut__grille--tuiles { align-items: stretch; }
  .haut__grille--tuiles > div:first-child { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
  .haut__grille--tuiles .accroche { margin-bottom: 18px; }
  .offres4 { flex: 1; gap: 10px; }
  .haut__grille--tuiles .offre3 { padding: 12px 18px; }
  .haut__grille--tuiles .horo { display: flex; flex-direction: column; }
  .haut__grille--tuiles .horo__signe { flex: 1; display: flex; flex-direction: column; }
  .haut__grille--tuiles .horo__signe > .bouton { margin-top: auto; }
}
.offre3 { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; text-decoration: none; color: var(--encre);
  background: rgb(255 255 255 / .74); border: 1px solid rgb(255 255 255 / .9); box-shadow: 0 14px 34px -26px rgb(30 45 60 / .45); transition: box-shadow .2s ease, transform .2s ease; }
.offre3:hover { box-shadow: 0 0 0 1.5px var(--encre), 0 14px 34px -26px rgb(30 45 60 / .45); }
.offre3__ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(140deg, rgb(var(--l4)), rgb(var(--l1))); }
.offre3__ico svg { width: 26px; height: 26px; fill: none; stroke: var(--encre); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.offre3__txt { display: grid; gap: 2px; min-width: 0; }
.offre3__txt b { font-family: var(--f-titre); font-weight: 500; font-size: 21px; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.offre3__txt small { font-size: 15px; color: var(--encre-2); }
#horoscope-du-jour { scroll-margin-top: 90px; }
@media (max-width: 860px) { #horoscope-du-jour { scroll-margin-top: 130px; } .offre3 { padding: 14px 16px; } .offre3__txt b { font-size: 19px; } }
.badge-gratuit { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 9px; border-radius: 999px; background: #DDF4E9; color: #1D6B4C;
  font-family: var(--f-mono); font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; line-height: 1.3; }
.offre3__txt .badge-gratuit { font-size: 11px; position: relative; top: -2px; }
.sans-coupure { white-space: nowrap; }


/* ===== Langue : sélecteur à drapeau (en-tête) ===== */
.tete__droite { display: flex; align-items: center; gap: 10px; flex: none; }
.tete .bouton .court { display: none; }
.langue { position: relative; }
.langue > summary { list-style: none; }
.langue > summary::-webkit-details-marker { display: none; }
.langue__bouton { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 13px; border-radius: 999px; background: #fff; cursor: pointer; user-select: none;
  box-shadow: inset 0 0 0 1px var(--filet-fort); font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--encre); transition: box-shadow .2s ease; }
.langue__bouton:hover, .langue[open] .langue__bouton { box-shadow: inset 0 0 0 1.5px var(--encre); }
.langue__bouton:focus-visible, .langue__menu a:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.drapeau { width: 20px; height: 14px; flex: none; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgb(21 33 43 / .2); }
.langue__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; margin: 0; padding: 6px; list-style: none; min-width: 200px;
  background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--filet), 0 24px 60px -24px rgb(30 45 60 / .45); }
.langue__menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; font-weight: 500; font-size: 15px; white-space: nowrap; }
.langue__menu a:hover { background: rgb(21 33 43 / .06); }
.langue__menu a[aria-current="true"] { background: var(--encre); color: var(--creme); }
@media (max-width: 860px) {
  .tete__droite { gap: 8px; }
  .langue__bouton { height: 38px; padding: 0 11px; gap: 7px; }
  .langue__menu { min-width: 190px; }
}
@media (max-width: 460px) { .langue__code { display: none; } .langue__bouton { padding: 0 12px; } }
/* téléphone étroit : « Compte » remplace « Créer un compte » (le français garde sa forme longue jusqu'à 381 px, où elle tient) */
@media (max-width: 400px) { .tete .bouton .long { display: none; } .tete .bouton .court { display: inline; } }
@media (min-width: 381px) and (max-width: 400px) { html:lang(fr) .tete .bouton .long { display: inline; } html:lang(fr) .tete .bouton .court { display: none; } }
@media (max-width: 370px) { .tete__barre { gap: 10px; } .logo span { font-size: 19px; } }

/* ===== Message d'erreur des formulaires ===== */
.message--erreur { background: #FCE6DD; color: #7A2A12; }

/* ===== Commande : cases à cocher, panneau « prévisions IA », page de retour ===== */
.case--texte { align-items: flex-start; line-height: 1.4; }
.case--texte input { flex: none; margin: 2px 0 0; }
.commande-ia { margin-top: 20px; max-width: 560px; }
select { appearance: none; -webkit-appearance: none; }
.champ select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2315212B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 38px; }
.merci { padding: clamp(24px, 4vw, 44px); display: grid; gap: 12px; max-width: 640px; }

/* ===== En-tête sur écran moyen : tout reste sur une ligne en version resserrée ; sous 960 px, les liens passent dessous ===== */
@media (min-width: 981px) and (max-width: 1180px) {
  .tete__barre { gap: 12px; }
  .logo span { font-size: 19px; }
  .logo svg { width: 24px; height: 24px; }
  .nav { gap: 2px; }
  .nav a { padding: 8px 8px; font-size: 14px; }
  .tete .bouton { padding: 0 14px; font-size: 13.5px; }
  .langue__bouton { padding: 0 10px; gap: 6px; }
}
@media (min-width: 861px) and (max-width: 980px) {
  .tete .nav { display: none; }
  .nav-mobile { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; }
  .nav-mobile a { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--encre-2); background: rgb(255 255 255 / .6); }
  .nav-mobile a[aria-current="page"] { background: var(--encre); color: var(--creme); }
  #horoscope-du-jour { scroll-margin-top: 130px; }
  .module { scroll-margin-top: 160px; }
}

/* ===== Noms de signes plus longs que le français (allemand, néerlandais, polonais…) : la pastille garde son air sur téléphone ===== */
@media (max-width: 420px) { html:not(:lang(fr)) .signes button, html:not(:lang(fr)) .signes a { font-size: 13px; letter-spacing: -.01em; padding: 0 2px; } }
@media (max-width: 370px) { .signes button, .signes a { font-size: 12.5px; letter-spacing: -.015em; padding: 0 2px; } }
/* sur téléphone, les langues aux noms de signes les plus longs passent la grille de l'accueil à trois colonnes ; les onglets de décan espagnols et portugais resserrent leur titre */
@media (max-width: 420px) { html:is(:lang(de), :lang(es), :lang(pt), :lang(nl)) .horo .signes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { html:is(:lang(es), :lang(pt)) .onglet-decan__n { font-size: 13.5px; letter-spacing: -.02em; } }
/* italien : libellés un peu plus longs, les liens passent dessous jusqu'à 1000 px */
@media (min-width: 981px) and (max-width: 1000px) {
  html:lang(it) .tete .nav { display: none; }
  html:lang(it) .nav-mobile { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; }
  html:lang(it) .nav-mobile a { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--encre-2); background: rgb(255 255 255 / .6); }
  html:lang(it) .nav-mobile a[aria-current="page"] { background: var(--encre); color: var(--creme); }
}

/* ===== Compte : état de connexion dans l'en-tête (toutes les pages) ===== */
.tete__connexion { padding: 9px 12px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 15px; color: var(--encre-2); white-space: nowrap; }
.tete__connexion:hover { background: #fff; color: var(--encre); }
.tete .bouton { gap: 9px; }
.initiale { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; margin-left: -7px; border-radius: 50%; background: var(--peche); color: var(--encre);
  font-style: normal; font-family: var(--f-titre); font-weight: 600; font-size: 13px; line-height: 1; }
.initiale[hidden] { display: none; }
.lien { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 14.5px; color: var(--encre-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lien:hover { color: var(--encre); text-decoration-thickness: 1.5px; }
.lien:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; border-radius: 4px; }
/* ordinateur portable : le lien devient une pastille « personne » (le texte reste lu par les lecteurs d'écran) ; en dessous de 1060 px, « Se connecter » est dans la rangée de liens (jusqu'à 980 px) et dans le pied de page */
@media (min-width: 1060px) and (max-width: 1359px) {
  .tete__connexion { width: 42px; height: 42px; padding: 0; font-size: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2315212B' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.5 20c.9-4 3.8-6 7.5-6s6.6 2 7.5 6'/%3E%3C/svg%3E") no-repeat center; box-shadow: inset 0 0 0 1px var(--filet-fort); }
  .tete__connexion:hover { box-shadow: inset 0 0 0 1.5px var(--encre); }
}
@media (max-width: 1059px) { .tete__connexion { display: none; } }

/* ===== Horoscope personnalisé : « Commander », durée, formulaire dans la même carte ===== */
.flux { scroll-margin-top: 90px; }
.flux__etape { display: grid; gap: 14px; }
.flux__etape[hidden] { display: none; }
.flux .chapo { font-size: 16.5px; margin: 0; }
.flux__recap { display: flex; justify-content: space-between; align-items: center; gap: 4px 12px; margin: 0; padding: 4px 6px 4px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); font-size: 15px; }
.flux__recap .lien { min-height: 44px; padding: 0 10px; }

/* pages légales (26/10/2026) */
.pied__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; font-size: 13px; }
.pied__legal a { color: var(--encre-3); text-decoration: none; }
.pied__legal a:hover { color: var(--encre); text-decoration: underline; }
.texte-legal { max-width: 780px; padding-top: clamp(24px, 5vw, 56px); }
.texte-legal h2 { font-size: 20px; margin: 32px 0 10px; }
.texte-legal p, .texte-legal li { line-height: 1.6; }
.texte-legal ul { padding-left: 1.2em; }
.texte-legal li { margin-bottom: 6px; }

/* Prévisions IA : carte des révolutions (ce que c'est, à quoi ça sert) et aide du choix de période (29/10/2026) */
.revolution { display: grid; gap: 8px; }
.revolution p { font-size: 14.5px; line-height: 1.5; color: var(--encre-2); margin: 0 2px; }
.revolution p b { color: var(--encre); font-weight: 600; }
.champ__aide { font-size: 13.5px; line-height: 1.45; color: var(--encre-3); margin: 0; }

/* Lieu de naissance : liste des villes reconnues sous le champ (29/10/2026) */
.champ--lieu { position: relative; }
.lieux { position: absolute; z-index: 30; left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--filet-fort); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .12); max-height: 280px; overflow-y: auto; }
.lieux li { padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 15.5px; line-height: 1.3; color: var(--encre); }
.lieux li:hover, .lieux li[aria-selected="true"] { background: var(--creme-2); }
.lieux__etat--faute { color: var(--braise); }

/* ===== Accueil : la puissance de Zodiac Intelligence (29/10/2026) ===== */
.accueil__chapo { margin: -6px 0 20px; font-size: clamp(16px, 1.25vw, 17.5px); max-width: 36em; }
.chiffres { list-style: none; margin: clamp(18px, 2.5vw, 28px) 0 0; padding: 6px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chiffres li { padding: 16px 22px; display: grid; gap: 6px; align-content: start; }
.chiffres li + li { border-left: 1px solid var(--filet-fort); }
.chiffres b { font-family: var(--f-titre); font-weight: 450; font-size: clamp(30px, 3vw, 40px); letter-spacing: -.03em; line-height: 1; }
.chiffres span { font-size: 14px; line-height: 1.4; color: var(--encre-2); }
@media (max-width: 860px) {
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres li { padding: 14px 16px; }
  .chiffres li + li { border-left: 0; }
  .chiffres li:nth-child(even) { border-left: 1px solid var(--filet-fort); }
  .chiffres li:nth-child(n+3) { border-top: 1px solid var(--filet-fort); }
}

.vitrine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 52px); padding: clamp(22px, 4vw, 48px); align-items: center; }
.vitrine__texte { display: grid; gap: 16px; align-content: start; }
.vitrine__outils { list-style: none; margin: 2px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vitrine__outils li { font-size: 13.5px; line-height: 1; padding: 8px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet-fort); color: var(--encre); }
.vitrine__outils .vitrine__reste { background: var(--encre); color: var(--creme); box-shadow: none; font-weight: 600; }
.vitrine__trads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vitrine__trad { margin: 0; padding: 14px 14px 12px; border-radius: 18px; background: rgb(255 255 255 / .82); box-shadow: inset 0 0 0 1px rgb(21 33 43 / .06); display: grid; gap: 10px; }
.vitrine__dessin { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vitrine__dessin svg { max-width: 100%; max-height: 100%; }
.vitrine__trad figcaption { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.vitrine__trad figcaption svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 900px) { .vitrine { grid-template-columns: 1fr; } }

.verif { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); padding: clamp(22px, 4vw, 48px); }
.verif__tete { display: grid; gap: 16px; align-content: start; }
.verif__exemples { list-style: none; margin: 2px 0 6px; padding: 0; display: grid; gap: 8px; }
.verif__exemples li { padding: 11px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); font-size: 15.5px; }
.verif__exemples li::before { content: "« "; color: var(--encre-3); }
.verif__exemples li::after { content: " »"; color: var(--encre-3); }
.verif__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: center; }
.verif__point { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); }
.verif__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 600; font-size: 14px; color: var(--encre); background: var(--menthe); }
.verif__point:first-child .verif__n { background: var(--peche); }
.verif__point h3 { font-family: var(--f-titre); font-weight: 500; font-size: 19px; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 6px; }
.verif__point p { font-size: 15px; line-height: 1.5; color: var(--encre-2); }
@media (max-width: 900px) { .verif { grid-template-columns: 1fr; } }
.vitrine .boutons .bouton, .verif .boutons .bouton { padding: 0 20px; }

/* Accueil : les 12 signes en liens, et la foire aux questions (référencement, 29/10/2026) */
.signes-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 16px; padding: 0 6px; }
.signes-liens .micro { margin-right: 4px; }
.signes-liens a { font-size: 14.5px; color: var(--encre-2); text-decoration: none; border-bottom: 1px solid var(--filet); padding-bottom: 1px; }
.signes-liens a:hover { color: var(--encre); border-bottom-color: var(--encre); }
.faq { display: grid; gap: 20px; }
.faq__liste { display: grid; gap: 10px; }
.faq__item { background: rgb(255 255 255 / .74); border: 1px solid rgb(255 255 255 / .9); border-radius: 18px; box-shadow: 0 14px 34px -28px rgb(30 45 60 / .45); }
.faq__item summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 22px; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 22px; line-height: 1; color: var(--encre-2); }
.faq__item[open] summary::after { content: "−"; }
.faq__item h3 { font-family: var(--f-titre); font-weight: 500; font-size: 18px; letter-spacing: -.01em; line-height: 1.3; }
.faq__item p { padding: 0 22px 20px; font-size: 15.5px; line-height: 1.55; color: var(--encre-2); max-width: 70em; }

/* Bandeau de langue : proposé quand la langue du navigateur a sa version (jamais de redirection forcée) */
.bandeau-langue { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; width: min(560px, calc(100% - 32px));
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--encre); color: var(--creme); box-shadow: 0 18px 40px -18px rgb(21 33 43 / .6); }
.bandeau-langue p { flex: 1; font-size: 14.5px; line-height: 1.3; }
.bandeau-langue a { flex: none; background: var(--creme); color: var(--encre); font-weight: 600; font-size: 14px; padding: 9px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.bandeau-langue button { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .1); color: var(--creme); font-size: 18px; line-height: 1; cursor: pointer; }
@media (max-width: 520px) { .bandeau-langue { border-radius: 20px; flex-wrap: wrap; } .bandeau-langue p { flex-basis: calc(100% - 50px); } }

/* Pages d'outil (lot 3 du référencement, 29/10/2026) */
.fil { margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.fil a { color: var(--encre-3); text-decoration: none; }
.fil a:hover { color: var(--encre); text-decoration: underline; }
.outil-haut { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.outil-formule { margin-top: 18px; }
.outil-formule .badge { font-size: 12.5px; padding: 6px 12px; }
.outil-dessin { margin: 0; padding: clamp(16px, 2.5vw, 28px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.outil-dessin svg { max-width: 100%; max-height: 100%; }
.outil-corps { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); gap: 18px; align-items: start; }
.outil-texte { padding: clamp(22px, 3.5vw, 40px); display: grid; gap: 14px; }
.outil-texte p { font-size: 16.5px; line-height: 1.65; color: var(--encre-2); }
.outil-texte h2 + p, .outil-texte p + h2 { margin-top: 0; }
.outil-texte h2:not(:first-child) { margin-top: 14px; }
.outil-usages { margin: 0; }
.outil-etapes { padding: clamp(22px, 3vw, 32px); display: grid; gap: 14px; position: sticky; top: 90px; }
.outil-etapes ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--encre-2); }
.outil-proches { display: grid; gap: 14px; }
.proches { display: flex; flex-wrap: wrap; gap: 10px; }
.proche { font-size: 15px; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet-fort); color: var(--encre); text-decoration: none; }
a.proche:hover { box-shadow: inset 0 0 0 1px var(--encre); }
.proche--tous { background: var(--encre); color: var(--creme); box-shadow: none; font-weight: 600; }
a.outil__nom { color: inherit; text-decoration: underline; text-decoration-color: var(--filet-fort); text-underline-offset: 3px; }
a.outil__nom:hover { text-decoration-color: var(--encre); }
@media (max-width: 900px) { .outil-haut, .outil-corps { grid-template-columns: 1fr; } .outil-dessin { max-width: 420px; } .outil-etapes { position: static; } }
.vitrine__outils li:has(> a) { padding: 0; }
.vitrine__outils li > a { display: block; padding: 8px 12px; color: inherit; text-decoration: none; border-radius: 999px; }
.vitrine__outils li > a:hover { background: var(--creme-2); }

/* Accueil : le logo mis en valeur au-dessus du slogan (29/10/2026) */
.marque { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.marque__soleil { flex: none; width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center;
  background: linear-gradient(160deg, rgb(255 255 255 / .95), rgb(255 255 255 / .7)); border: 1px solid rgb(255 255 255 / .95);
  box-shadow: 0 18px 40px -20px rgb(30 45 60 / .45), 0 0 0 6px rgb(255 255 255 / .28); }
.marque__soleil svg { width: 50px; height: 50px; }
.marque__texte { display: grid; gap: 4px; }
.marque__nom { font-family: var(--f-titre); font-weight: 520; font-size: clamp(28px, 2.6vw, 34px); letter-spacing: -.03em; line-height: 1; }
.marque__sous { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
@media (max-width: 860px) { .marque { gap: 12px; margin-bottom: 14px; } .marque__soleil { width: 58px; height: 58px; border-radius: 16px; } .marque__soleil svg { width: 40px; height: 40px; } }

/* Page de comparaison (lot 3, 29/10/2026) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.comp { display: grid; gap: 18px; }
.comp__intro { display: grid; gap: 12px; max-width: 56em; }
.comp__intro .chapo { max-width: none; font-size: 17px; }
.comp__cadre { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px; }
.comp__table { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; line-height: 1.45; }
.comp__table th, .comp__table td { padding: 14px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filet); }
.comp__table thead th { font-family: var(--f-titre); font-weight: 500; font-size: 16px; letter-spacing: -.01em; border-bottom: 1px solid var(--filet-fort); }
.comp__table tbody th { font-weight: 600; color: var(--encre); width: 19%; }
.comp__table td { color: var(--encre-2); }
.comp__table tr:last-child th, .comp__table tr:last-child td { border-bottom: 0; }
.comp__table .comp__nous { background: rgb(166 229 205 / .28); color: var(--encre); }
.comp__table thead .comp__nous { border-radius: 14px 14px 0 0; }
.comp__table tr:last-child .comp__nous { border-radius: 0 0 14px 14px; }
.comp__nm { color: var(--encre-3); font-weight: 600; }
.comp__legende { font-size: 13.5px; }
.comp__essayer { padding: clamp(22px, 3.5vw, 36px); display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.comp__essayer p { color: var(--encre-2); margin-top: 6px; }
.comp__sources { display: grid; gap: 8px; }
.comp__sources ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--encre-2); }
.comp__sources a { color: var(--encre-2); word-break: break-all; }
.duel-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.duel-choix__bloc { padding: clamp(22px, 3vw, 32px); display: grid; gap: 14px; align-content: start; }
.duel-choix__bloc .trad__libres { margin: 0; }
.duel-choix__bloc--nous { background: rgb(166 229 205 / .32); }
.duel-choix__bloc .bouton { justify-self: start; }
.comp__table--duel { min-width: 560px; }
.comp__table--duel tbody th { width: 30%; }
@media (max-width: 760px) { .duel-choix { grid-template-columns: 1fr; } }
.merci__compte { margin-top: 22px; padding: 20px 22px; border-radius: 18px; background: rgb(166 229 205 / .3); display: grid; gap: 10px; justify-items: start; }
.merci__compte p { color: var(--encre-2); }
.champ input[readonly] { background: var(--creme-2); color: var(--encre-2); }

/* Encart de l'horoscope gratuit (30/10/2026) : le titre d'abord, bien visible ; l'aperçu du texte remplit la carte ; un vrai bouton d'action */
.horo__entete { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
.horo__titre { font-family: var(--f-titre); font-weight: 500; font-size: clamp(22px, 2vw, 26px); letter-spacing: -.02em; line-height: 1.15; }
.horo__phrase { margin-bottom: 8px; }
.horo__apercu { margin: 0 0 16px; font-size: 15.5px; line-height: 1.55; color: var(--encre-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
@media (min-width: 861px) { .haut__grille--tuiles .horo__apercu { -webkit-line-clamp: 8; } }
.marque__chiffres { margin: -6px 0 22px; display: inline-block; padding: 8px 14px; border-radius: 999px; background: rgb(255 255 255 / .62); border: 1px solid rgb(255 255 255 / .9);
  font-size: 13.5px; line-height: 1.4; color: var(--encre-2); }
.marque__chiffres b { color: var(--encre); font-weight: 700; }
/* Page des questions : qui est Zodiac Intelligence (30/10/2026) */
.zi { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 48px); padding: clamp(22px, 4vw, 44px); }
.zi__tete { display: grid; gap: 10px; align-content: start; }
.zi__texte { display: grid; gap: 14px; }
.zi__texte p { font-size: 16.5px; line-height: 1.65; color: var(--encre-2); }
@media (max-width: 860px) { .zi { grid-template-columns: 1fr; } }

/* Carte du ciel : la page vend, la création du compte s'ouvre dans une fenêtre (30/10/2026) */
.carte-haut { align-items: center; }
.etiquettes button { font-family: inherit; cursor: pointer; transition: box-shadow .2s ease; }
.etiquettes button:hover { box-shadow: inset 0 0 0 1px var(--encre); }
.carte-haut__trads .carte-trad { cursor: pointer; border: 0; font: inherit; color: inherit; text-align: left; transition: transform .15s ease, box-shadow .2s ease; }
.carte-haut__trads .carte-trad:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--encre); }
.carte-trad__nom { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.carte-trad__nom svg { width: 18px; height: 18px; flex: none; }
.trad__ouvrir { margin-top: 14px; }
.fenetre-compte { width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px; background: var(--creme); color: var(--encre);
  box-shadow: 0 40px 90px -30px rgb(21 33 43 / .55); overflow: auto; }
.fenetre-compte::backdrop { background: rgb(21 33 43 / .45); backdrop-filter: blur(3px); }
.fenetre-compte .formulaire { padding: clamp(20px, 4vw, 34px); box-shadow: none; background: transparent; border: 0; }
.fenetre-compte__fermer { position: sticky; top: 10px; float: right; margin: 10px 10px 0 0; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff;
  box-shadow: inset 0 0 0 1px var(--filet-fort); font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; }

/* ---------- Vraies vues de Zodiac Intelligence (30/10/2026) : vignettes qui s'ouvrent en grand (simple.js) ---------- */
:where(.vue) { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: zoom-in; }
.vue[hidden] { display: none !important; }
.vue__cadre { position: relative; display: block; overflow: hidden; border-radius: 14px; background: #FBF6EE; box-shadow: inset 0 0 0 1px rgb(21 33 43 / .07); }
.vue__cadre img { display: block; width: 100%; height: auto; }
.vue__loupe { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: rgb(255 255 255 / .94); color: var(--encre); box-shadow: 0 2px 10px rgb(21 33 43 / .16); transition: transform .15s ease; }
.vue .vue__loupe svg { width: 18px; height: 18px; max-width: none; max-height: none; }
.vue:hover .vue__loupe { transform: scale(1.1); }
.vue:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; border-radius: 16px; }
/* vignettes carrées des quatre traditions (accueil, haut de la carte du ciel), image entière */
.vitrine__trad.vue { transition: transform .15s ease, box-shadow .2s ease; }
.vitrine__trad.vue:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--encre); }
.vitrine__trad .vue__cadre { aspect-ratio: 1; }
.vitrine__trad .vue__cadre img { height: 100%; object-fit: contain; }
.vues-note { margin: 12px 2px 0; font-size: 13px; line-height: 1.5; color: var(--encre-2); }
.vues-note__ecran { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; cursor: zoom-in; }
/* cartes des quatre lectures, scène des cinq instruments, pages d'outil */
.trad__dessin.vue { cursor: zoom-in; }
.trad__dessin .vue__cadre { width: 100%; height: 100%; display: grid; place-items: center; box-shadow: none; }
.trad__dessin .vue__cadre img { height: 100%; object-fit: contain; }
.instruments__roue .vue { max-width: 540px; }
.instruments__roue .vue__cadre { box-shadow: none; }
.outil-dessin .vue__cadre { box-shadow: none; }
/* la visionneuse */
.loupe { width: min(1500px, calc(100vw - 24px)); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.loupe::backdrop { background: rgb(21 33 43 / .8); backdrop-filter: blur(4px); }
.loupe__figure { margin: 0; display: grid; justify-items: center; gap: 10px; }
.loupe__image { display: block; max-width: 100%; max-height: calc(100dvh - 84px); width: auto; height: auto; border-radius: 16px; background: #FBF6EE; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .55); }
.loupe__legende { color: #fff; font-size: 14px; text-align: center; }
.loupe__fermer { position: fixed; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--encre); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 4px 16px rgb(0 0 0 / .25); }

/* ---------- Carte du ciel : en-tête « La fenêtre » (proposition A validée le 30/10/2026) — l'écran complet de Zodiac Intelligence,
   ses onglets (simple.js) ; au téléphone l'écran garde une taille lisible et se fait glisser du doigt ---------- */
.fen { position: relative; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 50px 100px -50px rgb(21 33 43 / .55), 0 0 0 1px rgb(21 33 43 / .09); }
.fen__barre { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; background: #F4ECDF; border-bottom: 1px solid var(--filet); }
.fen__points { display: flex; gap: 6px; flex: none; }
.fen__points i { width: 10px; height: 10px; border-radius: 50%; background: rgb(21 33 43 / .16); }
.fen__titre { flex: 1; min-width: 0; text-align: center; font: 500 11.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fen__titre b { color: var(--encre); font-weight: 600; }
.fen__fin { width: 42px; flex: none; }
.fen .vue__cadre { border-radius: 0; box-shadow: none; background: #FBF6EE; }
.fen > .vue__loupe { right: 10px; bottom: 10px; pointer-events: none; }
.fen > .vue__loupe svg { width: 18px; height: 18px; }
.carte-tete { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px 48px; align-items: end; }
.carte-tete .chapo { margin: 0; }
.carte-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ecrans-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(26px, 4vw, 40px) 0 14px; }
.ecrans-onglets button { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1px var(--filet-fort);
  font: 600 14px/1 var(--f-texte, inherit); color: var(--encre); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.ecrans-onglets button[aria-selected="true"] { background: var(--encre); color: #fff; box-shadow: none; }
.ecrans-onglets__sep { width: 1px; background: var(--filet-fort); margin: 6px 4px; }
@media (max-width: 900px) {
  .carte-tete { grid-template-columns: minmax(0, 1fr); }
  .fen__titre { font-size: 10px; }
  .ecrans-onglets { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .ecrans-onglets::-webkit-scrollbar { display: none; }
  .ecrans-onglets button { flex: none; }
}
/* au téléphone : la rangée de téléphones (l'interface téléphone de Zodiac) remplace la fenêtre d'ordinateur */
.telephones, .telephones-note { display: none; }
@media (max-width: 700px) {
  .ecrans-onglets, #ecran-zi, .ecrans-note { display: none; }
  .telephones { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 24px -16px 0; padding: 6px 16px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .telephones::-webkit-scrollbar { display: none; }
  .telephones-note { display: block; }
  .tel { flex: 0 0 min(76vw, 300px); margin: 0; scroll-snap-align: center; display: grid; gap: 10px; }
  .tel__cadre { padding: 7px; border-radius: 40px; background: #15212B; box-shadow: 0 30px 60px -30px rgb(21 33 43 / .6); }
  .tel__cadre img { display: block; width: 100%; height: auto; border-radius: 33px; }
  .tel figcaption { text-align: center; font-weight: 600; font-size: 14.5px; }
}
}

/* Page Confidentialité : bouton « Ne pas mesurer mes visites » et son état (30/10/2026) */
.mesure-choix { margin: 14px 0 18px; }
.mesure-choix [data-mesure-etat] { display: block; margin-top: 10px; font-weight: 600; }
.mesure-choix [data-mesure-etat]:empty { display: none; }