/* =====================================================================
   MesRevisions.com — THÈME NÉON, version claire          PROPOSITION
   ---------------------------------------------------------------------
   Inspiré de l'affiche : violet, cyan et magenta électriques. Mais un
   site n'est pas une affiche. Sur fond noir, le cyan pur se lit à 11
   contre 1 ; sur fond blanc, il tombe à 1,77 — quatre fois en dessous
   du seuil lisible. Un site entièrement néon sur blanc serait illisible.

   D'où le parti pris : UNE bande sombre en haut, qui porte le néon
   véritable, et tout le reste en clair, où les mêmes couleurs
   reviennent en version profonde, mesurées au contraste.

   Contrastes vérifiés sur blanc (seuil 4,5) :
     --o-600 #7C3AED   5,70   porte du texte blanc (boutons)
     --o-700 #5B21B6   8,98   porte du texte
     --o-800 #4C1D95  10,95   titres et marque
     --g-700 #0E7490   5,36   porte du texte, et du blanc dessus
     --ink   #1E1B2E  16,78
     --muted #5E5878   6,68
   Décoratifs seulement, jamais sous du texte :
     cyan néon #00D4FF (1,77) et magenta néon #FF2D95 (3,46).
   Sur la bande sombre #0B0A14, ces deux-là passent à 11,11 et 5,68.

   Ce fichier ne remplace rien : il se charge APRÈS style.css et
   redéfinit les jetons de couleur. Retirer la ligne <link> suffit à
   revenir à l'orange.
   ===================================================================== */

:root{
  /* ---- le violet remplace l'orange, jeton pour jeton -------------- */
  --o-900:#3B0764;--o-800:#4C1D95;--o-700:#5B21B6;--o-600:#7C3AED;
  --o-500:#A855F7;--o-400:#C4B5FD;--o-300:#DDD6FE;--o-200:#EDE9FE;
  --o-100:#F5F3FF;--o-50:#FAFAFF;--o-25:#FDFCFF;

  /* ---- le cyan remplace le vert ----------------------------------- */
  --g-900:#083344;--g-800:#155E75;--g-700:#0E7490;--g-600:#0891B2;
  --g-500:#22B8CF;--g-400:#67E8F9;--g-300:#A5F3FC;--g-200:#CFFAFE;
  --g-100:#ECFEFF;--g-50:#F5FDFF;

  --ink:#1E1B2E;--muted:#5E5878;--danger:#DC2626;
  --blue:#6366F1;--blue-fonce:#4F46E5;
  --shadow-sm:0 1px 3px rgba(59,7,100,.06);
  --shadow-md:0 8px 22px -10px rgba(59,7,100,.16);

  /* les trois néons purs, réservés au décor */
  --neon-cyan:#00D4FF;--neon-magenta:#FF2D95;--neon-violet:#A855F7;
  --nuit:#0B0A14;
}

/* accueil.css a ses propres jetons, dérivés des précédents */
:root{
  --violet:#7C3AED;
  --creme:#FAFAFF;
  --trait:#EDE9FE;
  --sur-bande-doux:#155E75;
  --ombre:0 8px 22px -10px rgba(59,7,100,.16);
  --ombre-douce:0 1px 3px rgba(59,7,100,.06);
}

/* --------------------------------------------------- la barre du haut */
.nav{background:rgba(255,255,255,.92);border-bottom:1px solid var(--o-200)}

/* =====================================================================
   LA BANDE SOMBRE : le seul endroit où le néon est vraiment du néon.
   Les halos sont des dégradés radiaux posés en fond, pas des ombres :
   une ombre portée coûte cher à l'affichage et bave sur les bords.
   ===================================================================== */
.heros{
  background:
    radial-gradient(60% 55% at 18% 28%, rgba(168,85,247,.38), transparent 70%),
    radial-gradient(55% 50% at 82% 30%, rgba(0,212,255,.22), transparent 70%),
    radial-gradient(45% 45% at 62% 88%, rgba(255,45,149,.20), transparent 70%),
    var(--nuit);
  color:#fff;
}
/* Le trait lumineux qui ferme la bande, comme le bord d'un néon. */
.heros::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--neon-violet),var(--neon-magenta),var(--neon-cyan));
  opacity:.85;
}
.heros h1{color:#fff;text-shadow:0 0 36px rgba(168,85,247,.45)}

/* Le dégradé du titre : violet → magenta → cyan, comme sur l'affiche.
   « background-clip:text » peint le texte avec le dégradé. Un
   navigateur qui ne le connaît pas ignore la règle et affiche la
   couleur de repli — jamais un titre invisible. */
.heros .surligne{
  color:var(--neon-cyan);
  background:linear-gradient(100deg,#C4B5FD 0%,var(--neon-magenta) 45%,var(--neon-cyan) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .heros .surligne{-webkit-text-fill-color:currentColor}
}
.heros .chapeau,.heros .note-heros{color:#C9C4E0}
.heros .chapeau b,.heros .chapeau strong{color:#fff}

/* Sur fond sombre, un bouton plein blanc attire l'œil mieux qu'un
   bouton coloré : c'est le seul aplat clair de la bande. */
.heros .btn{background:linear-gradient(100deg,#7C3AED,#C026D3);color:#fff;
  box-shadow:0 0 28px -6px rgba(168,85,247,.7)}
.heros .btn:hover{background:linear-gradient(100deg,#6D28D9,#A21CAF)}
.heros .btn.green{background:#fff;color:#3B0764;box-shadow:0 0 28px -8px rgba(0,212,255,.8)}
.heros .btn.green:hover{background:#EDE9FE}
.heros .btn.ghost,.heros .btn.alt{background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.35)}
.heros .btn.ghost:hover,.heros .btn.alt:hover{background:rgba(255,255,255,.16)}
.heros .badge{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}

/* La barre du haut est TRANSPARENTE tant qu'on n'a pas défilé : elle
   flotte alors au-dessus de la bande sombre, et son texte, prévu pour du
   blanc, devient illisible. Tant qu'elle n'a pas la classe « posee »,
   elle s'habille donc en clair. Mesuré sur #0B0A14 : #D7D2EA donne 13,4
   et le violet d'origine 1,8 — invisible. */
.barre:not(.posee) .brand,
.barre:not(.posee) .marque{color:#fff}
.barre:not(.posee) .coin-barre .navlink{color:#D7D2EA}
.barre:not(.posee) .coin-barre .navlink:hover{color:#fff;background:rgba(255,255,255,.14)}
.barre:not(.posee) .coin-barre .btn.alt{background:rgba(255,255,255,.10);color:#fff;
  border-color:rgba(255,255,255,.40)}
.barre:not(.posee) .coin-barre .btn.alt:hover{background:rgba(255,255,255,.18)}
.barre:not(.posee) .coin-barre .user-chip{background:rgba(255,255,255,.12);color:#fff;
  border-color:rgba(255,255,255,.28)}

/* Les compteurs de la bande sombre : le violet des boutons tombe à 3,45
   sur ce fond. On monte d'un cran dans la gamme. */
.heros .preuve b{color:#C4B5FD}
.heros .preuve span{color:#C9C4E0}
.heros .preuves{border-top-color:rgba(255,255,255,.18)}

/* --------------------------------------------- le reste reste clair */
body{background:#fff}
.surligne{color:var(--o-700)}
.surligne-menthe{color:var(--g-800)}

/* Le prix, seul endroit du corps de page où l'on retrouve le dégradé :
   c'est le chiffre que l'affiche met en avant. */
.offre.vedette .prix,.prix-fort{
  background:linear-gradient(100deg,#7C3AED,#C026D3 60%,#0E7490);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* Les cartes gagnent un filet lumineux plutôt qu'une ombre grise. */
.offre.vedette{border-color:var(--o-400);box-shadow:0 0 0 1px var(--o-200),0 14px 34px -18px rgba(124,58,237,.45)}
.theme-titre{color:var(--o-700);border-bottom-color:var(--o-200)}

/* Le pied de page reprend la nuit du haut : le site est tenu par ses
   deux extrémités, et le clair respire entre les deux. */
.pied,.footer{background:var(--nuit);color:#C9C4E0;border-top:0}
.pied a,.footer a{color:#C4B5FD}
.pied a:hover,.footer a:hover{color:var(--neon-cyan)}
.pied p,.footer p{color:#C9C4E0}

/* ----------------------------------------------- écrans étroits */
@media (max-width:760px){
  /* Trois halos superposés sur un téléphone, c'est du calcul pour rien :
     on n'en garde qu'un. */
  .heros{background:radial-gradient(80% 50% at 50% 20%, rgba(168,85,247,.35), transparent 70%),var(--nuit)}
}

/* --------------------------------------------------- impression */
@media print{
  .heros{background:#fff!important;color:#000!important}
  .heros h1{color:#000!important;text-shadow:none!important}
  .heros .surligne{-webkit-text-fill-color:#000!important;color:#000!important}
  .pied,.footer{background:#fff!important;color:#000!important}
}