/* =========================================================================
   HOMELINKER, MAQUETTE SITE VITRINE V3
   Jetons et composants repris du Brand design system Homelinker V1
   du 14 aout 2026. Socle de marque pour la palette, l'espacement, les
   rayons, l'elevation et le focus. Couche vitrine, partie 3, pour
   l'echelle typographique, le rythme, les grilles et les composants.
   Aucune valeur hors de ces deux sources.
   ========================================================================= */

:root{
  /* Palette canonique, socle S5.1. Liste fermee. */
  --encre:#1F2A28;
  --petrole-500:#2A5B54;
  --petrole-100:#E1ECEA;
  --petrole-300:#6E938C;
  --petrole-700:#1C3F3A;
  --petrole-900:#16332E;
  --ardoise:#5E6B66;
  --ligne:#E1E7E3;
  --surface:#FAFBFA;
  --surface-douce:#F4F7F5;
  --blanc:#FFFFFF;
  --ambre-500:#E0913A;
  --ambre-700:#8A5413;
  --ambre-100:#FBF1E2;
  --erreur:#B23A48;
  --erreur-100:#FBEAEC;
  --info:#25527A;
  --info-100:#EDF5FF;
  /* Deux jetons ajoutes pour le prospect, 1.4. Fonds profonds seulement. */
  --petrole-200:#9BBAB3;
  --canvas:#0F1E1B;

  /* Trois familles, 2.1. Aucune chasse fixe, S7.1. */
  --font-editorial:"Spectral",Georgia,serif;
  --font-title:"Space Grotesk","Plus Jakarta Sans",system-ui,sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;

  /* Echelle prospect, 2.3. Onze paliers. */
  --fs-display-xl:56px; --fs-display-l:44px; --fs-display-m:34px;
  --fs-title:26px; --fs-heading:20px; --fs-subheading:17px;
  --fs-lead:19px; --fs-body:17px; --fs-body-sm:15px;
  --fs-caption:13px; --fs-micro:12px;

  /* Plafonds de lecture, 2.4. En pixels, jamais en ch. */
  --max-prose:660px; --max-lead:620px; --max-titre:900px;
  --max-titre-accueil:1000px; --max-parole:720px; --max-legal:760px;

  /* Gabarit, 3.1. ECART ASSUME : le referentiel pose 1200 de contenu dans
     1248 avec une gouttiere de 24. On tient 1120 dans 1216 avec une gouttiere
     de 48, pour que le contenu ne soit pas colle au bord sur une page de
     lecture. La regle du fond de bord a bord et du contenu plafonne est
     inchangee. */
  --contenu:1120px; --conteneur:1216px; --gouttiere:48px;

  /* Espacement, socle S6.1 plus deux paliers prospect, 3.2. */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --space-24:96px; --space-32:128px; --space-40:160px;

  /* Rayons, socle S6.2. Trois crans, aucun quatrieme. */
  --r-control:8px; --r-card:12px; --r-full:9999px;

  /* Elevation, socle S6.3. Ombres douces et basses. */
  --el-card:0 1px 2px rgba(31,42,40,0.05);
  --el-raised:0 4px 12px rgba(31,42,40,0.08);
  --el-modal:0 10px 30px rgba(31,42,40,0.12);

  /* Motion, 6. */
  --motion-marque:750ms;
  --motion-courbe:cubic-bezier(0.22,0.61,0.36,1);
  --motion-etat:140ms;
  --motion-repli:180ms;
}

@media (max-width:640px){
  :root{
    --fs-display-xl:38px; --fs-display-l:32px; --fs-display-m:26px;
    --fs-title:22px; --fs-heading:19px; --fs-lead:17px; --fs-body:16px;
    --gouttiere:24px;
  }
}
@media (prefers-reduced-motion:reduce){
  :root{ --motion-marque:0ms; --motion-etat:0ms; --motion-repli:0ms; }
}

/* ============================ SOCLE ============================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{margin:0;background:var(--surface);color:var(--encre);
  font:400 var(--fs-body)/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

img,svg{max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0}
button{font:inherit}

/* Anneau de focus unique, socle S6.4. Sans exception. */
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(42,91,84,.35);border-radius:var(--r-control)}

/* Chiffres comparables verticalement, 2.5. */
.tabular{font-variant-numeric:tabular-nums}

/* Lien d'evitement, 9.2. */
.evitement{position:absolute;left:-9999px;top:0;z-index:200;background:var(--petrole-500);
  color:var(--blanc);padding:12px 18px;border-radius:var(--r-control);
  font:600 var(--fs-body-sm)/1 var(--font-body);text-decoration:none}
.evitement:focus{left:16px;top:16px}

/* Gabarit, 3.1. Un fond va de bord a bord, le contenu jamais. */
.conteneur{max-width:var(--conteneur);margin:0 auto;padding:0 var(--gouttiere)}

/* ====================== FONDS DE SECTION, 1.3 ====================== */
/* Quatre fonds et quatre seulement. Deux fonds identiques ne se suivent
   jamais. Un filet en ligne marque la jointure. */

/* Respiration. La marge haute et basse d'un bloc egale desormais la
   gouttiere du conteneur, a chaque palier : 48, 32, 24. Le cadre d'un
   bloc est donc uniforme sur ses quatre cotes.
   ECART au socle S6.1, qui fixe la fourchette prospect a 56 - 128 px.
   Les trois valeurs sont sous le plancher. Arbitrage du 19 aout 2026.
   A noter, l'egalite n'est visible qu'en dessous de 1216 px de fenetre.
   Au dela, l'espace lateral est donne par le centrage du conteneur et
   non par la gouttiere. */
section{padding:var(--gouttiere) 0}
@media (max-width:1000px){ :root{--gouttiere:32px} }
@media (max-width:640px){ :root{--gouttiere:24px} }

.fond-douce{background:var(--surface-douce);
  border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.fond-tint{background:var(--petrole-100);border-top:1px solid var(--ligne)}

/* ====================== TYPOGRAPHIE, 2 ====================== */

/* Spectral, 2.2. Jamais sous 28 px, jamais en corps, jamais sur un chiffre,
   jamais en 600 ni 700. Regular 400 sur clair, Medium 500 sur fond profond. */
.h-edito{font-family:var(--font-editorial);font-weight:400;
  letter-spacing:-.01em;text-wrap:balance}
@media (max-width:640px){ .h-edito{letter-spacing:0} }

.h-narratif{font-size:var(--fs-display-m);line-height:1.22;max-width:var(--max-titre)}
/* Medium 500 sur fond profond uniquement, pour compenser l'amincissement
   optique d'un serif en reversion, 2.2. */
.hero .h-edito,.fond-profond .h-edito{font-weight:500}
.fond-profond{background:var(--petrole-900);color:var(--blanc)}
.fond-profond .surtitre{color:var(--petrole-200)}
.fond-profond .chapo,.fond-profond .prose p{color:var(--petrole-200)}
.fond-profond .carte .surtitre{color:var(--ardoise)}
.fond-profond .carte p{color:var(--ardoise)}
.h-fonctionnel{font:600 var(--fs-title)/1.3 var(--font-title);color:var(--petrole-700);
  max-width:var(--max-titre)}
.h-carte{font:600 var(--fs-heading)/1.3 var(--font-title);color:var(--petrole-700)}

/* Surtitre, 2.6. Seul emploi de capitales du site, en ardoise. */
.surtitre{font:600 var(--fs-micro)/1 var(--font-body);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ardoise);margin:0 0 14px}

.chapo{font-size:var(--fs-lead);line-height:1.55;color:var(--ardoise);
  max-width:var(--max-lead);margin-top:18px}
.prose{max-width:var(--max-prose);margin-top:26px}
.prose p+p{margin-top:18px}
.prose strong{font-weight:600;color:var(--encre)}
@media (max-width:1000px){ .chapo{margin-top:16px} .prose{margin-top:24px} }
@media (max-width:640px){ .prose{margin-top:20px} .prose p+p{margin-top:16px} }

.legende{margin-top:16px;font:500 var(--fs-caption)/1.5 var(--font-body);color:var(--ardoise)}

/* Corps vers une figure ou un composant, 3.2. */
.apres-corps{margin-top:var(--space-12)}
@media (max-width:1000px){ .apres-corps{margin-top:40px} }
@media (max-width:640px){ .apres-corps{margin-top:var(--space-8)} }

/* ====================== HERO, 8.2 ====================== */
/* Fond petrole 900, h1 Spectral blanc, sous titre petrole 200,
   deux appels a l'action au maximum. */

/* Meme cadre uniforme que les autres blocs, ce qui raccourcit le hero
   de 64 px en bureau et le rapproche de la ligne de flottaison. */
.hero{position:relative;overflow:hidden;background:var(--petrole-900);color:var(--blanc);
  padding:var(--gouttiere) 0}

.hero h1{font-size:var(--fs-display-l);line-height:1.16;max-width:var(--max-titre)}
#accueil .hero h1{font-size:var(--fs-display-xl);line-height:1.12;max-width:var(--max-titre-accueil)}
.hero .chapo{color:var(--petrole-200)}
.hero .reassurance{margin-top:18px;font-size:var(--fs-micro);line-height:1.6;
  color:var(--petrole-200);max-width:var(--max-lead)}
.hero-prose{margin-top:18px;max-width:var(--max-prose);
  font-size:var(--fs-body);line-height:1.6;color:var(--petrole-200)}
.hero-prose p+p{margin-top:14px}
.hero .surtitre{color:var(--petrole-200)}
.accroche-hero{color:var(--blanc);font-weight:600}
.nowrap{white-space:nowrap}

/* Aiguillage vers la troisieme cible, une ligne, glyphe de direction en tete. */
.aiguillage{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:20px;
  font:600 var(--fs-body-sm)/1.4 var(--font-body);color:var(--blanc);text-decoration:none;
  }
.aiguillage:hover{color:var(--petrole-200)}
.aiguillage svg{flex:none;width:18px;height:18px}
.hero .reassurance a{color:var(--blanc)}
.hero .reassurance strong{color:var(--blanc);font-weight:600}

/* Grille de deux colonnes, 3.3. Passe a une colonne sous 900 px,
   le texte au dessus. */
.hero-grille{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:start}
@media (max-width:900px){ .hero-grille{grid-template-columns:1fr;gap:var(--space-8)} }

/* Device du dossier en fond de hero, 5.2. Opacite maximale de 8 pour cent
   sur fond profond, jamais derriere un paragraphe. */
.device-hero{position:absolute;right:-50px;top:24px;width:400px;height:auto;
  opacity:.06;color:var(--blanc);pointer-events:none}
@media (max-width:1000px){ .device-hero{display:none} }
.device-hero rect{fill:currentColor;
  transition:transform var(--motion-marque) var(--motion-courbe)}
.device-hero.ordonne rect{transform:translate(0,0)!important}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--space-8)}
@media (max-width:640px){ .actions{flex-direction:column;align-items:stretch} }

/* ====================== BOUTONS, 8.12 ====================== */
/* Trois variantes de fond clair et deux de fond profond.
   Aucun bouton en ambre, aucun bouton en rouge, aucun glyphe seul. */

.btn{display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 18px;border-radius:var(--r-control);
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  font:600 var(--fs-body-sm)/1 var(--font-body);white-space:nowrap;
  transition:background var(--motion-etat),border-color var(--motion-etat),color var(--motion-etat)}
.btn.grand{height:48px;padding:0 22px}
.primaire{background:var(--petrole-500);color:var(--blanc)}
.primaire:hover{background:var(--petrole-700)}
.contour{background:transparent;border-color:var(--petrole-500);color:var(--petrole-500)}
.contour:hover{background:var(--petrole-100)}
.clair{background:var(--blanc);color:var(--petrole-700)}
.clair:hover{background:var(--petrole-100)}
.fantome{background:transparent;border-color:rgba(255,255,255,.45);color:var(--blanc)}
.fantome:hover{border-color:var(--blanc);background:rgba(255,255,255,.06)}
@media (max-width:640px){ .actions .btn{width:100%} }

/* Lien nomme, cible tactile de 44 px, socle S6.4. */
.lien-nomme{display:inline-flex;align-items:center;min-height:44px;
  font:600 var(--fs-body-sm)/1.4 var(--font-body);color:var(--petrole-500);
  text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start}
.lien-nomme:hover{color:var(--petrole-700)}
.sur-profond .lien-nomme{color:var(--blanc)}

/* ============ EN-TETE DE SECTION, DEUX COLONNES ============ */
/* Le vide a droite d'une colonne de prose ne se comble ni par un
   centrage, qui affaiblit l'alignement strict du 0.2, ni par une
   illustration, que le 7.1 n'autorise pas. Le titre passe a gauche,
   le chapeau ou la prose a droite. Grille du 3.3, deux colonnes
   egales, une colonne sous 900 px avec le titre au dessus. */

.en-tete{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:start}
@media (max-width:900px){ .en-tete{grid-template-columns:1fr;gap:var(--space-4)} }
.en-tete .h-narratif,.en-tete .h-fonctionnel{max-width:100%}
.en-tete .chapo,.en-tete .prose{max-width:100%;margin-top:0}
.en-tete .prose p+p{margin-top:18px}
.en-tete>div>*+*{margin-top:20px}
/* Un titre suivi d'une prose dans la meme colonne respire davantage
   que deux paragraphes, la regle du 3.2 sur les intervalles. */
.en-tete>div>:is(h2,h3)+.prose{margin-top:28px}
/* Variante a trois enfants : titre, prose, actions. En bureau l'appel
   se pose sous le titre, la prose enjambe les deux rangees. En replie
   l'ordre du DOM reprend et l'appel passe apres la prose. */
.en-tete.avec-actions .actions{margin-top:28px}
/* En replie, la colonne de gauche s'efface de la mise en forme, ses
   enfants deviennent des cellules de la grille et l'appel a l'action
   passe derriere la prose sans toucher a l'ordre du DOM. */
@media (max-width:900px){
  .en-tete.avec-actions>div:first-child{display:contents}
  .en-tete.avec-actions>div:first-child>.actions{order:3;margin-top:24px}
  .en-tete.avec-actions>div:nth-child(2){order:2}
}
.en-tete .surtitre{margin-bottom:0}
/* La colonne de droite descend de la hauteur du surtitre plus son
   intervalle, pour que le premier mot tombe sur la ligne du titre. */
@media (min-width:901px){
  .en-tete>div:first-child:has(.surtitre)+div{margin-top:28px}
}
@media (max-width:900px){ .en-tete .chapo{margin-top:16px} }

/* ====================== ENCART ====================== */
/* Conteneur borde pour un propos qui se detache de la prose courante.
   Meme facture qu'une carte du 8.4, sans en etre une. */

.encart{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-card);
  padding:26px 30px;box-shadow:var(--el-card);max-width:var(--max-titre)}
.encart p{max-width:var(--max-prose)}
.encart p+p{margin-top:16px}
.encart strong{font-weight:600;color:var(--encre)}
.encart.pleine{max-width:none}
.encart.pleine p{max-width:var(--max-prose);margin-left:auto;margin-right:auto;text-align:center}
.encart.sombre{background:var(--petrole-700);border-color:var(--petrole-500);box-shadow:none}
.encart.sombre p{color:var(--petrole-100)}
.encart.sombre strong{color:var(--blanc)}
@media (max-width:640px){ .encart{padding:22px} }

/* ====================== CARTE, 8.4 ====================== */
/* Ni glyphe en tete, ni numero, ni image. Jamais cliquable en entier. */

.carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-card);
  padding:26px;box-shadow:var(--el-card);display:flex;flex-direction:column;gap:10px}
.carte h3{margin:0}
.carte p{font-size:var(--fs-body-sm);line-height:1.6;color:var(--ardoise)}
.carte .surtitre{margin:0}
.carte .lien-nomme{margin-top:auto}

/* Carte cliquable dans son ensemble, ecart au 8.4 et au 8.17. */
.carte-lien{position:relative;
  transition:border-color var(--motion-etat),box-shadow var(--motion-etat)}
.carte-lien:hover{border-color:var(--petrole-500);box-shadow:var(--el-raised)}
.carte-lien:focus-within{box-shadow:0 0 0 3px rgba(42,91,84,.35)}
.carte-lien .lien-nomme{border-bottom-color:transparent;gap:10px}
.carte-lien:hover .lien-nomme{color:var(--petrole-700)}
.carte-lien .lien-nomme:after{content:"";position:absolute;inset:0;border-radius:var(--r-card)}
.carte-lien .lien-nomme svg{flex:none;width:18px;height:18px;
  transition:transform var(--motion-etat)}
.carte-lien:hover .lien-nomme svg{transform:translateX(4px)}
.carte-lien .lien-nomme:focus-visible{box-shadow:none}

/* Grilles admises, 3.3. Gouttiere de 20 px. */
.grille3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:1000px){ .grille3{grid-template-columns:1fr} }
.grille2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:900px){ .grille2{grid-template-columns:1fr} }

/* ====================== FRISE DE SEQUENCE, 8.18 ====================== */
/* Quatre jalons au maximum. Le socle est sous la sequence et jamais dedans. */

.frise{margin:0}
.frise ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:20px}
.frise.trois ol{grid-template-columns:repeat(3,1fr)}
.frise li{position:relative;border-top:2px solid var(--petrole-100);padding-top:20px}
.frise li:before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;
  border-radius:var(--r-full);background:var(--petrole-500)}
.frise li b{display:block;font:600 var(--fs-subheading)/1.35 var(--font-title);
  color:var(--petrole-700);margin-bottom:6px}
.frise li span{display:block;font-size:var(--fs-body-sm);line-height:1.6;color:var(--ardoise)}
/* Le socle etait un aplat petrole 500 a coins arrondis, donc la valeur
   d'action unique de l'invariant 5 posee en pleine largeur : il se lisait
   comme un bouton. Il devient la ligne de cloture de la frise, filet
   superieur de meme facture que ses colonnes mais plus dense, ce qui dit
   la hierarchie sans emprunter le vocabulaire d'un controle. */
.frise .socle{margin-top:var(--space-8);padding-top:22px;
  border-top:2px solid var(--petrole-500)}
.frise .socle b{display:block;font:600 var(--fs-subheading)/1.35 var(--font-title);
  color:var(--petrole-700)}
.frise .socle span{display:block;margin-top:8px;font-size:var(--fs-body-sm);
  line-height:1.6;color:var(--ardoise);max-width:var(--max-prose)}
@media (max-width:900px){
  .frise ol,.frise.trois ol{grid-template-columns:1fr;gap:0}
  .frise li{border-top:0;border-left:2px solid var(--petrole-100);
    padding:0 0 24px 22px}
  .frise li:before{top:2px;left:-6px}
  .frise li:last-child{padding-bottom:0;border-left-color:transparent}
}

/* ====================== BLOC DE LIMITE, 8.9 ====================== */
/* Une fois par page au maximum. Aucun appel a l'action, aucun glyphe,
   aucun ambre. */

.limite{background:var(--petrole-900);border-radius:var(--r-card);padding:48px 44px;
  color:var(--blanc)}
.limite h2{font-family:var(--font-editorial);font-weight:400;font-size:var(--fs-display-m);
  line-height:1.22;letter-spacing:-.01em;max-width:var(--max-titre);text-wrap:balance}
.limite p{margin-top:22px;color:var(--petrole-200);max-width:var(--max-prose)}
.limite .en-tete>div>p:first-child{margin-top:0}
.limite .appui{margin-top:28px;font-family:var(--font-editorial);font-weight:500;
  font-size:24px;line-height:1.3;color:var(--blanc);max-width:var(--max-prose)}
@media (max-width:640px){ .limite{padding:var(--space-8) var(--space-6)} }

/* ====================== PAROLE RESTITUEE, 8.6 ====================== */
/* Aucune note, aucune etoile, aucun portrait. */

.parole{margin:0;background:var(--blanc);border-left:2px solid var(--petrole-500);
  padding:28px;max-width:var(--max-parole);border-radius:0 var(--r-card) var(--r-card) 0}
.parole blockquote{margin:0;font-family:var(--font-editorial);font-style:italic;
  font-weight:400;font-size:28px;line-height:1.35;color:var(--encre)}
.parole figcaption{margin-top:16px;font-size:var(--fs-body-sm);color:var(--ardoise)}

/* ====================== TABLEAU DE TARIFS, 8.8 ====================== */
/* Aucune formule mise en avant, aucun bandeau, aucune colonne surelevee.
   Les conditions d'extinction vivent dans le pied du tableau. */

.tarifs{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-card);
  overflow:hidden;max-width:var(--max-legal)}
.tarifs table{width:100%;border-collapse:collapse}
.tarifs th{background:var(--surface-douce);text-align:left;
  font:600 var(--fs-micro)/1.4 var(--font-body);letter-spacing:.02em;color:var(--ardoise);
  padding:14px 20px;border-bottom:1px solid var(--ligne)}
.tarifs td{padding:16px 20px;border-bottom:1px solid var(--ligne);
  font-size:var(--fs-body-sm);color:var(--encre)}
.tarifs .num{text-align:right;font-variant-numeric:tabular-nums}
.tarifs tbody tr:hover{background:var(--surface-douce)}
.tarifs tfoot td{border-bottom:0;background:var(--blanc);color:var(--ardoise);
  font-size:var(--fs-body-sm);line-height:1.6}

/* Enonce de tarif hors tableau, une seule valeur. Le chiffre n'est jamais
   en Spectral, 2.2. */
.montant{font:700 var(--fs-title)/1.2 var(--font-body);color:var(--petrole-700);
  font-variant-numeric:tabular-nums}
.montant small{font:400 var(--fs-body)/1.4 var(--font-body);color:var(--ardoise)}
.liste-faits{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px;
  max-width:var(--max-prose)}
.liste-faits li{display:flex;gap:12px;font-size:var(--fs-body-sm);line-height:1.6}
.liste-faits li svg{flex:none;width:16px;height:16px;margin-top:5px;color:var(--petrole-500)}
.conditions{margin-top:22px;padding-top:18px;border-top:1px solid var(--ligne);
  font-size:var(--fs-micro);line-height:1.65;color:var(--ardoise);max-width:var(--max-prose)}

/* ============== TABLEAU EDITORIAL DE DONNEES ============== */
/* Meme motif visuel que le tableau de tarifs, 8.8 : cadre, en-tete en
   surface douce, filet entre les lignes. Deux differences, la largeur
   suit le conteneur au lieu de --max-legal, parce que quatre colonnes de
   prose ne tiennent pas dans 760 px, et la premiere cellule de chaque
   ligne est un `th` de ligne, ce qui nomme la ligne au lecteur d'ecran.
   Sous 900 px, chaque ligne se replie en bloc et chaque cellule affiche
   son intitule, tire de `data-libelle`. Le defilement horizontal a ete
   ecarte volontairement : c'est un document auquel les conditions
   generales renvoient, il doit se lire au telephone sans geste lateral.
   ECART : composant absent du 8, a inscrire au registre. */

.tableau-legal{background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--r-card);overflow:hidden}
.tableau-legal table{width:100%;border-collapse:collapse}
.tableau-legal th{text-align:left;font:600 var(--fs-micro)/1.4 var(--font-body);
  letter-spacing:.02em;color:var(--ardoise);padding:14px 20px;
  border-bottom:1px solid var(--ligne)}
.tableau-legal thead th{background:var(--surface-douce);vertical-align:bottom}
.tableau-legal tbody th{font:600 var(--fs-body-sm)/1.5 var(--font-body);
  color:var(--encre);padding:16px 20px;vertical-align:top}
.tableau-legal td{padding:16px 20px;border-bottom:1px solid var(--ligne);
  font-size:var(--fs-body-sm);line-height:1.6;color:var(--encre);vertical-align:top}
.tableau-legal tbody tr:last-child th,
.tableau-legal tbody tr:last-child td{border-bottom:0}
.tableau-legal tbody tr:hover{background:var(--surface-douce)}

@media (max-width:900px){
  /* Sorti du rendu, pas de l'arbre d'accessibilite : `display:none` sur
     l'en-tete retirerait l'association de colonne. */
  .tableau-legal thead{position:absolute;left:-9999px}
  .tableau-legal tbody tr{display:block;border-bottom:1px solid var(--ligne);padding:6px 0}
  .tableau-legal tbody tr:last-child{border-bottom:0}
  .tableau-legal tbody tr:hover{background:transparent}
  .tableau-legal tbody th,
  .tableau-legal tbody td{display:block;border-bottom:0;padding:6px 20px}
  .tableau-legal tbody th{padding-top:16px;font-size:var(--fs-body)}
  .tableau-legal tbody td:last-child{padding-bottom:16px}
  .tableau-legal tbody td::before{content:attr(data-libelle);display:block;
    font:600 var(--fs-micro)/1.4 var(--font-body);letter-spacing:.02em;
    color:var(--ardoise);margin-bottom:2px}
}

/* Legende de tableau, nommee pour les lecteurs d'ecran et retiree du
   rendu visuel. Jamais `display:none`, qui la retirerait aussi de
   l'arbre d'accessibilite, 9.2. */
.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}

/* ====================== FAQ, 8.10 ====================== */
/* Liste de details, filet entre chaque, aucun conteneur en carte,
   aucun element ouvert par defaut. */

.faq{max-width:820px;border-top:1px solid var(--ligne)}
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:20px;align-items:center;
  justify-content:space-between;padding:20px 0;min-height:44px;
  font:600 var(--fs-heading)/1.35 var(--font-title);color:var(--petrole-700)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;width:18px;height:18px;color:var(--petrole-300);
  transition:transform var(--motion-repli)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .reponse{padding:0 0 22px;color:var(--ardoise);max-width:var(--max-prose)}
.faq-groupe{margin-top:var(--space-12)}
.faq-groupe:first-of-type{margin-top:var(--space-8)}

/* ====================== FORMULAIRE, 8.13 ====================== */
/* Champs obligatoires marques par un mot, jamais par un asterisque seul.
   Mention de traitement des donnees obligatoire sous le formulaire. */

.formulaire{max-width:560px}
.champ{margin-bottom:18px}
.champ label{display:block;margin-bottom:8px;
  font:600 var(--fs-body-sm)/1.4 var(--font-body);color:var(--ardoise)}
.champ input,.champ select,.champ textarea{width:100%;height:48px;
  border:1px solid var(--ligne);border-radius:var(--r-control);padding:0 14px;
  background:var(--blanc);color:var(--encre);
  font:400 var(--fs-body)/1.5 var(--font-body)}
.champ textarea{height:auto;min-height:140px;padding:12px 14px;resize:vertical}
.champ input::placeholder,.champ textarea::placeholder{color:var(--ardoise)}
.ligne2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){ .ligne2{grid-template-columns:1fr} }
.mention{margin-top:16px;font-size:var(--fs-caption);line-height:1.6;color:var(--ardoise);
  max-width:var(--max-prose)}
.mention a{color:var(--petrole-700)}

/* Formulaire court en carte, variante du 8.13. Champ et bouton empiles. */
.form-court{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.form-court label{font:600 var(--fs-body-sm)/1.4 var(--font-body);color:var(--ardoise)}
.form-court input{height:48px;border:1px solid var(--ligne);border-radius:var(--r-control);
  padding:0 14px;font:400 var(--fs-body)/1.5 var(--font-body);color:var(--encre);
  background:var(--blanc);width:100%}
.form-court .mention{margin-top:2px}

/* ====================== BANDEAU FINAL, 8.11 ====================== */
/* Une occurrence par page au maximum, aucune sur l'accueil qui oriente
   au lieu de convertir, 8.17. Un seul bouton. */

.bandeau-final h2{max-width:560px}
.bandeau-final p{margin-top:14px;color:var(--petrole-700);max-width:var(--max-prose)}
.bandeau-final .actions{margin-top:var(--space-6)}

/* ====================== BARRE DE NAVIGATION, 8.1 ====================== */
/* Hauteur 64 px, 56 sous 768 px. Le lockup est nu, sans devise.
   Un seul appel a l'action, aucun selecteur de langue. */

.entete{position:sticky;top:0;z-index:100;background:rgba(250,251,250,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--ligne)}
.entete .in{max-width:var(--conteneur);margin:0 auto;padding:0 var(--gouttiere);
  min-height:64px;display:flex;align-items:center;gap:26px}
@media (max-width:768px){ .entete .in{min-height:56px} }
.logo{display:inline-flex;align-items:center;flex:none}
.logo img{display:block;height:34px;width:auto}
.pousse{flex:1}
.nav-site{display:flex;align-items:center;gap:22px}
.nav-liens{display:flex;align-items:center;gap:4px}
/* Deux entrees n'existent que dans le panneau replie, la barre de
   bureau restant a quatre liens comme l'exige le 8.1. */
.nav-lien.nav-replie{display:none}
.nav-lien{display:inline-flex;align-items:center;height:36px;padding:0 12px;
  border-radius:var(--r-control);background:transparent;
  font:600 13px/1 var(--font-body);color:var(--ardoise);text-decoration:none;
  transition:background var(--motion-etat),color var(--motion-etat)}
.nav-lien:hover{background:var(--surface-douce);color:var(--encre)}
.nav-lien[aria-current="page"]{background:var(--petrole-100);color:var(--encre)}
/* Lien de connexion, meme facture que dans l'application. Ce n'est pas un
   second appel a l'action au sens du 8.1, c'est un lien nomme. */
.lien-connexion{display:inline-flex;align-items:center;min-height:44px;
  font:600 13px/1 var(--font-body);color:var(--petrole-700);text-decoration:none;
  border-bottom:1px solid var(--ligne);transition:border-color var(--motion-etat)}
.lien-connexion:hover{border-bottom-color:var(--petrole-700)}

.btn-menu{display:none;align-items:center;gap:8px;height:44px;padding:0 14px;
  border:1px solid var(--ligne);border-radius:var(--r-control);background:transparent;
  color:var(--petrole-700);font:600 var(--fs-body-sm)/1 var(--font-body);cursor:pointer}
.btn-menu:hover{border-color:var(--petrole-500)}
.btn-menu svg{width:16px;height:16px}

@media (max-width:1000px){
  .btn-menu{display:inline-flex}
  .nav-site{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--surface);
    border-bottom:1px solid var(--ligne);box-shadow:var(--el-raised);
    padding:8px var(--gouttiere) 20px}
  .nav-site[data-ouvert="oui"]{display:flex}
  .nav-liens{flex-direction:column;align-items:stretch;gap:0}
  /* Le panneau ne porte que de la navigation. Le lien de connexion
     sort, il vit dans le bandeau d'acces du pied. L'appel contextuel
     sort aussi, il vit dans la barre basse fixe. */
  .nav-site .lien-connexion,.nav-site .cta-barre{display:none}
  .nav-lien.nav-replie{display:inline-flex}
  .nav-lien{height:48px;padding:0 12px;border-radius:0;background:transparent;
    border-bottom:1px solid var(--ligne);font-size:var(--fs-body);
    border-left:2px solid transparent}
  /* Le filet de la derniere entree ne separe rien et doublait le filet
     bas du panneau, a 20 px au dessus de lui. */
  .nav-liens .nav-lien:last-child{border-bottom:0}
  .nav-lien:hover{background:var(--surface-douce)}
  .nav-lien[aria-current="page"]{background:transparent;color:var(--petrole-700);
    border-left-color:var(--petrole-500)}
}


/* ============ BARRE D'APPEL BASSE, mobile et tablette ============ */
/* ECART : composant absent de la bibliotheque du 8. Motif, sous 1000 px
   l'appel contextuel du 8.1 disparaissait de la barre haute, faute de
   place a cote du lockup et du bouton nomme. Un seul appel, celui de la
   page courante, jamais deux. Le corps gagne une reserve basse pour que
   le pied ne passe pas sous la barre. */
.barre-appel{display:none}
@media (max-width:1000px){
  .barre-appel{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:rgba(250,251,250,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--ligne);
    padding:10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom));
    transform:translateY(110%);
    transition:transform var(--motion-repli) var(--motion-courbe)}
  .barre-appel[data-visible="oui"]{transform:none}
  .barre-appel:not([data-visible="oui"]) .btn{visibility:hidden}
  .barre-appel .btn{width:100%;height:48px}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* ============ CONCLUSION DE SECTION, grille du 3.3 ============ */
/* Meme grille que l'en-tete de section, posee en bas de bloc.
   L'affirmation a gauche en editorial, la demonstration a droite en
   prose. Remplace un conteneur borde a texte centre, qui mettait la
   conclusion au meme rang que les cartes qu'elle conclut et posait le
   seul texte centre de la page, contraire au 0.2. */
.mot-bloc{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:start}
@media (max-width:900px){ .mot-bloc{grid-template-columns:1fr;gap:var(--space-4)} }
.mot-bloc .prose{max-width:100%;margin-top:0}

/* ====================== PIED DE PAGE, 8.14 ====================== */
/* Fond canvas, lockup en reversion blanche, devise en dessous,
   fragment de device en signature. */

/* Fond et calibres releves sur app-test.homelinker.fr le 19 aout 2026 :
   fond #16332E soit petrole 900, lockup 190 x 51 px, filets blancs a
   15 pour cent, 64 px en haut et 40 px en bas. */
.pied{background:var(--petrole-900);color:var(--petrole-200);padding:var(--space-16) 0 40px}

/* Bandeau d'acces, deux volets separes par un filet. Chaque volet porte
   un titre d'action et son propre appel principal, parce qu'il s'adresse
   a un public dont la porte d'entree differe. */
.pied-acces{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);
  padding-bottom:var(--space-12);margin-bottom:var(--space-12);
  border-bottom:1px solid rgba(255,255,255,.15)}
.pied-acces>div+div{padding-left:var(--space-12);
  border-left:1px solid rgba(255,255,255,.15)}
@media (max-width:900px){
  .pied-acces{grid-template-columns:1fr;gap:var(--space-8);
    padding-bottom:var(--space-8);margin-bottom:var(--space-8)}
  .pied-acces>div+div{padding-left:0;border-left:0;
    padding-top:var(--space-8);border-top:1px solid rgba(255,255,255,.15)}
}
/* Les deux volets n'ont pas la meme longueur de texte. Colonne flex et
   actions poussees en bas, sinon les boutons se decalent verticalement
   des que la phrase de droite passe sur deux lignes. */
.acces-volet{display:flex;flex-direction:column}
.acces-tete{font:600 var(--fs-heading)/1.3 var(--font-title);color:var(--blanc)}
.acces-texte{margin-top:8px;font-size:var(--fs-body-sm);line-height:1.55;
  color:var(--petrole-200);max-width:none}
.acces-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:20px}
@media (max-width:640px){ .acces-actions{flex-direction:column} .acces-actions .btn{width:100%} }

.pied-grille{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;
  padding-bottom:var(--space-8)}
@media (max-width:1000px){ .pied-grille{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .pied-grille{grid-template-columns:1fr;gap:var(--space-8)} }
.pied-marque{max-width:380px}
@media (max-width:1000px){ .pied-marque{grid-column:1/-1} }
.pied-logo img{display:block;height:51px;width:auto;filter:brightness(0) invert(1)}
.pied .devise{margin-top:14px;font:700 var(--fs-body)/1.5 var(--font-body);color:var(--blanc)}
.pied .intro{margin-top:16px;font-size:var(--fs-body-sm);line-height:1.65;color:var(--petrole-200)}
.pied .intro a{color:var(--blanc);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.pied .intro a:hover{border-bottom-color:var(--blanc)}
.pied-col .tete{margin:0 0 14px;font:600 var(--fs-micro)/1.4 var(--font-body);
  letter-spacing:.02em;color:var(--petrole-200);text-transform:none}
.pied-col .tete-sec{margin-top:26px}
.pied-col a{display:inline-flex;align-items:center;min-height:44px;padding:10px 0;
  margin:-6px 0;
  font-size:var(--fs-body-sm);line-height:1.45;color:rgba(255,255,255,.8);text-decoration:none}
.pied-col a:hover{color:var(--blanc)}
.pied-col nav{display:flex;flex-direction:column}
.pied-bas{padding-top:22px;border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-wrap:wrap;gap:0 32px;align-items:center;justify-content:space-between;
  font-size:var(--fs-caption);color:var(--petrole-200)}
.pied-bas nav{display:flex;flex-wrap:wrap;gap:0 26px}
.pied-bas a{display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid transparent}
.pied-bas a:hover{border-bottom-color:var(--petrole-200)}
.pied-bas a{color:var(--petrole-200);text-decoration:none}
.pied-bas a:hover{color:var(--blanc)}

/* ====================== ROUTAGE DE MAQUETTE ====================== */

.page{display:none}
.page.active{display:block}

/* ====== APERCU PRODUIT, styles repris de la maquette v16 ====== */
/* Aperçu produit interactif, mini maquettes fidèles à l'application. */
.preview-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.preview-tabs button{height:42px;padding:0 16px;border:1px solid var(--ligne);border-radius:var(--r-full);background:var(--blanc);font:600 var(--fs-body-sm)/1 var(--font-body);color:var(--ardoise);cursor:pointer}
.preview-tabs button[aria-selected="true"]{background:var(--petrole-100);border-color:var(--petrole-500);color:var(--petrole-700)}
.preview-copy{margin-top:16px;max-width:760px;color:var(--ardoise);font-size:var(--fs-body-sm)}
.product-frame{margin-top:20px;border:1px solid var(--ligne);border-radius:var(--r-card);overflow:hidden;background:var(--surface);box-shadow:var(--el-modal)}
.product-frame .chrome{height:38px;background:var(--surface-douce);border-bottom:1px solid var(--ligne);display:flex;align-items:center;gap:8px;padding:0 14px}
.product-frame .chrome i{width:9px;height:9px;border-radius:50%;background:var(--ligne)}
.product-frame .chrome span{margin-left:10px;font-size:var(--fs-caption);color:var(--ardoise)}
.product-viewport{position:relative;background:var(--surface);padding:28px;font-size:13px}
.mini-view[hidden]{display:none}
.mv-h2{margin:0 0 4px;font:700 20px/1.25 var(--font-title);color:var(--encre)}
.mv-lead{margin:0 0 22px;color:var(--ardoise);font-size:14px;max-width:640px}

/* Tuiles du tableau de bord, cliquables */
.mv-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.mv-tile{border:1px solid var(--ligne);border-radius:var(--r-control);background:var(--blanc);padding:16px;display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;font-family:inherit}
.mv-tile[aria-pressed="true"]{background:var(--petrole-100);border-color:var(--petrole-500)}
.mv-tile-n{font:700 24px/1 var(--font-body);color:var(--petrole-700);font-variant-numeric:tabular-nums}
.mv-tile-l{font-size:11px;color:var(--ardoise)}
.mv-dash-panel[hidden]{display:none}
.mv-dash-panel{border-top:1px solid var(--ligne);padding-top:20px}
.mv-dash-panel h3{margin:0 0 4px;font:700 18px/1.3 var(--font-title);color:var(--encre)}
.mv-dash-panel .mv-lead{margin-bottom:16px}

/* Tables génériques */
.mv-table-wrap{overflow-x:auto;border:1px solid var(--ligne);border-radius:var(--r-control)}
.mv-table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
.mv-table th{text-align:left;font:600 11px/1 var(--font-body);letter-spacing:.02em;color:var(--ardoise);border-bottom:1px solid var(--ligne);padding:10px 12px;background:var(--surface-douce)}
.mv-table td{padding:12px;border-bottom:1px solid var(--ligne);color:var(--encre);vertical-align:middle;font-size:13px}
.mv-table tr:last-child td{border-bottom:0}
.mv-table tr.mv-row-clos{opacity:.55}
.mv-num{font-variant-numeric:tabular-nums}
.mv-muted{color:var(--ardoise)}
.mv-sub-cell{display:block;color:var(--ardoise);font-size:11px;margin-top:2px}

.mv-annonce-cell{display:flex;align-items:center;gap:10px;white-space:normal}
.mv-thumb{width:36px;height:36px;border-radius:8px;background:var(--surface-douce);border:1px solid var(--ligne);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--ardoise)}
.mv-annonce-cell b{font-weight:600}

.mv-link{background:none;border:0;padding:0;font:600 13px/1.3 var(--font-body);color:var(--petrole-700);cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:transparent}
.mv-link:hover{text-decoration-color:var(--petrole-700)}
button.mv-num-link{background:none;border:0;padding:0;font:600 13px/1 var(--font-body);color:var(--petrole-700);cursor:pointer;text-decoration:underline}

.mv-pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border:1px solid var(--ligne);border-radius:var(--r-full);font:600 11px/1 var(--font-body);color:var(--ardoise);background:var(--blanc);white-space:nowrap}
.mv-pill-strong{background:var(--petrole-100);border-color:transparent;color:var(--petrole-700)}
.mv-msg-flag{display:block;margin-top:3px;color:var(--petrole-700);font-weight:600;font-size:11px}

.mv-action-btn{height:32px;padding:0 12px;border:1px solid var(--ligne);border-radius:var(--r-full);background:var(--blanc);font:600 12px/1 var(--font-body);color:var(--encre);cursor:pointer;white-space:nowrap}
.mv-action-btn:hover{border-color:var(--ardoise)}
.mv-action-btn.primaire{background:var(--petrole-700);border-color:var(--petrole-700);color:var(--blanc)}
.mv-decide{display:flex;gap:6px}
.mv-decide button{width:30px;height:30px;border-radius:var(--r-full);border:1px solid var(--ligne);background:var(--blanc);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--ardoise)}
.mv-decide button:hover{border-color:var(--ardoise);color:var(--encre)}
.mv-decide button.ok:hover{border-color:var(--petrole-500);color:var(--petrole-700)}

.mv-empty{border:1px solid var(--ligne);border-radius:var(--r-control);padding:34px 20px;text-align:center;color:var(--ardoise)}
.mv-empty b{display:block;color:var(--encre);font-size:14px;margin-bottom:4px}

/* Annonces */
.mv-status-line{display:flex;align-items:center;gap:6px;border:1px solid var(--ligne);border-radius:var(--r-control);background:var(--blanc);padding:10px 14px;font-size:12px;color:var(--ardoise);margin-bottom:18px;flex-wrap:wrap}
.mv-status-line b{color:var(--encre)}
.mv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;align-items:center}
.mv-chip{height:32px;padding:0 12px;border:1px solid var(--ligne);border-radius:var(--r-full);background:var(--blanc);font:600 12px/1 var(--font-body);color:var(--ardoise);cursor:pointer;white-space:nowrap}
.mv-chip[aria-pressed="true"]{background:var(--petrole-100);border-color:var(--petrole-500);color:var(--petrole-700)}
.mv-chip.mv-search{color:var(--ardoise);cursor:default;font-weight:500}
.mv-select{height:32px;padding:0 10px;border:1px solid var(--ligne);border-radius:var(--r-full);background:var(--blanc);font:600 12px/1 var(--font-body);color:var(--ardoise);cursor:pointer}
.mv-ext{color:var(--ardoise);cursor:pointer;background:none;border:0;padding:2px}
.mv-ext:hover{color:var(--petrole-700)}

/* Profils reçus */
.mv-annonce-head{margin-bottom:16px}
.mv-annonce-head h3{margin:0 0 4px;font:700 18px/1.3 var(--font-title);color:var(--encre)}
.mv-foot-row{display:flex;justify-content:space-between;align-items:center;padding:12px;font-size:12px;color:var(--ardoise);border-top:0}
.mv-foot-row button{background:none;border:0;padding:0;color:var(--petrole-700);font:600 12px/1 var(--font-body);cursor:pointer;text-decoration:underline}

/* Profil détaillé */
.mv-panel{max-width:760px}
.mv-panel[hidden]{display:none}
.mv-panel-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.mv-avatar{width:44px;height:44px;border-radius:50%;background:var(--petrole-100);color:var(--petrole-700);display:flex;align-items:center;justify-content:center;font:700 15px/1 var(--font-title);flex:0 0 auto}
.mv-panel-head h4{margin:0 0 3px;font:700 18px/1.3 var(--font-title);color:var(--encre)}
.mv-panel-sub{margin:0;color:var(--ardoise);font-size:11px}
.mv-flag{display:inline-flex;align-items:center;gap:5px;color:var(--ambre-700,#8A5413);font-size:12px;font-weight:600;margin-bottom:2px}
.mv-flag i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}

.mv-card{border:1px solid var(--ligne);border-radius:var(--r-control);margin-bottom:16px;overflow:hidden}
.mv-card-h{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--surface-douce);border-bottom:1px solid var(--ligne);font:600 12px/1 var(--font-body);color:var(--ardoise)}
.mv-card-h .mv-ratio{color:var(--petrole-700);font-weight:700}
.mv-card-b{padding:14px}
.mv-tenant{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--ligne)}
.mv-tenant:last-of-type{border-bottom:0}
.mv-tenant-name{font-weight:600;color:var(--encre);font-size:13px}
.mv-tenant-name span{margin-left:6px;font-weight:500;color:var(--ardoise);font-size:11px}
.mv-tenant-tags{margin-top:3px;display:flex;gap:6px}
.mv-tenant-income{font-weight:600;color:var(--encre);font-size:13px;text-align:right}
.mv-tenant-income small{display:block;color:var(--ardoise);font-weight:500;font-size:11px}
.mv-total-row{display:flex;justify-content:space-between;padding-top:10px;margin-top:4px;border-top:1px solid var(--ligne);font-size:12px;color:var(--ardoise)}
.mv-total-row b{color:var(--encre)}
.mv-quote{margin:0 0 12px;padding:10px 12px;background:var(--surface-douce);border-radius:8px;font-size:13px}
.mv-quote span{display:block;font-size:11px;color:var(--ardoise);font-weight:600;margin-bottom:3px}
.mv-kv-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--ligne);font-size:13px}
.mv-kv-row:last-child{border-bottom:0}
.mv-kv-row dt{color:var(--ardoise);font-weight:500}
.mv-kv-row dd{margin:0;color:var(--encre);font-weight:600;text-align:right}
.mv-dossier-empty{color:var(--ardoise);font-size:13px}
.mv-doc-group{border-top:1px solid var(--ligne)}
.mv-doc-group:first-child{border-top:0}
.mv-doc-group-h{width:100%;display:flex;justify-content:space-between;align-items:center;padding:10px 0;background:none;border:0;cursor:pointer;font:600 12px/1 var(--font-body);color:var(--encre)}
.mv-doc-group-h span{color:var(--ardoise);font-weight:500;font-size:12px}
.mv-doc-list{display:none;flex-direction:column;gap:2px;padding-bottom:8px}
.mv-doc-group[data-open="true"] .mv-doc-list{display:flex}
.mv-doc-row{display:flex;justify-content:space-between;align-items:center;padding:7px 4px;font-size:13px;color:var(--encre)}
.mv-doc-row button{background:none;border:0;color:var(--petrole-500);cursor:pointer;padding:4px}
.mv-doc-row button:hover{color:var(--petrole-700)}
.mv-coord-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:13px;gap:16px}
.mv-coord-row>span:last-child{display:inline-flex;align-items:center;gap:8px}
.mv-coord-row button{background:none;border:1px solid var(--ligne);border-radius:var(--r-full);color:var(--petrole-700);cursor:pointer;padding:3px 10px;font:600 12px/1 var(--font-body)}
.mv-coord-row button:hover{border-color:var(--ardoise)}
.mv-note textarea{width:100%;min-height:64px;border:1px solid var(--ligne);border-radius:8px;padding:10px;font:inherit;font-size:13px;color:var(--encre);resize:vertical}
.mv-note textarea::placeholder{color:var(--ardoise)}
.mv-actions-bar{display:flex;flex-direction:column;gap:8px;margin-top:20px;max-width:400px}
.mv-actions-bar .full{width:100%;height:44px;border-radius:8px;font-size:14px}
.mv-archive{background:none;border:0;color:var(--ardoise);font:600 12px/1 var(--font-body);text-decoration:underline;cursor:pointer;text-align:left;padding:2px}

.hd-note{margin:0 0 16px;padding:12px 16px;background:var(--petrole-700);border:1px solid var(--petrole-700);border-radius:var(--r-control);color:var(--blanc);font:600 13px/1.4 var(--font-body);box-shadow:var(--el-card)}
.preview-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.preview-note{margin-top:14px;font-size:var(--fs-caption);color:var(--ardoise)}
@media(max-width:900px){
  .product-frame{overflow-x:auto}
  .product-viewport{min-width:720px}
  .preview-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .mv-tiles{grid-template-columns:repeat(2,1fr)}
}


.lien-nomme{display:inline-flex;align-items:center;min-height:44px;font:600 var(--fs-body-sm)/1.4 var(--font-body);color:var(--petrole-500);text-decoration:none;border-bottom:1px solid currentColor}
.lien-nomme:hover{color:var(--petrole-700)}
/* ====== CAPTURE LOCATAIRE, styles repris de la maquette v16 ====== */
/* ══════════════════════════════════════════════════════════════════════════
   CADRE DE CAPTURE, habillage du 8.7 sans le pilotage du parcours guidé.
   Cadre navigateur sobre, barre de 38 px, trois pastilles, adresse, et la
   mention de données de démonstration exigée par le 7.3, visible en
   permanence et non au survol.
   ══════════════════════════════════════════════════════════════════════════ */
.hlcadre{margin-top:48px;background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--el-modal)}
.hlcadre .hlbarre{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;
  background:var(--surface-douce);border-bottom:1px solid var(--ligne)}
.hlcadre .hlpt{width:9px;height:9px;border-radius:var(--r-full);background:var(--ligne);flex:0 0 auto}
.hlcadre .hlurl{margin-left:10px;font:500 var(--fs-caption)/1 var(--font-body);color:var(--ardoise)}
.hlcadre .hldemo{margin-left:auto;font:600 var(--fs-micro)/1 var(--font-body);
  letter-spacing:.02em;color:var(--ardoise);white-space:nowrap}
.hllegende{margin-top:16px;font:500 var(--fs-caption)/1.5 var(--font-body);color:var(--ardoise)}

/* Sous 700 px, l'adresse cède la place à la mention. Le 7.3 exige que la
   mention de données de démonstration soit visible en permanence, l'adresse
   du cadre n'est qu'un habillage du 8.7. Aucune des deux ne se tronque. */
@media (max-width:700px){
  .hlcadre .hlurl{display:none}
  .hlcadre .hldemo{margin-left:6px}
}

/* ══════════════════════════════════════════════════════════════════════════
   LA CAPTURE. Tout ce qui suit est repris de la maquette espace locataire
   v4.1, écran Mes envois, sans retouche de mise en forme. Les règles sont
   préfixées par .cap pour ne pas se mêler à celles de la vitrine, et pour
   que l'échelle typographique du produit, corps à 13 px, vive à l'intérieur
   du cadre et nulle part ailleurs. C'est l'exception admise au 2.3.
   ══════════════════════════════════════════════════════════════════════════ */
.cap{background:var(--surface);font-family:var(--font-body);font-size:13px;font-weight:500;
  line-height:1.5;color:var(--encre);cursor:default;user-select:none}
.cap .cap-cont{width:100%;max-width:var(--conteneur);margin:0 auto;padding:0 24px}

/* barre de navigation du produit, §6.14 */
.cap .cap-hdr{background:var(--blanc);border-bottom:1px solid var(--ligne)}
.cap .cap-hdr .in{height:64px;display:flex;align-items:center;gap:32px}
.cap .logo{display:flex;align-items:center;gap:8px;font-family:var(--font-title);font-weight:700;
  font-size:18px;letter-spacing:-.01em;color:var(--encre);text-decoration:none;flex:0 0 auto}
.cap .logo svg{color:var(--petrole-500)}
.cap .cap-hdr nav{display:flex;align-items:center;gap:4px;flex:1 1 auto;min-width:0}
.cap .cap-hdr nav span.n{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;
  border-radius:var(--r-control);font-size:13px;font-weight:600;color:var(--ardoise);white-space:nowrap}
.cap .cap-hdr nav span.n[data-cur="oui"]{background:var(--petrole-100);color:var(--encre)}
.cap .count{font-variant-numeric:tabular-nums;font-size:10px;font-weight:600;line-height:1;
  min-width:18px;height:18px;padding:0 4px;border-radius:var(--r-full);background:var(--petrole-500);
  color:var(--blanc);display:inline-flex;align-items:center;justify-content:center}
.cap .prog{font-variant-numeric:tabular-nums;font-size:10px;font-weight:600;line-height:1;height:18px;
  padding:0 6px;border-radius:var(--r-full);background:var(--petrole-100);color:var(--petrole-700);
  display:inline-flex;align-items:center}
.cap .right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.cap .usr{display:flex;align-items:center;gap:8px;height:44px;padding:0 8px;
  border:1px solid transparent;border-radius:var(--r-control);text-align:left}
.cap .av{width:32px;height:32px;border-radius:var(--r-full);background:var(--petrole-100);
  border:1px solid var(--ligne);display:grid;place-items:center;font-size:11px;font-weight:700;
  color:var(--petrole-700);flex:0 0 auto}
.cap .usr .txt b{font-size:12px;font-weight:600;color:var(--encre);white-space:nowrap;display:block}
.cap .usr i.ic{color:var(--ardoise)}

/* corps de page du produit */
.cap .cap-body{padding:32px 0 40px}
.cap .ph{display:flex;align-items:flex-start;gap:32px;margin:0 0 20px}
.cap .ph h2{font-family:var(--font-title);font-size:24px;font-weight:700;line-height:1.3;margin:0;
  color:var(--encre);letter-spacing:0;max-width:none}
.cap .ph .hint{margin:4px 0 0;font-size:13px;color:var(--ardoise);max-width:534px}

/* boutons du produit, §6.1. Réécrits en entier, la vitrine posant un
   raccourci font: sur .btn qu'une déclaration partielle ne remplacerait pas. */
.cap .btn{font-family:var(--font-body);font-size:13px;font-weight:600;line-height:1;height:32px;
  padding:0 14px;border-radius:var(--r-control);display:inline-flex;align-items:center;
  justify-content:center;gap:8px;white-space:nowrap;border:1px solid transparent;
  background:transparent;transition:none}
.cap .btn.accent{border-color:var(--petrole-500);color:var(--petrole-500)}
.cap .btn .count{background:var(--blanc);color:var(--petrole-500)}
.cap .lnk{border:0;background:transparent;font-family:var(--font-body);font-size:12px;
  font-weight:600;color:var(--petrole-700);padding:0;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px}
.cap .lnk.danger{color:var(--erreur)}

/* pastilles, §6.8 */
.cap .pill{font-size:11px;font-weight:500;padding:3px 8px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--ligne);color:var(--ardoise);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px}
.cap .pill.upd{background:var(--petrole-100);border-color:transparent;color:var(--petrole-700);
  font-weight:600}
.cap .cdc{display:inline-flex;align-items:center;color:var(--ambre-700)}

/* barre de filtres. Trois bascules, pas de tri. Le filtre coup de cœur est
   légitime côté locataire et interdit côté agence, où il conférerait un
   avantage d'ordre à une option payante. */
.cap .envflt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.cap .chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;
  border:1px solid var(--ligne);background:var(--blanc);border-radius:var(--r-full);
  font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--ardoise);white-space:nowrap}
.cap .chip.field{padding-right:10px;gap:4px}
.cap .chip.field .lb{color:var(--ardoise);font-weight:600}
.cap .chip.field .vl{color:var(--encre);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.cap .chip.field .vl i.ic{color:var(--ardoise)}
.cap .envflt .cdc-f i.ic{color:var(--ambre-700)}
.cap .envflt .nw-f i.ic{color:var(--petrole-500)}

/* sections de la liste */
.cap .sec-h{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.cap .sec-h h3{font-family:var(--font-title);font-size:14px;font-weight:700;margin:0;
  color:var(--encre);line-height:1.5}
.cap .sec-h .n{font-size:12px;color:var(--ardoise);font-variant-numeric:tabular-nums}

/* carte d'envoi, deux bandes. Bande d'identification cliquable vers
   l'annonce, puis bande de suivi. Lecture seule, c'est l'agence ou le
   propriétaire qui fait avancer les étapes. */
.cap .snd{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-card);
  box-shadow:var(--el-card);margin-bottom:12px}
.cap .snd .hd{display:flex;gap:16px;align-items:flex-start;padding:16px}
/* Emplacement de couverture. Dimensions identiques à la vignette de la
   maquette produit, 104 sur 76, radius-control, recadrage par object-fit.
   Voir l'écart 1 en tête de fichier. */
.cap .snd .th{width:104px;height:76px;flex:0 0 auto;border:0;padding:0;border-radius:var(--r-control);
  background:var(--surface-douce);overflow:hidden;display:block}
.cap .snd .th img,.cap .snd .th svg{display:block;width:100%;height:100%;object-fit:cover}
.cap .snd .idt{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:3px}
.cap .snd .idt .ttl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cap .snd .lk{border:0;background:transparent;padding:0;font-family:var(--font-title);font-size:15px;
  font-weight:700;line-height:1.3;color:var(--encre);text-align:left;display:inline-flex;
  align-items:center;gap:6px}
.cap .snd .lk i.ic{color:var(--ardoise)}
.cap .snd .idt .pr{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.cap .snd .idt .facts{font-size:12px;color:var(--ardoise)}

.cap .snd .bd{border-top:1px solid var(--ligne);padding:14px 16px}
/* rang de statut. L'étape en cours porte la graisse la plus forte de la
   carte après le titre, elle est l'information principale. */
.cap .snd .stl{display:flex;align-items:center;gap:16px;min-height:32px}
.cap .snd .stl .s{font-size:14px;font-weight:700;color:var(--encre);line-height:1.35}
.cap .snd .stl .btn{margin-left:auto;flex:0 0 auto}
/* texte de statut. Générique et système, donc à plat sur la carte. Un
   encadré à fond gris se lirait comme un message reçu de l'agence. */
.cap .snd .gd{margin:3px 0 0;font-size:13px;color:var(--ardoise);max-width:456px}
.cap .snd .gd b{font-weight:600;color:var(--encre)}
.cap .snd .gd .sub{display:block;margin-top:4px;font-size:12px;color:var(--ardoise)}
/* rang de repérage. Progression et accès à son détail à gauche, geste
   destructif le plus loin possible. */
.cap .snd .rw{display:flex;align-items:center;gap:18px;margin-top:14px;flex-wrap:wrap}
.cap .snd .rw .push{margin-left:auto}
.cap .snd .rw .lnk .c{color:var(--ardoise)}
.cap .snd .rw [data-ouvert="oui"] .c{transform:rotate(90deg)}
/* progression, jalons seuls, le libellé vit dans le rang de statut. Aucun
   compte d'étapes ni pourcentage, voir brand book produit 1.2. */
.cap .prg{display:flex;align-items:center;list-style:none;margin:0;padding:0;flex:0 0 auto}
.cap .prg li{display:flex;align-items:center}
.cap .prg li .d{width:9px;height:9px;border-radius:var(--r-full);background:var(--ligne);flex:0 0 auto}
.cap .prg li+li:before{content:"";display:block;width:22px;height:2px;background:var(--ligne);flex:0 0 auto}
.cap .prg li.done .d{background:var(--petrole-500)}
.cap .prg li.done+li:before{background:var(--petrole-500)}
.cap .prg li.now .d{background:var(--petrole-500);position:relative;z-index:1;
  box-shadow:0 0 0 3px var(--petrole-100)}
/* journal horodaté, deux colonnes, sans point ni filet. Les étapes à venir
   n'y figurent pas, un journal ne consigne pas ce qui n'a pas eu lieu. */
.cap .snd .hist{margin-top:14px;padding-top:14px;border-top:1px solid var(--ligne)}
.cap .log{margin:0;display:grid}
.cap .log>div{display:grid;grid-template-columns:100px 1fr;gap:14px;padding:4px 0;font-size:12px}
.cap .log dt{margin:0;color:var(--ardoise);font-variant-numeric:tabular-nums}
.cap .log dd{margin:0;color:var(--encre);font-weight:600}
.cap .log dd .d2{font-weight:500;color:var(--ardoise)}
.cap .snd .hist .ro{margin:10px 0 0;font-size:12px;color:var(--ardoise);max-width:456px}

/* Repli étroit, source unique de la maquette produit. Sous 768 px la capture
   reprend ce repli au lieu de disparaître, voir l'écart 3. */
@media (max-width:768px){
  .cap .cap-cont{padding:0 20px}
  .cap .cap-hdr nav{display:none}
  .cap .snd .hd{flex-wrap:wrap}
  .cap .snd .th{width:100%;height:132px}
  .cap .snd .stl{flex-direction:column;align-items:stretch;gap:10px}
  .cap .snd .stl .btn{margin-left:0;width:100%;height:40px;order:2}
  .cap .snd .rw{flex-direction:column;align-items:flex-start;gap:12px}
  .cap .snd .rw .push{margin-left:0}
  .cap .log>div{grid-template-columns:1fr;gap:0;padding:6px 0}
}
/* =========================================================================
   REPRISES DE FIN DE FEUILLE
   Ces regles corrigent les styles importes de la maquette v16 pour le
   contexte du site vitrine. Elles vivent en fin de feuille parce qu'elles
   doivent l'emporter sur les selecteurs de meme specificite declares plus haut.
   ========================================================================= */

/* Une colonne de grille ne se laisse pas elargir par le contenu d'un cadre
   defilant. Sans cela, le min-width du 8.7 deborde la page sous 900 px. */
.hero-grille>*{min-width:0}
/* Ne jamais poser de max-width global sur les enfants du conteneur, cela
   ecrase les plafonds de lecture du 2.4. Seuls les cadres defilants sont vises. */
.conteneur>.product-frame,.conteneur>.hlcadre{max-width:100%}

/* Cadre de figure produit dans un hero. Cadre du 8.7 pose sur fond profond,
   sans inclinaison, sans perspective, sans reflet, 7.3. */
.figure-hero{margin:0;min-width:0}
.figure-hero .product-frame{margin-top:0;background:var(--blanc);overflow:hidden}
.figure-hero .product-viewport{padding:20px;background:var(--blanc);min-width:0}
.figure-hero .mv-h2{font-size:var(--fs-subheading)}
.figure-hero .mv-lead{margin-bottom:16px;font-size:13px}
.figure-hero .mv-tiles{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:0}
.figure-hero .mv-table-wrap{overflow-x:auto}
.figure-hero .legende{color:var(--petrole-200)}
.figure-hero .mv-panel-head{margin-bottom:16px}
.figure-hero .mv-card:last-child{margin-bottom:0}
@media (max-width:900px){
  .figure-hero .product-viewport{min-width:0;padding:16px}
  .figure-hero .mv-tiles{grid-template-columns:repeat(2,1fr)}
}

/* La capture locataire ne porte pas de marge haute propre, le rythme
   vertical est donne par la section, 3.2. */
.hlcadre{margin-top:0}

/* Cible tactile de 44 px sur les onglets du parcours guide, socle S6.4.
   Le 8.12 donne 38 px pour un bouton reduit, le socle impose 44 px de cible
   sans exception : la cible l'emporte. */
.preview-tabs button{height:44px}

/* Nom de profil dans une figure produit. Le libelle reprend la forme du
   titre de panneau de l'application sans entrer dans le plan de titres de
   la page, 9.2, un seul h1 puis descente sans saut de niveau. */
.mv-panel-head .mv-panel-name{margin:0 0 3px;font:700 18px/1.3 var(--font-title);color:var(--encre)}

/* Le contenu d'une figure produit herite du fond profond du hero s'il n'a
   pas de couleur propre. On repose l'encre a l'interieur du cadre. */
.figure-hero .product-viewport{color:var(--encre)}
.figure-hero .mv-quote{color:var(--encre)}

/* Le cadre de la figure de hero s'aligne sur la ligne haute du h1, pas sur
   le centre de la colonne. La valeur compense la hauteur du surtitre. */
.hero .figure-hero{margin-top:26px}
@media (max-width:900px){ .hero .figure-hero{margin-top:0} }
/* Legende de figure de hero, un cran sous la legende courante. */
.figure-hero .legende{font-size:var(--fs-micro);margin-top:14px}

/* Colonne d'en-tete : le montant et la liste de faits suivent le rythme
   de la colonne, pas celui d'une section. */
.en-tete .montant{margin-top:20px}
.en-tete .montant.apres-corps{margin-top:20px}
.en-tete .liste-faits{margin-top:20px}
.en-tete>div>.liste-faits:first-child{margin-top:0}
.en-tete>div>.formulaire:first-child{margin-top:0}
.en-tete .formulaire{max-width:100%}
.en-tete .prose[style]{margin-top:0!important}

/* Bloc de limite en deux colonnes. Les plafonds de lecture sont portes par
   la colonne, pas par le paragraphe, 2.4. */
.limite .en-tete h2,.limite .en-tete p{max-width:100%}
.limite .en-tete{gap:var(--space-8)}

/* Renvoi de note dans un montant. */
.renvoi-note{color:var(--petrole-500);text-decoration:none;font-weight:700;
  padding:0 2px;vertical-align:super;font-size:.6em}
.renvoi-note:hover{color:var(--petrole-700)}
/* Le bandeau final peut porter une prose et un bouton dans sa colonne droite. */
.bandeau-final .prose p{color:var(--petrole-700)}
.bandeau-final .actions{margin-top:var(--space-6)}

/* Une section ciblee par une ancre ne passe pas sous la barre collante. */
section[id]{scroll-margin-top:88px}

/* Trois utilitaires ajoutes a l'integration, le 21 aout 2026, pour retirer les
   cinq attributs style en ligne des pages. Sans eux, la politique de securite du
   contenu doit autoriser style-src 'unsafe-inline', ce qui est une concession
   inutile pour trois declarations. */
.u-ardoise{color:var(--ardoise)}
.u-mt-14{margin-top:14px}
.u-mt-22{margin-top:22px}

/* Piege a robots des formulaires. Retire du flux sans `display:none`, que
   certains automates savent detecter, et sorti de l'ordre de tabulation. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Largeur minimale de l'appel contextuel de la barre haute.
   Ajoute a l'integration le 21 aout 2026. Les libelles vont de « Creer un
   compte » a « Reserver une demonstration », mesures a 159 et 241 px : sans
   plancher, la barre entiere se decale de 82 px d'une page a l'autre, sur un
   element fixe present sur les neuf pages. Le plancher est cale sur le libelle
   le plus long, l'intention contextuelle est preservee et la geometrie ne bouge
   plus. Sous 1000 px l'appel vit dans la barre basse, la regle ne s'y applique
   pas. A confirmer par Bastien au brand book, entree ajoutee au registre. */
@media (min-width:1000px){
  .cta-barre{min-width:244px;text-align:center;justify-content:center}
}

/* Avis de refus d'un formulaire. Meme facture que les mentions du site, avec la
   valeur d'alerte portee par le texte et non par un aplat, l'aplat plein etant
   reserve a l'action unique. */
.avis-erreur{margin:0 0 18px;padding:12px 14px;border-left:3px solid var(--erreur,#b3402f);
  background:var(--surface-douce,#f4f2ee);color:var(--encre,#1c1c1c);font-size:15px;line-height:1.5}

/* Bandeau de consentement. Ajoute le 21 aout 2026, avec la mesure d'audience.
   Il emprunte les tokens et les classes de bouton du systeme, il n'introduit
   aucune couleur ni aucune facture nouvelle. Ancre en bas a gauche plutot qu'en
   plein ecran : un bandeau modal qui recouvre la page pousse au clic reflexe sur
   « accepter », ce qui est exactement ce qu'un consentement libre ne doit pas
   etre. A confirmer par Bastien au brand book, entree ajoutee au registre. */
.consentement{position:fixed;left:16px;bottom:16px;z-index:60;max-width:min(420px,calc(100vw - 32px))}
.consentement-boite{background:var(--surface,#fff);border:1px solid var(--ligne,#e2e0da);
  border-radius:12px;padding:20px;box-shadow:0 12px 32px rgba(0,0,0,.14)}
.consentement-h{font-family:var(--font-title);font-size:17px;line-height:1.3;margin:0 0 8px;color:var(--encre)}
.consentement-texte{font-size:14px;line-height:1.55;color:var(--ardoise);margin:0 0 12px}
.consentement-details{margin:4px 0 14px;padding-top:12px;border-top:1px solid var(--ligne,#e2e0da)}
.consentement-categorie{margin-bottom:12px}
.consentement-categorie label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.consentement-categorie input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--petrole-700,#134e35)}
.consentement-titre{font-size:15px;font-weight:600;color:var(--encre)}
.consentement-categorie .consentement-texte{margin:0 0 0 28px}
.consentement-necessaire{margin:0;font-size:13px}
.consentement-actions{display:flex;flex-wrap:wrap;gap:8px}
.consentement-actions .btn{flex:1 1 auto;min-height:44px}
.consentement-enregistrer{margin-top:8px;width:100%;min-height:44px}
.consentement-lien{display:inline-block;margin-top:12px;font-size:13px;color:var(--ardoise);text-decoration:underline}
@media (max-width:640px){
  .consentement{left:8px;right:8px;bottom:8px;max-width:none}
}

/* `[hidden]` ne suffit pas sur un element qui porte `.btn` : la classe pose un
   `display` et l'emporte sur l'attribut, qui n'a qu'une specificite d'agent
   utilisateur. Constate le 21 aout 2026, « Enregistrer mes choix » restait
   visible alors qu'il devait attendre l'ouverture du detail. */
.consentement [hidden]{display:none}
.consentement-bas{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:12px}
.consentement-choisir{background:none;border:0;padding:0;font:inherit;font-size:13px;
  color:var(--ardoise);text-decoration:underline;cursor:pointer;min-height:44px}
.consentement-choisir:hover{color:var(--encre)}
.consentement-lien{margin-top:0}