@import url(/css/sources/header.css);
@import url(/css/sources/hero.css);
@import url(/css/sources/events.css);
@import url(/css/sources/nouveautes.css);
@import url(/css/sources/nos-services.css);
@import url(/css/sources/contact.css);
@import url(/css/sources/nos-partenaires.css);
@import url(/css/sources/temoignage.css);
@import url(/css/sources/suivez-nous.css);
@import url(/css/sources/footer.css);
@import url(/css/sources/location.css);
@import url(/css/sources/page-services.css);

/* ==========================================================================
   SOCLE COMMUN
   Jetons de conception, remise à zéro et composants partagés.
   Les fichiers de sections consomment ces valeurs et ne redéfinissent ni
   couleur, ni rayon, ni ombre en dur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices
   Une déclaration par famille. Le fichier en comptait deux pour open-sans
   et deux pour poppins-bold, et cinq variables pointaient vers des familles
   jamais déclarées.
   swap : le texte s'affiche dans la police de repli pendant le chargement,
   au lieu de rester invisible.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "montserrat-bold";
  src: url(/fonts/Montserrat-Bold.ttf);
  font-display: swap;
}
@font-face {
  font-family: "montserrat-regular";
  src: url(/fonts/Montserrat-Regular.ttf);
  font-display: swap;
}
@font-face {
  font-family: "open-sans";
  src: url(/fonts/OpenSans-SemiBold.ttf);
  font-display: swap;
}
@font-face {
  font-family: "open-sans-regular";
  src: url(/fonts/OpenSans-Regular.ttf);
  font-display: swap;
}
@font-face {
  font-family: "poppins-bold";
  src: url(/fonts/Poppins-Bold.ttf);
  font-display: swap;
}
@font-face {
  font-family: "poppins-regular";
  src: url(/fonts/Poppins-Regular.ttf);
  font-display: swap;
}
@font-face {
  font-family: "raleway-semibold";
  src: url(/fonts/Raleway-SemiBold.ttf);
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Jetons
   -------------------------------------------------------------------------- */
:root {
  /* --- Familles ------------------------------------------------------- */
  --font-title: "poppins-bold", "montserrat-bold", sans-serif;
  --font-body: "open-sans-regular", "montserrat-regular", sans-serif;
  --font-ui: "poppins-bold", sans-serif;

  /* Anciens noms conservés : ils sont encore employés dans les fichiers
     de sections, et les renommer partout n'apporterait rien de visible. */
  --Montserrat: "montserrat-bold";
  --Montserrat-regular: "montserrat-regular";
  --Open-Sans: "open-sans";
  --poppins-bold: "poppins-bold";
  --poppins-regular: "poppins-regular";
  --open-sans-regular: "open-sans-regular";
  --raleway-semibold: "raleway-semibold";

  /* --- Couleurs -------------------------------------------------------
     Le site comptait 39 valeurs distinctes pour six couleurs réelles :
     #ff0000, #ff0008 et rgb(255,0,0) sont un même rouge. */
  --red: #ff0000;
  --red-dark: #c40000;
  --red-soft: #f3b3b3;   /* survol des liens sur fond sombre */
  --maroon: #710e11;
  --maroon-deep: #3b080a;
  --navy: #00223b;

  --ink: #14181f;
  --ink-soft: rgba(0, 0, 0, 0.68);
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, 0.82);

  --surface: #ffffff;
  --field: rgba(217, 217, 217, 0.25);
  --line: rgba(0, 0, 0, 0.25);
  --line-light: rgba(255, 255, 255, 0.28);

  /* --- Espacement : échelle de 8px ------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Rembourrage des sections, identique partout. */
  --section-x: clamp(1rem, 6vw, 5rem);
  --section-y: clamp(2rem, 5vw, 3.5rem);

  /* --- Largeurs -------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 900px;
  --container-tight: 640px;
  /* Longueur de ligne confortable : au-delà, l'œil peine à retrouver le
     début de la ligne suivante. */
  --measure: 62ch;

  /* --- Typographie ----------------------------------------------------- */
  --fs-page-title: clamp(1.15rem, 3vw, 1.9rem);
  --fs-section-title: clamp(1.75rem, 4vw, 3rem);
  --fs-subtitle: clamp(1.1rem, 2.2vw, 1.6rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-small: clamp(0.85rem, 1vw, 1rem);
  --fs-ui: clamp(11px, 1.7vw, 14px);

  --lh-tight: 1.15;
  --lh-body: 1.65;

  /* --- Rayons : le site en comptait onze ------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Ombres ---------------------------------------------------------- */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.32);

  --transition: 0.2s ease;
}

/* --------------------------------------------------------------------------
   3. Remise à zéro
   Le même bloc était répété dans cinq fichiers de sections.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Empêche iOS d'agrandir le texte en orientation paysage. */
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-body);
}

/* Aucun média ne peut dépasser la largeur de l'écran : première cause de
   défilement horizontal sur mobile. */
img,
svg,
video,
iframe {
  max-width: 100%;
}

img,
video {
  display: block;
  height: auto;
}

/* Repère clavier homogène. Sans lui, la navigation au clavier est
   impossible à suivre. */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. Typographie partagée
   -------------------------------------------------------------------------- */

/* Titre de section : même traitement dans les onze sections, qui en
   donnaient chacune une définition légèrement différente. */
.section-title {
  width: 100%;
  margin-bottom: var(--space-5);
  color: inherit;
  font-family: var(--font-title);
  font-size: var(--fs-section-title);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-align: center;
  text-transform: uppercase;
}

/* Accent rouge des titres. Le sélecteur global « span { color: red } »
   colorait aussi les éléments des scripts tiers, dont le sélecteur de
   pays du champ téléphone. */
span {
  color: var(--red);
}

.iti span,
.iti * {
  color: inherit;
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   5. Composants partagés
   -------------------------------------------------------------------------- */

/* Boutons : les trois familles avaient des rayons de 8 et 12px, des
   rembourrages sans rapport et deux effets de survol différents. */
.button1,
.button2,
.but1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--red);
  color: var(--on-dark);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}

/* 44px : taille minimale d'une cible tactile. Les boutons en faisaient 38. */
.button1,
.button2,
.but1 {
  min-height: 44px;
}

/* Survol réservé aux appareils qui survolent vraiment. Sur écran tactile,
   :hover reste collé après un toucher : le bouton gardait sa teinte foncée
   et son décalage jusqu'au toucher suivant. */
@media (hover: hover) {
  .button1:hover,
  .button2:hover,
  .but1:hover {
    background-color: var(--red-dark);
    /* Un léger soulèvement plutôt qu'un scale(1.05) : agrandir un bouton
       déplace ses voisins et donne une impression d'instabilité. */
    transform: translateY(-1px);
  }
}

/* Champs de formulaire : même hauteur, même bordure, même rayon. */
.column1 input,
.column2 input,
.dropdown {
  width: 100%;
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--field);
  font-family: var(--font-body);
  font-size: 1rem;
}

/* Carte : fond translucide sur fond sombre, employée par les sections
   Événements et Nouveautés. */
.card-glass {
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(6px);
}

/* --------------------------------------------------------------------------
   6. Séparateurs obliques entre sections
   -------------------------------------------------------------------------- */
.section-divider1,
.section-divider2 {
  height: 60px;
  background-color: var(--red);
}

.section-divider1 {
  margin-bottom: -1px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.section-divider2 {
  margin-top: -1px;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}

/* --------------------------------------------------------------------------
   7. Points de rupture
   1024px pour la tablette (passage en colonne), 768px pour le téléphone.
   Le site mélangeait 600, 768 et 1024px selon les fichiers.
   Seule exception : les cartes de témoignage (temoignage.css, 660px), dont
   le seuil dépend de la largeur native de l'image, et non de l'appareil.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .section-divider1,
  .section-divider2 {
    height: 30px;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}