/* Turf Pépite — la coquille unique (lot 1, 05/10/2026).

   Une seule coquille pour trois contenus : l'écran de l'app (app.js ; chargée par le layout racine, versionnée, avant app.css),
   les hubs (AppShell.tsx) et les articles (ArticleWp.tsx). Chargée aussi par le layout racine des
   pages publiques, après theme.js qui pose data-theme sur <html> avant la première image.
   Ici, et une seule fois : les jetons de couleur par thème, l'en-tête de 56 px (marque-lien,
   loupe, crayon, Menu), la barre du bas (une règle, trois alias), les feuilles de la coquille
   (Menu en cartes, Apparence), le Menu en cartes, la transition de document à document.
   Règles : une couleur = un jeton ; seuls transform et opacity s'animent ; chaque cible ≥ 44 px.
   Chaque cadre garde sa façon de positionner la barre (absolute dans l'app, fixed sur les hubs,
   sticky sur les articles) : la géométrie et le dessin viennent d'ici. */

/* ------------------------------------------------------------------ jetons : sombre par défaut */
:root {
  --bg-page: #04130F; --bg-page-rgb: 4, 19, 15; --bg-bar: #071811F5;
  --surface-card: #0C231B; --surface-raised: #133126; --surface-sunken: #081B15; --surface-dock: #0A1F18;
  --border-subtle: #294B3C; --border-strong: #3E6955;
  --text-primary: #F1EBDD; --text-secondary: #AFC3B8; --text-muted: #AFC3B8;
  --accent: #8CE8BE; --on-accent: #06251A; --gold: #E3B45A; --on-gold: #2A1C03;
  --silver: #C9D1CE; --on-silver: #1B2321; --bronze: #D69463; --on-bronze: #2A1405;
  --danger: #F08A7E; --danger-chip: #A8403A; --on-danger-chip: #FFF3F1; --info: #9CC3EE;
  --encre-rgb: 255, 255, 255;
  /* Surfaces de la coquille (panneaux en verre, filets, reflets, barre du bas). */
  --coq-panneau: #0C231BDF; --coq-bord: #FFFFFF26; --coq-reflet: #FFFFFF35;
  --coq-barre-fond: #071811EF; --coq-barre-bord: #FFFFFF66; --coq-voile: #010A08B8;
  --coq-titre: var(--gold);
  /* Repère de la case active des barres publiques (haut de la pente, reflet, ombre) et bandeau des rubriques / pied du site :
     menu-site.css et barre-bas-publique.css les écrivent en dur, ces jetons reprennent exactement leurs valeurs sombres. */
  --coq-repere-haut: #B0F4D7; --coq-repere-reflet: #FFFFFFA0; --coq-repere-ombre: #8CE8BE30;
  --coq-bande-fond: #081b15; --coq-bande-texte: #f0f6f2; --coq-bande-bord: #547565; --coq-bande-titre: #67e8ad; --coq-bande-note: #c1d5ca; --coq-bande-jr: #E3B45A;
  --v5-glass: linear-gradient(180deg, #FFFFFF24 0%, #FFFFFF04 32%, #00000026 100%);
  --v5-rim: inset 0 1px 0 #FFFFFF8A, inset 0 -1px 0 #00000080, inset 0 10px 14px -13px #FFFFFFAA, 0 14px 34px #00000060;
  --coq-flou: 14px; --txt: 1;
}
/* Thème clair (palette R11 §9, la même que l'app). Les hubs et les articles posent leurs jetons sur
   leur propre élément (tokens-v2.css, v5-look.css) : la règle les suit avec la même liste.
   Le même bloc existe deux fois, mot pour mot : ici pour data-theme="clair" posé par theme.js, plus bas sous
   @media (prefers-color-scheme: light) pour « Comme le téléphone » avant theme.js (script async : mesuré 5 chargements sur 9
   où data-theme arrive 50 à 90 ms après la première image, latence 100 ms) et sans JavaScript. */
:root[data-theme="clair"], :root[data-theme="clair"] .tp-app, :root[data-theme="clair"] .article-wp {
  --bg-page: #F5F4EE; --bg-page-rgb: 245, 244, 238; --bg-bar: #F5F4EEF2;
  --surface-card: #FFFEFA; --surface-raised: #EBF3ED; --surface-sunken: #EEEEE7; --surface-dock: #FFFEFA;
  --border-subtle: #D3DDD6; --border-strong: #9FB2A7;
  --text-primary: #142B23; --text-secondary: #425C50; --text-muted: #526A5E;
  --accent: #146B4A; --on-accent: #FFFFFF; --gold: #7A520A; --on-gold: #FFFFFF;
  --danger: #8E2B22; --danger-chip: #8E2B22; --on-danger-chip: #FFFFFF; --info: #245D8C;
  --encre-rgb: 20, 43, 35;
  --coq-panneau: #FFFFFFE6; --coq-bord: #142B2322; --coq-reflet: #FFFFFFB0;
  --coq-barre-fond: #FFFFFFF0; --coq-barre-bord: #142B2333; --coq-voile: #142B2366;
  --coq-repere-haut: #187A56; --coq-repere-reflet: #FFFFFF40; --coq-repere-ombre: #146B4A30;
  --coq-bande-fond: #EBF3ED; --coq-bande-texte: #142B23; --coq-bande-bord: #9FB2A7; --coq-bande-titre: #146B4A; --coq-bande-note: #425C50; --coq-bande-jr: #7A520A;
  --v5-glass: linear-gradient(180deg, #FFFFFF80 0%, #FFFFFF00 40%);
  --v5-rim: inset 0 1px 0 #FFFFFFF2, inset 0 -1px 0 #142B231F, 0 12px 30px #142B2329;
}
/* Panneaux des hubs écrits en couleur fixe dans hubs.css : en clair, ils suivent les jetons. */
:root[data-theme="clair"] .tp-app .tp-hub-panel { background-color: var(--coq-panneau); border-color: var(--coq-bord); box-shadow: var(--v5-rim); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]), :root:not([data-theme]) .tp-app, :root:not([data-theme]) .article-wp {
    --bg-page: #F5F4EE; --bg-page-rgb: 245, 244, 238; --bg-bar: #F5F4EEF2;
    --surface-card: #FFFEFA; --surface-raised: #EBF3ED; --surface-sunken: #EEEEE7; --surface-dock: #FFFEFA;
    --border-subtle: #D3DDD6; --border-strong: #9FB2A7;
    --text-primary: #142B23; --text-secondary: #425C50; --text-muted: #526A5E;
    --accent: #146B4A; --on-accent: #FFFFFF; --gold: #7A520A; --on-gold: #FFFFFF;
    --danger: #8E2B22; --danger-chip: #8E2B22; --on-danger-chip: #FFFFFF; --info: #245D8C;
    --encre-rgb: 20, 43, 35;
    --coq-panneau: #FFFFFFE6; --coq-bord: #142B2322; --coq-reflet: #FFFFFFB0;
    --coq-barre-fond: #FFFFFFF0; --coq-barre-bord: #142B2333; --coq-voile: #142B2366;
    --coq-repere-haut: #187A56; --coq-repere-reflet: #FFFFFF40; --coq-repere-ombre: #146B4A30;
    --coq-bande-fond: #EBF3ED; --coq-bande-texte: #142B23; --coq-bande-bord: #9FB2A7; --coq-bande-titre: #146B4A; --coq-bande-note: #425C50; --coq-bande-jr: #7A520A;
    --v5-glass: linear-gradient(180deg, #FFFFFF80 0%, #FFFFFF00 40%);
    --v5-rim: inset 0 1px 0 #FFFFFFF2, inset 0 -1px 0 #142B231F, 0 12px 30px #142B2329;
  }
  :root:not([data-theme]) .tp-app .tp-hub-panel { background-color: var(--coq-panneau); border-color: var(--coq-bord); box-shadow: var(--v5-rim); }
}
/* Les zones photo restent sombres dans les deux thèmes (texte clair sur voile sombre) ; une photo n'est jamais inversée.
   Règle sans condition de thème : en sombre elle répète les valeurs déjà héritées. */
:is(.photo, .vol-photo, .tp-v5-hero-photo, .tp-v5-carte-photo, .tp-v5-course-photo) {
  --bg-page: #04130F; --bg-page-rgb: 4, 19, 15; --surface-card: #0C231B; --surface-raised: #133126; --surface-sunken: #081B15;
  --border-subtle: #294B3C; --border-strong: #3E6955; --text-primary: #F1EBDD; --text-secondary: #AFC3B8; --text-muted: #AFC3B8;
  --accent: #8CE8BE; --on-accent: #06251A; --gold: #E3B45A; --on-gold: #2A1C03; --encre-rgb: 255, 255, 255;
  /* --coq-titre est résolu là où il est déclaré (:root → or du thème clair, #7A520A) : il faut le redéclarer dans la zone pour
     qu'il prenne l'or sombre. Mesuré (ui-hubs, /pronostic-quinte-demain/ à 390 en clair) : titre #7A520A sur photo = 2,58:1. */
  --coq-titre: var(--gold);
  color: var(--text-primary);
}
:root[data-titres="menthe"] :is(.photo, .vol-photo, .tp-v5-hero-photo, .tp-v5-carte-photo, .tp-v5-course-photo) { --coq-titre: var(--accent); }
:root[data-titres="accents"] :is(.photo, .vol-photo, .tp-v5-hero-photo, .tp-v5-carte-photo, .tp-v5-course-photo) { --coq-titre: var(--text-primary); }
/* Repère de la case active des barres publiques (article, hubs) : la pente menthe #B0F4D7 est un dessin du thème sombre ; en
   clair le mot est blanc (--on-accent) et doit rester lisible sur toute la hauteur → pente verte. Mesuré (banc, article clair à
   390) : blanc sur la pente menthe = 3,44:1 sur « Lire » ; blanc sur #187A56 ≥ 5,2:1. Le dock de l'app est déjà en accent plein.
   Règle unique pilotée par les jetons (valeurs sombres identiques à barre-bas-publique.css / v5-look.css). */
:root :is(.article-wp-bar-bottom .barre-publique-repere, .tp-app .tp-bar-bottom .tp-nav-repere, .tp-app .tp-bar-bottom[data-barre-publique="coquille"] .tp-nav-repere) { background: linear-gradient(var(--coq-repere-haut), var(--accent)); box-shadow: inset 0 1px 0 var(--coq-repere-reflet), 0 5px 16px var(--coq-repere-ombre); }
/* Bandeau des rubriques et pied du site (menu-site.css : couleurs fixes du thème sombre, #081b15 / #f0f6f2). Vu sur les
   captures theme-clair-* : ils restaient en bande sombre sous le thème clair ; ici ils suivent les jetons --coq-bande-* (valeurs
   sombres identiques). Texte, liens et ordre inchangés : seules des couleurs. */
:root :is(.tp-site-rubriques, .tp-pied-site) { background: var(--coq-bande-fond); color: var(--coq-bande-texte); }
:root .tp-pied-site { border-color: var(--coq-bande-bord); }
:root :is(.tp-site-rubriques a, .tp-pied-site a, .tp-sur-site a) { color: var(--coq-bande-texte); }
:root .tp-pied-site p { color: var(--coq-bande-note); }
:root .tp-pied-site [data-pied-groupe] h2 { color: var(--coq-bande-titre); }
:root .tp-pied-site a[data-pied-jr] { border-color: var(--coq-bande-jr); }
:root :is(.tp-pied-site, .tp-site-rubriques) :focus-visible { outline-color: var(--coq-bande-titre); }
/* Réglages d'Apparence lus sur les pages publiques (mêmes attributs que profil.js pose dans l'app). */
:root[data-texte="grand"] { --txt: 1.15; }
:root[data-texte="tres-grand"] { --txt: 1.3; }
:root[data-titres="menthe"] { --coq-titre: var(--accent); }
:root[data-titres="accents"] { --coq-titre: var(--text-primary); }
:root[data-verre-choisi="givre"] { --coq-flou: 10px; }
:root[data-verre-choisi="cristal"] { --coq-flou: 18px; }
:root[data-verre-choisi="aucun"] { --coq-flou: 0px; --coq-panneau: var(--surface-card); --bg-bar: var(--bg-page); --coq-barre-fond: var(--surface-dock); --v5-glass: none; }

/* ------------------------------------------------------------------ en-tête : 56 px, identique partout */
.coq-entete {
  position: sticky; top: 0; z-index: 30; box-sizing: border-box;
  height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 0 0;
  color: var(--text-primary);
  background-color: var(--bg-bar); background-image: var(--v5-glass); box-shadow: var(--v5-rim);
  border-bottom: 1px solid var(--coq-bord);
  -webkit-backdrop-filter: blur(var(--coq-flou)) saturate(1.5); backdrop-filter: blur(var(--coq-flou)) saturate(1.5);
}
.coq-entete-int { box-sizing: border-box; display: flex; align-items: center; gap: 6px; height: 56px; max-width: var(--coq-largeur, none); margin: 0 auto; padding: 0 6px 0 16px; }
.coq-marque {
  flex: 1 1 auto; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--f-titre, var(--font-display, Playfair, Georgia, serif)); font-weight: 600; font-size: calc(20px * var(--txt, 1)); letter-spacing: .06em; line-height: 44px;
  color: var(--text-primary); text-decoration: none;
}
.coq-marque :is(b, em) { font-weight: 600; font-style: normal; color: var(--accent); }
/* Logo (choix Drew 14/10, KT-20261014-turf-logo-copie) : cheval doré + « TURF PÉPITE » or à contour brun.
   Le texte du lien reste dans le HTML (lecteurs d'écran, SEO) et sort de la boîte (text-indent). La couleur reste celle de la page (même couleur partout). Le texte caché garde des couleurs lisibles (banc de contraste), mesure 15/10. WebP q90 depuis le 16/10 (photo de l'app plus tôt, mesure Lighthouse). */
.coq-marque {
  flex: 0 1 178px; min-width: 0; height: 44px; text-indent: 110%;
  background: url(/app-icons/marque-cheval.webp) left center / auto 40px no-repeat,
              url(/app-icons/marque-texte.webp) 53px center / auto 24px no-repeat;
}
@media (max-width: 359px) { .coq-marque { flex-basis: 150px; background-size: auto 34px, auto 20px; background-position: left center, 45px center; } }
/* sous 360 px, logo réduit (cheval 34 px, texte 20 px) pour ne pas déborder, mesure 15/10. */
.coq-actions { display: flex; align-items: center; flex: none; margin-left: auto; }
.coq-rond, .bouton-perso {
  position: relative; flex: none; display: inline-grid; place-items: center; box-sizing: border-box;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-primary);
  font: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.coq-rond svg, .bouton-perso svg { display: block; width: 24px; height: 24px; }
.coq-rond:active, .bouton-perso:active { background: var(--surface-raised); }
.coq-rond:focus-visible, .bouton-perso:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Le crayon « Modifier » : un rond de 44 px ; le mot n'est lu que par les lecteurs d'écran. En
   modification (aria-pressed), une pilule « OK » courte : c'est un état transitoire. */
:is(.coq-crayon, .bouton-perso) svg { width: 22px; height: 22px; color: var(--accent); }
.coq-sr, .coq-mot, .bouton-perso [data-perso-mot] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:is(.coq-crayon, .bouton-perso)[aria-pressed="true"] { width: auto; padding: 0 14px; border-radius: 22px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: calc(14px * var(--txt, 1)); }
:is(.coq-crayon, .bouton-perso)[aria-pressed="true"] svg { display: none; }
:is(.coq-crayon, .bouton-perso)[aria-pressed="true"] :is(.coq-mot, [data-perso-mot]) { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
@media (max-width: 359px) { .coq-marque { font-size: calc(16px * var(--txt, 1)); letter-spacing: .04em; } }

/* ------------------------------------------------------------------ barre du bas : une règle, trois alias */
/* .dock (app), .tp-bar-bottom (hubs), .article-wp-bar-bottom (articles) : même boîte de 66 px à 12 px des
   bords, mêmes coins et le même verre. L'app garde ses propres rendus de verre (verre.js) ; les hubs la
   cachent dès 1024 px ; les articles la centrent sur 936 px au plus (--coq-barre-max). */
.coq-barre-bas, .dock, .tp-app .tp-bar-bottom, .article-wp-bar-bottom {
  position: fixed; left: max(12px, calc((100% - var(--coq-barre-max, 100%)) / 2)); right: max(12px, calc((100% - var(--coq-barre-max, 100%)) / 2));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 20; box-sizing: border-box; isolation: isolate;
  height: 66px; min-height: 66px; padding: 6px; border: 1px solid var(--coq-barre-bord); border-radius: 24px;
  background-color: var(--coq-barre-fond); background-image: var(--v5-glass); box-shadow: var(--v5-rim);
  -webkit-backdrop-filter: blur(var(--coq-flou)) saturate(1.5); backdrop-filter: blur(var(--coq-flou)) saturate(1.5);
}

/* ------------------------------------------------------------------ feuilles de la coquille : Menu, Apparence, #fiches, #lire */
/* Lot 2 (plein écran) : les feuilles des pages publiques (Menu, Apparence, et #fiches / #lire ouvertes par :target) prennent
   toute la hauteur (100dvh, coins droits) avec la même tête de 56 px que la feuille de l'app : poignée dessinée (36×4 à 8 px),
   titre à gauche, croix 44×44 à droite, collées en haut sous l'encoche. Mesuré avant : 94dvh et, sur #fiches / #lire, une
   tête de 12 px + h2 avec un lien « Fermer » en texte. .feuille-publique reste repliée (display none) tant que l'adresse ne
   la cible pas ; barre-bas-publique.css ne garde que ses blocs intérieurs et la règle « aucun soulignement ». */
.coq-voile { position: fixed; inset: 0; z-index: 39; background: var(--coq-voile); }
.coq-voile[hidden], .coq-feuille[hidden], .feuille-publique { display: none; }
.coq-feuille, .feuille-publique:target { position: fixed; inset: 0; z-index: 40; height: 100dvh; max-height: 100dvh; display: flex; justify-content: center; margin: 0; padding: 0; border: 0; background: none; }
/* #fiches / #lire n'ont pas de voile séparé : la section elle-même assombrit ce qui dépasse de la boîte (écrans larges). */
.feuille-publique:target { background: var(--coq-voile); }
.coq-feuille-boite, .feuille-publique-boite {
  display: flex; flex-direction: column; box-sizing: border-box; width: 100%; max-width: 960px; height: 100%; margin: 0;
  padding: env(safe-area-inset-top, 0px) 0 0; border: 0; border-radius: 0;
  background-color: var(--coq-panneau); background-image: var(--v5-glass); box-shadow: var(--v5-rim);
  -webkit-backdrop-filter: blur(var(--coq-flou)) saturate(1.5); backdrop-filter: blur(var(--coq-flou)) saturate(1.5);
  color: var(--text-primary); font: calc(15px * var(--txt, 1))/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (min-width: 961px) { .coq-feuille-boite, .feuille-publique-boite { border-left: 1px solid var(--coq-bord); border-right: 1px solid var(--coq-bord); } }
.coq-feuille-tete, .feuille-publique-tete { position: relative; flex: none; display: flex; align-items: center; gap: 6px; box-sizing: border-box; height: 56px; padding: 0 6px 0 16px; }
.coq-feuille-tete::before, .feuille-publique-tete::before { content: ''; position: absolute; left: 50%; top: 8px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(var(--encre-rgb), .28); }
.coq-feuille-tete h2, .feuille-publique-tete h2 { flex: 1 1 auto; min-width: 0; margin: 6px 0 0; overflow: hidden; font: 600 calc(22px * var(--txt, 1))/1.2 var(--f-titre, var(--font-display, Playfair, Georgia, serif)); letter-spacing: 0; color: var(--coq-titre); white-space: nowrap; text-overflow: ellipsis; outline: none; }
.coq-feuille-tete .coq-rond, .feuille-publique-fermer { margin-top: 2px; }
/* La croix des feuilles publiques est un lien vers « #! » (sans JavaScript) : un rond de 44 px, comme ceux de l'en-tête. */
.feuille-publique-fermer { flex: none; display: inline-grid; place-items: center; box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-primary); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.feuille-publique-fermer svg { display: block; width: 24px; height: 24px; }
.feuille-publique-fermer:active { background: var(--surface-raised); }
.feuille-publique-fermer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coq-feuille-corps, .feuille-publique-corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.coq-feuille, .feuille-publique:target { transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .18s linear; }
@starting-style { .coq-feuille, .feuille-publique:target { transform: translateY(24px); opacity: 0; } }

/* ------------------------------------------------------------------ portes des fiches (feuille Fiches de l'app, #fiches public) */
/* Lot 2 (plein écran) : quatre cartes à icônes (chevaux, jockeys, entraîneurs, hippodromes), même dessin que les cartes du Menu ;
   le nombre reçu de WordPress, dans l'app seulement (PortesFiches, data-compte) ; sans lecture, aucun nombre, jamais « 0 ».
   Remplace les portes en texte seul d'app.css et de barre-bas-publique.css.
   Une carte par rangée sur téléphone (icône · libellé · nombre à droite) : dans un bloc-carte, deux colonnes ne laissent qu'une
   centaine de pixels au libellé (mesuré à 390 : « Cheva / ux », « hippodrom / es » coupés en plein mot). Deux colonnes dès
   480 px, le nombre sous le libellé ; un mot ne se coupe jamais (overflow-wrap normal), le bloc défile plutôt. */
.portes { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 10px; padding: 0; }
.portes li { display: flex; margin: 0; padding: 0; min-width: 0; }
.porte { flex: 1 1 auto; box-sizing: border-box; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: 60px; padding: 10px 12px; border: 1px solid var(--coq-bord); border-radius: 16px; background-color: var(--surface-card); color: var(--text-primary); font-weight: 650; font-size: calc(15px * var(--txt, 1)); line-height: 1.3; text-decoration: none; }
.porte svg { display: block; width: 24px; height: 24px; color: var(--accent); }
.porte > span { min-width: 0; overflow-wrap: normal; }
.porte b { justify-self: end; font: 600 calc(18px * var(--txt, 1))/1.1 var(--f-titre, var(--font-display, Playfair, Georgia, serif)); color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.porte:active { background-color: var(--surface-raised); }
.porte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 359px) { .porte { min-height: 52px; } }
@media (min-width: 480px) {
  .portes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .porte { grid-template-columns: 24px minmax(0, 1fr); }
  .porte svg { grid-row: 1 / span 2; }
  .porte > span, .porte b { grid-column: 2; }
  .porte b { justify-self: start; margin-top: 2px; font-size: calc(17px * var(--txt, 1)); }
}
/* Apparence (pages publiques) : les six réglages de lecture, mêmes mots que dans l'app. */
.coq-groupe { margin: 12px 0 0; }
.coq-groupe h3, .menu-cartes .menu-cartes-titre { margin: 0 0 8px; font: 700 calc(12px * var(--txt, 1))/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.coq-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; box-sizing: border-box; padding: 4px; border-radius: 16px; background: var(--surface-sunken); }
.coq-choix button { box-sizing: border-box; min-height: 44px; margin: 0; padding: 0 8px; border: 0; border-radius: 12px; background: transparent; color: var(--text-secondary); font: 650 calc(14px * var(--txt, 1))/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; text-align: center; cursor: pointer; }
.coq-choix button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.coq-choix button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coq-note { margin: 16px 0 0; font-size: calc(13px * var(--txt, 1)); line-height: 1.5; color: var(--text-secondary); }

/* ------------------------------------------------------------------ Menu en cartes (feuille publique et feuille de l'app) */
.menu-cartes { display: grid; gap: 14px; margin: 0; padding: 0; }
.menu-cartes-cta, .menu-carte { box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px; border: 1px solid var(--coq-bord); border-radius: 16px; background-color: var(--surface-card); color: var(--text-primary); font-weight: 650; font-size: calc(15px * var(--txt, 1)); line-height: 1.3; text-decoration: none; }
.menu-cartes-cta { justify-content: space-between; background-color: var(--surface-raised); border-color: var(--border-strong); }
.menu-cartes-cta svg, .menu-carte svg { flex: none; display: block; width: 24px; height: 24px; color: var(--accent); }
.menu-carte > span, .menu-cartes-cta > span { min-width: 0; overflow-wrap: anywhere; }
.menu-cartes-groupe { margin: 0; }
.menu-cartes-liste { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
/* Dans une rangée de la grille, le lien remplit toute la case : la carte entière est le lien, même à côté d'une carte sur deux lignes. */
.menu-cartes-liste li { display: flex; margin: 0; padding: 0; min-width: 0; }
.menu-cartes-liste .menu-carte { flex: 1 1 auto; }
.menu-carte:active, .menu-cartes-cta:active { background-color: var(--surface-raised); }
.menu-carte:focus-visible, .menu-cartes-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 359px) { .menu-cartes-liste { grid-template-columns: 1fr; } }
@media (min-width: 700px) { .menu-cartes-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 360px) { [data-app] .menu-cartes-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ transition douce de page à page (pages publiques) */
/* Un fondu court entre deux documents de la même origine ; coupé quand l'appareil demande moins de
   mouvement ou quand « Animations : Calme » est choisi. Les navigateurs sans cette règle l'ignorent.
   L'opt-in @view-transition (navigation: auto, none sous prefers-reduced-motion) n'est PAS ici : il est en ligne dans
   le <head> du layout racine (web/src/app/layout.tsx, <style data-coq-transition>). Mesuré : dans cette feuille, Chrome
   l'évaluait trop tard (les feuilles de Next se chargent avant) et abandonnait la transition entrante. */
::view-transition-old(root) { animation: coq-sortie .16s ease-out both; }
::view-transition-new(root) { animation: coq-entree .22s ease-out both; }
@keyframes coq-sortie { to { opacity: 0; } }
@keyframes coq-entree { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .coq-feuille, .feuille-publique, .coq-voile, .coq-rond, .feuille-publique-fermer, .bouton-perso, .menu-carte, .menu-cartes-cta, .porte, .coq-choix button, .esp-toast, .esp-suivre, .esp-ligne, .esp-aller { transition: none !important; animation: none !important; }
}
:root[data-mouvement="reduit"]::view-transition-group(*), :root[data-mouvement="reduit"]::view-transition-old(*), :root[data-mouvement="reduit"]::view-transition-new(*) { animation: none !important; }
:root[data-mouvement="reduit"] :is(.coq-feuille, .feuille-publique, .coq-voile, .coq-rond, .feuille-publique-fermer, .bouton-perso, .menu-carte, .menu-cartes-cta, .porte, .coq-choix button, .esp-toast, .esp-suivre, .esp-ligne, .esp-aller) { transition: none !important; animation: none !important; }
@media (prefers-reduced-transparency: reduce) {
  .coq-entete, .coq-feuille-boite, .feuille-publique-boite, .coq-barre-bas, .tp-app .tp-bar-bottom, .article-wp-bar-bottom { -webkit-backdrop-filter: none; backdrop-filter: none; background-image: none; background-color: var(--surface-sunken); }
}

/* ------------------------------------------------------------------ éventail Lire (lot A) */
:is(nav.dock, nav[data-barre-publique]) :is(.dock-bouton, a[data-barre]) { transition: opacity .2s ease-out; }
.ev-ouverte :is(.dock-bouton, a[data-barre]):not([data-eventail-lire]) { opacity: .4; }
/* ---------- le rond Lire : un bijou. Lunette en or brossé, cadran guilloché, reflet. Au repos : aucune animation permanente. */
[data-eventail-lire] { width: 100%; z-index: 3; touch-action: manipulation; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.ev-piece { position: absolute; left: 50%; top: -28px; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; transform-origin: 50% 80%;
  box-shadow: 0 0 0 5px var(--bg-page), 0 0 0 6px #E3B45A30, 0 2px 3px #000C, 0 10px 24px #000A, 0 0 26px #E3B45A24; }
[data-eventail-lire].ev-ouvert .ev-piece { transform: translateY(var(--ev-leve)); }
.ev-piece-lunette { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 200deg, #7A5520, #F7E3A4 10%, #B98A3C 22%, #FFF2C6 34%, #9C7430 48%, #ECC772 62%, #7F5A22 76%, #F3D894 88%, #7A5520); }
.ev-piece-or { position: absolute; inset: 3.5px; overflow: hidden; border-radius: 50%; background: radial-gradient(115% 95% at 34% 18%, #FFF5D2 0%, #F4D998 20%, #E6B95E 48%, #C2903A 78%, #9A6E2C 100%); box-shadow: inset 0 1.5px 0 #FFF9E6, inset 0 -3px 6px #7A520F70, inset 0 0 0 1px #8A622480; }
.ev-piece-or::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, #FFFFFF22 0 .6px, #FFFFFF00 .6px 2.4px); opacity: .55; }
.ev-piece-or::after { content: ''; position: absolute; left: 7px; top: 4px; width: 32px; height: 17px; border-radius: 50%; background: radial-gradient(closest-side, #FFFFFFB8, #FFFFFF00); transform: rotate(-22deg); }
.ev-piece-reflet { position: absolute; top: -10px; left: 0; width: 22px; height: 84px; background: linear-gradient(90deg, #FFFFFF00, #FFFFFFB0 50%, #FFFFFF00); transform: translateX(-40px) rotate(24deg); opacity: 0; }
.ev-piece .ev-ico { position: absolute; left: 50%; top: 9px; width: 24px; height: 24px; margin-left: -12px; color: #3A2706; filter: drop-shadow(0 1px 0 #FFF4CF99); }
.ev-ico-croix { opacity: 0; }
[data-eventail-lire].ev-ouvert .ev-ico-livre { opacity: 0; }
[data-eventail-lire].ev-ouvert .ev-ico-croix { opacity: 1; }
[data-eventail-lire] > span { position: absolute; left: 0; right: 0; top: 10px; text-align: center; font: 700 11px/1 system-ui, sans-serif; letter-spacing: .04em; color: #3A2706; text-shadow: 0 1px 0 #FFF4CF80; }
/* icônes dessinées en pièces (chaque trait s'anime seul) : trait de 2 px, bouts ronds */
/* chaque pièce d'icône est son propre petit SVG superposé : son transform s'anime sur le compositeur, sans repeindre le verre */
.ev-ico-p, .ev-ico-c { position: relative; display: block; flex: none; }
.ev-ico-c { width: 24px; height: 24px; }
:is(.ev-ico-p, .ev-ico-c) > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(.ev-ico-p, .ev-ico-c) :is(path, rect) { vector-effect: non-scaling-stroke; }
:is(.ev-ico-p, .ev-ico-c) .ev-plein { fill: currentColor; stroke: none; }

/* ---------- l'éventail : six pétales de verre égaux autour du rond, un dôme au centre */
.ev-eventail { position: absolute; z-index: 49; left: 0; bottom: 0; width: var(--ev-W, 100%); height: var(--ev-H, 220px); margin-left: 0; pointer-events: none; }
/* fermé, l'éventail reste mis en page mais invisible, sans toucher, hors du clavier (tabindex -1) et caché aux lecteurs d'écran (aria-hidden) :
   le style et la mise en page sont faits au chargement, pas au toucher */
.ev-eventail[hidden] { display: block; opacity: 0; pointer-events: none; }
.ev-eventail[hidden] .ev-zone { pointer-events: none; }
.ev-onde-cadre { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ev-onde { position: absolute; width: 74px; height: 74px; margin: -37px 0 0 -37px; border: 1.5px solid #E3B45AC8; border-radius: 50%; opacity: 0; }
.ev-flash { position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; background: radial-gradient(closest-side, #F7DC9A90, #E3B45A30 55%, #E3B45A00); opacity: 0; }

.ev-dome { position: absolute; pointer-events: none; overflow: hidden; transform-origin: 50% 100%;
  background: radial-gradient(circle at 50% 100%, #133229 0%, #0C231B 58%, #0A1D16 100%);
  box-shadow: inset 0 1px 0 #E3B45A66, inset 0 0 0 1px #FFFFFF12, 0 -10px 30px #0008; }
.ev-dome > :is(i, span) { position: absolute; }
.ev-dome .ev-sillons { inset: 0; background: repeating-radial-gradient(circle at 50% 100%, #FFFFFF08 0 1px, #FFFFFF00 1px 3px); }
.ev-dome .ev-reflets-dome { left: 0; top: 0; border-radius: 50%; background: conic-gradient(from 0deg, #FFFFFF00 0deg, #FFFFFF1C 28deg, #FFFFFF00 66deg, #FFFFFF00 150deg, #F2D69424 196deg, #FFFFFF00 240deg, #FFFFFF00 360deg); }
.ev-dome .ev-lueur { inset: 0; background: radial-gradient(circle at 50% 100%, #E3B45A38 0, #E3B45A10 42%, #E3B45A00 70%); }
.ev-dome .ev-nuit { inset: 0; background: radial-gradient(circle at 50% 100%, #1A3866 0%, #0C1C38 55%, #08142A 100%); opacity: 0; }
[data-moment="soir"] .ev-dome .ev-nuit { opacity: .9; }
.ev-dome .ev-astre { width: var(--ev-astre, 16px); height: var(--ev-astre, 16px); }
.ev-dome .ev-astre .ev-ico-p { width: 100%; height: 100%; }
.ev-dome .ev-astre .ev-ico-p > svg { stroke-width: 1.75; }
.ev-dome .ev-soleil { color: #F7DC9A; }
.ev-dome .ev-lune { color: #C4D6F6; }
[data-moment="matin"] .ev-dome .ev-lune, [data-moment="soir"] .ev-dome .ev-soleil { opacity: .28; transform: translateY(3px) scale(.86); }
.ev-dome .ev-ligne { left: 0; right: 0; text-align: center; white-space: nowrap; text-transform: uppercase; }
.ev-dome .ev-l1 { font: 700 10px/12px system-ui, sans-serif; letter-spacing: .24em; padding-left: .24em; color: var(--gold); }
.ev-dome .ev-l2 { height: var(--ev-h2); font: 700 11px/var(--ev-h2) system-ui, sans-serif; letter-spacing: .12em; padding-left: .12em; color: var(--text-primary); }
.ev-dome .ev-chiffre { display: inline-block; vertical-align: middle; height: var(--ev-h2); overflow: hidden; margin-top: -2px; font: 700 var(--ev-fc)/var(--ev-h2) Georgia, serif; letter-spacing: 0; color: #F7DC9A; font-variant-numeric: lining-nums; }
.ev-dome .ev-col { display: inline-block; position: relative; }
.ev-dome .ev-col::before { content: attr(data-avant); white-space: pre; position: absolute; left: 0; right: 0; bottom: 100%; }
[data-moment="soir"] .ev-dome .ev-l1 { color: #A9C1EC; }
.ev-petit .ev-dome .ev-l1 { font-size: 9.5px; letter-spacing: .2em; padding-left: .2em; }
.ev-petit .ev-dome .ev-l2 { font-size: 10px; letter-spacing: .06em; padding-left: .06em; }

/* 18/10 : .ev-l1 est en system-ui, sa largeur dépend de la police du visiteur ; « CE MATIN » dépassait le dôme de 0,1 px avec Selawik à 320 px (EV_MOTS) : .14em lui laisse environ 1,6 px. */
@media (max-width: 359px) {
  .ev-eventail .ev-dome .ev-l1 { letter-spacing: .14em; padding-left: .14em; }
}

/* la zone de toucher est une couche à part (découpée en secteur) : le verre, ses ombres et sa lueur ne sont jamais coupés */
.ev-zone { position: absolute; inset: 0; pointer-events: auto; }
.ev-part { position: absolute; inset: 0; pointer-events: none; color: var(--text-primary); text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.ev-corps { position: absolute; inset: 0; }
.ev-tuile { position: absolute; overflow: visible; pointer-events: none; }
.ev-tuile.ev-verre { filter: drop-shadow(0 1.5px 1.5px #000000B0) drop-shadow(0 10px 14px #00000080); }
.ev-heros .ev-tuile.ev-verre { filter: drop-shadow(0 1.5px 1.5px #000000B0) drop-shadow(0 10px 14px #00000080) drop-shadow(0 0 14px #E3B45A44); }
[data-moment="soir"] .ev-heros .ev-tuile.ev-verre { filter: drop-shadow(0 1.5px 1.5px #000000B0) drop-shadow(0 10px 14px #00000080) drop-shadow(0 0 14px #5E83C433); }
.ev-tuile.ev-nuit, .ev-tuile.ev-lumiere, .ev-focus-trait { opacity: 0; }
[data-moment="soir"] .ev-heros .ev-tuile.ev-nuit { opacity: 1; }
.ev-part:focus-visible .ev-focus-trait { opacity: 1; }
/* reflet d'or et lumière de bord : UNE bande qui balaie tout l'éventail sous un masque fixe (formes ou contours des pétales) */
.ev-balayage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ev-balai { position: absolute; top: -20%; left: 0; height: 140%; width: 90px; opacity: 0; }
.ev-balayage.ev-or .ev-balai { background: linear-gradient(90deg, #FFF6DC00, #FFF0C8A0 50%, #FFF6DC00); }
.ev-balayage.ev-bord .ev-balai { width: 140px; background: linear-gradient(90deg, #FFFFFF00, #F4FFF9 50%, #FFFFFF00); }
.ev-ancre { position: absolute; width: 0; height: 0; }
.ev-cont { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.ev-flip { display: flex; flex-direction: column; align-items: center; gap: var(--ev-ecart, 4px); }
.ev-flip .ev-ico-p { width: var(--ev-ico, 20px); height: var(--ev-ico, 20px); color: var(--accent); }
.ev-heros .ev-flip .ev-ico-p { color: #FFF0C4; }
[data-moment="soir"] .ev-heros .ev-flip .ev-ico-p { color: #D2E2FF; }
.ev-mot { display: block; font: 600 var(--ev-fs, 12px)/1.15 system-ui, sans-serif; letter-spacing: .01em; color: var(--text-primary); white-space: nowrap; text-shadow: 0 1px 2px #000A; }
.ev-heros .ev-mot { color: #FFF8E6; text-shadow: 0 1px 2px #3A2A0ACC; }
[data-moment="soir"] .ev-heros .ev-mot { color: #EEF4FF; text-shadow: 0 1px 2px #061226CC; }

.ev-voile { position: absolute; inset: 0; z-index: 48; background: radial-gradient(140% 75% at 50% 100%, #010A0890 0%, #010A08D8 75%); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }

[data-eventail-lire] { position: relative; z-index: 4; overflow: visible; }
[data-eventail-lire] > span { position: absolute; left: 50%; right: auto; top: 10px; width: max-content; max-width: 100%; transform: translateX(-50%); color: #3A2706; font: 700 11px/1 system-ui, sans-serif; text-align: center; pointer-events: none; }
.ev-part[hidden] { display: none; }
/* Claude 08/10 : le verre de l'éventail reste sombre dans les DEUX thèmes ; en thème clair, --text-primary (encre foncée)
   rendait les mots illisibles sur le verre vert (mesuré : rgb(20, 43, 35) sur vert sombre). Textes clairs de la maquette
   P1 v2 (--texte #F1EBDD, --menthe #8CE8BE) ; la part du moment (.ev-heros) garde ses couleurs. Le banc ui-eventail
   tourne en thème sombre seulement et ne voyait pas ce cas. */
.ev-part, .ev-mot { color: #F1EBDD; }
.ev-flip .ev-ico-p { color: #8CE8BE; }
.ev-dome .ev-l2 { color: #F1EBDD; }
.ev-eventail[hidden] .ev-zone { pointer-events: none; }
.ev-voile[hidden] { display: none; }
.ev-voile[data-eventail-fixe="true"] { z-index: 8; }
.ev-eventail[data-eventail-fixe="true"] { z-index: 9; }
.tp-nav-desktop .ev-piece { display: none; }
.tp-nav-desktop [data-eventail-lire] > span { position: static; width: auto; transform: none; color: inherit; font: inherit; }
:is(.tp-bar-bottom, .article-wp-bar-bottom) a[data-barre="lire"] > svg { display: none; }
@media (prefers-reduced-motion: reduce) { [class*="ev-"], :is(nav.dock, nav[data-barre-publique]) :is(.dock-bouton, a[data-barre]) { transition: none !important; } }
:root[data-mouvement="reduit"] :is([class*="ev-"], nav.dock .dock-bouton, nav[data-barre-publique] a[data-barre]) { transition: none !important; }

[data-eventail-piece] .ev-ico-c > svg { width: 100%; height: 100%; }

/* Mon espace et Suivre (lot B) */
.esp-sur { font-size: 13px; color: var(--text-secondary); margin: 8px 0 12px; }
.esp-bloc { margin: 0 0 12px; padding: 14px; border-radius: 18px; background: var(--surface-card); border: 1px solid var(--coq-bord); color: var(--text-primary); }
.esp-bloc h3 { margin: 0 0 8px; font: 700 calc(12px * var(--txt, 1))/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.esp-bloc h4 { font-size: 13px; }
.esp-bloc .note { font-size: 13px; color: var(--text-secondary); }
.esp-pied { font-size: 13px; color: var(--text-secondary); margin: 16px 0 0; }
.esp-ligne { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 48px; margin: 8px 0 0; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 14px; background: transparent; color: var(--text-primary); font: 650 calc(15px * var(--txt, 1))/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; text-decoration: none; cursor: pointer; }
.esp-bloc .coq-choix { margin-top: 8px; }
.esp-bloc a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); }
.esp-liste { list-style: none; padding: 0; margin: 8px 0 0; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface-sunken); }
.esp-suivi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 6px 10px; }
.esp-suivi + .esp-suivi { border-top: 1px solid var(--border-strong); }
.esp-suivi-corps b { display: block; font-size: 15px; overflow-wrap: anywhere; }
.esp-suivi-corps small { display: block; font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.esp-aller { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: 50%; background: transparent; color: var(--accent); font: 24px/1 system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.esp-suivre { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 22px; background: transparent; color: var(--text-primary); font: 650 calc(14px * var(--txt, 1))/1 system-ui, sans-serif; cursor: pointer; }
.esp-suivre svg { width: 20px; height: 20px; flex: none; }
.esp-suivre [data-suivre-pleine], .esp-suivre[aria-pressed="true"] [data-suivre-contour] { display: none; }
.esp-suivre[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.esp-suivre[aria-pressed="true"] [data-suivre-pleine] { display: block; }
.esp-suivre-public { margin: 8px 0 0; }
.fiche-hero .esp-suivre { grid-column: 2; justify-self: start; margin-top: 6px; }
.esp-liste[data-espace-vues] :is(a, span) { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--text-primary); }
.esp-toast { position: absolute; left: 16px; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 90; padding: 8px 14px; border: 1px solid var(--coq-bord); border-radius: 16px; background: var(--coq-panneau); color: var(--text-primary); font: 650 14px/1.4 system-ui, sans-serif; opacity: 0; transform: translate3d(0, 14px, 0); pointer-events: none; transition: opacity .2s linear, transform .3s cubic-bezier(.2,.8,.2,1); }
.esp-toast[data-fixe] { position: fixed; }
.esp-toast.est-visible { opacity: 1; transform: none; pointer-events: auto; }
.esp-toast[hidden] { display: none; }
.esp-toast button { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.esp-pastille { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg-bar); }
.esp-pastille[hidden] { display: none; }
button.menu-cartes-cta { width: 100%; font: inherit; text-align: left; cursor: pointer; }
button.menu-cartes-cta > span { flex: 1 1 auto; }
button.menu-cartes-cta > small { flex: none; margin-right: 8px; font-size: calc(12px * var(--txt, 1)); color: var(--text-secondary); }
@media (max-width: 360px) { button.menu-cartes-cta { flex-wrap: wrap; } button.menu-cartes-cta > small { order: 1; width: 100%; margin-right: 0; } }
:root[data-sans-cotes] [data-cote] { display: none !important; }