/* ============================================================
   COLOR DE CO THERAPY — Feuille de style principale
   ------------------------------------------------------------
   Organisation du fichier :
   1. Palette (variables)
   2. Base et typographie
   3. En-tête
   4. Résultat du test
   5. Bandes (cartographie, quotidien, coaching, accompagnements)
   6. Pied de page et panneau d'information
   7. Tablette, mobile et mouvements réduits
   ============================================================ */

/* ---------- 1. PALETTE : toutes les couleurs sont centralisées ici ---------- */
:root {
  --font-sans: "Afacad Flux", sans-serif;
  --background: oklch(1 0 0);
  --foreground: oklch(.29 .12 264); /* Bleu */
  --primary: oklch(0.6678 0.2231 36.61);            /* orange #FF4D07 */
  --primary-foreground: oklch(1 0 0); /* Blanc */
  --secondary: oklch(0.3922 0.1316 269.16);         /* bleu  #2A3D8B*/
  --accent: oklch(.46 .22 289);           /* violet */
  --muted: oklch(.975 .006 10);   /* Orange de fond 5% */
  --muted-foreground: oklch(.49 .02 265); /* gris #5b606c */
  --border: oklch(.91 .014 260); /* Gris perle */
  --navy: oklch(.25 .095 264);            /* survol des boutons : bleu marine */
  --white: oklch(1 0 0);
  --bluegreen: oklch(0.7043 0.0959 218.73); /* bleuvert #50aec8 */
  --pink: oklch(.64 .25 354); /* Magenta ##f32096 */
  --peach: oklch(.96 .024 44); /* Orange clair */
  --ice: oklch(.966 .03 220); /* Bleu clair turquoise  #dff9ff */
  --ink: oklch(.22 0 0); /* Presque noir */
  --energy: oklch(.95 .04 314); /* Violet clair */
  --clarity: oklch(.96 .04 162); /* Vert clair */
  --momentum: oklch(.88 .08 39); /* Orange clair */
  --meaning: oklch(.95 .045 333); /* violet clair */
  --logo-red: oklch(.58 .21 29); /* Rouge */
  --logo-yellow: oklch(.84 .16 94);
  --logo-green: oklch(.5 .15 143);
  --logo-cyan: oklch(.72 .13 229);
  --radius: .375rem;

/* Les 13 coleurs */
  --rouge : #d41516 ;
  --rougefd : #f5e7e7 ;
  --orange : #FF4D07 ;
  --orangefd : #ffede6 ;
  --jaune : #FCB900 ;
  --jaunefd : #fff8e5 ;
  --vert : #136929;
  --vertfd : #e7f0e9 ;
  --turquoise : #7BC5BD ;
  --turquoisefd : #f2f9f8 ;
  --bleu : #2A3D8B ;
  --bleufd : #e9ebf3 ;
  --violet : #731198 ;
  --violetfd : #f1e7f4 ;
  --magenta : #DD0069 ;
  --magentafd : #fce5f0 ;
  --argent : #ABB8C3 ;
  --argentfd : #f6f8f9 ;
  --or : #E0B159 ;
  --orfd : #fcf7ee ;
  --marron : #5F452E ;
  --marronfd : #efecea ;
  --noir : #000 ;
  --noirfd : #e5e5e5 ;
  --blanc : #FFF ;
  --blancfd : #fafafa ;
}

/* Class couleur  */

.rouge {color: #d41516 ;}
.rougefd {background-color: #d41516 ;}
.rougefd10 {background-color : #f5e7e7 ;}
.orange {color : #FF4D07 ;}
.orangefd {background-color : #FF4D07 ;}
.orangefd10 {background-color : #ffede6 ;}
.jaune {color : #FCB900 ;}
.jaunefd {background-color : #FCB900 ;}
.jaunefd10 {background-color : #fff8e5 ;}
.vert {color : #136929;}
.vertfd {background-color : #136929;}
.vertfd10 {background-color : #e7f0e9 ; }
.turquoise {color : #7BC5BD ;}
.turquoisefd {background-color : #7BC5BD ;}
.turquoisefd10 {background-color : #f2f9f8 ; }
.bleu {color : #2A3D8B ;}
.bleufd {background-color : #2A3D8B ;}
.bleufd10 {background-color : #e9ebf3 ; }
.violet {color : #731198 ;}
.violetfd {background-color : #731198 ;}
.violetfd10 {background-color : #f1e7f4 ;}
.magenta {color : #DD0069 ;}
.magentafd {background-color : #DD0069 ;}
.magentafd10 {background-color : #fce5f0 ;}
.argent {color : #ABB8C3 ;}
.argentfd {background-color : #ABB8C3 ;}
.argentfd10 {background-color: #f6f8f9 ;}
.or {color: #E0B159 ;}
.orfd {background-color: #E0B159 ;}
.orfd10 {background-color : #fcf7ee ; }
.marron {color : #5F452E ;}
.marronfd {background-color : #5F452E ;}
.marronfd10 {background-color : #efecea ;}
.noir {color: #000 ;}
.noirfd {background-color: #000 ;}
.noirfd10 {background-color: #e5e5e5 ;}
.blanc {color: #FFF ;}
.blancfd {background-color: #FFF ;border : 1px solid #000;}
.blancfd10 {background-color: #fafafa ; border : 1px solid #000;}

.carre { width:90px; height:150px; float :left;}
/* ---------- 2. BASE ET TYPOGRAPHIE ----------
   Textes réels (sélectionnables) en Afacad Flux regular ;
   titres et boutons en semi-bold. */
* { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-weight: 400; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3,strong { font-weight: 600; }
button,a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration:none;}
a:hover {color:var(--orange); }
button { font: inherit; color: inherit; cursor: pointer; }
img { display:  block; max-width: 100%; margin-left: auto;
  margin-right: auto; }
.page { width: min(100% - 48px, 1200px); margin: 0 auto; }
/* ---------- 3. EN-TÊTE ---------- */
.header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 7px 16px; }
.brand { text-decoration:none; flex-shrink:0; }
.brand-line { display:flex; align-items:center; gap:9px; font-size:43px; line-height:.9; font-weight:600; }
.logo { width:100%; aspect-ratio:auto; object-fit:cover; }
img.logo:hover  {  opacity: .75;}
.brand-mini { font-size:12px; letter-spacing:4px; line-height:1.05; color:var(--ink); }
.brand-tagline { text-align:center; font-size:14px; margin-top:6px; color:var(--muted-foreground); }
.navigation { display:flex; gap:23px; }
button {
  display: flex;
  align-items: center;    /* Centrage vertical */
  justify-content: center; /* Centrage horizontal */
  margin-left: auto;
  margin-right: auto;
}
.cdt-nav-button { background:transparent; border:0; color:var(--accent); height:auto; min-width:85px; padding:0 6px; display:flex; flex-direction:column; gap:3px; font-family:inherit; font-size:12px; font-weight:600; line-height:1; border-radius:0; white-space:normal; transition:background .2s,color .2s; text-align:center; }
.cdt-nav-button img { width:29px; height:29px;  display: block;  margin-left: auto;  margin-right: auto;  }
.cdt-nav-button:hover { background:var(--white); color:var(--primary); }
.cdt-nav-button:hover img {/*color:var(--primary); filter:brightness(0) /*invert(1);*/
filter: invert(33%) sepia(96%) saturate(4821%) hue-rotate(353deg) brightness(190%) contrast(195%);}

/* ---------- 4. RÉSULTAT DU TEST ---------- */
.result-intro { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; align-items:start; padding:20px }
.result-heading { padding:46px 0 0 30px}
h1 { font-size:32px; line-height:1.03; letter-spacing:0; }
.pink { color:var(--pink); }
.intro-key { font-size:25px; line-height:1; margin-top:42px; font-weight:600; }
.underline-stroke { width:150px; height:12px; border-top:4px solid var(--orange); border-radius:50%; transform:rotate(-7deg); margin:20px 0 0 24px; }

/* Totem-disc */

.totem { padding-top:23px; text-align:center; }
.totem-disc { width:156px; aspect-ratio:1; border-radius:50%;  margin:0 auto 10px; }
.totem-disc-orange {background:var(--orange); }
.totem h2 { font-size:34px; letter-spacing:3px; /*color:var(--primary);*/ }
.totem-qualities { font-size:18px; letter-spacing:1px; margin-bottom:9px; white-space:nowrap;font-weight:600; }
.totem p:last-child { font-size:18px; line-height:1; }
.intro-portrait { width:95%; aspect-ratio:auto; object-fit:cover;border-radius: 50%;  }

.result-body { max-width:1024px; margin:38px auto 0; padding-bottom:35px; }
.video-image { width:100%; aspect-ratio:539/305; object-fit:cover; }
/* Vidéo de présentation : s'adapte à la colonne, garde le format 16/9 du fichier. */
.video-media { width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; border-radius:0px; }
.result-copy { margin-top:15px; color:var(--ink); font-size:18px; line-height:1.25; text-align:justify;}
.result-copy h2 { font-size:33px; /*color:var(--orange);*/ letter-spacing:2px; margin-bottom:4px; }
.result-copy h3 { font-size:18px; margin-top:26px; }
.result-copy p {margin-top:8px;}
/* ---------- 5. BANDES SUCCESSIVES : pas de cartes imbriquées ---------- */
.band { margin-top:24px; }
/* Cartographie */
.mapping { background:var(--muted); display:grid; grid-template-columns:1.25fr .9fr .9fr; gap:28px; padding:20px 24px 20px; align-items:center; }
.mapping h2 { font-size:24px; line-height:1.05; }
.mapping .mapping-kicker { font-size:21px; }
.rainbow-heading { font-size:51px; line-height:1.1; /*color:var(--accent);*/ font-weight:600; }
.mapping-copy { font-size:17px; line-height:1.15; margin:10px 0 12px; }
.cdt-button { min-height:60px; height:auto; width:100%; padding:12px 42px; border-radius:0; border:0; background:var(--primary); color:var(--primary-foreground); font-family:inherit; font-size:17px; line-height:1; font-weight:600; white-space:normal; display:flex; justify-content:space-between; gap:16px; text-align:center; text-decoration:none; transition:background .2s; }
.cdt-button img { width:35px; height:35px; flex-shrink:0; }
.cdt-button:hover { background:var(--navy); }
.cdt-button-blue { background:var(--bluegreen); }
.price { color:var(--pink); font-size:21px; font-weight:600; text-align:center; margin-top:7px; }
.wheel { text-align:center; font-size:17px; line-height:1.1; }
.wheel img { width:100%; mix-blend-mode:multiply; margin:0 auto 8px; }
figure.wheel figcaption {font-size:18px; font-weight:600;}
.color-types { display:grid; gap:28px; }
.color-type { display:flex; gap:11px; align-items:center; }
.type-icon { width:59px; height:59px; border-radius:50%; background:var(--primary); display:grid; place-items:center; flex-shrink:0; }
.type-icon img { width:36px; height:36px; }
.type-resource .type-icon { background:var(--bluegreen); }
.type-resource .type-icon img { filter:brightness(0) invert(1); }
.type-retreat .type-icon { background:var(--accent); }
.color-type h3 { font-size:18px; line-height:1.05; color:var(--primary); margin-bottom:4px; }
.type-resource h3 { color:var(--bluegreen); }
.type-retreat h3 { color:var(--accent); }
.color-type p { font-size:16px; line-height:1.05; }
.cdt-buttonmw {width:360px;}
.cdt-buttonmwa {width:266px;}
/* Couleurs au quotidien */
.daily { background:var(--peach); display:grid; grid-template-columns:2.1fr 1fr; padding:30px 38px; gap:35px; }
.daily h2 { font-size:25px; line-height:1.03; }
.benefits { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:16px; }
.benefit { text-align:center; font-size:16px; font-weight:600; line-height:1; }
.benefit-icon { border:3px solid var(--background); background:var(--energy); width:78px; height:78px; display:grid; place-items:center; border-radius:50%; margin:0 auto 8px; }
.benefit-icon img { width:49px; height:49px; }
.benefit:nth-child(2) .benefit-icon { background:var(--clarity); }
.benefit:nth-child(3) .benefit-icon { background:var(--momentum); }
.benefit:nth-child(4) .benefit-icon { background:var(--meaning); }
.daily-aside { border-left:3px solid var(--primary); padding-left:34px; align-self:center; }
.daily-aside h3 { font-size:20px; line-height:1.2; }
.daily-aside p { font-size:17px; line-height:1.12; margin-top:13px; }

/* Coaching */
.coaching { background:var(--muted); display:grid; grid-template-columns:1fr 1.25fr; gap:10%; padding:31px 52px; align-items:center; }
.coaching-portrait { width:325px; aspect-ratio:1; border-radius:50%; object-fit:cover; }
.coaching h2 { font-size:24px; line-height:1.25; margin-bottom:7px; }
.coaching p { font-size:17px; line-height:1.13; }
.coaching ul { padding:0; list-style:none; display:grid; gap:6px; margin:14px 0 18px; font-size:17px; }
.coaching li { display:flex; gap:12px; align-items:center; }
.check-icon { background:var(--primary); width:25px; height:25px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.check-icon img { width:20px; height:20px; }

/* Accompagnements */
.accompaniments { background:var(--ice); display:grid; grid-template-columns:1fr 2.6fr 1.1fr; align-items:center; gap:28px; padding:30px 25px; }
.more-heading { border-right:3px solid var(--secondary); padding:4px 25px 38px 0; }
.more-heading h2 { color:var(--bluegreen); font-size:24px; line-height:1; }
.more-heading p { font-size:17px; line-height:1.1; margin-top:9px; }
.services { display:grid; grid-template-columns:repeat(5,1fr); gap:13px; }
.service { text-align:center; font-size:17px; line-height:1.1; font-weight:600;}
.service img { width:78px; height:78px; padding:10px; border-radius:50%; background:var(--background); margin:0 auto 12px; }
.accompaniments .cdt-button { font-size:17px; }

/* ---------- 6. PIED DE PAGE ET PANNEAU D'INFORMATION ---------- */
.footer { padding:40px 0 35px; color:var(--accent); }
.footer-title { display:flex; gap:35px; align-items:center; text-align:center; font-size:25px; line-height:1.1; }
.footer-title:before,.footer-title:after { content:""; flex:1; height:1px; background:var(--accent); }
.footer-values { display:grid; grid-template-columns:1fr .8fr 1fr; gap:55px; padding:20px 55px 40px; }
.footer-value { display:flex; align-items:center; gap:15px; font-size:17px; line-height:1.1; }
.footer-value img { width:74px; height:74px; }
.socials { display:flex; justify-content:center; gap:110px; }
.social-link { color:var(--accent); font-size:16px; text-decoration:none; font-weight:600; }
.social-link:hover { color:var(--navy); text-decoration:underline; }
.social-link img { width:32px; height:32px; }
.social-link:hover img { opacity:.75; }
.modal-copy { font-size:20px; line-height:1.3; }

/* Panneau d'information : boîte de dialogue native (<dialog>). */
.info { border:0; padding:0; max-width:min(92vw,480px); background:transparent; color:var(--foreground); }
.info::backdrop { background:oklch(0 0 0 / .55); }
.info-box { background:var(--background); border-radius:var(--radius); padding:26px 24px; box-shadow:0 18px 45px oklch(0 0 0 / .25); }
.info-box h2 { font-size:22px; line-height:1.15; color:var(--primary); margin-bottom:10px; }
.info-close { margin-top:18px; width:100%; min-height:52px; border:0; border-radius:0; background:var(--primary); color:var(--primary-foreground); font-weight:600; font-size:16px; letter-spacing:1px; transition:background .2s; }
.info-close:hover { background:var(--navy); }

/* ---------- 7. TABLETTE : on resserre les espacements sans réduire la lisibilité ---------- */
/*@media (max-width:1000px) */
@media (max-width:1025px) {
 .page { width:min(100% - 32px, 850px); }
 .brand-line { font-size:33px; gap:5px; }
 .brand-tagline { font-size:11px; }
 .navigation { gap:6px; }
 .cdt-nav-button { font-size:10px; min-width:74px; }
 h1 { font-size:26px; }
 .intro-key { font-size:22px; margin-top:30px; }
 .totem-disc { width:130px; }
 .totem h2 { font-size:29px; }
 .totem-qualities { font-size:9px; font-weight:600; }
 .totem p:last-child { font-size:15px; }
 .result-body { margin:32px 9.5% 0; }
 .result-copy { font-size:16px; }
 .mapping { gap:18px; padding:28px 20px 15px; }
 .mapping h2 { font-size:21px; }
 .mapping .mapping-kicker { font-size:17px; }
 .rainbow-heading { font-size:41px; }
 .mapping-copy,.color-type p { font-size:15px; }
 .color-type h3 { font-size:17px; }
 .type-icon { width:48px; height:48px; }
 .cdt-button { font-size:14px; min-height:54px; }
 .daily { padding:28px; gap:26px; }
 .daily h2 { font-size:22px; }
 .daily-aside { padding-left:24px; }
 .daily-aside h3 { font-size:17px; }
 .benefits { gap:12px; }
 .benefit-icon { width:66px; height:66px; }
 .coaching { padding:28px 40px; gap:35px; }
 .coaching h2 { font-size:21px; }
 .accompaniments { gap:20px; padding:25px 20px; }
 .service { font-size:12px; }
 .service img { width:50px; height:50px; }
 .more-heading h2 { font-size:20px; }
 .accompaniments .cdt-button { font-size:12px; padding:10px; }
 .footer-title { font-size:22px; gap:25px; }
 .footer-values { gap:30px; padding:20px 35px 35px; }
}

/* ---------- MOBILE : ordre de lecture conservé, colonnes empilées ---------- */
/*@media (max-width:640px)*/
@media (max-width:980px) {
 .page { width:calc(100% - 24px); }
 .header { flex-direction:column; gap:17px; padding:22px 0 18px; }
 .brand-line { font-size:35px; }
 .navigation { width:100%; justify-content:space-around; }
 .cdt-nav-button { font-size:11px; padding:5px 8px; }
 .result-intro { grid-template-columns:1fr 1fr; gap:16px; padding:24px 18px 0; }
 .result-heading { padding:0; }
 h1 { font-size:25px; }
 .intro-key { font-size:21px; margin-top:22px; }
 .underline-stroke { width:105px; margin-left:6px; }
 .totem { padding-top:0; }
 .totem-disc { width:110px; }
 .totem h2 { font-size:27px; }
 .totem-qualities { white-space:normal; font-size:10px; }
 .intro-portrait { grid-column:1/-1; width:180px; margin:8px auto 0; }
 .result-body { margin:24px 18px 0; padding-bottom:25px; }
 .result-copy { font-size:17px; line-height:1.3; }
 .result-copy h2 { font-size:29px; }
 .mapping { grid-template-columns:1fr; padding:26px 20px; gap:24px; }
 .mapping h2 { font-size:26px; }
 .mapping .mapping-kicker { font-size:21px; }
 .rainbow-heading { font-size:45px; }
 .mapping-copy { font-size:18px; }
 .cdt-button { font-size:16px; }
 .wheel { max-width:230px; margin:auto; }
 .color-types { gap:20px; overflow-wrap: break-word;}
 .color-type h3 { font-size:17px; }
 .color-type p { font-size:17px; }
 .daily { grid-template-columns:1fr; padding:25px 20px; gap:25px; }
 .daily h2 { font-size:24px; }
 .benefits { grid-template-columns:repeat(2,1fr); gap:24px; }
 .benefit { font-size:17px; }
 .daily-aside h3 { font-size:20px; }
 .coaching { grid-template-columns:1fr; padding:28px 20px; gap:24px; }
 .coaching-portrait { width:230px; margin:auto; }
 .coaching h2 { font-size:23px; }
 .coaching p,.coaching ul { font-size:18px; overflow-wrap: break-word;}
 .accompaniments { grid-template-columns:1fr; padding:25px 20px; gap:25px; }
 .more-heading { border-right:0; border-bottom:2px solid var(--secondary); padding:0 0 18px; }
 .more-heading h2 { font-size:25px; }
 .services { grid-template-columns:repeat(3,1fr); gap:22px 15px; }
 .service { font-size:15px; }
 .service img { width:59px; height:59px; }
 .accompaniments .cdt-button { font-size:16px; }
 .footer { padding-top:30px; }
 .footer-title { font-size:21px; gap:12px; }
 .footer-title:before,.footer-title:after { flex:0 0 20px; }
 .footer-values { grid-template-columns:1fr; padding:25px 20px; gap:20px; }
 .footer-value { font-size:18px; }
 .footer-value img { width:55px; height:55px; }
 .socials { gap:22px; flex-wrap:wrap; }
 .cdt-buttonmw {width:300px;}

}

/* Respecte le réglage système « diminuer les animations ». */
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }

/* Dynamic result colors and Rails controls. */
.result { background:var(--totem-tint); }
.totem-accent { color:var(--totem-ink); }
.underline-stroke { border-color:var(--primary); }
.totem-swatches { display:flex; justify-content:center; gap:12px; }
.totem-swatches .totem-disc { margin:0 0 10px; border:1px solid rgba(0,0,0,.15); }
.totem-swatches:has(.totem-disc + .totem-disc) .totem-disc { width:110px; }
.totem-qualities { white-space:normal; overflow-wrap:anywhere; }
.navigation { align-items:center; }
.navigation form { margin:0; }
.cdt-nav-button { text-decoration:none; }
.totem-video { margin:0 0 24px; }
.totem-video figcaption { font-size:24px; font-weight:600; margin-bottom:10px; }
.result-notice { margin:0; padding:8px 20px; text-align:center; background:#f1f7f3; color:#23412d; }
.cdt-modal { border:0; padding:28px; width:min(92vw, 520px); color:var(--foreground); background:white; }
.cdt-modal::backdrop { background:rgba(0,0,0,.5); }
.cdt-modal h2 { margin-bottom:14px; }
.reset-actions { display:flex; gap:16px; margin-top:24px; }
.reset-actions form { margin:0; flex:1; }
.reset-actions > button { flex:1; background:var(--secondary); }
.reset-actions .cdt-button { font-size:17px; padding:14px; }
.cdt-button { box-sizing:border-box; max-width:100%; }
.brand { max-width:55%; }
.brand-line .logo { max-width:380px; }
button:focus-visible, a:focus-visible, video:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@media (max-width:700px) {
  .reset-actions { flex-direction:column; }
  .brand { max-width:100%; }
  .result-intro { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .totem-qualities { max-width:100%; font-size:13px; line-height:1.3; letter-spacing:.4px; }
  .totem h2 { overflow-wrap:break-word; }
  .totem-swatches:has(.totem-disc + .totem-disc) { gap:8px; }
  .totem-swatches:has(.totem-disc + .totem-disc) .totem-disc { width:min(60px, 15vw); }
  .totem-swatches .totem-disc { width:130px; }
  .result-copy h2 { overflow-wrap:break-word; letter-spacing:1px; }
  .cdt-button { width:100%; }
}
/*

 */

:root { --totem-tint:#ffede6; --totem-ink:#ff4d07; }
[hidden] { display:none !important; }
body { font-size:18px; }
.global-page { min-height:100vh; }
.global-header { padding:25px 0; border-bottom:1px solid #eee9f1; margin-bottom:25px; gap:35px; }
.global-header .brand { width:325px; max-width:36%; }
.global-header .logo { width:100%; }
.global-navigation { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px 18px; }
.global-navigation form { margin:0; }
.nav-link { font:inherit; font-size:16px; line-height:1.2; background:none; border:0; padding:8px 0; color:var(--accent); text-decoration:none; margin:0; }
.nav-link:hover,.text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.nav-cta { background:var(--secondary); color:white; padding:12px 20px; font-size:17px; }
.nav-cta:hover { background:var(--accent); color:white; }
.eyebrow { color:var(--accent); font-size:13px; letter-spacing:2px; font-weight:600; margin-bottom:15px; }
.lead { font-size:23px; line-height:1.35; margin:22px 0; max-width:600px; }
.text-link { color:var(--accent); border:0; background:none; font:inherit; font-weight:600; padding:0; cursor:pointer; }
.fit-button { width:auto; display:inline-flex; padding:17px 24px; min-width:200px; margin:20px 0; }
.intro-hero { display:grid; grid-template-columns:1.4fr 1fr; gap:60px; background:#ffede6; padding:55px; align-items:center; }
.intro-hero h1,.auth-intro h1 { font-size:48px; line-height:1.08; }
.intro-facts { display:flex; flex-wrap:wrap; gap:12px; margin:25px 0 5px; font-size:16px; }
.intro-facts span { border-bottom:2px solid #efc8b9; padding-bottom:6px; }
.intro-portrait-wrap { text-align:center; }
.intro-portrait-wrap .intro-portrait { max-width:300px; margin:auto; }
.intro-portrait-wrap p { font-size:25px; margin-top:18px; }
.intro-hero .text-link { display:block; margin-top:8px; }
.presentation-section { max-width:1024px; margin:55px auto; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:25px; margin-bottom:24px; }
.section-heading h2 { font-size:34px; }
.section-heading > p { max-width:300px; font-size:20px; }
.preparation-band { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; background:#e9f5f8; padding:35px; }
.step-number { font-size:28px; color:var(--bluegreen); display:block; margin-bottom:12px; }
.preparation-band h3 { font-size:23px; margin-bottom:8px; }
.preparation-band p { font-size:19px; line-height:1.3; }
.auth-grid { display:grid; grid-template-columns:1fr 1fr; margin-top:35px; }
.auth-intro { background:#ffede6; padding:48px; }
.auth-intro h1 { font-size:43px; }
.auth-wheel { width:200px; margin:35px auto; mix-blend-mode:multiply; }
.auth-signature { text-align:center; font-size:25px; color:var(--accent); font-weight:600; }
.auth-panel { padding:38px 50px; align-self:center; }
.auth-panel h2 { font-size:36px; margin-bottom:12px; }
.auth-panel > p { line-height:1.35; }
.cdt-form { margin-top:28px; }
.cdt-form label,.search-form label { display:block; font-size:17px; font-weight:600; margin-bottom:8px; }
.cdt-form input:not([type=checkbox]):not([type=submit]),.search-form input[type=search] { box-sizing:border-box; width:100%; border:1px solid #cecbd5; background:white; padding:13px 14px; font:inherit; color:var(--foreground); min-height:51px; border-radius:0; margin-bottom:21px; }
.cdt-form input:focus,.search-form input:focus { outline:2px solid var(--accent); outline-offset:1px; }
.cdt-form .cdt-button { margin:23px 0; justify-content:center; cursor:pointer; }
.cdt-form h3 { margin:20px 0 10px; font-size:25px; }
.field-hint { color:#625f6d; font-size:16px; line-height:1.3; margin:0 0 12px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-options { display:flex; flex-wrap:wrap; justify-content:space-between; gap:15px; font-size:16px; }
.cdt-form .checkbox-label { display:flex; align-items:center; gap:10px; font-weight:400; margin:0; }
.checkbox-label input { width:18px; height:18px; accent-color:var(--accent); }
.auth-bottom { margin-top:25px; padding-top:22px; border-top:1px solid #eee9f1; }
#error_explanation { padding:18px; background:#fff1f1; color:#8e2633; margin-bottom:22px; }
#error_explanation h2 { font-size:19px; }
#error_explanation ul { font-size:17px; padding-left:20px; margin-bottom:0; }
.page-heading { margin:45px 0 30px; }
.page-heading h1,.admin-heading h1 { font-size:42px; }
.profile-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:30px; }
.surface-panel { padding:32px; border:1px solid #e7e2ea; background:white; }
.surface-panel > h2 { font-size:29px; margin-bottom:25px; }
.profile-aside { background:var(--totem-tint); padding:40px; text-align:center; }
.profile-aside > img { width:210px; mix-blend-mode:multiply; margin:20px auto; }
.profile-aside h2 { font-size:32px; margin:20px 0; }
.profile-color { width:150px; height:150px; border:1px solid #ddd; border-radius:50%; margin:15px auto 30px; }
.account-danger { text-align:left; margin-top:60px; font-size:16px; border-top:1px solid #d9d1dd; padding-top:20px; }
.account-danger summary { cursor:pointer; }
.account-danger p { margin:15px 0; }
.danger { color:#a32a40; }
.quiz-section { max-width:1024px; margin:40px auto; }
.quiz-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.quiz-heading .eyebrow { margin-bottom:8px; }
.quiz-section progress { width:100%; height:5px; border:0; appearance:none; background:#eee9f1; margin:23px 0 0; display:block; }
.quiz-section progress::-webkit-progress-bar { background:#eee9f1; }
.quiz-section progress::-webkit-progress-value { background:var(--pink); }
.quiz-section progress::-moz-progress-bar { background:var(--pink); }
.quiz-panel { background:#fff7f2; padding:40px 42px; }
.quiz-number { color:var(--pink); font-size:28px; display:block; margin-bottom:15px; }
.quiz-panel h1 { font-size:33px; line-height:1.2; max-width:850px; outline:none; }
.quiz-guidance { margin:12px 0 30px; font-size:18px; color:#625f6d; }
.answer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:28px 0; }
.answer-option { background:white; border:1px solid #dfd5e2; color:var(--foreground); padding:17px 15px; min-height:70px; display:flex; justify-content:flex-start; gap:13px; text-align:left; font:inherit; line-height:1.2; width:100%; margin:0; }
.answer-key { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; background:#f1e7f4; color:var(--accent); font-size:15px; font-weight:600; }
.answer-option:hover,.answer-option.selected { background:#f7e6f0; border-color:var(--pink); }
.answer-grid.image-answers { grid-template-columns:repeat(4,minmax(0,1fr)); }
.image-answers .answer-option { padding:8px; position:relative; }
.image-answers img { width:100%; aspect-ratio:1; object-fit:cover; }
.image-answers .answer-key { position:absolute; top:14px; left:14px; background:white; }
.quiz-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:35px; padding-top:23px; border-top:1px solid #e6dbe6; color:#625f6d; font-size:16px; }
.page-back { margin:30px 0; display:flex; justify-content:space-between; gap:20px; font-size:17px; }
.cartography-hero { background:var(--totem-tint); padding:45px; display:grid; grid-template-columns:1.7fr 1fr; gap:35px; align-items:center; }
.cartography-hero h1 { font-size:44px; line-height:1.1; }
.cartography-hero img { max-width:240px; mix-blend-mode:multiply; }
.person-name { font-size:17px; margin-top:24px; }
.cartography-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:25px; margin:30px 0; }
.palette-group { margin:25px 0 30px; }
.palette-group h3 { font-size:22px; margin-bottom:12px; }
.color-chips { display:flex; flex-wrap:wrap; gap:10px; }
.color-chip { display:inline-flex; align-items:center; gap:9px; font-size:17px; border:1px solid #e6e0e8; padding:9px 12px; }
.color-chip > span { width:20px; height:20px; border:1px solid #ddd; border-radius:50%; }
.score-chart { display:grid; gap:14px; }
.score-row { display:grid; grid-template-columns:115px minmax(0,1fr) 25px; gap:12px; align-items:center; font-size:16px; }
.score-track { display:block; height:17px; background:#f4f1f5; }
.score-track > span { display:block; height:100%; min-width:0; border:1px solid #e1dce5; box-sizing:border-box; }
.score-chart + p { margin-top:25px; }
.coaching-cta { display:flex; align-items:center; justify-content:space-between; gap:35px; padding:35px; background:#e9f5f8; }
.coaching-cta h2 { font-size:30px; margin-bottom:15px; }
.admin-heading { display:flex; align-items:center; justify-content:space-between; gap:30px; background:#f5edf8; padding:40px; }
.admin-heading > div > p:last-child { margin-top:18px; }
.admin-counter { display:grid; text-align:center; min-width:150px; }
.admin-counter strong { font-size:55px; color:var(--accent); }
.admin-list { margin-top:25px; }
.search-form { display:flex; align-items:end; gap:20px; flex-wrap:wrap; }
.search-form > div { flex:1; min-width:220px; }
.search-form input[type=search] { margin:0; }
.search-form .cdt-button { margin:0; min-height:51px; }
.participants { margin-top:25px; }
.participant { display:grid; grid-template-columns:50px 1.2fr 1fr auto; gap:20px; align-items:center; padding:25px 0; border-top:1px solid #eee9f1; }
.participant h2 { font-size:22px; }
.participant p { font-size:16px; color:#625f6d; margin-top:6px; overflow-wrap:anywhere; }
.participant-swatch { width:45px; height:45px; border:1px solid #ddd; border-radius:50%; }
.empty-state { text-align:center; padding:60px 20px; }
.empty-state h2 { font-size:28px; margin-bottom:14px; }
.global-page > main { min-height:45vh; }
.global-page .footer { margin-top:40px; }
@media(max-width:1000px) {
  .global-header { flex-direction:column; align-items:center; }
  .global-header .brand { max-width:100%; }
  .global-navigation { justify-content:center; gap:8px 20px; }
  .intro-hero { padding:35px; gap:30px; }
  .intro-hero h1,.auth-intro h1 { font-size:36px; }
  .auth-panel,.auth-intro { padding:30px; }
  .cartography-grid { grid-template-columns:1fr; }
  .participant { grid-template-columns:40px 1fr 1fr; }
  .participant > a { grid-column:2 / -1; }
}
@media(max-width:700px) {
  .global-header { padding:20px 0; margin-bottom:20px; }
  .global-navigation { gap:6px 15px; }
  .nav-link { font-size:15px; }
  .intro-hero,.auth-grid,.profile-grid,.cartography-hero { grid-template-columns:1fr; }
  .intro-hero { padding:28px 22px; gap:30px; }
  .intro-hero h1,.auth-intro h1,.cartography-hero h1 { font-size:35px; }
  .intro-portrait-wrap .intro-portrait { max-width:210px; }
  .lead { font-size:20px; }
  .intro-facts { font-size:15px; }
  .presentation-section { margin:35px 0; }
  .section-heading { display:block; }
  .section-heading h2 { font-size:29px; }
  .section-heading > p { margin-top:15px; }
  .preparation-band { grid-template-columns:1fr; gap:28px; padding:25px; }
  .auth-intro { padding:30px 24px; }
  .auth-wheel,.auth-signature { display:none; }
  .auth-intro .lead { margin-bottom:0; }
  .auth-panel { padding:30px 12px; }
  .auth-panel h2 { font-size:32px; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .surface-panel { padding:24px 18px; }
  .quiz-section { margin:25px auto; }
  .quiz-panel { padding:25px 18px; }
  .quiz-panel h1 { font-size:26px; }
  .answer-grid,.answer-grid.image-answers { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .answer-option { padding:13px 10px; min-height:75px; font-size:17px; flex-direction:column; align-items:flex-start; gap:9px; }
  .image-answers .answer-option { display:block; min-height:0; }
  .quiz-bottom { flex-direction:column; align-items:flex-start; }
  .quiz-heading { font-size:15px; }
  .quiz-heading .eyebrow { font-size:11px; letter-spacing:1px; }
  .cartography-hero { padding:28px 22px; }
  .cartography-hero img { max-width:190px; }
  .score-row { grid-template-columns:100px minmax(0,1fr) 22px; gap:8px; font-size:15px; }
  .coaching-cta { display:block; padding:25px; }
  .admin-heading { display:block; padding:28px 22px; }
  .admin-heading h1,.page-heading h1 { font-size:34px; }
  .admin-counter { display:flex; align-items:center; justify-content:flex-start; gap:15px; margin-top:20px; }
  .admin-counter strong { font-size:40px; }
  .participant { grid-template-columns:35px 1fr; gap:14px; }
  .participant > div:nth-of-type(2),.participant > a { grid-column:2; }
  .participant-swatch { width:32px; height:32px; }
  .participant h2 { font-size:20px; }
  .page-back { flex-wrap:wrap; }
}

/* V3: a single test, with the cartography as the next step. */
.single-test { max-width:600px; margin-top:22px; font-size:19px; line-height:1.4; }
.single-test strong { color:var(--accent); display:block; font-size:22px; }
.cartography-next { display:grid; grid-template-columns:1.3fr 1fr; gap:35px; align-items:center; background:#e9f5f8; padding:30px 38px; margin:28px 0 0; }
.cartography-next h2 { color:var(--accent); font-size:29px; line-height:1.15; margin-bottom:14px; }
.cartography-next p { line-height:1.35; }
.cartography-next .eyebrow { margin-bottom:10px; }
.cartography-next-action { text-align:center; }
.cartography-next-action .cdt-button { width:100%; }
.cartography-next-action .price { margin-top:12px; font-size:17px; }
@media (max-width:700px) {
  .cartography-next { grid-template-columns:1fr; padding:25px 20px; gap:23px; }
  .cartography-next h2 { font-size:27px; }
  .single-test { font-size:18px; }
  .single-test strong { font-size:21px; }
}