/* ##########################################################################
   PHÉNIX V3.0 (BASE DE REFACTORISATION)
   --------------------------------------------------------------------------
   Ce fichier est la base de travail de la refonte complète du CSS.
   Cette version sera restructurée section par section.
########################################################################### */

/* ##########################################################################
   PHÉNIX V2.0
   SANNA ÉLECTRICITÉ | PROTECH
   --------------------------------------------------------------------------
   TABLE DES MATIÈRES

   01 - Variables
   02 - Base du site
   03 - Header
   04 - Hero
   05 - Bandeau
   06 - SANNA
   07 - PROTECH
   réf - RÉFÉRENCES & RÉALISATIONS
   08 - Contact
   09 - Footer
   10 - Responsive
   11 - CENTRE DE RESSOURCES
########################################################################### */


/* ##########################################################################
   01 - VARIABLES
########################################################################### */

:root{

    /* ======================================================================
       Couleurs
    ====================================================================== */

    --brand-1:#F59E0B;
    --brand-2:#0B0F14;
    --brand-3:#111827;

    --accent:#FACC15;

    --bg:#FFFFFF;
    --card:#FFFFFF;

    --text:#0B0F14;
    --muted:#4B5563;

    --border:rgba(0,0,0,.06);

    /* ======================================================================
       Dimensions
    ====================================================================== */

    --maxw:1320px;

    --radius:16px;

    /* ======================================================================
       Ombres
    ====================================================================== */

    --shadow-sm:0 6px 18px rgba(0,0,0,.05);
    --shadow-md:0 12px 28px rgba(0,0,0,.08);
    --shadow-lg:0 18px 40px rgba(0,0,0,.10);

    /* ======================================================================
       Animations
    ====================================================================== */

    --transition:.25s ease;

}

/* ========================================================================
   PROFESSIONAL WORDPRESS STRUCTURE
   Shared header/footer and block-based page layouts.
======================================================================== */

.pc-container{
    width:min(100% - 2rem, 1180px);
    margin-inline:auto;
}

.pc-narrow{
    max-width:800px;
}

.pc-skip-link{
    position:fixed;
    z-index:99999;
    top:1rem;
    left:1rem;
    padding:.75rem 1rem;
    background:#fff;
    color:var(--brand-2);
    box-shadow:var(--shadow-md);
    transform:translateY(-180%);
}

.pc-skip-link:focus{transform:translateY(0)}

.pc-topbar{
    padding:.45rem 1rem;
    background:var(--brand-2);
    color:#fff;
    text-align:center;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.02em;
}

.pc-site-header{
    position:sticky;
    z-index:1000;
    top:0;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid var(--border);
    box-shadow:0 6px 22px rgba(11,15,20,.06);
    backdrop-filter:blur(12px);
}

.admin-bar .pc-site-header{top:32px}

.pc-header-inner{
    min-height:82px;
    display:flex;
    align-items:center;
    gap:1.5rem;
}

.pc-brand{
    flex:0 0 390px;
    display:flex;
    align-items:center;
    gap:.7rem;
    color:var(--brand-2);
}

.pc-brand:hover{opacity:1}

.pc-brand img{
    display:block;
    width:auto;
    object-fit:contain;
}

.pc-brand .pc-brand-logo-sanna{
    width:205px;
    height:auto;
}

.pc-brand .pc-brand-logo-protech{
    width:160px;
    height:auto;
    object-fit:contain;
}

.pc-brand-divider{
    width:1px;
    height:34px;
    background:#d7dbe0;
}

.pc-primary-nav{
    margin-left:auto;
}

.pc-menu,
.pc-footer-menu{
    list-style:none;
    margin:0;
    padding:0;
}

.pc-menu{
    display:flex;
    align-items:center;
    gap:1.35rem;
}

.pc-menu a{
    color:var(--brand-2);
    font-size:.92rem;
    font-weight:700;
}

.pc-menu a:hover,
.pc-menu .current-menu-item > a,
.pc-menu .current-page-ancestor > a{
    color:var(--brand-1);
}

.pc-menu > li{position:relative}
.pc-menu > li > a{display:block;padding:1.15rem 0}

.pc-menu > .menu-item-has-children{
    display:grid;
    grid-template-columns:auto 28px;
    align-items:center;
    column-gap:.15rem;
}

.pc-submenu-toggle{
    display:grid;
    width:28px;
    height:34px;
    place-items:center;
    padding:0;
    background:transparent;
    border:0;
    border-radius:7px;
    cursor:pointer;
}

.pc-submenu-toggle:hover,
.pc-submenu-toggle:focus-visible{background:#f2f4f6}

.pc-submenu-toggle span{
    width:7px;
    height:7px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
    transition:transform var(--transition);
}

.pc-menu .is-submenu-open > .pc-submenu-toggle span{transform:translateY(2px) rotate(225deg)}

.pc-menu .sub-menu{
    position:absolute;
    z-index:20;
    top:calc(100% + .5rem);
    left:0;
    width:max-content;
    min-width:230px;
    margin:0;
    padding:.6rem;
    list-style:none;
    background:#fff;
    border:1px solid #e2e6eb;
    border-radius:14px;
    box-shadow:var(--shadow-md);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity var(--transition),visibility var(--transition),transform var(--transition);
}

.pc-menu .sub-menu::before{
    content:"";
    position:absolute;
    right:0;
    bottom:100%;
    left:0;
    height:.6rem;
}

.pc-menu .sub-menu a{
    display:block;
    padding:.72rem .85rem;
    border-radius:9px;
    white-space:nowrap;
}

.pc-menu .sub-menu a:hover,
.pc-menu .sub-menu .current-menu-item > a{background:#fff7e8}

.pc-menu > .menu-item-has-children:hover > .sub-menu,
.pc-menu > .menu-item-has-children:focus-within > .sub-menu,
.pc-menu > .menu-item-has-children.is-submenu-open > .sub-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}

.pc-header-actions{
    display:flex;
    align-items:center;
    gap:.8rem;
}

.pc-phone{
    display:flex;
    align-items:center;
    gap:.35rem;
    color:var(--brand-2);
    white-space:nowrap;
    font-size:.88rem;
    font-weight:800;
}

.pc-phone i{
    color:#b96c00;
    font-size:.9rem;
}

.pc-header-cta{
    min-height:44px;
    padding:.65rem 1rem;
    white-space:nowrap;
}

.pc-menu-toggle{
    display:none;
    width:44px;
    height:44px;
    padding:10px;
    background:#fff;
    border:1px solid #dfe3e8;
    border-radius:10px;
}

.pc-menu-toggle > span:not(.screen-reader-text){
    display:block;
    height:2px;
    margin:4px 0;
    background:var(--brand-2);
}

.pc-breadcrumbs{
    background:#fbfcfd;
    border-bottom:1px solid var(--border);
}

.pc-breadcrumbs .pc-container{
    display:flex;
    flex-wrap:wrap;
    gap:.45rem;
    padding-block:.65rem;
    color:#68717d;
    font-size:.82rem;
}

.pc-breadcrumbs a{color:#3f4853}

.pc-breadcrumbs-overlay{
    position:absolute;
    z-index:20;
    right:0;
    left:0;
    background:transparent;
    border-bottom:0;
    color:#c9d0d8;
}

.pc-breadcrumbs-overlay .pc-container{
    padding-top:.75rem;
    padding-bottom:.35rem;
    color:#aeb7c2;
}

.pc-breadcrumbs-overlay a{
    color:#f2f4f7;
}

.pc-breadcrumbs-overlay a:hover{
    color:#f5b342;
}

.pc-eyebrow{
    margin-bottom:.65rem;
    color:#c77800;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.pc-lead{
    color:#374151;
    font-size:1.15rem;
    line-height:1.75;
}

.pc-content-section{
    padding:clamp(3.5rem,7vw,6rem) 0;
}

.pc-content-section.pc-soft{
    background:#f7f8fa;
    border-block:1px solid var(--border);
}

.pc-section-heading{
    max-width:760px;
    margin-bottom:2rem;
}

.pc-section-heading h2{
    margin-bottom:.7rem;
    font-size:clamp(1.8rem,3.25vw,2.5rem);
    line-height:1.15;
}

.pc-section-heading p{color:var(--muted)}

.pc-hero{
    position:relative;
    overflow:hidden;
    padding:clamp(3.5rem,6.5vw,5.75rem) 0;
    background:linear-gradient(135deg,#f8fafc 0%,#fff 56%,#fff8e8 100%);
}

.pc-hero::after{
    content:"";
    position:absolute;
    right:-10rem;
    bottom:-14rem;
    width:34rem;
    height:34rem;
    border-radius:50%;
    background:rgba(245,158,11,.09);
}

.pc-hero-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
    align-items:center;
    gap:clamp(2rem,6vw,5rem);
}

/* WordPress 7 wraps Group block children in an inner container. */
.pc-hero-grid > .wp-block-group__inner-container{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
    align-items:center;
    gap:clamp(2rem,6vw,5rem);
}

.pc-hero h1{
    max-width:700px;
    margin-bottom:1.25rem;
    font-size:clamp(2.45rem,4.35vw,3.65rem);
    line-height:1.05;
    letter-spacing:-.04em;
}

.pc-hero .pc-lead{max-width:690px}

.pc-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:1.6rem;
}

.wp-block-button__link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:.8rem 1.35rem;
    border-radius:12px;
    background:var(--brand-1);
    color:#fff;
    font-weight:800;
}

.wp-block-button.is-style-outline .wp-block-button__link{
    background:#fff;
    color:#a96100;
    border:1px solid var(--brand-1);
}

.pc-hero-media{
    padding:1.2rem;
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:24px;
    box-shadow:var(--shadow-lg);
}

.pc-hero-media img{
    width:100%;
    border-radius:14px;
}

.pc-trust-strip{
    background:var(--brand-2);
    color:#fff;
}

.pc-trust-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.pc-trust-grid > .wp-block-group__inner-container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.pc-trust-item{
    min-height:112px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:1.3rem;
    border-right:1px solid rgba(255,255,255,.12);
}

.pc-trust-item:last-child{border-right:0}
.pc-trust-item strong{font-size:1.05rem}
.pc-trust-item span{color:#cbd1d8;font-size:.86rem}

.pc-pole-grid,
.pc-card-grid,
.pc-guide-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem;
}

.pc-pole-grid > .wp-block-group__inner-container,
.pc-card-grid > .wp-block-group__inner-container,
.pc-guide-grid > .wp-block-group__inner-container{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem;
}

.pc-pole-card{
    position:relative;
    overflow:hidden;
    min-height:490px;
    padding:2rem;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    border-radius:22px;
    box-shadow:var(--shadow-md);
}

.pc-pole-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(11,15,20,.05),rgba(11,15,20,.91));
}

.pc-pole-card > *{position:relative;z-index:1}

.pc-pole-card > .wp-block-group__inner-container{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.pc-pole-card.pc-electricity{
    background:#1f2937 url('../img/sanna-banner-optimized.webp') center/cover no-repeat;
}

.pc-pole-card.pc-lightning{
    background:#1f2937 url('../img/protech-banner-optimized.webp') center/cover no-repeat;
}

.pc-pole-card h2,
.pc-pole-card p{color:#fff}

.pc-pole-card h2{font-size:clamp(1.9rem,3.2vw,2.6rem)}
.pc-pole-card p{max-width:540px;margin:.7rem 0 1.2rem;color:#e5e7eb}
.pc-pole-card .btn{align-self:flex-start}

.pc-service-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
}

.pc-service-grid > .wp-block-group__inner-container{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
}

.pc-service-card,
.pc-guide-card,
.pc-sector-card{
    padding:1.5rem;
    background:#fff;
    border:1px solid #e7e9ed;
    border-radius:16px;
    box-shadow:var(--shadow-sm);
}

.pc-service-card h3,
.pc-sector-card h3{margin-bottom:.45rem}
.pc-service-card p,
.pc-sector-card p,
.pc-guide-card p{color:var(--muted)}

.pc-icon{
    width:42px;
    height:42px;
    margin-bottom:1rem;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#fff2d8;
    color:#b96c00;
    font-size:1.25rem;
}

.pc-page-hero{
    position:relative;
    overflow:hidden;
    padding:clamp(1.85rem,3.25vw,2.75rem) 0;
    background:linear-gradient(135deg,#111827,#222b38);
    color:#fff;
}

.pc-breadcrumbs-overlay + #main-content > .pc-page-hero{
    padding-top:clamp(3.6rem,5vw,4.35rem);
}

.pc-page-hero .pc-eyebrow{
    margin-bottom:.45rem;
}

.pc-page-hero h1{
    max-width:760px;
    margin-bottom:.55rem;
    color:#fff;
    font-size:clamp(2rem,3.35vw,3rem);
    line-height:1.08;
    letter-spacing:-.025em;
}

.pc-page-hero .pc-lead{
    max-width:720px;
    color:#d6dae0;
    font-size:clamp(.95rem,1.4vw,1.04rem);
    line-height:1.55;
}

.pc-page-hero.pc-electricity-hero{background:linear-gradient(120deg,rgba(11,15,20,.96),rgba(11,15,20,.68)),url('../img/sanna-banner-optimized.webp') center/cover}
.pc-page-hero.pc-lightning-hero{background:linear-gradient(120deg,rgba(11,15,20,.96),rgba(11,15,20,.62)),url('../img/protech-banner-optimized.webp') center/cover}

/* Pole overview pages keep their tighter transition into the services. */
.pc-pole-overview .pc-page-hero + .pc-content-section{
    padding-top:clamp(2.75rem,4.5vw,4rem);
}

.pc-pole-overview .pc-page-hero + .pc-content-section .pc-section-heading{
    max-width:1000px;
    margin-bottom:1.35rem;
}

.pc-pole-overview .pc-page-hero + .pc-content-section .pc-section-heading h2{
    font-size:clamp(1.75rem,2.8vw,2.2rem);
}

.pc-pole-overview .pc-page-hero + .pc-content-section .pc-service-grid{
    margin-top:clamp(2rem,3.5vw,3rem);
}

/* Four services read more naturally as a balanced 2 × 2 set. */
@media (min-width:681px){
    .pc-pole-lightning .pc-page-hero + .pc-content-section .pc-service-grid > .wp-block-group__inner-container{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:1.25rem;
    }

    .home .pc-content-section.pc-soft .pc-service-grid > .wp-block-group__inner-container{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:1.25rem;
    }
}

.pc-two-column{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
    gap:clamp(2rem,6vw,5rem);
    align-items:start;
}

.pc-two-column > .wp-block-group__inner-container{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
    gap:clamp(2rem,6vw,5rem);
    align-items:start;
}

.pc-check-list{
    list-style:none;
    margin:1.25rem 0 0;
    padding:0;
}

.pc-check-list li{
    position:relative;
    margin:.65rem 0;
    padding-left:1.7rem;
}

.pc-check-list li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:#bc7000;
    font-weight:900;
}

.pc-callout{
    padding:2rem;
    background:#fff8e7;
    border:1px solid #f3d69c;
    border-radius:18px;
}

.pc-service-grid + .pc-callout{
    margin-top:1.5rem;
}

.pc-callout h2,.pc-callout h3{margin-bottom:.7rem}

.pc-text-link{
    display:inline-flex;
    gap:.35rem;
    margin-top:1rem;
    color:#a96100;
    font-weight:800;
}

.pc-category-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem;
}

.pc-category-grid > .wp-block-group__inner-container{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem;
}

.pc-category-card{
    overflow:hidden;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:20px;
    box-shadow:var(--shadow-sm);
}

.pc-category-card img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
}

.pc-category-card > .wp-block-group__inner-container{padding:0}
.pc-category-copy > .wp-block-group__inner-container{padding:1.6rem}
.pc-category-card h2{margin-bottom:.45rem;font-size:1.7rem}

.pc-guides-empty{
    padding:2rem;
    background:#f7f8fa;
    border:1px solid #e2e6eb;
    border-radius:18px;
}

.pc-guides-empty strong{font-size:1.35rem}
.pc-guides-empty p{max-width:720px;margin:.45rem 0 1.2rem;color:var(--muted)}

.pc-guide-card h3{font-size:1.3rem;line-height:1.3}
.pc-guide-card h3 a{color:var(--brand-2)}

.pc-guide-topic-nav{margin-top:1.75rem}

.pc-guide-tabs{
    display:flex;
    gap:1.6rem;
    overflow-x:auto;
    border-bottom:1px solid #dfe3e8;
    scrollbar-width:none;
}

.pc-guide-tabs::-webkit-scrollbar{display:none}

.pc-guide-tab{
    flex:0 0 auto;
    margin-bottom:-1px;
    padding:.7rem .05rem .8rem;
    text-decoration:none;
    color:var(--muted);
    border-bottom:3px solid transparent;
    font-size:.9rem;
    font-weight:700;
    line-height:1.2;
    white-space:nowrap;
    transition:border-color var(--transition),color var(--transition);
}

.pc-guide-tab:hover{color:var(--brand-2)}
.pc-guide-tab:focus-visible{outline:3px solid rgba(245,158,11,.35);outline-offset:-2px}
.pc-guide-tab.is-active,
.pc-guide-tab[aria-current="page"]{color:var(--brand-2);border-bottom-color:var(--brand-1)}

.pc-guide-results{margin-top:1.75rem}
.pc-guide-card{display:flex;min-height:250px;flex-direction:column}
.pc-guide-card .pc-text-link{margin-top:auto;padding-top:1.25rem}
.pc-guide-card[hidden]{display:none!important}
.pc-guide-date{display:block;margin-top:.85rem;color:#717985;font-size:.78rem}
.pc-guide-card.is-planned{background:#fbfcfd}
.pc-guide-status{width:fit-content;margin-top:auto;padding-top:1.25rem;color:#a96100;font-size:.82rem;font-weight:800}
.pc-guide-no-results{margin-top:1.75rem;padding:1.25rem 1.4rem;background:#f7f8fa;color:var(--muted);border:1px solid #dfe3e8;border-radius:14px}
.pc-guide-no-results[hidden]{display:none!important}

.pc-related-guides{
    padding:clamp(3rem,6vw,5rem) 0;
    background:#f6f7f9;
    border-top:1px solid #e5e8ec;
}

.pc-related-guides-heading{max-width:680px;margin-bottom:1.6rem}
.pc-related-guides-heading .pc-eyebrow{margin-bottom:.4rem}
.pc-related-guides-heading h2{font-size:clamp(1.75rem,3vw,2.35rem)}
.pc-related-guides-heading > p:last-child{margin-top:.55rem;color:var(--muted)}

.pc-related-guide-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.25rem;
}

.pc-related-guide-grid.is-single{grid-template-columns:minmax(0,720px)}

.pc-related-guide-card{
    display:flex;
    min-height:230px;
    flex-direction:column;
    padding:1.5rem;
    background:#fff;
    border:1px solid #e1e5ea;
    border-radius:16px;
    box-shadow:var(--shadow-sm);
}

.pc-related-guide-card h3{margin:.2rem 0 .7rem;font-size:1.25rem;line-height:1.35}
.pc-related-guide-card h3 a{color:var(--brand-2);text-decoration:none}
.pc-related-guide-card h3 a:hover{text-decoration:underline;text-decoration-color:var(--brand-1);text-underline-offset:4px}
.pc-related-guide-card > p:not(.pc-eyebrow){color:var(--muted)}
.pc-related-guide-card .pc-text-link{margin-top:auto;padding-top:1.2rem}
.pc-related-guides-all{display:inline-block;margin-top:1.35rem;color:var(--brand-2);font-weight:800;text-decoration:none}
.pc-related-guides-all:hover{text-decoration:underline;text-decoration-color:var(--brand-1);text-underline-offset:4px}

.pc-demo-notice{
    margin-bottom:clamp(2.5rem,5vw,4rem);
    padding:1.5rem;
    background:#fff5df;
    border:1px solid #f2c66d;
    border-left:5px solid var(--brand-1);
    border-radius:14px;
}

.pc-demo-notice h3{margin-bottom:.35rem;font-size:1.15rem}
.pc-demo-notice p{margin:0;color:#67430e}

.pc-article-layout > .wp-block-group__inner-container{
    display:grid;
    grid-template-columns:minmax(0,1.8fr) minmax(280px,.8fr);
    gap:clamp(2rem,5vw,4.5rem);
    align-items:start;
}

.pc-article-main{max-width:760px}
.pc-article-main h2{margin:2.25rem 0 .8rem;font-size:clamp(1.8rem,3vw,2.45rem)}
.pc-article-main h2:first-child{margin-top:0}
.pc-article-main h3{margin:1.65rem 0 .6rem;font-size:1.25rem}
.pc-article-main p{margin-bottom:1.15rem;color:#374151;font-size:1.06rem;line-height:1.8}
.pc-guide-list{margin:0 0 1.4rem;padding-left:1.35rem;color:#374151}
.pc-guide-list li{margin:.5rem 0;padding-left:.25rem;line-height:1.6}
.pc-guide-list li::marker{color:#b96c00}
.pc-article-aside{
    position:sticky;
    top:130px;
    padding:1.75rem;
    background:var(--brand-2);
    color:#fff;
    border-radius:18px;
    box-shadow:var(--shadow-md);
}
.pc-article-aside h3{margin-bottom:.75rem;color:#fff;font-size:1.25rem}
.pc-article-aside p{margin-bottom:1rem;color:#d8dde5}
.pc-article-aside p:last-child{margin-bottom:0}
.pc-guide-toc{margin:0 0 1.5rem;padding:0;list-style:none}
.pc-guide-toc li{padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
.pc-guide-toc a{color:#f5f7fa;text-decoration:none;font-size:.92rem;line-height:1.35}
.pc-guide-toc a:hover{color:#f5b342}
.pc-article-aside .pc-actions,
.pc-article-aside .wp-block-button,
.pc-article-aside .wp-block-button__link{width:100%}
.pc-article-aside .pc-actions{margin-top:1.25rem}
.pc-article-aside .wp-block-button__link{background:var(--brand-1);color:#18120a;text-align:center;white-space:normal}
.pc-article-faq{max-width:800px;margin-top:2.5rem;padding-top:2rem;border-top:1px solid #dfe3e8}
.pc-article-faq h2{margin-bottom:1.5rem}
.pc-article-faq h3{margin:1.5rem 0 .4rem}
.pc-article-faq p{color:var(--muted)}
.pc-article-faq .schema-faq-section{margin-top:1.5rem}
.pc-article-faq .schema-faq-question{display:block;margin-bottom:.4rem;font-family:var(--font-heading);font-size:1.05rem;line-height:1.35;color:var(--ink)}

.pc-contact-layout{
    display:grid;
    grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
    gap:2rem;
    align-items:start;
}

.pc-contact-layout > .wp-block-group__inner-container{
    display:grid;
    grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
    gap:2rem;
    align-items:start;
}

.pc-contact-details{
    padding:2rem;
    background:var(--brand-2);
    color:#fff;
    border-radius:20px;
}

.pc-contact-details h2{color:#fff}
.pc-contact-details a{display:block;margin-top:.7rem;color:#fff;font-weight:700}
.pc-contact-details p{color:#d5dae0}

.pc-contact-details p:has(a[href^="tel:"]),
.pc-contact-details p:has(a[href^="mailto:"]){
    margin-top:.85rem;
}

.pc-contact-details p:has(a[href^="tel:"]) strong,
.pc-contact-details p:has(a[href^="mailto:"]) strong,
.pc-contact-details p:has(a[href^="tel:"]) strong + br,
.pc-contact-details p:has(a[href^="mailto:"]) strong + br{
    display:none;
}

.pc-contact-details a[href^="tel:"],
.pc-contact-details a[href^="mailto:"]{
    display:inline-flex;
    align-items:center;
    gap:.7rem;
    width:fit-content;
    margin-top:0;
    color:#fff;
    line-height:1.35;
}

.pc-contact-details a[href^="tel:"]::before,
.pc-contact-details a[href^="mailto:"]::before{
    display:grid;
    flex:0 0 34px;
    width:34px;
    height:34px;
    place-items:center;
    border:1px solid rgba(245,158,11,.32);
    border-radius:9px;
    background:rgba(245,158,11,.12);
    color:#f5b342;
    font-family:"Font Awesome 6 Free";
    font-size:1rem;
    font-weight:900;
}

.pc-contact-details a[href^="tel:"]::before{content:"\f095"}
.pc-contact-details a[href^="mailto:"]::before{content:"\f0e0"}

.pc-contact-details a[href^="tel:"]:hover,
.pc-contact-details a[href^="mailto:"]:hover{color:#f5b342}

.pc-contact-details p:last-child{
    margin-top:1.5rem;
    padding-top:1.15rem;
    border-top:1px solid rgba(255,255,255,.14);
    color:#fff;
    font-size:.86rem;
    font-weight:700;
    letter-spacing:.01em;
}

.pc-contact-form{
    padding:2rem;
    background:#fff;
    border:1px solid #e4e7eb;
    border-radius:20px;
    box-shadow:var(--shadow-sm);
}

.pc-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}

.pc-field{display:flex;flex-direction:column;gap:.35rem}
.pc-field.pc-full{grid-column:1/-1}
.pc-field label{font-size:.9rem;font-weight:750}
.pc-field input,.pc-field select,.pc-field textarea{
    width:100%;
    padding:.8rem .9rem;
    background:#fff;
    border:1px solid #ccd2d9;
    border-radius:10px;
    color:var(--brand-2);
    font:inherit;
}

.pc-field input:focus,.pc-field select:focus,.pc-field textarea:focus{
    outline:3px solid rgba(245,158,11,.18);
    border-color:var(--brand-1);
}

.pc-honeypot{position:absolute!important;left:-10000px!important}
.pc-form-note{margin-top:1rem;color:var(--muted);font-size:.85rem}
.pc-form-status{min-height:1.6rem;margin-top:1rem;font-weight:750}
.pc-form-status.is-success{color:#14733b}
.pc-form-status.is-error{color:#b42318}

.pc-contact-form > .btn{
    min-height:48px;
    margin-top:1.25rem;
    padding-inline:1.5rem;
}

.pc-contact-form > .btn:hover{
    transform:none;
}

.pc-cta-band{
    padding:3rem 0;
    background:#f2a51f;
}

.pc-cta-band .pc-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
}

.pc-cta-band .pc-container > .wp-block-group__inner-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
}

.pc-cta-copy{min-width:0;flex:1 1 auto;max-width:820px}
.pc-cta-band .pc-actions{flex:0 0 auto;margin-top:0}
.pc-cta-band .wp-block-button{flex:0 0 auto}
.pc-cta-band h2{font-size:clamp(1.55rem,2.4vw,2rem)}
.pc-cta-band p{color:#3e2b0a}
.pc-cta-band .btn,
.pc-cta-band .wp-block-button__link{
    white-space:nowrap;
    background:var(--brand-2);
    color:#fff;
    border:2px solid var(--brand-2);
    box-shadow:0 8px 20px rgba(11,15,20,.2);
    transition:background var(--transition),color var(--transition);
}

.pc-cta-band .btn:hover,
.pc-cta-band .wp-block-button__link:hover{
    background:#fff;
    color:var(--brand-2);
    transform:none;
    box-shadow:0 8px 20px rgba(11,15,20,.2);
}

.pc-cta-band .btn:focus-visible,
.pc-cta-band .wp-block-button__link:focus-visible{
    outline:3px solid #fff;
    outline-offset:3px;
}

.pc-site-footer{
    background:#0b0f14;
    color:#c9d0d8;
}

.pc-footer-grid{
    display:grid;
    grid-template-columns:1.4fr .7fr .9fr;
    gap:clamp(2rem,5vw,5rem);
    padding-block:4rem;
}

.pc-footer-brand{
    display:flex;
    align-items:center;
    gap:.75rem;
    width:fit-content;
    margin-bottom:1.25rem;
    padding:.65rem .8rem;
    background:#fff;
    border-radius:12px;
}
.pc-footer-brand img{display:block;width:165px;height:auto;object-fit:contain}
.pc-footer-brand img:last-child{width:130px;height:auto}
.pc-footer-brand span{width:1px;height:28px;background:#d7dbe0}
.pc-footer-about p{max-width:570px}
.pc-site-footer h2{margin-bottom:.9rem;color:#fff;font-size:1rem}
.pc-footer-menu li{margin:.5rem 0}
.pc-footer-menu a,.pc-footer-contact a{color:#d7dce2}
.pc-footer-contact address{display:flex;flex-direction:column;margin-bottom:.8rem;font-style:normal}
.pc-footer-contact > a{
    display:flex;
    align-items:center;
    gap:.65rem;
    width:fit-content;
    margin:.6rem 0;
}

.pc-footer-contact > a i{
    width:1rem;
    color:#f5b342;
    text-align:center;
    font-size:.95rem;
}

.pc-footer-contact > a:hover{color:#fff}

.pc-certification{
    display:flex;
    align-items:center;
    gap:.8rem;
    margin-top:1.2rem;
    color:#fff;
    font-size:.86rem;
    font-weight:800;
}

.pc-certification img{
    width:92px;
    height:58px;
    padding:.25rem;
    object-fit:contain;
    background:#fff;
    border-radius:8px;
}

.pc-footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.pc-footer-bottom .pc-container{display:flex;justify-content:space-between;gap:1rem;padding-block:1rem;font-size:.78rem}
.pc-footer-legal-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.45rem 1rem}
.pc-footer-bottom a,
.pc-footer-cookie-settings{
    margin:0;
    padding:0;
    border:0;
    color:#c9d0d8;
    background:transparent;
    font:inherit;
    line-height:inherit;
    text-decoration:none;
    cursor:pointer;
}
.pc-footer-bottom a:hover,
.pc-footer-cookie-settings:hover,
.pc-footer-cookie-settings:focus-visible{color:#fff;text-decoration:underline}

/* Complianz remains available from the footer without covering legal links. */
#cmplz-manage-consent{display:none!important}

@media (max-width:1120px){
    .pc-header-inner{gap:.8rem}
    .pc-brand{flex-basis:335px}
    .pc-brand .pc-brand-logo-sanna{width:180px;height:auto}
    .pc-brand .pc-brand-logo-protech{width:140px;height:auto}
    .pc-menu{gap:.8rem}
    .pc-menu a{font-size:.84rem}
    .pc-phone span:last-child{display:none}
}

@media (max-width:1040px){
    .admin-bar .pc-site-header{top:46px}
    .pc-header-inner{min-height:76px}
    .pc-brand{margin-right:auto}
    .pc-menu-toggle{display:block;order:3}
    .pc-primary-nav{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        display:none;
        margin:0;
        padding:1rem;
        background:#fff;
        border-top:1px solid #e5e7eb;
        box-shadow:var(--shadow-md);
    }
    .pc-primary-nav.is-open{display:block}
    .pc-menu{align-items:stretch;flex-direction:column;gap:0}
    .pc-menu a{display:block;padding:.8rem;font-size:1rem}
    .pc-menu > .menu-item-has-children{grid-template-columns:1fr 44px}
    .pc-submenu-toggle{width:44px;height:44px}
    .pc-menu .sub-menu{
        position:static;
        grid-column:1/-1;
        display:none;
        width:auto;
        min-width:0;
        margin:0 0 .35rem .75rem;
        padding:.2rem 0 .35rem .7rem;
        background:#f7f8fa;
        border:0;
        border-left:2px solid #e3a642;
        border-radius:0 10px 10px 0;
        box-shadow:none;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none;
    }
    .pc-menu .is-submenu-open > .sub-menu{display:block}
    .pc-menu .sub-menu::before{display:none}
    .pc-menu .sub-menu a{padding:.68rem .85rem;font-size:.94rem}
    .pc-header-actions{order:2}
    .pc-header-actions .pc-header-cta{display:none}
    .pc-hero-grid,.pc-two-column,.pc-contact-layout{grid-template-columns:1fr}
    .pc-hero-grid > .wp-block-group__inner-container,
    .pc-two-column > .wp-block-group__inner-container,
    .pc-contact-layout > .wp-block-group__inner-container{grid-template-columns:1fr}
    .pc-hero-media{max-width:680px}
    .pc-trust-grid{grid-template-columns:repeat(2,1fr)}
    .pc-trust-grid > .wp-block-group__inner-container{grid-template-columns:repeat(2,1fr)}
    .pc-trust-item:nth-child(2){border-right:0}
    .pc-trust-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}
    .pc-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pc-service-grid > .wp-block-group__inner-container{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pc-related-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pc-related-guide-grid.is-single{grid-template-columns:minmax(0,720px)}
    .pc-footer-grid{grid-template-columns:1.2fr .8fr}
    .pc-footer-contact{grid-column:1/-1}
}

@media (max-width:680px){
    .pc-topbar{font-size:.68rem;line-height:1.35}
    .pc-header-inner{gap:.45rem}
    .pc-brand{flex-basis:auto;gap:.25rem}
    .pc-brand .pc-brand-logo-sanna{width:96px;height:auto}
    .pc-brand .pc-brand-logo-protech{width:90px;height:auto}
    .pc-brand-divider{height:22px}
    .pc-phone{width:42px;height:42px;justify-content:center;border:1px solid #e1e4e8;border-radius:10px}
    .pc-hero{padding:3rem 0}
    .pc-hero-grid{display:block}
    .pc-hero h1{font-size:clamp(2rem,9.2vw,2.35rem);overflow-wrap:break-word}
    .pc-hero-grid > .wp-block-group__inner-container,
    .pc-hero-content{min-width:0}
    .pc-page-hero{padding:1.65rem 0}
    .pc-breadcrumbs-overlay + #main-content > .pc-page-hero{padding-top:3.35rem}
    .pc-breadcrumbs-overlay .pc-container > span:nth-last-child(2),
    .pc-breadcrumbs-overlay [aria-current="page"]{display:none}
    .pc-page-hero h1{font-size:clamp(1.85rem,9vw,2.4rem)}
    .pc-hero-media{margin-top:2rem;padding:.65rem}
    .pc-pole-grid,.pc-card-grid,.pc-category-grid,.pc-guide-grid,.pc-service-grid,.pc-related-guide-grid{grid-template-columns:1fr}
    .pc-pole-grid > .wp-block-group__inner-container,
    .pc-card-grid > .wp-block-group__inner-container,
    .pc-category-grid > .wp-block-group__inner-container,
    .pc-guide-grid > .wp-block-group__inner-container,
    .pc-service-grid > .wp-block-group__inner-container{grid-template-columns:1fr}
    .pc-pole-card{min-height:410px;padding:1.5rem}
    .pc-form-grid{grid-template-columns:1fr}
    .pc-cta-band .pc-container{align-items:flex-start;flex-direction:column}
    .pc-cta-band .pc-container > .wp-block-group__inner-container{align-items:flex-start;flex-direction:column}
    .pc-cta-band .pc-actions,
    .pc-cta-band .wp-block-button,
    .pc-cta-band .wp-block-button__link{width:100%}
    .pc-footer-grid{grid-template-columns:1fr;padding-block:3rem}
    .pc-footer-brand{gap:.45rem;padding:.55rem .6rem}
    .pc-footer-brand img{width:135px;height:auto}
    .pc-footer-brand img:last-child{width:110px;height:auto}
    .pc-footer-contact{grid-column:auto}
    .pc-footer-bottom .pc-container{flex-direction:column}
    .pc-footer-legal-links{justify-content:flex-start}
    .pc-guide-tabs{gap:1.25rem}
    .pc-guide-tab{padding-block:.65rem .75rem;font-size:.86rem}
    .pc-article-layout > .wp-block-group__inner-container{grid-template-columns:1fr}
    .pc-article-aside{position:static}
}

/* Gutenberg Group blocks add one structural wrapper around their children.
 * The inner wrapper owns multi-column layout and the outer block owns spacing. */
.wp-block-group.pc-hero-grid,
.wp-block-group.pc-trust-grid,
.wp-block-group.pc-pole-grid,
.wp-block-group.pc-card-grid,
.wp-block-group.pc-guide-grid,
.wp-block-group.pc-service-grid,
.wp-block-group.pc-two-column,
.wp-block-group.pc-category-grid,
.wp-block-group.pc-contact-layout,
.wp-block-group.pc-article-layout,
.pc-cta-band .pc-container {
    display:block;
}

/* ##########################################################################
   02 - BASE DU SITE
########################################################################### */

/* ---------- Reset ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ---------- Page ---------- */

html{
    width:100%;
    overflow-x:hidden;
    scroll-behavior:smooth;
}

body{
    width:100%;
    overflow-x:hidden;

    background:var(--bg);
    color:var(--text);

    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
    line-height:1.6;
}

/* ---------- Images ---------- */

img{
    display:block;
    max-width:100%;
    height:auto;
}

/* ---------- Liens ---------- */

a{
    color:var(--brand-1);
    text-decoration:none;
    transition:var(--transition);
}

a:hover{
    opacity:.9;
}

/* ---------- Titres ---------- */

h1,h2,h3,h4,h5,h6{
    color:var(--brand-2);
    font-weight:700;
}

/* ---------- Paragraphes ---------- */

p{
    line-height:1.75;
}

.muted{
    color:var(--muted);
}

/* ---------- Sections ---------- */

section{
    scroll-margin-top:100px;
}

.section{
    max-width:var(--maxw);
    margin:auto;
    padding:4rem 1rem;
}

.section-alt{
    background:#FBFCFD;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

/* ---------- Grilles ---------- */

.split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;
}

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.5rem;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}

/* ---------- Cartes ---------- */

.card{
    background:var(--card);
    padding:1.5rem;
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}

.card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
}

/* ---------- Boutons ---------- */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;

    padding:.85rem 1.5rem;

    border:none;
    border-radius:12px;

    background:var(--brand-1);
    color:#fff;

    font-weight:700;
    cursor:pointer;

    transition:var(--transition);
}

.btn:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.pc-header-cta:hover{
    background:#d98b08;
    transform:none;
    box-shadow:none;
}

.btn.secondary{
    background:#fff;
    color:var(--brand-1);
    border:1px solid var(--brand-1);
}

.desktop-label{
    display:inline;
}

.mobile-label{
    display:none;
}

/*  -----  Bouton Guides Techniques ------*/

.btn-guides{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.60rem;

    padding:.75rem 1.30rem;

    background:#fff;
    color:var(--brand-2);

    border:1px solid var(--brand-1);
    border-radius:999px;

    font-weight:700;
    font-size:.90rem;

    transition:var(--transition);

    cursor:pointer;
}

.btn-guides i{

    color:var(--brand-1);
    font-size:1rem;

    transition:var(--transition);
}

.btn-guides:hover{

    background:var(--brand-1);
    color:#fff;

    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.btn-guides:hover i{

    color:#fff;
}

/* ##########################################################################
   03 - HEADER
########################################################################### */

/* ==========================================================================
   3.1 - Variables
========================================================================== */

:root{
    --topbar-height:34px;

    --header-maxw:1320px;
    --header-padding:4px 20px;
    --header-gap:18px;

    --header-shadow:0 2px 12px rgba(0,0,0,.08);

    --logo-qf:105px;
    --logo-sanna:120px;
    --logo-protech:120px;

    --btn-header-width:185px;
    --btn-header-height:50px;
    --btn-header-font:.80rem;

    --cta-width:220px;
    --cta-height:38px;
}

/* ==========================================================================
   3.2 - Topbar
========================================================================== */

.topbar{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:var(--topbar-height);
    padding:6px 16px;

    background:var(--brand-2);
    color:var(--brand-1);

    text-align:center;
    font-size:.82rem;
    font-weight:600;
    line-height:1.4;

    border-bottom:1px solid rgba(255,255,255,.08);
}

/* ==========================================================================
   3.3 - Desktop
========================================================================== */

header{
    position:sticky;
    top:0;
    z-index:1000;

    background:#fff;
    box-shadow:var(--header-shadow);
}

.nav{
    display:grid;

    grid-template-columns:
        1fr
        1.25fr
        1.25fr
        1fr;

    align-items:center;

    max-width:1280px;
    margin:auto;

    padding:8px 20px;

    gap:18px;
}

.header-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    text-align:center;
    min-width:0;

    height:160px;
}

.certif-title{
    margin-bottom:4px;

    color:#555;

    font-size:.72rem;
    font-weight:700;
    letter-spacing:.08em;
}


/* ---------- Logos ---------- */

.logo-qf,
.logo-sanna,
.logo-protech{
    display:block;
    width:auto;
    object-fit:contain;
}

.logo-qf{
    height:var(--logo-qf);
}

.logo-sanna{
    height:120px;
    width:auto;
    object-fit:contain;
}

.logo-protech{
    height:120px;
    width:auto;
    object-fit:contain;
}

.logo-qf{
    margin-bottom:8px;
}

.logo-sanna,
.logo-protech{
    margin-bottom:4px;
}

/* ---------- Boutons ---------- */

.btn-header,
.cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:var(--brand-1);
    color:#fff;

    font-weight:700;
    margin-top:8px;
    transition:var(--transition);
}

.resources-link{
    margin-top:10px;
    font-size:.80rem;
    font-weight:600;
    color:#4B5563;
    text-decoration:none;
    transition:.25s;
}

.resources-link:hover{
    color:var(--brand-1);
}

.btn-header{
    width:var(--btn-header-width);
    height:var(--btn-header-height);
    padding:4px 18px;

    font-size:var(--btn-header-font);
  
    letter-spacing:.03em;
    line-height:1.1;
 }

.btn-header:hover{
    transform:translateY(-2px);
}

.btn-header{
    margin-top:auto;
}

/* ---------- Navigation ---------- */

.navigation{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:14px;
}

.navigation a{
    color:var(--text);
    font-weight:600;

    transition:var(--transition);
}

.navigation a:hover{
    color:var(--brand-1);
}

/* ---------- Bouton principal ---------- */

.cta{
    width:var(--cta-width);
    height:var(--cta-height);

    margin-top:6px;
    padding:0 20px;
}

.cta:hover{
    transform:translateY(-2px);
}

/* ==========================================================================
   3.4 - Laptop (≤1200px)
========================================================================== */

@media (max-width:1200px){

:root{
    --header-gap:20px;

    --logo-qf:90px;
    --logo-sanna:90px;
    --logo-protech:90px;
}

.nav{
    padding:8px 20px;
}

}

/* ==========================================================================
   3.5 - Tablette (≤992px)
========================================================================== */

@media (max-width:992px){

:root{
    --header-gap:24px;

    --logo-qf:100px;
    --logo-sanna:65px;
    --logo-protech:65px;
}

.nav{
    grid-template-columns:repeat(2,1fr);
    padding:12px 20px;
}

.navigation{
    gap:5px;
}

}

/* ==========================================================================
   3.6 - Mobile (≤768px)
========================================================================== */

@media (max-width:768px){

:root{

    --header-gap:10px;

    --logo-qf:82px;
    --logo-sanna:56px;
    --logo-protech:56px;

    --btn-header-width:135px;
    --btn-header-height:30px;
    --btn-header-font:.56rem;

    --cta-width:155px;
    --cta-height:36px;
}

.topbar{
    padding:6px 10px;
    font-size:.72rem;
    line-height:1.5;
}

.nav{
    display:grid;  
    grid-template-columns:0.95fr 0.95fr 1.10fr;
    grid-template-areas:
        "qf qf qf"
        "sanna protech menu";

    align-items:start;
    gap:var(--header-gap);

    padding:10px 12px;
}

.qualifoudre{
    grid-area:qf;
    padding-bottom:2px;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.sanna{
    grid-area:sanna;
}

.protech{
    grid-area:protech;
}


  .navigation div a{

    display:block;

    width:100%;
    text-align:center;

    font-size:.82rem;
    font-weight:600;

}
  
.navigation .cta{
    width:100%;
    max-width:165px;
    height:34px;
    font-size:.64rem;
    margin-top:auto;
}

.qualifoudre,
.sanna,
.protech{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.sanna,
.protech{
    padding:0 4px;
}

.navigation a{
    display:inline-block;
    margin:2px 0;
    padding:2px 3px;
    white-space:nowrap;
    font-size:.84rem;
}

.header-col{
    min-width:0;
    height:112px;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;

    gap:8px;
}

  .logo-sanna,
.logo-protech{
    margin-top:0;
 }

 
.certif-title{
    margin-bottom:2px;
}

 .btn-guides{

    width:150px;
    height:34px;

    padding:0;

    font-size:.70rem;
}
  
  .btn-guides i{

    font-size:.85rem;
}
  
  .desktop-label{
    display:none;
}

.mobile-label{
    display:inline;
   text-align:center;
    line-height:1.05;
}
  
  /* ---------- Navigation ---------- */

.navigation{

    grid-area:menu;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:flex-start;

    width:100%;

    gap:10px;
}

.navigation div{

    display:flex;
    flex-direction:column;

    align-items:center;

    width:100%;

    gap:8px;
}

.navigation div a{

    display:block;

    width:100%;

    text-align:center;

    font-size:.82rem;
    font-weight:600;

    padding:0;
    margin:0;
}

.navigation .cta{

    width:100%;
    max-width:155px;

    height:34px;

    margin:0;

    font-size:.64rem;
}

.navigation .btn-guides{

    width:100%;
    max-width:155px;
    height:34px;

    margin:0;
    padding:0 4px;

    font-size:.70rem;
}

.navigation .btn-guides i{

    font-size:.85rem;
}
  
}

/* ==========================================================================
   3.7 - Petit mobile (≤480px)
========================================================================== */

@media (max-width:480px){

:root{
    --topbar-height:32px;

    --logo-qf:74px;
    --logo-sanna:44px;
    --logo-protech:44px;

    --btn-header-width:112px;
    --btn-header-height:26px;
    --btn-header-font:.56rem;

    --cta-width:150px;
    --cta-height:34px;
}

.topbar{
    font-size:.68rem;
    padding:6px 8px;
}

.nav{
    gap:14px;
    padding:16px 12px;
}

.btn-header{
    width:100%;
    max-width:112px;
}

.navigation a{
    font-size:.88rem;
}

.cta{
    max-width:260px;
}

}

/* ##########################################################################
   04 - HERO
########################################################################### */

/* ==========================================================================
   4.1 - Desktop
========================================================================== */

/* ---------- Structure ---------- */

.hero{
    overflow:hidden;

    background:linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 100%);
    border-bottom:1px solid var(--border);
}

.hero-wrap{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;

    max-width:var(--maxw);
    margin:auto;
    padding:3.5rem 1rem 3rem;

    gap:4rem;
}

/* ---------- Contenu ---------- */

.kicker{
    display:inline-block;

    margin-bottom:.9rem;

    color:var(--brand-1);

    font-size:.88rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.hero h1{
    max-width:720px;
    margin:0 0 1.4rem;

    color:var(--brand-2);

    font-size:clamp(2.4rem,4vw,3.8rem);
    line-height:1.08;
    letter-spacing:-.03em;
}

.hero p{
    max-width:640px;

    color:var(--muted);

    font-size:1.08rem;
    line-height:1.8;
}


/* ---------- Points forts ---------- */

.points{
    display:flex;
    flex-wrap:wrap;

    gap:.8rem;
    margin-top:2rem;
}

.pill{
    display:flex;
    align-items:center;
    justify-content:center;

    padding:.60rem 1rem;

    background:#fff;
    border:1px solid #E7EAF0;
    border-radius:999px;

    color:var(--brand-2);

    font-size:.92rem;
    font-weight:600;

    transition:var(--transition);
}

.pill:hover{
    background:var(--brand-1);
    border-color:var(--brand-1);
    color:#fff;

    transform:translateY(-2px);
}

/* ---------- Boutons ---------- */

.hero-cta{
    display:flex;

    gap:1rem;
    margin-top:2.3rem;
}

.hero-cta .btn{
    justify-content:center;
    min-width:200px;
}

.hint{
    margin-top:1.8rem;

    color:var(--muted);

    font-size:.97rem;
}

/* ---------- Image ---------- */

.hero-visual{
    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;

    height:460px;

    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow-lg);

    transition:var(--transition);
}

.hero-visual:hover{
    transform:translateY(-4px);
}

.hero-visual img{
    width:100%;
    height:100%;

    padding:24px;

    object-fit:contain;

    transition:.35s;
}

.hero-visual:hover img{
    transform:scale(1.03);
}


/* ==========================================================================
   4.2 - Tablette (≤992px)
========================================================================== */

@media (max-width:992px){

.hero-wrap{
    grid-template-columns:1fr;
    gap:2.5rem;
}

.hero-content{
    text-align:center;
}

.hero h1,
.hero p,
.points,
.hero-cta,
.hint{
    margin-left:auto;
    margin-right:auto;
}

.points,
.hero-cta{
    justify-content:center;
}

.hero-visual{
    height:340px;
}

}

/* ==========================================================================
   4.3 - Mobile (≤768px)
========================================================================== */

@media (max-width:768px){

.hero-wrap{
    display:flex;
    flex-direction:column;
    gap:2rem;

    text-align:center;
}

.hero-content{
    order:2;
}

.hero-visual{
    order:1;

    width:100%;
    height:280px;
}

.hero-visual img{
    object-fit:contain;
}

.hero p,
.points,
.hero-cta,
.hint{
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
}

.hero-cta{
    flex-direction:column;
}

.hero-cta .btn{
    width:100%;
}

}

/* ==========================================================================
   4.4 - Petit mobile (≤480px)
========================================================================== */

@media (max-width:480px){

.hero-wrap{
    gap:1.8rem;
}

.hero h1{
    font-size:1.9rem;
}

.hero p{
    font-size:.96rem;
}

.hero-visual{
    height:220px;
}

.hero-visual img{
    padding:12px;
}

}


/* ##########################################################################
   05 - BANDEAU D'INFORMATION
########################################################################### */

/* ==========================================================================
   5.1 - Desktop
========================================================================== */

/* ---------- Structure ---------- */

.band{
    background:var(--brand-3);

    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.band-inner{
    display:flex;
    align-items:center;
    justify-content:center;

    max-width:var(--maxw);
    min-height:52px;

    margin:auto;
    padding:.45rem 1rem;

    gap:.65rem;
}

/* ---------- Icône ---------- */

.band-pin{
    width:32px;
    height:32px;

    flex-shrink:0;

    object-fit:contain;
}

/* ---------- Texte ---------- */

.band-text{
    display:flex;
    flex-direction:column;

    line-height:1.15;
}

.band-title{
    color:#fff;

    font-size:.95rem;
    font-weight:600;
}

.band-subtitle{
    margin-top:2px;

    color:#D1D5DB;

    font-size:.78rem;
}

/* ==========================================================================
   5.2 - Mobile (≤768px)
========================================================================== */

@media (max-width:768px){

.band-inner{
    gap:.7rem;
}

.band-pin{
    width:22px;
    height:22px;
}

}

/* ==========================================================================
   5.3 - Petit mobile (≤480px)
========================================================================== */

@media (max-width:480px){

.band-inner{
    padding:.45rem .6rem;
}

.band-pin{
    width:18px;
    height:18px;
}

.band-title{
    font-size:.78rem;
}

.band-subtitle{
    display:none;
}

}


/* ##########################################################################
   06 - SANNA ÉLECTRICITÉ
########################################################################### */

/* ==========================================================================
   6.1 - Desktop
========================================================================== */

/* ---------- Section ---------- */

.theme-sanna{
    position:relative;

    background:
        linear-gradient(to right,rgba(248,250,252,.96),rgba(255,255,255,.99));

    background-repeat:no-repeat;
    background-position:left center;
    background-size:520px;
}

/* ---------- Structure ---------- */

.sanna-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:start;

    gap:5rem;
}

.sanna-left{
    display:flex;
    flex-direction:column;
}

.sanna-right{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* -------- ACTIONS SANNA------ */

.sanna-actions {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-top: 28px;
}

/* ---------- Bannière ---------- */

.section-banner{
    width:100%;
    height:310px;

    margin-bottom:2rem;

    overflow:hidden;

    background:#fff;
    border:1px solid rgba(0,0,0,.05);
    border-radius:22px;

    box-shadow:var(--shadow-lg);
}

.section-banner img{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transition:.4s;
}

.section-banner:hover img{
    transform:scale(1.03);
}

/* ---------- Texte ---------- */

.sanna-subtitle{
    margin-bottom:1rem;

    color:var(--brand-1);

    font-size:1.05rem;
    font-weight:700;
    line-height:1.55;
}

.sanna-left>.muted{
    margin-bottom:1.8rem;

    text-align:justify;
    line-height:1.8;
}

/* ---------- Services ---------- */

.service-list{
    display:flex;
    flex-direction:column;

    gap:.65rem;
}

.service{
    display:flex;
    align-items:flex-start;

    gap:.9rem;
    padding:.55rem 0;

    transition:var(--transition);
}

.service:hover{
    transform:translateX(5px);
}

.service span{
    display:flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    flex-shrink:0;

    background:#fff;
    border:1px solid var(--border);
    border-radius:50%;

    box-shadow:var(--shadow-sm);
}

.service strong{
    display:block;

    margin-bottom:.15rem;

    color:var(--brand-2);

    font-size:.98rem;
}

.service small{
    display:block;

    color:var(--muted);

    font-size:.90rem;
    line-height:1.45;
}

/* ---------- Logo ---------- */

.sanna-logo{
    display:block;

    width:430px;
    max-width:100%;
    height:auto;

    margin:0 auto 1.8rem;
}

/* ---------- Cartes ---------- */

.theme-sanna .grid-2{
    width:100%;

    gap:1.2rem;
}

.theme-sanna .card{
    padding:1.5rem;

    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);
}

.theme-sanna .card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-md);
}

.theme-sanna .card h3{
    margin-bottom:.75rem;

    font-size:1.02rem;
}

.theme-sanna .card p{
    line-height:1.65;
}


/* ==========================================================================
   6.2 - Tablette (≤992px)
========================================================================== */

@media (max-width:992px){

.sanna-layout{
    grid-template-columns:1fr;
    gap:3rem;
}

.sanna-logo{
    width:420px;
}

.section-banner{
    height:280px;
}

}

/* ==========================================================================
   6.3 - Mobile (≤768px)
========================================================================== */

@media (max-width:768px){

.sanna-layout{
    display:flex;
    flex-direction:column;
    gap:2.5rem;
}

.sanna-right{
    order:1;
}

.sanna-left{
    order:2;
}

.section-banner{
    height:260px;
}

.sanna-logo{
    width:420px;
    max-width:100%;

    margin:0 auto 2rem;
}

  
  .sanna-actions {
    flex-direction: column;

    gap: 12px;

    margin-top: 24px;
}
  
}

/* ==========================================================================
   6.4 - Petit mobile (≤480px)
========================================================================== */

@media (max-width:480px){

.section-banner{
    height:210px;
}

.sanna-logo{
    width:340px;
}

.service{
    gap:.7rem;
}

.service span{
    width:34px;
    height:34px;
}


}
  
/* ##########################################################################
   07 - PROTECH
########################################################################### */

/* ==========================================================================
   7.1 - Desktop
========================================================================== */

/* ---------- Section ---------- */

.theme-protech{
    position:relative;

    background:linear-gradient(to right,#FFFFFF 0%,#F8FAFC 100%);
}

/* ---------- Structure ---------- */

.protech-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:start;

    gap:5rem;
}

.protech-left{
    display:flex;
    flex-direction:column;
}

.protech-right{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* ---------- Bannière ---------- */

.protech-banner{
    width:100%;
    height:300px;

    margin-bottom:1.8rem;

    overflow:hidden;

    background:#fff;
    border:1px solid var(--border);
    border-radius:20px;

    box-shadow:var(--shadow-md);
}

.protech-banner img{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transition:.35s;
}

.protech-banner:hover img{
    transform:scale(1.03);
}

/* ---------- Logo ---------- */

.protech-logo{
    display:block;

    width:520px;
    max-width:100%;

    margin:0 auto 2.5rem;

    transition:var(--transition);
}

.protech-logo:hover{
    transform:scale(1.02);
}

/* ---------- Texte ---------- */

.protech-subtitle{
    margin-bottom:1rem;

    color:var(--brand-1);

    font-size:1.05rem;
    font-weight:700;
    line-height:1.55;
}

.protech-left>.muted{
    margin-bottom:1.8rem;

    color:var(--muted);

    text-align:justify;
    line-height:1.8;
}

/* ---------- Services ---------- */

.protech-services{
    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:1.25rem;
    margin-top:1.2rem;
}

.protech-services .card{
    padding:1.6rem;

    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);
}

.protech-services .card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-md);
}

.protech-services h3{
    margin-bottom:.8rem;

    font-size:1.05rem;
}

.protech-services p{
    color:var(--muted);
    line-height:1.7;
}

/* ---------- Colonne droite ---------- */

.protech-info{
    width:100%;
    padding:2.4rem;

    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);
}

.protech-info:hover{
    box-shadow:var(--shadow-lg);
}

.protech-info h2{
    margin-bottom:1.6rem;

    font-size:1.7rem;
}

.protech-info ul{
    margin:0;
    padding-left:1.2rem;
}

.protech-info li{
    margin-bottom:1rem;

    color:var(--muted);
    line-height:1.7;
}

/* ---------- Boutons ---------- */

.protech-actions{
    display:flex;
    flex-wrap:wrap;

    gap:1.2rem;
    margin-top:2.4rem;
}

.protech-actions .btn{
    flex:1;
    min-width:180px;
}

/* ==========================================================================
   7.2 - Tablette (≤992px)
========================================================================== */

@media (max-width:992px){

.protech-layout{
    grid-template-columns:1fr;
    gap:3rem;
}

.protech-logo{
    width:460px;
}

.protech-banner{
    height:280px;
}

}

/* ==========================================================================
   7.3 - Mobile (≤768px)
========================================================================== */

@media (max-width:768px){

.protech-layout{
    display:flex;
    flex-direction:column;
    gap:2.5rem;
}

.protech-right{
    order:1;
}

.protech-left{
    order:2;
}

.protech-banner{
    height:260px;
}

.protech-logo{
    width:450px;
    max-width:100%;

    margin:0 auto 2rem;
}

.protech-services{
    grid-template-columns:1fr;
}

.protech-actions{
    flex-direction:column;
}

.protech-actions .btn{
    width:100%;
}

}

/* ==========================================================================
   7.4 - Petit mobile (≤480px)
========================================================================== */

@media (max-width:480px){

.protech-banner{
    height:210px;
}

.protech-logo{
    width:360px;
}

.protech-info{
    padding:1.5rem;
}

.protech-info h2{
    font-size:1.35rem;
}

}

/* ##########################################################################
   réf - RÉFÉRENCES & RÉALISATIONS
########################################################################### */

/* ==========================================================================
   réf.1 - Mobile (≤768px)
========================================================================== */

@media (max-width:768px){

#realisations .grid-3{
    display:flex;
    overflow-x:auto;
    gap:1rem;

    padding-bottom:.5rem;

    scroll-snap-type:x proximity;
}

#realisations .card{
    flex:0 0 235px;

    scroll-snap-align:start;
}

#realisations .card h3{
    min-height:3.6em;

    font-size:1.05rem;
    line-height:1.2;

    text-align:center;

    white-space:normal;
}

}

/* ##########################################################################
   08 - CONTACT
########################################################################### */

/* ==========================================================================
   8.1 - Desktop
========================================================================== */

/* ---------- Section ---------- */

.contact{
    background:linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 100%);
}

/* ---------- Layout ---------- */

.contact-section{

    max-width:1200px;

    margin:0 auto;

    display:flex;
    flex-direction:column;

    gap:2rem;

}

/* ---------- Cartes ---------- */

.contact-form-card,
.contact-card{

    padding:2rem;

    background:#fff;

    border:1px solid var(--border);

    border-radius:22px;

    box-shadow:var(--shadow-md);

}

.contact-form-card h2,
.contact-card h2{

    margin-bottom:1rem;

}

.contact-card p{

    margin-bottom:1rem;

    color:var(--muted);

    line-height:1.7;

}

.contact-card a{

    color:inherit;

}

/* ---------- Formulaire ---------- */

.contact-form{

    display:grid;

    gap:1.2rem;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

    width:100%;

    padding:1rem 1.15rem;

    font:inherit;

    background:#fff;

    border:1px solid var(--border);

    border-radius:14px;

    transition:var(--transition);

}

.contact-form textarea{

    min-height:180px;

    resize:vertical;

}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

    outline:none;

    border-color:var(--brand-1);

    box-shadow:0 0 0 3px rgba(245,158,11,.15);

}

.contact-form button{

    justify-self:flex-start;

}

/* ==========================================================================
   8.2 - Tablette
========================================================================== */

@media (max-width:992px){

.contact-form-card,
.contact-card{

    padding:1.8rem;

}

}

/* ==========================================================================
   8.3 - Mobile
========================================================================== */

@media (max-width:768px){

.contact-section{

    gap:1.5rem;

}

.contact-form-card,
.contact-card{

    padding:1.5rem;

}

.contact-form button{

    width:100%;

}

}

/* ==========================================================================
   8.4 - Petit mobile
========================================================================== */

@media (max-width:480px){

.contact-form-card,
.contact-card{

    padding:1.25rem;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

    padding:.9rem 1rem;

}

}

/* ##########################################################################
   09 - FOOTER
########################################################################### */

/* ==========================================================================
   9.1 - Desktop
========================================================================== */

.footer{

    padding:3rem 0 2rem;

    background:var(--brand-2);

    color:#fff;

    border-top:4px solid var(--brand-1);

}

.footer-grid{

    max-width:1320px;

    margin:0 auto;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:4rem;

    align-items:start;

}

.footer-grid>section,
.footer-grid>nav,
.footer-grid>div{

    text-align:center;

}

.footer h3,
.footer h4{

    margin-bottom:1rem;

    color:var(--brand-1);

    font-size:1.1rem;

}

.footer p,
.footer li{

    color:rgba(255,255,255,.82);

    line-height:1.9;

}

.footer ul{

    margin:0;

    padding:0;

    list-style:none;

}

.footer li{

    margin:.65rem 0;

}

.footer a{

    color:rgba(255,255,255,.85);

    transition:var(--transition);

}

.footer a:hover{

    color:var(--brand-1);

}

.footer-logo{

    display:block;

    width:230px;

    max-width:100%;

    margin:0 auto 1.5rem;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    margin-top:2.5rem;

    padding-top:1.5rem;

    border-top:1px solid rgba(255,255,255,.12);

    font-size:.92rem;

}

.footer-bottom p{

    margin:0;

}

/* Coordonnées */

.footer-contact p{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:.5rem;

}

.footer-contact span{

    color:var(--brand-1);

}

/* ==========================================================================
   9.2 - Tablette
========================================================================== */

@media (max-width:992px){

.footer-grid{

    grid-template-columns:1fr;

    gap:2.5rem;

    text-align:center;

}

}

/* ==========================================================================
   9.3 - Mobile
========================================================================== */

@media (max-width:768px){

.footer{

    padding:2.5rem 0 2rem;

    text-align:center;

}

.footer-grid{

    gap:2rem;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}

}

/* ==========================================================================
   9.4 - Petit mobile
========================================================================== */

@media (max-width:480px){

.footer-bottom{

    font-size:.85rem;

}

}

/* ##########################################################################
   10 - UTILITAIRES
########################################################################### */

/* ---------- Images ---------- */

.img-fluid{
    display:block;
    width:100%;
    height:auto;
}

/* ---------- Espacements ---------- */

.mt-0{margin-top:0!important;}
.mb-0{margin-bottom:0!important;}
.mt-1{margin-top:1rem!important;}
.mb-1{margin-bottom:1rem!important;}
.mt-2{margin-top:2rem!important;}
.mb-2{margin-bottom:2rem!important;}

/* ---------- Centrage ---------- */

.text-center{text-align:center;}
.flex-center{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ---------- Animations ---------- */

.fade-up{
    opacity:0;
    transform:translateY(20px);
    transition:.5s;
}

.fade-up.visible{
    opacity:1;
    transform:none;
}

/* =========================================================
11 CENTRE DE RESSOURCES
========================================================= */

.resources-hero {
    padding: 48px 0 42px;
    text-align: center;
    background: #ffffff;
}

.resources-hero h1 {
    margin: 0;

    color: #0b0f14;

    font-size: clamp(36px, 4.5vw, 52px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -1.3px;
}

.resources-line {
    width: 54px;
    height: 3px;

    margin: 24px auto;

    background: #f59e0b;
    border-radius: 10px;
}

.resources-intro {
    max-width: 900px;
    margin: 0 auto;

    color: #4b5563;

    font-size: 18px;
    line-height: 1.8;
}


/* =========================================================
CARTES
========================================================= */

.resources-section {
    padding: 8px 0 80px;
    background: #ffffff;
}

.resources-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 30px;
}

.resource-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    box-shadow: 0 8px 25px rgba(15, 23, 42, .07);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.resource-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 14px 35px rgba(15, 23, 42, .11);
}


/* =========================================================
IMAGES
========================================================= */

.resource-image {
    position: relative;

    width: 100%;
    height: 175px;

    overflow: hidden;

    background: #e5e7eb;
}

.resource-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}

.resource-card:hover .resource-image img {
    transform: scale(1.03);
}


/* =========================================================
BADGES
========================================================= */

.resource-badge {
    position: absolute;

    left: 32px;
    bottom: 18px;

    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    color: #ffffff;

    font-size: 28px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .18);
}

.electricity-badge {
    background: #f97316;
}

.lightning-badge {
    background: #facc15;
}


/* =========================================================
CONTENU
========================================================= */

.resource-content {
    padding: 27px 32px 32px;
}

.resource-content h2 {
    margin: 0 0 7px;

    color: #0b0f14;

    font-size: 29px;
    line-height: 1.2;
    font-weight: 800;
}

.resource-content h3 {
    margin: 0 0 20px;

    color: #f97316;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

.resource-content p {
    min-height: 82px;

    margin: 0 0 28px;

    color: #374151;

    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
BOUTON
========================================================= */

.resource-button {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    padding: 11px 20px;

    border: 1.5px solid #f97316;
    border-radius: 7px;

    background: #ffffff;

    color: #f97316;

    font-size: 16px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease;
}

.resource-button i {
    font-size: 15px;
}

.resource-button:hover {
    background: #f97316;
    color: #ffffff;
}


/* =========================================================
TABLETTE
========================================================= */

@media (max-width: 900px) {

    .resources-grid {
        grid-template-columns: 1fr;

        max-width: 720px;

        margin: 0 auto;
    }

}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {

    .resources-hero {
        padding: 38px 0 35px;
    }

    .resources-hero h1 {
        font-size: 34px;

        letter-spacing: -.8px;
    }

    .resources-line {
        margin: 20px auto;
    }

    .resources-intro {
        padding: 0 20px;

        font-size: 16px;
        line-height: 1.7;
    }

    .resources-section {
        padding: 5px 0 55px;
    }

    .resources-grid {
        gap: 22px;
    }

    .resource-image {
        height: 155px;
    }

    .resource-badge {
        left: 20px;
        bottom: 15px;

        width: 55px;
        height: 55px;

        font-size: 25px;
    }

    .resource-content {
        padding: 23px 22px 25px;
    }

    .resource-content h2 {
        font-size: 24px;
    }

    .resource-content h3 {
        margin-bottom: 15px;

        font-size: 18px;
    }

    .resource-content p {
        min-height: 0;

        margin-bottom: 22px;

        font-size: 15px;
        line-height: 1.65;
    }

    .resource-button {
        font-size: 15px;
    }

}


/* =========================================================
FOOTER
========================================================= */

.site-footer {
    margin-top: 0;

    background: #0b0f14;

    color: #ffffff;

    border-top: 4px solid #f59e0b;
}


/* =========================================================
FOOTER PRINCIPAL
========================================================= */

.footer-main {
    display: grid;

    grid-template-columns:
        1.5fr
        .8fr
        1fr;

    gap: 50px;

    padding-top: 38px;
    padding-bottom: 38px;
}


/* =========================================================
COLONNES
========================================================= */

.footer-column {
    text-align: center;
}

.footer-column h3 {
    margin: 0 0 15px;

    color: #f59e0b;

    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
}

.footer-column p {
    margin: 0 0 8px;

    color: #f3f4f6;

    font-size: 14px;
    line-height: 1.55;
}

.footer-column strong {
    color: #ffffff;
}


/* =========================================================
PRESENTATION
========================================================= */

.footer-about {
    max-width: 620px;

    margin: 0 auto;
}

.footer-about p:last-child {
    margin-top: 10px;
}


/* =========================================================
NAVIGATION
========================================================= */

.footer-navigation nav {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;
}

.footer-navigation a {
    color: #f3f4f6;

    font-size: 14px;

    text-decoration: none;

    transition: color .2s ease;
}

.footer-navigation a:hover {
    color: #f59e0b;
}


/* =========================================================
COORDONNEES
========================================================= */

.footer-contact p {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;
}

.footer-contact i {
    width: 17px;

    color: #f59e0b;

    text-align: center;
}

.footer-contact a {
    color: #f3f4f6;

    text-decoration: none;
}

.footer-contact a:hover {
    color: #f59e0b;
}


/* =========================================================
BARRE INFERIEURE
========================================================= */

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer-bottom .container {
    min-height: 62px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.footer-bottom p {
    margin: 0;

    color: #f3f4f6;

    font-size: 13px;
}

.footer-bottom nav {
    display: flex;

    align-items: center;

    gap: 9px;
}

.footer-bottom a {
    color: #f3f4f6;

    font-size: 13px;

    text-decoration: none;

    transition: color .2s ease;
}

.footer-bottom a:hover {
    color: #f59e0b;
}

.footer-bottom span {
    color: #6b7280;
}


/* =========================================================
TABLETTE
========================================================= */

@media (max-width: 900px) {

    .footer-main {
        grid-template-columns: 1fr 1fr;

        gap: 35px;
    }

    .footer-about {
        grid-column: 1 / -1;

        max-width: 650px;
    }

}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {

    .footer-main {
        grid-template-columns: 1fr;

        gap: 28px;

        padding-top: 32px;
        padding-bottom: 32px;
    }

    .footer-about {
        grid-column: auto;
    }

    .footer-column h3 {
        margin-bottom: 12px;

        font-size: 17px;
    }

    .footer-column p,
    .footer-navigation a {
        font-size: 14px;
    }

    .footer-contact p {
        justify-content: center;
    }

    .footer-bottom .container {
        min-height: auto;

        flex-direction: column;

        justify-content: center;

        padding-top: 18px;
        padding-bottom: 18px;

        gap: 10px;

        text-align: center;
    }

    .footer-bottom nav {
        justify-content: center;

        flex-wrap: wrap;
    } 

}

  /* =========================================================
   INDEX PROTECTION FOUDRE
========================================================= */

.resource-sub-header {
    background: #ffffff;

    border-bottom: 1px solid #e5e7eb;
}

.resource-sub-header-inner {
    min-height: 92px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
  padding-right: 30px;
}

.resource-sub-logos {
    display: flex;

    align-items: center;

    gap: 24px;
}

.resource-sub-logo-protech {
    width: 250px;
    height: auto;
    margin-left: 100px;
}

.resource-sub-logo-qf {
    width: 150px;
    height: auto;
  margin-left: 100px;
}

.resource-sub-logo-sanna {
    width: 250px;
    height: auto;

    margin-left: 100px;
}

.resource-back {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #f59e0b;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;
}

.resource-back:hover {
    color: #d97706;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.resource-foudre-hero {
    padding: 52px 0 42px;
    text-align: center;
}

.resource-foudre-hero .container {
    max-width: 1000px;

    margin: 0 auto;
}

.resource-foudre-hero .resources-line {
    margin: 24px auto;
}

.resource-foudre-hero .resources-intro {
    margin: 0 auto;

    max-width: 900px;

    text-align: center;
}

.resource-foudre-hero h1 {
    margin: 0;

    color: #0b0f14;

    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.15;

    font-weight: 800;
    letter-spacing: -1px;
}

.resource-subtitle {
    margin: 0 0 12px;

    color: #f97316;

    font-size: 20px;
    line-height: 1.3;

    font-weight: 700;
}

.resource-index {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;
}


/* =========================================================
   CATEGORIES
========================================================= */

.resource-category {
    margin-bottom: 48px;
}

.resource-category:last-child {
    margin-bottom: 0;
}

.resource-category > h2 {
    display: flex;

    align-items: center;

    gap: 12px;

    margin: 0 0 10px;

    padding-bottom: 12px;

    color: #f97316;

    border-bottom: 2px solid #f59e0b;

    font-size: 20px;
    line-height: 1.3;

    font-weight: 800;

    text-transform: uppercase;
}

.resource-category > h2 i {
    font-size: 20px;
}


/* =========================================================
   LISTE
========================================================= */

.resource-list {
    width: 100%;
}

.resource-item {
    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    align-items: start;

    gap: 18px;

    padding: 17px 8px;

    border-bottom: 1px solid #e5e7eb;
}

.resource-item:first-child {
    border-top: 1px solid #e5e7eb;
}

.resource-number {
    padding-top: 2px;

    color: #f97316;

    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
   TITRE + LIEN
========================================================= */

.resource-item-title {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.resource-item-content h3 {
    margin: 0;

    color: #0b0f14;

    font-size: 17px;
    line-height: 1.4;

    font-weight: 700;
}

.resource-item-content p {
    margin: 5px 0 0;

    color: #4b5563;

    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
   LIEN
========================================================= */

.resource-list-link {
    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

    gap: 8px;

    color: #f97316;

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

    text-decoration: none;

    transition: color .2s ease;
}

.resource-list-link i {
    font-size: 13px;
}

.resource-list-link:hover {
    color: #d97706;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .resource-sub-header-inner {
        min-height: 78px;

        gap: 15px;
    }

    .resource-sub-logos {
        gap: 12px;
    }

    .resource-sub-logo-protech {
        width: 140px;
        margin-left: 10px;
    }

    .resource-sub-logo-qf {
        width: 75px;
      margin-left: 30px;
    }

  .resource-sub-logo-sanna {
        width: 160px;

        margin-left: 20px;
    }
  
    .resource-back {
        font-size: 13px;
      margin-left: 30px;
    }


    .resource-foudre-hero {
        padding: 42px 0 35px;
    }

    .resource-subtitle {
        font-size: 19px;
    }

    .resource-foudre-hero h1 {
        font-size: 34px;
    }


    .resource-category {
        margin-bottom: 38px;
    }

    .resource-category > h2 {
        gap: 10px;
        padding-left: 10px;
        font-size: 18px;
    }


    .resource-item {
        grid-template-columns: 32px minmax(0, 1fr);

        gap: 10px;

        padding: 15px 4px;
    }


    .resource-item-title {
        display: block;
    }

    .resource-item-content h3 {
        font-size: 16px;
    }

    .resource-item-content p {
        margin-top: 5px;

        font-size: 14px;
    }


    .resource-list-link {
        margin-top: 8px;

        font-size: 14px;
    }

}