/* =========================================================
   GuyaListe — style « aurore douce » : fond doux,
   teintes bleu, violet et turquoise. Se charge après Bootstrap 5.
   Fichier : /static/styles/main.css — COMMUN à toutes les pages du site
   (portail, catalogue, annonces…). Une règle propre à une seule page reste ici,
   dans une partie clairement nommée, pour qu'il n'y ait qu'un seul fichier de style à maintenir.

   Plan : 1 Variables  2 Palettes  3 Base  4 En-tête  5 Recherche  6 Tuiles des magasins
          7 Fenêtres  8 Liste des catalogues  9 Accessibilité  10 Petits écrans / mouvement réduit
          11 Portail (page d'accueil) et lien de pied de page

   Pour changer les couleurs : modifier les blocs de variables (parties 1 et 2).
   Le HTML et le JavaScript n'ont pas à être touchés.
   ========================================================= */

/* ---------- 1) Variables communes (jamais de « valeur magique » ailleurs) ---------- */
:root {
  /* Rayons des coins */
  --radius-pill: 999px;     /* boutons et champs en forme de gélule */
  --radius-card: 1.6rem;    /* tuile d'un magasin */
  --radius-row: 1.4rem;     /* ligne d'un catalogue */
  --radius-sheet: 1.75rem;  /* fenêtres */
  --radius-box: 1.25rem;    /* encadrés (sommaire) */
  --radius-icon: 1.1rem;    /* pastille d'initiale */
  --radius-small: .4rem;    /* petits éléments (touches, liens au focus) */

  /* Animations */
  --ease: cubic-bezier(.2, .8, .2, 1);   /* courbe douce, « qui freine à la fin » */
  --speed: .2s;                          /* durée des survols */

  /* Taille des pastilles */
  --icon-size: 3.4rem;   /* initiale d'un magasin */
  --num-size: 3.2rem;    /* numéro d'un catalogue */

  /* Polices : celles du système, rien à télécharger */
  --sans: ui-sans-serif, system-ui, "Segoe UI Variable", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/*
  Points de rupture utilisés plus bas (les media queries n'acceptent pas les variables) :
    576px  : tablette → 2 colonnes de tuiles
    992px  : ordinateur → 3 colonnes de tuiles
    575.98px : « petit écran » (téléphone) — juste en dessous de 576px
*/

/* ---------- 2) Palettes ---------- */

/* Jour (par défaut) */
:root {
  color-scheme: light;
  --bg: #f4f7f9;            /* fond de page */
  --field: #ffffff;         /* fond des champs et boutons d'option */
  --surface: #ffffff;       /* fond des tuiles et des fenêtres */
  --ink: #1e293b;           /* texte */
  --muted: #64748b;         /* texte secondaire */
  --glass-line: rgba(30, 41, 59, .12);   /* filets et bordures */
  --accent: #3b82f6;        /* couleur d'accent (survols, boutons actifs) */
  --accent-2: #8b5cf6;
  --on-accent: #ffffff;     /* texte posé sur --accent */
  --focus: #7c3aed;         /* contour du focus clavier */
  --blob: .45;              /* intensité des taches du fond */
  --blob-1: #bae6fd;
  --blob-2: #ddd6fe;
  --blob-3: #99f6e4;
  --shadow: 0 12px 40px rgba(15, 23, 42, .08);
  --backdrop: rgba(20, 10, 4, .85);      /* voile derrière les fenêtres */
  --grad: linear-gradient(90deg, #3b82f6, #8b5cf6, #14b8a6);   /* dégradé du logo */
  --bs-body-bg: var(--bg);               /* variables Bootstrap alignées sur les nôtres */
  --bs-body-color: var(--ink);
  --bs-link-color-rgb: 59, 130, 246;
  --bs-link-hover-color-rgb: 29, 78, 216;
}

/* Nuit : activé par le réglage « Mode nuit » (attribut posé sur <html> par main.js) */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --bg: #0f172a;
  --field: #1e293b;
  --surface: #1e293b;
  --ink: #f8fafc;
  --muted: #94a3b8;
  --glass-line: rgba(255, 255, 255, .12);
  --accent: #60a5fa;
  --accent-2: #a78bfa;
  --on-accent: #0f172a;
  --focus: #c4b5fd;
  --blob: .35;
  --blob-1: #0369a1;
  --blob-2: #5b21b6;
  --blob-3: #0f766e;
  --shadow: 0 14px 50px rgba(0, 0, 0, .5);
  --grad: linear-gradient(90deg, #60a5fa, #a78bfa, #2dd4bf);
  --bs-link-color-rgb: 96, 165, 250;
  --bs-link-hover-color-rgb: 147, 197, 253;
}

/* Contraste élevé : noir, blanc et jaune uniquement, bordures épaisses */
[data-contrast="high"] {
  color-scheme: dark;
  --bg: #000;
  --field: #000;
  --surface: #000;
  --ink: #fff;
  --muted: #fff;
  --glass-line: #fff;
  --accent: #ff0;
  --accent-2: #ff0;
  --on-accent: #000;
  --focus: #ff0;
  --shadow: none;
  --grad: linear-gradient(#fff, #fff);
  --bs-link-color-rgb: 255, 255, 0;
  --bs-link-hover-color-rgb: 255, 255, 255;
}
[data-contrast="high"] .aurora { display: none; }                      /* pas de décor */
[data-contrast="high"] a { text-decoration: underline; }
[data-contrast="high"] .logo { background: none; -webkit-text-fill-color: #ff0; color: #ff0; }
[data-contrast="high"] .store,
[data-contrast="high"] .entry,
[data-contrast="high"] .sheet { border-width: 3px; }
[data-contrast="high"] .store-ico,
[data-contrast="high"] .entry-num,
[data-contrast="high"] .store-badge { background: #fff; color: #000; }  /* l'emporte sur les couleurs .t1 … .t10 */

/* ---------- 3) Base ---------- */
html { font-size: 112.5%; }              /* 18 px : confortable, y compris sur télévision */
html.a11y-large { font-size: 137.5%; }   /* réglage « Texte agrandi » */

body { font-family: var(--sans); line-height: 1.65; color: var(--ink); background: var(--bg); }
main:focus { outline: none; }            /* <main> reçoit le focus via « Aller au contenu » : pas de cadre */
kbd { background: var(--field); color: var(--ink); border: 1px solid var(--glass-line); border-radius: var(--radius-small); padding: .1rem .45rem; }
a { text-underline-offset: .2em; }

/* Focus très visible (clavier / télécommande) : gros contour décalé, couleur --focus */
:focus { outline: none; }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }
a:focus-visible { border-radius: var(--radius-small); }

/* Lien « Aller au contenu » : caché au-dessus de l'écran, visible au premier appui sur Tab */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 2000;
  padding: .75rem 1.25rem; border-radius: var(--radius-pill); font-weight: 700; text-decoration: none;
  background: var(--accent); color: var(--on-accent);
}
.skip-link:focus { top: 1rem; }

/* Fond fixe : trois grandes taches très pâles (ni animation ni flou, pour rester fluide sur TV) */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.aurora i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; opacity: calc(var(--blob) * .15); }
.aurora i:nth-child(1) { background: var(--blob-1); left: -14vmax; top: -16vmax; }
.aurora i:nth-child(2) { background: var(--blob-2); right: -16vmax; top: 10vh; }
.aurora i:nth-child(3) { background: var(--blob-3); left: 20vw; bottom: -26vmax; opacity: calc(var(--blob) * .12); }

/* ---------- 4) En-tête : grand mot + région dessous ---------- */
.stage { width: 100%; padding: 2.5rem 1rem 2rem; }
.logo-wrap { margin: 0 0 .75rem; line-height: 1; }
.logo-link { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; }
.logo {
  display: inline-block; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; padding-bottom: .06em;
  font-size: clamp(3rem, 10vw, 5.75rem);                      /* s'adapte à la largeur, entre 3rem et 5.75rem */
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;       /* le dégradé n'apparaît que dans les lettres */
  -webkit-text-fill-color: transparent; color: transparent;
}
.logo-region {
  display: inline-flex; align-items: center; margin-top: -.15em; padding-left: .15em;
  font-weight: 700; font-size: clamp(1.3rem, 3.6vw, 2rem); line-height: 1.1; letter-spacing: .02em;
  color: var(--accent);
}
.logo-region::before {   /* petit trait violet devant la région */
  content: ""; display: inline-block; width: 1.4em; height: .14em; margin-right: .5em;
  border-radius: var(--radius-pill); background: var(--accent-2);
}
.tagline { color: var(--muted); font-size: 1.2rem; text-align: center; margin: .5rem 0 2.25rem; }

/* ---------- 5) Barre de recherche ---------- */
.search { position: relative; max-width: 32rem; margin: 0 auto 1.75rem; }
.search-ico {   /* loupe, à gauche, posée sur le champ */
  position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;   /* « none » : un clic sur la loupe atteint le champ */
}
.search-input {
  width: 100%; min-height: 3.4rem; padding: .5rem 3.4rem .5rem 3.1rem;   /* marges latérales = place loupe / croix */
  border-radius: var(--radius-pill); border: 2px solid var(--glass-line);
  background: var(--field); color: var(--ink); font: inherit;
  transition: border-color var(--speed) ease;
}
.search-input::placeholder { color: var(--muted); opacity: 1; }
.search-input:hover { border-color: var(--accent); }
/* Croix native de certains navigateurs : masquée, remplacée par .search-clear */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.search-clear {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0 0 .15rem;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.search-clear:hover { background: var(--glass-line); color: var(--ink); }
.search-clear[hidden] { display: none; }   /* l'attribut « hidden » doit l'emporter sur display:grid ci-dessus */

/* ---------- 6) Tuiles des magasins ---------- */
.stores-wrap { width: min(100%, 72rem); }

/* Grille : 1 colonne (téléphone), 2 (≥ 576px), 3 (≥ 992px). minmax(0, 1fr) empêche un nom long d'élargir la colonne. */
.stores { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .stores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .stores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }

.stores-msg { margin: 1.5rem 0 0; text-align: center; color: var(--muted); }
.stores-msg:empty { display: none; }
.stores-note { margin: 1.5rem 0 0; text-align: center; color: var(--muted); font-size: .9rem; font-style: italic; }

/* Apparition des tuiles : légère montée, décalée tuile après tuile (les 9 premières ; les suivantes arrivent ensemble) */
.store-item { animation: rise .55s var(--ease) both; }
.store-item:nth-child(2) { animation-delay: .05s; } .store-item:nth-child(3) { animation-delay: .1s; }
.store-item:nth-child(4) { animation-delay: .15s; } .store-item:nth-child(5) { animation-delay: .2s; }
.store-item:nth-child(6) { animation-delay: .25s; } .store-item:nth-child(7) { animation-delay: .3s; }
.store-item:nth-child(8) { animation-delay: .35s; } .store-item:nth-child(9) { animation-delay: .4s; }
.store-item:nth-child(n+10) { animation-delay: .45s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

/* La tuile : pastille à gauche, nom à côté. overflow:hidden → le coin arrondi découpe l'encoche. */
.store {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 1.1rem;
  width: 100%; height: 100%; min-height: 6rem; padding: 1.1rem 1.4rem; text-align: left;
  border: 1px solid var(--glass-line); border-radius: var(--radius-card);
  background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; box-shadow: var(--shadow);
  transition: transform var(--speed) ease, border-color var(--speed) ease, box-shadow .25s ease;
}
.store:hover, .store:focus-visible {
  transform: translateY(-5px) scale(1.012); border-color: var(--accent);
  box-shadow: 0 18px 46px -14px var(--accent), var(--shadow);
}
.store-ico {   /* pastille d'initiale */
  flex: none; display: grid; place-items: center; width: var(--icon-size); height: var(--icon-size);
  border-radius: var(--radius-icon); color: #fff; font-weight: 800; font-size: 1.6rem;
  transition: transform .25s ease;
}
.store:hover .store-ico, .store:focus-visible .store-ico { transform: rotate(-6deg) scale(1.08); }
.store-text { flex: 1 1 auto; min-width: 0; padding-right: 1.5rem; }   /* le padding réserve la place de l'encoche */
.store-name { display: block; font-weight: 800; font-size: 1.15rem; line-height: 1.25; letter-spacing: -.01em; }

/* Encoche du nombre de catalogues : collée au coin haut-droit, discrète. Désactivable (data.json → show_count_badge). */
.store-badge {
  position: absolute; top: 0; right: 0; min-width: 2.6rem; padding: .3rem .8rem .4rem 1rem;
  border-bottom-left-radius: var(--radius-icon); text-align: center;
  background: var(--glass-line); color: var(--muted); font-size: .85rem; font-weight: 700; line-height: 1.2;
}

/* La tuile peut aussi être un lien <a> (tuiles du portail) : pas de soulignement, couleur du texte conservée au survol */
a.store, a.store:hover { color: var(--ink); text-decoration: none; }

/* 10 teintes de pastille (.t1 … .t10). Le nombre doit rester égal à CONFIG.TONE_COUNT dans main.js.
   Assez soutenues pour une initiale blanche lisible. */
.t1  { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.t2  { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.t3  { background: linear-gradient(135deg, #14b8a6, #2dd4bf); }
.t4  { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.t5  { background: linear-gradient(135deg, #6366f1, #818cf8); }
.t6  { background: linear-gradient(135deg, #10b981, #34d399); }
.t7  { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.t8  { background: linear-gradient(135deg, #d946ef, #e879f9); }
.t9  { background: linear-gradient(135deg, #84cc16, #a3e635); }
.t10 { background: linear-gradient(135deg, #64748b, #94a3b8); }

/* ---------- Boutons : « Fermer » et pied de page ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .4rem 1.3rem;
  border-radius: var(--radius-pill); border: 1px solid var(--glass-line);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform var(--speed) ease, border-color var(--speed) ease;
}
.pill:hover { transform: translateY(-2px); border-color: var(--accent); }

.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem; padding: 1.25rem 1rem 1.75rem; }
.foot-btn {
  min-height: 2.9rem; padding: .35rem 1rem; border: 0; border-radius: var(--radius-pill); background: transparent;
  color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: .25em; cursor: pointer;
  transition: background-color var(--speed) ease, color var(--speed) ease;
}
.foot-btn:hover { background: var(--surface); color: var(--ink); }

/* ---------- 7) Fenêtres (<dialog>) ---------- */
.sheet {
  width: min(46rem, 94vw); padding: 0;
  max-height: 88vh; max-height: 88dvh;   /* 2e ligne : hauteur réelle sur mobile (barre d'adresse comprise) ; ignorée si non gérée */
  overflow: hidden;                      /* seul .sheet-body défile (voir scrollInSheet dans main.js) */
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--glass-line); border-radius: var(--radius-sheet);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}
/* « display:flex » seulement quand elle est ouverte, sinon une <dialog> fermée deviendrait visible */
.sheet[open] { display: flex; flex-direction: column; animation: pop .28s var(--ease) both; }
.sheet::backdrop { background: var(--backdrop); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.sheet-head {   /* en-tête fixe : titre + bouton Fermer */
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--glass-line);
}
.sheet-title { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
/* Corps : c'est lui qui défile, verticalement seulement (jamais de barre horizontale) */
.sheet-body { padding: 1.5rem; overflow-y: auto; overflow-x: hidden; }
.sheet-body section { margin-top: 1.75rem; }
.sheet-body h3 { font-weight: 800; }
.sheet-body h3:focus { outline: none; }   /* les titres reçoivent le focus depuis le sommaire : pas de cadre */
.toc { padding: 1.1rem 1.4rem; border: 1px solid var(--glass-line); border-radius: var(--radius-box); background: var(--surface); }

/* ---------- 8) Liste des catalogues d'un magasin ----------
   Les classes s'appellent « entry » et non « link » : Bootstrap définit déjà .link-info, .link-primary…
   (avec !important), ce qui avait coloré l'info en bleu vif. Éviter le préfixe « link- » ici. */
/* minmax(0, 1fr) + min-width:0 : une adresse très longue ne doit JAMAIS élargir la liste (elle est coupée par « … ») */
.entries { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
.entries > li { min-width: 0; }
.entry {
  display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem;
  border-radius: var(--radius-row); border: 1px solid var(--glass-line);
  background: var(--surface); color: var(--ink); text-decoration: none;
  transition: transform var(--speed) ease, border-color var(--speed) ease, box-shadow .25s ease;
}
.entry:hover, .entry:focus-visible {
  transform: translateY(-2px) scale(1.01); color: var(--ink); border-color: var(--accent);
  box-shadow: 0 14px 36px -14px var(--accent);
}
.entry-num {   /* pastille numérotée 1, 2, 3… */
  flex: none; display: grid; place-items: center; width: var(--num-size); height: var(--num-size);
  border-radius: 1rem; font-weight: 800; font-size: 1.4rem; color: #fff;
}
.entry-main { flex: 1 1 auto; min-width: 0; }   /* min-width:0 : sans lui, l'ellipsis ci-dessous ne fonctionne pas */
.entry-url {   /* adresse complète, sur une seule ligne, coupée par « … » si elle dépasse */
  display: block; font-weight: 700; font-size: 1rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.entry-info { display: block; color: var(--muted); font-size: .95rem; font-variant-numeric: tabular-nums; }   /* chiffres de même largeur : dates alignées */
.entry-go {   /* rond avec la flèche ↗ */
  flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--glass-line); font-size: 1.25rem;
  transition: background-color var(--speed) ease, color var(--speed) ease, transform var(--speed) ease;
}
.entry:hover .entry-go, .entry:focus-visible .entry-go { background: var(--accent); color: var(--on-accent); transform: translate(3px, -3px); }

/* ---------- 9) Réglages d'accessibilité ---------- */
.opts { display: grid; gap: .6rem; }
.opt {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  min-height: 3.2rem; padding: .5rem 1.25rem; border-radius: var(--radius-pill); text-align: left;
  border: 2px solid var(--glass-line); background: var(--field); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: border-color var(--speed) ease, background-color var(--speed) ease;
}
.opt:hover { border-color: var(--accent); }
.opt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }   /* option activée */
.opt-state { font-size: .9rem; font-weight: 500; }
.opt-reset { justify-content: center; }

/* ---------- 11) Portail (page d'accueil /index.html) et lien de pied de page ----------
   Le portail réutilise les tuiles des magasins (.store, .store-ico, .store-name, .store-badge) :
   même aspect, mêmes animations, même focus. Il n'ajoute que ce qui suit.
   Placée AVANT la partie 10 pour que les règles « petits écrans » aient le dernier mot. */

/* Grille du portail : 1 colonne (téléphone), 2 colonnes dès 576px — jamais 3, il y a peu de rubriques.
   « .stores.hub » (2 classes) est plus précis que « .stores » seul : il l'emporte sur la règle à 3 colonnes. */
.stores.hub { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .stores.hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hub-wrap { width: min(100%, 52rem); }   /* plus étroit que la liste des magasins (72rem) */

/* Courte description sous le nom de la rubrique */
.store-desc { display: block; margin-top: .15rem; color: var(--muted); font-size: .95rem; line-height: 1.4; }

/* L'encoche « Bientôt » est plus large que le chiffre de la page catalogue : on réserve plus de place au texte */
.hub .store-text { padding-right: 3.5rem; }

/* Lien de pied de page (« Accueil GuyaListe ») : mêmes dimensions que les boutons .foot-btn voisins */
a.foot-btn { display: inline-flex; align-items: center; }

/* ---------- 10) Petits écrans et mouvement réduit ---------- */
@media (max-width: 575.98px) {
  .store { padding: 1rem 1.1rem; }
  .store-name { font-size: 1.02rem; }
  .entry { padding: .8rem; }
  .entry-num { width: 2.8rem; height: 2.8rem; border-radius: .9rem; }
  .entry-go { display: none; }   /* sur téléphone, toute la ligne est cliquable : la flèche prend trop de place */
}

/* Visiteurs qui demandent moins de mouvement dans leur système : toutes les animations sont coupées */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}