/* =========================
VARIABLES GLOBALES → GLOBAL VARIABLES
========================= */

:root {
    --bg:#0f1113;
    --surface:#0f1416;
    --surface2:#1c2125;
    --border:#3b444b;
    --border2:#4a555e;
    --text:#e6e6e6;
    --muted:#9aa0a6;
    --accent:#0095b1;
    --accent-dim:rgba(0,149,177,0.12);
    --accent-dark:#007a92;
    --bronze:#A17B41;
    --bronze-hover:#C39752;
    --bronze-dim:rgba(161,123,65,0.12);
    --danger:#e05555;
    --success:#2ecc8a;
}

/* =========================
MODE CLAIR → LIGHT MODE
========================= */

body.light {
    --bg:#f5f7f8;
    --surface:#ffffff;
    --surface2:#f0f2f4;
    --border:#dcdfe3;
    --border2:#cfd6dc;
    --text:#121212;
    --muted:#555;
    --accent:#0095b1;
    --accent-dim:rgba(0,149,177,0.08);
    --accent-dark:#007a92;
    --bronze:#A17B41;
    --bronze-hover:#8A6937;
    --bronze-dim:rgba(161,123,65,0.10);
}

/* réinitialisation globale → global reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* mise en page du body → body layout */
body {
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    padding: 40px 24px 80px;
}

/* Réinitialisation des conteneurs internes → Internal container reset */
.block-bleu,
.white-card {
    background: none;
    border: 0;
    padding: 0;
    box-shadow: none;
}

/* ===============================
TYPOGRAPHIE → TYPOGRAPHY
=============================== */

/* Titre H1 → H1 heading */
h1 {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--accent);
}

/* Titre H2 → H2 heading */
h2 {
    font-size: 22px;
    line-height: 1.4;
    font-weight: 650;
    color: var(--accent);
    text-align: center;
    margin: 12px 0;
    letter-spacing: 0.2px;
    text-rendering: optimizeLegibility;
}

/* Titre H3 → H3 heading */
h3 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--bronze);
    text-align: center;
    margin: 12px 0;
    letter-spacing: 0.2px;
    text-rendering: optimizeLegibility;
}

/* ===============================
TITRES DE SECTION → SECTION HEADINGS
=============================== */

h2.section-title {
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
    color: var(--accent);
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 8px;
    margin-top: 62px;
    position: relative;
    z-index: 2;
}

/* Espacement après le titre de section → Spacing after section heading */
h2.section-title + * {
    margin-top: 24px;
}

/* ===============================
EN-TÊTE → HEADER
=============================== */

/* Conteneur de l'en-tête → Header container */
.header {
    max-width: 780px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Marque de l'en-tête → Header brand */
.header-brand {
    font-size: 22px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}

/* ===============================
INTRODUCTION → INTRODUCTION
=============================== */

/* Bloc d'introduction → Introduction block */
.intro {
    max-width: 780px;
    margin: 0 auto 18px;
    padding: 14px 20px;
    background: var(--accent-dim);
    border: 1px solid rgba(0,149,177,.2);
    border-radius: 10px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
}

/* Texte mis en avant → Highlighted text */
.intro strong {
    color: var(--accent);
    font-weight: 600;
}

/* ===============================
LANGUE → LANGUAGE
=============================== */

/* Bouton de langue → Language button */
.lang-btn {
    font-size: 18px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--muted);
    background: none;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 3px 9px;
    cursor: pointer;
    transition: all .15s;
    font-weight: 500;
    text-decoration: none;
}

/* État actif et survol → Active and hover states */
.lang-btn.active,
.lang-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim);
}

/* Sélecteur de langue → Language switcher */
.lang-switch {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 20px;
}

/* ===============================
PIED DE PAGE → FOOTER
=============================== */

/* Conteneur du pied de page → Footer container */
.footer {
    max-width: 780px;
    margin: 24px auto 0;
    padding: 16px 0 24px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 14px;
    color: var(--muted);
}

/* Lien du pied de page → Footer link */
.footer a {
    color: var(--accent);
    text-decoration: none;
}

/* Survol du lien → Link hover state */
.footer a:hover {
    opacity: 0.7;
}

/* ===============================
CTA OUTLINE → OUTLINE CTA
=============================== */

.cta-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    font: inherit;
    font-size: 17px;
    line-height: 1;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
    transition:
    background-color 0.3s,
    color 0.3s,
    box-shadow 0.3s,
    transform 0.2s ease;
}

/* Survol du CTA → CTA hover */
.cta-outline:hover,
.cta-outline:focus {
    transform: scale(1.05);
    background: var(--accent-dim);
    box-shadow: 0 4px 10px rgba(10, 86, 69, 0.18);
}

/* ==================================================
SEO LENS — INTERFACE → SEO LENS — INTERFACE
================================================== */

/* EN-TÊTE D'IMPORT → IMPORT HEADER */
.seo-lens-panel-heading > div {
    width: 100%;
    text-align: center;
}

.seo-lens-panel-heading h1 {
    text-align: center;
}

/* CONTENEUR PRINCIPAL → MAIN CONTAINER */
.seo-lens,
.wrap{
    width:100%;
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
}

/* ==================================================
IMPORT → IMPORT
================================================== */

/* IMPORT → IMPORT */
.seo-lens-import{
    max-width:1100px;
    margin:0 auto 24px;
    padding:22px 24px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.06);
}

.seo-lens-panel-heading,
.seo-lens-section-heading{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:20px;
}

/* En-tête des sections du rapport → Report section headings */
.seo-lens-section-heading{
    position:relative;
    display:block;
    text-align:center;
}

.seo-lens-section-heading .seo-lens-step{
    position:absolute;
    left:0;
    top:0;
}

.seo-lens-section-heading > div{
    width:100%;
    text-align:center;
}

/* Description de l'import → Import description */
.seo-lens-panel-heading p{
    margin:0;
    color:var(--muted);
    font-size:16px;
    line-height:1.55;
}

/* Description des sections du rapport → Report section descriptions */
.seo-lens-section-heading p{
    margin:0;
    color:var(--text);
    font-size:16px;
    line-height:1.55;
}

/* NUMÉROS D'ÉTAPE → STEP NUMBERS */
.seo-lens-step{
    display:inline-flex;
    flex:0 0 30px;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    padding:0;
    border:1px solid var(--bronze);
    border-radius:50%;
    background:var(--bronze-dim);
    color:var(--bronze);
    font-size:12px;
    font-weight:700;
    line-height:1;
}

/* ZONE DE DÉPÔT → DROP ZONE */
.seo-lens-drop-zone{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:11px;
    min-height:250px;
    padding:34px 20px;
    background:var(--surface2);
    border:1.5px dashed var(--border2);
    border-radius:10px;
    text-align:center;
    transition:border-color .18s,background .18s,transform .18s;
}

.seo-lens-drop-zone:hover,
.seo-lens-drop-zone.is-dragover{
    border-color:var(--accent);
    background:var(--accent-dim);
}

.seo-lens-drop-zone.is-dragover{
    transform:scale(1.005);
}

.seo-lens-drop-zone strong{
    color:var(--text);
    font-size:17px;
    font-weight:600;
}

.seo-lens-drop-separator,
.seo-lens-drop-zone small{
    color:var(--muted);
    font-size:15px;
}

/* ===============================
BOUTONS → BUTTONS
=============================== */

.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 20px;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}

/* Survol du bouton → Button hover state */
.cta:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

/* État actif du bouton → Button active state */
.cta:active {
    transform: translateY(1px);
}

/* Informations d'import → Import information */
.seo-lens-import-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 17px;
    color: var(--muted);
    font-size: 13px;
}

/* ===============================
FONCTIONNEMENT → HOW IT WORKS
=============================== */

/* FONCTIONNEMENT → HOW IT WORKS */
.seo-lens-how {
    max-width: 1100px;
    margin: 42px auto;
}

/* Titre de la section → Section title */
.seo-lens-section-title {
    margin: 0 0 20px;
    color: var(--accent);
    text-align: center;
}

/* Parcours en étapes → Step-by-step process */
.seo-lens-process {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.seo-lens-process-item {
    height: 135px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Numéro de l'étape → Step number */
.seo-lens-process-item span {
    display: block;
    margin-bottom: 10px;
    color: var(--bronze);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .08em;
}

/* Titre de l'étape → Step title */
.seo-lens-process-item strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 17px;
}

/* Texte de l'étape → Step text */
.seo-lens-process-item small {
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
}

/* Flèche entre les étapes → Arrow between steps */
.seo-lens-process-arrow {
    color: var(--bronze);
    font-size: 20px;
}

/* ===============================
ÉTATS → STATES
=============================== */

/* Conteneur d'état → Status container */
.seo-lens-status {
    max-width: 780px;
    margin: 24px auto;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: center;
}

.seo-lens-status strong,
.seo-lens-status span {
    display: block;
}

.seo-lens-status strong {
    margin: 10px 0 5px;
}

.seo-lens-status span,
.seo-lens-status p {
    color: var(--muted);
    font-size: 14px;
}

/* État d'erreur → Error state */
.seo-lens-error {
    border-color: rgba(224,85,85,.45);
}

.seo-lens-error .cta {
    margin-top: 18px;
}

/* Indicateur de chargement → Loading indicator */
.seo-lens-loader {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: seoLensSpin .8s linear infinite;
}

/* Animation de chargement → Loading animation */
@keyframes seoLensSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ===============================
RAPPORT → REPORT
=============================== */

/* Conteneur du rapport → Report container */
.seo-lens-report {
    max-width: 1100px;
    margin: 42px auto 0;
}

/* En-tête du rapport → Report header */
.seo-lens-report-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

/* Libellé du rapport → Report kicker */
.seo-lens-kicker {
    color: var(--bronze);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Contexte du rapport → Report context */
.seo-lens-report-context {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.seo-lens-report-context span {
    padding: 6px 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
}

/* Sections du rapport → Report sections */
.seo-lens-report-section {
    margin: 0 auto 20px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.04);
}

/* ===============================
INDICATEURS CLÉS → KEY METRICS
=============================== */

.seo-lens-metrics {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
}

.seo-lens-metric {
    padding: 18px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* Libellé de l'indicateur → Metric label */
.seo-lens-metric-label {
    display: block;
    margin-bottom: 9px;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Valeur de l'indicateur → Metric value */
.seo-lens-metric-value {
    display: block;
    color: var(--text);
    font-size: 28px;
    line-height: 1.1;
}

/* Évolution de l'indicateur → Metric change */
.seo-lens-metric-change {
    display: block;
    min-height: 17px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
}

/* ===============================
GRAPHIQUES → CHARTS
=============================== */

.seo-lens-chart-card {
    padding: 16px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.seo-lens-chart {
    width: 100%;
    min-height: 320px;
}

/* Mini graphique → Mini chart */
.seo-lens-mini-chart {
    display: grid;
    align-content: center;
    gap: 10px;
    width: 100%;
    min-height: 180px;
    margin: 14px 0;
}

/* Ligne du mini graphique → Mini chart row */
.seo-lens-mini-bar-row {
    display: grid;
    grid-template-columns: 90px 1fr 36px;
    align-items: center;
    gap: 10px;
}

/* Libellé → Label */
.seo-lens-mini-bar-label {
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Piste de progression → Progress track */
.seo-lens-mini-bar-track {
    height: 10px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
}

/* Barre de progression → Progress bar */
.seo-lens-mini-bar-fill {
    display: block;
    height: 100%;
    min-width: 2px;
    background: var(--accent);
    border-radius: 999px;
}

/* Valeur → Value */
.seo-lens-mini-bar-row strong {
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

/* Légende du graphique → Chart legend */
.seo-lens-chart-legend{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:12px;
    color:var(--text);
    font-size:13px;
}

.seo-lens-chart-legend span{
    display:flex;
    align-items:center;
    gap:7px;
}

.seo-lens-chart-dot{
    width:9px;
    height:9px;
    border-radius:50%;
}

.seo-lens-chart-dot-clicks{
    background:var(--accent);
}

.seo-lens-chart-dot-impressions{
    background:var(--bronze);
}

/* ===============================
ANALYSES → INSIGHTS
=============================== */

.seo-lens-insights {
    margin-top: 14px;
}

.seo-lens-trend-summary {
    padding: 12px 14px;
    background: var(--bronze-dim);
    border-left: 3px solid var(--bronze);
    border-radius: 0 8px 8px 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
}

.seo-lens-trend-summary p {
    margin: 0;
}

.seo-lens-trend-summary p + p {
    margin-top: 5px;
}

/* ===============================
POSITIONS ET OPPORTUNITÉS → RANKINGS AND OPPORTUNITIES
=============================== */

/* Contrôles de classement → Ranking controls */
.seo-lens-ranking-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

/* Bouton de sélection → Toggle button */
.seo-lens-toggle {
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

/* Survol et état actif → Hover and active states */
.seo-lens-toggle:hover,
.seo-lens-toggle.active {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
}

/* Répartition des positions → Ranking distribution */
.seo-lens-ranking-bars{
    display:grid;
    gap:18px;
    padding:22px 10px;
}

.seo-lens-ranking-row{
    display:grid;
    grid-template-columns:70px 1fr 70px;
    align-items:center;
    gap:14px;
}

.seo-lens-ranking-label{
    color:var(--text);
    font-size:13px;
    font-weight:600;
}

.seo-lens-ranking-track{
    height:18px;
    overflow:hidden;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:999px;
}

.seo-lens-ranking-bar{
    display:block;
    height:100%;
    min-width:2px;
    background:var(--accent);
    border-radius:999px;
}

.seo-lens-ranking-value{
    color:var(--text);
    font-size:13px;
    text-align:right;
}

/* Résumé des opportunités → Opportunity summary */
.seo-lens-opportunity-summary {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-bottom: 18px;
}

/* Carte d'opportunité → Opportunity card */
.seo-lens-opportunity-card {
    padding: 18px;
    background: var(--bronze-dim);
    border: 1px solid rgba(161,123,65,.35);
    border-radius: 10px;
}

.seo-lens-opportunity-card span,
.seo-lens-opportunity-card small {
    display: block;
}

/* Libellé de l'opportunité → Opportunity label */
.seo-lens-opportunity-card span {
    color: var(--bronze);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Valeur de l'opportunité → Opportunity value */
.seo-lens-opportunity-card strong {
    display: block;
    margin: 7px 0 5px;
    color: var(--text);
    font-size: 28px;
}

/* Description de l'opportunité → Opportunity description */
.seo-lens-opportunity-card small {
    color: var(--muted);
    font-size: 14px;
}

/* ===============================
TABLEAUX → TABLES
=============================== */

/* Conteneur du tableau → Table wrapper */
.seo-lens-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.seo-lens-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* En-tête du tableau → Table header */
.seo-lens-table th {
    padding: 11px 12px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    color: var(--bronze);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* Cellules du tableau → Table cells */
.seo-lens-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: top;
}

.seo-lens-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Survol d'une ligne → Row hover state */
.seo-lens-table tbody tr:hover {
    background: var(--accent-dim);
}

/* Variante compacte → Compact variant */
.seo-lens-table-compact {
    font-size: 12px;
}

/* État vide → Empty state */
.seo-lens-empty {
    padding: 20px;
    color: var(--muted);
    text-align: center;
}

/* ===============================
MARCHÉS ET APPAREILS → MARKETS AND DEVICES
=============================== */

/* Disposition en deux colonnes → Two-column layout */
.seo-lens-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 14px;
}

/* Panneau de données → Data panel */
.seo-lens-data-panel {
    min-width: 0;
    padding: 18px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* Description du panneau → Panel description */
.seo-lens-data-panel header p {
    color: var(--bronze);
    font-size: 14px;
}

/* ===============================
DIAGNOSTIC ET PRIORITÉS → DIAGNOSTIC AND PRIORITIES
=============================== */

/* Grille de diagnostic → Diagnostic grid */
.seo-lens-diagnostic-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
}

.seo-lens-diagnostic-grid > * {
    padding: 16px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 9px;
}

/* Bloc des priorités → Priorities block */
.seo-lens-priorities {
    border-color: rgba(161,123,65,.4);
}

/* Liste des priorités → Priority list */
.seo-lens-priority-list {
    display: grid;
    gap: 10px;
    list-style: none;
    counter-reset: seo-priority;
}

.seo-lens-priority-list > li {
    counter-increment: seo-priority;
    position: relative;
    min-height: 52px;
    padding: 14px 14px 14px 52px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 9px;
}

/* Numéro de priorité → Priority number */
.seo-lens-priority-list > li::before {
    content: counter(seo-priority);
    position: absolute;
    top: 12px;
    left: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--bronze-dim);
    border: 1px solid var(--bronze);
    border-radius: 50%;
    color: var(--bronze);
    font-size: 12px;
    font-weight: 700;
}

/* Nouvelle analyse → New analysis */
.seo-lens-new-analysis {
    padding: 8px 0 34px;
    text-align: center;
}

/* ===============================
CONTENU INDEXABLE → INDEXABLE CONTENT
=============================== */

/* Sections informatives → Informational sections */
.seo-lens-about,
.seo-lens-privacy,
.seo-lens-disclaimer {
    width: 100%;
    max-width: 1100px;
    margin: 38px auto 0;
}

/* Grille de présentation → About grid */
.seo-lens-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.seo-lens-about-grid article {
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* Texte informatif → Informational text */
.seo-lens-about-grid p,
.seo-lens-privacy p,
.seo-lens-disclaimer p {
    color: var(--text);
    font-size: 15px;
    line-height: 1.65;
}

/* Blocs confidentialité et avertissement → Privacy and disclaimer blocks */
.seo-lens-privacy,
.seo-lens-disclaimer {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* Confidentialité → Privacy */
.seo-lens-privacy {
    border-left: 3px solid var(--accent);
}

/* Avertissement → Disclaimer */
.seo-lens-disclaimer {
    border-left: 3px solid var(--bronze);
}

.seo-lens-disclaimer p + p {
    margin-top: 8px;
}


/* Retour en haut → Back to top */
.center {
    margin: 28px auto;
    text-align: center;
}

/* ==================================================
AVIS UTILISATEUR → USER FEEDBACK
================================================== */

.page-feedback {
    text-align: center;
    padding: 24px 0;
}

/* QUESTION → QUESTION */
.page-feedback > p:first-child {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 15px;
}

/* ACTIONS → ACTIONS */
.page-feedback-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

/* BOUTONS → BUTTONS */
.page-feedback-actions button {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--text);
    border-radius: 999px;
    padding: 9px 16px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition:
        transform .2s ease,
        background-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

/* SURVOL → HOVER */
.page-feedback-actions button:hover,
.page-feedback-actions button:focus-visible {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 149, 177, .18);
}

/* CLIC → ACTIVE */
.page-feedback-actions button:active {
    transform: scale(.96);
}

/* MESSAGE APRÈS VOTE → POST-VOTE MESSAGE */
.page-feedback-result {
    margin: 12px 0 0;
    color: var(--accent);
    font-size: 14px;
}

/* masqué impression → print hidden */
@media print{
    .no-print{display:none!important;}
}

/* ===============================
RESPONSIVE ≤ 800px → RESPONSIVE ≤ 800px
=============================== */

/* Indicateurs clés → Key metrics */
@media (max-width: 800px) {

    .seo-lens-metrics {
        grid-template-columns: 1fr 1fr;
    }

    /* Grilles en une colonne → Single-column grids */
    .seo-lens-split,
    .seo-lens-diagnostic-grid,
    .seo-lens-about-grid {
        grid-template-columns: 1fr;
    }

    /* Parcours vertical → Vertical process */
    .seo-lens-process {
        grid-template-columns: 1fr;
    }

    .seo-lens-process-arrow {
        transform: rotate(90deg);
        text-align: center;
    }

    /* Opportunités en une colonne → Single-column opportunities */
    .seo-lens-opportunity-summary {
        grid-template-columns: 1fr;
    }

    /* En-tête du rapport empilé → Stacked report header */
    .seo-lens-report-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ===============================
RESPONSIVE → RESPONSIVE
=============================== */

/* Mobile → Mobile */
@media (max-width: 620px) {

    /* Mise en page générale → General layout */
    body {
        padding: 18px 14px 40px;
    }

    /* Titres du rapport sur mobile → Report headings on mobile */
    .seo-lens-section-heading > div {
        width: calc(100% - 76px);
        margin-left: auto;
        margin-right: auto;
    }

    /* En-tête mobile → Mobile header */
    .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 10px;
    }

    /* Marque réduite → Reduced brand */
    .header-brand {
        flex: 1;
        min-width: 0;
        font-size: 18px;
        letter-spacing: .03em;
    }

    /* Sélecteur de langue → Language switcher */
    .lang-switch {
        align-self: flex-end;
    }

    /* Import et sections du rapport → Import and report sections */
    .seo-lens-import,
    .seo-lens-report-section {
        padding: 18px;
    }

    /* Zone de dépôt → Drop zone */
    .seo-lens-drop-zone {
        min-height: 210px;
        padding: 26px 14px;
    }

    /* Indicateurs clés → Key metrics */
    .seo-lens-metrics {
        grid-template-columns: 1fr;
    }

    .seo-lens-metric-value {
        font-size: 24px;
    }

    /* Graphiques → Charts */
    .seo-lens-chart {
        min-height: 250px;
    }

    /* Répartition des positions → Ranking distribution */
    .seo-lens-ranking-row{
        grid-template-columns:64px minmax(0,1fr) 82px;
        gap:8px;
    }

    .seo-lens-ranking-bars{
        padding:16px 0;
    }

}

/* Petits écrans → Small screens */
@media (max-width: 600px) {

    .seo-lens-panel-heading {
        gap: 12px;
    }

    .seo-lens-drop-zone {
        min-height: 220px;
        padding: 24px 16px;
    }

    .seo-lens-import-meta {
        gap: 6px;
        font-size: 13px;
    }
}

/* ===============================
RESPONSIVE ≥ 768px → RESPONSIVE ≥ 768px
=============================== */

@media (min-width: 768px) {

    /* Titre H1 → H1 heading */
    h1 {
        font-size: 28px;
    }

    /* Titre H2 → H2 heading */
    h2 {
        font-size: 20px;
    }

    /* Titre H3 → H3 heading */
    h3 {
        font-size: 18px;
    }

    /* Titre de section → Section heading */
    h2.section-title {
        font-size: 26px;
    }
}

/* ===============================
RESPONSIVE ≥ 1024px → RESPONSIVE ≥ 1024px
=============================== */

@media (min-width: 1024px) {

    /* Conteneur principal → Main wrapper */
    .wrap {
        max-width: 1280px;
        padding: 0 24px;
    }

    /* Bloc bleu → Blue block */
    .block-bleu {
        max-width: 1280px;
    }

    /* Titre H1 → H1 heading */
    h1 {
        font-size: 34px;
    }

    /* Titre H2 → H2 heading */
    h2 {
        font-size: 24px;
    }

    /* Titre H3 → H3 heading */
    h3 {
        font-size: 22px;
    }

    /* Titre de section → Section heading */
    h2.section-title {
        font-size: 28px;
    }
}

/* ===============================
RESPONSIVE ≥ 1280px → RESPONSIVE ≥ 1280px
=============================== */

@media (min-width: 1280px) {

    /* Titre H1 → H1 heading */
    h1 {
        font-size: 38px;
    }

    /* Titre H2 → H2 heading */
    h2 {
        font-size: 24px;
    }

    /* Titre H3 → H3 heading */
    h3 {
        font-size: 22px;
    }

    /* Titre de section → Section heading */
    h2.section-title {
        font-size: 30px;
    }
}