/* ==========================================================================
   ASSIMA HOST — composants de réservation et d'administration
   Prolonge style.css : aucune couleur n'est redéfinie ici, tout vient des
   variables de la charte pour que l'application reste indiscernable du site.
   ========================================================================== */

/* ---------------------------------------------------------- formulaires */
.champ{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem}
.champ>span{font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.champ input,.champ select,.champ textarea{font:inherit;font-size:.95rem;padding:.6rem .7rem;
  border:1px solid var(--border-strong);border-radius:9px;background:var(--surface-2);color:var(--ink);width:100%}
/* Un <select> au rendu natif ignore l'interligne pour sa boîte de contenu : il
   la calcule sur les métriques de la police. Dans ce formulaire, les listes
   déroulantes faisaient donc 42,7 px quand tous les champs de saisie en
   faisaient 46,7 — quatre pixels d'écart, visibles dès qu'ils se suivent sur
   une ligne. `appearance:none` leur rend le modèle de boîte ordinaire.
   Le formulaire public le faisait déjà ; celui-ci était resté en arrière.
   La flèche est redessinée, faute de quoi la liste n'aurait plus l'air d'une
   liste. */
.champ select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A45' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;background-size:15px;padding-right:2.1rem}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--terra-400);outline-offset:1px;border-color:transparent}
/* Le client d'une estimation : son nom et « sa fiche » mènent à la fiche, où ils se modifient — ces liens se voient. */
.est-client a{color:var(--terra-700);text-decoration:underline;text-underline-offset:2px}
/* Une valeur figée — l'adresse d'un lien d'estimation — s'écrit, sans champ autour ; longue, elle passe à la ligne. */
.champ--fige b{font-size:1rem;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.champ small{color:var(--muted);font-size:.78rem;line-height:1.4}
.champ--large{grid-column:1/-1}
/* Dans une grille, un champ se resserre avec sa colonne au lieu de l'élargir : sans
   min-width:0, un champ de date imposait sa largeur propre à toute la rangée. */
.champ,.champ input,.champ select,.champ textarea{min-width:0}
/* Un champ de date, sur iPhone : le rendu natif de Safari ignorait la largeur de sa colonne —
   il débordait à droite, la date centrée. Sans lui, il se range comme les autres champs, valeur
   à gauche, et vide, garde la hauteur d'une ligne. Le calendrier d'iOS s'ouvre toujours. */
.champ input[type=date]{-webkit-appearance:none;appearance:none;display:block}
.champ input[type=date]::-webkit-date-and-time-value{text-align:left;min-height:1.7em;min-height:1lh}
.bascule{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.bascules{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;margin:1rem 0}
.ligne-champs{display:grid;grid-template-columns:1fr 2fr auto;gap:.9rem;align-items:end;margin-top:1rem}
.grille-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-bottom:1rem}
/* Champs empilés HORS grille — les grandes zones de texte de l'éditeur
   d'annonce, par exemple. Dans une grille c'est `gap` qui les sépare ; en
   dehors, le reset `*{margin:0}` les collait les uns aux autres, et l'aide
   d'un champ venait toucher le libellé du suivant. Le sélecteur vise les
   enfants DIRECTS du bloc : à l'intérieur d'une grille, la marge doublerait
   l'écart. */
.adm-bloc>.champ+.champ{margin-top:1rem}
.grille-champs--serree{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.liste-erreurs{margin:1rem 0;padding-left:1.2rem;color:var(--terra-700)}

/* ------------------------------------------------------------- alertes */
.alerte{padding:.8rem 1rem;border-radius:10px;font-size:.92rem;margin:1rem 0;border:1px solid}
.alerte--succes{background:color-mix(in srgb,var(--olive-500) 10%,transparent);border-color:var(--olive-500);color:var(--olive-700)}
.alerte--erreur{background:color-mix(in srgb,var(--terra-500) 10%,transparent);border-color:var(--terra-500);color:var(--terra-700)}

/* ------------------------------------------------------- liste annonces */
.hero--compact{padding-block:clamp(8rem,12vw,10rem) clamp(5rem,7vw,7rem);background:radial-gradient(circle at 86% 22%,#245270 0,transparent 36%),var(--navy-900)}
.hero--compact::before{content:"";position:absolute;inset:0;background:url('../img/pattern-zellige.svg') repeat;background-size:150px;opacity:.045;pointer-events:none}
.hero--compact .container{position:relative;z-index:1}
.hero--compact .eyebrow{color:var(--terra-300)}
.hero--compact h1{max-width:17ch}
.hero--compact .lead{max-width:57ch}
.filtres{position:relative;display:flex;flex-wrap:wrap;gap:1rem;align-items:end;margin:-5.5rem 0 2.3rem;padding:1.35rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.filtres .champ{flex:1;min-width:180px}
.filtres .btn{min-height:46px}
.compteur{color:var(--muted);font-size:.9rem;margin-bottom:1.1rem;font-weight:600}
.vide{color:var(--muted);padding:2rem 0}
.grille-annonces{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(1.2rem,2.5vw,2rem)}
.annonce{border-radius:var(--r-xl);overflow:hidden;background:var(--surface-2);border:1px solid var(--border);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.annonce:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.annonce__lien{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.annonce__img{aspect-ratio:4/3;overflow:hidden;background:var(--sand-300)}
.annonce__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease-out)}
.annonce:hover .annonce__img img{transform:scale(1.05)}
.annonce__corps{display:flex;flex-direction:column;flex:1;padding:1.4rem}
.annonce__lieu{font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--terra-600);margin:0 0 .5rem}
.annonce__titre{font-family:var(--font-display);font-size:1.4rem;font-weight:600;margin:0 0 .55rem;line-height:1.2}
.annonce__meta{font-size:.86rem;color:var(--muted);margin:0 0 1.1rem}
.annonce__prix{margin:auto 0 0;padding-top:1rem;border-top:1px solid var(--border);font-size:.95rem}
.annonce__prix b{font-family:var(--font-display);font-size:1.2rem;color:var(--navy-900)}
.annonce__prix span{color:var(--muted);font-size:.84rem}
.photo-absente{width:100%;height:100%;background:
  linear-gradient(135deg,var(--sand-300),var(--sand-200));display:block}

/* -------------------------------------------------------- fiche détaillée */
/* Le titre et le retour au catalogue précèdent désormais les photos. */
.fiche-intro{padding-top:clamp(7.5rem,12vw,9rem);padding-bottom:1.75rem}
.fiche-intro__retour{margin-bottom:1.6rem}
.fiche-intro__retour a{display:inline-flex;align-items:center;gap:.55rem;font-size:.86rem;font-weight:700;color:var(--navy-700)}
.fiche-intro__retour a:hover{color:var(--terra-700)}
.fiche-intro__retour .icone{width:1.15rem;height:1.15rem}
.lien-retour{display:inline-flex;align-items:center;gap:.4rem}
.lien-retour .icone,.btn .icone{width:1.1rem;height:1.1rem}
.fiche-intro .eyebrow{margin-bottom:.65rem}
.fiche-intro h1{max-width:18ch}
.fiche-intro .lead{margin-top:.8rem;max-width:65ch}
.galerie{display:grid;gap:6px;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.galerie--1{grid-template-columns:1fr}
.galerie--2,.galerie--3{grid-template-columns:repeat(2,1fr)}
.galerie--4,.galerie--5{grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,1fr)}
.galerie--4 .galerie__item:first-child,.galerie--5 .galerie__item:first-child{grid-row:span 2}
.galerie__item{margin:0;overflow:hidden;border-radius:12px;aspect-ratio:4/3;background:var(--sand-300)}
.galerie--4 .galerie__item:first-child,.galerie--5 .galerie__item:first-child{aspect-ratio:auto}
.galerie__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.galerie__item:hover img{transform:scale(1.035)}
.fiche-section{padding-top:clamp(2rem,4vw,3rem)}
.fiche{display:grid;grid-template-columns:minmax(0,1fr) 375px;gap:clamp(2rem,5vw,4rem);align-items:start}
/* Une colonne sur téléphone, et minmax(0, …) plutôt que 1fr : « 1fr » ne descend pas sous la
   largeur minimale de son contenu, et deux champs de date — plus larges encore dans Safari —
   élargissaient toute la fiche au-delà de l'écran, qui défilait alors de côté. */
@media(max-width:920px){.fiche{grid-template-columns:minmax(0,1fr)}}
.fiche__capacite{color:var(--ink-soft);font-size:.91rem;font-weight:600;margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.15rem .55rem}
.fiche__capacite span{color:var(--terra-500)}
.bloc{padding:1.8rem 0;border-top:1px solid var(--border)}
.bloc:first-of-type{border-top:0}
.equip-phares{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.6rem}
.equip-phares li::before{content:'· ';color:var(--terra-500);font-weight:700}
.equipements{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6rem}
.equip-cat__titre{font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--terra-600);margin:0 0 .5rem}
.equip-cat ul{list-style:none;padding:0;margin:0;font-size:.92rem;line-height:1.85}
.equip-note{color:var(--muted);font-size:.84rem}
.reglement{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem 1.6rem;margin:0}
.reglement div{display:flex;flex-direction:column}
.reglement dt{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.reglement dd{margin:0;font-size:.95rem}
.reglement .reglement__large{grid-column:1/-1}

/* --------------------------------------------------------- carte de résa */
.fiche__reservation{position:sticky;top:100px}
@media(max-width:920px){.fiche__reservation{position:static}}
.carte-resa{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r-xl);
  padding:clamp(1.25rem,2.5vw,1.7rem);box-shadow:var(--shadow-lg)}
.carte-resa__eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--terra-700);margin-bottom:.4rem}
.carte-resa__prix{margin:0 0 1.35rem;font-size:1.15rem}
.carte-resa__prix b{font-family:var(--font-display);font-size:1.85rem;line-height:1;color:var(--navy-900)}
.carte-resa__prix span{color:var(--muted);font-size:.86rem;font-weight:400}
.resa{display:flex;flex-direction:column;gap:1rem}
.resa .champ input,.resa .champ textarea{min-height:46px;padding:.75rem .8rem;border-radius:var(--r-sm);background:var(--sand-50)}
.resa .champ textarea{min-height:85px}
.resa__dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
/* Sur un téléphone, l'arrivée au-dessus du départ : côte à côte, un champ de date n'a plus la
   place d'afficher « jj/mm/aaaa » en entier. */
@media(max-width:440px){.resa__dates{grid-template-columns:minmax(0,1fr)}}
/* Deux ou trois colonnes selon que l'annonce accepte les enfants : le champ
   « Bébés » n'apparaît que dans ce cas, et un auto-fit évite qu'il tombe seul
   sur une ligne en occupant toute la largeur. */
.resa__voyageurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));gap:.7rem}
.resa__coord{border:0;border-top:1px solid var(--border);padding:1.25rem 0 0;margin:.3rem 0 0;display:flex;flex-direction:column;gap:.7rem}
/* Corriger le prénom et le nom d'un voyageur, sur sa fiche : replié tant qu'on n'en a pas besoin. */
.corriger-nom{margin-top:.6rem;font-size:.9rem}
.corriger-nom summary{cursor:pointer;color:var(--terra-700);font-weight:600}
.corriger-nom form{margin-top:.7rem}
/* Prénom et nom, côte à côte ; l'un sous l'autre sur un très petit écran. */
.resa__nom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
@media(max-width:359px){.resa__nom{grid-template-columns:minmax(0,1fr)}}
.resa__coord legend{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--navy-900);padding:0 .5rem 0 0;margin-bottom:.3rem}
.resa__note{font-size:.82rem;color:var(--muted);margin:0;line-height:1.5}
.resa__devis{border-top:1px solid var(--border);padding-top:.9rem;font-size:.92rem}
.resa__devis .ligne{display:flex;justify-content:space-between;padding:.22rem 0}
.resa__devis .ligne--total{border-top:1px solid var(--border);margin-top:.5rem;padding-top:.6rem;font-weight:700}
.resa__devis .ligne--remise{color:var(--olive-600)}
.resa__devis .erreur{color:var(--terra-700)}
.btn--bloc{width:100%;justify-content:center}
@media(max-width:640px){.filtres{margin-top:-4rem;padding:1rem}.filtres .champ,.filtres .btn{width:100%}.fiche-intro{padding-bottom:1.2rem}.galerie{gap:4px}.galerie--3,.galerie--4,.galerie--5{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}.galerie--3 .galerie__item:first-child,.galerie--4 .galerie__item:first-child,.galerie--5 .galerie__item:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10}.galerie__item{border-radius:8px;aspect-ratio:1/1}}

/* ------------------------------------------------------- suivi de dossier */
.etat{display:inline-block;padding:.32rem .8rem;border-radius:999px;font-size:.82rem;font-weight:700;margin:.6rem 0 1.4rem}
.etat--succes{background:color-mix(in srgb,var(--olive-500) 16%,transparent);color:var(--olive-700)}
.etat--attente{background:color-mix(in srgb,var(--terra-400) 20%,transparent);color:var(--terra-700)}
.etat--neutre{background:var(--sand-300);color:var(--ink-soft)}
.recap{display:grid;gap:.8rem;margin:1.4rem 0 2rem}
.recap div{display:grid;grid-template-columns:170px 1fr;gap:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--border)}
.recap dt{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.recap dd{margin:0}
.recap__aide{font-size:.86rem;color:var(--muted);margin-top:2rem}
@media(max-width:560px){.recap div{grid-template-columns:1fr;gap:.2rem}}

/* ======================================================== ADMINISTRATION */
body.admin{background:radial-gradient(circle at 48% -12%,#fff8ef 0,transparent 36rem),var(--sand-200)}
.adm-head{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:clamp(.8rem,1.8vw,1.6rem);
  min-height:78px;padding:.8rem clamp(1rem,3vw,2rem);background:linear-gradient(110deg,var(--navy-900),var(--navy-800));
  border-bottom:1px solid rgba(243,199,126,.22);box-shadow:0 12px 32px -24px rgba(4,18,31,.8);color:#fff;flex-wrap:wrap}
/* Le logo du site (.brand, style.css), dans sa version claire. Il pointait vers
   un symbole `mark.svg#mark` qui n'existe pas : seul le nom s'affichait. */
.adm-brand .brand__mark{width:36px;height:36px}
.adm-brand .brand__name{font-size:1.2rem}
.adm-nav{display:flex;gap:.2rem;flex:1;flex-wrap:wrap;align-items:center}
.adm-nav a{color:#D9CFC2;text-decoration:none;padding:.55rem .75rem;border-radius:999px;font-size:.86rem;font-weight:600;line-height:1.2;transition:background .2s,color .2s}
.adm-nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.adm-nav a[aria-current=page]{background:rgba(243,199,126,.18);color:var(--terra-300);box-shadow:inset 0 0 0 1px rgba(243,199,126,.22)}
.adm-user{display:flex;align-items:center;gap:.7rem;font-size:.82rem;color:#EAE1D5;white-space:nowrap}
.adm-user__identity{display:inline-flex;align-items:center;gap:.55rem;max-width:180px}
.adm-user__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-user__avatar{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--terra-500);color:#fff;font-weight:800;font-size:.8rem}
.adm-user .lien-langue{display:inline-grid;place-items:center;min-width:32px;min-height:32px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;font-weight:700}
.adm-user .lien-langue:hover{background:rgba(255,255,255,.12)}
.adm-back-site{color:#EAE1D5;text-decoration:underline;text-underline-offset:3px}
.adm-back-site:hover{color:#fff}
/* .btn--ghost est dessiné pour un fond clair : sur le bandeau bleu nuit, son
   texte tombait exactement sur la couleur du fond (#0B2A45 sur #0B2A45) et le
   bouton de déconnexion était invisible. */
.adm-user .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.adm-user .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)}
.adm-user .btn--ghost:focus-visible{outline:2px solid var(--terra-400);outline-offset:2px}
.adm-main{padding:clamp(2rem,4vw,3.2rem) clamp(1rem,3vw,2rem) 5rem}
.adm-wrap{max-width:1160px;margin:0 auto}
.adm-wrap--large{max-width:1360px}
.adm-entete{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:1.7rem}
.adm-entete--tableau{margin-bottom:2rem}
body.admin .adm-entete--tableau .h3{font-size:clamp(2rem,1.5rem + 1.5vw,2.8rem);line-height:1.1;margin-bottom:0}
.adm-kicker{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-700);margin-bottom:.55rem}
.adm-subtitle{max-width:60ch;margin-top:.6rem;color:var(--ink-soft);font-size:.94rem}
/* Le titre et ses menus se resserrent avec la page au lieu de l'élargir (min-width:0 :
   un élément d'une rangée flexible garde sinon la largeur de son plus long contenu). */
.adm-entete > *{min-width:0}
.adm-bloc{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.2rem,2vw,1.7rem);margin-bottom:1.4rem;box-shadow:var(--shadow-sm)}
/* Sur un petit téléphone, un bloc rend un peu de sa marge à ce qu'il contient. */
@media(max-width:360px){.adm-bloc{padding:1.1rem .9rem}}
.adm-bloc>h2{margin-top:0}
.adm-bloc--empty{border-style:dashed;background:color-mix(in srgb,var(--surface-2) 72%,transparent)}
.adm-bloc--empty .muted{margin-top:.5rem}
.compte-raccourcis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;margin-bottom:1.4rem}
.compte-raccourcis a{display:flex;align-items:center;gap:.7rem;min-height:68px;padding:1rem 1.15rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);box-shadow:var(--shadow-sm);font-size:.9rem;font-weight:700;color:var(--navy-900);transition:transform .25s var(--ease-out),box-shadow .25s}
.compte-raccourcis a:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.compte-raccourcis a span:first-child{color:var(--terra-600);font-family:var(--font-display);font-size:.85rem}
.compte-raccourcis a .icone{margin-left:auto;width:1.1rem;height:1.1rem;color:var(--terra-600)}
.compte-tableau .solde{border-left:4px solid var(--olive-500)}
.adm-filtres{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem}
.adm-filtres a{padding:.4rem .9rem;border-radius:999px;text-decoration:none;font-size:.88rem;
  color:var(--ink-soft);border:1px solid var(--border-strong)}
.adm-filtres a[aria-current=page]{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.5rem}
.tuile{display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;min-height:148px;padding:1.3rem 1.4rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);
  text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease-out),box-shadow .25s,border-color .25s}
.tuile:hover{transform:translateY(-3px);border-color:var(--terra-400);box-shadow:var(--shadow-md)}
.tuile .tuile__label{font-size:.82rem;font-weight:700;color:var(--ink-soft);line-height:1.35}
.tuile b{display:block;font-family:var(--font-body);font-weight:800;letter-spacing:-.05em;font-size:clamp(2.1rem,2vw,2.7rem);line-height:1;color:var(--navy-800)}
.tuile:nth-child(3){background:linear-gradient(145deg,#fff9f1,var(--surface-2));border-color:color-mix(in srgb,var(--terra-500) 24%,transparent)}
.adm-table{width:100%;border-collapse:collapse;font-size:.9rem}
.adm-table th{text-align:left;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:.5rem .6rem;border-bottom:1px solid var(--border-strong)}
.adm-table td{padding:.7rem .6rem;border-bottom:1px solid var(--border);vertical-align:top}
.adm-table code{font-size:.86rem;background:var(--sand-300);padding:.1rem .35rem;border-radius:5px}
/* La cellule d'actions reste une CELLULE. En display:flex, elle sortait du
   tableau : sa hauteur et son trait de séparation ne suivaient plus la ligne,
   et les boutons « Simuler » paraissaient décalés. Les boutons se rangent en
   ligne à l'intérieur. */
.adm-table td.actions{white-space:nowrap}
.adm-table td.actions>form{display:inline-block;margin:0}
.adm-table td.actions>*+*{margin-left:.5rem}
.alerte-cellule{color:var(--terra-600);font-weight:700}
.muted{color:var(--muted);font-size:.85rem}
.pastille{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.76rem;font-weight:700}
.pastille--succes{background:color-mix(in srgb,var(--olive-500) 18%,transparent);color:var(--olive-700)}
.pastille--attente{background:color-mix(in srgb,var(--terra-400) 22%,transparent);color:var(--terra-700)}
.pastille--erreur{background:color-mix(in srgb,var(--terra-600) 18%,transparent);color:var(--terra-700)}
.pastille--neutre{background:var(--sand-300);color:var(--ink-soft)}
.btn--sm{padding:.35rem .7rem;font-size:.82rem}
.adm-acces .adm-main{padding:0;background:var(--sand-100)}
.adm-login{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);align-items:center;gap:clamp(2rem,6vw,6rem);max-width:1220px;min-height:calc(100vh - 78px);margin-inline:auto;padding:clamp(2rem,4vw,4rem) var(--gutter)}
.adm-login__intro{display:flex;flex-direction:column;justify-content:flex-end;min-height:520px;padding:clamp(2rem,4vw,3.5rem);border-radius:var(--r-xl);color:var(--sand-100);background:linear-gradient(to top,rgba(4,18,31,.95),rgba(7,28,48,.2) 78%),url('../img/scenes/hero-alger.svg') center/cover;box-shadow:var(--shadow-lg)}
.adm-login__kicker{font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--terra-300)}
.adm-login__intro h2{max-width:16ch;margin-top:1rem;color:var(--sand-100);font-size:clamp(2rem,2.6vw,3rem)}
.adm-login__intro p{max-width:39ch;margin-top:1rem;color:var(--sand-200);font-size:.94rem;line-height:1.55}
.adm-login__location{margin-top:2.2rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.3);font-size:.77rem;font-weight:700;letter-spacing:.08em;color:var(--sand-200)}
.adm-login__carte{width:100%;max-width:470px;justify-self:center;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:clamp(1.65rem,3vw,2.6rem);box-shadow:var(--shadow-lg)}
body.admin .adm-login__carte h1.h3{font-size:clamp(1.8rem,2.5vw,2.3rem);margin-bottom:0}
.adm-login__carte form{display:flex;flex-direction:column;gap:1.05rem;margin-top:1.7rem}
.adm-login__carte .champ input{min-height:52px;padding:.8rem .9rem;border-radius:var(--r-sm);background:var(--sand-50)}
.adm-login__carte .btn--bloc{min-height:52px;margin-top:.3rem}
.adm-login__secondary{margin-top:1.25rem;text-align:center}
.adm-login__secondary a{color:var(--navy-700);text-decoration:underline;text-underline-offset:3px}
@media(max-width:830px){.adm-login{grid-template-columns:1fr;gap:1.5rem;min-height:0}.adm-login__intro{min-height:250px;padding:2rem}.adm-login__intro h2{font-size:2rem}.adm-login__location{display:none}.adm-login__carte{max-width:620px}}
@media(max-width:700px){.tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}.compte-raccourcis{grid-template-columns:1fr}.compte-raccourcis a{min-height:56px}}
@media(max-width:600px){.adm-back-site{display:none}.adm-login{gap:0;padding:0 0 2.5rem}.adm-login__intro{min-height:170px;border-radius:0 0 var(--r-lg) var(--r-lg);padding:1.5rem 1.5rem 2.4rem}.adm-login__intro h2{font-size:1.45rem;max-width:25ch}.adm-login__intro p{display:none}.adm-login__carte{position:relative;width:calc(100% - 2rem);margin-top:-1.3rem;padding:1.7rem 1.3rem}}
@media(max-width:420px){.tuiles{gap:.65rem}.tuile{min-height:135px;padding:1rem}.tuile b{font-size:2rem}}

/* éditeur d'annonce */
.editeur-sommaire{position:sticky;top:var(--compte-header-height,78px);z-index:20;display:flex;gap:.35rem;
  overflow-x:auto;white-space:nowrap;margin:0 0 1.1rem;padding:.55rem;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);scrollbar-width:thin}
.editeur-sommaire a{flex:none;padding:.45rem .7rem;border-radius:7px;color:var(--navy-800);font-size:.82rem;font-weight:700;text-decoration:none}
.editeur-sommaire a:hover,.editeur-sommaire a:focus-visible{background:var(--sand-300)}
.editeur-section,.editeur~#calendriers,.editeur~#photos{scroll-margin-top:calc(var(--compte-header-height,78px) + 70px)}
.editeur-section>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none}
.editeur-section>summary::-webkit-details-marker{display:none}
.editeur-section>summary h2{margin:0;font-size:1.15rem}
.editeur-section>summary::after{content:'';flex:none;display:block;width:28px;height:28px;border-radius:50%;
  background:var(--sand-300) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:transform .2s}
.editeur-section[open]>summary::after{transform:rotate(180deg)}
.editeur-section[open]>summary{margin-bottom:1.2rem}
.editeur-section>summary:focus-visible{outline:2px solid var(--terra-500);outline-offset:4px}
.editeur__pied{position:sticky;bottom:0;background:var(--sand-200);padding:1rem 0;
  border-top:1px solid var(--border-strong);margin-top:1rem;z-index:5}
.equip-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.equip-bloc{border:1px solid var(--border);border-radius:12px;padding:.9rem 1rem;margin:0}
.equip-bloc legend{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--terra-600);padding:0 .3rem}
/* Troisième écriture de la même case à cocher, troisième réglage — et le plus
   visible des trois. `align-items:center` centrait la case sur le BLOC : sur un
   libellé de deux lignes (« Gardien ou concierge d'immeuble », « Détecteur de
   monoxyde de carbone », « Caméras de surveillance extérieures », « Barres
   d'appui dans la salle de bain ») elle tombait 11,9 px trop bas, entre les deux
   lignes. Ici le libellé peut en outre porter une note, qui occupe la seconde
   colonne : raison de plus pour ancrer la case en haut. Même calcul que sur les
   deux autres formulaires. */
.equip-case{--coche:1rem;--texte:.88rem;--interligne:1.4;
  display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:start;
  font-size:var(--texte);line-height:var(--interligne);padding:.2rem 0}
.equip-case>input[type=checkbox]{inline-size:var(--coche);block-size:var(--coche);margin:0;
  accent-color:var(--terra-500);
  margin-block-start:calc((var(--texte) * var(--interligne) - var(--coche)) / 2)}
.equip-case .equip-note-champ{grid-column:2;font-size:.78rem;padding:.22rem .4rem;
  border:1px dashed var(--border-strong);border-radius:6px;background:transparent}
.equip-case input[type=checkbox]:not(:checked)~.equip-note-champ{display:none}
.photos-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.photos-grille figure{margin:0}
.photos-grille img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block}
.url-tronquee{display:block;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.export-ical{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--border)}
.champ-copiable{width:100%;font:inherit;font-size:.86rem;padding:.6rem .7rem;border:1px solid var(--border-strong);
  border-radius:9px;background:var(--sand-200);color:var(--ink)}
@media(max-width:700px){.ligne-champs{grid-template-columns:1fr}.adm-table{font-size:.82rem}}

/* ---------------------------------------- navigation de l'administration
   Les six onglets réclament ~660 px. Coincés entre la marque (114 px) et le
   nom de l'utilisateur (199 px), ils n'en avaient que 557 dès 980 px de
   large, et se répartissaient sur deux lignes au beau milieu de la rangée —
   jusqu'à six sur un téléphone, .adm-nav étant en `flex:1`, donc de base
   nulle.

   En dessous de 1250 px, la navigation passe donc dans un tiroir, comme sur
   le site public. Le tiroir EST le <nav> du bandeau, replacé : une seule
   liste de liens à tenir à jour, pas deux.

   Sans JavaScript, la classe `js` manque à <html> : le tiroir ne s'ouvrirait
   jamais. Les règles ci-dessous lui sont donc réservées, et la navigation
   reste alors en clair, sur une rangée à elle. */
.adm-burger{display:none}
@media(max-width:1250px){
  .adm-head{gap:.55rem 1rem;padding-bottom:.55rem;position:relative}
  .adm-brand{order:1}
  .adm-user{order:2;margin-left:auto}
  .adm-nav{order:3;flex:1 1 100%;gap:.25rem}
  .adm-nav a{padding:.4rem .7rem}

  html.js .adm-burger{
    order:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    width:40px;height:40px;flex:none;border-radius:999px;
    border:1.5px solid rgba(255,255,255,.28);background:transparent;cursor:pointer;
    transition:background .2s,border-color .2s;
  }
  html.js .adm-burger:hover{background:rgba(255,255,255,.1)}
  html.js .adm-burger:focus-visible{outline:2px solid var(--terra-400);outline-offset:2px}
  html.js .adm-burger span{display:block;width:17px;height:1.8px;background:#fff;border-radius:2px;
    transition:transform .28s var(--ease-out),opacity .18s}
  html.js .adm-burger[aria-expanded=true] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
  html.js .adm-burger[aria-expanded=true] span:nth-child(2){opacity:0}
  html.js .adm-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

  /* Le tiroir se cale sous le bandeau, quelle que soit sa hauteur. */
  html.js .adm-nav{
    position:absolute;top:100%;left:0;right:0;z-index:90;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy-800);border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 40px -12px rgba(7,28,48,.55);
    padding:.4rem clamp(1rem,3vw,2rem) .8rem;
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility .22s;
  }
  html.js .adm-nav.is-open{visibility:visible;opacity:1;transform:none}
  html.js .adm-nav a{padding:.7rem .6rem;border-radius:8px;font-size:.95rem}
  html.js .adm-nav a+a{border-top:1px solid rgba(255,255,255,.09)}
  html.js .adm-nav a[aria-current=page]{background:rgba(255,255,255,.14)}
  html.js body.adm-fige{overflow:hidden}
}
/* Sous 640 px, marque + nom + bouton + bascule ne tiennent plus sur la
   rangée : le nom de l'utilisateur s'efface, c'est ce qui manque le moins
   à quelqu'un qui est déjà connecté. Le bouton de déconnexion reste. */
@media(max-width:640px){
  .adm-user>span{display:none}
}
@media(max-width:520px){
  .adm-nav a{padding:.36rem .55rem;font-size:.84rem}
  .adm-user{font-size:.8rem;gap:.5rem}
  html.js .adm-nav a{padding:.7rem .6rem;font-size:.95rem}
}
/* Sur téléphone, le bandeau tient sur une ligne — marque, langue, déconnexion, menu : à 375 px
   (iPhone SE, mini), le menu tombait seul sur une seconde ligne. Sous 360 px, il en faut deux :
   la marque et le menu en haut, la langue et la déconnexion dessous, jamais un bouton isolé. */
@media(max-width:480px){
  .adm-head{column-gap:.5rem}
  .adm-brand .brand__name{font-size:1.1rem}
  .adm-user{gap:.4rem}
  .adm-user .btn--sm{padding-left:.6rem;padding-right:.6rem}
}
@media(max-width:359px){
  html.js .adm-head--menu .adm-burger{order:2;margin-left:auto}
  html.js .adm-head--menu .adm-user{order:3;flex-basis:100%;justify-content:flex-end}
}

/* Tableaux larges sur écran étroit.
   Le tableau des annonces fait 632 px, celui du marché 796 : sur un
   téléphone ils débordaient la page entière, qui partait de côté avec son
   titre et son menu. Le tableau défile désormais pour lui-même, le reste de
   la page ne bouge plus. */
@media(max-width:900px){
  .adm-table{display:block;overflow-x:auto;overscroll-behavior-x:contain}
}

/* ------------------------------------------------------- boutons-icônes
   Une action secondaire réduite à son icône (boutonIcone, src/lib/html.js) : un rond de la taille
   d'un petit bouton, et son libellé en bulle au survol — sur un écran qui sait survoler — ou au
   clavier. Au toucher, pas de survol : ces icônes sont celles qu'on reconnaît sans lire. */
.btn-icone{position:relative;display:inline-grid;place-items:center;flex:none;width:2.3rem;height:2.3rem;padding:0;margin:0;
  border:1px solid var(--border-strong);border-radius:999px;background:var(--surface-2);color:var(--navy-800);
  cursor:pointer;text-decoration:none;font:inherit;transition:background .15s,border-color .15s,color .15s}
.btn-icone .icone{width:1.05rem;height:1.05rem}
.btn-icone:hover{background:color-mix(in srgb,var(--navy-800) 7%,var(--surface-2));border-color:var(--navy-800)}
.btn-icone:focus-visible{outline:2px solid var(--terra-400);outline-offset:2px}
.btn-icone--danger:hover{color:var(--terra-700);border-color:var(--terra-700);background:color-mix(in srgb,var(--terra-400) 12%,var(--surface-2))}
.btn-icone[data-info]::after{content:attr(data-info);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  z-index:20;padding:.32rem .55rem;border-radius:7px;background:var(--navy-900);color:#fff;font-size:.75rem;font-weight:600;
  line-height:1.2;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s}
@media(hover:hover){.btn-icone[data-info]:hover::after{opacity:1;visibility:visible}}
.btn-icone--montre[data-info]::after{opacity:1;visibility:visible}
.btn-icone[data-info]:is(:focus-visible,:has(:focus-visible))::after{opacity:1;visibility:visible}
.btn-icone:has(input:focus-visible){outline:2px solid var(--terra-400);outline-offset:2px}
/* Au bord droit — l'en-tête d'une page, la dernière cellule d'une ligne —, la bulle s'aligne à droite. */
.adm-entete .btn-icone::after,td .btn-icone::after,.actions .btn-icone::after{left:auto;right:0;transform:none}
/* Le retour d'une page : une flèche avant son titre, la bulle alignée à gauche. */
.adm-entete:has(>.retour){justify-content:flex-start;flex-wrap:nowrap;align-items:flex-start}
.adm-entete>.retour{order:-1;margin-top:.1rem}
.adm-entete:has(>.retour)>:not(.retour){flex:1}
.retour::after,.adm-entete .retour::after{left:0;right:auto;transform:none}
/* Dans un bloc, ce qui suit un tableau ou un formulaire — une phrase, un bouton — en reste détaché ;
   comme un bouton qui suit une phrase. Ils se touchaient : « Préparer un mandat » sous la liste des
   mandats, « Remboursable : … » sous « Rembourser », « Créer et inviter » sous sa phrase. */
.adm-bloc>:is(table,form,.table-defile)+:is(p,form,.btn),.adm-bloc>p+:is(button,.btn){margin-top:1rem}
/* Une rangée d'icônes : un écart franc entre elles ; en tête de page, de l'air avant la suite. */
.outils-page{margin-bottom:1.2rem}
.icones{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.icones form{display:contents}
td.actions .icones,.actions .icones{justify-content:flex-end}

/* ---------------------------------------------------- photos de l'éditeur */
.photos-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1rem;margin-top:1.2rem}
.photo-item{margin:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface-2);position:relative}
.photo-item--couverture{border-color:var(--terra-500);box-shadow:0 0 0 1px var(--terra-500)}
.photo-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.photo-badge{position:absolute;top:.5rem;left:.5rem;background:var(--terra-500);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.2rem .5rem;border-radius:999px}
.photo-item figcaption{padding:.6rem;display:flex;flex-direction:column;gap:.45rem}
.photo-legende{display:flex;flex-direction:column;gap:.35rem}
.photo-legende input{font:inherit;font-size:.78rem;padding:.3rem .45rem;border:1px solid var(--border-strong);
  border-radius:6px;background:var(--surface)}
.photo-actions{display:flex;gap:.25rem;flex-wrap:wrap}
.photo-actions .btn{padding:.2rem .5rem;font-size:.8rem;line-height:1.2}

/* ------------------------------------------------------------ calendrier */
.ligne-champs--auto{grid-template-columns:repeat(auto-fit,minmax(150px,auto));align-items:end}
.cal-page-entete{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
body.admin .cal-page-entete .h3{margin:0}
.cal-vues{display:flex;align-items:center;gap:.2rem;padding:.2rem;border:1px solid var(--border);
  border-radius:10px;background:var(--surface-2)}
.cal-vues a{padding:.45rem .8rem;border-radius:7px;color:var(--navy-800);text-decoration:none;
  font-size:.86rem;font-weight:600;white-space:nowrap}
.cal-vues a[aria-current=page]{background:var(--navy-800);color:#fff}
.cal-vues a:focus-visible{outline:2px solid var(--terra-500);outline-offset:2px}
.cal-outils{display:flex;align-items:end;justify-content:space-between;gap:.8rem 1rem;flex-wrap:wrap;
  padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:1.15rem}
.cal-outils form,.cal-outils-actions{display:flex;align-items:end;gap:.6rem;flex-wrap:wrap}
.cal-outils form{min-width:0;margin:0}
.cal-outils .champ{min-width:145px}
.cal-outils select,.cal-outils input{padding:.45rem .6rem;font-size:1rem}
.cal-outils .btn{min-height:42px}
.cal-outils-actions{margin-left:auto}
.cal-ensemble-navigation{display:flex;justify-content:flex-start}
.cal-ensemble-navigation input{min-width:180px;max-width:100%;padding:.45rem .6rem;min-height:42px}
@media(max-width:650px){.cal-vues{width:100%}.cal-vues a{flex:1;text-align:center}
  .cal-outils form,.cal-outils-actions{width:100%}.cal-outils .champ{flex:1 1 140px}
  .cal-outils-actions{margin-left:0}.cal-outils-actions .btn{flex:1;text-align:center}}
.cal-legende{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;margin:0 0 1.4rem;font-size:.84rem;color:var(--ink-soft)}
.cal-legende span{display:flex;align-items:center;gap:.4rem}
.pastille-cal{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid var(--border-strong)}
.pastille-cal--reservation{background:var(--olive-500);border-color:var(--olive-600)}
.pastille-cal--manuel{background:var(--sand-500);border-color:var(--sand-500)}
.pastille-cal--ical{background:var(--terra-400);border-color:var(--terra-500)}
.pastille-cal--tarif{background:var(--surface-2);border-color:var(--terra-500);border-width:2px}

.cal-ensemble-defile{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;
  overflow-anchor:none;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.cal-ensemble-defile,.cal-mois-grille{user-select:none}
.cal-ensemble-defile:focus-visible{outline:2px solid var(--terra-500);outline-offset:2px}
.cal-ensemble-etat{min-height:1.4em;margin:.4rem 0 0;color:var(--terra-700);font-size:.82rem}
.cal-ensemble{border-collapse:separate;border-spacing:0;width:max-content;font-size:.78rem}
.cal-ensemble th,.cal-ensemble td{box-sizing:border-box;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.cal-ensemble thead th{background:var(--surface-2);color:var(--navy-800)}
.cal-ensemble-nom{position:sticky;left:0;z-index:1;width:210px;min-width:210px;max-width:210px;
  padding:.5rem .65rem;text-align:left;background:var(--surface);box-shadow:2px 0 5px rgba(7,28,48,.08)}
.cal-ensemble thead .cal-ensemble-nom{z-index:2;background:var(--surface-2)}
.cal-ensemble-nom a{display:block;color:var(--navy-800);font-weight:700;text-decoration:underline;
  text-underline-offset:2px;overflow-wrap:anywhere;line-height:1.3}
.cal-ensemble-nom small{display:block;color:var(--muted);font-weight:400;margin-top:.2rem;overflow-wrap:anywhere}
.cal-ensemble-mois{text-align:center;padding:.45rem .55rem;text-transform:capitalize;border-top:0}
.cal-ensemble-date{width:38px;min-width:38px;height:43px;text-align:center;font-weight:400}
.cal-ensemble-date span,.cal-ensemble-date b{display:block;line-height:1.3}
.cal-ensemble-date span{font-size:.63rem;color:var(--muted)}
.cal-ensemble-date--auj{box-shadow:inset 0 0 0 2px var(--terra-500)}
.cal-ensemble-nuit{width:38px;min-width:38px;height:46px;background:var(--surface-2);position:relative}
.cal-ensemble-nuit--reservation{background:var(--olive-500)}
.cal-ensemble-nuit--manuel{background:var(--sand-500)}
.cal-ensemble-nuit--ical{background:var(--terra-400)}
.cal-ensemble-nuit--tarif{box-shadow:inset 0 0 0 2px var(--terra-500)}
.cal-ensemble-nuit--passe{opacity:.5}
.cal-ensemble-case{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.cal-ensemble-case:hover{box-shadow:inset 0 0 0 2px var(--navy-800)}
.cal-ensemble-case:focus-visible{outline:3px solid var(--navy-800);outline-offset:-3px;z-index:2}
.cal-case--selectionnee{outline:3px solid var(--terra-700);outline-offset:-3px;z-index:2}
.cal-ensemble-point{position:absolute;right:4px;bottom:4px;width:6px;height:6px;border-radius:50%;background:var(--terra-700);pointer-events:none}
.cal-detail{position:fixed;inset:0;width:min(560px,calc(100% - 2rem));max-height:min(85vh,740px);overflow-y:auto;margin:auto;padding:1.7rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-lg)}
.cal-detail::backdrop{background:rgba(5,20,34,.62)}
.cal-detail .h4{margin:.3rem 2rem 1.2rem 0}
.cal-detail .adm-kicker{margin:0}
.cal-detail p:not(.adm-kicker){margin:.6rem 0}
.cal-detail-etat{font-weight:700;color:var(--navy-800)}
.cal-detail [hidden]{display:none}
.cal-detail-fermer{position:absolute;top:.9rem;right:.9rem;width:36px;height:36px}
/* La fenêtre défile en elle-même : au-dessus du bouton, l'infobulle — montrée dès l'ouverture, le bouton
   recevant le focus — sortait par le haut, coupée. Dessous, elle reste dans la fenêtre. */
.cal-detail .cal-detail-fermer[data-info]::after{top:calc(100% + 7px);bottom:auto;left:auto;right:0;transform:none}
/* À l'ouverture, le focus va au titre (autofocus) et non au bouton de fermeture : son infobulle et son
   anneau s'affichaient d'emblée, même au toucher. Le titre, lui, n'a pas à porter d'anneau. */
.cal-detail #cal-detail-titre:focus{outline:none}
.cal-detail-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.6rem}
.cal-detail-avertissement{padding:.75rem .9rem;border-radius:var(--r-sm);background:var(--sand-300);color:var(--navy-800);font-size:.86rem}
.cal-detail-edition{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-top:1.4rem}
.cal-detail-form{display:flex;flex-direction:column;gap:.7rem;padding:1rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.cal-detail-form h3{margin:0;color:var(--navy-800);font-size:.96rem}
.cal-detail-form .btn{margin-top:auto;width:100%;white-space:normal}
.cal-detail-form .champ{min-width:0}
@media(max-width:600px){.cal-detail-edition{grid-template-columns:1fr}.cal-detail{padding:1.3rem}}
.cal-periode{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.cal-periode-resume{grid-column:1/-1;color:var(--ink-soft);font-size:.86rem}
@media(max-width:600px){.cal-ensemble-nom{width:145px;min-width:145px;max-width:145px}}

.cal-mois-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.4rem;margin-bottom:2rem}
.cal-mois{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem}
.cal-titre{font-family:var(--font-display);font-size:1rem;font-weight:600;margin:0 0 .7rem;
  color:var(--navy-800);text-transform:capitalize}
.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-entete{text-align:center;font-size:.68rem;font-weight:700;color:var(--muted);padding-bottom:.3rem}
.cal-vide{aspect-ratio:1}
.cal-jour{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:6px;font-size:.78rem;background:var(--surface-2);border:1px solid var(--border);
  position:relative;cursor:pointer;width:100%;padding:0}
.cal-jour:hover{outline:2px solid var(--navy-800);outline-offset:-2px}
.cal-jour:focus-visible{outline:3px solid var(--navy-800);outline-offset:2px}
.cal-num{line-height:1;font-weight:600}
.cal-tarif{font-size:.56rem;color:var(--terra-600);font-weight:700;line-height:1;margin-top:1px}
.cal-jour--passe{opacity:.38}
.cal-jour--reservation{background:var(--olive-500);border-color:var(--olive-600);color:#fff}
.cal-jour--manuel{background:var(--sand-500);border-color:var(--sand-500);color:var(--navy-900)}
.cal-jour--ical{background:var(--terra-400);border-color:var(--terra-500);color:var(--navy-900)}
.cal-jour--tarif{box-shadow:inset 0 0 0 2px var(--terra-500)}
/* Espace propriétaire : ses propres séjours, à part de tout le reste. */
.cal-jour--perso{background:var(--navy-800);border-color:var(--navy-900);color:#fff}
.pastille-cal--perso{background:var(--navy-800);border-color:var(--navy-900)}
.pastille-cal--libre{background:var(--surface-2)}
/* ------------------------------------- échelle des titres de l'ADMIN
   Les pages du Worker écrivent <h1 class="h3">, <h2 class="h4">… : la balise
   dit le RANG dans le document, la classe dit la TAILLE. Encore faut-il que
   les classes existent — .h3 et .h4 n'étaient définies nulle part, si bien
   qu'un titre de section tombait sur la taille de sa balise : 46 px pour un
   <h2>, 58 px pour un <h1>. Avec le reset `*{margin:0}` de style.css, ils
   arrivaient en prime collés au texte.

   Tout est volontairement limité à `body.admin`. Les mêmes classes servent
   sur les pages publiques du Worker, où ces tailles de vitrine sont les
   bonnes : les définir globalement rabougrirait les titres de la page
   d'estimation remise au propriétaire, qui passeraient de 46 à 20 px.

   Un tableau de bord n'est pas une page vitrine : on y lit des chiffres, pas
   un argumentaire. Trois niveaux suffisent à s'y repérer, et l'écart entre
   eux doit rester sobre. */
body.admin .h1,body.admin .h2,body.admin .h3,
body.admin .h4,body.admin .h5{
  font-family:var(--font-display);font-weight:600;color:var(--navy-900);
  letter-spacing:-.018em;text-wrap:balance;
}
body.admin .h1{font-size:2.1rem;line-height:1.12}
body.admin .h2{font-size:1.85rem;line-height:1.14}

/* Titre de page.
   · seul dans la rangée d'en-tête, à côté d'un bouton : c'est .adm-entete qui
     tient l'écart avec la suite, le titre n'ajoute rien ;
   · surmontant un sous-titre, comme dans l'éditeur d'annonce : juste de quoi
     les séparer, pas de quoi les décrocher l'un de l'autre. */
body.admin .h3{font-size:1.7rem;line-height:1.15;margin:0 0 1.4rem}
body.admin .adm-entete .h3{margin-bottom:.25rem}
body.admin .adm-entete>.h3{margin-bottom:0}

/* Titre de section, et son chapô qui le suit de près. */
body.admin .h4{font-size:1.12rem;line-height:1.3;margin:0 0 .65rem}
body.admin .adm-bloc>.h4+.muted{display:block;margin-bottom:1rem}

/* Sous-titre : il respire au-dessus quand il suit un tableau, jamais quand il
   ouvre son bloc. */
body.admin .h5{font-size:.95rem;line-height:1.35;margin:1.6rem 0 .6rem;color:var(--navy-800)}
body.admin .h4:first-child,body.admin .h5:first-child{margin-top:0}

/* ------------------------------------------------------------ estimations */
.alerte--attention{background:color-mix(in srgb,var(--terra-400) 12%,transparent);
  border-color:var(--terra-400);color:var(--terra-700)}
.pastille--info{background:color-mix(in srgb,var(--navy-800) 12%,transparent);color:var(--navy-800)}

.est-actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-bottom:2rem}
/* min-width:0 — un fieldset refuse par défaut de descendre sous la largeur de son contenu :
   sur un téléphone, la liste des équipements débordait de l'écran. */
.est-equip{border:1px solid var(--border);border-radius:12px;padding:.8rem 1rem;margin:0 0 1rem;min-width:0}
.est-equip legend{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--terra-600);padding:0 .3rem}
/* Même correction que sur le formulaire public : `align-items:baseline` posait
   le bord inférieur de la case sur la ligne de base du texte, donc la case
   flottait au-dessus du libellé. Ici le libellé porte en plus l'effet chiffré
   de l'équipement, il passe donc souvent à la ligne — raison de plus pour
   caler la case sur la PREMIÈRE ligne et non sur le milieu du bloc. */
.est-equip__item{--coche:1rem;--texte:.88rem;--interligne:1.4;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem;align-items:start;
  font-size:var(--texte);line-height:var(--interligne);padding:.2rem 0;cursor:pointer}
.est-equip__item input{inline-size:var(--coche);block-size:var(--coche);margin:0;
  accent-color:var(--terra-500);
  margin-block-start:calc((var(--texte) * var(--interligne) - var(--coche)) / 2)}
.est-equip__item i{font-style:normal;color:var(--muted);font-size:.76rem;margin-left:.4rem;white-space:nowrap}
/* Sur un téléphone, l'effet chiffré passe sous le libellé, et peut s'y couper. */
@media(max-width:480px){.est-equip__item i{display:block;margin-left:0;white-space:normal}}
.est-mini{max-width:6.5rem;display:inline-block}
.est-somme--fausse{color:var(--terra-700);font-weight:600}
.est-taux{font-size:1.05rem;margin:.2rem 0 1rem}
.est-taux b{font-family:var(--font-display);font-size:1.3rem;color:var(--navy-800)}
.est-taux .muted{margin-left:.6rem}
.est-taux__saisie{display:flex;align-items:flex-end;gap:.6rem}
.est-taux__saisie .champ{font-size:.85rem}

.est-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin:1rem 0 2rem}
.est-carte{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:1rem}
.est-carte span{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.est-carte b{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1.1;
  color:var(--navy-800);margin:.35rem 0}
.est-carte b i{font-style:normal;font-size:.8rem;color:var(--muted)}
.est-carte small{color:var(--muted);font-size:.78rem;line-height:1.35;display:block}
.est-carte--phare{background:var(--navy-800);border-color:var(--navy-800)}
.est-carte--phare span,.est-carte--phare small{color:#D9CFC2}
.est-carte--phare b{color:#fff;font-size:1.9rem}
.est-carte--phare b i{color:#D9CFC2}

.est-cascade th[scope=row]{text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--ink);
  font-weight:500;border-bottom:1px solid var(--border);padding:.7rem .6rem}
.est-cascade th[scope=row] span{display:block;font-size:.78rem;color:var(--muted)}
.est-cascade td{text-align:right;font-variant-numeric:tabular-nums}
.est-cascade thead th:not(:first-child){text-align:right}
.est-l--retrait td{color:var(--terra-700)}
.est-l--fort th[scope=row],.est-l--fort td{font-weight:700;background:var(--sand-200)}
.est-l--solde th[scope=row],.est-l--solde td{font-weight:700;background:var(--navy-800);color:#fff}

.est-mois td{font-variant-numeric:tabular-nums}
.est-barre{width:28%;min-width:80px}
.est-barre span{display:block;height:9px;border-radius:5px;background:var(--terra-400)}
.est-prov{font-size:.88rem;line-height:1.6;padding-left:1.1rem;color:var(--ink-soft)}
.est-prov li{margin-bottom:.4rem}

.est-partage{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--border)}
.est-lien a{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;word-break:break-all}
.est-journal{background:var(--sand-200);border:1px solid var(--border);border-radius:10px;
  padding:.8rem 1rem;font-size:.82rem;white-space:pre-wrap;overflow-x:auto;margin-top:1rem}
.est-marche td{vertical-align:middle}
.est-marche input{padding:.35rem .45rem;font-size:.86rem}
@media(max-width:860px){.est-marche{font-size:.8rem}.est-barre{display:none}}
/* Sur téléphone, les tableaux de calcul d'une estimation se resserrent pour tenir dans l'écran, comme
   chez le client : une fiche par ligne casserait la lecture des sommes, de haut en bas. */
@media(max-width:520px){
  .est-cascade,.est-mois,.est-gestion{font-size:.84rem}
  .est-cascade tr>*,.est-cascade th[scope=row],.est-mois tr>*,.est-gestion tr>*{padding-left:.35rem;padding-right:.35rem}
  .est-cascade thead th,.est-mois thead th,.est-gestion thead th{-webkit-hyphens:auto;hyphens:auto}
  .est-cascade td,.est-mois td:nth-child(n+3),.est-gestion td{white-space:nowrap}
}
@media(max-width:360px){
  .est-cascade,.est-mois,.est-gestion{font-size:.8rem}
  .est-cascade tr>*,.est-cascade th[scope=row],.est-mois tr>*,.est-gestion tr>*{padding-left:.25rem;padding-right:.25rem}
  .est-cascade thead th,.est-mois thead th,.est-gestion thead th{font-size:.64rem;letter-spacing:.03em}
  /* Les intitulés de la cascade suivent la taille du tableau, au lieu de garder leurs .9rem. */
  .est-cascade th[scope=row]{font-size:inherit}
  .est-cascade th[scope=row] span{font-size:.92em}
}

/* ==================================== estimation remise à un propriétaire */
.dev{max-width:860px;margin:0 auto;
  /* L'en-tête du site est fixe : il faut le dégager explicitement. 96 px est
     l'allocation que le site se donne déjà pour lui (scroll-padding-top).
     --section-y n'y suffit pas : sur un écran étroit il retombe à 64 px et le
     surtitre passe dessous. */
  padding:calc(96px + clamp(1rem,3vw,2rem)) clamp(1rem,4vw,2rem) 5rem}
.dev__tete{border-bottom:2px solid var(--navy-800);padding-bottom:1.4rem;margin-bottom:2rem}
.dev__tete .h1{margin:.3rem 0 1.2rem}
.dev__meta{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;margin:0}
.dev__meta div{margin:0}
.dev__meta dt{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.dev__meta dd{margin:.2rem 0 0;font-weight:600}
.dev__bloc{margin-bottom:2.6rem}
.dev__bloc>h2{margin:0 0 .9rem}
.dev__fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:0}
.dev__fiche div{margin:0}
.dev__fiche dt{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.dev__fiche dd{margin:.25rem 0 0;font-weight:600}

.dev__phare{background:var(--navy-800);color:#fff;border-radius:16px;padding:1.8rem;text-align:center;margin-bottom:1rem}
.dev__phare>p{margin:0;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#D9CFC2}
.dev__phare b{display:block;font-family:var(--font-display);font-size:clamp(2.2rem,7vw,3.2rem);line-height:1.05;margin:.5rem 0 .3rem}
.dev__phare b i{font-style:normal;font-size:.95rem;color:#D9CFC2}
.dev__phare-an{margin:0;color:#D9CFC2;font-size:.92rem}
.dev__cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:2.6rem}
.dev__carte{border:1px solid var(--border);border-radius:12px;padding:1rem;background:var(--surface-2)}
.dev__carte span{display:block;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.dev__carte b{display:block;font-family:var(--font-display);font-size:1.3rem;color:var(--navy-800);margin:.3rem 0}
.dev__carte small{color:var(--muted);font-size:.78rem;line-height:1.35;display:block}

.dev__table{width:100%;border-collapse:collapse;font-size:.92rem}
.dev__table thead th{text-align:right;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:.5rem .6rem;border-bottom:1px solid var(--border-strong)}
.dev__table thead th:first-child{text-align:left}
.dev__table th[scope=row]{text-align:left;font-weight:500;padding:.7rem .6rem;border-bottom:1px solid var(--border)}
.dev__table th[scope=row] span{display:block;font-size:.78rem;color:var(--muted)}
.dev__table td{text-align:right;padding:.7rem .6rem;border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.dev-l--retrait td{color:var(--terra-700)}
.dev-l--total th[scope=row],.dev-l--total td{font-weight:700;background:var(--sand-200)}
/* En em : la ligne du solde, la plus large, se resserre avec le tableau sur téléphone. */
.dev-l--solde th[scope=row],.dev-l--solde td{font-weight:700;background:var(--navy-800);color:#fff;font-size:1.14em}
.dev__table--mois .dev__barre{width:26%}
.dev__barre span{display:block;height:8px;border-radius:4px;background:var(--terra-400)}
/* Sur téléphone, les tableaux se resserrent : la barre du mois par mois, qui redit la colonne
   Hébergement, s'efface, et les en-têtes se coupent avec un trait d'union. S'il faut encore de la
   place, c'est le tableau qui défile, jamais la page : 410 px pour un écran de 402 dans Safari. */
.dev__defile{overflow-x:auto}
@media(max-width:520px){
  .dev__table{font-size:.86rem}
  .dev__table th,.dev__table td{padding-left:.35rem;padding-right:.35rem}
  .dev__table tr>:first-child{padding-left:.6rem}
  .dev__table thead th{-webkit-hyphens:auto;hyphens:auto}
  .dev__table--mois thead th:last-child,.dev__table--mois .dev__barre{display:none}
}
@media(max-width:360px){
  .dev__table{font-size:.8rem}
  .dev__table th,.dev__table td{padding-left:.25rem;padding-right:.25rem}
  .dev__table tr>:first-child{padding-left:.45rem}
  .dev__table thead th{font-size:.64rem;letter-spacing:.03em}
}
.dev__note{font-size:.84rem;color:var(--muted);margin-top:.8rem;line-height:1.5}
.dev__methode{font-size:.92rem;line-height:1.65;padding-left:1.2rem}
.dev__methode li{margin-bottom:.5rem}
.dev__reserve{background:var(--sand-200);border:1px solid var(--border);border-radius:14px;padding:1.4rem}
.dev__reserve p{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
.dev__actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}

@media print{
  .site-header,.site-footer,.drawer,.skip-link,.dev__actions,
  .consentement,.preferences,.wa{display:none!important}
  body{background:#fff}
  .dev{max-width:none;padding:0}
  .dev__defile{overflow:visible}
  .dev__phare{background:#fff;color:#000;border:2px solid #000;border-radius:0}
  .dev__phare>p,.dev__phare b i,.dev__phare-an{color:#333}
  .dev-l--solde th[scope=row],.dev-l--solde td{background:#eee;color:#000}
  .dev__bloc{break-inside:avoid}
  .dev__table{font-size:.84rem}
}
.dev__equip{margin-top:1.6rem}
.dev__equip-titre{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.dev__equip ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.45rem}
.dev__equip li{border:1px solid var(--border);border-radius:999px;padding:.28rem .75rem;
  font-size:.84rem;background:var(--surface-2);color:var(--ink-soft)}
@media print{.dev__equip li{border-color:#999;background:#fff}}

/* Annonce ⇄ estimation : les actions de l'en-tête, sur une rangée qui passe à
   la ligne. La liste déroulante reprend le dessin de celles des formulaires. */
.adm-passerelle{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.6rem;min-width:0;max-width:100%}
/* Le menu garde la largeur de son plus long intitulé, sauf à pouvoir se resserrer avec la page :
   min-width:0, sans quoi il élargissait l'écran d'un téléphone. */
.adm-passerelle form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0;min-width:0;max-width:100%}
.adm-passerelle select{font:inherit;font-size:.85rem;padding:.38rem 2rem .38rem .6rem;max-width:100%;min-width:0;
  border:1px solid var(--border-strong);border-radius:8px;background-color:var(--surface-2);color:var(--ink);
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A45' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .5rem center;background-size:13px}
.adm-passerelle--entete{margin-top:0}
.alerte ul{margin:.45rem 0 0;padding-left:1.2rem}

/* Photos jointes à une demande, en tête de l'estimation qui en est tirée. */
.est-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem}
.est-photos a{display:block;border-radius:9px;overflow:hidden;border:1px solid var(--border)}
.est-photos img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.ligne-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}

/* Relevés du propriétaire : montants alignés, tableau qui défile sur mobile, impression sans l'interface. */
.adm-table .nombre{text-align:right;white-space:nowrap}
.table-defile{overflow-x:auto;-webkit-overflow-scrolling:touch}
.recap .recap__fort{border-bottom:0}
.solde__montant{font-size:1.2rem}
@media print{
  .adm-head,.adm-burger,.sans-impression{display:none!important}
  body.admin{background:#fff}
  .releve .adm-bloc{break-inside:avoid;box-shadow:none}
}
.releve .ligne-actions{align-items:flex-end}
/* Sur un téléphone, chaque ligne d'un tableau .table-cartes devient une fiche : la première cellule en
   titre, puis chaque valeur, l'intitulé de sa colonne à gauche (data-label), la valeur à droite ; les
   boutons au pied, à droite. Relevés, documents et estimations du client, et les tableaux de l'équipe. */
@media(max-width:700px){
  .table-cartes,.table-cartes tbody{display:block;width:100%}
  .table-cartes thead{display:none}
  .table-cartes tr{display:block;padding:.6rem 0;border-bottom:1px solid var(--border)}
  .table-cartes td{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.2rem 0;border:0;white-space:normal}
  .table-cartes td::before{content:attr(data-label);flex:none;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .table-cartes td .val{text-align:right;min-width:0;overflow-wrap:anywhere}
  .table-cartes td:first-child{font-weight:600}
  .table-cartes td:first-child::before,.table-cartes td:not([data-label])::before{content:none}
  .table-cartes td:first-child .val{text-align:left}
  .table-cartes td:empty{display:none}
  .table-cartes td.actions{justify-content:flex-end;flex-wrap:wrap;gap:.4rem;padding-top:.45rem}
  /* Hors d'un bloc blanc — les listes de l'équipe —, chaque fiche a son propre fond. */
  .adm-wrap>.table-cartes tr{background:var(--surface);border:1px solid var(--border);border-radius:12px;
    padding:.7rem .9rem;margin-bottom:.6rem}
}

/* Mandat de gestion : une feuille lisible et imprimable, sa preuve de signature en dessous. */
.mandat-feuille{background:#fff;border:1px solid var(--border);border-radius:12px;padding:2rem 2.2rem;margin:1rem 0;
  font-family:Georgia,'Times New Roman',serif;line-height:1.6;color:var(--ink)}
.mandat-feuille h1{font-size:1.5rem;margin:.3rem 0 1.2rem}
.mandat-feuille h2{font-size:1.05rem;margin:1.5rem 0 .4rem}
.mandat-feuille .mandat__ref{font-size:.8rem;color:var(--muted);margin:0}
/* La place de l'adresse que le propriétaire indiquera avant de signer. */
.mandat-feuille .mandat__a-completer{background:color-mix(in srgb,var(--terra-300) 45%,transparent);padding:0 .25em;border-radius:3px}
.mandat-feuille table{border-collapse:collapse;width:100%;margin:.6rem 0;font-size:.95rem}
.mandat-feuille th,.mandat-feuille td{border:1px solid var(--border);padding:.4rem .6rem;text-align:left;vertical-align:top}
/* La remise à zéro du site (ul{list-style:none}) ôtait ses puces au mandat ; la copie signée les a. */
.mandat-feuille ul{list-style:disc;padding-left:1.3rem}
.mandat-feuille li+li{margin-top:.3rem}
.preuve{margin-top:1.6rem;padding:1rem 1.2rem;border:2px solid var(--navy-800);border-radius:10px;font-family:inherit;font-size:.88rem}
.preuve h2{margin-top:0}
.preuve dt{font-weight:700;margin-top:.5rem}.preuve dd{margin:0;word-break:break-all}
.liste-simple{list-style:none;padding:0;margin:.4rem 0}.liste-simple li{padding:.35rem 0;border-bottom:1px solid var(--border)}
.alerte .btn{margin-left:.6rem}
/* Le texte du mandat est figé : son tableau ne peut pas être enveloppé. Sur téléphone, il se
   resserre, coupe ses mots avec un trait d'union, et défile en lui-même s'il le faut encore. */
@media(max-width:600px){.mandat-feuille{padding:1.2rem 1rem}
  .mandat-feuille table{display:block;width:max-content;max-width:100%;overflow-x:auto;font-size:.86rem}
  .mandat-feuille th,.mandat-feuille td{padding:.35rem .4rem}}
/* La césure, seulement là où il le faut : à 402 px, elle coupait « Hy-dra » sans nécessité. */
@media(max-width:360px){.mandat-feuille th,.mandat-feuille td{-webkit-hyphens:auto;hyphens:auto}}
@media print{.mandat-feuille{border:0;padding:0;margin:0}.signature{display:none}}
/* Les étapes du propriétaire autour du texte — son adresse, puis sa signature : chaque champ, la case et
   le bouton sur leur ligne, espacés ; « Modifier l’adresse » se voit comme un lien. */
.mandat-etape form{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.mandat-etape form>.champ{align-self:stretch}
.mandat-etape form+p{margin:1rem 0 0}
.mandat-etape a:not(.btn){color:var(--terra-700);text-decoration:underline;text-underline-offset:2px}
/* Une pièce déjà jointe au mandat : coche verte et nom du fichier, long ou pas, à la place de son champ. */
.piece-jointe{margin:0;overflow-wrap:anywhere}
.piece-jointe>span[aria-hidden]{color:var(--olive-500);font-weight:700}
/* Une pièce jointe se remplace ou se supprime ; le champ de fichier du remplacement se cache dans son
   bouton. Pendant l'envoi, une barre — puis une barre sans fin, le temps que le serveur vérifie. */
.piece-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.piece-actions label{position:relative;cursor:pointer}
.piece-actions input[type=file]{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer}
.piece-envoi{display:flex;align-items:center;gap:.6rem;margin-top:.4rem;font-size:.85rem;color:var(--muted)}
.piece-envoi progress{flex:1;min-width:0;height:8px;accent-color:var(--terra-500)}
.piece--envoi>input,.piece--envoi .piece-actions{opacity:.45;pointer-events:none}
.piece-erreur{margin:.3rem 0 0;font-size:.85rem;color:var(--terra-700)}
.pieces-js #pieces [data-joindre]{display:none}
.mandat-etape .champ--fige+p{margin:.8rem 0 0}
/* L'avis sur une pièce, après la signature : validée, en vérification, refusée — et pourquoi —, manquante. */
.piece-statut{font-size:.8rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
/* Mettre à jour un mandat : ce qui a changé, puis ses deux boutons, alignés sur la même ligne — le
   formulaire d'« Actualiser » ne prend aucune marge à lui —, sous un peu d'air. */
#version .liste-simple+.ligne-actions{margin-top:1rem}
#version .ligne-actions form{display:block;margin:0}
.version-effet{margin:0 0 1.2rem}
.piece-statut--valide{color:var(--olive-500)}.piece-statut--attente{color:var(--muted)}
.piece-statut--refuse,.piece-statut--manquante{color:var(--terra-700)}
.piece-motif{margin:.2rem 0 0;font-size:.85rem;color:var(--terra-700)}
/* Côté équipe : valider une pièce, ou la refuser avec son motif, sur sa ligne. */
/* .recap div met en grille et souligne chaque ligne : pas le bloc d'actions qu'une ligne contient. */
.piece-avis,.recap .piece-avis{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.45rem;padding-bottom:0;border-bottom:0}
.piece-refus{display:flex;flex:1;gap:.5rem;align-items:center;min-width:min(100%,16rem)}
.piece-refus input{flex:1;min-width:0;font:inherit;font-size:.85rem;padding:.4rem .55rem;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-2);color:var(--ink)}

/* Un paragraphe suivi de son formulaire dans un bloc — « Adresse actuelle : … » — garde son souffle. */
.adm-bloc > p + .grille-champs{margin-top:.9rem}
/* Bloc « Accès » d'une fiche client : la phrase d'état, puis ses boutons, chacun sur sa ligne. */
.bloc-acces>p+form,.bloc-acces>form+form{margin-top:.8rem}
/* Page d'accès d'une estimation : la carte de connexion, une phrase sur le bien, un seul
   formulaire — et, en pied de carte, le chemin vers l'autre. */
.acces-intro{margin:.5rem 0 0}
.acces-lien{margin-top:1rem}
/* Partage d'une estimation : l'état en petit, le lien qui passe à la ligne au lieu de déborder. */
.est-etat{list-style:none;padding:0;margin:.5rem 0 .8rem;font-size:.88rem;color:var(--muted)}
.est-etat li{margin:.15rem 0}
.est-partage .est-actions{margin-bottom:.8rem}
.est-partage .est-actions form{margin:0}
.est-lien code{font-size:.85rem;word-break:break-all;white-space:normal}
/* L'estimation dans l'espace compte : l'en-tête de l'espace tient déjà le haut de page. */
/* Dans l'espace compte, la page a déjà ses marges : l'estimation n'en ajoute pas d'autres. */
body.admin .dev{padding:1rem 0 0}

/* Visionneuse de photos (public/assets/js/visionneuse.js) : la photo en grand, sur un fond
   sombre, les flèches de chaque côté — en bas sur un téléphone, à portée de pouce. */
html.visionneuse-ouverte{overflow:hidden}
.visionneuse{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;
  border:0;background:#0a121c;color:#fff;overflow:hidden}
.visionneuse::backdrop{background:#0a121c}
.visionneuse__scene{position:absolute;inset:3.4rem 4.6rem 2.6rem;margin:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.8rem}
.visionneuse__image{max-width:100%;max-height:calc(100% - 2.4rem);object-fit:contain;border-radius:6px;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.visionneuse__legende{font-size:.95rem;line-height:1.4;color:rgba(255,255,255,.86);text-align:center;max-width:60ch}
.visionneuse__compteur{position:absolute;top:1.15rem;left:1.3rem;margin:0;font-size:.9rem;
  color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
.visionneuse__fermer,.visionneuse__bouton{position:absolute;display:grid;place-items:center;padding:0;border:0;
  border-radius:50%;background:rgba(255,255,255,.13);color:#fff;cursor:pointer}
.visionneuse__fermer svg,.visionneuse__bouton svg{display:block;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.visionneuse__fermer{top:.7rem;right:.8rem;width:44px;height:44px}
.visionneuse__fermer svg{width:20px;height:20px}
.visionneuse__bouton{top:50%;transform:translateY(-50%);width:52px;height:52px}
.visionneuse__bouton svg{width:26px;height:26px}
.visionneuse__precedente{left:1rem}
.visionneuse__suivante{right:1rem}
.visionneuse__fermer:hover,.visionneuse__bouton:hover{background:rgba(255,255,255,.26)}
.visionneuse__fermer:focus-visible,.visionneuse__bouton:focus-visible{outline:2px solid #F3C77E;outline-offset:2px}
.visionneuse [hidden]{display:none}
@media(max-width:700px){
  .visionneuse__scene{inset:3.2rem .5rem 4.8rem}
  .visionneuse__bouton{top:auto;bottom:1rem;transform:none;width:48px;height:48px}
  .visionneuse__precedente{left:calc(50% - 64px)}
  .visionneuse__suivante{right:calc(50% - 64px)}
}
/* Ce qui s'ouvre dans la visionneuse se signale au survol. */
[data-visionneuse-photo]{cursor:zoom-in}
.est-photos a,.photo-item__lien{display:block}

/* Galerie de l'annonce : chaque photo s'ouvre en grand ; au-delà de cinq, un bouton les montre toutes. */
.galerie{position:relative}
a.galerie__item{display:block}
.galerie__item[hidden]{display:none}
.galerie__tout{position:absolute;right:calc(var(--gutter) + 12px);bottom:12px;padding:.5rem .95rem;border-radius:999px;
  border:1px solid rgba(11,42,69,.18);background:#fff;color:var(--navy-800);font:inherit;font-size:.88rem;font-weight:600;
  cursor:pointer;box-shadow:0 4px 14px rgba(7,28,48,.18)}
.galerie__tout:hover{background:var(--sand-100,#F6F1E9)}