.outil-fissures{--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-fissures, .outil-fissures *{box-sizing:border-box}
.outil-fissures{margin:0;background:var(--bg);font-family:'Inter', sans-serif;color:var(--text);line-height:1.55}
.outil-fissures a{text-decoration:none;color:inherit}
.outil-fissures button, .outil-fissures input, .outil-fissures select{font-family:inherit}
.outil-fissures .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-fissures .logo{display:flex;align-items:center;gap:12px}
.outil-fissures .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-fissures .logo strong{font-size:31px;color:var(--blue);letter-spacing:.5px;line-height:1}
.outil-fissures .logo span{display:block;font-size:11px;color:var(--blue);font-weight:800;margin-top:2px}
.outil-fissures .nav{display:flex;gap:26px;align-items:center;color:var(--blue);font-size:12px;font-weight:900;text-transform:uppercase}
.outil-fissures .nav .cta{background:var(--red);color:#fff;border-radius:7px;padding:15px 20px;box-shadow:0 10px 22px rgba(207,32,41,.2)}
.outil-fissures .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-fissures .hero-copy{padding:48px 34px 42px;max-width:900px}
.outil-fissures .kicker{color:var(--red);font-size:14px;font-weight:950;text-transform:uppercase;margin-bottom:18px}
.outil-fissures 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-fissures .hero-copy p{font-size:17px;line-height:1.5;font-weight:700;color:#253751;margin:0 0 16px}
.outil-fissures .slogan{color:var(--red)!important;text-transform:uppercase;font-weight:950!important}
.outil-fissures .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.outil-fissures .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-fissures .btn:hover{transform:translateY(-1px)}
.outil-fissures .btn-red{background:var(--red);color:#fff}
.outil-fissures .btn-red:hover{background:var(--red2)}
.outil-fissures .btn-blue{background:var(--blue);color:#fff}
.outil-fissures .btn-ghost{background:#fff;color:var(--blue);border:1px solid var(--line)}
.outil-fissures .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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 820"%3E%3Cdefs%3E%3ClinearGradient id="bg" x1="0" y1="0" x2="1" y2="1"%3E%3Cstop stop-color="%23eff6fb"/%3E%3Cstop offset="1" stop-color="%23cbd9e7"/%3E%3C/linearGradient%3E%3Cfilter id="shadow" x="-20%25" y="-20%25" width="140%25" height="140%25"%3E%3CfeDropShadow dx="0" dy="22" stdDeviation="20" flood-color="%23082f57" flood-opacity=".18"/%3E%3C/filter%3E%3C/defs%3E%3Crect width="1200" height="820" fill="url(%23bg)"/%3E%3Cpath d="M0 650 L1200 430" stroke="%23ffffff" stroke-width="34" opacity=".55"/%3E%3Cg filter="url(%23shadow)"%3E%3Cpath d="M350 600V330L600 145L850 330V600Z" fill="%23ffffff" stroke="%23d8e2ec" stroke-width="8"/%3E%3Cpath d="M315 345L600 125L885 345" fill="none" stroke="%23082f57" stroke-width="28" stroke-linecap="round" stroke-linejoin="round"/%3E%3Crect x="505" y="420" width="190" height="180" rx="10" fill="%23eef6fb" stroke="%23b7c8d8" stroke-width="6"/%3E%3Cpath d="M600 420v180" stroke="%23b7c8d8" stroke-width="6"/%3E%3Cpath d="M615 235 C585 290 635 315 603 365 C575 408 625 435 590 520" fill="none" stroke="%23cf2029" stroke-width="10" stroke-linecap="round"/%3E%3Cpath d="M604 365 L552 340 M604 365 L658 334 M590 520 L535 480 M590 520 L640 488" stroke="%23cf2029" stroke-width="6" stroke-linecap="round"/%3E%3C/g%3E%3Cg filter="url(%23shadow)"%3E%3Crect x="680" y="510" width="340" height="135" rx="26" fill="%23ffffff" stroke="%23d8e2ec" stroke-width="5"/%3E%3Ccircle cx="745" cy="578" r="38" fill="%23cf2029"/%3E%3Cpath d="M730 578h30M745 563v30" stroke="%23ffffff" stroke-width="9" stroke-linecap="round"/%3E%3Crect x="805" y="555" width="155" height="22" rx="11" fill="%23082f57" opacity=".95"/%3E%3Crect x="805" y="592" width="110" height="16" rx="8" fill="%23dce8f2"/%3E%3C/g%3E%3C/svg%3E') center/cover no-repeat}
.outil-fissures .wrap{max-width:1320px;margin:0 auto;padding:30px 18px 60px}
.outil-fissures .section-head{text-align:center;margin:0 0 26px}
.outil-fissures .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-fissures .underline{width:38px;height:3px;background:var(--red);margin:12px auto}
.outil-fissures .section-head p{margin:0 auto;color:var(--muted);max-width:930px;font-size:16px;font-weight:700}
.outil-fissures .intro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 22px}
.outil-fissures .intro-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--soft);text-align:center}
.outil-fissures .intro-card h3{margin:0 0 8px;color:var(--blue);font-size:20px;text-align:center}
.outil-fissures .intro-card p{margin:0;color:var(--muted);font-weight:700;font-size:14px;text-align:center}
.outil-fissures .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-fissures .use-note strong{color:var(--blue);font-weight:950}
.outil-fissures .warning-note{border-left-color:var(--red);border-right-color:var(--red);background:#fffafa}
.outil-fissures .panel{background:#fff;border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);overflow:hidden;margin:0 0 28px}
.outil-fissures .panel-top{padding:28px 28px 18px;border-bottom:1px solid var(--line);background: var(--title-color);text-align:center}
.outil-fissures .panel-top h2{margin:0 0 8px;color:white;font-size:1.6rem;line-height:1.08;font-weight:950;text-transform:uppercase}
.outil-fissures .panel-top p{margin:0 auto;color:white;max-width:920px;font-weight:700}
.outil-fissures .panel-body{padding:24px 28px 30px}
.outil-fissures .progress-wrap{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.outil-fissures .progress{flex:1;height:10px;background:#edf1f6;border-radius:999px;overflow:hidden}
.outil-fissures .progress-bar{width:0;height:100%;background:linear-gradient(90deg,var(--blue),var(--red));transition:.24s ease}
.outil-fissures .progress-text{white-space:nowrap;font-size:14px;color:var(--muted);font-weight:800}
.outil-fissures .question{margin:0 0 8px;color:var(--blue);font-size:31px;line-height:1.08;font-weight:950;text-align:center}
.outil-fissures .question-help{margin:0 auto;color:var(--muted);font-size:15px;font-weight:700;text-align:center;max-width:760px}
.outil-fissures .answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.outil-fissures .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-fissures .answer-btn span{display:block;color:var(--muted);font-size:14px;font-weight:700;margin-top:4px}
.outil-fissures .answer-btn:hover{border-color:#bfd0e5;background:#f9fbff;transform:translateY(-1px)}
.outil-fissures .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;justify-content:center}
.outil-fissures .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-fissures .result-card{border:1px solid var(--line);border-radius:26px;overflow:hidden;background:#fff}
.outil-fissures .result-head{padding:26px 22px 18px;border-bottom:1px solid rgba(0,0,0,.05);text-align:center}
.outil-fissures .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-fissures .result-title{margin:0;color:var(--blue);font-size:30px;line-height:1.08;font-weight:950}
.outil-fissures .result-body{padding:22px;display:grid;gap:18px}
.outil-fissures .result-body p{margin:0;color:#35445c;font-weight:700}
.outil-fissures .result-green{background:#edf8f2;border-color:#cfe7d9}
.outil-fissures .result-green .result-pill{background:#dff3e7;color:var(--green)}
.outil-fissures .result-orange{background:#fff5df;border-color:#f2dfaa}
.outil-fissures .result-orange .result-pill{background:#ffefbf;color:var(--orange)}
.outil-fissures .result-red{background:#fef3f2;border-color:#f0d0cc}
.outil-fissures .result-red .result-pill{background:#fde2df;color:var(--danger)}
.outil-fissures .result-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:14px;align-items:stretch}
.outil-fissures .small-block{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column}
.outil-fissures .small-block h4{margin:0 0 8px;color:var(--blue);font-size:16px}
.outil-fissures .small-block p, .outil-fissures .small-block li{margin:0;color:var(--muted);font-size:14px;font-weight:700}
.outil-fissures .small-block ul{margin:0;padding-left:18px;display:grid;gap:9px}
.outil-fissures .recap-list{display:grid;gap:6px}
.outil-fissures .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-fissures .offer-block{background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;text-align:center}
.outil-fissures .offer-title{margin:0 0 8px;color:var(--blue);font-size:26px;line-height:1.08;font-weight:950}
.outil-fissures .legal{padding-top:2px;color:var(--muted);font-size:12px;text-align:center}
.outil-fissures .content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 26px}
.outil-fissures .content-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--soft)}
.outil-fissures .content-card h3{margin:0 0 10px;color:var(--blue);font-size:21px;text-align:center}
.outil-fissures .content-card p{margin:0;color:var(--muted);font-weight:700;font-size:14px;text-align:center}
.outil-fissures .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-fissures .alert-panel h2{margin:0 0 8px;text-align:center;color:white;font-size:1.6rem;text-transform:uppercase}
.outil-fissures .alert-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.outil-fissures .alert-item{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff}
.outil-fissures .alert-item b{display:block;color:var(--blue);margin-bottom:5px}
.outil-fissures .alert-item span{display:block;color:var(--muted);font-weight:700;font-size:14px}
.outil-fissures .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-fissures .band h3{margin:0 0 8px;color:var(--blue);font-size:28px;line-height:1.1}
.outil-fissures .band p{margin:0 auto;color:var(--muted);font-weight:700;max-width:920px}
.outil-fissures .faq{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--soft);padding:28px 24px}
.outil-fissures .faq h2{margin:0 0 18px;text-align:center;color:var(--blue);font-size:1.6rem;text-transform:uppercase}
.outil-fissures .faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.outil-fissures .faq-item{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:#fff}
.outil-fissures .faq-item summary{cursor:pointer;font-weight:950;color:var(--blue)}
.outil-fissures .faq-item p{margin:10px 0 0;color:var(--muted);font-weight:700}
@media(max-width:1060px){
  .outil-fissures .hero, .outil-fissures .intro-grid, .outil-fissures .content-grid, .outil-fissures .faq-grid, .outil-fissures .result-grid{grid-template-columns:1fr}
  .outil-fissures .hero-visual{min-height:280px}
  .outil-fissures .alert-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .outil-fissures .answers{grid-template-columns:1fr}
  .outil-fissures .topbar{position:relative;height:auto;padding:16px}
  .outil-fissures .nav{display:none}
  .outil-fissures .wrap{padding:18px 10px 38px}
  .outil-fissures .hero-copy{padding:32px 18px}
  .outil-fissures .panel-top, .outil-fissures .panel-body{padding-left:16px;padding-right:16px}
  .outil-fissures .question{font-size:25px}
  .outil-fissures .progress-wrap{display:grid}
}

/* ============================================================
   FAQ — alignement avec le style de la page Outils (faq-list)
   1 colonne, bouton + chevron animé
============================================================ */
.outil-fissures .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-fissures .faq-item {
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 0;
    background: #fff;
}
.outil-fissures .faq-item:last-child {
    border-bottom: none;
}
.outil-fissures .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-fissures .faq-question:hover {
    background: var(--bg, #f5f7fb);
}
.outil-fissures .faq-question[aria-expanded="true"] {
    background: var(--bg, #f5f7fb);
}
.outil-fissures .faq-chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
}
.outil-fissures .faq-question[aria-expanded="true"] .faq-chevron {
    transform: rotate(180deg);
}
.outil-fissures .faq-answer {
    display: none;
    padding: 0 24px 20px;
    background: var(--bg, #f5f7fb);
}
.outil-fissures .faq-answer.is-open {
    display: block;
}
.outil-fissures .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-fissures .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-fissures .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-fissures .hero-visual{
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
    min-height: 0;
    background: url('../images/outil-pre-diagnostic-fissure-certis.webp') center/cover no-repeat !important;
}
.outil-fissures .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-fissures .hero-copy{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 64px);
}
.outil-fissures .hero-copy .kicker,
.outil-fissures .kicker{
    color: #fff;
}
.outil-fissures h1{
    color: #fff !important;
    max-width: 580px;
}
.outil-fissures .hero-copy p{
    color: rgba(255, 255, 255, 0.90);
    max-width: 580px;
}
.outil-fissures .slogan{
    color: var(--red) !important;
}
@media (max-width: 768px) {
    .outil-fissures .hero{
        height: auto;
        min-height: 500px;
        max-height: none;
    }
    .outil-fissures .hero-copy{
        width: 100%;
        padding: 32px 24px 44px;
    }
    .outil-fissures h1,
    .outil-fissures .hero-copy p{
        max-width: 100%;
    }
}


/* ============================================================
   HERO — correction : image cadrée à droite (non rognée),
   fond uni à gauche derrière le texte
============================================================ */
.outil-fissures .hero::before{
    content: none;
}
.outil-fissures .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-fissure-certis.webp') center / contain no-repeat !important;
}
.outil-fissures .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-fissures .hero-visual{
        display: none;
    }
    .outil-fissures .hero-copy{
        max-width: none;
    }
    .outil-fissures h1,
    .outil-fissures .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-fissures .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-fissure-certis.webp') center / cover no-repeat !important;
}