/* style.css */

/* --- VARIABLES & RESET --- */
:root {
    --primary: #143255;
    --secondary: #145da0;
    --tertiary: #93b7be;
    --accent: #f46036;
    --bg-body: #ffffff;
    --bg-panel: #f8f9fa;
    --border: #e2e6ea;
    --text-main: #143255;
    --text-light: #555555;
    --radius: 8px;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --shadow: 0 4px 12px rgba(20, 50, 85, 0.08);
}

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

body {
    font-family: var(--font-sans);
    color: var(--text-main);
    background-color: var(--bg-body);
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

/* --- TYPOGRAPHY UTILS --- */
.text-secondary { color: var(--secondary); }

/* --- LAYOUT --- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

section { padding: 80px 0; }

/* --- HEADER & NAVIGATION --- */
header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border);
    padding: 15px 0;
}

.page-header {
    padding-top: 160px;
    padding-bottom: 60px;
    background: linear-gradient(135deg, #ffffff 50%, #f0f4f8 100%);
    text-align: center;
}

.page-header h1 {
    font-size: 2.8rem;
    color: var(--primary);
    margin-bottom: 20px;
}

.page-header .subtitle {
    font-size: 1.3rem;
    color: var(--text-light);
    max-width: 800px;
    margin: 0 auto;
}


.nav-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 40px; /* Espace entre logo et menu */
}

.logo {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.5px;
    line-height: 1.1;
    text-transform: none;
    text-decoration: none; /* Assure que le lien logo n'a pas de soulignement */
}

.logo span {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--secondary);
    text-transform: none;
    margin-top: 4px;
    letter-spacing: 0;
}

/* --- DROPDOWN MENU STYLES --- */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dropdown-menu {
    display: none; /* Caché par défaut */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 0;
    z-index: 1001;
    flex-direction: column;
}

/* Afficher au survol */
.dropdown:hover .dropdown-menu {
    display: flex;
    animation: fadeIn 0.2s ease-in-out;
}

.dropdown-item {
    padding: 10px 20px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s, color 0.2s;
    display: block;
}

.dropdown-item:hover {
    background-color: var(--bg-panel);
    color: var(--secondary);
}

.dropdown-item.active {
    color: var(--secondary);
    font-weight: 600;
    background-color: #f0f4f8;
}

/* Petite flèche pour indiquer le menu */
.dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 5px solid currentColor;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    transition: transform 0.2s;
}

.dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Styles des liens du menu */
.nav-menu {
    display: flex;
    gap: 25px;
}

.nav-link {
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-link:hover, .nav-link.active {
    color: var(--secondary);
}

.btn-cta {
    background-color: var(--secondary);
    color: white;
    padding: 10px 24px;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.95rem;
    display: inline-block;
    white-space: nowrap;
}
.btn-cta:hover { 
    background-color: var(--primary); 
    transform: translateY(-2px); 
}

/* --- HERO SECTION --- */
.hero {
    padding-top: 180px;
    padding-bottom: 100px;
    background: linear-gradient(135deg, #ffffff 50%, #f0f4f8 100%);
    position: relative;
    overflow: hidden;
}

.hero h1 {
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero .subtitle {
    font-size: 1.4rem;
    color: var(--text-light);
    font-weight: 400;
    margin-bottom: 40px;
    max-width: 800px;
    border-left: 5px solid var(--secondary);
    padding-left: 20px;
}

.hero-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.tag {
    background: #eef2f5;
    color: var(--secondary);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* --- CARDS GRID --- */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 20px;
    text-align: center; /* Centre le texte */
    transition: 0.3s;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre les éléments flex (icones, etc) */
    height: 100%;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--secondary);
    box-shadow: 0 8px 20px rgba(20, 93, 160, 0.15);
}

.card h3 {
    font-size: 1.25rem;
    color: var(--primary);
    margin: 20px 0 15px 0;
    font-weight: 600;
}

.card p {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: 20px;
    flex-grow: 1;
}

/* --- ICON SYSTEM (Style Présentation Markdown) --- */
.icon-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary); /* Couleur de fond du masque */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    flex-shrink: 0;
}

/* Définition des formes (Masks) */

.icon-structure {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='5' r='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='6' cy='19' r='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='18' cy='19' r='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cline x1='12' y1='8' x2='6' y2='16' stroke='black' stroke-width='1.5'/%3E%3Cline x1='12' y1='8' x2='18' y2='16' stroke='black' stroke-width='1.5'/%3E%3Cline x1='6' y1='19' x2='18' y2='19' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='5' r='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='6' cy='19' r='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='18' cy='19' r='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cline x1='12' y1='8' x2='6' y2='16' stroke='black' stroke-width='1.5'/%3E%3Cline x1='12' y1='8' x2='18' y2='16' stroke='black' stroke-width='1.5'/%3E%3Cline x1='6' y1='19' x2='18' y2='19' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
}

.icon-software-dev {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z'/%3E%3C/svg%3E");
}

.icon-governance {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0 0 12 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 0 1-2.031.352 5.988 5.988 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971Zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 0 1-2.031.352 5.989 5.989 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971Z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0 0 12 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 0 1-2.031.352 5.988 5.988 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971Zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 0 1-2.031.352 5.989 5.989 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971Z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-earth {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m20.893 13.393-1.135-1.135a2.252 2.252 0 0 1-.421-.585l-1.08-2.16a.414.414 0 0 0-.663-.107.827.827 0 0 1-.812.21l-1.273-.363a.89.89 0 0 0-.738 1.595l.587.39c.59.395.674 1.23.172 1.732l-.2.2c-.212.212-.33.498-.33.796v.41c0 .409-.11.809-.32 1.158l-1.315 2.191a2.11 2.11 0 0 1-1.81 1.025 1.055 1.055 0 0 1-1.055-1.055v-1.172c0-.92-.56-1.747-1.414-2.089l-.655-.261a2.25 2.25 0 0 1-1.383-2.46l.007-.042a2.25 2.25 0 0 1 .29-.787l.09-.15a2.25 2.25 0 0 1 2.37-1.048l1.178.236a1.125 1.125 0 0 0 1.302-.795l.208-.73a1.125 1.125 0 0 0-.578-1.315l-.665-.332-.091.091a2.25 2.25 0 0 1-1.591.659h-.18c-.249 0-.487.1-.662.274a.931.931 0 0 1-1.458-1.137l1.411-2.353a2.25 2.25 0 0 0 .286-.76m11.928 9.869A9 9 0 0 0 8.965 3.525m11.928 9.868A9 9 0 1 1 8.965 3.525' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m20.893 13.393-1.135-1.135a2.252 2.252 0 0 1-.421-.585l-1.08-2.16a.414.414 0 0 0-.663-.107.827.827 0 0 1-.812.21l-1.273-.363a.89.89 0 0 0-.738 1.595l.587.39c.59.395.674 1.23.172 1.732l-.2.2c-.212.212-.33.498-.33.796v.41c0 .409-.11.809-.32 1.158l-1.315 2.191a2.11 2.11 0 0 1-1.81 1.025 1.055 1.055 0 0 1-1.055-1.055v-1.172c0-.92-.56-1.747-1.414-2.089l-.655-.261a2.25 2.25 0 0 1-1.383-2.46l.007-.042a2.25 2.25 0 0 1 .29-.787l.09-.15a2.25 2.25 0 0 1 2.37-1.048l1.178.236a1.125 1.125 0 0 0 1.302-.795l.208-.73a1.125 1.125 0 0 0-.578-1.315l-.665-.332-.091.091a2.25 2.25 0 0 1-1.591.659h-.18c-.249 0-.487.1-.662.274a.931.931 0 0 1-1.458-1.137l1.411-2.353a2.25 2.25 0 0 0 .286-.76m11.928 9.869A9 9 0 0 0 8.965 3.525m11.928 9.868A9 9 0 1 1 8.965 3.525' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-user-group {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z'/%3E%3C/svg%3E");
}

.icon-user-add {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-money {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-clipboard-document {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75'/%3E%3C/svg%3E");
}

.icon-shield {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8v4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16h.01' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8v4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16h.01' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-light {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18'/%3E%3C/svg%3E");
}

.icon-stack {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpolyline points='2 17 12 22 22 17' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpolyline points='2 12 12 17 22 12' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpolyline points='2 17 12 22 22 17' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpolyline points='2 12 12 17 22 12' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
}

.icon-file-deposit {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 11v6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 14l3 3 3-3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 11v6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 14l3 3 3-3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-search {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65' stroke='black' stroke-width='1.5'/%3E%3Cline x1='11' y1='8' x2='11' y2='14' stroke='black' stroke-width='1.5'/%3E%3Cline x1='11' y1='11' x2='13' y2='11' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65' stroke='black' stroke-width='1.5'/%3E%3Cline x1='11' y1='8' x2='11' y2='14' stroke='black' stroke-width='1.5'/%3E%3Cline x1='11' y1='11' x2='13' y2='11' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
}

.icon-stability {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 4.5h6M9 19.5h6M10.5 4.5v15m3-15v15M10.5 9h3m-3 6h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 4.5h6M9 19.5h6M10.5 4.5v15m3-15v15M10.5 9h3m-3 6h3'/%3E%3C/svg%3E");
}

.icon-information {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'/%3E%3C/svg%3E");
}

.icon-lightning {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z'/%3E%3C/svg%3E");
}

.icon-microphone {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z'/%3E%3C/svg%3E");
}

.icon-coordination {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25'/%3E%3C/svg%3E");
}

.icon-flexibility {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5'/%3E%3C/svg%3E");
}

.icon-bridge {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 9.5v7h4c0-3.31 2.69-6 6-6s6 2.69 6 6h4v-7c0 0-6-2.5-10-2.5S2 9.5 2 9.5z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 9.5v7h4c0-3.31 2.69-6 6-6s6 2.69 6 6h4v-7c0 0-6-2.5-10-2.5S2 9.5 2 9.5z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-sovereignty {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z'/%3E%3C/svg%3E");
}

/* --- SPLIT SECTION --- */
.split-section {
    background-color: #fff;
}

.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.split-content h2 {
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 20px;
}

.split-visual {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: var(--radius);
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.split-visual::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    top: -50%;
    left: -50%;
}

/* Icone spécifique pour le split (blanche) */
.split-visual .icon-box {
    width: 120px;
    height: 120px;
    background-color: #ffffff; /* Force le blanc pour le masque */
    z-index: 2;
}

.content-section {
    padding: 60px 0;
}

.content-section h2 {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 30px;
    border-left: 5px solid var(--accent);
    padding-left: 20px;
}

/* Grille pour les objectifs */
.objectives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* Timeline / Jalons */
.timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.timeline-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 25px;
    position: relative;
    transition: 0.3s;
}

.timeline-card:hover {
    border-color: var(--secondary);
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

.timeline-date {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timeline-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.timeline-desc {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

.status-badge {
    display: inline-block;
    margin-top: 15px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #eef2f5;
    color: var(--secondary);
}

/* Process Steps */
.process-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
    position: relative;
}

.process-step {
    flex: 1;
    min-width: 200px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.step-number {
    width: 50px;
    height: 50px;
    background-color: var(--secondary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 auto 20px auto;
    box-shadow: 0 4px 10px rgba(20, 93, 160, 0.3);
}

.step-title {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.step-desc {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* Ligne de connexion entre les étapes (visible uniquement sur desktop) */
@media (min-width: 769px) {
    .process-container::before {
        content: '';
        position: absolute;
        top: 25px;
        left: 50px;
        right: 50px;
        height: 2px;
        background-color: var(--border);
        z-index: 1;
    }
}

/* --- VISUAL PROCESS FLOW --- */

.flow-container {
    display: grid;
    grid-template-columns: 1fr 280px 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    max-width: 1200px;
    margin: 40px auto 0 auto;
}

/* Colonnes Gauche et Droite */
.flow-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 2;
}

.flow-item {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

/* Animation au survol : vers le centre */
.flow-item:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: var(--secondary);
    z-index: 2;
}

/* Inverser le mouvement pour la colonne de droite */
.flow-column.right .flow-item:hover {
    transform: translateX(-10px);
}

.flow-icon {
    width: 50px;
    height: 50px;
    background-color: #f0f4f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--secondary);
}

.flow-content h4 {
    font-size: 1rem;
    color: var(--primary);
    margin-bottom: 4px;
    font-weight: 600;
}

.flow-content p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.4;
    margin: 0;
}

/* Colonne Centrale (Plateforme) */
.flow-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 400px; /* Assure l'alignement vertical avec les listes */
}

.platform-core {
    width: 140px;
    height: 140px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 0 30px rgba(20, 93, 160, 0.4);
    position: relative;
    animation: pulse 3s infinite;
}

.platform-core .icon-box {
    width: 60px;
    height: 60px;
    background-color: white !important;
    color: var(--primary);
}

.platform-label {
    margin-top: 20px;
    font-weight: 700;
    color: var(--primary);
    font-size: 1.1rem;
    background: white;
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

/* Animation de pulsation */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(20, 93, 160, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(20, 93, 160, 0); }
    100% { box-shadow: 0 0 0 0 rgba(20, 93, 160, 0); }
}

/* Responsive Mobile */
@media (max-width: 900px) {
    .flow-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .flow-column, .flow-column.right { 
        order: 1; 
    }
    .flow-center { 
        order: 0; 
        margin-bottom: 30px; 
        min-height: auto; 
    }
    
    .flow-item:hover { 
        transform: none; 
    }
    
    /* Indicateur textuel pour mobile */
    .flow-center::after {
        content: '↓ Transforme vos données en avantages ↓';
        display: block;
        margin-top: 15px;
        font-size: 0.85rem;
        color: var(--secondary);
        font-weight: 600;
    }
}

/* Architecture Tech Stack */
.tech-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}
.tech-item {
    background: white;
    padding: 25px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    text-align: center;
}
.tech-item h4 {
    color: var(--primary);
    margin: 15px 0 10px 0;
    font-size: 1.1rem;
}
.tech-item p {
    font-size: 0.9rem;
    color: var(--text-light);
}
.tech-icon {
    font-size: 2rem;
    color: var(--secondary);
    font-weight: bold;
}

/* Styles spécifiques à la page Vision */
        
.vision-intro {
    text-align: left;
    margin: 0 auto 60px auto;
}

.vision-intro p.lead {
    font-size: 1.25rem;
    color: var(--text-light);
    line-height: 1.8;
    margin-top: 20px;
}

/* Grille des piliers */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Légèrement réduit pour mieux centrer */
    gap: 30px;
    margin-bottom: 80px;
    max-width: 1100px; /* Limite la largeur totale pour éviter que ce soit trop étalé */
    margin-left: auto;
    margin-right: auto;
}

.pillar-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px 30px; /* Padding vertical augmenté */
    transition: 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* CENTRE LES ÉLÉMENTS HORIZONTALEMENT */
    text-align: center; /* CENTRE LE TEXTE */
}

.pillar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(20, 50, 85, 0.1);
    border-color: var(--secondary);
}

.pillar-icon {
    width: 70px; /* Un peu plus grand pour l'impact visuel */
    height: 70px;
    background-color: #f0f4f8;
    border-radius: 50%; /* Rend l'icône ronde */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color: var(--secondary);
    flex-shrink: 0;
}

.pillar-icon .icon-box {
    width: 35px;
    height: 35px;
}

.pillar-card h3 {
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
    /* Le text-align: center du parent gère déjà le titre */
}

.pillar-card p {
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem;
    flex-grow: 1;
    /* Le text-align: center du parent gère déjà le paragraphe */
}

/* --- STYLE DU MODÈLE GLOBAL --- */

.model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.model-step {
    background: white;
    padding: 30px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre tout horizontalement */
    text-align: center;  /* Centre le texte */
}

.model-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(20, 50, 85, 0.1);
    border-color: var(--secondary);
}

.step-icon-bg {
    width: 80px;
    height: 80px;
    background-color: #f0f4f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--secondary);
    transition: 0.3s;
}

.model-step:hover .step-icon-bg {
    background-color: var(--secondary);
    color: white;
}

.step-icon-bg .icon-box {
    width: 40px;
    height: 40px;
    background-color: currentColor; /* Prend la couleur du parent (bleu ou blanc) */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.model-step h4 {
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.model-step p {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

/* Responsive pour le modèle */
@media (max-width: 768px) {
    .model-grid {
        grid-template-columns: 1fr;
    }
}

/* Conclusion Banner */
.vision-conclusion {
    text-align: center;
    background: var(--primary);
    color: white;
    padding: 60px 20px;
    border-radius: var(--radius);
    margin-bottom: 60px;
}

.vision-conclusion h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: white;
}

.vision-conclusion p {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 800px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
}

.btn-white {
    background-color: white;
    color: var(--primary);
    padding: 12px 30px;
    border-radius: var(--radius);
    font-weight: 600;
    display: inline-block;
    transition: 0.3s;
}
.btn-white:hover {
    background-color: var(--bg-panel);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .distinction-grid {
        grid-template-columns: 1fr;
    }
    .vision-conclusion h2 {
        font-size: 1.6rem;
    }
}

/* --- FOOTER --- */
footer {
    background-color: var(--primary);
    color: white;
    padding: 60px 0 30px;
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-info h4 { 
    color: var(--tertiary); 
    margin-bottom: 15px; 
    font-size: 1.1rem; 
}

.footer-info p { 
    color: #ccc; 
    margin-bottom: 10px; 
}

.footer-info a:hover {
    color: white;
    text-decoration: underline;
}

.hosting-badge {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    font-size: 0.8rem;
    color: var(--tertiary);
}

.hosting-badge a { 
    color: white; 
    text-decoration: underline; 
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 20px;
        display: none; /* Toujours caché par défaut sur mobile */
    }
    
    /* Optionnel : Afficher au clic via JS ou toujours visible si préféré */
    .dropdown:hover .dropdown-menu {
        display: flex;
    }
}