/* mon-seo.info — sobre et dense. Un outil qu'on ouvre le matin pour lire des chiffres. */
:root {
  --fond: #0a0a0b;
  --carte: #141417;
  --encre: #f4f4f5;
  --encre-douce: #b3b3bc;
  --encre-legere: #7a7a85;
  --trait: #27272c;
  --accent: #ff6b1a;
  --accent-fonce: #ff8a45;
  --accent-pale: rgba(255, 107, 26, .14);
  --accent-texte: #ffffff;
  --vert: #3ecf6e;
  --vert-pale: rgba(62, 207, 110, .14);
  --rouge: #ff5c5c;
  --rouge-pale: rgba(255, 92, 92, .14);
  --jaune-pale: rgba(255, 196, 61, .14);
  --champ: #0f0f11;
  --champ-bord: #34343b;
  --survol: #1b1b1f;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--sans); line-height: 1.5; }
a { color: var(--accent); }
a:hover { color: var(--accent-fonce); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8rem; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
small { color: var(--encre-douce); font-weight: 400; }
.visuellement-cache { position: absolute; left: -9999px; }

/* En-tête */
.entete { background: var(--carte); border-bottom: 1px solid var(--trait); }
.entete-int { max-width: 1040px; margin: 0 auto; padding: .6rem 1.2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.entete-int.large { max-width: 1280px; }
.logo { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--encre); text-decoration: none; font-size: 1.05rem; }
.logo svg { color: var(--accent); }
.logo span { color: var(--accent); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.nav a { color: var(--encre-douce); text-decoration: none; font-weight: 500; font-size: .95rem; padding: .25rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a.actif { color: var(--encre); border-bottom-color: var(--accent); }
.nav a.btn { border-bottom: 1px solid var(--accent); color: var(--accent-texte); font-weight: 600; padding: .55rem 1.1rem; line-height: 1.2; border-radius: 6px; }
.nav a.btn:hover { color: var(--accent-texte); background: var(--accent-fonce); border-color: var(--accent-fonce); }
.pastille-solde { background: var(--accent-pale); color: var(--accent) !important; padding: .2rem .6rem !important; border-radius: 999px; border-bottom: 0 !important; font-size: .85rem !important; }
.inline { display: inline; }
button.lien { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; }
.nav button.lien { text-decoration: none; color: var(--encre-douce); }
.nav button.lien:hover { color: var(--encre); }

/* Contenu */
.contenu { max-width: 1040px; margin: 0 auto; padding: 1.4rem 1.2rem 3rem; }
.contenu.large { max-width: 1280px; }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: 1.1rem 1.25rem; margin-bottom: 1.1rem; }
.carte-etroite { max-width: 440px; margin: 2rem auto; }
.carte-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.carte-tete h2 { margin: 0; }
.barre-titre { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.barre-titre h1 { margin: 0; }
.sous-titre { color: var(--encre-douce); margin-top: -.2rem; }
.sous-titre-inline { color: var(--encre-douce); font-size: .95rem; }
.aide { color: var(--encre-douce); font-size: .88rem; }
.lien-secondaire { color: var(--encre-douce); font-weight: 500; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
.deux-colonnes .carte { margin-bottom: 0; }
.deux-colonnes + .carte { margin-top: 1.1rem; }
@media (max-width: 820px) { .deux-colonnes { grid-template-columns: 1fr; } }

/* Messages */
.flash, .bandeau { padding: .7rem 1rem; border-radius: 6px; margin-bottom: 1rem; border: 1px solid var(--trait); background: var(--carte); font-size: .95rem; }
.flash-succes { background: var(--vert-pale); border-color: rgba(62, 207, 110, .4); }
.flash-erreur, .bandeau-alerte { background: var(--rouge-pale); border-color: rgba(255, 92, 92, .4); }
.flash-info, .bandeau-info { background: var(--jaune-pale); border-color: rgba(255, 196, 61, .4); }
.erreur { color: var(--rouge); background: var(--rouge-pale); padding: .55rem .8rem; border-radius: 6px; }

/* Formulaires */
.formulaire label { display: block; margin-bottom: .9rem; font-weight: 500; }
.formulaire label small { display: block; font-weight: 400; margin-top: .2rem; }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=password], .formulaire select, .formulaire textarea, .filtre select {
  display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem; font: inherit; color: var(--encre);
  border: 1px solid var(--champ-bord); border-radius: 6px; background: var(--champ);
}
.filtre select { display: inline-block; width: auto; margin: 0; }
.formulaire textarea { font-family: var(--mono); font-size: .92rem; resize: vertical; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.formulaire fieldset { border: 0; padding: 0; margin: 0 0 .9rem; }
.formulaire legend { font-weight: 500; margin-bottom: .3rem; padding: 0; }
.formulaire .case { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; margin-bottom: .5rem; }
.formulaire .case input { margin-top: .3rem; flex: none; }
.formulaire-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.formulaire-2col .pleine-largeur { grid-column: 1 / -1; }
@media (max-width: 640px) { .formulaire-2col { grid-template-columns: 1fr; } }
.leurre { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.estimation { background: var(--accent-pale); color: var(--accent-fonce); padding: .55rem .8rem; border-radius: 6px; font-weight: 500; }

.btn { display: inline-block; background: var(--accent); color: var(--accent-texte); border: 1px solid var(--accent); border-radius: 6px; padding: .55rem 1.1rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.3; }
.btn:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: var(--accent-texte); }
.btn-secondaire { background: transparent; color: var(--accent); }
.btn-secondaire:hover { background: var(--accent-pale); color: var(--accent-fonce); }
.btn-danger { background: transparent; color: var(--rouge); border-color: rgba(255, 92, 92, .5); }
.btn-danger:hover { background: var(--rouge-pale); color: var(--rouge); }
.btn-petit { padding: .35rem .75rem; font-size: .9rem; }
.btn-grand { padding: .8rem 1.5rem; font-size: 1.05rem; }
.actions-groupe { display: flex; gap: .5rem; flex-wrap: wrap; }
.zone-danger { margin-top: 1rem; border-top: 1px solid var(--trait); padding-top: .8rem; }
.zone-danger summary { color: var(--rouge); cursor: pointer; font-weight: 500; }
.zone-danger form { margin-top: .8rem; }
details > summary.h2 { cursor: pointer; list-style: none; }
details > summary.h2::before { content: "▸ "; color: var(--accent); }
details[open] > summary.h2::before { content: "▾ "; }
details > summary + * { margin-top: .8rem; }

/* Tableaux */
.defilant { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tableau th, .tableau td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau th { color: var(--encre-douce); font-weight: 500; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.tableau tbody tr:hover { background: var(--survol); }
.tableau .num { text-align: right; white-space: nowrap; }
.tableau .terme { font-weight: 500; }
.tableau .url { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.tableau .spark { width: 130px; }
.tableau .spark svg { display: block; width: 120px; height: 28px; }
.tableau .actions { text-align: right; white-space: nowrap; }
tr.en-pause td { color: var(--encre-legere); }
.etiquette { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; background: var(--survol); color: var(--encre-douce); border-radius: 4px; padding: .05rem .4rem; vertical-align: middle; font-weight: 500; }
.tris { font-size: .88rem; color: var(--encre-douce); }
.tris a { margin: 0 .15rem; }
.tris a.actif { font-weight: 600; text-decoration: none; color: var(--encre); }

/* Positions et écarts : les seules couleurs vives */
.position { font-weight: 500; font-size: 1rem; }
.position.top3 { color: var(--vert); font-weight: 600; }
.position.top10 { color: var(--accent); font-weight: 600; }
.position.hors, .position.attente { color: var(--encre-legere); font-family: var(--mono); }
.ecart { font-weight: 500; white-space: nowrap; }
.ecart.hausse, .hausse { color: var(--vert); }
.ecart.baisse, .baisse { color: var(--rouge); }
.ecart.neutre { color: var(--encre-legere); }

/* Tuiles */
.tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.1rem; }
.tuile { display: flex; flex-direction: column; gap: .15rem; margin: 0; padding: .9rem 1.1rem; }
.tuile-libelle { color: var(--encre-douce); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
.tuile-valeur { font-size: 1.7rem; font-weight: 500; line-height: 1.1; }
.tuile-valeur small { color: var(--encre-legere); font-size: 1rem; }
.tuile-detail { color: var(--encre-douce); font-size: .85rem; }
@media (max-width: 900px) { .tuiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tuiles { grid-template-columns: 1fr; } }

/* Courbes SVG */
.courbe { width: 100%; height: auto; display: block; overflow: visible; }
.courbe .ligne { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.courbe .point { fill: var(--carte); stroke: var(--accent); stroke-width: 1.5; }
.courbe .grille { stroke: var(--trait); stroke-width: 1; }
.courbe .axe { fill: var(--encre-legere); font-family: var(--mono); font-size: 11px; }
.courbe .hors { fill: var(--rouge); opacity: .35; }
.courbe .courbe-vide { fill: var(--encre-legere); font-size: 13px; }
.tableau .courbe .ligne { stroke-width: 1.5; }

/* États vides */
.vide { text-align: center; padding: 2.5rem 1.5rem; }
.vide h2 { font-size: 1.25rem; }
.vide p { max-width: 520px; margin: 0 auto 1.2rem; color: var(--encre-douce); }

/* Accueil */
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; padding: 2.5rem 0 2rem; }
.hero h1 { font-size: 2.1rem; margin-bottom: 1rem; }
.hero-sous { font-size: 1.1rem; color: var(--encre-douce); }
.hero-actions { display: flex; gap: 1.2rem; align-items: center; margin: 1.4rem 0 .6rem; flex-wrap: wrap; }
.hero-note { color: var(--encre-legere); font-size: .88rem; }
.hero-demo { margin: 0; padding: 1rem 1.1rem .4rem; }
.demo-tete { display: flex; gap: 1rem; align-items: baseline; font-weight: 500; margin-bottom: .4rem; }
.demo-tete .position { margin-left: auto; }
.demo-tableau { margin-top: .5rem; }
.demo-tableau td:last-child, .demo-tableau td:nth-child(2) { text-align: right; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding-top: 1.2rem; } .hero h1 { font-size: 1.7rem; } }
.bloc { padding: 1.6rem 0; }
.bloc h2 { font-size: 1.45rem; margin-bottom: 1rem; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 820px) { .grille-3 { grid-template-columns: 1fr; } }
.etape { margin: 0; position: relative; }
.etape .numero { display: inline-block; background: var(--accent); color: var(--accent-texte); border-radius: 999px; width: 2rem; height: 2rem; text-align: center; line-height: 2rem; font-weight: 500; margin-bottom: .6rem; }
.etape p { color: var(--encre-douce); margin: 0; }
.bloc-pourquoi p { max-width: 760px; color: var(--encre-douce); font-size: 1.02rem; }
.liste-points { padding-left: 1.2rem; max-width: 760px; }
.liste-points li { margin-bottom: .5rem; color: var(--encre-douce); }
.liste-points strong { color: var(--encre); }
.grille-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1rem 0; }
@media (max-width: 960px) { .grille-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grille-plans { grid-template-columns: 1fr; } }
.plan { margin: 0; display: flex; flex-direction: column; }
.plan h3 { font-size: 1.05rem; }
.plan .prix { font-size: 1.5rem; font-weight: 500; margin: .2rem 0 .6rem; }
.plan .prix small { font-size: .9rem; color: var(--encre-douce); }
.plan ul { list-style: none; padding: 0; margin: 0 0 1rem; color: var(--encre-douce); font-size: .93rem; flex: 1; }
.plan li { padding: .2rem 0; border-bottom: 1px dashed var(--trait); }
.plan li strong { color: var(--encre); }
.plan-mis-en-avant { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 12px 40px rgba(255, 107, 26, .12); }
.plan-courant { background: var(--accent-pale); }
.plan .btn { text-align: center; }
.plan a.btn { color: var(--accent-texte); }
.plan a.btn-secondaire { color: var(--accent); }
.faq details { background: var(--carte); border: 1px solid var(--trait); border-radius: 6px; padding: .7rem 1rem; margin-bottom: .5rem; }
.faq summary { cursor: pointer; font-weight: 500; }
.faq details p { margin: .6rem 0 0; color: var(--encre-douce); }
.cta-final { text-align: center; padding: 2rem 1.5rem; }
.cta-final p { color: var(--encre-douce); }

/* Texte long (mentions) */
.texte-long h1 { font-size: 1.4rem; margin-top: 1.8rem; }
.texte-long h1:first-child { margin-top: 0; }
.texte-long h2 { font-size: 1.02rem; margin-top: 1.1rem; }
.texte-long p, .texte-long li { color: var(--encre-douce); }
.texte-long .tableau { margin: .6rem 0 1rem; }

/* Pied */
.pied { border-top: 1px solid var(--trait); color: var(--encre-legere); font-size: .85rem; }
.pied-int { max-width: 1280px; margin: 0 auto; padding: 1rem 1.2rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pied a { color: var(--encre-douce); margin-left: 1rem; text-decoration: none; }
.pied a:hover { text-decoration: underline; }

/* Fond noir : ajustements de contraste */
.formulaire input::placeholder, .formulaire textarea::placeholder { color: var(--encre-legere); }
.formulaire select, .filtre select { color-scheme: dark; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
::selection { background: var(--accent); color: var(--accent-texte); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Respiration après un formulaire et neutralisation du style d'auto-remplissage de Chrome */
.formulaire + .aide, .formulaire + p { margin-top: 1.2rem; }
.formulaire .btn { margin-top: .2rem; }
.aide { line-height: 1.6; }
.formulaire input:-webkit-autofill, .formulaire input:-webkit-autofill:hover, .formulaire input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--champ) inset; -webkit-text-fill-color: var(--encre); caret-color: var(--encre);
  border-color: var(--champ-bord); transition: background-color 9999s ease-out;
}