/* =========================================================================
   Indice de Résilience Numérique — Talandria
   Charte : fond #002B49, accent #D2232A, Montserrat + Inter.
   ⚠️ Aucune police distante, aucun CDN, aucune librairie : polices système
   uniquement. L'app doit fonctionner si tout le reste tombe.
   Mobile-first : les dirigeants cliquent depuis LinkedIn, sur leur téléphone.
   ========================================================================= */

:root {
  --bleu-talandria: #002B49;
  --bleu-fonce: #001a2d;
  --bleu-clair: #0b4a76;
  --rouge-talandria: #D2232A;
  --rouge-fonce: #a91a20;
  --blanc: #ffffff;
  --gris-texte: #1c2b36;
  --gris-doux: #5b6b78;
  --gris-bord: #d9e0e6;
  --gris-fond: #f4f6f8;
  --vert: #1f8a4c;
  --jaune: #d99a00;
  --orange: #e2711d;
  --bleu-bande: #1d6fb8;

  --rayon: 12px;
  --rayon-petit: 8px;
  --ombre: 0 2px 10px rgba(0, 43, 73, .08);
  --ombre-forte: 0 6px 24px rgba(0, 43, 73, .16);
  --police-titre: "Montserrat", "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  --police-texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 17px;
  line-height: 1.55;
  color: var(--gris-texte);
  background: var(--gris-fond);
  /* pas de zoom sur double-tap : le pouce doit pouvoir cliquer vite */
  touch-action: manipulation;
}

/* ---------------------------------------------------------------- entête */

.entete {
  background: var(--bleu-talandria);
  color: var(--blanc);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.entete-compact { padding: 10px 18px; }

.logo {
  text-decoration: none;
  color: var(--blanc);
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-marque {
  font-family: var(--police-titre);
  font-weight: 800;
  letter-spacing: .16em;
  font-size: 19px;
}

.logo-marque::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  background: var(--rouge-talandria);
  margin-top: 4px;
}

.logo-sous {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9fc0d8;
  margin-top: 5px;
}

/* ---------------------------------------------------------------- boutons */

.btn {
  display: block;
  width: 100%;
  padding: 17px 20px;
  border: none;
  border-radius: var(--rayon);
  font-family: var(--police-titre);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .08s ease, background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(.985); }

.btn-principal {
  background: var(--rouge-talandria);
  color: var(--blanc);
  box-shadow: 0 4px 14px rgba(210, 35, 42, .28);
}

.btn-principal:hover { background: var(--rouge-fonce); }

.btn-principal:disabled {
  background: #b9c3ca;
  box-shadow: none;
  cursor: not-allowed;
}

.btn-secondaire {
  background: var(--blanc);
  color: var(--bleu-talandria);
  border: 2px solid var(--gris-bord);
}

.btn-lien {
  background: transparent;
  color: var(--bleu-clair);
  text-decoration: underline;
  font-weight: 600;
  padding: 10px;
  box-shadow: none;
}

.btn-petit { width: auto; padding: 9px 14px; font-size: 14px; }

/* ---------------------------------------------------------------- accueil */

.accueil {
  max-width: 680px;
  margin: 0 auto;
  padding: 28px 20px 8px;
}

.sur-titre {
  font-family: var(--police-titre);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rouge-talandria);
  margin: 0 0 12px;
}

.accroche {
  font-family: var(--police-titre);
  font-size: 27px;
  line-height: 1.25;
  color: var(--bleu-talandria);
  margin: 0 0 14px;
  letter-spacing: -.01em;
}

.sous-accroche {
  font-size: 17px;
  color: var(--gris-doux);
  margin: 0 0 26px;
}

.mention-gratuit {
  font-size: 14px;
  color: var(--gris-doux);
  text-align: center;
  margin: 14px 0 34px;
}

.promesse, .bandes, .auteur {
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 22px 20px;
  margin: 0 0 18px;
}

.promesse-titre, .bloc-titre {
  font-family: var(--police-titre);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bleu-talandria);
  margin: 0 0 12px;
}

.promesse-texte {
  font-size: 17px;
  font-weight: 600;
  color: var(--bleu-talandria);
  margin: 0 0 14px;
}

.promesse-liste, .bandes-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.promesse-liste li, .bandes-liste li {
  position: relative;
  padding: 8px 0 8px 22px;
  border-top: 1px solid var(--gris-bord);
  font-size: 15.5px;
}

.promesse-liste li:first-child, .bandes-liste li:first-child { border-top: none; }

.puce {
  position: absolute;
  left: 0;
  top: 17px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rouge-talandria);
}

.bandes-liste li { padding-left: 30px; }

.pastille {
  position: absolute;
  left: 0;
  top: 13px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.puce-rouge { background: #c0392b; }
.puce-orange { background: var(--orange); }
.puce-jaune { background: var(--jaune); }
.puce-vert { background: var(--vert); }
.puce-bleu { background: var(--bleu-bande); }

.bandes-liste b { display: inline-block; min-width: 66px; color: var(--bleu-talandria); }

.note-zone {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--gris-doux);
  border-left: 3px solid var(--rouge-talandria);
  padding-left: 12px;
}

.auteur { font-size: 15px; color: var(--gris-doux); }
.auteur b { color: var(--bleu-talandria); }
.auteur-liens { margin: 12px 0 0; }
.auteur-liens a { color: var(--bleu-clair); }

.pied {
  text-align: center;
  font-size: 13px;
  color: var(--gris-doux);
  padding: 26px 20px 34px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pied a { color: var(--gris-doux); }

/* ---------------------------------------------------------------- progression */

/* La barre de progression est collante en haut (56px de haut). Sans ce décalage, un champ
   que le navigateur ramène en haut de l'écran (focus au doigt, ou lien d'ancre) passe SOUS
   la barre et devient illisible pendant la saisie. Mesuré : 54px de recouvrement sur
   Prénom/Nom. `scroll-padding-top` corrige les défilements programmés, `scroll-margin-top`
   corrige le champ lui-même. Les deux sont nécessaires : ils ne couvrent pas les mêmes cas. */
html {
  scroll-padding-top: 64px;
}

#form-lead input,
#form-lead select {
  scroll-margin-top: 64px;
}

.barre-progression {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--blanc);
  padding: 12px 18px 10px;
  box-shadow: 0 1px 6px rgba(0, 43, 73, .07);
}

.barre-fond {
  height: 7px;
  background: var(--gris-bord);
  border-radius: 4px;
  overflow: hidden;
}

.barre-remplie {
  height: 100%;
  background: var(--rouge-talandria);
  border-radius: 4px;
  transition: width .25s ease;
}

.barre-texte {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 7px;
  font-family: var(--police-titre);
  font-size: 13px;
  font-weight: 700;
  color: var(--bleu-talandria);
}

.etape-nom {
  font-weight: 600;
  color: var(--gris-doux);
  text-align: right;
}

/* ---------------------------------------------------------------- test */

.test {
  max-width: 680px;
  margin: 0 auto;
  padding: 22px 20px 40px;
}

.ecran.cache, .cache { display: none !important; }

.question {
  font-family: var(--police-titre);
  font-size: 22px;
  line-height: 1.3;
  color: var(--bleu-talandria);
  margin: 0 0 10px;
}

.question-note {
  font-size: 15.5px;
  color: var(--gris-doux);
  margin: 0 0 10px;
}

.question-regle {
  font-size: 14px;
  color: var(--gris-doux);
  background: #eef3f7;
  border-radius: var(--rayon-petit);
  padding: 10px 12px;
  margin: 0 0 18px;
}

.cartes { display: flex; flex-direction: column; gap: 12px; }

.carte {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--blanc);
  border: 2px solid var(--gris-bord);
  border-radius: var(--rayon);
  padding: 16px 16px 16px 52px;
  position: relative;
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.45;
  color: var(--gris-texte);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, transform .08s ease;
  -webkit-tap-highlight-color: transparent;
}

.carte:active { transform: scale(.99); }

.carte::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--gris-bord);
  background: var(--blanc);
}

.carte.choisie {
  border-color: var(--rouge-talandria);
  background: #fff6f6;
}

.carte.choisie::before {
  border-color: var(--rouge-talandria);
  background: var(--rouge-talandria);
  box-shadow: inset 0 0 0 4px #fff6f6;
}

.carte-libelle {
  display: block;
  font-family: var(--police-titre);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-doux);
  margin-bottom: 5px;
}

.carte.choisie .carte-libelle { color: var(--rouge-talandria); }

.navigation {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.navigation .btn-secondaire { flex: 0 0 40%; }
.navigation .btn-principal { flex: 1; }

.aide-nav {
  font-size: 13.5px;
  color: var(--gris-doux);
  text-align: center;
  margin: 12px 0 0;
}

/* ---------------------------------------------------------------- score */

.score-bloc {
  background: var(--bleu-talandria);
  color: var(--blanc);
  border-radius: var(--rayon);
  padding: 26px 20px;
  text-align: center;
  margin: 0 0 20px;
}

.score-chiffre {
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 62px;
  line-height: 1;
  letter-spacing: -.02em;
}

.score-chiffre small {
  font-size: 22px;
  font-weight: 600;
  opacity: .7;
  margin-left: 2px;
}

.score-bande {
  font-family: var(--police-titre);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 10px;
  color: #ffd9a8;
}

.score-lecture {
  font-size: 17px;
  color: var(--gris-texte);
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 18px;
  box-shadow: var(--ombre);
  margin: 0 0 24px;
}

.encart {
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 20px;
  margin: 0 0 20px;
}

.encart-plafond {
  background: #fff8ec;
  border: 2px solid #f0c987;
  box-shadow: none;
}

.plafond-titre {
  font-family: var(--police-titre);
  font-size: 15px;
  font-weight: 700;
  color: #8a5a00;
  margin: 0 0 8px;
}

.plafond-texte { margin: 0; font-size: 16px; color: #6b4700; }
.plafond-texte b { color: #4d3300; }

.profil { list-style: none; margin: 0 0 26px; padding: 0; }

.profil li {
  background: var(--blanc);
  border-radius: var(--rayon-petit);
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: var(--ombre);
}

.profil-ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.profil-nom { font-size: 15px; font-weight: 600; color: var(--bleu-talandria); }
.profil-pts { font-size: 13.5px; color: var(--gris-doux); white-space: nowrap; }

.barre-niveau {
  display: flex;
  gap: 5px;
  height: 12px;
}

.segment {
  flex: 1;
  border-radius: 3px;
  background: var(--gris-bord);
}

.segment.plein { background: var(--bleu-clair); }
.profil li.faible .segment.plein { background: var(--rouge-talandria); }
.profil li.faible .profil-nom::after {
  content: " ⚠";
  color: var(--rouge-talandria);
}

.faibles { list-style: none; margin: 0 0 26px; padding: 0; }

.faibles li {
  background: var(--blanc);
  border-left: 4px solid var(--rouge-talandria);
  border-radius: var(--rayon-petit);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--ombre);
  font-size: 15.5px;
}

.faibles b { color: var(--bleu-talandria); }

.actions { margin: 0 0 26px; padding-left: 22px; }
.actions li { margin-bottom: 12px; font-size: 16px; }

.cta-rapport {
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
  padding: 24px 20px;
  text-align: center;
}

.cta-rapport h2 {
  font-family: var(--police-titre);
  font-size: 20px;
  color: var(--bleu-talandria);
  margin: 0 0 10px;
}

.cta-rapport p { font-size: 15.5px; color: var(--gris-doux); margin: 0 0 18px; }

/* ---------------------------------------------------------------- formulaire */

.formulaire {
  margin-top: 8px;
  /* Deux colonnes « pensées pour le pouce » : Prénom | Nom, Email | Entreprise, Fonction |
     Effectif. Les champs longs (LinkedIn, consentement) prennent toute la largeur. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 10px;
  align-items: start;
}

.champ { margin-bottom: 16px; min-width: 0; }

/* Pleine largeur dans la grille du formulaire. */
.champ-large,
.formulaire > .erreur,
.formulaire > .btn,
.formulaire > .aide-nav { grid-column: 1 / -1; }

.champ label {
  display: block;
  font-family: var(--police-titre);
  font-size: 14px;
  font-weight: 700;
  color: var(--bleu-talandria);
  margin-bottom: 6px;
}

.requis { color: var(--rouge-talandria); }
.optionnel { color: var(--gris-doux); font-weight: 500; }

.champ input[type="text"],
.champ input[type="email"],
.champ select {
  width: 100%;
  padding: 15px 14px;
  font-family: var(--police-texte);
  font-size: 17px; /* ≥16px : iOS ne zoome pas au focus */
  color: var(--gris-texte);
  background: var(--blanc);
  border: 2px solid var(--gris-bord);
  border-radius: var(--rayon-petit);
  -webkit-appearance: none;
  appearance: none;
}

.champ select {
  background-image: linear-gradient(45deg, transparent 50%, var(--bleu-talandria) 50%),
                    linear-gradient(135deg, var(--bleu-talandria) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.champ input:focus, .champ select:focus {
  outline: none;
  border-color: var(--bleu-clair);
  box-shadow: 0 0 0 3px rgba(11, 74, 118, .14);
}

.champ input:invalid:not(:placeholder-shown) { border-color: var(--rouge-talandria); }

/* --- Aide sous le champ LinkedIn : le dirigeant ne sait pas où trouver son lien. --- */

.aide-champ {
  font-size: 13px;
  line-height: 1.45;
  color: var(--gris-doux);
  margin: 7px 0 0;
}

.aide-champ b { color: var(--bleu-talandria); }

/* Retour de validation à la saisie (sortie du champ) : vert ✅ ou rouge, jamais un code. */
.retour-champ {
  font-size: 13.5px;
  line-height: 1.45;
  margin: 8px 0 0;
  padding: 9px 11px;
  border-radius: var(--rayon-petit);
}

.retour-champ.ok {
  background: #eaf7ef;
  border: 1px solid #a9d9bd;
  color: #146b3a;
}

.retour-champ.ko {
  background: #fdeaeb;
  border: 1px solid #f0b5b8;
  color: #8d1418;
}

.champ input.champ-ok { border-color: var(--vert); }
.champ input.champ-ko { border-color: var(--rouge-talandria); }

.champ-consent { margin: 22px 0; }

.case {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  font-weight: 400 !important;
  color: var(--gris-texte) !important;
  line-height: 1.5;
  background: #eef3f7;
  border-radius: var(--rayon-petit);
  padding: 14px;
  cursor: pointer;
}

.case input[type="checkbox"] {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--rouge-talandria);
  cursor: pointer;
}

.erreur {
  background: #fdeaeb;
  color: #8d1418;
  border: 2px solid #f0b5b8;
  border-radius: var(--rayon-petit);
  padding: 12px 14px;
  font-size: 15px;
  margin: 0 0 14px;
}

/* ---------------------------------------------------------------- rapport */

.rapport {
  max-width: 780px;
  margin: 0 auto;
  padding: 26px 20px 40px;
}

.rapport-entete {
  background: var(--bleu-talandria);
  color: var(--blanc);
  border-radius: var(--rayon);
  padding: 24px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.rapport-entete .sur-titre { color: #ffb3b6; margin-bottom: 6px; }

.rapport-titre {
  font-family: var(--police-titre);
  font-size: 24px;
  margin: 0 0 8px;
  line-height: 1.2;
}

.rapport-meta {
  font-size: 13.5px;
  color: #9fc0d8;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rapport-meta b { color: var(--blanc); }

.rapport-score { text-align: center; }
.rapport-score .score-chiffre { font-size: 54px; }
.rapport-score .score-bande { margin-top: 6px; }

.rapport-section {
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 22px 20px;
  margin-bottom: 18px;
}

.rapport-section h2 {
  font-family: var(--police-titre);
  font-size: 17px;
  color: var(--bleu-talandria);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gris-bord);
}

.rapport-section .profil { margin-bottom: 0; }
.rapport-section .profil li { box-shadow: none; border: 1px solid var(--gris-bord); }
.rapport-section .faibles { margin-bottom: 0; }
.rapport-section .faibles li { box-shadow: none; border: 1px solid var(--gris-bord); border-left-width: 4px; }
.rapport-section .actions { margin-bottom: 16px; }

.rapport-note { font-size: 15px; color: var(--gris-doux); }

.tableau-plan {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin-top: 8px;
}

.tableau-plan th, .tableau-plan td {
  border: 1px solid var(--gris-bord);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.tableau-plan th {
  background: var(--gris-fond);
  font-family: var(--police-titre);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--bleu-talandria);
}

.tableau-plan td:first-child { color: var(--gris-doux); }
.tableau-plan td:not(:first-child) { width: 90px; height: 46px; }

.rapport-contact p { font-size: 15.5px; }
.rapport-signature {
  font-family: var(--police-titre);
  font-weight: 700;
  color: var(--bleu-talandria);
  letter-spacing: .04em;
}

/* ---------------------------------------------------------------- légale */

.legale {
  max-width: 680px;
  margin: 0 auto;
  padding: 26px 20px 40px;
}

.legale h1 {
  font-family: var(--police-titre);
  font-size: 25px;
  color: var(--bleu-talandria);
  margin: 0 0 8px;
}

.legale h2 {
  font-family: var(--police-titre);
  font-size: 17px;
  color: var(--bleu-talandria);
  margin: 26px 0 8px;
}

.legale-intro { color: var(--gris-doux); }
.legale p, .legale li { font-size: 15.5px; }
.legale code {
  background: #eef3f7;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 14px;
}
.legale-retour a { color: var(--bleu-clair); }

/* ---------------------------------------------------------------- très petits écrans */

/* Sous 380px, deux colonnes deviennent illisibles : on repasse en une seule colonne,
   en conservant STRICTEMENT l'ordre des champs. */
@media (max-width: 379px) {
  .formulaire { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- desktop */

@media (min-width: 720px) {
  body { font-size: 18px; }
  .accroche { font-size: 34px; }
  .question { font-size: 25px; }
  .score-chiffre { font-size: 76px; }
  .navigation .btn-secondaire { flex: 0 0 32%; }
  .pied { flex-direction: row; justify-content: center; gap: 22px; }
}

/* ---------------------------------------------------------------- impression */

@media print {
  body { background: var(--blanc); font-size: 12pt; }
  .no-print, .pied.no-print { display: none !important; }
  .rapport { max-width: none; padding: 0; }
  .rapport-entete {
    background: var(--blanc) !important;
    color: var(--bleu-talandria) !important;
    border: 2px solid var(--bleu-talandria);
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .rapport-entete .sur-titre { color: var(--rouge-talandria) !important; }
  .rapport-meta { color: var(--gris-doux) !important; }
  .rapport-meta b { color: var(--bleu-talandria) !important; }
  .rapport-section {
    box-shadow: none;
    border: 1px solid var(--gris-bord);
    page-break-inside: avoid;
  }
  .rapport-section h2 { border-bottom-color: var(--bleu-talandria); }
  .score-bande { color: var(--bleu-talandria) !important; }
  .encart-plafond { border: 2px solid #8a5a00; }
  a { color: inherit; text-decoration: none; }
}