/* ==========================================================================
   Les Partenaires de l'Auto — variables.css
   Jetons de design repris de la maquette validée (inspiration Revolut, affinée
   d'après la vidéo du site Revolut fournie le 9 octobre 2026 : titres moins gras,
   boutons pilule compacts presque noirs, accueil sur fond nuit ;
   identité propre : marine, nuit, bleu, ciel ; Outfit + Inter).
   Aucun sélecteur de composant ici.

   Approche mobile d'abord : les valeurs fluides (clamp) partent du téléphone
   et grandissent jusqu'à l'ordinateur, comme dans la maquette.

   Points de rupture (les variables CSS ne sont pas utilisables dans les
   @media, ces valeurs sont donc reprises telles quelles dans style.css) :
     - téléphone large : @media (min-width: 45em) -> 720px
     - ordinateur      : @media (min-width: 64em) -> 1024px
   ========================================================================== */

:root {
  /* ---------- Couleurs de la marque ---------- */
  --c-marine: #1b3b6f;          /* boutons principaux, pastilles numérotées, section tarifs */
  --c-nuit: #0e2244;            /* sections sombres, cartes de tarif, barre de contact */
  --c-bleu: #2352a0;            /* liens, pastilles d'icône, focus sur fond clair (7,5:1) */
  --c-ciel: #7daee8;            /* rehaut sur nuit et marine uniquement (6,8:1 sur nuit) */

  /* ---------- Fonds et traits ---------- */
  --c-fond: #ffffff;
  --c-fond-alt: #f2f4f8;        /* cartes, champs, questions de la FAQ */
  --c-trait: #dde3ee;           /* séparateurs décoratifs uniquement */
  --c-trait-fort: #c9d1de;      /* traits de la liste des questions fréquentes */
  --c-trait-sombre: #2a3d61;    /* traits sur nuit : menu plein écran, conditions des tarifs */
  --c-fond-photo: #dad8dc;      /* fond derrière les photos de véhicules (studio) */
  --c-fond-photo-bas: #bdb9bb;  /* sol du studio, sous les photos remontées des cartes véhicules */
  --c-desactive: #d5dae3;       /* bouton inactif (rappel sans numéro) */

  /* ---------- Textes ---------- */
  --c-encre: #1a1f2e;           /* texte principal (16,4:1 sur fond) */
  --c-encre-douce: #4b5563;     /* texte secondaire (7,6:1 sur fond) */
  --c-sur-sombre: #ffffff;      /* texte sur nuit, marine et bleu */
  --c-sur-sombre-doux: #a9b6ce; /* texte secondaire sur nuit (7,7:1) et marine (5,4:1) */
  --c-sur-photo: #dce4f1;       /* petit texte posé sur la photo de la flotte */

  /* ---------- Couleurs fonctionnelles ---------- */
  --c-whatsapp: #25d366;        /* bouton WhatsApp uniquement, texte en nuit (8:1) */
  --c-succes: #166534;
  --c-succes-fond: #f0fdf4;
  --c-attention: #9a3412;       /* avertissements (simulateur, erreurs d'envoi) */
  --c-attention-fond: #fff7ed;
  --c-attention-trait: #fdba74;
  --c-attention-vif: #ea580c;
  --c-erreur: #b42318;          /* champ invalide (6,6:1 sur fond) */

  /* ---------- Focus clavier ---------- */
  --focus: 3px solid var(--c-bleu);
  --focus-sombre: 3px solid var(--c-ciel);
  --focus-decalage: 3px;

  /* ---------- Typographie ---------- */
  --police-titres: "Outfit", "Avenir Next", system-ui, sans-serif;
  --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Tailles de la maquette : téléphone -> ordinateur */
  --t-hero: clamp(2.25rem, 5.4vw, 4.5rem);           /* 36px -> 72px */
  --t-section: clamp(2rem, 4.4vw, 3.5rem);           /* 32px -> 56px */
  --t-section-xl: clamp(2rem, 4.8vw, 3.75rem);       /* 32px -> 60px (véhicules) */
  --t-sous-section: clamp(1.75rem, 3vw, 2.5rem);     /* 28px -> 40px (cartes de tarif) */
  --t-carte: 1.75rem;                                 /* 28px : titre de carte */
  --t-carte-agence: 1.875rem;                         /* 30px */
  --t-etape: 1.4375rem;                               /* 23px */
  --t-faq: 1.25rem;                                   /* 20px */
  --t-surtitre: clamp(1.25rem, 2vw, 1.625rem);       /* 20px -> 26px */
  --t-intro: clamp(1.0625rem, 1.5vw, 1.25rem);       /* 17px -> 20px */
  --t-intro-xl: clamp(1.0625rem, 1.6vw, 1.3125rem);  /* 17px -> 21px (véhicules) */
  --t-prix-hero: clamp(2.5rem, 5vw, 4rem);            /* 40px -> 64px */
  --t-prix-carte: clamp(3rem, 5vw, 4.25rem);          /* 48px -> 68px */
  --t-chiffre: clamp(3.5rem, 7vw, 6rem);              /* 56px -> 96px (6 000 km) */
  --t-marque: 1.4375rem;                              /* 23px */
  --t-texte: 1.0625rem;                               /* 17px */
  --t-bouton: 1rem;                                   /* 16px */
  --t-bouton-petit: 0.9375rem;                        /* 15px (en-tête) */
  --t-nav: 0.9375rem;                                 /* 15px */
  --t-pastille: 1rem;                                 /* 16px */
  --t-petit: 0.875rem;                                /* 14px */

  --g-normale: 400;
  --g-moyenne: 500;
  --g-semi: 600;
  --g-gras: 700;

  --ih-titres: 1.06;
  --ih-carte: 1.15;
  --ih-intro: 1.45;
  --ih-texte: 1.55;

  --ls-titres: -0.025em;
  --ls-carte: -0.015em;
  --ls-marque: -0.02em;

  --mesure-titre: 16ch;   /* largeur max des grands titres */
  --mesure-intro: 34em;   /* largeur max des paragraphes d'introduction */

  /* ---------- Espacements ---------- */
  --e-1: 0.25rem;   /* 4px */
  --e-2: 0.5rem;    /* 8px */
  --e-3: 0.75rem;   /* 12px */
  --e-4: 1rem;      /* 16px : écart entre cartes */
  --e-5: 1.25rem;   /* 20px */
  --e-6: 1.5rem;    /* 24px : sous un titre de section */
  --e-7: 1.75rem;   /* 28px */
  --e-8: 2rem;      /* 32px */
  --e-9: 2.25rem;   /* 36px */
  --e-10: 2.5rem;   /* 40px */
  --e-12: 3rem;     /* 48px : entre l'intro et la grille de cartes */
  --e-16: 4rem;     /* 64px */

  --e-section: clamp(4rem, 8vw, 7rem);              /* 64px -> 112px */
  --e-section-serree: clamp(2rem, 4vw, 3.5rem);     /* 32px -> 56px (sections enchaînées) */
  --e-hero-haut: clamp(2rem, 6vw, 5rem);            /* 32px -> 80px */
  --e-hero-bas: clamp(3rem, 6vw, 5rem);             /* 48px -> 80px */
  --e-gouttiere: clamp(1rem, 4vw, 2.5rem);          /* 16px -> 40px */
  --e-carte: 1.625rem 1.75rem 1.875rem;             /* 26px 28px 30px : intérieur des cartes */
  --e-pastille-photo: clamp(1rem, 3vw, 2rem);       /* position des pastilles sur la photo */

  /* ---------- Mise en page ---------- */
  --largeur-max: 75rem;           /* 1200px */
  --largeur-faq: 56.25rem;        /* 900px */
  --largeur-formulaire: 35rem;    /* 560px : formulaire de rappel */
  --hauteur-barre-contact: 4.75rem;
  --zone-sure-bas: env(safe-area-inset-bottom, 0px);

  /* ---------- Hauteurs de boutons et champs ---------- */
  --h-bouton-petit: 2.75rem;   /* 44px : en-tête */
  --h-bouton: 3rem;            /* 48px : boutons dans les cartes */
  --h-bouton-section: 3rem;    /* 48px : boutons de section (pilules compactes) */
  --h-bouton-grand: 3.25rem;   /* 52px : hero, véhicules */
  --h-champ: 3.75rem;          /* 60px : champ de rappel */
  --h-etiquette: 2.25rem;      /* 36px : « par semaine » */
  --h-question: 4.25rem;       /* 68px : question de la FAQ */
  --taille-pastille-icone: 2.75rem;  /* 44px */
  --taille-pastille-numero: 3rem;    /* 48px */

  /* ---------- Rayons ---------- */
  --r-champ: 1rem;         /* 16px : champs */
  --r-pastille: 1.125rem;  /* 18px : pastilles posées sur une photo */
  --r-faq: 1.25rem;        /* 20px : questions, message de confirmation */
  --r-carte: 1.75rem;      /* 28px : cartes */
  --r-grand: 2rem;         /* 32px : photo de la flotte, carte véhicule centrale */
  --r-pilule: 999px;       /* boutons, étiquettes, pastilles rondes */

  /* ---------- Ombres ---------- */
  /* Seules les pastilles posées sur une photo portent une ombre. */
  --ombre-pastille: 0 10px 30px rgba(14, 34, 68, 0.22);
  --ombre-barre: 0 -6px 24px rgba(14, 34, 68, 0.18);

  /* ---------- Superpositions ---------- */
  --z-barre-contact: 110;
  --z-menu: 150;               /* menu plein écran du téléphone, au-dessus de la barre de contact */
  --z-cookies: 200;

  /* ---------- Mouvements ---------- */
  --duree: 0.2s;
  --courbe-montee: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duree-montee: 0.8s;
}

/* Réglage « réduire les animations » du téléphone */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duree: 0s;
    --duree-montee: 0s;
  }
}