/* Feuille de style commune — site Cabinet ABELLO */

:root{
  --bleu-acier:#3d5a73; --bleu-fonce:#243849; --gris:#7a746e; --rouge:#a01818;
  --clair:#faf8f4; --beige:#f2ede3; --colonne:1140px; --gouttiere:1.4rem;
  --police:"Source Sans 3",Arial,sans-serif; --police-titre:"Fraunces","Georgia",serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--police);font-size:16px;line-height:1.65;color:#33322f;
  background:#4a5a44 center/cover no-repeat fixed}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--bleu-acier);outline-offset:2px}

/* ---------- ENTÊTE + MENUS DÉROULANTS ---------- */
.entete{background:rgba(250,248,244,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(230,223,208,.5);position:relative;z-index:100}
.grille{max-width:var(--colonne);width:calc(100% - 2*var(--gouttiere));margin:0 auto;padding:1.1rem 0;display:flex;
  align-items:center;justify-content:space-between;gap:1.4rem}
.logo-bloc{display:flex;align-items:center;gap:1rem;text-decoration:none}
.logo-bloc img{width:96px;border-radius:6px}
.logo-bloc .nom{font-family:var(--police-titre);font-size:1.8rem;font-weight:600;color:var(--bleu-fonce);line-height:1.15}
.logo-bloc .sous{font-size:.84rem;color:var(--gris);text-transform:uppercase;letter-spacing:.11em}

.bouton-menu{display:none;background:none;border:1px solid var(--bleu-acier);border-radius:6px;
  color:var(--bleu-fonce);font:600 .85rem var(--police);padding:.5rem .8rem;cursor:pointer;align-items:center;gap:.5rem}
.bouton-menu span{display:block;width:18px;height:2px;background:var(--bleu-fonce);position:relative}
.bouton-menu span::before,.bouton-menu span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--bleu-fonce)}
.bouton-menu span::before{top:-6px}.bouton-menu span::after{top:6px}

nav.principal>ul{list-style:none;margin:0;padding:0;display:flex;gap:.3rem;align-items:center}
nav.principal li{position:relative}
nav.principal>ul>li>a,nav.principal>ul>li>button{
  display:block;text-decoration:none;font:600 .92rem var(--police);color:#33322f;background:none;border:0;
  padding:.55rem .8rem;border-radius:6px;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}
nav.principal>ul>li>a:hover,nav.principal>ul>li>button:hover,
nav.principal li.ouvert>button{background:rgba(61,90,115,.12);color:var(--bleu-acier)}
nav.principal>ul>li>a[aria-current]{color:var(--bleu-acier);box-shadow:inset 0 -2px 0 var(--bleu-acier)}
.chevron{display:inline-block;margin-left:.35rem;border:solid var(--gris);border-width:0 2px 2px 0;
  padding:2.5px;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
li.ouvert .chevron{transform:rotate(-135deg) translateY(0)}

.sous-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:262px;margin:0;padding:.5rem;
  list-style:none;background:rgba(255,253,250,.98);backdrop-filter:blur(10px);
  border:1px solid rgba(61,90,115,.18);border-radius:10px;box-shadow:0 18px 40px rgba(20,30,40,.28);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
li.ouvert>.sous-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sous-menu a{display:block;text-decoration:none;padding:.55rem .7rem;border-radius:6px;
  font-size:.9rem;color:#3a3833;transition:background .15s,color .15s}
.sous-menu a:hover{background:rgba(61,90,115,.1);color:var(--bleu-acier)}
.sous-menu a small{display:block;font-size:.74rem;color:var(--gris);line-height:1.35}
.entete-droite{display:flex;align-items:center;gap:1rem}
.email-btn{background:var(--bleu-acier);color:#fff!important;padding:.55rem 1rem;border-radius:24px;
  text-decoration:none;font-size:.82rem;font-weight:600;white-space:nowrap;transition:background .2s}
.email-btn:hover{background:var(--bleu-fonce)}
.tel-bandeau{background:rgba(242,237,227,.66);font-size:.82rem;text-align:center;padding:.5rem;color:#5a564e}
.tel-bandeau a{text-decoration:none;color:var(--bleu-fonce);font-weight:600}

/* ---------- FIL DE VIGNETTES AÉRIENNES (rappel de l'accueil) ---------- */
.fil{max-width:var(--colonne);width:calc(100% - 2*var(--gouttiere));margin:1.5rem auto 0;padding:0}
.fil ul{list-style:none;margin:0;padding:.2rem 0 .6rem;display:flex;gap:12px;
  justify-content:center;justify-content:safe center;overflow-x:auto;scrollbar-width:thin}
.fil li{flex:0 0 104px}
.fil a{position:relative;display:flex;aspect-ratio:1/1;align-items:flex-end;justify-content:center;
  border-radius:9px;overflow:hidden;text-decoration:none;border:1px solid rgba(242,237,227,.6);
  background:rgba(242,237,227,.16);backdrop-filter:blur(3px);box-shadow:0 4px 16px rgba(0,0,0,.24);
  transition:transform .25s,box-shadow .25s,border-color .25s}
.fil .photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .4s}
.fil .plan .photo{background-size:auto 90%;background-repeat:no-repeat;background-color:#fff;background-position:center}
.fil a::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;
  background:linear-gradient(transparent,rgba(0,0,0,.62));opacity:.9}
.fil .nom{position:relative;z-index:2;color:#fff;font:600 .72rem/1.2 var(--police-titre);text-align:center;
  padding:0 6px 8px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.fil a:hover,.fil a:focus-visible{transform:translateY(-3px);border-color:rgba(242,237,227,.95);box-shadow:0 10px 24px rgba(0,0,0,.34)}
.fil a:hover .photo,.fil a:focus-visible .photo{opacity:1}
.fil a[aria-current]{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.55),0 10px 24px rgba(0,0,0,.34)}
.fil a[aria-current] .photo{opacity:1}

/* ---------- HERO ---------- */
.hero{position:relative;max-width:var(--colonne);width:calc(100% - 2*var(--gouttiere));margin:1.4rem auto 0;min-height:330px;
  overflow:hidden;border-radius:8px;border:3px solid rgba(255,255,255,.9);box-shadow:0 14px 34px rgba(20,30,18,.4)}
.hero-fond{position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(20,32,24,.72) 0%,rgba(20,32,24,.42) 52%,rgba(20,32,24,.18) 100%),
             url("images/borne-limite-propriete-terrain-abello.jpg") center 60%/cover no-repeat}
.hero-texte{position:relative;padding:3rem 3rem;color:#fff;max-width:660px}
.surtitre{font:600 .78rem/1 var(--police);letter-spacing:.22em;text-transform:uppercase;
  color:#e6d9b8;margin:0 0 .9rem;display:flex;align-items:center;gap:.7rem}
.surtitre::after{content:"";flex:1;height:1px;background:rgba(230,217,184,.45);max-width:120px}
.hero-texte h1{font-family:var(--police-titre);margin:0 0 1rem;font-size:clamp(1.9rem,4.4vw,3rem);
  line-height:1.14;font-weight:700;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero-texte p{margin:0;font-size:1.06rem;opacity:.95;max-width:520px}
.hero-cles{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.hero-cles span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  border-radius:20px;padding:.32rem .85rem;font-size:.8rem;backdrop-filter:blur(4px)}

/* ---------- CONTENU ---------- */
main{max-width:var(--colonne);width:calc(100% - 2*var(--gouttiere));margin:1.6rem auto 0;padding:0 0 3rem}
.bloc{background:rgba(250,248,244,.82);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border-radius:10px;padding:2.6rem 2.6rem;margin-bottom:1.4rem;box-shadow:0 8px 26px rgba(20,30,25,.18)}
.bloc h2{font-family:var(--police-titre);color:var(--bleu-fonce);font-size:1.62rem;font-weight:600;margin:0 0 1.1rem}
.bloc h3{font-family:var(--police-titre);color:var(--bleu-acier);font-size:1.12rem;margin:1.8rem 0 .5rem}
.bloc p{margin:.85rem 0}
.chapo{font-size:1.12rem;color:#4a463f}
.deux{display:grid;grid-template-columns:1.15fr .85fr;gap:2.4rem;align-items:start}

.citation{border-left:3px solid var(--bleu-acier);background:rgba(61,90,115,.07);
  padding:1.1rem 1.4rem;margin:1.6rem 0;border-radius:0 8px 8px 0}
.citation p{margin:0;font-style:italic;color:#3c4a55}
.citation cite{display:block;margin-top:.6rem;font-style:normal;font-size:.82rem;color:var(--gris);letter-spacing:.04em}

.etapes{list-style:none;margin:1.4rem 0 0;padding:0;counter-reset:e}
.etapes li{counter-increment:e;position:relative;padding:0 0 1.5rem 3.3rem;border-left:2px solid rgba(61,90,115,.22);margin-left:1.1rem}
.etapes li:last-child{border-left-color:transparent;padding-bottom:0}
.etapes li::before{content:counter(e);position:absolute;left:-1.1rem;top:-.2rem;width:2.2rem;height:2.2rem;
  border-radius:50%;background:var(--bleu-acier);color:#fff;font:700 .9rem/2.2rem var(--police);text-align:center;
  box-shadow:0 3px 10px rgba(36,56,73,.35)}
.etapes strong{display:block;font-family:var(--police-titre);color:var(--bleu-fonce);font-size:1.04rem;margin-bottom:.15rem}
.etapes span{font-size:.94rem;color:#55514a}

.encart{background:linear-gradient(135deg,var(--bleu-fonce),var(--bleu-acier));color:#fff;
  border-radius:10px;padding:2rem 2.2rem;box-shadow:0 10px 28px rgba(20,30,40,.32)}
.encart h3{font-family:var(--police-titre);margin:0 0 .8rem;font-size:1.2rem;color:#fff}
.encart p{font-size:.94rem;opacity:.93;margin:.6rem 0}
.encart .btn{display:inline-block;margin-top:1rem;background:#fff;color:var(--bleu-fonce);
  text-decoration:none;font-weight:600;font-size:.9rem;padding:.6rem 1.2rem;border-radius:22px}

figure.illus{margin:0;background:#fff;border-radius:10px;padding:1.1rem;box-shadow:0 8px 22px rgba(20,30,25,.16)}
figure.illus figcaption{font-size:.8rem;color:var(--gris);text-align:center;margin-top:.7rem;line-height:1.4}

.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:1.4rem}
.galerie figure{margin:0;border-radius:9px;overflow:hidden;background:#fff;box-shadow:0 6px 18px rgba(20,30,25,.16)}
.galerie img{aspect-ratio:4/3;object-fit:cover;width:100%}
.galerie figcaption{font-size:.78rem;color:#55514a;padding:.55rem .7rem;line-height:1.35}

.faq details{border-bottom:1px solid rgba(122,116,110,.25);padding:.9rem 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--bleu-fonce);font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.5rem/1 var(--police);color:var(--bleu-acier);transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq p{font-size:.96rem;color:#4f4b45;margin:.7rem 0 0}

.a-valider{background:rgba(160,24,24,.08);border:1px dashed rgba(160,24,24,.45);border-radius:8px;
  padding:.9rem 1.1rem;font-size:.85rem;color:#7d2020;margin-top:1.6rem}
.a-valider strong{color:#7d2020}

/* ---------- PIED ---------- */
.pied{background:linear-gradient(135deg,rgba(20,30,40,.96) 0%,rgba(36,56,73,.98) 50%,rgba(30,48,65,.97) 100%);
  color:#d9dde2;font-size:.82rem;line-height:1.6;padding:2.4rem 1.4rem 2.6rem;margin-top:1rem}
.pied>div{max-width:var(--colonne);width:calc(100% - 2*var(--gouttiere));margin:0 auto;position:relative;padding-right:150px}
.pied-logo{position:absolute;top:0;right:0;width:120px;background:#fff;border-radius:8px;padding:8px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
@media (max-width:640px){ .pied>div{padding-right:0;text-align:center} .pied-logo{position:static;margin:0 auto 1.4rem;display:block} .pied-liens{justify-content:center} }
.pied p{margin:.5rem 0}
.pied a{color:#cfe0ee}
.pied-liens{margin-top:1.2rem;display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.8rem}

/* ---------- MOBILE / TABLETTE ---------- */
@media (max-width:1020px){
  .deux{grid-template-columns:1fr;gap:1.8rem}
  .galerie{grid-template-columns:repeat(2,1fr)}
  .hero-texte{padding:2.4rem 2rem}
}
@media (max-width:860px){
  .bouton-menu{display:flex}
  .entete-droite{display:none}
  nav.principal{position:absolute;top:100%;left:0;right:0;background:rgba(252,250,246,.99);
    border-bottom:1px solid rgba(61,90,115,.2);box-shadow:0 18px 40px rgba(20,30,40,.26);
    max-height:0;overflow:hidden;transition:max-height .3s ease}
  nav.principal.ouvert{max-height:78vh;overflow-y:auto}
  nav.principal>ul{flex-direction:column;align-items:stretch;gap:0;padding:.6rem 1rem 1.4rem}
  nav.principal>ul>li>a,nav.principal>ul>li>button{width:100%;text-align:left;padding:.85rem .6rem;font-size:1rem;
    border-bottom:1px solid rgba(122,116,110,.18);border-radius:0}
  nav.principal>ul>li>button{display:flex;justify-content:space-between;align-items:center}
  .sous-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    background:rgba(61,90,115,.06);border-radius:0 0 8px 8px;display:none;min-width:0;margin-bottom:.4rem}
  li.ouvert>.sous-menu{display:block}
  .mobile-email{display:block;margin:.9rem .6rem 0;text-align:center}
  .bloc{padding:1.8rem 1.4rem}
  .fil li{flex:0 0 88px}
  .hero{min-height:0}
  .hero-texte{padding:2rem 1.4rem}
}
@media (min-width:861px){ .mobile-email{display:none} }
@media (max-width:520px){
  :root{--gouttiere:1rem}
  .galerie{grid-template-columns:1fr}
  .logo-bloc img{width:66px}
  .logo-bloc .nom{font-size:1.3rem}
  .grille{padding:.9rem 0}
  main{margin-top:1rem}
  .bloc{border-radius:8px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

nav.principal>ul>li>button.branche-active{color:var(--bleu-acier);box-shadow:inset 0 -2px 0 var(--bleu-acier)}

/* ---------- FORMULAIRE DE DEVIS ---------- */
.form-deux{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:start}
.formulaire{display:grid;gap:1.1rem}
.champ{display:flex;flex-direction:column;gap:.35rem}
.champ-2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.formulaire label{font-weight:600;font-size:.9rem;color:var(--bleu-fonce)}
.formulaire label .req{color:var(--rouge)}
.formulaire input,.formulaire select,.formulaire textarea{
  font:400 1rem var(--police);color:#33322f;background:#fff;
  border:1px solid rgba(61,90,115,.35);border-radius:8px;padding:.7rem .8rem;width:100%}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{
  outline:none;border-color:var(--bleu-acier);box-shadow:0 0 0 3px rgba(61,90,115,.18)}
.formulaire textarea{resize:vertical;min-height:130px}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;color:#55514a;font-weight:400}
.consent input{width:auto;margin-top:.2rem}
.bouton-envoi{background:var(--bleu-acier);color:#fff;border:0;border-radius:26px;
  padding:.9rem 1.8rem;font:600 1rem var(--police);cursor:pointer;justify-self:start;transition:background .2s,transform .2s}
.bouton-envoi:hover{background:var(--bleu-fonce);transform:translateY(-2px)}
.rassurance{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.rassurance li{display:flex;gap:.8rem;align-items:flex-start;font-size:.94rem;color:#4a463f}
.rassurance .puce{flex:0 0 34px;height:34px;border-radius:50%;background:var(--bleu-acier);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--police-titre)}
.rassurance strong{display:block;color:var(--bleu-fonce);font-family:var(--police-titre)}
.contact-direct{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(122,116,110,.25)}
.contact-direct p{margin:.4rem 0;font-size:.95rem}
.contact-direct a{color:var(--bleu-acier);font-weight:600;text-decoration:none}
@media (max-width:900px){ .form-deux{grid-template-columns:1fr} .champ-2{grid-template-columns:1fr} }