/* ---------------------------------------------------------------------
   Site de presentation d'Auto-Moto-Flow.

   Aucune dependance, aucun bundler : un visiteur qui veut lire des tarifs
   ne doit pas telecharger une application. La palette est celle du
   logiciel, pour qu'il se reconnaisse une fois connecte.

   La police n'est pas chargee depuis un service tiers : la politique de
   securite du serveur l'interdit, et une police distante bloque le premier
   rendu. La pile systeme s'affiche instantanement.
   --------------------------------------------------------------------- */

:root {
  --vert: #16a34a;
  --vert-clair: #dcfce7;
  --vert-fonce: #15803d;
  --sombre: #111827;
  --sombre-2: #1f2937;
  --fond: #f6f7f9;
  --ligne: #e5e7eb;
  --texte: #111827;
  --attenue: #6b7280;
  --rayon: 8px;
  --rayon-carte: 12px;
  --large: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* La barre collante ne doit pas recouvrir la section visee. */
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--texte);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

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

/* Visible seulement pour les lecteurs d'ecran. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sombre);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
}

.evitement:focus {
  left: 8px;
  top: 8px;
}

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

/* --- Typographie ---------------------------------------------------- */

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 800;
}

h3 {
  font-size: 1.1rem;
  font-weight: 650;
}

p {
  margin: 0 0 16px;
}

.surtitre {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--vert);
  margin: 0 0 10px;
}

.surtitre.clair {
  color: #6ee7a3;
}

.chapeau {
  font-size: 1.15rem;
  color: #374151;
  max-width: 34em;
}

.intro {
  color: var(--attenue);
  max-width: 46em;
  margin-bottom: 32px;
}

.intro.clair {
  color: #cbd5e1;
}

.mention {
  font-size: 0.85rem;
  color: var(--attenue);
  margin: 10px 0 0;
}

.mention.clair {
  color: #94a3b8;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--rayon);
  font-weight: 650;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn.grand {
  padding: 14px 26px;
  font-size: 1rem;
}

.btn.principal {
  background: var(--vert);
  color: #fff;
}

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

.btn.fantome {
  border-color: var(--ligne);
  color: var(--texte);
  background: #fff;
}

.btn.fantome:hover {
  border-color: var(--vert);
  color: var(--vert);
}

/* --- En-tete -------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ligne);
}

.barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 72px;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--texte);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.sigle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--vert);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.navigation {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navigation > a:not(.btn) {
  padding: 8px 12px;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: var(--rayon);
}

.navigation > a:not(.btn):hover {
  color: var(--vert);
}

.bouton-menu {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: #fff;
  cursor: pointer;
}

.barres,
.barres::before,
.barres::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--texte);
  margin: 0 auto;
  position: relative;
}

.barres::before,
.barres::after {
  content: '';
  position: absolute;
}

.barres::before {
  top: -6px;
}

.barres::after {
  top: 6px;
}

/* --- Heros ---------------------------------------------------------- */

.heros {
  padding: 72px 0 64px;
  background: linear-gradient(180deg, var(--vert-clair) 0%, #fff 62%);
}

.heros-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 20px;
}

.arguments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  color: var(--attenue);
}

.arguments li::before {
  content: '✓';
  color: var(--vert);
  font-weight: 800;
  margin-right: 7px;
}

.heros-visuel {
  margin: 0;
}

.heros-visuel img,
.vues img {
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  box-shadow: 0 20px 50px rgb(17 24 39 / 12%);
}

/* --- Bande ---------------------------------------------------------- */

.bande {
  background: var(--sombre);
  color: #fff;
  padding: 26px 0;
}

.bande p {
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  color: #e5e7eb;
}

.bande strong {
  color: #fff;
}

/* --- Passerelle vers le contact ------------------------------------- */

.passerelle {
  background: var(--vert-clair);
  padding: 44px 0;
  border-top: 1px solid var(--ligne);
}

.passerelle-contenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.passerelle h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  margin-bottom: 8px;
}

.passerelle p {
  margin: 0;
  color: #14532d;
  max-width: 44em;
}

.passerelle .btn {
  flex: none;
}

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

.section {
  padding: 80px 0;
}

.section.fond-clair {
  background: var(--fond);
}

.section.sombre {
  background: var(--sombre);
  color: #fff;
}

.section.sombre h2 {
  color: #fff;
}

/* --- Cartes de fonctionnalites -------------------------------------- */

/*
  Deux colonnes, pas un remplissage automatique. « auto-fit » en donnerait
  trois sur un grand ecran, et quatre cartes y laisseraient une carte seule
  avec deux trous a cote. Une grille 2x2 se lit d'un bloc.
*/
.cartes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 760px) {
  .cartes {
    grid-template-columns: minmax(0, 1fr);
  }
}

.carte {
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  padding: 24px;
}

.carte p {
  margin: 0;
  color: var(--attenue);
  font-size: 0.95rem;
}

.carte.souligne {
  border-color: var(--vert);
  background: var(--vert-clair);
}

.carte.souligne p {
  color: #14532d;
}

/* --- Apercu --------------------------------------------------------- */

.onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.onglets button {
  padding: 9px 16px;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
}

.onglets button[aria-selected='true'] {
  background: var(--sombre);
  border-color: var(--sombre);
  color: #fff;
  font-weight: 650;
}

.vues figure {
  margin: 0;
}

/*
  L'espace eleve se consulte sur un telephone : sa capture est verticale. La
  poser a la largeur des autres l'etirerait sur deux mille pixels de haut. Elle
  garde donc sa taille, centree sur un fond qui occupe la place laissee libre.
*/
.vue-telephone .cadre-telephone {
  display: grid;
  place-items: center;
  padding: 36px 20px;
  background: linear-gradient(160deg, var(--vert-clair) 0%, var(--fond) 100%);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
}

.vue-telephone img {
  width: 100%;
  max-width: 300px;
  border: 1px solid var(--ligne);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgb(17 24 39 / 18%);
}

.vues figcaption {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--attenue);
}

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

.prix-principal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  background: #fff;
  border: 2px solid var(--vert);
  border-radius: var(--rayon-carte);
  padding: 34px;
}

.prix-montant {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.chiffre {
  font-size: 3.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.unite {
  font-size: 0.9rem;
  color: var(--attenue);
  line-height: 1.35;
}

.prix-inclus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 4px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.93rem;
}

.prix-inclus li::before {
  content: '✓';
  color: var(--vert);
  font-weight: 800;
  margin-right: 8px;
}

.prix-action {
  text-align: center;
}

.degressif {
  margin-top: 56px;
}

.grille-degressive {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  overflow: hidden;
}

.grille-degressive th,
.grille-degressive td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--ligne);
  font-size: 0.95rem;
}

.grille-degressive thead th {
  background: var(--fond);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--attenue);
  font-weight: 650;
}

.grille-degressive tbody tr:last-child th,
.grille-degressive tbody tr:last-child td {
  border-bottom: none;
}

.grille-degressive tbody th {
  font-weight: 650;
}

/* --- Pages legales -------------------------------------------------- */

.legal h2 {
  font-size: 1.15rem;
  margin: 36px 0 12px;
}

.legal p,
.legal li {
  color: #374151;
  font-size: 0.97rem;
}

.legal ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.legal li {
  margin-bottom: 4px;
}

.legal a {
  color: var(--vert-fonce);
}

/* --- FAQ ------------------------------------------------------------ */

.questions details {
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  margin-bottom: 10px;
}

.questions summary {
  padding: 16px 20px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.questions summary::-webkit-details-marker {
  display: none;
}

.questions summary::after {
  content: '+';
  color: var(--vert);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  flex: none;
}

.questions details[open] summary::after {
  content: '−';
}

.questions details p {
  padding: 0 20px 18px;
  margin: 0;
  color: var(--attenue);
  font-size: 0.95rem;
}

/* --- Contact -------------------------------------------------------- */

.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.coordonnees {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.coordonnees li {
  display: grid;
  gap: 2px;
}

.coordonnees strong {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  font-weight: 650;
}

.coordonnees a,
.coordonnees span {
  color: #fff;
  text-decoration: none;
}

.coordonnees a:hover {
  color: #6ee7a3;
}

.formulaire {
  background: var(--sombre-2);
  border: 1px solid #374151;
  border-radius: var(--rayon-carte);
  padding: 28px;
}

.champ {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.champ label {
  font-size: 0.88rem;
  font-weight: 500;
  color: #e5e7eb;
}

.option {
  color: #94a3b8;
  font-weight: 400;
}

.champ input,
.champ textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #4b5563;
  border-radius: var(--rayon);
  background: #111827;
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
}

.champ input:focus,
.champ textarea:focus {
  border-color: var(--vert);
  outline: none;
}

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

.champ .erreur {
  font-size: 0.83rem;
  color: #fca5a5;
}

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

.formulaire .btn {
  width: 100%;
}

.formulaire .btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/*
  Le champ piege sort du flux sans « display:none » ni « hidden » : certains
  robots ignorent ce qui est explicitement masque, mais remplissent ce qu'ils
  trouvent dans le DOM.
*/
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
  Arrivee depuis un bouton « Intéressé ? ». Le liseré dit « c'est ici », le
  temps que l'oeil se pose, puis s'efface : un encadré permanent hurlerait.
*/
.formulaire.vise {
  box-shadow: 0 0 0 3px var(--vert);
  transition: box-shadow 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .formulaire.vise {
    transition: none;
  }
}

.retour {
  margin: 14px 0 0;
  font-size: 0.93rem;
  min-height: 1.4em;
}

.retour.succes {
  color: #6ee7a3;
}

.retour.echec {
  color: #fca5a5;
}

/* --- Pied ----------------------------------------------------------- */

.pied {
  background: #0b1220;
  color: #94a3b8;
  padding: 48px 0 24px;
}

.pied-grille {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}

.pied .marque {
  color: #fff;
}

.pied nav {
  display: grid;
  gap: 8px;
  align-content: start;
}

.pied nav a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.93rem;
}

.pied nav a:hover {
  color: #6ee7a3;
}

.pied-bas {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid #1f2937;
}

/* --- Adaptations ---------------------------------------------------- */

@media (max-width: 900px) {
  .heros-grille,
  .contact-grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .prix-principal {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    text-align: center;
  }

  .prix-montant {
    justify-content: center;
  }

  .prix-inclus {
    text-align: left;
  }

  .pied-grille {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .bouton-menu {
    display: block;
  }

  .navigation {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 24px 20px;
    background: #fff;
    border-bottom: 1px solid var(--ligne);
    box-shadow: 0 12px 24px rgb(17 24 39 / 10%);
  }

  .navigation.ouverte {
    display: flex;
  }

  .section {
    padding: 56px 0;
  }

  .heros {
    padding: 48px 0 40px;
  }

  .duo {
    grid-template-columns: 1fr;
  }

  .pied-grille {
    grid-template-columns: 1fr;
  }

  /* Un tableau de tarifs ne doit pas imposer un defilement horizontal. */
  .grille-degressive thead {
    display: none;
  }

  .grille-degressive,
  .grille-degressive tbody,
  .grille-degressive tr,
  .grille-degressive th,
  .grille-degressive td {
    display: block;
    width: 100%;
  }

  .grille-degressive tr {
    border-bottom: 1px solid var(--ligne);
    padding: 12px 4px;
  }

  .grille-degressive tbody th,
  .grille-degressive td {
    border: none;
    padding: 3px 14px;
  }

  .grille-degressive td::before {
    content: attr(data-libelle) ' ';
    color: var(--attenue);
  }
}