/* Design commun à POVs et POVs Pro.
   Chaque appli ajoute sa propre feuille (perso.css, pro.css) pour ce qui lui est spécifique. */

/* ---------- Couleurs et mesures ---------- */
/* Thème clair unique (choix de marque : sobre, professionnel, inspire confiance). */

:root {
  --fond: #f5f7fa;
  --surface: #ffffff;
  --surface-douce: #eef1f5;
  --texte: #172033;
  --texte-secondaire: #536072;
  --texte-discret: #8792a2;
  --bordure: rgba(23, 32, 51, 0.10);
  --bordure-forte: rgba(23, 32, 51, 0.22);
  --accent: #2b4fd1;
  --accent-texte: #1e3a9e;
  --accent-fond: #e8eefc;
  --succes: #2c7a4b;
  --succes-fond: #e3f3e9;
  --danger: #b23a3a;
  --danger-fond: #fbe9e9;
  --premium: #8a5a00;
  --premium-fond: #fdf1d8;
  --rayon: 10px;
  --rayon-carte: 14px;
  --hauteur-bandeau-pub: 0px; /* POVs (perso) l'agrandit pour son bandeau publicitaire */
  color-scheme: light;
}

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

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem; /* 16 px sur téléphone, agrandi sur grand écran (voir en bas de fichier) */
  line-height: 1.6;
  padding-bottom: calc(var(--hauteur-bandeau-pub) + 24px);
}

h1, h2, h3 { line-height: 1.25; font-weight: 600; margin: 0 0 0.5em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { color: var(--accent-texte); }

.conteneur { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.conteneur-etroit { max-width: 680px; margin: 0 auto; padding: 0 16px; }
.discret { color: var(--texte-secondaire); }
.petit { font-size: 0.875rem; }
.centre { text-align: center; }
.espace-haut { margin-top: 2rem; }
.masque { display: none !important; }

/* ---------- En-tête ---------- */

.entete { border-bottom: 1px solid var(--bordure); background: var(--surface); margin-bottom: 2rem; }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.logo { font-weight: 700; font-size: 1.15rem; color: var(--texte); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.logo-pastilles { display: inline-flex; gap: 3px; }
.logo-pastilles span { width: 10px; height: 10px; border-radius: 50%; }
.badge-logo { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: var(--accent); color: #fff; }
.navigation { display: flex; gap: 6px; flex-wrap: wrap; }
.navigation a { text-decoration: none; color: var(--texte-secondaire); padding: 6px 12px; border-radius: var(--rayon); font-size: 0.95rem; }
.navigation a:hover, .navigation a.actif { background: var(--surface-douce); color: var(--texte); }

/* ---------- Boutons et formulaires ---------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 0.95rem; font-weight: 500;
  padding: 10px 18px; border-radius: var(--rayon);
  border: 1px solid var(--bordure-forte); background: var(--surface); color: var(--texte);
  cursor: pointer; text-decoration: none; transition: background 0.15s, transform 0.05s;
}
.bouton:hover { background: var(--surface-douce); }
.bouton:active { transform: scale(0.98); }
.bouton-principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton-principal:hover { background: var(--accent-texte); }
.bouton-discret { border-color: transparent; background: transparent; color: var(--texte-secondaire); padding: 6px 10px; }
.bouton-danger { color: var(--danger); }
.bouton[disabled] { opacity: 0.5; cursor: not-allowed; }
.groupe-boutons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 0.95rem; }
input[type='text'], input[type='email'], input[type='password'], input[type='number'], select, textarea {
  width: 100%; font: inherit; padding: 10px 12px; border-radius: var(--rayon);
  border: 1px solid var(--bordure-forte); background: var(--surface); color: var(--texte);
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus, .bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.champ { margin-bottom: 1rem; }
.choix-radio { display: flex; flex-direction: column; gap: 8px; }
.choix-radio label { font-weight: 400; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--bordure); border-radius: var(--rayon); cursor: pointer; margin: 0; }
.choix-radio label:has(input:checked) { border-color: var(--accent); background: var(--accent-fond); }
.message-erreur { color: var(--danger); font-size: 0.9rem; min-height: 1.4em; margin: 6px 0; }
.message-succes { color: var(--succes); font-size: 0.9rem; }

/* ---------- Cartes et grilles ---------- */

.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.carte-accent { border: 2px solid var(--accent); }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.carte-test { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.carte-test .groupe-boutons { margin-top: auto; padding-top: 8px; }
.etiquette { display: inline-block; font-size: 0.78rem; font-weight: 500; padding: 2px 10px; border-radius: 999px; background: var(--surface-douce); color: var(--texte-secondaire); }
.etiquette-succes { background: var(--succes-fond); color: var(--succes); }
.etiquette-accent { background: var(--accent-fond); color: var(--accent-texte); }
.pastilles-dimensions { display: flex; gap: 4px; flex-wrap: wrap; }
.pastilles-dimensions span { font-size: 0.75rem; padding: 1px 8px; border-radius: 999px; color: #fff; font-weight: 600; }

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

.accroche { padding: 2rem 0 2.5rem; }
.accroche p { font-size: 1.15rem; color: var(--texte-secondaire); max-width: 620px; }
.etapes { counter-reset: etape; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.etapes > div { counter-increment: etape; }
.etapes > div::before { content: counter(etape); display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; background: var(--accent-fond); color: var(--accent-texte); font-weight: 700; margin-bottom: 8px; }

/* ---------- Passage du test ---------- */

.progression { height: 6px; background: var(--surface-douce); border-radius: 3px; margin: 8px 0 1.5rem; overflow: hidden; }
.progression div { height: 100%; background: var(--accent); transition: width 0.2s; }
/* Tuiles de choix (DISC, tests personnalisés) : pensées d'abord pour le téléphone. */
.intitule-question { text-align: center; font-size: 1.4rem; margin: 0.5rem 0 1rem; }
/* Palette des tuiles : bleus pâles et neutres, sans couleurs vives. */
.grille-tuiles {
  --tuile-trait: #c9d8f2;          /* bordures et trait en Y */
  --tuile-survol: #f1f6ff;
  --tuile-plus-fond: #d9e7ff;      /* zone « + » choisie */
  --tuile-plus-signe: #2f5fc4;
  --tuile-moins-fond: #e9edf3;     /* zone « − » choisie */
  --tuile-moins-signe: #5d6b80;
  --tuile-signe: #8fa9d6;          /* signes au repos */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 480px; margin: 0 auto 0.5rem;
}
.tuile {
  position: relative; aspect-ratio: 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 10px;
  background: var(--surface); border: 1.5px solid var(--tuile-trait); border-radius: 22px;
  font: inherit; color: var(--texte); text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.tuile-mot {
  font-size: clamp(1rem, 4.4vw, 1.3rem); font-weight: 600; line-height: 1.25;
  overflow-wrap: break-word;
}

/* Tuile simple (un seul choix) : toute la tuile est un bouton. */
button.tuile { cursor: pointer; }
button.tuile:hover { background: var(--tuile-survol); }
button.tuile:active { transform: scale(0.97); }
button.tuile.tuile-plus { background: var(--tuile-plus-fond); border-color: var(--tuile-plus-signe); color: var(--tuile-plus-signe); }

/* Taille du texte réduite pour les mots longs : il tient toujours dans sa bande. */
.tuile-mot.mot-moyen { font-size: clamp(0.9rem, 3.8vw, 1.1rem); }
.tuile-mot.mot-long { font-size: clamp(0.8rem, 3.3vw, 0.95rem); }

/* Tuile en Y (choix + et −) :
   - bande du haut (0 à 40 % de la hauteur) réservée au mot, sans aucun trait ;
   - le Y part des bords de la bande, se rejoint au centre (60 %) puis descend jusqu'en bas ;
   - zone « + » à gauche, zone « − » à droite. */
.tuile-y { padding: 0; display: block; }
.tuile-y .tuile-mot {
  position: absolute; top: 0; left: 0; right: 0; height: 40%; z-index: 2; padding: 6px 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  pointer-events: none;
}
.tuile-traits { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.tuile-traits path { fill: none; stroke: var(--tuile-trait); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tuile-zone {
  position: absolute; inset: 0; border: 0; padding: 0; margin: 0; cursor: pointer;
  background: transparent; font: inherit; transition: background 0.15s;
}
.tuile-zone-plus { clip-path: polygon(0 40%, 50% 60%, 50% 100%, 0 100%); }
.tuile-zone-moins { clip-path: polygon(100% 40%, 50% 60%, 50% 100%, 100% 100%); }
.tuile-zone span {
  position: absolute; top: 76%; transform: translate(-50%, -50%);
  font-size: 2.2rem; font-weight: 300; line-height: 1; color: var(--tuile-signe);
}
.tuile-zone-plus span { left: 25%; }
.tuile-zone-moins span { left: 75%; }
.tuile-zone:hover { background: var(--tuile-survol); }
.tuile-zone:focus-visible { outline: none; background: var(--tuile-survol); }
.tuile-zone-plus[aria-pressed='true'] { background: var(--tuile-plus-fond); }
.tuile-zone-plus[aria-pressed='true'] span { color: var(--tuile-plus-signe); font-weight: 500; }
.tuile-zone-moins[aria-pressed='true'] { background: var(--tuile-moins-fond); }
.tuile-zone-moins[aria-pressed='true'] span { color: var(--tuile-moins-signe); font-weight: 500; }
.tuile-y.tuile-plus { border-color: var(--tuile-plus-signe); }
.tuile-y.tuile-moins { border-color: var(--tuile-moins-signe); }
.tuile-y.tuile-moins .tuile-mot { color: var(--tuile-moins-signe); }


/* Curseur de 0 à 100 (tests personnalisés « à quel point c'est vrai »). */
.bloc-curseur { max-width: 480px; margin: 0 auto 1.5rem; text-align: center; }
.valeur-curseur { display: block; font-size: 3rem; font-weight: 700; color: var(--accent-texte); line-height: 1.1; margin-bottom: 12px; }
.curseur {
  --remplissage: 50%;
  --curseur-plein: #9dbcf2;
  --curseur-vide: #e3ebf8;
  --curseur-bouton: #5d86d6;
  -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 999px; outline: none;
  background: linear-gradient(to right, var(--curseur-plein) var(--remplissage), var(--curseur-vide) var(--remplissage));
}
.curseur::-webkit-slider-thumb {
  -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 3px solid var(--curseur-bouton); cursor: grab;
}
.curseur::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--curseur-bouton); cursor: grab; }
.curseur:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-fond); }
.legende-curseur { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--texte-secondaire); margin-top: 10px; }

.ligne-choix { display: flex; flex-direction: column; padding: 10px 0; border-top: 1px solid var(--bordure); }
.ligne-choix:first-child { border-top: none; }
.ligne-choix strong { font-size: 1.1rem; }
.affirmation { font-size: 1.35rem; font-weight: 500; margin: 1rem 0 1.5rem; min-height: 3.5em; }
.echelle { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.echelle .bouton { flex-direction: column; padding: 12px 6px; font-size: 0.85rem; line-height: 1.25; text-align: center; }
.echelle .bouton strong { font-size: 1.15rem; }
.echelle .bouton.selectionne { background: var(--accent-fond); border-color: var(--accent); color: var(--accent-texte); }
@media (max-width: 520px) {
  .echelle { grid-template-columns: 1fr; }
  .echelle .bouton { flex-direction: row; justify-content: flex-start; gap: 12px; }
}

/* ---------- Graphiques de scores ---------- */

.barre-score { display: grid; grid-template-columns: 150px minmax(0, 1fr) 44px; gap: 12px; align-items: center; margin-bottom: 10px; }
.barre-score .piste { background: var(--surface-douce); border-radius: 6px; height: 22px; overflow: hidden; }
.barre-score .remplissage { height: 100%; border-radius: 6px; }
.barre-score .valeur { font-weight: 600; text-align: right; }
@media (max-width: 520px) { .barre-score { grid-template-columns: 100px minmax(0, 1fr) 36px; font-size: 0.9rem; } }

.bloc-dimension { padding: 1rem 0; border-top: 1px solid var(--bordure); }
.bloc-dimension:first-child { border-top: none; }
.ligne-source { display: grid; grid-template-columns: 190px minmax(0, 1fr) 40px; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 0.9rem; }
.ligne-source .piste { position: relative; background: var(--surface-douce); border-radius: 5px; height: 16px; }
.ligne-source .remplissage { height: 100%; border-radius: 5px; }
.ligne-source .valeur { text-align: right; font-weight: 600; }
.ligne-source.moyenne { font-weight: 600; }
.ligne-source.moyenne .remplissage { background: var(--texte) !important; opacity: 0.75; }
@media (max-width: 560px) { .ligne-source { grid-template-columns: 110px minmax(0, 1fr) 34px; font-size: 0.82rem; } }
/* Jauges de comparaison : une par personne, couleur de la dimension, nom au début de la jauge. */
.jauge { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 10px; align-items: center; margin-bottom: 8px; }
.jauge-piste { position: relative; height: 30px; background: var(--surface-douce); border-radius: 8px; overflow: hidden; }
.jauge-remplissage { position: absolute; inset: 0 auto 0 0; border-radius: 8px; }
.jauge-nom {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%); max-width: calc(100% - 16px);
  padding: 1px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.88); color: var(--texte);
  font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jauge-valeur { text-align: right; font-weight: 700; }
.jauge.moyenne { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--bordure-forte); }
.jauge.moyenne .jauge-piste { height: 34px; }
.jauge.moyenne .jauge-nom { font-weight: 800; }
/* Sur téléphone, le nom passe au-dessus de la jauge pour ne pas cacher le remplissage. */
@media (max-width: 560px) {
  .jauge { margin-top: 22px; }
  .jauge-piste { height: 16px; overflow: visible; }
  .jauge.moyenne .jauge-piste { height: 20px; }
  .jauge-nom { top: -20px; left: 0; transform: none; max-width: 100%; padding: 0; background: none; font-size: 0.82rem; }
}
.liste-personnes { display: flex; flex-wrap: wrap; gap: 6px; }
.liste-personnes span { font-size: 0.88rem; padding: 3px 12px; border-radius: 999px; background: var(--surface-douce); }

.legende-sources { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.9rem; }
.legende-sources span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--couleur-source); }


.constat { border-left: 4px solid var(--bordure-forte); padding: 10px 14px; margin-bottom: 10px; background: var(--surface); border-radius: 0; }
.constat-surestimation { border-left-color: #D85A30; }
.constat-sous-estimation { border-left-color: #1D9E75; }
.constat-consensus { border-left-color: #378ADD; }
.constat-divergence, .constat-relation { border-left-color: #BA7517; }
.constat strong { display: block; margin-bottom: 2px; }

/* ---------- Tableau de bord ---------- */

.liste-lignes { display: flex; flex-direction: column; }
.ligne-liste { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bordure); flex-wrap: wrap; }
.ligne-liste:first-child { border-top: none; }
.ligne-liste .principal { flex: 1 1 220px; min-width: 0; }
.ligne-liste .principal strong { display: block; }
.lien-copie { display: flex; gap: 8px; }
.lien-copie input { font-size: 0.85rem; }
.etat-vide { text-align: center; padding: 1.5rem 1rem; color: var(--texte-secondaire); }

/* ---------- Pied de page et consentement ---------- */

.pied-de-page { margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid var(--bordure); font-size: 0.85rem; color: var(--texte-secondaire); }
.pied-de-page .conteneur { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.pied-de-page a, .lien-bouton { color: var(--texte-secondaire); }
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }


.page-legale h2 { margin-top: 2rem; }
.page-legale .a-completer { background: var(--premium-fond); color: var(--premium); padding: 0 4px; border-radius: 4px; }

/* ---------- Impression (export PDF des synthèses) ---------- */

@media print {
  .entete, .pied-de-page, .bandeau-publicite, .ne-pas-imprimer { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .carte { break-inside: avoid; border-color: #ccc; }
}

/* ---------- Grands écrans (ordinateur) ----------
   Le site est pensé d'abord pour le téléphone. Sur un écran large, on agrandit la taille de base
   (toutes les tailles en rem suivent) et on élargit les colonnes pour ne pas laisser un îlot au milieu du vide. */
@media (min-width: 1100px) {
  html { font-size: 18px; }
  .conteneur { max-width: 1140px; }
  .conteneur-etroit { max-width: 800px; }
  .grille-tuiles, .bloc-curseur { max-width: 620px; }
  .entete .conteneur { min-height: 74px; }
  .jauge-piste { height: 34px; }
}
@media (min-width: 1600px) {
  html { font-size: 20px; }
  .conteneur { max-width: 1280px; }
}