/* ============================================================================
   POLICE AUTO-HÉBERGÉE
   Manrope, format variable, sous-ensembles latin et latin étendu.
   Aucune requête vers un service tiers au chargement de la page.
   ========================================================================= */
@font-face{ font-family:"Manrope"; font-style:normal; font-weight:200 800;
  font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC;
  src:url("fonts/manrope.woff2") format("woff2"); }
@font-face{ font-family:"Manrope"; font-style:normal; font-weight:200 800;
  font-display:swap; unicode-range:U+0100-02BA,U+1E00-1EFF;
  src:url("fonts/manrope-ext.woff2") format("woff2"); }

/* ============================================================================
   PRIUS ÉNERGIES — feuille de style unique, partagée par toutes les pages.
   Fond froid clair, encre bleu nuit, marine institutionnel et orange flamme
   réservé aux accents (urgence, épargne d'énergie). Angles francs, ombres
   discrètes : une entreprise du bâtiment, pas une plateforme.
   ========================================================================= */
:root{
  --papier:#F5F6FB; --papier-2:#E9EBF5; --carte:#FFFFFF;
  --nuit:#14183A; --nuit-2:#42476B; --nuit-3:#666D91;
  --filet:rgba(27,36,121,.14); --filet-2:rgba(27,36,121,.26);
  --marine:#1B2479; --marine-s:#12175C; --marine-f:#E9EAF8;
  --flamme:#E4581B; --flamme-f:#FDEEE3;
  --degrade:linear-gradient(90deg,#00A8D5 0%,#F78050 58%,#E8492B 100%);
  --valide:#0E6B3F; --valide-f:#E8F5EC;
  --vigil:#A93315; --vigil-f:#FBEFE8;
  --gout:clamp(18px,4vw,84px); --large:1280px; --lecture:68ch;
  --fonte:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--papier); }
body{ margin:0; background:var(--papier); color:var(--nuit); font-family:var(--fonte);
  font-size:16px; line-height:1.64; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,select{ font:inherit; color:inherit; }
img{ display:block; max-width:100%; height:auto; }
[hidden]{ display:none !important; }
.masque{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
:focus-visible{ outline:2.5px solid var(--marine); outline-offset:3px; border-radius:3px; }
.cadre{ max-width:var(--large); margin-inline:auto; padding-inline:var(--gout); }
[id]{ scroll-margin-top:96px; }
.evade{ position:absolute; left:-9999px; top:0; z-index:200; padding:12px 18px; background:var(--marine); color:#fff; }
.evade:focus{ left:0; }

/* --- typographie --------------------------------------------------------- */
.titre-xl{ font-size:clamp(33px,5vw,64px); line-height:1.02; letter-spacing:-.045em; font-weight:800; text-wrap:balance; }
.titre-l{ font-size:clamp(24px,3.4vw,42px); line-height:1.08; letter-spacing:-.038em; font-weight:800; text-wrap:balance; }
.titre-m{ font-size:clamp(18px,1.9vw,22px); line-height:1.26; letter-spacing:-.02em; font-weight:700; }
.titre-s{ font-size:17px; font-weight:700; letter-spacing:-.015em; line-height:1.32; }
.chapo{ font-size:clamp(16px,1.2vw,18.5px); line-height:1.6; color:var(--nuit-2); text-wrap:pretty; }
.badge{ font-size:13.5px; font-weight:700; letter-spacing:0; color:var(--marine); }
.accent{ color:var(--marine); }
.synthese{ margin-top:14px; font-size:clamp(16.5px,1.3vw,19px); line-height:1.52; font-weight:500; text-wrap:pretty; }
.tabnum{ font-variant-numeric:tabular-nums; }

/* --- actions ------------------------------------------------------------- */
.cta{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 28px; border-radius:100px;
  font-weight:700; font-size:15px; color:#fff; border:1.5px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,#2A34A0 0%,#1B2479 52%,#151C64 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 14px 30px -14px rgba(27,36,121,.85);
  transition:box-shadow 220ms, transform 180ms, filter 220ms; }
.cta:hover{ transform:translateY(-2px); filter:brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 18px 36px -14px rgba(27,36,121,.95),
    0 6px 22px -8px rgba(232,73,43,.35); }
.cta--vide{ background:transparent; color:var(--nuit); border-color:var(--filet-2); box-shadow:none; }
.cta--vide:hover{ background:var(--carte); border-color:var(--nuit); transform:none; }
.cta[disabled]{ opacity:.35; pointer-events:none; }
.groupe-cta{ display:flex; flex-wrap:wrap; gap:11px; margin-top:24px; }

/* --- barre de navigation --------------------------------------------------
   Bandeau plein en haut de page ; au défilement il reste collé et gagne
   une ombre portée — pas de pilule flottante ici, la barre garde toute
   la largeur, seul un liseré sapin apparaît sous le logo. */
.barre{ position:sticky; top:0; z-index:70; background:var(--papier);
  border-bottom:1px solid var(--filet); padding-block:14px 10px;
  transition:background 260ms ease, border-color 260ms ease, padding 260ms ease; }
.barre__int{ display:flex; align-items:center; gap:clamp(8px,1.6vw,22px); height:74px;
  border-radius:100px; border:1px solid transparent; padding-inline:0;
  transition:background 260ms ease, box-shadow 260ms ease, border-color 260ms ease,
    padding 260ms ease, height 260ms ease; }
.barre[data-colle]{ background:transparent; border-bottom-color:transparent; padding-block:18px 8px; }
.barre[data-colle] .barre__int{ height:64px; padding-inline:14px;
  background:var(--carte); border-color:var(--filet);
  box-shadow:0 18px 40px -20px rgba(20,25,70,.5); }
.barre[data-colle] .embleme img{ height:54px; }
@media (max-width:900px){ .barre[data-colle] .embleme img{ height:46px; } }
@media (prefers-reduced-motion:reduce){ .barre, .barre__int{ transition:none; } }

.embleme{ display:flex; align-items:center; }
.embleme img{ display:block; height:66px; width:auto; }
@media (max-width:900px){ .embleme img{ height:52px; } }

.barre nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.barre nav a{ font-size:14px; font-weight:500; color:var(--nuit-2); padding:10px 15px; border-radius:100px;
  transition:color 180ms ease, background 180ms ease; }
.barre nav a:hover{ color:var(--nuit); background:var(--papier-2); }
.barre nav a[aria-current]{ color:var(--nuit); background:var(--papier-2); font-weight:700; }
.barre .cta{ padding:11px 18px; font-size:14px; }
.nav-tog{ display:none; margin-left:auto; padding:9px 16px; border:1px solid var(--filet-2); border-radius:100px; font-size:14px; font-weight:600; }
@media (max-width:1020px){
  .barre nav{ display:none; position:absolute; top:calc(100% + 6px); left:10px; right:10px; flex-direction:column; align-items:stretch; gap:0;
    background:var(--carte); border:1px solid var(--filet); border-radius:20px; padding:8px 18px 14px;
    box-shadow:0 22px 40px -20px rgba(20,25,70,.45); }
  .barre nav[data-deplie]{ display:flex; }
  .barre nav a{ padding:13px 12px; border-radius:12px; border-bottom:1px solid var(--filet); }
  .barre nav a:last-child{ border-bottom:none; }
  .barre nav a[aria-current], .barre nav a:hover{ background:var(--papier-2); }
  .nav-tog{ display:block; }
  .barre .cta{ margin-left:8px; }
}

/* --- apparitions au défilement ------------------------------------------- */
.js .app{ opacity:0; transform:translateY(14px); transition:opacity 480ms ease, transform 480ms ease; }
.js .app[data-vu]{ opacity:1; transform:none; }
.js .trio .app:nth-child(2), .js .parcours .app:nth-child(2){ transition-delay:70ms; }
.js .trio .app:nth-child(3), .js .parcours .app:nth-child(3){ transition-delay:140ms; }
.js .parcours .app:nth-child(4){ transition-delay:210ms; }
@media (prefers-reduced-motion:reduce){ .js .app{ opacity:1; transform:none; transition:none; transition-delay:0ms; } }

/* --- entrée (héros) ------------------------------------------------------ */
.entree{ padding-block:clamp(34px,5.5vw,74px) clamp(40px,6vw,84px); position:relative; }
.entree::before{ content:""; position:absolute; inset:0 0 auto 0; height:100%; pointer-events:none;
  background:radial-gradient(900px 420px at 82% -8%, rgba(27,36,121,.08), transparent 62%); }
.entree__cols{ position:relative; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(24px,4vw,64px); align-items:start; }
@media (max-width:1020px){ .entree__cols{ grid-template-columns:1fr; } }

.sceau{ display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 9px; border:1px solid var(--flamme);
  border-radius:100px; background:var(--flamme-f); font-size:13px; font-weight:600; color:var(--nuit); margin-bottom:18px; }
.sceau svg{ color:var(--flamme); flex:none; }
.sceau b{ font-weight:800; }

.parole{ margin-top:26px; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; background:var(--carte); border:1px solid var(--filet); border-radius:14px; max-width:520px; }
.parole__id{ display:flex; align-items:center; gap:12px; }
.parole__rond{ flex:none; width:52px; height:52px; border-radius:50%; background:var(--marine); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:18px; letter-spacing:.02em; }
.parole__id b{ display:block; font-size:14.5px; }
.parole__id span{ display:block; font-size:13px; color:var(--nuit-3); }
.parole__tel{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:100px;
  border:1.5px solid var(--marine); color:var(--marine); font-weight:700; font-size:14px; transition:background 180ms; }
.parole__tel:hover{ background:var(--marine-f); }

/* --- simulateur de devis -------------------------------------------------- */
.simu{ background:var(--carte); border:1px solid var(--filet); border-radius:24px;
  box-shadow:0 8px 18px -12px rgba(20,25,70,.2), 0 34px 70px -34px rgba(20,25,70,.55); overflow:hidden; }
.simu__haut{ padding:20px 22px 0; }
.simu__ligne{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.simu__pas{ font-size:13px; font-weight:700; color:var(--nuit-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.simu__trace{ margin-top:12px; height:4px; border-radius:4px; background:var(--papier-2); overflow:hidden; }
.simu__trace i{ display:block; height:100%; width:25%; background:var(--degrade); border-radius:4px;
  transition:width 300ms ease; }
.simu__corps{ padding:18px 22px 8px; }
.recap{ display:flex; flex-wrap:wrap; gap:7px; padding:0 22px; }
.recap:empty{ display:none; }
.recap b{ font-size:12.5px; font-weight:600; padding:5px 11px; background:var(--marine-f); color:var(--marine-s);
  border-radius:100px; }

.phase{ display:none; border:none; padding:0; margin:0; }
.phase[data-active]{ display:block; }
.phase__q{ font-size:18px; font-weight:700; letter-spacing:-.015em; padding:0; }
.phase__note{ margin-top:5px; font-size:13.5px; color:var(--nuit-3); }

.grille-choix{ margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:560px){ .grille-choix{ grid-template-columns:repeat(2,1fr); } }
.pastille{ display:flex; align-items:center; gap:8px; padding:11px 14px; border:1px solid var(--filet-2);
  border-radius:100px; font-size:13.5px; font-weight:600; text-align:left; line-height:1.25;
  transition:border-color 160ms, background 160ms; }
.pastille i{ flex:none; width:15px; height:15px; border:1.5px solid var(--filet-2); border-radius:50%; position:relative; }
.pastille:hover{ border-color:var(--marine); }
.pastille[aria-pressed="true"]{ border-color:var(--marine); background:var(--marine-f); }
.pastille[aria-pressed="true"] i{ border-color:var(--marine); }
.pastille[aria-pressed="true"] i::after{ content:""; position:absolute; inset:2.5px; border-radius:50%; background:var(--marine); }

.segment{ margin-top:16px; }
.segment__t{ font-size:13.5px; font-weight:700; margin-bottom:8px; }
.segment__g{ display:flex; gap:8px; flex-wrap:wrap; }
.jeton{ padding:10px 18px; border:1px solid var(--filet-2); border-radius:100px; font-size:14px; font-weight:600;
  transition:border-color 160ms, background 160ms; }
.jeton:hover{ border-color:var(--marine); }
.jeton[aria-pressed="true"]{ border-color:var(--marine); background:var(--marine); color:#fff; }

.saisie{ margin-top:14px; }
.saisie label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; }
.saisie input{ width:100%; padding:12px 16px; border:1px solid var(--filet-2); border-radius:14px;
  background:var(--carte); font-size:15px; }
.saisie input:focus{ border-color:var(--marine); outline:none; box-shadow:0 0 0 3px rgba(27,36,121,.16); }
.paire{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:560px){ .paire{ grid-template-columns:1fr; } }

.simu__alerte{ margin:10px 22px 0; padding:11px 14px; background:var(--vigil-f); color:var(--vigil);
  border-radius:10px; font-size:14px; font-weight:600; }
.simu__pied{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 22px 6px; }
.btn-prec{ font-size:14px; font-weight:600; color:var(--nuit-3); padding:10px 14px; border-radius:100px; }
.btn-prec:hover{ background:var(--papier-2); }
.btn-prec:hover{ color:var(--nuit); }
.simu__mention{ padding:10px 22px 20px; font-size:12.5px; color:var(--nuit-3); line-height:1.55; }
.simu__mention a{ text-decoration:underline; }

.fin{ display:none; padding:44px 26px; text-align:center; }
.fin[data-la]{ display:block; }
.fin__rond{ width:56px; height:56px; margin:0 auto 16px; border-radius:50%; background:var(--valide-f);
  color:var(--valide); display:grid; place-items:center; font-size:24px; font-weight:800; }
.fin p + p{ margin-top:10px; color:var(--nuit-2); }
.fin__memo{ margin-top:18px; font-size:13.5px; color:var(--nuit-3); }

/* --- rangée d'engagements ------------------------------------------------ */
.serments{ border-block:1px solid var(--filet); background:var(--carte); }
.serments__g{ display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .serments__g{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .serments__g{ grid-template-columns:1fr; } }
.serments__c{ padding:22px 20px; border-left:1px solid var(--filet); }
.serments__c:first-child{ border-left:none; }
@media (max-width:900px){ .serments__c{ border-top:1px solid var(--filet); }
  .serments__c:nth-child(-n+2){ border-top:none; }
  .serments__c:nth-child(odd){ border-left:none; } }
@media (max-width:540px){ .serments__c{ border-left:none !important; }
  .serments__c + .serments__c{ border-top:1px solid var(--filet); } }
.serments__c svg{ color:var(--marine); margin-bottom:10px; width:22px; height:22px; }
.serments__c b{ display:block; font-size:15px; letter-spacing:-.01em; }
.serments__c span{ display:block; margin-top:4px; font-size:13.5px; color:var(--nuit-3); line-height:1.5; }

/* --- blocs de page -------------------------------------------------------- */
.bloc{ padding-block:clamp(44px,7vw,92px); }
.bloc--fond{ background:var(--carte); border-block:1px solid var(--filet); }
.bloc--creme{ background:var(--papier-2); }
.bloc__tete{ max-width:820px; }
.bloc__tete .titre-l::after{ content:""; display:block; width:64px; height:3.5px; margin-top:14px;
  border-radius:4px; background:var(--degrade); }
.appel .titre-l::after{ display:none; }
.bloc__tete .chapo{ margin-top:14px; }

/* --- rail des contrats ---------------------------------------------------- */
.rail{ margin-top:26px; display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.rail__lien{ font-size:14.5px; font-weight:700; color:var(--marine); white-space:nowrap; }
.rail__lien:hover{ text-decoration:underline; }
.rail__piste{ margin-top:14px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(258px,1fr);
  gap:12px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory; }
.rail__piste::-webkit-scrollbar{ height:8px; }
.rail__piste::-webkit-scrollbar-thumb{ background:var(--filet-2); border-radius:8px; }
.fiche-c{ position:relative; scroll-snap-align:start; display:flex; flex-direction:column; gap:9px; padding:22px;
  background:var(--carte); border:1px solid var(--filet); border-radius:20px; overflow:hidden;
  transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.fiche-c::before{ content:""; position:absolute; inset:0 0 auto 0; height:3.5px;
  background:var(--degrade); opacity:.55; transition:opacity 220ms; }
.fiche-c--epargne::before{ opacity:.55; }
.fiche-c:hover{ transform:translateY(-4px); border-color:var(--filet-2);
  box-shadow:0 6px 14px -10px rgba(20,25,70,.18), 0 24px 44px -22px rgba(20,25,70,.5); }
.fiche-c:hover::before{ opacity:1; }
.fiche-c h3{ font-size:16.5px; font-weight:700; letter-spacing:-.015em; }
.fiche-c p{ font-size:13.8px; color:var(--nuit-2); line-height:1.55; flex:1; }
.fiche-c__pour{ display:flex; gap:6px; flex-wrap:wrap; }
.fiche-c__pour span{ font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:100px;
  background:var(--papier); border:1px solid var(--filet); color:var(--nuit-2); }

/* --- tableau -------------------------------------------------------------- */
.tableau-cadre{ margin-top:28px; background:var(--carte); border:1px solid var(--filet); border-radius:14px; padding:6px; }
.tableau-defile{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:14px; }
caption{ text-align:left; padding:14px 14px 10px; font-size:13.5px; color:var(--nuit-2); caption-side:top; }
th,td{ padding:11px 14px; text-align:left; border-top:1px solid var(--filet); vertical-align:top; }
thead th{ border-top:none; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--nuit-3); }
tbody th{ font-weight:700; }
tbody th a{ color:var(--marine); }
tbody th a:hover{ text-decoration:underline; }
td.centre{ white-space:nowrap; }
.oui{ color:var(--valide); font-weight:700; }
.selon{ color:var(--flamme); font-weight:700; }
.tableau-note{ margin-top:12px; font-size:13px; color:var(--nuit-3); line-height:1.6; }

/* --- parcours (méthode) --------------------------------------------------- */
.parcours{ margin-top:30px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; counter-reset:jalon; }
@media (max-width:1000px){ .parcours{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .parcours{ grid-template-columns:1fr; } }
.jalon{ padding:24px 22px; background:var(--carte); border:1px solid var(--filet); border-radius:20px; }
.jalon__n{ font-size:42px; font-weight:800; letter-spacing:-.04em; line-height:1;
  background:var(--degrade); -webkit-background-clip:text; background-clip:text; color:transparent; }
.jalon h3{ margin-top:8px; }
.jalon > p{ margin-top:9px; font-size:14px; color:var(--nuit-2); line-height:1.55; }
.jalon ul{ margin-top:12px; }
.jalon ul li{ position:relative; padding-left:16px; font-size:13.5px; color:var(--nuit-2); line-height:1.6; }
.jalon ul li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--marine); }

/* --- trio de tuiles ------------------------------------------------------- */
.trio{ margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:900px){ .trio{ grid-template-columns:1fr; } }
.tuile{ padding:24px; background:var(--carte); border:1px solid var(--filet); border-radius:20px; }
.tuile--lien{ display:flex; flex-direction:column; gap:9px; transition:transform 200ms, box-shadow 200ms; }
.tuile--lien:hover{ transform:translateY(-4px);
  box-shadow:0 6px 14px -10px rgba(20,25,70,.18), 0 24px 44px -22px rgba(20,25,70,.5); }
.tuile__n{ font-size:13px; font-weight:700; color:var(--flamme); }
.tuile p{ font-size:14px; color:var(--nuit-2); line-height:1.58; }
.tuile__fleche{ margin-top:auto; font-size:14px; font-weight:700; color:var(--marine); width:fit-content;
  background:linear-gradient(var(--degrade)) left bottom / 0 2px no-repeat; padding-bottom:3px;
  transition:background-size 260ms ease; }
.tuile--lien:hover .tuile__fleche{ background-size:100% 2px; }

/* --- résumé (bloc GEO) ---------------------------------------------------- */
.abrege{ margin-top:6px; max-width:var(--lecture); }
.abrege p{ font-size:15.5px; line-height:1.66; }
.abrege ul{ margin-top:14px; }
.abrege ul li{ position:relative; padding:9px 0 9px 24px; border-bottom:1px solid var(--filet);
  font-size:15px; line-height:1.6; }
.abrege ul li::before{ content:"—"; position:absolute; left:0; color:var(--marine); font-weight:700; }
.abrege ul li:last-child{ border-bottom:none; }

/* --- questions ------------------------------------------------------------ */
.quest{ margin-top:26px; max-width:860px; }
.quest details{ border-bottom:1px solid var(--filet); }
.quest details:first-child{ border-top:1px solid var(--filet); }
.quest summary{ cursor:pointer; padding:17px 34px 17px 2px; font-size:16px; font-weight:700;
  letter-spacing:-.01em; list-style:none; position:relative; }
.quest summary::-webkit-details-marker{ display:none; }
.quest summary::after{ content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--filet-2); border-radius:50%;
  font-size:19px; font-weight:500; color:var(--marine); transition:transform 220ms, background 220ms, color 220ms; }
.quest details[open] summary::after{ transform:translateY(-50%) rotate(45deg);
  background:var(--marine); color:#fff; border-color:var(--marine); }
.quest .dev{ padding:0 2px 20px; max-width:var(--lecture); }
.quest .dev p{ font-size:15px; color:var(--nuit-2); line-height:1.66; }
.quest .dev p + p{ margin-top:10px; }
.quest .dev a{ color:var(--marine); font-weight:600; }
.quest .dev a:hover{ text-decoration:underline; }

/* --- portrait ------------------------------------------------------------- */
.portrait{ display:grid; grid-template-columns:180px 1fr; gap:clamp(20px,3vw,40px); align-items:center;
  padding:clamp(22px,3vw,38px); background:var(--carte); border:1px solid var(--filet); border-radius:18px; }
@media (max-width:700px){ .portrait{ grid-template-columns:1fr; } }
.portrait__medaille{ width:150px; height:150px; border-radius:50%; background:var(--marine); color:#fff;
  display:grid; place-items:center; font-size:46px; font-weight:800; letter-spacing:.02em; }
.portrait p{ margin-top:11px; font-size:15px; color:var(--nuit-2); line-height:1.64; }
.portrait a{ color:var(--marine); font-weight:600; }

/* --- appel final ---------------------------------------------------------- */
.appel{ position:relative; overflow:hidden; color:#EEF4FA; padding-block:clamp(46px,7vw,90px);
  background:linear-gradient(160deg,#171C48 0%,#101433 56%,#0C0F2A 100%); }
.appel::before{ content:""; position:absolute; inset:auto -10% -55% auto; width:640px; height:640px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(247,128,80,.28) 0%, rgba(232,73,43,.12) 42%, transparent 70%); }
.appel::after{ content:""; position:absolute; inset:0 0 auto 0; height:3.5px; background:var(--degrade); }
.appel .cadre{ position:relative; }
.appel__cols{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px,4vw,70px); align-items:center; }
@media (max-width:940px){ .appel__cols{ grid-template-columns:1fr; } }
.appel .chapo{ color:#AFC2D4; }
.appel .cta{ background:#fff; color:var(--nuit); border-color:#fff; box-shadow:none; }
.appel .cta:hover{ background:var(--papier-2); }
.appel .cta--vide{ background:transparent; color:#EFF5F1; border-color:rgba(255,255,255,.34); }
.appel .cta--vide:hover{ background:rgba(255,255,255,.08); border-color:#fff; }
.appel__points div{ display:flex; gap:12px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.14);
  font-size:14.5px; line-height:1.55; color:#C4D3E1; }
.appel__points div:last-child{ border-bottom:none; }
.appel__points b{ color:#F09A5F; font-weight:800; flex:none; }

/* --- socle (pied de page) -------------------------------------------------- */
.socle{ background:#101433; color:#C6CCE8; padding-block:52px 28px; position:relative; }
.socle::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:rgba(255,255,255,.08); }
.socle__logo{ height:64px; width:auto; margin-bottom:14px; }
.socle__cols{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:clamp(20px,3vw,44px); }
@media (max-width:940px){ .socle__cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .socle__cols{ grid-template-columns:1fr; } }
.socle h2{ font-size:14px; font-weight:800; letter-spacing:-.01em; margin-bottom:10px; color:#fff; }
.socle p, .socle li{ font-size:13.8px; color:#B9C0E2; line-height:1.9; }
.socle a:hover{ color:#fff; }
.socle__reg{ margin-top:28px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px; color:#8F97C4; line-height:1.7; max-width:900px; }
.socle__reg a{ color:#B9C0E2; text-decoration:underline; }
.socle__fin{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:8px 22px; font-size:13px; color:#8F97C4; }
.socle__fin a:hover{ color:#fff; }

/* --- fil d'Ariane ---------------------------------------------------------- */
.fil{ padding-top:22px; font-size:13px; color:var(--nuit-3); }
.fil a{ color:var(--nuit-3); }
.fil a:hover{ color:var(--marine); }
.fil span{ margin-inline:6px; }

/* --- gabarit article ------------------------------------------------------- */
.papier{ padding-block:clamp(30px,5vw,60px) clamp(44px,7vw,92px); }
.papier__grille{ display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:clamp(26px,4vw,64px); }
@media (max-width:1000px){ .papier__grille{ grid-template-columns:1fr; } .repere{ display:none; } }
.proses{ max-width:var(--lecture); }
.proses > p{ margin-top:16px; font-size:16px; line-height:1.72; color:var(--nuit-2); }
.proses > p:first-of-type{ margin-top:22px; }
.proses h2{ margin-top:38px; font-size:clamp(20px,2.4vw,27px); letter-spacing:-.02em; font-weight:700; }
.proses h3{ margin-top:26px; font-size:18px; font-weight:700; letter-spacing:-.015em; }
.proses ul, .proses ol{ margin-top:14px; }
.proses ul li{ position:relative; padding:5px 0 5px 22px; font-size:15.5px; line-height:1.66; color:var(--nuit-2); }
.proses ul li::before{ content:""; position:absolute; left:2px; top:.85em; width:7px; height:7px;
  border-radius:50%; background:var(--marine); }
.proses ol{ counter-reset:num; }
.proses ol li{ position:relative; padding:5px 0 5px 30px; font-size:15.5px; line-height:1.66;
  color:var(--nuit-2); counter-increment:num; }
.proses ol li::before{ content:counter(num) "."; position:absolute; left:2px; font-weight:800; color:var(--marine); }
.proses a{ color:var(--marine); font-weight:600; }
.proses a:hover{ text-decoration:underline; }
.proses strong{ color:var(--nuit); }
.encart{ margin-top:22px; padding:18px 20px; background:var(--marine-f); border-left:3px solid var(--marine);
  border-radius:0 12px 12px 0; font-size:15px; line-height:1.66; }
.encart--flamme{ background:var(--flamme-f); border-left-color:var(--flamme); }
.repere{ position:sticky; top:98px; align-self:start; }
.repere h2{ font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--nuit-3); margin-bottom:10px; }
.repere a{ display:block; padding:7px 0 7px 14px; font-size:13.8px; color:var(--nuit-2);
  border-left:2px solid var(--filet); line-height:1.4; }
.repere a:hover{ color:var(--nuit); }
.repere a[data-ici]{ color:var(--marine); font-weight:700; border-left-color:var(--marine); }
.signature{ margin-top:34px; padding-top:18px; border-top:1px solid var(--filet); font-size:13.5px; color:var(--nuit-3); }

/* --- consentement ---------------------------------------------------------- */
.consentement{ position:fixed; left:16px; right:16px; bottom:16px; z-index:120; max-width:520px; margin-inline:auto;
  background:var(--carte); border:1px solid var(--filet-2); border-radius:14px; padding:18px 20px;
  box-shadow:0 26px 54px -26px rgba(20,25,70,.6); opacity:0; transform:translateY(14px);
  transition:opacity 280ms, transform 280ms; }
.consentement[data-visible]{ opacity:1; transform:none; }
.consentement p{ font-size:14px; line-height:1.6; color:var(--nuit-2); }
.consentement__act{ display:flex; gap:9px; justify-content:flex-end; margin-top:14px; }
.consentement__act .cta{ padding:10px 18px; font-size:14px; }

/* --- impression ------------------------------------------------------------ */
@media print{
  .barre,.socle,.appel,.consentement,.simu,.evade{ display:none !important; }
  body{ background:#fff; }
}

/* --- visuels et galeries ---------------------------------------------------
   Photos en 4:3, largeur fluide, chargées en différé ; la galerie passe en
   une colonne sur mobile. Les cartouches de marques s'alignent en rangée et
   réduisent la hauteur des logos sur petit écran. */
.galerie{ margin-top:26px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.galerie--seule{ grid-template-columns:minmax(0,860px); }
@media (max-width:760px){ .galerie{ grid-template-columns:1fr; } }
.visuel{ margin:0; background:var(--carte); border:1px solid var(--filet); border-radius:20px; overflow:hidden; }
.visuel img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.visuel figcaption{ padding:10px 14px; font-size:13px; color:var(--nuit-3); line-height:1.5; border-top:1px solid var(--filet); }

.marques{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px 12px; align-items:stretch; }
.marques li{ display:flex; align-items:center; background:var(--carte); border:1px solid var(--filet);
  border-radius:100px; padding:11px 20px; transition:transform 200ms, box-shadow 200ms; }
.marques li:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -18px rgba(20,25,70,.45); }
.marques img{ display:block; height:26px; width:auto; max-width:150px; object-fit:contain; }
@media (max-width:560px){ .marques li{ padding:8px 12px; } .marques img{ height:20px; max-width:118px; } }

.portrait__photo{ width:180px; height:180px; border-radius:16px; object-fit:cover; }
@media (max-width:700px){ .portrait__photo{ width:100%; height:auto; aspect-ratio:4/3; } }

/* --- barre d'appel mobile --------------------------------------------------
   Présente uniquement sur les pages dépannage/urgence : fixée en bas
   d'écran sur mobile, invisible au-delà de 760px. Respecte l'encoche
   des iPhone (safe-area) et laisse la place au pied de page. */
.barre-appel{ display:none; }
@media (max-width:760px){
  .barre-appel{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex;
    align-items:center; justify-content:center; gap:10px; padding:14px 18px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
    background:var(--marine); color:#fff; font-weight:800; font-size:16.5px;
    letter-spacing:.01em; box-shadow:0 -10px 26px -14px rgba(20,25,70,.55); }
  .barre-appel svg{ flex:none; }
  .barre-appel small{ font-weight:600; font-size:12px; opacity:.85; display:block; letter-spacing:.04em; }
  body:has(.barre-appel) .socle{ padding-bottom:110px; }
}
@media print{ .barre-appel{ display:none !important; } }

/* --- héros photo -----------------------------------------------------------
   Variante de l'entrée pour l'accueil : l'image couvre toute la section,
   un voile navy dégradé assure la lisibilité du texte passé en blanc.
   Le formulaire garde sa carte blanche. */
.entree--photo{ position:relative; overflow:hidden; isolation:isolate;
  padding-block:clamp(44px,6vw,96px) clamp(48px,6.5vw,100px); }
.entree--photo::before{ display:none; }
.entree__fond{ position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  object-fit:cover; object-position:62% 42%; }
.entree--photo::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(16,20,52,.92) 0%, rgba(16,20,52,.78) 34%,
    rgba(16,20,52,.42) 62%, rgba(16,20,52,.28) 100%); }
@media (max-width:1020px){
  .entree--photo::after{ background:linear-gradient(180deg, rgba(16,20,52,.88) 0%,
    rgba(16,20,52,.78) 55%, rgba(16,20,52,.9) 100%); }
  .entree__fond{ object-position:66% 40%; }
}
.entree--photo h1{ color:#fff; }
.entree--photo .accent{ color:#FFB183; }
.entree--photo .chapo{ color:#D7DCF2; }
.entree--photo .chapo b{ color:#fff; }
.entree--photo .sceau{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.42);
  color:#fff; backdrop-filter:blur(3px); }
.entree--photo .sceau svg{ color:#FFB183; }
.entree--photo .parole{ background:rgba(255,255,255,.97); }

/* --- en-tête fondu sur le héros photo (accueil) ------------------------------
   En haut de l'accueil, la barre devient transparente et se superpose au
   héros : logo en blanc, liens en blanc. Dès le défilement, la pilule
   blanche reprend la main (état [data-colle] existant). Navigateurs sans
   :has() : la barre reste sur fond papier, sans conséquence. */
.embleme img.embleme__inv{ display:none; height:66px; width:auto; }
body:has(.entree--photo) .entree--photo{ margin-top:-99px; }
body:has(.entree--photo) .entree--photo .entree__cols{ padding-top:99px; }
body:has(.entree--photo) .barre:not([data-colle]){ background:transparent; border-bottom-color:transparent; }
body:has(.entree--photo) .barre:not([data-colle]) img.embleme__std{ display:none; }
body:has(.entree--photo) .barre:not([data-colle]) img.embleme__inv{ display:block; }
body:has(.entree--photo) .barre:not([data-colle]) nav > a,
body:has(.entree--photo) .barre:not([data-colle]) nav > .sousmenu > a{ color:rgba(255,255,255,.88); }
body:has(.entree--photo) .barre:not([data-colle]) nav > a:hover,
body:has(.entree--photo) .barre:not([data-colle]) nav > a[aria-current],
body:has(.entree--photo) .barre:not([data-colle]) nav > .sousmenu > a:hover,
body:has(.entree--photo) .barre:not([data-colle]) nav > .sousmenu > a[aria-current]{ color:#fff; background:rgba(255,255,255,.16); }
body:has(.entree--photo) .barre:not([data-colle]) .sousmenu__panneau a{ color:var(--nuit-2); }
body:has(.entree--photo) .barre:not([data-colle]) .sousmenu__panneau a:hover{ color:var(--nuit); }
body:has(.entree--photo) .barre:not([data-colle]) .nav-tog{ color:#fff; border-color:rgba(255,255,255,.45); }
@media (max-width:1020px){
  /* menu déplié sur l'état transparent : panneau blanc, liens sombres */
  body:has(.entree--photo) .barre:not([data-colle]) nav[data-deplie] a{ color:var(--nuit-2); }
  body:has(.entree--photo) .barre:not([data-colle]) nav[data-deplie] a[aria-current]{ color:var(--nuit); }
  body:has(.entree--photo) .barre:not([data-colle]) nav[data-deplie] > a:hover,
  body:has(.entree--photo) .barre:not([data-colle]) nav[data-deplie] > a[aria-current],
  body:has(.entree--photo) .barre:not([data-colle]) nav[data-deplie] > .sousmenu > a:hover,
  body:has(.entree--photo) .barre:not([data-colle]) nav[data-deplie] > .sousmenu > a[aria-current]{ color:var(--nuit); background:var(--papier-2); }
}
@media (max-width:900px){ .embleme img.embleme__inv{ height:52px; } }

/* --- grilles nommées (remplacent les styles inline, responsives) ----------- */
.parcours--trois{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1000px){ .parcours--trois{ grid-template-columns:1fr; } }
.piste-grille{ margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:960px){ .piste-grille{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .piste-grille{ grid-template-columns:1fr; } }
.trio--deux{ grid-template-columns:repeat(2,1fr); }
@media (max-width:820px){ .trio--deux{ grid-template-columns:1fr; } }
.trio--duo{ margin-top:34px; grid-template-columns:1.15fr .85fr; }
@media (max-width:900px){ .trio--duo{ grid-template-columns:1fr; } }
.grille-choix--deux{ grid-template-columns:repeat(2,1fr); }

/* --- impression et superpositions ------------------------------------------ */
@media print{
  .entree__fond, .entree--photo::after{ display:none !important; }
  .entree--photo h1, .entree--photo .chapo{ color:var(--nuit) !important; }
  .socle{ background:#fff; color:var(--nuit-2); }
}
@media (max-width:760px){
  body:has(.barre-appel) .consentement{ bottom:calc(84px + env(safe-area-inset-bottom)); }
}

/* --- avis Google ------------------------------------------------------------
   Extraits des avis publiés sur la fiche de l'entreprise : cartes sobres,
   étoiles à la flamme, auteur et ancienneté en pied. Le badge de note
   s'affiche aussi dans le héros et sur la page devis. */
.avis-note{ display:inline-flex; align-items:center; gap:10px; margin-top:16px; padding:9px 16px;
  border-radius:100px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4);
  color:#fff; font-size:14px; font-weight:700; backdrop-filter:blur(3px); }
.avis-note .etoiles{ letter-spacing:2px; }
.bloc .avis-note{ background:var(--flamme-f); border-color:var(--flamme); color:var(--nuit); backdrop-filter:none; }
.etoiles{ color:var(--flamme); font-size:15px; }
.entree--photo .etoiles{ color:#FFB183; }
.avis-grille{ margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:960px){ .avis-grille{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .avis-grille{ grid-template-columns:1fr; } }
.avis-carte{ display:flex; flex-direction:column; gap:10px; padding:22px; background:var(--carte);
  border:1px solid var(--filet); border-radius:20px; }
.avis-carte blockquote{ margin:0; font-size:14.5px; line-height:1.62; color:var(--nuit-2); flex:1; }
.avis-carte footer{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:13px; color:var(--nuit-3); border-top:1px solid var(--filet); padding-top:10px; }
.avis-carte footer b{ color:var(--nuit); font-size:13.5px; }

/* villes du pied de page : liens en ligne, compacts */
.socle__villes{ font-size:13.8px; color:#B9C0E2; line-height:1.9; }
.socle__villes a:hover{ color:#fff; }

/* avatar photo dans les ronds (parole + médaille) */
img.parole__rond{ object-fit:cover; display:block; padding:0; }
img.portrait__medaille{ object-fit:cover; }

/* --- sous-menu Prestations --------------------------------------------------
   Déroulé au survol et au focus clavier sur bureau ; sur mobile, le panneau
   s'affiche déplié dans le menu accordéon, indenté sous « Prestations ». */
.sousmenu{ position:relative; display:flex; align-items:center; }
.sousmenu > a svg{ margin-left:6px; vertical-align:1px; opacity:.6; }
.sousmenu__panneau{ position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(6px);
  min-width:270px; padding:8px; background:var(--carte); border:1px solid var(--filet); border-radius:18px;
  box-shadow:0 6px 14px -10px rgba(20,25,70,.18), 0 26px 48px -22px rgba(20,25,70,.5);
  opacity:0; visibility:hidden; transition:opacity 180ms ease, transform 180ms ease, visibility 180ms; }
.sousmenu:hover .sousmenu__panneau, .sousmenu:focus-within .sousmenu__panneau{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.sousmenu__panneau a{ display:block; padding:10px 14px; border-radius:12px; font-size:14px;
  color:var(--nuit-2); white-space:nowrap; }
.sousmenu__panneau a:hover{ background:var(--papier-2); color:var(--nuit); }
@media (prefers-reduced-motion:reduce){ .sousmenu__panneau{ transition:none; } }
@media (max-width:1020px){
  .sousmenu{ flex-direction:column; align-items:stretch; border-bottom:1px solid var(--filet); }
  .sousmenu > a{ border-bottom:none !important; }
  .sousmenu__panneau{ position:static; transform:none; opacity:1; visibility:visible;
    min-width:0; padding:0 0 10px 14px; background:none; border:none; box-shadow:none; }
  .sousmenu:hover .sousmenu__panneau, .sousmenu:focus-within .sousmenu__panneau{ transform:none; }
  .sousmenu__panneau a{ padding:9px 12px; font-size:13.5px; white-space:normal; }
}