/* ============================================================
   CLAIR & NET — Bussy-Saint-Georges
   Feuille de style unique. Pour changer l'identité visuelle,
   il n'y a que les variables ci-dessous à modifier.
   ============================================================ */
:root{
  /* Couleurs relevees directement sur le logo de Clair & Net.
     Rose magenta #FC00A8 (la maison), dore #A89000 (les etoiles), noir (le nom). */
  --rose:#E6009A;
  --rose-vif:#FC00A8;
  --rose-fonce:#A8006E;
  --rose-pale:#FDEBF6; --rose-haut:#FEF4FA;
  --or:#A89000; --jaune-google:#FBBC04;
  --encre:#171317;
  --gris:#6E626B;
  --ligne:#F3DDEB;
  --fond:#FFFCFE;
  --blanc:#fff;
  --titre:"Outfit",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --texte:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --rayon:14px;
  --ombre:0 18px 44px -28px rgba(168,0,110,.34);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--texte);color:var(--encre);background:var(--fond);line-height:1.7;font-size:16.5px;-webkit-font-smoothing:antialiased}
/* Le panneau du menu mobile est gare hors ecran a droite (translateX(100%)).
   Sans ce clip, il etire la page et le telephone defile de 292 px vers la droite.
   'clip' plutot que 'hidden' : 'hidden' ne corrige pas le debordement ici et
   transformerait la page en conteneur de defilement, au risque de casser
   l'en-tete en position sticky. Les deux selecteurs sont necessaires. */
html,body{overflow-x:clip}

img,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Contour de focus : le navigateur dessine un cadre bleu des qu'on clique
   sur un lien ou un bouton, ce qui est disgracieux et reste affiche apres
   le clic. On ne le montre qu'aux personnes qui naviguent au clavier
   (:focus-visible) : le retirer completement rendrait le site inutilisable
   sans souris. Au passage on coupe le rectangle gris du tap sur mobile. */
a,button,label,summary{-webkit-tap-highlight-color:transparent}
a:focus,button:focus,label:focus{outline:none}
a:focus-visible,button:focus-visible,label:focus-visible{
  outline:2px solid var(--rose);outline-offset:3px;border-radius:4px}
/* La case qui commande le menu est invisible : au clavier, on montre
   le focus sur le bouton burger a la place. */
.menu-check:focus-visible~.burger{outline:2px solid var(--rose);outline-offset:4px;border-radius:6px}
h1,h2,h3{font-family:var(--titre);font-weight:500;line-height:1.18;letter-spacing:-.015em}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.centre{text-align:center}
/* Un bouton ou une note centres, places juste apres une grille de cartes,
   ont besoin de respirer. Sans ca ils se collent au bord des cartes. */
.duo-cartes+.centre,.amen-grid+.centre,.avis-grille+.centre,
.etapes+.centre,.trio+.centre,.gal+.centre{margin-top:clamp(30px,4.5vh,48px)}
.note{font-size:.87rem;color:var(--gris)}
.saut{position:absolute;left:-9999px}
.saut:focus{left:12px;top:12px;background:var(--blanc);padding:12px 18px;z-index:200;border-radius:8px}

/* ---------- En-tête ---------- */
/* En haut de page, la barre reprend exactement la teinte du bandeau qui la
   suit : aucune marche de couleur, ni trait de separation. Des que la page
   defile, elle passe au blanc pour se detacher du contenu, avec une ombre
   tres legere a la place du trait. Sans JavaScript elle reste rose pale :
   toujours lisible, simplement sans le passage au blanc. */
.entete{position:sticky;top:0;z-index:100;background:var(--rose-haut);
  transition:background .25s ease,box-shadow .25s ease}
.entete.defile{background:var(--blanc);box-shadow:0 6px 22px -18px rgba(23,19,23,.55)}
.entete-in{display:flex;align-items:center;gap:24px;padding-top:11px;padding-bottom:11px}
.marque{display:flex;align-items:center;gap:12px;margin-right:auto;flex:none;min-width:0}
.marque-logo{height:60px;width:auto;flex:none}
.menu{display:flex;gap:20px;align-items:center;flex:none}
.menu a{font-size:.9rem;color:var(--encre);padding:6px 0;transition:color .2s;white-space:nowrap}
/* Le mot passe en gras au survol, ce qui l'elargit et decalerait tous les
   liens voisins. On reserve donc d'avance la largeur de sa version grasse,
   avec une copie invisible et sans hauteur : le menu ne bouge plus d'un pixel. */
.menu a::before{content:attr(data-texte);display:block;height:0;overflow:hidden;
  visibility:hidden;font-weight:700;pointer-events:none}
.menu a:hover{color:var(--rose);font-weight:700}
/* Page en cours : rose, mais sans gras et sans trait. */
.menu a.actif{color:var(--rose)}
.tel-entete{background:var(--rose);color:var(--blanc);padding:11px 20px;border-radius:100px;font-weight:500;font-size:.92rem;white-space:nowrap;transition:.25s}
.tel-entete:hover{background:var(--rose-fonce)}
.menu-check{position:absolute;opacity:0;width:1px;height:1px}
.fermer-menu{display:none}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--encre);transition:.3s}

/* ---------- Hero ---------- */
/* Pas de trait sous le bandeau du haut : le degrade suffit a marquer la separation. */
/* Le haut de page part d'un rose tres clair, la meme teinte que la barre
   au-dessus, et s'eclaircit vers le fond de page. */
.hero-grand,.hero-court{background:linear-gradient(165deg,var(--rose-haut),var(--fond) 70%)}
.hero-grand .wrap{padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(48px,7vh,84px);max-width:900px}
.hero-court .wrap{padding-top:clamp(40px,6vh,68px);padding-bottom:clamp(34px,5vh,56px);max-width:900px}
.surtitre{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);font-weight:500;margin-bottom:14px}
.surtitre.clair{color:#F7A8D6}
h1{font-size:clamp(2rem,4.6vw,3.3rem);margin-bottom:18px;color:var(--rose-fonce)}
.chapo{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--gris);max-width:640px}

/* ---------- Sections ---------- */
.sec{padding:clamp(52px,8vh,86px) 0}
.fond-clair{background:var(--rose-pale)}
.fond-sombre{background:var(--rose-fonce);color:#FDEBF6}
.fond-sombre h2{color:var(--blanc)}
.tete{text-align:center;max-width:640px;margin:0 auto clamp(32px,5vh,52px)}
.tete h2{font-size:clamp(1.6rem,3vw,2.3rem);color:var(--rose-fonce)}
h2{font-size:clamp(1.45rem,2.6vw,2rem);color:var(--rose-fonce);margin-bottom:14px}
h3{font-size:1.14rem;margin-bottom:8px;color:var(--rose-fonce)}
p+h2,ul+h2{margin-top:38px}
p+p{margin-top:14px}

/* ---------- Avantages ---------- */
.avantages{padding-top:clamp(36px,5vh,56px)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.trio article{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:32px 26px;box-shadow:var(--ombre);
  display:flex;flex-direction:column}
/* Les textes des trois cartes n'ont pas la meme longueur : sans cela le lien
   suit la fin du paragraphe et se retrouve a trois hauteurs differentes.
   « margin-top:auto » le pousse au bas de la carte, donc sur une meme ligne. */
.trio .lien-fleche{margin-top:auto;padding-top:16px;align-self:flex-start}
/* En colonne flex, les enfants s'etirent sur toute la largeur par defaut :
   les pastilles et les titres doivent garder leur largeur naturelle. */
.trio article > *{align-self:flex-start}
.trio article > h2,.trio article > p{align-self:stretch}
.trio .ic{display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:56px;padding:0 12px;border-radius:100px;background:var(--rose-pale);color:var(--rose);font-family:var(--titre);font-size:1.3rem;font-weight:600;margin-bottom:16px}
.trio h2{font-size:1.16rem;margin-bottom:8px}
.trio p{font-size:.95rem;color:var(--gris)}
.lien-fleche{display:inline-block;margin-top:14px;color:var(--rose);font-weight:500;font-size:.92rem}
.lien-fleche::after{content:" →";transition:.25s;display:inline-block}
.lien-fleche:hover::after{transform:translateX(4px)}

/* ---------- Cartes ---------- */
.duo-cartes{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:clamp(26px,3vw,38px)}
.duo-cartes.grandes .carte{padding:clamp(30px,3.5vw,44px)}
.liste-check{list-style:none;margin-top:14px}
.liste-check li{position:relative;padding-left:28px;margin-bottom:11px;font-size:.97rem}
.liste-check li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:7px;border-left:2px solid var(--or);border-bottom:2px solid var(--or);transform:rotate(-45deg)}
.fond-sombre .liste-check li::before{border-color:#F7A8D6}

/* ---------- Étapes ---------- */
.etapes{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:e}
.etapes li{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:30px 26px;position:relative}
.fond-clair .etapes li{background:var(--fond)}
.num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--rose);color:var(--blanc);font-family:var(--titre);font-weight:600;margin-bottom:14px}
.etapes p{font-size:.95rem;color:var(--gris)}

/* ---------- Zone ---------- */
.zone{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,54px);align-items:center}
.zone p{color:#F6C9E4;margin-bottom:12px}
.zone strong{color:var(--blanc)}
.carte-map{border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre);background:var(--rose-pale)}
.carte-map iframe{width:100%;height:340px;border:0}
.carte-map.large iframe{height:420px}
.grille-form .carte-map{align-self:stretch}
.grille-form .carte-map iframe{height:100%;min-height:430px}

/* ---------- Avis ---------- */
.avis-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.avis-grille blockquote,.avis-piste blockquote{background:var(--blanc);border:1px solid var(--ligne);border-left:3px solid var(--jaune-google);border-radius:var(--rayon);padding:26px 24px;font-size:.97rem;color:var(--gris)}
/* Les avis n'ont pas la meme longueur : sans cela la signature suit la fin
   du texte et tombe a trois hauteurs differentes. On la colle au bas de la carte. */
.avis-grille blockquote,.avis-piste blockquote{display:flex;flex-direction:column}
.avis-grille cite,.avis-piste cite{display:block;margin-top:auto;padding-top:16px;font-style:normal;font-weight:500;color:var(--rose-fonce);font-size:.9rem}


/* Note globale et etoiles des avis Google */
.avis-note{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-bottom:30px;font-size:1.02rem;color:var(--gris)}
.avis-note strong{font-family:var(--titre);font-size:1.7rem;color:var(--rose-fonce)}
.etoiles{color:var(--jaune-google);letter-spacing:.12em;font-size:1.05rem}
.avis-grille blockquote .etoiles,.avis-piste blockquote .etoiles{display:block;margin-bottom:10px;font-size:.95rem}

/* ---------- Encarts ---------- */
.encart-fort{background:var(--rose-pale);border:1px solid var(--ligne);border-radius:var(--rayon);padding:clamp(26px,3vw,38px);margin:32px 0}
.encart-fort h2{margin-bottom:10px}
.encart-tarif{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:clamp(28px,3.5vw,44px);max-width:820px;margin:0 auto;text-align:center}
.alerte-redac{background:#FFF6E6;border:1px solid #F0D9A8;border-radius:var(--rayon);padding:22px 24px;margin-bottom:36px;font-size:.95rem;color:#7A5A1E}

/* ---------- Formulaires ---------- */
/* Formulaire seul, sans colonne de texte a cote : on le centre. */
.form-seul{max-width:640px;margin:0 auto}
.grille-form{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,4vw,56px);align-items:start}
.bloc-form{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:clamp(26px,3vw,36px);box-shadow:var(--ombre)}
.fac{font-weight:400;color:var(--gris);font-size:.82rem;letter-spacing:0}
.formulaire label{display:block;margin-bottom:16px;font-size:.88rem;font-weight:500;color:var(--rose-fonce)}
.formulaire input,.formulaire select,.formulaire textarea{width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--ligne);border-radius:9px;font-family:var(--texte);font-size:.97rem;background:var(--fond);color:var(--encre)}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{outline:2px solid var(--rose);outline-offset:1px;background:var(--blanc)}
.duo-champs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formulaire fieldset{border:0;margin-bottom:16px}
.formulaire legend{font-size:.88rem;font-weight:500;color:var(--rose-fonce);margin-bottom:8px}
.radio{display:inline-flex;align-items:center;gap:7px;margin-right:18px;font-weight:400}
.radio input{width:auto;margin:0}
/* Champs obligatoires : asterisque rouge, mention et message d'erreur */
.obl{color:#D92D20;text-decoration:none;font-weight:700;margin:0 1px}
.legende-obl{margin:0 0 18px;font-size:.86rem;color:#6E626B}
.msg-champs{margin:0 0 16px;padding:13px 16px;border-radius:14px;
  background:#FDECEA;border:1px solid #F3B9B2;color:#8E1D12;
  font-size:.92rem;line-height:1.5}
.formulaire input.invalide,
.formulaire select.invalide,
.formulaire textarea.invalide{border-color:#D92D20;background:#FDF6F5}
.formulaire input.invalide:focus,
.formulaire select.invalide:focus,
.formulaire textarea.invalide:focus{outline:2px solid #D92D20;outline-offset:1px}
/* Page mentions legales */
.etroit h3{margin:26px 0 8px;font-size:1.02rem}
.tableau-legal{width:100%;border-collapse:collapse;margin:16px 0 6px;font-size:.93rem}
.tableau-legal th{text-align:left;padding:10px 12px;background:var(--rose-pale);
  color:var(--rose-fonce);font-weight:600;border-bottom:1px solid #F0D5E6}
.tableau-legal td{padding:11px 12px;border-bottom:1px solid #EFE7EC;vertical-align:top}
.tableau-legal tr:last-child td{border-bottom:none}
@media(max-width:620px){
  .tableau-legal,.tableau-legal tbody,.tableau-legal tr,.tableau-legal td{display:block;width:100%}
  .tableau-legal thead{display:none}
  .tableau-legal tr{margin-bottom:14px;border:1px solid #EFE7EC;border-radius:12px;padding:4px 0}
  .tableau-legal td{border-bottom:none;padding:7px 13px}
  .tableau-legal td:first-child{font-weight:600;color:var(--rose-fonce)}
}
/* Plan d'acces : charge seulement si la personne le demande.
   Tant qu'on n'a pas clique, aucune requete vers Google, donc aucun cookie
   et aucun bandeau de consentement a afficher. */
.carte-attente{min-height:320px;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;padding:34px 26px;text-align:center;
  background:var(--rose-pale);border-radius:var(--rayon)}
/* L'encadre d'attente occupe exactement la place que prendra le plan :
   au clic, l'un remplace l'autre sans que la page ne bouge. */
.carte-map.large .carte-attente{min-height:420px}
.grille-form .carte-attente{min-height:430px}
.carte-adr{margin:0;color:var(--encre);line-height:1.55}
.carte-note{margin:0;max-width:330px;font-size:.8rem;color:#6E626B;line-height:1.5}
.carte-map iframe{display:block;width:100%;border:0}
/* Titre de l'accueil : le retour a la ligne apres « domicile » est force
   dans le HTML (<br>). Sous 620 px, la taille suit la largeur de l'ecran
   pour que « Menage et repassage a domicile » tienne sur une seule ligne :
   sans ca le titre passerait a trois lignes sur telephone.
   retour a la ligne du titre */
@media(max-width:620px){
  .hero-grand h1{font-size:min(6vw,2rem)}
  /* Deux colonnes sur un telephone donnent des colonnes de 158 px :
     le texte tombe a un mot par ligne. On empile. */
  .duo-cartes{grid-template-columns:1fr}
}
/* Bandeau de consentement. Barre discrete en bas, jamais un mur :
   la page reste lisible et utilisable tant qu'on n'a pas repondu. */
.bandeau-cookies{position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--blanc);border-top:1px solid var(--ligne);
  box-shadow:0 -14px 40px -22px rgba(0,0,0,.35);
  transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.bandeau-cookies.visible{transform:translateY(0)}
.bandeau-in{max-width:1180px;margin:0 auto;padding:18px 26px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.bandeau-txt{margin:0;flex:1 1 380px;font-size:.88rem;line-height:1.55;color:#4A3F47}
.bandeau-txt a{color:var(--rose-fonce);text-decoration:underline}
.bandeau-btns{display:flex;gap:11px;flex:none}
/* Refuser doit peser autant qu'accepter : meme taille, meme allure de bouton,
   cote a cote. Un « Refuser » en simple texte face a un « Accepter » colore
   est precisement le procede que la CNIL sanctionne. */
.bandeau-btns .btn{padding:11px 24px;font-size:.88rem}
.bandeau-btns .btn-clair{background:var(--blanc);color:var(--rose-fonce);
  border:1.5px solid var(--rose);margin-top:0}
.bandeau-btns .btn-clair:hover{background:var(--rose-pale)}
.bandeau-cookies{max-height:88vh;overflow-y:auto}
.btn-texte{background:none;border:0;padding:11px 6px;font-family:var(--titre);font-size:.88rem;
  color:var(--rose-fonce);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.btn-texte:hover{color:var(--rose)}
/* Detail des choix : un interrupteur par usage, jamais coche d'avance */
.bandeau-choix{flex:1 1 100%;display:grid;gap:10px}
.choix{display:flex;gap:14px;align-items:flex-start;padding:13px 16px;border-radius:12px;
  background:var(--rose-haut);cursor:pointer;font-size:.86rem;line-height:1.5;color:#4A3F47}
.choix strong{display:block;color:var(--encre);font-family:var(--titre);font-weight:600;font-size:.93rem;margin-bottom:2px}
.choix input{appearance:none;-webkit-appearance:none;flex:none;margin:2px 0 0;width:40px;height:23px;
  border-radius:23px;background:#D8CAD3;position:relative;cursor:pointer;transition:background .2s}
.choix input::before{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;
  background:var(--blanc);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.choix input:checked{background:var(--rose)}
.choix input:checked::before{transform:translateX(17px)}
.choix input:focus{outline:none}
.choix input:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
@media(max-width:620px){
  .bandeau-in{padding:16px 20px;gap:15px}
  .bandeau-btns{width:100%;flex-wrap:wrap}
  .bandeau-btns .btn{flex:1;text-align:center}
  /* Sur telephone : Refuser et Accepter cote a cote, Personnaliser dessous */
  .bandeau-btns .btn-texte{order:3;flex-basis:100%;padding:4px 0 0}
}
/* Accroche de l'accueil : une phrase par ligne, le retour est force dans
   le HTML (<br>). Sur grand ecran la police grandit et la premiere phrase
   atteint 693 px : le bloc doit etre assez large pour l'accueillir,
   sinon elle se replie et « connaissez. » se retrouve seul sur une ligne. */
.hero-grand .chapo{max-width:740px}
/* ---- Apparitions au defilement --------------------------------------
   Le contenu est visible par defaut. Il n'est masque que si la classe
   « anim » est presente sur <html>, posee par anim.js : sans JavaScript,
   ou avec « reduire les animations » actif, rien ne disparait.
   Mouvement volontairement discret : 16 px et une demi-seconde. */
/* On utilise « translate » et non « transform » : le soulevement au survol
   se fait avec « transform », et les deux se cumulent au lieu de se
   contredire. Avec « transform » des deux cotes, la regle d'apparition
   l'emportait en specificite et le survol des cartes ne faisait plus rien. */
html.anim .apparait{opacity:0;translate:0 16px;
  transition:opacity .55s ease-out,translate .55s cubic-bezier(.2,.7,.3,1)}
html.anim .apparait.vu{opacity:1;translate:none}

/* Dans une grille, les elements arrivent l'un apres l'autre. */
html.anim .apparait[data-retard="1"]{transition-delay:.09s}
html.anim .apparait[data-retard="2"]{transition-delay:.18s}
html.anim .apparait[data-retard="3"]{transition-delay:.27s}

/* Le haut de page s'anime des l'ouverture, sans attendre le defilement. */
html.anim .hero-grand h1,
html.anim .hero-grand .chapo,
html.anim .hero-grand .cta-duo,
html.anim .hero-court h1,
html.anim .hero-court .chapo{opacity:0;transform:translateY(14px);
  animation:entree .65s cubic-bezier(.2,.7,.3,1) forwards}
html.anim .hero-grand .chapo,html.anim .hero-court .chapo{animation-delay:.1s}
html.anim .hero-grand .cta-duo{animation-delay:.2s}
@keyframes entree{to{opacity:1;transform:none}}

/* Petites reactions au survol, sur les elements deja interactifs. */
.carte,.trio article{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}
@media(hover:hover){
  .carte:hover,.trio article:hover{transform:translateY(-4px);box-shadow:0 18px 40px -28px rgba(23,19,23,.45)}
  .lien-fleche:hover::after{transform:translateX(4px)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* ---- Ruban d'avis qui defile ----------------------------------------
   Construit par app.js. Sans JavaScript, ou avec « reduire les animations »,
   la grille a trois colonnes d'origine reste en place : rien ne depend
   de ce ruban pour que les avis soient lisibles. */
.avis-ruban{position:relative;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.avis-ruban::-webkit-scrollbar{display:none}
.avis-piste{display:flex;gap:22px;width:max-content;padding:4px 0;
  animation:defile-avis 46s linear infinite}
.avis-piste blockquote{flex:none;width:min(360px,78vw);margin:0}
/* Le survol de la souris ne suspend pas le defilement : il continue.
   On garde la pause au clavier et pendant un glissement, sinon il serait
   impossible de faire defiler a la main ou de lire en naviguant au clavier. */
.avis-ruban:focus-within .avis-piste,
.avis-ruban.fige .avis-piste{animation-play-state:paused}
@keyframes defile-avis{from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 11px))}}
@media(prefers-reduced-motion:reduce){
  .avis-piste{animation:none}
}
/* ---- Pages de texte long (credit d'impot, mentions legales) ---------
   Le contenu n'est pas touche : seule sa mise en page change.
   La colonne faisait 760 px, soit environ 93 caracteres par ligne :
   l'oeil perd sa ligne en revenant a la marge. On resserre autour de
   75 caracteres, on aere les paragraphes et on sort les listes du flot
   du texte pour donner des points de respiration. */
.etroit{max-width:660px;font-size:17.2px;line-height:1.78}
.etroit p{margin:0 0 22px}
.etroit > p:last-child{margin-bottom:0}
.etroit h2{margin:0 0 18px;font-size:1.6rem}
.etroit h2:not(:first-child){margin-top:52px}

/* Les deux listes deviennent des encarts : elles decoupent le mur de
   texte et se reperent d'un coup d'oeil en parcourant la page. */
.etroit .liste-check,.etroit .liste-num{background:var(--rose-pale);
  border-radius:var(--rayon);padding:24px 28px;margin:0 0 24px}
.etroit .liste-check li,.etroit .liste-num li{font-size:1rem}
.etroit .liste-check li:last-child,.etroit .liste-num li:last-child{margin-bottom:0}
.etroit .liste-check{margin-top:0}

/* La liste numerotee n'avait aucun style : elle s'affichait avec les
   puces brutes du navigateur. */
.liste-num{list-style:none;counter-reset:etape;padding:0}
.liste-num li{counter-increment:etape;position:relative;padding-left:36px;margin-bottom:12px}
.liste-num li::before{content:counter(etape);position:absolute;left:0;top:.12em;
  width:24px;height:24px;border-radius:50%;background:var(--rose);color:var(--blanc);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--titre);font-size:.8rem;font-weight:600}
/* ---- Les fondatrices ----------------------------------------------
   Une phrase de presentation et la citation en italique, centrees,
   entre le haut de page et les trois arguments. Section volontairement
   compacte : elle incarne l'entreprise sans repousser les arguments. */
.sec.fondatrices{padding:clamp(34px,5vh,56px) 0 clamp(8px,2vh,18px)}
.fondatrices .wrap{max-width:820px;text-align:center}
.fondatrices-texte{margin:0;font-family:var(--titre);font-weight:500;
  font-size:clamp(1.2rem,2.3vw,1.55rem);line-height:1.45;color:var(--encre)}
.fondatrices-citation{margin:22px auto 0;padding:0;border:0;max-width:640px;position:relative}
.fondatrices-citation p{margin:0;font-style:italic;font-size:clamp(1.05rem,1.8vw,1.22rem);
  color:var(--rose-fonce)}
/* un filet rose court au-dessus de la citation, pour la detacher */
.fondatrices-citation::before{content:"";display:block;width:44px;height:2px;
  background:var(--rose);margin:0 auto 18px;border-radius:2px}
/* Ancrage local, sous le texte du haut de page : une pastille discrete
   avec un repere de carte. Placee apres le titre, « la commune » renvoie
   naturellement a Bussy-Saint-Georges, nommee juste au-dessus. */
.implantation{display:inline-flex;align-items:center;gap:9px;margin:24px 0 0;
  padding:8px 16px 8px 12px;border-radius:100px;background:var(--blanc);
  border:1px solid #F3D3E6;color:var(--rose-fonce);font-size:.93rem;font-weight:500}
.implantation svg{flex:none;width:17px;height:17px;color:var(--rose)}
html.anim .hero-grand .implantation{opacity:0;transform:translateY(14px);
  animation:entree .65s cubic-bezier(.2,.7,.3,1) .2s forwards}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg-ok{margin-top:14px;padding:12px 14px;background:var(--rose-pale);border-radius:9px;font-size:.9rem;color:var(--rose-fonce)}
.msg-ko{margin-top:14px;padding:12px 14px;background:#FFF3F3;border:1px solid #F3CFCF;border-radius:9px;font-size:.9rem;color:#8A3232}
.msg-ko a{color:#8A3232;text-decoration:underline}
form [type="submit"]:disabled{opacity:.6;cursor:wait}
.infos{margin-top:22px}
.ligne-info{display:flex;gap:16px;margin-bottom:22px;align-items:flex-start}
.ic-rond{flex:none;width:42px;height:42px;border-radius:50%;background:var(--rose-pale);color:var(--rose);display:flex;align-items:center;justify-content:center;font-family:var(--titre);font-weight:600}
/* Icone dessinee plutot qu'une lettre : elle herite de la couleur rose
   de la pastille et reste nette a toutes les tailles d'ecran. */
.ic-rond svg{width:20px;height:20px;display:block}
.gros-tel{font-size:1.35rem;font-weight:600;color:var(--rose)}


/* Tableau des horaires d'ouverture */
.titre-horaires{margin-top:30px;margin-bottom:12px}
.horaires{width:100%;border-collapse:collapse;font-size:.95rem;max-width:380px}
.horaires td{padding:9px 0;border-bottom:1px solid var(--ligne)}
.horaires td:last-child{text-align:right;font-weight:500;color:var(--rose-fonce)}
.horaires tr:last-child td{border-bottom:0}
.horaires tr.ferme td{color:var(--gris)}
.horaires tr.ferme td:last-child{font-weight:400;color:var(--gris)}

/* ---------- Boutons ---------- */
.btn{display:inline-block;padding:14px 30px;border-radius:100px;font-family:var(--titre);font-weight:500;font-size:.95rem;transition:.25s;border:1.5px solid transparent;cursor:pointer}
.btn-plein{background:var(--rose);color:var(--blanc)}
.btn-plein:hover{background:var(--rose-fonce)}
.btn-ligne{border-color:var(--blanc);color:var(--blanc)}
.btn-ligne:hover{background:var(--blanc);color:var(--rose-fonce)}
.btn-clair{background:var(--blanc);color:var(--rose-fonce);margin-top:8px}
.btn-clair:hover{background:var(--rose-pale)}
.btn.large{width:100%}

/* ---------- Bande CTA ---------- */
/* La bande descend du rose vif vers le rose profond, pour rejoindre
   le pied de page sans rupture brutale. */
.bande-cta{background:linear-gradient(175deg,var(--rose) 0%,var(--rose-fonce) 100%);
  color:var(--blanc);text-align:center;padding:clamp(46px,7vh,72px) 0}
.bande-cta h2{color:var(--blanc);margin-bottom:10px}
.bande-cta p{color:#FBD6EC;margin-bottom:26px}
.cta-duo{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.bande-cta .btn-plein{background:var(--blanc);color:var(--rose-fonce)}
.bande-cta .btn-plein:hover{background:var(--rose-pale)}

/* ---------- Pied ---------- */
.pied{background:#1C0F17;color:#C8BCC4;padding:clamp(44px,6vh,64px) 0 26px;font-size:.93rem}
.pied-logo{height:68px;width:auto;display:block;margin-bottom:4px}
.pied-grille{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.pied h3{color:var(--blanc);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.pied a:hover{color:#F7A8D6}
.pied p{margin-top:10px}
.pied-bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem;color:#9C8E97}

/* ---------- Mobile ---------- */
/* La baseline s'efface des que le menu a besoin de la place.
   Le logo porte deja le nom, on ne perd aucune information. */
@media(max-width:1080px){ .menu{gap:14px} .menu a{font-size:.83rem} .tel-entete{padding:10px 15px;font-size:.85rem} }

@media(max-width:980px){
  .trio,.etapes,.avis-grille{grid-template-columns:1fr}
  .duo-cartes,.zone,/* Formulaire seul, sans colonne de texte a cote : on le centre. */
.form-seul{max-width:640px;margin:0 auto}
.grille-form{grid-template-columns:1fr}
  .pied-grille{grid-template-columns:1fr 1fr}
}
@media(max-width:940px){
  /* Le panneau du menu est un enfant de .entete et se place en position:fixed.
     Or un ancetre portant backdrop-filter devient le referentiel des elements
     fixes : le panneau se calait sur la hauteur de l'en-tete au lieu de l'ecran,
     et les liens debordaient par-dessus la page (constate sur iPhone).
     On retire donc le flou sur mobile ; le fond de l'en-tete est deja opaque a 94%. */
  .entete{backdrop-filter:none;-webkit-backdrop-filter:none}
  .burger{display:flex}
  .marque-logo{height:50px}
  .tel-entete{padding:9px 15px;font-size:.85rem}
  .menu{position:fixed;top:0;right:0;bottom:0;height:100%;width:66%;max-width:252px;
    overflow-y:auto;background:var(--blanc);flex-direction:column;
    justify-content:flex-start;align-items:stretch;gap:2px;
    transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.3,1);
    box-shadow:-20px 0 60px -30px rgba(0,0,0,.4);padding:72px 24px 28px;z-index:110}
  .menu-check:checked~.menu{transform:translateX(0)}
  .menu a{font-size:1rem;padding:13px 4px;border-bottom:1px solid var(--ligne);
    white-space:normal}
  .menu a:last-of-type{border-bottom:none}
  /* Le trait dore de la page courante ne convient plus en liste : on marque
     la page active par la couleur et un filet a gauche. */
  /* Page en cours dans le tiroir : rose simple, sans filet dore. */
  .menu a.actif{border-bottom-color:var(--ligne)}
  .fermer-menu{display:flex;align-items:center;justify-content:center;
    position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;
    background:var(--rose-pale);color:var(--rose-fonce);font-size:1.6rem;line-height:0;
    cursor:pointer;-webkit-tap-highlight-color:transparent}
  .fermer-menu:active{background:#F8D7EC}
  .duo-champs{grid-template-columns:1fr}
  .pied-grille{grid-template-columns:1fr}
  .carte-map iframe{height:260px}
}