/* =====================================================================
   Cabinet infirmier de L'Espace Doré
   Palette tirée des photos du cabinet : le rose poudré du fond de la
   photo d'équipe, le terracotta des chaises, le bois clair du sol.
   Volontairement pas de bleu médical : le cabinet est chaleureux, le
   site doit l'être aussi.
   ===================================================================== */

:root{
  --rose:       #c98a86;
  /* Assombri le 30/08/2026 : l'ancienne valeur #a86b67 ne donnait que
     4,23:1 sur blanc et 3,4:1 sur le rose clair, sous le minimum de
     4,5:1 exige pour du texte courant. Elle sert a la fois de couleur
     de texte et de fond (barre du haut, pied de page) : la corriger
     ici repare les deux usages d'un coup. */
  --rose-fonce: #8d5a57;
  --rose-clair: #f3e3e1;
  --rose-pale:  #faf3f2;
  --terre:      #c25f4a;
  --terre-fonce:#a44a37;
  --vert:       #5c7a6b;
  --bois:       #d9c3a5;
  --ink:        #2c2422;
  --ink-soft:   #6b5f5c;
  --line:       #e8ddda;
  --white:      #fff;
  --bg:         #f7f0ee;
  --maxw:       1140px;
  --radius:     14px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--rose-fonce); }

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Titres ---------- */
h1, h2, h3, h4{ font-family: 'Poppins', sans-serif; line-height: 1.2; margin: 0; }
h1{ font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h2{ font-size: clamp(1.35rem, 2.6vw, 1.75rem); color: var(--rose-fonce); margin-bottom: 8px; }
h3{ font-size: 1.05rem; color: var(--rose-fonce); margin-bottom: 6px; }
h4{ font-size: .95rem; color: var(--rose-fonce); margin-bottom: 5px; }
p{ margin: 0 0 14px; }
p:last-child{ margin-bottom: 0; }

/* ---------- Barre du haut ---------- */
.topbar{ background: var(--rose-fonce); color: #fff; font-size: .84rem; }
.topbar .wrap{ display: flex; justify-content: space-between; align-items: center;
               gap: 16px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.topbar a{ color: #fff; text-decoration: none; }
.topbar-info{ display: flex; align-items: center; gap: 8px; }
.topbar-info svg{ width: 15px; height: 15px; flex: none; }
/* La zone d'appui du numero faisait 15 px de haut : sous le doigt,
   c'est trop peu. Le texte ne bouge pas, seul le rembourrage grandit. */
.topbar-tel{ font-weight: 700; font-size: .95rem; padding: 5px 0; }

/* ---------- Entête ---------- */
.site-header{
  background: var(--white); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 200;
}
.site-header .wrap{ display: flex; align-items: center; justify-content: space-between;
                    gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.marque{ text-decoration: none; display: block; }
.marque .nom{ font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.02rem;
              color: var(--rose-fonce); line-height: 1.15; display: block; white-space: nowrap; }
.marque .lieu{ white-space: nowrap; }
/* Le bouton du menu ne doit jamais etre pousse hors de l'ecran */
.marque{ min-width: 0; overflow: hidden; }
.marque .lieu{ font-size: .76rem; color: var(--ink-soft); letter-spacing: .03em; }

.nav{ display: flex; align-items: center; gap: 2px; }

/* ---------- Menus deroulants ----------
   La tete de groupe est un lien vers sa propre page ; le sous-menu
   s'ouvre au survol ET a la prise de focus clavier. Si rien de tout
   cela ne fonctionne, le clic mene a la page du groupe, qui contient
   les memes liens : on ne peut pas se retrouver bloque. */
.nav-groupe{ position: relative; display: flex; align-items: center; }

.sous-menu{
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 236px; padding: 6px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 16px 34px rgba(160,110,105,.16);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
/* Une passerelle invisible sous la tete de groupe : sans elle, le
   moindre ecart de souris entre le lien et le panneau referme le
   menu. Sur une main qui tremble un peu, c'est insurmontable. */
.nav-groupe::after{
  content: ''; position: absolute; top: 100%; left: 0; right: 0;
  height: 12px;
}
.nav-groupe:hover .sous-menu,
.nav-groupe:focus-within .sous-menu,
.nav-groupe.ouvert .sous-menu{
  opacity: 1; visibility: visible; transform: translateY(6px);
}

/* Selecteur volontairement plus precis que « .nav a », declare plus
   bas avec un display: inline-flex qui, a specificite egale, aurait
   gagne et aurait aligne les sous-liens cote a cote. */
.nav .sous-menu a{
  display: block; padding: 10px 14px; border-radius: 8px;
  font-size: .88rem; color: var(--ink); text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.nav .sous-menu a:hover{ background: var(--rose-pale); color: var(--rose-fonce); }
.nav .sous-menu a.actif{ color: var(--rose-fonce); font-weight: 700; background: var(--rose-pale); }

.chevron{
  width: 15px; height: 15px; margin-left: 4px; flex: none;
  transition: transform .22s ease;
}
.nav-groupe:hover .chevron,
.nav-groupe:focus-within .chevron,
.nav-groupe.ouvert .chevron{ transform: rotate(180deg); }

/* ---------- « Accueil » en icone ----------
   Le nom du cabinet est long : ecrit en toutes lettres, « Accueil »
   prenait la place qui manquait a l'enseigne, qui se retrouvait coupee.
   Une maison dit la meme chose en un tiers de la largeur.
   Le mot reste dans la page pour les lecteurs d'ecran - simplement
   deporte hors du champ visible, jamais display:none, qui l'aurait
   rendu muet aussi pour eux. */
.nav a.lien-maison{ display: inline-flex; align-items: center; padding: 9px 12px; }
.nav a.lien-maison svg{ width: 20px; height: 20px; display: block; }
.nav a.lien-maison > span{
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}
.nav a{
  color: var(--ink); text-decoration: none; font-size: .87rem; font-weight: 500;
  padding: 9px 11px; border-radius: 8px; white-space: nowrap;
  display: inline-flex; align-items: center;
  transition: background .22s ease, color .22s ease;
}
.nav a:hover{ background: var(--rose-pale); color: var(--rose-fonce); }
.nav a.actif{ color: var(--rose-fonce); font-weight: 700; background: var(--rose-pale); }

.burger{ display: none; background: none; border: 1px solid var(--line); border-radius: 8px;
         padding: 8px 10px; cursor: pointer; color: var(--rose-fonce); }
.burger svg{ width: 20px; height: 20px; display: block; }

/* ---------- Boutons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .92rem;
  text-decoration: none; padding: 0 24px; min-height: 48px; border-radius: 10px;
  border: 2px solid transparent; cursor: pointer;
  transition: background .22s ease, color .22s ease, transform .22s ease, border-color .22s ease;
}
.btn svg{ width: 17px; height: 17px; flex: none; }
.btn:hover{ transform: translateY(-2px); }
.btn-rose{ background: var(--rose-fonce); color: #fff; border-color: var(--rose-fonce); }
.btn-rose:hover{ background: #96605c; border-color: #96605c; }
/* Fond legerement assombri par rapport a --terre : le blanc sur
   #c25f4a ne donnait que 4,17:1, sous le minimum. #b85a46 donne 4,58.
   La variable --terre reste inchangee pour ses autres usages, ou elle
   ne porte pas de texte. */
.btn-terre{ background: #b85a46; color: #fff; border-color: #b85a46; }
.btn-terre:hover{ background: var(--terre-fonce); border-color: var(--terre-fonce); }

/* Le bouton d'appel
   ---------------------------------------------------------------------
   Un combine blanc sur fond rouge, c'est le bouton « raccrocher » de
   tous les telephones : le geste inverse de celui qu'on propose. Le
   vert est la couleur universelle de la prise d'appel.
   Fond ET bordure de la meme couleur - le .btn porte une bordure de
   2 px, la laisser en terre aurait dessine un lisere rouge autour du
   vert. Meme raison pour l'etat survole. */
.btn-appel{ background: #547061; color: #fff; border-color: #547061; }
.btn-appel:hover{ background: #45604f; border-color: #45604f; }
.btn-contour{ background: transparent; color: var(--rose-fonce); border-color: var(--rose); }
.btn-contour:hover{ background: var(--rose-fonce); color: #fff; border-color: var(--rose-fonce); }

/* ---------- Sections ---------- */
.section{ padding: 56px 0; }
.section-pale{ background: var(--rose-pale); }
.section-tete{ text-align: center; max-width: 720px; margin: 0 auto 34px; }
.section-tete p{ color: var(--ink-soft); font-size: .97rem; }

/* ---------- Bandeau d'accueil ---------- */
.hero{ background: var(--white); padding: 52px 0; }
.hero-in{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.hero h1{ color: var(--rose-fonce); margin-bottom: 14px; }
.hero h1 em{ font-style: normal; color: var(--terre); }
.hero-sous{ font-size: 1.05rem; color: var(--ink); margin-bottom: 12px; }
.hero p{ color: var(--ink-soft); }
.hero-actions{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hero-photo{ border-radius: 20px; overflow: hidden; box-shadow: 0 18px 46px rgba(160,110,105,.20); }

/* Bande de repères sous le bandeau */
.reperes{ display: flex; background: var(--rose-clair); border-radius: 14px; margin-top: 30px; }
.reperes > div{ flex: 1; padding: 16px 20px; display: flex; align-items: center; gap: 12px;
                color: var(--ink-soft); font-size: .87rem; line-height: 1.4; position: relative; }
.reperes > div + div::before{ content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
                              width: 1px; background: rgba(168,107,103,.22); }
.reperes svg{ width: 20px; height: 20px; flex: none; color: var(--terre); }
.reperes strong{ display: block; color: var(--rose-fonce); font-family: 'Poppins', sans-serif;
                 font-weight: 700; font-size: .93rem; }

/* ---------- Cartes ---------- */
.grille{ display: grid; gap: 20px; }
.g2{ grid-template-columns: repeat(2, 1fr); }
.g3{ grid-template-columns: repeat(3, 1fr); }
.g4{ grid-template-columns: repeat(4, 1fr); }

.carte{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .28s ease;
}
.carte:hover{ transform: translateY(-4px); box-shadow: 0 14px 34px rgba(160,110,105,.13);
              border-color: var(--rose); }
.carte .ic{
  width: 56px; height: 56px; border-radius: 16px; background: var(--rose-clair);
  display: flex; align-items: center; justify-content: center; color: var(--rose-fonce);
  margin-bottom: 14px;
  transition: background .32s ease, color .32s ease, transform .45s cubic-bezier(.2,.9,.3,1.3);
}
.carte .ic svg{ width: 28px; height: 28px; }
.carte:hover .ic{ background: var(--rose-fonce); color: #fff; transform: rotate(-5deg) scale(1.06); }
.carte p{ color: var(--ink-soft); font-size: .91rem; }

/* ---------- Les trois infirmières ---------- */
.inf{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
      padding: 26px 24px; text-align: center; }
.inf .rond{
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--rose-clair); color: var(--rose-fonce);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.3rem;
}
.inf h3{ margin-bottom: 4px; }
.inf .role{ font-size: .84rem; color: var(--ink-soft); margin-bottom: 14px; }
.inf .rpps{ font-size: .74rem; color: var(--ink-soft); font-family: monospace;
            padding-top: 12px; border-top: 1px solid var(--line); margin-top: 14px; }

/* ---------- Listes ---------- */
.liste{ list-style: none; margin: 0; padding: 0; }
.liste li{ position: relative; padding: 7px 0 7px 26px; color: var(--ink-soft); font-size: .93rem; }
.liste li::before{
  content: ""; position: absolute; left: 5px; top: 15px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--terre);
}
.liste strong{ color: var(--ink); }

/* ---------- Encadrés ---------- */
.encadre{
  background: var(--rose-pale); border-radius: var(--radius); padding: 22px 26px;
  border-left: 3px solid var(--rose);
}
.encadre h3{ margin-bottom: 8px; }
.encadre p{ color: var(--ink-soft); font-size: .93rem; }

.urgence{
  background: #fdf4f2; border-left: 3px solid var(--terre); border-radius: 0 12px 12px 0;
  padding: 18px 22px; display: flex; gap: 14px; align-items: flex-start;
  color: #8a3a2a; font-size: .93rem; line-height: 1.65;
}
.urgence svg{ width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--terre); }
.urgence strong{ color: #6d2a1d; }

/* ---------- Bandeau de page ---------- */
.page-tete{ background: var(--rose-fonce); color: #fff; padding: 44px 0 40px; text-align: center; }
.page-tete h1{ color: #fff; margin-bottom: 8px; }
.page-tete p{ color: #f3e3e1; max-width: 720px; margin: 0 auto; }
/* Fil d'Ariane : #e5c9c6 ne donnait que 3,61:1 sur le fond rose du
   bandeau de titre. Eclairci a 4,9:1. Le « text-decoration: none »
   est retire - la regle des liens dans le texte, plus bas, les
   souligne pour qu'ils ne dependent pas de la seule couleur. */
.fil{ font-size: .82rem; color: #f2e4e2; margin-bottom: 16px; }
.fil a{ color: #f2e4e2; }
.fil a:hover{ color: #fff; }

/* ---------- Formulaire ---------- */
.form-cadre{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 32px;
}
.form-l2{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.champ{ margin-bottom: 18px; }
.champ label{ display: block; font-family: 'Poppins', sans-serif; font-weight: 600;
              font-size: .87rem; color: var(--rose-fonce); margin-bottom: 6px; }
.champ label .fac{ font-weight: 400; color: var(--ink-soft); font-size: .8rem; }
.champ input, .champ select, .champ textarea{
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: .95rem; color: var(--ink); background: var(--white);
  transition: border-color .22s ease, box-shadow .22s ease;
}
.champ input:focus, .champ select:focus, .champ textarea:focus{
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px rgba(201,138,134,.15);
}
.aide{ font-size: .8rem; color: var(--ink-soft); margin: 6px 0 0; }
.form-note{
  background: var(--rose-pale); border-radius: 10px; padding: 14px 18px;
  font-size: .87rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 20px;
}
.form-note strong{ color: var(--rose-fonce); }
.alerte-form{
  background: #fdf4f2; border-left: 3px solid var(--terre); border-radius: 0 10px 10px 0;
  padding: 14px 18px; margin-bottom: 20px; color: #8a3a2a; font-size: .9rem;
}
/* Elle recoit le focus par script pour etre lue : le contour n'a pas
   lieu d'etre, ce n'est pas un element sur lequel on navigue. */
.alerte-form:focus{ outline: none; }

/* Cibles tactiles du pied de page
   ---------------------------------------------------------------------
   Les liens y faisaient 16 px de haut : trop peu pour un doigt, encore
   plus pour une main qui tremble. Le texte ne change pas de taille,
   c'est la zone d'appui qui s'agrandit. */
@media (max-width: 760px){
  /* Un lien au fil du texte ne peut pas etre agrandi sans casser
     l'interligne : on augmente plutot la hauteur de ligne du bloc,
     ce qui ecarte les liens les uns des autres. */
  .section p, .faq-corps p, .encadre p{ line-height: 1.85; }
  .footer-liens a{ display: inline-block; padding: 9px 0; }
  .footer-bas a{ display: inline-block; padding: 6px 0; }
  .fil a{ display: inline-block; padding: 5px 0; }
}

/* ---------- Cases a cocher ----------
   La zone cliquable englobe le texte : viser une case de 16 px avec un
   doigt, ou avec une main qui tremble un peu, ne va pas de soi. */
.cases{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.case{
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  background: var(--rose-pale); border: 1px solid transparent; border-radius: 10px;
  padding: 12px 14px; font-size: .9rem; color: var(--ink); line-height: 1.5;
  transition: border-color .2s ease, background .2s ease;
}
.case:hover{ border-color: var(--rose); }
.case input{
  width: 20px; height: 20px; flex: none; margin: 0;
  accent-color: var(--rose-fonce); cursor: pointer;
}
.case:has(input:checked){ background: var(--rose-clair); border-color: var(--rose); }
.case span{ line-height: 1.25; position: relative; top: -2px; }

.accord{ margin-top: 4px; }
.accord .case{ background: #fff; border-color: var(--line); align-items: flex-start; }
.accord .case input{ margin-top: 1px; }
.accord .case span{ font-size: .87rem; color: var(--ink-soft); line-height: 1.5; top: 0; }
.accord .case:has(input:checked){ background: var(--rose-pale); border-color: var(--rose); }

/* ---------- Champ fichier ----------
   Le bouton natif est minuscule et differe d'un navigateur a l'autre.
   On lui donne au moins une zone franche et une bordure visible. */
.champ input[type="file"]{
  padding: 14px; background: var(--rose-pale); border-style: dashed;
  border-color: var(--rose); font-size: .9rem; cursor: pointer;
}
.champ input[type="file"]::file-selector-button{
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .85rem;
  background: var(--rose-fonce); color: #fff; border: 0; border-radius: 8px;
  padding: 10px 16px; margin-right: 14px; cursor: pointer;
}

.fichiers-choisis{ margin-top: 12px; display: grid; gap: 6px; }
.fichier-ligne{
  font-size: .84rem; color: var(--ink-soft); background: #fff;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
  overflow-wrap: anywhere;
}
.fichier-ligne.trop-lourd{ background: #fdf4f2; border-color: var(--terre); color: #8a3a2a; }
.fichier-alerte{
  font-size: .84rem; color: #8a3a2a; background: #fdf4f2;
  border-left: 3px solid var(--terre); border-radius: 0 8px 8px 0;
  padding: 8px 12px; margin: 0;
}

/* ---------- Pied de page ---------- */
.site-footer{ background: var(--rose-fonce); color: #f3e3e1; padding: 44px 0 0; margin-top: 20px; }
.footer-grille{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 34px; }
.site-footer h2{ color: #fff; font-size: .88rem; text-transform: uppercase;
                 letter-spacing: .06em; margin-bottom: 14px; }
.site-footer a{ color: #f3e3e1; text-decoration: none; }
.site-footer a:hover{ color: #fff; text-decoration: underline; }
.footer-liens{ list-style: none; margin: 0; padding: 0; }
.footer-liens li{ padding: 4px 0; font-size: .89rem; }
.footer-info{ font-size: .89rem; line-height: 1.8; }
.footer-info div{ display: flex; gap: 10px; align-items: flex-start; padding: 3px 0; }
.footer-info svg{ width: 16px; height: 16px; flex: none; margin-top: 4px; opacity: .8; }
.footer-bas{
  margin-top: 34px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.16);
  font-size: .8rem; color: #f4e9e8; display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.footer-bas a{ color: #f4e9e8; }   /* 4,9:1 sur le fond du pied */

/* ---------- Contenu reserve aux lecteurs d'ecran ----------
   Retire de l'affichage sans etre retire de la page : display:none ou
   visibility:hidden le rendraient muet aussi pour un lecteur d'ecran.
   Sert aux titres de section qui n'ont pas a etre vus mais dont la
   structure doit exister - un H1 suivi directement d'un H3 laisse
   croire a un niveau manquant. */
.sr-only{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Liens dans le texte ----------
   La couleur seule ne suffit pas a signaler un lien : une personne
   daltonienne ne la distingue pas du texte courant. Le soulignement
   le dit sans dependre de la vue des couleurs. Les liens qui sont
   deja des blocs identifiables - boutons, cartes, menu, pied de page -
   n'en ont pas besoin, leur forme les designe. */
.fil a,
.section p a,
.encadre p a,
.liste a,
.faq-corps a,
.form-note a,
.accord a,
.aide a{
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.fil a:hover,
.section p a:hover,
.faq-corps a:hover{ text-decoration-thickness: 2px; }

/* ---------- Lien d'evitement ----------
   Range hors de l'ecran, il revient des qu'il prend le focus. C'est le
   tout premier element atteint a la tabulation. */
.saut-contenu{
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--rose-fonce); color: #fff;
  padding: 12px 20px; border-radius: 0 0 10px 0;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .9rem;
  text-decoration: none;
}
.saut-contenu:focus{ left: 0; }

/* ---------- Mise en evidence du focus ----------
   Le contour par defaut du navigateur disparait sur les fonds colores.
   Un trait net, decale de 3 px, reste visible partout. */
:focus-visible{
  outline: 3px solid var(--terre);
  outline-offset: 3px;
  border-radius: 4px;
}
.site-footer :focus-visible,
.topbar :focus-visible{ outline-color: #fff; }

/* ---------- Boutons flottants ----------
   Trois pastilles empilees en bas a droite : appeler, rendez-vous,
   envoyer un document. Elles se deploient au survol pour annoncer ce
   qu'elles font - une icone seule laisse toujours un doute, et un
   visiteur age ne clique pas sur ce qu'il ne comprend pas.

   Chaque pastille est un vrai lien, pas un bouton pilote par un
   script : elles fonctionnent sans JavaScript. */
.flottants{
  position: fixed; right: 20px; bottom: 20px; z-index: 300;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}

.flottant{
  display: flex; align-items: center; gap: 0;
  height: 56px; border-radius: 28px;
  color: #fff; text-decoration: none;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .88rem;
  box-shadow: 0 8px 22px rgba(120,70,60,.30);
  overflow: hidden;
  transition: gap .28s ease, padding .28s ease, transform .25s ease, filter .25s ease;
}
.flottant-ic{
  width: 56px; height: 56px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.flottant-ic svg{ width: 25px; height: 25px; }

/* Le libelle est present dans la page - donc lu par les lecteurs
   d'ecran et par les moteurs - mais replie a largeur nulle. */
.flottant-txt{
  max-width: 0; opacity: 0; white-space: nowrap;
  transition: max-width .32s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.flottant:hover, .flottant:focus-visible{ transform: translateX(-2px); filter: brightness(1.06); }

/* Les libelles se deploient des que la souris APPROCHE de la pile, pas
   seulement quand elle touche une pastille. Viser un cercle de 56 px
   n'est pas donne a tout le monde ; et tant qu'on ne sait pas ce que
   fait un bouton, on ne s'en approche pas. La classe « proche » est
   posee par le script du pied de page, qui mesure la distance. */
.flottants.proche .flottant-txt,
.flottant:hover .flottant-txt,
.flottant:focus-visible .flottant-txt{ max-width: 190px; opacity: 1; }
.flottants.proche .flottant,
.flottant:hover, .flottant:focus-visible{ padding-right: 20px; gap: 2px; }

/* Le combine sur fond rouge, c'est le bouton « raccrocher » de tous les
   telephones : exactement le geste inverse de celui qu'on propose. Le
   vert est la couleur universelle de la prise d'appel, et il fait deja
   partie de la palette du site. Le terre passe donc sur le document,
   ou aucune convention ne s'y oppose. */
/* Fonds legerement assombris par rapport aux variables du site : le
   libelle blanc n'atteignait pas le contraste minimum (4,5:1) sur le
   rose et sur le terre d'origine - 4,23 et 4,18. Quatre a cinq pour
   cent de plus suffisent, l'ecart ne se voit pas a l'oeil et le texte
   devient lisible pour tout le monde. */
.flottant-appel{ background: #547061; }       /* meme vert que .btn-appel - 5,15:1 */
.flottant-rdv{   background: #a16763; }       /* 4,53:1 */
.flottant-doc{   background: #b85a46; }       /* 4,58:1 */

/* Sur telephone, les libelles ne se deploient pas : trois pastilles
   suffisent, et rien ne vient couvrir le texte de la page. */
@media (max-width: 760px){
  .flottants{ right: 14px; bottom: 14px; gap: 8px; }
  .flottant{ height: 50px; border-radius: 25px; }
  .flottant-ic{ width: 50px; height: 50px; }
  .flottant-ic svg{ width: 22px; height: 22px; }
  /* Aucun deploiement sur telephone : pas de souris a approcher, et
     trois libelles ouverts couvriraient la moitie de l'ecran. */
  .flottants.proche .flottant-txt,
  .flottant:hover .flottant-txt, .flottant:focus-visible .flottant-txt{ max-width: 0; opacity: 0; }
  .flottants.proche .flottant,
  .flottant:hover, .flottant:focus-visible{ padding-right: 0; }
}

/* La pile occupe le coin bas droit : on degage la derniere ligne du
   pied de page, sinon la mention legale passe dessous. Sur telephone
   il faut aussi degager sur la DROITE - le pied s'y affiche sur une
   colonne, et la ligne legale allait buter dans les pastilles. */
.site-footer{ padding-bottom: 90px; }
@media (max-width: 760px){
  .site-footer{ padding-bottom: 118px; }
  .footer-bas{ padding-right: 66px; }
}

@media (prefers-reduced-motion: reduce){
  .flottant, .flottant-txt{ transition: none; }
}

/* ---------- Animation d'arrivée ----------
   Le point de depart est « visible » : les cartes ne sont masquees que
   si la classe « js » a ete posee sur la page, c'est-a-dire si le
   navigateur execute bien le script.
   Sans cette precaution, un JavaScript desactive - ou simplement une
   erreur dans un script - laissait des sections entieres a opacite 0 :
   invisibles, definitivement. Un effet decoratif ne doit jamais pouvoir
   emporter le contenu avec lui. */
.js [data-anim] > *{
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1),
              box-shadow .32s ease, border-color .28s ease;
}
.js [data-anim].joue > *{ opacity: 1; transform: none; }
[data-anim].joue > *:nth-child(2){ transition-delay: .09s; }
[data-anim].joue > *:nth-child(3){ transition-delay: .18s; }
[data-anim].joue > *:nth-child(4){ transition-delay: .27s; }
[data-anim].joue > *:nth-child(5){ transition-delay: .36s; }
[data-anim].joue > *:nth-child(6){ transition-delay: .45s; }

/* ---------- Adaptation aux écrans ---------- */
@media (max-width: 980px){
  .hero-in{ grid-template-columns: 1fr; gap: 32px; }
  .hero-photo{ max-width: 480px; margin: 0 auto; }
  .g4{ grid-template-columns: repeat(2, 1fr); }
  .footer-grille{ grid-template-columns: 1fr 1fr; gap: 28px; }
  .reperes{ flex-wrap: wrap; }
  .reperes > div{ flex: 1 1 46%; }
}

/* Avec huit entrees, le menu ne tient plus en une ligne sous 1140 px */
@media (max-width: 1140px){
  .nav{
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; padding: 10px 24px 18px;
    box-shadow: 0 12px 26px rgba(160,110,105,.12);
  }
  .nav.ouvert{ display: flex; }
  .nav a{ padding: 12px 14px; font-size: .93rem; }
  .burger{ display: block; }
  .site-header .wrap{ position: relative; }
}

@media (max-width: 760px){
  .marque .nom{ white-space: normal; font-size: .95rem; }
  .marque .lieu{ white-space: normal; font-size: .72rem; }
  /* Sur un telephone, la baseline passait sur trois lignes et faisait
     enfler l'entete. Elle ne dit rien que le titre de la page d'accueil
     ne dise deja, en plus gros, juste en dessous. */
  .marque .lieu{ display: none; }
  .nav{
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; padding: 10px 24px 18px;
    box-shadow: 0 12px 26px rgba(160,110,105,.12);
  }
  .nav.ouvert{ display: flex; }
  .nav a{ padding: 12px 14px; }
  /* Dans le menu deroulant, l'icone seule n'aurait aucun sens au milieu
     d'une liste de libelles : le mot revient, precede de la maison. */
  .nav a.lien-maison{ padding: 12px 14px; gap: 10px; }

  /* Les sous-menus ne sont plus des panneaux flottants : ils se
     deroulent a leur place, en retrait. Rien a survoler, rien a
     viser - toutes les pages sont atteignables d'un seul appui. */
  .nav-groupe{ display: block; position: static; }
  .nav-groupe::after{ display: none; }
  .chevron{ display: none; }
  .sous-menu{
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 6px 14px; margin: 0;
    background: none; border: 0; box-shadow: none;
    border-left: 2px solid var(--rose-clair);
    margin-left: 20px;
  }
  .nav .sous-menu a{ padding: 11px 14px; font-size: .9rem; }
  .nav a.lien-maison > span{
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip-path: none;
  }
  .burger{ display: block; }
  .site-header .wrap{ position: relative; }
  .g2, .g3, .g4{ grid-template-columns: 1fr; }
  .form-l2{ grid-template-columns: 1fr; gap: 0; }
  .cases{ grid-template-columns: 1fr; }
  .section{ padding: 40px 0; }
  .reperes{ flex-direction: column; }
  .reperes > div{ flex: 1 1 auto; }
  .reperes > div + div::before{ left: 20px; right: 20px; top: 0; bottom: auto;
                                width: auto; height: 1px; }
  .footer-grille{ grid-template-columns: 1fr; }
  .form-cadre{ padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .js [data-anim] > *{ opacity: 1; transform: none; transition: none; }
  .carte:hover, .btn:hover, .flottant:hover{ transform: none; }
}






/* ---------- Voile d'attente pendant un envoi ----------
   Un formulaire qui part sans rien dire donne l'impression de n'avoir
   pas marche. On l'a vu sur d'autres sites : le visiteur reclique, et
   le message part deux fois. Le voile bloque l'ecran et nomme ce qui
   se passe.
   Il n'existe que si JavaScript est actif ; sans lui, le formulaire
   fonctionne exactement pareil, en silence. */
.voile-envoi{
  position: fixed; inset: 0; z-index: 900;
  /* Presque opaque, et legerement floute : le texte de la page ne doit
     pas continuer a se lire derriere, sinon l'oeil hesite entre les
     deux et le message d'attente se perd. */
  background: rgba(247, 240, 238, .965);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.voile-envoi.visible{ opacity: 1; visibility: visible; }

.voile-boite{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 22px 54px rgba(160,110,105,.20);
  padding: 38px 34px; text-align: center; max-width: 380px; width: 100%;
}

.roue{
  width: 56px; height: 56px; margin: 0 auto 22px;
  border: 5px solid var(--rose-clair);
  border-top-color: var(--terre);
  border-radius: 50%;
  animation: tourne .9s linear infinite;
}
@keyframes tourne{ to{ transform: rotate(360deg); } }

.voile-titre{
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.08rem;
  color: var(--rose-fonce); margin-bottom: 8px;
}
.voile-texte{
  font-size: .9rem; color: var(--ink-soft); line-height: 1.6; margin: 0;
  min-height: 2.9em;
}
.voile-lent{
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .82rem; color: #8a3a2a; display: none;
}
.voile-lent.visible{ display: block; }

/* Un bouton deja parti ne doit pas repartir */
.btn[disabled]{ opacity: .6; cursor: default; }
.btn[disabled]:hover{ transform: none; }

@media (prefers-reduced-motion: reduce){
  .roue{ animation-duration: 2.6s; }
  .voile-envoi{ transition: none; }
}


/* --- Questions frequentes ---------------------------------------------
   Les reponses sont repliees : la page reste lisible d'un coup d'oeil,
   et le visiteur ouvre ce qui le concerne.
   ---------------------------------------------------------------------- */
.faq{
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 10px; overflow: hidden;
  transition: border-color .28s ease, box-shadow .3s ease;
}
.faq:hover{ border-color: var(--rose); box-shadow: 0 8px 22px rgba(160,110,105,.09); }
.faq[open]{ border-color: var(--rose); }

.faq summary{
  padding: 16px 46px 16px 20px; cursor: pointer; position: relative;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .96rem;
  color: var(--rose-fonce); list-style: none;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::marker{ content: ""; }

/* Le chevron pivote a l'ouverture */
.faq summary::after{
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--rose); border-bottom: 2px solid var(--rose);
  transform: rotate(45deg); transition: transform .28s ease;
}
.faq[open] summary::after{ transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover{ background: var(--rose-pale); }

.faq-corps{ padding: 0 20px 18px; }
.faq-corps p{ color: var(--ink-soft); font-size: .93rem; margin-bottom: 10px; }
.faq-corps p:last-child{ margin-bottom: 0; }
.faq-corps strong{ color: var(--ink); }

/* --- Le numero se copie au clic ---------------------------------------
   Sur ordinateur, cliquer un lien « tel: » ouvre une application, ce qui
   deroute. Le clic copie le numero a la place, et une petite etiquette
   le confirme. Rien de tout cela sur telephone, ou l'appel direct est
   le bon geste.
   ---------------------------------------------------------------------- */
.tel-copiable{ position: relative; cursor: pointer; }

.tel-copiable::after{
  content: "Numéro copié";
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: var(--vert); color: #fff;
  font-family: 'Inter', sans-serif; font-size: .74rem; font-weight: 600;
  padding: 5px 11px; border-radius: 7px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .28s ease;
  z-index: 400;
}
.tel-copiable.copie::after{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* La pointe de l'etiquette */
.tel-copiable::before{
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px);
  margin-left: -5px; border: 5px solid transparent; border-top-color: var(--vert);
  opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 400;
}
.tel-copiable.copie::before{ opacity: 1; }

/* ---------- Quand il n'y a pas de place au-dessus ----------
   Dans la barre du haut, le lien commence a 8 px du bord : l'etiquette
   partait donc hors de l'ecran et la copie semblait ne rien faire.
   Le script pose « copie-dessous » quand le lien est trop haut, et
   l'etiquette bascule sous le numero, pointe retournee. */
.tel-copiable.copie-dessous::after{
  bottom: auto; top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
.tel-copiable.copie-dessous.copie::after{ transform: translateX(-50%) translateY(0); }
.tel-copiable.copie-dessous::before{
  bottom: auto; top: calc(100% + 3px);
  border-top-color: transparent; border-bottom-color: var(--vert);
}

/* Dans un bouton, l'etiquette se place au-dessus sans deformer le cadre */
.btn.tel-copiable{ overflow: visible; }


/* --- Sommaire des questions -------------------------------------------
   Sur une page de vingt-trois questions, il evite de faire defiler pour
   trouver son sujet. Le compteur annonce ce qu'on va trouver.
   ---------------------------------------------------------------------- */
.faq-sommaire{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 34px;
}
.faq-sommaire a{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--rose-pale); border: 1px solid var(--line); border-radius: 11px;
  padding: 13px 16px; text-decoration: none;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .87rem;
  color: var(--rose-fonce); line-height: 1.3;
  transition: background .22s ease, border-color .22s ease, transform .25s ease;
}
.faq-sommaire a:hover{
  background: var(--rose-clair); border-color: var(--rose); transform: translateY(-2px);
}
.faq-sommaire .n{
  flex: none; min-width: 24px; height: 24px; border-radius: 20px;
  background: var(--rose-fonce); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 700;
}

/* Le titre vise par le sommaire ne doit pas passer sous l'entete collante */
.faq-sommaire ~ h2[id]{ scroll-margin-top: 90px; }

@media (max-width: 900px){ .faq-sommaire{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .faq-sommaire{ grid-template-columns: 1fr; } }


/* --- Le logo dans l'entete --------------------------------------------
   Un SVG plutot qu'une image : net a toutes les tailles, et quelques
   centaines d'octets seulement.
   ---------------------------------------------------------------------- */
.marque{ display: flex; align-items: center; gap: 12px; }
.marque-logo{ width: 46px; height: 46px; flex: none; }
.marque-texte{ display: block; min-width: 0; }

@media (max-width: 760px){
  .marque-logo{ width: 38px; height: 38px; }
  .marque{ gap: 10px; }
}


/* Le numero de version, discret, en pied de page */
.pied-version{
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 20px; background: rgba(0,0,0,.18);
  font-size: .72rem; font-family: monospace; color: #f3e3e1;
}


/* --- Textes justifiés --------------------------------------------------
   Les paragraphes de lecture sont justifiés : les colonnes tiennent
   mieux, surtout sur les cartes de largeur égale.

   Deux réserves posées volontairement :
   • « hyphens:auto » coupe les mots en fin de ligne, sinon la
     justification creuse des trous béants dans les phrases courtes ;
   • sur petit écran, la colonne est trop étroite pour justifier
     proprement - on repasse au fer à gauche sous 620 px.
   ---------------------------------------------------------------------- */
.section p,
.faq-corps p,
.encadre p,
.carte p,
.inf p,
.form-note,
.urgence span{
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Ce qui ne se justifie pas : les titres, les chapôs centrés, les
   listes courtes et les libellés. */
.section-tete p,
.page-tete p,
.hero-sous,
.liste li,
.tar-liste li,
.aide,
.rpps,
.role,
.footer-info,
.footer-bas,
.pied-version{
  text-align: inherit;
  hyphens: manual;
}
.section-tete p, .page-tete p{ text-align: center; }

@media (max-width: 620px){
  /* Colonne trop étroite : la justification y creuse des trous */
  .section p, .faq-corps p, .encadre p, .carte p, .inf p,
  .form-note, .urgence span{
    text-align: left;
  }
}

/* Texte non selectionnable, sauf courriels et numeros de telephone (1.7.8) */
body{ -webkit-user-select: none; user-select: none; }
body a[href^="tel:"], body a[href^="mailto:"], body .sel-ok,
input, textarea, select, [contenteditable="true"]{ -webkit-user-select: text; user-select: text; }