/* style.css - Thème Braynly V3 (avec couleurs) - Version 100% Nettoyée */

/* --- CORRECTIF DÉBORDEMENT MOBILE --- */
html, body, * {
 box-sizing: border-box;
}

/* --- Variables de la Charte Graphique --- */
:root {
 --color-background: #0D1117;
 --color-surface: #161b22;
 --color-border: #30363d;
 --color-text-primary: #E6EDF3;
 --color-text-secondary: #8b949e;
 --color-primary: #33C1FF; /* Cyan Tech */
 --color-accent: #30D5C8; /* Vert Valide */
 --color-ko: #F44336;  /* Rouge pour les erreurs */
 --font-family-base: 'Sora', sans-serif;
 --font-weight-regular: 400;
 --font-weight-semibold: 600;
 --font-weight-bold: 700;
}

/* --- Style Général --- */
a {
 color: inherit;
 text-decoration: none;
}
body {
 font-family: var(--font-family-base);
 line-height: 1.6;
 background-color: var(--color-background);
 color: var(--color-text-secondary);
 margin: 0;
 padding: 20px;
}

.container {
 max-width: 800px;
 width: 100%;
 margin: 40px auto;
 background-color: var(--color-surface);
 padding: 40px 50px;
 border-radius: 12px;
 border: 1px solid var(--color-border);
}

/* --- Typographie & Logo --- */
.logo {
 font-weight: var(--font-weight-semibold);
 font-size: 1.8em;
 color: var(--color-text-primary);
 margin-bottom: 30px;
 text-align: center;
}
.logo span {
 font-weight: var(--font-weight-regular);
 color: var(--color-primary);
}

h1 {
 font-size: 2.5em;
 font-weight: var(--font-weight-bold);
 color: var(--color-text-primary);
 margin-bottom: 15px;
 text-align: center;
}
h1 > span { /* Pour mettre en valeur une partie du titre */
 color: var(--color-primary);
}

h2 {
 font-size: 1.8em;
 font-weight: var(--font-weight-semibold);
 color: var(--color-text-primary);
 margin-top: 50px;
 border-bottom: 1px solid var(--color-border);
 padding-bottom: 10px;
 text-align: left;
 display: flex;
 align-items: center;
 gap: 15px;
}

header > p {
 font-size: 1.1em;
 max-width: 500px;
 margin: 0 auto 30px auto;
 text-align: center;
}

/* --- Styles du Rapport --- */
.summary {
 text-align: left;
 background-color: var(--color-background);
 padding: 20px;
 border-left: 4px solid var(--color-primary);
 border-radius: 5px;
 margin-top: 1em;
}
.summary ul { padding-left: 20px; }
.summary li { margin-bottom: 0.5em; }
.summary p { margin: 0 0 1em 0; }
.summary strong { color: var(--color-text-primary); }

.score {
 text-align: left;
 font-size: 1.2em;
 font-weight: var(--font-weight-semibold);
 color: var(--color-text-secondary);
}
.score strong {
 color: var(--color-primary); /* Mise en couleur du score */
}

.report-table { 
  width: 100%; 
  border-collapse: collapse; 
  margin: 1.5em 0 2.5em 0; 
  table-layout: fixed; 
}

/* --- NOUVEAU : On définit la largeur de chaque colonne --- */
.report-table th:nth-child(1) { width: 25%; } /* Colonne "Critère" */
.report-table th:nth-child(2) { width: 15%; } /* Colonne "Statut" */
.report-table th:nth-child(3) { width: 60%; } /* Colonne "Résultat" */

.report-table th, 
.report-table td { 
  border: 1px solid var(--color-border); 
  padding: 12px; 
  text-align: left; 
  vertical-align: top; 
  word-wrap: break-word; 
}

.report-table th { 
  background-color: #0D1117; 
  font-weight: var(--font-weight-semibold); 
}
.report-table td:first-child { 
  font-weight: var(--font-weight-semibold); 
  color: var(--color-text-primary); 
}

.status-dot {
 display: inline-block;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 margin-right: 8px;
 vertical-align: middle;
}
.status-ok { background-color: var(--color-accent); }
.status-ko { background-color: var(--color-ko); }

/* --- CTA Premium --- */
.cta-premium {
 margin-top: 60px;
 padding: 30px;
 background-color: rgba(51, 193, 255, 0.05);
 border-radius: 8px;
 border: 1px solid var(--color-primary);
 text-align: center;
}
.cta-premium h2 { 
    border-bottom: none; 
    text-align: center; /* Fallback */
    justify-content: center; /* Correction pour centrer le flex */
}
.cta-benefits { display: flex; justify-content: center; gap: 15px; margin: 20px 0; flex-wrap: wrap; }
.cta-benefits span { background-color: var(--color-surface); border: 1px solid var(--color-border); padding: 8px 15px; border-radius: 20px; font-size: 0.9em; }
.cta-button { font-size: 1.1em; padding: 15px 30px; }

/* ... (Le reste du code, formulaire, etc. reste inchangé) ... */
.form-group { display: flex; gap: 10px; margin-bottom: 10px; }
input[type="url"],
input[type="email"] {
 flex-grow: 1;
 padding: 12px 15px;
 border: 1px solid var(--color-border);
 background-color: var(--color-background);
 color: var(--color-text-primary);
 border-radius: 6px;
 font-size: 1em;
 font-family: var(--font-family-base);
 box-sizing: border-box;
}

/* --- CORRECTIF 1 (Hauteur PC) --- */
button, .cta-button { 
 padding: 12px 25px; 
 background-color: var(--color-primary); 
 color: #000; 
 border-radius: 6px; 
 font-size: 1em; 
 font-weight: var(--font-weight-bold); 
 cursor: pointer; 
 transition: all 0.2s ease-in-out;
 border: 1px solid var(--color-primary);
 box-sizing: border-box;
}
button:hover, .cta-button:hover { 
 filter: brightness(1.1); 
 transform: translateY(-2px); 
 box-shadow: 0 4px 15px rgba(51, 193, 255, 0.2); 
}
#submit-button { position: relative; overflow: hidden; }

.button-progress { 
 position: absolute;
 top: 0; 
 left: 0; 
 width: 0%; 
 height: 100%; 
 background-color: var(--color-accent); 
 transition: width 20s cubic-bezier(0.25, 1, 0.5, 1); 
 z-index: 1; 
}
#submit-button.is-loading { cursor: not-allowed; }
#submit-button.is-loading .button-progress { width: 95%; }
#submit-button.is-loading .button-text { color: var(--color-background); }
.button-text { position: relative; z-index: 2; }
header small { color: #8b949e; }
footer { margin-top: 40px; text-align: center; font-size: 0.9em; }


/* --- Adaptation Mobile --- */
@media (max-width: 600px) {
 .container { padding: 25px; margin: 20px auto; }

 /* --- CORRECTIF 2 (Centrage Mobile) --- */
 h1 { 
  font-size: 2em; 
  line-height: 1.3;
 }
 header > p {
  max-width: 100%;
 }

 .form-group { flex-direction: column; }
 
 /* --- CORRECTIF 3 (Bouton Mobile) --- */
 #submit-button { 
  width: 100%; 
  white-space: nowrap;
 }

 .benefits { 
  text-align: center; 
 }
 .benefits h2 {
  text-align: center;
  border-bottom: none;
  justify-content: center;
 }
}

/* Styles pour l'état de chargement et les erreurs */
.loading-state {
 display: none; 
 width: 100%;
 max-width: 600px;
 margin: 20px auto 0 auto;
 flex-direction: column; 
 align-items: center; 
 gap: 15px;
}

.spinner {
 width: 24px;
  height: 24px;
 border: 3px solid var(--color-border);
 border-top-color: var(--color-primary);
 border-radius: 50%;
 animation: spin 1s linear infinite;
}

@keyframes spin {
 to {
  transform: rotate(360deg);
 }
}

.error-message {
 display: none;
 color: #ff5e5e;
 margin-top: 15px;
 font-weight: 600;
}
/* --- Styles pour la page Résumé (summary.html) --- */
.report-url {
 color: var(--color-text-secondary);
 font-size: 1.1em;
 margin-bottom: 30px;
 text-align: center;
}

.global-score-wrapper {
 position: relative;
 width: 200px;
 height: 200px;
 margin: 20px auto 40px auto;
}

.chart-container {
 width: 100%;
 height: 100%;
}

.global-score-text {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size: 3em;
 font-weight: var(--font-weight-bold);
 color: var(--color-text-primary);
}

#section-scores-container {
 display: flex;
 flex-direction: column;
 gap: 15px;
 margin-bottom: 30px;
}

.section-score-item {
 display: flex;
 align-items: center;
 gap: 15px;
}

.section-name {
 flex-basis: 200px;
 text-align: right;
  font-weight: var(--font-weight-semibold);
}

.progress-bar-container-summary {
 flex-grow: 1;
 background-color: var(--color-background);
 border-radius: 5px;
 height: 12px;
}

.progress-bar-inner-summary {
 height: 100%;
 background-color: var(--color-primary);
 border-radius: 5px;
 transition: width 0.5s ease-in-out;
}

.section-score {
 font-weight: var(--font-weight-bold);
 color: var(--color-text-primary);
}
.pitch {
 font-size: 1em;
 max-width: 600px;
 margin: 0 auto 35px auto;
 text-align: center;
 color: var(--color-text-secondary);
 border-top: 1px solid var(--color-border);
 padding-top: 25px;
}
.pitch strong {
 color: var(--color-text-primary);
 /* MODIFICATION ICI */
 font-size: 1.1em; /* Légèrement plus gros */
}
/* --- Animation Tasse de Café --- */
.coffee-cup {
 width: 80px;
 height: 90px;
 border: 5px solid var(--color-border);
 border-radius: 0 0 15px 15px;
 position: relative;
 margin: 20px 0 15px 0; /* Espace */
 /* Centre l'anse par rapport à la tasse */
 margin-right: 20px; 
}

.coffee-liquid {
 width: 100%;
 height: 0; /* Commence vide */
 background: linear-gradient(to top, var(--color-primary), #6ee1ff);
 border-radius: 0 0 10px 10px;
 position: absolute;
 bottom: 0;
 /* L'animation dure 90s (1min30) */
 animation: fill-coffee 90s linear 1 forwards; 
}

/* Animation de remplissage */
@keyframes fill-coffee {
 from { height: 0; }
 to { height: 100%; }
}

/* Anse de la tasse */
.coffee-cup::after {
 content: '';
 width: 30px;
 height: 45px;
 border: 5px solid var(--color-border);
 border-radius: 0 15px 15px 0;
 position: absolute;
 right: -40px;
 top: 15px;
}
/* --- Suggestions IA --- */
.suggestion-ia {
  background-color: rgba(51, 193, 255, 0.08); /* léger bleu tech */
  border-left: 3px solid var(--color-primary);
  padding: 12px 15px;
  margin-top: 8px;
  font-style: italic;
  color: var(--color-text-secondary);
  border-radius: 6px;
}

.suggestion-ia strong {
  color: var(--color-primary);
}
/* --- Correctif pour le tableau des contrastes --- */
.table-wrapper {
 overflow-x: auto; /* Ajoute un scroll horizontal si besoin */
 margin-top: 15px;
 border: 1px solid var(--color-border);
 border-radius: 6px;
}

/* Cible le tableau généré par l'IA (en enlevant .contrast-table) */
.table-wrapper table {
 width: 100%;
 min-width: 500px; /* Force une largeur min pour que le scroll s'active sur mobile */
 border-collapse: collapse;
 margin: 0;
}
.table-wrapper table th, 
.table-wrapper table td {
 border: 1px solid var(--color-border);
 padding: 10px;
 text-align: left;
 font-size: 0.9em;
}
.table-wrapper table th {
 background-color: var(--color-surface);
 color: var(--color-text-primary);
}
/* --- Styles pour la section des exemples de rapports --- */
.report-examples {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}

.example-card {
  flex-basis: 31%;
  background-color: var(--color-background); /* Fond plus sombre */
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.example-card img {
  width: 100%;
  border-radius: 5px;
  border: 1px solid var(--color-border);
  margin-bottom: 15px;
  aspect-ratio: 16 / 10; /* Garde une proportion */
  object-fit: cover; /* Recadre l'image proprement */
}

.example-card h4 {
  color: var(--color-text-primary);
  font-size: 1.1em;
  margin-bottom: 10px;
}

.example-card p {
  font-size: 0.9em;
  color: var(--color-text-secondary);
}

/* --- Adaptation Mobile --- */
@media (max-width: 768px) {
  .report-examples {
    flex-direction: column; /* Empile verticalement */
    gap: 30px;
  }
  
  .example-card {
    flex-basis: 100%; /* Pleine largeur */
  }
}
/* --- Effet de survol pour les cartes d'exemple --- */
.example-card {
  /* ... (vos styles existants) ... */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.example-card:hover {
  transform: translateY(-5px); /* Fait "monter" la carte */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* Ajoute une ombre plus forte */
}
/* --- Amélioration survol images d'exemple --- */
.example-card a {
  display: block; /* S'assure que le lien prend bien la taille de l'image */
  border-radius: 5px; /* Arrondit les coins du lien */
  overflow: hidden; /* Assure que l'image ne dépasse pas */
}

.example-card img {
  transition: opacity 0.3s ease; /* Ajoute une transition douce */
}

.example-card a:hover img {
  opacity: 0.85; /* L'image devient légèrement transparente au survol */
  cursor: pointer; /* Affiche un curseur "main" */
}
/* --- Styles pour la grille des catégories --- */
.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colonnes */
  gap: 20px;
  margin-top: 30px;
}

.category-card {
  background-color: var(--color-background); /* Fond plus sombre */
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 25px;
}

.category-card h4 {
  color: var(--color-primary); /* Titre en bleu */
  font-size: 1.2em;
  margin-top: 0;
  margin-bottom: 15px;
}

.category-card p {
  font-size: 0.95em;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.category-card p strong {
  color: var(--color-text-primary);
}

/* --- Adaptation Mobile --- */
@media (max-width: 768px) {
  .category-grid {
    grid-template-columns: 1fr; /* 1 seule colonne sur mobile */
  }
}
/* --- Overlay de Chargement Deep Audit --- */
.loading-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0f172a; /* Fond sombre */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    text-align: center;
    padding: 20px;
}

.loading-overlay h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-top: 2rem;
    font-weight: 600;
}

.loading-overlay p {
    color: #94a3b8;
    font-size: 1.1rem;
    margin-top: 0.5rem;
    max-width: 500px;
}

.loading-status {
    font-size: 0.9rem;
    color: #3b82f6 !important; /* Bleu */
    margin-top: 2rem;
    font-style: italic;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* On cache les éléments quand on a fini */
.hidden {
    display: none !important;
}
/* --- CORRECTIF FINAL : Mode Sombre et Tableaux --- */

/* 1. Corrige le fond blanc des analyses IA */
.section-analysis {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.section-analysis strong {
    color: var(--color-text-primary);
}

/* 2. Corrige l'affichage du tableau des contrastes */
.table-wrapper {
    overflow-x: auto;
    margin-top: 15px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: var(--color-surface);
}

.table-wrapper table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}

.table-wrapper th, 
.table-wrapper td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9em;
    color: var(--color-text-secondary);
}

.table-wrapper th {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary);
    font-weight: 600;
}
/* 2. Corrige l'affichage du tableau des contrastes (Version sans ascenseur) */
.table-wrapper {
    overflow-x: auto; /* Garde la sécurité pour mobile très étroit */
    margin-top: 15px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: var(--color-surface);
}

.table-wrapper table {
    width: 100%;
    table-layout: fixed; /* <--- MAGIQUE : Force le tableau à respecter la largeur */
    border-collapse: collapse;
    /* On a enlevé min-width: 500px pour laisser le tableau s'adapter */
}

.table-wrapper th, 
.table-wrapper td {
    padding: 10px; /* Un peu moins de padding */
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85em; /* Police légèrement réduite pour gagner de la place */
    color: var(--color-text-secondary);
    
    /* Gestion du retour à la ligne */
    white-space: normal; /* Autorise le texte sur plusieurs lignes */
    word-wrap: break-word; /* Coupe les mots trop longs si nécessaire */
    overflow-wrap: break-word;
}

/* Optimisation des colonnes : On donne plus de place à l'analyse */
.table-wrapper th:nth-child(1) { width: 20%; } /* Élément */
.table-wrapper th:nth-child(2) { width: 15%; } /* Couleur 1 */
.table-wrapper th:nth-child(3) { width: 15%; } /* Couleur 2 */
.table-wrapper th:nth-child(4) { width: 10%; } /* Ratio */
.table-wrapper th:nth-child(5) { width: 40%; } /* Analyse & Recommandation (Le gros morceau) */

.table-wrapper th {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary);
    font-weight: 600;
}
/* --- SÉLECTEUR DE LANGUE --- */
.lang-selector {
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 1000;
    font-family: var(--font-family-base);
}

.lang-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.lang-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
    background: rgba(51, 193, 255, 0.1);
}

.globe-icon {
    font-size: 1.2em;
}

.lang-dropdown {
    display: none; /* Caché par défaut */
    position: absolute;
    top: 110%;
    right: 0;
    background-color: #161b22; /* Fond sombre */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    min-width: 140px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    overflow: hidden;
    flex-direction: column;
}

/* Affichage au survol */
.lang-selector:hover .lang-dropdown {
    display: flex;
}

.lang-dropdown a {
    display: block;
    padding: 10px 15px;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.9em;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.lang-dropdown a:last-child {
    border-bottom: none;
}

.lang-dropdown a:hover {
    background: rgba(51, 193, 255, 0.1);
    color: var(--color-primary);
    padding-left: 20px; /* Petit effet de glissement */
}

/* Adaptation Mobile */
@media (max-width: 600px) {
    .lang-selector {
        top: 15px;
        right: 15px;
    }
    .lang-text {
        display: none; /* On cache le texte "FR" sur mobile, on garde juste le globe */
    }
    .lang-btn {
        padding: 8px;
        border-radius: 50%;
    }
}