/* AstroPredict : correctifs téléphone (octobre 2026).
   Chargée après simple.css et la feuille propre à chaque page. Elle ne contient QUE des règles sous 980 px (ou plus étroites) :
   à partir de 981 px, rien ne change. Cibles : doigt (44 px), lisibilité (12 px), marges (16 px), largeurs de 320 à 430 px. */

/* ---------- Encoche et paysage : le contenu ne passe jamais sous l'encoche ---------- */
@media (max-width: 980px) {
  .cadre { padding-left: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left)); padding-right: max(clamp(16px, 4vw, 48px), env(safe-area-inset-right)); }
}

/* ---------- En-tête : seule la barre du haut reste collée ; la rangée de liens défile avec la page ----------
   L'en-tête et son cadre n'ont plus de boîte (display: contents) : la barre devient un enfant direct de la page et peut y rester collée. */
@media (max-width: 980px) {
  .tete, .tete > .cadre { display: contents; }
  .tete__barre { position: sticky; top: 0; z-index: 20; background: #FBF6EE; box-sizing: border-box; height: calc(60px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
    padding-left: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left)); padding-right: max(clamp(16px, 4vw, 48px), env(safe-area-inset-right)); }
  .tete[data-collee] .tete__barre { box-shadow: 0 1px 0 var(--filet); }
  .nav-mobile { position: relative; z-index: 1; background: #FBF6EE; border-bottom: 1px solid var(--filet);
    padding-left: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left)); padding-right: max(clamp(16px, 4vw, 48px), env(safe-area-inset-right)); }
  .nav-mobile a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 980px) {
  .logo { min-height: 44px; }
  .nav-mobile { gap: 8px 6px; padding-bottom: 12px; }
  .nav-mobile a { padding: 0 14px; font-size: 14.5px; }
  .tete .bouton { height: 44px; padding: 0 16px; font-size: 14px; }
  .langue__bouton { height: 44px; min-width: 44px; justify-content: center; }
  #horoscope-du-jour, .module, .instruments__scene, .flux { scroll-margin-top: 84px; }
}
/* très étroit (iPhone SE, 320 px) : tout tient dans 288 px de large */
@media (max-width: 350px) {
  .tete__barre { gap: 8px; }
  .logo { gap: 7px; }
  .logo svg { width: 24px; height: 24px; }
  .logo span { font-size: 17px; }
  .tete__droite { gap: 6px; }
  .langue__bouton { padding: 0; width: 44px; }
  .tete .bouton { padding: 0 12px; font-size: 13px; gap: 7px; }
  .initiale { width: 22px; height: 22px; margin-left: -5px; font-size: 12px; }
}

/* ---------- Pied de page : liens à hauteur de doigt, sans changer l'espacement visible ---------- */
@media (max-width: 980px) {
  .pied nav { gap: 0 20px; }
  .pied nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .pied__barre { gap: 6px 24px; }
  .pied { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}

/* ---------- Textes minuscules : 12 px au plus bas ---------- */
@media (max-width: 980px) {
  .micro, .points b, .jauge span, .badge-gratuit, .offre3__txt .badge-gratuit, .pastille-el, .regle__vide, .regle__degres,
  .fiche__lib, .fiche__lignes small, .trad__plus, .badge, .achats th, .infos dt, .detail__repere, .cat4 b small, .jauge b small { font-size: 12px; }
  .badge { height: 24px; }
  .regle__astre b { font-size: 12px; padding: 2px 7px; }
  .onglet-decan__dates { font-size: 12px; letter-spacing: -.02em; }
  sup, .onglet-decan__n sup { font-size: 12px; }
}

/* ---------- Accueil et pages de signe : pastilles de signes ---------- */
@media (max-width: 980px) {
  .signes button, .signes a { height: 44px; }
  .periode button { height: 44px; }
}
@media (max-width: 440px) {
  .signes:not(.signes--rang) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .signes button, .signes a { font-size: 14px; padding: 0 6px; letter-spacing: 0; }
}

/* date de l'encart du jour : jamais coupée au milieu */
@media (max-width: 980px) {
  .horo__tete { flex-wrap: wrap; row-gap: 4px; }
  .horo__tete .micro { white-space: nowrap; }
  .horo__nom { flex-wrap: wrap; row-gap: 2px; }
  .horo__nom .micro { white-space: nowrap; }
}

/* jauges : quatre colonnes tant qu'elles tiennent, deux ensuite */
@media (max-width: 380px) {
  .jauges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
}

/* ---------- Durées (7 jours / 30 jours / 1 an) : en rangées dès que les trois cartes ne tiennent plus (un mot comme « meistgewählt » se coupait en deux à 390 px) ---------- */
@media (max-width: 440px) {
  .durees { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .duree { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 16px; border-radius: 16px; }
  .duree span { grid-column: 1; grid-row: 1; }
  .duree small { grid-column: 1; grid-row: 2; }
  .duree b { grid-column: 2; grid-row: 1 / span 2; font-size: 26px; text-align: right; }
}

/* ---------- Page d'un signe : onglets de décan ---------- */
@media (max-width: 380px) {
  .onglets-decan { gap: 4px; }
  .onglet-decan { padding: 10px 8px 11px; }
  .onglet-decan__n { font-size: 14.5px; letter-spacing: -.02em; }
  .onglet-decan__dates { letter-spacing: -.04em; }
  .onglet-decan__regent { font-size: 12.5px; overflow-wrap: anywhere; }
}

/* ---------- Carte du ciel : instruments et badges ---------- */
@media (max-width: 900px) {
  .instrument { min-height: 44px; align-content: start; }
  .instrument__badges { gap: 4px 6px; }
  .instrument__badges .badge { min-width: 0; max-width: 100%; white-space: normal; height: auto; min-height: 24px; padding: 3px 9px; line-height: 1.25; border-radius: 12px; }
}

/* ---------- Compte : dates des achats ---------- */
@media (max-width: 640px) {
  .achats__date { white-space: normal; }
  .achats__produit { overflow-wrap: anywhere; }
}

/* ---------- Cases à cocher : toute la ligne est la cible ---------- */
@media (max-width: 980px) {
  label.case { min-height: 44px; }
  label.case input { width: 22px; height: 22px; flex: none; }
}

/* ---------- Mots longs coupés plutôt que de dépasser ; champs à 16 px (sinon iOS zoome) ---------- */
@media (max-width: 980px) {
  h1, h2, h3, p, li, dd, .titre, .titre-2, .chapo { overflow-wrap: break-word; }
  input, select, textarea { font-size: 16px; }
}

/* ---------- Schémas (roues, carré védique, piliers) : leurs textes sont dessinés à l'échelle du dessin ; sur téléphone on les agrandit
   et, pour la grande roue, on rogne les marges vides, pour que chaque inscription reste lisible (8 px au moins à l'écran) ---------- */
@media (max-width: 900px) {
  .instruments__roue .roue .r-signe-glyphe { font-size: 24px !important; }
  .instruments__roue .roue .r-num { font-size: 14px; }
  .instruments__roue .roue .r-deg { font-size: 12.5px; }
  .instruments__roue .roue .r-angle { font-size: 13px; }
  .instruments__roue .roue .r-glyphe { font-size: 19px; }
  .instruments__roue .roue .r-astre text { font-size: 11px; }
  .instruments__roue .roue .r-tr text { font-size: 10px; }
  .instruments__roue .roue .r-etiq { font-size: 14px; }
  .instruments__roue .roue .r-etiq2 { font-size: 12px; }
  .trad .roue .r-signe-glyphe { font-size: 17px !important; }
  .trad .roue .r-num { font-size: 13px; }
  .trad .roue .r-deg { font-size: 11.5px; }
  .trad .roue .r-angle { font-size: 12.5px; }
  .trad .roue .r-etiq { font-size: 13px; }
  .trad .roue .r-etiq2 { font-size: 11.5px; }
  .carre-vedique .v-num { font-size: 12px; }
  .carre-vedique .v-pl { font-size: 13px; }
  .carre-vedique .v-as, .carre-vedique .v-pied { font-size: 10.5px; }
  .piliers .b-tete { font-size: 11px; }
  .piliers .b-leg, .piliers .b-maitre, .piliers .b-pied { font-size: 10.5px; }
}
@media (max-width: 640px) {
  .roue, .carre-vedique, .piliers { overflow: visible; }
  .trad__dessin { padding: 14px 20px; }
  .instruments__roue { overflow: hidden; padding: 8px 0; }
  .instruments__roue .roue { width: 108%; max-width: none; margin: 0 -4%; }
}

/* menu des langues : jamais plus haut que l'écran (paysage), il défile */
@media (max-width: 980px) {
  .langue__menu { max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; }
  .langue__menu a { min-height: 44px; box-sizing: border-box; }
}

/* ---------- Page d'un signe : titre et date sur deux lignes (jamais de point médian seul en début de ligne) ---------- */
@media (max-width: 600px) {
  .module__haut > .micro .sep { display: none; }
  .module__haut > .micro .sans-coupure { display: block; margin-top: 2px; }
  .onglet-decan { padding-left: 8px; padding-right: 8px; }
  .onglet-decan__dates { letter-spacing: -.07em; white-space: normal; overflow-wrap: anywhere; }
}

/* ---------- Retouches du tour 2 ---------- */
@media (max-width: 980px) {
  .bouton--petit { height: 44px; }
  .compteur span, .formule__badge, body .formule__badge { font-size: 12px; }
  .pied nav a { min-width: 44px; }
  .duree { grid-template-columns: minmax(0, 1fr); }
  .duree small, .duree span { overflow-wrap: anywhere; }
}
/* noms de signes : trois colonnes dès que la langue en a de longs (tout sauf le français) */
@media (max-width: 480px) {
  html:not(:lang(fr)) .signes:not(.signes--rang), html:not(:lang(fr)) .horo .signes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html:not(:lang(fr)) .signes button, html:not(:lang(fr)) .signes a { font-size: 14px; padding: 0 4px; letter-spacing: 0; }
}
@media (max-width: 360px) {
  .signes button, .signes a { font-size: 13px; padding: 0 3px; letter-spacing: -.01em; }
  html:not(:lang(fr)) .signes button, html:not(:lang(fr)) .signes a { font-size: 12px; padding: 0; letter-spacing: -.03em; }
}
@media (max-width: 480px) { .duree b { font-size: 22px; } }
@media (max-width: 480px) { .jauge span { letter-spacing: .02em; } }

/* schémas sur les écrans les plus étroits (320 à 400 px) : un cran de plus */
@media (max-width: 400px) {
  .instruments__roue .roue .r-num { font-size: 15px; }
  .instruments__roue .roue .r-deg { font-size: 13.5px; }
  .instruments__roue .roue .r-angle { font-size: 14px; }
  .instruments__roue .roue .r-etiq { font-size: 15px; }
  .instruments__roue .roue .r-etiq2 { font-size: 13.5px; }
  .trad .roue .r-num { font-size: 14px; }
  .trad .roue .r-deg { font-size: 12.5px; }
  .trad .roue .r-angle { font-size: 13.5px; }
  .trad .roue .r-etiq { font-size: 14px; }
  .trad .roue .r-etiq2 { font-size: 13px; }
  .carre-vedique .v-as, .carre-vedique .v-pied { font-size: 11.5px; }
  .piliers .b-leg, .piliers .b-maitre, .piliers .b-pied { font-size: 11.5px; }
}

/* ---------- Écrans tactiles : le « survol » reste collé après un toucher, il ne doit rien changer ----------
   (sans cela, le signe qu'on vient de toucher passait en gris pâle avec du texte blanc, donc illisible, jusqu'au toucher suivant) */
@media (hover: none) {
  .signes button:hover, .signes a:hover { background: rgb(21 33 43 / .05); }
  .signes button[aria-pressed="true"], .signes button[aria-pressed="true"]:hover, .signes a[aria-current="page"], .signes a[aria-current="page"]:hover { background: var(--encre); color: var(--creme); }
  .bouton:hover { background: var(--encre); }
  .bouton--clair:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--filet-fort); }
  .formule--vedette .bouton:hover { background: var(--creme); }
  .duree:hover:not(.est-choisie) { box-shadow: inset 0 0 0 1px var(--filet); }
  .offre3:hover { box-shadow: 0 14px 34px -26px rgb(30 45 60 / .45); }
  .langue:not([open]) .langue__bouton:hover { box-shadow: inset 0 0 0 1px var(--filet-fort); }
  .instrument:not([aria-selected="true"]):hover { background: transparent; }
  .onglet-decan:hover { box-shadow: inset 0 0 0 1px var(--filet); }
  .langue__menu a:not([aria-current="true"]):hover { background: transparent; }
  .detail__resume:hover .detail__action { background: rgb(21 33 43 / .06); }
  .detail[open] .detail__resume:hover .detail__action { background: var(--encre); }
}

/* ---------- Toucher : pas de latence de double-toucher, surbrillance discrète ---------- */
@media (max-width: 980px) {
  a, button, summary, label, input, select, textarea { touch-action: manipulation; -webkit-tap-highlight-color: rgb(21 33 43 / .08); }
  input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; text-align: left; }
  input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }
}

/* ---------- Relecture du 30/10/2026 : nouvelles sections (accueil, outils, comparatifs) ---------- */
/* grilles à une colonne : un tableau large (comparatif) ne doit jamais élargir la page, il défile dans son cadre */
.comp, .faq, .outil-proches, .verif__tete, .vitrine__texte { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 980px) {
  /* les 12 signes de l'accueil : des pastilles à hauteur de doigt */
  .signes-liens { gap: 8px; }
  .signes-liens .micro { flex-basis: 100%; }
  .signes-liens a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--filet); border-radius: 999px; background: rgb(255 255 255 / .6); }
  /* liens d'outils (liste des 136 outils, vitrine, outils proches) */
  .outils-liste a.outil__nom { display: inline-flex; align-items: center; min-height: 40px; }
  .vitrine__outils li > a { padding: 11px 13px; }
  .proche { display: inline-flex; align-items: center; min-height: 44px; }
  /* sources du comparatif : un lien par ligne, assez d'écart pour le doigt */
  .comp__sources ul { gap: 4px; }
  .comp__sources a { display: inline-block; padding: 6px 0; }
  /* encart du jour : la date ne se coupe pas */
  .horo__entete .micro { white-space: nowrap; }
  .fil a { display: inline-flex; align-items: center; min-height: 36px; }
}
@media (max-width: 640px) {
  .fenetre-compte { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .marque__chiffres { border-radius: 14px; }
}
/* un bouton au libellé long (« Ouvrir ma carte du ciel gratuite ») ne doit pas élargir sa carte sur les petits écrans */
@media (max-width: 760px) {
  .duel-choix { grid-template-columns: minmax(0, 1fr); }
  .duel-choix__bloc .bouton, .comp__essayer .bouton, .verif .bouton, .vitrine .bouton { white-space: normal; text-align: center; height: auto; min-height: 50px; padding-top: 10px; padding-bottom: 10px; }
}
/* pages d'outil : une colonne qui ne s'élargit jamais (allemand : « Mein kostenloses Konto erstellen » débordait à 320 px) */
@media (max-width: 900px) {
  .outil-haut, .outil-corps, .zi, .carte-haut { grid-template-columns: minmax(0, 1fr); }
  .outil-haut .bouton, .outil-etapes .bouton, .carte-haut .bouton, .trad__ouvrir { white-space: normal; text-align: center; height: auto; min-height: 50px; padding-top: 10px; padding-bottom: 10px; }
}

/* ---------- Menu « sandwich » (30/10/2026) : la barre ne garde que la marque et ☰ ; le reste est dans le panneau (mobile.js) ---------- */
.logo__sous { display: none; }
.tete__burger, .menu-tel, .menu-tel__voile { display: none; }
@media (max-width: 980px) {
  .tete__barre { justify-content: space-between; }
  .logo__textes { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
  /* logo et nom agrandis (30/10/2026) : la barre n'a plus que la marque et ☰, la place est là */
  .tete .logo { gap: 10px; }
  .tete .logo svg { width: 38px; height: 38px; }
  .tete .logo__textes > span { font-size: 27px; }
  .logo__sous { display: block; font-family: var(--mono, ui-monospace, monospace); font-size: clamp(8.5px, 2.65vw, 10.5px); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3, #5b6670); margin-top: 3px; white-space: nowrap; }
  .tete__burger { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 999px; background: #fff; color: var(--encre, #15212b); cursor: pointer;
    box-shadow: inset 0 0 0 1px rgb(21 33 43 / .14); }
  .tete__burger svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .tete__burger path { transition: transform .2s ease, opacity .2s ease; transform-origin: 12px 12px; }
  .menu-tel-ouvert .tete__burger .b1 { transform: translateY(5px) rotate(45deg); }
  .menu-tel-ouvert .tete__burger .b2 { opacity: 0; }
  .menu-tel-ouvert .tete__burger .b3 { transform: translateY(-5px) rotate(-45deg); }
  .menu-tel:not([hidden]) { display: block; position: fixed; z-index: 19; left: 0; right: 0; top: calc(60px + env(safe-area-inset-top)); max-height: calc(100dvh - 60px - env(safe-area-inset-top)); overflow-y: auto;
    background: #FBF6EE; border-bottom: 1px solid var(--filet, rgb(21 33 43 / .1)); box-shadow: 0 24px 40px -24px rgb(21 33 43 / .35);
    padding: 6px max(16px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .menu-tel__voile:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 18; background: rgb(21 33 43 / .25); }
  .menu-tel .nav-mobile { display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; border: 0; background: none; position: static; }
  .menu-tel .nav-mobile a { min-height: 52px; padding: 0 4px; font-size: 17px; font-weight: 500; border-bottom: 1px solid rgb(21 33 43 / .08); border-radius: 0; background: none; text-decoration: none; color: var(--encre, #15212b); }
  .menu-tel .nav-mobile a[aria-current="page"] { font-weight: 700; }
  .menu-tel .tete__droite { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 12px; margin-top: 16px; }
  .menu-tel .tete__droite .bouton { width: 100%; justify-content: center; height: 50px; font-size: 16px; }
  /* le panneau est hors de .tete : le libellé long seul (« Créer un compte », « Mon compte »), jamais les deux */
  .menu-tel .bouton .court { display: none !important; }
  .menu-tel .bouton .long { display: inline !important; }
  .menu-tel .langue { width: 100%; }
  .menu-tel .langue__bouton { width: 100%; justify-content: flex-start; height: 48px; padding: 0 14px; box-shadow: inset 0 0 0 1px rgb(21 33 43 / .14); }
  .menu-tel .langue__code { display: inline; font-weight: 600; letter-spacing: .04em; }
  .menu-tel .langue__bouton::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; }
  .menu-tel .langue[open] .langue__bouton::after { transform: rotate(225deg) translateY(-2px); }
  .menu-tel .langue__menu { position: static; margin-top: 8px; min-width: 0; box-shadow: none; border: 1px solid rgb(21 33 43 / .1); }
  html.menu-tel-ouvert, html.menu-tel-ouvert body { overflow: hidden; }
  /* Accueil : la marque n'apparaît qu'une fois, dans la barre du haut */
  .haut .marque { display: none; }
}
/* sous-titre plus long (pl, pt, nl…) : resserré pour ne jamais pousser ☰ hors de l'écran (classe posée par mobile.js) */
@media (max-width: 980px) { .logo__sous.est-long { letter-spacing: .05em; } }
@media (max-width: 350px) {
  .tete .logo { gap: 8px; }
  .tete .logo svg { width: 32px; height: 32px; }
  .tete .logo__textes > span { font-size: 23px; }
}