/* ==========================================================================
   HOME IN TIME — Syndic de copropriété
   Feuille de style principale — www.home-in-time.fr
   Design : élégance parisienne (crème / bleu nuit / laiton)
   ========================================================================== */

:root{
  /* Couleurs */
  --creme:#F7F3EC;
  --creme-2:#F1EBE0;
  --blanc:#FFFFFF;
  --encre:#182B3E;
  --navy:#16324F;
  --navy-2:#1E4368;
  --nuit:#0C1E31;
  --laiton:#1761A0;
  --laiton-2:#12507F;
  --laiton-pale:#E7EFF7;
  --gris:#5C6B7A;
  --gris-2:#8A96A3;
  --ligne:#E5DCCB;
  --ligne-2:#D8CDB8;
  --ok:#2E7D5B;

  /* Typo */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  /* Rythme */
  --max:1180px;
  --r-s:10px;
  --r-m:16px;
  --r-l:22px;
  --ombre:0 18px 50px rgba(12,30,49,.10);
  --ombre-s:0 8px 24px rgba(12,30,49,.07);
  --tr:all .28s cubic-bezier(.4,0,.2,1);
}

/* --------------------------------- Base --------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--encre);background:var(--creme);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--laiton-pale);color:var(--nuit)}
:focus-visible{outline:2px solid var(--laiton);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:1000;background:var(--blanc);padding:12px 18px;border-radius:10px;border:1px solid var(--ligne-2);color:var(--encre);width:auto;height:auto}

/* ------------------------------ Typographie ------------------------------ */
h1,h2,h3{font-family:var(--serif);color:var(--nuit);font-weight:600;line-height:1.16;letter-spacing:-.01em}
h1{font-size:clamp(34px,4.6vw,52px)}
h2{font-size:clamp(27px,3.4vw,38px)}
h3{font-size:21px;line-height:1.3}
h4{font-size:16px;font-weight:700;color:var(--nuit)}
p{margin:0 0 14px}
strong,b{color:var(--nuit);font-weight:600}
em.dore{font-style:italic;color:var(--laiton)}

.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--laiton-2);margin-bottom:10px}
.kicker::before{content:'';width:34px;height:1px;background:var(--laiton)}
.lead{font-size:18.5px;line-height:1.7;color:var(--gris);max-width:62ch}
.section-intro{max-width:66ch;color:var(--gris);font-size:17px}

/* -------------------------------- Boutons -------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:15px;line-height:1;border:1.5px solid transparent;transition:var(--tr);white-space:nowrap}
.btn .fl{transition:transform .28s ease}
.btn:hover .fl{transform:translateX(4px)}
.btn-or{background:var(--laiton);color:#F7FBFF;box-shadow:0 10px 28px rgba(23,97,160,.32)}
.btn-or:hover{background:var(--laiton-2);transform:translateY(-2px);box-shadow:0 14px 34px rgba(23,97,160,.4)}
.btn-ligne{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-ligne:hover{background:var(--navy);color:#F5F1E8;transform:translateY(-2px)}
.btn-blanc{background:var(--blanc);color:var(--navy);border-color:var(--ligne-2)}
.btn-blanc:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn-clair{border-color:rgba(247,243,236,.45);color:#F5F1E8;background:transparent}
.btn-clair:hover{background:rgba(247,243,236,.12)}
.btn-lg{padding:17px 32px;font-size:16px}
.btn-sm{padding:11px 20px;font-size:14px}

/* -------------------------------- Header --------------------------------- */
.entete{position:sticky;top:0;z-index:200;background:rgba(247,243,236,.92);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);border-bottom:1px solid rgba(216,205,184,.6);transition:var(--tr)}
.entete.ombre{box-shadow:0 6px 30px rgba(12,30,49,.08)}
.barre{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.marque{display:flex;align-items:center;gap:11px;flex-shrink:0}
.marque svg{height:46px;width:auto}
.nav-p{display:flex;align-items:center;gap:2px}
.nav-p a{font-size:13.5px;font-weight:550;color:var(--gris);padding:8px 9px;border-radius:9px;transition:var(--tr);white-space:nowrap}
.nav-p a:hover{color:var(--nuit);background:rgba(22,50,79,.06)}
.nav-p a[aria-current="page"]{color:var(--navy);font-weight:650;background:rgba(22,50,79,.07)}
.entete-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.entete-actions .btn-sm{padding:11px 16px;font-size:13.5px}
.tel-entete{display:inline-flex;align-items:center;gap:7px;font-weight:650;font-size:14px;color:var(--navy);padding:8px 9px;border-radius:9px;transition:var(--tr)}
.tel-entete:hover{background:rgba(22,50,79,.06)}
.tel-entete svg{width:17px;height:17px}

.burger{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--ligne-2);background:var(--blanc);align-items:center;justify-content:center}
.burger svg{width:22px;height:22px;stroke:var(--navy)}
.nav-m{display:none;padding:6px 0 18px}
.nav-m a{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;margin-top:8px;background:var(--blanc);border:1px solid var(--ligne);border-radius:14px;font-weight:600;color:var(--encre)}
.nav-m a[aria-current="page"]{border-color:var(--laiton);color:var(--navy)}
.nav-m .btn{margin-top:12px;width:100%}
body.menu-ouvert .nav-m{display:block}

/* ---------------------------------- Hero ---------------------------------- */
.heros{padding:32px 0 6px}
.heros-grille{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.heros h1 .accent{font-style:italic;color:inherit}
.heros .lead{margin:22px 0 8px}
.heros-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.heros-note{font-size:14px;color:var(--gris-2);margin-top:16px}
.heros-note a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* Cadre en arche — signature visuelle */
.arche{position:relative;border-radius:210px 210px var(--r-l) var(--r-l);overflow:hidden;border:1px solid var(--ligne-2);box-shadow:var(--ombre);background:var(--creme-2)}
.arche::after{content:'';position:absolute;inset:10px;border:1px solid rgba(23,97,160,.4);border-radius:200px 200px 14px 14px;pointer-events:none}
.arche img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/4.6}
.arche-l{border-radius:var(--r-l);}
.arche-l::after{border-radius:14px}
.arche-l img{aspect-ratio:16/10}

.heros-visuel{position:relative}
.carte-flottante{position:absolute;left:-26px;bottom:34px;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-m);box-shadow:var(--ombre);padding:16px 20px;display:flex;align-items:center;gap:13px;max-width:290px}
.carte-flottante .pastille{width:42px;height:42px;border-radius:12px;background:var(--laiton-pale);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.carte-flottante .pastille svg{width:21px;height:21px;stroke:var(--laiton-2)}
.carte-flottante b{display:block;font-size:14.5px;color:var(--nuit)}
.carte-flottante span{font-size:12.5px;color:var(--gris)}

/* Bandeau de confiance — badges encadrés */
.confiance{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:22px 0 0}
.confiance .item{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--navy);background:var(--blanc);border:1px solid var(--ligne-2);border-radius:12px;padding:11px 16px;box-shadow:0 2px 10px rgba(12,30,49,.04)}
.confiance .item svg{width:17px;height:17px;stroke:var(--laiton-2);flex-shrink:0}

/* -------------------------------- Sections ------------------------------- */
.section{padding:40px 0}
.section-serree{padding:24px 0}
.section-blanche{background:var(--blanc);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.section-nuit{background:var(--nuit);color:#E9E4D8}
.section-nuit h2,.section-nuit h3{color:#F5F1E8}
.section-nuit .kicker{color:var(--laiton)}
.section-nuit p{color:rgba(233,228,216,.8)}
.tete-section{max-width:760px;margin-bottom:22px}
.tete-section.centre{margin-left:auto;margin-right:auto;text-align:center}
.tete-section.centre .kicker{justify-content:center}
.tete-section.centre .kicker::before{display:none}
.tete-section.centre .section-intro{margin-left:auto;margin-right:auto}
.tete-section p{margin-top:14px}
.tete-section h2{text-wrap:balance}

/* -------------------------------- Chiffres -------------------------------- */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ligne);border:1px solid var(--ligne);border-radius:var(--r-l);overflow:hidden}
.chiffre{background:var(--blanc);padding:34px 22px;text-align:center}
.chiffre .val{font-family:var(--serif);font-size:clamp(30px,3vw,42px);font-weight:600;color:var(--navy)}
.chiffre .val em{font-style:normal;color:inherit;font-size:.62em;vertical-align:.28em}
.chiffre .lab{font-size:13.5px;color:var(--gris);margin-top:6px;font-weight:550}

/* --------------------------------- Cartes --------------------------------- */
.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-l);padding:32px 28px;transition:var(--tr);text-align:center}
.carte:hover{transform:translateY(-5px);box-shadow:var(--ombre);border-color:var(--ligne-2)}
.carte p{color:var(--gris);font-size:14.8px;margin:0}
.carte h3{margin:0 0 10px;font-size:20px}
.carte .liste-coche,.carte .modele-doc,.carte .encadre{text-align:left}
.puce-icone{width:52px;height:52px;border-radius:15px;background:var(--laiton-pale);border:1px solid rgba(23,97,160,.25);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.puce-icone svg{width:25px;height:25px;stroke:var(--laiton-2)}
.carte .lien-carte{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-weight:650;font-size:14.5px;color:var(--navy)}
.carte .lien-carte:hover{color:var(--laiton-2)}

/* Cartes avec photo */
.carte-photo{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-l);overflow:hidden;transition:var(--tr);display:flex;flex-direction:column}
.carte-photo:hover{transform:translateY(-5px);box-shadow:var(--ombre)}
.carte-photo .ph{aspect-ratio:16/9.5;overflow:hidden;background:var(--creme-2)}
.carte-photo .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.carte-photo:hover .ph img{transform:scale(1.045)}
.carte-photo .corps{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1;text-align:center}
.carte-photo .corps p{color:var(--gris);font-size:14.8px}
.carte-photo .corps h3{margin-bottom:10px;font-size:20px}
.carte-photo .corps .liste-coche{text-align:left}
.carte-photo .corps .lien-carte{justify-content:center}

/* Listes à coche */
.liste-coche{display:grid;gap:11px;margin:16px 0}
.liste-coche li{position:relative;padding-left:30px;color:var(--gris);font-size:15px}
.liste-coche li::before{content:'';position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;background:var(--laiton-pale);border:1px solid rgba(23,97,160,.4)}
.liste-coche li::after{content:'';position:absolute;left:5.5px;top:8.5px;width:8px;height:5px;border-left:1.8px solid var(--laiton-2);border-bottom:1.8px solid var(--laiton-2);transform:rotate(-45deg)}
.liste-coche b{color:var(--encre)}

/* --------------------------------- Étapes --------------------------------- */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:etape}
.etape{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-l);padding:30px 26px;position:relative;transition:var(--tr);text-align:center}
.etape:hover{transform:translateY(-4px);box-shadow:var(--ombre-s)}
.etape .num{font-family:var(--serif);font-size:44px;font-weight:600;color:var(--laiton);line-height:1;margin-bottom:14px}
.etape h3{font-size:18px;margin-bottom:8px}
.etape p{color:var(--gris);font-size:14.2px;margin:0}

/* Frise (changer de syndic) */
.frise{position:relative;display:grid;gap:0;margin-top:10px}
.frise-item{position:relative;padding:0 0 38px 66px}
.frise-item::before{content:'';position:absolute;left:21px;top:8px;bottom:-6px;width:1.5px;background:var(--ligne-2)}
.frise-item:last-child::before{display:none}
.frise-item .jalon{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:var(--blanc);border:1.5px solid var(--laiton);color:var(--laiton-2);font-family:var(--serif);font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center}
.frise-item h3{font-size:19px;margin-bottom:6px}
.frise-item p{color:var(--gris);font-size:15px;max-width:60ch}
.frise-item .delai{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--laiton-2);background:var(--laiton-pale);border-radius:999px;padding:5px 12px}

/* ------------------------- Bloc image + texte ----------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.duo.inverse .duo-visuel{order:2}
.duo .liste-coche li{font-size:15.2px}
.duo-visuel{position:relative}

/* ------------------------------ Bandeau CTA -------------------------------- */
.bandeau{background:var(--nuit);border-radius:var(--r-l);padding:38px 44px;display:flex;align-items:center;justify-content:space-between;gap:34px;position:relative;overflow:hidden}
.bandeau::before{content:'';position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;border:1px solid rgba(23,97,160,.35)}
.bandeau::after{content:'';position:absolute;right:-30px;top:-110px;width:280px;height:280px;border-radius:50%;border:1px solid rgba(23,97,160,.2)}
.bandeau h2{color:#F5F1E8;font-size:clamp(23px,2.6vw,31px);margin-bottom:8px}
.bandeau p{color:rgba(233,228,216,.75);margin:0;font-size:15.5px;max-width:52ch}
.bandeau .actions{display:flex;gap:14px;flex-wrap:wrap;flex-shrink:0;position:relative;z-index:1}

/* -------------------------------- Accordéon ------------------------------- */
.accordeon{display:grid;gap:12px}
details.faq{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-m);overflow:hidden;transition:var(--tr)}
details.faq[open]{border-color:var(--laiton);box-shadow:var(--ombre-s)}
details.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:21px 26px;font-weight:600;font-size:16px;color:var(--nuit)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';font-family:var(--serif);font-size:26px;font-weight:400;color:var(--laiton);flex-shrink:0;transition:transform .3s ease;line-height:1}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq .rep{padding:0 26px 24px;color:var(--gris);font-size:15px;line-height:1.7}
details.faq .rep p{margin-bottom:10px}
details.faq .rep p:last-child{margin-bottom:0}
.faq-groupe{margin-bottom:44px}
.faq-groupe h2{font-size:24px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--ligne-2)}

/* ------------------------------- Formulaires ------------------------------ */
.formulaire{display:grid;gap:26px}
.form-bloc{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-l);padding:34px}
.form-bloc legend, .form-bloc .titre-bloc{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--nuit);margin-bottom:6px}
.form-bloc legend{float:left;width:100%;padding:0}
.form-bloc legend + *{clear:both}
fieldset.form-bloc{border:1px solid var(--ligne);min-width:0}
.form-bloc .sous-titre{font-size:14px;color:var(--gris-2);margin-bottom:22px}
.form-grille{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.champ{display:grid;gap:7px}
.champ span{font-size:13.5px;font-weight:600;color:var(--encre)}
.champ span small{color:var(--gris-2);font-weight:500}
.champ input,.champ select,.champ textarea{width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid var(--ligne-2);background:var(--creme);font-family:var(--sans);font-size:15px;color:var(--encre);transition:var(--tr);outline:none}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--laiton);background:var(--blanc);box-shadow:0 0 0 4px rgba(23,97,160,.13)}
.champ textarea{min-height:110px;resize:vertical}
.consentement{display:flex;gap:13px;align-items:flex-start;font-size:13.5px;color:var(--gris);line-height:1.6}
.consentement input{width:19px;height:19px;margin-top:2px;accent-color:var(--laiton-2);flex-shrink:0}
.consentement a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
.case{display:flex;align-items:center;gap:10px;padding:9px 13px;border:1.5px solid var(--ligne-2);border-radius:11px;background:var(--creme);font-size:13.6px;color:var(--encre);cursor:pointer;transition:var(--tr);line-height:1.3}
.case:hover{border-color:var(--laiton);background:var(--blanc)}
.case input{width:17px;height:17px;accent-color:var(--laiton-2);flex-shrink:0;margin:0}
.case:has(input:checked){border-color:var(--laiton);background:var(--laiton-pale);color:var(--laiton-2);font-weight:600}
.form-envoi{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form-envoi .note{font-size:13.5px;color:var(--gris-2)}
.hp-champ{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* --------------------------- Encadrés / notes ----------------------------- */
.encadre{background:var(--blanc);border:1px solid var(--ligne);border-left:3px solid var(--laiton);border-radius:0 var(--r-m) var(--r-m) 0;padding:22px 26px;font-size:14.8px;color:var(--gris)}
.encadre b{color:var(--nuit)}
.encadre-nuit{background:var(--nuit);border:0;border-radius:var(--r-m);color:rgba(233,228,216,.85);padding:26px 30px}
.encadre-nuit b{color:#F5F1E8}

.modele-doc{background:var(--nuit);border-radius:var(--r-m);padding:26px 28px;position:relative}
.modele-doc pre{white-space:pre-wrap;font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.75;color:rgba(233,228,216,.92);margin:0}
.modele-doc .copier{position:absolute;top:16px;right:16px}

/* -------------------------------- Secteurs -------------------------------- */
.communes{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.communes li{background:var(--blanc);border:1px solid var(--ligne-2);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:550;color:var(--navy);transition:var(--tr)}
.communes li:hover{border-color:var(--laiton);color:var(--laiton-2)}
.dept-carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-l);padding:30px;text-align:center}
.dept-carte .dept-num{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--laiton-2);letter-spacing:.08em;margin-bottom:6px}
.dept-carte .communes{justify-content:center}

/* -------------------------------- Contact --------------------------------- */
.coordonnees{display:grid;gap:14px}
.coordonnees .ligne-coord{display:flex;gap:15px;align-items:flex-start;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-m);padding:20px 22px;transition:var(--tr)}
.coordonnees .ligne-coord:hover{border-color:var(--laiton)}
.coordonnees .ligne-coord svg{width:21px;height:21px;stroke:var(--laiton-2);flex-shrink:0;margin-top:2px}
.coordonnees .ligne-coord b{display:block;font-size:15px;color:var(--nuit)}
.coordonnees .ligne-coord span,.coordonnees .ligne-coord a{font-size:14.5px;color:var(--gris)}
.coordonnees .ligne-coord a:hover{color:var(--laiton-2)}

/* --------------------------------- Footer --------------------------------- */
.pied{background:var(--nuit);color:rgba(233,228,216,.75);padding:54px 0 32px;margin-top:56px}
.pied-grille{display:grid;grid-template-columns:1fr 2.15fr;gap:48px;padding-bottom:34px;border-bottom:1px solid rgba(233,228,216,.14)}
.marque-pied{padding-right:20px}
.pied-nav{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:36px;padding-left:48px;border-left:1px solid rgba(233,228,216,.16)}
.pied .marque-pied svg{height:52px;width:auto;margin-bottom:18px}
.pied p{font-size:14px;line-height:1.75}
.pied h4{color:#F5F1E8;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.pied-liens a{display:block;padding:5.5px 0;font-size:14.5px;color:rgba(233,228,216,.72);transition:var(--tr)}
.pied-liens a:hover{color:var(--laiton);padding-left:5px}
.pied .coord-pied{display:grid;gap:12px;font-size:14.5px}
.pied .coord-pied a{color:rgba(233,228,216,.85)}
.pied .coord-pied a:hover{color:var(--laiton)}
.pied .coord-pied .item{display:flex;gap:11px;align-items:flex-start}
.pied .coord-pied svg{width:17px;height:17px;stroke:var(--laiton);flex-shrink:0;margin-top:3px}
.pied-bas{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:28px;font-size:13px;color:rgba(233,228,216,.5)}
.pied-bas a{color:rgba(233,228,216,.65);text-decoration:underline;text-underline-offset:3px}
.pied-bas a:hover{color:var(--laiton)}
.mention-garanties{font-size:12.8px;color:rgba(233,228,216,.5);margin-top:14px;line-height:1.7}

/* --------------------------- Barre mobile fixe ---------------------------- */
.barre-mobile{position:fixed;left:0;right:0;bottom:0;z-index:180;display:none;background:rgba(247,243,236,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--ligne-2);padding:10px 14px;gap:10px;box-shadow:0 -6px 24px rgba(12,30,49,.08)}
.barre-mobile .btn{flex:1}

/* ------------------------------- Animations ------------------------------- */
.rev{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rev.visible{opacity:1;transform:none}
.rev-1{transition-delay:.08s}.rev-2{transition-delay:.16s}.rev-3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rev{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* -------------------------------- Pages légales --------------------------- */
.page-legale{max-width:820px}
.page-legale h2{font-size:23px;margin:38px 0 12px}
.page-legale p,.page-legale li{color:var(--gris);font-size:15px}
.page-legale ul{list-style:disc;padding-left:22px;display:grid;gap:6px}
.a-completer{background:var(--laiton-pale);border-radius:6px;padding:1px 8px;color:var(--laiton-2);font-weight:600;font-size:.92em}

/* -------------------------------- Responsive ------------------------------ */
@media (max-width:1060px){
  .nav-p{display:none}
  .burger{display:inline-flex}
  .entete-actions .btn-or{display:none}
  .heros-grille{grid-template-columns:1fr;gap:40px}
  .heros{padding:44px 0 10px}
  .arche img{aspect-ratio:16/10}
  .arche{border-radius:var(--r-l)}
  .arche::after{border-radius:14px}
  .duo,.duo.inverse{grid-template-columns:1fr;gap:34px}
  .duo.inverse .duo-visuel{order:0}
  .grille-3{grid-template-columns:1fr 1fr}
  .etapes{grid-template-columns:1fr 1fr}
  .chiffres{grid-template-columns:1fr 1fr}
  .pied-grille{grid-template-columns:1fr;gap:34px}
  .pied-nav{padding-left:0;border-left:0}
  .marque-pied{padding-right:0}
  .bandeau{flex-direction:column;align-items:flex-start;padding:40px 34px}
  .barre-mobile{display:flex}
  body{padding-bottom:70px}
  .pied{margin-top:70px}
  .section{padding:40px 0}
}
@media (max-width:640px){
  .grille-2,.grille-3,.etapes,.form-grille{grid-template-columns:1fr}
  .chiffres{grid-template-columns:1fr 1fr}
  .pied-nav{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr}
  .carte-flottante{left:12px;bottom:14px;max-width:250px;padding:13px 16px}
  .tel-entete span{display:none}
  .tel-entete{padding:9px}
  .form-bloc{padding:26px 20px}
  .bandeau{padding:34px 24px}
  .frise-item{padding-left:58px}
  .section{padding:52px 0}
  .heros-actions .btn{width:100%}
}

/* ---------------------------------- Print --------------------------------- */
@media print{
  .entete,.barre-mobile,.pied,.bandeau,.btn{display:none!important}
  body{background:#fff;color:#000}
}

/* ---------------------- Façade interactive (accueil) ---------------------- */
.arche-interactive{overflow:hidden}
.arche-interactive svg{display:block;width:100%;height:auto;transition:transform .95s cubic-bezier(.55,0,.85,.35),opacity .85s ease .15s}
.vantail-g,.vantail-d{transition:transform .7s cubic-bezier(.6,0,.3,1)}
.vantail-g{transform-box:fill-box;transform-origin:left center}
.vantail-d{transform-box:fill-box;transform-origin:right center}
.arche-interactive:hover .vantail-g,.arche-interactive:hover .vantail-d{transform:scaleX(.88)}
.arche-interactive.ouverte .vantail-g,.arche-interactive.ouverte .vantail-d{transform:scaleX(.05)}
.arche-interactive.ouverte svg{transform:scale(4.8);transform-origin:50% 88%;opacity:0}
.zone-porte{position:absolute;left:50%;bottom:1%;transform:translateX(-50%);width:19%;height:19%;background:transparent;border:0;border-radius:80px 80px 0 0;cursor:pointer;z-index:3;padding:0}
.zone-porte::after{content:'';position:absolute;inset:-4px;border-radius:88px 88px 6px 6px;box-shadow:0 0 0 0 rgba(23,97,160,.4);animation:halo-porte 2.4s ease-out infinite}
@keyframes halo-porte{0%{box-shadow:0 0 0 0 rgba(23,97,160,.38)}70%{box-shadow:0 0 0 18px rgba(23,97,160,0)}100%{box-shadow:0 0 0 0 rgba(23,97,160,0)}}
.etiquette-porte{position:absolute;left:50%;bottom:22.5%;transform:translateX(-50%);background:var(--blanc);border:1px solid var(--ligne-2);border-radius:999px;padding:9px 18px;font-size:12.5px;font-weight:650;color:var(--navy);white-space:nowrap;box-shadow:var(--ombre-s);pointer-events:none;z-index:2}
.etiquette-porte::after{content:'';position:absolute;left:50%;bottom:-5.5px;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:var(--blanc);border-right:1px solid var(--ligne-2);border-bottom:1px solid var(--ligne-2)}
@media (prefers-reduced-motion:reduce){
  .arche-interactive svg,.vantail-g,.vantail-d{transition:none}
  .zone-porte::after{animation:none}
}

/* ----------------------- Formulaire de devis (accueil) -------------------- */
.panneau-devis{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-l);box-shadow:var(--ombre);padding:38px 40px;max-width:920px;margin:0 auto;scroll-margin-top:90px}
.panneau-devis.arrivee{animation:panneau-flash 1.4s ease}
@keyframes panneau-flash{0%{box-shadow:0 0 0 6px rgba(23,97,160,.35)}100%{box-shadow:var(--ombre)}}
.panneau-devis .entete-panneau{text-align:center;margin-bottom:24px}
.panneau-devis .entete-panneau h2{font-size:clamp(24px,2.8vw,32px)}
.panneau-devis .entete-panneau p{color:var(--gris);font-size:15px;margin:8px 0 0}
.mini-reassurance{display:flex;justify-content:center;gap:10px 22px;flex-wrap:wrap;margin:16px 0 26px;padding-bottom:22px;border-bottom:1px solid var(--ligne)}
.mini-reassurance span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--navy)}
.mini-reassurance svg{width:16px;height:16px;stroke:var(--laiton);flex-shrink:0}
.champ input[type="file"]{padding:11px 14px;background:var(--blanc);border-style:dashed;cursor:pointer}
.champ input[type="file"]::file-selector-button{border:0;background:var(--laiton-pale);color:var(--laiton-2);font-weight:650;font-size:13px;padding:8px 14px;border-radius:8px;margin-right:12px;cursor:pointer;font-family:var(--sans)}
@media (max-width:640px){.panneau-devis{padding:26px 20px}}

/* v5 : barre de confiance centrée, porte gros plan, zoom porte cochère */
.confiance{justify-content:center}
.heros .confiance{margin-top:6px}
.arche-porte.ouverte svg{transform:scale(2.6);transform-origin:50% 62%}
.zone-porte-large{width:44%;height:46%;bottom:5%;border-radius:170px 170px 0 0}
.arche-porte .etiquette-porte{bottom:53%}

/* v6 : porte paysage interactive */
.arche-portep.ouverte svg{transform:scale(3.2);transform-origin:50% 66%}
.zone-portep{width:30%;height:52%;bottom:6%;border-radius:110px 110px 0 0}
.arche-portep .etiquette-porte{bottom:15%}

/* v7 : fenêtres qui s'éclairent, épingles interactives, panneaux-visuels */
.vitre{transition:fill .5s ease}
.arche-interactive:hover .vitre{fill:#FDF3DA}
.carte-photo .ph svg.visu-immeubles{width:100%;height:100%;object-fit:cover;display:block}
.carte-photo:hover .vitre{fill:#FDF3DA}
.duo-visuel:hover .vitre{fill:#FDF3DA}
.epingle{transition:transform .25s ease;cursor:pointer}
a:hover .epingle{transform:scale(1.12)}
.panneau-visuel{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-l);box-shadow:var(--ombre);padding:30px 32px}
.panneau-visuel .pv-titre{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--nuit);margin-bottom:18px}
.panneau-visuel .frise-item{padding-bottom:24px}
.panneau-visuel .frise-item p{font-size:14px}
.panneau-visuel.nuit{background:var(--nuit);border:0}
.panneau-visuel.nuit .pv-titre{color:#F5F1E8}
.ligne-texte{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(233,228,216,.14)}
.ligne-texte:last-child{border-bottom:0}
.ligne-texte .an{font-family:var(--serif);font-size:21px;font-weight:600;color:#5E9CD3;flex-shrink:0;width:64px}
.ligne-texte .txt{font-size:14px;color:rgba(233,228,216,.85)}
.ligne-texte .txt b{color:#F5F1E8}
.tuiles-protection{display:grid;gap:12px}
.tuile{display:flex;gap:14px;align-items:center;background:var(--laiton-pale);border:1px solid rgba(23,97,160,.25);border-radius:var(--r-m);padding:16px 18px}
.tuile .tv{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--laiton);flex-shrink:0;min-width:64px;text-align:center}
.tuile .tl{font-size:13.5px;color:var(--encre);text-align:left}