/* Zihma — feuille de style principale.
   Les valeurs proviennent des maquettes (planches PDF/JPG mesurees au pixel).
   POLICE : Plus Jakarta Sans, police officielle Zihma (decision client du
   17/09/2026 ; Inter auparavant). Un seul point de reglage : --police ;
   le titrage est la meme famille, plus grasse (--police-titre). */

:root{
  /* ---- couleurs ---------------------------------------------------------
     Identite Zihma : vert profond, fonds clairs et chauds, touches brunes. */
  --fond:#faf9f7;            /* papier chaud, fond de page                  */
  --fond-creux:#f4f1ec;      /* bandes en retrait (univers, « ca marche »)  */
  --surface:#ffffff;         /* cartes et panneaux                          */
  --vert:#005a4f;
  --vert-sombre:#004840;
  --vert-encre:#0a4f46;
  --menthe:#e3f0ec;
  --brun:#7a5c3f;        /* assombri : 4,2:1 sur menthe -> 5,0:1 */
  --brun-clair:#b08d68;
  --gris-pilule:#e6e7eb;
  --gris-champ:#f2f1ef;
  --encre:#0e0e0e;
  --gris-texte:#5c5c5c;      /* 6,9:1 sur --fond : lisible (etait #6e6e6e)  */
  --gris-faible:#6d6d6d;     /* mesure : #767676 ne tenait que 4,33:1 sur
                                --fond et 4,02:1 sur --gris-champ, sous le
                                seuil dans les deux cas. #6d6d6d : 4,9 et 4,5 */
  --carte-chaud:#fdeee1;
  --bord:#e6e1d9;
  /* L'or vient de l'espace Prestataire, ou il servait deja aux jetons et aux
     etoiles. Il est ici parce que la fiche publique en a besoin et ne charge
     pas pro.css. DEUX valeurs, pas une : l'aplat est trop clair pour porter
     un trait sur fond ivoire (1,84:1). --or peint des FONDS, --or-texte peint
     ce qui doit se lire — texte comme pictogramme (4,7:1 sur --fond). */
  --or:#e8a317;
  --or-sur-vert:#f5c04a;    /* or lisible sur le vert profond : 4,9:1 (le --or n'y fait que 3,8) */
  /* ---- jetons ajoutes : la palette etait definie mais contournee -------
     192 valeurs hexadecimales circulaient pour 16 jetons, dont 29 gris de
     texte distincts et 7 rouges d'erreur. Ceux-ci nomment les familles qui
     manquaient ; tout le reste a ete replie sur l'existant. */
  --gris-fort:           #4a4a4a;    /* texte de contenu long, plus dense que --gris-texte */
  --bord-fort:           #c2c2c2;    /* bordure au survol, plus marquee que --bord */
  --bord-carte:          #d5cdc2;    /* filet des cartes du systeme (StatCard, sections, tables) */
  --menthe-bord:         #bfdcd4;    /* filet d'un aplat menthe */
  --erreur:              #a3271f;    /* etat d'erreur : texte, bordure, icone */
  --erreur-fond:         #fdecea;    /* aplat d'erreur */
  --erreur-bord:         #f3c4bd;    /* filet d'un aplat d'erreur */
  --erreur-fond-actif:   #fbe4e1;    /* aplat d'erreur au survol */
  --succes:              #0f7a20;    /* etat de succes */
  --succes-fond:         #d8f6d9;    /* aplat de succes */
  /* Les pastilles de mouvement, d'etape et de formule etaient teintees en bleu
     #1d4ed8 / #4657a8 et en fuchsia #d946ef / #a21caf : les valeurs par defaut
     de Tailwind, etrangeres a une identite vert profond et ivoire. */
  --lagune:              #2c6470; /* accent froid, 5,4:1 sur --lagune-fond */
  --lagune-fond:         #dfe9ec;
  /* Moyens de paiement : une teinte par operateur, tiree de sa marque mais
     assombrie pour tenir 4,5:1 sur son aplat clair. Le pictogramme est celui
     de la bibliotheque ; le logo officiel reste un ASSET EXTERNE REQUIS. */
  --wave:                #0a6f9c; /* 5,6:1 sur --wave-fond */
  --wave-fond:           #dcf0f9;
  --orange-money:        #a84a00; /* 5,4:1 sur --orange-money-fond */
  --orange-money-fond:   #ffe8d4;
  --mtn-fond:            #ffcc00; /* jaune MTN : fond du logo officiel */
  --or-fond:             #fdf3cf; /* aplat d'or clair, pilules « en attente » */
  --brun-sombre:         #634226; /* --brun au survol */
  /* Meme valeur que --surface, role oppose : ce qui se pose SUR un aplat
     sombre. Les separer permet de repeindre les fonds sans repeindre les
     textes qui vivent dessus. */
  --texte-inverse:       #ffffff;
  --or-texte:#8a6008;      /* 4,9:1 sur --carte-chaud et --or-fond, 5,6:1 sur
                              blanc. #96690a ne tenait que 4,28 sur la peche
                              et 4,37 sur l'aplat d'or. */
  /* ---- elevation ---------------------------------------------------------
     Deux langages coexistaient sans que rien ne le dise : le site public
     posait --ombre-1 sur ses cartes, les espaces Client et Prestataire
     n'avaient aucune ombre et se delimitaient au filet. C'est desormais une
     REGLE, pas un accident : au repos une surface se delimite par son filet
     (--carte-bord), l'ombre ne sert qu'a signaler ce qui FLOTTE — survol,
     menu ouvert, panneau modal. --ombre-1 reste pour le site public, ou la
     carte d'offre est un objet pose sur le papier. */
  --ombre-1:0 1px 2px rgba(20,16,10,.05), 0 2px 8px rgba(20,16,10,.04);
  --ombre-2:0 6px 18px rgba(20,16,10,.08), 0 2px 4px rgba(20,16,10,.04);
  --ombre-3:0 18px 44px rgba(20,16,10,.12);
  --ombre-carte:0 4px 14px rgba(20,16,10,.08);   /* la carte de bien, a peine detachee du fond */

  --police:"Plus Jakarta Sans",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  /* Titrage : la meme famille, en 700/800, pour les H1, les H2 editoriaux et
     les prix — une seule police officielle (17/09/2026), le poids fait la
     hierarchie. Chiffres tabulaires. */
  --police-titre:"Plus Jakarta Sans",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* ---- echelle d'espacement ---------------------------------------------
     Une seule progression pour tout le site : les marges entre sections ne
     sont plus choisies au cas par cas (l'accueil montait a 139 px entre deux
     rangees, d'ou une page de 8 300 px sur mobile). */
  /* ---- echelle typographique --------------------------------------------
     528 declarations `font-size` en pixels pour 29 valeurs distinctes, dont
     des demies (11,5 / 13,5 / 14,5 / 15,5 px) : des reglages a la main, pas
     une echelle. Quinze degres les remplacent, choisis pour que 455 des 528
     ne bougent pas d'un pixel ; le reste se deplace de 0,5 a 2 px. Meme
     convention de nommage que l'espacement ci-dessous. */
  /* Sur l'echelle commune, et calibrees pour que les trois lignes tiennent
     dans le quart de la carte la plus etroite (300 x 297 px). */
  --carte-titre:var(--t6); --carte-prix:var(--t5);
  --t1:12px; --t2:13px; --t3:14px; --t4:15px; --t5:16px;
  --t6:17px; --t7:19px; --t8:22px; --t9:24px; --t10:26px;
  --t11:30px; --t12:34px; --t13:40px; --t14:44px; --t15:52px;

  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:88px;

  /* ---- rayons et gabarit ------------------------------------------------ */
  /* ---- rayons -----------------------------------------------------------
     Les cinq jetons semantiques existaient ; 23 valeurs en dur les
     contournaient — dix rayons distincts sur une seule fiche. Six degres
     neutres completent l'echelle pour ce qui n'est ni carte, ni champ, ni
     bouton. */
  --r-hero:24px; --r-carte:18px; --r-bouton:12px; --r-champ:14px; --r-pilule:999px;
  --r1:4px; --r2:8px; --r3:10px; --r4:16px; --r5:20px; --r6:32px;

  /* ---- formats partages : cartes, champs, pilules -----------------------
     Le format des boutons tient dans UNE regle (voir `--b-*` plus bas) et un
     test l'impose. Les trois autres familles ne l'avaient pas : 11 cartes
     avec 5 rayons, 8 champs avec 5 hauteurs, 15 pilules avec 7 rembourrages.
     Les jetons ci-dessous portent ce qui doit etre commun. Le rembourrage
     des cartes reste propre a chaque contexte : une carte d'offre et un
     panneau de compte n'ont pas la meme respiration. */
  --champ-haut:56px;
  --sel-haut:var(--b-haut);          /* SelectField hors formulaire : la hauteur des boutons, pour s'aligner dans une barre d'outils */
  --champ-marge:0 18px;
  --champ-bord:1px solid var(--bord);
  /* La fleche des listes deroulantes : celle du navigateur part
     (appearance:none) et ce chevron de la bibliotheque prend sa place, en
     gris de texte. Une image de fond, donc une donnee : un pseudo-element ne
     se pose pas sur un <select>. */
  --chevron-champ:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' stroke='%235c5c5c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pil-haut:34px;
  --pil-marge:0 var(--e4);
  /* Filet des cartes : plus marque que --bord (invisible sur le sol blanc de
     l'espace : capture Wallet annotee « le trait n'est pas visible »). */
  --carte-bord:1px solid var(--bord-carte);
  /* Panneau contextuel (Popover) : UN rayon, UN filet, UNE ombre pour tout ce
     qui s'ouvre sous un declencheur · suggestions de lieu, compteurs de
     voyageurs, menu « Mon espace », langue/devise, menu « ⋯ ». Trois rayons
     circulaient (18, 14, 10 px) pour un meme geste (16/09). */
  --r-popover:var(--r4);
  --bord-popover:1px solid var(--bord);
  --ombre-popover:var(--ombre-2);
  /* Voiles de la carte d'offre et de la coque : le panneau blanc pose dans
     la photo, le rond du coeur, le voile sous la recherche redeployee. */
  --voile-blanc:rgba(255,255,255,.92);
  --voile-anthracite:rgba(35,31,27,.78); /* capsule de la carte, sur la photo   */
  --voile-sombre:rgba(14,14,14,.42);
  --voile-sombre-fort:rgba(14,14,14,.6);
  --voile-page:rgba(14,14,14,.28);
  --voile-filet:rgba(14,14,14,.12);
  --fond-visionneuse:#06140f;   /* la visionneuse : rien ne transparait */

  /* ---- direction artistique : « editorial ivoirien » --------------------
     La direction retenue tenait en cinq signes. Le papier ivoire (--fond) et
     l'encre vert profond (--vert) etaient la ; les trois autres manquaient.
     Ils sont ici, et nulle part ailleurs : un filet d'or, un motif tisse en
     signature, et une echelle de titres qui ouvre vraiment l'ecart avec le
     texte courant (--t14 contre --t4, soit 2,9 fois, au lieu de 2). */
  --filet-or:1px solid var(--or);
  --motif-tisse:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg stroke='%23e8a317' stroke-width='2.4' fill='none'%3E%3Cpath d='M0 4h8M8 12h8'/%3E%3Cpath d='M4 8v8M12 0v8'/%3E%3C/g%3E%3C/svg%3E");
  /* ---- points de rupture ------------------------------------------------
     Seize valeurs circulaient (359, 400, 480, 560, 640, 860, 900, 1023,
     1100, 1120, 1200, 1240, 1500, 1620, 1690) : chaque composant avait
     choisi la sienne au moment ou il cassait. Sept paliers desormais, et
     AUCUN autre a introduire :
        480   petit telephone
        640   telephone
        900   tablette
        1023  bureau etroit   (1101 est son complement en min-width)
        1240  bureau
        1500  large           (les espaces Client et Pro sont dessines sur
                               une frame de 1728 px, d'ou ce dernier palier)
     Ils ne sont pas des jetons : une media query n'accepte pas var(). C'est
     donc une convention, tenue par la revue et par ce commentaire. */
  --page:1280px; --gouttiere:60px;
  --tactile:44px;

  /* ---- mouvement --------------------------------------------------------
     Six durees circulaient (.06 / .1 / .12 / .14 / .15 / .18 s) et deux
     courbes, choisies au cas par cas. Deux suffisent : --mvt pour un
     changement d'etat (couleur, bordure), --mvt-lent pour ce qui deplace ou
     ouvre. Le reglage systeme « animations reduites » les annule toutes,
     via la regle globale plus bas. */
  /* La DUREE seule sert dans les declarations `transition`, qui portent deja
     leur propre propriete et leur courbe ; le couple duree+courbe sert quand
     on ecrit la transition d'un trait. Les deux existaient, mais 42 durees
     restaient ecrites a la main — le vocabulaire ne valait donc rien. */
  --mvt-d:.14s;
  --mvt-lent-d:.2s;
  --mvt:var(--mvt-d) ease;
  --mvt-lent:var(--mvt-lent-d) ease;

  /* ---- boutons : un seul format pour tout le site ----------------------- */
  --b-haut:48px; --b-rayon:var(--r-pilule); --b-marge:10px 24px;
  --b-texte:16px; --b-graisse:600; --b-gouttiere:10px;
  /* DEUX tailles, pas dix. Le format courant (48 px) et la version compacte
     des actions de carte, de ligne et de barre d'outils (40 px). La revue du
     20/09 relevait 34, 36, 38, 40, 44, 48 et 52 px pour des boutons de meme
     importance : chacun rejoint l'une des deux. */
  --b-haut-petit:40px; --b-marge-petit:0 var(--e4); --b-texte-petit:var(--t3);
  /* IconButton : la CIBLE fait 44 px partout, meme quand la forme visible est
     plus petite ou absente. Un seul rayon pour les carrees ; le cercle reste
     la forme des boutons qui en portent une (coeur, loupe, compteur, croix) —
     une variante fonctionnelle, pas une geometrie de plus. */
  --ic-haut:var(--tactile); --ic-rayon:var(--r2); --ic-icone:18px;

  /* ---- action destructive : une seule famille de rouge ------------------
     Deconnexion et suppression parlent le meme langage partout. Ces jetons
     nomment le role ; les valeurs restent celles de la palette d'erreur. */
  --danger:var(--erreur); --danger-fond:var(--erreur-fond);
  --danger-bord:var(--erreur-bord); --danger-survol:var(--erreur-fond-actif);

  /* ---- navigation du catalogue ------------------------------------------
     DEUX etats, jamais confondus (consigne client du 20/09) :
       categorie principale active -> soulignement vert, AUCUN aplat ;
       sous-categorie active       -> puce teintee vert clair.
     Les jetons portent la distinction pour qu'elle se lise dans la feuille. */
  --categorie-active:var(--vert);
  --categorie-trait:2px;
  --categorie-trait-mvt:180ms;
  --souscat-fond:var(--surface);
  --souscat-bord:var(--bord);
  --souscat-survol:#f1f8f5;          /* menthe tres diluee : le survol, pas la selection */
  --souscat-sel-fond:var(--menthe);
  --souscat-sel-texte:var(--vert-encre);
  --souscat-sel-bord:var(--menthe-bord);

  /* ---- recherche : une capsule, un seul rayon ---------------------------
     `border-radius:50%` sur un rectangle produit une ellipse : c'est la
     valeur haute qui donne la capsule attendue, et elle est ici une fois. */
  --search-rayon:9999px;
  --search-panneau-rayon:var(--r-hero);

  /* ---- container de page : UN axe --------------------------------------
     En-tete, barre de recherche, navigation des univers et resultats
     partagent cette largeur et cette gouttiere. Aucune marge laterale
     arbitraire ailleurs. */
  --page-max-width:1920px;
  --page-gutter:var(--gouttiere);

  /* Carte de bien : largeur de reference. La grille en deduit le nombre de
     colonnes, elle ne les impose pas et n'etire jamais les cartes. */
  --carte-l:300px; --carte-gap:24px;
}

*,*::before,*::after{box-sizing:border-box}
/* L'attribut `hidden` du HTML ne vaut, dans la feuille du navigateur, qu'un
   `display:block` : la moindre regle de composant qui pose flex, grid ou
   inline-flex l'emporte, et l'element reste a l'ecran. Mesure faite :
   .filtres__brouillon, pourtant `hidden`, s'affichait 534 x 68 px des que le
   panneau de filtres etait ouvert — « Appliquer les modifications ? » posee en
   permanence, sur des modifications que personne n'avait faites.
   Le depot avait deja repondu treize fois au cas par cas (« .machin[hidden]
   {display:none} »), et une fois pour tout un espace (espace.css : `.esp
   [hidden]`). La regle vaut pour le document entier : les treize rustines
   posent toutes display:none, aucune ne la contredit, et les oublis a venir
   sont couverts d'avance. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--police);font-size:var(--t4);line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--vert);outline-offset:2px;border-radius:var(--r1)}
/* Sur fond vert ou sur photo, un contour vert ne se verrait pas. */
.hero :focus-visible,.edito__grand :focus-visible,
.pied :focus-visible,.basdepage :focus-visible,
.esp-solde-zihma--carte :focus-visible,
.bouton--contour.bouton--inverse:focus-visible{outline-color:var(--texte-inverse)}

/* Texte reserve aux lecteurs d'ecran : present dans l'arbre, invisible a l'oeil. */
.visuellement-cache{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Lien d'evitement : premier element focusable de chaque page. */
.evitement{position:absolute;left:var(--e4);top:-100px;z-index:100;
  display:inline-flex;align-items:center;height:var(--tactile);padding:0 var(--e5);
  background:var(--vert);color:var(--texte-inverse);border-radius:var(--r-bouton);font-weight:600;
  transition:top var(--mvt-d) ease}
.evitement:focus{top:var(--e3)}
main:focus{outline:none}

/* Toute cible cliquable atteint 44 x 44 px, y compris quand l'icone est petite. */
button,[role="button"]{min-height:var(--tactile)}

/* Format unique des boutons : pilule de 48 px, 16 px / 600, gouttiere de 10 px.
   Les regles qui suivent, dans ce fichier comme dans les feuilles d'espace,
   pro, recherche et reservation, ne portent plus que la couleur, la bordure et
   la largeur. Les boutons purement iconiques (ronds, croix, fleches, coeurs)
   gardent le gabarit propre a leur composant — voir `.bouton-ic` et le jeton
   `--ic-*` : leur CIBLE est la meme partout, seule la forme visible varie.
   Passe du 20/09 : huit familles rejoignent le format (le valider d'une
   modale, la bascule d'espace, l'action d'un etat vide, les reprises de
   recherche, les mini-actions du panneau de filtres, la bascule de carte, le
   CTA de scan et la confirmation « Mes biens ») — elles declaraient encore
   leur propre hauteur, leur propre rayon (12 et 14 px) ou leur propre
   graisse pour une action de meme importance. */
.recherche__bouton,.edito__bouton,.encadre__bouton,.item__bouton,
.partenaire__bouton,.mobnav__bouton,.fiche__action,.chip,.recap-res__bouton,
.confirme__actions>:is(a,button),.porte__actions>:is(a,button),
.auth__actions>:is(a,button),.esp-wallet__actions>:is(a,button):not(.oeil-montants),.demo__bouton,
.etat__action,.resultats__bouton,.filtres__action,
.esp__cta,.esp-btn,.esp-enreg,.esp-filtre,.esp-mvt__b,.esp-aide__bouton,.esp-deco,
.cnt-appel__b,.pro-formule__b,.pro__pilule,
.pro__cta,.pro-ajouter,.pro-importer,.pro-camp__filtre,
.pro-depot__b,.cnt-form__envoi,.fiche__barre-b,.appel__bouton,
.modale__valider,.espace-bascule__lien,.etat-vide__action,.etat__reprise,
.filtres__mini,.carte-recherche__bascule,.pro-scan__cta,.pro-confirme__b,
.espace-menu__sortie,
.bouton,.appel-edito__b,.article__action,.stat__action{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--b-gouttiere);height:auto;min-height:var(--b-haut);
  padding:var(--b-marge);border-radius:var(--b-rayon);font-size:var(--b-texte);
  font-weight:var(--b-graisse);line-height:1.25;text-align:center;
  transition:background-color var(--mvt-d) ease,border-color var(--mvt-d) ease,color var(--mvt-d) ease}

/* Preference systeme « moins d'animations » : on la respecte. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Le site public est dessine sur une frame de 1280 px : on borne la page a cette
   largeur et on centre, pour rester fidele aux mesures de la maquette. */
.page{width:100%;max-width:1920px;margin:0 auto}
/* Le Header n'est PAS le haut du corps Wallet / Reservations / Offres :
   c'est la barre globale, pleine largeur, comme sur Home. Le corps metier
   est une colonne independante en dessous. */
.metier{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:32px 0 64px}
.metier .esp__h1{margin-top:0}
.metier-cible{outline:2px solid var(--vert);outline-offset:2px;background:var(--menthe)}
@media (max-width:639px){
  .metier{width:calc(100% - 32px);padding:20px 0 48px}
}
/* A 1280 px (largeur de la frame) le rendu est identique a la maquette ; au-dela
   la largeur supplementaire sert a afficher PLUS de cartes. */

/* ---------------------------------------------------------------- en-tete */
/* Collee en haut a toutes les largeurs. Le filet permanent est remplace par
   une ombre qui n'apparait QUE lorsqu'on a defile : au repos rien ne coupe la
   page, en defilant la barre se detache de ce qui passe dessous. */
.entete{min-height:72px;width:100%;display:flex;align-items:center;justify-content:center;gap:0;
        padding:0;background:var(--fond);position:sticky;top:0;z-index:40}
.entete[data-colle="oui"]{box-shadow:0 6px 18px rgba(20,16,10,.10)}
.entete__inner{width:100%;max-width:var(--page-max-width);min-height:72px;
  display:flex;align-items:center;gap:var(--e3);
  padding:var(--e2) var(--page-gutter)}
.entete__debut{display:flex;align-items:center;gap:var(--e2);flex:0 0 auto;min-width:0}
/* Seul enfant de la barre sans `flex`, elle absorbait tout le manque de place
   et comprimait le logo. Elle ne cede plus : ce sont les groupes elastiques
   qui s'ajustent. */
.entete__marque{display:inline-flex;align-items:center;min-height:var(--tactile);
  flex:0 0 auto}
.entete__logo{flex:0 0 auto}          /* taille : voir le bloc des logos */
/* Les six univers ne sont plus dans l'en-tete : ils ont leur barre sous la
   recherche (voir « coque » plus bas). L'en-tete ne garde que la marque et
   les outils de la personne : pays, langue et devise, prestataire, compte. */
.entete__fin{margin-left:auto;display:flex;align-items:center;gap:var(--e3);
  flex:0 0 auto}
/* Mesure du 20/09/2026 a 1024 px, en-tete interne (fiches) : avec `flex:0 1 auto;
   min-width:0` le groupe cedait sous la largeur de son contenu (pays + actions
   = 505 px) et « Se connecter » sortait de l'ecran de 39 px. Il ne cede plus :
   c'est le resume de recherche (flex:1 1 auto, lignes en ellipse) qui s'ajuste. */
.entete__fin > .pays{flex:0 0 auto;display:flex;align-items:center}
/* ---- LES DEUX ACTIONS DE L'EN-TETE ONT LA MEME GEOMETRIE (20/09/2026) ----
   « Devenir prestataire » et « Se connecter » etaient reglees separement :
   meme hauteur et meme rayon, mais deux marges horizontales (20 px / 8 px),
   deux corps de texte (15 px / herite) et deux graisses (500 / herite). Cote
   a cote dans le meme coin, elles avaient l'air de venir de deux systemes.
   La geometrie est donc posee UNE fois, ici, pour les deux ; ce qui les
   distingue ensuite est leur HIERARCHIE (contour + fond pour l'action
   secondaire, fond nu pour l'acces au compte), jamais leur forme. */
.entete__partenaire,.entete__profil{display:inline-flex;align-items:center;
  height:var(--tactile);padding:0 var(--e4);border-radius:var(--r-pilule);
  font-size:var(--t4);font-weight:500;white-space:nowrap;
  transition:border-color var(--mvt-d) ease,background var(--mvt-d) ease}
.entete__partenaire{background:var(--surface);border:1px solid var(--bord)}
/* Le contour de l'action secondaire ne doit pas la faire grandir de 1 px par
   rapport a sa voisine sans bordure : la bordure est comptee dans la hauteur. */
.entete__profil{border:1px solid transparent}
/* Pas de `background` ici : une regle plus bas pose l'ivoire chaud sur toute
   la famille des pilules a contour, et l'emporte. Le menthe ecrit ici ne
   s'affichait donc jamais. Le bord et le texte, eux, tiennent. */
.entete__partenaire:hover{border-color:var(--vert);color:var(--vert)}
.entete--plein .entete__partenaire{background:var(--vert);color:var(--texte-inverse);border-color:var(--vert)}
.entete--plein .entete__partenaire:hover{background:var(--vert-sombre)}
.entete__profil{gap:9px}
.entete__profil:hover{background:var(--gris-champ)}
/* --- etats de l'en-tete (17/09/2026) : les deux sont dans le HTML, `hidden`
   sur celui qui ne vaut pas. session.js pose `data-session` sur <html> des
   le <head> et bascule `hidden` au chargement ; ces regles evitent qu'un
   etat apparaisse le temps d'un rendu. Preference locale : aucun droit. --- */
.entete__invite,.entete__membre{display:flex;align-items:center;gap:var(--e3)}
.entete__membre{gap:var(--e1)}
.entete__invite[hidden],.entete__membre[hidden],.mobnav__groupe[hidden]{display:none}
html[data-session="client"] .entete [data-session]:not([data-session="client"]),
html[data-session="pro"] .entete [data-session]:not([data-session="pro"]),
html[data-session="hors"] .entete [data-session]:not([data-session="hors"]){display:none}
html[data-session="client"] .entete__fin [data-session="client"],
html[data-session="pro"] .entete__fin [data-session="pro"],
html[data-session="hors"] .entete__fin [data-session="hors"]{display:flex}
html[data-session="client"] .mobnav__groupe[data-session="client"],
html[data-session="pro"] .mobnav__groupe[data-session="pro"],
html[data-session="hors"] .mobnav__groupe[data-session="hors"]{display:contents}
.mobnav__groupe{display:contents}
.entete__raccourci{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:6px;width:var(--tactile);height:var(--tactile);min-height:var(--tactile);max-height:var(--tactile);
  padding:0;border:0;border-radius:50%;background:transparent;color:var(--encre);
  flex:0 0 auto;box-sizing:border-box;text-decoration:none}
.entete__raccourci:hover{background:var(--gris-champ);color:var(--vert)}
.entete__lib{display:none;font-size:var(--t3);font-weight:600;line-height:1;white-space:nowrap;
  letter-spacing:-.01em}
.entete__raccourci--actif{width:auto;min-width:0;padding:0 8px;border-radius:0;
  background:transparent;color:var(--vert)}
.entete__raccourci--actif:hover{background:transparent;color:var(--vert)}
.entete__raccourci--actif .entete__lib{display:inline}
.entete__profil--avatar{width:36px;height:36px;padding:0;border-radius:50%;
  overflow:hidden;flex:0 0 36px}
.entete__profil--avatar.entete__profil--membre{padding:0;margin-left:var(--e2)}
.entete__profil--avatar .entete__avatar,.entete__profil--avatar .entete__initiales{
  width:36px;height:36px;border-radius:50%}
.page--metier,.page--reglages,.page--fil{min-height:100vh}
/* La barre des reglages (21/09/2026) : la seule barre laterale du site. Elle
   prend la hauteur de son contenu et se borne a l'ecran ; au-dela, ce sont
   ses sections qui defilent, jamais la page. */
.page--reglages .esp__barre{top:calc(var(--esp-marge) + 8px);
  height:auto;min-height:0;max-height:calc(100vh - var(--esp-marge)*2 - 8px)}
@media (max-width:1279px){
  .entete__raccourci--basse{display:none}
  .entete__raccourci--actif{width:var(--tactile);padding:0;border-radius:50%}
  .entete__raccourci--actif .entete__lib{display:none}
  .entete__raccourci--actif::after{left:50%;right:auto;width:16px;margin-left:-8px}
  button.entete__raccourci.entete__raccourci--actif{padding:0}
}
.entete__picto{display:grid;place-items:center;position:relative;width:22px;height:22px;flex:0 0 auto}
.entete__raccourci--actif::after{content:"";position:absolute;left:8px;right:8px;bottom:6px;
  height:2px;background:var(--vert);border-radius:99px;pointer-events:none}
.entete:has([data-rapide][aria-expanded="true"]) .entete__raccourci--actif:not([aria-expanded="true"]) .entete__lib{display:none}
.entete:has([data-rapide][aria-expanded="true"]) .entete__raccourci--actif:not([aria-expanded="true"])::after{display:none}
.entete__profil--actif{position:relative}
.entete__profil--actif::after{content:"";position:absolute;left:50%;bottom:-4px;
  width:16px;height:2px;margin-left:-8px;background:var(--vert);border-radius:99px}
.espace-menu.entete__compte,.entete .espace-menu{position:relative;margin-left:var(--e2);flex:0 0 auto}
.entete .espace-menu > summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:transparent;
  cursor:pointer;color:inherit}
.entete .espace-menu > summary::-webkit-details-marker{display:none}
.entete .espace-menu[open] > summary{background:transparent}
.entete .espace-menu > summary.entete__profil--avatar{overflow:hidden}
.entete__bascule{display:none}
/* Le compteur ne s'affiche que s'il porte un nombre reel (data/espace.json). */
.entete__badge{position:absolute;top:-8px;right:-8px;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-pilule);background:var(--vert);color:var(--texte-inverse);
  font-size:var(--t1);font-weight:700;line-height:18px;text-align:center}
.entete__avatar,.entete__initiales{width:32px;height:32px;border-radius:50%;flex:0 0 auto}
.entete__avatar{object-fit:cover;display:block}
.entete__initiales{display:grid;place-items:center;background:var(--menthe);color:var(--vert);
  font-size:var(--t1);font-weight:700;letter-spacing:.02em}
.entete__profil--membre{padding:0 var(--e3) 0 6px;margin-left:var(--e2)}
.mobnav__action .entete__avatar,.mobnav__action .entete__initiales{width:28px;height:28px}
.mobnav__badge{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-pilule);
  background:var(--vert);color:var(--texte-inverse);font-size:var(--t1);font-weight:700;line-height:22px;text-align:center}

/* --- panneau mobile : sous 1024 px les outils de droite ne tiennent plus ;
       un bouton « Menu » ouvre un panneau qui les nomme (compte, langue et
       devise, prestataire). Les univers, eux, restent sous la recherche. --- */
.mobnav__bouton{display:none;margin-left:auto;border:1px solid var(--bord);
  background:var(--surface)}
.mobnav__barres{position:relative;width:18px;height:2px;background:var(--encre);border-radius:var(--r1)}
.mobnav__barres::before,.mobnav__barres::after{content:"";position:absolute;left:0;width:18px;
  height:2px;background:var(--encre);border-radius:var(--r1)}
.mobnav__barres::before{top:-6px}.mobnav__barres::after{top:6px}
.mobnav__bouton[aria-expanded="true"] .mobnav__barres{background:transparent}
.mobnav__bouton[aria-expanded="true"] .mobnav__barres::before{top:0;transform:rotate(45deg)}
.mobnav__bouton[aria-expanded="true"] .mobnav__barres::after{top:0;transform:rotate(-45deg)}
.mobnav__panneau{display:none}
.mobnav__pays{display:flex;align-items:center;gap:var(--e3);margin:0 0 var(--e3);padding:0 var(--e2);
  min-height:var(--tactile);font-size:var(--t3)}
.mobnav__pays span{display:flex;flex-direction:column;line-height:1.25}
.mobnav__pays small{font-size:var(--t1);color:var(--gris-texte)}
.mobnav__actions{display:grid;gap:var(--e2)}
.mobnav__action{display:flex;align-items:center;gap:var(--e3);min-height:var(--tactile);
  padding:0 var(--e4);border-radius:var(--r-champ);background:var(--gris-champ);font-weight:500}
.mobnav__action--fort{background:var(--vert);color:var(--texte-inverse)}

@media (max-width:1240px){
  .entete__inner{gap:var(--e3)}
  .entete__partenaire,.entete__profil{padding:0 14px;font-size:var(--t3)}
  .entete__lib{font-size:var(--t2)}
}
@media (max-width:1023px){
  .entete__inner{flex-wrap:wrap;gap:var(--e3);row-gap:0}
  .entete__fin{display:none}
  .mobnav__bouton{display:inline-flex}
  .mobnav__panneau{display:block;flex:1 1 100%;padding:var(--e4) 0 var(--e5)}
  .mobnav__panneau[hidden]{display:none}
}

/* ------------------------------------------------------------------- hero */
.entree{padding:0 var(--e5)}
/* Hauteur fluide plutot que `aspect-ratio` + `max-height` : ce couple faisait
   RETRECIR la largeur du bandeau des qu'il butait sur la hauteur maximale, et
   le hero n'occupait plus toute la page. */
.hero{position:relative;margin:var(--e5) 0 0;width:100%;height:clamp(360px,38vw,520px);
      border-radius:var(--r-hero);overflow:hidden;isolation:isolate}
.hero__diapo{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.hero__diapo[data-actif="oui"]{opacity:1}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.hero__univers{display:inline-flex;align-items:center;gap:var(--e2);
  min-height:var(--tactile);padding:0 var(--e5);border-radius:var(--r-pilule);
  /* .55 tombait a 4,02:1 sur les diapositives les plus claires. */
  background:rgba(6,32,28,.68);color:var(--texte-inverse);
  font-size:var(--t5);font-weight:600;letter-spacing:.01em}
.hero__univers:hover{background:rgba(6,32,28,.78)}
/* `display:inline-flex` l'emporte sur le [hidden] de la feuille du navigateur :
   sans cette ligne, les six etiquettes s'affichaient en meme temps. */
.hero__univers[hidden]{display:none}

.hero__puce{position:relative;width:44px;padding:0;border:0;background:none;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.hero__puce::before{content:"";width:26px;height:4px;border-radius:var(--r-pilule);
  background:rgba(255,255,255,.5);transition:background-color var(--mvt),width var(--mvt)}
.hero__puce:hover::before{background:rgba(255,255,255,.85)}
.hero__puce[aria-current="true"]::before{background:var(--texte-inverse);width:40px}
@media (max-width:640px){.hero__puce{width:22px}.hero__puce[aria-current="true"]{width:34px}}

/* -------------------------------------------------------------- recherche */
.recherche{position:relative;z-index:2;margin:calc(var(--e8) * -1) auto 0;max-width:1100px;
  background:var(--surface);border-radius:var(--r-hero);box-shadow:var(--ombre-3);
  padding:var(--e4);display:flex;flex-wrap:wrap;gap:var(--e2);align-items:end}
.recherche__controle{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;
  background:var(--gris-champ);border-radius:var(--r-champ);
  border:1px solid transparent;transition:border-color var(--mvt-d) ease,background var(--mvt-d) ease}
.recherche__controle:hover{background:var(--fond-creux)}
.recherche__controle:focus-within{background:var(--surface)}
.recherche__controle input,.recherche__controle select{flex:1;min-width:0;border:0;background:none;
  font:inherit;font-size:var(--t5);color:var(--encre);height:100%}

.recherche__controle input::placeholder{color:var(--gris-faible)}
.recherche__controle input[type=date],
.recherche__controle input[type=time]{color-scheme:light;cursor:pointer}
/* Le bouton natif reste cliquable ; son dessin vient de la bibliothèque Zihma.
   Le masque applique la couleur du champ au SVG sans déformer ses proportions. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  width:20px;height:20px;padding:2px;margin-left:auto;opacity:1;cursor:pointer;
  background:currentColor;
  -webkit-mask:url("../img/communs/calendrier.svg") no-repeat center / 20px 20px;
  mask:url("../img/communs/calendrier.svg") no-repeat center / 20px 20px}
input[type="time"]::-webkit-calendar-picker-indicator{
  width:20px;height:20px;padding:2px;margin-left:auto;opacity:1;cursor:pointer;
  background:currentColor;
  -webkit-mask:url("../img/communs/horloge.svg") no-repeat center / 20px 20px;
  mask:url("../img/communs/horloge.svg") no-repeat center / 20px 20px}
input[type="date"]:disabled::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:disabled::-webkit-calendar-picker-indicator,
input[type="time"]:disabled::-webkit-calendar-picker-indicator{
  cursor:default;opacity:.45}
.recherche__bouton{flex:0 0 auto;margin-left:auto;background:var(--vert);color:var(--texte-inverse);
  transition:background var(--mvt-d) ease,transform var(--mvt-d) ease}
.recherche__bouton:hover{background:var(--vert-sombre)}
.recherche__bouton:active{transform:translateY(1px)}

@media (max-width:1023px){
  .recherche{margin-top:calc(var(--e7) * -1)}
    .recherche__bouton{flex:1 1 100%;width:100%;margin-left:0}
}
@media (max-width:640px){
  .entree{padding:0 var(--e4)}
  /* Bandeau plus court sur mobile : la recherche doit etre atteignable tout de
     suite, pas apres un ecran et demi de photo (F12). */
  /* Bandeau court : la recherche doit etre atteignable sans defiler. Le titre
     descend d'un cran pour que le sous-titre ne vienne pas buter sur la carte
     de recherche qui remonte par-dessus. */
  .hero{height:min(44vh,286px);margin-top:var(--e4)}
        .recherche{margin-top:calc(var(--e6) * -1);padding:var(--e3);gap:var(--e2);
    border-radius:var(--r-carte)}
  .recherche__controle{height:52px}
}

/* ------------------------------------------------- bande des six univers */
.univers{margin-top:var(--e7);padding:0 var(--gouttiere)}
.univers__lien{display:flex;flex-direction:column;align-items:center;gap:var(--e2);
  padding:var(--e4) var(--e2);border:1px solid var(--bord);border-radius:var(--r-carte);
  background:var(--surface);font-size:var(--t3);font-weight:600;text-align:center;
  min-height:var(--tactile);transition:border-color var(--mvt-d) ease,box-shadow var(--mvt-d) ease,transform var(--mvt-d) ease}
.univers__lien:hover{border-color:var(--vert);box-shadow:var(--ombre-2);transform:translateY(-2px)}
@media (max-width:1023px){.univers{padding:0 var(--e5)}
  }
@media (max-width:640px){.univers{margin-top:var(--e6);padding:0 var(--e4)}
    }

/* ---------------------------------------------------------------- section */
/* Le rythme vertical vient de l'echelle d'espacement, plus de valeurs choisies
   rangee par rangee : l'accueil passait de 70 a 139 px sans regle (F12). */
.section{--section-x:var(--gouttiere);margin-top:var(--e9);padding:0 var(--section-x)}
/* Le filet sous chaque tete de section a ete retire : sur une page qui aligne
   six rangees, il faisait six traits. Le titre editorial et le rythme
   vertical separent assez. */
.section__tete{display:flex;align-items:center;justify-content:space-between;
  /* Le titre editorial est large : sans repli, la tete de section poussait la
     page a 331 px de large sur un ecran de 320. */
  flex-wrap:wrap;
  gap:var(--e5);margin-bottom:var(--e5)}
.section__identite{display:flex;align-items:center;gap:var(--e4);min-width:0}
.section__titre{margin:0;font-size:clamp(26px,3.4vw,44px);font-weight:700;color:var(--vert);
  letter-spacing:-.022em;line-height:1.08;text-wrap:balance}
.section__outils{display:flex;align-items:center;gap:var(--e4);flex:0 0 auto}
.section__lien{font-size:var(--t1);letter-spacing:.08em;font-weight:600;color:var(--brun);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  min-height:var(--tactile);padding:0 var(--e2);border-radius:var(--r-bouton)}
.section__lien:hover{color:var(--vert);background:var(--menthe)}
.rangee__fleches{display:flex;gap:var(--e2)}
.rangee__fleche{width:var(--tactile);height:var(--tactile);border-radius:50%;
  border:1px solid var(--bord);background:var(--surface);display:grid;place-items:center;
  color:var(--vert);transition:background var(--mvt-d) ease,border-color var(--mvt-d) ease}
.rangee__fleche:hover:not(:disabled){background:var(--menthe);border-color:var(--vert)}
.rangee__fleche:disabled{opacity:.35;cursor:default}
/* Les deux fleches d'une paire etaient deux objets differents : un PNG
   masque a gauche, un trace SVG a droite — donc deux poids optiques. Meme
   dessin des deux cotes, retourne par le CSS. L'ancienne regle visait
   `.rangee__fleche [data-defiler]` en DESCENDANT alors que l'attribut est
   porte par le bouton lui-meme : elle ne s'appliquait a rien. */
.rangee__fleche[data-defiler="-1"] .ic{transform:scaleX(-1)}

/* Rangee horizontale, SANS barre de defilement dessinee.
   On avait pose une barre fine permanente pour signaler qu'il restait des
   offres a droite. Elle tirait un trait sous chaque rangee, sur toute la
   largeur de la page — six fois sur l'accueil. Ce que la barre disait est deja
   dit, deux fois : les fleches precedent/suivant, et la carte volontairement
   coupee au bord de la rangee. La rangee garde son focus clavier (fleches
   gauche/droite) et son defilement au doigt. */
.rangee{display:flex;align-items:flex-start;gap:var(--carte-gap);overflow-x:auto;scroll-snap-type:x proximity;
  padding:2px 2px var(--e3);scroll-padding-left:2px;scrollbar-width:none}
.rangee::-webkit-scrollbar{display:none}
.rangee:focus-visible{outline:3px solid var(--vert);outline-offset:4px;border-radius:var(--r-carte)}
/* Rangees de l'accueil (demande du client, 15/09) : les offres d'une section
   defilent de droite a gauche au lieu de passer a la ligne. La carte garde
   EXACTEMENT la largeur d'une colonne de la grille des resultats a la meme
   largeur d'ecran — `100cqw` est la largeur utile de la section (unite de
   conteneur), `--colonnes` le palier de la grille — et le nombre d'offres ne
   la change jamais. La rangee mord sur la gouttiere droite : la carte
   suivante, coupee au bord, dit qu'il en reste ; les fleches de la tete de
   section et le clavier (app.js) font le reste. Sous 640 px, la rangee au
   doigt du telephone garde ses cartes de 84 vw. */
.section{container-type:inline-size}
.rangee--accueil{margin-right:calc(-1 * var(--section-x));padding-right:var(--section-x);
  scroll-padding-left:2px}
@media (min-width:641px){
  .rangee--accueil .carte{flex:0 0 calc((100cqw - (var(--colonnes) - 1) * var(--carte-gap)) / var(--colonnes))}
}

/* ---- carte de bien : la carte « Experience » (refonte du 17/09/2026) --------
   Reproduction du design n° 7 de la planche client. LE composant le plus
   repete du site : accueil, resultats, similaires, envies, profil
   prestataire, Mes biens. Deux parties, trois niveaux d'information :
     A. la photographie, rectangle autonome aux QUATRE coins arrondis ; la
        capsule anthracite translucide en haut a gauche (la meme pour tous les
        univers), le coeur en haut a droite ; le nom puis le lieu en blanc dans
        le bas de la photo, sur un degrade sombre tres progressif ;
     B. la bande blanche sous la photo, coins inferieurs arrondis : la note a
        gauche, le prix a droite. Rien d'autre.
   Un seul objet : coins arrondis, ombre tres legere, aucune bordure. */
.carte{position:relative;flex:0 0 var(--carte-l);min-width:0;
  display:flex;flex-direction:column;border:0;border-radius:var(--r-carte);
  background:var(--surface);color:var(--encre);scroll-snap-align:start;
  box-shadow:var(--ombre-carte);
  transition:box-shadow var(--mvt-d) ease,transform var(--mvt-d) ease}
/* Survol : l'ombre se renforce a peine, la carte se souleve d'un pixel ; la
   photo ne zoome pas et rien ne change au repos. Sur ecran tactile, rien. */
@media (hover:hover){
  .carte:hover{box-shadow:var(--ombre-2);transform:translateY(-1px)}
}
/* A. la photographie : 5:4, quatre coins arrondis, elle se termine AVANT la
   bande — les coins du bas restent visibles sur le socle blanc. */
.carte__visuel{position:relative;aspect-ratio:5/4;overflow:hidden;border-radius:var(--r-carte);
  background:var(--fond-creux);flex:0 0 auto;isolation:isolate;z-index:2;pointer-events:none}
/* Le visuel isole sa pile et passe AU-DESSUS du lien de recouvrement
   (z-index 1) : sans cela le coeur et le titre, meme en z-index 3 dans leur
   pile, restaient sous le lien et ne recevaient jamais le clic (mesure du
   17/09 : « carte__surface intercepts pointer events »). Le visuel laisse
   passer le pointeur vers le lien ; seuls le coeur et le titre le reprennent. */
.carte__coeur,.carte__lien{pointer-events:auto}
.carte__img{display:block;width:100%;height:100%;object-fit:cover}
/* Sans photo : le visuel neutre de l'univers (SVG ivoire + pictogramme) est
   servi comme une image ; le nom se lit alors en encre, sans degrade. */
.carte[data-sans-photo] .carte__legende{background:none;color:var(--encre);text-shadow:none}

/* La capsule en haut a gauche : UNE seule apparence pour tous les univers
   (anthracite translucide, icone et texte blancs), 28 px, pilule, a 12 px
   des bords. La pastille editoriale « Sélection Zihma » est la seule qui
   puisse prendre l'identite Zihma (vert profond, point or) ; elle REMPLACE
   la capsule d'univers, jamais deux pastilles. */
.carte__univers,.carte__badge{position:absolute;top:var(--e3);left:var(--e3);z-index:3;
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 10px;
  max-width:calc(100% - 68px);border-radius:var(--r-pilule);font-size:var(--t1);font-weight:600;
  letter-spacing:.01em;white-space:nowrap;line-height:1;pointer-events:none}
.carte__univers{background:var(--voile-anthracite);color:var(--texte-inverse)}
.carte__univers .ic{width:14px;height:14px;flex:0 0 14px;color:inherit}
.carte__univers > span{overflow:hidden;text-overflow:ellipsis}
.carte__badge{background:var(--vert-encre);color:var(--texte-inverse);padding-left:12px}
.carte__badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--or);flex:0 0 6px}
.carte:has(.carte__badge--selection) .carte__univers{display:none}
.promos .carte__badge{display:none}
.promos .carte:has(.carte__badge--selection) .carte__univers{display:inline-flex}

/* Le coeur : rond blanc de 34 px, coeur sombre, ombre a peine visible ; 44 px
   de cible grace au pseudo-element. Plein quand le bien est dans les envies. */
.carte__coeur{position:absolute;top:var(--e3);right:var(--e3);
  width:34px;height:34px;min-height:0;display:grid;place-items:center;border-radius:50%;
  border:0;background:var(--surface);color:var(--encre);z-index:3;cursor:pointer;
  box-shadow:var(--ombre-1);
  transition:transform var(--mvt-d) ease,color var(--mvt-d) ease}
.carte__coeur::after{content:"";position:absolute;inset:-5px;border-radius:50%}
.carte__coeur:hover{transform:scale(1.06)}
.carte__coeur .ic{width:18px;height:18px;fill:none}
.carte__coeur[aria-pressed="true"]{color:var(--erreur)}
.carte__coeur[aria-pressed="true"] .ic{fill:currentColor}

/* Le nom et le lieu, en bas a gauche DANS la photo, a 14 px des bords. Le
   degrade est quasi transparent jusqu'a mi-hauteur et ne s'affirme que sur
   les derniers pixels : un traitement de contraste, pas un panneau. */
.carte__legende{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:56px 14px 13px;color:var(--texte-inverse);
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 25%,rgba(0,0,0,.34) 60%,rgba(0,0,0,.62) 100%);
  text-shadow:0 1px 2px rgba(0,0,0,.35)}
.carte__surface{position:absolute;inset:0;z-index:1;border-radius:inherit}
.carte__lien{position:relative;z-index:2;pointer-events:auto}
.carte__lien,.carte__lien:hover{color:inherit}
/* Le nom : blanc, gras, deux lignes au plus (`line-clamp`) — un titre court
   reste naturellement sur une ligne. */
.carte__titre{margin:0;font-size:var(--carte-titre);font-weight:700;line-height:1.2;letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.carte__lieu{display:flex;align-items:center;gap:5px;margin:4px 0 0;
  font-size:var(--t2);line-height:1.3;font-weight:500}
.carte__ville{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.carte__lieu .ic{color:inherit;flex:0 0 auto;width:14px;height:14px}

/* B. la bande : compacte (50 px), la note a gauche, le prix a droite, centres
   verticalement. Le montant en vert profond gras, chiffres tabulaires ; la
   devise reste lisible ; l'unite plus petite, rattachee au montant. Un
   montant tres long garde son chiffre entier : l'unite passe dessous. */
.carte__bande{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  min-height:50px;padding:8px 14px 10px;background:var(--surface);
  border-radius:0 0 var(--r-carte) var(--r-carte);flex:1 0 auto}
.carte__note{margin:0;display:inline-flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0;
  font-size:var(--t2);font-weight:600;color:var(--encre);white-space:nowrap}
.carte__note .ic{color:var(--or);width:13px;height:13px;flex:0 0 13px;fill:currentColor}
.carte__note b{font-weight:600;font-variant-numeric:tabular-nums}
.carte__avis{font-weight:400;color:var(--gris-texte)}
.carte__note--vide{min-width:0}
.carte__prix{margin:0 0 0 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;
  gap:1px 4px;flex:0 1 auto;min-width:0;line-height:1.15;color:var(--encre)}
.carte__prix b{font-size:var(--carte-prix);font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--vert);white-space:nowrap}
.carte__devise{font-size:var(--t2);font-weight:700;color:var(--vert)}
.carte__unite{font-size:var(--t1);font-weight:500;color:var(--gris-fort);white-space:nowrap}
/* Promotion active (17/09/2026) : l'ancien prix Client barre, petit et gris,
   sur sa propre ligne au-dessus du nouveau ; la bande garde sa structure. */
.carte__ancien{flex:0 0 100%;font-size:var(--t1);font-weight:500;color:var(--gris-texte);
  text-decoration:line-through;white-space:nowrap;line-height:1.1}
/* Le badge « −20 % » (18/09/2026) : une petite pilule ivoire/or, jamais
   rouge, apres l'unite ; decoratif (l'aria-label de la bande porte le sens).
   Le meme badge se clone dans l'apercu de la carte Leaflet (recherche.js),
   ou l'ancien prix barre precede le prix actuel. */
.carte__promo-badge{display:inline-flex;align-items:center;height:18px;padding:0 7px;
  border-radius:var(--r-pilule);background:var(--or-fond);color:var(--or-texte);
  font-size:var(--t1);font-weight:700;letter-spacing:.02em;line-height:1;white-space:nowrap;
  align-self:center}
.carte-apercu__avant{display:block;font-size:var(--t1);font-weight:500;color:var(--gris-texte);
  text-decoration:line-through;line-height:1.1}
.carte-apercu__prix .carte__promo-badge{margin-left:6px;vertical-align:middle}
/* le badge d'une remise en montant (« −20 000 F CFA ») est long : l'apercu
   laisse le prix passer a la ligne plutot que de le couper */
.carte-apercu__prix:has(.carte-apercu__avant){white-space:normal;text-align:right}
.carte:focus-within{outline:none}

/* Variante Pro (« Mes biens ») : la meme carte ; le statut et la barre
   d'actions vivent SOUS la bande, hors du contenu public. Le coeur (envies
   d'un client) n'a pas de sens pour le prestataire sur ses propres biens. */
.carte__actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"statut menu" "a1 a2";
  align-items:center;gap:var(--e2);padding:10px 14px 12px;
  border-top:1px solid var(--bord);position:relative;z-index:2}
/* Deux rangees nettes (demande client du 17/09) : le statut a gauche et le
   menu « ⋯ » a droite, puis les deux actions de meme largeur — l'action du
   statut (Modifier / Compléter / Réactiver) pleine, « Aperçu » en contour. */
.carte--pro .carte__coeur{display:none}
.carte--pro .carte__actions .pilule-etat{grid-area:statut;justify-self:start;margin:0}
.carte--pro .carte__actions .menu-plus{grid-area:menu;justify-self:end}
/* Les deux actions : meme hauteur (40), meme rayon, meme typo (14 / 600),
   meme rembourrage, toujours sur la meme ligne, largeur egale, etires a la
   meme hauteur si l'un passe sur deux lignes ; le calque tactile de 44 px
   (pro.css) n'agrandit pas la boite. */
.carte--pro .carte__actions > .bouton{grid-row:2;align-self:stretch;min-width:0;width:100%;
  --b-haut:40px;--b-marge:0 var(--e2);--b-texte:var(--t3)}
/* Le menu « ⋯ » (capture du 17/09 : « les boutons doivent être lisibles et
   visibles ») : un rond de 40 px, filet fin et fond en creux, trois points
   d'encre dessines en CSS (pas de glyphe qui depend de la police), cible de
   44 px par calque. Repérable, jamais dominant : il reste secondaire face
   aux deux actions. */
.carte--pro .carte__actions .menu-plus summary{width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  border:1px solid var(--bord-carte);background:var(--fond-creux);color:var(--encre);cursor:pointer}
/* le calque tactile est en ::before : ::after porte l'infobulle data-info */
.carte--pro .carte__actions .menu-plus summary::before{content:"";position:absolute;left:50%;top:50%;
  width:var(--tactile);height:var(--tactile);transform:translate(-50%,-50%);border-radius:50%}
.carte--pro .carte__actions .menu-plus summary > [aria-hidden]{display:block;width:18px;height:4px;font-size:0;line-height:0;
  background:radial-gradient(circle,currentColor 2px,transparent 2.5px) 0 0/6px 4px repeat-x}
.carte--pro .carte__actions .menu-plus summary:hover,
.carte--pro .carte__actions .menu-plus summary:focus-visible,
.carte--pro .carte__actions .menu-plus[open] > summary{background:var(--surface);border-color:var(--encre);color:var(--encre)}
/* La zone d'actions se cale au bas de la carte : dans une rangee, toutes les
   cartes ont la meme hauteur (grille etiree), la bande absorbe l'ecart, la
   photo garde son 5:4. */
.carte--pro .carte__actions{margin-top:auto}
/* Sans photo (data-sans-photo) : le visuel neutre de l'univers pose son
   pictogramme au centre ; sur une carte etroite (390 px : 170 px de large)
   le nom, en encre, venait le recouvrir. Le visuel est remonte d'un cinquieme :
   le pictogramme se lit dans le tiers haut, le nom garde son socle. */
.carte--pro[data-sans-photo] .carte__img{height:120%;margin-top:-20%}
/* La liste « ⋯ » prend la largeur de son contenu, jamais plus que l'ecran.
   (Un max-width ne retient pas une liste ancree a droite qui sort a gauche :
   c'est la regle nth-child(odd) du bloc 640 px, plus bas, qui s'en charge.) */
.carte--pro .carte__actions .menu-plus__liste{min-width:0;width:max-content;max-width:calc(100vw - 2 * var(--e4))}
/* La carte dont le menu est ouvert passe au-dessus de ses voisines : la liste
   s'etendait SOUS la photo de la carte du dessous (z-index 2 des deux cotes). */
.carte--pro:has(.menu-plus[open]){z-index:30}
@media (max-width:640px){
  /* grille a deux colonnes : les deux actions s'empilent en pleine largeur */
  .grille .carte--pro .carte__actions{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"statut menu" "a1 a1" "a2 a2";padding:8px 10px 10px}
  .grille .carte--pro .carte__actions > .bouton{grid-row:auto;grid-column:1 / -1;--b-marge:0 var(--e1)}
  /* la pilule (« Suspendue », « À compléter ») passe sur deux lignes plutot que de sortir de la carte */
  .grille .carte--pro .carte__actions .pilule-etat{min-width:0;max-width:100%;white-space:normal;text-align:left;font-size:var(--t3);line-height:1.2}
  /* 17/09/2026 : sur la carte de GAUCHE, la liste ancree a droite du bouton
     commencait hors de l'ecran (mesure : left -22 px a 390, -57 px a 320) ;
     elle s'ancre a gauche du bouton, dans l'ecran (138 -> 338 px a 390). */
  .grille .carte--pro:nth-child(odd) .carte__actions .menu-plus__liste{right:auto;left:0}
}

/* Sous 640 px, la grille des resultats passe a DEUX colonnes de la meme carte
   verticale (quatre offres par ecran au lieu d'une) ; les rangees gardent
   leur carte de 72 vw. Le prix, plus etroit, laisse l'unite passer dessous. */
@media (max-width:640px){
  .grille{--colonnes:2;gap:var(--e3)}
  /* la bande s'empile : la note sur sa ligne, le prix sur la sienne, le
     chiffre jamais coupe ; la note vide garde sa hauteur (cartes alignees) */
  .grille .carte__bande{padding:8px 10px 10px;flex-direction:column;align-items:flex-start;gap:2px;min-height:0}
  .grille .carte__note{min-height:18px}
  .grille .carte__prix{margin-left:0;justify-content:flex-start}
  .grille .carte__legende{padding:44px 10px 10px}
  .grille .carte__univers,.grille .carte__badge{left:8px;top:8px;max-width:calc(100% - 56px);padding:0 8px;gap:4px}
  .grille .carte__badge::before{display:none}
  .grille .carte__coeur{right:8px;top:8px}
}

/* ------------------------------------------------- grille de resultats */
/* Le nombre de colonnes est FIXE par palier (`--colonnes`), jamais deduit du
   nombre de cartes : trois offres dans une grille de quatre laissent un
   emplacement vide, elles ne s'etirent pas. Aucun `auto-fit`, aucun `1fr`
   libre. Les paliers sont ceux du fichier (480/640/900/1023/1240/1500). */
:root{--colonnes:4}
.grille{display:grid;grid-template-columns:repeat(var(--colonnes),minmax(0,1fr));
  gap:var(--carte-gap);align-content:flex-start}
.grille .carte{flex:none;width:100%}
@media (min-width:1728px){:root{--colonnes:5}}
@media (max-width:1239px){:root{--colonnes:3}}
@media (max-width:899px){:root{--colonnes:2}}
@media (max-width:640px){:root{--colonnes:1}}

@media (max-width:1023px){
  .section{--section-x:var(--e5);margin-top:var(--e8);padding:0 var(--section-x)}
  }
@media (max-width:640px){
  .section{--section-x:var(--e4);margin-top:var(--e7);padding:0 var(--section-x)}
  .section__tete{margin-bottom:var(--e4);gap:var(--e3)}
  .rangee__fleches{display:none}         /* le doigt fait defiler, pas la fleche */
  .carte{flex:0 0 min(72vw,300px)}
  :root{--carte-l:min(72vw,300px)}
  .grille .carte{flex:none}
}

/* -------------------------------------------------------------- editorial */
.edito{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--e5);
  margin:var(--e9) var(--gouttiere) 0;align-items:stretch}
.edito__grand{position:relative;border-radius:var(--r-hero);overflow:hidden;min-height:420px;
  isolation:isolate}
.edito__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* La photo n'est plus noyee sous un voile vert (audit du 16/09) : un degrade
   neutre, transparent en haut, encre en bas, ne sert que le texte pose dessus. */
.edito__voile,.pub__voile{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,14,14,.06) 0%,rgba(14,14,14,.32) 45%,rgba(14,14,14,.78) 100%)}
.edito__corps{position:relative;padding:var(--e7) var(--e6);height:100%;display:flex;
  flex-direction:column;justify-content:flex-end;color:var(--texte-inverse)}
/* Un fond blanc translucide ECLAIRCIT la zone au lieu de l'assombrir : le badge
   etait a 2,78:1 sur un ciel clair, pour 4,5 exiges a 11,5 px. Aplat plein. */
.edito__badge{align-self:flex-start;font-size:var(--t1);letter-spacing:.1em;font-weight:700;
  background:var(--vert-sombre);color:var(--texte-inverse);
  border-radius:var(--r-pilule);padding:8px 15px}
.edito__titre{margin:var(--e4) 0 0;font-size:clamp(24px,3vw,40px);line-height:1.14;
  font-weight:700;max-width:18ch;text-wrap:balance}
.edito__texte{margin:var(--e3) 0 0;font-size:var(--t4);max-width:46ch;opacity:.95}
.edito__bouton{margin-top:var(--e5);align-self:flex-start;background:var(--surface);color:var(--vert)}
.edito__bouton:hover{background:var(--menthe)}
.edito__colonne{display:flex;flex-direction:column;gap:var(--e5)}
.edito__carte{flex:1;padding:var(--e5);text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--e2);background:var(--surface);transition:box-shadow var(--mvt-d) ease,transform var(--mvt-d) ease}
.edito__carte-sur{font-size:var(--t1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brun)}
.edito__carte-lire{display:inline-flex;align-items:center;gap:6px;margin-top:var(--e1);font-size:var(--t2);font-weight:600;color:var(--vert)}
.edito__carte:hover{box-shadow:var(--ombre-2);transform:translateY(-2px)}
/* Plus de fond peche (teinte vue nulle part ailleurs sur le public) : ivoire creux. */
.edito__carte--chaud{background:var(--fond-creux);border-color:var(--fond-creux)}
.edito__carte-titre{margin:0;font-size:var(--t7);font-weight:700;color:var(--vert);text-wrap:balance}
.edito__carte-texte{margin:0;font-size:var(--t3);color:var(--gris-texte);line-height:1.5}
@media (max-width:1023px){.edito{grid-template-columns:minmax(0,1fr);margin:var(--e8) var(--e5) 0}
  .edito__colonne{flex-direction:row;flex-wrap:wrap}
  .edito__carte{flex:1 1 220px}}
@media (max-width:640px){.edito{margin:var(--e7) var(--e4) 0;gap:var(--e4)}
  .edito__grand{min-height:340px}.edito__corps{padding:var(--e5) var(--e4)}
  .edito__colonne{flex-direction:column;gap:var(--e3)}}

/* ------------------------------------------- decouverte par univers
   Six tuiles a la place de deux rangees de cartes : une photo du catalogue,
   le nom, l'accroche et le nombre d'offres. Un RAYON, pas un carrousel de
   plus — la forme change, la lecture aussi. Trois colonnes, puis deux, puis
   une liste sur telephone : tout est visible sans defilement horizontal. */
.univ{margin-top:var(--e8);padding:0 var(--gouttiere)}
.univ__tuile{display:flex;align-items:center;gap:var(--e4);padding:var(--e3);
  background:var(--surface);
  color:var(--encre);min-height:var(--tactile);
  transition:border-color var(--mvt-d) ease,box-shadow var(--mvt-d) ease}
.univ__tuile:hover,.univ__tuile:focus-visible{border-color:var(--vert);box-shadow:var(--ombre-2)}
@media (max-width:1023px){.univ{padding:0 var(--e5)}
  }
@media (max-width:640px){.univ{margin-top:var(--e6);padding:0 var(--e4)}
    .univ__tuile{gap:var(--e2);padding:var(--e2)}
      }

/* --------------------------------------------- confiance + fonctionnement
   Quatre garanties definies ailleurs dans le site (verification, prix,
   paiement, annulation), puis les trois etapes. Une section, un titre. */
.confiance{margin:var(--e9) var(--gouttiere) 0}
.confiance__grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e4)}
.confiance__item{padding:var(--e5);background:var(--fond-creux);border-top:var(--filet-or)}
.confiance__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--menthe);color:var(--vert)}
.confiance__titre{margin:var(--e4) 0 0;font-size:var(--t5);font-weight:700;color:var(--encre)}
.confiance__texte{margin:var(--e2) 0 0;font-size:var(--t3);line-height:1.55;color:var(--gris-texte)}
.confiance .marche__titre{margin:var(--e8) 0 var(--e6);font-size:var(--t9)}
.confiance .marche__etapes{text-align:center}
@media (max-width:1023px){.confiance{margin:var(--e8) var(--e5) 0}
  .confiance__grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.confiance{margin:var(--e7) var(--e4) 0}
  .confiance__grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e2)}
  .confiance__item{padding:var(--e3)}
  .confiance__ic{width:36px;height:36px}
  .confiance__titre{margin-top:var(--e3);font-size:var(--t3)}
  .confiance__texte{font-size:var(--t1)}
  .confiance .marche__titre{margin:var(--e7) 0 var(--e5)}
  .confiance .marche__etapes{grid-template-columns:minmax(0,1fr);gap:var(--e4)}
  .confiance .marche__etapes::before{display:none}
  /* etape en ligne : pastille a gauche, titre et texte a droite */
  .confiance .marche__etape{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:var(--e3);text-align:left}
  .confiance .marche__pastille{width:56px;height:56px;grid-row:1/3;font-size:var(--t8)}
  .confiance .marche__etape-titre{margin:0;align-self:end}
  .confiance .marche__etape-texte{margin:var(--e1) 0 0;max-width:none}}

/* --------------------------------------------------------- appel final
   Le dernier ecran dit quoi faire. Un seul bouton plein — chercher — et le
   parcours prestataire en lien, pour ne pas faire concurrence a la recherche. */
.appel{margin:var(--e9) var(--gouttiere) var(--e9);padding:var(--e7) var(--e6);
  border-radius:var(--r-hero);background:var(--fond-creux);color:var(--encre);text-align:center;
  border-top:var(--filet-or)}
.appel__titre{margin:0;font-size:clamp(24px,3vw,var(--t13));font-weight:700;letter-spacing:-.02em;
  line-height:1.1;text-wrap:balance;color:var(--vert)}
.appel__texte{margin:var(--e3) auto 0;max-width:52ch;font-size:var(--t4);line-height:1.55;color:var(--gris-texte)}
.appel__actions{margin-top:var(--e5);display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:var(--e3) var(--e5)}
.appel__bouton{background:var(--vert);color:var(--texte-inverse)}
.appel__bouton:hover{background:var(--vert-sombre)}
.appel__second{display:inline-flex;align-items:center;gap:6px;min-height:var(--tactile);
  color:var(--vert);font-size:var(--t3);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.appel__second:hover{color:var(--vert-sombre)}
@media (max-width:1023px){.appel{margin:var(--e8) var(--e5) var(--e8);padding:var(--e6) var(--e5)}}
@media (max-width:640px){.appel{margin:var(--e7) var(--e4) var(--e7);padding:var(--e5) var(--e4)}
  .appel__actions{flex-direction:column}}

/* -------------------------------------------------- comment ca marche */
.marche{margin:var(--e9) var(--gouttiere) var(--e9);text-align:center}
.marche__titre{margin:0 0 var(--e7);font-size:clamp(26px,3.4vw,44px);font-weight:700;
  color:var(--vert);letter-spacing:-.022em;line-height:1.08}
.marche__etapes{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
/* le filet passe derriere, a hauteur du bas des pastilles */
.marche__etapes::before{content:"";position:absolute;left:20px;right:20px;top:78px;
  height:1px;background:var(--bord)}
.marche__etape{position:relative}
.marche__pastille{width:80px;height:80px;margin:0 auto;border-radius:50%;background:var(--fond);
  border:2px solid var(--vert);color:var(--vert);display:grid;place-items:center;
  font-size:var(--t10);font-weight:700}
/* Le brun est l'accent de l'espace Prestataire : sur le site public, les trois
   etapes sont vertes (audit du 16/09, incoherence n° 14). */
.marche__pastille--brun{border-color:var(--vert);color:var(--vert)}
.marche__etape-titre{margin:var(--e5) 0 0;font-size:var(--t7);font-weight:600;color:var(--vert)}
.marche__etape-texte{margin:var(--e3) auto 0;font-size:var(--t3);color:var(--gris-texte);
  max-width:36ch;line-height:1.55}
@media (max-width:1023px){.marche{margin:var(--e8) var(--e5) var(--e8)}}
@media (max-width:640px){.marche{margin:var(--e7) var(--e4) var(--e7)}
  .marche__etapes{grid-template-columns:minmax(0,1fr);gap:var(--e6)}
  .marche__etapes::before{display:none}
  .marche__pastille{width:64px;height:64px;font-size:var(--t9)}}

/* --------------------------------------------------------------- pied */
/* Le motif tisse est la signature : il n'apparait qu'UNE fois par page, en
   bande au-dessus du pied. Pose partout il deviendrait du papier peint ; pose
   ici il ferme la page comme une lisiere de pagne. */
.pied::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;
  background:var(--motif-tisse) repeat-x center/16px 16px;opacity:.55;
  border-radius:var(--r-hero) var(--r-hero) 0 0}
/* Lot 5 : un seul bloc vert, aligne sur la GOUTTIERE du site (la meme que
   l'en-tete et l'appel de l'accueil : 60 px, 16 sous 480) et non plus a 32 px
   du bord, ou il debordait de tout ce qui le precede. Les quatre colonnes
   (marque + trois listes) tiennent dans 1 280 px quel que soit l'ecran ; la
   ligne legale ferme le bloc sous un filet, dans le meme aplat. */
.pied{position:relative;overflow:hidden;margin:var(--rythme-grand) var(--gouttiere) 0;
  background:var(--vert);color:var(--texte-inverse);border-radius:var(--r-hero);
  padding:var(--e7) var(--e6) 0}
.pied__haut{max-width:var(--page);margin:0 auto;display:grid;
  grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(0,1fr));gap:var(--e6) var(--e7);
  padding-bottom:var(--e6)}
.pied__marque{display:flex;flex-direction:column;align-items:flex-start}
.pied__signature{margin:var(--e4) 0 0;font-size:var(--t4);max-width:30ch;opacity:.92;line-height:1.5}
.pied__reseaux{display:flex;gap:var(--e1);margin-top:var(--e5)}
/* Les reseaux etaient des images de 32 px : trop petites pour un doigt. */
.pied__reseau{width:var(--tactile);height:var(--tactile);display:grid;place-items:center;
  border-radius:50%;transition:background var(--mvt-d) ease}
.pied__reseau:hover{background:var(--voile-filet)}
/* Le glyphe est un SVG : il herite la couleur du pied (blanc) par
   `currentColor`, il n'y a plus de variante de fichier a fabriquer. */
.pied__reseau-ic{color:currentColor}
.pied__colonne summary{list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3);cursor:default;pointer-events:none}
.pied__colonne summary::-webkit-details-marker{display:none}
.pied summary .pied__chevron{display:none}
/* Titre de colonne : capitales espacees et filet d'or, distincts des liens. */
.pied__titre{margin:0 0 var(--e3);padding-bottom:var(--e2);font-size:var(--t1);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--or-sur-vert);position:relative}
.pied__titre::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:1px;background:var(--or);opacity:.8}
.pied__liste{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pied__liste a{display:inline-flex;align-items:center;min-height:40px;font-size:var(--t4);
  color:var(--texte-inverse);transition:opacity var(--mvt)}
.pied__liste a:hover{text-decoration:underline;text-underline-offset:3px}

/* La ligne legale : dans le meme bloc, sous un filet, plus discrete. */
.basdepage{max-width:var(--page);margin:0 auto;padding:var(--e4) 0 var(--e5);
  border-top:1px solid var(--voile-filet);display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3) var(--e5);flex-wrap:wrap;font-size:var(--t2);color:var(--texte-inverse)}
.basdepage__copie{opacity:.8}
.basdepage__legaux{display:flex;gap:var(--e2) var(--e4);flex-wrap:wrap}
.basdepage a{display:inline-flex;align-items:center;min-height:var(--tactile);opacity:.85}
.basdepage a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}

@media (max-width:1100px){
  .pied__haut{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pied__marque{grid-column:1 / -1}
}
/* Memes retraits que l'en-tete, l'edito et les univers : 24 px sous 1024, 16 sous 640. */
@media (max-width:1023px){.pied{margin-left:var(--e5);margin-right:var(--e5)}}
@media (max-width:640px){
  .pied{margin:var(--rythme-section) var(--e4) 0;padding:var(--e6) var(--e5) 0}
  .pied__haut{grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:var(--e4)}
  .pied__marque{padding-bottom:var(--e4);border-bottom:1px solid var(--voile-filet);margin-bottom:var(--e2)}
  /* accordeons : une ligne par colonne, le chevron dit qu'elle s'ouvre */
  .pied__colonne{border-bottom:1px solid var(--voile-filet)}
  .pied__colonne summary{pointer-events:auto;cursor:pointer;min-height:var(--tactile)}
  .pied__colonne summary:focus-visible{outline:2px solid var(--texte-inverse);outline-offset:2px;border-radius:var(--r1)}
  .pied__titre{margin:0;padding:0}
  .pied__titre::after{display:none}
  .pied summary .pied__chevron{display:block;flex:0 0 auto;transition:transform var(--mvt-lent)}
  .pied__colonne[open] .pied__chevron{transform:rotate(180deg)}
  .pied__liste{padding:0 0 var(--e3)}
  .basdepage{flex-direction:column;align-items:flex-start;padding:var(--e4) 0}
}

@media (max-width:900px){
  .entete__partenaire,.entete__profil{padding:0 16px}
}
@media (max-width:640px){
  .entete,.entete__inner{min-height:64px}
  .entete__inner{padding:var(--e2) var(--e4)}
  .section__tete{gap:var(--e3)}
  .marche__titre,.resultats__titre{font-size:var(--t10)}
}
/* Sous 480 px la carte ne tient plus sa largeur de reference : elle occupe la
   colonne, en gardant ses proportions. */
@media (max-width:480px){
  :root{--gouttiere:16px;--carte-gap:14px}
}

/* Icones vectorielles inserees dans la page : la couleur suit le contexte. */
/* Les photos sont enrobees dans un <picture> pour servir du WebP. Sans cette
   ligne, l'enrobage cree une boite intermediaire : une image en position
   absolue se calait alors sur le <picture> (de taille nulle) au lieu de son
   conteneur, et disparaissait — c'est ce qui est arrive a la texture de
   l'ecran de connexion. `display:contents` retire cette boite de la mise en
   page : l'image se comporte comme si elle etait restee enfant direct. */
picture{display:contents}
/* et son <source> ne devient pas un item de flex/grid de largeur nulle
   (12 px de gouttiere fantome devant chaque image dans une rangee) */
picture > source{display:none}

.ic{display:block;flex:0 0 auto}
svg.ic{overflow:visible}

/* ---- format unique des CARTES ---------------------------------------------
   Onze familles portaient cinq rayons (14, 16, 18, 20 px et --r-carte) et deux
   couleurs de filet. Rayon et filet sont poses ici une fois ; les regles qui
   suivent ne portent plus que le fond, le rembourrage et l'ombre. */
.esp-wcarte,
.cnt-carte,
.edito__carte,
.choix__carte,
.auth-nature__carte,
.confirme__carte,
.pro-detail__carte,
.pro-tarif__carte,
.esp-compte__carte,
.localisation__carte,
.esp-bloc,
.plan,
.partenaire,
.cnt-pro,
.cnt-pro__aside,
.encadre,
.item,
.univ__tuile,
.confiance__item,
.boite-tab,
.pro-menu,
.avis__resume,
.stat,.reglage,.moyen,.liste-compacte,.table-boite,.esp-prochaine,.pro-table--resa tr,.pub-progression,.pub-mode__carte,
.esp-filtres,.fil-bloc--compact,.cnt-chiffre{border:var(--carte-bord);border-radius:var(--r-carte)}

/* ---- format unique des CHAMPS ---------------------------------------------
   Cinq hauteurs (44, 52, 56, 60, 62 px) pour la meme commande. Une seule
   desormais. `.filtres__champ` garde --tactile (barre de filtres compacte),
   `.barre__champ` garde la sienne (barre de recherche du heros) et
   `.champ-auth__boite` garde 60 px : la planche d'authentification est dessinee
   a 1728 px (voir ECARTS §2.2) et cette hauteur en est une cote relevee —
   l'ecraser a 56 defairait un releve, sur des ecrans ou aucun autre champ ne
   sert de comparaison. TROIS exceptions assumees, tout le reste suit
   --champ-haut.

   Le RAYON manquait a cet appel. Hauteur, marge et bordure etaient unifiees,
   mais chaque famille gardait ses coins : mesure faite, `.champ2__boite`,
   `.esp-champ2__b` et `.esp-tel` n'en declaraient aucun et sortaient donc a
   angle droit — 10 champs sur le seul ecran de publication d'un sejour, 5 sur
   le profil client — a cote de champs arrondis a 14 px sur les memes parcours.
   Il est ici, avec le reste du format. */
.champ2__boite,
.esp-champ,
.esp-champ2__b,
.esp-tel,
.cnt-form__b,
.encadre__saisie{height:var(--champ-haut);padding:var(--champ-marge);
  border:var(--champ-bord);border-radius:var(--r-champ)}

/* ---- format unique du MOT « OBLIGATOIRE » ------------------------------------
   L'asterisque seul se perd a la loupe et ne se dit pas : il reste comme
   decor (aria-hidden) et le mot porte l'information. `_requis()` est ecrit
   dans les DEUX espaces — la regle ne pouvait pas rester dans pro.css. */
.champ-requis{display:inline-block;margin-left:6px;color:var(--brun);font-size:var(--t1);
              font-weight:500;font-style:normal;vertical-align:1px;white-space:nowrap}
.champ-requis::before{content:"· "}

/* ---- format unique d'un MONTANT SIGNE ----------------------------------------
   Le montant d'un mouvement, colore par son sens. Les Finances du Prestataire
   et l'historique du Wallet Client affichent le meme objet ; le ton `brun`
   n'avait aucune regle, il en a une. */
.pro-montant{font-size:var(--t6);font-weight:600}
.pro-montant[data-ton="vert"]{color:var(--vert)}
.pro-montant[data-ton="rouge"]{color:var(--erreur)}
.pro-montant[data-ton="brun"]{color:var(--brun)}

/* ---- format unique des CINQ ETATS (§10.1) ------------------------------------
   « Chaque ecran de liste ou de detail implemente les 5 etats : chargement,
   vide, erreur, hors ligne, contenu. » Trois familles les posent — les pages
   de resultats, les listes de l'espace Client, celles du Prestataire — et
   elles ne chargent pas les memes feuilles. Le format est donc ici ; la marge
   de la page de resultats et sa mecanique de visibilite restent chez elle. */
.etat{padding:var(--e6) var(--e5);border-radius:var(--r-carte);
  background:var(--fond-creux);border:1px solid var(--bord);font-size:var(--t4);
  color:var(--gris-texte);text-align:center}
.etat--erreur{background:var(--carte-chaud);border-color:var(--brun-clair);color:var(--encre)}

/* ---- format unique d'une ZONE DE TEXTE BORNEE --------------------------------
   Le message au Prestataire (§6.6 etape 1, 300 car.) et le commentaire d'un
   avis (RG-140, 1 000 car.) ont la meme forme. `.champ2__boite` a une hauteur
   fixe faite pour UNE ligne : la zone reprend son rayon, son trait et son
   rembourrage, mais grandit et ne se redimensionne que verticalement, pour ne
   jamais deborder de sa colonne. */
.blocres__message{display:block;width:100%;min-height:118px;resize:none;
  padding:var(--champ-marge);border:var(--champ-bord);border-radius:var(--r-champ);
  background:var(--surface);font:inherit;color:inherit;line-height:1.5}
.blocres__message:focus{outline:none;border-color:var(--vert);
  box-shadow:0 0 0 3px var(--menthe)}
.blocres__message::placeholder{color:var(--gris-faible)}

/* ---- format unique d'une LIGNE DE CONSENTEMENT ------------------------------
   Une case obligatoire et son texte : le tunnel de reservation en pose une
   (§6.6, les CGV) et la verification du compte Prestataire trois (§6.16.1
   etape 5). Le format etait dans reservation.css, que les pages Pro ne
   chargent pas — les trois cases du KYC sortaient donc nues. */
.paiement__cgv{display:flex;align-items:flex-start;gap:var(--e3);
  font-size:var(--t3);line-height:1.5;cursor:pointer}
.paiement__cgv input{width:20px;height:20px;flex:0 0 20px;margin:1px 0 0;
  accent-color:var(--vert)}
.paiement__cgv + .paiement__cgv{margin-top:var(--e3)}

/* ---- format unique des PILULES et des BADGES -------------------------------
   Quinze familles, sept rembourrages, cinq tailles de texte. Deux formats
   suffisent : la PILULE est actionnable (hauteur pleine, cible tactile), le
   BADGE est une etiquette qui ne se clique pas.
   `min-height:0` : les pilules de segment sont tantot des <a> (messagerie),
   tantot des <button> (les vues « À venir / Passées » de ECR-C09). Sans cette
   ligne, `button{min-height:var(--tactile)}` donnait 44 px aux unes et 34 aux
   autres — deux hauteurs pour une meme pilule. La cible tactile reste tenue la
   ou elle compte : @media (pointer:coarse) les remonte toutes a 44 px.
   `min-height` et non `height` : un libelle d'etat long (« En attente de
   confirmation ») peut passer sur deux lignes dans une table dense sans
   deborder de sa pilule ; sur une ligne, rien ne change. */
.seg-pilule,
.pilule-etat,
.etiq{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  min-height:var(--pil-haut);height:auto;padding:var(--pil-marge);
  border-radius:var(--r-pilule);font-size:var(--t4);font-weight:600}
.recap__badge,
.item__badge,
.pro-camp__badge,
.esp-paie__badge{display:inline-flex;align-items:center;gap:6px;font-weight:600}

/* Ces conteneurs ne fixaient aucune couleur de texte : leur icone heritait
   d'une teinte sombre sur un aplat sombre. Elle suit desormais le conteneur. */
.pro-visuel__rond{color:var(--texte-inverse)}

/* ------------------------------------------------- « Biens similaires »
   Tous les biens similaires sur UNE ligne (consigne client du 16/09) : la
   rangee qui defile de l'accueil, posee dans la colonne de la fiche. La carte
   garde exactement la largeur d'une colonne de la grille a la meme largeur
   d'ecran (`100cqw` = largeur utile de la section, `--colonnes` le palier) ;
   la quatrieme, coupee au bord, dit qu'il en reste ; les fleches de la tete
   et le clavier (app.js) font defiler. Deux cartes dans une rangee de trois
   restent deux cartes de taille normale. */
.simil{container-type:inline-size}
.simil__tete{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3) var(--e4);margin-bottom:var(--e4);flex-wrap:wrap}
.simil__tete .bloc__titre{margin:0;min-width:0;flex:1 1 auto}
@media (min-width:641px){
  .rangee--simil .carte{flex:0 0 calc((100cqw - (var(--colonnes) - 1) * var(--carte-gap)) / var(--colonnes))}
}
/* En pleine largeur (Immobilier, Restauration), la rangee des similaires suit
   les colonnes de l'accueil et des resultats : meme gouttiere, meme taille de
   carte. Seule la section posee DANS la colonne de la fiche — qui n'est une
   colonne qu'au-dessus de 1100 px, l'encadre passant dessous avant —
   resserre a 3 colonnes (2 jusqu'a 1239, 4 des 1728). Sous 1100 la colonne
   est pleine largeur et suit les paliers du site. */
@media (min-width:1101px){
  .fiche__gauche .rangee--simil{--colonnes:3}
  @media (max-width:1239px){.fiche__gauche .rangee--simil{--colonnes:2}}
  @media (min-width:1728px){.fiche__gauche .rangee--simil{--colonnes:4}}
}

/* FILET DE SECURITE CONTRE LES DEFORMATIONS.
   Les feuilles de style imposent souvent une largeur ET une hauteur a une icone
   (`.esp-aide img{width:24px;height:20px}`). Sans `object-fit`, l'image est
   ETIREE pour remplir la boite : une fleche carree devenue 30x22, un telephone
   24x20, une carte bancaire aplatie de 17 %. `contain` inscrit le dessin dans
   la boite en gardant ses proportions ; il ne change rien quand la boite a deja
   le bon rapport. La regle vaut pour toute image d'interface, jamais pour les
   photographies : celles-ci veulent `cover` et le declarent chacune. */
img.ic-img,
.esp__rond img,.esp-aide img,.esp-assist__t img,
.pro-carre img,.pro-promo img,.pro-acte img,.pro__outil img,.pro__jeton img,
.entete__logo,.pied__logo,.auth__logo{object-fit:contain}

/* Les logos ont un rapport tres allonge (405 x 138) : on ne fixe QUE la hauteur,
   la largeur suit. Fixer les deux les ecrasait de 8 %. */
/* Borner les DEUX cotes sans en fixer aucun. Fixer la hauteur et laisser la
   largeur libre demande deux choses contradictoires des que la place manque :
   `object-fit:contain` sauve alors le dessin en le letterboxant — la
   proportion est juste, mais la boite ne l'est plus et le logo parait plus
   petit qu'il ne devrait. Mesure : 91,7 x 31,3 au lieu de 99,8 x 34 a 1280 px. */
.entete__logo,.pied__logo,.auth__logo{width:auto;height:auto;max-width:100%}
.entete__logo{max-height:34px}
.pied__logo{max-height:44px}
.auth__logo{max-height:44px;width:auto}
.barre__icone{color:var(--brun);opacity:1}
.barre__loupe{color:var(--texte-inverse)}

/* ================================================================
   Fiche de details (planche WEB, groupe « FICHE DE DETAILS »)
   Frame 1280 px, gouttiere --gouttiere (la valeur en dur qui vivait
   ici etait ecrasee plus bas par la regle au jeton : elle mentait).
   ================================================================ */
/* 48 px de rembourrage + 20 de marge faisaient 68 px de vide entre l'entete et
   le fil d'Ariane : un demi-ecran de telephone avant le premier mot. */
.fiche__haut{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  gap:var(--e2) var(--e4);padding-top:var(--e2)}
/* « Retour » : le premier geste de la fiche. Il remonte l'historique quand on
   vient du site (shell.js), sinon il mene a l'univers. Discret — il ne
   concurrence pas le titre — mais visible et au clavier. */
.fiche__retour{display:inline-flex;align-items:center;gap:6px;min-height:var(--tactile);
  padding:0 var(--e3) 0 var(--e2);margin-left:calc(var(--e2) * -1);border-radius:var(--r-pilule);
  font-size:var(--t3);font-weight:600;color:var(--vert);transition:background var(--mvt)}
.fiche__retour:hover{background:var(--menthe)}
.fiche__retour .ic{flex:0 0 auto}
/* Le fil d'Ariane donne le contexte, discretement : il n'est ni la barre des
   univers, ni la recherche, ni le retour. Il se replie sur plusieurs lignes. */
.fildariane{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--e2);min-width:0;
  font-size:var(--t2);color:var(--gris-faible)}
.fiche__retour + .fildariane{padding-left:var(--e3);border-left:1px solid var(--bord)}
/* Un maillon reste une cible tactile : la hauteur vient du lien, pas du texte. */
.fildariane a,.fildariane [aria-current]{display:inline-flex;align-items:center;
  min-height:var(--tactile)}
.fildariane a:hover{color:var(--encre)}
.fildariane [aria-current]{color:var(--gris-texte);font-weight:500}
/* Le chevron appartient au maillon qu'il precede : il se replie avec lui.
   « / "" » le laisse muet pour les lecteurs d'ecran. */
.fildariane > * + *::before{content:"\203A";margin-right:var(--e2);opacity:.5}
.fildariane > * + *::before{content:"\203A" / ""}
.fiche__actions{display:flex;flex-wrap:wrap;gap:14px}
.fiche__secondaires{flex:0 0 auto}
.fiche__action{background:var(--surface);border:1px solid var(--bord)}
.fiche__action .ic{color:var(--vert)}
.fiche__action[aria-pressed="true"]{border-color:var(--vert);background:var(--menthe);color:var(--vert-encre)}
.fiche__action[aria-pressed="true"] .ic{color:var(--erreur);fill:currentColor}

/* ---- barre d'action de la fiche -------------------------------------------
   Sous 1100 px l'encadre tombe apres toute la colonne de gauche : le prix
   etait a 4 039 px et le bouton a 4 295 px sur un telephone, soit cinq ecrans,
   sans aucun rappel entre les deux. La barre les remet a portee.
   `sticky` et non `fixed` : elle s'efface d'elle-meme a l'arrivee du pied de
   page, sans rembourrage de compensation. Meme idiome que le panneau de
   filtres de la recherche. */
.fiche__barre{display:none}
/* Tant que l'encadre est SOUS le contenu (une colonne, jusqu'a 1100 px), la
   barre rappelle le prix et l'action au bas de l'ecran — pas seulement sur
   telephone : a 768 ou 1024 px l'encadre est a trois ecrans. */
@media (max-width:1100px){
  .fiche__barre{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);position:sticky;bottom:0;z-index:5;margin:var(--e5) calc(-1 * var(--gouttiere)) 0;padding:var(--e3) var(--gouttiere);padding-bottom:calc(var(--e3) + env(safe-area-inset-bottom));background:var(--surface);box-shadow:0 -6px 18px rgba(20,16,10,.10)}
  /* Le libelle du bouton va de « Reserver » a « Demander une visite ou un
     devis » : quand les deux ne tiennent pas cote a cote, le bouton passe a la
     ligne en pleine largeur plutot que d'ecraser le montant. Le prix est ce
     qu'on vient lire, il ne se tronque pas. */
  .fiche__barre{flex-wrap:wrap}
  .fiche__barre-prix{margin:0;display:flex;align-items:baseline;gap:5px;
    flex:1 1 auto;font-size:var(--t7);font-weight:700;color:var(--vert);
    line-height:1.15;white-space:nowrap}
  .fiche__barre-unite{font-size:var(--t2);font-weight:500;color:var(--gris-texte)}
  .fiche__barre-b{flex:1 1 auto;justify-content:center;
    background:var(--vert);color:var(--texte-inverse)}
  .fiche__barre-b:hover{background:var(--vert-sombre)}
}
@media (max-width:640px){
  .fiche__barre{margin-left:calc(-1 * var(--e4));margin-right:calc(-1 * var(--e4));padding-left:var(--e4);padding-right:var(--e4)}
}

/* ---- manchette de la fiche ------------------------------------------------
   Le nom du bien mesurait 30 px pour un corps de 15 : un rapport de 2, celui
   que la direction artistique dit avoir abandonne. Il etait aussi plus petit
   que « Ou souhaitez-vous sejourner ? » sur l'accueil — la page qui VEND
   l'objet ecrivait son nom plus petit que celle qui l'annonce. Meme pente
   (3,4vw) que les tetes de section : les deux pages grandissent ensemble. */
.fiche__titre{margin:var(--e2) 0 0;font-size:clamp(28px,3vw,40px);line-height:1.08;
  font-weight:700;letter-spacing:-.022em;color:var(--vert);text-wrap:balance}
/* Le nom du bien, sa meta et les deux actions sur une seule rangee. Les actions
   partageaient la ligne du fil d'Ariane : sur telephone elles occupaient une
   rangee a elles, AVANT le titre. Elles descendent maintenant sous la meta. */
.fiche__identite{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e3) var(--e5);flex-wrap:wrap;margin:var(--e2) 0 0;padding-bottom:var(--e3)}
.fiche__entete{flex:1 1 420px;min-width:0}
.fiche__identite .fiche__meta{margin:var(--e2) 0 0;padding-bottom:0;border-bottom:0}
.fiche__identite .fiche__actions{padding-top:var(--e2)}
/* `flex:0 0 auto` empechait le bloc de retrecir : mesure a 320 px, il gardait
   ses 336 px naturels et faisait deborder la page de 31 px sur les 18 fiches,
   malgre le `flex-wrap` de ses boutons. Il peut desormais ceder, et ses deux
   boutons se replient l'un sous l'autre. */
.fiche__identite .fiche__actions{flex:0 1 auto;min-width:0;margin:0}

/* Le filet d'or ferme la manchette. C'est le premier des trois signes de la
   direction artistique a apparaitre sur la fiche, et il tombe aussi sur les
   pages -galerie et -avis, qui reutilisent .fiche__meta. */
.fiche__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e3);margin:var(--e3) 0 0;padding-bottom:var(--e3);font-size:var(--t4);color:var(--gris-fort)}
.fiche__meta b{font-weight:600;color:var(--encre)}
.fiche__note{display:inline-flex;align-items:center;gap:7px}
/* Les etoiles de notation sont dorees PARTOUT, pas seulement sur la fiche.
   Elles etaient en PNG : la couleur ci-dessous ne les atteignait pas, elles
   restaient a l'or clair du fichier (1,84:1 sur ivoire). Passees en SVG, elles
   suivent enfin currentColor. */
.fiche__etoile,
.partenaire__note>.ic,.encadre__note>.ic,.recap-res__note>.ic{color:var(--or-texte)}
.fiche__point{opacity:.45}
.fiche__lieu{display:inline-flex;align-items:center;gap:6px}
.fiche__verifie{display:inline-flex;align-items:center;gap:7px;color:var(--vert);font-weight:500}

/* ---- galerie (ListingGallery) ---------------------------------------------
   UNE boite pour les dix-neuf fiches : toute la largeur de la colonne, une
   hauteur bornee par la fenetre (le bien reste au-dessus de la ligne de
   flottaison), coins de carte, photos en `object-fit:cover` jamais deformees.
   La COMPOSITION suit le nombre de photos publiees (`data-photos`) :
     1 : une grande image, sans bouton ;
     2 : la grande a gauche (1,6), la seconde a droite, meme hauteur ;
     3 : la grande a gauche, deux empilees a droite ;
     4 : la grande, deux tuiles, un bandeau ;
     5+: la grande et quatre tuiles.
   « Voir les N photos » n'existe qu'au-dela de trois. */
/* Mosaique signature (capture de reference, 17/09/2026) : la grande photo a
   gauche (~62 %), deux photos empilees a droite (~38 %, hauteurs egales),
   gap 8 px, coins EXTERIEURS arrondis seulement — un seul bloc photo, pas
   quatre vignettes. Le RATIO est celui du composant, pas de la fenetre ni
   de la photo source : 16:10, borne a 640 px de haut, le meme pour toutes
   les fiches. La hauteur se lit sur la largeur de la colonne (unite de
   conteneur) : `aspect-ratio` + `max-height` retrecirait aussi la largeur. */
.fiche__gauche{container-type:inline-size}
.galerie{position:relative;display:grid;gap:var(--e2);margin-top:0;
  height:min(62.5cqw,640px);border-radius:var(--r-carte);
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
.galerie__grande{grid-row:1 / span 2}
.galerie[data-photos="1"]{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.galerie[data-photos="1"] .galerie__grande{grid-row:auto}
.galerie[data-photos="2"]{grid-template-rows:minmax(0,1fr)}
.galerie[data-photos="2"] .galerie__grande{grid-row:auto}
/* Une photo n'est pas un champ de saisie : rayon de carte, pas de champ.
   Les coins interieurs restent droits : la grande arrondit son cote gauche,
   la tuile du haut son coin haut-droit, celle du bas son coin bas-droit ;
   seule, la photo arrondit ses quatre coins ; a deux, la seconde arrondit
   son cote droit. */
.galerie__photo{position:relative;display:block;min-width:0;min-height:0;
  border-radius:0;overflow:hidden;background:var(--gris-champ);cursor:zoom-in}
.galerie__grande{border-radius:var(--r-carte) 0 0 var(--r-carte)}
.galerie__photo:nth-child(2){border-radius:0 var(--r-carte) 0 0}
.galerie__photo:nth-child(3){border-radius:0 0 var(--r-carte) 0}
.galerie[data-photos="1"] .galerie__grande{border-radius:var(--r-carte)}
.galerie[data-photos="2"] .galerie__photo:nth-child(2){border-radius:0 var(--r-carte) var(--r-carte) 0}
/* descendant et non enfant direct : les photos sont enrobees dans un <picture> */
.galerie__photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--mvt-lent-d) ease}
.galerie__photo:hover img,.galerie__photo:focus-visible img{transform:scale(1.03)}
.galerie__photo:focus-visible{outline:3px solid var(--vert);outline-offset:-3px}
/* « Voir les N photos » : une pilule contrastee dans le coin bas-droit de la
   mosaique (sur la tuile du bas). */
.galerie__tout{position:absolute;right:var(--e4);bottom:var(--e4);z-index:2;
  display:inline-flex;align-items:center;gap:var(--e2);
  min-height:var(--tactile);padding:0 var(--e5);border-radius:var(--r-pilule);
  background:rgba(6,20,18,.88);border:var(--filet-or);color:var(--texte-inverse);
  font-size:var(--t3);font-weight:600;white-space:nowrap;box-shadow:var(--ombre-2)}
.galerie__tout:hover{background:var(--encre)}
.galerie__tout:focus-visible{outline:3px solid var(--or);outline-offset:2px}

/* ---- visionneuse (photo agrandie) ------------------------------------------
   Un <dialog> plein ecran : l'image au centre, precedent / suivant sur les
   bords, compteur et zoom en haut, fermeture en haut a droite. */
.visionneuse{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;
  background:var(--fond-visionneuse);color:var(--texte-inverse)}
.visionneuse::backdrop{background:rgba(6,20,18,.6)}
.visionneuse-ouverte{overflow:hidden}
.visionneuse__barre{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;
  gap:var(--e3);padding:var(--e3) var(--e4)}
.visionneuse__titre{margin:0;min-width:0;font-size:var(--t3);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visionneuse__compteur{margin:0;flex:0 0 auto;font-size:var(--t3);font-variant-numeric:tabular-nums;opacity:.85}
.visionneuse__zoom{display:flex;gap:4px;margin-left:auto}
.visionneuse__zoom button,.visionneuse__fermer,.visionneuse__nav{display:grid;place-items:center;
  width:var(--tactile);height:var(--tactile);border-radius:50%;background:rgba(255,255,255,.12);
  color:var(--texte-inverse);font-size:var(--t6);font-weight:600;transition:background var(--mvt)}
.visionneuse__zoom button:hover,.visionneuse__fermer:hover,.visionneuse__nav:hover{background:rgba(255,255,255,.26)}
.visionneuse__zoom button:disabled{opacity:.35;cursor:default}
.visionneuse__zoom button[data-zoom="0"]{font-size:var(--t2)}
.visionneuse__fermer{font-size:var(--t9)}
.visionneuse__scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:var(--e8) var(--e7);touch-action:none}
/* L'image remplit la scene (contain) : une photo de demonstration de 300 px
   s'agrandit donc — floue, mais c'est la definition publiee, pas la scene. */
.visionneuse__img{width:100%;height:100%;max-width:1600px;object-fit:contain;user-select:none;
  transition:transform var(--mvt-lent);cursor:zoom-in}
.visionneuse__img--zoom{cursor:grab}
.visionneuse__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;font-size:var(--t12)}
.visionneuse__nav--prec{left:var(--e3)}
.visionneuse__nav--suiv{right:var(--e3)}
.visionneuse__nav[hidden]{display:none}
.visionneuse :focus-visible{outline:3px solid var(--or);outline-offset:2px}
@media (max-width:640px){
  .visionneuse__scene{padding:var(--e8) var(--e2) var(--e7)}
  .visionneuse__nav{top:auto;bottom:var(--e3);transform:none}
  .visionneuse__nav--prec{left:var(--e4)}
  .visionneuse__nav--suiv{right:var(--e4)}
}

/* Deux colonnes : le contenu (galerie, blocs) et l'encadre de reservation,
   ~70 / 30 — l'encadre grandit avec l'ecran sans depasser 420 px, la galerie
   prend tout le reste. Le haut de l'encadre est aligne sur le haut de la
   galerie. */
.fiche__corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(348px,min(29%,420px));
  gap:var(--e6);align-items:start;margin-top:var(--e4)}

/* La bande de trois chiffres de la fiche (.stats) a disparu le 17/09 : « L'essentiel »
   (fiche.css) la remplace. Les StatCards partagees (.stat, plus bas) restent. */

/* ---- rythme vertical de la fiche ------------------------------------------
   L'ecart entre blocs n'etait pas irregulier par accident de valeurs, mais par
   accident de SELECTEUR : quatre declarations separees (.bloc, .simil,
   .partenaire, .duo) posaient chacune leurs 48 px, et tout bloc qui n'entrait
   dans aucune des quatre tombait a 24 ou 32. Le rythme se pose une seule fois,
   sur l'enveloppe que `_avec_ancre` genere deja pour chaque bloc.
   64 px et non les 88 de l'accueil : la colonne de la fiche est deux fois plus
   etroite que ses rangees pleine largeur. */
/* Les blocs poses SOUS les deux colonnes suivent `.fiche__corps` et non un
   autre bloc : sans ce second selecteur, le premier d'entre eux — souvent les
   « biens similaires » — collait a 16 px au lieu de 64. */
.fiche__ancre + .fiche__ancre,
.fiche__corps + .fiche__ancre{margin-top:var(--e7)}
/* Les ancres passaient SOUS l'en-tete collee : les 80 premiers pixels du bloc
   vise — donc son titre — restaient caches. Vrai a toutes les largeurs. */
/* Le decalage est MESURE par fiche.js (entete + barre d'onglets, qui passe sur
   deux rangees en etroit). La valeur de repli sert avant que le script ne
   reponde, et si le script ne tourne pas. */
.fiche__ancre,.encadre{scroll-margin-top:var(--ancre-decalage,calc(80px + var(--e4)))}
.fiche__ancre:focus{outline:none}

/* Les tetes de section de la fiche portaient un h2 de 26 px en encre noire,
   sans filet : le gabarit d'avant la direction artistique. Elles reprennent le
   traitement deja ecrit pour `.section__tete` sur l'accueil.
   `.bloc__titre--vert` a disparu : « Localisation » etait le SEUL titre vert
   des dix-huit fiches, sans qu'aucune donnee ne le motive. Toutes les tetes
   sont vertes, c'est la regle du site. */
.bloc__titre{margin:0 0 var(--e5);padding-bottom:var(--e3);font-size:clamp(var(--t10),2.6vw,var(--t13));line-height:1.08;font-weight:700;letter-spacing:-.022em;color:var(--vert)}
/* ENFANTS DIRECTS seulement. En `.bloc p`, cette regle de paragraphe editorial
   atteignait l'interieur des composants poses dans un bloc — et elle les
   gagnait en specificite (0,1,1 contre 0,1,0). Sur les dix-neuf fiches, le
   lieu et le prix des cartes « etablissements similaires » repassaient ainsi
   en --gris-fort sur un voile sombre : 1,48:1, illisibles. Une regle de
   contenu ne doit pas franchir la frontiere d'un composant.
   `.bloc__suite` est le second paragraphe replie de « A propos » : lui aussi
   est du contenu editorial, d'ou les deux selecteurs. */
.bloc > p,
.bloc__suite > p{margin:0 0 var(--e4);font-size:var(--t4);line-height:1.75;
  color:var(--gris-fort);max-width:812px}
/* Quinze blocs « a propos » sur seize n'ont qu'un paragraphe : sous un titre
   editorial, un corps de 15 px faisait orphelin. En chapo, l'ecart redevient
   une intention. Pose APRES `.bloc > p` : meme specificite, c'est l'ordre qui
   tranche. */
.bloc--chapo > p{font-size:var(--t6);line-height:1.6;max-width:640px}
.bloc__plus{display:inline-flex;align-items:center;gap:7px;color:var(--vert);font-size:var(--t4);font-weight:500;display:inline-flex;align-items:center;min-height:var(--tactile)}
.bloc__plus .ic{transition:transform var(--mvt-d)}
.bloc__plus[aria-expanded="true"] .ic{transform:rotate(180deg)}
.bloc__suite[hidden]{display:none}
.bloc__suite p:last-child{margin-bottom:var(--e4)}
/* Au-dela de la largeur de frame la colonne de gauche depasse 1 100 px.
   Les paragraphes s'arretaient deja a 812 px (cote de la planche) ; les
   autres blocs de lecture s'etiraient seuls et cassaient l'alignement. */
.bloc__titre,.equipements,.duo,.avis{max-width:812px}

/* Trois colonnes de 255 px pour des libelles de 13 a 17 caracteres : chacune
   etait vide a plus de la moitie. Deux colonnes, et un filet d'or entre les
   rangees plutot que du vide. */
.equipements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--e6)}
.equipement{display:flex;align-items:center;gap:11px;font-size:var(--t4);padding:var(--e3) 0}
.equipement:nth-child(-n+2){border-top:0}
@media (max-width:640px){
  .equipements{grid-template-columns:minmax(0,1fr)}
  .equipement:nth-child(2){}
}
.equipement .ic{color:var(--vert)}

/* ---- carte du prestataire --------------------------------------------------
   Compacte : une rangee (portrait, identite, action), puis le mot du
   prestataire en dessous, court. Elle occupait toute la largeur et une grande
   hauteur, et pesait plus lourd que les informations du bien. Le filet d'or
   de tete reste sa signature. */
.partenaire{background:var(--surface);overflow:hidden;border-top:0;
  padding:var(--e4) var(--e5);max-width:812px}
.partenaire__sceau{display:flex;align-items:center;gap:var(--e2);margin:0 0 var(--e3);
  color:var(--vert-encre);font-size:var(--t1);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.partenaire__sceau .ic{color:var(--vert)}
.partenaire__identite{display:flex;align-items:center;gap:var(--e4);min-width:0}
.partenaire__portrait{position:relative;flex:0 0 auto;display:block}
.partenaire__photo{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--or)}
.partenaire__pastille{position:absolute;right:-2px;bottom:-2px;display:grid;
  place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--vert);color:var(--texte-inverse);box-shadow:0 0 0 2px var(--surface)}
.partenaire__corps{min-width:0;flex:1 1 auto}
.partenaire__nom{margin:0;font-size:var(--t6);font-weight:700;color:var(--vert);
  letter-spacing:-.01em;line-height:1.2}
.partenaire__sous{margin:2px 0 0;font-size:var(--t2);color:var(--gris-texte)}
.partenaire__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e2);font-size:var(--t2)}
.partenaire__puce{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  border-radius:var(--r-pilule);background:var(--fond-creux);font-variant-numeric:tabular-nums}
.partenaire__delai{color:var(--gris-texte)}
.partenaire__delai .ic{color:var(--brun)}
.partenaire__pied{flex:0 0 auto;margin-left:auto}
.partenaire__bouton{background:var(--surface);border:1px solid var(--vert);color:var(--vert);white-space:nowrap}
.partenaire__bouton:hover{background:var(--menthe)}
.partenaire__lien{display:inline-flex;align-items:center;gap:var(--e2);min-height:var(--tactile);
  color:var(--brun);font-weight:600;font-size:var(--t3);white-space:nowrap}
/* Le mot du prestataire : court, sous la rangee, rattache par le filet d'or. */
.partenaire__mot{margin:var(--e3) 0 0;padding:var(--e2) 0 0 var(--e3);border-left:2px solid var(--or);min-width:0}
.partenaire__mot-t{margin:0;font-size:var(--t3);line-height:1.55;color:var(--gris-fort)}
@media (max-width:640px){
  .partenaire{padding:var(--e4)}
  .partenaire__identite{flex-wrap:wrap}
  .partenaire__pied{flex:1 1 100%;margin-left:0}
  .partenaire__bouton{width:100%}
}

.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e7);padding-top:var(--e6)}
.duo h3{margin:0 0 var(--e4);font-size:var(--t8);font-weight:700}
/* `.duo__ligne` n'avait AUCUNE declaration dans tout le depot : la moitie du
   contenu du bloc sortait sans voix. Meme voix que `.duo li`. */
.duo__ligne{margin:0 0 var(--e3);font-size:var(--t4);line-height:1.6;
  color:var(--gris-fort)}
/* Un filet d'or separe les deux colonnes, plutot que du vide. */
.duo > div + div{padding-left:var(--e6)}
@media (max-width:900px){.duo > div + div{padding-left:0}}
.duo__dispo{display:flex;align-items:center;gap:9px;color:var(--vert);font-weight:500;font-size:var(--t4)}
.duo__note{margin:10px 0 0;font-size:var(--t3);color:var(--gris-texte)}
.duo ul{margin:0;padding:0;list-style:none}
.duo li{font-size:var(--t4);color:var(--gris-fort);margin-bottom:12px;padding-left:14px;position:relative}
.duo li::before{content:"•";position:absolute;left:0;color:var(--gris-texte)}

/* ---- plan de localisation --------------------------------------------------
   Le plan etait une image nue posee dans un cadre : aucun repere, aucune
   destination, et la meme note fausse sur les dix-huit fiches. C'est desormais
   une carte a part entiere — plan, marqueur, localite reelle, et un lien vers
   un vrai service de cartographie. */
.plan{width:805px;max-width:100%;overflow:hidden;background:var(--surface)}
.plan__vue{position:relative;display:block;line-height:0}
/* Teintes du plan : elles restent dans la palette, un plan n'est pas une
   photographie et n'a pas a introduire ses propres couleurs. */
.plan{--plan-sol:var(--fond-creux);--plan-eau:var(--menthe-bord);
  --plan-voie:var(--surface);--plan-ilot:var(--bord);--plan-verdure:var(--menthe)}
.plan__dessin{display:block;width:100%;height:clamp(190px,22vw,300px)}
/* La carte reelle prend la place du trace : meme boite, meme hauteur, pour
   que le bloc ne change pas de taille selon qu'une localite est relevee. */
.plan__osm{display:block;width:100%;height:clamp(190px,22vw,300px);border:0}
/* Le marqueur est pose au centre optique du plan : la goutte pointe vers le
   bas, on la remonte donc d'une demi-hauteur pour que sa POINTE soit au centre. */
.plan__repere{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--vert);color:var(--texte-inverse);
  box-shadow:0 6px 18px rgba(6,32,28,.35);pointer-events:none}
.plan__repere::after{content:"";position:absolute;bottom:-16px;left:50%;
  transform:translateX(-50%);border:8px solid transparent;border-top-color:var(--vert)}
.plan__pied{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--e3);padding:var(--e4) var(--e5);background:var(--fond)}
.plan__lieu{display:flex;align-items:center;gap:var(--e2);margin:0;
  font-size:var(--t5);font-weight:600;color:var(--vert)}
.plan__lieu .ic{color:var(--brun);flex:0 0 auto}
.plan__lien{display:inline-flex;align-items:center;gap:var(--e2);
  min-height:var(--tactile);color:var(--brun);font-weight:600;font-size:var(--t4)}
.plan__lien:hover{color:var(--brun-sombre);text-decoration:underline}
.plan__reserve{margin:var(--e3) 0 0;font-size:var(--t2);color:var(--gris-faible)}
@media (max-width:640px){.plan__pied{padding:var(--e4)}}

/* encadre lateral */
/* L'encadre reecrivait sa propre geometrie de carte (rayon 20 px la ou seize
   autres surfaces sont a --r-carte, filet a la main) et portait une ombre AU
   REPOS — ce que la regle d'elevation ecrite dans la palette interdit : au
   repos on se delimite par son filet, l'ombre ne signale que ce qui flotte.
   Cette ombre etait en plus un rgba(0,89,79) recopie a la main, un vert qui
   n'est pas --vert (0,90,79) et qui echappait au test des couleurs en dur
   parce qu'il n'etait pas ecrit en hexadecimal. */
.encadre{background:var(--surface);padding:var(--e4) var(--e4) var(--e4)}
/* Tant qu'il y a deux colonnes, l'encadre suit le defilement : le prix et le
   bouton restent atteignables sur les fiches dont la colonne de gauche fait
   2 800 px. Le plafond de hauteur garde le bouton visible sur un ecran bas.
   80 px = la hauteur de .entete, elle-meme collee en haut : sans ce decalage
   l'encadre se colle SOUS la barre et son prix disparait. */
@media (min-width:1101px){
  /* Le decalage est celui que fiche.js mesure (entete + barre d'onglets
     collees) : sans lui, l'encadre passait SOUS la barre d'onglets. */
  .encadre{position:sticky;top:var(--ancre-decalage,calc(80px + var(--e5)));
    max-height:calc(100vh - var(--ancre-decalage,104px) - var(--e5));overflow-y:auto}
  /* L'encadre defile en interne sur les ecrans bas : sans cela le bouton
     sortait du cadre visible des que le recapitulatif s'allongeait. */
  .encadre__bouton{position:sticky;bottom:0;z-index:1}
}
/* Le montant qui convertit etait le PLUS PETIT des trois titres de la page :
   22 px, contre 26 pour un titre de section et 44 pour le nom du bien. */
.encadre__prix{font-size:var(--t11);line-height:1.1;font-weight:700;
  letter-spacing:-.02em;color:var(--vert);white-space:nowrap}
.encadre__prix span{font-size:var(--t2);font-weight:500;color:var(--gris-texte);
  letter-spacing:0}
/* 320 px : « 1 620 000 F CFA / événement » debordait de l'encadre (defilement
   horizontal de 8 px) ; seule l'unite passe a la ligne, le montant reste entier */
@media (max-width:360px){.encadre__prix{font-size:var(--t10)}.encadre__prix span{display:block;margin-top:2px}}
/* L'etiquette est AU-DESSUS du cadre, lisible : 13 px, encre forte, 600. Elle
   etait un texte gris de 12 px pose dans le cadre, contre son filet. */
.encadre__eti{display:block;margin:0 0 5px;font-size:var(--t2);font-weight:600;color:var(--gris-fort);line-height:1.2}
/* Le formulaire de contact des fiches : meme rayon que tous les champs du
   site. Il etait a --r3 (10 px) a cote de champs a 14 px. */
.encadre select,.encadre textarea{width:100%;min-height:var(--tactile);border:1px solid var(--bord);
  border-radius:var(--r-champ);padding:var(--e3) 14px;font:inherit;font-size:var(--t4);background:var(--surface);color:var(--encre)}
.encadre textarea{min-height:92px;resize:vertical}
.encadre__demo{margin:var(--e4) 0 0;padding:var(--e3) var(--e4);border-radius:var(--r-champ);
  background:var(--menthe);border:1px solid var(--menthe-bord);color:var(--vert-sombre);font-size:var(--t3)}
.encadre__bouton{width:100%;margin-top:var(--e4);background:var(--vert);color:var(--texte-inverse)}
.encadre__bouton:hover{background:var(--vert-sombre)}
.encadre__securite{display:flex;align-items:center;justify-content:center;gap:var(--e2);
  margin-top:var(--e3);font-size:var(--t1);color:var(--gris-faible)}
.encadre__annulation a{display:inline-flex;align-items:center;min-height:var(--tactile);color:var(--vert);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.encadre__annulation{margin-top:0}
.encadre__estimation{margin:var(--e4) 0 0;padding:var(--e3) var(--e4);border-radius:var(--r-champ);
  background:var(--fond-creux);border-top:var(--filet-or);font-size:var(--t3);line-height:1.5;color:var(--encre)}

/* ------------------------------------------------------------------
   Dispositions des galeries. Elles etaient declarees APRES la requete qui
   les defait en etroit — a specificite egale, c'est l'ordre qui tranche, et
   la disposition large gagnait. Resultat mesure a 375 px : le grand pave se
   retrouvait dans une colonne large de 0 px, invisible. Elles precedent
   desormais les requetes qui les reprennent.
   ------------------------------------------------------------------ */

/* Sous 1100 px l'encadre n'est plus une colonne : il passe EN PILE sous le
   contenu, prix en tete, bouton en pied. Il n'est plus colle (voir plus haut). */
@media (max-width:1100px){
  .fiche__corps{grid-template-columns:minmax(0,1fr)}
  /* Tablette : la mosaique tient (colonne de 700 px et plus). */
  .galerie__tout{right:var(--e3);bottom:var(--e3)}
  .equipements{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .duo{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:640px){
  /* Mobile : la grande photo seule, quatre coins arrondis, et la pilule
     « Voir les N photos » — jamais trois vignettes minuscules. La hauteur
     suit la largeur de la colonne (4:3), bornee a 60 % d'un ecran bas. */
  .galerie,.galerie[data-photos="2"]{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
    height:min(75cqw,60vh,520px)}
  .galerie__grande{grid-row:auto;border-radius:var(--r-carte)}
  .galerie__photo:nth-child(2),.galerie__photo:nth-child(3){display:none}
  .fiche__haut{padding-top:var(--e2)}
  /* Le maillon courant repete le nom du bien que le H1 ecrit juste dessous :
     sans lui, Retour et fil tiennent sur une seule ligne. Sur les pages
     Photos le fil garde trois maillons (univers, ville, bien) : le dernier se
     tronque plutot que de renvoyer le fil sous le bouton Retour. */
  .fildariane [aria-current]{display:none}
  .fildariane{flex:1 1 0;flex-wrap:nowrap}
  .fildariane a{white-space:nowrap}
  .fildariane a:not(:first-of-type):not(:last-of-type){display:none}   /* la ville, sur les pages Photos */
  .fildariane a:last-of-type{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;
    line-height:var(--tactile)}
  /* la taille est portee par le plancher du clamp ; seule la marge change */
  .fiche__titre{margin-top:var(--e4)}
  .equipements{grid-template-columns:minmax(0,1fr)}
  .stats{flex-direction:column;gap:var(--e5)}
  .onglets{gap:0 var(--e5)}
  /* La ligne de meta se replie : le point de separation se retrouvait
     seul en fin de ligne. L'espacement suffit a separer les mentions. */
  .fiche__meta{gap:var(--e1) var(--e3)}
  .fiche__meta .fiche__point{display:none}
}

/* --- fiche : gouttiere par frame (24 px sur Immobilier, 100 px sur les 4 autres) */
/* Trois gouttieres coexistaient sur la fiche (24 et 100 px) la ou tout le site
   en a une. Un filet d'or ne devient une signature que s'il commence au meme
   endroit d'une page a l'autre. --gouttiere se replie deja seule sous le point
   de rupture, ce que les valeurs en dur ne faisaient pas. */
.fiche{padding:0 var(--gouttiere)}
/* Meme gouttiere que les sections sous 640 px (la regle ci-dessus, plus
   generale, l'emportait sur celle du bloc etroit : 60 px a 500 px de large). */
@media (max-width:640px){.fiche{padding:0 var(--e4)}}
.fiche__gauche{min-width:0}
.fiche__mtexte{display:inline-flex;align-items:center;gap:7px}

/* onglets de section */
/* La barre d'onglets construit deja de vraies ancres vers les blocs : collee,
   elle devient le seul repere de position de la page. Meme decalage que
   l'encadre (80 px = hauteur de l'en-tete collee), aucune valeur nouvelle.
   Les treize fiches sans onglets n'en recoivent PAS : leurs libelles n'existent
   pas dans les donnees, les inventer serait interdit. */
/* Collee SOUS l'entete : elle accompagne la lecture au lieu de filer au
   premier pixel. Les marges negatives laissent le fond couvrir toute la
   largeur de la colonne, sinon le contenu defile visiblement a cote. */
.onglets{display:flex;flex-wrap:wrap;gap:0 var(--e6);margin:0 calc(var(--e3) * -1) var(--e5);
  padding:0 var(--e3);position:sticky;top:var(--haut-entete,80px);z-index:12;background:var(--fond)}
.onglet{display:inline-flex;align-items:flex-end;min-height:var(--tactile);padding:0 0 14px;
  font-size:var(--t5);color:var(--gris-texte)}
.onglet[aria-current]{color:var(--vert);font-weight:600;box-shadow:inset 0 -3px 0 0 var(--vert)}

/* pastilles (deux styles dans les maquettes) */
.pastilles{display:flex;flex-wrap:wrap;gap:var(--e3);margin:var(--e5) 0 0}
.pastille{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;
  border-radius:var(--r-pilule);font-size:var(--t3)}
.pastilles--blanc .pastille{background:var(--surface);border:1px solid var(--bord)}
.pastilles--menthe .pastille{background:var(--menthe);color:var(--vert)}

/* avis */
/* ---- avis ------------------------------------------------------------------
   Le bloc n'etait pas un bloc : un gras, un « 5.0 » en flottant et deux
   paragraphes, sans un trait. C'est pourtant le texte le plus editorial de la
   page. Traite en CITATION plutot qu'en carte : un filet d'or a gauche et un
   guillemet ouvrant, donc rien a ajouter au format commun des cartes.
   Le flottant est remplace par un flex : il n'etait degage par rien et laissait
   la note suspendue seule en bout de ligne. */
.avis{position:relative;margin-bottom:var(--e5);padding-left:var(--e5)}
.avis::before{content:"\201C";position:absolute;left:var(--e3);top:-6px;
  font-size:var(--t12);line-height:1;color:var(--or);opacity:.55;
  pointer-events:none}
.avis__tete{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--e3);margin:0}
.avis__auteur{font-size:var(--t4);font-weight:700;color:var(--vert)}
.avis__note{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  font-size:var(--t3);font-weight:600;color:var(--gris-fort)}
.avis__note .ic{color:var(--or-texte)}
.avis__texte{margin:var(--e2) 0 0;font-size:var(--t5);line-height:1.6;
  color:var(--gris-fort)}
.avis__compte{margin:calc(-1 * var(--e3)) 0 var(--e5);font-size:var(--t2);
  color:var(--gris-faible)}
.avis__tous{display:flex;align-items:center;justify-content:center;min-height:var(--tactile);
  font-size:var(--t4);text-decoration:underline}

/* listes d'items : UNE famille de carte pour les cinq modules (chambre,
   plat, vehicule, service, galerie) — rayon --r-carte, filet --bord, fond
   --surface, aucune ombre au repos, meme typo (titre 600 t6, prix 700 vert,
   unite petite grise, texte gris, puces .etiq legeres). La carte est une
   GRILLE : sa premiere colonne s'etire sur toute la hauteur et l'image la
   remplit (height:100 %, object-fit:cover). En flex, l'image gardait sa
   hauteur intrinseque sous le lien de galerie : d'ou la bande blanche.
   Les particularites de chaque gabarit sont dans fiche.css. */
.items{display:flex;flex-direction:column;gap:var(--e4)}
/* Le menu passe en deux colonnes des que la place existe. minmax(400px,1fr) —
   pas de minmax imbrique, la declaration serait rejetee en silence. */
.items--plat{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));
  gap:var(--e4);align-items:stretch}
/* (le filet et le rayon sont ceux du format commun des cartes, plus haut) */
.item{position:relative;display:grid;grid-template-columns:260px minmax(0,1fr);gap:0;
  background:var(--surface);overflow:hidden}
.item--chambre,.item--vehicule{min-height:240px}
.item__img{display:block;width:100%;height:100%;min-height:0;object-fit:cover;align-self:stretch}
.item__galerie,.item__repli{display:block;min-height:0;align-self:stretch}
/* visuel de repli : l'icone (sous-type ou univers) 40 px sur ivoire */
.item__repli{display:grid;place-items:center;background:var(--fond-creux);color:var(--vert)}
.item__repli .ic{width:40px;height:40px;opacity:.8}
.item__corps{min-width:0;padding:18px 20px;display:flex;flex-direction:column;gap:var(--e2)}
.item__tete{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e4);margin:0}
.item__titre{font-size:var(--t6);font-weight:600;color:var(--encre);line-height:1.3}
.item__prix{display:inline-flex;align-items:baseline;gap:4px;line-height:1.3;color:var(--vert);
  font-size:var(--t6);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.item__unite{font-size:var(--t2);font-weight:400;color:var(--gris-texte)}
.item__texte,.item__specs{margin:0;font-size:var(--t3);color:var(--gris-texte);line-height:1.5}
/* les caracteristiques (« 2 pers. », « 32 m² ») : pilules legeres, un
   pictogramme devant quand la table centrale en a un (vehicules) */
.item__specs{display:flex;flex-wrap:wrap;gap:6px}
.item__specs .etiq{gap:6px;background:var(--fond-creux);color:var(--gris-fort);font-weight:500;
  font-variant-numeric:tabular-nums}
.item__specs .etiq .ic{flex:0 0 14px;width:14px;height:14px;color:var(--vert)}
/* pictogrammes d'equipement : 20 px, en rangee discrete, chacun nomme
   (title + aria-label) — plus de ronds minuscules */
.item__icones{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:2px;color:var(--vert)}
.item__ic{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;opacity:.85}
.item__ic .ic{width:20px;height:20px}
/* metadonnee (annulation, allergenes, caution, inclus) : la mention ne
   descend au bas de la carte que lorsqu'elle porte le lien d'action */
.item__pied{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);margin:0}
.item__pied:has(> .item__bouton){margin-top:auto;padding-top:var(--e3)}
.item__mention{font-size:var(--t2);color:var(--gris-texte);line-height:1.45}
.item__bouton{background:var(--vert);color:var(--texte-inverse)}
.item__badge{position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:var(--r-pilule);
  background:var(--menthe);color:var(--vert);font-size:var(--t2);font-weight:600;line-height:1.3}

/* encadre : variantes */
.encadre__surtitre{display:block;font-size:var(--t2);color:var(--gris-texte)}
.encadre__titre{margin:0;font-size:var(--t7);font-weight:700}
/* A 320 px le prix et la note ne tiennent pas cote a cote (mesure : 364 px de
   debordement sur « Chambres »). La note passe alors sous le prix, qui garde
   sa place en haut a gauche de l'encadre. */
.encadre__tete{display:flex;flex-wrap:wrap;align-items:flex-start;
  justify-content:space-between;gap:var(--e2) var(--e3)}
.encadre__note{flex:0 1 auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--t3);
  color:var(--brun);white-space:nowrap}
.encadre__champs{display:flex;flex-wrap:wrap;gap:var(--e3);clear:both;margin-top:var(--e4)}
.encadre__champ{flex:1 1 100%;min-width:0}
.encadre__champ--moitie{flex:1 1 calc(50% - var(--e2));min-width:0}
.encadre__saisie{display:flex;align-items:center;gap:10px}
.encadre__saisie input{flex:1;width:100%;min-width:0;border:0;background:none;font:inherit;font-size:var(--t4);font-weight:500}
.recap{margin-top:var(--e4)}
.recap__ligne{display:flex;justify-content:space-between;gap:var(--e4);margin:0 0 var(--e3);font-size:var(--t3)}
.recap__ligne span:first-child{text-decoration:underline;color:var(--gris-texte)}
.recap__total{font-weight:700;color:var(--vert);font-size:var(--t5)}
.recap__total span:first-child{text-decoration:none}
/* Les trois variantes de la maquette ne changent plus que le TON du sceau :
   la structure de la carte est la meme partout. Le portrait du chef reste plus
   grand, c'est le sujet de sa carte. */
.partenaire--menthe .partenaire__sceau{color:var(--brun)}
.partenaire--menthe .partenaire__sceau .ic{color:var(--brun)}

@media (max-width:640px){
  /* carte empilee : le visuel 16:9 en haut, le corps dessous */
  .item{grid-template-columns:minmax(0,1fr)}
  .item--chambre,.item--vehicule{min-height:0}
  .item__img,.item__repli,.item__galerie{height:auto;aspect-ratio:16/9}
  .item__galerie .item__img{height:100%;aspect-ratio:auto}
  /* Deux champs cote a cote font 107 px a 320 : une date n'y tient pas. */
  .encadre__champ--moitie{flex:1 1 100%}
}

/* Pastilles utilisees en filtres : le MEME traitement teinte que les
   sous-categories (`--souscat-sel-*`). Elles etaient vert plein a texte
   blanc, soit le langage reserve jusqu'ici aux categories principales — trois
   objets, deux gestes, une seule apparence. */
.pastilles button.pastille{cursor:pointer}
.pastilles .pastille[aria-pressed="true"]{background:var(--souscat-sel-fond);
  border-color:var(--souscat-sel-bord);color:var(--souscat-sel-texte);font-weight:600}
.pastilles .pastille[aria-pressed="true"]:hover{background:var(--souscat-sel-fond);border-color:var(--vert)}
.recap__tete{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.recap__titre{font-size:var(--t6);font-weight:700;color:var(--vert)}
.recap__badge{background:var(--menthe);color:var(--vert)}

.encadre__saisie .ic{align-self:center;flex:0 0 auto;color:var(--gris-texte)}

/* mosaique a 3 images : aucune frame ne la definit, elle sert aux fiches deduites
   pour les univers dont la maquette ne fournit pas de fiche (cf. ECARTS). */

/* ---------------------------------------------------------------------------
   Galeries en etroit : DEUX conceptions cohabitaient sous 1100 px — le rail qui
   defile (plus haut, avec son `grid-auto-flow:column`) et une pile a deux
   colonnes declaree ici. Toutes deux s'appliquaient, et la pile, plus tardive,
   imposait ses colonnes explicites a un conteneur devenu rail : la premiere
   colonne se resolvait alors a 0 px et la premiere photo disparaissait —
   mesure a 375 px, 0 x 0. La pile est retiree, le rail seul decide.
   --------------------------------------------------------------------------- */
@media (max-width:640px){
  .fiche__corps{gap:28px}
}

/* ---------------------------------------------------------------------------
   Etats des boutons — cohérents sur tout le site.
   Les maquettes ne montrent qu'un seul etat (repos) : le survol reste discret
   et ne change NI la taille NI la couleur de fond des boutons pleins autrement
   que par un assombrissement du meme vert. Le focus clavier est visible partout
   (exige par le brief : « navigation au clavier sans altérer l'apparence »).
   --------------------------------------------------------------------------- */
/* `.chip` est sorti de ce groupe : les sous-categories ont leur propre
   vocabulaire (fond clair au repos, teinte menthe au survol et en
   selection) et recherche.css en est la seule source. */
.pastille,.fiche__action,.partenaire__bouton,
.resultats__plus a,.entete__partenaire,
/* pilules a contour : le fond passe en ivoire chaud au survol */
.fiche__action:hover,
.partenaire__bouton:hover,.resultats__plus a:hover{background:var(--fond-creux);border-color:var(--bord)}
.entete__partenaire:hover{background:var(--fond-creux)}
.entete--plein .entete__partenaire:hover{background:var(--vert-sombre);border-color:var(--vert-sombre)}

/* pilules pleines : meme vert, plus sombre. Les puces selectionnees n'en font
   plus partie : leur etat est une TEINTE, pas un aplat (voir plus haut). */
.item__bouton:hover,.barre__loupe:hover{background:var(--vert-sombre)}

/* liens de section et d'avis */
.section__lien:hover,.avis__tous:hover,.bloc__plus:hover,.partenaire__lien:hover{opacity:.75}
.onglet:hover{color:var(--vert)}

/* cartes cliquables : leger soulevement, sans changer les dimensions */
.edito__carte,.item{transition:box-shadow var(--mvt-lent-d)}
.edito__carte:hover{box-shadow:0 10px 26px rgba(20,20,20,.14)}
.item:hover{box-shadow:0 6px 18px rgba(20,20,20,.08)}

/* focus clavier : anneau vert sur tout ce qui est actionnable */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
/* `.carte__surface` est un lien de recouvrement en tabindex="-1" et
   aria-hidden : un clavier ne l'atteint jamais, son anneau n'aurait rien a
   signaler. `.carte__lien`, lui, EST atteint au clavier — et ne montrait plus
   rien du tout : la regle generique deux lignes plus haut lui posait un
   anneau, celle-ci le retirait. Mesure faite : focus sur le titre d'une carte,
   outline `none` sur le lien comme sur la carte, aucun indice a l'ecran.
   L'anneau ne peut pas se poser sur le lien lui-meme : .carte, .carte__corps
   et .carte__titre sont tous en overflow:hidden, il serait rogne en haut, en
   bas et sur un titre long. On le pose donc sur la CARTE, ou .rangee reserve
   deja 2 px. Cette regle l'emporte sur `.carte:focus-within{outline:none}`
   par sa specificite — :has() prend celle de son argument le plus fort. */
.carte:focus-visible,.carte__surface:focus-visible{outline:none}
.carte:has(.carte__lien:focus-visible){outline:2px solid var(--vert);outline-offset:0}

/* ---- UN SEUL etat de focus pour tous les champs du site ----------------
   Repos : filet neutre (--bord). Saisie : filet vert et halo menthe de 3 px —
   rien d'autre. Le contour vert epais et le double cadre (filet vert de la
   boite + anneau de la commande) de l'authentification sont partis. La
   commande posee DANS une boite ne porte aucun anneau : c'est la boite qui
   parle ; les commandes nues (cases du code, listes de l'encadre, filtres)
   recoivent le meme filet et le meme halo. Le focus clavier reste donc
   visible partout. */
:is(.champ-auth__boite,.champ2__boite,.encadre__saisie,.esp-champ,.esp-champ2__b,.esp-tel,
    .cnt-form__b,.barre__champ,.recherche__controle,.pro-zone,.pro-select,
    .champ-select,.champ-cherche):focus-within,
:is(.filtres__champ,.otp input,.encadre select,.encadre textarea,.blocres__message,
    .esp-champ select,.esp-champ textarea,.compteur__v):focus{
  border-color:var(--vert);box-shadow:0 0 0 3px var(--menthe);outline:none}
:is(.champ-auth__boite,.champ2__boite,.encadre__saisie,.esp-champ,.esp-champ2__b,.esp-tel,
    .cnt-form__b,.barre__champ,.recherche__controle,.pro-zone,.pro-select,
    .champ-select,.champ-cherche)
  :is(input,select,textarea):focus-visible{outline:none;box-shadow:none}

/* --- encadre de la fiche : commandes natives et etats ----------------------
   Les champs de l'encadre sont desormais des commandes NATIVES (date, heure,
   liste) : le navigateur pose lui-meme son calendrier, sa roue des heures et sa
   liste deroulante. Le cadre visible est celui de .encadre__saisie — la liste ne
   doit donc pas en redessiner un second par-dessus. */
/* Le <select> ne remplissait pas sa boite : 38 px de haut dans un champ de
   54 px. Le cadre a beau paraitre grand, c'est le controle qui recoit le clic. */
.encadre__saisie select{width:100%;min-width:0;min-height:var(--tactile);align-self:stretch;
  border:0;border-radius:0;
  padding:0;background:none;color:inherit;font:inherit;font-size:var(--t4);font-weight:500}
.encadre__saisie input[type="date"],.encadre__saisie input[type="time"]{min-width:0}
/* L'etiquette est un <label for> POSE A COTE de la commande (l'envelopper ferait
   entrer la valeur, et toutes les options d'une liste, dans le nom du champ).
   La commande occupe en echange toute la hauteur restante : la cible tactile
   reste le cadre entier, pas la seule ligne de texte. */
.encadre__saisie > input,.encadre__saisie > select{flex:1 1 auto;align-self:stretch}

/* Etats du champ. La maquette n'en dessine qu'un seul (repos) ; les autres
   restent dans la meme famille : le survol eclaircit le trait, le focus reprend
   le vert de marque, le champ hors service passe en TIRETS et l'erreur epaissit
   le trait — la couleur seule ne suffit ni en niveaux de gris ni pour un
   daltonisme rouge-vert. */
.encadre__saisie{background:var(--surface);transition:border-color var(--mvt-d),box-shadow var(--mvt-d)}
.encadre__saisie:hover{border-color:var(--bord-fort)}

/* Le trait des tirets doit RESTER VISIBLE sur le fond grise du champ hors
   service : en --bord il s'y confondait et l'etat ne se lisait plus qu'a la
   couleur du fond. --gris-faible tient 4:1 sur --gris-champ. */
/* `:not(option)` : une option « (complet) » desactivee dans la liste des
   creneaux (fiche.js, disponibilite) ne met pas le champ entier hors service. */
.encadre__saisie:has(:disabled:not(option)){background:var(--gris-champ);border-style:dashed;
  border-color:var(--gris-faible);color:var(--gris-faible);cursor:not-allowed}
.encadre__saisie:has([aria-invalid="true"]){border-color:var(--erreur);
  box-shadow:inset 0 0 0 1px var(--erreur)}
.encadre select:hover,.encadre textarea:hover{border-color:var(--bord-fort)}
.encadre select:disabled,.encadre textarea:disabled{background:var(--gris-champ);
  border-style:dashed;border-color:var(--gris-faible);color:var(--gris-faible);
  cursor:not-allowed}
.encadre select[aria-invalid="true"],.encadre textarea[aria-invalid="true"]{
  border-color:var(--erreur);box-shadow:inset 0 0 0 1px var(--erreur)}

/* ---- champs dessines : date, heure, liste (audit D.9, H, I, R ; brief 8) --
   Le texte d'un <input type="date"> ou "time" est ecrit par le navigateur
   dans SA langue (« mm/dd/yyyy », « 08:00 PM ») et aucune regle ne
   l'atteint. socle.js met la commande dans .champ-date / .champ-heure et
   pose a cote un <span> qui ecrit la meme valeur en francais court. La
   commande reste entiere : valeur, name, required, min/max, clavier, focus
   (le halo unique ci-dessus, porte par la boite qui l'entoure) et envoi du
   formulaire. Son texte devient transparent par -webkit-text-fill-color et
   PAS par `color` : l'indicateur calendrier/horloge est peint en
   currentColor et disparaitrait avec lui. L'enveloppe prend la place que la
   commande occupait dans sa boite (flex, etiree) ; la commande la remplit.
   La couleur du texte dessine est celle de la boite : un champ hors service
   (.encadre__saisie:has(:disabled)) grise donc aussi sa date. */
.champ-date,.champ-heure{position:relative;display:flex;align-items:center;
  flex:1 1 0%;min-width:0;max-width:100%;align-self:stretch}
.champ-date > input,.champ-heure > input{flex:1 1 auto;align-self:stretch;width:100%;min-width:0;
  cursor:pointer;-webkit-text-fill-color:transparent}
/* Le segment natif en cours de frappe (jour, mois, heure…) garde son fond
   bleu par defaut, pose la ou le navigateur ecrit et non sous le texte
   dessine : on l'efface, le halo du champ dit deja le focus. Sans `:focus`
   sur le pseudo-element : mesure faite, Chromium ne l'apparie pas la, mais
   un fond pose sur le segment lui-meme l'emporte sur son surlignage. */
.champ-date > input::-webkit-datetime-edit-day-field,
.champ-date > input::-webkit-datetime-edit-month-field,
.champ-date > input::-webkit-datetime-edit-year-field,
.champ-heure > input::-webkit-datetime-edit-hour-field,
.champ-heure > input::-webkit-datetime-edit-minute-field,
.champ-heure > input::-webkit-datetime-edit-ampm-field{background-color:transparent}
/* Comme l'indicateur du calendrier plus bas : l'horloge reste l'affordance
   du champ, mais le clic ouvre notre panneau, pas la roue du navigateur. */
.champ-heure > input::-webkit-calendar-picker-indicator{pointer-events:none}
.champ-date__affiche,.champ-heure__affiche{position:absolute;left:0;right:28px;top:50%;
  transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  pointer-events:none;line-height:1.3}
.champ-date__affiche[data-vide="oui"],.champ-heure__affiche[data-vide="oui"]{color:var(--gris-faible)}
/* La valeur de l'encadre est en 500 sur la commande ; le texte dessine, qui
   est un voisin et non un enfant, reprend la graisse. */
.encadre__saisie :is(.champ-date__affiche,.champ-heure__affiche){font-weight:500}

/* La liste des heures du panneau .popover--heure (socle.js) : rangees de
   44 px (le plancher des boutons), l'heure retenue en menthe, comme les
   options du SearchPopover de la barre. */
.heure__liste{display:grid;gap:2px}
.heure__option{display:flex;align-items:center;width:100%;padding:0 var(--e3);
  border-radius:var(--r2);font-size:var(--t4);font-variant-numeric:tabular-nums;
  color:var(--encre);text-align:left}
.heure__option:hover{background:var(--gris-champ)}
.heure__option[aria-selected="true"]{background:var(--menthe);color:var(--vert);font-weight:600}
.heure__option:focus-visible{outline:3px solid var(--vert);outline-offset:-3px}

/* Le <select> n'est pas remplace (clavier, lecteurs d'ecran, formulaire) :
   il est HABILLE. Celui qui vit deja dans une boite dessinee (encadre,
   tunnel, reglages, barre, filtres…) n'en recoit pas une seconde ; les
   autres — le tri des resultats, la liste des offres de la carte — sont mis
   par socle.js dans .champ-select, qui porte le dessin des champs et le
   halo de focus de la regle unique. 44 px et non 56 : c'est une commande
   de barre d'outils, a cote des pilules, pas un champ de formulaire. */
.champ-select{display:inline-flex;align-items:center;max-width:100%;min-height:var(--sel-haut);
  background:var(--surface);border:var(--champ-bord);border-radius:var(--r-champ);
  transition:border-color var(--mvt-d),box-shadow var(--mvt-d)}
.champ-select:hover{border-color:var(--bord-fort)}
/* SelectField (21/09/2026) : la boite porte le SEUL contour. La commande
   est nue — bordure, rayon, fond, ombre, contour a zero — quelle que soit la
   feuille qui l'habillait avant (Moments et le back-office redessinaient une
   bordure sur le <select> : deux traits superposes). zihma.tests interdit
   desormais toute bordure de <select> hors d'app.css. */
.champ-select > select{flex:1 1 auto;min-width:0;min-height:calc(var(--sel-haut) - 2px);
  padding:0 var(--e4);border:0;border-radius:0;background-color:transparent;box-shadow:none;
  font:inherit;color:var(--encre)}
/* Une seule fleche pour toutes les listes : celle du navigateur part et le
   chevron de la bibliotheque prend sa place, dans la boite comme hors boite.
   `[multiple]` est une liste, pas un menu : pas de chevron. Le selecteur est
   volontairement plus lourd que les regles de chaque boite
   (`.esp-champ2__b select{background:none;padding:0}`…) : elles vivent dans
   des feuilles chargees apres celle-ci et effaceraient l'image de fond. */
:is(.champ-select,.encadre__saisie,.encadre__champ,.esp-champ2__b,.cnt-form__b,.barre__valeur) > select:not([multiple]),
select.filtres__champ{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
  background-image:var(--chevron-champ);background-repeat:no-repeat;
  background-position:right 12px center;background-size:16px 16px;text-overflow:ellipsis}

/* ---- Filter system (21/09/2026) ------------------------------------------
   Comme les boutons : UNE famille, reconnaissable partout.
   · FilterButton  .bouton--filtre (resultats, reservations, listes Pro, Moments) : surface
     blanche, filet accent de 1,5 px, icone « filtres » ; ouvert
     ([aria-expanded="true"]) = aplat accent. Ce n'est PAS une puce de
     sous-categorie (.chip : fond clair, 48 px, teinte menthe en selection).
   · FilterChip    .fchip : capsule de 40 px, filet neutre, active = fond
     menthe + texte vert + coche (jamais la couleur seule). Deux etats
     d'activation selon la commande : une case cochee (tiroir des resultats,
     panneaux Client et Pro) ou aria-pressed (Moments, blog).
   · FilterSelect  .champ-select (plus bas), FilterToggle .interrupteur.
   · FilterPanel   .esp-filtres : la boite blanche sous la barre d'outils.
   Les intitules d'un filtre s'ecrivent en casse normale : plus de
   text-transform:uppercase sur « Univers », « Type », « Trier ». */
/* (le FilterButton .bouton--filtre est peint avec les autres variantes de
   .bouton, plus bas : il doit suivre la regle de base pour l'emporter) */

.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;
  margin:0;border:1px solid var(--bord);border-radius:var(--r-pilule);background:var(--surface);
  color:var(--encre);font:inherit;font-size:var(--t3);font-weight:500;line-height:1.2;cursor:pointer;
  transition:border-color var(--mvt-d),background-color var(--mvt-d),color var(--mvt-d)}
.fchip::after{content:"";position:absolute;inset:-2px 0}   /* cible tactile 44 px */
.fchip input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.fchip:hover{border-color:var(--bord-fort);background:var(--fond-creux)}
.fchip:has(input:checked),.fchip[aria-pressed="true"]{background:var(--menthe);border-color:var(--menthe-bord);
  color:var(--vert-encre);font-weight:600}
.fchip:has(input:checked)::before,.fchip[aria-pressed="true"]::before{content:"✓";font-size:var(--t2);line-height:1}
.fchip:has(input:focus-visible),.fchip:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.fchip__compte{font-size:var(--t1);color:var(--gris-faible)}
.fchip__compte:empty{display:none}
.fchip:has(input:checked) .fchip__compte,.fchip[aria-pressed="true"] .fchip__compte{color:inherit;opacity:.85}
.fchip[data-vide="oui"]{border-style:dashed;color:var(--gris-texte)}
.fchip[data-vide="oui"]:has(input:checked){border-style:solid}
/* l'etiquette d'un groupe de filtres : casse normale, 13 px, gris de texte */
.filtre__eti{display:block;margin:0 0 var(--e1);font-size:var(--t2);font-weight:600;color:var(--gris-texte);
  letter-spacing:0;text-transform:none}

/* ---- Indicatif du pays (21/09/2026) : le <select> vit DANS la boite du
   champ telephone, devant la saisie, separe par un filet ; il ne porte ni
   contour ni fond, la boite les porte. Le chevron est celui des listes.
   Les quatre boites sont nommees : leurs propres regles de <select>
   (authentification, compte, Pro, tunnel) sont plus lourdes que « .indicatif ». */
:is(.champ-auth__boite,.esp-tel,.esp-champ2__b,.champ2__boite) > select.indicatif{
  flex:0 0 auto;width:auto;min-width:0;max-width:118px;align-self:stretch;margin:0;
  padding:0 24px 0 0;border:0;background:transparent;font:inherit;font-size:var(--t4);
  font-weight:600;color:var(--encre);cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:var(--chevron-champ);background-repeat:no-repeat;background-position:right 4px center;
  background-size:14px 14px;text-overflow:ellipsis}
:is(.champ-auth__boite,.esp-tel,.esp-champ2__b,.champ2__boite) > select.indicatif + input{
  border-left:1px solid var(--bord);padding-left:var(--e3);flex:1 1 auto;min-width:0}
.champ-auth__boite > select.indicatif{font-size:var(--t5)}
.esp-tel > select.indicatif{padding-left:var(--e4)}
.esp-champ2__b > select.indicatif,.champ2__boite > select.indicatif{padding-left:var(--e3)}
/* Identifiant de connexion : telephone OU e-mail, au choix (21/09/2026). */
.ident-modes{margin:0 0 var(--e2)}
.ident-modes .fchip{min-height:36px}
.champ-auth__boite[hidden]{display:none}

/* ---- SearchField (21/09/2026) : LA recherche secondaire du site --------
   Moments, reservations, messages, Mes biens, listes Pro, centre d'aide,
   blog : sept dessins differents (40 a 56 px, coins de 14 px ou capsule,
   loupe presente ou non, croix presente ou non) pour un seul geste. Une
   primitive, posee par ui.champ_recherche() : la hauteur des boutons
   (--b-haut, pour s'aligner dans une barre d'outils), la CAPSULE de la barre
   de recherche (--search-rayon, jeton partage), une loupe de 20 px a gauche,
   la croix « Effacer » a droite qui n'apparait qu'avec une saisie, le halo
   de focus de la regle unique (plus bas). La grande barre de recherche
   (.barre) n'en fait pas partie : elle a sa propre composition. */
.champ-cherche{position:relative;display:flex;align-items:center;gap:var(--e2);min-width:0;
  height:var(--b-haut);padding:0 var(--e1) 0 var(--e4);background:var(--surface);color:var(--gris-texte);
  border:var(--champ-bord);border-radius:var(--search-rayon);
  transition:border-color var(--mvt-d),box-shadow var(--mvt-d)}
.champ-cherche:hover{border-color:var(--bord-fort)}
.champ-cherche > .ic{width:20px;height:20px;flex:0 0 20px;color:var(--gris-texte)}
.champ-cherche > input{flex:1 1 auto;min-width:0;align-self:stretch;height:100%;margin:0;padding:0;
  border:0;border-radius:0;background:none;font:inherit;font-size:var(--t4);color:var(--encre);
  outline:none;appearance:none;-webkit-appearance:none;text-overflow:ellipsis}
.champ-cherche > input::placeholder{color:var(--gris-faible);text-overflow:ellipsis}
/* la croix native de WebKit part : la notre est un vrai bouton, nomme */
.champ-cherche > input::-webkit-search-cancel-button,
.champ-cherche > input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.champ-cherche__x{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 40px;margin:0;padding:0;border:0;border-radius:50%;
  background:none;color:var(--gris-texte);cursor:pointer;transition:background-color var(--mvt-d),color var(--mvt-d)}
.champ-cherche__x::after{content:"";position:absolute;inset:-2px}   /* cible tactile 44 px */
.champ-cherche__x:hover{background:var(--gris-champ);color:var(--encre)}
.champ-cherche__x:focus-visible{outline:2px solid var(--vert);outline-offset:0}
.champ-cherche__x .ic{width:16px;height:16px}
/* « Effacer » n'a rien a effacer tant que le champ est vide ; un bouton
   d'envoi (fleche du formulaire d'aide) reste. */
.champ-cherche:has(> input:placeholder-shown) > .champ-cherche__x:not([type="submit"]){display:none}
.champ-cherche:has(> input:disabled){background:var(--fond-creux)}
.champ-cherche--petit{--b-haut:40px;padding-left:var(--e3)}
.champ-cherche--petit > .ic{width:16px;height:16px;flex-basis:16px}
.champ-cherche--petit > input{font-size:var(--t3)}

/* Les fleches natives des <input type="number"> (budget du tiroir,
   voyageurs de la barre) : un dessin du navigateur que rien n'atteint.
   Elles partent partout ; les compteurs du site ont leurs ronds − / +, les
   autres nombres se tapent. */
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ================================================================
   Parcours de reservation (planche WEB, groupe « PARCOURS RESERVATION »)
   4 ecrans, chacun avec son propre chrome : la maquette ne pose PAS
   la meme en-tete sur les quatre.
   ================================================================ */
.parcours{min-height:100vh;display:flex;flex-direction:column}
.parcours__barre{display:flex;align-items:center;justify-content:space-between;height:96px;padding:0 60px}
.parcours__barre--centre{justify-content:center;border-bottom:0;height:80px}
.parcours__annuler{display:inline-flex;align-items:center;gap:9px;min-height:var(--tactile);font-size:var(--t5);color:var(--gris-fort)}
.parcours__corps{flex:1;padding:0 100px}
/* 22 px de haut pour un lien de retour, c'est sous les 24 px minimum (WCAG
   2.5.8) : la cible monte a 44 px, le texte ne bouge pas. */
.parcours__retour{display:inline-flex;align-items:center;gap:8px;min-height:var(--tactile);margin:40px 0 0;font-size:var(--t4);color:var(--gris-faible)}
.parcours__titre{margin:26px 0 0;font-size:var(--t13);line-height:1.2;font-weight:700}
.parcours__titre--vert{color:var(--vert)}
.parcours__pied{padding:26px 0 34px;text-align:center;font-size:var(--t3);color:var(--gris-faible);margin-top:64px}
.parcours__confiance{display:flex;justify-content:center;gap:34px;font-size:var(--t3);color:var(--gris-faible);padding:26px 0 34px}
.parcours__confiance span{display:inline-flex;align-items:center;gap:8px}

/* stepper 1 - 2 - 3 */
.etapes{display:flex;align-items:flex-start;justify-content:center;gap:0;margin:44px 0 0}
.etape{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 auto}
.etape__rond{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-size:var(--t5);font-weight:600;background:var(--fond-creux);color:var(--gris-texte)}
.etape__nom{font-size:var(--t3);color:var(--gris-texte)}
.etape[data-etat="actif"] .etape__rond{background:var(--vert);color:var(--texte-inverse)}
.etape[data-etat="actif"] .etape__nom{color:var(--vert);font-weight:600}
.etape[data-etat="fait"] .etape__rond{background:var(--vert);color:var(--texte-inverse)}
.etape[data-etat="fait"] .etape__nom{color:var(--encre)}

/* deux colonnes : formulaire + recapitulatif */
.parcours__grille{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:56px;align-items:start;margin-top:44px}
.blocres{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r5);padding:28px 30px;margin-bottom:32px;
  box-shadow:0 8px 24px rgba(0,89,79,.04)}
.blocres__titre{display:flex;align-items:center;gap:12px;margin:0 0 22px;font-size:var(--t8);font-weight:600}
.blocres__titre .ic{color:var(--vert)}
.champ2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.champ2__eti{display:block;font-size:var(--t1);letter-spacing:.07em;color:var(--gris-texte);font-weight:600;margin-bottom:9px}
.champ2__boite{display:flex;align-items:center;gap:12px}
.champ2__boite > div{flex:1;min-width:0}
/* ---- Compteur : UN composant partage (refonte du 17/09) ------------------------
   Cinq familles se disputaient le meme geste (tunnel, filtres, popover de la
   barre, publication Pro, plats et chambres d'une fiche) ; l'une d'elles
   (tunnel) n'avait meme pas de `display` et ses ronds s'empilaient. Une seule
   regle : deux ronds de 44 px, la valeur entre eux (un <input type=number>
   ou un <output>), etat desactive reel aux bornes. socle.js porte le SEUL
   gestionnaire (`[data-pas]` dans `.compteur`) ; il ecrit la valeur bornee
   puis emet `input` et `change` sur le champ — chaque ecran reagit a ses
   propres evenements, aucun ne recopie l'arithmetique. */
.compteur{display:inline-flex;align-items:center;gap:var(--e2);flex:0 0 auto}
.compteur__b{width:var(--tactile);height:var(--tactile);min-height:0;flex:0 0 var(--tactile);
  padding:0;border-radius:50%;border:1px solid var(--bord);background:var(--surface);color:var(--accent);
  display:grid;place-items:center;cursor:pointer;
  transition:background-color var(--mvt-d) ease,border-color var(--mvt-d) ease,color var(--mvt-d) ease}
.compteur__b .ic{width:16px;height:16px}
.compteur__b:hover:not(:disabled){background:var(--accent-fond);border-color:var(--accent)}
.compteur__b:active:not(:disabled){background:var(--accent-bord)}
.compteur__b:disabled{opacity:.4;cursor:not-allowed;color:var(--gris-faible)}
.compteur__v{width:64px;height:var(--tactile);text-align:center;font:inherit;font-size:var(--t5);font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--encre);background:var(--surface);
  border:1px solid var(--bord);border-radius:var(--r-champ);
  display:inline-grid;place-items:center;-moz-appearance:textfield;appearance:textfield}
.compteur__v::-webkit-outer-spin-button,.compteur__v::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Un compteur « au moins » (filtres) : vide veut dire « tout », le champ le
   dit par son placeholder ; la valeur zero s'efface (socle.js, data-vide-a-zero). */
.compteur[data-vide-a-zero] .compteur__v::placeholder{color:var(--gris-texte);font-weight:500}

.option{display:flex;align-items:flex-start;gap:16px;border:1px solid var(--bord);border-radius:var(--r-champ);
  padding:18px 20px;margin-bottom:16px}
.option input{width:19px;height:19px;margin-top:2px;accent-color:var(--vert);flex:0 0 auto}
.option__corps{flex:1;min-width:0}
.option__titre{display:block;font-weight:600;font-size:var(--t5)}
.option__texte{display:block;font-size:var(--t3);color:var(--gris-faible);margin-top:4px}
.option__prix{flex:0 0 auto;font-weight:600;font-size:var(--t4)}

.recap-res{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r5);padding:26px;
  box-shadow:0 8px 16px rgba(0,89,79,.06)}
@media (min-width:1101px){
  .recap-res{position:sticky;top:24px}
}
.recap-res__bien{display:flex;gap:18px;align-items:flex-start}
.recap-res__vignette{width:96px;height:96px;border-radius:var(--r-champ);object-fit:cover;flex:0 0 auto}
.recap-res__univers{display:block;font-size:var(--t1);letter-spacing:.07em;color:var(--brun);font-weight:600}
.recap-res__nom{margin:6px 0 0;font-size:var(--t7);font-weight:600;color:var(--vert)}
.recap-res__lieu{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:var(--t3);color:var(--gris-texte)}
.recap-res__note{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:var(--t3);color:var(--brun)}
.recap-res h3{margin:0 0 16px;font-size:var(--t7);font-weight:600;color:var(--vert)}
.recap-res__ligne{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px;font-size:var(--t3)}
.recap-res__ligne span:first-child{color:var(--gris-texte)}
.recap-res__total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:18px 0 0}
.recap-res__total b{font-size:var(--t8);font-weight:700}
.recap-res__total .montant{font-size:var(--t8);font-weight:700;color:var(--vert)}
.recap-res__bouton{width:100%;margin-top:22px;background:var(--vert);color:var(--texte-inverse)}
.recap-res__bouton:hover{background:var(--vert-sombre)}
.recap-res__note-bas{margin:14px 0 0;text-align:center;font-size:var(--t2);color:var(--gris-faible)}
.recap-res__rassurance{display:flex;gap:12px;background:var(--menthe);border-radius:var(--r-champ);padding:16px 18px;
  margin-top:18px;font-size:var(--t3);color:var(--vert-encre);line-height:1.5}
.recap-res__rassurance .ic{color:var(--vert);flex:0 0 auto;margin-top:2px}

/* moyens de paiement */
.moyen{display:flex;align-items:center;gap:16px;border:1px solid var(--bord);border-radius:var(--r-champ);
  padding:18px 20px;margin-bottom:16px;cursor:pointer}
.moyen[data-choisi="oui"]{border-color:var(--vert);border-width:2px;padding:17px 19px}
.moyen input{width:20px;height:20px;accent-color:var(--vert);flex:0 0 auto}
.moyen__rond{width:40px;height:40px;border-radius:var(--r-bouton);background:var(--menthe);display:grid;place-items:center;
  color:var(--vert);flex:0 0 auto}
.moyen__nom{flex:1;font-size:var(--t5);font-weight:500}

/* confirmation */
.confirme{max-width:800px;margin:64px auto 0;background:var(--surface);border-radius:var(--r-hero);padding:56px 60px 52px;
  box-shadow:0 10px 40px -10px rgba(0,89,79,.15);text-align:center;position:relative;overflow:hidden}
.confirme::before{content:"";position:absolute;right:-128px;top:-128px;width:256px;height:256px;
  background:rgba(141,212,198,.2);filter:blur(32px);border-radius:50%;pointer-events:none}
.confirme > *{position:relative}
.confirme__rond{width:96px;height:96px;border-radius:50%;background:var(--vert);color:var(--texte-inverse);
  display:grid;place-items:center;margin:0 auto 26px}
.confirme__titre{margin:0;font-size:var(--t12);font-weight:700;color:var(--vert)}
.confirme__sous{margin:12px 0 0;font-size:var(--t6);color:var(--gris-texte)}
.confirme__duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:38px;text-align:left}
.confirme__carte{background:var(--gris-champ);padding:24px 26px}
.confirme__carte h3{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:var(--t6);font-weight:600}
.confirme__carte h2 .ic{color:var(--brun)}
.confirme__ligne{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;font-size:var(--t3)}
.confirme__ligne:last-child{border-bottom:0}
.confirme__ligne span:first-child{color:var(--gris-faible)}
.confirme__statut{padding:5px 13px;border-radius:var(--r-pilule);background:var(--menthe-bord);color:var(--vert-encre);
  font-size:var(--t2);font-weight:600}
.confirme__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:38px}
.confirme__actions .plein{background:var(--vert);color:var(--texte-inverse)}
.confirme__actions .plein:hover{background:var(--vert-sombre)}
.confirme__actions .contour{border:1px solid var(--vert);color:var(--vert)}
.confirme__actions .nu{color:var(--brun)}
.confirme__aide{margin-top:40px;text-align:center;font-size:var(--t4);color:var(--gris-faible)}
.confirme__aide a{display:inline-flex;align-items:center;gap:8px;color:var(--vert);font-weight:600;margin-top:8px}

/* porte d'authentification avant reservation */
.porte{max-width:512px;margin:40px auto 0;background:var(--surface);border-radius:var(--r-hero);padding:36px 40px 40px;
  box-shadow:0 10px 40px rgba(0,89,79,.08);position:relative}
/* 36x36 : le calque porte la cible a 44 sans agrandir la pastille. */
.porte__fermer::after{content:"";position:absolute;left:50%;top:50%;
  width:var(--tactile);height:var(--tactile);transform:translate(-50%,-50%)}
.porte__fermer{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;color:var(--gris-texte)}
.porte__fermer:hover{background:var(--fond-creux);color:var(--encre)}
.porte__titre{margin:0;padding-right:36px;font-size:var(--t10);font-weight:600}
.porte__sous{margin:12px 0 0;font-size:var(--t4);color:var(--gris-texte);line-height:1.5}
.porte__bien{display:flex;gap:16px;background:var(--gris-champ);border-radius:var(--r4);padding:20px;margin-top:22px}
.porte__bien img{width:98px;height:100px;border-radius:var(--r-bouton);object-fit:cover;flex:0 0 auto}
.porte__dates{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:var(--t3);color:var(--gris-texte)}
.porte__prix{display:block;margin-top:8px;font-size:var(--t8);font-weight:700;color:var(--vert)}
.porte__actions{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.porte__actions .plein{background:var(--vert);color:var(--texte-inverse)}
.porte__actions .plein:hover{background:var(--vert-sombre)}
.porte__actions .contour{border:1px solid var(--vert);color:var(--vert)}
/* « Continuer sans compte » est une issue secondaire : un lien souligne, pas
   un troisieme bouton du meme poids que « Creer mon compte ». */
.porte__actions .lien{color:var(--vert);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.porte__actions .lien:hover{color:var(--vert-sombre)}

@media (max-width:1100px){
  .parcours__grille{grid-template-columns:minmax(0,1fr)}
  .parcours__corps{padding:0 40px}
  .confirme__duo{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .parcours__corps{padding:0 20px}
  .parcours__barre{padding:0 20px;height:72px}
  .champ2{grid-template-columns:minmax(0,1fr)}
  .confirme{padding:36px 24px;margin-top:24px}
  .confirme__titre{font-size:var(--t10)}
  .porte{padding:28px 22px 32px}
    .etapes{margin-top:28px}
}

/* ================================================================
   Authentification — AuthLayout (six ecrans, un gabarit).
   Desktop : 100 dvh, overflow cache. Panneau visuel fixe a gauche.
   A droite : logo et titre fixes, formulaire dans .auth__scroll.
   Mobile (<=900 px) : le document peut defiler ; le visuel passe sous
   le formulaire (bandeau), puis disparait sous 389 px.
   ================================================================ */
html:has(body.page-auth){height:100dvh;overflow:hidden}
body.page-auth{height:100dvh;overflow:hidden;display:flex;flex-direction:column;position:relative}
body.page-auth .auth{flex:1 1 auto;min-height:0}
.auth{display:flex;gap:var(--e5);padding:var(--e5);height:100%;
  overflow:hidden;background:var(--fond)}
.auth__panneau{flex:1 1 58%;min-width:0;display:flex;flex-direction:column;
  height:100%;overflow:hidden;
  border-radius:var(--r6);background:var(--vert);color:var(--texte-inverse)}
/* Les photos occupent tout ce que le message ne prend pas ; `min-height:0`
   pour qu'un ecran bas les recadre au lieu d'allonger le panneau. Elles sont
   empilees dans la meme boite ; app.js deplace `data-actif`, le fondu (1,2 s)
   est ici. Sans script, la premiere reste ; en animations reduites, aussi. */
.auth__photos{position:relative;flex:1 1 0;min-height:0;overflow:hidden;background:var(--vert-sombre)}
.auth__photos picture{display:contents}
.auth__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  display:block;opacity:0;transition:opacity 1.2s ease}
.auth__photo[data-actif="oui"]{opacity:1}
/* Le message est pose sur l'aplat vert, separe de la photo par le filet d'or
   (meme jeton que le pied de page) : la signature de la charte, sans effet. */
.auth__mot{flex:0 0 auto;padding:var(--e6) var(--e7);border-top:var(--filet-or)}
.auth__titre-p{margin:0;font-size:var(--t11);line-height:1.15;font-weight:700}
.auth__sous-p{margin:var(--e3) 0 0;font-size:var(--t5);line-height:1.5;color:var(--menthe)}
.auth__globe{display:inline-flex;align-items:center;gap:7px;height:var(--tactile);padding:0 var(--e3);
  border-radius:var(--r-pilule);color:var(--gris-texte);font-size:var(--t3);white-space:nowrap}
.auth__globe:hover{background:var(--gris-champ);color:var(--encre)}
.auth__renvoi-etat{display:block;margin-top:var(--e2);font-size:var(--t2);color:var(--erreur)}
.auth__renvoi-b[disabled]{opacity:.5;cursor:default;text-decoration:none}

/* La colonne de droite : 420 px de contenu (audit U : le formulaire tenait
   dans 8 % de l'ecran), la marque en tete, le reste centre dans la hauteur.
   18/09/2026 : colonnes 58 / 42 fluides ; la colonne du formulaire ne descend
   jamais sous 500 px (le cadre y tient, 486 px au plus, sans gouttiere morte
   a sa droite), c'est la photo qui cede aux tailles intermediaires. */
.auth__droite{flex:0 1 42%;min-width:min(100%,500px);min-height:0;height:100%;
  display:flex;flex-direction:column;padding:0 var(--e7);overflow:hidden}
.auth__tete{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.auth__contenu{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;
  padding:var(--e4) 0 0;max-width:486px;width:100%;overflow:hidden}
/* Le cadre : titre et sous-titre fixes en tete, champs dans .auth__scroll.
   20/09/2026 : il prend la hauteur de son contenu (flex 0 1) et se centre
   dans la colonne — la connexion, courte, laissait 350 px de blanc sous les
   boutons sociaux ; une inscription longue retrecit encore et defile. */
.auth__cadre{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-carte);
  padding:var(--e6) var(--e6) 0;box-shadow:var(--ombre-1)}
.auth__intro{flex:0 0 auto;padding-bottom:var(--e4)}
.auth__cadre .auth__titre{margin-top:0}
.auth__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:var(--e6);scrollbar-width:thin;scrollbar-color:var(--bord-fort) transparent}
.auth__scroll::-webkit-scrollbar{width:8px}
.auth__scroll::-webkit-scrollbar-track{background:transparent}
.auth__scroll::-webkit-scrollbar-thumb{background:var(--bord-fort);border-radius:8px}
/* sous le cadre : la verification publique d'une reservation (17/09/2026) */
.auth__verif{flex:0 0 auto;margin:var(--e4) 0 0;font-size:var(--t3);color:var(--gris-texte);display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--e1) var(--e2)}
.auth__verif-lien{display:inline-flex;align-items:center;gap:6px;min-height:var(--tactile);font-weight:600;color:var(--vert)}
.auth__verif-lien:hover{text-decoration:underline}

.auth__titre{margin:0;font-size:var(--t12);line-height:1.15;font-weight:700;color:var(--encre)}
/* Le sous-titre d'etape reprenait la classe du titre, donc sa cote : 163 px
   de blanc au-dessus de « Petite verification » EN PLUS des 163 px au-dessus
   de « Connectez-vous ». Une regle appliquee deux fois n'est pas un rythme.
   Il a sa respiration a lui, et un rang sous le titre — sans quoi, une fois
   les deux rapproches, deux lignes de 40 px se lisent comme un seul titre. */
.auth__titre--sous{margin-top:var(--e3);font-size:var(--t9);color:var(--gris-fort);font-weight:600}
.auth__texte{margin:var(--e3) 0 0;font-size:var(--t5);line-height:1.6;color:var(--gris-fort);max-width:60ch}
.auth__form{width:100%;max-width:420px;margin:0}
.auth__actions{margin-top:var(--e5)}

/* segment Client / Compte Pro : un selecteur de 52 px, pas une masse de 70 */
.segment{display:flex;background:var(--gris-champ);border-radius:var(--r-pilule);height:52px;padding:4px;
  width:100%;max-width:420px;margin:0}
.segment a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-pilule);font-size:var(--t4);font-weight:600;color:var(--gris-fort);
  transition:background var(--mvt),color var(--mvt)}
.segment a:hover{color:var(--vert)}
.segment a[aria-current="page"]{background:var(--surface);color:var(--vert);box-shadow:var(--ombre-1)}

.auth__intro .segment{margin-top:var(--e4)}
.auth__form > :first-child{margin-top:0}
.champ-auth{margin-top:var(--e4)}
/* La ligne de consentement (inscription) garde le format partage du tunnel ;
   ici le <label> entier est la cible : 44 px de haut, comme tout bouton. */
.champ-auth .paiement__cgv{min-height:var(--tactile);align-items:center}
.champ-auth .paiement__cgv input{margin:0}
/* Particulier ou entreprise (21/09/2026) : deux cartes radio cote a cote en
   tete de l'inscription Pro. Le radio natif dit l'etat (forme pleine ou vide,
   lisible sans la couleur), l'accent suit `.auth--pro` ; bord et rayon
   viennent de la liste partagee des cartes. */
.auth-nature{margin:0;padding:0;border:0;min-width:0}
.auth-nature > legend{padding:0}
.auth-nature__cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e2);margin-top:var(--e2)}
.auth-nature__carte{display:flex;align-items:center;gap:var(--e2);min-height:var(--tactile);padding:var(--e2) var(--e3);
  background:var(--surface);font-size:var(--t4);font-weight:600;line-height:1.3;cursor:pointer;
  transition:border-color var(--mvt),background-color var(--mvt)}
.auth-nature__carte:hover{border-color:var(--bord-fort)}
.auth-nature__carte input{width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:var(--accent);cursor:pointer}
.auth-nature__carte:has(:checked){border-color:var(--accent);background:var(--accent-fond);color:var(--accent-encre)}
.auth-note{margin:var(--e2) 0 0;font-size:var(--t2);line-height:1.5;color:var(--gris-texte)}
.champ-auth__boite{display:flex;align-items:center;gap:14px;border:1px solid var(--bord);
  border-radius:var(--r-champ);padding:0 18px;height:60px;background:var(--surface)}
/* L'etiquette est POSEE A COTE du cadre, pas dedans : le cadre de 60 px ne
   contenait donc qu'une commande de 30, et la moitie de la boite visible ne
   repondait pas au clic. Meme correction que .champ2__saisie et .cnt-form__b. */
.champ-auth__boite input,.champ-auth__boite select{flex:1;min-width:0;border:0;background:none;
  font:inherit;font-size:var(--t5);color:var(--encre);align-self:stretch;scroll-margin-bottom:48px}
/* Le select dessinait DEUX chevrons : celui du navigateur et celui de la
   bibliotheque Zihma pose a sa droite. On retire le natif ; le chevron de la
   boite reste, et le select garde exactement le format des champs. */
.champ-auth__boite select{appearance:none;-webkit-appearance:none;padding-right:0;cursor:pointer}
.champ-auth__boite .ic{color:var(--gris-fort)}

/* pave de saisie du code */
/* Les cases du code ne doivent jamais pousser la page : elles se partagent
   la largeur disponible et gardent une cible tactile confortable. */
/* --- etats du formulaire d'authentification --------------------------------
   Le site n'annonce jamais un succes : il annonce ce qu'il est, une
   demonstration sans service branche. */
.auth__erreur{margin:var(--e3) 0 0;padding:var(--e3) var(--e4);border-radius:var(--r-champ);
  background:var(--erreur-fond);border:1px solid var(--erreur-bord);color:var(--erreur);font-size:var(--t3)}
.auth__demo{margin:var(--e4) 0 0;padding:var(--e4);border-radius:var(--r-champ);
  background:var(--menthe);border:1px solid var(--menthe-bord);color:var(--vert-sombre);font-size:var(--t3)}
.auth__demo-texte{margin:0}
.auth__demo-detail{margin:var(--e2) 0 0;font-size:var(--t2);color:var(--vert-encre);word-break:break-word}
.auth__demo-suite{display:inline-flex;align-items:center;min-height:var(--tactile);
  margin-top:var(--e3);font-weight:600;color:var(--vert);text-decoration:underline}
.champ-auth__oeil{display:grid;place-items:center;width:var(--tactile);height:var(--tactile);
  border-radius:50%;color:var(--gris-texte);flex:0 0 auto}
.champ-auth__oeil:hover{background:var(--gris-champ);color:var(--encre)}
.champ-auth__oeil[aria-pressed="true"]{color:var(--vert)}

/* Six cases compactes (52 px au plus), un groupe et non six grands cadres ;
   le focus est celui de tous les champs. `data-complet` / `data-erreur`
   sont poses par app.js. */
.otp{display:flex;gap:clamp(6px,1.5vw,10px);margin-top:var(--e5);max-width:100%}
.otp input{flex:1 1 0;min-width:0;max-width:52px;aspect-ratio:1;height:auto;
  border:1px solid var(--bord);border-radius:var(--r-champ);
  text-align:center;font:inherit;font-size:var(--t8);font-weight:600;color:var(--encre);background:var(--surface);
  transition:border-color var(--mvt),box-shadow var(--mvt)}
.otp[data-complet="oui"] input{border-color:var(--vert);background:var(--menthe)}
.otp[data-erreur="oui"] input{border-color:var(--erreur)}
.otp[data-erreur="oui"] input:placeholder-shown,.otp[data-erreur="oui"] input:not(:focus){box-shadow:none}
.auth__rappel{margin:var(--e4) 0 0;font-size:var(--t4);color:var(--gris-texte);line-height:1.5}
.auth__renvoi{margin:var(--e3) 0 0;font-size:var(--t3);color:var(--gris-texte)}
.auth__renvoi a{color:var(--vert);font-weight:600}

/* Une seule rangee sur les six ecrans : le secondaire en contour a gauche, le
   principal plein vert a droite (dernier dans l'ordre du document, donc en
   bas quand la rangee se plie). La variante « large » qui empilait les deux
   sur la connexion Client seule est partie : le bouton ne change plus de cote. */
.auth__actions{display:flex;gap:11px;min-width:0}
.auth__actions>:is(a,button){flex:1 1 0;min-width:0;max-width:100%;padding-inline:clamp(14px,3vw,24px)}
.auth__actions>:is(a,button) span{min-width:0;overflow-wrap:anywhere}
/* Auth Pro : meme geometrie, accent brun. `.bouton` lit `--accent`. */
.auth--pro{--accent:var(--brun);--accent-sombre:var(--brun-sombre);
  --accent-fond:var(--carte-chaud);--accent-bord:var(--brun-clair);
  --accent-encre:var(--brun-sombre)}
.auth--pro .segment a[aria-current="page"]{color:var(--accent)}
.auth--pro .auth__oubli{color:var(--accent)}
.auth--pro .auth__oubli:hover{color:var(--accent-sombre)}
.auth--pro .auth__rester input{accent-color:var(--accent)}
.auth--pro .champ-auth__oeil[aria-pressed="true"]{color:var(--accent)}
.auth--pro .auth__verif-lien{color:var(--accent)}

/* --- options de connexion (17/09/2026) : « Rester connecté » et « Mot de
   passe oublié ? » sur une ligne sous le champ ; puis « ou continuer avec »
   et Google / Facebook / Apple en contours gris, sous les actions — lisibles,
   mais clairement seconds derriere « Se connecter » en plein vert. --- */
/* 18/09/2026 : une seule ligne jusqu'a 390 px (la case reste visible) ; le
   pli n'est admis que sous 390 px, ou 216 px de large ne portent pas les deux. */
.auth__options{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);
  flex-wrap:nowrap;margin-top:var(--e3)}
.auth__rester,.auth__oubli{white-space:nowrap;flex:0 0 auto}
.auth__rester{display:inline-flex;align-items:center;gap:10px;min-height:var(--tactile);
  font-size:var(--t3);color:var(--gris-fort);cursor:pointer}
.auth__rester input{width:18px;height:18px;margin:0;accent-color:var(--vert);cursor:pointer}
.auth__oubli{min-height:var(--tactile);padding:0 var(--e1);font-size:var(--t3);font-weight:600;
  color:var(--vert);text-decoration:underline;text-underline-offset:3px;border-radius:var(--r1)}
.auth__oubli:hover{color:var(--vert-sombre)}
.auth__autres{margin-top:var(--e5)}
.auth__ou{display:flex;align-items:center;gap:var(--e3);margin:0;font-size:var(--t2);
  color:var(--gris-texte);letter-spacing:.02em}
.auth__ou::before,.auth__ou::after{content:"";flex:1;height:1px;background:var(--bord)}
.auth__social{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e2);margin-top:var(--e3)}
.auth__social-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--tactile);padding:0 var(--e2);border:1px solid var(--bord);border-radius:var(--r-bouton);
  background:var(--surface);font-size:var(--t3);font-weight:500;color:var(--encre);
  transition:border-color var(--mvt),background var(--mvt)}
.auth__social-b:hover{border-color:var(--bord-fort);background:var(--fond-creux)}
.auth__social-b .ic{flex:0 0 auto}

/* cartes de choix de profil : deux cartes symetriques, entierement
   cliquables ; Client en vert, Prestataire en brun ; survol et focus propres */
/* Choix du profil (21/09/2026) : les deux cartes prenaient les 486 px du
   cadre de formulaire — 200 px chacune, puces coupees en deux lignes, le
   reste de la colonne vide. Elles occupent la colonne entiere et passent
   l'une sous l'autre quand elle est trop etroite (container query). */
.auth__contenu:has(.choix){max-width:none;container-type:inline-size}
.auth__contenu:has(.choix) .auth__scroll{flex:0 1 auto}   /* intro + cartes centrees dans la colonne, pas collees en haut */
.choix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e4);margin:0}
@container (max-width:560px){.choix{grid-template-columns:minmax(0,1fr)}}
.choix__carte{padding:var(--e5);background:var(--surface);display:flex;flex-direction:column;
  transition:border-color var(--mvt),transform var(--mvt-lent),box-shadow var(--mvt-lent)}
.choix__carte:hover,.choix__carte:focus-visible{border-color:var(--vert);transform:translateY(-2px);box-shadow:var(--ombre-2)}
.choix__carte--peche:hover,.choix__carte--peche:focus-visible{border-color:var(--brun)}
.choix__carte--peche .choix__liste .ic{color:var(--brun)}
.choix__carte--peche .choix__nom{color:var(--brun)}
.choix__carte[data-actif]{border-color:var(--vert)}
.choix__rond{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--menthe);color:var(--vert)}
.choix__rond--peche{background:var(--carte-chaud);color:var(--brun)}
.choix__nom{margin:var(--e4) 0 0;font-size:var(--t6);font-weight:700;color:var(--vert)}
.choix__liste{list-style:none;margin:var(--e3) 0 0;padding:0;display:grid;gap:var(--e2)}
.choix__liste li{display:flex;align-items:center;gap:10px;font-size:var(--t4);line-height:1.4;color:var(--gris-fort)}
.choix__liste .ic{color:var(--vert);flex:0 0 auto}


@media (max-width:1024px) and (min-width:901px){
  .auth__panneau{flex-basis:40%}
  .auth__droite{flex-basis:60%;padding:0 var(--e4);min-width:min(100%,420px)}
}
@media (max-width:1240px){
  .auth__droite{padding:0 var(--e5)}
  .auth__mot{padding:var(--e5)}
  .auth__titre-p{font-size:var(--t10)}
  .auth__titre{font-size:var(--t11)}
}
@media (max-width:900px){
  html:has(body.page-auth),
  body.page-auth{height:auto;min-height:100dvh;overflow:auto}
  body.page-auth .auth{flex:none;height:auto;overflow:visible}
  .auth{flex-direction:column;height:auto;overflow:visible}
  /* Le panneau decoratif occupait TOUT le premier ecran d'un telephone
     (844 px) : ni logo, ni titre, ni champ visibles sans defiler. Le
     formulaire passe devant ; le panneau reste, sous lui, comme visuel de
     marque, et se resserre : la photo garde un format 3:2 borne en hauteur. */
  .auth__droite{order:-1;flex-basis:auto;height:auto;min-height:0;overflow:visible}
  .auth__panneau{flex:0 0 auto;min-height:0;height:auto}
  /* 17/09/2026 : sous le formulaire, l'image devient un bandeau qui ne
     depasse jamais 30 % de l'ecran. */
  .auth__photos{flex:0 0 auto;aspect-ratio:3/2;max-height:30vh}
  .auth__contenu,.auth__cadre,.auth__scroll{overflow:visible;height:auto;flex:none;min-height:0}
  .auth__cadre{padding-bottom:var(--e6)}
  .auth__form,.segment{width:100%}
}
@media (max-width:640px){
  .auth{padding:12px;gap:16px}
  .auth__titre{font-size:var(--t10)}
  .auth__contenu{padding:var(--e5) 0}
  .auth__cadre{padding:var(--e5) var(--e4)}
  .auth__mot{padding:var(--e5) var(--e4)}
  .auth__titre-p{font-size:var(--t9)}
  .choix{grid-template-columns:minmax(0,1fr)}
  .auth__actions{flex-direction:column}
  .auth__actions>:is(a,button){width:100%;white-space:normal}
  /* 18/09/2026 : « Rester connecté » et « Mot de passe oublié ? » tiennent
     sur la ligne de 284 px d'un ecran de 390 px (13 px, sans marge laterale). */
  .auth__rester,.auth__oubli{font-size:var(--t2)}
  .auth__oubli{padding-inline:0}
  .otp input{max-width:48px;font-size:var(--t7)}
}
@media (max-width:480px){
  /* Trois marques sur 250 px : le nom ne tient plus, le glyphe et l'aria-label
     restent (« Continuer avec Google »). */
  .auth__social-b span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .auth__social-b{position:relative}
}
@media (max-width:389px){
  /* Sous 390 px la photo s'efface : le message de marque suffit. */
  .auth__photos{display:none}
  .auth__options{flex-wrap:wrap}
  /* « Compte Pro » tenait sur deux lignes dans sa pilule de 107 px */
  .segment a{font-size:var(--t3);gap:6px;white-space:nowrap}
}

/* ============================================ pages editoriales et juridiques
   Lot 5 : « editorial shell » commun a toutes les pages du pied — en-tete,
   hero compact (eyebrow, titre, introduction), contenu a la largeur de page
   (1 280) ou de lecture (780), appel final, pied. Memes jetons, meme rythme
   (48 px entre blocs), memes composants partages (accordeon, articles,
   appel, etapes, cartes). */
.cnt{max-width:var(--page);margin:0 auto;padding:0 var(--gouttiere) var(--rythme-section)}
.cnt__tete{padding:var(--e6) 0 var(--e2);max-width:860px}
.cnt__retour{margin:0 0 var(--e3) calc(-1 * var(--e2))}
/* La recherche de l'aide, dans la tete de page : le SearchField partage
   (.champ-cherche), pas un heros. */
.cnt-recherche{margin-top:var(--e5);max-width:640px}
.cnt-recherche__eti{display:block;margin:0 0 var(--e2);font-size:var(--t3);font-weight:600;color:var(--encre)}
/* Deux colonnes quand la page a un sommaire (l'aide) : le contenu et, a
   droite, la liste des rubriques collee au defilement — discrete : pas de
   filet, titre en capitales, liens de 13 px. */
.cnt__corps--sommaire{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:var(--e8);align-items:start}
.cnt__corps--sommaire .cnt__colonne{min-width:0}
.cnt-sommaire{position:sticky;top:calc(var(--haut-entete,80px) + var(--e5));margin-top:var(--rythme-section);
  padding:0 0 0 var(--e4);border-left:1px solid var(--bord)}
.cnt-sommaire__titre{margin:0 0 var(--e2);font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--gris-texte)}
.cnt-sommaire ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cnt-sommaire a{display:inline-flex;align-items:center;min-height:36px;font-size:var(--t2);color:var(--gris-texte);
  transition:color var(--mvt)}
.cnt-sommaire a:hover,.cnt-sommaire a[aria-current="true"]{color:var(--vert);font-weight:600}
@media (max-width:1023px){
  .cnt__corps--sommaire{grid-template-columns:minmax(0,1fr)}
  .cnt-sommaire{display:none}
}
/* eyebrow : capitales espacees precedees d'un filet d'or, la signature */
.cnt__sur{display:flex;align-items:center;gap:var(--e3);font-size:var(--t1);letter-spacing:.14em;color:var(--brun);
          margin:0 0 var(--e3);text-transform:uppercase;font-weight:600}
.cnt__sur::before{content:"";width:28px;height:1px;background:var(--or)}
.cnt__h1{font-size:var(--t13);line-height:1.1;font-weight:700;margin:0 0 var(--e4);letter-spacing:-.015em;text-wrap:balance}
.cnt__chapo{font-size:var(--t6);line-height:1.6;color:var(--gris-fort);margin:0;max-width:62ch}
.cnt__bloc{margin-top:var(--rythme-section);scroll-margin-top:calc(var(--haut-entete,80px) + var(--e4))}
.cnt__bloc--lecture{max-width:780px}
.cnt__bloc--article{max-width:820px}
.cnt__corps--sommaire .cnt__bloc--lecture{max-width:none}
.cnt__corps--sommaire .cnt-cartes,.cnt__corps--sommaire .cnt-cartes[data-colonnes]{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.cnt__corps--sommaire .cnt-cartes,.cnt__corps--sommaire .cnt-cartes[data-colonnes]{grid-template-columns:minmax(0,1fr)}}
.cnt__tete-bloc{margin:0 0 var(--e5)}
.cnt__h2{font-size:var(--t9);font-weight:700;margin:0;line-height:1.2;letter-spacing:-.01em}
/* la signature de la charte sur chaque titre de section : le filet d'or du pied et du bandeau */
.cnt__h2::before{content:"";display:block;width:28px;height:2px;margin:0 0 var(--e3);background:var(--or);border-radius:1px}
.cnt-faq__tete .cnt__h2::before{margin-bottom:var(--e2)}
/* une section sur bande creuse (parcours, chiffres) : la page respire par
   alternance ivoire / ivoire creux au lieu d'empiler des cartes blanches */
.cnt__bloc--bande{padding:var(--e6);background:var(--fond-creux);border-radius:var(--r-hero)}
.cnt__bloc--bande .cnt__tete-bloc{margin-bottom:var(--e5)}
@media (max-width:640px){.cnt__bloc--bande{padding:var(--e5) var(--e4)}}
/* chiffres cles, lus dans le catalogue : quatre grands nombres sur la bande */
.cnt-chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e4)}
.cnt-chiffre{display:flex;flex-direction:column;gap:var(--e1);padding:var(--e4) var(--e5);background:var(--surface)}
.cnt-chiffre__v{font-size:var(--t12);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--vert);
  font-variant-numeric:tabular-nums}
.cnt-chiffre__l{font-size:var(--t4);color:var(--gris-fort);line-height:1.4}
@media (max-width:900px){.cnt-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* « Continuer la visite » : les autres pages de la meme colonne du pied */
.cnt-suite{margin-top:var(--rythme-section);padding-top:var(--e5);border-top:1px solid var(--bord)}
.cnt-suite__titre{margin:0 0 var(--e3);font-size:var(--t2);font-weight:600;letter-spacing:0;color:var(--gris-texte)}
.cnt-suite__liens{display:flex;flex-wrap:wrap;gap:var(--e2);margin:0;padding:0;list-style:none}
.cnt-suite__lien{display:inline-flex;align-items:center;gap:var(--e2);min-height:var(--tactile);padding:0 var(--e4) 0 var(--e3);
  border:1px solid var(--bord);border-radius:var(--r-pilule);background:var(--surface);color:var(--encre);
  font-size:var(--t3);font-weight:600;transition:background-color var(--mvt-d),border-color var(--mvt-d),color var(--mvt-d)}
.cnt-suite__lien .ic{width:16px;height:16px;color:var(--vert)}
.cnt-suite__lien:hover{background:var(--menthe);border-color:var(--menthe-bord);color:var(--vert-encre)}
.cnt__sous{font-size:var(--t4);line-height:1.55;color:var(--gris-texte);margin:var(--e2) 0 0;max-width:62ch}
.cnt__p{font-size:var(--t5);line-height:1.7;color:var(--gris-fort);margin:0 0 var(--e4);max-width:70ch}
.cnt__lien{display:inline-flex;align-items:center;gap:6px;min-height:var(--tactile);font-weight:600;color:var(--vert)}
.cnt__lien:hover{text-decoration:underline;text-underline-offset:3px}
/* un encart clair : precision, reserve, « a venir » */
.cnt__encart{background:var(--fond-creux);border-radius:var(--r-carte);padding:var(--e5)}
.cnt__encart .cnt__p:last-child{margin-bottom:0}
.cnt__note{display:flex;align-items:flex-start;gap:var(--e2);font-size:var(--t3);line-height:1.55;color:var(--gris-texte);
           margin:var(--e4) 0 0;background:var(--fond-creux);border-radius:var(--r3);padding:var(--e3) var(--e4)}
.cnt__note .ic{flex:0 0 auto;margin-top:2px}

/* cartes a picto — meme famille que les cartes de l'editorial de l'accueil */
.cnt-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--e4)}
.cnt-cartes[data-colonnes="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cnt-cartes[data-colonnes="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cnt-carte{background:var(--surface);padding:var(--e5);display:flex;flex-direction:column;gap:var(--e2);
  transition:box-shadow var(--mvt-d),transform var(--mvt-d),border-color var(--mvt-d);
  transition:border-color var(--mvt),transform var(--mvt-lent)}
a.cnt-carte:hover{border-color:var(--vert);transform:translateY(-2px)}
.cnt-carte:hover{box-shadow:var(--ombre-2);transform:translateY(-2px);border-color:var(--menthe-bord)}
.cnt-carte__rond{width:48px;height:48px;border-radius:var(--r3);background:var(--menthe);
                 color:var(--vert);display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--e2)}
.cnt-carte__rond img{filter:none}
.cnt-carte__titre{font-size:var(--t6);font-weight:700;margin:0;line-height:1.3}
.cnt-carte__texte{font-size:var(--t4);line-height:1.55;color:var(--gris-fort);margin:0}
.cnt-carte__lien{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:var(--e2);
                 font-size:var(--t3);font-weight:600;color:var(--vert)}
@media (max-width:1023px){.cnt-cartes[data-colonnes="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cnt-cartes,.cnt-cartes[data-colonnes]{grid-template-columns:minmax(0,1fr)}}

/* questions frequentes : l'accordeon partage (.accordeon) ; ici seulement la
   tete de section et le badge du public */
.cnt-faq__tete{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;margin-bottom:var(--e4)}
.cnt-faq__q{font-size:inherit;font-weight:inherit;margin:0;line-height:inherit}
.cnt-faq__public{font-size:var(--t1);letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--vert-encre);background:var(--menthe);
  padding:4px 10px;border-radius:var(--r-pilule)}
.cnt-faq__public[data-public="Prestataire"]{color:var(--brun);background:var(--carte-chaud)}
.cnt-contact__s{margin:6px 0 0;font-size:var(--t2);color:var(--gris-texte);line-height:1.5}

/* formulaire du centre d'aide : les champs du systeme (format unique), des
   etiquettes de 14 px, une barre d'actions */
.cnt-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--e4) var(--e5);margin-top:var(--e5)}
.cnt-form__champ{margin:0;min-width:0;display:flex;flex-direction:column;gap:6px}
.cnt-form__champ--large{grid-column:1 / -1}
.cnt-form__e{font-size:var(--t3);font-weight:600;color:var(--encre)}
.cnt-form__e i{color:var(--erreur);font-style:normal}
.cnt-form__aide{font-size:var(--t2);color:var(--gris-texte)}
.cnt-form__b{display:flex;align-items:center}
/* Le cadre a beau faire 54 px, c'est la COMMANDE qui recoit le clic : sans
   hauteur, le <select> et l'<input> tombaient a 20-22 px, soit un tiers de la
   boite visible. Meme correction que .encadre__bloc select sur la fiche. */
.cnt-form__b input,.cnt-form__b select{width:100%;min-width:0;border:0;background:none;
  font:inherit;color:inherit;padding:0;min-height:var(--tactile);align-self:stretch}
.cnt-form__pied{grid-column:1 / -1;margin-top:var(--e2)}
.cnt-form__etat{margin:0;font-size:var(--t3);line-height:1.5}
.cnt-form__etat[data-ton="alerte"]{color:var(--brun)}
.cnt-form__etat[data-ton="erreur"]{color:var(--erreur)}
.cnt-form__envoi{background:var(--vert);color:var(--texte-inverse)}
.cnt-form__envoi:hover{background:var(--vert-sombre)}
@media (max-width:640px){.cnt-form{grid-template-columns:minmax(0,1fr)}}

/* grille des six univers */
.cnt-uns{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.cnt-univers{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--bord);
             border-radius:var(--r-carte);padding:26px 28px}
.cnt-univers{transition:box-shadow var(--mvt-d),transform var(--mvt-d),border-color var(--mvt-d)}
.cnt-univers:hover{border-color:var(--menthe-bord);box-shadow:var(--ombre-2);transform:translateY(-2px)}
.cnt-univers__titre{font-size:var(--t8);font-weight:600;margin:0}
.cnt-univers__n{font-size:var(--t4);color:var(--gris-faible);margin:4px 0 0}
.cnt-univers__fl{margin-left:auto;width:40px;height:40px;border-radius:50%;flex:0 0 40px;
                 border:1px solid var(--vert);color:var(--vert);display:inline-flex;
                 align-items:center;justify-content:center}
.cnt-univers:hover .cnt-univers__fl{background:var(--vert);color:var(--texte-inverse)}

/* coordonnees : une carte par canal, le statut « a venir » en pilule — un
   canal absent n'est ni simule ni laisse en boite vide. */
.cnt-contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--e4)}
.cnt-contact{display:flex;align-items:flex-start;gap:var(--e3);background:var(--surface);
  border:1px solid var(--bord);border-radius:var(--r-carte);padding:var(--e4)}
.cnt-contact .cnt-carte__rond{flex:0 0 40px;margin:0}
.cnt-contact__corps{min-width:0}
.cnt-contact__l{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;font-size:var(--t4);font-weight:600;color:var(--encre);margin:0 0 2px}
.cnt-contact__etat{font-size:var(--t1)}
.cnt-contact__v{font-size:var(--t5);font-weight:600;color:var(--vert);margin:0}
.cnt-contact__v--absent{color:var(--gris-texte);font-weight:400;font-size:var(--t2)}

/* articles juridiques */
.cnt-legal__art{margin-bottom:var(--e6);scroll-margin-top:6rem}
.cnt-legal__titre{font-size:var(--t8);font-weight:700;margin:0 0 var(--e3)}

/* ---- Hero editorial avec visuel (21/09/2026) : le texte a gauche, une
   photographie du site a droite (coins --r-hero), empiles sous 900 px. La
   tete sans visuel garde sa largeur de lecture (860 px). */
.cnt__tete--visuel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;align-items:stretch;
  max-width:none;margin-top:var(--e3);padding:0;overflow:hidden;border-radius:var(--r-hero);
  background:var(--vert);color:var(--texte-inverse);box-shadow:var(--ombre-carte)}
.cnt__tete--visuel .cnt__tete-texte{min-width:0;padding:var(--e7) var(--e7) var(--e7) var(--e7);
  display:flex;flex-direction:column;justify-content:center}
.cnt__tete--visuel .cnt__sur{color:var(--or)}
.cnt__tete--visuel .cnt__h1{color:var(--texte-inverse)}
.cnt__tete--visuel .cnt__chapo{color:var(--menthe)}
.cnt__tete--visuel .cnt-recherche__eti{color:var(--texte-inverse)}
.cnt__tete--visuel .cnt-recherche{max-width:560px}
.cnt__tete--visuel :focus-visible{outline-color:var(--texte-inverse)}
.cnt__visuel{width:100%;height:100%;min-height:360px;object-fit:cover;object-position:50% 45%;display:block}
/* « Retour » vit au-dessus du bandeau, pas dedans */
.cnt__tete-haut{padding:var(--e6) 0 0}
.cnt__tete-haut .cnt__retour{margin-bottom:0}
.cnt__tete-haut + .cnt__tete{padding-top:var(--e3)}
.cnt__tete-haut + .cnt__tete--visuel{margin-top:var(--e3)}
/* Filtres d'une liste editoriale : FilterChips + SearchField sur une ligne,
   la recherche a droite, empiles sous 640 px. */
.cnt-filtres{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e3) var(--e4);
  margin:calc(-1 * var(--e2)) 0 var(--e5)}
.cnt-filtres .champ-cherche{flex:1 1 260px;max-width:380px}
.cnt-filtres .fchips{flex:1 1 auto}
.articles__item{min-width:0;display:flex}
.articles__item > .article{flex:1 1 auto}
.articles__item--une{grid-column:1 / -1}
.articles__item[hidden]{display:none}
.cnt__h3{font-size:var(--t7);font-weight:700;margin:0 0 var(--e4);line-height:1.25}
.cnt__passes{margin-top:var(--rythme-section)}
.cnt__vide{margin:var(--e4) 0 0;padding:var(--e4) var(--e5);border-radius:var(--r-carte);background:var(--fond-creux);
  font-size:var(--t4);color:var(--gris-texte);line-height:1.5}
.cnt__badge{display:inline-flex;margin:0 0 var(--e3)}

@media (max-width:900px){
  .cnt{padding:0 var(--e5) var(--rythme-section)}
  .cnt__tete{padding-top:var(--e6)}
  .cnt__tete--visuel{grid-template-columns:minmax(0,1fr);gap:0}
  .cnt__tete--visuel .cnt__tete-texte{padding:var(--e5)}
  .cnt__visuel{order:-1;aspect-ratio:16/9;min-height:0;max-height:260px}
  .cnt__h1{font-size:var(--t12)}
  .cnt__chapo{font-size:var(--t5)}
  .cnt__h2{font-size:var(--t8)}
  .cnt__bloc{margin-top:var(--e6)}
}
@media (max-width:640px){
  .cnt{padding:0 var(--e4) var(--e6)}
  .cnt__h1{font-size:var(--t11)}
}
.cnt-carte__rond .ic,.cnt-carte__rond img{width:24px;height:24px;flex:0 0 24px}
.cnt-contact .cnt-carte__rond .ic,.cnt-contact .cnt-carte__rond img{width:20px;height:20px}
.cnt-contact__s{margin:4px 0 0}

/* options (langue et devise) : deux groupes au meme rythme, une commande
   par choix, le radio natif dit l'etat */
.cnt-options{display:flex;flex-direction:column;gap:var(--e2);margin-top:var(--e4)}
/* Compte rendu d'une recherche dans l'aide, pose sous le titre de la page. */
.cnt-cherche{margin:var(--e4) 0 0;padding:var(--e3) var(--e4);border-radius:var(--r-champ);
  background:var(--menthe);color:var(--vert-sombre);font-size:var(--t4)}
.cnt-cherche__tout{font-weight:600;color:var(--vert);text-decoration:underline}
.cnt-pref__etat{margin:var(--e3) 0 0;font-size:var(--t2);color:var(--gris-texte)}
.cnt-pref__etat:empty{display:none}
.cnt-option{display:flex;align-items:flex-start;gap:var(--e3);border:1px solid var(--bord);
            border-radius:var(--r-champ);padding:var(--e3) var(--e4);background:var(--surface);cursor:pointer;
            transition:border-color var(--mvt),background var(--mvt)}
.cnt-option:hover{border-color:var(--bord-fort)}
.cnt-option input{width:20px;height:20px;flex:0 0 20px;margin:2px 0 0;accent-color:var(--vert)}
.cnt-option:has(:checked){border-color:var(--vert);background:var(--menthe)}
.cnt-option:has(:checked) p{color:var(--gris-texte)}
.cnt-groupe{border:0;padding:0;margin:0;min-width:0}
.cnt-groupe > legend{padding:0}
.cnt-option b{display:block;font-size:var(--t5);font-weight:600}
.cnt-option p{font-size:var(--t3);color:var(--gris-texte);margin:2px 0 0;line-height:1.5}
/* ---- profil public d'un prestataire ----------------------------------------
   Une bande menthe, deux paragraphes, une liste : tout au meme niveau, et les
   quatre chiffres — la raison d'etre de la page — noyes au milieu. Trois temps
   desormais : identite, chiffres, puis presentation et pieces verifiees. */
/* Profil public d'un prestataire (21/09/2026) : une carte de visite qui
   porte l'identite ET les chiffres, puis presentation a gauche et rail de
   preuve colle a droite. */
.cnt__bloc--profil{margin-top:var(--e5)}
.cnt-pro{overflow:hidden;background:var(--surface)}
.cnt-pro__bandeau{display:flex;align-items:center;gap:var(--e6);flex-wrap:wrap;
  padding:var(--e6);background:var(--menthe)}
.cnt-pro__portrait{position:relative;flex:0 0 auto;display:block}
.cnt-pro__photo{width:140px;height:140px;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 3px var(--menthe),0 0 0 6px var(--or)}
.cnt-pro__pastille{position:absolute;right:4px;bottom:4px;display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;background:var(--vert);
  color:var(--texte-inverse);box-shadow:0 0 0 4px var(--menthe)}
.cnt-pro__ident{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--e3)}
.cnt-pro__badge{display:inline-flex;align-items:center;gap:var(--e2);margin:0;
  padding:0 var(--e4);min-height:34px;border-radius:var(--r-pilule);
  background:var(--surface);color:var(--vert-encre);
  font-size:var(--t2);font-weight:700}
.cnt-pro__badge .ic{color:var(--vert)}
/* les reperes : ce que le chapo dit deja, en trois mots separes d'un point d'or */
.cnt-pro__reperes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--e1) 0;
  font-size:var(--t4);color:var(--vert-encre)}
.cnt-pro__reperes li{display:inline-flex;align-items:center}
.cnt-pro__reperes li + li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--or);margin:0 var(--e3)}
.cnt-pro__actes{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e2)}
/* trois offres : trois colonnes, pas une grille de resultats a trou */
@media (min-width:1024px){.cnt__bloc--profil ~ .cnt__bloc .cnt__grille-offres{--colonnes:3}}

/* Les chiffres ferment la carte : quatre tuiles blanches, filets d'or entre
   les colonnes. Ce sont eux qu'on vient lire. */
.cnt-pro__chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;background:var(--surface);overflow:hidden}
.cnt-pro__chiffre{padding:var(--e5) var(--e4);text-align:center;position:relative}
.cnt-pro__chiffre + .cnt-pro__chiffre::before{content:"";position:absolute;left:0;top:var(--e4);bottom:var(--e4);
  width:1px;background:var(--bord)}
.cnt-pro__chiffres b{display:block;font-size:var(--t11);font-weight:700;
  color:var(--vert);line-height:1.1;letter-spacing:-.02em}
.cnt-pro__chiffres span{display:block;margin-top:4px;font-size:var(--t2);
  color:var(--gris-texte)}
@media (max-width:640px){.cnt-pro__chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cnt-pro__chiffre:nth-child(odd)::before{display:none}
  .cnt-pro__chiffre:nth-child(n+3){border-top:1px solid var(--bord)}}

/* Presentation a gauche, rail de preuve a droite : la preuve ne se lit pas
   apres trois paragraphes, elle se voit a cote et reste sous les yeux. */
.cnt-pro__duo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);
  gap:var(--e6);align-items:start;margin-top:var(--e6)}
.cnt-pro__h2{margin-bottom:var(--e4)}
.cnt-pro__rail{display:flex;flex-direction:column;gap:var(--e4);
  position:sticky;top:calc(var(--haut-entete,80px) + var(--e4))}
.cnt-pro__aside{padding:var(--e5);background:var(--surface)}
.cnt-pro__aside--verifie{background:var(--fond-creux)}
.cnt-pro__aside-titre{margin:0 0 var(--e3);font-size:var(--t6);font-weight:700;
  color:var(--vert)}
.cnt-pro__mention{display:flex;align-items:flex-start;gap:var(--e2);margin:0;
  font-size:var(--t2);color:var(--gris-texte);line-height:1.5}
.cnt-pro__mention .ic{color:var(--vert);flex:0 0 auto;margin-top:2px}
.cnt-pro__note{margin:0;padding:0 var(--e2);font-size:var(--t2);color:var(--gris-texte);line-height:1.5}
@media (max-width:900px){.cnt-pro__duo{grid-template-columns:minmax(0,1fr)}
  .cnt-pro__rail{position:static}}
@media (max-width:640px){.cnt-pro__bandeau{padding:var(--e5)}
  .cnt-pro__reperes{flex-direction:column;gap:2px}.cnt-pro__reperes li + li::before{display:none}
  .cnt-pro__actes{width:100%}.cnt-pro__actes .bouton{flex:1 1 auto;justify-content:center}}
.cnt-pro__liste{list-style:none;margin:0;padding:0}
.cnt-pro__liste li{display:flex;align-items:center;gap:12px;font-size:var(--t4);color:var(--gris-fort);padding:10px 0}
.cnt-pro__liste .ic{color:var(--vert)}
/* page d'un article, d'un evenement, d'un episode : largeur de lecture */
.cnt-art__hero{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:var(--r-carte);margin-bottom:var(--e4)}
.cnt-art__meta{display:block;font-size:var(--t2);color:var(--gris-texte);margin:0 0 var(--e5);letter-spacing:.04em}
.cnt__h2--article{font-size:var(--t8);margin:var(--e6) 0 var(--e3)}
.cnt-art__retour{display:inline-flex;align-items:center;gap:10px;margin-top:var(--e6);
  min-height:var(--tactile);font-size:var(--t4);font-weight:600;color:var(--vert)}
.cnt-art__retour:hover{text-decoration:underline;text-underline-offset:3px}

/* pages annexes de fiche : toutes les photos, tous les avis (deduites) */
.galerie-tout{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px;
              margin-top:26px}
/* L'en-tete est collee en haut : sans cette marge, arriver sur #photo-3
   depuis une vignette de la fiche placait la photo SOUS l'en-tete. */
.galerie-tout figure{scroll-margin-top:96px}
.galerie-tout figure{margin:0}
/* §6.4 : « boutons retour, favori, partager, signaler » — la galerie n'avait
   que le retour. */
.galerie-tout__actions{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
  margin-top:var(--e5)}
.galerie-tout img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-carte);
                  display:block;aspect-ratio:4/3}
/* `auto-fill` laissait un avis seul occuper la moitie gauche et l'autre
   moitie vide. `auto-fit` fait occuper toute la largeur au dernier. */
.avis-tout{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
           gap:var(--e5);margin-top:var(--e6)}
.galerie-tout__photo{display:block;border-radius:var(--r-carte);overflow:hidden;cursor:zoom-in}
.galerie-tout__photo:focus-visible{outline:3px solid var(--vert);outline-offset:2px}
.galerie-tout__retour{display:inline-flex;align-items:center;gap:10px;margin-top:var(--e5);
                      min-height:var(--tactile);font-size:var(--t6);color:var(--vert)}
.galerie-tout__retour:hover{text-decoration:underline}
@media (max-width:900px){
  .galerie-tout,.avis-tout{grid-template-columns:minmax(0,1fr)}
}
/* commandes qui n'ouvrent pas de page : elles sont des <button>, pas des liens */
.auth__renvoi-b{color:var(--vert);font-weight:600;text-decoration:underline}



/* ---- fenetres modales ---------------------------------------------------
   Ouvertes par socle.js pour les commandes qui ne valent pas une page :
   langue et devise, notifications, galeries d'une fiche. La page dessous
   reste en place, on ne perd plus l'endroit ou l'on etait.

   UNE famille (17/09/2026) : le meme cadre sert aux notifications, a la
   langue et devise, aux galeries, a la fiche d'une reservation (volet Pro)
   et a la promotion. Barre de titre (titre, note eventuelle, onglets
   eventuels, croix de 44 px), corps qui defile SEUL entre deux filets, pied
   qui porte « Terminé ». La hauteur suit l'ecran : la barre et le pied
   restent visibles, rien ne passe derriere le bord. */
/* `height:fit-content` : sans lui le <dialog> prenait TOUTE sa hauteur
   maximale — 852 px pour 636 px de contenu, un panneau a moitie vide qui
   defilait quand meme. Il epouse desormais ce qu'il contient, jusqu'a la
   limite de l'ecran. */
.modale{padding:0;border:0;background:none;max-width:min(600px,calc(100vw - var(--e5) * 2));
        max-height:calc(100dvh - var(--e7));height:fit-content;
        width:100%;color:var(--encre);overflow:visible}
.modale::backdrop{background:rgba(14,14,14,.52)}
/* Entree discrete : 150 ms de fondu, un leger releve. La preference
   « moins d'animations » du haut de cette feuille la ramene a rien. */
@keyframes modale-entrer{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes modale-fondu{from{opacity:0}to{opacity:1}}
.modale[open]{animation:modale-entrer .15s ease}
.modale[open]::backdrop{animation:modale-fondu .15s ease}
.modale__cadre{background:var(--surface);border-radius:var(--r5);box-shadow:var(--ombre-3);
               display:flex;flex-direction:column;max-height:calc(100dvh - var(--e7));
               height:auto;overflow:hidden}
/* Une galerie a besoin de largeur : des photos serrees dans une colonne de
   fenetre de preferences ne se regardent pas. */
.modale.modale--large{max-width:min(1120px,94vw)}
.modale--large .galerie-tout{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
/* Barre de titre : titre et note a gauche, croix a droite sur la meme
   ligne, onglets en dessous sur toute la largeur quand la page en a. */
.modale__tete{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--e2) var(--e4);
              padding:var(--e4) var(--e4) var(--e3) var(--e5);border-bottom:1px solid var(--bord)}
.modale__entete{flex:1 1 0;min-width:0;min-height:var(--tactile);
                display:flex;flex-direction:column;justify-content:center;gap:2px}
.modale__titre{margin:0;flex:1 1 auto;font-size:var(--t7);font-weight:700;line-height:1.25;
               color:var(--vert);letter-spacing:-.018em;overflow-wrap:anywhere}
.modale__sous{margin:0;font-size:var(--t3);line-height:1.45;color:var(--gris-texte)}
.modale__sous:empty{display:none}
.modale__fermer{flex:0 0 auto;width:var(--tactile);height:var(--tactile);border-radius:50%;
                background:var(--fond-creux);color:var(--encre);font-size:var(--t9);line-height:1;
                display:grid;place-items:center;transition:background var(--mvt-d) ease}
.modale__fermer:hover{background:var(--menthe);color:var(--vert)}
/* Onglets compacts (« Tout | Non lus ») : la pilule de l'espace, resserree.
   36 px de haut a l'ecran, 44 px au doigt par le pseudo-element — la regle
   de pro.css ne suit pas jusqu'ici, la fenetre vit hors de `.pro`. */
.modale__onglets{flex:1 1 100%;min-width:0}
.modale__onglets:empty{display:none}
.modale__onglets .esp-segment{margin:0;padding:3px}
.modale__onglets .esp-segment a{position:relative;height:34px;padding:0 var(--e4);font-size:var(--t3)}
.modale__onglets .esp-segment a::after{content:"";position:absolute;left:50%;top:50%;
  width:max(100%,var(--tactile));height:max(100%,var(--tactile));transform:translate(-50%,-50%)}
.modale__corps{flex:1 1 auto;min-height:0;padding:var(--e4) var(--e5);overflow-y:auto;overscroll-behavior:contain}
.modale__chapo{margin:0;font-size:var(--t3);line-height:1.5;color:var(--gris-texte)}

/* La fenetre reprenait la typographie d'une PAGE : titres de section a 26 px,
   options a 20 px de rembourrage. Dans un panneau de 600 px, six choix
   occupaient 852 px de haut et le corps defilait. On resserre — c'est un
   panneau, pas un article. */
.modale__corps h2,.modale__corps .cnt__h2,.modale__corps legend{
  font-size:var(--t4);font-weight:600;margin:0 0 var(--e2)}
.modale__corps > :first-child h2,.modale__corps > :first-child legend{margin-top:0}
/* Options (langue, devise) : une ligne par choix, la note secondaire passe a
   la ligne sous le libelle sans jamais pousser le bouton radio. */
.modale__corps .cnt-options{gap:var(--e2);margin-top:0}
.modale__corps .cnt-option{padding:var(--e2) var(--e3);gap:var(--e3);border-radius:var(--r3)}
.modale__corps .cnt-option > span{flex:1 1 0;min-width:0}
.modale__corps .cnt-option b{font-size:var(--t4)}
.modale__corps .cnt-option p{font-size:var(--t2);line-height:1.45}
.modale__corps .cnt__bloc{margin-top:0}
.modale__corps .cnt__bloc + .cnt__bloc{margin-top:var(--e5)}
.modale__corps .cnt__chapo,.modale__corps .cnt__sur{font-size:var(--t3)}

/* Les cartes du centre d'aide sont dessinees pour une page pleine : icone en
   rond, titre, description, 28 px de rembourrage — 250 px chacune. Dans un
   panneau de 600 px, trois rubriques faisaient defiler sans rien montrer de
   plus. On les remet en ligne : le rond passe a gauche du texte. */
.modale__corps .cnt-cartes{grid-template-columns:minmax(0,1fr);gap:var(--e2)}
/* Pas de rayon ici : le format commun des cartes en fixe un seul, et un
   controle l'exige. On ne change que la MISE EN PAGE. */
.modale__corps .cnt-carte{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:var(--e3);padding:var(--e3) var(--e4)}
.modale__corps .cnt-carte__rond{grid-row:1 / span 2;width:40px;height:40px}
.modale__corps .cnt-carte h3{margin:0;font-size:var(--t5)}
.modale__corps .cnt-carte p{margin:2px 0 0;font-size:var(--t2)}

/* Le contenu arrive avec le rythme d'une page : 48 px entre deux sections,
   80 px avant le bloc d'appel. Mesure faite, la fenetre n'en montre que
   563 px — ce rythme-la y depense un tiers de la hauteur en vide. On le
   resserre a l'ecart courant ; la page, elle, garde le sien. */
.modale__corps > * + *{margin-top:var(--e4)}
.modale__corps .appel-edito{padding:var(--e4) var(--e5);margin-top:var(--e5)}
/* Notifications dans la fenetre : la tete de jour ouvre la liste sans le
   grand ecart de la page, et deux jours se suivent a un ecart de section. */
.modale__corps .esp-notif__jour{margin:0 0 var(--e2)}
.modale__corps .esp-notif__item + .esp-notif__jour{margin-top:var(--e4)}
.modale__corps .esp-notif__item{margin-bottom:var(--e2)}

/* Pied fixe : la croix ferme, ce bouton confirme. Il reste visible quand le
   corps defile — sinon on ne sait pas que la fenetre a une fin. Fond plein :
   sans lui le contenu defilait DERRIERE le bouton, visible au travers. */
.modale__pied{flex:0 0 auto;display:flex;justify-content:flex-end;
  gap:var(--e3);padding:var(--e3) var(--e5);background:var(--surface);
  border-top:1px solid var(--bord);border-radius:0 0 var(--r5) var(--r5)}
/* Geometrie : la regle de format. Ici la couleur seule. */
.modale__valider{background:var(--vert);color:var(--texte-inverse)}
.modale__valider:hover{background:var(--vert-sombre)}
.modale__corps:focus{outline:none}
.modale__attente{color:var(--gris-texte);margin:0;padding:var(--e5) 0}
/* Le contenu recupere arrive avec ses marges de page : on les neutralise, la
   fenetre pose les siennes. */
.modale__corps > :first-child{margin-top:0}
.modale__corps > .bloc,.modale__corps > .fiche,.modale__corps > .esp,
.modale__corps > .pro{padding-left:0;padding-right:0;margin-left:0;margin-right:0}
@media (max-width:560px){
  /* Sur mobile la fenetre se pose en bas : le pouce y arrive, le titre reste
     visible en haut de la feuille. */
  .modale{max-width:100vw;width:100vw;margin:auto auto 0;max-height:88dvh}
  .modale__cadre{border-radius:var(--r5) var(--r5) 0 0;max-height:88dvh}
  .modale__tete{padding:var(--e3) var(--e3) var(--e3) var(--e4)}
  .modale__corps{padding:var(--e3) var(--e4)}
  .modale__pied{padding:var(--e3) var(--e4)}
  .modale__valider{flex:1 1 auto}
}

/* ---- notifications : Client et Prestataire, page pleine et fenetre -------
   UN gabarit (ui.notifications, appele par espace.py et pro.py) et UNE
   feuille. La liste vivait dans espace.css, que les pages publiques ne
   chargent pas : ouverte depuis une fiche, la fenetre « Notifications » du
   Client arrivait nue, sans onglets ni rangees (mesure du 17/09/2026). Ici,
   elle est habillee partout ou la fenetre peut s'ouvrir.
   Groupes par jour ; rangee = rond iconique · titre · texte · temps ;
   non lue = fond menthe tres leger ET point vert ; lue = blanc. */
.esp-notif__tete{display:flex;align-items:flex-start;gap:24px;margin-top:26px}
.esp-segment{margin-left:auto;display:inline-flex;background:var(--gris-champ);border-radius:var(--r-pilule);
             padding:4px;flex:0 0 auto}
.esp-segment a{display:inline-flex;align-items:center;height:38px;padding:0 26px;
               border-radius:var(--r-pilule);font-size:var(--t5);color:var(--gris-texte)}
.esp-segment [aria-current="page"]{background:var(--vert);color:var(--texte-inverse);font-weight:500}
/* Items compacts (17/09/2026) : les grands rectangles menthe de 26 x 28 px
   de rembourrage faisaient de trois notifications un ecran entier, dans la
   fenetre comme sur la page. Une ligne par notification : petit rond, titre,
   texte court, heure. Lu = blanc sur l'ivoire de la page ; non lu = fond a
   peine teinte ET point vert, l'etat ne repose pas sur la couleur seule. */
.esp-notif__jour{display:flex;align-items:center;gap:8px;font-size:var(--t4);color:var(--gris-texte);
                 margin:var(--e5) 0 var(--e2);font-weight:600}
.esp-notif__jour .ic,.esp-notif__jour img{width:17px;height:17px}
.esp-notif__item{display:flex;gap:var(--e3);align-items:flex-start;border-radius:var(--r3);
                 border:1px solid var(--bord);background:var(--surface);
                 padding:var(--e3) var(--e4);margin-bottom:var(--e2);color:inherit}
.esp-notif__item[data-neuf="oui"]{background:color-mix(in srgb,var(--menthe) 55%,var(--surface));
                                  border-color:var(--menthe-bord)}
/* Sur ce fond menthe, l'heure en --gris-faible ne tenait que 4,42:1. On ne
   monte le gris QUE la : sur fond clair, les notifications lues gardent
   leur heure discrete, et la hierarchie des gris reste lisible. */
.esp-notif__item[data-neuf="oui"] .esp-notif__q{color:var(--gris-texte)}
.esp-notif__point{width:8px;height:8px;border-radius:50%;background:var(--vert);
                  flex:0 0 8px;margin-top:14px}
.esp-notif__rond{width:36px;height:36px;border-radius:50%;flex:0 0 36px;
                 display:inline-flex;align-items:center;justify-content:center}
.esp-notif__rond[data-ton="vert"]{background:var(--menthe);color:var(--vert)}
.esp-notif__rond[data-ton="beige"]{background:var(--fond-creux);color:var(--gris-fort)}
.esp-notif__rond .ic,.esp-notif__rond img{width:18px;height:18px}
/* Le bloc de texte prend la place qui reste et sait se retrecir : l'heure
   ne tombe pas dessous. */
.esp-notif__texte{flex:1 1 0;min-width:0}
.esp-notif__t{font-size:var(--t4);font-weight:600;margin:0;line-height:1.35}
.esp-notif__x{font-size:var(--t3);color:var(--gris-texte);margin:2px 0 0;line-height:1.45;max-width:620px}
.esp-notif__q{margin-left:auto;font-size:var(--t2);color:var(--gris-faible);white-space:nowrap;flex:0 0 auto;
              padding-top:2px}

@media (max-width:900px){
  /* Le renvoi a la ligne ne doit faire tomber QUE l'heure : le bloc de texte
     garde sa largeur souple, la pastille et le rond restent sur sa ligne. */
  .esp-notif__item{flex-wrap:wrap;gap:var(--e2) var(--e3)}
  .esp-notif__q{margin-left:0;width:100%;padding-top:0}
  .esp-notif__tete{flex-wrap:wrap}
  .esp-segment{margin-left:0}
}
@media (max-width:480px){
  .esp-segment a{height:var(--tactile)}   /* au doigt, 44 px de cible */
}

/* États pleins issus des contours de la bibliothèque commune. */
.carte__note .ic{fill:currentColor}

/* ------------------------------------------------------------- calendrier
   Le panneau que le navigateur ouvrait sur un <input type="date"> est gris,
   carre, et hors de portee du CSS : aucune regle de cette feuille ne peut
   l'atteindre. Il est remplace par un panneau a nous (socle.js), dessine avec
   les jetons du site — meme rayon que les cartes, meme ombre que les fenetres,
   meme menthe pour la plage retenue. Le champ, lui, reste natif : c'est
   toujours lui qui porte la valeur et qui part dans le formulaire.

   L'indicateur natif garde sa place — c'est l'affordance du champ — mais ne
   recoit plus le clic : il irait rouvrir le panneau du navigateur. */
input[type="date"]::-webkit-calendar-picker-indicator{pointer-events:none}
/* Une surface qui FLOTTE ne porte pas de filet sur ce site : elle se detache
   par l'ombre, comme la barre de recherche du heros (.recherche) — et le format
   commun des cartes reste ce qu'il est, une seule regle. Meme rayon qu'elle. */
.cal{position:absolute;z-index:60;width:340px;max-width:calc(100vw - 16px);
  padding:var(--e4);background:var(--surface);
  border-radius:var(--r-hero);box-shadow:var(--ombre-3)}
.cal__tete{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);
  margin-bottom:var(--e2)}
.cal__mois{margin:0;flex:1 1 auto;text-align:center;font-size:var(--t5);
  font-weight:600;color:var(--encre);text-transform:capitalize}
.cal__nav{width:var(--tactile);height:var(--tactile);flex:0 0 var(--tactile);
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--vert);background:none;border:0}
.cal__nav:hover{background:var(--menthe)}
.cal__jours{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:var(--e1)}
.cal__jours span{text-align:center;font-size:var(--t1);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--gris-faible)}
.cal__semaine{display:grid;grid-template-columns:repeat(7,1fr)}
/* Aucune gouttiere entre les jours : la plage retenue doit se lire comme une
   bande continue, pas comme sept pastilles separees. */
.cal__j{height:var(--tactile);min-height:0;padding:0;border:0;border-radius:50%;
  background:none;color:var(--encre);font-size:var(--t4);font-weight:500;
  font-variant-numeric:tabular-nums;line-height:1}
.cal__j:hover:not([disabled]){background:var(--menthe)}
.cal__j--hors{color:var(--gris-faible);opacity:.55}
.cal__j[disabled]{color:var(--gris-faible);opacity:.4;cursor:default}
.cal__j--plage{background:var(--menthe);border-radius:0}
/* L'autre bout de la plage — la date deja saisie dans le champ jumeau —
   se lit, sans se confondre avec celle qu'on est en train de choisir. */
.cal__j--bout{background:var(--menthe);color:var(--vert-encre);font-weight:700;
  box-shadow:inset 0 0 0 1.5px var(--vert)}
.cal__j[data-cal-aujourdhui="oui"]{box-shadow:inset 0 0 0 1.5px var(--menthe-bord)}
.cal__j[aria-selected="true"]{background:var(--vert);color:var(--texte-inverse);
  border-radius:50%;box-shadow:none}
.cal__j[aria-selected="true"]:hover{background:var(--vert-sombre)}
.cal__j:focus-visible{outline:3px solid var(--vert);outline-offset:-3px}
/* Disponibilite (21/09/2026, fiche.js › data-cal-etats) : un jour complet ou
   bloque est desactive, gris et barre discretement sur un fond creux ; un
   jour ferme garde le gris des jours refuses ; « peu » (dernieres
   disponibilites) porte un point d'or sous le chiffre ; la legende sous la
   grille n'apparait que si le champ porte des etats. Jetons seulement. */
.cal__j--complet[disabled]{color:var(--gris-texte);background:var(--fond-creux);opacity:.75;
  text-decoration:line-through;text-decoration-color:var(--gris-faible);text-decoration-thickness:1px}
.cal__j--peu{position:relative}
.cal__j--peu::after{content:"";position:absolute;left:50%;bottom:5px;width:5px;height:5px;
  margin-left:-2.5px;border-radius:50%;background:var(--or)}
.cal__j--peu[aria-selected="true"]::after{background:var(--texte-inverse)}
.cal__legende{margin:var(--e2) 0 0;font-size:var(--t1);color:var(--gris-texte);text-align:center;line-height:1.4}

/* Audit : statut explicite et actions lisibles sur les petits écrans. */
.demo-bandeau{margin:0;padding:var(--e3) var(--e5);background:var(--menthe);color:var(--vert-encre);font-size:var(--t3);text-align:center}

/* ---- EmptyState partage (ui.etat_vide) --------------------------------
   Une icone, un titre, une phrase, une action : le meme dessin pour
   « aucune envie », « aucun message », « aucune reservation », « aucune
   transaction », « aucune offre ». */
.etat-vide{display:flex;flex-direction:column;align-items:center;gap:var(--e2);
  margin:var(--e5) 0 0;padding:var(--e7) var(--e5);text-align:center;
  border:1px dashed var(--bord);border-radius:var(--r-carte);background:var(--surface)}
.etat-vide__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--menthe);color:var(--vert)}
.etat-vide__titre{margin:var(--e2) 0 0;font-size:var(--t6);font-weight:600;color:var(--encre)}
.etat-vide__texte{margin:0;max-width:44ch;font-size:var(--t3);line-height:1.5;color:var(--gris-texte)}
.etat-vide__action{--b-haut:var(--b-haut-petit);--b-marge:var(--b-marge-petit);
  --b-texte:var(--b-texte-petit);
  margin-top:var(--e2);border:1.5px solid var(--vert);color:var(--vert)}
.etat-vide__action:hover{background:var(--menthe)}
.pro .etat-vide__ic{background:var(--carte-chaud);color:var(--brun)}
.pro .etat-vide__action{border-color:var(--brun);color:var(--brun)}
.pro .etat-vide__action:hover{background:var(--carte-chaud)}
.etat-vide[hidden]{display:none}

@media(max-width:480px){
  .fiche__actions{gap:var(--e2);width:100%}
  .fiche__actions{--b-marge:var(--e2);--b-texte:var(--t2);--b-gouttiere:var(--e1)}
  .fiche__actions .fiche__action{flex:1;min-width:0}
}


/* ====================================================================
   COQUE — en-tete, recherche contextuelle, barre des univers.
   Le meme composant sur l'accueil (« Tout »), les six univers et la
   recherche globale (ui.coque). Collee en haut (sticky, jamais fixed :
   elle reste dans le flux et ne recouvre rien au repos). Trois etats :
     repos            : en-tete, barre de recherche entiere, univers ;
     .coque--compacte : apres ~120 px de defilement (shell.js) — la barre
                        se replie, un resume d'une ligne prend le milieu de
                        l'en-tete ; la marge basse compense exactement la
                        hauteur repliee, le contenu ne saute pas ;
     .coque--ouverte  : le resume redeploie la barre PAR-DESSUS le contenu,
                        sans bouger la page.
   Sous 900 px, l'etat replie est l'etat de repos.
   ==================================================================== */
.coque{position:sticky;top:0;z-index:40;background:var(--fond);
  --coque-delta:0px;margin-bottom:var(--coque-delta);
  transition:box-shadow var(--mvt-lent),margin-bottom var(--mvt-lent)}
.coque[data-colle="oui"]{box-shadow:var(--ombre-2)}
.coque .entete{position:static;box-shadow:none;min-height:72px;padding:0}
.coque .entete[data-colle="oui"]{box-shadow:none}
.coque .entete__inner{padding:var(--e2) var(--page-gutter)}
.coque__recherche{display:grid;grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows var(--mvt-lent),visibility 0s}
/* Aucun rembourrage vertical sur le pli : replie, il mesure exactement 0 et
   la marge de compensation (`--coque-delta`, sa hauteur depliee) tombe juste. */
.coque__pli{min-height:0;overflow:hidden;padding:0 var(--page-gutter)}
/* ALIGNEMENT (consigne client du 20/09) : la barre commence et finit sur les
   MEMES axes que l'en-tete. Elle etait bornee a 1160 px et centree dans un
   pli large de 1800 px : a 1440, 1728 et 1920 px, elle demarrait 140 a 320 px
   apres le logo et s'arretait autant avant la zone Profil. Elle occupe
   desormais toute la largeur du pli — c'est le CONTAINER partage
   (`--page-max-width` / `--page-gutter`) qui decide de l'axe, pas une largeur
   propre a la recherche. */
.coque__pli .barre{margin:2px 0 var(--e4);width:100%;max-width:none;
  box-shadow:var(--ombre-1);border:1px solid var(--bord)}
/* La page qui porte la coque est une colonne flex : les marges de la coque
   et du contenu ne fusionnent pas, sinon la compensation serait faussee. */
.page:has(> .coque){display:flex;flex-direction:column}
.coque__fermer{display:none}
.coque--compacte .coque__recherche{grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows var(--mvt-lent),visibility 0s var(--mvt-lent-d)}
/* Variante « fiche » : la recherche est repliee d'emblee, a toute largeur, et
   ne se redeploie que par le resume (par-dessus le contenu). La coque garde
   une hauteur constante : rien ne saute. */
.coque--detail .coque__recherche{grid-template-rows:0fr;visibility:hidden;transition:none}
.coque--detail .resume{display:flex}
.coque--detail .entete__fin{margin-left:0}
/* Redeployee : par-dessus le contenu, jamais dans le flux (pas de saut). */
.coque--ouverte .coque__recherche{position:absolute;left:0;right:0;top:100%;
  grid-template-rows:1fr;visibility:visible;background:var(--fond);
  border-top:1px solid var(--bord);box-shadow:var(--ombre-3);
  transition:none}
.coque--ouverte .coque__pli{padding-top:var(--e4);padding-bottom:var(--e4);max-height:calc(100dvh - 130px);overflow:auto;
  display:flex;flex-wrap:wrap;gap:var(--e3);align-items:flex-start;justify-content:center}
.coque--ouverte .coque__pli .barre{flex:1 1 auto;margin:0;width:100%;max-width:none}
.coque--ouverte .coque__fermer{display:inline-flex;align-items:center;gap:var(--e2);
  min-height:var(--tactile);padding:0 var(--e4);border-radius:var(--r-pilule);
  border:1px solid var(--bord);background:var(--surface);color:var(--gris-fort);font-size:var(--t3)}
.coque--ouverte .coque__fermer:hover{color:var(--vert);border-color:var(--vert)}
/* Le voile, sous la coque seulement : il ferme la barre d'un appui a cote (shell.js). */
.coque--ouverte::before{content:"";position:absolute;top:100%;left:0;right:0;height:100vh;z-index:-1;
  background:var(--voile-page)}
@keyframes coque-deplier{from{opacity:0;transform:translateY(-6px)}}
.coque--ouverte .coque__recherche{animation:coque-deplier var(--mvt-lent)}

/* ---- le resume : une ligne dans l'en-tete, quand la barre est repliee ---- */
.resume{display:none;flex:1 1 auto;max-width:600px;min-width:0;margin:0 auto;
  align-items:center;gap:var(--e3);min-height:48px;padding:5px 5px 5px var(--e4);
  border:1px solid var(--bord);border-radius:var(--r-pilule);background:var(--surface);
  box-shadow:var(--ombre-1);text-align:left;color:var(--encre);
  transition:box-shadow var(--mvt),border-color var(--mvt)}
.resume:hover{box-shadow:var(--ombre-2);border-color:var(--bord-fort)}
.resume__ligne{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--t2);color:var(--gris-texte)}
.resume__ligne--fort{flex:0 1 auto;font-size:var(--t3);font-weight:600;color:var(--encre);
  padding-right:var(--e3);border-right:1px solid var(--bord)}
.resume__ligne:not(.resume__ligne--fort){flex:1 1 0}
.resume__loupe{order:3;flex:0 0 auto;width:36px;height:36px;padding:9px;border-radius:50%;
  background:var(--vert);color:var(--texte-inverse)}
.coque--compacte .resume{display:flex}
.coque--compacte .entete__fin{margin-left:0}
.resume[aria-expanded="true"]{border-color:var(--vert)}

/* ---- la barre des univers : de vrais liens, une seule ligne ---------- */
.univers-barre{display:flex;gap:var(--e5);padding:0 var(--page-gutter);
  overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
  border-bottom:1px solid var(--bord)}
.univers-barre::-webkit-scrollbar{display:none}
/* CATEGORIE PRINCIPALE (consigne client du 20/09) : plus de pilule verte.
   « Tout », « Séjours », « Restauration », « Mobilité », « Évasion »,
   « Immobilier » et « Événementiel » sont des LIBELLES ; la categorie courante
   se signale par un texte legerement renforce et un SOULIGNEMENT vert fin.
   Un aplat vert plein faisait de la navigation une rangee de sept boutons et
   la confondait avec les sous-categories, qui sont un autre geste (voir
   `.chip` dans recherche.css).
   La zone tactile reste confortable — 48 px de haut, un rembourrage
   horizontal TRANSPARENT — meme si rien ne se voit au repos. */
.univers-barre__lien{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  min-height:48px;padding:0 var(--e2);
  font-size:var(--t3);font-weight:500;color:var(--gris-fort);white-space:nowrap;
  scroll-snap-align:start;border:0;background:none;
  transition:color var(--mvt)}
.univers-barre__lien .ic{width:18px;height:18px;flex:0 0 auto;color:var(--brun)}
.zihma-univers-icone{display:block;flex:0 0 auto;opacity:.82;
  transform:scale(1);transform-origin:center;
  transition:opacity var(--categorie-trait-mvt) ease,transform var(--categorie-trait-mvt) ease,
    filter var(--categorie-trait-mvt) ease}
.univers-barre__lien:hover .zihma-univers-icone{opacity:1;transform:scale(1.04)}
.zihma-univers-icone--active,.univers-barre__lien[aria-current] .zihma-univers-icone{
  opacity:1;filter:saturate(1.12) contrast(1.03)}
/* Le trait : fin, legerement arrondi, centre SOUS LE LABEL (il s'arrete au
   rembourrage tactile, il ne le traverse pas), et il se deploie du centre en
   180 ms plutot que d'apparaitre d'un bloc. */
.univers-barre__lien::after{content:"";position:absolute;left:var(--e2);right:var(--e2);bottom:0;
  height:var(--categorie-trait);border-radius:var(--categorie-trait);
  background:var(--categorie-active);opacity:0;transform:scaleX(0);transform-origin:center;
  transition:transform var(--categorie-trait-mvt) ease,opacity var(--categorie-trait-mvt) ease}
.univers-barre__lien:hover{color:var(--vert)}
/* Au survol le trait s'esquisse : on voit ou l'on va, sans annoncer un etat. */
.univers-barre__lien:hover::after{opacity:.4;transform:scaleX(.6)}
/* `page` sur une page d'univers, `location` sur la fiche d'un bien de cet
   univers : le meme soulignement, le meme repere. Aucun fond. */
.univers-barre__lien[aria-current]{color:var(--categorie-active);font-weight:600}
.univers-barre__lien[aria-current] .ic{color:var(--categorie-active)}
.univers-barre__lien[aria-current]::after{opacity:1;transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .zihma-univers-icone{transition:none}
  .univers-barre__lien:hover .zihma-univers-icone{transform:none}
}

/* ---- le pays du marche : un rond-drapeau, un panneau --------------- */
.pays{position:relative;display:flex;align-items:center}
.pays__bouton{list-style:none;display:inline-flex;align-items:center;gap:8px;min-width:var(--tactile);height:var(--tactile);
  padding:0 var(--e3) 0 10px;border-radius:var(--r-pilule);cursor:pointer;transition:background var(--mvt);
  color:var(--gris-texte);font-size:var(--t3);white-space:nowrap}
.pays__pays{font-weight:600;color:var(--encre)}
.pays__devise::before{content:"·";margin-right:8px;color:var(--gris-faible)}
.pays__langue{display:flex;align-items:center;gap:var(--e2);min-height:var(--tactile);margin-top:var(--e2);
  padding:0 var(--e2);border-top:1px solid var(--bord);color:var(--vert);font-weight:600;font-size:var(--t3)}
.pays__langue .ic{width:16px;height:16px}
@media (max-width:1240px){.pays__pays{display:none}.pays__devise::before{display:none}}
.pays__bouton::-webkit-details-marker{display:none}
.pays__bouton:hover,.pays[open] .pays__bouton{background:var(--gris-champ)}
.pays__drapeau{display:inline-flex;width:24px;height:24px;border-radius:50%;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--voile-filet);font-size:var(--t1);font-weight:700;
  align-items:center;justify-content:center;background:var(--gris-pilule);color:var(--gris-fort)}
.pays__drapeau i{flex:1 1 0;display:block;height:100%}
/* Le selecteur de pays/devise vit dans l'en-tete, sur le meme axe que la
   recherche : meme rayon de panneau, meme capsule sur son champ. */
.pays__panneau{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(320px,calc(100vw - 32px));
  padding:var(--e3);background:var(--surface);border:var(--bord-popover);border-radius:var(--search-panneau-rayon);
  box-shadow:var(--ombre-popover)}
.pays__titre{margin:0 0 var(--e2);font-size:var(--t2);color:var(--gris-texte)}
.pays__titre b{color:var(--encre)}
.pays__recherche{background:var(--gris-champ)}
.pays__liste{list-style:none;margin:var(--e2) 0 0;padding:0;display:grid;gap:2px}
.pays__ligne{display:flex;align-items:center;gap:var(--e3);min-height:var(--tactile);padding:0 var(--e2);
  border-radius:var(--r3);cursor:pointer}
.pays__ligne:hover{background:var(--gris-champ)}
.pays__ligne input{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
.pays__ligne:has(input:focus-visible){outline:3px solid var(--vert);outline-offset:2px}
.pays__ligne:has(input:checked){background:var(--menthe)}
.pays__ligne--bientot{cursor:default;color:var(--gris-faible)}
.pays__ligne--bientot:hover{background:none}
.pays__nom{display:flex;flex-direction:column;line-height:1.25;font-size:var(--t3)}
.pays__nom small{font-size:var(--t1);color:var(--gris-texte)}
.pays__note{margin:var(--e3) 0 0;font-size:var(--t1);color:var(--gris-texte);line-height:1.4}
.pays__ligne[hidden]{display:none}

/* ---- accueil : tetes de section, entrees rapides, grilles ----------- */
.section__sous{margin:var(--e1) 0 0;font-size:var(--t3);color:var(--gris-texte);max-width:60ch}
.section__puces{display:flex;flex-wrap:wrap;gap:var(--e2);margin:calc(var(--e4) * -1) 0 var(--e4)}
.section__puce{display:inline-flex;align-items:center;min-height:var(--tactile);padding:0 var(--e3);
  border:1px solid var(--bord);border-radius:var(--r-pilule);background:var(--surface);
  font-size:var(--t2);font-weight:500;color:var(--gris-fort);transition:border-color var(--mvt),color var(--mvt)}
.section__puce:hover{border-color:var(--vert);color:var(--vert)}
/* Sous 640 px les similaires d'une fiche deviennent un rail, comme les
   rangees de l'accueil : trois offres sur une ligne que le doigt fait
   defiler, plutot que trois cartes de 358 px de haut empilees. Les pages de
   resultats gardent la grille. */
@media (max-width:640px){
  .rangee--simil{gap:var(--e3);padding:2px 2px var(--e2)}
  .rangee--accueil{gap:var(--e3);padding:2px var(--section-x) var(--e2) 2px}
  .rangee--accueil .carte,.rangee--simil .carte{flex:0 0 min(72vw,300px);width:auto}
  .section__puces{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:calc(var(--e3) * -1)}
  .section__puces::-webkit-scrollbar{display:none}
  .section__puce{flex:0 0 auto}
}

/* ---- la carte des univers (Leaflet, chargee a l'approche) ----------- */
.carte-univers{display:grid;gap:var(--e4)}
.carte-univers__fond{height:clamp(320px,50vh,540px);border-radius:var(--r-carte);
  background:var(--menthe);border:1px solid var(--bord);overflow:hidden;z-index:0}
.carte-univers__etat{margin:0;font-size:var(--t2);color:var(--gris-texte)}
.carte-univers__lieux{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--e2)}
.carte-univers__lieux li{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--e3);
  border-radius:var(--r-pilule);background:var(--surface);border:1px solid var(--bord);font-size:var(--t2)}
.carte-univers__lieux li span{color:var(--gris-texte)}
.carte-univers__fond .leaflet-popup-content{margin:12px;line-height:1.45;font:inherit;font-size:var(--t2)}
.carte-univers__fond .leaflet-popup-content b{display:block;margin-bottom:4px}
.carte-univers__fond .leaflet-popup-content a{color:var(--vert);text-decoration:underline}
.carte-univers__repere{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--vert);color:var(--texte-inverse);font-weight:700;font-size:var(--t2);
  border:2px solid var(--surface);box-shadow:var(--ombre-2)}

/* ---- paliers de la coque : les memes gouttieres que les sections ------
   `--page-gutter` est redefinie sur la COQUE, pas sur chaque composant : la
   barre de recherche, l'en-tete et la navigation des univers la suivent
   ensemble, et les resultats la lisent aussi. Une seule valeur par palier. */
@media (max-width:1023px){
  .coque,.resultats{--page-gutter:var(--e5)}
}
@media (max-width:640px){
  .coque,.resultats{--page-gutter:var(--e4)}
}
/* Sous 900 px : la barre est repliee au repos, le resume la remplace. */
@media (max-width:899px){
  .coque .entete,.entete,.entete__inner{min-height:64px}
  .coque__recherche{grid-template-rows:0fr;visibility:hidden}
  .coque--ouverte .coque__recherche{grid-template-rows:1fr;visibility:visible}
  .coque .resume{display:block;position:relative;flex:1 1 0;min-width:0;max-width:none;margin:0;
    min-height:var(--tactile);padding:6px 46px 6px var(--e3)}
  .resume__ligne--fort{border-right:0;padding-right:0;font-size:var(--t2);line-height:1.25}
  .resume__ligne:not(.resume__ligne--fort){font-size:var(--t1);line-height:1.25}
  .resume__loupe{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;padding:8px}
  .coque--ouverte .coque__pli{max-height:calc(100dvh - 118px)}
  .coque--ouverte .coque__fermer{width:100%;justify-content:center}
}
@media (max-width:640px){
  .coque .entete{gap:var(--e2)}
  .coque .entete__logo{width:84px;height:auto}
  .coque .mobnav__bouton{margin-left:0}
  .coque .mobnav__mot{display:none}
  /* Le rembourrage tactile ne descend pas sous 8 px : le trait resterait
     centre, mais le doigt n'aurait plus de marge entre deux libelles. */
  .univers-barre{gap:var(--e3)}
  .univers-barre__lien{padding:0 var(--e2);font-size:var(--t2)}
}

/* ---- LE container partage : un seul axe pour la coque ----------------
   En-tete, barre de recherche et navigation des univers sont bornes par la
   MEME largeur et centres ensemble ; les gouttieres sont posees plus haut par
   `--page-gutter`. C'est ce qui garantit que le bord gauche de la recherche
   tombe sur le logo et son bord droit sur la zone Profil, a tous les paliers.
   `.resultats` (recherche.css) lit les deux memes jetons. */
.coque__pli,.univers-barre{width:100%;max-width:var(--page-max-width);
  margin-left:auto;margin-right:auto}

/* ---- transitions entre documents (Chrome, Safari 18) : la coque reste en
   place, le reste fond en 220 ms. Une indication, pas une dependance. ---- */
@view-transition{navigation:auto}
.coque{view-transition-name:coque}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* ====================================================================== LOT 5
   SYSTÈME PARTAGÉ — une marque, trois contextes (public, client, pro).
   Chaque composant ci-dessous est écrit UNE fois et coloré par --accent :
   vert sur le site public et l'espace Client, brun dans l'espace Pro. Les
   formats uniques (boutons, cartes, champs, pilules) restent ceux du haut de
   cette feuille ; ici ne vivent que les compositions qui manquaient ou qui
   existaient en trois versions (tableaux, navigation secondaire, cartes de
   chiffres, appels, articles, accordéons, interrupteurs). */
:root{--accent:var(--vert);--accent-sombre:var(--vert-sombre);--accent-fond:var(--menthe);
      --accent-bord:var(--menthe-bord);--accent-encre:var(--vert-encre)}
/* Espace Pro (consigne client du 16/09) : seuls le rail et le WALLET sont
   bruns ; tout le reste garde l'accent vert du produit. Le brun est donc un
   contexte, pose sur les pages Wallet et sur la StatCard du solde. */
.pro [data-contexte="wallet"],.pro .stat--dominante[data-contexte="wallet"]{
     --accent:var(--brun);--accent-sombre:var(--brun-sombre);--accent-fond:var(--carte-chaud);
     --accent-bord:var(--brun-clair);--accent-encre:var(--brun-sombre)}

/* ---- rythme vertical partagé : micro 4-8, petit 12, standard 16, bloc 24,
   section 32-48, grande section 64. Les jetons --e1..--e8 les portent déjà ;
   on nomme ici les trois écarts de MISE EN PAGE que les pages se partagent. */
:root{--rythme-bloc:var(--e5);--rythme-section:var(--e7);--rythme-grand:var(--e8)}

/* ---- PageHeader / SectionHeader ------------------------------------------
   Eyebrow, titre, introduction — et, pour une section, une action à droite. */
.tete-section{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e4);
              margin:0 0 var(--e4)}
.tete-section__titre{font-size:var(--t8);font-weight:700;margin:0;line-height:1.2}
.tete-section__texte{font-size:var(--t4);color:var(--gris-texte);margin:var(--e1) 0 0;line-height:1.5}
.tete-section__action{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:var(--tactile);
                      font-size:var(--t3);font-weight:600;color:var(--accent)}
.tete-section__action .ic{width:14px;height:14px}
.tete-section__action:hover{text-decoration:underline}

/* ---- FAB : la bulle flottante d'une action toujours disponible --------------
   « Partager » sur Moments, « Publier une offre » sur Mes offres. Cachee au
   repos, montree par le script (.is-on) quand le bouton de tete sort de
   l'ecran ; en bas a droite, hors de la barre basse des espaces. */
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;
  display:inline-flex;align-items:center;gap:8px;min-height:var(--tactile);padding:0 18px 0 14px;border:0;
  border-radius:var(--r-pilule);background:var(--accent);color:var(--texte-inverse);
  font:inherit;font-size:var(--t3);font-weight:600;box-shadow:var(--ombre-2);
  cursor:pointer;opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity 180ms ease,transform 180ms ease}
.fab:hover{background:var(--accent-sombre);color:var(--texte-inverse)}
.fab.is-on{opacity:1;transform:none;pointer-events:auto}
.fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fab .ic{width:18px;height:18px}

/* ---- StatCard --------------------------------------------------------------
   Libellé, valeur, variation éventuelle, information contextuelle. Une
   variante dominante (fond accent) pour LE chiffre qui compte (solde). */
.stats-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--e4)}
.stat{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:6px;padding:var(--e4) var(--e5);min-height:104px;
      background:var(--surface);position:relative}
.stat__lib{font-size:var(--t2);font-weight:500;color:var(--gris-texte);margin:0;line-height:1.3}
.stat__val{font-size:var(--t10);font-weight:700;margin:0;line-height:1.1;letter-spacing:-.01em;
           font-variant-numeric:tabular-nums}
.stat__val small{font-size:var(--t3);font-weight:600;margin-left:4px;color:var(--gris-texte)}
.stat__delta{display:inline-flex;align-items:center;gap:4px;font-size:var(--t2);font-weight:600;margin:0}
.stat__delta[data-sens="haut"]{color:var(--succes)}
.stat__delta[data-sens="bas"]{color:var(--erreur)}
.stat__ctx{font-size:var(--t2);color:var(--gris-texte);margin:0}
.stat__ic{position:absolute;top:var(--e4);right:var(--e4);width:34px;height:34px;border-radius:50%;
          background:var(--accent-fond);color:var(--accent);display:grid;place-items:center}
.stat__ic .ic,.stat__ic img{width:17px;height:17px}
.stat--dominante{background:var(--accent);color:var(--texte-inverse);border-color:var(--accent)}
.stat--dominante .stat__lib,.stat--dominante .stat__ctx,.stat--dominante .stat__val small{color:var(--texte-inverse);opacity:.85}
.stat--dominante .stat__ic{background:var(--voile-blanc);color:var(--accent)}
.stat--dominante .stat__action{margin-top:auto;align-self:flex-start;background:var(--surface);color:var(--accent)}
.stat--dominante .stat__action:hover{background:var(--accent-fond)}

/* ---- Table partagée ----------------------------------------------------------
   En-tête en capitales espacées, lignes de 56 px minimum, 1 ou 2 actions
   visibles + « ⋯ », montants en chiffres tabulaires. Sous 900 px la table
   devient des lignes-cartes : chaque cellule affiche son en-tête (data-col). */
/* html.py enveloppe tout <table> dans .boite-tab : c'est LA boite de la
   Table partagee (filet et rayon du format carte), `.table-boite` en est le
   synonyme pour une boite posee a la main. */
.table-boite,.boite-tab:has(> .table){max-width:100%;overflow-x:auto;background:var(--surface)}
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:var(--t1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
          color:var(--gris-texte);padding:var(--e3) var(--e4);border-bottom:1px solid var(--bord);
          white-space:nowrap;background:var(--fond)}
.table td{padding:var(--e3) var(--e4);border-bottom:1px solid var(--bord);vertical-align:middle;
          font-size:var(--t3);min-height:56px}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--fond)}
.table__principal{font-weight:600;color:var(--encre);margin:0;font-size:var(--t4)}
.table__second{font-size:var(--t2);color:var(--gris-texte);margin:2px 0 0}
.table__montant{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.table__montant[data-sens="entree"]{color:var(--succes)}
.table__montant[data-sens="sortie"]{color:var(--erreur)}
.table__identite{display:flex;align-items:center;gap:var(--e3)}
.table__identite img,.table__initiales{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 36px}
.table__initiales{display:grid;place-items:center;background:var(--accent-fond);color:var(--accent);
                  font-size:var(--t2);font-weight:700}
.table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--e1)}
.table--cartes .table__actions{justify-content:flex-start}
@media (max-width:900px){
  .table--cartes thead{display:none}
  .table--cartes,.table--cartes tbody,.table--cartes tr,.table--cartes td{display:block;width:100%}
  .table--cartes tr{padding:var(--e3) var(--e4);border-bottom:1px solid var(--bord)}
  .table--cartes tr:last-child{border-bottom:0}
  .table--cartes td{display:flex;justify-content:space-between;align-items:center;gap:var(--e3);
                    padding:6px 0;border:0;min-height:0}
  .table--cartes td[data-col]::before{content:attr(data-col);font-size:var(--t1);font-weight:600;
                    letter-spacing:.06em;text-transform:uppercase;color:var(--gris-texte);flex:0 0 auto}
  /* Une pilule longue (« En attente de paiement ») passe a la ligne dans une
     ligne-carte de 290 px plutot que de deborder de la boite. */
  .table--cartes .pilule-etat{white-space:normal;text-align:center;line-height:1.2}
  .table--cartes td:first-child{padding-bottom:var(--e2)}
  .table--cartes td:first-child::before{display:none}
}

/* ---- IconButton : icône fine, cible de 44 px, info-bulle par data-info ----
   LA primitive des petits boutons iconiques : favori, partage, fermeture,
   « ⋯ », notifications, fleches, suppression. Un seul jeu de jetons
   (`--ic-haut`, `--ic-rayon`, `--ic-icone`) porte la cible, le rayon et la
   taille du pictogramme ; hover et focus sont les memes partout. La forme
   VISIBLE peut etre plus petite que la cible (`--ic-rond` la rend ronde) :
   c'est une variante fonctionnelle, pas une geometrie de plus. */
.bouton-ic{position:relative;width:var(--ic-haut);height:var(--ic-haut);flex:0 0 var(--ic-haut);
           display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ic-rayon);
           color:var(--gris-texte);transition:background var(--mvt),color var(--mvt)}
.bouton-ic .ic,.bouton-ic img{width:var(--ic-icone);height:var(--ic-icone)}
.bouton-ic:hover,.bouton-ic:focus-visible{background:var(--accent-fond);color:var(--accent)}
.bouton-ic--rond{border-radius:50%}
/* DESTRUCTIVE en version iconique : le rouge des jetons --danger-*, au repos
   comme au survol, pour que « supprimer » se reconnaisse avant le survol. */
.bouton-ic[data-ton="danger"]{color:var(--danger)}
.bouton-ic[data-ton="danger"]:hover,.bouton-ic[data-ton="danger"]:focus-visible{
  background:var(--danger-fond);color:var(--danger)}
.bouton-ic:disabled{opacity:.45;cursor:not-allowed}
/* Les autres boutons iconiques du site partagent la meme CIBLE et le meme
   rayon : ils divergeaient a 8 px, 38 px et 40 px pour le meme geste. Ceux
   qui portent un disque visible (coeur, loupe, compteur, croix, fleche de
   rangee) gardent leur cercle, declare a cote de leur composant. */
.pages a,.pages button,.esp__rond,.pro__outil,.esp-tab__acte{
  border-radius:var(--ic-rayon)}
[data-info]{position:relative}
[data-info]::after{content:attr(data-info);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);
  background:var(--encre);color:var(--texte-inverse);font-size:var(--t1);font-weight:500;line-height:1.3;
  padding:6px 10px;border-radius:var(--r2);white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity var(--mvt);z-index:30}
[data-info]:hover::after,[data-info]:focus-visible::after{opacity:1}
/* Hors survol / focus, l'info-bulle n'existe pas : un pseudo-element en
   `nowrap` elargissait la boite de defilement de 6 a 16 px sur mobile. */
[data-info]:not(:hover):not(:focus-visible)::after{display:none}

/* ---- Titrage (refonte du 17/09) ---------------------------------------------
   Un seul caractere de titrage, pose par UNE regle : les H1 de page, les H2
   editoriaux (sections de l'accueil, blocs de la fiche, appels) et les prix
   signature (carte, encadre). Meme famille que le texte, plus grasse. Les
   chiffres sont tabulaires, l'interlettrage legerement resserre : le titre a
   du caractere, il ne fait pas de bruit. */
.entree__titre,.section__titre,.marche__titre,.fiche__titre,.bloc__titre,.cnt__h1,
.auth__titre,.parcours__titre,.confirme__titre,.esp__h1,.appel-edito__titre,
.encadre__prix,.tete-section__titre,.edito__grand h2{
  font-family:var(--police-titre);font-weight:700;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums}
.encadre__prix{font-weight:800}
.encadre__prix span{font-family:var(--police)}

/* ---- Cartes Leaflet : tuiles sobres ------------------------------------------
   Les tuiles OpenStreetMap par defaut crient (jaunes, roses) au milieu de
   l'ivoire ; on les desature un peu sans les rendre grises : les noms de
   rue restent lisibles, la carte ne domine plus la page (audit I, E.13). */
.leaflet-container .leaflet-tile-pane{filter:saturate(.62) contrast(.96)}
.leaflet-container{font-family:var(--police);background:var(--fond-creux)}
.leaflet-container .leaflet-control-attribution{font-size:var(--t1);background:var(--voile-blanc);color:var(--gris-texte);padding:2px 6px}
.leaflet-container .leaflet-control-attribution a{color:var(--gris-texte)}

/* ---- Popover : le panneau contextuel partage (corrections du 16/09) --------
   Boite blanche, filet leger, coins arrondis par le jeton, ombre douce ; le
   contenu est coupe aux angles (le panneau seul, jamais la page). shell.js le
   pose en `position:fixed` sous son declencheur, dans les limites de la fenetre
   (`--popover-x/-y/-l`), pour sortir du pli de la coque qui coupe ce qui
   deborde. Sous 640 px il devient une feuille basse, comme le tiroir des
   filtres. Les listes et compteurs qu'il porte sont dans recherche.css. */
/* 20/09 : le PANNEAU prend le grand rayon de la recherche (24 px) pour que
   ce qui s'ouvre sous une barre en capsule ne soit pas le seul element a
   angles serres. Les OPTIONS qu'il porte gardent leur petit rayon : une
   capsule par ligne de liste serait illisible (voir recherche.css). */
.popover{position:fixed;left:var(--popover-x,0);top:var(--popover-y,0);width:var(--popover-l,auto);
  z-index:60;box-sizing:border-box;max-width:calc(100vw - 32px);max-height:var(--popover-h,60vh);
  overflow:auto;padding:var(--e2);background:var(--surface);border:var(--bord-popover);
  border-radius:var(--search-panneau-rayon);box-shadow:var(--ombre-popover);
  animation:popover-ouvrir var(--mvt-d) ease}
@keyframes popover-ouvrir{from{opacity:0;transform:translateY(-4px)}}
.popover__tete{display:none}
@media (max-width:640px){
  .popover{left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;max-height:75dvh;
    border-radius:var(--r-hero) var(--r-hero) 0 0;
    padding:var(--e3) var(--e4) calc(var(--e4) + env(safe-area-inset-bottom));
    box-shadow:var(--ombre-3);animation-name:popover-monter}
  @keyframes popover-monter{from{opacity:0;transform:translateY(12px)}}
  .popover__tete{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
    margin:0 0 var(--e2);font-size:var(--t5);font-weight:600}
  .popover__fermer{display:inline-flex;align-items:center;min-height:var(--tactile);padding:0 var(--e3);
    border-radius:var(--r-pilule);color:var(--vert);font-weight:600;font-size:var(--t3)}
  /* Le voile sous la feuille : un appui a cote referme (shell.js). */
  .popover-voile{position:fixed;inset:0;z-index:59;background:var(--voile-page)}
}
.popover-voile{display:none}
@media (max-width:640px){.popover-voile{display:block}}

/* ---- Apercu rapide du header : Messages / Envies --------------------------
   Meme famille que les autres panneaux (.popover) : surface blanche, filet
   leger, ombre --ombre-popover, rayon --r-popover. Un seul dessin, deux
   contenus. Bureau : ancre sous l'icone. Sous 1024 px : feuille basse. */
button.entete__raccourci{padding:0}
button.entete__raccourci.entete__raccourci--actif{padding:0 8px}
button.mobnav__action{width:100%;text-align:left}
.rapide-voile{position:fixed;inset:0;z-index:59;background:var(--voile-page)}
.rapide-voile[hidden]{display:none}
.rapide{position:fixed;z-index:60;display:flex;flex-direction:column;
  width:min(400px,calc(100vw - 32px));max-height:min(70vh,calc(100dvh - 96px));
  box-sizing:border-box;overflow:hidden;background:var(--surface);border:var(--bord-popover);
  border-radius:var(--r-popover);box-shadow:var(--ombre-popover);
  animation:rapide-ouvrir .18s ease}
.rapide[hidden]{display:none}
@keyframes rapide-ouvrir{from{opacity:0;transform:translateY(6px)}}
.rapide__poignee{display:none;width:36px;height:4px;margin:8px auto 0;border-radius:var(--r-pilule);
  background:var(--bord)}
.rapide__tete{display:flex;align-items:center;gap:var(--e3);
  padding:var(--e3) var(--e4);border-bottom:1px solid var(--bord);flex:0 0 auto}
.rapide__titre{margin:0;margin-right:auto;font-size:var(--t5);font-weight:700;line-height:1.2;
  display:flex;align-items:center;gap:var(--e2);min-width:0}
.rapide__compte{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pilule);
  background:var(--vert);color:var(--texte-inverse);font-size:var(--t1);font-weight:700;
  line-height:18px;text-align:center}
.rapide__tout,.rapide__fermer,.rapide__suite,.rapide__cta,.rapide__toast button{
  color:var(--vert);font-size:var(--t3);font-weight:600;
  min-height:var(--tactile);display:inline-flex;align-items:center}
.rapide__fermer{display:none}
.rapide__corps{overflow:auto;flex:1 1 auto;min-height:0;-webkit-overflow-scrolling:touch}
.rapide__pied{margin:0;padding:var(--e2) var(--e4);border-top:1px solid var(--bord);flex:0 0 auto}
.rapide__suite{margin-left:0}
.rapide__fil,.rapide__envie{display:grid;grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;gap:var(--e3);padding:var(--e3) var(--e4);color:inherit;
  border-bottom:1px solid var(--bord);width:100%;background:transparent;border-left:0;
  border-right:0;border-top:0;text-align:left;cursor:pointer;font:inherit}
.rapide__envie{grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
.rapide__fil:last-child,.rapide__envie:last-child{border-bottom:0}
.rapide__fil:hover,.rapide__envie-lien:hover{background:var(--fond)}
.rapide__fil--nl .rapide__nom{font-weight:700}
.rapide__av,.rapide__in,.rapide__min{width:40px;height:40px;border-radius:var(--r2);
  object-fit:cover;flex:0 0 auto}
.rapide__min{width:56px;height:56px}
.rapide__in{display:grid;place-items:center;background:var(--menthe);color:var(--vert);
  font-size:var(--t1);font-weight:700}
.rapide__txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.rapide__nom{font-size:var(--t3);font-weight:600;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rapide__ex{font-size:var(--t2);color:var(--gris-texte);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rapide__prix{font-size:var(--t2);font-weight:600;color:var(--vert);margin-top:2px}
.rapide__meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}
.rapide__quand{font-size:var(--t1);color:var(--gris-texte);white-space:nowrap}
.rapide__nl{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pilule);
  background:var(--vert);color:var(--texte-inverse);font-size:var(--t1);font-weight:700;
  line-height:18px;text-align:center}
.rapide__envie-lien{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--e3);
  align-items:center;min-width:0;color:inherit;padding:0}
.rapide__coeur{width:40px;height:40px;min-height:0;display:grid;place-items:center;
  color:var(--erreur);border-radius:50%}
.rapide__coeur .ic{width:18px;height:18px;fill:none}
.rapide__coeur[aria-pressed="true"] .ic{fill:currentColor}
.rapide__vide{display:flex;flex-direction:column;align-items:center;gap:var(--e2);
  padding:var(--e5) var(--e4);text-align:center}
.rapide__vide-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--menthe);color:var(--vert)}
.rapide__vide-t{margin:0;font-size:var(--t4);font-weight:600}
.rapide__vide-x{margin:0;font-size:var(--t2);color:var(--gris-texte);max-width:36ch;line-height:1.45}
.rapide__cta{margin:var(--e2) 0 0}
.rapide__os{display:grid}
.rapide__o{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--e3);
  align-items:center;padding:var(--e3) var(--e4)}
.rapide__o-av{width:40px;height:40px;border-radius:var(--r2);background:var(--gris-champ)}
.rapide__o-txt{height:12px;border-radius:var(--r1);background:var(--gris-champ);
  animation:rapide-os 1.1s ease-in-out infinite}
@keyframes rapide-os{50%{opacity:.45}}
.rapide__toast{display:flex;align-items:center;gap:var(--e3);
  margin:0;padding:var(--e2) var(--e4);font-size:var(--t2);color:var(--gris-texte);
  border-top:1px solid var(--bord)}
.rapide__toast[hidden]{display:none}
.rapide--panel{width:min(920px,calc(100vw - 32px));max-height:min(88vh,760px);
  box-shadow:0 24px 80px rgba(0,0,0,.18);display:flex;flex-direction:column;overflow:hidden}
.rapide--panel .rapide__fermer{display:inline-flex}
.rapide--panel .rapide__corps{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.rapide--panel .rapide__pied{display:none}
.rapide__fil--actif{background:var(--menthe)}
.alt-offres{display:grid;gap:var(--e3)}
.alt-offre{display:grid;grid-template-columns:auto 1fr;gap:var(--e3);align-items:center;
  padding:var(--e3);border:1px solid var(--bord);border-radius:var(--r2);cursor:pointer}
.alt-offre:has(:checked){border-color:var(--vert);background:var(--menthe)}
.alt-offre__txt{display:flex;flex-direction:column;gap:2px}
.alt-offre__txt span{font-size:var(--t2);color:var(--gris-texte)}
.rapide__msg{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);min-height:min(56vh,520px);height:100%;flex:1 1 auto}
.rapide__fils{border-right:1px solid var(--bord);overflow:auto;min-height:0}
.rapide__conv{display:flex;flex-direction:column;min-width:0;min-height:0}
.rapide__conv-tete{display:flex;align-items:center;gap:var(--e2);
  padding:var(--e2) var(--e4);border-bottom:1px solid var(--bord);flex:0 0 auto}
.rapide__conv-qui{min-width:0;flex:1 1 auto;padding:var(--e1) 0}
/* lot F : « ← Conversations » n'existe que sous 1024 px (une vue a la fois) */
.rapide__retour{display:none;align-items:center;min-height:var(--tactile);padding:0 var(--e2);
  margin-left:calc(-1 * var(--e2));border-radius:var(--r2);color:var(--vert);
  font-size:var(--t2);font-weight:600;white-space:nowrap;flex:0 0 auto}
.rapide__retour:hover{background:var(--fond)}
.rapide__conv-nom{margin:0;font-size:var(--t4);font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rapide__conv-nom:focus{outline:none}
.rapide__conv-nom:focus-visible{outline:2px solid var(--vert);outline-offset:2px;border-radius:var(--r1)}
.rapide__conv-bien{margin:2px 0 0;font-size:var(--t2);color:var(--gris-texte)}
.rapide__flux{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--e4);display:flex;flex-direction:column;gap:6px}
.rapide-bulle{margin:0;max-width:36ch;padding:8px 12px;border-radius:var(--r2);
  background:var(--fond);font-size:var(--t3);line-height:1.4;
  white-space:pre-line;overflow-wrap:anywhere} /* Maj+Entree : le retour a la ligne se voit */
.rapide-bulle--sortant{align-self:flex-end;background:var(--menthe)}
.rapide-bulle--entrant{align-self:flex-start}
.rapide-bulle__h{font-size:var(--t1);color:var(--gris-texte)}
.rapide-bulle__h--d{align-self:flex-end}
.rapide__composer{display:flex;flex-direction:column;gap:var(--e2);padding:var(--e3) var(--e4);
  border-top:1px solid var(--bord);flex:0 0 auto}
.rapide__saisie{display:flex;gap:var(--e2);align-items:flex-end}
.rapide__saisie .bouton{--b-haut:var(--tactile)}
.rapide__saisie textarea{flex:1 1 auto;min-height:44px;resize:none;border:1px solid var(--bord);
  border-radius:var(--r2);padding:10px 12px;font:inherit}
.rapide__saisie textarea:disabled{background:var(--fond);color:var(--gris-texte);cursor:not-allowed}
.rapide__ferme{margin:0;font-size:var(--t2);color:var(--gris-texte);line-height:1.4}
.rapide--notifs{width:min(420px,calc(100vw - 32px));
  max-height:min(70vh,calc(100dvh - 96px))}
.rapide--notifs .rapide__tete{flex:0 0 auto;position:sticky;top:0;z-index:1;
  background:var(--surface)}
.rapide--notifs .rapide__corps{overflow-y:auto;flex:1 1 auto;min-height:0}
.rapide--notifs .rapide__fermer,.rapide--notifs .rapide__tout,
.rapide--notifs .rapide__pied,.rapide--notifs .rapide__suite{display:none}
.rapide__lu{color:var(--vert);font-size:var(--t2);font-weight:600;min-height:var(--tactile);
  white-space:nowrap;flex:0 0 auto}
.rapide-n{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:var(--e3);
  align-items:start;padding:10px var(--e4);position:relative;background:var(--surface);
  width:100%;border:0;text-align:left;color:inherit;cursor:pointer;font:inherit}
.rapide-n--nl{background:var(--menthe-fond, var(--accent-fond))}
.rapide-n__rond{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--fond)}
.rapide-n__txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.rapide-n__t{font-size:var(--t3);font-weight:600;line-height:1.25}
.rapide-n__x{font-size:var(--t2);color:var(--gris-texte);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rapide-n__q{font-size:var(--t1);color:var(--gris-texte);white-space:nowrap}
.rapide-n__point{position:absolute;left:10px;top:18px;width:7px;height:7px;border-radius:50%;
  background:var(--vert)}
@media (max-width:1023px){
  /* lot F : une seule vue a la fois, la liste puis le fil (data-rapide-vue) ;
     le fil prend la hauteur restante, le composer reste colle en bas */
  .rapide--panel .rapide__msg{grid-template-columns:1fr;min-height:min(60dvh,520px)}
  .rapide--panel .rapide__fils{border-right:0}
  .rapide__msg[data-rapide-vue="liste"] .rapide__conv{display:none}
  .rapide__msg[data-rapide-vue="fil"] .rapide__fils{display:none}
  .rapide__retour{display:inline-flex}
}
@media (max-width:1023px){
  .rapide{left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;
    max-height:min(78dvh,calc(100dvh - env(safe-area-inset-bottom)));
    border-radius:var(--r-hero) var(--r-hero) 0 0;
    padding-bottom:env(safe-area-inset-bottom);
    animation-name:rapide-monter}
  @keyframes rapide-monter{from{opacity:0;transform:translateY(12px)}}
  .rapide__poignee{display:block}
  .rapide__fermer{display:inline-flex}
  .rapide--notifs .rapide__fermer{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rapide,.rapide__o-txt{animation:none}
}

/* ---- Menu « ⋯ » d'une ligne : <details> natif, liste flottante ------------- */
.menu-plus{position:relative}
.menu-plus summary{list-style:none}
.menu-plus summary::-webkit-details-marker{display:none}
.menu-plus__liste{position:absolute;right:0;top:calc(100% + 4px);z-index:25;min-width:200px;
  background:var(--surface);border:var(--bord-popover);border-radius:var(--r-popover);box-shadow:var(--ombre-popover);
  padding:6px;display:grid;gap:2px}
.menu-plus__liste a,.menu-plus__liste button{display:flex;align-items:center;gap:var(--e2);width:100%;
  min-height:var(--tactile);padding:0 var(--e3);border-radius:var(--r2);font-size:var(--t3);text-align:left;color:var(--encre)}
.menu-plus__liste a:hover,.menu-plus__liste button:hover{background:var(--fond)}
.menu-plus__liste [data-ton="danger"]{color:var(--erreur)}

/* ---- SecondaryNav : la navigation des réglages (Profil Client et Pro) -------
   Compacte, légère : titres de groupe en capitales de 11 px, entrées de
   40 px, état courant sur fond accent clair. Sous 900 px elle devient une
   rangée de puces défilante ; le <select> qui la double reste pour le
   clavier et les lecteurs d'écran. */
.nav-sec{display:flex;flex-direction:column;gap:var(--e1);align-self:start;
         position:sticky;top:calc(var(--e8) + var(--e4))}
.nav-sec__groupe{font-size:var(--t1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
                 color:var(--gris-texte);margin:var(--e4) 0 6px;padding:0 var(--e3)}
.nav-sec__groupe:first-child{margin-top:0}
.nav-sec__lien{display:flex;align-items:center;gap:var(--e3);min-height:40px;padding:0 var(--e3);
               border-radius:var(--r2);font-size:var(--t3);font-weight:500;color:var(--gris-fort);
               transition:background var(--mvt),color var(--mvt)}
.nav-sec__lien .ic,.nav-sec__lien img{width:16px;height:16px;flex:0 0 16px;color:var(--gris-texte)}
.nav-sec__lien:hover{background:var(--fond)}
.nav-sec__lien[aria-current="page"]{background:var(--accent-fond);color:var(--accent-encre);font-weight:600}
.nav-sec__lien[aria-current="page"] .ic{color:var(--accent)}
.nav-sec__select{display:none}
.nav-sec__select-wrap{display:none}
.reglages{display:grid;grid-template-columns:232px minmax(0,1fr);gap:var(--e7);align-items:start;margin-top:var(--e4)}
.reglages--seul{display:block;max-width:760px;margin-top:var(--e4)}
.esp__barre--reglages .nav-sec--barre{width:100%;background:transparent;position:static}
.esp__barre--reglages .nav-sec__groupe{color:inherit;opacity:.72;margin:var(--e4) 0 var(--e2)}
.esp__barre--reglages .nav-sec__lien{color:inherit;border-radius:var(--r2)}
.esp__barre--reglages .nav-sec__lien:hover{background:rgba(255,255,255,.08)}
.esp__barre--reglages .nav-sec__lien[aria-current="page"]{
  background:rgba(255,255,255,.16);color:inherit;font-weight:600}
.esp__barre--reglages .nav-sec__lien .ic{color:inherit;opacity:.85}
.esp__barre--reglages .nav-sec__lien[aria-current="page"] .ic{color:inherit;opacity:1}
.esp__barre--reglages .esp__second{color:inherit}
.esp__barre--reglages .esp__second .ic{color:inherit;opacity:.85}
.esp__barre--reglages .esp-solde__v{opacity:.75;font-weight:400}
@media (max-width:900px){
  .reglages{grid-template-columns:minmax(0,1fr);gap:var(--e4)}
  .nav-sec:not(.nav-sec--barre){position:static;flex-direction:row;overflow-x:auto;gap:var(--e2);padding-bottom:var(--e1);
           scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav-sec:not(.nav-sec--barre)::-webkit-scrollbar{display:none}
  .nav-sec:not(.nav-sec--barre) .nav-sec__groupe{display:none}
  .nav-sec:not(.nav-sec--barre) .nav-sec__lien{flex:0 0 auto;white-space:nowrap;border:1px solid var(--bord);border-radius:var(--r-pilule);
                 padding:0 var(--e4);background:var(--surface)}
  .espace--reglages .nav-sec--barre{display:none}
  .espace--reglages .nav-sec__select-wrap{display:block;margin:0 0 var(--e4)}
  .espace--reglages .nav-sec__select{display:block;width:100%;min-height:var(--tactile);
    padding:0 var(--e4);border:1px solid var(--bord);border-radius:var(--r2);
    background:var(--surface);font:inherit}
}

/* ---- SettingsSection : une carte légère par sujet ---------------------------
   Titre, description, contenu, pied d'actions. Utilisée par les profils
   Client et Pro, la sécurité, les paiements, le KYC. */
.reglage{background:var(--surface);padding:var(--e5);margin:0 0 var(--e4)}
.reglage__tete{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e4);margin:0 0 var(--e4)}
.reglage__titre{font-size:var(--t6);font-weight:700;margin:0;line-height:1.25}
.reglage__texte{font-size:var(--t3);color:var(--gris-texte);margin:var(--e1) 0 0;line-height:1.5;max-width:64ch}
.reglage__corps{display:grid;gap:var(--e4)}
.reglage__corps > *{min-width:0}
.reglage__corps--deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.reglage__pied{display:flex;justify-content:flex-end;gap:var(--e2);margin-top:var(--e4);
               padding-top:var(--e4);border-top:1px solid var(--bord)}
.reglage--danger{border-color:var(--erreur-bord)}
.reglage--danger .reglage__titre{color:var(--erreur)}
@media (max-width:640px){.reglage{padding:var(--e4)}.reglage__corps--deux{grid-template-columns:minmax(0,1fr)}}

/* ---- ActionBar : les actions d'un écran, alignées à droite -------------------- */
.barre-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--e2);
               margin-top:var(--e5)}
.barre-actions__etat{margin-right:auto;font-size:var(--t2);color:var(--gris-texte)}

/* ---- Switch : un seul interrupteur ---------------------------------------------- */
.interrupteur{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);
              min-height:var(--tactile);cursor:pointer}
.interrupteur__texte{font-size:var(--t4);color:var(--encre)}
.interrupteur__aide{display:block;font-size:var(--t2);color:var(--gris-texte);margin-top:2px}
.interrupteur input{position:absolute;width:1px;height:1px;opacity:0}
.interrupteur__piste{flex:0 0 44px;width:44px;height:24px;border-radius:var(--r-pilule);background:var(--gris-pilule);
                     position:relative;transition:background var(--mvt)}
.interrupteur__piste::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
                            background:var(--surface);box-shadow:var(--ombre-1);transition:transform var(--mvt-lent)}
.interrupteur input:checked + .interrupteur__piste{background:var(--accent)}
.interrupteur input:checked + .interrupteur__piste::after{transform:translateX(20px)}
.interrupteur input:focus-visible + .interrupteur__piste{outline:3px solid var(--accent);outline-offset:2px}
.interrupteur input:disabled + .interrupteur__piste{opacity:.5}

/* ---- DeviceRow : un appareil connecté ---------------------------------------------- */
.appareil{display:flex;align-items:center;gap:var(--e3);padding:var(--e3) 0;border-bottom:1px solid var(--bord)}
.appareil:last-of-type{border-bottom:0}
.appareil__ic{width:40px;height:40px;border-radius:var(--r3);background:var(--fond);color:var(--gris-texte);
              display:grid;place-items:center;flex:0 0 40px}
.appareil__ic .ic{width:18px;height:18px}
.appareil__nom{font-size:var(--t4);font-weight:600;margin:0}
.appareil__meta{font-size:var(--t2);color:var(--gris-texte);margin:2px 0 0}
.appareil__fin{margin-left:auto;display:flex;align-items:center;gap:var(--e2)}

/* ---- PaymentMethodCard / PayoutMethodCard ------------------------------------------- */
.moyens{display:grid;gap:var(--e3)}
.moyen{display:flex;align-items:center;gap:var(--e3);padding:var(--e3) var(--e4);background:var(--surface)}
.moyen__ic{width:44px;height:44px;border-radius:var(--r3);background:var(--fond);display:grid;place-items:center;flex:0 0 44px;
           color:var(--gris-fort);font-size:var(--t2);font-weight:700}
.moyen__ic img{width:28px;height:28px;object-fit:contain}
.moyen__ic .ic{width:20px;height:20px}
.moyen__nom{font-size:var(--t4);font-weight:600;margin:0;display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap}
.moyen__detail{font-size:var(--t2);color:var(--gris-texte);margin:2px 0 0}
.moyen__fin{margin-left:auto;display:flex;align-items:center;gap:var(--e1)}
.moyen--defaut{border-color:var(--accent-bord)}
/* Une teinte par moyen : Wave, Orange Money, carte bancaire. */
.moyen__ic[data-ton="wave"]{background:var(--wave-fond);color:var(--wave)}
.moyen__ic[data-ton="orange-money"]{background:var(--orange-money-fond);color:var(--orange-money)}
.moyen__ic[data-ton="carte-bancaire"]{background:var(--menthe);color:var(--vert)}
/* Logo officiel : la marque apporte sa couleur, la pastille reste blanche et
   bordee ; MTN se lit sur son jaune. */
.moyen__ic--logo,.esp-moyen__ic--logo,.esp-mvt__ic--logo{background:var(--surface);border:1px solid var(--bord)}
.moyen__ic--logo[data-ton="mtn"],.esp-moyen__ic--logo[data-ton="mtn"],.esp-mvt__ic--logo[data-ton="mtn"]{background:var(--mtn-fond);border-color:var(--mtn-fond)}
.moyen__ic--logo img{width:28px;height:28px;object-fit:contain;border-radius:6px}
.esp-moyen__ic--logo img{width:22px;height:22px;object-fit:contain;border-radius:4px}
.esp-mvt__ic--logo img{width:28px;height:28px;object-fit:contain;border-radius:6px}

/* ---- UploadField : dépôt avec aperçu, statut, remplacement ------------------------ */
.depot{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--e4);align-items:center;
       padding:var(--e3);border:1px dashed var(--bord-fort);border-radius:var(--r-champ);background:var(--surface)}
.depot--rempli{border-style:solid;border-color:var(--bord)}
/* survol pendant un glisser-deposer de fichiers (publication, photos) */
.depot--survol{border-color:var(--accent);background:var(--accent-fond)}
.depot__apercu{width:96px;height:72px;border-radius:var(--r2);background:var(--fond);display:grid;place-items:center;
               color:var(--gris-texte);overflow:hidden}
.depot__apercu img{width:100%;height:100%;object-fit:cover}
.depot__apercu .ic{width:24px;height:24px}
.depot__nom{font-size:var(--t4);font-weight:600;margin:0}
.depot__meta{font-size:var(--t2);color:var(--gris-texte);margin:2px 0 0}
.depot__actions{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e2)}
@media (max-width:480px){.depot{grid-template-columns:minmax(0,1fr)}.depot__apercu{width:100%;height:120px}}

/* ---- Alert : un état, une couleur, un texte ----------------------------------------- */
.alerte{display:flex;align-items:flex-start;gap:var(--e3);padding:var(--e3) var(--e4);border-radius:var(--r3);
        font-size:var(--t3);line-height:1.5;background:var(--fond-creux);color:var(--gris-fort)}
.alerte .ic{width:18px;height:18px;flex:0 0 18px;margin-top:2px}
.alerte[data-ton="info"]{background:var(--lagune-fond);color:var(--lagune)}
.alerte[data-ton="succes"]{background:var(--succes-fond);color:var(--succes)}
.alerte[data-ton="attente"]{background:var(--or-fond);color:var(--or-texte)}
.alerte[data-ton="erreur"]{background:var(--erreur-fond);color:var(--erreur)}
.alerte__titre{font-weight:700;margin:0 0 2px}
.alerte p{margin:0}

/* ---- Pagination ----------------------------------------------------------------------- */
.pages{display:flex;align-items:center;justify-content:center;gap:var(--e1);margin-top:var(--e5)}
.pages a,.pages button,.pages span{min-width:var(--ic-haut);height:var(--ic-haut);display:inline-flex;
  align-items:center;justify-content:center;border-radius:var(--ic-rayon);font-size:var(--t3);font-weight:500;padding:0 var(--e2)}
.pages [aria-current="page"]{background:var(--accent);color:var(--texte-inverse);font-weight:600}
.pages a:hover,.pages button:hover{background:var(--fond)}
.pages .ic{width:16px;height:16px}

/* ---- Liste compacte : réservations / transactions récentes d'un tableau de bord ----- */
.liste-compacte{display:grid;gap:0;background:var(--surface)}
.liste-compacte__ligne{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--e3);
                       padding:var(--e3) var(--e4);border-bottom:1px solid var(--bord)}
.liste-compacte__ligne:last-child{border-bottom:0}
.liste-compacte__img{width:48px;height:48px;border-radius:var(--r2);object-fit:cover;flex:0 0 48px}
.liste-compacte__ic{width:40px;height:40px;border-radius:var(--r2);background:var(--fond);display:grid;place-items:center;
                    color:var(--gris-texte)}
.liste-compacte__ic .ic{width:18px;height:18px}
.liste-compacte__titre{display:block;font-size:var(--t4);font-weight:600;margin:0;line-height:1.25}
.liste-compacte__sous{display:block;font-size:var(--t2);color:var(--gris-texte);margin:2px 0 0}
.stat__val[data-vide="oui"]{font-size:var(--t7)}
.liste-compacte__fin{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.liste-compacte__montant{font-size:var(--t4);font-weight:700;margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- EditorialCTA : un appel premium sans être gigantesque -----------------------------
   Deux colonnes sur bureau (texte à gauche, actions à droite), hauteur au
   contenu. Variante pleine (accent) et variante claire (fond accent clair). */
.appel-edito{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--e4) var(--e6);
             padding:var(--e5) var(--e6);border-radius:var(--r-carte);background:var(--accent);color:var(--texte-inverse);
             margin-top:var(--rythme-section)}
.appel-edito--clair{background:var(--accent-fond);color:var(--encre);border:1px solid var(--accent-bord)}
.appel-edito__sur{font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px;opacity:.85}
.appel-edito__titre{font-size:var(--t9);font-weight:700;margin:0;line-height:1.2;letter-spacing:-.01em}
.appel-edito__texte{font-size:var(--t4);margin:var(--e2) 0 0;line-height:1.55;opacity:.92;max-width:52ch}
.appel-edito__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3)}
.appel-edito__b{background:var(--surface);color:var(--accent)}
.appel-edito__b:hover{background:var(--fond)}
.appel-edito--clair .appel-edito__b{background:var(--accent);color:var(--texte-inverse)}
.appel-edito--clair .appel-edito__b:hover{background:var(--accent-sombre)}
.appel-edito__l{display:inline-flex;align-items:center;min-height:var(--tactile);text-decoration:underline;
                text-underline-offset:3px;font-weight:600;font-size:var(--t4)}
.appel-edito :focus-visible{outline-color:var(--texte-inverse)}
.appel-edito--clair :focus-visible{outline-color:var(--accent)}
@media (max-width:900px){
  .appel-edito{grid-template-columns:minmax(0,1fr);padding:var(--e5)}
}

/* ---- Accordion : un seul accordéon (FAQ, aide, pied de page mobile) ---------------------- */
.accordeon{border-top:1px solid var(--bord)}
.accordeon__item{border-bottom:1px solid var(--bord)}
.accordeon__item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);
  min-height:52px;padding:var(--e3) 0;cursor:pointer;list-style:none;color:var(--encre);
  font-size:var(--t5);font-weight:600;line-height:1.35;transition:color var(--mvt)}
.accordeon__item summary::-webkit-details-marker{display:none}
.accordeon__item summary:hover{color:var(--accent)}
.accordeon__item summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r1)}
.accordeon__chevron{flex:0 0 auto;width:18px;height:18px;color:var(--gris-texte);transition:transform var(--mvt-lent)}
.accordeon__item[open] .accordeon__chevron{transform:rotate(180deg)}
.accordeon__item[open] summary{color:var(--accent)}
.accordeon__corps{font-size:var(--t4);line-height:1.65;color:var(--gris-fort);margin:0;padding:0 0 var(--e4);max-width:68ch}

/* ---- Article / Event / Episode cards : une seule famille éditoriale -------------------------
   Image 3:2, étiquette, titre, résumé, méta. « À la une » : image à gauche
   (ou au-dessus sous 900 px), texte à droite. Événement : bloc de date.
   Épisode : numéro + durée en pastille et bouton « Écouter ». */
.articles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--e5)}
.article{display:flex;flex-direction:column;gap:var(--e3);color:inherit;min-width:0}
.article__vue{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-carte);background:var(--fond-creux)}
.article__vue img{width:100%;height:100%;object-fit:cover;transition:transform var(--mvt-lent)}
a.article:hover .article__vue img{transform:scale(1.03)}
.article__eti{font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--accent);margin:0}
.article__titre{font-size:var(--t7);font-weight:700;margin:0;line-height:1.25;letter-spacing:-.01em}
a.article:hover .article__titre{color:var(--accent)}
.article__texte{font-size:var(--t4);line-height:1.55;color:var(--gris-fort);margin:0}
.article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--e3);font-size:var(--t2);color:var(--gris-texte);margin:0}
.article__meta .ic{width:14px;height:14px}
.article__corps{display:flex;flex-direction:column;gap:var(--e2)}
.article--une{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--e6);align-items:center}
.article--une .article__vue{aspect-ratio:16/10}
.article--une .article__titre{font-size:var(--t12);line-height:1.12}
.article--une .article__texte{font-size:var(--t6)}
.article__date{position:absolute;top:var(--e3);left:var(--e3);display:flex;flex-direction:column;align-items:center;
               min-width:56px;padding:6px 8px;border-radius:var(--r3);background:var(--voile-blanc);color:var(--encre)}
.article__date b{font-size:var(--t8);line-height:1;font-weight:700}
.article__date span{font-size:var(--t1);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.article__pastille{position:absolute;top:var(--e3);left:var(--e3);display:inline-flex;align-items:center;gap:6px;
                   padding:6px 12px;border-radius:var(--r-pilule);background:var(--voile-blanc);color:var(--encre);
                   font-size:var(--t1);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.article__action{align-self:flex-start;background:var(--surface);color:var(--accent);border:1.5px solid var(--accent);
                 --b-haut:var(--b-haut-petit);--b-marge:var(--b-marge-petit);
                 --b-texte:var(--b-texte-petit);margin-top:var(--e1)}
.article__action:hover{background:var(--accent-fond)}
@media (max-width:900px){
  .article--une{grid-template-columns:minmax(0,1fr);gap:var(--e4)}
  .article--une .article__titre{font-size:var(--t10)}
  .article--une .article__texte{font-size:var(--t4)}
}
@media (max-width:640px){.articles{grid-template-columns:minmax(0,1fr)}}

/* ---- Steps : une progression 1-2-3 reliée par un filet ------------------------------------- */
.etapes-trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e5);position:relative;list-style:none;margin:0;padding:0}
/* un parcours de N etapes (data-n) : cinq colonnes sur grand ecran, deux
   entre 641 et 1023 px, une colonne verticale en dessous (regle plus bas) */
.etapes-trois[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.etapes-trois[data-n="5"]{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--e4)}
.etapes-trois[data-n="6"]{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--e4)}
@media (max-width:1023px){
  .etapes-trois[data-n="4"],.etapes-trois[data-n="5"],.etapes-trois[data-n="6"]{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--e6)}
  .etapes-trois[data-n] .etape-trois:nth-child(2n)::after{display:none}
}
.etape-trois{position:relative;padding-top:var(--e2)}
.etape-trois__num{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--texte-inverse);
                  display:grid;place-items:center;font-size:var(--t5);font-weight:700;position:relative;z-index:1}
.etape-trois__num .ic{width:20px;height:20px}
.etape-trois__pas{margin:var(--e3) 0 0;font-size:var(--t1);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-texte)}
.etape-trois__pas + .etape-trois__titre{margin-top:var(--e1)}
.etape-trois__num--brun{background:var(--brun)}
.etape-trois::after{content:"";position:absolute;top:calc(var(--e2) + 20px);left:52px;right:calc(-1 * var(--e5));height:1px;
                    background:var(--bord)}
.etape-trois:last-child::after{display:none}
.etape-trois__titre{font-size:var(--t6);font-weight:700;margin:var(--e3) 0 6px}
.etape-trois__texte{font-size:var(--t4);line-height:1.55;color:var(--gris-fort);margin:0}
@media (max-width:640px){
  .etapes-trois,.etapes-trois[data-n]{grid-template-columns:minmax(0,1fr);gap:var(--e4)}
  .etape-trois{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--e1) var(--e3);padding-top:0}
  .etape-trois__num{grid-row:1 / span 3}
  .etape-trois__pas{margin:0;align-self:end}
  .etape-trois__titre{margin:var(--e2) 0 0}
  .etape-trois__pas + .etape-trois__titre{margin-top:0}
  .etape-trois::after,.etapes-trois[data-n] .etape-trois:nth-child(2n)::after{display:block;top:44px;bottom:calc(-1 * var(--e4));left:19px;right:auto;width:1px;height:auto}
  .etape-trois:last-child::after{display:none}
}

/* ---- Button : UN bouton, variantes de priorité, coloré par --accent --------
   Le format (pilule 48 px, 16 px / 600) est celui de la règle unique plus
   haut ; ici seulement la couleur. `.bouton--petit` réduit la hauteur à 40 px
   pour les actions secondaires d'une carte ou d'une ligne. */
.bouton{background:var(--accent);color:var(--texte-inverse)}
.bouton:hover{background:var(--accent-sombre)}
.bouton:active:not(:disabled){filter:brightness(.96)}
.bouton--contour{background:var(--surface);color:var(--accent);border:1.5px solid var(--accent)}
.bouton--contour:hover{background:var(--accent-fond)}
.bouton--discret{background:var(--fond-creux);color:var(--gris-fort)}
.bouton--discret:hover{background:var(--gris-pilule)}
/* FilterButton (Filter system, voir plus haut) : blanc, filet accent, aplat accent une fois ouvert */
.bouton--filtre{background:var(--surface);color:var(--accent);border:1.5px solid var(--accent)}
.bouton--filtre:hover{background:var(--accent-fond)}
.bouton--filtre .ic{color:currentColor}
.bouton--filtre[aria-expanded="true"]{background:var(--accent);color:var(--texte-inverse);border-color:var(--accent)}
.filtre__nombre{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  padding:0 6px;border-radius:var(--r-pilule);background:var(--accent);color:var(--texte-inverse);
  font-size:var(--t1);font-weight:700;line-height:1}
.bouton--filtre[aria-expanded="true"] .filtre__nombre{background:var(--surface);color:var(--accent)}
.filtre__nombre:empty,.filtre__nombre[hidden]{display:none}

.bouton--nu{background:none;color:var(--accent);border:0}
.bouton--nu:hover{background:var(--accent-fond)}
.bouton--lien{background:none;border:0;color:var(--accent);padding-inline:0}
.bouton--lien:hover{background:none;color:var(--accent-sombre);text-decoration:underline}
.bouton--large{width:100%}
/* Inverse : lisible sur fond vert / brun (carte Wallet, hero sombre).
   Primary = surface blanche + texte accent. Outline = filet clair + texte clair. */
.bouton--inverse{background:var(--surface);color:var(--accent);border:1.5px solid transparent}
.bouton--inverse:hover{background:var(--fond);color:var(--accent-sombre)}
.bouton--contour.bouton--inverse{background:transparent;color:var(--texte-inverse);
  border-color:var(--surface)}
.bouton--contour.bouton--inverse:hover{background:var(--voile-blanc);color:var(--accent)}
/* DESTRUCTIVE : une seule facon de dire « rouge » (jetons --danger-*). Toute
   action qui supprime, retire definitivement ou sort de la session la porte —
   pleine quand elle est l'action principale de l'ecran, ghost quand elle vit
   dans une liste ou un menu (.bouton--danger-nu). « Annuler », « Suspendre »
   et « Archiver » ne sont PAS destructifs : ils gardent leur variante. */
.bouton--danger{background:var(--danger-fond);color:var(--danger);border:1.5px solid var(--danger-bord)}
.bouton--danger:hover{background:var(--danger-survol)}
.bouton--danger-plein{background:var(--danger);color:var(--texte-inverse);border:1.5px solid var(--danger)}
.bouton--danger-plein:hover{background:var(--danger);filter:brightness(.92)}
.bouton--danger-nu{background:none;color:var(--danger);border:0}
.bouton--danger-nu:hover{background:var(--danger-fond);color:var(--danger)}
:is(.bouton--danger,.bouton--danger-plein,.bouton--danger-nu) :is(.ic,img){color:currentColor}
.bouton--petit{--b-haut:var(--b-haut-petit);--b-marge:var(--b-marge-petit);--b-texte:var(--b-texte-petit)}
.bouton .ic,.bouton img{width:var(--ic-icone);height:var(--ic-icone)}
/* Disabled : identifiable, encore lisible. Jamais un texte clair sur un fond
   clair (le voile blanc + texte inverse de la carte Wallet). */
.bouton:disabled,.bouton[aria-disabled="true"]{cursor:not-allowed;pointer-events:none;opacity:.8;
  filter:saturate(.8)}
.bouton--inverse:disabled,.bouton--inverse[aria-disabled="true"]{
  background:var(--surface);color:var(--accent);opacity:.85;filter:none}
.bouton--contour.bouton--inverse:disabled,.bouton--contour.bouton--inverse[aria-disabled="true"]{
  background:transparent;color:var(--texte-inverse);border-color:var(--surface);opacity:.85}
/* Chargement : l'etat est le meme pour tous les boutons du site. Le libelle
   reste lisible (on ne le remplace pas), un disque tourne devant lui et le
   bouton n'accepte plus le clic. */
:is(.bouton,.esp-btn,.pro__cta,.esp__cta,.modale__valider,.filtres__action)[data-chargement]{
  position:relative;color:transparent;pointer-events:none}
:is(.bouton,.esp-btn,.pro__cta,.esp__cta,.modale__valider,.filtres__action)[data-chargement]::after{
  content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;color:var(--texte-inverse);
  animation:bouton-tourne .7s linear infinite}
.bouton--contour[data-chargement]::after,.esp-btn--contour[data-chargement]::after{color:var(--accent)}
@keyframes bouton-tourne{to{transform:rotate(360deg)}}

/* ---- Vérification publique d'une réservation (17/09/2026) --------------------
   /verifier-reservation.html : un champ, un bouton, un résultat en carte. La
   page est publique (app.css seule) : les tons de la pilule sont posés ici. */
.verif{max-width:720px}
.verif__form{grid-template-columns:minmax(0,1fr)}
.verif__resultat{margin-top:var(--e5);padding:var(--e5);border:1px solid var(--bord);border-radius:var(--r-carte);
  background:var(--surface)}
.verif__etat{margin:0 0 var(--e4)}
.verif__statut{background:var(--gris-champ);color:var(--gris-fort)}
.verif__statut[data-ton="vert"]{background:var(--succes-fond);color:var(--succes)}
.verif__statut[data-ton="jaune"]{background:var(--or-fond);color:var(--or-texte)}
.verif__statut[data-ton="rouge"]{background:var(--erreur-fond);color:var(--erreur)}
.verif__details{margin:0;display:grid;gap:var(--e2)}
.verif__details > div{display:flex;justify-content:space-between;gap:var(--e4);padding:var(--e2) 0;
  border-top:1px solid var(--bord);font-size:var(--t4)}
.verif__details dt{color:var(--gris-texte);flex:0 0 auto}
.verif__details dd{margin:0;text-align:right;font-weight:600;color:var(--encre);min-width:0;overflow-wrap:anywhere}
.verif__note{margin:var(--e4) 0 0;font-size:var(--t2);color:var(--gris-texte);line-height:1.5}
.verif__pied{margin:var(--e5) 0 0;font-size:var(--t3)}
.verif__pro{display:inline-flex;align-items:center;gap:var(--e1);min-height:var(--tactile);font-weight:600;color:var(--vert)}
.verif__pro:hover{text-decoration:underline}

/* ======================================================================
   AlaUneCard — « À la une » (20/09/2026)
   Grande affiche : l'image occupe 100 % de la carte (16/9), le texte et le
   CTA sont posés sur un voile bas. Toutes les cartes partagent EXACTEMENT
   la même géométrie. Le texte ne décide jamais de la hauteur. Pas de badge
   « À la une », pas de « Publicité ».
   ====================================================================== */
.rangee--pub{align-items:stretch;margin-right:calc(-1 * var(--section-x));padding-right:var(--section-x);
  scroll-padding-left:2px}
.pub{--pub-l:min(82vw,420px);display:flex;flex-direction:column;
  flex:0 0 var(--pub-l);width:var(--pub-l);max-width:var(--pub-l);min-width:0;
  aspect-ratio:16/9;min-height:240px;
  scroll-snap-align:start;align-self:stretch}
@media (min-width:641px){
  /* Tablette / bureau étroit : deux affiches. flex-grow reste à 0. */
  .pub{--pub-l:max(320px, calc((100cqw - var(--carte-gap)) / 2));
    flex:0 0 var(--pub-l);width:var(--pub-l);max-width:var(--pub-l)}
}
@media (min-width:1500px){
  /* Grand bureau : trois affiches. */
  .pub{--pub-l:max(380px, calc((100cqw - 2 * var(--carte-gap)) / 3));
    flex:0 0 var(--pub-l);width:var(--pub-l);max-width:var(--pub-l)}
}
.pub__lien{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  flex:1 1 auto;height:100%;min-height:100%;overflow:hidden;isolation:isolate;
  border-radius:var(--r-hero);background:var(--fond-creux);color:var(--texte-inverse)}
.pub__lien:focus-visible{outline:3px solid var(--vert);outline-offset:3px}
.pub__lien img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--mvt-lent)}
.pub__lien:hover img{transform:scale(1.02)}
.pub__corps{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;
  gap:var(--e2);padding:var(--e5);height:100%;min-height:0;color:var(--texte-inverse)}
.pub__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e1) var(--e3);
  font-size:var(--t1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  opacity:.9;line-height:1.2}
.pub__annonceur,.pub__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub__titre{font-size:clamp(22px,2.2vw,34px);font-weight:700;line-height:1.14;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  max-width:22ch;text-wrap:balance}
.pub__accroche{font-size:var(--t3);line-height:1.45;opacity:.95;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  max-width:46ch}
.pub .edito__bouton{align-self:flex-start;margin-top:var(--e3)}
.rangee__pause [data-icone="lecture"]{display:none}
.rangee__pause[aria-pressed="true"] [data-icone="pause"]{display:none}
.rangee__pause[aria-pressed="true"] [data-icone="lecture"]{display:block}
@media (max-width:640px){
  /* L'autoplay tourne aussi au doigt : pause + flèches restent accessibles. */
  .section--pub .rangee__fleches{display:flex}
  .pub__corps{padding:var(--e4)}
}
@media (prefers-reduced-motion:reduce){
  .pub__lien img{transition:none}
  .pub__lien:hover img{transform:none}
}

/* Planche interne /boutons.html : matrice des variantes, hors graphe. */
.planche-b-page{padding:var(--e6) var(--page-gutter) var(--e8)}
.planche-b-page > h1{margin:0 0 var(--e2);font-size:var(--t11)}
.planche-b-page > p{margin:0 0 var(--e6);color:var(--gris-texte);max-width:60ch}
.planche-b{margin:0 0 var(--e6)}
.planche-b h2{font-size:var(--t6);margin:0 0 var(--e3)}
.planche-b__fond{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center;
  padding:var(--e5);background:var(--surface);border:1px solid var(--bord);
  border-radius:var(--r-carte)}
.planche-b__fond--accent{background:var(--accent);border-color:transparent}