/*
 * La forme du site public — proprete-mosellane.fr
 *
 * Les couleurs ne se décident pas ici. Elles viennent de jetons.css,
 * copié depuis l'application : le site, le portail du donneur d'ordre et
 * l'application agent doivent avoir la même identité, parce qu'un
 * prospect qui visite le site puis ouvre la démonstration du portail
 * passe d'une surface à l'autre en une minute. Deux bleus différents
 * dans cette minute-là, et l'ensemble a l'air assemblé à la hâte.
 *
 * Ce fichier ne porte donc que la FORME : la colonne, le rythme
 * vertical, les cartes, les boutons, l'entête. Le site est une vitrine
 * qu'on parcourt, pas un poste de travail : il respire beaucoup plus que
 * le pilotage, et il est lu à 70 % sur un téléphone tenu d'une main.
 *
 * Aucun style n'est écrit en ligne dans les pages. La politique de
 * sécurité servie par Caddy interdit 'unsafe-inline' sur les feuilles :
 * un attribut style= ne s'appliquerait pas, en silence.
 */

/* --- Les polices ----------------------------------------------------
 * Source Serif 4, variable, hébergée ici. Jamais appelée chez Google :
 * une entreprise qui vend de la traçabilité et de la conformité RGPD à
 * des bailleurs sociaux ne peut pas annoncer chacun de ses visiteurs à
 * un tiers sur sa propre page d'accueil. La CNIL a sanctionné l'usage
 * de Google Fonts en CDN, et l'argument se retournerait contre nous
 * dans un mémoire technique.
 *
 * C'est la police du portail. Le prospect qui ouvre la démonstration
 * après avoir lu le site ne change pas de typographie.
 */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/source-serif-4-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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/source-serif-4-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;
}

:root {
  --labeur:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --courante: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* La colonne. 1160 px laisse tenir trois cartes de prestation côte à
   * côte sans les étirer ; la prose, elle, se borne à --lecture, parce
   * qu'une ligne de 1160 px ne se lit pas, elle se balaye. */
  --colonne:   1160px;
  --lecture:   68ch;
  --gouttiere: 24px;

  /* Le rythme vertical. Une seule échelle, pas de valeurs au hasard :
   * c'est ce qui fait qu'un site paraît tenu plutôt que bricolé. */
  --r1:  4px;  --r2:  8px;  --r3: 12px;  --r4: 16px;
  --r5: 24px;  --r6: 32px;  --r7: 48px;  --r8: 64px;  --r9: 96px;
}

*, *::before, *::after { box-sizing: border-box }

html {
  scroll-behavior: smooth;
  /* La barre d'action fixe du bas masque la cible d'une ancre sur
   * téléphone ; l'entête collante la masque sur poste. */
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 17px/1.6 var(--courante);
  -webkit-text-size-adjust: 100%;
  /* La barre d'action fixe du bas, sur téléphone, recouvrirait la fin du
   * pied de page — dont les liens légaux, qui doivent rester atteignables. */
  padding-bottom: 0;
}

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

/* --- La typographie -------------------------------------------------
 * Les titres sont en labeur. Ce choix n'est pas décoratif : le secteur
 * de la propreté communique en sans-serif majuscule et en bleu criard,
 * tout se ressemble. Un empattement sobre place l'entreprise du côté du
 * cabinet qui répond à un appel d'offres, pas du prospectus.
 */
h1, h2, h3, h4 {
  font-family: var(--labeur);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 var(--r4);
  text-wrap: balance;
}
h1 { font-size: clamp(32px, 5.2vw, 52px) }
h2 { font-size: clamp(26px, 3.6vw, 36px) }
h3 { font-size: clamp(20px, 2.2vw, 24px) }
h4 { font-size: 18px }

p, ul, ol { margin: 0 0 var(--r5) }
li { margin-bottom: var(--r2) }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0 }

a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px }
a:hover { color: var(--accent-vif) }

/* Le focus est visible partout et ne se retire jamais. Le site est lu
 * par des chargés d'opérations de bailleurs sociaux, dont certains
 * naviguent au clavier, et la déclaration d'accessibilité l'engage. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r1);
}

.attenue { color: var(--attenue) }
.lecture { max-width: var(--lecture) }

/* Le lien d'évitement : premier élément focalisable de chaque page. */
.evitement {
  position: absolute;
  left: -9999px;
  background: var(--accent);
  color: var(--sur-accent);
  padding: var(--r3) var(--r5);
  z-index: 100;
}
.evitement:focus { left: var(--r5); top: var(--r3) }

/* --- La trame -------------------------------------------------------- */
.colonne {
  max-width: var(--colonne);
  margin: 0 auto;
  padding-left: var(--gouttiere);
  padding-right: var(--gouttiere);
}

section { padding: var(--r9) 0 }
section.serree { padding: var(--r8) 0 }
.creux { background: var(--carte) }   /* alterne avec le fond gris */

/* Le titre de section, avec son surtitre. Le surtitre dit de quoi on
 * parle en trois mots ; le titre porte l'argument. */
.surtitre {
  display: block;
  font-family: var(--courante);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--r3);
}
.chapeau {
  font-size: clamp(18px, 2.2vw, 20px);
  color: var(--attenue);
  max-width: var(--lecture);
}

/* --- Les boutons ------------------------------------------------------
 * Deux seulement. Un site de prestation de service n'a besoin de rien
 * d'autre : l'action principale est « demander un devis », tout le reste
 * est secondaire. Une troisième variante finirait par diluer la
 * première.
 */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r2);
  min-height: var(--cible);
  padding: var(--r3) var(--r5);
  border: 1px solid transparent;
  border-radius: var(--rayon-petit);
  font: 600 16px/1.2 var(--courante);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.bouton-plein { background: var(--accent); color: var(--sur-accent) }
.bouton-plein:hover { background: var(--accent-vif); color: var(--sur-accent) }
.bouton-vide {
  background: transparent;
  border-color: var(--bord);
  color: var(--texte);
}
.bouton-vide:hover { border-color: var(--accent); color: var(--accent) }
.actions { display: flex; flex-wrap: wrap; gap: var(--r3); margin-top: var(--r6) }

/* --- La carte ---------------------------------------------------------
 * Le motif unique, comme sur le pilotage : tout ce qui se lit est posé
 * sur une carte. C'est ce qui permet au fond gris d'exister.
 */
.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: var(--r6);
}
.creux .carte { background: var(--fond) }

/* La carte cliquable : toute sa surface est la cible du lien, y compris
 * sur un téléphone où viser un intitulé de trois mots est une épreuve. */
a.carte {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
a.carte:hover { border-color: var(--accent); transform: translateY(-2px) }
a.carte h3 { margin-bottom: var(--r2) }
a.carte p { font-size: 15px; color: var(--attenue) }
a.carte .fleche { color: var(--accent); font-weight: 600; font-size: 15px; margin-top: var(--r4); display: block }

.grille { display: grid; gap: var(--r5) }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) }

/* Le picto. Un trait, jamais un aplat, jamais une couleur propre : il
 * hérite de l'encre courante et suit donc le thème sombre sans travail. */
.picto {
  width: 28px; height: 28px;
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: var(--r4);
}

/* --- L'entête ---------------------------------------------------------
 * Collante, parce que l'appel à l'action et le numéro de téléphone
 * doivent rester à portée après deux écrans de lecture. Elle est
 * compacte : 64 px, pas 96, sinon elle mange le téléphone.
 */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--carte);
  border-bottom: 1px solid var(--bord);
}
.entete-corps {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: var(--r3) var(--gouttiere);
  display: flex;
  align-items: center;
  gap: var(--r5);
}
.marque { display: flex; align-items: center; gap: var(--r3); text-decoration: none; color: var(--texte); flex-shrink: 0 }
.marque-nom {
  font-family: var(--labeur);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
}
.marque-nom span {
  display: block;
  font-family: var(--courante);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--attenue);
  margin-top: 2px;
}

.navigation { margin-left: auto; display: flex; align-items: center; gap: var(--r2) }
.navigation > ul { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--r1) }
.navigation > ul > li { margin: 0; position: relative }
/* Le sélecteur vise les ENTRÉES DE MENU, pas tout ce que porte
 * l'entête. Écrit « .navigation a », il remettait un fond transparent
 * sur le bouton « Devis gratuit » — plus spécifique que « .bouton-plein »
 * et posé plus bas dans le fichier, il gagnait deux fois. Le bouton
 * s'affichait en texte noir sur blanc, c'est-à-dire en rien du tout. */
.navigation > ul a, .navigation > ul button {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--cible);
  padding: 0 var(--r3);
  border: 0;
  background: none;
  border-radius: var(--rayon-petit);
  font: 500 15px/1 var(--courante);
  color: var(--texte);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;   /* « Vos besoins » passait à la ligne dans l'entête */
}
.navigation > ul > li > a:hover,
.navigation > ul > li > button:hover { background: var(--accent-fond); color: var(--accent) }
.navigation [aria-current="page"] { color: var(--accent); font-weight: 600 }
.chevron { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform .15s }
[aria-expanded="true"] .chevron { transform: rotate(180deg) }

/* Le panneau déroulant. Il s'ouvre au clic, pas au survol : un menu qui
 * se déplie quand la souris passe dessus est inutilisable au trackpad et
 * inexistant au clavier. */
.panneau {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 300px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
  padding: var(--r4);
  list-style: none;
  margin: 0;
  display: none;
}
.panneau[data-ouvert] { display: block }
.panneau li { margin: 0 }

/* Le grand panneau tenait en « columns ». La coupure tombait alors où le
 * navigateur la décidait — au milieu d'une famille — et la colonne de
 * droite s'ouvrait sur trois entrées dont le titre était resté en bas à
 * gauche. Une grille explicite garde chaque famille d'un bloc.
 *
 * La hauteur est bornée : sur un portable de 768 px de haut, quatre
 * familles dépassaient l'écran et les dernières entrées devenaient
 * inatteignables, le panneau se fermant dès qu'on tentait de faire
 * défiler la page derrière. */
.panneau.large {
  display: none;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  gap: 0 var(--r5);
  min-width: 640px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.panneau.large[data-ouvert] { display: grid }
.panneau .groupe ul { list-style: none; margin: 0; padding: 0 }
.panneau-tout { grid-column: 1 / -1; margin: var(--r3) 0 0; border-top: 1px solid var(--bord); padding-top: var(--r3) }
.panneau-tout a { font-weight: 600; color: var(--accent) }
.panneau a { display: block; padding: var(--r2) var(--r3); font-size: 15px; min-height: 0; line-height: 1.4 }
.panneau a:hover { background: var(--accent-fond); color: var(--accent) }
.panneau .titre-groupe {
  font: 600 12px/1 var(--courante);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--attenue);
  margin: var(--r4) 0 var(--r2);
  padding: 0 var(--r3);
}
.panneau .groupe:first-child .titre-groupe,
.panneau .groupe:nth-child(2) .titre-groupe { margin-top: 0 }

.tel-entete {
  display: flex;
  align-items: center;
  min-height: var(--cible);
  padding: 0 var(--r3);
  font: 600 15px/1 var(--courante);
  color: var(--texte);
  text-decoration: none;
  white-space: nowrap;
}
.tel-entete:hover { color: var(--accent) }
.entete .bouton { padding: var(--r2) var(--r4); font-size: 15px; white-space: nowrap }

/* Le bouton du menu sur téléphone. */
.burger { display: none; margin-left: auto; width: var(--cible); height: var(--cible); align-items: center; justify-content: center }
.burger svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none }

/* --- Le tiroir de navigation sur téléphone ---------------------------- */
.tiroir {
  display: none;
  position: fixed;
  inset: 64px 0 0;
  background: var(--carte);
  overflow-y: auto;
  padding: var(--r5) var(--gouttiere) 120px;
  z-index: 49;
}
.tiroir[data-ouvert] { display: block }
.tiroir details { border-bottom: 1px solid var(--bord) }
.tiroir summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  font: 600 17px/1.3 var(--labeur);
  cursor: pointer;
  list-style: none;
}
.tiroir summary::-webkit-details-marker { display: none }
.tiroir summary::after { content: '+'; font: 400 24px/1 var(--courante); color: var(--attenue) }
.tiroir details[open] summary::after { content: '−' }
.tiroir details ul { list-style: none; margin: 0 0 var(--r4); padding: 0 }
.tiroir details a { display: block; padding: var(--r3) 0 var(--r3) var(--r4); font-size: 16px; color: var(--texte); text-decoration: none }
.tiroir > a {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--bord);
  font: 600 17px/1.3 var(--labeur);
  color: var(--texte);
  text-decoration: none;
}

/* --- La barre d'action fixe, téléphone uniquement ---------------------
 * La moitié des visiteurs d'un site de nettoyage veut appeler, pas lire.
 * Leur imposer de remonter chercher un numéro en haut de page est la
 * façon la plus simple de perdre un contact déjà convaincu.
 */
.barre-action { display: none }

/* --- Le fil d'Ariane --------------------------------------------------- */
.ariane { padding: var(--r4) 0; font-size: 14px; color: var(--attenue) }
.ariane ol { display: flex; flex-wrap: wrap; gap: var(--r2); list-style: none; margin: 0; padding: 0 }
.ariane li { margin: 0; display: flex; align-items: center; gap: var(--r2) }
.ariane li + li::before { content: '›'; color: var(--bord) }
.ariane a { color: var(--attenue) }
.ariane a:hover { color: var(--accent) }

/* --- La bannière d'ouverture ------------------------------------------
 * Pas de photographie. C'est une contrainte assumée : une image de
 * banque d'un cadre souriant devant une baie vitrée dit au visiteur que
 * tout le reste peut être aussi générique. La page s'ouvre donc sur une
 * phrase, et la phrase porte l'argument.
 */
.banniere { padding: var(--r9) 0 var(--r8); border-bottom: 1px solid var(--bord); background: var(--carte) }
.banniere h1 { max-width: 22ch }
.banniere .chapeau { margin-top: var(--r5) }

/* La trame de fond : un quadrillage très pâle, dessiné en CSS. Il donne
 * de la matière là où une photographie manquerait, sans peser un octet
 * de plus et sans prendre position sur un chantier qu'on n'a pas fait. */
/* La trame remplace la photographie qu'on n'a pas. Elle doit se
 * deviner, pas se lire : dessinée directement en « background-image »
 * sur la section, à pleine encre de bordure, elle donnait un quadrillage
 * de tableur — l'œil comptait les cases au lieu de lire le titre.
 *
 * Elle passe donc par un calque propre, opacité 45 %, qui s'efface vers
 * le bas en « mask » plutôt que sous un dégradé opaque : un dégradé vers
 * « --carte » supposait de connaître la couleur du fond, et laissait une
 * bande claire visible dès que la section changeait de couleur. */
.trame { position: relative }
.trame::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .45;
  background-image:
    linear-gradient(var(--bord) 1px, transparent 1px),
    linear-gradient(90deg, var(--bord) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  pointer-events: none;
}
.trame > * { position: relative; z-index: 1 }

/* --- Le bandeau de chiffres -------------------------------------------- */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--r5) }
.chiffre strong {
  display: block;
  font-family: var(--labeur);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 600;
  line-height: 1;
  color: var(--texte);
  margin-bottom: var(--r2);
}
.chiffre span { font-size: 15px; color: var(--attenue); display: block; max-width: 24ch }

/* --- La liste à puces marquées ----------------------------------------- */
.liste-cochee { list-style: none; padding: 0 }
.liste-cochee li { position: relative; padding-left: var(--r6); margin-bottom: var(--r3) }
.liste-cochee li::before {
  content: '';
  position: absolute;
  left: 0; top: .45em;
  width: 16px; height: 9px;
  border-left: 2px solid var(--succes);
  border-bottom: 2px solid var(--succes);
  transform: rotate(-45deg);
}

/* La liste numérotée d'une méthode : les étapes se lisent dans l'ordre
 * et le numéro doit se voir de loin. */
.etapes { list-style: none; padding: 0; counter-reset: etape }
.etapes > li {
  counter-increment: etape;
  position: relative;
  padding-left: var(--r8);
  padding-bottom: var(--r6);
  margin: 0;
}
.etapes > li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font: 600 15px/1 var(--courante);
  color: var(--accent);
  background: var(--accent-fond);
  border-radius: var(--rayon-petit);
  padding: 10px 12px;
}
.etapes > li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 21px; top: 42px; bottom: 12px;
  border-left: 1px dashed var(--bord);
}
.etapes h3 { margin-bottom: var(--r2) }
.etapes p { color: var(--attenue); font-size: 16px; max-width: var(--lecture) }

/* --- Les questions fréquentes -----------------------------------------
 * <details> natif : pas une ligne de JavaScript, ouvrable au clavier,
 * et le contenu reste dans le HTML pour Google même replié.
 */
.faq details {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  margin-bottom: var(--r3);
}
.creux .faq details { background: var(--fond) }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r4);
  padding: var(--r5);
  font: 600 17px/1.4 var(--labeur);
  cursor: pointer;
  list-style: none;
  min-height: var(--cible);
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: '+'; font: 400 24px/1 var(--courante); color: var(--accent); flex-shrink: 0 }
.faq details[open] summary::after { content: '−' }
.faq details > div { padding: 0 var(--r5) var(--r5); max-width: var(--lecture) }
.faq details > div p { font-size: 16px; color: var(--attenue) }

/* --- L'encadré d'appel ------------------------------------------------- */
.appel {
  background: var(--accent-fond);
  border: 1px solid var(--accent);
  border-radius: var(--rayon);
  padding: var(--r7);
  text-align: center;
}
.appel h2 { margin-bottom: var(--r3) }
.appel p { max-width: 52ch; margin: 0 auto var(--r6); color: var(--attenue) }
.appel .actions { justify-content: center; margin-top: 0 }

/* L'encadré d'appoint dans le fil du texte : une remarque, une garantie,
 * un rappel réglementaire. */
.note {
  border-left: 3px solid var(--accent);
  background: var(--accent-fond);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  padding: var(--r5);
  margin: var(--r6) 0;
  max-width: var(--lecture);
}
.note h3 { font-size: 18px; margin-bottom: var(--r3) }
.note p { font-size: 16px; margin-bottom: var(--r3) }
.note p:last-child { margin-bottom: 0 }

/* --- Les tableaux ------------------------------------------------------ */
.tableau { width: 100%; border-collapse: collapse; font-size: 16px }
.tableau caption {
  text-align: left;
  padding: var(--r4) var(--r4) 0;
  font-size: 14px;
  color: var(--attenue);
}
.tableau th, .tableau td { text-align: left; padding: var(--r3) var(--r4); border-bottom: 1px solid var(--bord); vertical-align: top }
.tableau th { font: 600 13px/1.3 var(--courante); letter-spacing: .06em; text-transform: uppercase; color: var(--attenue) }
.tableau-cadre { overflow-x: auto; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte) }

/* --- Les formulaires --------------------------------------------------- */
.champ { margin-bottom: var(--r5) }
.champ label { display: block; font: 600 15px/1.3 var(--courante); margin-bottom: var(--r2) }
.champ .aide { display: block; font-size: 14px; color: var(--attenue); margin-bottom: var(--r2) }
.champ input, .champ select, .champ textarea {
  width: 100%;
  min-height: var(--cible);
  padding: var(--r3) var(--r4);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-petit);
  background: var(--carte);
  color: var(--texte);
  font: 400 16px/1.5 var(--courante);   /* 16 px : en dessous, iOS zoome au focus */
}
.champ textarea { min-height: 140px; resize: vertical }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--accent) }
.obligatoire { color: var(--alerte-texte) }

/* Le pot de miel : visible pour un robot, hors d'atteinte d'un humain.
 * display:none est détecté par les robots sérieux ; cette forme-ci ne
 * l'est pas, et elle reste invisible aux lecteurs d'écran grâce à
 * aria-hidden posé dans le HTML. */
.piege { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden }

/* --- Le pied de page ---------------------------------------------------
 * Riche par nécessité, pas par habitude : il porte le maillage interne
 * vers les prestations et les villes, que Google suit depuis chaque
 * page du site.
 */
.pied { background: var(--carte); border-top: 1px solid var(--bord); padding: var(--r8) 0 var(--r6) }
.pied-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--r6) }
.pied h2 {
  font: 600 13px/1.3 var(--courante);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--attenue);
  margin-bottom: var(--r4);
}
.pied ul { list-style: none; margin: 0; padding: 0 }
.pied li { margin-bottom: var(--r2) }
.pied a { color: var(--texte); text-decoration: none; font-size: 15px }
.pied a:hover { color: var(--accent); text-decoration: underline }
.pied address { font-style: normal; font-size: 15px; color: var(--attenue); line-height: 1.7 }
.pied-bas {
  margin-top: var(--r7);
  padding-top: var(--r5);
  border-top: 1px solid var(--bord);
  display: flex;
  flex-wrap: wrap;
  gap: var(--r3) var(--r5);
  align-items: center;
  font-size: 14px;
  color: var(--attenue);
}
.pied-bas ul { display: flex; flex-wrap: wrap; gap: var(--r3) var(--r5) }
.pied-bas a { font-size: 14px; color: var(--attenue) }

/* --- Téléphone --------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --gouttiere: 20px }
  section { padding: var(--r8) 0 }
  .banniere { padding: var(--r7) 0 var(--r7) }
  .carte { padding: var(--r5) }
  .appel { padding: var(--r6) var(--r5) }

  .navigation { display: none }
  .burger { display: flex }

  /* La barre d'action. Deux cibles pleine largeur, rien d'autre : c'est
   * le dernier écran de quelqu'un qui a décidé. */
  .barre-action {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--r3);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    /* Au-dessus du tiroir, pas dessous : le tiroir couvre tout l'écran
     * sous l'entête, et il masquait les deux seules actions de la page.
     * Le tiroir réserve 120 px de marge basse pour cette barre. */
    z-index: 50;
    padding: var(--r3) var(--gouttiere) calc(var(--r3) + env(safe-area-inset-bottom));
    background: var(--carte);
    border-top: 1px solid var(--bord);
  }
  body { padding-bottom: 84px }
  .panneau.large { min-width: 0; grid-template-columns: 1fr }
}

/* --- Impression --------------------------------------------------------
 * Une page de prestation part parfois en pièce jointe d'un dossier de
 * consultation. L'entête collante, le tiroir et la barre d'action n'ont
 * rien à y faire, et les liens doivent montrer leur adresse.
 */
@media print {
  .entete, .tiroir, .barre-action, .ariane, .appel, .pied-grille { display: none !important }
  body { background: #fff; font-size: 12pt }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555 }
  section { padding: 12pt 0; break-inside: avoid }
}