/* =========================================================================
   COHNFORT — Feuille de style principale
   -------------------------------------------------------------------------
   Organisation du fichier :
     1. Variables globales (:root)          → couleurs, typo, espacements
     2. Réinitialisation & bases            → reset léger, éléments HTML
     3. Utilitaires & mise en page          → conteneurs, grilles, boutons,
                                              texture velours côtelé
     4. En-tête & navigation                → header (sombre), menu mobile
     5. Composants de contenu               → hero, cartes, sections, formulaires
     6. Pied de page                        → footer
     7. Accessibilité & états focus
     8. Animations                          → apparitions, transitions de page
     9. Media queries (mobile-first)        → tablette (>= 640px), desktop (>= 1024px)

   Approche : "mobile-first". Les styles de base ciblent le mobile,
   les media queries en fin de fichier ajoutent tablette puis desktop.

   Note contraste (WCAG AA) : la palette est volontairement mate et sourde.
   Le caramel n'a pas un contraste suffisant sur les fonds clairs « lin mat » :
   il est donc réservé aux accents sur fond sombre (logo, sur-titres, focus)
   et remplacé par le velours foncé pour le texte des liens sur fond clair.
   ========================================================================= */


/* =========================================================================
   1. VARIABLES GLOBALES
   ========================================================================= */
:root {

  /* --- Palette de marque (imposée) -----------------------------------
     Tons chauds, mats et profonds. Ni blanc pur, ni noir pur,
     ni beige vif ou pastel. */
  --marron-nuit:    #2C1E16;  /* fond sombre principal, texte, header, footer */
  --velours-fonce:  #4A2E24;  /* base de la texture velours, accents           */
  --velours-clair:  #6B4536;  /* rayure claire de la texture velours           */
  --caramel:        #A9673C;  /* accent : logo « ohn », sur fond sombre        */
  --taupe:          #8A7862;  /* bordures, surfaces secondaires (sans texte)   */
  --lin-mat:        #C7BBA8;  /* fond principal des sections claires           */

  /* --- Nuances utilitaires dérivées (lisibilité / contraste) ---------
     Ajoutées pour garantir le niveau WCAG AA sans sortir de l'esprit
     de la palette. */
  --lin-fonce:      #BBAE99;  /* sections alternées, en-têtes de page internes */
  --lin-clair:      #D6CBB9;  /* surfaces de cartes, champs de formulaire      */
  --caramel-clair:  #C98A5A;  /* petit texte d'accent sur fond marron nuit     */

  /* --- Couleurs fonctionnelles -------------------------------------- */
  --texte:            var(--marron-nuit);
  --texte-sur-sombre: var(--lin-mat);
  --lien:             var(--velours-fonce);   /* liens sur fond clair          */
  --fond:             var(--lin-mat);
  --fond-sombre:      var(--marron-nuit);
  --bordure:          var(--taupe);
  --succes:           #245A41;  /* messages de confirmation                    */
  --erreur:           #8F2722;  /* messages d'erreur de formulaire             */

  /* --- Typographie -------------------------------------------------------
     Titres : serif élégante (Playfair Display).
     Corps  : sans-serif lisible (Inter).
     Chargées via Google Fonts dans le <head> de chaque page ;
     polices système en repli. */
  --police-titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --police-corps: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Échelle typographique (fluide via clamp) ----------------------- */
  --taille-h1: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  --taille-h2: clamp(1.6rem, 1.3rem + 1.6vw, 2.25rem);
  --taille-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.4rem);
  --taille-corps: 1rem;
  --taille-petit: 0.875rem;

  /* --- Espacements ---------------------------------------------------- */
  --espace-xs: 0.5rem;
  --espace-sm: 1rem;
  --espace-md: 1.75rem;
  --espace-lg: 3rem;
  --espace-xl: 5rem;

  /* --- Divers ------------------------------------------------------- */
  --largeur-max: 1140px;
  --rayon: 10px;
  --rayon-sm: 6px;
  --ombre: 0 6px 24px rgba(20, 12, 8, 0.28);
  --ombre-legere: 0 2px 10px rgba(20, 12, 8, 0.18);
  --transition: 0.2s ease;
}


/* =========================================================================
   2. RÉINITIALISATION & BASES
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Respecte la préférence système « réduire les animations » : on neutralise
   toutes les animations / transitions et on affiche le contenu directement.
   (Le JavaScript vérifie aussi cette préférence et n'arme alors aucune
   animation d'apparition ni transition de page.) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Neutralise aussi les transitions de vue natives (View Transitions API). */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  /* Effet de brillance du badge : totalement retiré (badge inchangé sinon). */
  .hero .badge-avantage::after,
  .page-header .badge-avantage::after {
    display: none;
  }
}

body {
  margin: 0;
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  line-height: 1.65;
  color: var(--texte);
  background-color: var(--fond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  line-height: 1.2;
  margin: 0 0 var(--espace-sm);
  font-weight: 600;
}

h1 { font-size: var(--taille-h1); }
h2 { font-size: var(--taille-h2); }
h3 { font-size: var(--taille-h3); font-weight: 700; }

p { margin: 0 0 var(--espace-sm); }

a {
  color: var(--lien);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--caramel);
  transition: color var(--transition);
}

a:hover { color: var(--marron-nuit); }

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

ul, ol { margin: 0 0 var(--espace-sm); padding-left: 1.25rem; }
li { margin-bottom: 0.35rem; }

hr {
  border: none;
  border-top: 1px solid var(--bordure);
  margin: var(--espace-lg) 0;
}


/* =========================================================================
   3. UTILITAIRES & MISE EN PAGE
   ========================================================================= */

/* Conteneur centré à largeur maximale. */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--espace-sm);
}

/* Section verticale standard. */
.section {
  padding-block: var(--espace-lg);
}

/* --- TEXTURE VELOURS CÔTELÉ -----------------------------------------
   Fines rayures verticales simulant le velours côtelé. À réserver aux
   surfaces peu chargées en texte : boutons principaux, bandeaux d'accent
   courts (CTA, chiffres clés). JAMAIS sur de longs paragraphes ni sur le
   fond marron nuit principal. */
.velours-texture {
  background-color: var(--velours-fonce);   /* repli si les dégradés échouent */
  background-image: repeating-linear-gradient(
    90deg,
    var(--velours-fonce) 0px,
    var(--velours-fonce) 4px,
    var(--velours-clair) 4px,
    var(--velours-clair) 8px
  );
}

/* Bande de section habillée de la texture velours (contenu court).
   Un voile marron nuit semi-opaque est superposé aux rayures : la côte
   reste visible mais le texte lin mat garde un contraste AA (>= 4.5:1)
   même au-dessus de la rayure la plus claire. */
.section--velours {
  background-color: var(--velours-fonce);
  background-image:
    linear-gradient(rgba(44, 30, 22, 0.45), rgba(44, 30, 22, 0.45)),
    repeating-linear-gradient(
      90deg,
      var(--velours-fonce) 0px,
      var(--velours-fonce) 4px,
      var(--velours-clair) 4px,
      var(--velours-clair) 8px
    );
  color: var(--lin-mat);
}

/* Bande de section sombre unie (marron nuit), pour les zones plus rédigées. */
.section--sombre {
  background-color: var(--fond-sombre);
  color: var(--texte-sur-sombre);
}

.section--sombre h1,
.section--sombre h2,
.section--sombre h3,
.section--velours h1,
.section--velours h2,
.section--velours h3 {
  color: var(--lin-mat);
}

.section--sombre a,
.section--velours a {
  color: var(--lin-mat);
  text-decoration-color: var(--caramel-clair);
}

.section--sombre a:hover,
.section--velours a:hover {
  color: #FFF;                 /* exception ponctuelle : survol d'un lien */
}

/* Section alternée claire : lin légèrement plus foncé, texte sombre conservé. */
.section--alt {
  background-color: var(--lin-fonce);
}

/* Titre de section avec petit chapô au-dessus. */
.section__intro {
  max-width: 62ch;
  margin-bottom: var(--espace-md);
}

.surtitre {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--taille-petit);
  font-weight: 700;
  color: var(--velours-fonce);   /* sur fond clair : contraste suffisant */
  margin-bottom: var(--espace-xs);
}

.section--sombre .surtitre { color: var(--caramel-clair); }
/* Sur la texture velours, le petit texte reste en lin mat (contraste). */
.section--velours .surtitre { color: var(--lin-mat); }

/* Texte d'accroche un peu plus grand. */
.accroche {
  font-size: 1.125rem;
  max-width: 60ch;
}

.centre { text-align: center; }
.centre .section__intro { margin-inline: auto; }

/* --- Boutons ---------------------------------------------------------- */
.bouton {
  display: inline-block;
  font-family: var(--police-corps);
  /* >= 18.66px + gras => catégorie « grand texte » WCAG :
     les couples de couleurs ci-dessous y atteignent alors le ratio AA. */
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  border-radius: var(--rayon-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}

/* Bouton principal : aplat velours foncé + texte lin mat.
   Même forme, même rayon et même survol que le bouton secondaire :
   les deux CTA restent visuellement cohérents, sans texture rayée. */
.bouton--principal {
  background-color: var(--velours-fonce);
  color: var(--lin-mat);
  border-color: var(--velours-fonce);
}

.bouton--principal:hover {
  background-color: var(--marron-nuit);
  border-color: var(--marron-nuit);
  color: var(--lin-mat);
  transform: translateY(-1px);
}

/* Sur une bande velours, le bouton principal foncé se fondrait dans le
   fond : on l'inverse en aplat clair pour qu'il ressorte. */
.section--velours .bouton--principal {
  background-color: var(--lin-mat);
  color: var(--marron-nuit);
  border-color: var(--lin-mat);
}

.section--velours .bouton--principal:hover {
  background-color: var(--caramel);
  border-color: var(--caramel);
  color: var(--marron-nuit);
}

/* Bouton secondaire : contour, sur fond clair. */
.bouton--secondaire {
  background-color: transparent;
  color: var(--velours-fonce);
  border-color: var(--velours-fonce);
}

.bouton--secondaire:hover {
  background-color: var(--velours-fonce);
  color: var(--lin-mat);
}

/* Bouton secondaire sur fond sombre / velours / hero. */
.section--sombre .bouton--secondaire,
.section--velours .bouton--secondaire,
.hero .bouton--secondaire {
  color: var(--lin-mat);
  border-color: var(--lin-mat);
}

.section--sombre .bouton--secondaire:hover,
.section--velours .bouton--secondaire:hover,
.hero .bouton--secondaire:hover {
  background-color: var(--lin-mat);
  color: var(--marron-nuit);
  border-color: var(--lin-mat);
}

/* --- Grilles réutilisables ----------------------------------------- */
.grille {
  display: grid;
  gap: var(--espace-md);
  grid-template-columns: 1fr;           /* mobile : une colonne */
  /* Utilisée aussi comme <ul> (grilles de .carte) : on neutralise puces et
     retrait par défaut du navigateur. Sans effet sur les <div class="grille">.
     La balise <ul>/<li> est conservée pour les lecteurs d'écran. */
  list-style: none;
  margin: 0;
  padding: 0;
}


/* =========================================================================
   4. EN-TÊTE & NAVIGATION  (fond sombre : le « ohn » caramel du logo
      s'y détache nettement)
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--marron-nuit);
  border-bottom: 1px solid var(--velours-fonce);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-sm);
  padding-block: 0.75rem;
}

/* --- Logo ----------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--lin-mat);
}

/* Nom de marque en trois segments :
     « C » + « fort »  → lin mat (ici, header/footer sombres)
     « ohn »           → caramel, initiales du fondateur, se détache du mot */
.logo-c   { color: var(--lin-mat); }
.logo-ohn { color: var(--caramel); }

/* --- Navigation --------------------------------------------------- */
/* Liste de 1er niveau uniquement (« > ul ») : les sous-menus ont leurs
   propres règles. */
.nav-principale > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Liens de nav ET boutons des groupes déroulants : même allure. */
.nav-principale a,
.nav-groupe__bouton {
  display: block;
  width: 100%;
  padding: 0.75rem var(--espace-sm);
  color: var(--lin-mat);
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 600;
  border: 0;
  border-radius: var(--rayon-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.nav-principale a:hover,
.nav-groupe__bouton:hover {
  background-color: rgba(199, 187, 168, 0.14);
  color: var(--lin-mat);
}

/* Page courante : signalée aussi via aria-current="page" dans le HTML,
   y compris sur un lien situé dans un sous-menu. */
.nav-principale a[aria-current="page"] {
  color: var(--caramel-clair);
  box-shadow: inset 0 -3px 0 var(--caramel);
}

/* --- Groupes déroulants (Services, Contact) ---------------------- */
/* <button> natif : on neutralise complètement l'habillage OS (fond gris/
   blanc, bordure biseautée) pour ne garder que le style du site. */
.nav-groupe__bouton {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  font: inherit;
  color: var(--lin-mat);
}

.nav-groupe__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.nav-groupe__bouton[aria-expanded="true"] .nav-groupe__chevron {
  transform: rotate(180deg);
}

/* Section active : la page courante appartient à ce groupe. */
.nav-groupe--actif > .nav-groupe__bouton {
  color: var(--caramel-clair);
  box-shadow: inset 0 -3px 0 var(--caramel);
}

/* Sous-menu — état de base = accordéon en flux (mobile). visibility masque
   aussi les liens du focus clavier quand le sous-menu est replié. */
.nav-sous-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  transition: max-height 180ms ease, visibility 180ms;
}

.nav-groupe__bouton[aria-expanded="true"] + .nav-sous-menu {
  max-height: 16rem;
  visibility: visible;
}

.nav-sous-menu a {
  padding-left: var(--espace-lg);
  font-weight: 500;
}

/* --- Bouton hamburger (mobile uniquement) ----------------------- */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--velours-clair);
  border-radius: var(--rayon-sm);
  cursor: pointer;
  color: var(--lin-mat);
}

.menu-toggle:hover { background-color: rgba(199, 187, 168, 0.14); }

.menu-toggle svg { width: 24px; height: 24px; }

/* Icône « fermer » masquée par défaut, affichée quand le menu est ouvert. */
.menu-toggle .icone-fermer { display: none; }
.menu-toggle[aria-expanded="true"] .icone-ouvrir { display: none; }
.menu-toggle[aria-expanded="true"] .icone-fermer { display: block; }

/* Menu déroulant mobile : masqué tant que le JS ne l'ouvre pas.
   L'attribut [hidden] est retiré/ajouté par main.js. */
@media (max-width: 1023px) {
  .nav-principale {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background-color: var(--marron-nuit);
    border-bottom: 1px solid var(--velours-fonce);
    box-shadow: var(--ombre-legere);
    padding: var(--espace-sm);
  }

  .nav-principale[hidden] { display: none; }
}


/* =========================================================================
   5. COMPOSANTS DE CONTENU
   ========================================================================= */

/* --- Hero (bandeau principal d'accueil) --------------------------- */
.hero {
  background-color: var(--marron-nuit);
  color: var(--lin-mat);
  padding-block: var(--espace-xl);
  /* Dégradés chauds discrets pour de la profondeur, sans image lourde
     ni texture (grande surface de texte => lisibilité). */
  background-image:
    radial-gradient(ellipse at top right, rgba(107, 69, 54, 0.55), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(74, 46, 36, 0.6), transparent 50%);
}

.hero h1 {
  color: var(--lin-mat);
  margin-bottom: var(--espace-sm);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-sm);
}

/* --- Badge « avantage » -------------------------------------------------
   Encart court et bien visible pour un argument différenciant (ex. pas de
   surfacturation soir / nuit / week-end). Fond caramel + texte marron nuit
   en gras : même couple que le lien d'évitement et les boutons. La taille
   (>= 18,66 px + gras) place le texte en catégorie « grand texte » WCAG,
   où ce couple atteint le ratio AA. Ressort sur fond clair comme sur le
   hero sombre. */
.badge-avantage {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--espace-md);
  padding: 0.65rem 1.05rem;
  background-color: var(--caramel);
  color: var(--marron-nuit);
  border: 1px solid var(--velours-fonce);
  border-radius: var(--rayon-sm);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
}

.badge-avantage svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 0.1em;
}

/* --- Effet de brillance (badge du hero d'accueil + badge de services.html) -
   Le RENDU du balayage est 100 % CSS (ci-dessous, transform seul, composité
   GPU). L'ORCHESTRATION du minutage (cycle auto toutes les ~13 s, survol,
   un seul balayage à la fois, remise à zéro du minuteur après survol) est
   pilotée par main.js, qui se contente d'ajouter/retirer .badge--brillance.
   Au repos, le pseudo-élément est hors champ (invisible) et sans animation.
   Ne cible que les badges du hero et du .page-header (pas celui de contact).
   Désactivé sous prefers-reduced-motion (règle dédiée dans le bloc reduce). */
.hero .badge-avantage,
.page-header .badge-avantage {
  position: relative;
  overflow: hidden;
}

.hero .badge-avantage::after,
.page-header .badge-avantage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(199, 187, 168, 0.35) 50%,
    transparent 60%
  );
  transform: translateX(-100%);   /* état de repos : hors champ, à gauche */
}

/* Classe posée par le JS le temps d'un balayage (~2,4 s), puis retirée
   sur l'événement animationend. */
.hero .badge-avantage.badge--brillance::after,
.page-header .badge-avantage.badge--brillance::after {
  animation: badge-brillance 2.4s ease-in-out;
}

@keyframes badge-brillance {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* --- Encart de renfort (page Services → page Autres services) ---------
   Phrase courte suivie d'un bouton à contour identique à « Découvrir nos
   services » (.bouton--secondaire) : pas de fond ni de texture propre. */
.encart-renfort {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin: var(--espace-md) 0 0;
  line-height: 1.5;
}

/* --- Bandeau d'appel à l'action (bas de page) ------------------- */
.cta-final { text-align: center; }

.cta-final h2 { margin-bottom: var(--espace-xs); }

.cta-final p {
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--espace-md);
}

/* --- Cartes ------------------------------------------------------- */
/* Surface CLAIRE (--lin-clair) : le texte doit rester FONCÉ, y compris
   quand la carte est placée dans une section à texte clair
   (.section--sombre / .section--velours). On réaffirme donc explicitement
   les couleurs de texte ici — jamais via opacity (illisible selon l'écran),
   toujours via des couleurs dédiées de la palette. */
.carte {
  background-color: var(--lin-clair);
  color: var(--velours-fonce);        /* paragraphe : foncé légèrement adouci */
  border: 1px solid var(--taupe);
  border-radius: var(--rayon);
  padding: var(--espace-md);
  box-shadow: var(--ombre-legere);
  height: 100%;
}

/* Titre de carte : contraste maximal sur le fond clair. */
.carte h3 {
  color: var(--marron-nuit);
}

/* Paragraphe de carte : foncé mais un cran plus doux que le titre,
   pour la hiérarchie visuelle (ratio ~7,7:1 sur --lin-clair, > AA). */
.carte p {
  color: var(--velours-fonce);
}

/* Lien d'action au bas d'une carte de service (vers la page devis).
   La marge basse du <p> qui le précède suffit à l'espacer ; le padding
   de .carte assure l'espace en dessous. */
.carte__cta {
  display: inline-block;
  font-weight: 700;
}

/* Carte cliquable : tout le bloc devient un lien via le pseudo-élément
   étiré (voir .carte-lien a::after). */
.carte-lien {
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}

.carte-lien:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre);
}

.carte-lien h3 { margin-bottom: var(--espace-xs); }

.carte-lien a {
  text-decoration: none;
  color: var(--velours-fonce);
  font-weight: 700;
}

.carte-lien a::after {
  content: "";
  position: absolute;
  inset: 0;             /* le lien couvre toute la carte */
  border-radius: var(--rayon);
}

.carte-lien p { margin-bottom: 0; }   /* couleur héritée de .carte p (--velours-fonce) */

/* Médaillon d'icône habillé de la texture velours côtelé.
   La classe est portée directement par le <svg> : le fond texturé
   apparaît derrière l'icône (zone de contenu de 26 px, padding compris). */
.carte__icone {
  width: 48px;
  height: 48px;
  padding: 11px;
  border-radius: var(--rayon-sm);
  margin-bottom: var(--espace-sm);
  color: var(--lin-mat);
  background-color: var(--velours-fonce);
  background-image: repeating-linear-gradient(
    90deg,
    var(--velours-fonce) 0px,
    var(--velours-fonce) 4px,
    var(--velours-clair) 4px,
    var(--velours-clair) 8px
  );
}

/* --- Liste de prestations détaillées (page Services) ----------- */
.prestation {
  border-left: 4px solid var(--velours-fonce);
  padding-left: var(--espace-md);
  /* Décalage sous le header collant lors d'un saut d'ancre (#diogene, etc.). */
  scroll-margin-top: 5rem;
}

.prestation h3 { margin-bottom: var(--espace-xs); }
.prestation ul { margin-bottom: 0; }

/* --- En-tête de page interne -------------------------------- */
.page-header {
  background-color: var(--lin-fonce);
  padding-block: var(--espace-lg);
}

.page-header p { max-width: 60ch; margin-bottom: 0; }

/* --- Formulaires ------------------------------------------- */
.formulaire {
  background-color: var(--lin-clair);
  color: var(--marron-nuit);      /* surface claire => texte foncé imposé */
  border: 1px solid var(--taupe);
  border-radius: var(--rayon);
  padding: var(--espace-md);
  box-shadow: var(--ombre-legere);
}

/* Piège à spam (honeypot) : présent dans le DOM mais hors écran et hors
   tabulation. On évite display:none, que certains robots ignorent. */
.hp-champ {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Bouton d'envoi pendant la soumission (classe posée par le JS). */
.bouton[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.champ { margin-bottom: var(--espace-md); }

.champ label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

/* Marqueur des champs obligatoires. */
.champ label .requis {
  color: var(--erreur);
  font-weight: 700;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--police-corps);
  font-size: 1rem;
  color: var(--marron-nuit);
  background-color: var(--lin-mat);
  border: 2px solid var(--taupe);
  border-radius: var(--rayon-sm);
  padding: 0.7rem 0.85rem;
}

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

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: 3px solid var(--velours-fonce);
  outline-offset: 1px;
  border-color: var(--velours-fonce);
}

/* Champ en erreur (attribut posé par le JS de validation). */
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] {
  border-color: var(--erreur);
}

/* Message d'erreur sous un champ. */
.champ__erreur {
  display: block;
  color: var(--erreur);
  font-size: var(--taille-petit);
  font-weight: 600;
  margin-top: 0.3rem;
  min-height: 1.2em;
}

/* Aide sous un champ. */
.champ__aide {
  display: block;
  font-size: var(--taille-petit);
  color: var(--velours-fonce);
  margin-top: 0.3rem;
}

/* Case à cocher RGPD. */
.champ--case {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.champ--case input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--velours-fonce);
}

.champ--case label {
  margin-bottom: 0;
  font-weight: 400;
}

/* Zone de message renvoyée après soumission. */
.form-message {
  border-radius: var(--rayon-sm);
  padding: var(--espace-sm);
  margin-bottom: var(--espace-md);
  font-weight: 600;
}

.form-message--succes {
  background-color: var(--lin-clair);
  border-left: 5px solid var(--succes);
  color: var(--succes);
}

.form-message--erreur {
  background-color: var(--lin-clair);
  border-left: 5px solid var(--erreur);
  color: var(--erreur);
}

/* --- Coordonnées (page Contact) --------------------------- */
.coordonnees {
  list-style: none;
  padding: 0;
  margin: 0;
}

.coordonnees li {
  display: flex;
  gap: 0.6rem;
  margin-bottom: var(--espace-sm);
}

.coordonnees strong { display: block; }

/* Carte du secteur (iframe OpenStreetMap). */
.carte-secteur {
  margin: 0;
}

.carte-secteur__plan {
  display: block;
  width: 100%;
  height: 320px;
  border: 1px solid var(--taupe);
  border-radius: var(--rayon);
  background-color: var(--lin-fonce);   /* fond neutre le temps du chargement */
}

.carte-secteur figcaption {
  margin-top: var(--espace-xs);
  font-size: var(--taille-petit);
  color: var(--velours-fonce);
}

/* --- Pages légales : texte long -------------------------- */
.contenu-legal { max-width: 72ch; }

.contenu-legal h2 { margin-top: var(--espace-lg); }
.contenu-legal h2:first-of-type { margin-top: 0; }


/* =========================================================================
   6. PIED DE PAGE  (fond sombre, comme l'en-tête)
   ========================================================================= */
.site-footer {
  background-color: var(--marron-nuit);
  color: var(--lin-mat);
  padding-block: var(--espace-lg) var(--espace-md);
}

.site-footer a {
  color: var(--lin-mat);
  text-decoration: none;
}

.site-footer a:hover {
  color: #FFF;
  text-decoration: underline;
}

.site-footer__grille {
  display: grid;
  gap: var(--espace-md);
  grid-template-columns: 1fr;
  margin-bottom: var(--espace-md);
}

.site-footer h3 {
  color: var(--lin-mat);
  font-family: var(--police-corps);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--espace-xs);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li { margin-bottom: 0.4rem; }

.site-footer__bas {
  border-top: 1px solid var(--velours-fonce);
  padding-top: var(--espace-md);
  font-size: var(--taille-petit);
  color: var(--lin-mat);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs) var(--espace-md);
  justify-content: space-between;
}


/* =========================================================================
   7. ACCESSIBILITÉ & ÉTATS FOCUS
   ========================================================================= */

/* Focus visible homogène. Marron nuit sur fond clair ; lin mat sur fond
   sombre (surcharges plus bas). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--marron-nuit);
  outline-offset: 2px;
  border-radius: 2px;
}

.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible,
.section--sombre a:focus-visible,
.section--sombre button:focus-visible,
.section--velours a:focus-visible,
.section--velours button:focus-visible,
.hero a:focus-visible {
  outline-color: var(--lin-mat);
}

/* Lien d'évitement : caché jusqu'à réception du focus au clavier. */
.lien-evitement {
  position: absolute;
  left: -999px;
  top: 0;
  background-color: var(--caramel);
  color: var(--marron-nuit);
  padding: 0.75rem 1rem;
  font-weight: 700;
  z-index: 200;
  border-radius: 0 0 var(--rayon-sm) 0;
}

.lien-evitement:focus { left: 0; }

/* Contenu réservé aux lecteurs d'écran. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================================
   8. ANIMATIONS  (apparition au chargement / au défilement, transitions
      de page). Tout est encadré par « prefers-reduced-motion: no-preference »
      et piloté par main.js :
        - .reveler est posée par le JS sur chaque bloc à révéler ; puis
          .anim-prete est posée sur <html> et sa peinture est forcée (reflow
          + double requestAnimationFrame) AVANT de brancher le moindre
          IntersectionObserver, pour que l'état initial (opacity 0) soit
          toujours peint avant l'ajout de .est-visible (sinon la transition
          ne se joue pas ~1 fois sur 2).
        - .est-visible déclenche l'apparition. Sans JS (ou si le JS échoue,
          voir le catch dans main.js qui retire .anim-prete), rien n'est
          masqué : le contenu s'affiche normalement.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* --- Apparition des blocs (fondu + léger déplacement vers le haut) --- */
  .anim-prete .reveler {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--reveler-delai, 0s);
    will-change: opacity, transform;
  }

  .anim-prete .reveler.est-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  /* --- Transitions de page : voie native (navigation multi-page) ------ */
  ::view-transition-old(root) { animation: page-fondu-sortie 150ms ease-in both; }
  ::view-transition-new(root) { animation: page-fondu-entree 250ms ease-out both; }

  /* --- Repli : fondu géré en CSS pour les navigateurs sans View
     Transitions. La classe .transitions-page n'est posée par le JS que
     dans ce cas (pas de double animation). --- */
  .transitions-page body {
    animation: page-fondu-entree 260ms ease-out both;
  }

  .transitions-page.page-sortie body {
    animation: page-fondu-sortie 150ms ease-in both;
  }
}

/* Active la transition de vue native entre les pages du site. Ignoré
   silencieusement par les navigateurs qui ne la prennent pas en charge. */
@view-transition { navigation: auto; }

@keyframes page-fondu-entree {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes page-fondu-sortie {
  from { opacity: 1; }
  to   { opacity: 0; }
}


/* =========================================================================
   9. MEDIA QUERIES
   ========================================================================= */

/* --- Mobile uniquement : < 640px ------------------------------- */
/* Masquage d'éléments purement décoratifs ou redondants, pour alléger la
   hauteur de page sur petit écran. Aucun contenu informatif ici : les
   prestations, coordonnées, CTA et badges « sans surfacturation » restent
   visibles sur toutes les tailles d'écran. */
@media (max-width: 639px) {

  /* Icônes décoratives des cartes-liens de l'accueil (déjà aria-hidden). */
  .carte__icone { display: none; }

  /* Sur-titre du bandeau de page : répète le nom de page, déjà porté par
     le <h1> juste en dessous et par la navigation. */
  .page-header .surtitre { display: none; }

  /* Légende sous le logo du pied de page : redite du reste du site. */
  .site-footer__accroche { display: none; }
}

/* --- Tablette : à partir de 640px ------------------------------- */
@media (min-width: 640px) {

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

  .site-footer__grille { grid-template-columns: repeat(2, 1fr); }

  .hero__actions { flex-wrap: nowrap; }
}


/* --- Desktop : à partir de 1024px ------------------------------ */
@media (min-width: 1024px) {

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

  .site-footer__grille { grid-template-columns: 1.5fr 1fr 1fr 1fr; }

  /* Le menu hamburger disparaît, la navigation s'affiche en ligne. */
  .menu-toggle { display: none; }

  .nav-principale {
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  /* Même si le JS a posé [hidden] pour le mobile, on affiche sur desktop. */
  .nav-principale[hidden] { display: block; }

  .nav-principale > ul {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
  }

  /* --- Menus déroulants (desktop) --- */
  .nav-groupe {
    position: relative;
  }

  .nav-groupe__bouton {
    width: auto;
    justify-content: flex-start;
  }

  .nav-sous-menu {
    position: absolute;
    top: calc(100% - 2px);   /* léger recouvrement : pas de « trou » au survol */
    left: 0;
    z-index: 10;
    min-width: 13rem;
    max-height: none;        /* annule l'accordéon mobile */
    padding: 0.35rem;
    overflow: visible;       /* ne pas rogner les contours de focus */
    background-color: var(--marron-nuit);
    border: 1px solid var(--velours-fonce);
    border-radius: var(--rayon-sm);
    box-shadow: var(--ombre);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 130ms ease-out, transform 130ms ease-out, visibility 130ms;
  }

  .nav-groupe__bouton[aria-expanded="true"] + .nav-sous-menu {
    max-height: none;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Repli sans JavaScript : tant que main.js n'a pas posé la classe
     .nav-deroulante-js sur <html>, le panneau s'ouvre au survol / au focus
     clavier, en superposition. Une fois le JS actif, ce repli est désactivé
     et le JS gère seul l'ouverture (dont la fermeture différée de 1,3 s). */
  :root:not(.nav-deroulante-js) .nav-groupe:hover > .nav-sous-menu,
  :root:not(.nav-deroulante-js) .nav-groupe:focus-within > .nav-sous-menu {
    max-height: none;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  :root:not(.nav-deroulante-js) .nav-groupe:hover .nav-groupe__chevron,
  :root:not(.nav-deroulante-js) .nav-groupe:focus-within .nav-groupe__chevron {
    transform: rotate(180deg);
  }

  .nav-sous-menu a {
    padding-left: var(--espace-sm);
    white-space: nowrap;
  }

  /* Formulaire : deux colonnes pour les champs courts. */
  .champs-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--espace-md);
  }
}


/* --- Grand desktop : confort de lecture ------------------------ */
@media (min-width: 1280px) {
  .conteneur { padding-inline: 0; }
}