/* =========================================================================
   IZIII — Habillage couleurs « Caisse »
   Surcouche chargée APRÈS assets/css/style.css. Ne modifie aucun contenu :
   uniquement la palette, les fonds, les ombres et quelques arrondis.

   Palette officielle de la caisse IZIII
     #dd2525  rouge
     #00bcd4  bleu
     #4caf50  vert
     #ff9b09  orange
     #7030a0  violet

   Rôles retenus
     violet  → identité, liens, structure profonde (hero, bandeaux, pied de page)
     bleu    → énergie, dégradés, liens en thème sombre, halos
     orange  → chaleur, appels à l'action, mises en garde
     vert    → validation, « inclus », coches
     rouge   → points forts, accents ponctuels

   Les cinq couleurs tournent ensemble sur les pictogrammes de cartes,
   les numéros d'étapes et les fiches de fonctionnalités : c'est ce qui
   remplace l'aspect monochrome de la version précédente.

   Chaque teinte existe en deux valeurs :
     - une valeur « vive »   → fonds, halos, teintes translucides
     - une valeur « lisible » → texte et pictogrammes (contraste AA sur blanc,
       et blanc lisible par-dessus quand elle sert de fond)
   ========================================================================= */

/* ---------- 1. Jetons de palette ---------- */

:root {
  /* Couleurs vives — telles quelles */
  --iz-rouge:  #dd2525;
  --iz-bleu:   #00bcd4;
  --iz-vert:   #4caf50;
  --iz-orange: #ff9b09;
  --iz-violet: #7030a0;

  /* Déclinaisons lisibles sur fond clair (et supportant du blanc en fond) */
  --iz-rouge-t:  #c11d1d;
  --iz-bleu-t:   #00778c;
  --iz-vert-t:   #2e7d32;
  --iz-orange-t: #a25f00;
  --iz-violet-t: #7030a0;

  /* Déclinaisons claires pour le thème sombre */
  --iz-rouge-d:  #ff7d76;
  --iz-bleu-d:   #4dd8ea;
  --iz-vert-d:   #7bd47f;
  --iz-orange-d: #ffb340;
  --iz-violet-d: #c194e0;

  /* --- Rampe « marque » : violet IZIII --- */
  --brand-800: #2b1247;
  --brand-700: #4a1e6a;
  --brand-600: #5c268a;
  --brand-500: #7030a0;   /* violet officiel — primaire */
  --brand-400: #9247c4;
  --brand-300: #c194e0;
  --brand-200: #e6d2f5;

  /* --- Accent : bleu IZIII --- */
  --accent-500: #0097ad;
  --accent-400: #00bcd4;  /* bleu officiel */

  /* --- Orange IZIII (ex-« gold ») --- */
  --gold-500: #a25f00;
  --gold-400: #ff9b09;

  /* --- Vert et rouge IZIII --- */
  --mint-600: #2e7d32;
  --mint-400: #4caf50;
  --rose-500: #dd2525;

  /* --- Fonds profonds : violet, plus jamais noir --- */
  --ink-950: #2b1247;
  --ink-900: #351858;
  --ink-850: #3f1d68;
  --ink-800: #4a2278;
  --ink-700: #5a2c8e;

  /* --- Neutres chauds (thème clair) --- */
  --bg:          #ffffff;
  --bg-alt:      #fdf7f0;
  --surface:     #ffffff;
  --surface-2:   #f8f4ef;
  --surface-3:   #eee6dc;
  --border:      #e7dfd5;
  --border-soft: #f3ece4;

  --txt:        #4b4640;
  --txt-strong: #1e1630;
  --txt-mute:   #6e675f;
  --link:       var(--brand-500);

  /* --- Ombres teintées violet plutôt que grises --- */
  --shadow-sm: 0 1px 2px rgba(45, 20, 75, .07), 0 1px 3px rgba(45, 20, 75, .05);
  --shadow-md: 0 4px 10px rgba(45, 20, 75, .06), 0 14px 30px rgba(45, 20, 75, .10);
  --shadow-lg: 0 8px 18px rgba(45, 20, 75, .09), 0 30px 64px rgba(45, 20, 75, .16);

  /* --- Arrondis un peu plus francs : moins « logiciel », plus accueillant --- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
}

/* ---------- 2. Thème sombre : violet profond, pas noir ---------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #150e24;
    --bg-alt:      #1b1230;
    --surface:     #1f1637;
    --surface-2:   #291d47;
    --surface-3:   #352757;
    --border:      #3d2d63;
    --border-soft: #2d2050;

    --txt:        #c5bcdb;
    --txt-strong: #ffffff;
    --txt-mute:   #968cb2;
    --link:       #6fe3f2;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, .4), 0 14px 30px rgba(0, 0, 0, .45);
    --shadow-lg: 0 8px 18px rgba(0, 0, 0, .45), 0 30px 64px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  --bg:          #150e24;
  --bg-alt:      #1b1230;
  --surface:     #1f1637;
  --surface-2:   #291d47;
  --surface-3:   #352757;
  --border:      #3d2d63;
  --border-soft: #2d2050;

  --txt:        #c5bcdb;
  --txt-strong: #ffffff;
  --txt-mute:   #968cb2;
  --link:       #6fe3f2;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, .4), 0 14px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 8px 18px rgba(0, 0, 0, .45), 0 30px 64px rgba(0, 0, 0, .6);
}

:root[data-theme="light"] {
  --bg:          #ffffff;
  --bg-alt:      #fdf7f0;
  --surface:     #ffffff;
  --surface-2:   #f8f4ef;
  --surface-3:   #eee6dc;
  --border:      #e7dfd5;
  --border-soft: #f3ece4;

  --txt:        #4b4640;
  --txt-strong: #1e1630;
  --txt-mute:   #6e675f;
  --link:       var(--brand-500);
}

/* ---------- 3. Signature : filet arc-en-ciel sous l'en-tête ---------- */

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--iz-rouge) 0%,
    var(--iz-orange) 26%,
    var(--iz-vert) 50%,
    var(--iz-bleu) 74%,
    var(--iz-violet) 100%);
  opacity: .9;
  pointer-events: none;
}

/* Le petit tiret des sur-titres reprend deux couleurs de la caisse */
.eyebrow::before {
  width: 26px;
  background: linear-gradient(90deg, var(--iz-orange), var(--iz-bleu));
}

/* ---------- 4. Hero : violet lumineux au lieu du noir ---------- */

.hero {
  background: linear-gradient(168deg, #3d1c64 0%, #2b1247 46%, #221a52 100%);
  color: #ded2f2;
}

.hero::before {
  background:
    radial-gradient(58% 52% at 15% 4%,   rgba(0, 188, 212, .38), transparent 62%),
    radial-gradient(46% 46% at 89% 12%,  rgba(255, 155, 9, .26), transparent 60%),
    radial-gradient(56% 62% at 66% 104%, rgba(146, 71, 196, .45), transparent 64%),
    radial-gradient(34% 40% at 38% 86%,  rgba(76, 175, 80, .14), transparent 62%);
}

/* La trame quadrillée faisait très « schéma technique » : on la remplace
   par un simple voile lumineux. */
.hero::after {
  background-image: radial-gradient(40% 48% at 76% 60%, rgba(255, 255, 255, .07), transparent 70%);
  background-size: auto;
  mask-image: none;
  -webkit-mask-image: none;
}

.hero .lead { color: #d5c8ee; }
.hero a { color: #7ee7f5; }
.hero-badge { color: #e9dffa; border-color: rgba(255, 255, 255, .18); }
.hero-badge svg { color: #7bd47f; }

.hero .media-slot {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .05);
  color: #b6a6d8;
}

/* ---------- 5. Boutons ---------- */

.btn-primary {
  background: linear-gradient(135deg, #7030a0 0%, #5b35ad 42%, #00758f 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(112, 48, 160, .32), 0 10px 24px rgba(112, 48, 160, .26);
}
.btn-primary:hover {
  box-shadow: 0 4px 12px rgba(112, 48, 160, .38), 0 18px 38px rgba(0, 117, 143, .30);
}

/* Sur les fonds violets, l'appel à l'action passe en orange : c'est lui
   qui doit accrocher l'œil. Texte foncé pour rester parfaitement lisible. */
.hero .btn-primary,
.cta-band .btn-primary {
  background: linear-gradient(135deg, #ffb340 0%, #ff9b09 100%);
  color: #3b2000;
  box-shadow: 0 2px 6px rgba(255, 155, 9, .34), 0 12px 28px rgba(255, 155, 9, .24);
}
.hero .btn-primary:hover,
.cta-band .btn-primary:hover {
  box-shadow: 0 4px 12px rgba(255, 155, 9, .42), 0 18px 38px rgba(255, 155, 9, .3);
}

.btn-ghost:hover { border-color: color-mix(in srgb, var(--iz-violet) 35%, var(--border)); }

/* ---------- 6. Bandeau d'appel à l'action ---------- */

.cta-band {
  background: linear-gradient(135deg, #3f1d68 0%, #5a2c8e 48%, #00738d 100%);
  color: #d9ccf2;
}
.cta-band::before {
  background:
    radial-gradient(52% 82% at 18% 0%,   rgba(0, 188, 212, .34), transparent 66%),
    radial-gradient(48% 74% at 86% 100%, rgba(255, 155, 9, .26), transparent 64%);
}
.cta-band p { color: #cfc0ec; }

/* ---------- 7. Pied de page ---------- */

.site-footer {
  background: linear-gradient(180deg, #2b1247 0%, #1d0d31 100%);
  color: #b2a3cd;
}
.site-footer a { color: #b2a3cd; }
.site-footer a:hover { color: #fff; }
.site-footer .brand .tag { color: #9384b0; border-color: rgba(255, 255, 255, .2); }
.footer-about { color: #a294c0; }
.footer-bottom {
  color: #9384b0;
  border-top-color: rgba(255, 255, 255, .12);
}

/* ---------- 8. Rotation des cinq couleurs ---------- */

/* Chaque élément d'une grille reçoit sa couleur ; les pictogrammes, les
   numéros d'étapes et les fiches de fonctionnalités s'en servent. */
.grid > *:nth-child(5n+1),
.steps > li:nth-child(5n+1) { --iz-c: var(--iz-violet); --iz-c-t: var(--iz-violet-t); --iz-c-d: var(--iz-violet-d); }
.grid > *:nth-child(5n+2),
.steps > li:nth-child(5n+2) { --iz-c: var(--iz-bleu);   --iz-c-t: var(--iz-bleu-t);   --iz-c-d: var(--iz-bleu-d); }
.grid > *:nth-child(5n+3),
.steps > li:nth-child(5n+3) { --iz-c: var(--iz-orange); --iz-c-t: var(--iz-orange-t); --iz-c-d: var(--iz-orange-d); }
.grid > *:nth-child(5n+4),
.steps > li:nth-child(5n+4) { --iz-c: var(--iz-vert);   --iz-c-t: var(--iz-vert-t);   --iz-c-d: var(--iz-vert-d); }
.grid > *:nth-child(5n+5),
.steps > li:nth-child(5n+5) { --iz-c: var(--iz-rouge);  --iz-c-t: var(--iz-rouge-t);  --iz-c-d: var(--iz-rouge-d); }

.card-icon {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--iz-c, var(--iz-violet)) 20%, transparent),
    color-mix(in srgb, var(--iz-c, var(--iz-violet)) 7%, transparent));
  border: 1px solid color-mix(in srgb, var(--iz-c, var(--iz-violet)) 30%, transparent);
  color: var(--iz-c-t, var(--iz-violet-t));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card-icon { color: var(--iz-c-d, var(--iz-violet-d)); }
}
:root[data-theme="dark"] .card-icon { color: var(--iz-c-d, var(--iz-violet-d)); }
:root[data-theme="light"] .card-icon { color: var(--iz-c-t, var(--iz-violet-t)); }

/* La carte survolée reprend sa propre couleur */
a.card:hover,
.card-hover:hover {
  border-color: color-mix(in srgb, var(--iz-c, var(--iz-violet)) 55%, var(--border));
}

/* Numéros d'étapes colorés */
.steps > li::before {
  background: linear-gradient(135deg,
    var(--iz-c-t, var(--iz-violet-t)),
    color-mix(in srgb, var(--iz-c-t, var(--iz-violet-t)) 74%, #000));
}

/* Fiches de fonctionnalités : un liseré coloré, la page respire */
.module { border-left: 3px solid var(--iz-c-t, var(--iz-violet-t)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .module { border-left-color: var(--iz-c-d, var(--iz-violet-d)); }
}
:root[data-theme="dark"] .module { border-left-color: var(--iz-c-d, var(--iz-violet-d)); }
:root[data-theme="light"] .module { border-left-color: var(--iz-c-t, var(--iz-violet-t)); }

/* ---------- 9. Détails ---------- */

/* Encadré « à noter » : orange franc */
.note { border-left-color: var(--iz-orange); }

/* Bandeau « tout inclus » : vert, c'est un message positif */
.included-banner {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--iz-vert) 14%, transparent),
    color-mix(in srgb, var(--iz-bleu) 9%, transparent));
  border-color: color-mix(in srgb, var(--iz-vert) 38%, var(--border));
}
.included-banner svg { color: var(--iz-vert-t); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .included-banner svg { color: var(--iz-vert-d); }
}
:root[data-theme="dark"] .included-banner svg { color: var(--iz-vert-d); }

/* Statistiques : dégradé violet → bleu */
.stat .num {
  background: linear-gradient(135deg, #7030a0, #0097ad);
  -webkit-background-clip: text;
  background-clip: text;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat .num {
    background: linear-gradient(135deg, #c194e0, #4dd8ea);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
:root[data-theme="dark"] .stat .num {
  background: linear-gradient(135deg, #c194e0, #4dd8ea);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Étiquettes : les trois variantes reprennent violet / vert / orange */
.tag-brand {
  background: color-mix(in srgb, var(--iz-violet) 13%, transparent);
  border-color: color-mix(in srgb, var(--iz-violet) 34%, transparent);
}
.tag-mint {
  background: color-mix(in srgb, var(--iz-vert) 16%, transparent);
  border-color: color-mix(in srgb, var(--iz-vert) 40%, transparent);
}
.tag-amber {
  background: color-mix(in srgb, var(--iz-orange) 20%, transparent);
  border-color: color-mix(in srgb, var(--iz-orange) 44%, transparent);
}

/* Navigation par pastilles */
.pill-nav a:hover {
  border-color: color-mix(in srgb, var(--iz-violet) 40%, var(--border));
  background: color-mix(in srgb, var(--iz-violet) 8%, var(--surface));
}

/* Emplacements d'images à fournir : liseré bleu, on les repère mieux */
.media-slot {
  border-color: color-mix(in srgb, var(--iz-bleu) 45%, var(--border));
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--iz-bleu) 8%, transparent),
      color-mix(in srgb, var(--iz-violet) 6%, transparent)),
    var(--surface-2);
}

/* Impression : on retire les fonds colorés */
@media print {
  .hero, .cta-band, .site-footer { background: #fff !important; color: #000 !important; }
  .site-header::after { display: none; }
}