/* Norvia Support — site public. Autonome : aucune ressource externe, aucune police à charger.
   ⚠️ Écrit en MOBILE D'ABORD : la base vaut pour un téléphone, les media queries n'ajoutent que
   les colonnes et les grandes tailles. La version précédente partait du bureau et débordait
   horizontalement sur mobile (en-tête à trois liens + libellés en `nowrap`). */
* { box-sizing: border-box; }
:root {
  color-scheme: light;
  --encre: #0f1115;
  --gris: #5b6472;
  --trait: #e7e9ee;
  --fond: #fff;
  --doux: #f6f7f9;
  --vert: #16a34a;
  --ambre: #d97706;
  --rayon: 14px;
}
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre); line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* garde-fou : plus aucun débordement latéral possible sur téléphone */
}
img { max-width: 100%; }
a { color: inherit; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 18px; }

/* ---- En-tête ---------------------------------------------------------------
   Sur téléphone : logo + sélecteur de langue + un seul bouton. Les liens d'ancre
   (« Notre service », « L'équipe ») n'apparaissent qu'à partir de 860 px : à trois
   liens, l'en-tête passait sur deux lignes et poussait la page hors de l'écran. */
header.top { border-bottom: 1px solid var(--trait); background: rgba(255,255,255,.92); position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(160%) blur(8px); }
.top .wrap { display: flex; align-items: center; gap: 10px; height: 58px; }
.marque { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; margin-right: auto; min-width: 0; }
.marque svg { display: block; flex: 0 0 auto; }
.marque .nom { display: flex; flex-direction: column; line-height: 1.1; font-size: 15px; white-space: nowrap; }
.marque .nom small { font-weight: 500; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); }
.top nav { display: flex; gap: 4px; align-items: center; }
.top nav a { text-decoration: none; font-size: 14px; color: var(--gris); padding: 8px 12px; border-radius: 10px; white-space: nowrap; }
.top nav a:hover { background: var(--doux); color: var(--encre); }
/* Sur téléphone l'en-tête tient trois choses au maximum : logo, drapeau, rien d'autre.
   Le bouton d'action y était de trop — il écrasait le nom de marque — et il est de toute
   façon présent en grand juste en dessous, dans la page. */
.top nav a.cta { display: none; background: var(--encre); color: #fff; font-weight: 600; padding: 9px 14px; font-size: 14px; }
.top nav a.lien-ancre { display: none; }
@media (min-width: 620px) { .top nav a.cta { display: inline-block; } }

/* ---- Menu de langue --------------------------------------------------------
   Bouton drapeau toujours visible dans l'en-tête (à gauche du bouton d'action, donc
   au pouce sur téléphone). Fermé : le drapeau de la langue en cours. Ouvert : la liste
   complète avec drapeau + nom, la langue active cochée. */
.lang { position: relative; flex: 0 0 auto; }
.lang-b {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 9px; border: 1px solid var(--trait); border-radius: 10px;
  background: #fff; color: var(--encre); font: inherit; font-size: 14px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.lang-b:hover { background: var(--doux); }
.lang.ouvert .lang-b { border-color: var(--encre); background: var(--doux); }
.lang-b .lg { display: none; }
.lang-b .ch { color: var(--gris); transition: transform .18s; }
.lang.ouvert .lang-b .ch { transform: rotate(180deg); }
.dr { display: block; width: 22px; height: 15px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(15,17,21,.10) inset; flex: 0 0 22px; }
.dr svg { display: block; width: 100%; height: 100%; }

.lang-p {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 190px; padding: 6px; background: #fff;
  border: 1px solid var(--trait); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15,17,21,.13), 0 2px 6px rgba(15,17,21,.06);
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.lang.ouvert .lang-p { opacity: 1; visibility: visible; transform: none; }
.lang-o {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 10px; border: 0; border-radius: 9px; background: none;
  font: inherit; font-size: 14px; color: var(--encre); text-align: left; cursor: pointer;
}
.lang-o:hover { background: var(--doux); }
.lang-o .nm { flex: 1 1 auto; }
.lang-o.actif { font-weight: 600; }
.lang-o .ok { color: var(--vert); flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .lang-p, .lang-b .ch { transition: none; } }
@media (min-width: 620px) { .lang-b .lg { display: block; } }

/* ---- Typographie / sections ---- */
section { padding: 44px 0; }
h1 { font-size: clamp(28px, 8vw, 44px); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 14px; }
h2 { font-size: clamp(22px, 5.4vw, 28px); line-height: 1.22; letter-spacing: -.01em; margin: 0 0 10px; }
h3 { font-size: 17px; margin: 0 0 6px; }
p.lead { font-size: 17px; color: var(--gris); margin: 0 0 24px; max-width: 62ch; }
.sous { color: var(--gris); margin: 0 0 26px; max-width: 62ch; }

.hero { padding: 40px 0 44px; background: radial-gradient(1200px 400px at 20% -10%, #eaf7ef 0%, transparent 60%), radial-gradient(900px 380px at 90% 0%, #eaf1fb 0%, transparent 55%); }
.hero-grid { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }

/* Boutons : pleine largeur sur téléphone (cible de doigt), en ligne dès qu'il y a la place. */
.btns { display: grid; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 15px; min-height: 48px; }
.btn-plein { background: var(--encre); color: #fff; }
.btn-vide { border: 1px solid var(--trait); color: var(--encre); background: #fff; }

.etapes { display: grid; gap: 12px; grid-template-columns: 1fr; }
.etape { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--trait); border-radius: var(--rayon); padding: 18px; }
.etape .n { flex: 0 0 30px; height: 30px; border-radius: 9px; background: var(--encre); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.etape p { margin: 4px 0 0; color: var(--gris); font-size: 15px; }

.bande { background: var(--doux); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.chiffres { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); text-align: center; }
.chiffres strong { display: block; font-size: clamp(22px, 6.5vw, 30px); letter-spacing: -.02em; }
.chiffres span { color: var(--gris); font-size: 13px; line-height: 1.35; display: block; }

footer { border-top: 1px solid var(--trait); padding: 26px 0 36px; color: var(--gris); font-size: 14px; }
footer .wrap { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; }

/* ---- Photos et réassurance ---- */
.photo { border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--trait); background: var(--doux); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero .photo { aspect-ratio: 3 / 2; }
.duo { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: center; }
.duo .photo { aspect-ratio: 3 / 2; }
.points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.points li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--gris); }
.points svg { flex: 0 0 20px; margin-top: 3px; }
.points b { color: var(--encre); font-weight: 600; }
.vignettes { display: grid; gap: 16px; grid-template-columns: 1fr; }
.vignette .photo { aspect-ratio: 4 / 3; margin-bottom: 12px; }
.vignette h3 { margin: 0 0 4px; }
.vignette p { margin: 0; color: var(--gris); font-size: 15px; }

/* ---- Page de suivi ---------------------------------------------------------
   L'ordre à l'écran : titre → consigne → champ → gages de confiance → explication.
   La consigne « entrez votre e-mail » est collée au champ : placée avant les badges,
   elle était séparée de l'action qu'elle décrit. */
.sv { max-width: 680px; }
.sv h1 { font-size: clamp(26px, 7vw, 34px); }
.sv .consigne { font-size: 15px; color: var(--gris); margin: 0 0 10px; }
#sv-form { display: grid; gap: 10px; margin: 0 0 18px; }
#sv-form input { width: 100%; min-width: 0; padding: 15px 16px; border: 1px solid #d9dde3; border-radius: 12px; font-size: 16px; background: #fff; color: var(--encre); }
#sv-form input:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px rgba(15,17,21,.07); }
#sv-form button { width: 100%; min-height: 50px; padding: 14px 24px; border: 0; border-radius: 12px; background: var(--encre); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
#sv-form button:disabled { opacity: .55; cursor: default; }

/* Gages de confiance : sur téléphone, une seule ligne compacte par gage — pas de `nowrap`,
   c'est ce qui faisait déborder la page vers la droite. */
.sv-conf { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 20px; }
.sv-conf > span { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 12px; font-size: 14px; line-height: 1.35; }
.sv-conf svg { flex: 0 0 20px; }
.sv-conf strong { font-weight: 600; }
.sv-conf em { font-style: normal; color: var(--gris); }
.sv-conf em::before { content: " — "; }

.sv-note { border: 1px solid var(--trait); border-left: 3px solid var(--vert); border-radius: 12px; padding: 15px 16px; margin: 0 0 20px; background: #fafcfb; }
.sv-note strong { display: block; margin-bottom: 6px; font-size: 15px; }
.sv-note p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--gris); }
.sv-note p:last-child { margin-bottom: 0; }

#sv-res { display: none; border: 1px solid var(--trait); border-radius: var(--rayon); padding: 18px; background: #fff; }
.sv-etape { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; }
.sv-pastille { flex: 0 0 12px; width: 12px; height: 12px; margin-top: 7px; border-radius: 50%; }

/* ---- Élargissements ---- */
@media (min-width: 560px) {
  .btns { display: flex; flex-wrap: wrap; }
  .btn { min-height: 46px; }
  #sv-form { grid-template-columns: 1fr auto; align-items: start; }
  #sv-form button { width: auto; }
  .sv-conf { grid-template-columns: repeat(3, 1fr); }
  .sv-conf > span { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sv-conf strong { display: block; }
  .sv-conf em::before { content: none; }
  .sv-conf em { display: block; }
}
@media (min-width: 760px) {
  section { padding: 64px 0; }
  .hero { padding: 64px 0 56px; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 40px; }
  .duo { grid-template-columns: 1fr 1fr; gap: 40px; }
  .vignettes { grid-template-columns: repeat(3, 1fr); }
  .etapes { grid-template-columns: repeat(3, 1fr); }
  .chiffres { grid-template-columns: repeat(4, 1fr); }
  footer .wrap { flex-wrap: nowrap; }
}
@media (min-width: 860px) {
  .top nav a.lien-ancre { display: inline-block; }
  .top .wrap { height: 64px; }
  .marque .nom { font-size: 16px; }
}