/* ==========================================================================================
   Eye Five 2026 — carrousels des symboles (choix de Maxime du 24/09/2026, maquette
   43-carrousel-symboles) : « Iris » (cadran, accueil) et « Oracle » (éventail, page Les symboles).
   Chargée sur ces deux pages seulement (inc/carrousel-symboles.php).
   Charte : aplats bordeaux / crème, aucun dégradé, aucune ombre sur les signes, jamais
   d'opacité sur une couleur de marque (les teintes secondaires sont des mélanges pleins).
   ========================================================================================== */

.cx {
  --creme-doux: color-mix(in srgb, var(--creme) 52%, var(--bordeaux));
  --creme-voile: color-mix(in srgb, var(--creme) 24%, var(--bordeaux));
  --bordeaux-doux: color-mix(in srgb, var(--bordeaux) 30%, var(--creme));
  --bordeaux-fonce: color-mix(in srgb, var(--bordeaux) 82%, var(--charbon));
  overflow-x: clip;
  position: relative;
}
.cx a:hover { color: inherit; }
/* L'en-tête de bande du thème reste sur deux colonnes étroites au téléphone : empilé ici. */
@media (max-width: 799px) { .cx .section__entete { flex-direction: column; gap: 1rem; } }

/* Commandes communes : flèches rondes, lecture / pause, lien-bouton. */
.cx-commandes { display: flex; align-items: center; gap: 0.5rem; }
.cx-fleche {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--creme-doux); color: var(--creme);
  font-size: 1.05rem; line-height: 1;
  transition: background-color .3s var(--courbe), color .3s var(--courbe), border-color .3s var(--courbe);
}
.cx-fleche:hover { background: var(--creme); color: var(--bordeaux); border-color: var(--creme); }
.cx-lecture, .cx-lien {
  font-size: var(--t-12); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--creme); padding: 0.9rem 0.6rem; min-height: 44px;
  text-decoration: underline; text-decoration-color: var(--creme-doux); text-underline-offset: 0.45em;
}
.cx-lecture:hover, .cx-lien:hover { text-decoration-color: var(--creme); }
.cx :focus-visible { outline: 2px solid var(--creme); outline-offset: 4px; }

/* Symbole fixe (copie du sprite) et symbole animé (contrôleur du thème). */
.cx-glyphe { display: block; width: 100%; height: 100%; overflow: visible; }
.cx .ef-motion { width: 100%; height: 100%; }
.cx .ef-motion__svg { width: 100%; height: 100%; }
.cx .ef-motion__controls { display: none; }
.cx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Changement de fiche : le texte sort puis revient. */
[data-fiche] > * { transition: opacity .35s var(--courbe), transform .45s var(--courbe); }
[data-fiche].est-changeant > * { opacity: 0; transform: translateY(8px); }
[data-fiche].est-changeant > *:nth-child(2) { transition-delay: 40ms; }
[data-fiche].est-changeant > *:nth-child(3) { transition-delay: 80ms; }

/* ==========================================================================================
   A — IRIS : couronne des 40 symboles (radiaux), graduations, familles gravées sur l'arc,
   pupille fixe où le symbole élu se dessine. Le repère est à midi.
   ========================================================================================== */

.cx-a__grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "tete cadran" "fiche cadran" "pied cadran";
  grid-template-rows: auto 1fr auto;
  column-gap: var(--gouttiere);
}
.cx-a__tete { grid-area: tete; }
.cx-a__fiche { grid-area: fiche; align-self: center; padding: 2.5rem 0; }
.cx-a__pied { grid-area: pied; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }

.cx-a__rang { font-size: var(--t-12); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.cx-a__sur { color: var(--creme-doux); }
.cx-a__famille { margin-left: 1.2em; padding-left: 1.2em; border-left: 1px solid var(--creme-doux); }
.cx-a__nom { font-size: clamp(2.6rem, 1.2rem + 4.4vw, 5.25rem); line-height: 0.95; margin: 0 0 1.25rem; }
.cx-a__nom a { text-decoration: none; }
.cx-a__sens { font-size: var(--t-24); line-height: 1.35; max-width: 26ch; margin: 0 0 1.75rem; }
.cx-a__porte { font-size: var(--t-14); color: var(--creme-doux); margin: 0; }
.cx-a__porte a { color: var(--creme); text-decoration-color: var(--creme-doux); }
.cx-a__porte [data-ref] { margin-left: 0.35em; letter-spacing: 0.06em; }

.cx-a__cadran {
  --taille: min(100%, 680px, 80svh);
  grid-area: cadran; justify-self: end; align-self: center;
  position: relative; width: var(--taille); aspect-ratio: 1;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  container-type: inline-size;
}
.cx-a__cadran.est-saisi { cursor: grabbing; }
.cx-a__cadran:focus-visible { outline-offset: -8px; border-radius: 50%; }
.cx-a__couronne { position: absolute; inset: 0; will-change: transform; }
.cx-a__gravure, .cx-a__fixe { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.cx-a__gravure .cx-a__graduation { stroke: var(--creme-doux); stroke-width: 1.2; }
.cx-a__gravure .cx-a__graduation--forte { stroke: var(--creme-doux); stroke-width: 1.6; }
.cx-a__gravure .cx-a__borne { stroke: var(--creme); stroke-width: 1.4; }
.cx-a__gravure .cx-a__cercle { fill: none; stroke: var(--creme-voile); stroke-width: 1.2; }
.cx-a__gravure text {
  fill: var(--creme-doux); font-family: var(--font-texte); font-size: 17px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  transition: fill .5s var(--courbe);
}
.cx-a__gravure text.est-active { fill: var(--creme); }
.cx-a__trait { fill: none; stroke: var(--creme); stroke-width: 1.3; }
.cx-a__trait--fin { stroke: var(--creme-doux); stroke-width: 1; }
.cx-a__aiguille { stroke: var(--creme); stroke-width: 1.3; }
.cx-a__repere { fill: var(--creme); }

/* Les signes de la couronne : posés à midi puis tournés autour du centre (radiaux). */
.cx-a__signe {
  --s: 6.6cqi;
  position: absolute; left: 50%; top: 50%;
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2);
  padding: 0; color: var(--creme-doux);
  transform: rotate(var(--a)) translateY(-43.6cqi);
  transition: color .45s var(--courbe);
}
.cx-a__signe > .cx-glyphe { transition: transform .45s var(--courbe); }
.cx-a__signe:hover { color: var(--creme); }
.cx-a__signe.est-actif { color: var(--creme); }
.cx-a__signe.est-actif > .cx-glyphe { transform: scale(1.28); }

/* La pupille : le symbole se dessine, puis s'efface devant la monture sur un disque gris photo qui
   s'ouvre du centre jusqu'au trait intérieur (retour de Maxime du 24/09/2026). */
.cx-a__pupille {
  position: absolute; left: 50%; top: 50%; width: 52.8%; aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%; color: var(--creme); pointer-events: none;
}
.cx-a__disque { position: absolute; inset: 0; border-radius: 50%; background: var(--gris-photo); scale: 0; transition: scale .9s var(--courbe); }
.cx-a__symbole { position: absolute; inset: 15.9%; transition: opacity .45s var(--courbe), scale .6s var(--courbe); }
.cx-a__symbole > * { position: absolute; inset: 0; transition: opacity .35s var(--courbe), scale .5s var(--courbe); }
.cx-a__symbole > .est-sortant { opacity: 0; scale: .92; }
/* Monture agrandie (retour de Maxime du 25/09/2026) : les vues de face sont des PNG transparents
   800 × 452 où la monture occupe 72 à 86 % de la largeur ; à 109cqi elle couvre ≈ 85 % du disque
   (94 % au plus), contre 64 % avant. Nom du modèle en Almeria, posé en bas du disque. */
.cx-a__produit {
  position: absolute; inset: 0;
  color: var(--charbon); opacity: 0; translate: 0 5%;
  transition: opacity .5s var(--courbe), translate .8s var(--courbe);
}
.cx-a__produit img { position: absolute; left: 50%; top: 47%; width: 109cqi; max-width: none; height: auto; translate: -50% -50%; }
.cx-a__produit-legende {
  position: absolute; left: 12%; right: 12%; bottom: 15%; text-align: center;
  font-family: var(--font-titre); font-size: 6cqi; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase;
}
.cx-a__produit-legende::after { content: '\00a0→'; font-family: var(--font-texte); font-size: 0.8em; }
.cx-a__pupille.est-produit { pointer-events: auto; cursor: pointer; }
.cx-a__pupille.est-produit .cx-a__disque { scale: 1; }
.cx-a__pupille.est-produit .cx-a__symbole { opacity: 0; scale: .86; }
.cx-a__pupille.est-produit .cx-a__produit { opacity: 1; translate: 0 0; transition-delay: .3s; }
.cx-a__pupille { container-type: inline-size; }

/* Deux roues au choix : Optiques / Solaires (curseur crème qui glisse, Switzer seulement). */
.cx-a__roues {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  margin-top: 1.75rem; padding: 4px; border: 1px solid var(--creme-doux); border-radius: 999px;
}
.cx-a__roue {
  position: relative; z-index: 1; min-height: 44px; padding: 0.75rem 1.35rem; border-radius: 999px;
  font-size: var(--t-12); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--creme); transition: color .45s var(--courbe);
}
.cx-a__roue-nb { margin-left: 0.3em; font-variant-numeric: tabular-nums; color: var(--creme-doux); transition: color .45s var(--courbe); }
.cx-a__roue[aria-pressed="true"] { color: var(--bordeaux); }
/* 72 % de bordeaux sur le curseur crème : 5,5:1 (à 30 %, 1,9:1 — illisible, PageSpeed du 01/10/2026). */
.cx-a__roue[aria-pressed="true"] .cx-a__roue-nb { color: color-mix(in srgb, var(--bordeaux) 72%, var(--creme)); }
.cx-a__roue-curseur {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--creme); transition: translate .5s var(--courbe);
}
.cx-a[data-roue="solaires"] .cx-a__roue-curseur { translate: 100% 0; }
.cx-a__couronne { transition: opacity .3s var(--courbe); }
.cx-a__couronne.est-changement { opacity: 0; }

@media (max-width: 899px) {
  .cx-a__grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "cadran" "fiche" "pied"; grid-template-rows: none; }
  .cx-a__cadran { --taille: 138vw; justify-self: start; margin: 1.5rem 0 0 calc((100% - 138vw) / 2); }
  .cx-a__fiche { padding: 1.5rem 0 2rem; }
  .cx-a__sens { font-size: var(--t-18); }
}

/* Sans JavaScript : la liste des symboles en liens (Iris) ; Oracle est masqué, la grille des 149 suit. */
.cx-repli { grid-area: cadran; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 1.5rem 1rem; align-self: center; }
.cx-repli a { display: grid; justify-items: center; gap: 0.6rem; text-decoration: none; color: var(--creme); text-align: center; font-family: var(--font-titre); text-transform: uppercase; font-size: var(--t-14); }
.cx-repli .cx-glyphe { width: 64px; height: 64px; }
html.js .cx-repli { display: none; }
html:not(.js) .cx-a__cadran, html:not(.js) .cx-commandes, html:not(.js) .cx-c { display: none; }

/* ==========================================================================================
   C — ORACLE : éventail de cartes crème tenues autour d'un pivot sous la table. La carte du
   centre se lève, son symbole se dessine ; retournée, elle montre la monture qui le porte.
   ========================================================================================== */

.cx-c__table {
  --cw: clamp(140px, min(15vw, 25svh), 210px);
  --ch: calc(var(--cw) * 1.5);
  position: relative; height: calc(var(--ch) * 1.74);
  margin-top: 1rem; overflow: hidden;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.cx-c__table.est-saisi { cursor: grabbing; }
.cx-c__table:focus-visible { outline-offset: -4px; }
.cx-c__eventail { position: absolute; left: 50%; top: calc(var(--ch) * 0.34); width: 0; height: 0; }

.cx-c__carte {
  --prof: 0;
  --c-face: color-mix(in srgb, var(--creme) calc(100% - var(--prof) * 7%), var(--bordeaux));
  --c-trait: var(--bordeaux-doux);
  --c-bord: var(--bordeaux-fonce);
  position: absolute; left: calc(var(--cw) / -2); top: 0;
  width: var(--cw); height: var(--ch);
  transform-origin: 50% 330%;
  perspective: 900px;
  transition: visibility 0s;
}
.cx-c__carte.est-loin { visibility: hidden; }
.cx-c__corps {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.3,.7,.2,1);
}
.cx-c__carte.est-retournee .cx-c__corps { transform: rotateY(180deg); }
.cx-c__face, .cx-c__dos {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 10px; overflow: hidden;
}
.cx-c__face {
  display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center;
  padding: 1.1rem 0.8rem 1rem;
  background: var(--c-face);
  color: var(--bordeaux);
  border: 1px solid var(--c-bord);
}
.cx-c__face::before {
  content: ''; position: absolute; inset: 7px; border: 1px solid var(--c-trait); border-radius: 6px; pointer-events: none;
}
.cx-c__romain { font-family: var(--font-titre); font-size: var(--t-14); letter-spacing: 0.12em; }
.cx-c__signe { align-self: center; width: 64%; aspect-ratio: 1; }
.cx-c__carte-nom { font-family: var(--font-titre); text-transform: uppercase; font-size: clamp(0.95rem, 0.7rem + 0.6vw, 1.2rem); line-height: 1.05; text-align: center; }
.cx-c__carte-famille { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 0.35rem; color: var(--c-trait); }
.cx-c__dos { transform: rotateY(180deg); background: var(--bordeaux-fonce); border: 1px solid var(--creme-doux); display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.cx-c__dos img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.cx-c__dos img.cx-c__dos-face { object-fit: contain; padding: 0 1rem; background: var(--c-face); }
.cx-c__dos-texte { background: var(--creme); color: var(--bordeaux); padding: 0.7rem 0.8rem 0.8rem; text-align: center; }
.cx-c__dos-texte span { display: block; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.cx-c__dos-texte a { font-family: var(--font-titre); text-transform: uppercase; font-size: var(--t-18); text-decoration: none; }
.cx-c__dos-texte a::after { content: '\00a0→'; }

.cx-c__pied { display: grid; justify-items: center; text-align: center; gap: 1.25rem; margin-top: 0.5rem; }
.cx-c__rang { font-size: var(--t-12); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.6rem; }
.cx-c__nom { font-size: clamp(2.2rem, 1.2rem + 3vw, 3.75rem); line-height: 0.95; margin: 0 0 0.9rem; }
.cx-c__nom a { text-decoration: none; }
.cx-c__sens { font-size: var(--t-18); max-width: 40ch; margin: 0 auto; }
.cx-c__actions { display: flex; align-items: center; gap: 0.75rem; }
.cx-tirer {
  font-size: var(--t-12); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--bordeaux); background: var(--creme); border: 1px solid var(--creme);
  border-radius: 999px; padding: 1.05rem 1.7rem; min-height: 3rem;
  transition: background-color .3s var(--courbe), color .3s var(--courbe);
}
.cx-tirer:hover { background: var(--bordeaux); color: var(--creme); }
.cx-tirer[disabled] { cursor: progress; }
.cx-c__retourner { margin: 0; }

@media (max-width: 799px) {
  .cx-c__table { --cw: 42vw; height: calc(var(--ch) * 1.62); }
}


/* Page Les symboles : l'éventail entre l'en-tête et la grille des 149. */
.collection .cx-c { margin: 0 0 var(--section); }
.collection__grille-entete { margin-top: 0; }

/* ==========================================================================================
   Mouvement réduit : ni rotation automatique, ni défilement, ni retournement animé.
   ========================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cx *, .cx *::before { transition-duration: 0s !important; }
}