/* ============================================================
   DOMICILIATION MARNE-LA-VALLÉE — Bussy-Saint-Georges
   Palette relevee sur le logo : bleu #2A628C.
   Pour changer l'identite, seules les variables ci-dessous comptent.
   ============================================================ */
:root{
  --bleu:#2A628C;
  --bleu-fonce:#1B4463;
  --bleu-clair:#EAF1F7; --bleu-doux:#5B89A8; --bleu-haut:#F3F7FB;
  --bleu-pale:#F5F9FC;
  --accent:#C8873A;
  --encre:#16212B;
  --gris:#5E6E7C;
  --ligne:#DCE6EE;
  --fond:#FCFDFE;
  --blanc:#fff;
  --titre:"Manrope",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --texte:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --rayon:12px;
  --ombre:0 16px 40px -26px rgba(27,68,99,.42);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* La page ne glisse jamais sur les cotes : on ne fait defiler que de haut en bas.
   « hidden » sur html fige la fenetre ; « clip » sur body coupe tout ce qui depasserait
   sans casser l'en-tete collant (il ne cree pas de zone de defilement). */
html{overflow-x:hidden;overscroll-behavior-x:none}
body{overflow-x:clip;overscroll-behavior-x:none;max-width:100%;touch-action:pan-y pinch-zoom}
body{font-family:var(--texte);color:var(--encre);background:var(--fond);line-height:1.72;font-size:16.5px;-webkit-font-smoothing:antialiased}
img,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--titre);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--bleu-fonce)}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.etroit{max-width:760px}
.centre{text-align:center}
.note{font-size:.88rem;color:var(--gris)}
.saut{position:absolute;left:-9999px}
.saut:focus{left:12px;top:12px;background:var(--blanc);padding:12px 20px;z-index:200;border-radius:100px}

/* ---------- En-tête ---------- */
.menu-check{position:absolute;opacity:0;width:1px;height:1px}
/* Aucun trait de separation : les fonds suffisent a delimiter.
   En haut de page, la barre reprend exactement la teinte du bandeau qui la
   suit, donc aucune marche de couleur. Des que la page defile, elle passe au
   blanc pour se detacher du contenu, avec une ombre tres legere.
   Plus de backdrop-filter : le fond est desormais opaque, et cette propriete
   faisait de l'en-tete le referentiel du tiroir de menu, ce qui le cassait
   sur telephone. Sans JavaScript la barre reste bleu tres clair : lisible,
   simplement sans le passage au blanc. */
.entete{position:sticky;top:0;z-index:100;background:var(--bleu-haut);
  transition:background .25s ease,box-shadow .25s ease}
.entete.defile{background:var(--blanc);box-shadow:0 6px 22px -18px rgba(22,33,43,.55)}
/* Le raccourci « padding:11px 0 » remettait la marge horizontale a zero
   et annulait celle de .wrap : le logo se collait au bord gauche de l'ecran
   et le bouton depassait a droite. On reprend la meme marge que le reste
   du site. */
.entete-in{display:flex;align-items:center;gap:24px;padding:11px clamp(18px,4vw,40px)}
.marque{margin-right:auto;flex:none}
.marque-logo{height:54px;width:auto}
.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 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(--bleu);font-weight:700}
/* Page en cours : bleu, sans gras et sans trait. */
.menu a.actif{color:var(--bleu)}
.btn-entete{background:var(--bleu);color:var(--blanc);padding:11px 22px;border-radius:100px;font-family:var(--titre);font-weight:600;font-size:.88rem;white-space:nowrap;transition:.25s}
.btn-entete:hover{background:var(--bleu-fonce)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--encre);transition:.3s}

/* ---------- Hero ---------- */
/* Le haut de page part du meme bleu tres clair que la barre au-dessus,
   et s'eclaircit vers le fond de page. */
.hero-grand,.hero-court{background:linear-gradient(168deg,var(--bleu-haut),var(--fond) 72%)}
.hero-grand .wrap{padding:clamp(56px,8vh,92px) clamp(18px,4vw,40px) clamp(48px,7vh,80px);max-width:920px}
.hero-court .wrap{padding:clamp(38px,6vh,64px) clamp(18px,4vw,40px) clamp(32px,5vh,54px);max-width:920px}
/* Un filet court plutot qu'un label en capitales espacees. */
.surtitre{display:block;font-size:.82rem;letter-spacing:.01em;text-transform:none;
  color:var(--bleu);font-weight:600;margin-bottom:12px;padding-left:34px;position:relative}
.surtitre::before{content:"";position:absolute;left:0;top:.62em;width:24px;height:2px;background:var(--bleu)}
.surtitre.clair::before{background:#9CC6E4}
.surtitre.clair{color:#9CC6E4}
h1{font-size:clamp(2rem,4.6vw,3.25rem);margin-bottom:18px}
.chapo{font-size:clamp(1.02rem,1.6vw,1.16rem);color:var(--gris);max-width:660px}
.cta-duo{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---------- Sections ---------- */
.sec{padding:clamp(52px,8vh,88px) 0}
/* Les sections ne font pas toutes la meme hauteur : celles sur fond
   colore sont plus amples, ce qui donne une respiration irreguliere. */
.sec.fond-clair,.sec.fond-sombre{padding:clamp(66px,10vh,116px) 0}
.fond-clair{background:var(--bleu-pale)}
.fond-sombre{background:var(--bleu-fonce);color:#DCEAF4}
.fond-sombre h2{color:var(--blanc)}
/* ---- moins de symetrie, plus de parti pris ------------------------
   Un en-tete de section centre dans une colonne etroite, surmonte d'un
   petit label en capitales, c'est la mise en page par defaut de tous les
   gabarits. On aligne a gauche et on decale le texte d'introduction sur
   la droite, a hauteur de la ligne de base du titre : la page respire
   differemment a chaque section au lieu de se repeter. */
.tete{display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(18px,3.5vw,56px);align-items:end;
  text-align:left;max-width:none;margin:0 0 clamp(34px,5vh,56px)}
.tete .surtitre{grid-column:1;grid-row:1}
.tete h2{grid-column:1;grid-row:2;font-size:clamp(1.75rem,3.6vw,2.7rem)}
.tete p{grid-column:2;grid-row:2;margin:0 0 .45em;max-width:46ch}
@media(max-width:820px){
  .tete{grid-template-columns:1fr;gap:0;align-items:start}
  .tete .surtitre,.tete h2,.tete p{grid-column:1}
  .tete .surtitre{grid-row:1} .tete h2{grid-row:2} .tete p{grid-row:3;margin:14px 0 0}
}
.tete p{color:var(--gris);margin-top:12px}
h2{font-size:clamp(1.45rem,2.6vw,2rem);margin-bottom:14px}
h3{font-size:1.12rem;margin-bottom:8px}
p+h2,ul+h2,.encart+h2{margin-top:38px}
p+p{margin-top:14px}

/* ---------- Trio d'avantages ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* Colonnes posees a plat, separees par un filet en tete : on sort du
   triptyque de cartes blanches ombrees qu'on voit partout. */
.trio article{background:none;border:0;border-top:2px solid var(--bleu);border-radius:0;
  padding:26px 0 0;box-shadow:none}
/* Le chiffre reste secondaire face au titre, mais il doit se lire :
   en bleu tres clair il tombait a 1,12:1 de contraste, invisible. */
.trio .ic{display:block;width:auto;height:auto;border-radius:0;background:none;
  color:var(--bleu-doux);font-family:var(--titre);font-size:2.9rem;font-weight:700;
  line-height:1;margin-bottom:10px;letter-spacing:-.04em}
.trio h2{font-size:1.12rem;margin-bottom:8px}
.trio p{font-size:.95rem;color:var(--gris)}

/* ---------- Duo de blocs ---------- */
/* Les deux colonnes n'ont pas la meme longueur de texte : sans cela le lien
   suit la fin du dernier paragraphe et tombe a deux hauteurs differentes.
   On etire les colonnes a la meme hauteur et on colle le lien en bas. */
.duo-bloc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:stretch}
.duo-bloc > div{display:flex;flex-direction:column}
.duo-bloc .lien-fleche{margin-top:auto;padding-top:16px;align-self:flex-start}
.lien-fleche{display:inline-block;margin-top:14px;color:var(--bleu);font-weight:600;font-size:.93rem;font-family:var(--titre)}
.lien-fleche::after{content:" →";transition:.25s;display:inline-block}
.lien-fleche:hover::after{transform:translateX(4px)}

/* ---------- Tarifs ---------- */
/* align-items par defaut (stretch) : les cartes prennent toutes la hauteur
   de la plus haute. La liste s'etire pour pousser le bouton en bas. */
.tarifs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tarifs.duo{grid-template-columns:repeat(2,1fr);max-width:840px;margin:0 auto}
.tarif{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:32px 26px;position:relative;
  display:flex;flex-direction:column}
.tarif.vedette{border-color:var(--bleu);border-width:2px;box-shadow:var(--ombre)}
.badge{position:absolute;top:-12px;left:26px;background:var(--bleu);color:var(--blanc);font-family:var(--titre);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:100px}
/* « Le plus choisi » : centré sur le haut de la carte */
.tarif > .badge-centre{left:50%;transform:translateX(-50%);white-space:nowrap}
.badge-gris{background:var(--gris)}
.badge-accent{background:var(--accent)}
.tarif h3{margin-bottom:6px}
/* L'image du forfait, reprise de l'ancien site, au-dessus de son nom */
.tarif-img{width:84px;height:84px;margin:0 0 16px}
.prix{font-family:var(--titre);font-size:2.3rem;font-weight:700;color:var(--bleu);line-height:1.1;margin-bottom:6px}
.prix span{display:block;font-size:.78rem;font-weight:500;color:var(--gris);letter-spacing:.04em}
.tarif-pour{font-size:.9rem;color:var(--gris);font-style:italic;margin:12px 0 4px}
.tarif .liste-check{margin:16px 0 22px;flex:1}
.tarif .btn{width:100%;text-align:center}

/* ---------- Listes ---------- */
.liste-check{list-style:none}
.liste-check li{position:relative;padding-left:26px;margin-bottom:10px;font-size:.96rem}
.liste-check li::before{content:"";position:absolute;left:0;top:.55em;width:13px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.fond-sombre .liste-check li::before{border-color:#9CC6E4}

/* ---------- Étapes numérotées ---------- */
.etapes-num{list-style:none;counter-reset:e;margin-top:24px}
.etapes-num li{display:flex;gap:20px;margin-bottom:26px;align-items:flex-start}
.etapes-num .num{flex:none;width:38px;height:38px;border-radius:50%;background:var(--bleu);color:var(--blanc);display:flex;align-items:center;justify-content:center;font-family:var(--titre);font-weight:700}
.etapes-num p{color:var(--gris);font-size:.96rem}

/* ---------- Encarts ---------- */
.encart{background:var(--bleu-clair);border-left:3px solid var(--bleu);border-radius:0 var(--rayon) var(--rayon) 0;padding:24px 26px;margin:26px 0}
.encart h3{margin-bottom:6px}
.encart p{font-size:.96rem}

/* ---------- Zone / carte ---------- */
.zone{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,54px);align-items:center}
.zone p{color:#C3DAEA;margin-bottom:12px}
.zone strong{color:var(--blanc)}
.carte-map{border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre);background:var(--bleu-clair)}
.carte-map iframe{width:100%;height:340px;border:0}
.carte-map.grande iframe{height:460px}

/* ---------- Infos ---------- */
.infos{margin-top:24px}
.ligne-info{display:flex;gap:16px;margin-bottom:20px;align-items:flex-start}
.ic-rond{flex:none;width:40px;height:40px;border-radius:10px;background:var(--bleu-clair);color:var(--bleu);display:flex;align-items:center;justify-content:center;font-family:var(--titre);font-weight:700}
/* Icone dessinee plutot qu'une lettre : elle herite du bleu de la
   pastille et reste nette a toutes les tailles d'ecran. */
.ic-rond svg{width:20px;height:20px;display:block}
.ligne-info p{font-size:.95rem;color:var(--gris)}

/* ---------- Formulaire ---------- */
.grille-form{display:grid;grid-template-columns:1fr 1.1fr;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)}
.formulaire label{display:block;margin-bottom:16px;font-size:.88rem;font-weight:600;color:var(--bleu-fonce);font-family:var(--titre)}
.fac{font-weight:400;color:var(--gris);font-size:.82rem}
.formulaire input,.formulaire select,.formulaire textarea{width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--ligne);border-radius:8px;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(--bleu);outline-offset:1px;background:var(--blanc)}
.duo-champs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.msg-ok{margin-top:14px;padding:12px 14px;background:var(--bleu-clair);border-radius:8px;font-size:.9rem;color:var(--bleu-fonce)}

/* ---------- Boutons ---------- */
.btn{display:inline-block;padding:13px 30px;border-radius:100px;font-family:var(--titre);font-weight:600;font-size:.93rem;transition:.25s;border:1.5px solid transparent;cursor:pointer}
.btn-plein{background:var(--bleu);color:var(--blanc)}
.btn-plein:hover{background:var(--bleu-fonce)}
.btn-ligne{border-color:var(--bleu);color:var(--bleu)}
.btn-ligne:hover{background:var(--bleu);color:var(--blanc)}
.btn-clair{background:var(--blanc);color:var(--bleu-fonce)}
.btn-clair:hover{background:var(--bleu-clair)}
.btn-danger{background:var(--blanc);color:#B42318;border-color:#B42318}
.btn-danger:hover{background:#B42318;color:var(--blanc)}
.btn.large{width:100%}
/* La mention legale qui suit les formules doit respirer, qu'elle porte
   la classe « centre » ou non. */
.tarifs+.centre,.trio+.centre,.duo-bloc+.centre,
.tarifs+.note,.tarifs+p{margin-top:clamp(34px,4.5vh,52px)}

/* ---------- Bande CTA ---------- */
/* L'appel a l'action etait en bleu moyen, coince entre une section bleu
   fonce et un pied presque noir : la bande du milieu ressortait plus claire
   que ses voisines, ce qui donnait trois tons empiles sans logique.
   En reprenant le bleu fonce, elle se fond avec la section qui la precede
   et le bas de page ne fait plus qu'un assombrissement progressif. */
.bande-cta{background:var(--bleu-fonce);color:var(--blanc);text-align:center;padding:clamp(44px,7vh,70px) 0}
/* Sur la page d'accueil la section precedente porte deja ce bleu :
   on efface la coupure pour qu'elles ne forment qu'un seul bloc. */
.fond-sombre+.bande-cta{padding-top:0}
.bande-cta h2{color:var(--blanc);margin-bottom:10px}
.bande-cta p{color:#CFE3F1;margin-bottom:24px}

/* ---------- Pied ---------- */
/* Le pied demarre exactement sur le bleu de la bande d'appel a l'action,
   donc aucune cassure a la jonction, puis s'assombrit progressivement vers
   le bas : on distingue le pied sans jamais voir de marche de couleur. */
.pied{background:linear-gradient(180deg,var(--bleu-fonce) 0%,var(--encre) 100%);
  color:#BCCEDC;padding:clamp(44px,6vh,64px) 0 24px;font-size:.93rem}
.pied-logo{height:58px;width:auto;background:var(--blanc);padding:8px 10px;border-radius:8px;margin-bottom:14px}
.pied-grille{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.pied h3{color:var(--blanc);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;font-family:var(--titre)}
.pied a:hover{color:#9CC6E4}
.pied p{margin-top:8px}
.pied-bas{margin-top:34px;padding-top:20px;font-size:.85rem;color:#9BB1C4}

/* ---------- Mobile ---------- */
/* ==== Mouvement et relief ===========================================
   Tout est conditionne a la classe « anim » posee par anim.js : sans
   JavaScript, ou avec « reduire les animations » actif, rien ne bouge
   et rien ne disparait. Le contenu reste visible par defaut. */

/* Apparition au defilement : 18 px et une demi-seconde, pas plus. */
/* 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 ne faisait plus rien. */
html.anim .apparait{opacity:0;translate:0 18px;
  transition:opacity .6s ease-out,translate .6s cubic-bezier(.2,.7,.3,1)}
html.anim .apparait.vu{opacity:1;translate:none}
html.anim .apparait[data-retard="1"]{transition-delay:.1s}
html.anim .apparait[data-retard="2"]{transition-delay:.2s}
html.anim .apparait[data-retard="3"]{transition-delay:.3s}

/* Le haut de page s'anime des l'ouverture, sans attendre le defilement. */
html.anim .hero-grand .surtitre,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(16px);
  animation:entree .7s cubic-bezier(.2,.7,.3,1) forwards}
html.anim .hero-grand h1{animation-delay:.08s}
html.anim .hero-grand .chapo,html.anim .hero-court .chapo{animation-delay:.16s}
html.anim .hero-grand .cta-duo{animation-delay:.26s}
@keyframes entree{to{opacity:1;transform:none}}

/* Relief au survol : les cartes se soulevent, jamais plus de 5 px. */
.tarif,.encart,.ligne-info,.carte-map{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
@media(hover:hover){
  .tarif:hover{transform:translateY(-5px);box-shadow:0 22px 46px -30px rgba(27,68,99,.55)}
  .encart:hover{transform:translateY(-3px)}
  /* La pastille de l'icone reagit avec sa ligne. */
  .ligne-info:hover .ic-rond{transform:scale(1.08);background:var(--bleu);color:var(--blanc)}
  .btn:hover{transform:translateY(-2px)}
  .btn-entete:hover{transform:translateY(-1px)}
}
.ic-rond{transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s,color .3s}

/* La formule mise en avant respire : un halo tres doux, en permanence. */
.tarif.vedette{box-shadow:0 20px 50px -32px rgba(27,68,99,.6)}

/* Les liens du pied et du contenu glissent legerement au survol. */
.pied a,.lien-fleche{transition:color .25s,transform .25s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---- Sous-menu « Nos services » ------------------------------------
   Sur ordinateur : un panneau qui s'ouvre au survol et a la tabulation.
   Sur telephone : les deux entrees sont simplement affichees en retrait
   sous leur parent, sans rien a deplier — un tiroir avec des niveaux
   repliables serait penible au doigt pour deux liens. */
.menu-parent{position:relative}
/* Le chevron est sorti du flux du texte et sa place reservee par un retrait
   a droite. Dans le flux, il s'ajoutait a la largeur du mot passe en gras
   au survol, ce qui decalait tout le menu d'un pixel. */
/* « display:block » est indispensable : les autres entrees du menu sont des
   elements de la grille flexible, donc deja en bloc, et la copie fantoue qui
   reserve la largeur du gras agit sur elles. Celle-ci est imbriquee dans un
   conteneur, elle restait en ligne et la copie n'avait aucun effet : le lien
   s'elargissait d'un pixel au survol et poussait ses voisins. */
.menu-parent > a{display:block;position:relative;padding-right:15px}
.menu-parent > a::after{content:"";position:absolute;right:0;top:calc(50% - 4px);
  width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);
  transition:transform .25s}
.menu-parent:hover > a::after,
.menu-parent:focus-within > a::after{transform:rotate(225deg)}
.sous-menu{position:absolute;top:100%;left:-14px;min-width:230px;
  background:var(--blanc);border-radius:14px;padding:8px;
  box-shadow:0 20px 44px -26px rgba(22,33,43,.45);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s ease,visibility 0s .22s;z-index:120}
.menu-parent:hover .sous-menu,
.menu-parent:focus-within .sous-menu{opacity:1;visibility:visible;transform:none;
  transition:opacity .22s ease,transform .22s ease,visibility 0s}
.sous-menu a{display:block;padding:10px 14px;border-radius:9px;font-size:.88rem;
  white-space:nowrap;transition:background .2s,color .2s}
.sous-menu a::before{display:none}
.sous-menu a:hover{background:var(--bleu-haut);color:var(--bleu);font-weight:600}

/* Chiffre de reference : discret, avec un point colore en amorce.
   Il appuie le discours sans prendre la place d'un argument. */
.preuve{margin:22px 0 0;font-size:.93rem;color:var(--gris);
  display:flex;align-items:center;gap:9px}
.preuve::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--bleu);box-shadow:0 0 0 4px rgba(42,98,140,.14)}
.preuve strong{color:var(--bleu-fonce);font-family:var(--titre);font-weight:700}
.hero-court .preuve{margin-top:18px}

/* ---- Frise « comment ca se passe » ---------------------------------
   Etapes empilees le long d'un filet vertical, numerotees par le
   compteur CSS : l'ordre affiche suit toujours l'ordre du document,
   meme si on ajoute ou deplace une etape plus tard. */
.frise{list-style:none;counter-reset:etape;margin:0;padding:0;
  max-width:780px;position:relative}
.frise::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;
  width:2px;background:linear-gradient(180deg,var(--bleu) 0%,var(--bleu-clair) 100%)}
.frise > li{counter-increment:etape;position:relative;
  padding:0 0 34px 62px}
.frise > li:last-child{padding-bottom:0}
.frise > li::before{content:counter(etape);position:absolute;left:0;top:-2px;
  width:40px;height:40px;border-radius:50%;
  background:var(--blanc);border:2px solid var(--bleu);color:var(--bleu);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--titre);font-weight:700;font-size:1rem}
.frise h3{font-size:1.12rem;margin-bottom:6px}
.frise p{color:var(--gris);margin:0}
.frise .lien-fleche{margin-top:0;margin-left:4px;display:inline}
@media(max-width:620px){
  .frise::before{left:15px}
  .frise > li{padding:0 0 28px 48px}
  .frise > li::before{width:32px;height:32px;font-size:.9rem}
}

@media(max-width:1000px){
  .trio,.tarifs{grid-template-columns:1fr}
  .tarifs.duo{grid-template-columns:1fr}
  .duo-bloc,.zone,.grille-form{grid-template-columns:1fr}
  .pied-grille{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  /* Le tiroir 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 tiroir se calait sur la hauteur de l'en-tete au lieu de l'ecran,
     et son panneau gare hors champ etirait la page de 300 px vers la droite.
     On retire donc le flou sur mobile ; le fond est deja opaque a 95%. */
  .entete{backdrop-filter:none;-webkit-backdrop-filter:none}
  .burger{display:flex}
  .marque-logo{height:46px}
  .btn-entete{padding:9px 15px;font-size:.83rem}
  .menu{position:fixed;top:0;right:0;bottom:0;height:100%;width:78%;max-width:300px;
    overflow-y:auto;background:var(--blanc);flex-direction:column;
    justify-content:center;gap:22px;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.3,1);
    box-shadow:none;padding:40px;z-index:110}
  /* L'ombre n'existe que tiroir ouvert : ferme, il est range juste a droite de l'ecran
     et son ombre dessinait une bande grise sur le bord droit de la page. */
  .menu-check:checked~.entete .menu{transform:translateX(0);box-shadow:-20px 0 60px -30px rgba(0,0,0,.4)}
  .menu a{font-size:1.05rem}
  /* Tiroir : plus de panneau flottant, les sous-entrees s'affichent en retrait. */
  .menu-parent{position:static;display:contents}
  .menu-parent > a::after{display:none}
  .sous-menu{position:static;opacity:1;visibility:visible;transform:none;
    background:none;box-shadow:none;padding:0;min-width:0;transition:none}
  .sous-menu a{padding:9px 0 9px 18px;border-radius:0;font-size:.95rem;
    color:var(--gris);white-space:normal}
  .duo-champs{grid-template-columns:1fr}
  .pied-grille{grid-template-columns:1fr}
  .carte-map iframe,.carte-map.grande iframe{height:280px}
}
/* ---------- Formulaire de souscription ---------- */
.souscription fieldset{border:1px solid var(--ligne);border-radius:var(--rayon);padding:22px 24px 6px;margin:0 0 26px;background:var(--blanc)}
.souscription legend{padding:0 10px;font-family:var(--titre);font-weight:700;font-size:1.02rem;color:var(--bleu-fonce)}
.souscription .intitule{margin:18px 0 10px;font-family:var(--titre);font-weight:600;font-size:.88rem;color:var(--bleu-fonce)}
.choix-ligne{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:6px}
.choix{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border:1px solid var(--ligne);
  border-radius:100px;cursor:pointer;font-size:.92rem;font-weight:500;color:var(--encre);background:var(--fond);transition:.2s}
.choix input{width:auto;margin:0;accent-color:var(--bleu)}
.choix:has(input:checked){border-color:var(--bleu);background:var(--bleu-clair);color:var(--bleu-fonce)}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px}
.choix-pack{display:flex;align-items:flex-start;gap:10px;padding:16px;border:1px solid var(--ligne);
  border-radius:var(--rayon);cursor:pointer;background:var(--fond);transition:.2s;font-weight:400}
.choix-pack:has(input:checked){border-color:var(--bleu);background:var(--bleu-clair)}
.choix-pack input{width:auto;margin:3px 0 0;flex:none;accent-color:var(--bleu)}
.choix-pack strong{display:block;font-family:var(--titre);color:var(--bleu-fonce);font-size:.97rem}
.choix-pack em{display:block;font-style:normal;color:var(--bleu);font-weight:600;font-size:.9rem;margin:2px 0 6px}
.choix-pack span{font-size:.85rem;color:var(--gris);line-height:1.5}
/* L'image du forfait, la meme que sur la page Tarifs */
.choix-pack .pack-img{width:64px;height:64px;margin:2px 0 10px}
.habilitee{padding-top:4px}
.habilitee+.habilitee{margin-top:10px;padding-top:16px;border-top:1px solid var(--ligne)}
@media(max-width:760px){.packs{grid-template-columns:1fr}}

/* La page de souscription enchaine directement sur le formulaire. */
.sec.form-suite{padding-top:clamp(18px,2vh,26px)}
/* ============================================================
   Espaces connectes : maquettes
   Ces styles servent aux ecrans de connexion, a l'espace client
   et a l'espace de la dirigeante.
   ============================================================ */
.appli{padding:clamp(26px,4vh,44px) 0 clamp(40px,6vh,70px)}
.appli-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.appli-tete h1{font-size:clamp(1.5rem,3vw,2.1rem);margin:0}
.appli-tete p{color:var(--gris);margin:4px 0 0;font-size:.95rem}
.cartes-appli{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:26px}
.carte-appli{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:20px 22px}
.carte-appli h2,.carte-appli h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;color:var(--gris);margin:0 0 8px;font-weight:700}
.carte-appli .chiffre{font-family:var(--titre);font-size:2rem;font-weight:700;color:var(--bleu-fonce);line-height:1}
.carte-appli .detail{color:var(--gris);font-size:.88rem;margin-top:6px}
.bloc-appli{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:22px 24px;margin-bottom:20px}
.bloc-appli > h2{font-size:1.05rem;color:var(--bleu-fonce);margin:0 0 14px}
.tableau-appli{width:100%;border-collapse:collapse;font-size:.92rem}
.tableau-appli th{text-align:left;padding:9px 10px;background:var(--bleu-clair);color:var(--bleu-fonce);
  font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}
.tableau-appli td{padding:11px 10px;border-bottom:1px solid var(--ligne);vertical-align:middle}
.tableau-appli tr:last-child td{border-bottom:none}
.tableau-appli a{color:var(--bleu);font-weight:600}
.badge{display:inline-block;padding:3px 10px;border-radius:100px;font-size:.76rem;font-weight:700;white-space:nowrap}
.badge-ok{background:#E4F3EA;color:#1B7F4B}
.badge-attente{background:#FDF0E0;color:#A35B00}
.badge-alerte{background:#FBE9E7;color:#B42318}
.badge-info{background:var(--bleu-clair);color:var(--bleu-fonce)}
.badge-neutre{background:#EAECEF;color:#5E6E7C}
.etapes-suivi{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.etapes-suivi li{display:flex;gap:14px;align-items:flex-start;padding:13px 16px;border:1px solid var(--ligne);
  border-radius:10px;background:var(--fond)}
.etapes-suivi .puce{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.8rem;font-weight:700;background:var(--bleu-clair);color:var(--bleu-fonce)}
.etapes-suivi li.faite .puce{background:#1B7F4B;color:#fff}
.etapes-suivi li.encours{border-color:var(--bleu);background:var(--bleu-clair)}
.etapes-suivi strong{display:block;font-family:var(--titre);color:var(--bleu-fonce);font-size:.97rem}
.etapes-suivi span{font-size:.88rem;color:var(--gris)}
.actions-fiche{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.btn-petit{padding:10px 18px;font-size:.88rem}
.connexion{max-width:420px;margin:0 auto}
.connexion .formulaire{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:26px 26px 22px}
@media(max-width:700px){.tableau-appli{font-size:.85rem}.tableau-appli th,.tableau-appli td{padding:8px 7px}}
.attente-forme{color:var(--gris);font-size:.88rem;font-style:italic}
.note-micro{margin:10px 0 0;padding:11px 14px;background:var(--bleu-clair);border-radius:8px;
  font-size:.88rem;color:var(--bleu-fonce);font-weight:600}
/* Un element marque « hidden » doit rester cache, meme si une regle
   d'affichage plus specifique lui donne un display. */
[hidden]{display:none !important}
/* Souscription fermée sur le vrai domaine (anim.js) : liens masqués avant l'affichage */
.souscription-fermee .menu a[href^="souscrire.html"],.souscription-fermee .pied a[href^="souscrire.html"],
.souscription-fermee a[href^="souscrire.html?pour=dirigeante"]{display:none !important}
.depot{margin:12px 0 0;padding:11px 14px;background:var(--bleu-clair);border-radius:8px;
  font-size:.9rem;color:var(--bleu-fonce)}

/* ---------- Souscription : etapes apres le formulaire ---------- */
.etape{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:26px 26px 20px}
.etape h2{font-size:1.35rem;margin:2px 0 10px}
.etape > p{margin-bottom:14px}
.etape-num{font-family:var(--titre);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bleu);margin-bottom:0 !important}
.depot-contrat{margin-top:8px}
.depot-contrat input[type=file]{background:var(--bleu-pale);cursor:pointer}
.depot-contrat .note{margin:-4px 0 18px}
.msg-ko{margin-top:14px;padding:12px 14px;background:#FBE9E7;border-radius:8px;font-size:.9rem;color:#B42318}
.msg-ko a{color:inherit;font-weight:700;text-decoration:underline}
/* Formulaire de contact : piège à robots invisible, champs à revoir en rouge */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire .invalide{border-color:#B42318;background:#FDF6F5}
.formulaire .msg-champs{margin:0 0 16px}
.msg-ko ul{margin:6px 0 0 18px}
.etape-paiement .msg-ok{margin:0 0 18px}
.recap{list-style:none;padding:0;margin:0 0 20px;border:1px solid var(--ligne);border-radius:10px}
.recap li{display:flex;justify-content:space-between;gap:16px;padding:11px 16px;font-size:.93rem}
.recap li+li{border-top:1px solid var(--ligne)}
.recap span{color:var(--gris)}
.recap strong{color:var(--bleu-fonce);text-align:right}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.retour-form{margin:14px 0 0 !important;text-align:center}
.lien-bouton{background:none;border:0;padding:0;color:var(--bleu);font:600 .88rem var(--titre);text-decoration:underline;cursor:pointer}
.etape,.souscription{scroll-margin-top:110px}
.date-imposee{margin:0 0 16px;padding:12px 14px;border:1px solid var(--ligne);border-radius:8px;background:var(--bleu-pale);font-size:.95rem;color:var(--gris)}
.date-imposee strong{color:var(--encre)}
.duo-champs:has(> .si-societe[hidden]){grid-template-columns:1fr}
.aide-test{margin:10px 0 0 !important;padding:10px 14px;background:#FDF0E0;border-radius:8px;font-size:.86rem;color:#8A4B00}
.etape-paiement .msg-ko{margin-top:12px}
.actions-confirmation{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.legal h2{font-size:1.2rem;margin:30px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p{margin-bottom:12px}
.legal a{color:var(--bleu)}
.insecable{white-space:nowrap}

/* ---------- Plan d'acces en attente d'accord ----------
   L'encadre occupe exactement la place que prendra le plan :
   au clic, l'un remplace l'autre sans que la page ne bouge. */
.carte-attente{min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:30px 24px;text-align:center;background:var(--bleu-clair)}
.carte-map.grande .carte-attente{min-height:460px}
.carte-adr{margin:0;color:var(--bleu-fonce);line-height:1.5}
.carte-note{margin:0;max-width:380px;font-size:.82rem;color:var(--gris);line-height:1.5}
@media(max-width:700px){.carte-attente,.carte-map.grande .carte-attente{min-height:280px}}

/* ---------- 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;max-height:88vh;overflow-y:auto;
  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:var(--encre)}
.bandeau-txt a{color:var(--bleu);text-decoration:underline}
.bandeau-btns{display:flex;gap:11px;flex:none;align-items:center}
/* Refuser pese autant qu'accepter : meme taille, meme allure de bouton */
.bandeau-btns .btn{padding:11px 24px;font-size:.88rem}
.bandeau-btns .btn-clair{border:1.5px solid var(--bleu);color:var(--bleu-fonce)}
.btn-texte{background:none;border:0;padding:11px 6px;font-family:var(--titre);font-size:.88rem;
  color:var(--bleu-fonce);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.btn-texte:hover{color:var(--bleu)}
/* Detail des choix : un interrupteur par usage, jamais coche d'avance */
.bandeau-choix{flex:1 1 100%;display:grid;gap:10px}
.choix-cookie{display:flex;gap:14px;align-items:flex-start;padding:13px 16px;border-radius:12px;
  background:var(--bleu-haut);cursor:pointer;font-size:.86rem;line-height:1.5;color:var(--gris)}
.choix-cookie strong{display:block;color:var(--encre);font-family:var(--titre);font-weight:600;font-size:.93rem;margin-bottom:2px}
.choix-cookie input{appearance:none;-webkit-appearance:none;flex:none;margin:2px 0 0;width:40px;height:23px;
  border-radius:23px;background:#C9D5DF;position:relative;cursor:pointer;transition:background .2s}
.choix-cookie 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-cookie input:checked{background:var(--bleu)}
.choix-cookie input:checked::before{transform:translateX(17px)}
.choix-cookie input:focus{outline:none}
.choix-cookie input:focus-visible{outline:2px solid var(--bleu);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}
}

/* ---------- Tableau des cookies (mentions legales) ---------- */
.tableau-legal{width:100%;border-collapse:collapse;margin:14px 0 8px;font-size:.92rem}
.tableau-legal th{text-align:left;padding:10px 12px;background:var(--bleu-clair);color:var(--bleu-fonce);
  font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}
.tableau-legal td{padding:11px 12px;border-bottom:1px solid var(--ligne);vertical-align:top}
.tableau-legal tr:last-child td{border-bottom:none}
.tableau-legal td:first-child{width:30%;font-weight:600;color:var(--bleu-fonce)}
.tableau-legal td:last-child{width:1%;white-space:nowrap}
.tableau-legal .fin{display:block;font-weight:400;font-size:.82rem;color:var(--gris)}
@media(max-width:620px){
  .tableau-legal thead{display:none}
  .tableau-legal,.tableau-legal tbody,.tableau-legal tr,.tableau-legal td{display:block;width:100% !important;white-space:normal !important}
  .tableau-legal tr{border-bottom:1px solid var(--ligne);padding:8px 0}
  .tableau-legal td{border:0;padding:4px 0}
}
/* Le plan remplit toute la hauteur de son cadre, meme quand la colonne
   voisine est plus haute : plus de bande vide sous la carte. */
.carte-map{display:flex;flex-direction:column}
.carte-map iframe,.carte-map.grande iframe{flex:1 1 auto;height:auto;min-height:340px}
.carte-map.grande iframe{min-height:460px}
.carte-map .carte-attente{flex:1 1 auto}
@media(max-width:700px){.carte-map iframe,.carte-map.grande iframe{height:auto;min-height:280px}}
.note-forfait{margin:-2px 0 10px;font-size:.9rem;color:var(--gris)}
.note-forfait strong{color:var(--bleu-fonce)}
/* Tableau des horaires d'ouverture (meme presentation que Clair & Net) */
.titre-horaires{margin:28px 0 12px;font-size:1.05rem;color:var(--bleu-fonce)}
.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(--bleu-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)}
/* Pied de page : meme disposition que Clair & Net, un trait avant la ligne du bas */
.pied-bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:36px;border-top:1px solid rgba(255,255,255,.12)}

/* ---------- Souscription remplie par la dirigeante (souscrire.html?pour=dirigeante) ----------
   Meme formulaire que celui du client ; seuls quelques textes et boutons changent. */
[data-pour="dirigeante"]{display:none !important}
.mode-dirigeante [data-pour="dirigeante"]{display:revert !important}
.mode-dirigeante [data-pour="client"]{display:none !important}
.mode-dirigeante [data-pour="dirigeante"][hidden]{display:none !important}
.retour-gestion{margin:0 0 10px;font-size:.9rem}
.retour-gestion a{color:var(--bleu);font-weight:600}
.actions-signature{display:flex;flex-wrap:wrap;gap:10px}
.etape-paiement [data-envoyer-paiement]{margin-bottom:10px}
.lien-paiement{margin:14px 0 4px;padding:14px 16px;background:var(--bleu-clair);border-radius:10px;font-size:.9rem;color:var(--bleu-fonce)}
.lien-paiement p{margin:0 0 8px !important}
.lien-paiement-url{word-break:break-all}
.lien-paiement-url a{color:var(--bleu)}
.bloc-tete{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.bloc-tete h2{margin:0 !important}
/* Notifications de l'espace de gestion */
.notifications{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.notifications li{display:flex;align-items:flex-start;gap:14px;padding:12px 14px;border:1px solid var(--ligne);border-radius:10px;background:var(--fond);font-size:.92rem}
.notifications li.nouvelle{border-color:var(--bleu);background:var(--bleu-pale)}
.notifications li > div{flex:1}
.notifications .detail{display:block;font-size:.82rem;color:var(--gris);margin-top:2px}
.notifications .badge{flex:none;margin-top:2px}
.notifications a{color:var(--bleu);font-weight:600;white-space:nowrap}
@media(max-width:620px){.notifications li{flex-wrap:wrap}}
/* Espace de gestion : les badges d'etat restent dans leur cellule
   (la regle .badge des cartes de tarifs les positionnait hors du tableau) */
.appli .badge{position:static;top:auto;left:auto;letter-spacing:0;text-transform:none;font-family:var(--texte)}
.bloc-tete h2{font-size:1.05rem;color:var(--bleu-fonce)}
/* Recherche et filtres des clients */
.outils-clients{display:grid;gap:12px;margin-bottom:16px}
.recherche-clients{width:100%;padding:12px 14px;border:1px solid var(--ligne);border-radius:8px;font:inherit;font-size:.95rem;background:var(--fond)}
.recherche-clients:focus{outline:2px solid var(--bleu);outline-offset:1px;background:var(--blanc)}
.filtres{display:flex;flex-wrap:wrap;gap:8px}
.filtre{padding:8px 14px;border:1px solid var(--ligne);border-radius:100px;background:var(--fond);font:600 .85rem var(--titre);color:var(--bleu-fonce);cursor:pointer}
.filtre:hover{border-color:var(--bleu)}
.filtre.actif{background:var(--bleu);border-color:var(--bleu);color:var(--blanc)}
.filtre-anomalie{border-color:#F1C6C0;color:#B42318}
.filtre-anomalie.actif{background:#B42318;border-color:#B42318;color:var(--blanc)}
.aucun-client{margin:14px 0 0;color:var(--gris);font-size:.92rem}
.kbis-echeance{margin:0 0 16px;padding:12px 16px;background:var(--bleu-pale);border-left:3px solid var(--bleu);border-radius:8px;font-size:.93rem}
.kbis-echeance p{margin:0}
.kbis-echeance p+p{margin-top:4px}
.kbis-prochain strong{color:var(--bleu-fonce)}
/* Le pack du client, sous son nom (espace client et fiche cote dirigeante) */
.appli-tete .pack-client{display:inline-block;margin:6px 0 4px;padding:4px 12px;border-radius:100px;background:var(--bleu-clair);color:var(--bleu-fonce);font:600 .86rem var(--titre)}
.appli-tete .pack-client:empty{display:none}
.notifications .actions-notif{display:flex;align-items:center;gap:14px;flex:none}
.notifications .actions-notif .btn{color:var(--blanc);padding:8px 16px}
@media(max-width:620px){.notifications .actions-notif{width:100%}}
/* Fiche client : courrier selon le pack */
.bloc-courrier .detail{margin-bottom:12px}
.titre-historique{margin:18px 0 8px;font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;color:var(--gris)}
.historique-avis{list-style:none;padding:0;margin:0}
.historique-avis li{padding:8px 0;border-bottom:1px solid var(--ligne);font-size:.92rem}
.historique-avis li:first-letter{text-transform:uppercase}
.historique-avis li:last-child{border-bottom:0}

/* ============================================================
   Espaces connectes sur telephone
   La dirigeante et les clients utilisent surtout leur telephone :
   les tableaux deviennent des listes, les boutons prennent toute la
   largeur, rien ne depasse de l'ecran.
   ============================================================ */
.actions-danger{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
/* « Nouveau client » rempli par la dirigeante : elle est dans son espace, pas sur le site
   public. Ni menu, ni bande d'appel, ni pied de page ; le logo et le lien de retour suffisent. */
.mode-dirigeante .entete .menu,.mode-dirigeante .entete .burger,.mode-dirigeante .entete .btn-entete,
.mode-dirigeante .bande-cta,.mode-dirigeante .pied{display:none !important}
@media(max-width:700px){
  .mode-dirigeante .hero-court .wrap{padding-top:22px;padding-bottom:4px}
}
.tableau-appli .detail{color:var(--gris);font-size:.86em;font-weight:400}
.appli .detail,.appli-tete h1,.appli-tete p{overflow-wrap:anywhere}
@media(max-width:700px){
  /* Saisie : 16 px au minimum, sinon l'iPhone zoome tout seul sur le champ */
  input,select,textarea{font-size:16px !important}
  .appli{padding:16px 0 44px}
  .appli a,.appli button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .appli .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-align:center}

  /* Tete de page : retour a la liste en premier, titre compact */
  .appli-tete{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:16px}
  .appli-tete > p{order:-1;margin:0}
  .appli-tete > p.deco-page{display:none}
  .appli-tete > p .btn{min-height:40px;padding:8px 16px 8px 12px;border-color:var(--ligne)}
  .appli-tete > p .btn::before{content:"\2039";font-size:1.3em;line-height:1;margin-right:8px}
  .appli-tete h1{font-size:1.45rem}
  .appli-tete .pack-client{border-radius:12px;line-height:1.35;padding:6px 12px}

  /* Chiffres cles : deux par ligne */
  .cartes-appli{grid-template-columns:1fr;gap:10px;margin-bottom:16px}
  .cartes-appli.cartes-chiffres{grid-template-columns:1fr 1fr}
  .carte-appli{padding:14px 16px}
  .cartes-chiffres .carte-appli{padding:13px 13px 12px}
  .cartes-chiffres .carte-appli h2{font-size:.68rem;letter-spacing:.04em;line-height:1.35}
  .cartes-chiffres .chiffre{font-size:1.6rem}
  .cartes-chiffres .detail{font-size:.8rem;line-height:1.45}
  .bloc-appli{padding:16px;margin-bottom:14px}
  .bloc-tete{margin-bottom:12px}

  /* Boutons d'action : pleine largeur, l'un sous l'autre */
  .actions-fiche,.actions-danger,.actions-bloc{display:grid;grid-template-columns:1fr;gap:8px}
  .actions-fiche{margin-bottom:16px}
  .actions-danger{margin-left:0}
  .actions-danger:empty{display:none}
  .actions-bloc{margin:0}
  .actions-bloc .btn-clair{border-color:var(--ligne)}

  /* Notifications : une carte par notification, actions en bas */
  .notifications li{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px}
  .notifications .badge{justify-self:start;margin:0}
  .notifications .actions-notif{width:100%;gap:8px}
  .notifications .actions-notif a{flex:1;display:flex;align-items:center;justify-content:center;min-height:42px;
    padding:8px 12px;border:1.5px solid var(--bleu);border-radius:100px;font-size:.88rem;text-align:center}

  /* Recherche et filtres : les filtres defilent sur une ligne */
  .outils-clients > *{min-width:0}
  .recherche-clients{padding:12px 14px}
  .recherche-clients::placeholder{font-size:.9rem}
  .filtres{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -16px;padding:2px 16px;touch-action:pan-x;overscroll-behavior-x:contain}
  .filtres::-webkit-scrollbar{display:none}
  .filtre{flex:none;min-height:40px;padding:8px 15px;white-space:nowrap}

  /* Tableaux : une ligne devient un bloc, plus de colonnes ni d'en-tetes */
  .appli .tableau-appli{font-size:.92rem}
  .appli .tableau-appli,.appli .tableau-appli tbody,.appli .tableau-appli td{display:block}
  .appli .tableau-appli thead{display:none}
  .appli .tableau-appli tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;
    padding:13px 0;border-bottom:1px solid var(--ligne);position:relative}
  .appli .tableau-appli tr:first-child{padding-top:4px}
  .appli .tableau-appli tr:last-child{border-bottom:0;padding-bottom:2px}
  .appli .tableau-appli td{padding:0;border:0;min-width:0}
  .appli .tableau-appli td:empty{display:none}
  .appli .tableau-appli td:first-child{font-weight:600;color:var(--bleu-fonce)}
  /* Liens d'action (telecharger, voir) : de vrais boutons, faciles a toucher */
  .appli .tableau-appli:not(.tableau-clients) td:last-child:not(:first-child){justify-self:end;white-space:nowrap;color:var(--gris)}
  .appli .tableau-appli:not(.tableau-clients) td:last-child:not(:first-child) a{display:inline-flex;align-items:center;
    min-height:38px;padding:6px 14px;border:1.5px solid var(--bleu);border-radius:100px;font-size:.85rem}
  /* Par defaut (espace client) : le document a gauche, l'action a droite, la date dessous */
  .appli .tableau-appli td:nth-child(1){grid-column:1;grid-row:1}
  .appli .tableau-appli td:nth-child(2){grid-column:1;grid-row:2;color:var(--gris);font-size:.86rem}
  .appli .tableau-appli:not(.tableau-clients):not(.tableau-paiements) td:last-child:not(:first-child){grid-column:2;grid-row:1 / span 2}
  .appli .tableau-appli td[colspan]{grid-column:1 / -1;font-weight:400;color:var(--gris)}

  /* Fiche client, documents : nom et etat a gauche, telechargement a droite */
  .appli .tableau-documents td:nth-child(2){grid-row:3}
  .appli .tableau-documents td:nth-child(3){grid-column:1;grid-row:2;justify-self:start}
  .appli .tableau-documents td:nth-child(4){grid-column:2;grid-row:1 / span 2}
  /* Fiche client, paiements : libelle et montant en haut, etat et facture dessous */
  .appli .tableau-paiements tr{align-items:start}
  .appli .tableau-paiements td:nth-child(2){grid-column:2;grid-row:1;justify-self:end;font-size:.95rem;font-weight:700;
    color:var(--bleu-fonce);white-space:nowrap}
  .appli .tableau-paiements td:nth-child(3){grid-column:1;grid-row:2;justify-self:start;align-self:center}
  .appli .tableau-paiements td:nth-child(4){grid-column:2;grid-row:2;align-self:center}

  /* Liste des clients : toute la ligne s'ouvre au toucher.
     Ligne 1 : le nom et l'etat. Ligne 2 : formule, reglement, echeance, qui passent
     a la ligne comme du texte si la place manque. */
  .appli .tableau-clients tr{display:flex;flex-wrap:wrap;align-items:flex-start;gap:3px 0;padding:14px 26px 14px 0}
  .appli .tableau-clients tr::before{content:"";order:3;flex:0 0 100%;height:0}
  .appli .tableau-clients tr:active{background:var(--bleu-pale)}
  .appli .tableau-clients td:nth-child(1){order:1;flex:1 1 0;min-width:0;padding-right:10px;line-height:1.4}
  .appli .tableau-clients td:nth-child(1) a::after{content:"";position:absolute;inset:0;z-index:1}
  .appli .tableau-clients td:nth-child(5){order:2;flex:none;max-width:60%}
  .appli .tableau-clients td:nth-child(5) .badge{white-space:normal;text-align:center}
  .appli .tableau-clients td:nth-child(2),.appli .tableau-clients td:nth-child(3),.appli .tableau-clients td:nth-child(4){
    order:4;flex:none;max-width:100%;font-size:.84rem;font-weight:400;color:var(--gris)}
  .appli .tableau-clients td:nth-child(2):has(~ td:nth-child(3):not(:empty))::after,
  .appli .tableau-clients td:nth-child(2):has(~ td:nth-child(4):not(:empty))::after,
  .appli .tableau-clients td:nth-child(3):not(:empty):has(+ td:not(:empty))::after{content:"\00B7";margin:0 6px}
  .appli .tableau-clients td:nth-child(6){position:absolute;right:0;top:50%;transform:translateY(-50%);pointer-events:none}
  .appli .tableau-clients td:nth-child(6) a{display:block;font-size:0;line-height:1}
  .appli .tableau-clients td:nth-child(6) a::before{content:"\203A";font-size:1.5rem;color:var(--gris)}
  .kbis-echeance{padding:11px 13px}
}
@media(max-width:360px){
  .cartes-chiffres .chiffre{font-size:1.45rem}
  .appli .btn{padding-left:16px;padding-right:16px}
}


/* Fiche client : modification par la dirigeante */
.fiche-modif{scroll-margin-top:96px}
.fiche-modif > .detail{color:var(--gris);font-size:.88rem;margin:-6px 0 16px}
.fiche-modif fieldset{border:1px solid var(--ligne);border-radius:var(--rayon);padding:16px 18px 4px;margin:0 0 18px;min-width:0}
.fiche-modif legend{padding:0 8px;font-family:var(--titre);font-weight:700;font-size:.95rem;color:var(--bleu-fonce)}
.fiche-modif .hab-modif{padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--ligne)}
.fiche-modif .aucune-hab{color:var(--gris);font-size:.88rem;margin:0 0 12px}
.fiche-modif [data-ajout-hab]{margin-bottom:14px}
.fiche-modif .msg-ko{margin:0 0 14px}
.fiche-modif .actions-modif{display:flex;flex-wrap:wrap;gap:10px}
/* Boutons blancs de la fiche client : un contour bleu, pour qu'ils se lisent comme des boutons */
.actions-fiche .btn-clair,.actions-danger .btn-clair,.fiche-modif .btn-clair{border-color:var(--bleu)}
.fiche-modif .duo-champs{row-gap:0}
.appli > .wrap > .msg-ok{margin:-8px 0 18px}
@media(max-width:700px){
  .fiche-modif fieldset{padding:12px 12px 2px;margin-bottom:14px}
  .fiche-modif .actions-modif{display:grid;grid-template-columns:1fr;gap:8px}
  .fiche-modif .hab-modif .btn,.fiche-modif [data-ajout-hab]{width:100%}
  .appli > .wrap > .msg-ok{margin:-4px 0 14px}
}