/* ==========================================================================
   AZ Guêpes et Nuisibles, feuille de style unique du site
   --------------------------------------------------------------------------
   Organisation du fichier, dans l'ordre :
     1. Polices        6. En-tête et navigation
     2. Variables      7. Blocs de page (hero, sections, cartes)
     3. Base           8. Formulaires et calculateur
     4. Utilitaires    9. Pied de page
     5. Boutons       10. Responsive

   La charte vient du logo officiel : une couleur par métier, relevée à la
   pipette sur le fichier du client. L'orange des guêpes sert d'accent
   principal parce que c'est le coeur de l'activité.

   TROIS RÈGLES QUI TIENNENT TOUT LE RESTE
   1. Aucune couleur en dur dans une page. Tout passe par les variables du
      bloc 2. Une teinte écrite à la main dans un attribut style ne suivra pas
      la charte le jour où elle bouge, et personne ne s'en apercevra.
   2. Trois jeux de couleurs métier, et il faut prendre le bon : la pleine
      pour les aplats, la variante -texte sur fond clair, la variante -clair
      sur fond sombre. Le détail est dans le bloc 2.
   3. Une seule courbe d'animation, --elan, et une seule échelle de rayons.
      C'est ce qui fait qu'un site paraît dessiné plutôt qu'assemblé.
   ========================================================================== */

/* 1. POLICES ============================================================== */
/* Servies en local, jamais depuis Google : pas de requête vers un tiers,
   donc rien à déclarer au RGPD de ce côté, et aucune latence externe. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. VARIABLES ============================================================ */

/* LA CHARTE VIENT DU LOGO, ET DE NULLE PART AILLEURS.
   Les cinq teintes ci-dessous ont été relevées à la pipette sur
   _source/logo-carre.png (les cinq arcs du cercle AZ G&N) puis recoupées sur
   les cinq barres de couleur de _source/logo-horizontal.png. Ne les retouchez
   pas "à l'oeil" : elles doivent rester identiques au logo imprimé sur le
   véhicule et les cartes de visite. */

:root {
  /* Les cinq couleurs métier, telles quelles */
  --vert:    #2E7D22;   /* chenilles processionnaires */
  --orange:  #EE9200;   /* guêpes et frelons, accent principal du site */
  --bleu:    #0F4F9C;   /* dératisation */
  --rouge:   #B31B12;   /* punaises de lit, puces, blattes */
  --marron:  #5C331A;   /* insectes du bois */

  /* Variantes TEXTE SUR FOND CLAIR.
     L'orange et le vert du logo ne passent pas le contraste AA (4.5) en texte
     sur la crème. Ces deux-là sont assombris juste assez pour le passer, la
     teinte est conservée. Les trois autres passent tels quels. */
  --orange-texte: #945B00;   /* 5.2 sur crème */
  --vert-texte:   #2C7720;   /* 5.2 sur crème */
  --bleu-texte:   #0F4F9C;   /* 7.5, inchangé */
  --rouge-texte:  #B31B12;   /* 6.4, inchangé */
  --marron-texte: #5C331A;   /* 10.1, inchangé */

  /* Variantes TEXTE SUR FOND SOMBRE, pour le bandeau défilant et les sections
     encre. Même teinte, éclaircie jusqu'à 6 de contraste sur --encre. */
  --vert-clair:   #3FAC2F;
  --orange-clair: #F09300;
  --bleu-clair:   #5299EE;
  --rouge-clair:  #F06E66;
  --marron-clair: #CF8456;

  /* Fonds teintés, un par métier : la couleur du logo posée à 12 % sur la
     crème. Assez pour identifier le métier, assez pâle pour que le texte
     noir reste lisible par-dessus. */
  --fond-vert:   #E7EDE1;
  --fond-orange: #FBEEDA;
  --fond-bleu:   #E1E7EF;
  --fond-rouge:  #F4E2DE;
  --fond-marron: #EBE4DD;

  /* Neutres. L'encre est le noir du logo, pas un noir inventé. */
  --encre:    #14181F;  /* fond sombre et couleur du texte */
  --encre-2:  #1E232B;  /* survol des blocs sombres */
  --encre-3:  #2A313A;  /* traits sur fond sombre */
  --creme:    #FAF7F2;  /* fond général du site */
  --creme-2:  #F2EDE4;  /* second fond, pour alterner les sections */
  --blanc:    #FFFFFF;  /* cartes */
  --gris:     #5C5850;  /* texte secondaire */
  --gris-clair: #857F75;
  --gris-sombre: #A9A296; /* texte secondaire sur fond encre */
  --trait:    rgba(20, 24, 31, 0.09);
  --trait-fort: rgba(20, 24, 31, 0.16);
  --trait-clair: rgba(250, 247, 242, 0.13);

  --succes: #1F7A45;

  /* Rythme. Une seule échelle de rayons, du jeton au grand bloc : c'est ce
     qui fait qu'un site paraît dessiné plutôt qu'assemblé. */
  --rayon-xs: 10px;
  --rayon-s:  14px;
  --rayon:    20px;
  --rayon-l:  28px;
  --rayon-xl: 36px;
  --pilule:   100px;
  --marge-page: clamp(18px, 4vw, 56px);
  --largeur:  1280px;

  /* Ombres. Deux couches : un contact net très près de l'objet, une diffusion
     large et très douce. Une ombre à une seule couche fait toujours autocollant. */
  --ombre-carte:  0 1px 2px rgba(20, 24, 31, 0.05), 0 4px 14px rgba(20, 24, 31, 0.03);
  --ombre-survol: 0 2px 4px rgba(20, 24, 31, 0.06), 0 18px 40px rgba(20, 24, 31, 0.10);
  --ombre-forte:  0 4px 8px rgba(20, 24, 31, 0.07), 0 30px 70px rgba(20, 24, 31, 0.16);

  /* Une seule courbe d'animation pour tout le site, légèrement élastique en
     fin de course : c'est elle qui donne la sensation "réactif" plutôt que
     "mou". Changer ici change le site entier. */
  --elan: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 3. BASE ================================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* L'attribut hidden doit TOUJOURS gagner.
   Le navigateur applique display:none à [hidden] depuis sa propre feuille de
   style, que la moindre règle d'auteur posant un display (flex, grid,
   inline-flex) écrase sans bruit : l'élément reste visible alors que le
   JavaScript le croit masqué. Le piège se paie cher parce qu'il ne ressemble
   pas à un bug de CSS, mais à un bug de script. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--creme);
  color: var(--encre);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--orange); color: var(--encre); }

h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  /* Répartit les mots sur les lignes au lieu de laisser un mot seul en bas.
     Un titre à trois lignes dont la dernière ne porte qu'un mot fait toujours
     accident de mise en page. */
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 6.4vw, 78px); letter-spacing: -0.045em; }
h2 { font-size: clamp(31px, 4.6vw, 54px); letter-spacing: -0.04em; }
h3 { font-size: clamp(19px, 2vw, 23px); font-weight: 700; letter-spacing: -0.02em; }
h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }

/* Les chiffres alignés en colonne : sans ça, un 1 est plus étroit qu'un 8 et
   les prix d'un tableau ne tombent pas les uns sous les autres. */
.valeur, .fourchette, .tel, .chiffre { font-variant-numeric: tabular-nums; }

/* Le focus doit rester visible : c'est la seule façon de naviguer au clavier. */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Lien d'évitement, premier élément de chaque page pour les lecteurs d'écran */
.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--encre);
  color: var(--creme);
  padding: 12px 20px;
  border-radius: 0 0 var(--rayon-s) 0;
  z-index: 1000;
}
.evitement:focus { left: 0; }

/* 4. UTILITAIRES ========================================================== */

.contenu {
  max-width: var(--largeur);
  margin: 0 auto;
  padding-left: var(--marge-page);
  padding-right: var(--marge-page);
}
/* Colonne de lecture, pour les pages de texte. Elle s'aligne sur la marge
   gauche du conteneur large, et non au centre de l'écran : sinon le corps de
   l'article part vers la droite pendant que son titre reste à gauche, et le
   décalage se voit. */
.contenu--etroit {
  max-width: calc(820px + var(--marge-page) * 2);
  margin-left: max(0px, calc((100% - var(--largeur)) / 2));
  margin-right: auto;
}

.section { padding: clamp(68px, 9.5vh, 124px) 0; }
.section--sombre { background: var(--encre); color: var(--creme); position: relative; overflow: hidden; }
.section--sombre p { color: var(--gris-sombre); }

/* Le surtitre, petite ligne au-dessus du titre. Il porte un point de la
   couleur d'accent : c'est ce point qui rappelle le logo à chaque section,
   sans avoir à répéter le logo lui-même. */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-texte);
  margin-bottom: 14px;
}
.surtitre::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.section--sombre .surtitre { color: var(--orange-clair); }

.chapeau {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--gris);
  max-width: 58ch;
}
.section--sombre .chapeau { color: var(--gris-sombre); }

.entete-section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}
.entete-section h2 { max-width: 16ch; }
.entete-section .chapeau { max-width: 34ch; font-size: 15.5px; }

/* Marqueur des textes provisoires, à retirer quand le client aura fourni les
   siens. Repérable au grep : cherchez "provisoire" dans le HTML. */
.provisoire { position: relative; }

/* 5. BOUTONS ============================================================== */

.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: var(--pilule);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.28s var(--elan), box-shadow 0.28s var(--elan),
    background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0) scale(0.985); }

/* La flèche avance d'un cheveu au survol. C'est le seul mouvement du bouton
   qui dise "ça mène quelque part" plutôt que "ça brille". */
.bouton span[aria-hidden] { transition: transform 0.28s var(--elan); }
.bouton:hover span[aria-hidden] { transform: translateX(4px); }

.bouton--orange {
  background: var(--orange);
  color: var(--encre);
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.10), 0 8px 20px rgba(238, 146, 0, 0.28);
}
.bouton--orange:hover { box-shadow: 0 2px 4px rgba(20, 24, 31, 0.10), 0 14px 30px rgba(238, 146, 0, 0.36); }

.bouton--encre { background: var(--encre); color: var(--creme); }
.bouton--encre:hover { box-shadow: 0 2px 4px rgba(20, 24, 31, 0.12), 0 14px 30px rgba(20, 24, 31, 0.22); }

.bouton--creme { background: var(--creme); color: var(--encre); }
.bouton--creme:hover { box-shadow: 0 2px 4px rgba(20, 24, 31, 0.10), 0 14px 30px rgba(20, 24, 31, 0.18); }

.bouton--fantome { background: transparent; border-color: var(--trait-fort); }
.bouton--fantome:hover { background: var(--encre); color: var(--creme); border-color: var(--encre); }
.section--sombre .bouton--fantome { border-color: var(--trait-clair); color: var(--creme); }
.section--sombre .bouton--fantome:hover { background: var(--creme); color: var(--encre); border-color: var(--creme); }

.bouton--large { padding: 18px 32px; font-size: 16.5px; }

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

/* 6. EN-TÊTE ET NAVIGATION ================================================ */

/* L'en-tête a deux états. En haut de page il est transparent et laisse
   respirer le grand titre. Dès que la page défile, site.js pose
   data-defile="oui" : il se resserre et devient une barre opaque, sinon les
   liens deviennent illisibles au-dessus d'une photo. */
.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--marge-page);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: padding 0.35s var(--elan), background 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease;
}
.entete[data-defile="oui"] {
  padding: 9px var(--marge-page);
  /* 0.88 et non 0.80 : au-dessus d'une section sombre, le flou ramène du noir
     et la barre vire au gris. À 0.88 elle reste crème partout. */
  background: rgba(250, 247, 242, 0.88);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom-color: var(--trait);
  box-shadow: 0 1px 30px rgba(20, 24, 31, 0.05);
}
/* Repli sans JavaScript : l'attribut data-defile n'est jamais posé, l'en-tête
   resterait transparent au-dessus du contenu. Le sélecteur cible l'absence de
   la classe « js » que site.js pose sur <html> dès sa première ligne. */
html:not(.js) .entete {
  background: rgba(250, 247, 242, 0.92);
  border-bottom-color: var(--trait);
}

/* Le logo du client, en deux morceaux : l'emblème rond et le bloc-titre. */
.logo { display: flex; align-items: center; gap: 13px; flex: none; }
.logo-embleme {
  width: 48px; height: 48px;
  border-radius: 50%;          /* découpe les coins sombres du fichier carré */
  flex: none;
  transition: width 0.35s var(--elan), height 0.35s var(--elan), transform 0.5s var(--elan);
}
.logo-titre {
  height: 31px; width: auto;
  transition: height 0.35s var(--elan);
}
.logo:hover .logo-embleme { transform: rotate(-10deg); }
.entete[data-defile="oui"] .logo-embleme { width: 40px; height: 40px; }
.entete[data-defile="oui"] .logo-titre { height: 27px; }

/* Navigation : les liens deviennent des pastilles au survol. La page courante
   garde la pastille allumée en permanence, c'est plus lisible qu'une simple
   couleur de texte. */
.nav { display: flex; align-items: center; gap: 2px; }
.nav a, .nav-deroulant > button {
  padding: 9px 14px;
  border-radius: var(--pilule);
  font-weight: 600;
  font-size: 15px;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav a:hover, .nav-deroulant > button:hover { background: rgba(20, 24, 31, 0.055); }
.nav a[aria-current="page"] {
  color: var(--orange-texte);
  background: var(--fond-orange);
  font-weight: 700;
}

/* Sous-menu des métiers, ouvert au survol comme au clavier */
.nav-deroulant { position: relative; }
.nav-deroulant > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.nav-deroulant > button::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}
.nav-deroulant[data-ouvert="oui"] > button::after { transform: rotate(-135deg) translateY(-2px); }

.sous-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px) scale(0.98);
  min-width: 288px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.32s var(--elan), visibility 0.32s;
}
.nav-deroulant[data-ouvert="oui"] .sous-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}
.sous-menu a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  border-radius: var(--rayon-xs);
  font-size: 14.5px;
  font-weight: 600;
  transition: background 0.18s ease, transform 0.28s var(--elan);
}
.sous-menu a:hover { background: var(--creme-2); color: var(--encre); transform: translateX(3px); }
/* Le pictogramme du métier posé sur sa teinte : c'est le code couleur du logo
   qui rend le menu lisible d'un coup d'oeil. */
.sous-menu img {
  width: 34px; height: 34px;
  padding: 4px;
  border-radius: var(--rayon-xs);
  background: var(--fond-metier, var(--creme-2));
  object-fit: contain;
  flex: none;
}


.entete-actions { display: flex; align-items: center; gap: 12px; }

/* Bouton hamburger, masqué sur grand écran */
.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--trait);
  border-radius: 12px;
  background: var(--blanc);
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: var(--encre);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Panneau de navigation mobile */
.nav-mobile {
  position: fixed;
  /* Démarre sous l'en-tête replié : 40 px d'emblème + 9 px de marge en
     haut et en bas + 1 px de filet. */
  inset: 59px 0 0;
  background: var(--creme);
  z-index: 890;
  padding: 24px var(--marge-page) 40px;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: 4px;
}
.nav-mobile[data-ouvert="oui"] { display: flex; }
.nav-mobile a {
  padding: 15px 0;
  border-bottom: 1px solid var(--trait);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-mobile img {
  width: 38px; height: 38px;
  padding: 5px;
  border-radius: var(--rayon-xs);
  background: var(--fond-metier, var(--creme-2));
  object-fit: contain;
}

.nav-mobile .bouton { margin-top: 22px; }
.nav-mobile .titre-groupe {
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gris-clair);
  font-weight: 700;
}

/* Barre d'appel fixe en bas d'écran, mobile seulement */
.barre-appel {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 880;
  background: var(--encre);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}
.barre-appel a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 9px 6px;
  border-radius: var(--rayon-s);
  background: var(--encre-2);
  color: var(--creme);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.15;
}
.barre-appel a strong { font-size: 15px; }
.barre-appel a span { font-size: 11px; font-weight: 600; color: var(--gris-sombre); }
.barre-appel a.est-orange { background: var(--orange); color: var(--encre); }
.barre-appel a.est-orange span { color: rgba(20, 24, 31, 0.72); }

/* 7. BLOCS DE PAGE ======================================================== */

/* Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  padding: clamp(112px, 15vh, 176px) 0 56px;
  overflow: hidden;
}
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
/* Deux halos très diffus, l'orange et le vert du logo. Ils donnent de la
   profondeur au fond crème sans qu'on identifie une forme : dès qu'un halo se
   voit comme un rond, il fait tache. D'où l'opacité basse et le grand rayon. */
.hero::before {
  top: -240px; right: -180px;
  width: 720px; height: 720px;
  background: radial-gradient(circle at 34% 34%, rgba(238, 146, 0, 0.26), rgba(238, 146, 0, 0) 66%);
}
.hero::after {
  bottom: -280px; left: -220px;
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(46, 125, 34, 0.14), rgba(46, 125, 34, 0) 68%);
}
.hero .contenu { position: relative; }

.hero-grille {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
.hero h1 { max-width: 13ch; }

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 13px;
  margin-bottom: 24px;
  border: 1px solid var(--trait);
  border-radius: var(--pilule);
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
  font-weight: 600;
  font-size: 13px;
}
/* Le point vert bat lentement. C'est le seul signal "en service" du site :
   il remplace un texte "disponible" que personne ne croit. */
.etiquette .point {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--succes);
  flex: none;
}
.etiquette .point::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(31, 122, 69, 0.22);
  animation: battement 2.4s ease-out infinite;
}
@keyframes battement {
  0%   { transform: scale(0.6); opacity: 0.9; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Surlignage orange derrière un mot du titre. Le trait passe DERRIÈRE le
   texte (z-index négatif) : il mord sur le bas des lettres, ce qui fait
   surligneur plutôt que soulignement de traitement de texte. Les valeurs sont
   en em pour que le trait suive la taille du titre, qui change avec l'écran. */
.souligne { position: relative; white-space: nowrap; }
.souligne::after {
  content: '';
  position: absolute;
  left: -0.03em; right: -0.03em; bottom: 0.1em;
  height: 0.19em;
  background: var(--orange);
  border-radius: 0.05em;
  z-index: -1;
}

.gages { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.gage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border-radius: var(--pilule);
  border: 1px solid var(--trait);
  background: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--gris);
}
.gage::before {
  content: '✓';
  color: var(--succes);
  font-weight: 800;
  font-size: 12px;
}

.hero-visuel { position: relative; }
.hero-visuel .cadre {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--rayon-xl);
  overflow: hidden;
  box-shadow: var(--ombre-forte);
  background: var(--creme-2);
}
.hero-visuel .cadre img { width: 100%; height: 100%; object-fit: cover; }
/* Un liseré intérieur très pâle : il détache la photo du fond crème sans
   poser de bordure visible, qui ferait cadre photo. */
.hero-visuel .cadre::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
/* Bandeau rappelant les cinq couleurs du logo, dans son ordre exact */
.bande-metiers {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  z-index: 1;
  background: linear-gradient(90deg,
    var(--vert) 0 20%, var(--orange) 20% 40%, var(--bleu) 40% 60%,
    var(--rouge) 60% 80%, var(--marron) 80% 100%);
}

.vignette {
  position: absolute;
  z-index: 2;   /* au-dessus du bandeau de couleurs du cadre, qui est en 1 */
  border-radius: var(--rayon);
  padding: 15px 20px;
  box-shadow: var(--ombre-forte);
}
.vignette--haut {
  top: -22px; right: -16px;
  background: var(--encre);
  color: var(--creme);
  animation: flotte 5s ease-in-out infinite;
}
.vignette--haut .chiffre {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 29px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--orange-clair);
}
.vignette--haut .libelle { font-size: 11.5px; font-weight: 600; margin-top: 4px; color: var(--gris-sombre); }
.vignette--bas {
  bottom: -20px; left: -20px;
  background: var(--blanc);
  animation: flotte-2 6s ease-in-out infinite;
}
.vignette--bas .titre { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 15px; }
.vignette--bas .detail { font-size: 11.5px; color: var(--gris-clair); font-weight: 600; }

@keyframes flotte   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes flotte-2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* Bandeau défilant ------------------------------------------------------ */
/* Il tenait autrefois en biais sur toute la largeur. Redressé : la bande
   inclinée laissait deux coins vides sur les grands écrans, et le procédé
   date. À plat, bord à bord, avec un filet aux cinq couleurs du logo au-dessus,
   la bande dit la même chose et se lit mieux. */
.bandeau {
  position: relative;
  background: var(--encre);
  overflow: hidden;
  padding: 18px 0;
}
/* Le filet des cinq couleurs, dans l'ordre exact du logo horizontal */
.bandeau::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--vert) 0 20%, var(--orange) 20% 40%, var(--bleu) 40% 60%,
    var(--rouge) 60% 80%, var(--marron) 80% 100%);
}
.bandeau-piste {
  display: flex;
  width: max-content;
  animation: defile 42s linear infinite;
  white-space: nowrap;
  /* Estompe les deux bords : le texte entre et sort du cadre au lieu d'être
     coupé net, ce qui trahissait moins l'animation qu'un simple overflow. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bandeau-piste span { display: flex; align-items: center; }
.bandeau-piste b {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: 0.4px;
  padding: 0 20px;
}
/* Le losange séparateur, volontairement effacé : c'est la couleur des noms
   qui doit se voir, pas la ponctuation entre eux. */
.bandeau-piste i {
  font-style: normal;
  font-size: 7px;
  color: var(--encre-3);
  transform: translateY(-2px);
}
/* Une couleur par métier, celle du logo éclaircie pour tenir sur l'encre.
   Sans cet éclaircissement, le marron et le bleu du logo sont illisibles
   sur fond noir : ils passent respectivement à 1.6 et 2.2 de contraste. */
.bandeau-piste .m-chenilles { color: var(--vert-clair); }
.bandeau-piste .m-guepes    { color: var(--orange-clair); }
.bandeau-piste .m-rongeurs  { color: var(--bleu-clair); }
.bandeau-piste .m-punaises  { color: var(--rouge-clair); }
.bandeau-piste .m-bois      { color: var(--marron-clair); }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Cartes métier --------------------------------------------------------- */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* Grille "bento" : la première carte tient deux colonnes sur grand écran.
   Ce n'est pas décoratif. Les guêpes et les frelons sont le coeur de
   l'activité et l'urgence qui fait décrocher le téléphone : la carte la plus
   large est celle qu'on veut voir en premier. En dessous de 1080 px la grille
   redevient régulière, une carte double y serait illisible. */
@media (min-width: 1081px) {
  .grille-cartes--bento { grid-template-columns: repeat(3, 1fr); }
  .grille-cartes--bento > .est-large { grid-column: span 2; }
  .grille-cartes--bento > .est-large h3 { font-size: clamp(23px, 2.4vw, 30px); }
  .grille-cartes--bento > .est-large p { max-width: 46ch; font-size: 15.5px; }

  /* La dernière carte prend toute la largeur et se couche à l'horizontale :
     pictogramme, texte, lien. Sans ça elle resterait seule au milieu d'une
     ligne de trois, avec deux trous à sa droite. */
  .grille-cartes--bento > .est-pleine {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    padding: 24px 30px;
  }
  .est-pleine .carte-tete { flex: none; flex-direction: column; align-items: flex-start; gap: 12px; }
  .est-pleine .carte-corps { flex: 1; min-width: 0; }
  .est-pleine h3 { margin: 0 0 6px; }
  .est-pleine p { max-width: 62ch; }
  .est-pleine .lien-carte { flex: none; margin-top: 0; padding-top: 0; }
}

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border-radius: var(--rayon-l);
  background: var(--blanc);
  border: 1px solid var(--trait);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
  transition: transform 0.4s var(--elan), box-shadow 0.4s var(--elan),
              border-color 0.3s ease;
}
/* Le filet de la couleur du métier se déroule de gauche à droite au survol.
   Il est déjà là au repos, à l'échelle zéro : animer une échelle ne provoque
   aucun recalcul de mise en page, contrairement à une hauteur. */
.carte::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--couleur-metier, var(--orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--elan);
}
/* Un voile de la couleur du métier, très faible, qui monte du bas au survol.
   C'est ce qui fait qu'une carte survolée appartient visiblement à sa
   famille de couleur, sans la teinter en permanence. */
.carte::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 70%;
  background: linear-gradient(180deg, transparent, var(--fond-metier, var(--fond-orange)));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.carte > * { position: relative; z-index: 1; }
.carte:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-survol);
  border-color: transparent;
}
.carte:hover::before { transform: scaleX(1); }
.carte:hover::after { opacity: 0.55; }

.carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.carte-picto {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--rayon-s);
  background: var(--fond-metier, var(--fond-orange));
  flex: none;
  transition: transform 0.45s var(--elan);
}
.carte:hover .carte-picto { transform: rotate(-6deg) scale(1.06); }
.carte-picto img { width: 36px; height: 36px; object-fit: contain; }
.carte-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: var(--pilule);
  background: var(--blanc);
  border: 1px solid var(--trait);
  color: var(--couleur-metier-texte, var(--orange-texte));
}
.carte h3 { margin: 20px 0 9px; }
.carte p { font-size: 14.5px; line-height: 1.58; color: var(--gris); }
.carte .lien-carte {
  margin-top: auto;
  padding-top: 20px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--couleur-metier-texte, var(--orange-texte));
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.carte .lien-carte span { transition: transform 0.35s var(--elan); }
.carte:hover .lien-carte span { transform: translateX(5px); }

/* La carte du calculateur n'est pas une prestation : elle est teintée en
   permanence, là où les cartes métier restent blanches jusqu'au survol. */
.carte.est-calculateur { background: var(--fond-orange); border-color: transparent; }
.carte.est-calculateur .carte-picto,
.carte.est-calculateur .carte-badge { background: var(--blanc); border-color: transparent; }
.carte.est-calculateur::after { display: none; }

/* Les cinq déclinaisons de couleur. La classe se pose sur .carte comme sur
   toute autre section, elle ne fait que redéfinir trois variables :
     --couleur-metier      la teinte du logo, pleine, pour les filets et pastilles
     --couleur-metier-texte la même assombrie si besoin, pour du texte lisible
     --fond-metier         la teinte posée à 12 % sur la crème */
.metier-chenilles { --couleur-metier: var(--vert);   --couleur-metier-texte: var(--vert-texte);   --fond-metier: var(--fond-vert); }
.metier-guepes    { --couleur-metier: var(--orange); --couleur-metier-texte: var(--orange-texte); --fond-metier: var(--fond-orange); }
.metier-rongeurs  { --couleur-metier: var(--bleu);   --couleur-metier-texte: var(--bleu-texte);   --fond-metier: var(--fond-bleu); }
.metier-punaises  { --couleur-metier: var(--rouge);  --couleur-metier-texte: var(--rouge-texte);  --fond-metier: var(--fond-rouge); }
.metier-bois      { --couleur-metier: var(--marron); --couleur-metier-texte: var(--marron-texte); --fond-metier: var(--fond-marron); }

/* Chiffres clés sur fond sombre ----------------------------------------- */
/* Les quatre chiffres clés. Le fond des blocs est légèrement plus clair que
   la section : sur fond noir, un simple trait de séparation disparaît dès que
   l'écran est mal réglé, une différence de fond tient toujours. */
.grille-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 1px;
  background: var(--trait-clair);
  border-radius: var(--rayon-l);
  overflow: hidden;
  border: 1px solid var(--trait-clair);
}
.chiffre-bloc {
  position: relative;
  background: var(--encre);
  padding: 34px 28px;
  transition: background 0.35s ease;
}
.chiffre-bloc::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--orange);
  transition: width 0.45s var(--elan);
}
.chiffre-bloc:hover { background: var(--encre-2); }
.chiffre-bloc:hover::before { width: 44px; }
.chiffre-bloc .valeur {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 4.2vw, 54px);
  letter-spacing: -0.04em;
  color: var(--orange-clair);
  line-height: 1;
}
.chiffre-bloc h3 { margin: 16px 0 8px; }
.chiffre-bloc p { font-size: 14px; line-height: 1.58; }

/* Étapes ---------------------------------------------------------------- */
/* Les trois étapes. Le trait vertical qui relie les numéros dit "dans cet
   ordre" mieux qu'une numérotation seule. Il s'arrête à la dernière étape :
   un trait qui continue dans le vide laisse croire qu'il en manque une. */
.etape {
  position: relative;
  display: flex;
  gap: 22px;
  padding: 22px 0;
}
.etape::after {
  content: '';
  position: absolute;
  left: 23px; top: 66px; bottom: -6px;
  width: 2px;
  background: var(--trait);
}
.etape:last-child::after { display: none; }
.etape .numero {
  position: relative;
  z-index: 1;
  flex: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--encre);
  color: var(--orange-clair);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.etape h3 { margin-bottom: 6px; }
.etape p { font-size: 14.5px; line-height: 1.6; color: var(--gris); max-width: 46ch; }

/* Encadré zone d'intervention ------------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 5vw, 62px);
  align-items: center;
}

/* Page du calculateur : le formulaire large, le résultat en colonne étroite.
   Cette variante est une classe et non un style écrit dans la page, sinon
   elle gagnerait aussi sur mobile, où la mise en deux colonnes est
   inutilisable. */
.duo--devis {
  grid-template-columns: 1.25fr 0.75fr;
  align-items: start;
}
/* L'encadré prend la couleur du métier de la page dès qu'on lui pose une
   classe metier-*. Sans classe, il retombe sur l'orange, l'accent du site.
   Ces teintes étaient auparavant écrites à la main dans chaque page : elles
   ne suivaient donc pas la charte quand elle changeait. */
.encadre {
  position: relative;
  padding: 34px 32px;
  border-radius: var(--rayon-l);
  background: var(--fond-metier, var(--fond-orange));
  border: 1px solid color-mix(in srgb, var(--couleur-metier, var(--orange)) 30%, transparent);
  overflow: hidden;
}
.encadre > * { position: relative; }
/* Le halo d'angle reprend lui aussi la couleur du métier. color-mix garde la
   teinte et n'en règle que l'opacité, ce qu'une valeur rgba figée ne sait pas
   faire à partir d'une variable. */
.encadre::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--couleur-metier, var(--orange)) 22%, transparent),
    transparent 68%);
}
.encadre img { width: 100%; height: 158px; object-fit: cover; border-radius: var(--rayon); margin-bottom: 22px; }
.encadre p { font-size: 15px; color: var(--gris); margin-bottom: 20px; }
.jetons { display: flex; flex-wrap: wrap; gap: 8px; }
.jeton {
  background: rgba(255, 255, 255, 0.72);
  padding: 8px 15px;
  border-radius: var(--pilule);
  font-weight: 600;
  font-size: 13.5px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  transition: background 0.2s ease, transform 0.3s var(--elan);
}
.jeton:hover { background: var(--blanc); transform: translateY(-1px); }

/* Carte de la zone d'intervention --------------------------------------- */
/* Le dessin est produit par outils/carte-zone.py à partir du contour officiel
   du département. Tout ce qui est APPARENCE est ici, dans la feuille de style,
   et rien dans le SVG : la carte suit donc la charte sans être regénérée.
   Les couleurs viennent des variables du bloc 2, comme partout ailleurs. */

/* Deux colonnes : le dessin, et à côté ce qui se lit en mots. La carte
   seule occupait toute la largeur et devenait très haute, un mur d'image au
   milieu de la page. */
.carte-zone {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-top: 8px;
}

.carte-cadre {
  position: relative;
  padding: clamp(16px, 2.4vw, 30px);
  border-radius: var(--rayon-xl);
  background: var(--creme-2);
  border: 1px solid var(--trait);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
}
/* Un halo orange très diffus dans l'angle, le même procédé que le hero : il
   réchauffe le cadre sans qu'on identifie une forme. */
.carte-cadre::before {
  content: '';
  position: absolute;
  top: -30%; right: -14%;
  width: 55%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 146, 0, 0.16), transparent 68%);
  pointer-events: none;
}
.carte-dessin { position: relative; display: block; width: 100%; height: auto; }

/* HALO BLANC DERRIÈRE CHAQUE TEXTE.
   paint-order inverse l'ordre de peinture : le contour est tracé d'abord, la
   lettre par-dessus. Le trait clair fait donc un liseré autour du texte au
   lieu de l'épaissir. C'est ce que fait toute carte imprimée, et c'est ce qui
   rend un nom lisible quand il passe sur une frontière ou sur un aplat. */
.carte-dessin text {
  paint-order: stroke fill;
  stroke: var(--creme-2);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Les couleurs des dégradés et du semis se posent ICI et pas dans le SVG :
   un attribut fill="var(--x)" est ignoré par le navigateur, qui retombe sur
   du noir plein. Voir le commentaire dans outils/carte-zone.py. */
.relief-clair  { stop-color: var(--blanc); }
.relief-sombre { stop-color: var(--creme); }
.halo-centre   { stop-color: var(--orange); stop-opacity: 0.20; }
.halo-bord     { stop-color: var(--orange); stop-opacity: 0; }
.carte-semis-point { fill: var(--encre); opacity: 0.16; }

/* Le département. Rempli et texturé : il porte le message principal, qui est
   que nous couvrons le 63 en entier. */
.carte-departement { fill: url(#relief); }
.carte-semis { pointer-events: none; }
.carte-frontiere {
  fill: none;
  stroke: var(--encre);
  stroke-opacity: 0.62;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  /* La frontière garde la même épaisseur à l'écran quelle que soit la taille
     d'affichage. Sans cela elle disparaît sur mobile et grossit sur grand
     écran, puisque le trait est exprimé en kilomètres. */
  vector-effect: non-scaling-stroke;
}

/* Les deux secteurs de proximité */
.carte-secteur { fill: var(--orange); fill-opacity: 0.17; }
.carte-secteur-trait {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.5px;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}
.carte-lien {
  stroke: var(--orange-texte);
  stroke-width: 1.2px;
  stroke-dasharray: 2 3;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}

/* Villes de repère */
.carte-villes circle { fill: var(--encre); fill-opacity: 0.42; }
.carte-villes text {
  font-family: 'Manrope', sans-serif;
  font-size: 2.5px;
  font-weight: 600;
  fill: var(--gris);
}

/* Les deux bases */
.carte-base-anneau {
  fill: var(--blanc);
  stroke: var(--orange);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
.carte-base-coeur { fill: var(--orange); }
/* L'onde qui bat sous le marqueur. transform-box: fill-box recentre la
   transformation sur le cercle lui-même : sans lui, l'agrandissement partirait
   du coin du repère SVG et l'onde s'envolerait. */
.carte-base-onde {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: onde 3.4s ease-out infinite;
}
.carte-base--2 .carte-base-onde { animation-delay: 1.7s; }
@keyframes onde {
  0%   { transform: scale(0.7); opacity: 0.75; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.carte-base-nom {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 4.4px;
  font-weight: 800;
  letter-spacing: -0.02em;
  fill: var(--encre);
}
.carte-base-lieu {
  font-family: 'Manrope', sans-serif;
  font-size: 2.7px;
  font-weight: 700;
  fill: var(--orange-texte);
}

/* Échelle et nord */
.carte-echelle line, .carte-nord path {
  stroke: var(--encre);
  stroke-opacity: 0.45;
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}
.carte-nord path { fill: var(--encre); fill-opacity: 0.35; stroke: none; }
.carte-echelle text, .carte-nord text {
  font-family: 'Manrope', sans-serif;
  font-size: 2.4px;
  font-weight: 700;
  fill: var(--gris-clair);
}

/* Légende, en HTML et non dans le SVG : du vrai texte se sélectionne, se
   traduit et se lit au lecteur d'écran. */
.carte-cote { padding-top: 6px; }
.carte-cote-titre {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gris-clair);
  margin: 30px 0 14px;
}

.carte-legende {
  display: grid;
  gap: 16px;
  list-style: none;
}
.carte-legende li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris);
}
.carte-legende strong { color: var(--encre); font-weight: 700; }
.carte-legende .puce { width: 17px; height: 17px; border-radius: 50%; flex: none; margin-top: 2px; }
.carte-legende .puce--secteur {
  background: color-mix(in srgb, var(--orange) 17%, var(--blanc));
  border: 1.5px dashed var(--orange);
}
.carte-legende .puce--departement {
  background: var(--creme-2);
  border: 1.5px solid rgba(20, 24, 31, 0.5);
}

.carte-note {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--trait);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gris);
}
.carte-note a {
  color: var(--orange-texte);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sur écran étroit, la carte est trop petite pour porter dix étiquettes : on
   ne garde que les deux bases, et on les grossit. Une carte illisible ne vaut
   pas mieux qu'une carte absente. */
@media (max-width: 900px) {
  .carte-zone { grid-template-columns: 1fr; }
}

/* Sur écran étroit, la carte est trop petite pour porter dix étiquettes : on
   ne garde que les deux bases, et on les grossit. Une carte illisible ne vaut
   pas mieux qu'une carte absente. */
@media (max-width: 720px) {
  /* Les noms de villes et les repères disparaissent en entier, échelle et
     rose des vents comprises. Masquer seulement leur texte laissait un trait
     et une flèche sans légende, ce qui est pire que rien. */
  .carte-villes, .carte-echelle, .carte-nord { display: none; }
  .carte-base-nom { font-size: 7px; }
  .carte-base-lieu { font-size: 4.4px; }
  .carte-dessin text { stroke-width: 4.5px; }
  /* Les décalages du SVG sont en kilomètres, donc fixes, alors que la taille
     du texte vient de grossir : les noms retombaient sur l'anneau du
     marqueur. On les écarte, en kilomètres eux aussi. */
  .carte-base--1 .carte-base-nom  { transform: translateY(-4px); }
  .carte-base--1 .carte-base-lieu { transform: translateY(-1.4px); }
  .carte-base--2 .carte-base-nom  { transform: translateY(2.6px); }
  .carte-base--2 .carte-base-lieu { transform: translateY(3.8px); }
}

/* Cartes de contact des deux secteurs ----------------------------------- */
.grille-secteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.secteur {
  padding: 28px 26px;
  border-radius: var(--rayon-l);
  background: var(--blanc);
  border: 1px solid var(--trait);
  box-shadow: var(--ombre-carte);
  transition: transform 0.4s var(--elan), box-shadow 0.4s var(--elan), border-color 0.3s ease;
}
.secteur:hover { transform: translateY(-4px); box-shadow: var(--ombre-survol); }
.section--sombre .secteur { background: var(--encre-2); border-color: var(--trait-clair); }
.section--sombre .secteur:hover { border-color: var(--orange); }
.secteur .role { font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--orange-texte); }
.section--sombre .secteur .role { color: var(--orange-clair); }
.secteur .nom { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 24px; margin: 6px 0 2px; letter-spacing: -0.6px; }
.secteur .zone { font-size: 14px; color: var(--gris); margin-bottom: 18px; }
.section--sombre .secteur .zone { color: var(--gris-sombre); }
.secteur .tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.4px;
}
.secteur .tel:hover { color: var(--orange-texte); }
.section--sombre .secteur .tel:hover { color: var(--orange-clair); }

/* Avis ------------------------------------------------------------------ */
.avis { padding: 30px 28px; border-radius: var(--rayon-l); background: var(--blanc); border: 1px solid var(--trait); box-shadow: var(--ombre-carte); }
.avis .etoiles { color: var(--orange); font-size: 16px; margin-bottom: 14px; letter-spacing: 2px; }
.avis blockquote { font-size: 15.5px; line-height: 1.6; color: #3A362E; }
.avis figcaption { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.avis .pastille {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--vert));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  color: var(--blanc);
  font-size: 15px;
  flex: none;
}
.avis .qui { font-weight: 700; font-size: 14.5px; }
.avis .ou { font-size: 12.5px; color: var(--gris-clair); }

/* Bandeau d'appel à l'action -------------------------------------------- */
/* Le grand bloc orange de fin de page. Les rayures obliques d'avant faisaient
   store de terrasse ; remplacées par un halo doux et l'emblème du client posé
   très grand en filigrane, qui signe le bloc au lieu de le décorer. */
.bandeau-cta {
  position: relative;
  max-width: var(--largeur);
  margin: 0 auto;
  background: var(--orange);
  border-radius: var(--rayon-xl);
  padding: clamp(38px, 6vw, 72px);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.bandeau-cta::before {
  content: '';
  position: absolute;
  top: -30%; right: -8%;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.34), transparent 62%);
  pointer-events: none;
}
.bandeau-cta > * { position: relative; }
.bandeau-cta h2 { color: var(--encre); max-width: 18ch; }
/* L'emblème en filigrane. aria-hidden dans le HTML : il ne dit rien de plus
   que le titre juste à côté. */
.bandeau-cta .filigrane {
  position: absolute;
  right: clamp(-70px, -4vw, -30px); bottom: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  opacity: 0.12;
  pointer-events: none;
}

/* Fil d'Ariane ---------------------------------------------------------- */
.fil { font-size: 13.5px; color: var(--gris); padding-top: clamp(100px, 12vh, 124px); }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.fil li:not(:last-child)::after { content: '›'; margin-left: 8px; color: var(--gris-clair); }
.fil a { transition: color 0.18s ease; }
.fil a:hover { color: var(--orange-texte); }

/* Contenu rédactionnel (pages métier, blog, mentions) -------------------- */
.prose h2 { font-size: clamp(25px, 3vw, 34px); margin: 44px 0 14px; }
.prose h3 { margin: 30px 0 10px; }
.prose p, .prose li { font-size: 16.5px; line-height: 1.7; color: #3A362E; }
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 18px 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { font-weight: 700; color: var(--encre); }
.prose a { color: var(--orange-texte); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--rayon-l); margin: 28px 0; }
.prose figure { margin: 26px 0; }
.prose figcaption { font-size: 13.5px; color: var(--gris-clair); margin-top: 8px; }

.encart {
  border-left: 4px solid var(--couleur-metier, var(--orange));
  background: var(--fond-metier, var(--fond-orange));
  padding: 22px 26px;
  border-radius: 0 var(--rayon) var(--rayon) 0;
  margin: 28px 0;
}
.encart p:last-child { margin-bottom: 0; }
.encart strong { color: var(--encre); }

/* Encart d'avertissement. Il est rouge parce que c'est un danger, pas parce
   qu'il parle de punaises : d'où une classe à lui, et non metier-punaises.
   Confondre les deux ferait virer au rouge, un jour, un encart de danger
   posé sur une page dératisation. */
.encart--alerte { --couleur-metier: var(--rouge); --fond-metier: var(--fond-rouge); }

/* Bloc article du blog -------------------------------------------------- */
.article-vignette {
  display: flex;
  flex-direction: column;
  border-radius: var(--rayon-l);
  background: var(--blanc);
  border: 1px solid var(--trait);
  overflow: hidden;
  box-shadow: var(--ombre-carte);
  transition: transform 0.4s var(--elan), box-shadow 0.4s var(--elan);
}
.article-vignette:hover { transform: translateY(-5px); box-shadow: var(--ombre-survol); }
.article-vignette .illustration { height: 172px; background: var(--fond-metier, var(--fond-orange)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.article-vignette .illustration img {
  width: 84px; height: 84px;
  object-fit: contain;
  transition: transform 0.5s var(--elan);
}
.article-vignette:hover .illustration img { transform: scale(1.09) rotate(-5deg); }
.article-vignette .texte { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.article-vignette .meta { font-size: 12.5px; color: var(--gris-clair); font-weight: 600; margin-bottom: 10px; }
.article-vignette h3 { margin-bottom: 8px; }
.article-vignette p { font-size: 14.5px; color: var(--gris); line-height: 1.55; }
.article-vignette .lien-carte { margin-top: auto; padding-top: 16px; font-weight: 700; font-size: 14.5px; color: var(--couleur-metier-texte, var(--orange-texte)); }

/* 8. FORMULAIRES ET CALCULATEUR =========================================== */

.panneau-formulaire {
  background: var(--creme);
  color: var(--encre);
  border-radius: var(--rayon-l);
  padding: clamp(24px, 3vw, 38px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32);
}
.section:not(.section--sombre) .panneau-formulaire {
  background: var(--blanc);
  border: 1px solid var(--trait);
  box-shadow: var(--ombre-carte);
}

.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ--large { grid-column: 1 / -1; }
.champ > span { font-weight: 700; font-size: 13px; }
.champ .aide { font-weight: 500; font-size: 12.5px; color: var(--gris-clair); }

input[type="text"], input[type="tel"], input[type="email"], input[type="date"],
input[type="number"], select, textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--encre);
  padding: 14px 15px;
  border-radius: var(--rayon-s);
  border: 1.5px solid var(--trait-fort);
  background: var(--blanc);
  outline: none;
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
input::placeholder, textarea::placeholder { color: var(--gris-clair); }
select { cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%); background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
textarea { resize: vertical; min-height: 92px; }

input:focus, select:focus, textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(238, 146, 0, 0.18);
}
/* Champ invalide, mais seulement une fois que le visiteur a tenté d'envoyer :
   souligner en rouge un champ qu'il n'a pas encore rempli est décourageant. */
form.a-ete-soumis input:invalid,
form.a-ete-soumis select:invalid,
form.a-ete-soumis textarea:invalid {
  border-color: var(--rouge);
  box-shadow: 0 0 0 3px rgba(179, 27, 18, 0.14);
}

.erreur-champ { font-size: 13px; color: var(--rouge); font-weight: 600; }

.consentement {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gris);
  margin-top: 16px;
}
.consentement input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--orange); }
.consentement a { text-decoration: underline; text-underline-offset: 2px; }

.mention-formulaire { text-align: center; font-size: 12px; color: var(--gris-clair); margin-top: 12px; }

/* Champ piège à robots : invisible pour l'humain, rempli par les robots.
   Volontairement pas display:none, que certains robots savent détecter. */
.piege {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Message de confirmation après envoi */
.confirmation { text-align: center; padding: 28px 10px; }
/* Variante encadrée. Sur la page du calculateur, le formulaire disparaît en
   laissant toute sa colonne vide : un message posé au milieu de ce vide a
   l'air d'un accident. La carte lui redonne un cadre. */
.confirmation--carte {
  padding: 40px 32px;
  border-radius: var(--rayon-l);
  background: var(--blanc);
  border: 1px solid var(--trait);
  box-shadow: var(--ombre-carte);
}
.confirmation .coche {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--succes);
  color: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  margin: 0 auto 16px;
}
.confirmation h3 { font-size: 25px; margin-bottom: 10px; }
.confirmation p { font-size: 15.5px; color: var(--gris); max-width: 42ch; margin: 0 auto; }

/* Pré-qualification : la question posée avant d'orienter le visiteur ----- */

/* Le reset `* { margin: 0 }` en tête de fichier écrase le margin:auto que le
   navigateur applique aux <dialog>, ce qui les colle en haut à gauche au lieu
   de les centrer. On le remet ici, explicitement. */
dialog {
  margin: auto;
  border: none;
  border-radius: 24px;
  padding: 0;
  max-width: 520px;
  width: calc(100% - 32px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35);
}
dialog::backdrop {
  background: rgba(20, 24, 31, 0.55);
  backdrop-filter: blur(3px);
}

.prequalif { display: grid; gap: 12px; }
.choix-prequalif {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  text-align: left;
  padding: 17px 20px;
  border-radius: var(--rayon-s);
  border: 1.5px solid var(--trait);
  background: var(--blanc);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.choix-prequalif:hover {
  border-color: var(--couleur-metier, var(--orange));
  transform: translateY(-2px);
  box-shadow: var(--ombre-survol);
}
.choix-prequalif img {
  width: 44px; height: 44px;
  padding: 5px;
  border-radius: var(--rayon-xs);
  background: var(--fond-metier, var(--creme-2));
  object-fit: contain;
  flex: none;
}
.choix-prequalif .libelle { font-weight: 700; font-size: 15.5px; }
.choix-prequalif .detail { font-size: 13px; color: var(--gris); font-weight: 500; }

/* Calculateur ----------------------------------------------------------- */

/* Le fil des trois étapes. Il remplace l'ancienne jauge à quatre segments :
   celle-ci suivait le nombre de réponses données, ce qui n'a plus de sens
   depuis que le parcours compte trois temps nommés (situation, coordonnées,
   estimation). Un visiteur qui voit les trois d'avance sait ce qu'on va lui
   demander, et à quel moment le montant arrive. */
.fil-etapes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin-bottom: 34px;
  counter-reset: etape;
}
.fil-etapes li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 200px;
  padding: 12px 16px;
  border-radius: var(--pilule);
  border: 1px solid var(--trait);
  background: var(--blanc);
  font-weight: 700;
  font-size: 14px;
  color: var(--gris-clair);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.fil-etapes .rang {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--creme-2);
  color: var(--gris-clair);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition: background 0.3s ease, color 0.3s ease;
}
.fil-etapes li[aria-current="step"] {
  color: var(--encre);
  border-color: var(--orange);
  background: var(--fond-orange);
}
.fil-etapes li[aria-current="step"] .rang { background: var(--orange); color: var(--encre); }
.fil-etapes li.est-faite { color: var(--encre); border-color: var(--trait-fort); }
/* L'étape franchie porte une coche à la place de son numéro. La coche est
   décorative : le numéro reste dans le HTML pour les lecteurs d'écran. */
.fil-etapes li.est-faite .rang { background: var(--succes); color: var(--blanc); font-size: 0; }
.fil-etapes li.est-faite .rang::after { content: '✓'; font-size: 14px; }

/* Une question du calculateur */
.question { border: none; padding: 0; margin-bottom: 34px; }
.question legend { padding: 0; margin-bottom: 14px; }
.question .surtitre { margin-bottom: 4px; }
.intitule {
  display: block;
  font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--encre);
}
.aide-question { font-size: 13px; color: var(--gris); margin-top: 10px; }

/* Question laissée sans réponse au moment de passer à l'étape suivante */
.question[data-manquant="oui"] .options-radio {
  outline: 2px solid var(--rouge);
  outline-offset: 8px;
  border-radius: var(--rayon-s);
}

.erreur-etape {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 0;
  padding: 13px 16px;
  border-radius: var(--rayon-s);
  background: var(--fond-rouge);
  border: 1px solid color-mix(in srgb, var(--rouge) 30%, transparent);
  color: var(--rouge-texte);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.erreur-etape::before { content: '!'; font-weight: 800; flex: none; }

.retour-etape {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--trait);
  border-radius: var(--pilule);
  background: var(--blanc);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--gris);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.3s var(--elan);
}
.retour-etape:hover { color: var(--encre); border-color: var(--trait-fort); transform: translateX(-3px); }

/* La colonne du résultat reste sous les yeux pendant qu'on répond. */
.colonne-resultat { position: sticky; top: 96px; }

.options-radio { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.option-radio { position: relative; }
.option-radio input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.option-radio span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px 17px;
  border-radius: var(--rayon-s);
  border: 1.5px solid var(--trait);
  background: var(--blanc);
  font-weight: 700;
  font-size: 14.5px;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.3s var(--elan);
}
.option-radio:hover span { border-color: var(--trait-fort); transform: translateY(-1px); }
.option-radio span em { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--gris); }
.option-radio input:checked + span { border-color: var(--orange); background: var(--fond-orange); }
.option-radio input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }

.resultat-devis {
  border-radius: var(--rayon-l);
  background: var(--encre);
  color: var(--creme);
  padding: 30px 28px;
  text-align: center;
}
.resultat-devis .fourchette {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 5vw, 48px);
  color: var(--orange-clair);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.resultat-devis .detail-ligne {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--trait-clair);
  font-size: 14px;
  text-align: left;
}
.resultat-devis .detail-ligne:last-of-type { border-bottom: none; }
.resultat-devis .detail-ligne span:last-child { font-weight: 700; white-space: nowrap; }
.resultat-devis .mention-resultat { font-size: 13.5px; color: var(--gris-sombre); margin: 6px 0 20px; }

.avertissement-devis {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gris-clair);
  margin-top: 16px;
}

/* ÉTAT VERROUILLÉ DU RÉSULTAT
   Le panneau montre les réponses données, montants remplacés par des points.
   Le but n'est pas de cacher pour cacher : c'est de prouver au visiteur que
   son calcul est fait et l'attend, ce qu'une case vide ne dirait pas.
   Le masquage visuel ci-dessous ne fait que METTRE EN FORME. Ce qui protège
   vraiment le montant, c'est que devis.js ne l'écrit dans la page qu'une fois
   le formulaire valide : avant, le chiffre n'existe nulle part dans le HTML. */
.resultat-devis[data-verrouille="oui"] .fourchette {
  color: var(--gris-sombre);
  letter-spacing: 0.08em;
}
.resultat-devis[data-verrouille="oui"] .detail-ligne span:last-child {
  color: var(--gris-sombre);
  letter-spacing: 0.14em;
}
.note-verrou {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: var(--rayon-s);
  background: var(--encre-2);
  border: 1px solid var(--encre-3);
  font-size: 13px;
  line-height: 1.45;
  color: var(--gris-sombre);
  text-align: left;
}
.note-verrou .cadenas { font-size: 14px; flex: none; line-height: 1.3; }

/* Le montant qui se dévoile. Une apparition franche mais courte : au-delà,
   l'animation donne l'impression que le site réfléchit, et le visiteur qui
   vient de laisser ses coordonnées veut son chiffre tout de suite. */
.resultat-devis[data-verrouille="non"] .fourchette { animation: devoile 0.5s var(--elan) both; }
@keyframes devoile {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* 9. PIED DE PAGE ========================================================= */

/* Le pied porte le filet des cinq couleurs du logo, comme le bandeau
   défilant : c'est la dernière chose que le visiteur voit, et la charte s'y
   referme. */
.pied {
  position: relative;
  background: var(--encre);
  color: var(--creme);
  padding: clamp(52px, 7vh, 80px) 0 30px;
}
.pied::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--vert) 0 20%, var(--orange) 20% 40%, var(--bleu) 40% 60%,
    var(--rouge) 60% 80%, var(--marron) 80% 100%);
}
.pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
.pied img.embleme { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 16px; }
.pied p { font-size: 14.5px; line-height: 1.6; color: var(--gris-sombre); max-width: 34ch; }
.pied h4 { color: var(--gris-clair); margin-bottom: 15px; }
.pied ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pied a { font-size: 14.5px; color: #CFC8BC; }
.pied a { transition: color 0.18s ease; }
.pied a:hover { color: var(--orange-clair); }
.pied-bas {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--trait-clair);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--gris-clair);
}
.pied-bas a { font-size: 12.5px; color: var(--gris-clair); }

/* 10. RÉVÉLATION AU DÉFILEMENT ============================================ */
/* La classe est posée par site.js. Sans JavaScript, rien n'est masqué : le
   contenu doit rester lisible même si le script ne se charge pas. */

.js [data-revele] { opacity: 0; transform: translateY(24px); }
.js [data-revele].est-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.65s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .js [data-revele] { opacity: 1; transform: none; }
}

/* 11. RESPONSIVE ========================================================== */

@media (max-width: 1080px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: block; }
  .hero-grille, .duo, .duo--devis { grid-template-columns: 1fr; }
  /* En une seule colonne, un bloc collant reste figé au-dessus du contenu
     qui le suit : il faut le décoller. */
  .colonne-resultat { position: static; }
  .fil-etapes li { flex-basis: 100%; }
  .hero-visuel { display: none; }
  .entete-actions .bouton--orange { display: none; }
  .champs { grid-template-columns: 1fr; }
  /* La barre d'appel occupe le bas de l'écran : on libère la place. */
  body { padding-bottom: 74px; }
  .barre-appel { display: flex; }
  .bandeau-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .pied-grille { grid-template-columns: 1fr; gap: 30px; }
  .entete { padding: 12px 16px; }
  .entete[data-defile="oui"] { padding: 8px 16px; }
  /* L'emblème est un cercle : sa largeur et sa hauteur se règlent ENSEMBLE.
     Une seule des deux, et le cercle devient un ovale. */
  .logo { gap: 10px; }
  .logo-embleme { width: 40px; height: 40px; }
  .logo-titre { height: 25px; }
  .entete[data-defile="oui"] .logo-embleme { width: 36px; height: 36px; }
  .entete[data-defile="oui"] .logo-titre { height: 23px; }
  .nav-mobile { inset: 54px 0 0; }
  .section { padding: 56px 0; }
  .bandeau-piste b { padding: 0 14px; }
  .vignette { display: none; }
  .gage { font-size: 13px; padding: 6px 12px 6px 10px; }
}

/* Très petits écrans : le bloc-titre disparaît, l'emblème seul reste. Il est
   reconnaissable, et il libère la place pour le bouton du menu. */
@media (max-width: 380px) {
  .logo-titre { display: none; }
}

@media print {
  .entete, .nav-mobile, .barre-appel, .bandeau, .bandeau-cta, .pied { display: none; }
  body { background: #fff; padding: 0; }
}

/* ------------------------------------------------------------------ */
/* PRÉPRODUCTION SEULEMENT — branche preprod-client                    */
/*                                                                      */
/* Ce bloc n'existe pas sur la branche main. Il signale au client, d'un */
/* coup d'oeil, tout ce qui attend un contenu de sa part : textes en    */
/* lorem ipsum et emplacements de photos. Sans ce repère, il lit un     */
/* site en latin sans savoir si c'est un défaut ou une demande.         */
/* ------------------------------------------------------------------ */

/* Le surlignage a ete retire le 2026-09-22 : il decoupait le site en
   rectangles jaunes et empechait le client de juger le design, ce qui est
   justement ce qu'on lui demande de regarder. La classe reste posee dans le
   HTML, sans effet visuel, pour pouvoir remonter le reperage si besoin.
   Ce qui signale les trous desormais : le lorem ipsum, qui se reconnait seul,
   et le bandeau en tete de page. */
.a-fournir {
  /* volontairement sans style */
}

/* Bandeau d'explication, en tête de chaque page. Il dit au client ce   */
/* qu'il regarde : sans lui, un site en lorem ipsum ressemble à une     */
/* erreur, pas à une demande de contenu.                                */
/* L'en-tete du site est en position fixed : le bandeau doit lui laisser la
   place, sinon il recouvre le logo. On decale donc l'en-tete et le contenu
   de la hauteur du bandeau, mesuree par --h-preprod. */
:root { --h-preprod: 38px; }

body { padding-top: var(--h-preprod); }
.entete { top: var(--h-preprod); }

.bandeau-preprod {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #14181f;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 20px;
  text-align: center;
}

.bandeau-preprod b { color: #ffc400; }


/* Emplacement de photo à fournir. L'image elle-même est un SVG blanc   */
/* qui porte ses dimensions ; ce cadre l'identifie comme un trou et non */
/* comme une photo ratée.                                               */
.photo-a-fournir {
  outline: 2px dashed rgba(20, 24, 31, 0.28);
  outline-offset: -6px;
  background: #f4f2ee;
}

@media print {
  .bandeau-preprod { display: none; }
}

/* Écran d'accès de la préproduction. Le corps de page est masqué tant que le
   mot de passe n'est pas saisi. C'est un rideau, pas une serrure : voir
   l'en-tête de assets/js/preprod-acces.js. */
.preprod-verrou body > *:not(.preprod-ecran) { visibility: hidden; }
.preprod-verrou { overflow: hidden; }

.preprod-ecran {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #14181f;
  visibility: visible;
}

.preprod-boite {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 16px;
  padding: 30px 28px;
  text-align: left;
}

.preprod-titre {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin: 0 0 8px;
}

.preprod-sous {
  font-size: 14px;
  line-height: 1.55;
  color: #6b6b6b;
  margin: 0 0 22px;
}

.preprod-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 7px;
}

.preprod-champ {
  width: 100%;
  font: inherit;
  font-size: 16px; /* 16px ou plus : en dessous, l'iPhone zoome sur le champ. */
  padding: 11px 13px;
  border: 1px solid #d9d5cd;
  border-radius: 9px;
  background: #fff;
}

.preprod-champ:focus-visible { outline: 2px solid #ffc400; outline-offset: 1px; }

.preprod-bouton {
  width: 100%;
  margin-top: 14px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 16px;
  border: 0;
  border-radius: 9px;
  background: #14181f;
  color: #fff;
  cursor: pointer;
}

.preprod-erreur {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: #b3261e;
}