/* ==========================================================================
   QSmart — site vitrine
   --------------------------------------------------------------------------
   Palette reprise de `mobile/lib/theme/app_colors.dart`, qui fait autorité
   pour la marque. Le commentaire de ce fichier est explicite : « un seul bleu
   pour toute l'application » — d'où l'absence d'indigo ou de violet ici, hors
   le fond profond.
   ========================================================================== */

:root {
  --bleu: #1A36D9;          /* electricBlue — couleur principale */
  --cyan: #00F2FE;          /* neonCyan — accents et lueurs */
  --indigo: #270868;        /* deepIndigo — fonds sombres */

  --encre: #0F172A;
  --gris: #64748B;
  --gris-clair: #94A3B8;
  --bordure: #E2E8F0;
  --fond: #FFFFFF;
  --fond-alt: #F8FAFC;

  --rayon: 18px;
  --rayon-lg: 28px;
  --ombre: 0 8px 32px rgba(20, 24, 66, 0.10);
  --ombre-forte: 0 18px 48px rgba(20, 24, 66, 0.16);

  --largeur: 1180px;
  --entete-h: 72px;
}

/* --------------------------------------------------------------------------
   Socle
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* L'en-tête est fixe : sans cette marge, une ancre place le titre de section
     SOUS la barre, et le visiteur croit avoir atterri au mauvais endroit. */
  scroll-padding-top: calc(var(--entete-h) + 16px);
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--encre);
  background: var(--fond);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 24px;
}

.conteneur--etroit { max-width: 720px; }

/* --------------------------------------------------------------------------
   Typographie de section
   -------------------------------------------------------------------------- */

.surtitre {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--bleu);
}

.surtitre--centre { text-align: center; }

.titre-section {
  margin: 0 auto 14px;
  max-width: 760px;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1.18;
  text-align: center;
}

.sous-titre-section {
  margin: 0 auto 52px;
  max-width: 620px;
  text-align: center;
  color: var(--gris);
  font-size: 16px;
}

.degrade {
  background: linear-gradient(100deg, var(--bleu), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--entete-h);
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}

.entete--defile {
  border-bottom-color: var(--bordure);
  box-shadow: 0 4px 24px rgba(20, 24, 66, 0.06);
}

.entete__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.marque { display: flex; align-items: center; gap: 10px; }

.marque__logo {
  width: 34px; height: 34px;
  border-radius: 10px;
  object-fit: contain;
}

.marque__nom {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.nav { display: flex; align-items: center; gap: 28px; }

.nav a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gris);
  transition: color .2s;
}

.nav a:hover { color: var(--encre); }

.nav__cta {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--bleu);
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(26, 54, 217, .28);
}

.nav__cta:hover { background: #1530c0; }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.burger span {
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--encre);
  transition: transform .25s, opacity .2s;
}

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Accroche
   -------------------------------------------------------------------------- */

.hero {
  padding: calc(var(--entete-h) + 72px) 0 88px;
  background:
    radial-gradient(900px 420px at 78% 8%, rgba(0, 242, 254, .12), transparent 60%),
    radial-gradient(760px 420px at 8% 22%, rgba(26, 54, 217, .10), transparent 62%),
    var(--fond);
}

.hero__inner {
  display: grid;
  /* 1.04 : NE PAS AUGMENTER sans revérifier les boutons.
     Les deux appels à l'action du bloc d'accueil mesurent ensemble 519px ;
     cette proportion en laisse 518 à 1440px de large — la marge est d'UN
     pixel. Passer à 1.10 suffisait à les faire s'empiler, ce qui casse la
     hiérarchie de l'appel à l'action.
     Pour agrandir l'écran, jouer sur son `scale` et non sur cette colonne. */
  grid-template-columns: 1fr 1.04fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(34px, 5.2vw, 56px);
  font-weight: 900;
  letter-spacing: -1.6px;
  line-height: 1.08;
}

.hero__accroche {
  margin: 0 0 32px;
  max-width: 520px;
  font-size: 17px;
  color: var(--gris);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   ÉCRAN ENCASTRÉ — le visuel du bloc d'accueil
   --------------------------------------------------------------------------
   La capture est un téléviseur de hall d'agence. La poser à plat (`width:100%`
   + une ombre, comme auparavant) la donnait à lire comme une capture d'écran ;
   le châssis, le reflet et la lueur en font un OBJET, installé quelque part.

   Toute la mise en scène repose sur `transform` et `opacity` : ces deux
   propriétés s'animent sans recalcul de mise en page, ce qui garde le survol
   fluide même sur une machine modeste.
   -------------------------------------------------------------------------- */

.ecran {
  position: relative;
  /* Donne sa profondeur au `rotateY` : sans perspective, la rotation aplatit
     l'écran au lieu de l'incliner. */
  perspective: 1600px;
}

/* Lueur projetée au sol.
   BLEUE, parce que c'est la couleur que CET écran émet réellement — une lueur
   verte ou neutre trahirait l'objet. Si la capture changeait de dominante, cette
   valeur devrait suivre.

   Opacité montée à .55 : à .38 elle était INVISIBLE sur le fond clair du bloc
   d'accueil, constaté au rendu. Une lueur ne se voit que par contraste avec ce
   qu'elle éclaire, et ici le fond est presque blanc. */
.ecran::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 6%;
  bottom: -14px;
  height: 56px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(37, 99, 235, .55), transparent 72%);
  filter: blur(22px);
  pointer-events: none;
}

.ecran__chassis {
  position: relative;
  padding: 10px;
  border-radius: 14px;
  /* Deux gris sombres et non un noir plat : un téléviseur réel renvoie de la
     lumière sur ses arêtes, et c'est ce qui le distingue d'un rectangle. */
  background: linear-gradient(155deg, #2B3340, #0B0E14 62%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .10) inset,
    0 32px 60px -18px rgba(4, 10, 20, .62),
    0 12px 28px -12px rgba(37, 99, 235, .26);
  /* `scale(1.04)` AU REPOS, et non une réduction : la rotation `rotateY` fait
     fuir le bord droit, si bien que l'écran occupe visuellement moins que sa
     colonne et paraissait petit face au titre. C'est ici qu'on le compense —
     PAS en élargissant la colonne, qui ferait s'empiler les deux boutons du
     texte (ils tiennent à un pixel près). */
  transform: rotateY(-7deg) rotateX(2deg) scale(1.04);
  transform-origin: 60% 50%;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

/* Au survol, l'écran se redresse et avance : une invitation à le regarder,
   pas un effet gratuit. */
.ecran:hover .ecran__chassis {
  transform: rotateY(-2deg) rotateX(0deg) scale(1.08);
}

.ecran__dalle {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  background: #05070B;
  /* 16:9, le format de la capture. La dalle impose le rapport pour que le
     châssis garde ses proportions même avant chargement de l'image — sans quoi
     la page sauterait au moment où elle arrive. */
  aspect-ratio: 16 / 9;
}

.ecran__dalle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reflet de vitre : une bande oblique très peu opaque.
   Au-delà de 13 %, elle masque le contenu au lieu de suggérer le verre. */
.ecran__reflet {
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg,
    rgba(255, 255, 255, .13) 0%,
    rgba(255, 255, 255, .05) 22%,
    transparent 46%);
  pointer-events: none;
}

/* Diode d'état : un écran allumé en a une. Détail d'objet réel, et le seul
   mouvement permanent de la page. */
.ecran__diode {
  position: absolute;
  bottom: 16px;
  right: 18px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 10px 2px rgba(0, 242, 254, .7);
  animation: ecran-respire 3.2s ease-in-out infinite;
}

@keyframes ecran-respire {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

/* Pied mural : ancre l'objet. Sans lui, l'écran flotte sans raison.

   DÉCALÉ VERS LA GAUCHE, et ce n'est pas un réglage arbitraire : `margin:auto`
   le centrait géométriquement, alors que la rotation `rotateY(-7deg)` déplace
   le centre VISUEL de l'écran vers la gauche. Le pied paraissait alors décroché
   sur la droite — visible au rendu, invisible à la lecture du code.

   La valeur suit l'angle : si `rotateY` change, celle-ci doit suivre. */
.ecran__pied {
  width: 24%;
  height: 8px;
  margin: 0 auto;
  transform: translateX(-4%);
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #1A202B, #0B0E14);
}

/* --------------------------------------------------------------------------
   Boutons de téléchargement (App Store / Google Play)
   -------------------------------------------------------------------------- */

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* Proportions reprises des badges officiels : fond noir, coins arrondis,
   logo à gauche, deux lignes de texte à droite dont la seconde domine. */
.store {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px 9px 14px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  transition: transform .18s, box-shadow .18s;
}

.store:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .32);
}

.store__logo { width: 26px; height: 26px; fill: #fff; flex-shrink: 0; }

.store__texte {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
}

.store__texte small {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2px;
  opacity: .88;
}

.store__texte strong {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* La pastille dit clairement que l'application n'est pas encore téléchargeable.
   Sans elle, le bouton promettrait un lien qui n'existe pas — un prospect
   déçu dès le premier clic. */
.store__pastille {
  margin-left: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 242, 254, .16);
  color: var(--cyan);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 26px;
  border: 0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s;
}

.btn--principal {
  background: linear-gradient(100deg, var(--bleu), #0B24AA);
  color: #fff;
  box-shadow: 0 10px 28px rgba(26, 54, 217, .30);
}

.btn--principal:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(26, 54, 217, .38); }

.btn--secondaire {
  background: #fff;
  color: var(--encre);
  border: 1.5px solid var(--bordure);
}

.btn--secondaire:hover { border-color: var(--bleu); color: var(--bleu); }

.btn--bloc { width: 100%; }

.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: 88px 0; }
.section--alt { background: var(--fond-alt); }

.section--sombre {
  background:
    radial-gradient(800px 400px at 80% 0%, rgba(0, 242, 254, .10), transparent 60%),
    linear-gradient(165deg, var(--indigo), #131248 55%, #0B1030);
  color: #fff;
}

.section--sombre .titre-section { color: #fff; }
.section--sombre .sous-titre-section { color: rgba(255, 255, 255, .72); }
.section--sombre .surtitre { color: var(--cyan); }

.grille { display: grid; gap: 22px; }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   Cartes « problème »
   -------------------------------------------------------------------------- */

.carte-probleme {
  padding: 28px 24px;
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
}

.carte-probleme__icone { font-size: 30px; margin-bottom: 14px; }

.carte-probleme h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.carte-probleme p {
  margin: 0;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .74);
}

/* --------------------------------------------------------------------------
   Cartes « brique de la solution »
   -------------------------------------------------------------------------- */

.carte-brique {
  padding: 26px 22px;
  border-radius: var(--rayon);
  background: #fff;
  border: 1px solid var(--bordure);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.carte-brique:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--ombre);
}

.carte-brique__badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(26, 54, 217, .08);
  color: var(--bleu);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.carte-brique h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.carte-brique p { margin: 0; font-size: 14.5px; color: var(--gris); }

/* --------------------------------------------------------------------------
   Blocs en duo (texte + visuel)
   -------------------------------------------------------------------------- */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.duo--inverse .duo__texte { order: 2; }

.duo__texte h2 {
  margin: 0 0 26px;
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1.2;
}

.liste-atouts li {
  position: relative;
  padding: 0 0 20px 30px;
  font-size: 14.5px;
  color: var(--gris);
}

.liste-atouts li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(26, 54, 217, .10);
  box-shadow: inset 0 0 0 4px var(--bleu);
}

.liste-atouts strong {
  display: block;
  margin-bottom: 3px;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--encre);
}

.capture {
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-forte);
}

/* --------------------------------------------------------------------------
   Maquette de téléphone (dessinée en CSS, pas une image)
   -------------------------------------------------------------------------- */

.telephone {
  max-width: 300px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 40px;
  background: linear-gradient(165deg, var(--indigo), #0B1030);
  box-shadow: var(--ombre-forte);
}

.telephone__ecran {
  padding: 34px 24px 30px;
  border-radius: 30px;
  background: #fff;
  text-align: center;
}

.telephone__label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--gris-clair);
}

.telephone__numero {
  margin: 0 0 14px;
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--bleu);
}

.telephone__statut {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(16, 185, 129, .10);
  font-size: 13px;
  font-weight: 700;
  color: #047857;
}

.pastille {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .22);
}

.telephone__barre {
  height: 7px;
  border-radius: 999px;
  background: var(--bordure);
  overflow: hidden;
}

.telephone__barre span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bleu), var(--cyan));
}

.telephone__estime {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   Tarifs
   -------------------------------------------------------------------------- */

.grille--tarifs { align-items: stretch; }

.carte-tarif {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 26px;
  border-radius: var(--rayon-lg);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}

.carte-tarif--vedette {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .30);
}

.carte-tarif__ruban {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--bleu), var(--cyan));
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .9px;
  text-transform: uppercase;
  white-space: nowrap;
}

.carte-tarif h3 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}

.carte-tarif__cible {
  margin: 0 0 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, .62);
}

.carte-tarif__prix {
  margin: 0 0 24px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, .78);
}

.carte-tarif__prix span {
  display: block;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -1.4px;
  line-height: 1.1;
  color: #fff;
}

.carte-tarif__prix small {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
}

.carte-tarif ul { margin: 0 0 26px; flex: 1; }

.carte-tarif li {
  position: relative;
  padding: 0 0 11px 24px;
  font-size: 14px;
  color: rgba(255, 255, 255, .80);
}

.carte-tarif li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 900;
  color: var(--cyan);
}

/* La carte vedette est sur fond blanc : le texte clair y serait illisible. */
.carte-tarif--vedette h3,
.carte-tarif--vedette .carte-tarif__prix span { color: var(--encre); }
.carte-tarif--vedette .carte-tarif__cible { color: var(--gris); }
.carte-tarif--vedette .carte-tarif__prix { color: var(--gris); }
.carte-tarif--vedette .carte-tarif__prix small { color: var(--gris-clair); }
.carte-tarif--vedette li { color: var(--gris); }
.carte-tarif--vedette li::before { color: var(--bleu); }

/* --------------------------------------------------------------------------
   Formulaire
   -------------------------------------------------------------------------- */

.formulaire {
  padding: 34px;
  border-radius: var(--rayon-lg);
  background: #fff;
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre);
}

.formulaire__ligne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.champ { margin-bottom: 18px; }

.champ label {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--encre);
}

.champ label span { color: var(--bleu); }

.champ input,
.champ textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--bordure);
  border-radius: 13px;
  background: var(--fond-alt);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--encre);
  transition: border-color .18s, background .18s;
}

.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--bleu);
  background: #fff;
}

.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: #EF4444; }

.champ textarea { resize: vertical; min-height: 120px; }

/* Piège à robots : retiré du flux sans `display:none`, que certains scripts
   détectent pour l'ignorer. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formulaire__retour {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  min-height: 21px;
}

.formulaire__retour--succes { color: #047857; }
.formulaire__retour--erreur { color: #B91C1C; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.pied {
  padding: 44px 0;
  background: var(--encre);
  color: rgba(255, 255, 255, .66);
}

.pied__inner { text-align: center; }

.pied__marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: #fff;
}

.pied__mention { margin: 0 0 18px; font-size: 14px; }
.pied__copyright { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .42); }

/* --------------------------------------------------------------------------
   Adaptation aux petits écrans
   --------------------------------------------------------------------------
   Beaucoup de prospects consulteront depuis un téléphone : la page doit rester
   lisible sans défilement horizontal.
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .hero__inner,
  .duo { grid-template-columns: 1fr; gap: 40px; }

  /* Sur une colonne, l'ordre inversé n'a plus de sens : le texte passe
     toujours avant son illustration. */
  .duo--inverse .duo__texte { order: 0; }

  .grille--3,
  .grille--4 { grid-template-columns: repeat(2, 1fr); }

  .hero__visuel { order: -1; }
}

@media (max-width: 768px) {
  .nav {
    position: fixed;
    inset: var(--entete-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 22px;
    background: #fff;
    border-bottom: 1px solid var(--bordure);
    box-shadow: 0 12px 28px rgba(20, 24, 66, .10);
    transform: translateY(-120%);
    transition: transform .28s ease;
  }

  .nav--ouvert { transform: translateY(0); }

  .nav a { padding: 14px 0; border-bottom: 1px solid var(--bordure); }
  .nav__cta { margin-top: 14px; text-align: center; border-bottom: 0; }

  .burger { display: flex; }

  .section { padding: 64px 0; }
  .hero { padding: calc(var(--entete-h) + 48px) 0 64px; }

  .grille--3,
  .grille--4 { grid-template-columns: 1fr; }

  .formulaire { padding: 24px 20px; }
  .formulaire__ligne { grid-template-columns: 1fr; gap: 0; }

  /* La carte vedette portait un décalage vertical sur grand écran ; sur une
     colonne il créerait un trou dans la liste. */
  .carte-tarif--vedette { transform: none; }
}

@media (max-width: 380px) {
  .conteneur { padding: 0 16px; }
  .telephone__numero { font-size: 44px; }
}

/* Respecte le réglage système de réduction des animations. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Bloc application mobile
   -------------------------------------------------------------------------- */

.section--app {
  background:
    radial-gradient(700px 360px at 88% 12%, rgba(0, 242, 254, .10), transparent 60%),
    var(--fond-alt);
}

.app__intro {
  margin: 0 0 22px;
  font-size: 16px;
  color: var(--gris);
}

.app__points { margin: 0 0 28px; }

.app__points li {
  position: relative;
  padding: 0 0 11px 26px;
  font-size: 14.5px;
  color: var(--gris);
}

.app__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 900;
  color: var(--bleu);
}

.app__note {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--gris-clair);
}

/* ==========================================================================
   CARROUSEL DES CAPTURES — pellicule en diagonale
   --------------------------------------------------------------------------
   Plusieurs téléphones visibles, inclinés, celui du centre au premier plan.
   Les positions sont calculées en JS (`assets/js/main.js`) : la distance au
   centre décide du décalage, de l'échelle, de la rotation et de l'opacité.
   Le CSS ne porte que l'apparence et la transition.
   ========================================================================== */

.pellicule { position: relative; }

.pellicule__scene {
  position: relative;
  height: 560px;
  display: grid;
  place-items: center;
  /* Les téléphones latéraux sortent du cadre : sans cette coupe, ils
     élargiraient la grille `.duo` et décaleraient la colonne de texte. */
  overflow: hidden;
  /* Donne de la profondeur au `rotateY` appliqué en JS. Sans perspective, la
     rotation aplatit les téléphones au lieu de les incliner. */
  perspective: 1400px;

  /* Les écrans du fond étaient TRANCHÉS NET par l'`overflow` ci-dessus — un
     bord vertical franc en plein milieu d'un téléphone, qui ressemblait à un
     défaut d'affichage. Ce dégradé les fait disparaître en fondu : la coupe
     reste, mais elle ne se voit plus. Constaté à 5 captures, où les écrans
     extrêmes atteignent le bord de la scène. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.pellicule__diapo {
  position: absolute;
  width: 248px;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
  /* `transform` et `opacity` uniquement : ces deux propriétés s'animent sans
     recalcul de mise en page, ce qui garde le défilement fluide sur mobile. */
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.55s ease,
              filter 0.55s ease;
}

.pellicule__diapo:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 6px;
  border-radius: 34px;
}

.pellicule__capture {
  display: block;
  width: 100%;
  border-radius: 30px;
  box-shadow: var(--ombre-forte);
}

.pellicule__legende {
  margin: 4px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--encre);
  min-height: 22px;
}

.pellicule__legende small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gris);
}

.pellicule__points {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}

.pellicule__point {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--bordure);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.pellicule__point[aria-selected="true"] {
  width: 26px;
  background: var(--bleu);
}

.pellicule__point:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* Aucune capture fournie, ou toutes introuvables : un cadre d'attente plutôt
   qu'un trou dans la page. Posé par le script, jamais par défaut — sans quoi
   il s'afficherait une fraction de seconde avant les vraies images. */
.pellicule--vide .pellicule__scene {
  height: 420px;
  border: 2px dashed var(--bordure);
  border-radius: 32px;
  max-width: 300px;
  margin: 0 auto;
  color: var(--gris-clair);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 20px;
}

.pellicule--vide .pellicule__scene::after {
  content: "Captures de l'application à venir";
}

.pellicule--vide .pellicule__points { display: none; }

/* Une seule capture : ni pastilles ni clic, le téléphone reste centré. */
.pellicule--unique .pellicule__points { display: none; }
.pellicule--unique .pellicule__diapo { cursor: default; }

/* Écrans étroits : la scène se resserre.
   DÉCLARÉ APRÈS les règles ci-dessus, et non dans les media queries du haut du
   fichier : à spécificité égale, c'est la dernière déclaration qui gagne, et
   une règle placée avant `.pellicule__scene` serait restée sans effet. Le
   décalage horizontal, lui, est calculé en JS et lit cette variable. */
@media (max-width: 768px) {
  .pellicule__scene {
    height: 470px;
    /* Le fondu se resserre aussi : sur 390px de large, un masque à 12 % laissait
       les écrans voisins presque invisibles. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }

  .pellicule__diapo { width: 196px; }
}

@media (max-width: 380px) {
  .pellicule__scene { height: 420px; }
  .pellicule__diapo { width: 172px; }
}

/* Écran encastré sur mobile.
   DÉCLARÉ ICI, après le bloc `.ecran` : à spécificité égale c'est la dernière
   déclaration qui gagne, et une règle placée avant resterait sans effet. */
@media (max-width: 980px) {
  /* LE TEXTE AVANT L'ÉCRAN, sur une colonne.
     Le titre et l'accroche portent la proposition de valeur : ils doivent être
     lus en premier. Le CSS appliquait déjà cette règle aux blocs `.duo`
     (« le texte passe toujours avant son illustration ») mais l'avait oubliée
     pour le bloc d'accueil — l'écran s'affichait donc au-dessus du titre. */
  .hero__texte { order: 0; }
  .hero__visuel { order: 1; }

  /* Plus d'inclinaison : la colonne fait toute la largeur, et une perspective
     sur un élément centré penche sans rien évoquer. L'écran est aussi plus
     petit, donc son texte se lit moins bien de biais. */
  .ecran__chassis {
    transform: none;
    padding: 8px;
  }

  .ecran:hover .ecran__chassis { transform: none; }

  /* La lueur se resserre avec l'écran. */
  .ecran::after {
    left: 14%;
    right: 14%;
    bottom: -14px;
    height: 44px;
  }
}

@media (max-width: 560px) {
  .ecran__chassis { padding: 6px; border-radius: 11px; }
  .ecran__dalle { border-radius: 6px; }
  /* Sous cette largeur, la diode n'est plus qu'un point parasite. */
  .ecran__diode { display: none; }
}

/* `prefers-reduced-motion` est déjà honoré plus haut pour les transitions,
   mais la diode est une animation INFINIE : elle doit s'arrêter explicitement.
   Un clignotement permanent est précisément ce que ce réglage vise. */
@media (prefers-reduced-motion: reduce) {
  .ecran__diode { animation: none; opacity: .8; }
  .ecran__chassis { transition: none; }
}