/*
Theme Name: CTVIM Modern V4
Version: 4.0
Description: Site CTVIM moderne et responsive.
*/
:root{
 --blue:#17628c;
 --cyan:#46b4cf;
 --navy:#0c2436;
 --text:#172c3a;
 --muted:#627787;
 --light:#f2f7fa;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;color:var(--text);background:#fff;
 font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;
 line-height:1.65;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
.wrap{width:min(1200px,calc(100% - 40px));margin:auto}
header{
 position:sticky;top:0;z-index:100;
 background:#ffffffed;backdrop-filter:blur(18px);
 box-shadow:0 3px 25px #071e3014;
}
.header-inner{
 min-height:86px;display:flex;align-items:center;
 justify-content:space-between;gap:25px;
}
.logo img{max-width:205px;max-height:65px;object-fit:contain}
nav{display:flex;gap:24px;align-items:center}
nav a{font-weight:650;font-size:14px;transition:color .2s}
nav a:hover{color:var(--blue)}
.menu-button{display:none;cursor:pointer;background:none;border:0;font-size:27px}
.hero{
 position:relative;min-height:660px;color:white;
 display:flex;align-items:center;overflow:hidden;
 background:var(--navy);
}
.hero-bg{
 position:absolute;inset:0;
 background-image:url('assets/hero.jpg');
 background-size:cover;background-position:center;
 animation:zoom 16s ease-out both;
}
.hero:before{
 content:"";position:absolute;inset:0;z-index:1;
 background:linear-gradient(90deg,#071b2af5 0%,#092b45e0 48%,#0a2d425c 100%);
}
.hero-content{position:relative;z-index:2;padding:95px 0}
.eyebrow{
 color:#a3e8f5;font-size:13px;font-weight:800;
 letter-spacing:3px;text-transform:uppercase;
}
h1{
 font-size:clamp(42px,6vw,78px);font-weight:800;
 max-width:850px;line-height:1.08;
 letter-spacing:-2.5px;margin:20px 0;
}
.hero p{font-size:clamp(17px,2vw,21px);max-width:690px;color:#e5f0f6}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.button{
 display:inline-flex;align-items:center;justify-content:center;
 padding:14px 25px;border-radius:8px;font-weight:750;
 background:var(--cyan);color:#082536;
 transition:transform .2s,background .2s;
}
.button:hover{transform:translateY(-3px);background:#7bd8e9}
.button.secondary{background:transparent;color:white;border:1px solid #ffffff9c}
section{padding:90px 0}
.soft{background:var(--light)}
.section-head{max-width:760px;margin-bottom:42px}
.kicker{
 color:var(--blue);text-transform:uppercase;
 font-size:13px;font-weight:800;letter-spacing:2px;
}
h2{
 font-size:clamp(30px,4vw,49px);
 letter-spacing:-1.5px;line-height:1.17;
 margin:12px 0 20px;
}
.section-head p{color:var(--muted);font-size:18px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
 background:white;border-radius:15px;overflow:hidden;
 box-shadow:0 8px 35px #092c4312;
 transition:transform .3s,box-shadow .3s;
}
.card:hover{transform:translateY(-8px);box-shadow:0 18px 45px #092c432b}
.card img{
 width:100%;height:230px;object-fit:cover;
 display:block;transition:transform .5s;
}
.card:hover img{transform:scale(1.035)}
.card-body{padding:27px}
.card h3{font-size:23px;margin:0 0 11px}
.card p{color:var(--muted);margin:0 0 20px}
.card a{font-weight:750;color:var(--blue)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.split img{
 width:100%;max-height:440px;object-fit:cover;
 border-radius:18px;box-shadow:20px 20px 0 #dcecf4;
}
.split p{color:var(--muted);font-size:18px}
.banner{
 background:linear-gradient(110deg,#09273d,#16648b);
 padding:55px;border-radius:20px;color:white;
 display:flex;align-items:center;justify-content:space-between;gap:25px;
}
.banner h2{font-size:clamp(26px,3vw,40px);margin:0}
.banner p{color:#d7ecf5}
footer{background:var(--navy);padding:55px 0;color:#d8e6ed}
.footer-inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer a{color:white}
.page{padding:65px 0 100px;min-height:60vh}
.page h1{font-size:clamp(32px,5vw,55px);color:var(--blue)}
.page a{color:var(--blue);text-decoration:underline}
.reveal{opacity:0;transform:translateY(25px);transition:.7s ease}
.reveal.visible{opacity:1;transform:none}
@keyframes zoom{from{transform:scale(1.07)}to{transform:scale(1)}}
@media(max-width:900px){
 .header-inner{min-height:75px}
 .logo img{max-width:155px;max-height:55px}
 .menu-button{display:block}
 nav{
  display:none;position:absolute;top:75px;left:0;right:0;
  background:white;padding:17px 24px;
  box-shadow:0 20px 25px #0002;
  flex-direction:column;align-items:stretch;gap:0;
 }
 nav.open{display:flex}
 nav a{padding:12px 0;border-bottom:1px solid #e5edf2}
 .cards{grid-template-columns:repeat(2,1fr)}
 .split{grid-template-columns:1fr;gap:35px}
 .banner{flex-direction:column;align-items:flex-start}
}
@media(max-width:600px){
 .wrap{width:calc(100% - 32px)}
 .hero{min-height:590px}
 .hero-content{padding:75px 0}
 .hero:before{background:linear-gradient(90deg,#071b2aef,#092c44bf)}
 h1{letter-spacing:-1px}
 section{padding:60px 0}
 .cards{grid-template-columns:1fr}
 .card img{height:210px}
 .banner{padding:29px}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .reveal{opacity:1;transform:none}
}

/* CTVIM : visibilité du logo dans l'en-tête */
header .logo {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#102d43;
    border-radius:10px;
    padding:10px 18px;
    min-width:225px;
    min-height:76px;
    flex-shrink:0;
}
header .logo img {
    display:block;
    width:auto;
    height:auto;
    max-width:205px;
    max-height:58px;
    object-fit:contain;
}
header .header-inner {
    min-height:100px;
}
@media(max-width:900px) {
    header .logo {
        min-width:150px;
        min-height:58px;
        padding:8px 12px;
    }
    header .logo img {
        max-width:145px;
        max-height:46px;
    }
    header .header-inner {
        min-height:75px;
    }
}

/* CTVIM V4.1 — Identité visuelle */
:root {
 --blue:#2778AC;
 --cyan:#2778AC;
 --navy:#102D43;
 --light:#F3F8FC;
}

body {color:#173044}

header {
 background:#fff;
 border-bottom:3px solid #2778AC;
}

header .header-inner {
 min-height:90px;
}

header .logo {
 min-width:0;
 min-height:0;
 padding:10px 18px;
 background:#102D43;
 border-radius:8px;
}

header .logo img {
 width:auto;
 max-width:185px;
 max-height:55px;
 object-fit:contain;
}

header nav a {
 color:#24465F;
 text-decoration:none;
 font-weight:650;
}

header nav a:hover {color:#2778AC}

.hero {
 min-height:650px;
 padding:0;
}

.hero:before {
 background:linear-gradient(
  90deg,
  rgba(7,30,48,.96) 0%,
  rgba(15,57,85,.87) 49%,
  rgba(22,78,111,.36) 100%
 );
}

.hero .button {
 background:#2778AC;
 color:white;
}

.hero .button.secondary {
 background:transparent;
 border:1px solid white;
}

.hero .button:hover {background:#3793CB}

.expertise-strip {
 background:#2778AC;
 color:#fff;
 padding:19px 0;
}

.expertise-strip-inner {
 display:flex;
 justify-content:space-between;
 gap:20px;
 flex-wrap:wrap;
 font-size:13px;
 font-weight:750;
 text-transform:uppercase;
 letter-spacing:1.2px;
}

.ctvim-card-image {
 height:220px;
 overflow:hidden;
 background:#DFECF5;
}

.ctvim-card-image img {
 width:100%;
 height:100%;
 object-fit:cover;
}

.card {
 border:1px solid #E4EDF3;
}

.card:hover {
 border-color:#2778AC55;
}

.kicker,.card a {
 color:#2778AC;
}

.button {
 background:#2778AC;
 color:white;
}

.button:hover {
 background:#3793CB;
 color:white;
}

.network-section,.formation-section {
 background:white;
}

.split img {
 box-shadow:18px 18px 0 #D8EAF5;
}

.resource-grid {
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:24px;
}

.resource-card {
 display:block;
 background:white;
 border:1px solid #DFEAF2;
 padding:32px;
 border-radius:14px;
 transition:transform .25s,box-shadow .25s;
}

.resource-card:hover {
 transform:translateY(-6px);
 box-shadow:0 15px 35px #173b521c;
}

.resource-card h3 {
 margin:14px 0;
 font-size:23px;
}

.resource-card p {color:#627787}

.resource-card strong {color:#2778AC}

.resource-icon {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:48px;
 height:48px;
 background:#E3F1FA;
 color:#2778AC;
 font-weight:800;
 border-radius:10px;
}

.news-section {
 background:white;
}

.news-section .card small {
 color:#718495;
}

footer {
 background:#102D43;
}

@media(max-width:900px) {
 header .logo {
  padding:8px 12px;
 }
 header .logo img {
  max-width:145px;
  max-height:46px;
 }
 .resource-grid {
  grid-template-columns:repeat(2,1fr);
 }
}

@media(max-width:600px) {
 header .header-inner {
  min-height:75px;
 }
 .hero {
  min-height:570px;
 }
 .expertise-strip-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  font-size:11px;
 }
 .resource-grid {
  grid-template-columns:1fr;
 }
 .resource-card {
  padding:25px;
 }
 .ctvim-card-image {
  height:210px;
 }
}


/* CTVIM HEADER V5 START */

/* Bandeau bleu sur toute la largeur */
body > header,
body > header.site-header,
header.site-header,
body > header:first-of-type {
    background:#2778AC !important;
    background-color:#2778AC !important;
    border:0 !important;
    box-shadow:0 4px 18px rgba(10,40,65,.18) !important;
    margin:0 !important;
    padding:0 !important;
}

/* Dimensions de l'en-tête */
header .header-inner,
header .topbar {
    min-height:82px !important;
    height:auto !important;
    padding-top:9px !important;
    padding-bottom:9px !important;
}

/* Logo blanc, sans encadré */
header .logo,
header .brand {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:0 !important;
    margin:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    display:flex !important;
    align-items:center;
}

header .logo img,
header .brand img {
    width:auto !important;
    height:auto !important;
    max-width:195px !important;
    max-height:65px !important;
    object-fit:contain !important;
    filter:none !important;
}

/* Navigation blanche */
header nav a,
header .nav a {
    color:#fff !important;
    text-decoration:none !important;
    font-weight:650 !important;
    border-color:rgba(255,255,255,.2) !important;
}

header nav a:hover,
header .nav a:hover {
    color:#D6F1FF !important;
}

/* Menu mobile */
header .menu-button,
header .menu-toggle {
    color:#fff !important;
}

@media(max-width:900px) {
    header .header-inner,
    header .topbar {
        min-height:68px !important;
        padding-top:8px !important;
        padding-bottom:8px !important;
    }

    header .logo img,
    header .brand img {
        max-width:150px !important;
        max-height:48px !important;
    }

    header nav,
    header .nav {
        background:#2778AC !important;
    }

    header nav a,
    header .nav a {
        color:white !important;
    }
}

/* CTVIM HEADER V5 END */