/* =============================================================================
   Chaque goutte ouvre une porte — style.css
   @version 2.0.0

   Une seule feuille, lue à deux endroits :
   1. dans la page hôte : seules les règles #cgop-root s'y appliquent (place
      réservée avant le JavaScript, remise à zéro de l'héritage du thème) ;
   2. dans la racine fantôme (Shadow DOM) du jeu : :host et classes cgop-*.
   Aucune règle ne vise html, body ou * dans la page. Pas d'@layer : les styles
   non stratifiés du thème auraient priorité. !important réservé au mouvement
   réduit.
   ============================================================================= */

/* ===========================================================================
   1. HÔTE — contexte de la page
   =========================================================================== */
#cgop-root {
  display: block;
  position: relative;
  box-sizing: border-box;
  inline-size: 100%;
  /* Place réservée avant l'exécution du JavaScript : CLS nul */
  aspect-ratio: 16 / 10;
  min-block-size: 30rem;
  max-block-size: max(30rem, calc(100svh - 7rem));
  margin-inline: auto;
  border-radius: 28px;
  overflow: clip;
  isolation: isolate;
  scroll-margin-block-start: var(--bs-scroll-margin-top, 5rem);
  background: linear-gradient(180deg, #cfe6ee 0%, #fcefd9 34%, #f2dfb8 36%, #e2c38e 100%);
  box-shadow: 0 2px 6px rgb(32 27 21 / 0.08), 0 24px 56px -20px rgb(32 27 21 / 0.32);
  /* Tout ce que la page transmet par héritage est remis à zéro ici :
     le jeu ne reçoit ni l'encre claire du thème sombre ni la typographie
     des articles. */
  color: #201b15;
  font: 400 1rem/1.5 'Atkinson Hyperlegible Next', 'Atkinson Repli', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: start;
  text-indent: 0;
  text-transform: none;
  text-shadow: none;
  white-space: normal;
}

@media (max-width: 47.99em) {
  #cgop-root {
    aspect-ratio: 4 / 5;
    min-block-size: 28rem;
    max-block-size: max(28rem, calc(100svh - 6rem));
    border-radius: 22px;
  }
}

[data-bs-theme="dark"] #cgop-root,
#cgop-root[data-theme="dark"] {
  background: linear-gradient(180deg, #f1c99a 0%, #f9dcb0 34%, #f2dfb8 36%, #e2c38e 100%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 56px -20px rgb(0 0 0 / 0.8);
}

/* Version autonome (index.html) : l'expérience occupe toute la fenêtre */
#cgop-root.cgop-hote--pleine-page {
  aspect-ratio: auto;
  block-size: 100vh;
  block-size: 100dvh;
  min-block-size: 20rem;
  max-block-size: none;
  border-radius: 0;
  box-shadow: none;
}

#cgop-root .cgop-noscript {
  margin: 0;
  padding: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.5;
  background: rgb(255 254 252 / 0.92);
}

/* ===========================================================================
   2. RACINE FANTÔME — jetons
   Palette « Points fixes » du site (teinte H 67) + l'eau, seule teinte froide.
   =========================================================================== */
:host {
  --cgop-surface: #f9f6f3;
  --cgop-surface-2: #fffefc;
  --cgop-surface-3: #f2ece6;
  --cgop-encre: #201b15;
  --cgop-encre-2: #5b5550;
  --cgop-ligne: #dcd6d1;
  --cgop-ligne-forte: #c1b9b1;
  --cgop-accent: #d98b24;          /* orange de marque : décor, jamais du texte sur le clair */
  --cgop-accent-texte: #8c5500;    /* l'orange lisible en texte (5,66:1) */
  --cgop-accent-sur: #1c1200;      /* encre posée sur l'orange */
  --cgop-eau: #1e9bd7;
  --cgop-eau-fonce: #0b6e99;
  --cgop-eau-clair: #7fd6f2;
  --cgop-eau-texte: #0b6e99;
  --cgop-bouton: #0b6e99;          /* blanc : 5,67:1 */
  --cgop-bouton-survol: #085a7e;   /* blanc : 7,57:1 */
  --cgop-bouton-texte: #ffffff;
  --cgop-verre: rgb(255 254 252 / 0.9);
  --cgop-verre-bord: rgb(32 27 21 / 0.12);
  --cgop-ombre: 0 1px 2px rgb(32 27 21 / 0.06), 0 12px 32px -12px rgb(32 27 21 / 0.3);
  --cgop-ombre-haute: 0 2px 6px rgb(32 27 21 / 0.08), 0 28px 60px -22px rgb(32 27 21 / 0.42);
  --cgop-voile: rgb(23 16 9 / 0.55);
  --cgop-focus-1: #201b15;
  --cgop-focus-2: #fffefc;
  --cgop-ciel-1: #cfe6ee;
  --cgop-ciel-2: #fcefd9;
  --cgop-ciel-3: #ffe3b5;
  --cgop-r-s: 10px;
  --cgop-r: 16px;
  --cgop-r-xl: 28px;
  --cgop-police-titre: 'Figtree', 'Figtree Repli', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --cgop-police-texte: 'Atkinson Hyperlegible Next', 'Atkinson Repli', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --cgop-courbe: cubic-bezier(0.2, 0, 0, 1);
  --cgop-ressort: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cgop-rapide: 180ms;
  --cgop-moyen: 320ms;
  --cgop-lent: 600ms;
  --cgop-barre-h: 4.25rem;

  color-scheme: light;
}

/* Thème sombre du site : même encre, autre exposition. L'illustration reste
   lumineuse (jamais de ciel sombre, §2.3) : un matin plus doré. */
:host([data-theme="dark"]) {
  --cgop-surface: #120d09;
  --cgop-surface-2: #1d1711;
  --cgop-surface-3: #272019;
  --cgop-encre: #f0ece9;
  --cgop-encre-2: #b0a9a3;
  --cgop-ligne: #383028;
  --cgop-ligne-forte: #4e443b;
  --cgop-accent-texte: #d88b23;
  --cgop-eau-texte: #7fd6f2;
  --cgop-bouton-survol: #127aae;   /* blanc : 4,75:1 */
  --cgop-verre: rgb(29 23 17 / 0.9);
  --cgop-verre-bord: rgb(255 255 255 / 0.14);
  --cgop-ombre: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -12px rgb(0 0 0 / 0.75);
  --cgop-ombre-haute: 0 2px 6px rgb(0 0 0 / 0.45), 0 28px 60px -22px rgb(0 0 0 / 0.85);
  --cgop-voile: rgb(0 0 0 / 0.62);
  --cgop-focus-1: #f0ece9;
  --cgop-focus-2: #120d09;
  --cgop-ciel-1: #f1c99a;
  --cgop-ciel-2: #f9dcb0;
  --cgop-ciel-3: #ffd59a;

  color-scheme: dark;
}

/* ===========================================================================
   3. SOCLE
   =========================================================================== */
.cgop-ancre {
  position: absolute;
  inset: 0;
}

.cgop-app,
.cgop-immersif,
.cgop-a-propos {
  font-family: var(--cgop-police-texte);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cgop-encre);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

.cgop-app {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container: cgop / size;
  background: var(--cgop-ciel-2);
}

:is(.cgop-app, .cgop-a-propos) *,
:is(.cgop-app, .cgop-a-propos) *::before,
:is(.cgop-app, .cgop-a-propos) *::after {
  box-sizing: border-box;
}

:is(.cgop-app, .cgop-a-propos) :where(h1, h2, h3, h4, p, ul, li, figure) {
  margin: 0;
  padding: 0;
}

:is(.cgop-app, .cgop-a-propos) :where(ul) {
  list-style: none;
}

:is(.cgop-app, .cgop-a-propos) [hidden] {
  display: none;
}

.cgop-picto {
  display: block;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: none;
}

.cgop-sr-only,
.cgop-app .cgop-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Focus visible : double contour (sombre + clair), lisible sur tous les fonds */
:is(.cgop-app, .cgop-a-propos) :is(button, a, [tabindex]):focus-visible {
  outline: 3px solid var(--cgop-focus-1);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--cgop-focus-2);
}

/* Le focus n'est jamais masqué par le bandeau collant du site (WCAG 2.4.11) */
.cgop-app :is(button, a, [tabindex]) {
  scroll-margin-block: var(--bs-scroll-margin-top, 5rem) 1rem;
}

:is(.cgop-app, .cgop-a-propos) :is(h1, h2, h3, h4)[tabindex="-1"]:focus {
  outline: none;
}

:is(.cgop-app, .cgop-a-propos) :is(h1, h2, h3, h4)[tabindex="-1"]:focus-visible {
  outline: 3px solid var(--cgop-focus-1);
  outline-offset: 4px;
  border-radius: 6px;
  box-shadow: none;
}

/* Verre dépoli : un fond presque opaque (le contraste ne dépend jamais de la
   scène), flouté par-dessus pour la profondeur. */
.cgop-verre,
.cgop-progression,
.cgop-bouton-outil,
.cgop-repere,
.cgop-consigne,
.cgop-etiquette,
.cgop-accueil-carte,
.cgop-panneau,
.cgop-finale-carte,
.cgop-comparaison {
  background: var(--cgop-verre);
  -webkit-backdrop-filter: blur(18px) saturate(1.45);
  backdrop-filter: blur(18px) saturate(1.45);
  border: 1px solid var(--cgop-verre-bord);
  box-shadow: var(--cgop-ombre);
}

/* ===========================================================================
   4. SCÈNE
   =========================================================================== */
.cgop-scene-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  user-select: none;
}

.cgop-scene {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.cgop-plan {
  transform-origin: 0 0;
  transform-box: view-box;
}

.cgop-ciel-1 { stop-color: var(--cgop-ciel-1); }
.cgop-ciel-2 { stop-color: var(--cgop-ciel-2); }
.cgop-ciel-3 { stop-color: var(--cgop-ciel-3); }

/* États des lieux : piloté par data-open (la comparaison réutilise la mécanique) */
.cgop-lieu .cgop-apres,
.cgop-lieu .cgop-lueur {
  opacity: 0;
  transition: opacity var(--cgop-lent) ease;
}

.cgop-lieu .cgop-avant {
  transition: opacity var(--cgop-lent) ease;
}

.cgop-lieu[data-open="true"] .cgop-apres { opacity: 1; }
.cgop-lieu[data-open="true"] .cgop-avant { opacity: 0; }
.cgop-lieu[data-open="true"] .cgop-lueur { opacity: 0.42; }

.cgop-lueur,
.cgop-pousse,
.cgop-pop,
.cgop-perso-entree,
.cgop-onde,
.cgop-gouttelette,
.cgop-anim {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.cgop-lueur,
.cgop-onde,
.cgop-gouttelette,
.cgop-anim-halo {
  transform-origin: 50% 50%;
}

/* Réseau d'eau : en attente (pointillés), remplissage, raccordé */
.cgop-conduite-attente {
  transition: opacity var(--cgop-moyen) ease;
}

.cgop-conduite-halo,
.cgop-conduite-gaine,
.cgop-conduite-eau,
.cgop-conduite-reflets {
  opacity: 0;
  transition: opacity var(--cgop-lent) ease;
}

.cgop-conduite:is([data-etat="remplissage"], [data-etat="raccorde"]) .cgop-conduite-attente { opacity: 0; }
.cgop-conduite:is([data-etat="remplissage"], [data-etat="raccorde"]) :is(.cgop-conduite-gaine, .cgop-conduite-eau) { opacity: 1; }
.cgop-conduite:is([data-etat="remplissage"], [data-etat="raccorde"]) .cgop-conduite-halo { opacity: 0.38; }
.cgop-conduite[data-etat="raccorde"] .cgop-conduite-reflets { opacity: 0.9; }
.cgop-conduite[data-etat="remplissage"] :is(.cgop-conduite-gaine, .cgop-conduite-eau, .cgop-conduite-halo) { transition: none; }

.cgop-fleches { display: none; }

.cgop-halo-reservoir {
  opacity: 0;
  transition: opacity 900ms ease;
}

.cgop-infra[data-actif="true"] .cgop-halo-reservoir { opacity: 0.75; }

/* ---- Animations en boucle (pause : bouton, mouvement réduit, hors écran) ---- */
.cgop-anim-nuage { animation: cgop-derive 80s ease-in-out infinite alternate; }
.cgop-nuage-pos:nth-of-type(2n) .cgop-anim-nuage { animation-duration: 110s; animation-delay: -30s; }
.cgop-anim-oiseaux { animation: cgop-vol 30s linear infinite; }
.cgop-anim-halo { animation: cgop-respire 7s ease-in-out infinite alternate; }
.cgop-anim-feuillage { animation: cgop-balance 6.5s ease-in-out infinite alternate; }
.cgop-arbre:nth-child(3n) .cgop-anim-feuillage { animation-duration: 8s; animation-delay: -2s; }
.cgop-anim-vie { animation: cgop-vie 3.4s ease-in-out infinite alternate; }
.cgop-personnage:nth-child(3n) .cgop-anim-vie { animation-duration: 4.1s; animation-delay: -1.3s; }
.cgop-personnage:nth-child(3n + 1) .cgop-anim-vie { animation-duration: 2.9s; animation-delay: -0.6s; }
.cgop-anim-picore { animation: cgop-picore 2.8s ease-in-out infinite; }
/* Les boucles ne tournent que là où elles se voient */
.cgop-conduite[data-etat="raccorde"] .cgop-anim-flux { animation: cgop-flux 1.6s linear infinite; }
.cgop-lieu[data-open="true"] .cgop-gouttes { animation: cgop-goutte 1.4s ease-in infinite; transform-box: fill-box; }
.cgop-scene.is-chorale .cgop-anim-vie { animation: cgop-chorale 1.2s ease-in-out infinite; }

.cgop-app[data-pause="true"] :is(.cgop-anim, .cgop-gouttes, .cgop-repere-onde, .cgop-embleme-onde, .cgop-panneau::before),
.cgop-app[data-suspendu="true"] :is(.cgop-anim, .cgop-gouttes, .cgop-repere-onde, .cgop-embleme-onde) {
  animation-play-state: paused;
}

/* ===========================================================================
   5. BARRE HAUTE — progression, options
   =========================================================================== */
.cgop-barre {
  position: absolute;
  z-index: 30;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) 0.5rem max(0.75rem, env(safe-area-inset-left));
  pointer-events: none;
}

.cgop-barre > * { pointer-events: auto; }

.cgop-progression {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
  padding: 0.3125rem 0.875rem 0.3125rem 0.3125rem;
  border-radius: 999px;
  font: 800 0.9375rem/1 var(--cgop-police-titre);
  font-variant-numeric: tabular-nums;
  color: var(--cgop-encre);
  transition: opacity var(--cgop-moyen) var(--cgop-courbe), transform var(--cgop-moyen) var(--cgop-courbe);
}

.cgop-app[data-ecran="accueil"] .cgop-progression {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
}

.cgop-progression-pictos {
  display: inline-flex;
  gap: 0.25rem;
}

.cgop-badge {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  border-radius: 50%;
  color: var(--cgop-encre-2);
  background: var(--cgop-surface-3);
  border: 1.5px solid var(--cgop-ligne-forte);
  transition: background-color var(--cgop-moyen), color var(--cgop-moyen), border-color var(--cgop-moyen);
}

.cgop-badge .cgop-badge-picto {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.cgop-badge-coche {
  position: absolute;
  inset-block-end: -4px;
  inset-inline-end: -4px;
  inline-size: 1rem;
  block-size: 1rem;
  padding: 2px;
  border-radius: 50%;
  color: var(--cgop-eau-fonce);
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--cgop-eau-fonce);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity var(--cgop-moyen), transform var(--cgop-moyen) var(--cgop-ressort);
}

.cgop-badge.is-ouvert {
  color: #fff;
  background: var(--cgop-eau-fonce);
  border-color: var(--cgop-eau-fonce);
}

.cgop-badge.is-ouvert .cgop-badge-coche {
  opacity: 1;
  transform: none;
}

.cgop-badge.is-neuf { animation: cgop-badge 0.75s var(--cgop-ressort); }
.cgop-progression.is-recap .cgop-badge { animation: cgop-recap 1.3s ease-in-out 2; }
.cgop-progression.is-recap .cgop-badge:nth-child(2) { animation-delay: 0.1s; }
.cgop-progression.is-recap .cgop-badge:nth-child(3) { animation-delay: 0.2s; }
.cgop-progression.is-recap .cgop-badge:nth-child(4) { animation-delay: 0.3s; }

.cgop-options {
  display: flex;
  gap: 0.375rem;
  margin-inline-start: auto;
}

.cgop-bouton-outil {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0 1rem 0 0.75rem;
  border-radius: 999px;
  color: var(--cgop-encre);
  font: 700 0.875rem/1 var(--cgop-police-titre);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--cgop-rapide), scale var(--cgop-rapide) var(--cgop-courbe);
}

.cgop-bouton-outil:hover { background: var(--cgop-surface-2); }
.cgop-bouton-outil:active { scale: 0.95; }
.cgop-bouton-outil[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--cgop-eau-fonce), var(--cgop-ombre); }

/* Très étroit (320 px) : les pictogrammes cochés portent seuls la progression
   (le libellé complet reste le nom accessible du groupe) */
@container cgop (max-width: 360px) {
  .cgop-progression { gap: 0.375rem; padding-inline-end: 0.3125rem; }
  .cgop-progression-texte { display: none; }
  .cgop-badge { inline-size: 1.875rem; block-size: 1.875rem; }
  .cgop-options { gap: 0.25rem; }
}

@container cgop (max-width: 899px) {
  .cgop-bouton-outil { padding: 0; }

  .cgop-bouton-outil .cgop-bouton-libelle {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ===========================================================================
   6. BOUTONS
   =========================================================================== */
.cgop-bouton {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-block-size: 3rem;
  padding: 0.75rem 1.375rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 1.0625rem/1.2 var(--cgop-police-titre);
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--cgop-rapide), border-color var(--cgop-rapide), scale var(--cgop-rapide) var(--cgop-courbe);
}

.cgop-bouton:active { scale: 0.97; }

.cgop-bouton--principal {
  color: var(--cgop-bouton-texte);
  background: var(--cgop-bouton);
  box-shadow: 0 1px 2px rgb(11 110 153 / 0.3), 0 12px 26px -12px rgb(11 110 153 / 0.85);
}

.cgop-bouton--principal:hover { background: var(--cgop-bouton-survol); }

.cgop-bouton--secondaire {
  color: var(--cgop-encre);
  background: var(--cgop-surface-2);
  border-color: var(--cgop-encre-2);
}

.cgop-bouton--secondaire:hover { border-color: var(--cgop-encre); }
.cgop-bouton--secondaire[aria-pressed="true"] { border-color: var(--cgop-eau-fonce); }

.cgop-bouton--discret {
  min-block-size: 2.75rem;
  padding: 0.5rem 1.125rem;
  color: var(--cgop-encre);
  background: transparent;
  border-color: var(--cgop-encre-2);
  font-size: 0.9375rem;
}

.cgop-bouton--discret:hover { background: var(--cgop-surface-3); }

.cgop-bouton--grand {
  min-block-size: 3.5rem;
  padding: 0.875rem 1.75rem;
  font-size: 1.1875rem;
}

.cgop-bouton--large { inline-size: 100%; }

.cgop-bouton-icone {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  transition: translate var(--cgop-rapide) var(--cgop-courbe);
}

.cgop-bouton:hover .cgop-bouton-icone--fin { translate: 3px 0; }

/* ===========================================================================
   7. REPÈRES DES LIEUX (vrais boutons collés à la scène)
   =========================================================================== */
.cgop-reperes {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--cgop-moyen) var(--cgop-courbe), visibility 0s linear var(--cgop-moyen);
}

.cgop-app[data-etape="EXPLORATION"] .cgop-reperes {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--cgop-moyen) var(--cgop-courbe) 120ms, visibility 0s;
}

.cgop-repere {
  appearance: none;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 3rem;
  padding: 0.3125rem 1rem 0.3125rem 0.3125rem;
  border-radius: 999px;
  color: var(--cgop-encre);
  font: 800 0.9375rem/1.1 var(--cgop-police-titre);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: scale var(--cgop-rapide) var(--cgop-courbe), background-color var(--cgop-rapide);
}

.cgop-repere:hover { scale: 1.05; background: var(--cgop-surface-2); }
.cgop-repere:active { scale: 0.97; }

.cgop-repere-pastille {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 2.375rem;
  block-size: 2.375rem;
  border-radius: 50%;
  color: var(--cgop-accent-sur);
  background: var(--cgop-accent);
}

.cgop-repere-picto {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.cgop-repere-coche {
  position: absolute;
  inset-block-end: -3px;
  inset-inline-end: -3px;
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  padding: 2px;
  border-radius: 50%;
  color: var(--cgop-eau-fonce);
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--cgop-eau-fonce);
  opacity: 0;
}

.cgop-repere-onde {
  position: absolute;
  inset-block-start: 0.3125rem;
  inset-inline-start: 0.3125rem;
  inline-size: 2.375rem;
  block-size: 2.375rem;
  border-radius: 50%;
  border: 2px solid var(--cgop-accent);
  pointer-events: none;
  animation: cgop-pulsation 2.4s var(--cgop-courbe) infinite;
}

.cgop-repere.is-ouvert .cgop-repere-pastille {
  color: #fff;
  background: var(--cgop-eau-fonce);
}

.cgop-repere.is-ouvert .cgop-repere-coche { opacity: 1; }
.cgop-repere.is-ouvert .cgop-repere-onde,
.cgop-app:not([data-etape="EXPLORATION"]) .cgop-repere-onde { display: none; }

@container cgop (max-width: 420px) {
  .cgop-repere {
    min-block-size: 2.75rem;
    padding-inline-end: 0.75rem;
    font-size: 0.875rem;
  }

  .cgop-repere-pastille {
    inline-size: 2.125rem;
    block-size: 2.125rem;
  }

  .cgop-repere-onde {
    inline-size: 2.125rem;
    block-size: 2.125rem;
  }
}

/* Étiquette « Réseau d'eau » (au premier raccordement) */
.cgop-etiquette {
  position: absolute;
  z-index: 11;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem 0.375rem 0.5rem;
  border-radius: 999px;
  color: var(--cgop-eau-texte);
  font: 800 0.8125rem/1 var(--cgop-police-titre);
  white-space: nowrap;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 450ms ease, visibility 0s linear 450ms;
}

.cgop-etiquette .cgop-picto {
  inline-size: 1rem;
  block-size: 1rem;
}

.cgop-app[data-reseau="true"]:not([data-ecran="accueil"], [data-comparaison="true"]) .cgop-etiquette {
  visibility: visible;
  opacity: 1;
  transition: opacity 450ms ease;
}

/* Consigne discrète et persistante (§3.1) */
.cgop-consigne {
  position: absolute;
  z-index: 20;
  inset-block-start: calc(var(--cgop-barre-h) + env(safe-area-inset-top, 0px));
  inset-inline: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  inline-size: max-content;
  max-inline-size: calc(100% - 1.5rem);
  margin-inline: auto;
  padding: 0.625rem 1.125rem 0.625rem 0.875rem;
  border-radius: 1.375rem;
  font: 700 0.9375rem/1.3 var(--cgop-police-titre);
  pointer-events: none;
  transition: opacity var(--cgop-moyen) var(--cgop-courbe), translate var(--cgop-moyen) var(--cgop-courbe);
}

.cgop-consigne-picto {
  color: var(--cgop-eau-texte);
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.cgop-app:not([data-etape="EXPLORATION"]) .cgop-consigne {
  visibility: hidden;
  opacity: 0;
  translate: 0 -6px;
}

/* ===========================================================================
   8. ACCUEIL — carte éditoriale sur la scène vivante
   =========================================================================== */
.cgop-accueil {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--cgop-barre-h) 0.875rem max(0.875rem, env(safe-area-inset-bottom));
  pointer-events: none;
}

.cgop-accueil-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  inline-size: min(100%, 34rem);
  padding: 1.5rem 1.375rem 1.25rem;
  border-radius: var(--cgop-r-xl);
  text-align: center;
  box-shadow: var(--cgop-ombre-haute);
  pointer-events: auto;
}

.cgop-embleme {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 34% 28%, #a8e8ff 0%, #1e9bd7 52%, #0b6e99 100%);
  box-shadow: 0 10px 22px -10px rgb(11 110 153 / 0.9);
}

.cgop-embleme-goutte {
  position: relative;
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

.cgop-embleme-onde {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--cgop-eau);
  animation: cgop-onde 3s var(--cgop-courbe) infinite;
}

.cgop-embleme-onde + .cgop-embleme-onde { animation-delay: 1.5s; }

.cgop-embleme::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--cgop-eau-clair);
  opacity: 0;
  pointer-events: none;
}

.cgop-accueil-titre {
  font: 800 clamp(2rem, 6.4cqi, 3.5rem)/1.02 var(--cgop-police-titre);
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--cgop-encre);
}

.cgop-mot { display: inline-block; }

.cgop-accueil-sous-titre {
  max-inline-size: 30ch;
  font-size: clamp(1.0625rem, 2.6cqi, 1.3125rem);
  line-height: 1.45;
  color: var(--cgop-encre);
  text-wrap: pretty;
}

.cgop-accueil .cgop-bouton { margin-block-start: 0.375rem; }

.cgop-accueil-note {
  font-size: 0.875rem;
  color: var(--cgop-encre-2);
}

/* Intro « signature » : la goutte tombe, l'onde s'élargit, le titre se lève */
.cgop-app.is-intro .cgop-embleme { animation: cgop-chute 0.9s var(--cgop-ressort) both; }
.cgop-app.is-intro .cgop-embleme::after { animation: cgop-grande-onde 1.8s 0.55s var(--cgop-courbe) both; }
.cgop-app.is-intro .cgop-mot { animation: cgop-mot 0.8s var(--cgop-courbe) both; animation-delay: calc(var(--i) * 70ms + 300ms); }
.cgop-app.is-intro .cgop-accueil-sous-titre { animation: cgop-revele 0.8s 0.75s var(--cgop-courbe) both; }
.cgop-app.is-intro .cgop-accueil .cgop-bouton { animation: cgop-revele 0.8s 0.95s var(--cgop-ressort) both; }
.cgop-app.is-intro .cgop-accueil-note { animation: cgop-revele 0.8s 1.1s var(--cgop-courbe) both; }

/* ===========================================================================
   9. PANNEAU — feuille basse (portrait), latéral (paysage)
   =========================================================================== */
.cgop-panneau {
  position: absolute;
  z-index: 28;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-block-size: min(48%, 27rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 1.25rem max(1.125rem, env(safe-area-inset-bottom));
  border-width: 1px 0 0;
  border-radius: var(--cgop-r-xl) var(--cgop-r-xl) 0 0;
  box-shadow: 0 -14px 40px -18px rgb(32 27 21 / 0.4);
  animation: cgop-feuille 380ms var(--cgop-courbe) both;
}

/* Filet orange en tête, aligné sur le texte : écho des intertitres du site
   (et non une poignée centrée : la feuille ne se glisse pas) */
.cgop-panneau::after {
  content: "";
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 1.25rem;
  inline-size: 2.75rem;
  block-size: 4px;
  border-radius: 999px;
  background: var(--cgop-accent);
}

/* Pendant l'arrivée de l'eau : un filet d'eau parcourt le haut du panneau */
.cgop-panneau[data-phase="activation"]::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, transparent, var(--cgop-eau) 40%, var(--cgop-eau-clair) 50%, transparent 60%);
  animation: cgop-ruisseau 1.4s linear infinite;
}

.cgop-panneau-lieu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
  font: 800 0.75rem/1.2 var(--cgop-police-titre);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cgop-accent-texte);
}

.cgop-panneau-lieu-picto {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.cgop-panneau-titre {
  font: 800 clamp(1.375rem, 4.2cqi, 2rem)/1.12 var(--cgop-police-titre);
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--cgop-encre);
}

.cgop-panneau-texte {
  max-inline-size: 60ch;
  font-size: clamp(1rem, 2.8cqi, 1.125rem);
  line-height: 1.55;
  color: var(--cgop-encre);
  text-wrap: pretty;
}

.cgop-panneau-fait {
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  border-inline-start: 3px solid var(--cgop-accent);
  border-radius: var(--cgop-r-s);
  background: var(--cgop-surface-3);
}

.cgop-panneau-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-block-start: 0.375rem;
}

.cgop-panneau[data-phase="resultat"] .cgop-panneau-titre { animation: cgop-revele 0.6s var(--cgop-courbe) both; }
.cgop-panneau[data-phase="resultat"] .cgop-panneau-texte { animation: cgop-revele 0.6s 0.12s var(--cgop-courbe) both; }

@container cgop (min-width: 600px) and (min-aspect-ratio: 5 / 4) {
  .cgop-panneau {
    inset-block: calc(var(--cgop-barre-h) + 0.25rem) 0.875rem;
    inset-inline: auto 0.875rem;
    inline-size: min(26rem, 40%);
    block-size: fit-content;
    max-block-size: calc(100% - var(--cgop-barre-h) - 1.125rem);
    margin-block: auto;
    gap: 0.75rem;
    padding: 2rem 1.75rem;
    border-width: 1px;
    border-radius: var(--cgop-r-xl);
    box-shadow: var(--cgop-ombre-haute);
    animation-name: cgop-lateral;
  }

  .cgop-panneau::after {
    inset-block-start: auto;
    inset-inline-start: auto;
    position: static;
    order: -1;
    margin: 0;
  }
}

@container cgop (max-height: 640px) {
  .cgop-panneau { padding-block-start: 1rem; gap: 0.375rem; }
  .cgop-panneau-titre { font-size: clamp(1.25rem, 5.4cqb, 1.625rem); }
  .cgop-panneau-texte { font-size: 1rem; line-height: 1.45; }
  .cgop-panneau .cgop-bouton { min-block-size: 2.875rem; }
}

/* ===========================================================================
   10. FINALE — récapitulatif, messages en fondu, comparaison
   =========================================================================== */
.cgop-finale {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--cgop-barre-h) 0.75rem max(0.75rem, env(safe-area-inset-bottom));
  pointer-events: none;
}

.cgop-finale-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  inline-size: min(100%, 36rem);
  max-block-size: min(100%, max(62%, 22rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.375rem 1.25rem 1.125rem;
  border-radius: var(--cgop-r-xl);
  text-align: center;
  box-shadow: var(--cgop-ombre-haute);
  pointer-events: auto;
  animation: cgop-carte 0.7s var(--cgop-courbe) both;
  transition: opacity var(--cgop-moyen) var(--cgop-courbe), translate var(--cgop-moyen) var(--cgop-courbe), visibility 0s;
}

/* Premier temps de la finale : le village entier s'anime, la carte attend */
.cgop-finale.is-attente .cgop-finale-carte {
  visibility: hidden;
  animation: none;
}

.cgop-finale.is-comparaison .cgop-finale-carte {
  visibility: hidden;
  opacity: 0;
  translate: 0 18px;
  transition: opacity var(--cgop-moyen) var(--cgop-courbe), translate var(--cgop-moyen) var(--cgop-courbe), visibility 0s linear var(--cgop-moyen);
}

.cgop-finale-recap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem;
}

.cgop-finale-puce {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem 0.375rem 0.5rem;
  border-radius: 999px;
  color: #fff;
  background: var(--cgop-eau-fonce);
  font: 800 0.875rem/1 var(--cgop-police-titre);
  animation: cgop-puce 0.55s var(--cgop-ressort) both;
  animation-delay: calc(var(--i) * 140ms + 250ms);
}

.cgop-finale-puce .cgop-picto {
  inline-size: 1rem;
  block-size: 1rem;
}

.cgop-finale-message {
  max-inline-size: 44ch;
  font-size: clamp(1.125rem, 2.6cqi, 1.25rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.cgop-finale-cle {
  font: 800 clamp(1.75rem, 5.4cqi, 2.875rem)/1.05 var(--cgop-police-titre);
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--cgop-encre);
}

.cgop-finale-cle::after {
  content: "";
  display: block;
  inline-size: 3.5rem;
  block-size: 5px;
  margin: 0.625rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cgop-eau-fonce), var(--cgop-eau), var(--cgop-eau-clair));
}

.cgop-revele {
  animation: cgop-revele 0.8s var(--cgop-courbe) both;
  animation-delay: calc(var(--etape) * 900ms + 300ms);
}

.cgop-finale-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.cgop-finale-transparence {
  max-inline-size: 64ch;
  padding-block-start: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cgop-encre-2);
  border-block-start: 1px solid var(--cgop-ligne);
}

.cgop-logo {
  inline-size: auto;
  block-size: auto;
  max-inline-size: 120px;
  max-block-size: 40px;
  object-fit: contain;
}

@container cgop (min-width: 760px) and (min-aspect-ratio: 5 / 4) {
  .cgop-accueil,
  .cgop-finale {
    align-items: center;
    justify-content: flex-start;
    padding: calc(var(--cgop-barre-h) + 0.5rem) 2.25rem 2rem;
  }

  .cgop-accueil-carte {
    align-items: flex-start;
    inline-size: min(44%, 31rem);
    padding: 2.25rem 2.25rem 2rem;
    text-align: start;
  }

  .cgop-finale-carte {
    align-items: flex-start;
    inline-size: min(48%, 34rem);
    max-block-size: 100%;
    padding: 2rem 2rem 1.5rem;
    text-align: start;
  }

  .cgop-finale-recap,
  .cgop-finale-actions { justify-content: flex-start; }

  .cgop-finale-cle::after { margin-inline: 0; }
}

@container cgop (max-height: 560px) {
  .cgop-accueil-titre { font-size: clamp(1.625rem, 8cqb, 2.5rem); }
  .cgop-accueil-carte { gap: 0.5rem; padding-block: 1.125rem; }
  .cgop-embleme { inline-size: 2.75rem; block-size: 2.75rem; }
  .cgop-finale-cle { font-size: clamp(1.5rem, 7cqb, 2.125rem); }
}

/* Petits écrans : carte finale plus compacte, le village reste visible au-dessus */
@container cgop (max-width: 480px) {
  .cgop-finale-carte {
    gap: 0.625rem;
    max-block-size: min(100%, max(74%, 24rem));
    padding: 1.125rem 1rem 1rem;
  }

  .cgop-finale-recap { gap: 0.3125rem; }

  .cgop-finale-puce {
    gap: 0.25rem;
    padding: 0.3125rem 0.5rem 0.3125rem 0.4375rem;
    font-size: 0.75rem;
  }

  .cgop-finale-puce .cgop-picto {
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }

  .cgop-finale-message { font-size: 1.125rem; line-height: 1.4; }
  .cgop-finale-cle { font-size: 1.625rem; }
  .cgop-finale-actions .cgop-bouton { min-block-size: 2.875rem; padding: 0.625rem 1.125rem; font-size: 1rem; }
}

/* Barre de comparaison (la carte s'efface pour laisser voir l'état initial) */
.cgop-comparaison {
  position: absolute;
  z-index: 26;
  inset-inline: 0;
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  inline-size: max-content;
  max-inline-size: calc(100% - 1.5rem);
  margin-inline: auto;
  padding: 0.5rem;
  border-radius: 999px;
  animation: cgop-revele 0.4s var(--cgop-courbe) both;
}

.cgop-comparaison-pastille {
  padding: 0.5rem 0.875rem;
  font: 800 0.8125rem/1 var(--cgop-police-titre);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cgop-encre);
  border-radius: 999px;
  background: var(--cgop-surface-3);
}

/* ===========================================================================
   11. PLEIN ÉCRAN (petits écrans) et REPRISE
   =========================================================================== */
/* Le cadre s'étire par ses bords (inset: 0, tailles automatiques) et non par
   100dvh : le réglage A−/A+ du site applique un zoom à <main>, qui multiplie
   les unités de fenêtre ; ainsi l'écran entier reste couvert, et le texte du
   jeu suit l'agrandissement choisi. */
.cgop-immersif {
  position: fixed;
  inset: 0;
  inline-size: auto;
  block-size: auto;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--cgop-surface);
}

.cgop-immersif::backdrop { background: var(--cgop-voile); }

.cgop-reprise {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: linear-gradient(180deg, transparent 30%, rgb(23 16 9 / 0.35));
}

.cgop-app[data-compact="true"] :is(.cgop-barre, .cgop-reperes, .cgop-consigne, .cgop-panneau, .cgop-finale, .cgop-comparaison, .cgop-etiquette) {
  display: none;
}

/* ===========================================================================
   12. « À PROPOS » (feuille modale native)
   =========================================================================== */
.cgop-a-propos {
  inline-size: min(36rem, calc(100% - 2rem));
  max-block-size: calc(100% - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--cgop-verre-bord);
  border-radius: var(--cgop-r-xl);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--cgop-surface-2);
  box-shadow: var(--cgop-ombre-haute);
}

.cgop-a-propos::backdrop {
  background: var(--cgop-voile);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.cgop-a-propos-carte {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.75rem;
}

.cgop-a-propos-titre {
  padding-block-start: 0.75rem;
  font: 800 1.5rem/1.15 var(--cgop-police-titre);
  letter-spacing: -0.02em;
  border-block-start: 3px solid var(--cgop-accent);
}

.cgop-a-propos-carte p {
  font-size: 1.0625rem;
  line-height: 1.6;
}

.cgop-a-propos-transparence { color: var(--cgop-encre-2); }
.cgop-a-propos-carte .cgop-bouton { align-self: flex-start; margin-block-start: 0.25rem; }

/* ===========================================================================
   13. IMAGES CLÉS
   =========================================================================== */
@keyframes cgop-derive { from { transform: translateX(-36px); } to { transform: translateX(48px); } }
@keyframes cgop-vol {
  0% { transform: translate(-260px, 24px); opacity: 0; }
  6% { opacity: 0.9; }
  46% { transform: translate(300px, -22px); opacity: 0.9; }
  54%, 100% { transform: translate(360px, -28px); opacity: 0; }
}
@keyframes cgop-respire { from { transform: scale(0.94); opacity: 0.85; } to { transform: scale(1.06); opacity: 1; } }
@keyframes cgop-balance { from { transform: rotate(-1.3deg); } to { transform: rotate(1.3deg); } }
@keyframes cgop-vie { from { transform: translateY(0); } to { transform: translateY(-1.2px); } }
@keyframes cgop-chorale { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes cgop-picore { 0%, 55%, 100% { transform: rotate(0); } 65%, 82% { transform: rotate(16deg); } }
@keyframes cgop-flux { to { stroke-dashoffset: -30; } }
@keyframes cgop-goutte { 0% { transform: translateY(-2px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
@keyframes cgop-pulsation { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes cgop-onde { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes cgop-chute { 0% { transform: translateY(-46px) scale(0.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes cgop-grande-onde { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(9); opacity: 0; } }
@keyframes cgop-mot { from { transform: translateY(0.45em); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cgop-revele { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cgop-feuille { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cgop-lateral { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cgop-carte { from { transform: translateY(24px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cgop-puce { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cgop-badge { 0% { transform: scale(0.6); } 60% { transform: scale(1.18); } 100% { transform: none; } }
@keyframes cgop-recap { 0%, 100% { transform: none; box-shadow: 0 0 0 0 rgb(30 155 215 / 0); } 50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgb(30 155 215 / 0.28); } }
@keyframes cgop-ruisseau { from { transform: translateX(-60%); } to { transform: translateX(60%); } }

/* ===========================================================================
   14. PRÉFÉRENCES — mouvement réduit, contraste, transparence, couleurs forcées
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :is(.cgop-app, .cgop-a-propos) *,
  :is(.cgop-app, .cgop-a-propos) *::before,
  :is(.cgop-app, .cgop-a-propos) *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .cgop-anim,
  .cgop-gouttes,
  .cgop-repere-onde,
  .cgop-embleme-onde,
  .cgop-panneau::before {
    animation: none !important;
  }

  /* Tracé de l'eau statique : pointillés + flèches (§8) */
  .cgop-conduite[data-etat="raccorde"] .cgop-conduite-eau { stroke-dasharray: 10 7; }
  .cgop-conduite[data-etat="raccorde"] .cgop-fleches { display: inline; }
  .cgop-conduite-reflets { display: none; }
}

@media (prefers-contrast: more) {
  :host {
    --cgop-verre: var(--cgop-surface-2);
    --cgop-verre-bord: var(--cgop-encre);
    --cgop-encre-2: var(--cgop-encre);
    --cgop-ligne-forte: var(--cgop-encre);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :host { --cgop-verre: var(--cgop-surface-2); }
}

@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .cgop-progression,
  .cgop-bouton-outil,
  .cgop-repere,
  .cgop-consigne,
  .cgop-etiquette,
  .cgop-accueil-carte,
  .cgop-panneau,
  .cgop-finale-carte,
  .cgop-comparaison {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .cgop-progression,
  .cgop-bouton,
  .cgop-bouton-outil,
  .cgop-repere,
  .cgop-consigne,
  .cgop-accueil-carte,
  .cgop-panneau,
  .cgop-finale-carte,
  .cgop-comparaison,
  .cgop-a-propos {
    border: 2px solid CanvasText;
  }

  .cgop-bouton--principal,
  .cgop-repere-pastille,
  .cgop-finale-puce {
    color: ButtonText;
    background: ButtonFace;
  }

  .cgop-badge.is-ouvert,
  .cgop-repere.is-ouvert .cgop-repere-pastille {
    color: HighlightText;
    background: Highlight;
  }

  :is(.cgop-app, .cgop-a-propos) :is(button, a, [tabindex]):focus-visible {
    outline-color: Highlight;
  }
}