:root{
  --bg: #ffffff;
  --text: #0b1220;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #0B66C3; /* Inspired by investdubai blue */
  --accent-weak: rgba(11,102,195,0.08);
  --shadow: 0 2px 10px rgba(0,0,0,0.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6
  overflow-x: hidden;
}
  
.container{max-width:1280px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}

.nav{position:relative}
.nav-toggle{display:none;background:transparent;border:1px solid var(--border);padding:6px 10px;border-radius:10px;cursor:pointer}
/* .nav-menu{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0} */
.nav-menu a{color:inherit;text-decoration:none;font-size:14px}
.nav-menu a:hover{color:var(--accent)}

/* --- Bloc .btn (Unique et Fusionné) --- */
.btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    gap: 8px; /* Ajout pour l'icône/texte */
    border-radius: 999px; /* Forme de pilule ou très arrondie */
    padding: 12px 18px; 
    font-weight: 700; 
    cursor: pointer; 
    text-decoration: none; /* Assurer que le lien n'est pas souligné */
    border: 1px solid transparent; /* Bordure transparente par défaut */
}

/* --- Styles de Couleurs et Contraste --- */

/* Le bouton principal (couleur accentuée, texte blanc) */
.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: var(--shadow);
}
.btn-primary:hover{opacity:.92}

/* Le bouton Outline Générique (si vous l'utilisez) */
.btn-outline { 
    background:#fff; 
    border-color:var(--accent); /* Utiliser l'accentuation pour la cohérence */
    color:var(--accent); 
}
.btn-outline:hover{background:var(--accent-weak)}

/* Mise en page du hero */
.hero { position:relative; overflow:hidden; color:var(--text); }
.hero-bg { position:absolute; inset:0; z-index:-1;
  background:radial-gradient(90% 70% at 50% -10%, rgba(11,102,195,.22), transparent 60%);
}

/* --- Style du Paragraphe dans la Hero Section (CORRIGÉ) --- */
.hero-text p {
    font-size: 18px; 
    
    /* Couleur tirée de votre ancienne version (plus foncée que --muted, mais moins que --text) */
    color: #263042; 
    
    /* Le reste de vos styles de marge/max-width */
    line-height: 1.5;
    margin-top: 20px;
    margin-bottom: 20px; 
    max-width: 700px;
}

/* --- Styles des Boutons et CTA (Gardé tel quel) --- */
.hero-ctas {display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.accent{color:var(--accent)}
.hero-badges{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;color:var(--muted);font-size:13px}
.dot{display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--accent);margin-right:6px;transform:translateY(-1px)}
.hero-card{border:1px solid var(--border);background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:22px}
.card-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:720px){.card-grid{grid-template-columns:1fr 1fr}}
.card{border:1px solid var(--border);border-radius:18px;padding:16px}
.card ul{margin:10px 0 0 18px;padding:0}
.card .link{display:inline-block;margin-top:8px;font-size:12px;color:var(--accent);text-decoration:none}
.card.soft{background:#fff}
.card.hover{position:relative;transition:.25s ease;overflow:hidden}
.card.hover::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg, transparent, rgba(11,102,195,.06));opacity:0;transition:.25s}
.card.hover:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(0,0,0,.06)}
.card.hover:hover::after{opacity:1}
.note{background:#f8fafc;border:1px dashed var(--border);padding:12px;border-radius:14px;margin-top:12px;color:#1f2937;font-size:14px}

.curve{display:block;width:100%;height:0px;color:#fff;margin-bottom:-1px}

.section{padding:40px 0}
.section.alt{background:#fafafa}
.section h2{font-size:28px;margin:0 0 18px;font-weight:800}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(1,1fr)}
.grid-3{grid-template-columns:repeat(1,1fr)}
@media (min-width:780px){.grid-4{grid-template-columns:repeat(4,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}}

.tile{border:1px solid var(--border);background:#fff;border-radius:16px;padding:16px;position:relative;box-shadow:var(--shadow)}
.tile-emoji{font-size:20px;margin-bottom:6px}
.tile-bar{display:block;height:3px;width:0;background:var(--accent);border-radius:999px;margin-top:8px;transition:width .25s ease}
.tile:hover .tile-bar{width:56px}

.meta{margin-top:12px;font-size:12px;color:var(--muted)}

.contact{background:linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);border-top:1px solid var(--border)}
.contact-inner{display:grid;grid-template-columns:1fr;gap:16px;align-items:center}
.contact-copy h2{font-size:28px;margin:0 0 8px}
.contact-copy p{max-width:720px}

.site-footer{border-top:1px solid var(--border);padding:18px 0;color:var(--muted);font-size:13px;text-align:center}

/* ----- Header base ----- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  position: relative; /* anchor for absolute mobile menu */
}
.brand{ display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; margin-right:auto; }
.brand-badge{ background:var(--accent-weak); color:var(--accent); padding:6px 10px; border-radius:12px; font-weight:700; font-size:12px; letter-spacing:.02em; }
.brand-name{ font-weight:700; }

/* Desktop layout */
.site-header .nav{ display:flex; align-items:center; gap:16px; margin-left:auto; }
.site-header .nav-toggle{
  display:none; /* hidden on desktop */
  background:transparent;
  border:0;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.site-header .nav-menu{
  display:flex;            /* horizontal on desktop */
  align-items:center;
  gap:24px;
  list-style:none;
  margin:0;
  padding:0;
}
.site-header .nav-menu a{
  text-decoration:none;
  color:inherit;
  font-weight:600;
}

/* ----- Mobile (<900px) ----- */
@media (max-width: 900px){
  .site-header .nav-toggle{ display:block; }

  .site-header .nav-menu{
    display:none;           /* hidden until .show */
    position:absolute;
    right:16px;
    top:56px;               /* was 48/64: unify to one value */
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    flex-direction:column;
    gap:12px;
    min-width:220px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    z-index: 30;            /* above the sticky header */
  }
  .site-header .nav-menu.show{ display:flex; }
}


/* Optionnel : un petit espace au-dessus des cartes */

/* ===========================
   TEAM / CARTES SYMÉTRIQUES
   =========================== */
.team{
    /* ANCIEN: width: min(1400px, 95vw); */
    max-width: 1400px;
    width: 95%; /* Utiliser % pour éviter de compter la scrollbar */
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(360px, 1fr));
    gap: 24px;
}

.team .card{
  display:grid;
  grid-template-rows:auto auto 1fr auto; /* header / (spacer) / contenu / footer */
  gap:10px;
  padding:22px;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
  height:100%;
}

/* ----- Header avec avatar + identité ----- */
.card-header{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:12px;
  align-items:center;
}

/* Forcer un bloc identité de hauteur homogène
   pour aligner le début des puces des 2 cartes */
.card-header > div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:86px;                  /* hauteur cible identique */
}

.avatar{
  width:64px;height:64px;border-radius:50%;
  object-fit:cover;object-position:center;
  border:1px solid var(--border);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}

/* Titre & sous-titre */
.team .card h3{
  margin:0;
  font-size:20px;line-height:1.2;font-weight:800;
}

/* Clamp du sous-titre à 2 lignes pour garder la symétrie */
.subtitle{
  margin:0;
  color:var(--muted);
  font-weight:600;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Liste des compétences */
.team .features{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;                          /* espacement constant */
  list-style-position: outside;
}

/* ----- Footer : lien LinkedIn aligné en bas ----- */
.footer{ margin:0; }

.footer a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}

/* Icône LinkedIn en CSS pur (mask SVG) */
.icon-linkedin{
  width:18px;height:18px;display:inline-block;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 448 512"><path d="M100.3 448H7.4V149.1h92.9V448zM53.8 108.1C24.1 108.1 0 83.5 0 53.8 0 24 24.1 0 53.8 0S107.5 24 107.5 53.8c0 29.7-24.1 54.3-53.7 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.3-48.3-79.3-48.3 0-55.7 37.7-55.7 76.6V448h-92.8V149.1h89.1v40.8h1.3c12.4-23.5 42.6-48.3 87.8-48.3 94 0 111.3 61.9 111.3 142.3V448z"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23000" viewBox="0 0 448 512"><path d="M100.3 448H7.4V149.1h92.9V448zM53.8 108.1C24.1 108.1 0 83.5 0 53.8 0 24 24.1 0 53.8 0S107.5 24 107.5 53.8c0 29.7-24.1 54.3-53.7 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.3-48.3-79.3-48.3 0-55.7 37.7-55.7 76.6V448h-92.8V149.1h89.1v40.8h1.3c12.4-23.5 42.6-48.3 87.8-48.3 94 0 111.3 61.9 111.3 142.3V448z"/></svg>') no-repeat center / contain;
}

/* Bandeau duo sous les cartes */
.duo{
  margin-top:12px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fafafa;
  max-width: 1400px;
  width: 95%; /* Évite le débordement causé par vw */
  margin: 12px auto 40px; 
}


/* ====== Responsive ====== */
@media (max-width: 800px){
  .team{grid-template-columns:1fr}
  .team .card{padding:18px}
  .card-header{grid-template-columns:56px 1fr}
  .card-header > div{min-height:76px}
  .avatar{width:56px;height:56px}
}


.section--tight{padding-bottom:0px;}
.section--compact{padding-top:0px;}

/* Effet hover pour le lien LinkedIn */
.linkedin-link{
  --ln:#0A66C2;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--ln);
  text-decoration:none;
  position:relative;
  transition:color .25s ease;
}

/* Soulignement qui se dessine au survol */
.linkedin-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  height:2px;
  width:100%;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}

.linkedin-link:hover{
  color:#084d99; /* teinte un peu plus sombre au survol */
}

.linkedin-link:hover::after{
  transform:scaleX(1);
}

/* Icône qui bouge légèrement au survol */
.linkedin-link .icon-linkedin{
  display:inline-block;
  transition:transform .25s ease, filter .25s ease;
}

.linkedin-link:hover .icon-linkedin{
  transform:translateX(2px) translateY(-1px);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));
}

/* Si ton icône est un SVG, hérite la couleur du texte */
.icon-linkedin svg{ fill:currentColor; }


---


/* Mise en page du hero */
.hero { position:relative; overflow:hidden; color:var(--text); }
.hero-bg{ position:absolute; inset:0; z-index:-1;
  background:radial-gradient(90% 70% at 50% -10%, rgba(11,102,195,.22), transparent 60%);
}

/* >>> Grille à 2 colonnes : texte + carrousel */
.hero-inner{
  display:grid;
  grid-template-columns: minmax(0,1fr) 480px;
  gap:3rem;
  align-items:start;
  padding:40px 0;
}

/* Colonne gauche limitée pour laisser respirer la droite */
.hero-left{ max-width:840px; min-width:0; }

/* Colonne droite alignée en haut, à droite */
.hero-right{ justify-self:end; align-self:start; }

/* Style par défaut (mobile/tablette jusqu'à 900px) */
.hero .hero-text h1 { 
    font-size: 40px; /* Taille de base/mobile (vous pouvez l'augmenter si nécessaire, ex: 48px) */
    line-height: 1.15;
    margin: 0 0 10px;
    font-weight: 800;
}

/* Règle pour écrans larges (Desktop) */
@media (min-width: 900px) {
    .hero .hero-text h1 {
        font-size: 56px !important; 
    }
}

/* Ajustements téléphones étroits */
@media (max-width: 420px){
  .hero .hero-text h1{
    font-size: clamp(24px, 9vw, 36px);
    line-height: 1.12;
  }
  /* évite les retours forcés s'il y a des <br> */
  .hero .hero-text h1 br{ display:none; }
}


/* Carrousel */
.logo-carousel{
  width:100%;
  max-width:480px;
  height:96px;
  overflow:hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logos-track{
  display:flex; align-items:center; gap:2.5rem;
  animation: scroll 22s linear infinite;
}
.logos-track img{
  height:56px; object-fit:contain;
  filter:grayscale(100%); opacity:.9;
  transition:filter .2s ease, opacity .2s ease;
}
.logos-track img:hover{ filter:grayscale(0%); opacity:1; }

/* Responsive : 1 colonne sous 1024px */
@media (max-width:900px){
 .hero-inner{ 
  grid-template-columns:1fr; /* Bascule en 1 colonne */
  gap: 2rem; /* Réduit l'espace vertical empilé */
   }
 .hero-right{ justify-self:start; margin-top:1.25rem; }
 .logo-carousel{ max-width:100%; }
}

@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.trust-text{
  margin-top:1rem;
  text-align:center;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
}



/* ---- Modal ---- */
.modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.modal.show { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.modal-dialog { 
  position: relative; margin: 4rem auto; max-width: 1100px; 
  background: #fff; border-radius: 24px; overflow: hidden; 
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.modal-close {
  position: absolute; top: 12px; right: 16px; 
  background: #fff; border: 1px solid #e6e6e6; 
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; 
  font-size: 20px; line-height: 34px;
}

/* ---- Grille contenu ---- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; }
.contact-left { background: #f7fbf9; padding: 0; display: flex; flex-direction: column; }
.contact-image { width: 100%; height: 320px; object-fit: cover; }
.contact-info { padding: 28px; }
.contact-info h3 { margin: 0 0 8px; }
.contact-right { padding: 32px 32px 40px; }

.sub { color: #6b7280; margin: 6px 0 22px; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
label { font-weight: 600; color: #0f172a; }
input, textarea {
  width: 100%; border: 1px solid #e5e7eb; border-radius: 12px; 
  padding: 12px 14px; font-size: 16px; outline: none;
}
input:focus, textarea:focus { border-color: #1ecb7b; box-shadow: 0 0 0 4px rgba(30,203,123,.12); }

.form-note { margin-top: 10px; font-size: 14px; color:#111827; }

/* Responsive */
@media (max-width: 960px){
  .modal-dialog { margin: 1.25rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-image { height: 220px; }
  .row { grid-template-columns: 1fr; }
}

/* CODE ALICE */

/* --- Hero visuel personnalisé Zone formation --- */
.isb-visual-box{
  width: min(420px, 92%);
  aspect-ratio: 21 / 13;         /* ≈ 420x260 */
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--isb-border);
  box-shadow: 0 8px 30px rgba(3,6,20,.35);
  background: #0e1730;
  margin: 0;
}

.isb-hero-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 980px){
  .isb-visual-box{ aspect-ratio: 21 / 13; }
}

/* ---------- Modal ---------- */
.isb-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.isb-modal[aria-hidden="false"]{ display:block; }
.isb-modal-backdrop{position:absolute;inset:0;background:rgba(5,8,18,.65);backdrop-filter:saturate(1.2) blur(2px)}
.isb-modal-dialog{
  position:relative;max-width:640px;margin:8vh auto;background:#0f1a33;color:#e9eefc;
  border:1px solid var(--isb-border);border-radius:18px;box-shadow:0 20px 70px rgba(0,0,0,.45);
  padding:22px 20px 20px
}
.isb-modal-close{
  position:absolute;top:8px;right:10px;line-height:1;border:1px solid var(--isb-border);
  background:#10182b;color:#e9eefc;border-radius:10px;padding:6px 10px;cursor:pointer
}
.isb-modal-close:hover{border-color:var(--isb-accent);color:var(--isb-accent)}
.isb-modal-header h3{margin:2px 0 6px;font-size:20px;font-weight:800}
.isb-modal-sub{margin:0 0 12px;color:var(--isb-muted);font-size:14px}

/* ---------- Form ---------- */
.isb-form{display:flex;flex-direction:column;gap:12px}
.isb-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.isb-field{display:flex;flex-direction:column;gap:6px}
.isb-field label{font-size:13px;color:var(--isb-muted)}
.isb-field input,.isb-field select,.isb-field textarea{
  background:#10182b;border:1px solid var(--isb-border);color:#e9eefc;border-radius:10px;
  padding:10px 12px;font-size:14px;outline:none
}
.isb-field input:focus,.isb-field select:focus,.isb-field textarea:focus{border-color:var(--isb-accent)}
.isb-btn-wide{width:100%;justify-content:center}
.isb-form-note{margin:4px 0 0;color:var(--isb-muted);font-size:13px}

/* Responsive modal form */
@media (max-width: 680px){
  .isb-modal-dialog{margin:6vh 16px;padding:18px}
  .isb-form-row{grid-template-columns:1fr}
}

/* FIN CODE ALICE */ 

/* Empêche Safari iOS d'agrandir le texte automatiquement */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}



.lang-toggle{
  display:inline-flex; gap:4px; padding:4px; border-radius:999px;
  background:linear-gradient(180deg,#f6f7fb,#eceff5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 1px 3px rgba(0,0,0,.06);
  align-items:center;
}
.lang-toggle .lang-btn{
  display:flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px; text-decoration:none;
  font-weight:700; font-size:14px; letter-spacing:.2px;
  color:#0f172a; position:relative; transition:transform .08s ease, background .2s ease;
}
.lang-toggle .lang-btn:hover{ transform:translateY(-1px); }
.lang-toggle .lang-btn[aria-current="page"]{
  background:#0f172a; color:#fff; 
  box-shadow:0 6px 12px rgba(2,6,23,.12);
}
.lang-toggle .flag{ line-height:1; }
.lang-toggle .code{ font-variant:small-caps; }
@media (max-width:640px){
  .lang-toggle .code{ display:none; } /* Ne garde que les drapeaux en mobile */
}






.nav-menu li{color:inherit;text-decoration:none;font-size:14px}


/* Positionnement de base */
.nav-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; align-items: center; }
.nav-menu > li { position: relative; }

/* Bouton du sous-menu */
.submenu-toggle {
  background: none; border: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
}

/* Sous-menu (desktop) */
.submenu {
  position: absolute;
  left: 0; top: 100%;
  min-width: 220px;
  margin: .5rem 0 0; padding: .5rem 0;
  border: 1px solid #e5e7eb; border-radius: .5rem;
  background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,.08);
  list-style: none;
  visibility: hidden; opacity: 0; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s .15s;
  z-index: 50;
}
.submenu li a { display: block; padding: .6rem .9rem; text-decoration: none; }
.submenu li a:hover, .submenu li a:focus { background: #f3f4f6; }

/* Affichage au focus/hover (desktop, sans JS) */
.has-submenu:focus-within > .submenu,
.has-submenu:hover > .submenu {
  visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s;
}

/* État ouvert via JS (mobile + accessibilité) */
.has-submenu.open > .submenu {
  visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s;
}
.has-submenu.open > .submenu-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* Mobile: menu en colonne */
@media (max-width: 900px) {
  .nav-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-menu > li { width: 100%; }
  .submenu { position: static; border: 0; box-shadow: none; margin: 0; padding: 0; transform: none; visibility: hidden; height: 0; overflow: hidden; opacity: 0; }
  .has-submenu.open > .submenu { visibility: visible; height: auto; opacity: 1; }
  .submenu li a { padding: .6rem 1.25rem; }
}



/* Page blog: menu en colonne */
:root { --max: 1100px; --gap: 16px; --text: #111; --muted:#6b7280; --bg:#fff; --border:#e5e7eb; --brand:#111; }
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}

.article_blog {color:var(--brand);text-decoration:none} .article_blog:hover{text-decoration:underline}



header, .site-footer{border-bottom:1px solid var(--border);padding:12px 0}
.site-footer{border-top:1px solid var(--border);text-align:center;margin-top:40px;padding:24px 0}

.breadcrumb{color:var(--muted);font-size:.9rem;margin:16px 0}
.post h1{margin:.2em 0 .4em} .post-meta{color:var(--muted);margin-bottom:12px}
.post-hero{display:block;width:100%;height:auto;border-radius:12px;margin:12px 0 20px}
.post-cta{border:1px solid var(--border);border-radius:12px;padding:16px;margin:28px 0;background:#fafafa}
.btn{display:inline-block;padding:.6rem 1rem;border:1px solid var(--border);border-radius:10px}
.related ul{padding-left:18px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin:20px 0 40px}
.card_blog{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff}


/* Uniformiser les images dans les cartes du blog */
.card_blog .thumb,
.card_blog .article_blog > img {
  width: 100%;
  aspect-ratio: 16 / 9;      /* garde le même ratio partout */
  overflow: hidden;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Toutes les images recadrées proprement */
.card_blog img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* coupe proprement sans déformer */
  display: block;
}

/* Ajustement du badge sur la carte "Arrive prochainement" */
.card_blog.coming-soon .badge-soon {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.9;
  z-index: 2;
}

.card_blog h2{font-size:1.05rem;margin:.6rem .8rem .2rem}
.card_blog .meta, .card_blog .excerpt{color:var(--muted);margin:.2rem .8rem .8rem}



/* =========================================================
   Styles génériques pour TOUTES les pages d'article (.post)
   (aucun effet global : tout est scoping sous .post)
   ========================================================= */

/* En-têtes & métas */
.post .breadcrumb { font-size:.92rem; color:var(--muted, #6b7280); margin:.5rem 0 1rem; }
.post .breadcrumb a { color:inherit; text-decoration:none; }
.post .breadcrumb a:hover { text-decoration:underline; }

.post h1 { line-height:1.2; margin:.25em 0 .5em; }
.post .post-meta { color:var(--muted, #6b7280); font-size:.95rem; margin-bottom:1rem; }

/* Image de tête / illustrations */
.post .post-hero { display:block; width:100%; max-height:420px; object-fit:cover;
  border-radius:12px; margin:1rem 0 1.75rem; }

/* Titres de section */
.post h2 { font-size:1.5rem; margin:1.8rem 0 .8rem; position:relative; padding-top:6px; }
.post h2::after { content:""; display:block; width:56px; height:3px; margin-top:8px;
  background:var(--accent, #111); border-radius:999px; }
.post h3 { font-size:1.15rem; margin:1.1rem 0 .5rem; }

/* Paragraphes & listes */
.post p { margin:0 0 1rem; }
.post ul, .post ol { margin:0 0 1.1rem 1.25rem; }

/* Encadrés / citations (tips, notes) */
.post blockquote { border-left:4px solid var(--accent, #111); background:rgba(0,0,0,.035);
  padding:.9rem 1rem; border-radius:0 10px 10px 0; margin:1.2rem 0; }

/* Tableaux */
.post table { width:100%; border-collapse:collapse; margin:1rem 0 1.5rem; font-size:.96rem; }
.post th, .post td { border:1px solid var(--border, #e5e7eb); padding:10px 12px; text-align:left; }
.post thead th { background:#fafafa; font-weight:700; }

/* Code inline & blocs */
.post code { background:#f6f8fa; border:1px solid var(--border, #e5e7eb);
  border-radius:6px; padding:0 4px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.post pre { background:#0f172a; color:#e5e7eb; border-radius:10px; padding:14px; overflow:auto;
  border:1px solid #0b1220; box-shadow:0 2px 10px rgba(0,0,0,.06); margin:1rem 0 1.5rem; }
.post pre code { background:transparent; border:0; padding:0; color:inherit; }

/* Figures & légendes */
.post .figure { margin:.5rem 0 1.25rem; text-align:center; }
.post .figure > img { display:block; margin-inline:auto; border-radius:10px; }
.post .figcaption { color:var(--muted, #6b7280); font-size:.9rem; margin-top:.5rem; }

/* Check-list (pour tes “7 pièges”, etc.) */
.post .checklist { list-style:none; padding-left:0; margin:.5rem 0 1.25rem; }
.post .checklist li { position:relative; padding-left:28px; margin:.4rem 0; }
.post .checklist li::before { content:"✓"; position:absolute; left:0; top:0; line-height:1.2;
  color:var(--accent, #111); font-weight:800; }

/* CTA article (réutilise ta structure) */
.post .post-cta { border:1px solid var(--border, #e5e7eb); border-radius:12px; padding:1.1rem 1.25rem;
  margin:2.2rem 0; background:#fafafa; text-align:center; }
.post .post-cta .btn { margin-top:.4rem; }

/* Bloc “À lire ensuite” */
.post .related { border-top:1px solid var(--border, #e5e7eb); padding-top:1.2rem; margin-top:2.4rem; }
.post .related h2 { font-size:1.15rem; margin-bottom:.8rem; }
.post .related ul { list-style:none; padding-left:0; }
.post .related li { margin:.4rem 0; }
.post .related a { color:inherit; text-decoration:none; }
.post .related a:hover { color:var(--accent, #111); text-decoration:underline; }

/* Responsive léger */
@media (max-width: 640px) {
  .post h1 { font-size:1.6rem; }
  .post h2 { font-size:1.25rem; }
  .post .author { flex-direction:column; align-items:flex-start; }
}

/* Désactiver le clic sur la langue active */
.lang-toggle .lang-btn[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  opacity: .7; /* léger feedback visuel, optionnel */
}

/* Carte blog en mode "arrive bientôt" – isolé */
.card_blog.coming-soon .article_blog { pointer-events: none; cursor: default; text-decoration: none; }
.card_blog.coming-soon .thumb { position: relative; }
.card_blog.coming-soon .thumb img { filter: grayscale(0.15); opacity: 0.9; }
.card_blog.coming-soon .badge-soon {
  position: absolute; top: 12px; left: 12px;
  padding: .35rem .6rem; border-radius: 999px;
  font-size: .85rem; line-height: 1; font-weight: 600;
  background: #111; color: #fff; /* ou var(--accent) si tu préfères */
  opacity: .95;
}

/* alternative sans aspect-ratio */
.card_blog .article_blog > img,
.card_blog .thumb { height: 200px; } /* ajuste 200px selon ton design */