/*
Theme Name:  Secundis
Theme URI:   https://www.investissementlmnp.com/
Author:      Le Revenu Pierre - DSI / Direction Marketing
Description: Theme du site Secundis (marque affichee sur investissementlmnp.com). Squelette
             autonome cree le 03/09/2026 par la DSI ; integration Secundis a partir du
             14/09/2026 (livraison 1 : fondations, accueil, options, HubSpot, mesure).
             N'herite d'aucun theme parent.
Version:     2.2.3
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: secundis
*/

/* ------------------------------------------------------------------------
   Cette feuille porte les TOKENS et les COMPOSANTS COMMUNS a toutes les pages
   (en-tete, pied, boutons, cartes de lots, popin, sections). Les gabarits
   specifiques ajoutent leur propre feuille depuis assets/css/.
   ------------------------------------------------------------------------ */
/* ==========================================================================
   SECUNDIS — Design tokens (issus des SVG officiels du logo)
   ========================================================================== */
:root{
  --marine:    #1D2E4A;   /* wordmark */
  --marine-2:  #1B3456;   /* icône */
  --marine-70: #46587A;
  --vert:      #2C7D5C;   /* vert profond — CTA, liens forts */
  --vert-fonce:#226248;
  --sauge:     #58997D;   /* vert sauge — accents, jetons */
  --sauge-15:  #E6F0EB;
  --papier:    #F4F6F5;
  --blanc:     #FFFFFF;
  --trait:     #D5DDDA;
  --texte-2:   #52616F;
  --brique:    #A2472F;   /* vendu */
  --ambre:     #B07C24;   /* sous option */

  --titres: "Sora", -apple-system, sans-serif;
  --corps:  "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --data:   "IBM Plex Mono", "Courier New", monospace;

  --t-sm:.8125rem; --t-md:1.125rem; --t-lg:1.375rem;
  --t-xl:1.75rem; --t-2xl:2.25rem; --t-3xl:3.125rem;
  --largeur:1240px; --r:10px; --r-sm:6px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--blanc); color:var(--marine); font-family:var(--corps);
  font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--titres); font-weight:600; line-height:1.15; margin:0; letter-spacing:-.015em}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%; display:block}
select,input,button{font:inherit}
:focus-visible{outline:2px solid var(--vert); outline-offset:2px}
.enveloppe{max-width:var(--largeur); margin:0 auto; padding:0 1.5rem}

.etiquette{font-family:var(--data); font-size:.75rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vert); margin:0 0 .75rem}

/* ============================ BOUTONS ============================ */
.bouton{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--titres); font-size:.9375rem; font-weight:600; padding:.8rem 1.4rem;
  border-radius:var(--r-sm); text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.bouton--plein{background:var(--vert); color:#fff}
.bouton--plein:hover{background:var(--vert-fonce)}
.bouton--marine{background:var(--marine); color:#fff}
.bouton--marine:hover{background:var(--vert)}
.bouton--fil{background:transparent; color:var(--marine); border-color:var(--marine)}
.bouton--fil:hover{background:var(--marine); color:#fff}
.fleche{transition:transform .15s}
.bouton:hover .fleche{transform:translateX(3px)}

/* ============================ EN-TÊTE ============================ */
.entete{background:var(--blanc); border-bottom:1px solid var(--trait); position:sticky; top:0; z-index:60}
.entete .enveloppe{display:flex; align-items:center; gap:2rem; min-height:86px}
.marque{display:flex; flex-direction:column; gap:2px; text-decoration:none; flex-shrink:0}
.marque img{height:44px; width:auto}
.marque .promesse{font-size:.72rem; color:var(--texte-2); font-style:italic; padding-left:2px}
.nav{margin-left:auto; display:flex; gap:1.15rem; align-items:center}
.nav a.lien{font-size:.9rem; font-weight:500; text-decoration:none; color:var(--marine); white-space:nowrap;
  padding:.3rem 0; border-bottom:2px solid transparent; transition:color .15s,border-color .15s}
.nav a.lien:hover{color:var(--vert); border-bottom-color:var(--vert)}
.nav .bouton{white-space:nowrap; padding:.68rem 1rem; font-size:.875rem}
.nav a.lien--actif{color:var(--vert); border-bottom-color:var(--vert)}
.nav-bascule{display:none}
.nav.ouvert{display:flex; position:absolute; top:100%; left:0; right:0; background:var(--blanc); border-bottom:1px solid var(--trait); flex-direction:column; align-items:stretch; gap:0; padding:.5rem 1.5rem 1rem; box-shadow:0 18px 30px rgba(29,46,74,.12)}
.nav.ouvert a{padding:.7rem 0; border-bottom:1px solid var(--trait)}
.nav.ouvert .bouton{margin-top:.6rem; border-bottom:0}

/* ============================ HÉROS ============================ */
.heros{background:linear-gradient(180deg,var(--papier) 0%,var(--blanc) 100%); padding:3.5rem 0 4rem}
.heros .enveloppe{display:grid; grid-template-columns:1.1fr .9fr; gap:3.5rem; align-items:center}
.heros h1{font-size:var(--t-3xl); margin-bottom:1rem}
.heros h1 .vert{color:var(--vert)}
.heros .chapeau{font-size:var(--t-md); color:var(--texte-2); max-width:33em; margin-bottom:1.75rem}

/* Moteur de recherche de lots */
.moteur{background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r);
  box-shadow:0 10px 30px rgba(29,46,74,.08); padding:1.1rem; display:grid;
  grid-template-columns:1fr 1fr 1fr auto; gap:.75rem; max-width:640px}
.champ{display:flex; flex-direction:column; gap:.3rem}
.champ label{font-family:var(--data); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--texte-2)}
.champ select{border:1px solid var(--trait); border-radius:var(--r-sm); padding:.6rem .5rem;
  background:var(--blanc); color:var(--marine); font-size:.9rem}
.moteur .bouton{align-self:end; padding:.68rem 1.3rem}
.moteur-liens{grid-column:1 / -1; display:flex; gap:1.25rem; font-size:var(--t-sm); color:var(--texte-2); flex-wrap:wrap}
.moteur-liens a{color:var(--vert); font-weight:500}

/* Carte de France par régions — tuiles cliquables */
.carte{background:var(--marine); border-radius:var(--r); padding:1.75rem 1.5rem 1.25rem; color:#fff; position:relative}
.carte h2{font-size:1.05rem; font-weight:600; color:#fff; margin-bottom:1.1rem; display:flex; justify-content:space-between; align-items:baseline}
.carte h2 span{font-family:var(--data); font-size:.7rem; letter-spacing:.1em; color:var(--sauge); text-transform:uppercase; font-weight:400}
.tuiles{display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:64px; gap:.5rem}
.tuile{border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); border-radius:8px;
  padding:.45rem .55rem; text-decoration:none; color:#fff; display:flex; flex-direction:column;
  justify-content:space-between; transition:background .15s,border-color .15s,transform .15s}
.tuile:hover{background:var(--vert); border-color:var(--vert); transform:translateY(-2px)}
.tuile b{font-size:.66rem; font-weight:600; line-height:1.2; font-family:var(--titres); letter-spacing:0}
.tuile span{font-family:var(--data); font-size:.66rem; color:var(--sauge)}
.tuile:hover span{color:#DCEDE4}
/* positionnement approximatif géographique */
.t-hdf{grid-column:3; grid-row:1}
.t-nor{grid-column:2; grid-row:2}.t-idf{grid-column:3; grid-row:2}.t-ge{grid-column:4 / span 2; grid-row:2}
.t-bre{grid-column:1; grid-row:3}.t-pdl{grid-column:2; grid-row:3}.t-cvl{grid-column:3; grid-row:3}.t-bfc{grid-column:4; grid-row:3}
.t-na{grid-column:2; grid-row:4 / span 2}.t-ara{grid-column:3 / span 2; grid-row:4}
.t-occ{grid-column:3; grid-row:5}.t-paca{grid-column:4; grid-row:5}
.t-cor{grid-column:5; grid-row:6}
.carte-pied{margin-top:1rem; font-size:.75rem; color:rgba(255,255,255,.55)}

/* ============================ RÉASSURANCE / 5 ARGUMENTS ============================ */
.reassurance{border-top:1px solid var(--trait); border-bottom:1px solid var(--trait); background:var(--blanc)}
.reassurance .enveloppe{display:flex; align-items:center; gap:1.5rem; padding-top:.9rem; padding-bottom:.9rem;
  font-size:var(--t-sm); color:var(--texte-2); flex-wrap:wrap; justify-content:space-between}
.reassurance b{color:var(--marine); font-weight:600}
.arguments{padding:4.5rem 0}
.arguments .enveloppe{display:grid; grid-template-columns:repeat(5,1fr); gap:1.75rem}
.argument{border-top:3px solid var(--sauge); padding-top:1.1rem}
.argument .num{font-family:var(--data); font-size:.7rem; color:var(--sauge); display:block; margin-bottom:.5rem}
.argument h3{font-size:1rem; margin-bottom:.4rem}
.argument p{font-size:var(--t-sm); color:var(--texte-2); margin:0}

/* ============================ GAMMES ============================ */
.section{padding:4.5rem 0}
.section--papier{background:var(--papier)}
.section--marine{background:var(--marine); color:#C9D6D0}
.section--marine h2,.section--marine h3{color:#fff}
.section-tete{max-width:44em; margin-bottom:2.75rem}
.section-tete h2{font-size:var(--t-2xl); margin-bottom:.75rem}
.section-tete p{color:var(--texte-2); font-size:var(--t-md); margin:0}
.section--marine .section-tete p{color:#9FB2AA}

.gammes{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.gamme{background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r); padding:1.9rem 1.6rem;
  text-decoration:none; display:flex; flex-direction:column; transition:border-color .15s,transform .15s,box-shadow .15s}
.gamme:hover{border-color:var(--vert); transform:translateY(-3px); box-shadow:0 12px 28px rgba(29,46,74,.1)}
.gamme .renta{font-family:var(--titres); font-size:var(--t-xl); font-weight:700; color:var(--vert); margin-bottom:.2rem}
.gamme .renta small{font-size:.8rem; font-weight:500; color:var(--texte-2)}
.gamme h3{font-size:var(--t-lg); margin-bottom:.5rem}
.gamme p{font-size:.9375rem; color:var(--texte-2); flex:1}
.gamme .lien-gamme{font-weight:600; color:var(--vert); font-size:.9375rem; text-decoration:none}
.gamme--phare{border-color:var(--vert); position:relative}
.gamme--phare::before{content:"La plus demandée"; position:absolute; top:-11px; left:1.4rem;
  background:var(--vert); color:#fff; font-family:var(--data); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.22rem .6rem; border-radius:99px}

/* ============================ CARTES LOTS ============================ */
.lots-tete{display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:2rem; flex-wrap:wrap}
.lots{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.lot{background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; transition:border-color .15s,transform .15s,box-shadow .15s}
.lot:hover{border-color:var(--marine); transform:translateY(-3px); box-shadow:0 12px 28px rgba(29,46,74,.1)}
.lot-photo{aspect-ratio:16/9; background:linear-gradient(135deg,var(--marine) 0%,var(--marine-2) 55%,var(--vert) 130%);
  position:relative; display:flex; align-items:end; padding:.8rem}
.lot-photo .jeton{position:absolute; top:.8rem; left:.8rem}
.lot-actions{position:absolute; top:.7rem; right:.7rem; display:flex; gap:.4rem}
.lot-action{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.92); border:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--marine); transition:background .15s,color .15s}
.lot-action:hover{background:var(--vert); color:#fff}
.lot-photo .segment{font-family:var(--data); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.85)}
.jeton{font-family:var(--data); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.24rem .55rem; border-radius:99px; font-weight:500}
.jeton--securite{background:#E3EBF6; color:var(--marine-2)}
.jeton--equilibre{background:var(--sauge-15); color:var(--vert)}
.jeton--dynamique{background:#F3EAD9; color:var(--ambre)}
.lot-corps{padding:1.2rem 1.25rem; flex:1}
.lot-haut{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem}
.lot-haut .prix{font-family:var(--titres); font-size:var(--t-lg); font-weight:700}
.lot-haut .renta{font-family:var(--titres); font-weight:700; color:var(--vert)}
.lot h3{font-size:1.02rem; margin-bottom:.1rem}
.lot .lieu{font-size:var(--t-sm); color:var(--texte-2); margin-bottom:.9rem}
.specs{margin:0; padding:0}
.spec{display:flex; align-items:baseline; gap:.5rem; padding:.28rem 0; font-size:.875rem}
.spec dt{color:var(--texte-2); flex-shrink:0; margin:0}
.spec .conduite{flex:1; border-bottom:1px dotted var(--trait); transform:translateY(-.3em); min-width:1rem}
.spec dd{margin:0; font-family:var(--data); font-size:.8125rem; font-weight:500; flex-shrink:0}
.lot-pied{padding:.85rem 1.25rem; border-top:1px solid var(--trait); background:var(--papier);
  display:flex; justify-content:space-between; align-items:center; font-size:.875rem; font-weight:600; color:var(--vert)}

/* ============================ SIMULATEUR + COMPARATIF ============================ */
.simulateur{display:grid; grid-template-columns:1fr 1.05fr; gap:3.5rem; align-items:center}
.comparatif{background:#22385C; border:1px solid #34507A; border-radius:var(--r); padding:1.75rem}
.comparatif .etiquette{color:var(--sauge)}
.barres{display:flex; flex-direction:column; gap:.8rem; margin-top:1rem}
.barre{display:grid; grid-template-columns:150px 1fr 58px; align-items:center; gap:.8rem; font-size:.875rem}
.barre .nom{color:#B9C7D6}
.barre .rail{height:14px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden}
.barre .rempli{height:100%; border-radius:99px; background:#5E769B}
.barre .val{font-family:var(--data); text-align:right; color:#D7E0EA}
.barre--nous .nom{color:#fff; font-weight:600}
.barre--nous .rempli{background:var(--sauge)}
.barre--nous .val{color:#fff; font-weight:600}
.comparatif .source{font-size:.72rem; color:#7E92AC; margin:.9rem 0 0}

/* ============================ ÉTAPES ============================ */
.etapes{display:grid; grid-template-columns:repeat(5,1fr); gap:0; counter-reset:etape}
.etape{position:relative; padding:0 1.25rem 0 0}
.etape::before{counter-increment:etape; content:counter(etape,decimal-leading-zero);
  font-family:var(--data); font-size:.75rem; color:var(--vert); display:block; margin-bottom:.7rem}
.etape::after{content:""; position:absolute; top:.42rem; left:2.2rem; right:1rem; height:1px;
  background:var(--trait)}
.etape:last-child::after{display:none}
.etape h3{font-size:.98rem; margin-bottom:.35rem}
.etape p{font-size:var(--t-sm); color:var(--texte-2); margin:0}

/* ============================ SILO ÉDITORIAL ============================ */
.guides{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1.5rem}
.guide{background:var(--blanc); border:1px solid var(--trait); border-radius:var(--r); padding:1.75rem 1.5rem;
  text-decoration:none; transition:border-color .15s,transform .15s}
.guide:hover{border-color:var(--vert); transform:translateY(-3px)}
.guide h3{font-size:var(--t-md); margin:.35rem 0 .5rem}
.guide p{font-size:.9375rem; color:var(--texte-2); margin-bottom:.75rem}
.guide .lien-gamme{color:var(--vert); font-weight:600; font-size:.9rem}
.guide--pilier{background:var(--marine); border-color:var(--marine)}
.guide--pilier h3{color:#fff; font-size:var(--t-lg)}
.guide--pilier p{color:#AFC0B9}
.guide--pilier .etiquette{color:var(--sauge)}

/* ============================ EXPLOITANTS ============================ */
.exploitants{overflow:hidden; border-top:1px solid var(--trait); border-bottom:1px solid var(--trait); padding:1.6rem 0; background:var(--blanc)}
.defile{display:flex; gap:4rem; width:max-content; animation:defiler 36s linear infinite}
.exploitants:hover .defile{animation-play-state:paused}
.exploitant{font-family:var(--titres); font-weight:700; font-size:1.05rem; color:#9AA8B4;
  letter-spacing:.04em; white-space:nowrap}
@keyframes defiler{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================ BLOC VENDEUR ============================ */
.vendeur{background:var(--sauge-15)}
.vendeur .enveloppe{display:flex; justify-content:space-between; align-items:center; gap:2.5rem;
  padding-top:3rem; padding-bottom:3rem; flex-wrap:wrap}
.vendeur h2{font-size:var(--t-xl); margin-bottom:.4rem}
.vendeur p{margin:0; color:var(--texte-2)}

/* ============================ PIED ============================ */
.pied{background:var(--papier); border-top:1px solid var(--trait); padding:3.5rem 0 0; font-size:.9375rem; color:var(--texte-2)}
.pied-colonnes{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem}
.pied img{height:76px; width:auto; margin-bottom:1rem}
.pied h4{font-family:var(--data); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--vert); margin:0 0 1rem; font-weight:500}
.pied ul{list-style:none; margin:0; padding:0}
.pied li{margin-bottom:.55rem}
.pied a{color:var(--texte-2); text-decoration:none}
.pied a:hover{color:var(--vert)}
.pied-bas{border-top:1px solid var(--trait); padding:1.4rem 0; font-family:var(--data); font-size:.72rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* ============================ CHAT (placeholder visuel) ============================ */
.chat-bulle{position:fixed; right:1.4rem; bottom:1.4rem; z-index:70; background:var(--vert); color:#fff;
  border:0; border-radius:99px; padding:.85rem 1.3rem; font-family:var(--titres); font-weight:600;
  font-size:.9rem; cursor:pointer; box-shadow:0 10px 26px rgba(34,98,72,.4); display:flex; gap:.5rem; align-items:center}
.chat-bulle:hover{background:var(--vert-fonce)}

/* ============================ MOTION ============================ */
.js-anim .monte{opacity:0; transform:translateY(14px); transition:opacity .6s ease,transform .6s ease}
.js-anim .monte.vu{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .monte{opacity:1; transform:none; transition:none}
  .defile{animation:none}
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1240px){
  .marque .promesse{display:none}
  .nav{gap:.9rem}
}
@media (max-width:1080px){
  .nav{display:none}
  .nav-bascule{display:inline-flex; margin-left:auto}
  .arguments .enveloppe{grid-template-columns:repeat(3,1fr)}
  .lots,.gammes{grid-template-columns:repeat(2,1fr)}
  .etapes{grid-template-columns:repeat(3,1fr); row-gap:2rem}
  .guides{grid-template-columns:1fr 1fr}
  .guide--pilier{grid-column:1 / -1}
}
@media (max-width:920px){
  :root{--t-3xl:2.125rem; --t-2xl:1.75rem}
  .heros .enveloppe,.simulateur{grid-template-columns:1fr; gap:2.25rem}
  .moteur{grid-template-columns:1fr 1fr; max-width:none}
  .moteur .bouton{grid-column:1 / -1}
  .section,.arguments{padding:3rem 0}
  .pied-colonnes{grid-template-columns:1fr 1fr}
  .barre{grid-template-columns:110px 1fr 52px}
}
@media (max-width:640px){
  :root{--t-3xl:1.9rem; --t-2xl:1.6rem}
  .lots,.gammes,.guides,.etapes{grid-template-columns:1fr}
  .tuiles{grid-template-columns:repeat(5,minmax(0,1fr))}
  .tuile{padding:.35rem .35rem}
  .tuile b{font-size:.56rem; overflow-wrap:anywhere; hyphens:auto}
  .tuile span{font-size:.58rem}
  .carte{padding:1.25rem 1rem 1rem}
  .arguments .enveloppe{grid-template-columns:1fr 1fr}
  .etape::after{display:none}
  .moteur{grid-template-columns:1fr}
  .tuiles{grid-auto-rows:56px; gap:.4rem}
  .tuile b{font-size:.6rem}
  .pied-colonnes{grid-template-columns:1fr}
  .reassurance .enveloppe{justify-content:flex-start}
  .marque img{height:36px}
  .marque .promesse{display:none}
}

/* ============================ ANTI-DEBORDEMENT (mobile) ============================ */
html{overflow-x:clip}
.enveloppe,.enveloppe > *,.heros .enveloppe > *,.simulateur > *{min-width:0}
.moteur .champ select{width:100%; min-width:0}
h1,h2,h3{overflow-wrap:anywhere}

/* ============================ BANDEAU ENVIRONNEMENT (mu-plugin DSI) ============================ */
body.env-travail{padding-top:var(--bandeau,34px)}
body.env-travail .entete{top:var(--bandeau,34px)}

/* ============================ ELEMENTS WORDPRESS ============================ */
.page-contenu{padding:3.5rem 0}
.page-contenu .enveloppe{max-width:820px}
.page-contenu h1{font-size:var(--t-2xl); margin-bottom:1.25rem}
.page-contenu h2{font-size:var(--t-lg); margin:2rem 0 .6rem}
.page-contenu p,.page-contenu li{color:var(--texte-2)}
.page-contenu a{color:var(--vert)}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px)}

/* ============================ POPIN DE SORTIE ============================ */
.sortie{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:1rem;
  background:rgba(29,46,74,.66); backdrop-filter:blur(2px)}
.sortie[hidden]{display:none}
.sortie-boite{background:#fff; border-radius:14px; max-width:520px; width:100%; padding:2.2rem 2rem; position:relative;
  box-shadow:0 30px 80px rgba(29,46,74,.4); text-align:center}
.sortie-fermer{position:absolute; top:.7rem; right:.9rem; background:none; border:0; font-size:1.5rem; color:var(--texte-2); cursor:pointer}
.sortie-boite h2{font-size:1.45rem; line-height:1.25; margin:0 0 .7rem}
.sortie-boite .texte{color:var(--texte-2); font-size:.95rem; margin:0 0 1.4rem}
.sortie-boite .bouton{width:100%; margin-bottom:.6rem}
.sortie-zone{text-align:left; margin-top:1rem; max-height:52vh; overflow:auto}
.sortie-note{position:static; font-family:var(--data); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:#8A97A3; margin:.9rem 0 0; order:99}

/* ============================ HUBSPOT NEUTRALISE (env. de travail) ============================ */
.hs-neutralise{text-align:center; padding:18px 12px; margin:10px 0; border:2px dashed #1f7a63; border-radius:6px}
.hs-neutralise p{margin:0; color:#666; font-size:.9em}
.hs-neutralise p:first-child{color:#1f7a63; font-weight:700; margin-bottom:6px}

/* ============================ PHOTO DE LOT (vraie image) ============================ */
.lot-photo.avec-image{background-size:cover; background-position:center}
.lot-photo.avec-image::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(29,46,74,.05) 30%,rgba(29,46,74,.65) 100%)}
.lot-photo > *{position:relative; z-index:1}
.lot-indispo{opacity:.6}
.lot-indispo .lot-pied{color:var(--brique)}

/* ============================ ETAT VIDE ============================ */
.vide{border:1px dashed var(--trait); border-radius:var(--r); padding:2rem; text-align:center; color:var(--texte-2)}

/* ==========================================================================
   DESIGN 0.4 — curseur « +15/20 % » : rayons plus doux, ombres légères, dégradés
   discrets, boutons plus vivants, cartes qui réagissent. Le code couleur, le logo
   et le sérieux sont conservés. (Surcharges : ce bloc gagne par ordre de cascade.)
   ========================================================================== */
:root{
  --r:14px; --r-sm:9px;
  --ombre-1:0 6px 18px rgba(29,46,74,.07);
  --ombre-2:0 18px 40px rgba(29,46,74,.13);
  --degrade-vert:linear-gradient(135deg,#2C7D5C 0%,#3A9470 100%);
  --degrade-marine:linear-gradient(160deg,#1D2E4A 0%,#25406A 100%);
  --menthe:#EEF6F2;
}
body{background:#FBFCFB}
.enveloppe{padding:0 1.75rem}

/* ---- bandeau d'environnement DSI : masqué (demande Antoine 14/09) */
body > div[style*="z-index:99999"][style*="#0a7d3f"]{display:none !important}
body.env-travail{padding-top:0}
body.env-travail .entete{top:0}

/* ---- boutons */
.bouton{border-radius:999px; padding:.8rem 1.35rem; font-weight:600; letter-spacing:.005em;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease}
.bouton--plein{background:var(--degrade-vert); color:#fff; box-shadow:0 8px 20px rgba(44,125,92,.28)}
.bouton--plein:hover{background:linear-gradient(135deg,#226248 0%,#2C7D5C 100%); transform:translateY(-2px); box-shadow:0 12px 26px rgba(44,125,92,.34)}
.bouton--fil{border-color:var(--marine); background:transparent}
.bouton--fil:hover{background:var(--marine); color:#fff; transform:translateY(-2px)}
.bouton--marine{background:var(--degrade-marine); color:#fff; box-shadow:0 8px 20px rgba(29,46,74,.25)}
.bouton--marine:hover{transform:translateY(-2px)}
.bouton--blanc{border-color:#fff; color:#fff}
.bouton--blanc:hover{background:#fff; color:var(--marine)}
.bouton--large{padding:1rem 1.5rem; font-size:1rem}
.bouton .fleche{transition:transform .2s}
.bouton:hover .fleche{transform:translateX(3px)}
.ico-cal{display:inline-block; width:.85em; height:.85em; border:1.5px solid currentColor; border-radius:2px; border-top-width:3px; margin-right:.1em}

/* ---- en-tête */
.entete{background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid rgba(213,221,218,.7)}
.marque img{height:30px; width:auto}
.marque .promesse{margin-top:.35rem; font-size:.74rem}
.nav a.lien{padding:.35rem .1rem; border-bottom:2px solid transparent; transition:color .15s, border-color .15s}
.nav a.lien:hover{color:var(--vert); border-bottom-color:var(--sauge)}
.nav .bouton{padding:.62rem 1.1rem}

/* ---- héros */
.heros{padding:2.5rem 0 3rem; position:relative; overflow:hidden;
  background:radial-gradient(900px 420px at 15% 0%, rgba(88,153,125,.14), transparent 60%), radial-gradient(700px 380px at 95% 110%, rgba(29,46,74,.08), transparent 60%), linear-gradient(180deg,#F5F8F6 0%,#FBFCFB 100%)}
.heros .enveloppe{grid-template-columns:1.05fr .95fr; gap:3rem; align-items:start}
.heros h1{font-size:clamp(2rem, 3.6vw, 3rem); margin-bottom:.8rem}
.heros .chapeau{font-size:1.02rem; margin-bottom:1.25rem; max-width:36em}
.moteur--heros{max-width:none; grid-template-columns:1.1fr 1.1fr 1fr 1fr auto; padding:1rem 1rem .9rem; border-radius:18px; box-shadow:var(--ombre-2); border-color:rgba(213,221,218,.8)}
.moteur--heros .champ select{border-radius:10px; padding:.7rem .6rem; background:#F7F9F8}
.moteur--heros .bouton{padding:.75rem 1.2rem; white-space:nowrap}
.moteur-liens{margin-top:.25rem; align-items:center}
.moteur-liens > span{background:var(--menthe); color:var(--vert); padding:.25rem .7rem; border-radius:999px; font-size:.78rem}
.moteur-liens > span b{font-weight:700}

/* ---- carte de France : thème clair, uniforme avec le simulateur */
.carte,.carte--svg{background:#fff; color:var(--marine); border:1px solid var(--trait); border-radius:18px; box-shadow:var(--ombre-2); padding:1.35rem 1.35rem 1.1rem}
.carte h2{color:var(--marine); font-size:1.05rem}
.carte h2 span{color:var(--vert)}
.cf-region path{stroke:#fff; stroke-width:1.4; fill:hsl(150, calc(18% + 30% * var(--i, 0)), calc(86% - 34% * var(--i, 0)))}
.cf-region:hover path,.cf-region.actif path{fill:var(--vert); stroke:#fff}
.cf-region--vide path{fill:#EEF1F0; stroke:#fff}
.cf-pastille circle{fill:var(--marine); stroke:#fff; stroke-width:2; filter:drop-shadow(0 3px 6px rgba(29,46,74,.25))}
.cf-pastille text{fill:#fff}
.cf-pastille.actif circle{fill:var(--vert)}
.cf-legende{background:var(--marine); color:#fff; border-radius:10px; box-shadow:var(--ombre-2)}
.cf-legende b{color:#fff}
.cf-legende span{color:#C9D6D0}
.cf-liste a{color:var(--texte-2); border-color:var(--trait)}
.cf-liste a span{color:var(--vert); font-weight:600}
.cf-liste a:hover,.cf-liste a.actif{background:var(--vert); border-color:var(--vert); color:#fff}
.cf-liste a:hover span,.cf-liste a.actif span{color:#fff}

/* ---- pourquoi Secundis : preuves + arguments en cartes */
.pourquoi{padding:3.5rem 0 4rem; background:#fff}
.preuves{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.preuve{display:flex; gap:.9rem; align-items:flex-start; background:var(--menthe); border-radius:16px; padding:1.1rem 1.2rem; border:1px solid rgba(88,153,125,.25)}
.preuve-chiffre{font-family:var(--titres); font-weight:700; font-size:1.9rem; line-height:1; color:var(--vert); white-space:nowrap}
.preuve-chiffre small{font-size:.9rem; font-weight:600; color:var(--sauge)}
.preuve-texte{font-size:.9rem; color:var(--texte-2); line-height:1.4}
.preuve-texte b{color:var(--marine); display:block}
.arguments-grille{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem}
.argument-carte{background:#fff; border:1px solid var(--trait); border-radius:18px; padding:1.4rem 1.3rem 1.3rem; position:relative; overflow:hidden; transition:transform .18s, box-shadow .18s, border-color .18s}
.argument-carte::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--degrade-vert); opacity:.85}
.argument-carte:hover{transform:translateY(-4px); box-shadow:var(--ombre-2); border-color:rgba(44,125,92,.4)}
.argument-ico{width:46px; height:46px; border-radius:14px; background:var(--menthe); color:var(--vert); font-family:var(--titres); font-weight:700; font-size:1.15rem; display:flex; align-items:center; justify-content:center; margin-bottom:.9rem}
.argument-carte h3{font-size:1.02rem; margin-bottom:.45rem}
.argument-carte p{font-size:.9rem; color:var(--texte-2); margin:0}
.argument-carte--phare{background:var(--degrade-marine); border-color:transparent; color:#fff}
.argument-carte--phare h3{color:#fff}
.argument-carte--phare p{color:#C9D6D0}
.argument-carte--phare .argument-ico{background:rgba(255,255,255,.14); color:#fff}

/* ---- sélections (ex-gammes) */
.section--papier{background:linear-gradient(180deg,#F4F7F5 0%,#FBFCFB 100%)}
.gamme{border-radius:18px; box-shadow:var(--ombre-1)}
.gamme:hover{box-shadow:var(--ombre-2); transform:translateY(-4px)}
.gamme .renta{font-size:2rem}
.gamme--phare{box-shadow:0 0 0 2px var(--vert), var(--ombre-2)}
.section-tete h2{font-size:clamp(1.6rem, 2.4vw, 2.1rem)}

/* ---- cartes de lots */
.lot{border-radius:18px; box-shadow:var(--ombre-1)}
.lot:hover{box-shadow:var(--ombre-2); transform:translateY(-4px); border-color:transparent}
.lot-photo{aspect-ratio:16/10}
.lot-photo.avec-image::after{background:linear-gradient(180deg,rgba(29,46,74,0) 40%,rgba(29,46,74,.7) 100%)}
.lot-haut .prix{font-size:1.35rem}
.lot-haut .renta{background:var(--menthe); padding:.2rem .6rem; border-radius:999px; font-size:.95rem}
.lot-pied{background:var(--menthe); color:var(--vert)}
.jeton{border-radius:999px; padding:.3rem .65rem}

/* ---- simulateur + comparatif de l'accueil : thème clair */
.section--marine{background:linear-gradient(180deg,#F4F7F5 0%,#EEF3F0 100%); color:var(--texte-2)}
.section--marine h2,.section--marine h3{color:var(--marine)}
.section--marine .section-tete p{color:var(--texte-2)}
.section--marine .etiquette{color:var(--vert)}
.comparatif{background:#fff; border:1px solid var(--trait); border-radius:18px; box-shadow:var(--ombre-2); color:var(--marine)}
.comparatif .barre .nom{color:var(--texte-2)}
.comparatif .barre .rail{background:#EEF1F0}
.comparatif .barre .rempli{background:#B9C7D6}
.comparatif .barre .val{color:var(--marine)}
.comparatif .barre--nous .nom{color:var(--marine); font-weight:700}
.comparatif .barre--nous .rempli{background:var(--degrade-vert)}
.comparatif .barre--nous .val{color:var(--vert)}
.comparatif .source{color:var(--texte-2)}

/* ---- étapes, guides */
.etape{background:#fff; border-radius:16px; border:1px solid var(--trait); padding:1.2rem 1.1rem; box-shadow:var(--ombre-1)}
.guide{border-radius:18px; box-shadow:var(--ombre-1)}
.guide:hover{box-shadow:var(--ombre-2); transform:translateY(-4px)}
.guide--pilier{background:var(--degrade-marine)}

/* ---- exploitants cliquables */
.exploitants{padding:1.4rem 0 1.6rem; background:#fff}
.exploitant{display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; color:var(--marine); font-size:.95rem; padding:.45rem .9rem; border:1px solid var(--trait); border-radius:999px; transition:all .15s; background:#fff}
.exploitant span{font-family:var(--data); font-size:.7rem; color:var(--vert); background:var(--menthe); padding:.1rem .45rem; border-radius:999px}
.exploitant:hover{border-color:var(--vert); color:var(--vert); transform:translateY(-2px); box-shadow:var(--ombre-1)}
.defile{gap:.7rem; animation-duration:60s}

/* ---- bloc vendeur + pied */
.vendeur{background:linear-gradient(135deg,#E6F0EB 0%,#F4F7F5 100%)}
.pied{background:var(--degrade-marine)}

/* ---- popin : vignette lot, suite RDV */
.sortie-boite{border-radius:20px; padding:2.2rem 2rem 1.6rem}
.sortie-boite--large{max-width:820px; text-align:left}
.sortie-lot{display:flex; gap:.8rem; align-items:center; text-align:left; background:var(--menthe); border:1px solid rgba(88,153,125,.3); border-radius:12px; padding:.6rem .7rem; margin:0 0 1rem}
.sortie-lot i{width:72px; height:54px; flex-shrink:0; border-radius:8px; background:linear-gradient(135deg,var(--marine),var(--vert) 160%); background-size:cover; background-position:center}
.sortie-lot span{font-size:.82rem; line-height:1.35; color:var(--texte-2)}
.sortie-lot b{display:block; color:var(--marine)}
.sortie-lot em{font-style:normal; color:var(--vert); font-weight:600}
.sortie-suite{background:var(--menthe); border-radius:12px; padding:1rem; margin-top:1rem}
.sortie-suite p{font-size:.95rem; color:var(--texte-2)}
.hyp-grille{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1rem}
.hyp-grille h3{font-size:1rem; margin-bottom:.5rem}
.hyp-grille ul{margin:0; padding-left:1.1rem; font-size:.88rem; color:var(--texte-2)}
.hyp-grille li{margin-bottom:.4rem}
.hyp-source{font-size:.78rem; color:var(--texte-2); margin-top:.8rem}
.hyp-legal{font-size:.75rem; color:#8A97A3; border-top:1px solid var(--trait); margin:1.25rem 0 0; padding-top:.9rem}

@media (max-width:1240px){.arguments-grille{grid-template-columns:repeat(3,1fr)}.preuves{grid-template-columns:repeat(2,1fr)}.moteur--heros{grid-template-columns:1fr 1fr 1fr 1fr}.moteur--heros .bouton{grid-column:1 / -1}}
@media (max-width:1080px){.heros .enveloppe{grid-template-columns:1fr}}
@media (max-width:760px){.arguments-grille,.preuves{grid-template-columns:1fr}.moteur--heros{grid-template-columns:1fr 1fr}.hyp-grille{grid-template-columns:1fr}.enveloppe{padding:0 1.1rem}}
@media (max-width:520px){.moteur--heros{grid-template-columns:1fr}}

/* ==========================================================================
   LIVRAISON 0.5.1 (15/09/2026) — retours Antoine : en-tete sans debordement,
   moteur sur 2 lignes, icones des 5 raisons, etapes progressives, pied lisible.
   ========================================================================== */

/* ---- 1. en-tete : rien ne deborde, quel que soit l'ecran */
.entete .enveloppe{gap:1.25rem; flex-wrap:nowrap}
.marque{min-width:0}
.marque img{max-width:min(240px, 40vw); height:auto}
.nav{min-width:0; flex-wrap:nowrap; gap:1rem}
.nav a.lien{font-size:.88rem}
.nav .bouton{padding:.6rem .95rem; font-size:.84rem; flex-shrink:0}
@media (max-width:1400px){
  .nav{gap:.8rem}
  .nav a.lien{font-size:.84rem}
  .nav .bouton--rdv .rdv-txt{display:none}
  .nav .bouton--rdv{padding:.6rem .8rem}
  .nav .bouton--rdv .ico-cal{width:1em; height:1em; margin:0}
  .nav .bouton--rdv::after{content:"RDV"; margin-left:.4rem; font-size:.84rem}
}
@media (max-width:1180px){
  .nav{display:none}
  .nav-bascule{display:inline-flex; margin-left:auto}
  .nav.ouvert{display:flex}
  .nav.ouvert .bouton--rdv .rdv-txt{display:inline}
  .nav.ouvert .bouton--rdv::after{content:none}
}
.nav.ouvert{flex-wrap:nowrap}

/* ---- 3. moteur de l'accueil : deux lignes de deux champs, bouton pleine largeur */
.moteur--heros{grid-template-columns:1fr 1fr; max-width:none}
.moteur--heros .champ select{width:100%; text-overflow:ellipsis; font-size:.95rem; padding:.75rem .7rem}
.moteur--heros .bouton{grid-column:1 / -1; justify-self:stretch; padding:.85rem 1.2rem}
.moteur--heros .champ label{white-space:nowrap}
@media (max-width:520px){.moteur--heros{grid-template-columns:1fr}}

/* ---- 6. les 5 raisons : icones dessinees + numeros */
.argument-carte{display:flex; flex-direction:column}
.argument-carte .argument-ico{width:64px; height:64px; border-radius:18px; padding:11px; margin-bottom:.7rem; background:linear-gradient(145deg,#EEF6F2 0%,#DCEDE4 100%); box-shadow:inset 0 0 0 1px rgba(44,125,92,.18)}
.argument-carte .argument-ico svg{width:100%; height:100%; display:block}
.argument-carte--phare .argument-ico{background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); color:#fff}
.argument-carte--phare .argument-ico svg circle[fill="#fff"],.argument-carte--phare .argument-ico svg path[fill="#fff"]{fill:#1D2E4A}
.argument-num{display:inline-block; font-family:var(--data); font-size:.7rem; letter-spacing:.14em; color:var(--vert); margin-bottom:.45rem}
.argument-carte--phare .argument-num{color:#9FD5BC}
.argument-carte:hover .argument-ico{transform:translateY(-2px) rotate(-3deg); transition:transform .2s}

/* ---- 8. etapes : progression lisible (fleche de fond + numeros relies) */
.etapes{position:relative; gap:1rem; padding-top:2.2rem; isolation:isolate}
.etapes-fleche{position:absolute; left:0; right:0; top:0; width:100%; height:44px; z-index:0; opacity:.9}
.etape{z-index:1; padding:1.25rem 1.1rem 1.2rem; border:1px solid var(--trait); background:#fff; position:relative; margin-top:.4rem}
.etape::after{display:none}
.etape::before{content:counter(etape,decimal-leading-zero); counter-increment:etape; position:absolute; top:-1.15rem; left:1.1rem; width:2.3rem; height:2.3rem; border-radius:50%; background:#fff; border:2px solid var(--sauge); color:var(--vert); font-family:var(--data); font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0; box-shadow:0 4px 12px rgba(29,46,74,.1)}
.etape:nth-child(2)::before{border-color:#7FB49A}
.etape:nth-child(3)::before{border-color:#5E9F80}
.etape:nth-child(4)::before{border-color:#3F8B68}
.etape:nth-child(5)::before{border-color:var(--vert); background:var(--vert); color:#fff}
.etape:nth-child(6)::before{border-color:var(--vert); background:var(--vert); color:#fff}
.etape h3{margin-top:.6rem}
@media (max-width:1080px){.etapes{padding-top:1.6rem}.etapes-fleche{display:none}}
@media (max-width:640px){
  .etapes{padding-top:0; gap:1.4rem; margin-left:1.6rem; border-left:2px solid var(--sauge-15)}
  .etape{margin-top:0}
  .etape::before{left:-2.85rem; top:.6rem}
}

/* ---- 10. pied : logo blanc sur fond marine */
.pied img{height:64px; background:none}
.pied p{color:#C9D6D0}
.pied h4{color:#9FD5BC}
.pied a{color:#D7E0EA}
.pied a:hover{color:#fff}
.pied-bas{color:#9FB2AA; border-top-color:rgba(255,255,255,.14)}
.pied{border-top:0}

/* ==========================================================================
   17/09 — popins (rendez-vous, rappel, dossier, sortie) : tout visible d'un coup,
   plus de faux separateur, boite plus large pour les formulaires, defilement sur la boite
   ========================================================================== */
.sortie{padding:1rem; overflow-y:auto}
.sortie-boite{max-height:calc(100vh - 2rem); max-height:calc(100dvh - 2rem); overflow-y:auto; overscroll-behavior:contain}
.sortie-boite--form{max-width:680px; text-align:left; padding:1.9rem 2rem 1.5rem}
.sortie-boite--form .etiquette,.sortie-boite--form h2,.sortie-boite--form .texte{text-align:left}
.sortie-boite--form h2{font-size:1.35rem; margin-bottom:.4rem}
.sortie-boite--form .texte{margin-bottom:1rem; font-size:.9rem}
.sortie-boite--form .sortie-note{text-align:center}
.sortie-lot[hidden],.sortie-visuel[hidden],.sortie-zone[hidden],.sortie-libre[hidden]{display:none !important}
.sortie-zone{max-height:none; overflow:visible; margin-top:.6rem}
.sortie-boite .sec-form__head{display:none}            /* le titre est celui de la popin */
.sortie-boite .sec-form__lead{display:none}
.sortie-boite .sec-form__form{gap:10px 14px}
.sortie-boite .sec-form textarea{height:56px}
.sortie-visuel{margin:-.6rem -.5rem .9rem}
.sortie-visuel svg{display:block; width:100%; height:auto}
@media (max-width:560px){ .sortie{padding:.5rem} .sortie-boite,.sortie-boite--form{padding:1.4rem 1.1rem 1.1rem; max-height:calc(100dvh - 1rem)} .sortie-visuel{display:none} }

/* comparatif de l'accueil : logo Secundis a la place du libelle */
.barre .nom--logo img{height:38px; width:auto; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.comparatif .source{line-height:1.5}

/* 18/09 */
.bouton[disabled],.bouton--inactif{opacity:.55; cursor:not-allowed; pointer-events:none; box-shadow:none}
.souligne-net{text-decoration:none; background:linear-gradient(transparent 62%, rgba(88,153,125,.55) 62%); padding:0 .1em}
.barre .nom--logo img{height:46px; width:auto; filter:none; background:#fff; border-radius:8px; padding:4px 8px}
.preuve-texte b{display:inline}
.sortie-visuel{margin:-.6rem -.5rem 1.4rem}
.sortie-boite .sortie-visuel + .etiquette{margin-top:.2rem}

/* photos des cartes en <img> lazy (perf 18/09) */
.lot-photo{position:relative; overflow:hidden}
.lot-photo .lot-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.lot-photo.avec-image::after{z-index:0}

/* 18/09 : popins de leads compactes — tout tient sur un ecran de PC classique */
.sortie-boite--form{padding:1.3rem 1.6rem 1.1rem}
.sortie-boite--form .etiquette{display:none}
.sortie-boite--form h2{font-size:1.25rem; margin:0 0 .25rem}
.sortie-boite--form .texte{margin-bottom:.7rem; font-size:.86rem; line-height:1.4}
.sortie-boite .sortie-lot{padding:.5rem .7rem; margin-bottom:.7rem}
.sortie-boite .sortie-lot img{width:56px; height:42px}
.sortie-boite .sec-form__form{gap:8px 12px}
.sortie-boite .sec-form label,.sortie-boite .sec-form__label{font-size:.85rem; margin-bottom:.2rem}
.sortie-boite .sec-form input:not([type=checkbox]),.sortie-boite .sec-form select{min-height:40px; padding:.45rem .7rem}
.sortie-boite .sec-form textarea{height:40px; min-height:40px; padding:.45rem .7rem}
.sortie-boite .sec-pills button,.sortie-boite .sec-form__pills button{padding:.42rem .8rem; font-size:.85rem}
.sortie-boite .sec-form__consent,.sortie-boite .sec-form__consent p,.sortie-boite .sec-form__legal,.sortie-boite .sec-form__rgpd{font-size:.72rem; line-height:1.35; margin:.3rem 0}
.sortie-boite .sec-form__field--consent{margin-top:.2rem}
.sortie-boite .sec-form__submit,.sortie-boite .sec-form button[type=submit]{margin-top:.4rem; min-height:44px}
/* popin de sortie : visuel bien detache des textes */
.sortie-visuel{margin:-.4rem -.3rem 1.6rem}
.sortie-visuel + .etiquette{margin-top:0}
/* comparatif accueil : logo non deforme, aligne */
.barre .nom--logo{display:flex; align-items:center}
.barre .nom--logo img{height:34px !important; width:auto !important; max-width:150px; object-fit:contain; background:transparent; padding:0; border-radius:0}
.sortie-boite .sec-f label{font-size:.85rem; margin-bottom:.2rem}
.sortie-boite .sec-f input:not([type=checkbox]),.sortie-boite .sec-f select{min-height:40px; padding:.45rem .7rem}
.sortie-boite .sec-consent,.sortie-boite .sec-consent p,.sortie-boite .sec-check{font-size:.72rem; line-height:1.35; margin:.2rem 0}
.sortie-boite .sec-f--full .sec-pills{gap:.35rem}
.sortie-boite .sec-form__lot{padding:.5rem .7rem}

/* 18/09 : confirmation de rendez-vous compacte, agenda visible d'un coup */
.sortie-boite--agenda{max-width:860px}
.sec-form--done .sec-form__done{text-align:center; padding:0}
.sec-form--done .sec-form__check{width:44px; height:44px; font-size:1.3rem; margin:0 auto .5rem}
.sec-form--done .sec-form__done h3{font-size:1.25rem; margin:0 0 .15rem}
.sec-form--done .sec-form__done > p{margin:0 0 .8rem; font-size:.95rem; color:var(--texte-2)}
.sec-form--done .sec-form__meeting{border-top:1px solid var(--trait); padding-top:.8rem; margin-top:.4rem}
.sec-form--done .sec-form__meeting-title{font-size:.95rem; margin:0 0 .15rem}
.sec-form--done .sec-form__meeting-sub{font-size:.82rem; margin:0 0 .6rem; color:var(--texte-2)}
.sortie-boite--agenda .sec-form__meeting-frame,.sortie-boite--agenda .sec-form__meeting-frame iframe{min-height:640px}
@media (max-height:820px){ .sortie-boite--agenda .sec-form__meeting-frame,.sortie-boite--agenda .sec-form__meeting-frame iframe{min-height:560px} }

/* formulaires de lead : un formulaire masque doit vraiment disparaitre (display:grid ignore [hidden]) */
.sec-form form[hidden],.sec-form .sec-form__form[hidden],.sec-form__done[hidden],.sec-form__meeting[hidden],.sec-form__plan[hidden]{display:none !important}
.sec-form--done .sec-form__done{position:relative; z-index:1; background:#fff}

/* confirmation : plus rien au-dessus de l'agenda, hauteur maximale utilisee */
.sortie-boite--agenda{max-width:900px; padding:1rem 1.2rem 1rem}
.sortie-boite--agenda .sec-form__lot{display:none}
.sortie-boite--agenda .sec-form--done .sec-form__check{width:36px; height:36px; font-size:1.1rem; margin:0 auto .35rem}
.sortie-boite--agenda .sec-form--done .sec-form__done h3{font-size:1.1rem}
.sortie-boite--agenda .sec-form--done .sec-form__done > p{margin:0 0 .5rem}
.sortie-boite--agenda .sec-form__meeting{border-top:0; padding-top:.2rem; margin-top:.2rem}
.sortie-boite--agenda .sec-form__meeting-title{display:none}
.sortie-boite--agenda .sec-form__meeting-sub{margin-bottom:.4rem}
.sortie-boite--agenda .sec-form__meeting-frame,.sortie-boite--agenda .sec-form__meeting-frame iframe{min-height:620px; height:620px; max-height:78vh}

/* 21/09 : « Le marché secondaire » se distingue des rubriques de lots */
.nav .lien--guide,.nav .menu-guide > a{color:#3B2A63; font-weight:600; margin-left:1.15rem; position:relative}
.nav .lien--guide::before,.nav .menu-guide > a::before{content:'-'; position:absolute; left:calc(-1.15rem / 2 - 1.15rem / 2 - .2rem); top:50%; transform:translateY(-50%); color:var(--texte-2); font-weight:400}
.nav .lien--guide:hover,.nav .menu-guide > a:hover{color:#5B3FA0}
@media (max-width:900px){ .nav .lien--guide,.nav .menu-guide > a{margin-left:0; padding-top:.6rem; border-top:1px solid var(--trait)} .nav .lien--guide::before,.nav .menu-guide > a::before{display:none} }

/* 21/09 : mobile — la mention d'étapes ne doit jamais chevaucher le formulaire */
@media (max-width:640px){ .sortie-note{display:none !important} }
/* 21/09 : agenda HubSpot sur mobile — le bouton de validation doit être atteignable */
@media (max-width:640px){
  /* l'agenda garde une hauteur mesurée : le pied « Confirmer » de HubSpot reste juste sous les champs */
  .sortie-boite--agenda .sec-form__meeting-frame,.sortie-boite--agenda .sec-form__meeting-frame iframe{min-height:560px !important; height:min(70dvh,620px) !important}
  .sortie-boite--agenda{max-height:calc(100dvh - .5rem); overflow-y:auto; -webkit-overflow-scrolling:touch}
}

/* 21/09 : menu déroulant — jamais de tiret séparateur en mode colonne, et retour propre au menu
   horizontal dès que la fenêtre s'élargit (le menu restait déployé en pleine largeur). */
.nav.ouvert .lien--guide::before,.nav.ouvert .menu-guide > a::before{display:none !important}
.nav.ouvert .lien--guide,.nav.ouvert .menu-guide > a{margin-left:0; padding-top:.7rem}
@media (min-width:901px){
  .nav.ouvert{position:static; display:flex !important; flex-direction:row; background:none; border-bottom:0; padding:0; box-shadow:none; max-height:none; overflow:visible}
  .nav.ouvert a{padding:0; border-bottom:0}
  .nav.ouvert .bouton{margin-top:0}
  .nav.ouvert .lien--guide::before,.nav.ouvert .menu-guide > a::before{display:block !important}
  .nav.ouvert .lien--guide,.nav.ouvert .menu-guide > a{margin-left:1.6rem; padding-top:0; border-top:0}
  .nav-bascule{display:none}
}

/* 21/09 : « Le marché secondaire » à la même distance que les rubriques, boutons collés à droite */
.nav .bouton--fil:not(.nav-tous-lots){margin-left:auto}
@media (min-width:901px){ .nav .lien--guide + .bouton,.nav .menu-guide + li,.nav .menu-guide ~ .bouton{margin-left:2rem} }

/* 21/09 : le cadre de l'agenda défile en interne — le bouton « Confirmer » de HubSpot est atteignable
   sans faire défiler toute la popin, et le bouton « Revenir au site » reste visible juste en dessous. */
.sec-form__meeting-frame{overflow:auto; -webkit-overflow-scrolling:touch}
.sec-form__retour{position:sticky; bottom:0; background:#fff; z-index:2}