/* =============================================================================
   Expert Audit Énergétique — FAQ (frame Figma « FAQ »)
   ========================================================================== */

:root{
  --navy:  #173955;
  --cream: #FCFAEC;
  --green: #129E53;
  --gold:  #FBBC05;
  --navy-20: rgba(23, 57, 85, .20);
  --navy-50: rgba(23, 57, 85, .50);
  --navy-06: rgba(23, 57, 85, .06);
  --cream-60: rgba(252, 250, 236, .6);
  --ease: cubic-bezier(.33, 1, .68, 1);   /* easeOutCubic — fluide, sans à-coup */
  --ease-visc: cubic-bezier(.5, .02, .22, 1);   /* « visqueux » — morph lent et continu */
}

/* ------------------------------------------------------------- Typographie -- */
@font-face{font-family:'Thunder';font-weight:200;font-style:normal;font-display:swap;
  src:url('fonts/Thunder-ExtraLightLC.woff2') format('woff2');}
@font-face{font-family:'Thunder';font-weight:200;font-style:italic;font-display:swap;
  src:url('fonts/Thunder-ExtraLightLCItalic.woff2') format('woff2');}
@font-face{font-family:'Thunder';font-weight:300;font-style:normal;font-display:swap;
  src:url('fonts/Thunder-LightLC.woff2') format('woff2');}
@font-face{font-family:'Thunder';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/Thunder-LC.woff2') format('woff2');}
@font-face{font-family:'Thunder';font-weight:400;font-style:italic;font-display:swap;
  src:url('fonts/Thunder-LCItalic.woff2') format('woff2');}
@font-face{font-family:'Thunder';font-weight:500;font-style:normal;font-display:swap;
  src:url('fonts/Thunder-MediumLC.woff2') format('woff2');}
@font-face{font-family:'Thunder';font-weight:500;font-style:italic;font-display:swap;
  src:url('fonts/Thunder-MediumLCItalic.woff2') format('woff2');}
@font-face{font-family:'Thunder';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/Thunder-SemiBoldLC.woff2') format('woff2');}
@font-face{font-family:'Thunder';font-weight:700;font-style:normal;font-display:swap;
  src:url('fonts/Thunder-BoldLC.woff2') format('woff2');}
@font-face{font-family:'Thunder';font-weight:800;font-style:normal;font-display:swap;
  src:url('fonts/Thunder-ExtraBoldLC.woff2') format('woff2');}
@font-face{font-family:'Thunder';font-weight:900;font-style:normal;font-display:swap;
  src:url('fonts/Thunder-BlackLC.woff2') format('woff2');}

/* --------------------------------------------------------------- Base/reset -- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  background:var(--cream);color:var(--navy);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none;}
a{color:inherit;}

/* ============================================ Bouton générique unifié (.btn) ==
   TOUS les boutons cliquables ont ce look : contour navy -> vert au survol.   */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Thunder',sans-serif;font-weight:700;font-size:clamp(17px,1.55vw,22px);
  line-height:1;color:var(--navy);background:transparent;
  border:2.5px solid var(--navy);border-radius:16px;
  padding:clamp(12px,1.2vw,16px) clamp(26px,3vw,44px);
  text-decoration:none;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s,transform .12s;
}
.btn:hover,.btn:focus-visible{background:var(--green);border-color:var(--green);color:var(--cream);outline:none;}
.btn:active{transform:translateY(1px);}
.btn svg{width:20px;height:20px;}

/* ================================================================= Bloc FAQ ==
   Hauteur bornée à l'écran : la page ne défile pas pour voir la FAQ ;
   seul le bloc des bulles défile en interne.                                  */
.faq{
  min-height:100dvh;display:flex;align-items:center;       /* tout centré verticalement */
  padding:clamp(28px,6vh,76px) clamp(24px,5vw,76px);       /* respiration haut/bas + côtés */
}
.faq__grid{
  width:100%;max-width:1180px;margin:auto;
  display:grid;grid-template-columns:1fr 1.38fr;
  gap:clamp(26px,4.5vw,76px);align-items:stretch;
}

/* ---- Colonne gauche : GROS lockup « FAQ » (haut) + Prendre RDV (bas) ------ */
/* padding-left pousse le bloc vers le CENTRE (pas vers le bord gauche) */
.faq__intro{display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(2px,1.2vh,16px) 0;padding-left:clamp(0px,3vw,56px);}
.faq__logo{flex:0 0 auto;}
.faq__title{
  font-family:'Thunder',sans-serif;font-weight:800;color:var(--navy);
  font-size:clamp(116px,15.5vw,238px);line-height:.74;letter-spacing:.003em;
}
.faq__subtitle{                       /* tucké sous le titre, façon logo */
  font-family:'Thunder',sans-serif;font-weight:500;color:var(--navy);
  font-size:clamp(20px,2.4vw,36px);letter-spacing:.03em;
  margin-top:clamp(16px,2.2vw,32px);padding-left:.2em;   /* dégage le jambage du « Q » */
}
.faq__cta{align-self:flex-start;      /* collé en bas de la colonne (space-between) */
  font-size:clamp(21px,2vw,33px);border-radius:18px;
  padding:clamp(16px,1.6vw,24px) clamp(36px,3.8vw,62px);}

/* ---- Colonne droite : recherche (discrète) + liste (≈5,5 bulles) --------- */
/* flex-start + hauteur de liste FIXE -> rien ne bouge/recentre quand on filtre :
   la recherche reste en place et les bulles remontent tout en haut. */
.faq__col{display:flex;flex-direction:column;min-height:0;justify-content:flex-start;position:relative;}

.faq__search{position:relative;display:flex;align-items:center;flex:0 0 auto;margin-bottom:clamp(12px,1.4vw,18px);}
.faq__search-ico{position:absolute;left:18px;width:17px;height:17px;color:var(--navy);opacity:.38;pointer-events:none;}
#faqSearch{
  width:100%;font:inherit;font-size:clamp(14px,1vw,15.5px);color:var(--navy);
  background:transparent;border:1.5px solid var(--navy-20);border-radius:999px;
  padding:clamp(10px,1vw,13px) 20px clamp(10px,1vw,13px) 44px;
  transition:border-color .2s,background-color .2s;
}
#faqSearch::placeholder{color:var(--navy);opacity:.45;}
#faqSearch:focus{outline:none;border-color:var(--navy-50);background:var(--navy-06);}
#faqSearch::-webkit-search-cancel-button{cursor:pointer;}

/* ---- La LISTE : ~5,5 bulles visibles (dernière coupée = indice de scroll) - */
.faq__list{
  flex:0 0 auto;min-height:0;height:clamp(400px,60vh,540px);   /* hauteur FIXE = ancre stable */
  overflow-y:auto;overflow-x:hidden;
  padding-right:clamp(12px,1.3vw,20px);
  overscroll-behavior:contain;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:var(--navy-20) transparent;
}
.faq__list:hover,.faq__list:focus-within,
.faq__list.is-scrolling{scrollbar-color:var(--navy-50) transparent;}
.faq__list::-webkit-scrollbar{width:6px;}
.faq__list::-webkit-scrollbar-track{background:transparent;}
.faq__list::-webkit-scrollbar-thumb{background:var(--navy-20);border-radius:999px;transition:background-color .2s;}
.faq__list:hover::-webkit-scrollbar-thumb,
.faq__list.is-scrolling::-webkit-scrollbar-thumb{background:var(--navy-50);}
.faq__list::-webkit-scrollbar-thumb:active{background:var(--navy-50);}

.faq__noresult{padding:18px 6px;color:var(--navy);opacity:.75;}
.faq__noresult a{color:var(--green);font-weight:600;}

/* ---- « Peek » : indicateur de scroll (la dernière bulle se fond + chevron) - */
.faq__peek{
  position:absolute;left:0;right:0;bottom:0;height:clamp(54px,7vh,76px);
  pointer-events:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;
  background:linear-gradient(to top,var(--cream) 16%,rgba(252,250,236,0));
  opacity:1;transition:opacity .25s ease;z-index:3;
}
.faq__col.at-bottom .faq__peek,
.faq__col.no-scroll .faq__peek{opacity:0;}        /* caché en bas / quand peu de résultats */
.faq__peek svg{width:26px;height:26px;color:var(--navy);opacity:.6;animation:peekbob 1.5s ease-in-out infinite;}
@keyframes peekbob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---- Une bulle (accordéon) ------------------------------------------------ */
.faq__item{margin-bottom:clamp(10px,1vw,14px);}
.faq__item[hidden]{display:none;}
.faq__item:last-child{margin-bottom:2px;}

.faq__q{
  width:100%;display:flex;align-items:center;gap:16px;text-align:left;
  background:var(--navy);color:var(--cream);border-radius:999px;
  padding:clamp(14px,1.5vw,19px) clamp(20px,2vw,30px);
  font-size:clamp(14px,1.18vw,18px);font-weight:500;line-height:1.25;
  transition:border-radius .5s var(--ease-visc),filter .2s;   /* morph d'angle visqueux */
}
.faq__q:hover{filter:brightness(1.08);}
.faq__q-text{flex:1 1 auto;}
.faq__icon{
  flex:0 0 auto;width:clamp(26px,2.4vw,32px);height:clamp(26px,2.4vw,32px);
  border-radius:50%;background:var(--cream);position:relative;
  transition:transform .5s var(--ease-visc);
}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;top:50%;left:50%;
  width:46%;height:2.4px;border-radius:2px;background:var(--navy);
  transform:translate(-50%,-50%);
}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg);}

/* Panneau réponse : grid-rows = animation fluide qui pousse la bulle du dessous */
.faq__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .48s var(--ease-visc);}
.faq__panel-inner{overflow:hidden;opacity:0;transition:opacity .4s ease;}
.faq__a{
  padding:clamp(14px,1.6vw,20px) clamp(22px,2.2vw,32px) clamp(16px,1.8vw,24px);
  color:var(--navy);font-size:clamp(13.5px,1.05vw,16px);line-height:1.6;
}
.faq__a p{margin:0 0 .7em;}
.faq__a p:last-child{margin-bottom:0;}
.faq__a strong{font-weight:700;}
.faq__a ul{margin:.2em 0 .8em;padding-left:1.1em;}
.faq__a li{margin:.25em 0;}
/* Liens « service » à l'intérieur des réponses (à conserver tels quels) */
.faq__a a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

.faq__item.is-open .faq__q{border-radius:22px;}
.faq__item.is-open .faq__icon{transform:rotate(135deg);}
.faq__item.is-open .faq__panel{grid-template-rows:1fr;}
.faq__item.is-open .faq__panel-inner{opacity:1;}

/* ----- Tableau d'aides ----------------------------------------------------- */
.aide-table{width:100%;border-collapse:collapse;margin:.4em 0 .8em;font-size:.95em;}
.aide-table th,.aide-table td{border:1px solid var(--navy-20);padding:6px 9px;text-align:left;}
.aide-table th{background:var(--navy);color:var(--cream);font-weight:600;}

/* ----- Liste des villes ---------------------------------------------------- */
.villes{line-height:2;margin-top:.3em;}
.villes a{color:var(--navy);font-weight:600;text-decoration:none;
  border-bottom:1.5px solid var(--navy-20);transition:border-color .2s,color .2s;white-space:nowrap;}
.villes a:hover{color:var(--green);border-color:var(--green);}
.villes .sep{color:var(--navy-50);margin:0 .35em;}

/* ----- Bouton PDF (même look que .btn : contour navy -> vert) -------------- */
.faq__a a.pdf-btn{
  display:inline-flex;align-items:center;gap:10px;margin-top:.5em;
  font-family:'Thunder',sans-serif;font-weight:700;font-size:clamp(15px,1.2vw,18px);
  color:var(--navy);background:transparent;border:2.5px solid var(--navy);border-radius:14px;
  padding:10px 18px;text-decoration:none;
  transition:background-color .2s,color .2s,border-color .2s;
}
.faq__a a.pdf-btn:hover{background:var(--green);border-color:var(--green);color:var(--cream);}
.faq__a a.pdf-btn svg{width:18px;height:18px;}

/* ============================================ Formulaire « Nous contacter » ==
   Section pleine hauteur + centrée -> toujours bien cadrée à l'arrivée.       */
.eae-contact{
  min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(16px,2.6vw,42px) clamp(16px,4vw,40px);scroll-margin-top:0;
}
.contact__title{
  text-align:center;font-family:'Thunder',sans-serif;font-weight:500;font-style:italic;
  color:var(--navy);font-size:clamp(32px,4.4vw,58px);line-height:1;
  margin-bottom:clamp(12px,1.6vw,22px);
}
.contact__frame{max-width:720px;width:100%;margin:0 auto;
  border:2.5px solid var(--navy);border-radius:24px;padding:clamp(14px,1.8vw,22px);}
.contact__form{display:flex;flex-direction:column;gap:clamp(8px,1vw,12px);}
.contact__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,12px);}
.field{
  width:100%;background:var(--navy);color:var(--cream);border:none;border-radius:999px;
  padding:clamp(11px,1.2vw,15px) clamp(18px,2vw,26px);font:inherit;font-size:clamp(14px,1.1vw,16px);
}
.field::placeholder{color:var(--cream-60);}
.field:focus{outline:2px solid var(--cream-60);outline-offset:-3px;}   /* discret, AUCUN vert */
select.field{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FCFAEC' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 22px center;}
.field--area{border-radius:22px;min-height:88px;resize:vertical;}
.send{width:100%;font-style:italic;font-weight:600;border-radius:999px;}   /* = .btn + pleine largeur */

/* ================================================================ Responsive =
   Mobile : header/CTA repensés. Le bloc bulles reste borné -> scroll au doigt,
   on n'affiche pas tout d'un coup. Recherche en haut. CTA fixé en bas.        */
@media (max-width:820px){
  .faq{height:100dvh;padding:clamp(14px,3vh,24px) 16px calc(env(safe-area-inset-bottom) + 78px);}
  .faq__grid{display:flex;flex-direction:column;gap:14px;height:100%;}
  .faq__intro{flex:0 0 auto;align-items:center;text-align:center;}
  .faq__title{font-size:clamp(66px,21vw,120px);line-height:.78;}
  .faq__subtitle{font-size:clamp(13px,3.6vw,18px);}
  .faq__col{flex:1 1 auto;min-height:0;justify-content:flex-start;}
  .faq__list{flex:1 1 auto;max-height:none;padding-right:6px;-webkit-overflow-scrolling:touch;}
  .faq__q{font-size:clamp(14.5px,3.9vw,17px);gap:12px;padding:15px 18px;}
  /* CTA Prendre RDV : barre fixe en bas, toujours accessible au pouce */
  .faq__cta{
    position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 14px);
    z-index:30;margin:0;width:auto;box-shadow:0 6px 20px rgba(23,57,85,.22);
    background:var(--cream);
  }
  .contact__row{grid-template-columns:1fr;}
}

/* Accessibilité : « réduire les animations » -> tout devient instantané */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;scroll-behavior:auto !important;}
}