/* ═══════════════════════════════════════
       TOKENS COMPLÉMENTAIRES
       Tokens couleurs + --font fournis par style.css
    ═══════════════════════════════════════ */
    :root {
      --texte:      #2c2f45;  /* texte principal */
      --texte-doux: #4a506b;  /* texte secondaire */
      --border:     #e2eaf7;  /* bordures légères */
      --nav-h:      100px;    /* hauteur nav — aligner avec style.css */
      --max-w:      1200px;   /* largeur max conteneurs */
    }

    /* Override fond blanc sur cette page (style.css impose --bleu-tres-clair) */
    body { background: #fff; color: var(--texte); }

    /* .section-title em : non couvert par style.css */
    .section-title em { font-style: normal; color: var(--vert); }

    /* ═══════════════════════════════════════
       HERO — overrides spécifiques à cette page
       (base .hero fournie par style.css)
    ═══════════════════════════════════════ */
    .hero {
      min-height: 520px;
      display: flex;
      align-items: flex-end;
    }

    /* Image de fond */
    .hero-bg {
      position: absolute;
      inset: 0; z-index: 0;
    }
    .hero-bg img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center 30%;
      display: block;
      /* placeholder — remplacer par l'image réelle */
      filter: brightness(.9);
    }
    /* Dégradé de protection */
    .hero-bg::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(1, 0, 40, .30)  0%,
        rgba(1, 0, 40, .60) 50%,
        rgba(1, 0, 40, .93) 100%
      );
    }

    /* Contenu hero */
    .hero-inner {
      position: relative; z-index: 2;
      width: 100%; max-width: var(--max-w);
      margin: 0 auto;
      /* padding: calc(var(--nav-h) + 80px) 5vw 64px; */
    }

    /* .hero-tag, .hero h1, .hero-sub : fournis par style.css
       Overrides spécifiques ci-dessous */
    .hero h1 {
      max-width: 720px;
      text-shadow: 0 2px 16px rgba(1,0,40,.55), 0 1px 4px rgba(1,0,40,.8);
    }
    .hero-sub {
      color: rgba(255,255,255,.8);
      text-shadow: 0 1px 6px rgba(1,0,40,.6);
    }


    /* ═══════════════════════════════════════
       SECTION HISTOIRE
    ═══════════════════════════════════════ */
    .section-histoire {
      padding: 100px 5vw;
      background: var(--bleu-tres-clair);
    }
    .section-histoire-inner {
      max-width: var(--max-w); margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem; align-items: center;
    }

    /* Visuel : frise chronologique */
    .histoire-timeline {
      display: flex; flex-direction: column; gap: 0;
    }
    .timeline-item {
      display: flex; gap: 1.5rem; align-items: flex-start;
      position: relative; padding-bottom: 2rem;
    }
    .timeline-item:last-child { padding-bottom: 0; }
    /* Ligne verticale */
    .timeline-item::before {
      content: '';
      position: absolute; left: 19px; top: 38px;
      width: 2px; bottom: 0;
      background: var(--border);
    }
    .timeline-item:last-child::before { display: none; }

    .timeline-dot {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--bleu-sombre);
      border: 2px solid var(--bleu-clair);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; position: relative; z-index: 1;
    }
    .timeline-dot span {
      font-size: .68rem; font-weight: 800;
      color: var(--vert); letter-spacing: .02em;
    }
    .timeline-content h4 {
      font-size: .92rem; font-weight: 700;
      color: var(--bleu-sombre); margin-bottom: .35rem;
    }
    .timeline-content p {
      font-size: .87rem; line-height: 1.65;
      color: var(--texte-doux);
    }

    /* Texte histoire */
    .histoire-content .section-title {
      margin-bottom: 1.5rem;
    }
	.histoire-content p, .dirigeant-content p { font-size: .975rem; line-height: 1.82; color: var(--texte-doux); margin-bottom: 1.15rem; }
    .histoire-content p:last-child { margin-bottom: 0; }
    .histoire-content strong { color: var(--bleu-sombre); }

    /* ═══════════════════════════════════════
       SECTION MISSION
    ═══════════════════════════════════════ */
    .section-mission {
      padding: 100px 5vw;
      background: var(--bleu-sombre);
      position: relative; overflow: hidden;
    }
    .section-mission::before {
      content: '';
      position: absolute; top: -120px; right: -80px;
      width: 500px; height: 500px; border-radius: 50%;
      background: radial-gradient(circle, rgba(0,51,140,.5) 0%, transparent 70%);
      pointer-events: none;
    }
    .section-mission-inner {
      max-width: var(--max-w); margin: 0 auto;
      position: relative; z-index: 2;
    }
    .section-mission .section-label { color: var(--vert); }
    .section-mission .section-title {
      color: #fff; margin-bottom: 3.5rem; max-width: 680px;
    }

    /* Carte mission principale */
    .mission-statement {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
      border-left: 4px solid var(--vert);
      border-radius: 0 12px 12px 0;
      padding: 2rem 2.5rem;
      margin-bottom: 3.5rem;
      max-width: 820px;
    }
    .mission-statement p {
      font-size: 1.1rem; line-height: 1.8;
      color: rgba(255,255,255,.85);
      font-style: italic;
    }
    .mission-statement strong { color: var(--vert); font-style: normal; }

    /* Grille valeurs */
    .mission-values {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .value-card {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 10px; padding: 1.75rem;
      transition: background .25s, border-color .25s;
    }
    .value-card:hover {
      background: rgba(255,255,255,.09);
      border-color: rgba(144,221,142,.3);
    }
    .value-icon {
      width: 44px; height: 44px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; margin-bottom: 1.1rem;
    }
    .v-vert   { background: rgba(144,221,142,.15); }
    .v-bleu   { background: rgba(204,225,255,.12); }
    .v-jaune  { background: rgba(255,214,41,.12); }

    .value-card h3 {
      font-size: .98rem; font-weight: 800;
      color: #fff; margin-bottom: .5rem;
      letter-spacing: -.01em;
    }
    .value-card p {
      font-size: .87rem; line-height: 1.65;
      color: rgba(255,255,255,.55);
    }

    /* ═══════════════════════════════════════
       SECTION DIRIGEANT
    ═══════════════════════════════════════ */
    .section-dirigeant {
      padding: 100px 5vw;
      background: #fff;
    }
    .section-dirigeant-inner {
      max-width: var(--max-w); margin: 0 auto;
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 6rem; align-items: start;
    }

    /* Photo + carte identité */
    .dirigeant-visual { display: flex; flex-direction: column; gap: 1.5rem; }

    .dirigeant-photo-wrap {
      position: relative;
    }
    .dirigeant-photo {
      width: 100%;
      aspect-ratio: 3/4;
      border-radius: 12px;
      overflow: hidden;
      background: linear-gradient(145deg, var(--bleu) 0%, var(--bleu-clair) 100%);
    }
    .dirigeant-photo img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: top;
      display: block;
    }
    /* Placeholder si pas d'image */
    .dirigeant-photo-placeholder {
      width: 100%; height: 100%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: .75rem;
      color: rgba(255,255,255,.4);
      font-size: .82rem;
    }
    .dirigeant-photo-placeholder span {
      font-size: 3rem; opacity: .3;
    }

    /* Badge flottant */
    .dirigeant-badge {
      position: absolute; bottom: -1.25rem; right: -1.25rem;
      background: var(--bleu-sombre);
      border: 2px solid var(--vert);
      border-radius: 10px;
      padding: .3rem .6rem;
      display: flex; align-items: center; gap: .75rem;
      box-shadow: 0 8px 24px rgba(1,0,40,.2);
    }
    .badge-icon { font-size: 1.4rem; }
    .badge-text strong {
      font-size: .88rem; font-weight: 800;
      color: #fff; display: block;
    }
    .badge-text span {
      font-size: .75rem; color: rgba(255,255,255,.5);
    }

    /* Carte contact dirigeant */
    .dirigeant-card {
      background: var(--bleu-tres-clair);
      border: 1px solid var(--border);
      border-radius: 10px; padding: 1.4rem 1.6rem;
    }
    .dirigeant-card-name {
      font-size: 1.05rem; font-weight: 800;
      color: var(--bleu-sombre); display: block;
      margin-bottom: .2rem;
    }
    .dirigeant-card-role {
      font-size: .82rem; color: var(--texte-doux);
      display: block; margin-bottom: .9rem;
    }
    .dirigeant-card-links {
      display: flex; flex-direction: column; gap: .45rem;
    }
    .dirigeant-card-links a {
      display: inline-flex; align-items: center; gap: .5rem;
      font-size: .83rem; color: var(--bleu);
      text-decoration: none; transition: color .2s;
    }
    .dirigeant-card-links a:hover { color: var(--bleu-sombre); }
    .link-icon { font-size: .9rem; }

    /* Contenu texte dirigeant */
    .dirigeant-content { padding-top: .5rem; }
    .dirigeant-content .section-title { margin-bottom: 1.5rem; }

    .dirigeant-content p:last-child { margin-bottom: 0; }
    .dirigeant-content strong { color: var(--bleu-sombre); }

    /* Citation dirigeant */
    .dirigeant-quote {
      background: var(--jaune-clair);
      border-left: 4px solid var(--jaune);
      border-radius: 0 8px 8px 0;
      padding: 1.25rem 1.5rem;
      margin: 1.75rem 0;
    }
    .dirigeant-quote p {
      font-size: 1rem; font-weight: 600;
      color: var(--bleu-sombre); font-style: italic;
      line-height: 1.65; margin: 0;
    }
    .dirigeant-quote cite {
      display: block; margin-top: .6rem;
      font-size: .78rem; font-style: normal;
      color: var(--texte-doux); font-weight: 700;
    }

    /* Compétences / tags */
    .dirigeant-tags {
      display: flex; flex-wrap: wrap; gap: .5rem;
      margin-top: 1.75rem;
    }
    .dirigeant-tag {
      background: var(--bleu-tres-clair);
      border: 1px solid var(--bleu-clair);
      color: var(--bleu);
      font-size: .78rem; font-weight: 600;
      padding: 5px 14px; border-radius: 100px;
    }

    /* ═══════════════════════════════════════
       SECTION CHIFFRES CLÉS
    ═══════════════════════════════════════ */
    .section-chiffres {
      padding: 80px 5vw;
      background: var(--bleu-tres-clair);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .section-chiffres-inner {
      max-width: var(--max-w); margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
    }
    .chiffre-item { text-align: center; }
    .chiffre-number {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800; color: var(--bleu);
      letter-spacing: -.04em; display: block;
      line-height: 1;
      margin-bottom: .5rem;
    }
    .chiffre-label {
      font-size: .85rem; color: var(--texte-doux);
      line-height: 1.45;
    }
    /* Séparateurs verticaux */
    .chiffre-item + .chiffre-item {
      border-left: 1px solid var(--border);
    }

    /* ═══════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════ */
    @media (max-width: 1020px) {
      .section-histoire-inner  { grid-template-columns: 1fr; gap: 3.5rem; }
      .histoire-timeline       { max-width: 540px; }
      .section-dirigeant-inner { grid-template-columns: 1fr; gap: 3rem; }
      .dirigeant-visual        { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; align-items: start; }
      .dirigeant-photo-wrap    { grid-row: span 2; }
      .mission-values          { grid-template-columns: 1fr 1fr; }
      .section-chiffres-inner  { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
      .chiffre-item:nth-child(3) { border-left: none; }
    }
    @media (max-width: 640px) {
      .mission-values   { grid-template-columns: 1fr; }
      .section-chiffres-inner { grid-template-columns: repeat(2, 1fr); }
      .chiffre-item + .chiffre-item { border-left: none; }
      .chiffre-item:nth-child(odd) + .chiffre-item { border-left: 1px solid var(--border); }
      .dirigeant-visual { grid-template-columns: 1fr; }
      .dirigeant-badge  { right: 1rem; }
    }