/* LuaClean — feuille de style unique.
 *
 * Style « Modern Dark » : fond ardoise profond, accent vert d'execution, monospace pour
 * tout ce qui est technique (cles, chiffres, code) et sans-serif pour la prose. Le fond
 * evite le noir pur, qui bave sur les dalles OLED et durcit inutilement le contraste.
 *
 * Pas de framework, pas d'etape de construction : le fichier part tel quel sur
 * l'hebergement. Les jetons ci-dessous sont le seul endroit ou changer une couleur.
 */

/* --- Jetons ---------------------------------------------------------------- */

:root {
  --fond:            #0F172A;
  --fond-eleve:      #151F35;
  --fond-carte:      #1A2438;
  --muet:            #272F42;
  --primaire:        #1E293B;
  --secondaire:      #334155;
  --bordure:         #2C3A52;
  --bordure-vive:    #475569;

  --texte:           #F8FAFC;
  --texte-doux:      #B6C2D4;   /* 7.4:1 sur --fond : lisible, pas gris-sur-gris */
  --texte-faible:    #8A99AE;   /* 4.9:1 sur --fond, reserve aux notes courtes */

  --accent:          #22C55E;
  --accent-vif:      #4ADE80;
  --accent-sourd:    rgba(34, 197, 94, 0.12);
  --accent-bord:     rgba(34, 197, 94, 0.35);
  --alerte:          #EF4444;
  --alerte-sourd:    rgba(239, 68, 68, 0.12);
  --attention:       #F59E0B;
  --attention-sourd: rgba(245, 158, 11, 0.12);

  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace;

  --e1: 0.5rem;   --e2: 1rem;    --e3: 1.5rem;
  --e4: 2rem;     --e5: 3rem;    --e6: 4rem;    --e7: 6rem;

  --r1: 8px;  --r2: 12px;  --r3: 16px;  --r4: 24px;

  --ombre: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  --ombre-haute: 0 2px 4px rgba(0,0,0,.35), 0 20px 48px rgba(0,0,0,.42);

  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --largeur: 1140px;
}

/* --- Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* Halo d'ambiance : deux taches tres diluees, fixes. Aucune animation — elles
     couteraient un repaint permanent pour un effet que personne ne remarque. */
  background-image:
    radial-gradient(900px 500px at 12% -8%,  rgba(34,197,94,.09), transparent 60%),
    radial-gradient(800px 500px at 92% 0%,   rgba(56,120,255,.07), transparent 62%);
  background-attachment: fixed;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--e2); font-weight: 600;
                 letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.25rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 var(--e2); color: var(--texte-doux); }

a { color: var(--accent-vif); text-decoration-color: rgba(74,222,128,.35);
    text-underline-offset: 3px; transition: color var(--transition); }
a:hover { color: var(--accent); }

code, kbd, .mono { font-family: var(--mono); font-size: 0.92em; }

/* Le focus doit rester visible : le retirer rend le site inutilisable au clavier. */
:focus-visible {
  outline: 2px solid var(--accent-vif);
  outline-offset: 3px;
  border-radius: 4px;
}

.saut-au-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #052e16; padding: var(--e1) var(--e2);
  border-radius: 0 0 var(--r1) 0; font-weight: 600;
}
.saut-au-contenu:focus { left: 0; }

.contenant { width: 100%; max-width: var(--largeur); margin: 0 auto;
             padding-left: var(--e3); padding-right: var(--e3); }

.section { padding: var(--e7) 0; }
.section-serree { padding: var(--e5) 0; }

.titre-section { text-align: center; max-width: 42rem; margin: 0 auto var(--e5); }
.titre-section p { color: var(--texte-doux); font-size: 1.05rem; }

.surtitre {
  display: inline-block; font-family: var(--mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-vif);
  background: var(--accent-sourd); border: 1px solid var(--accent-bord);
  padding: 0.3rem 0.7rem; border-radius: 999px; margin-bottom: var(--e2);
}

/* --- Boutons --------------------------------------------------------------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  /* 44px de haut au minimum : c'est la cible tactile en dessous de laquelle on rate
     le bouton au doigt. */
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  border-radius: var(--r1);
  border: 1px solid var(--bordure-vive);
  background: var(--secondaire);
  color: var(--texte);
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform var(--transition), background var(--transition),
              border-color var(--transition), box-shadow var(--transition);
}
.bouton:hover { background: #3d4c66; border-color: var(--bordure-vive); color: var(--texte); }
.bouton:active { transform: scale(0.975); }

.bouton-accent {
  background: var(--accent); border-color: var(--accent);
  color: #052e16;   /* 8.9:1 sur le vert — le blanc n'y passerait pas AA */
}
.bouton-accent:hover {
  background: var(--accent-vif); border-color: var(--accent-vif); color: #052e16;
  box-shadow: 0 6px 22px rgba(34,197,94,.28);
}

.bouton-fantome { background: transparent; border-color: var(--bordure-vive); }
.bouton-fantome:hover { background: var(--muet); }

.bouton-compact { padding: 0.5rem 1rem; font-size: 0.88rem; min-height: 40px; }
.bouton-large   { width: 100%; }

.bouton[aria-disabled="true"], .bouton:disabled {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* --- En-tete --------------------------------------------------------------- */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordure);
}
.entete-barre { display: flex; align-items: center; gap: var(--e3);
                min-height: 66px; }

.marque { display: inline-flex; align-items: center; gap: 0.6rem;
          font-weight: 700; font-size: 1.08rem; color: var(--texte);
          text-decoration: none; letter-spacing: -0.02em; }
.marque-logo { width: 26px; height: 26px; color: var(--accent); flex: none; }

.navigation { display: flex; gap: var(--e1); margin-left: auto; }
.navigation a {
  padding: 0.5rem 0.85rem; border-radius: var(--r1);
  color: var(--texte-doux); text-decoration: none; font-size: 0.93rem; font-weight: 500;
  transition: color var(--transition), background var(--transition);
}
.navigation a:hover { color: var(--texte); background: var(--muet); }
.navigation a[aria-current="page"] { color: var(--accent-vif); background: var(--accent-sourd); }

/* --- Accueil --------------------------------------------------------------- */

.heros { padding: var(--e7) 0 var(--e6); text-align: center; }
.heros h1 { max-width: 20ch; margin-inline: auto; }
.heros-sous-titre {
  font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--texte-doux);
  max-width: 56ch; margin: 0 auto var(--e4);
}
.heros-actions { display: flex; gap: var(--e2); justify-content: center;
                 flex-wrap: wrap; margin-bottom: var(--e2); }
.heros-note { font-size: 0.86rem; color: var(--texte-faible); }

.chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e2); margin-top: var(--e6);
}
.chiffre {
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--r2); padding: var(--e3) var(--e2); text-align: center;
}
.chiffre-valeur { font-family: var(--mono); font-size: 1.7rem; font-weight: 700;
                  color: var(--accent-vif); display: block; line-height: 1.1; }
.chiffre-nom { font-size: 0.82rem; color: var(--texte-faible); margin: 0.4rem 0 0; }

/* Avant / apres */
.avant-apres { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.volet {
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--r2); overflow: hidden;
}
.volet-entete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem var(--e2); border-bottom: 1px solid var(--bordure);
  background: var(--fond-eleve);
  font-family: var(--mono); font-size: 0.78rem; color: var(--texte-faible);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.volet-etiquette { font-weight: 700; }
.volet.est-apres .volet-etiquette { color: var(--accent-vif); }
.volet pre {
  margin: 0; padding: var(--e2); overflow-x: auto;
  font-family: var(--mono); font-size: 0.79rem; line-height: 1.65;
  color: var(--texte-doux); tab-size: 2;
}
.volet pre .cmt { color: #6B7A90; font-style: italic; }
.volet pre .kw  { color: #C4B5FD; }
.volet pre .id  { color: var(--accent-vif); }
.volet pre .nb  { color: #FBBF24; }
.volet pre .st  { color: #7DD3FC; }

/* --- Cartes generiques ------------------------------------------------------ */

.grille-cartes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--e2);
}
.carte {
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--r3); padding: var(--e3);
  transition: border-color var(--transition), transform var(--transition);
}
.carte:hover { border-color: var(--bordure-vive); }
.carte h3 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.carte p:last-child { margin-bottom: 0; }
.carte-icone { width: 22px; height: 22px; color: var(--accent); flex: none; }

/* --- Tarifs ---------------------------------------------------------------- */

.grille-tarifs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e2); align-items: stretch;
}
.tarif {
  position: relative; display: flex; flex-direction: column;
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--r3); padding: var(--e3);
  transition: border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.tarif:hover { border-color: var(--bordure-vive); transform: translateY(-3px);
               box-shadow: var(--ombre); }
.tarif.est-mis-en-avant {
  border-color: var(--accent-bord);
  background: linear-gradient(180deg, var(--accent-sourd) 0%, var(--fond-carte) 42%);
  box-shadow: var(--ombre-haute);
}
.tarif-ruban {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #052e16;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.25rem 0.8rem; border-radius: 999px; white-space: nowrap;
}
.tarif-nom { font-size: 1.12rem; font-weight: 600; margin: 0 0 0.2rem; }
.tarif-accroche { font-size: 0.86rem; color: var(--texte-faible); margin: 0 0 var(--e2);
                  min-height: 2.4em; }
.tarif-prix { display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 0.3rem; }
.tarif-montant { font-family: var(--mono); font-size: 2.5rem; font-weight: 700;
                 color: var(--texte); line-height: 1; letter-spacing: -0.03em; }
.tarif-periode { font-size: 0.86rem; color: var(--texte-faible); }
.tarif-unitaire { font-family: var(--mono); font-size: 0.78rem; color: var(--accent-vif);
                  margin: 0 0 var(--e2); min-height: 1.4em; }
.tarif-economie {
  display: inline-block; font-size: 0.74rem; font-weight: 600;
  color: var(--accent-vif); background: var(--accent-sourd);
  border: 1px solid var(--accent-bord); border-radius: 999px;
  padding: 0.15rem 0.55rem; margin-bottom: var(--e2);
}
.tarif-liste { list-style: none; margin: 0 0 var(--e3); padding: 0;
               display: grid; gap: 0.55rem; flex: 1; }
.tarif-liste li { display: flex; gap: 0.6rem; align-items: flex-start;
                  font-size: 0.9rem; color: var(--texte-doux); }
.tarif-liste li.est-absent { color: var(--texte-faible); }
.puce { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.puce-oui { color: var(--accent); }
.puce-non { color: var(--texte-faible); }
.tarif-note { font-size: 0.78rem; color: var(--texte-faible); margin: 0.7rem 0 0;
              text-align: center; }

.bascule {
  display: inline-flex; gap: 0.25rem; padding: 0.25rem; margin: 0 auto var(--e4);
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: 999px;
}
.bascule button {
  min-height: 40px; padding: 0.45rem 1.15rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--texte-doux);
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.bascule button:hover { color: var(--texte); }
.bascule button[aria-selected="true"] { background: var(--accent); color: #052e16; }

/* --- Tableau comparatif ----------------------------------------------------- */

.enveloppe-tableau {
  /* Un tableau large doit defiler dans sa propre boite : sans ca, c'est toute la page
     qui defile lateralement sur telephone. */
  overflow-x: auto;
  border: 1px solid var(--bordure); border-radius: var(--r3);
  background: var(--fond-carte);
}
table.comparatif { width: 100%; border-collapse: collapse; min-width: 620px; }
table.comparatif th, table.comparatif td {
  padding: 0.85rem var(--e2); text-align: center; font-size: 0.9rem;
  border-bottom: 1px solid var(--bordure);
}
table.comparatif thead th {
  position: sticky; top: 0; background: var(--fond-eleve);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texte-faible); font-weight: 600;
}
table.comparatif tbody th {
  text-align: left; font-weight: 500; color: var(--texte-doux);
  min-width: 260px;
}
table.comparatif tbody tr:last-child th,
table.comparatif tbody tr:last-child td { border-bottom: 0; }
table.comparatif tbody tr:hover { background: rgba(255,255,255,.022); }
table.comparatif .col-accent { color: var(--accent-vif); font-weight: 600; }
table.comparatif td .mono { font-family: var(--mono); }

/* --- Questions -------------------------------------------------------------- */

.questions { display: grid; gap: 0.7rem; max-width: 52rem; margin: 0 auto; }
.question {
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--r2); overflow: hidden;
}
.question summary {
  padding: var(--e2) var(--e3); cursor: pointer; font-weight: 600; font-size: 0.98rem;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  list-style: none; min-height: 44px;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: ''; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--texte-faible); border-bottom: 2px solid var(--texte-faible);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition);
}
.question[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.question summary:hover { background: var(--muet); }
.question-corps { padding: 0 var(--e3) var(--e3); }
.question-corps p { margin: 0; font-size: 0.93rem; }

/* --- Encarts ---------------------------------------------------------------- */

.encart {
  border: 1px solid var(--bordure); border-left: 3px solid var(--accent);
  background: var(--fond-carte); border-radius: var(--r2);
  padding: var(--e2) var(--e3); margin: var(--e3) 0;
}
.encart p:last-child { margin-bottom: 0; }
.encart-titre { font-weight: 600; color: var(--texte); margin-bottom: 0.35rem;
                display: flex; align-items: center; gap: 0.5rem; }
.encart.est-alerte      { border-left-color: var(--alerte); }
.encart.est-attention   { border-left-color: var(--attention); }

/* --- Cle delivree ----------------------------------------------------------- */

.bloc-cle {
  background: var(--fond-eleve); border: 1px solid var(--accent-bord);
  border-radius: var(--r2); padding: var(--e3); text-align: center;
  margin: var(--e3) 0;
}
.cle-valeur {
  display: block; font-family: var(--mono); font-weight: 700;
  font-size: clamp(1rem, 3.4vw, 1.5rem); letter-spacing: 0.06em;
  color: var(--accent-vif); word-break: break-all; margin-bottom: var(--e2);
  user-select: all;   /* un clic selectionne toute la cle */
}
.cle-actions { display: flex; gap: var(--e1); justify-content: center; flex-wrap: wrap; }

.etapes { list-style: none; counter-reset: etape; padding: 0; margin: 0;
          display: grid; gap: var(--e2); }
.etapes li { counter-increment: etape; display: grid;
             grid-template-columns: 34px 1fr; gap: var(--e2); align-items: start; }
.etapes li::before {
  content: counter(etape); grid-row: span 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--accent-sourd); border: 1px solid var(--accent-bord);
  border-radius: 50%; color: var(--accent-vif);
  font-family: var(--mono); font-weight: 700; font-size: 0.88rem;
}
.etapes strong { display: block; margin-bottom: 0.15rem; }
.etapes p { margin: 0; font-size: 0.91rem; }

/* --- Pied ------------------------------------------------------------------- */

.pied { border-top: 1px solid var(--bordure); margin-top: var(--e7);
        padding: var(--e5) 0 var(--e3); background: rgba(0,0,0,.16); }
.pied-grille { display: grid; grid-template-columns: 2fr 1fr 1fr;
               gap: var(--e4); margin-bottom: var(--e4); }
.pied-grille a { display: block; color: var(--texte-doux); text-decoration: none;
                 font-size: 0.9rem; padding: 0.25rem 0; }
.pied-grille a:hover { color: var(--accent-vif); }
.pied-marque { font-weight: 700; font-size: 1.05rem; color: var(--texte); margin-bottom: 0.3rem; }
.pied-titre { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em;
              color: var(--texte-faible); font-weight: 600; margin-bottom: 0.5rem; }
.pied-note { font-size: 0.87rem; color: var(--texte-faible); margin: 0; }
.pied-bas { border-top: 1px solid var(--bordure); padding-top: var(--e2); }
.pied-bas p { font-size: 0.8rem; color: var(--texte-faible); margin: 0; text-align: center; }

/* --- Divers ----------------------------------------------------------------- */

.centre { text-align: center; }
.pile { display: grid; gap: var(--e2); }
.discret { color: var(--texte-faible); font-size: 0.86rem; }

/* --- Responsive -------------------------------------------------------------- */

@media (max-width: 900px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .avant-apres { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .section { padding: var(--e5) 0; }
  .heros { padding: var(--e5) 0 var(--e4); }
  .contenant { padding-left: var(--e2); padding-right: var(--e2); }
  /* La navigation passe sous la marque plutot que de deborder. */
  .entete-barre { flex-wrap: wrap; gap: var(--e1); padding-top: 0.6rem;
                  padding-bottom: 0.6rem; }
  .navigation { order: 3; width: 100%; margin-left: 0; justify-content: space-between; }
  .navigation a { flex: 1; text-align: center; padding: 0.55rem 0.4rem; }
  .pied-grille { grid-template-columns: 1fr; gap: var(--e3); }
  .heros-actions .bouton { width: 100%; }
}

/* Certaines personnes ont mal au coeur avec le mouvement, et le systeme le signale.
   On le respecte : rien d'essentiel ne depend d'une animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .tarif:hover { transform: none; }
}