/* Icosa · page « Les cerveaux ». Même charte Monolithe que l'accueil (variables et composants de styles.css) :
   blanc cassé pour le métier prérempli par Icosa, ambre pour les faces de la personne et de son entreprise. */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* ------------------------------------------------------------------ haut de page : texte à gauche, le cerveau à droite (comme l'accueil) */
.cv-choix { display: flex; flex-wrap: wrap; gap: 14px; }
.cv-cerveau { display: inline-flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 20px 10px 12px;
  border: 1.5px solid var(--blanc); color: var(--blanc); transition: background .2s, color .2s; }
a.cv-cerveau:hover { background: rgba(244,244,242,.07); }
.cv-cerveau.off { border-color: var(--trait); color: var(--fumee); cursor: not-allowed; }
.cv-ico { width: 38px; height: 38px; flex: none; }
.cv-nom { font: 500 13px/1.15 var(--titre); letter-spacing: .08em; text-transform: uppercase; }
.cv-nom small { display: block; margin-top: 6px; font: 500 12px/1 var(--corps); letter-spacing: .04em; text-transform: none; color: var(--fumee); }
.cv-fleche { font: 500 16px/1 var(--titre); margin-left: 6px; }
.cv-cerveau .bientot { font: 600 10px/1 var(--corps); letter-spacing: .2em; color: var(--fond); background: var(--fumee); padding: 5px 7px; margin-left: 6px; }
.cv-grand { max-width: 470px; }

/* ------------------------------------------------------------------ la carte */
.cv-carte { padding-top: clamp(24px, 4vw, 56px); }
.cv-grille { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.cv-grille > *, .cv-cote > * { min-width: 0; }
.cv-ecran { position: relative; aspect-ratio: 1 / 1; width: 100%; border: 1px solid var(--trait); overflow: hidden;
  background: radial-gradient(60% 55% at 50% 48%, rgba(244,244,242,.045), transparent 70%), var(--fond); touch-action: pan-y; }
.cv-ecran canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; -webkit-tap-highlight-color: transparent; }
.cv-ecran canvas.tire { cursor: grabbing; }
.cv-ecran canvas.sur { cursor: pointer; }
.cv-legendes .leg { position: absolute; left: 0; top: 0; font: 600 10px/1 var(--corps); letter-spacing: .22em;
  text-transform: uppercase; color: var(--fumee); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cv-legendes .leg.vous { color: var(--ambre); }
.cv-bulle { position: absolute; left: 0; top: 0; max-width: 240px; padding: 9px 11px; background: var(--fond); border: 1px solid var(--blanc);
  font-size: 13.5px; line-height: 1.35; color: var(--blanc); pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 4; }
.cv-bulle.vu { opacity: 1; }
.cv-bulle small { display: block; margin-bottom: 5px; font: 600 9.5px/1 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--fumee); }
.cv-bulle.vous { border-color: var(--ambre); }
.cv-bulle.vous small { color: var(--ambre); }
.cv-aide { position: absolute; left: 16px; bottom: 14px; right: 16px; font: 600 9.5px/1.3 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--fumee); pointer-events: none; }

/* sous la carte : les familles (la légende, qui met une famille en avant) et la rotation */
.cv-sous { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; margin-top: 14px; }
.cv-familles, .cv-commandes { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-fam { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 12px; border: 1px solid var(--trait); color: var(--texte);
  font: 600 10.5px/1 var(--corps); letter-spacing: .18em; text-transform: uppercase; transition: border-color .2s, color .2s; }
.cv-fam::before { content: ""; width: 8px; height: 8px; background: var(--blanc); flex: none; }
.cv-fam.vous::before { background: var(--ambre); }
.cv-fam b { font: 500 11px/1 var(--titre); letter-spacing: .04em; color: var(--fumee); }
.cv-fam:hover, .cv-fam[aria-pressed="true"] { border-color: var(--blanc); color: var(--blanc); }
.cv-fam.vous:hover, .cv-fam.vous[aria-pressed="true"] { border-color: var(--ambre); color: var(--ambre); }
.cv-cmd { color: var(--fumee); }
.cv-cmd::before { display: none; }
.cv-cmd[data-tourne] { justify-content: center; min-width: 40px; padding: 0; font: 400 17px/1 var(--corps); letter-spacing: 0; }

/* colonne de droite : les demandes et la note */
.cv-cote { display: flex; flex-direction: column; gap: 20px; }
.cv-demandes .eyebrow { margin-bottom: 14px; }
.cv-onglets { display: grid; gap: 8px; }
.cv-onglet { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px; border: 1.5px solid var(--trait); text-align: left;
  color: var(--texte); transition: border-color .2s, background .2s, color .2s; }
.cv-onglet .num { font: 500 11px/1 var(--titre); letter-spacing: .12em; color: var(--fumee); flex: none; }
.cv-onglet .q { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.35; }
.cv-onglet .q small { display: block; margin-bottom: 4px; font: 500 11px/1 var(--titre); letter-spacing: .1em; text-transform: uppercase; color: var(--blanc); }
.cv-onglet:hover { border-color: var(--blanc); }
.cv-onglet[aria-selected="true"] { border-color: var(--blanc); background: var(--blanc); color: var(--fond); }
.cv-onglet[aria-selected="true"] .num, .cv-onglet[aria-selected="true"] .q small { color: var(--fond); }

.cv-note .mini { min-height: 250px; }
.cv-note h3 { margin: 4px 0 12px; }
.cv-note .cv-resume { font-size: 15px; color: var(--texte); margin-bottom: 14px; }
.cv-vide { font-size: 15px; color: var(--fumee); }
.cv-parties { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cv-parties span { font: 600 9.5px/1.3 var(--corps); letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--trait); color: var(--fumee); padding: 6px 8px; }
.cv-voisins { font-size: 13.5px; line-height: 1.9; color: var(--fumee); }
.cv-voisins button { padding: 8px 0; color: var(--texte); text-decoration: underline; text-decoration-color: var(--sourd); text-underline-offset: 3px; font-size: 13.5px; line-height: 1.3; text-align: left; }
.cv-voisins button:hover { color: var(--blanc); text-decoration-color: var(--blanc); }
.cv-note.vous .who { color: var(--ambre); }

/* ------------------------------------------------------------------ le résultat d'une demande */
.cv-resultat { margin-top: clamp(28px, 3.6vw, 44px); }
.cv-parcours { border-top: 1px solid var(--trait-2); padding-top: 22px; margin-bottom: 22px; }
.cv-parcours .who { margin-bottom: 14px; line-height: 1.5; }
.cv-lus { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; counter-reset: lu; }
/* une note pas encore lue reste lisible : la lecture se voit au filet qui s'allume */
.cv-lus li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--trait-2); font-size: 13px; color: var(--fumee);
  transition: color .35s, border-color .35s; counter-increment: lu; }
.cv-lus li::before { content: counter(lu, decimal-leading-zero); font: 500 10px/1 var(--titre); color: var(--sourd); transition: color .35s; }
.cv-lus li.vu { color: var(--blanc); border-color: var(--blanc); }
.cv-lus li.vu::before { color: var(--fumee); }
.cv-lus li.vous.vu { border-color: var(--ambre); color: var(--ambre); }

.cv-duel .win { display: flex; flex-direction: column; }
.cv-duel .wbody { display: flex; flex-direction: column; flex: 1; }
.cv-duel .rep { padding-bottom: 0; }
.cv-duel .rep .who { font-size: 10.5px; line-height: 1.5; color: var(--fumee); }
.cv-duel .etiq { margin-top: auto; flex-wrap: wrap; line-height: 1.3; }
.cv-duel .wbody > .etiq { padding-bottom: clamp(18px, 2.4vw, 28px); }
.cv-texte { white-space: pre-wrap; font-size: 16px; line-height: 1.65; color: var(--texte); margin-bottom: 8px; }
/* sans cerveau : le texte reste mot pour mot, émojis compris, mais en noir et blanc */
.rep.sans .cv-texte { color: #8A8A86; filter: grayscale(1); }
.cv-texte .cv-l { display: block; }
.cv-texte .coupe { color: var(--fumee); margin: 4px 0; }
.cv-texte .cite { border-left: 2px solid var(--trait); padding-left: 12px; }
.cv-texte .relance, .cv-complet .note { margin: 10px 0; padding: 7px 0; border-top: 1px dashed var(--trait); border-bottom: 1px dashed var(--trait);
  font-size: 13.5px; line-height: 1.45; font-style: italic; color: var(--fumee); }

.cv-complet { margin: 8px 0 24px; }
.cv-complet summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font: 600 10.5px/1 var(--corps); letter-spacing: .2em;
  text-transform: uppercase; color: var(--fumee); list-style: none; }
.cv-complet summary::-webkit-details-marker { display: none; }
.cv-complet summary::before { content: "+"; content: "+" / ""; width: 1.2em; }
.cv-complet[open] summary::before { content: "−"; content: "−" / ""; }
.cv-complet summary:hover { color: var(--blanc); }
.cv-complet .tours { margin-top: 4px; max-height: 420px; overflow: auto; border-top: 1px solid var(--trait); padding-top: 12px; }
.cv-complet .tour { white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; color: var(--fumee); }
.cv-complet .tour + .tour { margin-top: 14px; }
.cv-complet .tour > b { display: block; margin-bottom: 6px; font: 600 9.5px/1 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--texte); }
.cv-complet .cv-l { display: block; }
.cv-complet .titre, .cv-texte .titre { margin-top: 6px; font-weight: 600; color: var(--texte); }
.cv-refermer { display: flex; align-items: center; min-height: 44px; margin-top: 10px; font: 600 10.5px/1 var(--corps); letter-spacing: .2em;
  text-transform: uppercase; color: var(--fumee); }
.cv-refermer:hover { color: var(--blanc); }

.cv-change { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--trait-2); margin-top: clamp(18px, 2vw, 24px); }
.cv-change div { padding: 20px 22px 20px 0; display: flex; gap: 14px; align-items: baseline; font-size: 15px; color: var(--texte); }
.cv-change div + div { padding-left: 22px; border-left: 1px solid var(--trait-2); }
.cv-change b { font: 500 12px/1 var(--titre); letter-spacing: .12em; color: var(--blanc); }
.cv-source { margin-top: 16px; font-size: 13px; color: var(--fumee); max-width: 60em; }

/* ------------------------------------------------------------------ ce qu'il contient : chaque titre ouvre sa note */
.cv-cartes { align-items: start; }
.cv-cartes .carte.vous { border-top-color: var(--ambre); }
.cv-cartes .carte.vous .num { color: var(--ambre); }
.cv-num-note { margin-left: 10px; font: 600 10.5px/1 var(--corps); letter-spacing: .22em; text-transform: uppercase; }
.cv-titres { list-style: none; display: grid; gap: 2px; border-top: 1px solid var(--trait); padding-top: 10px; }
.cv-titres li { position: relative; padding-left: 16px; }
.cv-titres li::before { content: ""; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border: 1px solid var(--sourd); transform: rotate(45deg); }
.cv-titres button { display: block; width: 100%; min-height: 32px; padding: 6px 0; text-align: left; font-size: 13.5px; line-height: 1.4; color: var(--fumee);
  transition: color .2s; }
.cv-titres button:hover { color: var(--blanc); text-decoration: underline; text-underline-offset: 3px; }
.cv-cartes .carte.vous .cv-titres li::before { border-color: rgba(255,181,71,.6); }
.cv-cartes .carte.vous .cv-titres button:hover { color: var(--ambre); }

/* ------------------------------------------------------------------ téléphone et tablette */
@media (max-width: 960px) {
  .cv-grille { grid-template-columns: 1fr; }
  .cv-ecran { max-width: 640px; }
  /* la note juste sous la carte, les demandes juste avant leur résultat */
  .cv-cote { display: contents; }
  .cv-demandes { order: 2; }
  .cv-note .mini { min-height: 0; }
  .cv-change { grid-template-columns: 1fr; }
  .cv-change div { padding: 16px 0; }
  .cv-change div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--trait-2); }
}
@media (max-width: 720px) {
  .cv-cerveau { width: 100%; }
  .cv-onglet { padding: 12px; }
  .cv-aide { display: none; }
  .cv-complet .tours { max-height: none; overflow: visible; }
}
.calme .cv-lus li, .calme .cv-lus li::before, .calme .cv-legendes .leg { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cv-lus li, .cv-lus li::before, .cv-legendes .leg, .cv-bulle { transition: none; }
}