.outil-humidite{--blue:#082f57;--blue2:#0d3c6d;--red:#cf2029;--red2:#b71922;--bg:#f7f9fc;--line:#e7ecf3;--text:#2d3e56;--muted:#667085;--shadow:0 18px 44px rgba(8,47,87,.09);--soft:0 10px 26px rgba(8,47,87,.07);--pale:#eef6fb;--green:#17824f;--orange:#b06d00;--danger:#b42318}
.outil-humidite, .outil-humidite *{box-sizing:border-box}
.outil-humidite{margin:0;background:var(--bg);font-family:'Inter', sans-serif;color:var(--text);line-height:1.55}
.outil-humidite a{text-decoration:none;color:inherit}
.outil-humidite button, .outil-humidite input, .outil-humidite select{font-family:inherit}
.outil-humidite .topbar{height:78px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:40}
.outil-humidite .logo{display:flex;align-items:center;gap:12px}
.outil-humidite .logo-mark{width:54px;height:54px;border:2px solid #d8dee8;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--red);font-weight:950;font-size:24px}
.outil-humidite .logo strong{font-size:31px;color:var(--blue);letter-spacing:.5px;line-height:1}
.outil-humidite .logo span{display:block;font-size:11px;color:var(--blue);font-weight:800;margin-top:2px}
.outil-humidite .nav{display:flex;gap:26px;align-items:center;color:var(--blue);font-size:12px;font-weight:900;text-transform:uppercase}
.outil-humidite .nav .cta{background:var(--red);color:#fff;border-radius:7px;padding:15px 20px;box-shadow:0 10px 22px rgba(207,32,41,.2)}
.outil-humidite .hero{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.96) 50%,rgba(255,255,255,.62) 100%),linear-gradient(135deg,#eef4f9,#d7e4ee);min-height:360px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;border-bottom:1px solid var(--line);overflow:hidden}
.outil-humidite .hero-copy{padding:48px 34px 42px;max-width:900px}
.outil-humidite .kicker{color:var(--red);font-size:14px;font-weight:950;text-transform:uppercase;margin-bottom:18px}
.outil-humidite h1{margin:0 0 16px;color: var(--blue) !important;font-size:2.5rem;line-height:1.03;text-transform:uppercase;font-weight:950;letter-spacing:-.03em}
.outil-humidite .hero-copy p{font-size:17px;line-height:1.5;font-weight:700;color:#253751;margin:0 0 16px}
.outil-humidite .slogan{color:var(--red)!important;text-transform:uppercase;font-weight:950!important}
.outil-humidite .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.outil-humidite .btn{border:0;border-radius:12px;min-height:50px;padding:0 18px;font-weight:950;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.15s ease;font-size:14px}
.outil-humidite .btn:hover{transform:translateY(-1px)}
.outil-humidite .btn-red{background:var(--red);color:#fff}
.outil-humidite .btn-red:hover{background:var(--red2)}
.outil-humidite .btn-blue{background:var(--blue);color:#fff}
.outil-humidite .btn-ghost{background:#fff;color:var(--blue);border:1px solid var(--line)}
.outil-humidite .hero-visual{height:100%;min-height:390px;background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.03)),url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%20820%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22bg%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23eff6fb%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cbd9e7%22/%3E%3C/linearGradient%3E%3Cfilter%20id%3D%22shadow%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%2222%22%20stdDeviation%3D%2220%22%20flood-color%3D%22%23082f57%22%20flood-opacity%3D%22.18%22/%3E%3C/filter%3E%3C/defs%3E%3Crect%20width%3D%221200%22%20height%3D%22820%22%20fill%3D%22url%28%23bg%29%22/%3E%3Cpath%20d%3D%22M0%20650%20L1200%20430%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%2234%22%20opacity%3D%22.55%22/%3E%3Cg%20opacity%3D%22.26%22%20stroke%3D%22%23082f57%22%20stroke-width%3D%223%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M90%20160H520V590H90z%22/%3E%3Cpath%20d%3D%22M145%20220H465M145%20280H465M145%20340H420M145%20400H465M145%20460H360%22/%3E%3Cpath%20d%3D%22M735%20115h345v245H735z%22/%3E%3Cpath%20d%3D%22M775%20305h265M775%20260h230M775%20215h170%22/%3E%3C/g%3E%3Cg%20filter%3D%22url%28%23shadow%29%22%3E%3Cpath%20d%3D%22M350%20600V330L600%20145L850%20330V600Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23d8e2ec%22%20stroke-width%3D%228%22/%3E%3Cpath%20d%3D%22M315%20345L600%20125L885%20345%22%20fill%3D%22none%22%20stroke%3D%22%23082f57%22%20stroke-width%3D%2228%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Crect%20x%3D%22505%22%20y%3D%22420%22%20width%3D%22190%22%20height%3D%22180%22%20rx%3D%2210%22%20fill%3D%22%23eef6fb%22%20stroke%3D%22%23b7c8d8%22%20stroke-width%3D%226%22/%3E%3Cpath%20d%3D%22M600%20420v180%22%20stroke%3D%22%23b7c8d8%22%20stroke-width%3D%226%22/%3E%3Cpath%20d%3D%22M465%20520%20C515%20490%20555%20548%20615%20510%20C675%20470%20730%20530%20775%20498%22%20fill%3D%22none%22%20stroke%3D%22%230d6ea8%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.75%22/%3E%3Cpath%20d%3D%22M455%20565%20C515%20535%20560%20592%20623%20555%20C690%20515%20735%20578%20785%20545%22%20fill%3D%22none%22%20stroke%3D%22%230d6ea8%22%20stroke-width%3D%2211%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.42%22/%3E%3Cpath%20d%3D%22M705%20260%20C748%20318%20777%20365%20777%20410%20C777%20458%20744%20490%20704%20490%20C662%20490%20630%20458%20630%20410%20C630%20365%20662%20318%20705%20260Z%22%20fill%3D%22%23cf2029%22%20opacity%3D%22.95%22/%3E%3Cpath%20d%3D%22M675%20410%20C690%20396%20720%20396%20735%20410%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22/%3E%3C/g%3E%3Cg%20filter%3D%22url%28%23shadow%29%22%3E%3Crect%20x%3D%22675%22%20y%3D%22530%22%20width%3D%22350%22%20height%3D%22130%22%20rx%3D%2226%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23d8e2ec%22%20stroke-width%3D%225%22/%3E%3Ccircle%20cx%3D%22742%22%20cy%3D%22595%22%20r%3D%2238%22%20fill%3D%22%23082f57%22/%3E%3Cpath%20d%3D%22M742%20568%20C759%20592%20771%20611%20771%20627%20C771%20648%20758%20662%20742%20662%20C725%20662%20712%20648%20712%20627%20C712%20611%20725%20592%20742%20568Z%22%20fill%3D%22%23ffffff%22%20transform%3D%22scale%28.72%29%20translate%28290%20240%29%22/%3E%3Crect%20x%3D%22807%22%20y%3D%22575%22%20width%3D%22155%22%20height%3D%2222%22%20rx%3D%2211%22%20fill%3D%22%23082f57%22%20opacity%3D%22.95%22/%3E%3Crect%20x%3D%22807%22%20y%3D%22612%22%20width%3D%22110%22%20height%3D%2216%22%20rx%3D%228%22%20fill%3D%22%23dce8f2%22/%3E%3C/g%3E%3C/svg%3E') center/cover no-repeat}
.outil-humidite .wrap{max-width:1320px;margin:0 auto;padding:30px 18px 60px}
.outil-humidite .section-head{text-align:center;margin:0 0 26px}
.outil-humidite .section-head h2{margin:0 0 8px;color:var(--blue);font-size:1.6rem;line-height:1.08;font-weight:950;text-transform:uppercase}
.outil-humidite .underline{width:38px;height:3px;background:var(--red);margin:12px auto}
.outil-humidite .section-head p{margin:0 auto;color:var(--muted);max-width:930px;font-size:16px;font-weight:700}
.outil-humidite .intro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 22px}
.outil-humidite .intro-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--soft);text-align:center}
.outil-humidite .intro-card h3{margin:0 0 8px;color:var(--blue);font-size:20px;text-align:center}
.outil-humidite .intro-card p{margin:0;color:var(--muted);font-weight:700;font-size:14px;text-align:center}
.outil-humidite .use-note{background:#fff;border:1px solid var(--line);border-left:6px solid var(--blue);border-right:6px solid var(--blue);border-radius:18px;padding:18px 28px;margin:0 0 22px;box-shadow:var(--soft);color:#35445c;font-weight:750;text-align:center}
.outil-humidite .use-note strong{color:var(--blue);font-weight:950}
.outil-humidite .health-note{border-left-color:var(--red);border-right-color:var(--red);background:#fffafa}
.outil-humidite .panel{background:#fff;border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);overflow:hidden;margin:0 0 28px}
.outil-humidite .panel-top{padding:28px 28px 18px;border-bottom:1px solid var(--line);background: var(--title-color);text-align:center}
.outil-humidite .panel-top h2{margin:0 0 8px;color:white;font-size:1.6rem;line-height:1.08;font-weight:950;text-transform:uppercase}
.outil-humidite .panel-top p{margin:0 auto;color:white;max-width:920px;font-weight:700}
.outil-humidite .panel-body{padding:24px 28px 30px}
.outil-humidite .progress-wrap{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.outil-humidite .progress{flex:1;height:10px;background:#edf1f6;border-radius:999px;overflow:hidden}
.outil-humidite .progress-bar{width:0;height:100%;background:linear-gradient(90deg,var(--blue),var(--red));transition:.24s ease}
.outil-humidite .progress-text{white-space:nowrap;font-size:14px;color:var(--muted);font-weight:800}
.outil-humidite .question{margin:0 0 8px;color:var(--blue);font-size:31px;line-height:1.08;font-weight:950;text-align:center}
.outil-humidite .question-help{margin:0 auto;color:var(--muted);font-size:15px;font-weight:700;text-align:center;max-width:760px}
.outil-humidite .answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.outil-humidite .answer-btn{width:100%;border:1px solid var(--line);background:#fff;padding:18px 16px;border-radius:18px;text-align:left;font-size:16px;font-weight:850;color:#15233d;cursor:pointer;transition:.18s ease}
.outil-humidite .answer-btn span{display:block;color:var(--muted);font-size:14px;font-weight:700;margin-top:4px}
.outil-humidite .answer-btn:hover{border-color:#bfd0e5;background:#f9fbff;transform:translateY(-1px)}
.outil-humidite .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;justify-content:center}
.outil-humidite .mini-note{margin-top:18px;padding:14px 16px;border-radius:14px;background:#f8fafc;border:1px solid var(--line);color:var(--muted);font-size:14px;font-weight:700;text-align:center}
.outil-humidite .result-card{border:1px solid var(--line);border-radius:26px;overflow:hidden;background:#fff}
.outil-humidite .result-head{padding:26px 22px 18px;border-bottom:1px solid rgba(0,0,0,.05);text-align:center}
.outil-humidite .result-pill{display:inline-block;margin:0 0 10px;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:950;text-transform:uppercase}
.outil-humidite .result-title{margin:0;color:var(--blue);font-size:30px;line-height:1.08;font-weight:950}
.outil-humidite .result-body{padding:22px;display:grid;gap:18px}
.outil-humidite .result-body p{margin:0;color:#35445c;font-weight:700}
.outil-humidite .result-green{background:#edf8f2;border-color:#cfe7d9}
.outil-humidite .result-green .result-pill{background:#dff3e7;color:var(--green)}
.outil-humidite .result-orange{background:#fff5df;border-color:#f2dfaa}
.outil-humidite .result-orange .result-pill{background:#ffefbf;color:var(--orange)}
.outil-humidite .result-red{background:#fef3f2;border-color:#f0d0cc}
.outil-humidite .result-red .result-pill{background:#fde2df;color:var(--danger)}
.outil-humidite .result-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:14px;align-items:stretch}
.outil-humidite .small-block{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column}
.outil-humidite .small-block h4{margin:0 0 8px;color:var(--blue);font-size:16px}
.outil-humidite .small-block p, .outil-humidite .small-block li{margin:0;color:var(--muted);font-size:14px;font-weight:700}
.outil-humidite .small-block ul{margin:0;padding-left:18px;display:grid;gap:9px}
.outil-humidite .recap-list{display:grid;gap:6px}
.outil-humidite .recap-row{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:8px 10px;color:#35445c;font-size:12.5px;font-weight:750;line-height:1.35}
.outil-humidite .offer-block{background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;text-align:center}
.outil-humidite .offer-title{margin:0 0 8px;color:var(--blue);font-size:26px;line-height:1.08;font-weight:950}
.outil-humidite .legal{padding-top:2px;color:var(--muted);font-size:12px;text-align:center}
.outil-humidite .content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 26px}
.outil-humidite .content-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--soft)}
.outil-humidite .content-card h3{margin:0 0 10px;color:var(--blue);font-size:21px;text-align:center}
.outil-humidite .content-card p{margin:0;color:var(--muted);font-weight:700;font-size:14px;text-align:center}
.outil-humidite .alert-panel{background:var(--title-color);border:1px solid var(--line);border-radius:28px;box-shadow:var(--soft);padding:28px;margin:0 0 26px}
.outil-humidite .alert-panel h2{margin:0 0 8px;text-align:center;color:white;font-size:1.6rem;text-transform:uppercase}
.outil-humidite .alert-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.outil-humidite .alert-item{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff}
.outil-humidite .alert-item b{display:block;color:var(--blue);margin-bottom:5px}
.outil-humidite .alert-item span{display:block;color:var(--muted);font-weight:700;font-size:14px}
.outil-humidite .band{margin:26px 0;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--soft);padding:30px 28px;display:grid;grid-template-columns:1fr;gap:18px;align-items:center;text-align:center;justify-items:center}
.outil-humidite .band h3{margin:0 0 8px;color:var(--blue);font-size:28px;line-height:1.1}
.outil-humidite .band p{margin:0 auto;color:var(--muted);font-weight:700;max-width:920px}
.outil-humidite .faq{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--soft);padding:28px 24px}
.outil-humidite .faq h2{margin:0 0 18px;text-align:center;color:var(--blue);font-size:1.6rem;text-transform:uppercase}
.outil-humidite .faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.outil-humidite .faq-item{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:#fff}
.outil-humidite .faq-item summary{cursor:pointer;font-weight:950;color:var(--blue)}
.outil-humidite .faq-item p{margin:10px 0 0;color:var(--muted);font-weight:700}
@media(max-width:1060px){
  .outil-humidite .hero, .outil-humidite .intro-grid, .outil-humidite .content-grid, .outil-humidite .faq-grid, .outil-humidite .result-grid{grid-template-columns:1fr}
  .outil-humidite .hero-visual{min-height:280px}
  .outil-humidite .alert-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .outil-humidite .answers{grid-template-columns:1fr}
  .outil-humidite .topbar{position:relative;height:auto;padding:16px}
  .outil-humidite .nav{display:none}
  .outil-humidite .wrap{padding:18px 10px 38px}
  .outil-humidite .hero-copy{padding:32px 18px}
  .outil-humidite .panel-top, .outil-humidite .panel-body{padding-left:16px;padding-right:16px}
  .outil-humidite .question{font-size:25px}
  .outil-humidite .progress-wrap{display:grid}
}

/* ============================================================
   FAQ — alignement avec le style de la page Outils (faq-list)
   1 colonne, bouton + chevron animé
============================================================ */
.outil-humidite .faq-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}
.outil-humidite .faq-item {
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 0;
    background: #fff;
}
.outil-humidite .faq-item:last-child {
    border-bottom: none;
}
.outil-humidite .faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    font-weight: 950;
    font-size: 15px;
    color: var(--blue);
    text-align: left;
    transition: background 0.15s;
}
.outil-humidite .faq-question:hover {
    background: var(--bg, #f5f7fb);
}
.outil-humidite .faq-question[aria-expanded="true"] {
    background: var(--bg, #f5f7fb);
}
.outil-humidite .faq-chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
}
.outil-humidite .faq-question[aria-expanded="true"] .faq-chevron {
    transform: rotate(180deg);
}
.outil-humidite .faq-answer {
    display: none;
    padding: 0 24px 20px;
    background: var(--bg, #f5f7fb);
}
.outil-humidite .faq-answer.is-open {
    display: block;
}
.outil-humidite .faq-answer p {
    margin: 0 !important;
    padding: 0;
    color: var(--muted);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.7;
}
@media (max-width: 1060px) {
    .outil-humidite .faq-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   HERO — image plein cadre alignée sur le format page-outils
   Même hauteur (600px desktop / auto+500px mobile), même
   structure (image de fond + dégradé + texte en surimpression)
============================================================ */
.outil-humidite .hero{
    position: relative;
    overflow: hidden;
    height: 600px;
    min-height: 600px;
    max-height: 600px;
    display: flex;
    align-items: center;
    background: #2E3F5F;
    grid-template-columns: none;
    border-bottom: none;
}
.outil-humidite .hero-visual{
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
    min-height: 0;
    background: url('../images/outil-pre-diagnostic-humidite-certis.webp') center/cover no-repeat !important;
}
.outil-humidite .hero::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 55% 80% at 22% 50%, rgba(46,63,95,.30) 0%, transparent 100%),
        linear-gradient(90deg, rgba(46,63,95,1) 0%, rgba(46,63,95,.99) 18%, rgba(46,63,95,.95) 30%, rgba(46,63,95,.85) 40%, rgba(46,63,95,.60) 50%, rgba(46,63,95,.20) 56%, rgba(46,63,95,0) 62%);
}
.outil-humidite .hero-copy{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 64px);
}
.outil-humidite .hero-copy .kicker,
.outil-humidite .kicker{
    color: #fff;
}
.outil-humidite h1{
    color: #fff !important;
    max-width: 580px;
}
.outil-humidite .hero-copy p{
    color: rgba(255, 255, 255, 0.90);
    max-width: 580px;
}
.outil-humidite .slogan{
    color: var(--red) !important;
}
@media (max-width: 768px) {
    .outil-humidite .hero{
        height: auto;
        min-height: 500px;
        max-height: none;
    }
    .outil-humidite .hero-copy{
        width: 100%;
        padding: 32px 24px 44px;
    }
    .outil-humidite h1,
    .outil-humidite .hero-copy p{
        max-width: 100%;
    }
}


/* ============================================================
   HERO — correction : image cadrée à droite (non rognée),
   fond uni à gauche derrière le texte
============================================================ */
.outil-humidite .hero::before{
    content: none;
}
.outil-humidite .hero-visual{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    inset: auto;
    width: clamp(340px, 56%, 1100px);
    height: 100%;
    background: url('../images/outil-pre-diagnostic-humidite-certis.webp') center / contain no-repeat !important;
}
.outil-humidite .hero-visual::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(46,63,95,1) 0%, rgba(46,63,95,.65) 16%, rgba(46,63,95,0) 36%);
}
@media (max-width: 980px) {
    .outil-humidite .hero-visual{
        display: none;
    }
    .outil-humidite .hero-copy{
        max-width: none;
    }
    .outil-humidite h1,
    .outil-humidite .hero-copy p{
        max-width: 100%;
    }
}


/* ============================================================
   HERO — correction 2 : le cadre épouse exactement le ratio de
   l'image (1672x941) pour remplir toute la hauteur sans bande
============================================================ */
.outil-humidite .hero-visual{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: auto;
    height: 100%;
    aspect-ratio: 1672 / 941;
    background: url('../images/outil-pre-diagnostic-humidite-certis.webp') center / cover no-repeat !important;
}