/* ##########################################################################
   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;

}

/* ##########################################################################
   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);
}

.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:155px;
    height:34px;

    margin:0;

    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;
}

.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)),
        url("/assets/img/plan-elec-fond.png");

    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;
}

/* ---------- 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;
}

}

/* ==========================================================================
   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
########################################################################### */
/* ==========================================================================
   11.1 - Header
========================================================================== */

.resources-header{

    background:#fff;

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

    position:sticky;
    top:0;
    z-index:100;

}

.resources-header-inner{

    display:flex;

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

    gap:30px;

    min-height:90px;

}

.resources-logo{

    height:58px;
    width:auto;

    transition:var(--transition);

}

.resources-logo:hover{

    transform:scale(1.03);

}
/* ==========================================================================
   11.2 - Hero
========================================================================== */

.resources-hero{

    padding:90px 0 70px;

    text-align:center;

}

.resources-kicker{

    display:inline-block;

    margin-bottom:18px;

    color:var(--brand-1);

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

    letter-spacing:.08em;

    text-transform:uppercase;

}

.resources-hero h1{

    margin-bottom:20px;

}

.resources-intro{

    max-width:760px;

    margin:0 auto;

    color:var(--muted);

    line-height:1.8;

}