/* ============================================================
    style.css — Site Lequien
    Palette  : Marine profond · Cyan acier · Bleus pâles · Orange chaud
    Typo     : Barlow Condensed (titres) + Outfit (corps)
    Thème    : Industrie de précision — bureau d'études, plans techniques
   ============================================================ */


/* ============================================================
    1. VARIABLES GLOBALES
   ============================================================ */

:root {

  /* ── Fonds ─────────────────────────────────────────────── */
  --bg-deep:          #1a4a7f;
  --bg-surface:       #2a5f8f;
  --bg-card:          #3a6f9f;
  --bg-card-alt:      #4a7faf;
  --bg-white:         #f0f7ff;
  --bg-white-alt:     #e8f0fa;

  /* ── Cyan — accent froid principal ─────────────────────── */
  --accent:           #00a8d8;
  --accent-lt:        #40c4f0;
  --accent-dark:      #0078a8;
  --accent-glow:      rgba(0, 168, 216, 0.15);

  /* ── Orange — accent chaud secondaire ──────────────────── */
  --orange:           #f5a623;
  --orange-lt:        #ffd166;
  --orange-dark:      #d4881a;
  --orange-glow:      rgba(245, 166, 35, 0.18);

  /* ── Bleus complémentaires ──────────────────────────────── */
  --blue-dark:        #0e2a52;
  --blue:             #2a5f8f;
  --blue-lt:          #5a9bcc;

  /* ── Boutons ────────────────────────────────────────────── */
  --btn-start:        #d4881a;
  --btn-end:          #f5a623;

  /* ── Acier ──────────────────────────────────────────────── */
  --steel:            #88c0e8;
  --steel-dark:       #3878a8;
  --steel-glow:       rgba(136, 192, 232, 0.12);

  /* ── Texte sur fond sombre ──────────────────────────────── */
  --text:             #d8e8f8;
  --text-muted:       #6898b8;

  /* ── Texte sur fond clair ───────────────────────────────── */
  --text-dark:        #1c4a78;
  --text-dark-muted:  #437090;

  /* ── Bordures ───────────────────────────────────────────── */
  --border:           #4a688c;
  --border-light:     #b8c8e8;
  --border-lt:        rgba(255, 255, 255, .05);

  /* ── Tokens globaux ─────────────────────────────────────── */
  --radius:           6px;
  --radius-lg:        10px;
  --transition:       200ms cubic-bezier(.4, 0, .2, 1);
  --shadow-md:        0 4px 20px rgba(0, 0, 0, .45);
  --shadow-lg:        0 10px 40px rgba(0, 0, 0, .6);

  /* ── Header ─────────────────────────────────────────────── */
  --header-h:         9vh;
}


/* ============================================================
    2. RESET & BASE
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  background:  var(--bg-deep);
  color:       var(--text);
  font-family: 'Outfit', sans-serif;
  font-size:   1.2rem;
  font-weight: 400;
  line-height: 1.65;
  min-height:  100vh;
}

h1, h2, h3, h4 {
  font-family:    'Barlow Condensed', sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--text);
  line-height:    1.15;
}

h1 { font-size: clamp(1.8rem, 4.5vw, 3rem);    font-weight: 700; }
h2 { font-size: clamp(1.2rem, 2.6vw, 1.85rem); font-weight: 600; }
h3 { font-size: 1.15rem;                        font-weight: 600; }

a {
  color:           var(--accent-lt);
  text-decoration: none;
  transition:      color var(--transition);
}
a:hover { color: var(--accent); }

img { display: block; max-width: 100%; }


/* ============================================================
    3. UTILITAIRES GLOBAUX
   ============================================================ */

.hidden     { display: none !important; }
.show-block { display: block; }
.show-flex  { display: flex; }

strong {
  color:         inherit;
  font-weight:   600;
  font-size:     1.1em;
  padding:       0 3px;
  border-radius: 4px;
}

/* Effet shimmer — partagé par .clickable et .Mosaique_skill */
.clickable {
  position:      relative;
  display:       inline-block;
  overflow:      hidden;
  cursor:        pointer;
  border-radius: 8px;
  transition:    transform .3s ease, filter .3s ease;
}

.clickable:hover {
  transform: translateY(-5px);
  filter:    brightness(1.05);
}

.clickable::after {
  content:    '';
  position:   absolute;
  top:        0;
  left:       -75%;
  width:      50%;
  height:     100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
  transform:  skewX(-20deg);
  transition: left .5s ease;
  pointer-events: none;
}

.clickable:hover::after { left: 125%; }

.clickable img {
  display:   block;
  max-width: 100%;
  height:    auto;
}


/* ============================================================
    4. CENTRAGE GLOBAL — disposition par section
   ============================================================ */

/* Sections de la page Accueil */
#A_presentation_div,
#A_secteur_activite_div,
#A_certification_div,
#A_savoir_faire_div,
#A_valeur_div {
  text-align: center;
}

#A_presentation_p { margin-inline: auto; }

/* Blocs Savoir-Faire */
.Savoir-Faire {
  text-align:  center;
  align-items: center;
}

/* Réalisations */
#R_realisation { text-align: center; }

/* Qualité */
#Q_qualite,
#Q_philosophie,
#Q_tracabilite { text-align: center; }

#Q_philosophie_p,
#Q_tracabilite_p,
#Q_soudure_p {
  margin-inline: auto;
  max-width:     75ch;
}


/* ============================================================
    5. HEADER
   ============================================================ */

/*
  Disposition :
  ┌────────────────────────────────────────────────────────────┐
  │ ░░░░░░░ fond technique scan-lines ░░░░░░░░░░░░░░░░░░░░░░ │  ← ::before
  │  [LOGO]  · · · ·  LEQUIEN  · · · ·  [NAV]  [NAV]  [FR]  │
  │══════════════ liseré dégradé cyan ════════════════════════ │  ← ::after
  └────────────────────────────────────────────────────────────┘
*/

/* ── Structure & fond ───────────────────────────────────────── */
#H_header {
  position:  sticky;
  top:       0;
  z-index:   900;
  display:   flex;
  align-items: center;
  height:    var(--header-h);
  padding:   0 3vh;
  gap:       0;

  background:
    conic-gradient(from 240deg at 85% 15%, var(--accent-glow) 0deg, transparent 65deg),
    conic-gradient(from 60deg  at 15% 85%, var(--steel-glow)  0deg, transparent 60deg),
    conic-gradient(from 130deg at 50% 50%, rgba(9,22,40,.8)   0deg, transparent 180deg),
    var(--bg-surface);

  backdrop-filter:         blur(2.1vh) saturate(1.5);
  -webkit-backdrop-filter: blur(2.1vh) saturate(1.5);

  border-bottom: 0.1vh solid rgba(72, 184, 216, .18);
  box-shadow:
    0 0.1vh 0 rgba(72, 184, 216, .22),
    0 0.6vh 4.21vh rgba(0, 0, 0, .7),
    inset 0 0.1vh 0 rgba(255, 255, 255, .03);
}

/* Scan-lines — effet tableau de bord industriel */
#H_header::before {
  content: '';
  position: absolute;
  inset:    0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent              0.3vh,
    rgba(72,184,216,.012) 0.3vh,
    rgba(72,184,216,.012) 0.4vh
  );
  pointer-events: none;
  z-index:        0;
}

/* Liseré bas en dégradé */
#H_header::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  height:     0.2vh;
  background: linear-gradient(
    90deg,
    transparent            0%,
    rgba(72,184,216,0)   5%,
    var(--accent)         30%,
    var(--accent-lt)      50%,
    var(--accent)         70%,
    rgba(72,184,216,0)   95%,
    transparent           100%
  );
  pointer-events: none;
}

/* ── Logo ────────────────────────────────────────────────────── */
#H_logo_div {
  margin-right:    0.13vw;
  padding-right:   0.13vw;
  display:         flex;
  justify-content: space-around;
  position:        relative;
  z-index:         1;
}

/* Trait vertical à droite du logo */
#H_logo_div::before {
  content:    '';
  position:   absolute;
  right:      0;
  top:        20%;
  height:     60%;
  width:      1px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity:    .45;
}

/* Ligne HUD en haut à gauche */
#H_logo_div::after {
  content:    '';
  position:   absolute;
  left:       -3.3vh;
  top:        0;
  width:      2.1vw;
  height:     0.3vh;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 0 0.1vw 0.2vh 0;
}

#H_logo_img {
  height:     7vh;
  width:      auto;
  filter:     brightness(1.05);
  transition: transform 320ms cubic-bezier(.34,1.56,.64,1), filter var(--transition);
  will-change: transform;
  position:   relative;
  z-index:    1;
}

#H_logo_div:hover #H_logo_img {
  transform: scale(1.09);
  filter:    drop-shadow(0 0 1vh rgba(72,184,216,.5));
}

/* ── Conteneur nav — occupe l'espace restant entre logo et langue ── */
.nav-wrapper {
  flex:        1;
  display:     flex;
  align-items: center;
}

/* Chaque menu prend une largeur identique */
.nav-wrapper .dropdown { flex: 1; }

/* Bouton pleine largeur et texte centré */
.nav-wrapper .dropbtn {
  width:           100%;
  justify-content: center;
  font-size:       2.5vh;
  font-weight:     500;
}

/* ── Dropdown item ───────────────────────────────────────────── */
.dropdown {
  position:    relative;
  height:      var(--header-h);
  display:     flex;
  align-items: center;
  z-index:     1;
}

/* ── Bouton déclencheur ──────────────────────────────────────── */
.dropbtn {
  display:        inline-flex;
  align-items:    center;
  height:         100%;
  padding:        0 3vw;
  font-family:    'Barlow Condensed', sans-serif;
  font-size:      2.19vh;
  font-weight:    600;
  letter-spacing: .01vw;
  text-transform: uppercase;
  color:          #cee4eb;
  white-space:    nowrap;
  background:     transparent;
  border:         none;
  cursor:         pointer;
  position:       relative;
  z-index:        1;
  transition:     color var(--transition);
}

/* Fond arrondi au hover */
.dropbtn::before {
  content:    '';
  position:   absolute;
  inset:      1.4vh 0.3vw;
  background: rgba(72, 184, 216, .07);
  border:     0.1vh solid rgba(72, 184, 216, .12);
  border-radius: 0.4vh;
  opacity:    0;
  transform:  scaleX(.75) scaleY(.9);
  transition: opacity 200ms ease, transform 200ms ease;
}

/* Trait dégradé en bas */
.dropbtn::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       50%;
  width:      0;
  height:     0.2vh;
  background: linear-gradient(90deg, transparent, var(--accent), var(--steel), transparent);
  transform:  translateX(-50%);
  border-radius: 0.1vh;
  transition: width 260ms cubic-bezier(.4, 0, .2, 1);
}

.dropdown:hover .dropbtn             { color: #f0b66a; }
.dropdown:hover .dropbtn::after      { width: 80%; }
.dropdown:hover .dropbtn::before     { opacity: 1; transform: scaleX(1) scaleY(1); }

/* ── Panel dropdown ──────────────────────────────────────────── */
.dropdown-content {
  position:        absolute;
  top:             calc(100% + 0.2vh);
  left:            0;
  min-width:       12.12vw;
  background:      linear-gradient(160deg, var(--bg-card) 0%, var(--bg-surface) 100%);
  border:          1px solid var(--border);
  border-top:      2px solid var(--accent);
  border-radius:   0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:
    0 1.05vw 5.5vh rgba(0, 0, 0, .7),
    inset 0 0 0 0.1vh rgba(72, 184, 216, .06);
  opacity:         0;
  visibility:      hidden;
  transform:       translateY(-0.8vh) scaleY(.95);
  transform-origin: top center;
  pointer-events:  none;
  transition:
    opacity    200ms ease,
    transform  200ms cubic-bezier(.4, 0, .2, 1),
    visibility 200ms ease;
  overflow: hidden;
}

.dropdown:hover .dropdown-content {
  opacity:       1;
  visibility:    visible;
  transform:     translateY(0) scaleY(1);
  pointer-events: auto;
}

/* Trait horizontal en haut du panel */
.dropdown-content::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     0.1vh;
  background: linear-gradient(90deg, var(--accent), var(--steel), transparent);
  opacity:    .4;
}

/* Liens dans le panel */
.dropdown-content a {
  display:     flex;
  align-items: center;
  gap:         1vh;
  padding:     1.1vh 1.06vw;
  padding-left: 0.5vw;
  font-size:   2.2vh;
  font-weight: 500;
  color:       #cee4eb;
  border-bottom: 1px solid var(--border-lt);
  position:    relative;
  transition:
    color        var(--transition),
    background   var(--transition),
    padding-left var(--transition);
  will-change: padding-left;
}

/* Trait latéral au hover */
.dropdown-content a::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        20%;
  height:     60%;
  width:      0.1vw;
  background: var(--accent);
  border-radius: 0.1vh;
  transform:  scaleY(0);
  transition: transform var(--transition);
}

.dropdown-content a:last-child      { border-bottom: none; }
.dropdown-content a:hover           { color: #f0b66a; background: rgba(72,184,216,.07); padding-left: 1.47vw; }
.dropdown-content a:hover::before   { transform: scaleY(1); }

/* Dernier dropdown (langue) — aligné à droite */
.dropdown:last-child .dropdown-content {
  left:      auto;
  right:     0;
  min-width: 8.43vw;
}

/* ── Drapeaux & langue ───────────────────────────────────────── */
.arrow-up { display: none; }

.flag-svg {
  width:         1.59vw;
  height:        auto;
  border-radius: 0.2vh;
  flex-shrink:   0;
}

.Form_Langue {
  display:     flex !important;
  align-items: center;
  gap:         .06vh;
}

.Form_Langue p { margin: 0; }


/* ============================================================
    6. MOSAÏQUE ACCUEIL
   ============================================================ */

#A_mosaique_div {
  position: relative;
  width:    100%;
  overflow: hidden;
  height:   calc(100vh - var(--header-h));
}

#A_mosaique_image_div {
  display:               grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  grid-template-rows:    repeat(var(--rows, 2), minmax(0, 1fr));
  width:                 100%;
  height:                100%;
}

.mosaique_acceuil {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Overlay texte centré */
#A_mosaique_texte_div {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         2rem;
  pointer-events:  none;
  z-index:         5;
}

#A_mosaique_texte_h1 {
  font-size:      clamp(2.4rem, 6.5vw, 5rem);
  font-weight:    700;
  letter-spacing: .14em;
  color:          #fff;
  text-shadow:    0 2px 28px rgba(0, 0, 0, .85);
}

#A_mosaique_texte_p {
  margin-top:     .85rem;
  font-family:    'Barlow Condensed', sans-serif;
  font-size:      clamp(1.2rem, 3.3vw, 2.5rem);
  letter-spacing: .25em;
  text-transform: uppercase;
  color:          white;
  text-shadow:    0 1px 12px rgba(0, 0, 0, .7);
  -webkit-text-stroke: 0.9px #000000;
}


/* ============================================================
    7. MARQUEURS DE TITRE — communs à toutes les pages
   ============================================================ */

/* Trait cyan — titres sur fond sombre */
#S_savoir_faire h2::after,
#R_realisation h2::after {
  content:     '';
  display:     block;
  width:       100%;
  height:      3px;
  background:  linear-gradient(90deg, var(--accent), transparent);
  margin-top:  .45rem;
  border-radius: 2px;
}

/* Trait orange — titres sur fond blanc */
#A_page_accueil h2::after,
#Q_qualite h2::after {
  content:     '';
  display:     block;
  width:       100%;
  height:      3px;
  background:  linear-gradient(90deg, var(--orange), transparent);
  margin-top:  .45rem;
  border-radius: 2px;
}

/* Largeur naturelle + centrage pour tous les H2 principaux */
#A_page_accueil h2,
#S_savoir_faire h2,
#Q_qualite h2,
#R_realisation h2 {
  width:         fit-content;
  margin-inline: auto;
}

/* Disposition générale des grandes sections */
#A_page_accueil,
#S_savoir_faire,
#R_realisation {
  text-align:      center;
  justify-content: space-around;
}


/* ============================================================
    8. PAGE ACCUEIL — sous-sections
   ============================================================ */

/* ── 8a. Présentation ────────────────────────────────────────── */
#A_presentation_div {
  padding:  3.5rem 6vw;
  background:
    linear-gradient(to bottom, var(--bg-white) 0%, transparent 12%, transparent 88%, var(--bg-white) 100%),
    radial-gradient(ellipse 55% 40% at 100% 0%,  rgba(245,166,35,.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 0%  100%, rgba(245,166,35,.07) 0%, transparent 65%),
    radial-gradient(ellipse 70% 60% at 50%  55%, rgba(245,166,35,.04) 0%, transparent 80%),
    conic-gradient(from 210deg at 95% 10%, rgba(245,166,35,.08) 0deg, transparent 75deg),
    conic-gradient(from 30deg  at  5% 90%, rgba(42,104,152,.06) 0deg, transparent 65deg),
    var(--bg-white);
  position: relative;
  overflow: hidden;
}

#A_presentation_div h2 { color: var(--text-dark); }

#A_presentation_div::before { content: none; }

/* Hexagone décoratif en coin */
#A_presentation_div::after {
  content:        '';
  position:       absolute;
  right:          -80px;
  top:            -80px;
  width:          280px;
  height:         280px;
  background:     rgba(245, 166, 35, .06);
  clip-path:      polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  pointer-events: none;
}

#A_presentation_p {
  font-size:   1.2rem;
  color:       var(--text-dark-muted);
  line-height: 1.8;
  margin-top:  1rem;
  position:    relative;
  z-index:     1;
}

#A_presentation_p strong { color: #171c5fc2; }

/* ── 8b. Secteurs d'activité ─────────────────────────────────── */
#A_secteur_activite_div {
  padding:  3.5rem 6vw;
  background:
    conic-gradient(from 240deg at 85% 15%, var(--accent-glow) 0deg, transparent 65deg),
    conic-gradient(from 60deg  at 15% 85%, var(--steel-glow)  0deg, transparent 60deg),
    conic-gradient(from 130deg at 50% 50%, rgba(9,22,40,.8)   0deg, transparent 180deg),
    var(--bg-surface);
  position: relative;
  overflow: hidden;
}

/* Losange — droite centre */
#A_secteur_activite_div::before {
  content:    '';
  position:   absolute;
  right:      -80px;
  top:        50%;
  transform:  translateY(-50%) rotate(45deg);
  width:      280px;
  height:     280px;
  background: rgba(255, 255, 255, .06);
  border:     1px solid rgba(255, 255, 255, .16);
  pointer-events: none;
}

/* Triangle — coin bas-gauche */
#A_secteur_activite_div::after {
  content:      '';
  position:     absolute;
  bottom:       0;
  left:         0;
  width:        0;
  height:       0;
  border-style: solid;
  border-width: 0 0 220px 220px;
  border-color: transparent transparent rgba(255, 255, 255, .08) transparent;
  pointer-events: none;
}

#A_secteur_activite_div h2 {
  color:       #ffffff;
  text-shadow: 0 2px 16px rgba(0, 40, 120, .30);
  position:    relative;
  z-index:     1;
}

#A_secteur_activite_div h2::before {
  content:    '';
  position:   absolute;
  right:      12%;
  top:        2rem;
  width:      70px;
  height:     70px;
  border:     1px solid rgba(255, 255, 255, .15);
  transform:  rotate(20deg);
  pointer-events: none;
}

#A_secteur_activite_div h2::after { content: none; }

#A_secteur_activite_h2::before {
  content:      '';
  position:     absolute;
  top:          -40px;
  right:        5%;
  width:        0;
  height:       0;
  border-style: solid;
  border-width: 80px 80px 0 0;
  border-color: rgba(255, 255, 255, .07) transparent transparent transparent;
  pointer-events: none;
}

/* Grille des secteurs */
.sector-grid {
  display:    flex;
  flex-wrap:  wrap;
  gap:        1rem;
  margin-top: 2.5rem;
  position:   relative;
  z-index:    1;
}

/* Hexagone — haut centre-gauche de la grille */
.sector-grid::before {
  content:    '';
  position:   absolute;
  top:        -65px;
  left:       20%;
  width:      120px;
  height:     120px;
  background: rgba(255, 255, 255, .06);
  border:     1px solid rgba(255, 255, 255, .16);
  clip-path:  polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  pointer-events: none;
}

/* Cercle — bas-droite de la grille */
.sector-grid::after {
  content:   '';
  position:  absolute;
  bottom:    -55px;
  right:     7%;
  width:     120px;
  height:    120px;
  border:    2px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  pointer-events: none;
}

/* Cartes secteur */
.secteur_svg {
  flex:           1;
  min-width:      140px;
  display:        flex !important;
  flex-direction: column;
  align-items:    center;
  gap:            .8rem;
  padding:        1.8rem 1rem;
  margin:         0;
  background: linear-gradient(145deg,
    rgba(255, 255, 255, .16) 0%,
    rgba(40,  100, 200, .40) 55%,
    rgba(20,  70,  170, .30) 100%
  );
  border:        1px solid rgba(255, 255, 255, .22);
  border-top:    3px solid #f5a623;
  border-radius: var(--radius);
  text-align:    center;
  cursor:        default;
  transition:
    transform    var(--transition),
    box-shadow   var(--transition),
    background   var(--transition),
    border-color var(--transition);
  will-change: transform;
}

.secteur_svg:hover {
  transform: translateY(-8px) scale(1.04);
  background: linear-gradient(145deg,
    rgba(255, 255, 255, .26) 0%,
    rgba(40,  100, 200, .58) 55%,
    rgba(20,  70,  170, .48) 100%
  );
  border-color:     rgba(255, 255, 255, .38);
  border-top-color: #ffd166;
  box-shadow:
    0 18px 48px rgba(0, 50, 140, .35),
    0  0   0 1px rgba(255, 255, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* Icônes (stroke) */
.mon-icone-a {
  width:   38px;
  height:  38px;
  stroke:  #f5a623;
  fill:    none;
  filter:  drop-shadow(0 0 5px rgba(245,166,35,.50));
  transition:
    transform 250ms cubic-bezier(.34,1.56,.64,1),
    stroke    var(--transition),
    filter    var(--transition);
  will-change: transform;
}

/* Icônes (fill) */
.secteur_svg svg[fill="currentColor"] {
  fill:   #f5a623;
  stroke: none;
  filter: drop-shadow(0 0 5px rgba(245,166,35,.50));
}

.secteur_svg:hover .mon-icone-a {
  stroke:    #ffd166;
  transform: scale(1.25) rotate(10deg);
  filter:    drop-shadow(0 0 12px rgba(245,166,35,.85));
}

.secteur_svg:hover svg[fill="currentColor"] {
  fill:   #ffd166;
  filter: drop-shadow(0 0 12px rgba(245,166,35,.85));
}

/* Texte des cartes */
.secteur_svg p {
  word-break:     break-word;
  font-size:      100%;
  font-weight:    600;
  color:          #ffffff;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height:    1.35;
  transition:     color var(--transition), text-shadow var(--transition);
}

.secteur_svg:hover p {
  color:       #fff8ec;
  text-shadow: 0 0 12px rgba(245, 166, 35, .60);
}

/* ── 8c. Certifications accueil ──────────────────────────────── */
#A_certification_div {
  padding:  3.5rem 6vw;
  background:
    radial-gradient(ellipse 50% 45% at 100% 100%, rgba(245,166,35,.09) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 0%   0%,   rgba(245,166,35,.06) 0%, transparent 60%),
    conic-gradient(from 250deg at 85% 15%, rgba(245,166,35,.07) 0deg, transparent 70deg),
    var(--bg-white);
  position: relative;
  overflow: hidden;
}

#A_certification_div h2 { color: var(--text-dark); }

#A_certification_div::before { content: none; }

#A_certification_div::after {
  content:    '';
  position:   absolute;
  right:      5%;
  top:        20%;
  width:      160px;
  height:     160px;
  background: rgba(245, 166, 35, .06);
  clip-path:  polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  pointer-events: none;
}

/* Grille 3 colonnes */
#A_certification_image_div {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.2rem;
  margin:                2.5rem auto 0;
}

/* Badges de certification */
.lien_certif {
  border-radius:   50px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         1.2rem 2rem;
  margin-left:     20%;
  margin-right:    10%;
  width:           60%;
  background:      var(--bg-card);
  color:           var(--bg-white);
  border:          1px solid rgba(255, 255, 255, .08);
  font-family:     'Barlow Condensed', sans-serif;
  font-size:       1.3rem;
  font-weight:     600;
  letter-spacing:  1px;
  text-decoration: none;
  box-shadow:      0 4px 10px rgba(0, 0, 0, .2);
  transition:      all var(--transition);
}

.lien_certif:hover {
  transform:    translateY(-4px);
  background:   var(--bg-card-alt);
  border-color: #f0b66a;
  color:        #f0b66a;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .3),
    0 0 15px var(--accent-glow);
}

/* ── 8d. Savoir-faire mosaïque ───────────────────────────────── */
#A_savoir_faire_div {
  padding: 1rem;
  background:
    conic-gradient(from 40deg  at 10% 80%, var(--steel-glow)  0deg, transparent 75deg),
    conic-gradient(from 190deg at 90% 20%, var(--accent-glow) 0deg, transparent 70deg),
    var(--bg-card);
  display:               grid;
  grid-template-columns: repeat(5, 19.2%);
  grid-template-rows:    auto repeat(2, 1fr);
  gap:                   1%;
  align-items:           start;
  position:              relative;
  overflow:              hidden;
}

/* Pentagone décoratif */
#A_savoir_faire_div::before {
  content:    '';
  position:   absolute;
  left:       40%;
  bottom:     -80px;
  width:      300px;
  height:     300px;
  background: var(--steel-glow);
  clip-path:  polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  pointer-events: none;
}

#A_savoir_faire_div h2 {
  grid-column:   1 / -1;
  margin-bottom: .4rem;
  position:      relative;
  z-index:       1;
}

/* Cartes mosaïque */
.Mosaique_skill {
  display:       block;
  margin-bottom: 5.5%;
  border-radius: var(--radius);
  overflow:      hidden;
  border:        1px solid var(--border);
  position:      relative;
  z-index:       1;
  transition:
    transform    var(--transition),
    box-shadow   var(--transition),
    border-color var(--transition);
  will-change:   transform;
}

.Mosaique_skill:hover {
  transform:  translateY(-7px) scale(1.02);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6), 0 0 0 1px rgba(72,184,216,.25);
  border-color: rgba(72, 184, 216, .4);
}

.Mosaique_skill > div {
  position: relative;
  overflow: hidden;
  width:    100%;
  height:   100%;
}

.Mosaique_skill img {
  width:        100%;
  height:       100%;
  aspect-ratio: 4 / 3;
  object-fit:   cover;
  display:      block;
  filter:       brightness(.9) saturate(.8);
  transition:   filter .45s ease, transform .45s ease;
  will-change:  transform;
}

.Mosaique_skill:hover img {
  filter:    brightness(.95) saturate(1.1);
  transform: scale(1.1);
}

/* Label en bas de la carte */
.Mosaique_skill > div > div {
  position:        absolute;
  bottom:          0;
  left:            0;
  right:           0;
  padding:         .8rem 1rem;
  background:      linear-gradient(0deg, rgba(0,0,0,.82) 0%, transparent 100%);
  font-family:     'Barlow Condensed', sans-serif;
  font-size:       1.3rem;
  font-weight:     600;
  letter-spacing:  .09em;
  text-transform:  uppercase;
  color:           #fff;
  z-index:         3;
  transition:      color var(--transition), letter-spacing var(--transition);
}

.Mosaique_skill:hover > div > div {
  color:          var(--accent-lt);
  letter-spacing: .13em;
}

/* Shimmer animé sur chaque carte */
.Mosaique_skill > div::after {
  content:    '';
  position:   absolute;
  top:        0;
  left:       -75%;
  width:      50%;
  height:     100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:  skewX(-20deg);
  transition: left .5s ease;
  pointer-events: none;
  z-index:    2;
}

.Mosaique_skill:hover > div::after { left: 125%; }

/* ── 8e. Valeurs ─────────────────────────────────────────────── */
#A_valeur_div {
  padding:        3.5rem 6vw;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            1.5rem;
  background:
    radial-gradient(ellipse 55% 45% at 0%   100%, rgba(245,166,35,.09) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 100%  0%,  rgba(245,166,35,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 50%  100%, rgba(245,166,35,.04) 0%, transparent 70%),
    conic-gradient(from 330deg at 90% 90%, rgba(245,166,35,.07) 0deg, transparent 80deg),
    conic-gradient(from 120deg at 15% 10%, rgba(42,104,152,.05) 0deg, transparent 70deg),
    var(--bg-white);
  position: relative;
  overflow: hidden;
}

/* Titre */
#A_valeur_h2 {
  color:         var(--blue-dark);
  font-size:     2.5rem;
  margin-bottom: 2rem;
  animation:     sectionEntrance .8s cubic-bezier(.25,1,.5,1) backwards;
}

/* Grille des 4 cartes */
#A_valeur_liste {
  display:               grid;
  grid-template-columns: repeat(4, 20vw);
  gap:                   2rem;
  justify-content:       center;
  width:                 100%;
  align-items:           start;
}

#A_valeur_liste > div {
  cursor:           pointer;
  padding:          1.5rem 1rem;
  border-radius:    12px;
  background-color: transparent;
  border:           1px solid var(--border-light);
  box-shadow:       0 4px 15px rgba(0, 0, 0, .05);
  transition:       background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
  animation:        sectionEntrance .8s cubic-bezier(.25,1,.5,1) backwards;
}

#A_valeur_liste > div:hover { background-color: var(--bg-white-alt); }

/* Titres des cartes */
#A_valeur_liste > div > div:first-child {
  color:          var(--orange-dark);
  font-weight:    800;
  font-size:      1.25rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  position:       relative;
  padding-bottom: .5rem;
  margin-bottom:  0;
  transition:     color .3s ease;
}

/* Ligne décorative sous le titre */
#A_valeur_liste > div > div:first-child::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       50%;
  transform:  translateX(-50%);
  width:      30px;
  height:     2px;
  background: var(--orange-lt);
  transition: width .3s ease, background-color .3s ease;
}

#A_valeur_liste > div:hover > div:first-child             { color: var(--orange); }
#A_valeur_liste > div:hover > div:first-child::after      { width: 60px; background-color: var(--orange); }

/* Descriptions — masquées par défaut, révélées au hover */
#A_valeur_liste > div > div:last-child {
  color:       var(--text-dark);
  font-size:   .95rem;
  line-height: 1.6;
  max-height:  0;
  overflow:    hidden;
  opacity:     0;
  transform:   translateY(-10px);
  transition:  max-height .4s ease, opacity .3s ease, transform .4s ease, margin-top .4s ease;
}

#A_valeur_liste > div:hover > div:last-child {
  max-height: 100vh;
  opacity:    1;
  transform:  translateY(0);
  margin-top: 1rem;
}

/* Animations d'apparition en cascade */
#A_valeur_liste > div:nth-child(1) { animation-delay: .2s; }
#A_valeur_liste > div:nth-child(2) { animation-delay: .4s; }
#A_valeur_liste > div:nth-child(3) { animation-delay: .6s; }
#A_valeur_liste > div:nth-child(4) { animation-delay: .8s; }

/* Bouton RSE */
.bouton-download {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              .65rem;
  padding:          .75rem 1.6rem;
  background:       linear-gradient(135deg, var(--orange-dark) 0%, var(--orange) 50%, var(--orange-lt) 100%);
  background-size:  200% auto;
  border:           1px solid rgba(212, 136, 26, .4);
  border-radius:    50px;
  text-decoration:  none;
  cursor:           pointer;
  position:         relative;
  overflow:         hidden;
  z-index:          1;
  box-shadow:
    0 4px 12px rgba(214,136,26,.15),
    inset 0 1px 0 rgba(255,255,255,.2);
  transition:
    transform            var(--transition),
    box-shadow           var(--transition),
    background-position  var(--transition),
    border-color         var(--transition);
  will-change:      transform;
  width:            fit-content;
  animation:        sectionEntrance .8s cubic-bezier(.25,1,.5,1) backwards;
  animation-delay:  1s;
}

#A_btn_rse {
  grid-column:  1 / -1;
  justify-self: center;
  margin:       0;
}

#F_icon_3 {
  color:       #ffffff;
  font-size:   1.2rem;
  display:     inline-block;
  flex-shrink: 0;
  transition:  transform .3s ease;
}

#F_icon_4 { fill: white; }

#A_valeur_a_p {
  color:          #ffffff;
  font-family:    'Barlow Condensed', sans-serif;
  font-size:      1.15rem;
  font-weight:    600;
  letter-spacing: .1em;
  text-transform: uppercase;
  display:        inline-block;
  line-height:    1;
}

/* Shimmer au hover */
.bouton-download::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       -75%;
  width:      50%;
  height:     100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform:  skewX(-20deg);
  transition: left 500ms ease;
  pointer-events: none;
}

.bouton-download:hover {
  transform:           translateY(-3px);
  background-position: right center;
  border-color:        var(--orange-lt);
  box-shadow:
    0 8px 20px rgba(214,136,26,.35),
    inset 0 1px 0 rgba(255,255,255,.3);
}

.bouton-download:hover::before      { left: 130%; }
.bouton-download:hover #F_icon_3    { transform: translateY(2px); }

/* Keyframe partagé : fade-in + slide-up */
@keyframes sectionEntrance {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0);    }
}


/* ============================================================
    9. PAGE SAVOIR-FAIRE — rangées gauche / droite
    Stratégie perf :
    - Backgrounds statiques (pas de transition sur gradient)
    - will-change activé uniquement au hover
    - Animations limitées à transform + opacity (GPU)
    - contain: layout style paint sur chaque rangée
   ============================================================ */

/* ── 9a. Fond général ────────────────────────────────────────── */
#S_savoir_faire {
  background: var(--bg-deep);
  position:   relative;
}

/* Grille technique décorative — pseudo-élément statique */
#S_savoir_faire::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background-image:
    linear-gradient(rgba(72,184,216,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72,184,216,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index:    0;
  will-change: auto;
}

/* ── 9b. Rangées ─────────────────────────────────────────────── */
.gauche,
.droite {
  display:       flex;
  align-items:   stretch;
  border-bottom: 1px solid var(--border);
  position:      relative;
  overflow:      hidden;
  z-index:       1;
  contain:       layout style paint;
}

/* Formes décoratives */
.gauche::before {
  content:    '';
  position:   absolute;
  left:       52%;
  bottom:     -35px;
  width:      130px;
  height:     130px;
  background: rgba(100, 200, 240, .07);
  clip-path:  polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  pointer-events: none;
  z-index:    0;
}

.gauche::after {
  content:    '';
  position:   absolute;
  right:      -50px;
  top:        -50px;
  width:      240px;
  height:     240px;
  background: rgba(100, 200, 240, .08);
  clip-path:  polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  pointer-events: none;
  z-index:    0;
}

.droite::before {
  content:    '';
  position:   absolute;
  right:      52%;
  top:        -35px;
  width:      110px;
  height:     110px;
  background: rgba(245, 166, 35, .05);
  clip-path:  polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  pointer-events: none;
  z-index:    0;
}

.droite::after {
  content:    '';
  position:   absolute;
  left:       -60px;
  bottom:     -60px;
  width:      260px;
  height:     260px;
  background: rgba(245, 166, 35, .06);
  clip-path:  polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  pointer-events: none;
  z-index:    0;
}

/* Alternance gauche / droite */
.gauche .S_img_1,
.gauche .S_img_2   { order: 0; }
.gauche .Savoir-Faire { order: 1; }

.droite .S_img_1,
.droite .S_img_2   { order: 1; }
.droite .Savoir-Faire { order: 0; }

/* Fonds des rangées */
.gauche {
  background:
    conic-gradient(from 135deg at 10% 10%, rgba(136,192,232,.28) 0deg, transparent 45deg),
    conic-gradient(from 315deg at 90% 10%, rgba(90,155,204,.24)  0deg, transparent 42deg),
    conic-gradient(from 45deg  at  0% 50%, rgba(136,192,232,.20) 0deg, transparent 38deg),
    conic-gradient(from 225deg at 100% 50%,rgba(64,196,240,.22)  0deg, transparent 40deg),
    conic-gradient(from 15deg  at 25% 90%, rgba(90,155,204,.18)  0deg, transparent 35deg),
    conic-gradient(from 165deg at 75% 90%, rgba(136,192,232,.20) 0deg, transparent 38deg),
    radial-gradient(ellipse 70% 60% at 85% 15%, rgba(136,192,232,.14) 0%, transparent 100%),
    radial-gradient(ellipse 65% 55% at 15% 15%, rgba(90,155,204,.12)  0%, transparent 100%),
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(64,196,240,.10)  0%, transparent 100%),
    radial-gradient(ellipse 55% 45% at 85% 85%, rgba(136,192,232,.11) 0%, transparent 100%),
    linear-gradient(135deg, #1a4a7f 0%, #2a5f8f 50%, #1e5080 100%);
}

.droite {
  background:
    conic-gradient(from 125deg at  2% 10%, rgba(168,200,232,.15) 0deg, transparent 38deg),
    conic-gradient(from 305deg at  3% 88%, rgba(120,208,238,.12) 0deg, transparent 34deg),
    conic-gradient(from  88deg at  0% 32%, rgba(196,216,238,.11) 0deg, transparent 28deg),
    conic-gradient(from  92deg at  0% 64%, rgba(24,120,160,.09)  0deg, transparent 26deg),
    conic-gradient(from  55deg at  8% 98%, rgba(42,104,152,.10)  0deg, transparent 32deg),
    conic-gradient(from 160deg at  1% 50%, rgba(72,184,216,.08)  0deg, transparent 30deg),
    conic-gradient(from 140deg at 18%  2%, rgba(120,208,238,.09) 0deg, transparent 36deg),
    conic-gradient(from 290deg at 98% 20%, rgba(168,200,232,.07) 0deg, transparent 30deg),
    radial-gradient(ellipse 75% 90% at  4% 50%, rgba(168,200,232,.06) 0%, transparent 100%),
    radial-gradient(ellipse 55% 40% at 40%  0%, rgba(196,216,238,.07) 0%, transparent 100%),
    var(--bg-white);
}

/* ── 9c. Bloc image ──────────────────────────────────────────── */
.S_img_1,
.S_img_2 {
  width:       45%;
  flex-shrink: 0;
  align-self:  stretch;
  overflow:    hidden;
  position:    relative;
  z-index:     1;
  contain:     layout style paint;
}

.S_img_1 .clickable,
.S_img_2 .clickable {
  width:    100%;
  height:   100%;
  display:  block;
  position: absolute;
  inset:    0;
}

.S_img_1 img,
.S_img_2 img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  display:         block;
  object-fit:      cover;
  object-position: center;
  filter:          brightness(.72) saturate(.82);
  transition:      filter .5s ease, transform .5s ease;
}

/* Hover image */
.gauche:hover .S_img_1 img,
.gauche:hover .S_img_2 img,
.droite:hover .S_img_1 img,
.droite:hover .S_img_2 img {
  filter:     brightness(.92) saturate(1.05);
  transform:  scale(1.03);
  will-change: transform, filter;
}

/* Shimmer — translateX au lieu de left (GPU) */
.S_img_1::before,
.S_img_2::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  width:      50%;
  height:     100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform:  skewX(-20deg) translateX(-200%);
  transition: transform .5s ease;
  pointer-events: none;
  z-index:    2;
}

.gauche:hover .S_img_1::before,
.gauche:hover .S_img_2::before,
.droite:hover .S_img_1::before,
.droite:hover .S_img_2::before {
  transform: skewX(-20deg) translateX(450%);
}

/* Permutation d'images (géré par la classe .svg-actif via JS) */
.S_img_2                        { display: none; }
.gauche.svg-actif .S_img_1,
.droite.svg-actif .S_img_1      { display: none; }
.gauche.svg-actif .S_img_2,
.droite.svg-actif .S_img_2      { display: block; }

/* ── 9d. Bloc texte ──────────────────────────────────────────── */
.Savoir-Faire {
  flex:                  1;
  display:               grid;
  grid-template-columns: 1fr;
  grid-template-rows:    auto auto auto;
  padding:               1.5rem 0rem;
  row-gap:               1.5rem;
  position:              relative;
  z-index:               1;
}

/* Titre H2 */
.Savoir-Faire h2 {
  grid-row:       1;
  grid-column:    1;
  margin:         0;
  font-size:      clamp(1.25rem, 2.2vw, 1.75rem);
  letter-spacing: .03em;
  line-height:    1.25;
  text-align:     center;
  transition:     color var(--transition), letter-spacing var(--transition);
}

.gauche  .Savoir-Faire h2 { color: rgba(220,240,255,.60); text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.droite  .Savoir-Faire h2 { color: rgba(26,58,84,.50);    text-shadow: none; }

.gauche:hover .Savoir-Faire h2 { color: #ffffff;               letter-spacing: .07em; }
.droite:hover .Savoir-Faire h2 { color: var(--text-dark-muted); letter-spacing: .07em; }

/* Paragraphes */
.S_texte_1 {
  grid-row:    2;
  grid-column: 1;
  align-self:  start;
  margin:      0;
}

.gauche .S_texte_1 p,
.gauche .Savoir-Faire p {
  color:       rgba(180,210,240,.55);
  font-size:   clamp(1rem, 1.4vw, 1.35rem);
  line-height: 1.85;
  text-align:  center;
  margin:      0 auto;
  text-shadow: 0 1px 8px rgba(0,0,0,.50);
  transition:  color var(--transition);
}

.droite .S_texte_1 p,
.droite .Savoir-Faire p {
  color:       rgba(44,74,98,.45);
  font-size:   clamp(1rem, 1.4vw, 1.35rem);
  line-height: 1.85;
  text-align:  center;
  margin:      0 auto;
  transition:  color var(--transition);
}

.gauche:hover .Savoir-Faire p { color: #f5f4faf3; }
.gauche:hover .Savoir-Faire strong {
  color: white;
  text-shadow:
    -0.7px -0.7px 0 #000000,
     0.7px -0.7px 0 #000000,
    -0.7px  0.7px 0 #000000,
     0.7px  0.7px 0 #000000;
}

.droite:hover .Savoir-Faire p      { color: var(--text-dark-muted); }
.droite:hover .Savoir-Faire strong { color: #171c5fc2; }

/* ── 9e. Icône de permutation ────────────────────────────────── */
.mon-icone {
  grid-column:     1;
  grid-row:        3;
  width:           56px;
  height:          56px;
  align-self:      end;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  color:           rgba(120,190,230,.45);
  transition:      color .3s ease, scale .2s cubic-bezier(.175,.885,.32,1.275);
  will-change:     transform;
}

/* Flèche CSS */
.mon-icone::after {
  content:       '';
  display:       block;
  width:         16px;
  height:        16px;
  border-top:    3.5px solid currentColor;
  border-right:  3.5px solid currentColor;
  border-radius: 2px;
  rotate:        45deg;
  transition:    rotate .3s cubic-bezier(.4,0,.2,1), color .3s ease;
}

.gauche .mon-icone { justify-self: end; }

.droite .mon-icone {
  justify-self: start;
  color:        rgba(58,111,160,.45);
}

.droite .mon-icone::after { rotate: -135deg; }

/* États svg-actif (JS toggle) */
.gauche.svg-actif .mon-icone::after { rotate: 135deg;  }
.droite.svg-actif .mon-icone::after { rotate: -225deg; }

/* Hover & clic */
.mon-icone:hover  { color: var(--accent); scale: 1.15; }
.mon-icone:active { scale: .92; transition: scale .05s ease; }


/* ============================================================
    10. PAGE RÉALISATIONS — galerie défilante
   ============================================================ */

/* ── Keyframes GPU ───────────────────────────────────────────── */
@keyframes R_fadeIn {
  from { opacity: 0; transform: translate3d(0,  24px, 0) scale(.97); }
  to   { opacity: 1; transform: translate3d(0,   0,  0) scale(1);   }
}

@keyframes R_scroll_left {
  from { transform: translate3d(0,    0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes R_scroll_right {
  from { transform: translate3d(0,    0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ── Section ─────────────────────────────────────────────────── */
#R_realisation {
  position: relative;
  padding:  80px 40px;
  overflow: hidden;
  background:
    conic-gradient(from 125deg at  2% 15%, rgba(168,200,232,.16) 0deg, transparent 42deg),
    conic-gradient(from 305deg at  5% 88%, rgba(120,208,238,.13) 0deg, transparent 36deg),
    conic-gradient(from  85deg at  0% 42%, rgba(196,216,238,.11) 0deg, transparent 32deg),
    conic-gradient(from  95deg at  0% 58%, rgba(24,120,160,.09)  0deg, transparent 28deg),
    conic-gradient(from 305deg at 98% 18%, rgba(100,180,230,.12) 0deg, transparent 40deg),
    conic-gradient(from 260deg at 100% 45%,rgba(72,184,216,.10)  0deg, transparent 34deg),
    conic-gradient(from 270deg at 100% 62%,rgba(148,210,240,.08) 0deg, transparent 28deg),
    conic-gradient(from 130deg at 95% 85%, rgba(24,140,180,.11)  0deg, transparent 38deg),
    conic-gradient(from 200deg at 35%  0%, rgba(180,215,240,.08) 0deg, transparent 30deg),
    conic-gradient(from 160deg at 65%  0%, rgba(100,190,225,.07) 0deg, transparent 26deg),
    conic-gradient(from  20deg at 30% 100%,rgba(72,160,210,.09)  0deg, transparent 32deg),
    conic-gradient(from 345deg at 70% 100%,rgba(140,205,235,.08) 0deg, transparent 28deg),
    conic-gradient(from 110deg at  8% 35%, rgba(0,200,220,.06)   0deg, transparent 22deg),
    conic-gradient(from 290deg at 92% 65%, rgba(60,100,200,.07)  0deg, transparent 20deg),
    conic-gradient(from  70deg at 50%  8%, rgba(80,170,230,.05)  0deg, transparent 18deg),
    radial-gradient(ellipse 80% 70% at  6% 50%, rgba(168,200,232,.06) 0%, transparent 100%),
    radial-gradient(ellipse 60% 55% at 94% 50%, rgba(100,180,230,.05) 0%, transparent 100%),
    radial-gradient(ellipse 70% 40% at 50%  0%, rgba(150,210,240,.04) 0%, transparent 100%),
    radial-gradient(ellipse 50% 40% at 50% 100%,rgba(72,160,210,.04)  0%, transparent 100%),
    var(--bg-white);
}

/* ── Piste — isole le layout ─────────────────────────────────── */
.R_track {
  position: relative;
  overflow: hidden;
  padding:  .55rem 0;
  contain:  layout style;
}

.R_track:hover .R_ligne { animation-play-state: paused; }

/* ── Ligne défilante ─────────────────────────────────────────── */
.R_ligne {
  display:             flex;
  gap:                 1.25rem;
  width:               max-content;
  will-change:         transform;
  backface-visibility: hidden;
  transform:           translateZ(0);
}

.R_gauche { animation: R_scroll_left  80s linear infinite; }
.R_droite { animation: R_scroll_right 80s linear infinite; }

/* ── Image individuelle ──────────────────────────────────────── */
.img-galerie {
  height:              230px;
  width:               auto;
  flex-shrink:         0;
  display:             block;
  border-radius:       var(--radius-lg);
  border:              2px solid rgba(168,200,232,.28);
  cursor:              zoom-in;
  filter:              brightness(.86) saturate(.76);
  will-change:         transform, filter;
  backface-visibility: hidden;
  box-shadow:
    0 2px  8px rgba(24,120,160,.07),
    0 6px 22px rgba(24,120,160,.05);
  animation: R_fadeIn .55s cubic-bezier(.4,0,.2,1) both;
  transition:
    filter       .38s ease,
    transform    .38s cubic-bezier(.34,1.56,.64,1),
    box-shadow   .38s ease,
    border-color .38s ease,
    outline      .38s ease;
}

.img-galerie:hover {
  filter:       brightness(1.04) saturate(1.12) contrast(1.03);
  transform:    translate3d(0, -4px, 0) scale(1.06);
  border-color: var(--accent);
  box-shadow:
    0  2px  8px rgba(24,120,160,.10),
    0 14px 34px rgba(24,120,160,.18),
    0 28px 60px rgba(24,120,160,.10),
    0  0   0 1px rgba(72,184,216,.32),
    inset 0 0 0 1px rgba(255,255,255,.55);
  outline:        4px solid rgba(72,184,216,.14);
  outline-offset: 4px;
  z-index:        10;
  position:       relative;
}


/* ============================================================
    11. PAGE QUALITÉ
   ============================================================ */

/* ── 11a. Section principale ─────────────────────────────────── */
#Q_qualite {
  background: var(--bg-deep);
  position:   relative;
  overflow:   hidden;
}

/* ── 11b. Hero — image + titre superposé ─────────────────────── */
#Q_qualite > div:first-child {
  position: relative;
  width:    100%;
  z-index:  1;
}

#Q_img_div    { max-height: 91vh; }

#Q_img_front {
  display:    block;
  width:      100%;
  height:     auto;
  object-fit: cover;
  filter:     brightness(.75) saturate(.75);
}

#Q_titre_h1 {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  margin:          0;
  padding:         2rem;
  font-size:       clamp(2rem, 5vw, 3.8rem);
  font-weight:     700;
  letter-spacing:  .12em;
  color:           #fff;
  text-shadow:     0 2px 28px rgba(0, 0, 0, .85);
  background:      linear-gradient(180deg, rgba(9,22,40,.1) 0%, rgba(9,22,40,.55) 100%);
}

/* ── 11c. Philosophie — fond bleu ────────────────────────────── */
#Q_philosophie {
  padding:  5rem 8vw;
  background:
    conic-gradient(from 135deg at 10% 10%, rgba(136,192,232,.28) 0deg, transparent 45deg),
    conic-gradient(from 315deg at 90% 10%, rgba(90,155,204,.24)  0deg, transparent 42deg),
    conic-gradient(from  45deg at  0% 50%, rgba(136,192,232,.20) 0deg, transparent 38deg),
    conic-gradient(from 225deg at 100% 50%,rgba(64,196,240,.22)  0deg, transparent 40deg),
    conic-gradient(from  15deg at 25% 90%, rgba(90,155,204,.18)  0deg, transparent 35deg),
    conic-gradient(from 165deg at 75% 90%, rgba(136,192,232,.20) 0deg, transparent 38deg),
    radial-gradient(ellipse 70% 60% at 85% 15%, rgba(136,192,232,.14) 0%, transparent 100%),
    radial-gradient(ellipse 65% 55% at 15% 15%, rgba(90,155,204,.12)  0%, transparent 100%),
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(64,196,240,.10)  0%, transparent 100%),
    radial-gradient(ellipse 55% 45% at 85% 85%, rgba(136,192,232,.11) 0%, transparent 100%),
    linear-gradient(135deg, #1a4a7f 0%, #2a5f8f 50%, #1e5080 100%);
  position: relative;
  overflow: hidden;
  z-index:  1;
}

#Q_philosophie h2 {
  color:      var(--accent-lt);
  position:   relative;
  z-index:    1;
  transition: color var(--transition), letter-spacing var(--transition);
}

#Q_philosophie:hover h2    { color: var(--accent); letter-spacing: .07em; }

#Q_philosophie_p {
  max-width:   85vw;
  line-height: 1.88;
  font-size:   1.3rem;
  position:    relative;
  z-index:     1;
  margin-top:  1.2rem;
  color:       #f5f4faf3;
}

#Q_philosophie_p strong {
  color: white;
  text-shadow:
    -0.7px -0.7px 0 #000000,
     0.7px -0.7px 0 #000000,
    -0.7px  0.7px 0 #000000,
     0.7px  0.7px 0 #000000;
}

/* ── 11d. Grille certifications qualité (#Q_philosophie_certif) ─ */
#Q_philosophie_certif {
  display:               grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  justify-content:       center;
  justify-items:         center;
  align-items:           start;
  gap:                   25px;
  padding:               20px;
  max-width:             1200px;
  margin:                0 auto;
}

/* Badges / pastilles de certification */
.certif_fr,
.certif_uk {
  display:          none;
  position:         relative;
  width:            100%;
  max-width:        260px;
  padding:          1.5rem 1rem;
  cursor:           pointer;
  background-color: transparent;
  border-radius:    12px;
  border:           1px solid var(--border-light);
  box-shadow:       0 4px 15px rgba(0, 0, 0, .05);
  transition:       background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.certif_data-info {
  color:       var(--text-dark);
  font-size:   .95rem;
  line-height: 1.6;
  max-height:  0;
  overflow:    hidden;
  opacity:     0;
  margin:      0;
  transition:  max-height .35s ease, opacity .25s ease;
}

.certif_fr.show-block,
.certif_uk.show-block { display: block; }

.certif_fr:hover .certif_data-info,
.certif_uk:hover .certif_data-info {
  max-height: 20rem;
  opacity:    1;
}

.certif_fr:hover,
.certif_uk:hover { background-color: var(--bg-white-alt); }

/* Ligne décorative sous le nom de certification */
.pins_nom::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       50%;
  transform:  translateX(-50%);
  width:      30px;
  height:     2px;
  background: var(--orange-lt);
}

/* Nom de la certification */
.pins_nom {
  color:          var(--orange-dark);
  font-weight:    800;
  font-size:      1.25rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  position:       relative;
  padding-bottom: .5rem;
  margin-bottom:  0;
}

/* Panneau d'information de la certification sélectionnée */
#Q_certif_info {
  display:    none;
  position:   relative;
  max-width:  650px;
  margin:     0 auto;
  padding:    30px 40px 30px 30px;
  background: linear-gradient(90deg, #2a75d3 0%, #3d69a7 100%);
  border-radius: 16px;
  border:        1px solid rgba(255,255,255,.1);
  border-left:   5px solid var(--orange);
  box-shadow:    0 20px 40px rgba(0,0,0,.3);
  opacity:       0;
  visibility:    hidden;
  transform:     translateX(50px) scale(.95);
  transition:
    opacity    .4s cubic-bezier(.4,0,.2,1),
    visibility .4s cubic-bezier(.4,0,.2,1),
    transform  .4s cubic-bezier(.4,0,.2,1);
}

#Q_certif_info.animate-in {
  display:    block;
  opacity:    1;
  visibility: visible;
  transform:  translateX(0) scale(1);
}

#Q_certif_info.animate-out {
  opacity:    0;
  visibility: hidden;
  transform:  translateX(50px) scale(.95);
  transition:
    opacity    .3s cubic-bezier(.4,0,1,1),
    visibility .3s cubic-bezier(.4,0,1,1),
    transform  .3s cubic-bezier(.4,0,1,1);
}

#Q_certif_info_p {
  color:          #ffffff;
  font-size:      1.05rem;
  line-height:    1.6;
  margin:         .5rem 0;
  font-weight:    400;
  letter-spacing: .2px;
}

#Q_close_btn {
  position:        absolute;
  top:             12px;
  right:           16px;
  background:      rgba(255,255,255,.05);
  border:          1px solid rgba(255,255,255,.1);
  width:           28px;
  height:          28px;
  border-radius:   50%;
  color:           var(--orange-lt);
  font-size:       1.4rem;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      all .2s ease;
}

#Q_close_btn:hover {
  background:    var(--orange);
  color:         #ffffff;
  border-color:  var(--orange);
  transform:     rotate(180deg);
}

/* ── 11e. Certifications — fond blanc (liste logos) ──────────── */
#Q_certification_div {
  display:   flex;
  flex-wrap: wrap;
  gap:       1.5rem;
  padding:   5rem 8vw;
  background:
    conic-gradient(from 125deg at  2% 10%, rgba(168,200,232,.15) 0deg, transparent 38deg),
    conic-gradient(from 305deg at  3% 88%, rgba(120,208,238,.12) 0deg, transparent 34deg),
    conic-gradient(from  88deg at  0% 32%, rgba(196,216,238,.11) 0deg, transparent 28deg),
    conic-gradient(from  92deg at  0% 64%, rgba(24,120,160,.09)  0deg, transparent 26deg),
    conic-gradient(from  55deg at  8% 98%, rgba(42,104,152,.10)  0deg, transparent 32deg),
    conic-gradient(from 160deg at  1% 50%, rgba(72,184,216,.08)  0deg, transparent 30deg),
    conic-gradient(from 140deg at 18%  2%, rgba(120,208,238,.09) 0deg, transparent 36deg),
    conic-gradient(from 290deg at 98% 20%, rgba(168,200,232,.07) 0deg, transparent 30deg),
    radial-gradient(ellipse 75% 90% at  4% 50%, rgba(168,200,232,.06) 0%, transparent 100%),
    radial-gradient(ellipse 55% 40% at 40%  0%, rgba(196,216,238,.07) 0%, transparent 100%),
    var(--bg-white);
  position: relative;
  overflow: hidden;
  z-index:  1;
}

#Q_certification_div a {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .8rem;
  padding:        1.2rem;
  background:     #fff;
  border:         1px solid var(--border-light);
  border-radius:  var(--radius);
  transition:
    transform    var(--transition),
    border-color var(--transition),
    box-shadow   var(--transition),
    background   var(--transition);
  will-change: transform;
}

/* Grille logos certifications — 4 colonnes */
#Q_certification_a {
  display:               grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  justify-content:       center;
  justify-items:         center;
  align-items:           start;
  gap:                   25px;
  padding:               20px;
  max-width:             1200px;
  margin:                0 auto;
}

#Q_certification_div a:hover {
  transform:    translateY(-6px) scale(1.025);
  border-color: var(--accent-dark);
  box-shadow:   0 14px 36px rgba(24,120,160,.2), 0 0 0 1px rgba(24,120,160,.12);
  background:   var(--bg-white-alt);
}

#Q_certification_div h3 {
  font-size:      1.3rem;
  color:          var(--text-dark-muted);
  text-align:     center;
  letter-spacing: .05em;
  transition:     color var(--transition);
}

#Q_certification_div a:hover h3 { color: var(--accent-dark); }

.box_certif {
  width:      300px;
  height:     auto;
  object-fit: contain;
  transition: filter var(--transition);
}

#Q_certification_div a:hover .box_certif { filter: brightness(1.08); }

/* ── 11f. Conteneurs droiteQ / gaucheQ (sections texte+image) ── */
.droiteQ,
.gaucheQ {
  display:     flex;
  width:       100%;
  height:      auto;
  align-items: stretch;
  overflow:    hidden;
}

.gaucheQ {
  flex-direction: row-reverse;
  background:
    conic-gradient(from 135deg at 10% 10%, rgba(136,192,232,.28) 0deg, transparent 45deg),
    conic-gradient(from 315deg at 90% 10%, rgba(90,155,204,.24)  0deg, transparent 42deg),
    conic-gradient(from  45deg at  0% 50%, rgba(136,192,232,.20) 0deg, transparent 38deg),
    conic-gradient(from 225deg at 100% 50%,rgba(64,196,240,.22)  0deg, transparent 40deg),
    conic-gradient(from  15deg at 25% 90%, rgba(90,155,204,.18)  0deg, transparent 35deg),
    conic-gradient(from 165deg at 75% 90%, rgba(136,192,232,.20) 0deg, transparent 38deg),
    radial-gradient(ellipse 70% 60% at 85% 15%, rgba(136,192,232,.14) 0%, transparent 100%),
    radial-gradient(ellipse 65% 55% at 15% 15%, rgba(90,155,204,.12)  0%, transparent 100%),
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(64,196,240,.10)  0%, transparent 100%),
    radial-gradient(ellipse 55% 45% at 85% 85%, rgba(136,192,232,.11) 0%, transparent 100%),
    linear-gradient(135deg, #1a4a7f 0%, #2a5f8f 50%, #1e5080 100%);
}

.droiteQ {
  flex-direction: row;
  color:          rgba(26,58,84,.50);
  background:
    conic-gradient(from 125deg at  2% 10%, rgba(168,200,232,.15) 0deg, transparent 38deg),
    conic-gradient(from 305deg at  3% 88%, rgba(120,208,238,.12) 0deg, transparent 34deg),
    conic-gradient(from  88deg at  0% 32%, rgba(196,216,238,.11) 0deg, transparent 28deg),
    conic-gradient(from  92deg at  0% 64%, rgba(24,120,160,.09)  0deg, transparent 26deg),
    conic-gradient(from  55deg at  8% 98%, rgba(42,104,152,.10)  0deg, transparent 32deg),
    conic-gradient(from 160deg at  1% 50%, rgba(72,184,216,.08)  0deg, transparent 30deg),
    conic-gradient(from 140deg at 18%  2%, rgba(120,208,238,.09) 0deg, transparent 36deg),
    conic-gradient(from 290deg at 98% 20%, rgba(168,200,232,.07) 0deg, transparent 30deg),
    radial-gradient(ellipse 75% 90% at  4% 50%, rgba(168,200,232,.06) 0%, transparent 100%),
    radial-gradient(ellipse 55% 40% at 40%  0%, rgba(196,216,238,.07) 0%, transparent 100%),
    var(--bg-white);
}

/* Couleurs de texte */
.gaucheQ p  { color: rgba(180,210,240,.55); }
.gaucheQ h2 { color: rgba(180,210,240,.55); }
.droiteQ h2 { color: rgba(26,58,84,.50); }

.gaucheQ:hover strong {
  color: white;
  text-shadow:
    -0.7px -0.7px 0 #000000,
     0.7px -0.7px 0 #000000,
    -0.7px  0.7px 0 #000000,
     0.7px  0.7px 0 #000000;
}

.droiteQ:hover strong { color: #171c5fc2; }

/* Hover */
.gaucheQ:hover p  { color: #f5f4faf3; }
.gaucheQ:hover h2 { color: #f5f4faf3; }
.droiteQ:hover p  { color: var(--text-dark-muted); }
.droiteQ:hover h2 { color: var(--text-dark-muted); }

/* Zone image — 45% de largeur */
.droiteQ .clickable,
.gaucheQ .clickable {
  width:    45%;
  position: relative;
  overflow: hidden;
}

.droiteQ .clickable img,
.gaucheQ .clickable img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Zone texte — 55% restant */
.qualité {
  width:           55%;
  padding:         50px 30px;
  box-sizing:      border-box;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  text-align:      center;
}

.qualité h2 {
  margin-top:     0;
  margin-bottom:  15px;
  text-transform: uppercase;
}

.qualité p {
  margin:      0;
  max-width:   90%;
  line-height: 1.5;
}


/* ============================================================
    12. PAGE CONTACT
   ============================================================ */

#C_contact {
  padding:  5rem 6vw;
  background:
    conic-gradient(from 125deg at  2% 10%, rgba(168,200,232,.15) 0deg, transparent 38deg),
    conic-gradient(from 305deg at  3% 88%, rgba(120,208,238,.12) 0deg, transparent 34deg),
    conic-gradient(from  88deg at  0% 32%, rgba(196,216,238,.11) 0deg, transparent 28deg),
    conic-gradient(from  92deg at  0% 64%, rgba(24,120,160,.09)  0deg, transparent 26deg),
    conic-gradient(from  55deg at  8% 98%, rgba(42,104,152,.10)  0deg, transparent 32deg),
    conic-gradient(from 160deg at  1% 50%, rgba(72,184,216,.08)  0deg, transparent 30deg),
    conic-gradient(from 140deg at 18%  2%, rgba(120,208,238,.09) 0deg, transparent 36deg),
    conic-gradient(from 290deg at 98% 20%, rgba(168,200,232,.07) 0deg, transparent 30deg),
    radial-gradient(ellipse 75% 90% at  4% 50%, rgba(168,200,232,.06) 0%, transparent 100%),
    radial-gradient(ellipse 55% 40% at 40%  0%, rgba(196,216,238,.07) 0%, transparent 100%),
    var(--bg-white);
  position: relative;
  overflow: hidden;
}

/* Motif grille */
#C_contact::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background-image:
    linear-gradient(rgba(72,184,216,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72,184,216,.02) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* Hexagone décoratif en haut */
#C_contact::before {
  content:    '';
  position:   absolute;
  left:       30%;
  top:        -40px;
  width:      260px;
  height:     260px;
  background: var(--steel-glow);
  clip-path:  polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  pointer-events: none;
  z-index:    1;
}

/* En-tête de la section */
#C_contact_general {
  text-align:    center;
  margin-bottom: 3rem;
  position:      relative;
  z-index:       2;
}

#C_titre {
  font-family:    'Barlow Condensed', sans-serif;
  font-size:      1.8rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--bg-card-alt);
  margin-bottom:  1.5rem;
  display:        block;
}

/* Carte générale (France) */
#C_contact_general img {
  max-width:     100%;
  margin:        0 auto;
  border-radius: var(--radius);
  transition:    filter var(--transition), transform var(--transition), box-shadow var(--transition);
  will-change:   transform;
}

#C_contact_general img:hover {
  filter:     brightness(1.02) saturate(1);
  transform:  scale(1.015);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}

#C_img_map { filter: brightness(1) saturate(1); }

/* Grille des 2 sites */
.container_sites {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   2rem;
  position:              relative;
  z-index:               2;
}

/* Cartes de site */
#C_contact_vacq_div,
#C_contact_riom_div {
  background:
    conic-gradient(from 210deg at 95%  5%, rgba(72,184,216,.15) 0deg, transparent 55deg),
    conic-gradient(from  30deg at 92% 92%, rgba(168,200,232,.10) 0deg, transparent 48deg),
    conic-gradient(from 270deg at 80% 50%, rgba(72,184,216,.08) 0deg, transparent 40deg),
    radial-gradient(ellipse 70% 60% at 90% 50%, rgba(20,45,84,.45) 0%, transparent 100%),
    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  transition:
    border-color var(--transition),
    box-shadow   var(--transition),
    transform    var(--transition);
  will-change: transform;
}

#C_contact_vacq_div:hover,
#C_contact_riom_div:hover {
  border-color: var(--accent);
  box-shadow:   0 14px 40px var(--accent-glow), 0 0 0 1px rgba(72,184,216,.15);
  transform:    translateY(-4px);
}

/* Titres des cartes de site */
.titre_vacq,
.titre_riom {
  padding:        1rem 1.5rem;
  font-family:    'Barlow Condensed', sans-serif;
  font-size:      1.3rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color:          var(--accent-lt);
  border-bottom:  1px solid var(--border);
  position:       relative;
  margin:         0;
}

.titre_vacq::after,
.titre_riom::after {
  content:    '';
  position:   absolute;
  bottom:     -1px;
  left:       1.5rem;
  width:      40%;
  height:     2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* Zone image des cartes de site */
#C_contact_vacq_div .clickable,
#C_contact_riom_div .clickable {
  width:  100%;
  height: 40vh;
}

#C_contact_vacq_div img,
#C_contact_riom_div img {
  width:      100%;
  height:     auto;
  object-fit: cover;
  filter:     brightness(.7) saturate(.65);
  cursor:     zoom-in;
  transition: filter var(--transition), transform var(--transition);
}

#C_contact_vacq_div:hover img,
#C_contact_riom_div:hover img {
  filter:    brightness(.95) saturate(1);
  transform: scale(1.02);
}

/* Zone texte des cartes */
#C_contact_vacq_div_texte,
#C_contact_riom_div_texte {
  padding:               1.5rem;
  display:               grid;
  grid-template-columns: 2rem 1fr;
  align-items:           start;
  gap:                   .8rem .5rem;
}

#C_contact_vacq_div_texte i,
#C_contact_riom_div_texte i {
  color:       var(--accent);
  font-size:   1.3rem;
  padding-top: 4px;
  text-align:  center;
  grid-column: 1;
  margin:      0;
}

#C_contact_vacq_div_texte p,
#C_contact_vacq_div_texte a,
#C_contact_riom_div_texte p,
#C_contact_riom_div_texte a {
  grid-column:     2;
  font-size:       1.3rem;
  color:           var(--text-muted);
  line-height:     1.5;
  margin:          0;
  text-decoration: none;
  white-space:     normal;
  transition:      color var(--transition);
}

/* Hover sur les textes */
#C_contact_riom_div:hover #C_contact_riom_div_p_map,
#C_contact_vacq_div:hover #C_contact_vacq_div_p_map,
#C_contact_riom_div:hover a,
#C_contact_vacq_div:hover a { color: #dbd7d2; }

#C_contact_riom_div:hover #C_contact_riom_div_p_map:hover,
#C_contact_vacq_div:hover #C_contact_vacq_div_p_map:hover,
#C_contact_riom_div:hover a:hover,
#C_contact_vacq_div:hover a:hover { color: #eea647; }

.contact_content {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}


/* ============================================================
    13. FOOTER
   ============================================================ */

/* ── 13a. Structure ──────────────────────────────────────────── */
#F_footer {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(10.29vw, 1fr));
  gap:                   4.21vh;
  padding:               3.37vh 6vw 1.68vh;
  background:            radial-gradient(circle at top center, var(--bg-surface) 0%, var(--blue-dark) 85%);
  border-top:            0.1vh solid rgba(255, 255, 255, .05);
  position:              relative;
  overflow:              hidden;
  color:                 #eaf2ff;
  font-size:             1.5vh;
}

#F_footer i { display: inline-block; }

/* Éléments décoratifs hérités masqués */
#F_footer > .hex-deco-1,
.footer-hex-l,
.footer-geo-center { display: none; }

/* Colonnes avec pseudo-éléments décoratifs */
#F_info_vacq_div,
#F_info_riom_div,
#F_info_livraison_div,
#F_reseau_div,
#F_téléchargement_div { position: relative; z-index: 1; }

#F_info_vacq_div::before {
  content:    '';
  position:   absolute;
  top:        -3.3vh;
  right:      -1.05vw;
  width:      5.27vw;
  height:     11vh;
  background: rgba(72,184,216,.05);
  clip-path:  polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  pointer-events: none;
}

#F_info_riom_div::before {
  content:    '';
  position:   absolute;
  bottom:     -2.2vh;
  left:       -1.05vw;
  width:      4.74vw;
  height:     9.9vh;
  background: rgba(168,200,232,.05);
  clip-path:  polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  pointer-events: none;
}

#F_info_livraison_div::after {
  content:    '';
  position:   absolute;
  bottom:     -1.1vh;
  right:      -0.5vw;
  width:      3.7vw;
  height:     7.7vh;
  background: rgba(72,184,216,.05);
  clip-path:  polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  pointer-events: none;
}

#F_reseau_div::before {
  content:    '';
  position:   absolute;
  top:        -2.2vh;
  left:       50%;
  transform:  translateX(-50%);
  width:      4.21vw;
  height:     8.8vh;
  background: rgba(168,200,232,.04);
  clip-path:  polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  pointer-events: none;
}

#F_téléchargement_div::after {
  content:    '';
  position:   absolute;
  top:        50%;
  right:      -1.5vh;
  transform:  translateY(-50%);
  width:      3.16vw;
  height:     6.6vh;
  background: rgba(72,184,216,.04);
  clip-path:  polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  pointer-events: none;
}

/* ── 13b. Titres footer ──────────────────────────────────────── */
.titre_footer {
  font-family:    'Barlow Condensed', sans-serif;
  font-size:      1.6vh;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .16vh;
  color:          #eaf2ff;
  margin-bottom:  .8vh;
  display:        block;
  position:       relative;
  padding-left:   .71vw;
  text-shadow:
    0 .05vw .3vh rgba(72,184,216,.6),
    0 0 .8vh rgba(72,184,216,.4);
}

/* Trait vertical à gauche du titre */
.titre_footer::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        50%;
  transform:  translateY(-50%);
  width:      .15vw;
  height:     70%;
  background: linear-gradient(180deg, var(--accent), var(--steel));
  border-radius: .2vh;
}

/* Ombres teintées communes */
.titre_footer,
#F_info_vacq_div_texte a,
#F_info_riom_div_texte a,
#F_info_vacq_div_texte p,
#F_info_riom_div_texte p,
#F_info_livraison_p,
#F_reseau_div p {
  text-shadow:
    0 .05vw .2vh rgba(34,47,62,.7),
    .1vh .05vw .1vh rgba(212,136,26,.3);
}

.titre_footer:hover,
#F_info_vacq_div_texte a:hover,
#F_info_riom_div_texte a:hover,
#F_info_vacq_div_texte a:hover p,
#F_info_riom_div_texte a:hover p,
#F_reseau_div > a:hover p {
  text-shadow:
    0 0 .8vh rgba(255,165,0,.4),
    .1vh .05vw .2vh rgba(212,136,26,.6);
}

/* ── 13c. Colonnes infos ─────────────────────────────────────── */
#F_info_vacq_div_texte,
#F_info_riom_div_texte {
  display:               grid;
  grid-template-columns: .84vw 1fr;
  align-items:           start;
  gap:                   1.35vh .5vw;
}

#F_info_vacq_div_texte a,
#F_info_riom_div_texte a {
  display:         block;
  color:           #eaf2ff;
  margin:          0;
  padding:         0;
  line-height:     1.4;
  text-decoration: none;
  transition:      color var(--transition), text-shadow var(--transition);
  text-shadow:
    0 .05vw .2vh rgba(72,184,216,.5),
    0 0 .6vh rgba(72,184,216,.3);
}

#F_info_vacq_div_texte p,
#F_info_riom_div_texte p {
  color:       #eaf2ff !important;
  margin:      0 !important;
  padding:     0;
  line-height: 1.4;
  white-space: pre-line;
  transition:  color var(--transition);
  text-shadow:
    0 .05vw .2vh rgba(72,184,216,.5),
    0 0 .6vh rgba(72,184,216,.3);
}

#F_info_vacq_div_texte svg,
#F_info_riom_div_texte svg {
  width:       .84vw;
  height:      1.6vh;
  align-self:  start;
  margin-top:  .2em;
  flex-shrink: 0;
  color:       #eaf2ff;
  transition:  color var(--transition);
  filter:      drop-shadow(0 .05vw .3vh rgba(72,184,216,.5));
}

#F_info_livraison_p {
  font-size:   1.52vh;
  color:       #eaf2ff;
  line-height: 1.65;
  margin-top:  0;
  text-shadow:
    0 .05vw .2vh rgba(72,184,216,.5),
    0 0 .6vh rgba(72,184,216,.3);
}

#F_info_vacq_div_texte a:hover,
#F_info_riom_div_texte a:hover,
#F_info_vacq_div_texte a:hover p,
#F_info_riom_div_texte a:hover p {
  color:       var(--orange) !important;
  text-shadow: 0 0 .8vh rgba(255,165,0,.4);
}

/* ── 13d. Réseaux sociaux ────────────────────────────────────── */
#F_reseau_div {
  display:        flex;
  flex-direction: column;
  gap:            1.12vh;
}

#F_reseau_div > a {
  display:         flex;
  align-items:     center;
  gap:             1.12vh;
  padding:         1vh .75vw;
  border:          .2vh solid var(--border);
  border-radius:   var(--radius);
  color:           #eaf2ff;
  text-decoration: none;
  position:        relative;
  overflow:        hidden;
  background:      rgba(72,184,216,.03);
  backdrop-filter: blur(.2vh);
  transition:
    border-color var(--transition),
    transform    var(--transition),
    background   var(--transition),
    box-shadow   var(--transition),
    color        var(--transition);
  will-change: transform;
}

/* Trait latéral gauche */
#F_reseau_div > a::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        0;
  bottom:     0;
  width:      .15vw;
  background: linear-gradient(180deg, var(--accent), var(--steel));
  transform:  scaleY(0);
  transition: transform var(--transition);
  border-radius: .1vh;
}

#F_reseau_div p {
  font-size:  1.58vh;
  margin:     0;
  display:    inline;
  color:      #eaf2ff;
  transition: color var(--transition), text-shadow var(--transition);
  text-shadow:
    0 .05vw .2vh rgba(72,184,216,.5),
    0 0 .6vh rgba(72,184,216,.3);
}

#F_reseau_div svg {
  width:       1.37vw;
  height:      2.6vh;
  fill:        var(--text-muted);
  flex-shrink: 0;
  transition:  fill var(--transition), filter var(--transition);
  filter:      drop-shadow(0 .05vw .2vh rgba(72,184,216,.4));
}

/* Hover réseaux */
#F_reseau_div > a:hover {
  border-color: var(--orange);
  background:   rgba(72,184,216,.07);
  transform:    translateX(.3vw);
  color:        var(--orange);
  box-shadow:   0 .02vw .18vh var(--accent-glow);
}

#F_reseau_div > a:hover p {
  color:       var(--orange);
  text-shadow: 0 0 .8vh rgba(255,165,0,.4);
}

#F_reseau_div > a:hover::before { transform: scaleY(1); }

#F_reseau_div > a:hover svg {
  fill:   var(--orange);
  filter: drop-shadow(0 0 .4vh rgba(72,184,216,.4));
}

/* ── 13e. Téléchargements ────────────────────────────────────── */
#F_téléchargement_div {
  display:        flex;
  flex-direction: column;
  gap:            1.28vh;
}

#F_téléchargement_fr,
#F_téléchargement_uk {
  text-decoration: none;
  display:         block;
  transition:      transform var(--transition);
}

.telechargement_brochure {
  display:     flex;
  align-items: center;
  gap:         1.28vh;
  margin:      0;
  color:       #eaf2ff;
  font-size:   1.5vh;
  transition:  color var(--transition), text-shadow var(--transition);
  text-shadow:
    0 .05vw .2vh rgba(34,47,62,.7),
    .1vh .05vh .1vh rgba(212,136,26,.3);
}

#F_téléchargement_fr:hover,
#F_téléchargement_uk:hover { transform: translateX(4px); }

#F_téléchargement_fr:hover .telechargement_brochure,
#F_téléchargement_uk:hover .telechargement_brochure {
  color:       var(--orange-lt);
  text-shadow:
    0 0 .8vh rgba(255,165,0,.4),
    .1vh .05vw .2vh rgba(212,136,26,.6);
}

.telechargement_brochure svg {
  width:      10%;
  height:     10%;
  fill:       var(--text-muted);
  transition: fill var(--transition), filter var(--transition);
}

#F_téléchargement_fr:hover svg,
#F_téléchargement_uk:hover svg {
  fill:   var(--orange-lt);
  filter: drop-shadow(0 0 .4vh rgba(245,166,35,.4));
}


/* ============================================================
    14. RESPONSIVE
   ============================================================ */

/* ── 14a. Burger — masqué sur desktop ───────────────────────── */
#burger-btn { display: none; }

/* Clone JS masqué sur mobile */
@media (max-width: 768px) {
  .clone { display: none !important; }
}

/* ── 14b. Réalisations ≥ 1020px — animation défilante ──────── */
@media (min-width: 1020px) {
  .R_track {
    overflow: hidden;
    padding:  .55rem 0;
    contain:  layout style;
  }

  .R_ligne {
    display:             flex;
    gap:                 1.25rem;
    width:               max-content;
    will-change:         transform;
    backface-visibility: hidden;
    transform:           translateZ(0);
  }

  .R_track .R_ligne + .R_ligne { display: flex; }

  .img-galerie {
    height:      230px;
    width:       auto;
    flex-shrink: 0;
    object-fit:  cover;
    cursor:      zoom-in;
  }
}

/* ── 14c. Réalisations < 1020px — grille statique ───────────── */
@media (max-width: 1019px) {
  .R_gauche,
  .R_droite {
    animation:           none !important;
    transform:           none !important;
    will-change:         auto !important;
    backface-visibility: unset;
  }

  .R_track {
    overflow: visible;
    padding:  1.5vh 0;
    contain:  none;
  }

  .R_track .R_ligne + .R_ligne { display: none; }
}

/* ── 14d. Tablette paysage 769–1019px (3 colonnes réalisations) */
@media (min-width: 769px) and (max-width: 1019px) {
  .R_ligne {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   2vh 1.5vw;
    width:                 100%;
    will-change:           auto;
    transform:             none;
  }

  .img-galerie {
    width:       100%;
    height:      22vh;
    flex-shrink: unset;
    object-fit:  cover;
    cursor:      zoom-in;
  }
}

/* ── 14e. Tablette paysage — max-width: 1200px ───────────────── */
@media (max-width: 1200px) {
  #H_header { padding: 0 2.5vw; }

  .dropbtn {
    padding:   0 1.8vw;
    font-size: 2vh;
  }

  .dropdown-content { min-width: 14vw; }

  #A_mosaique_texte_p {
  margin-top:     .85rem;
  -webkit-text-stroke: 0.1px #000000;
}
  #A_presentation_div {
    padding:        4vh 8vw;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
  }



  #A_valeur_liste {
    grid-template-columns: repeat(4, 22vw);
    gap:                   1.5vw;
    justify-content:       center;
  }

  #Q_philosophie_certif {
    grid-template-columns: repeat(3, 1fr);
    gap:                   2vw;
    justify-items:         center;
  }

  /* ▼ NOUVEAU — #Q_certification_a responsive 1200px */
  #Q_certification_a {
    grid-template-columns: repeat(3, 1fr);
    gap:                   2vw;
    justify-items:         center;
  }

  #F_footer {
    padding: 4vh 5vw 2vh;
    gap:     4vh 2vw;
  }
}

/* ── 14f. Tablette portrait — max-width: 1024px ──────────────── */
@media (max-width: 1024px) {

  /* Header */
  #H_header {
    padding:    0 1.5vw;
    gap:        0;
    --header-h: 8vh;
    height:     8vh;
  }

  #H_logo_img { height: 6vh; }

  /* Nav : reste horizontale avec hover dropdowns */
  .nav-wrapper {
    position:        static;
    flex-direction:  row;
    height:          100%;
    background:      transparent;
    overflow:        visible;
    padding:         0;
    border:          none;
    box-shadow:      none;
    width:           auto;
  }

  .nav-wrapper .dropdown {
    flex:           1;
    height:         var(--header-h);
    flex-direction: row;
    border-bottom:  none;
  }

  .nav-wrapper .dropbtn {
    padding:         0 1.2vw;
    font-size:       1.5vh;
    font-weight:     600;
    height:          100%;
    width:           100%;
    justify-content: center;
    white-space:     nowrap;
  }

  .nav-wrapper .dropdown-content {
    position:        absolute;
    top:             calc(100% + 0.2vh);
    left:            0;
    max-height:      none;
    overflow:        visible;
    background:      linear-gradient(160deg, var(--bg-card) 0%, var(--bg-surface) 100%);
    border:          1px solid var(--border);
    border-top:      2px solid var(--accent);
    border-radius:   0 0 var(--radius-lg) var(--radius-lg);
    opacity:         0;
    visibility:      hidden;
    transform:       translateY(-0.8vh) scaleY(0.95);
    transform-origin: top center;
    pointer-events:  none;
    transition:
      opacity    200ms ease,
      transform  200ms cubic-bezier(.4,0,.2,1),
      visibility 200ms ease;
    min-width: 14vw;
  }

  .nav-wrapper .dropdown:hover .dropdown-content {
    opacity:        1;
    visibility:     visible;
    transform:      translateY(0) scaleY(1);
    pointer-events: auto;
    max-height:     none;
  }

  .nav-wrapper .dropdown.is-open .dropdown-content       { opacity: 0; visibility: hidden; pointer-events: none; }
  .nav-wrapper .dropdown.is-open:hover .dropdown-content { opacity: 1; visibility: visible; pointer-events: auto; }

  .nav-wrapper .dropdown-content a {
    font-size: 1.7vh;
    padding:   1.2vh 1.2vw;
  }

  .nav-wrapper .dropdown:last-child .dropdown-content {
    left:      auto;
    right:     0;
    min-width: 9vw;
  }

  .burger-arrow { display: none; }

  /* Mosaïque */
  #A_mosaique_div { height: calc(100vh - 8vh); }

  #A_mosaique_image_div { --cols: 3; --rows: 2; }

  #A_mosaique_texte_h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
  #A_mosaique_texte_p  { font-size: clamp(1rem, 2.5vw, 1.8rem); }

  /* Sections en colonne */
  #A_presentation_div,
  #A_secteur_activite_div,
  #A_certification_div,
  #A_valeur_div,
  #R_realisation,
  #Q_philosophie,
  #Q_certification_div,
  #C_contact {
    padding:        4vh 5vw;
    display:        flex;
    flex-direction: column;
    align-items:    center;
  }


  #R_realisation .R_track,
  .droiteQ,
  .gaucheQ { align-items: unset; }

  .droiteQ,
  .gaucheQ { padding: 0; width: 100%; }

  /* Présentation */
  #A_presentation_p { font-size: 1.1rem; max-width: 80%; text-align: center; }

  /* Secteurs */
  .sector-grid    { gap: 1vw; margin-top: 2.5vh; justify-content: center; }
  .secteur_svg    { min-width: 13vw; padding: 2vh 1.2vw; }
  .secteur_svg p  { font-size: 1.5vh; text-align: center; }

  /* Certifications accueil */
  #A_certification_image_div {
    grid-template-columns: repeat(2, 1fr);
    gap:           2vh;
    justify-items: center;
    width:         100%;
  }

  .lien_certif { width: 75%; margin-inline: auto; padding: 1.5vh 2vw; font-size: 1.5vh; }


  /* Valeurs */
  #A_valeur_liste {
    grid-template-columns: repeat(4, 21vw);
    gap:                   1.5vw;
    justify-content:       center;
  }

  #A_valeur_liste > div { padding: 2vh 1.5vw; }

  /* Blocs savoir-faire */
  .S_img_1, .S_img_2  { width: 40%; }
  .Savoir-Faire        { padding: 4vh 3.5vw; }
  .Savoir-Faire h2     { font-size: clamp(1rem, 1.8vw, 1.5rem); }

  .gauche .S_texte_1 p,
  .gauche .Savoir-Faire p,
  .droite .S_texte_1 p,
  .droite .Savoir-Faire p { font-size: clamp(.85rem, 1.3vw, 1.1rem); }

  /* Qualité */
  .droiteQ,
  .gaucheQ              { flex-direction: row; }
  .droiteQ              { flex-direction: row-reverse; }

  .droiteQ .clickable,
  .gaucheQ .clickable   { order: unset; width: 45%; height: auto; position: relative; }

  .droiteQ .qualité,
  .gaucheQ .qualité     { order: unset; width: 55%; padding: 4vh 3.5vw; }

  /* ▼ NOUVEAU — #Q_philosophie_certif et #Q_certification_a responsive 1024px */
  #Q_philosophie_certif,
  #Q_certification_a {
    grid-template-columns: repeat(3, 1fr);
    gap:           2vw;
    padding:       2vw;
    justify-items: center;
    width:         100%;
  }

  /* ▼ NOUVEAU — .certif_fr/.certif_uk pleine largeur colonne */
  .certif_fr,
  .certif_uk { max-width: 100%; }

  #Q_certification_div { gap: 2vw; }
  .box_certif           { width: 85%; }

  /* Contact */
  .container_sites {
    grid-template-columns: repeat(2, 1fr);
    gap:   2vw;
    width: 100%;
  }

  .titre_vacq, .titre_riom { font-size: 1.5vh; }

  #C_contact_vacq_div_texte,
  #C_contact_riom_div_texte {
    grid-template-columns: 2.5vw 1fr;
    gap:     1.5vh 1vw;
    padding: 2vh 2vw;
  }

  #C_contact_vacq_div_texte p,
  #C_contact_vacq_div_texte a,
  #C_contact_riom_div_texte p,
  #C_contact_riom_div_texte a { font-size: 1.4vh; }

  #C_contact_vacq_div .clickable,
  #C_contact_riom_div .clickable { height: 30vh; }

  /* Footer */
  #F_footer {
    grid-template-columns: repeat(4, 1fr);
    gap:       3vh 2vw;
    padding:   4vh 4vw 2vh;
    font-size: 1.4vh;
  }

  .titre_footer { font-size: 1.5vh; padding-left: .8vw; }

  #F_info_vacq_div_texte,
  #F_info_riom_div_texte { grid-template-columns: 1.2vw 1fr; gap: 1.5vh .8vw; }

  #F_info_vacq_div_texte svg,
  #F_info_riom_div_texte svg { width: 1.2vw; height: auto; }

  #F_info_livraison_p { font-size: 1.35vh; }

  #F_reseau_div > a { padding: 1vh .8vw; gap: 1vw; }

  #F_reseau_div p,
  .telechargement_brochure { font-size: 1.35vh; }

  #F_reseau_div svg,
  .telechargement_brochure svg { width: 1.4vw; height: auto; }

  /* Couleurs statiques (remplacent le hover inaccessible sur tablette) */
  .gauche .Savoir-Faire h2,
  .gauche .S_texte_1 p,
  .gauche .Savoir-Faire p           { color: #ffffff; }

  .droite .Savoir-Faire h2          { color: var(--text-dark-muted); letter-spacing: .07em; }
  .droite .S_texte_1 p,
  .droite .Savoir-Faire p           { color: var(--text-dark-muted); }

  .gaucheQ h2, .gaucheQ p          { color: #ffffff; }
  .droiteQ h2, .droiteQ p          { color: var(--text-dark-muted); }

  #Q_philosophie_p                  { color: white; }

  #C_contact_vacq_div_texte p,
  #C_contact_vacq_div_texte a,
  #C_contact_riom_div_texte p,
  #C_contact_riom_div_texte a       { color: #dbd7d2; }
}

/* ── 14g. Mobile — max-width: 768px ─────────────────────────── */
@media (max-width: 768px) {

  body { font-size: 4vw; overflow-x: hidden; }

  h1 { font-size: clamp(1.4rem, 6vw, 2.2rem); }
  h2 { font-size: clamp(1rem, 4.5vw, 1.6rem); }
  h3 { font-size: clamp(.85rem, 3.8vw, 1.1rem); }

  /* Header */
  #H_header {
    padding:         0 4vw;
    justify-content: space-between;
    height:          9vh;
    min-height:      52px;
    --header-h:      9vh;
  }

  #H_logo_img   { height: 6vh; min-height: 34px; }
  #H_logo_div   { margin-right: 0; padding-right: 0; }
  #H_logo_div::before,
  #H_logo_div::after { display: none; }

  /* Burger affiché */
  #burger-btn {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    gap:             1.2vh;
    width:           10vw;
    height:          10vw;
    max-width:       44px;
    max-height:      44px;
    min-width:       36px;
    min-height:      36px;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    padding:         1vw;
    z-index:         1001;
    flex-shrink:     0;
    position:        relative;
  }

  #burger-btn span {
    display:          block;
    width:            6vw;
    max-width:        26px;
    height:           .3vh;
    min-height:       2px;
    background:       #cee4eb;
    border-radius:    1vw;
    transform-origin: center;
    transition:
      transform 280ms cubic-bezier(.4,0,.2,1),
      opacity   200ms ease;
  }

  #burger-btn.is-open span:nth-child(1) { transform: translateY(1.5vh) rotate(45deg); }
  #burger-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  #burger-btn.is-open span:nth-child(3) { transform: translateY(-1.5vh) rotate(-45deg); }

  /* Nav mobile — panneau latéral */
  .nav-wrapper {
    position:        fixed;
    top:             9vh;
    left:            0;
    width:           100%;
    height:          calc(100dvh - 9vh);
    flex-direction:  column;
    align-items:     stretch;
    background:
      conic-gradient(from 240deg at 85% 15%, var(--accent-glow) 0deg, transparent 65deg),
      var(--bg-surface);
    overflow-y:      auto;
    overflow-x:      hidden;
    transform:       translateX(-100%);
    transition:      transform 320ms cubic-bezier(.4,0,.2,1);
    z-index:         800;
    padding:         2vh 0 5vh;
    border-right:    .3vw solid rgba(72,184,216,.2);
    box-shadow:      1vw 0 6vw rgba(0,0,0,.5);
  }

  .nav-wrapper.is-open { transform: translateX(0); }

  .nav-wrapper .dropdown {
    flex:           none;
    width:          100%;
    height:         auto;
    flex-direction: column;
    align-items:    stretch;
    border-bottom:  .15vh solid rgba(72,184,216,.1);
  }

  .nav-wrapper .dropbtn {
    width:           100%;
    height:          auto;
    padding:         2.5vw 5vw;
    font-size:       4.5vw;
    text-align:      left;
    justify-content: space-between;
    white-space:     normal;
  }

  .nav-wrapper .dropdown:hover .dropbtn          { color: #cee4eb; }
  .nav-wrapper .dropdown:hover .dropbtn::after   { width: 0; }
  .nav-wrapper .dropdown:hover .dropbtn::before  { opacity: 0; }

  /* Flèche accordéon */
  .nav-wrapper .dropbtn .burger-arrow {
    display:    inline-block;
    transition: transform 260ms ease;
    font-size:  3vw;
    opacity:    .7;
  }

  .nav-wrapper .dropdown.is-open .dropbtn .burger-arrow { transform: rotate(180deg); }

  /* Sous-menus en accordéon */
  .nav-wrapper .dropdown-content {
    position:       static;
    min-width:      unset;
    width:          100%;
    opacity:        1;
    visibility:     visible;
    transform:      none;
    pointer-events: auto;
    max-height:     0;
    overflow:       hidden;
    transition:     max-height 320ms cubic-bezier(.4,0,.2,1);
    border-top:     none;
    border-radius:  0;
    box-shadow:     none;
    background:     rgba(0,0,0,.2);
  }

  .nav-wrapper .dropdown.is-open .dropdown-content       { max-height: 60vh; }
  .nav-wrapper .dropdown:hover .dropdown-content         { max-height: 0; }
  .nav-wrapper .dropdown.is-open:hover .dropdown-content { max-height: 60vh; }

  .nav-wrapper .dropdown-content a { font-size: 3.8vw; padding: 2.2vw 5vw 2.2vw 9vw; }
  .nav-wrapper .dropdown:last-child .dropdown-content { left: auto; right: auto; }

  /* Overlay de fond */
  #nav-overlay {
    display:         none;
    position:        fixed;
    inset:           9vh 0 0 0;
    background:      rgba(0,0,0,.5);
    z-index:         799;
    backdrop-filter: blur(2px);
  }

  #nav-overlay.is-open { display: block; }

  /* Sections */
  #A_presentation_div,
  #A_secteur_activite_div,
  #A_certification_div,

  #A_valeur_div,
  #R_realisation,
  #Q_philosophie,
  #Q_certification_div,
  #C_contact {
    padding:        5vh 5vw;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
  }


  .droiteQ, .gaucheQ,
  .gauche,  .droite    { text-align: left; align-items: unset; }

  /* Mosaïque */
  #A_mosaique_div              { height: calc(100dvh - 9vh); }
  #A_mosaique_image_div        { --cols: 2; --rows: 3; }
  #A_mosaique_texte_h1         { font-size: clamp(1.5rem, 6.5vw, 2.5rem); letter-spacing: .1em; }
  #A_mosaique_texte_p          { font-size: clamp(.75rem, 3.5vw, 1.2rem); letter-spacing: .14em; }

  /* Secteurs */
  .sector-grid   { gap: 2.5vw; margin-top: 3vh; justify-content: center; width: 100%; }
  .secteur_svg   { min-width: 40vw; padding: 2.5vh 3vw; flex-direction: column; align-items: center; display: flex; }
  .secteur_svg p { font-size: 3.5vw; text-align: center; }

  /* Certifications accueil — 1 colonne */
  #A_certification_image_div {
    grid-template-columns: 1fr;
    gap:           2.5vh;
    width:         100%;
    justify-items: center;
  }

  .lien_certif { width: 85%; margin-inline: auto; font-size: 4vw; padding: 2.5vh 5vw; border-radius: 10vw; }

  /* Savoir-faire mosaïque — 2 colonnes */


  /* Valeurs */
  #A_valeur_liste {
    grid-template-columns: repeat(2, 44vw);
    gap:             3vw;
    justify-content: center;
  }

  #A_valeur_liste > div { padding: 3vh 3vw; text-align: left; }

  /* Blocs savoir-faire — empilés */
  .gauche, .droite {
    flex-direction: column;
    min-height:     unset;
    padding:        0;
    width:          100%;
  }

  .S_img_1, .S_img_2 {
    width:       100%;
    height:      45vw;
    flex-shrink: 0;
    position:    relative;
    contain:     none;
  }

  .S_img_1 .clickable,
  .S_img_2 .clickable { position: absolute; inset: 0; width: 100%; height: 100%; }

  .S_img_1 img,
  .S_img_2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

  .gauche > .S_img_1, .gauche > .S_img_2,
  .droite > .S_img_1, .droite > .S_img_2 { order: 0 !important; }
  .gauche > .Savoir-Faire,
  .droite > .Savoir-Faire                 { order: 1 !important; }

  .Savoir-Faire { width: 100%; flex: none; padding: 5vh 6vw; text-align: left; }
  .Savoir-Faire h2 { font-size: clamp(1rem, 4.5vw, 1.5rem); white-space: normal; word-break: break-word; }

  .gauche .S_texte_1 p,
  .gauche .Savoir-Faire p,
  .droite .S_texte_1 p,
  .droite .Savoir-Faire p {
    font-size:     clamp(.85rem, 3.5vw, 1.1rem);
    max-width:     100%;
    white-space:   normal;
    word-break:    break-word;
    overflow-wrap: break-word;
  }

  .gauche .mon-icone,
  .droite .mon-icone { justify-self: end; }

  .droite .mon-icone::after           { rotate: 45deg; }
  .droite.svg-actif .mon-icone::after { rotate: 135deg; }

  /* Réalisations — 2 colonnes */
  .R_ligne {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   2vh 2.5vw;
    width:                 100%;
    will-change:           auto;
    transform:             none;
  }

  .img-galerie { width: 100%; height: 30vw; flex-shrink: unset; object-fit: cover; cursor: zoom-in; }

  /* Qualité */
  .droiteQ, .gaucheQ { flex-direction: column; width: 100%; }

  .droiteQ .clickable,
  .gaucheQ .clickable { order: 0; width: 100%; height: 45vw; position: relative; }

  .droiteQ .qualité,
  .gaucheQ .qualité   { order: 1; width: 100%; }

  .droiteQ .clickable img,
  .gaucheQ .clickable img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

  .qualité {
    width:           100%;
    padding:         5vh 6vw;
    text-align:      center;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
  }

  /* ▼ NOUVEAU — #Q_philosophie_certif et #Q_certification_a responsive 768px */
  #Q_philosophie_certif,
  #Q_certification_a {
    grid-template-columns: repeat(2, 1fr);
    gap:           3vw;
    padding:       3vw;
    justify-items: center;
    width:         100%;
  }

  .certif_fr, .certif_uk { width: 100%; margin-inline: auto; font-size: 3vw; }

  #Q_certification_div a { padding: 2vh 2vw; }
  .box_certif             { width: 80%; }

  /* Contact */
  .container_sites { grid-template-columns: 1fr; gap: 3vh; width: 100%; }

  .titre_vacq, .titre_riom {
    font-size:   clamp(.85rem, 4vw, 1.1rem);
    padding:     2vh 4vw;
    white-space: normal;
    word-break:  break-word;
  }

  #C_contact_vacq_div_texte,
  #C_contact_riom_div_texte {
    grid-template-columns: 6vw 1fr;
    gap:        2vh 2vw;
    padding:    3vh 4vw;
    text-align: left;
  }

  #C_contact_vacq_div_texte p,
  #C_contact_vacq_div_texte a,
  #C_contact_riom_div_texte p,
  #C_contact_riom_div_texte a {
    font-size:     clamp(.75rem, 3.2vw, 1rem);
    word-break:    break-word;
    overflow-wrap: break-word;
    white-space:   normal;
  }

  #C_contact_vacq_div_texte i,
  #C_contact_riom_div_texte i { font-size: clamp(.85rem, 3.5vw, 1.1rem); }

  #C_contact_vacq_div .clickable,
  #C_contact_riom_div .clickable { width: 100%; height: 35vw; }

  /* Footer */
  #F_footer {
    grid-template-columns: repeat(2, 1fr);
    gap:     4vh 5vw;
    padding: 5vh 5vw 3vh;
  }

  .titre_footer { font-size: clamp(.7rem, 3.5vw, 1rem); padding-left: 3vw; }

  #F_info_vacq_div_texte,
  #F_info_riom_div_texte { grid-template-columns: 5vw 1fr; gap: 2vh 1.5vw; }

  #F_info_vacq_div_texte svg,
  #F_info_riom_div_texte svg { width: 4vw; height: auto; }

  #F_info_livraison_p  { font-size: clamp(.65rem, 3vw, .9rem); }
  #F_reseau_div p      { font-size: clamp(.65rem, 3vw, .9rem); }
  #F_reseau_div > a    { padding: 1.5vh 3vw; gap: 2vw; }
  #F_reseau_div svg    { width: 5vw; height: auto; }

  .telechargement_brochure     { font-size: clamp(.65rem, 3vw, .9rem); gap: 2vw; }
  .telechargement_brochure svg { width: 5vw; height: auto; }

  /* Couleurs statiques */
  .gauche .Savoir-Faire h2,
  .gauche .S_texte_1 p,
  .gauche .Savoir-Faire p           { color: #ffffff; }

  .droite .Savoir-Faire h2          { color: var(--text-dark-muted); letter-spacing: .07em; }
  .droite .S_texte_1 p,
  .droite .Savoir-Faire p           { color: var(--text-dark-muted); }

  .gaucheQ h2, .gaucheQ p          { color: #ffffff; }
  .droiteQ h2, .droiteQ p          { color: var(--text-dark-muted); }

  #Q_philosophie_p                  { color: white; }

  #C_contact_vacq_div_texte p,
  #C_contact_vacq_div_texte a,
  #C_contact_riom_div_texte p,
  #C_contact_riom_div_texte a       { color: #dbd7d2; }
}

/* ── 14h. Mobile portrait compact — max-width: 480px ─────────── */
@media (max-width: 480px) {

  body { font-size: 4.5vw; min-width: 0; max-width: 100%; }

  #H_header { height: 13vw; min-height: 50px; --header-h: 13vw; padding: 0 4vw; }
  #H_logo_img { height: 9vw; min-height: 34px; }

  .nav-wrapper { top: 13vw; height: calc(100dvh - 13vw); }
  #nav-overlay { inset: 13vw 0 0 0; }

  #A_mosaique_div              { height: calc(100dvh - 13vw); }
  #A_mosaique_image_div        { --cols: 2; --rows: 3; }
  #A_mosaique_texte_h1         { font-size: 7.5vw; letter-spacing: .08em; }
  #A_mosaique_texte_p          { font-size: 3.5vw; letter-spacing: .12em; }

  .secteur_svg   { min-width: 43vw; padding: 2vh 2.5vw; }
  .secteur_svg p { font-size: 3.2vw; }

  #A_savoir_faire_div { grid-template-columns: 1fr; gap: 3vw; }

  #A_valeur_liste { grid-template-columns: 1fr; gap: 3vw; justify-content: center; }

  .S_img_1, .S_img_2            { height: 52vw; }
  .S_img_1 .clickable,
  .S_img_2 .clickable            { height: 52vw; }

  /* Réalisations — 1 colonne */
  .R_ligne     { grid-template-columns: 1fr; gap: 3vh; }
  .img-galerie { height: 52vw; }

  /* Qualité hero */
  #Q_img_div   { height: calc(100dvh - 13vw); max-height: none; }
  #Q_img_front { width: 100%; height: 100%; object-fit: cover; }

  /* ▼ NOUVEAU — #Q_philosophie_certif et #Q_certification_a responsive 480px */
  #Q_philosophie_certif,
  #Q_certification_a {
    grid-template-columns: 1fr;
    gap:           3vw;
    padding:       4vw;
    justify-items: center;
  }

  .certif_fr, .certif_uk { width: 100%; font-size: 4vw; }

  .droiteQ .clickable,
  .gaucheQ .clickable              { height: 52vw; }

  .container_sites                 { grid-template-columns: 1fr; }

  #C_contact_vacq_div .clickable,
  #C_contact_riom_div .clickable   { height: 45vw; }

  #C_contact_vacq_div_texte,
  #C_contact_riom_div_texte        { grid-template-columns: 7vw 1fr; padding: 3vh 4vw; }

  #F_footer { grid-template-columns: 1fr; gap: 5vh; padding: 6vh 6vw 4vh; }

  .titre_footer { font-size: clamp(.75rem, 4vw, 1rem); }

  #F_info_vacq_div_texte,
  #F_info_riom_div_texte           { grid-template-columns: 7vw 1fr; }

  #F_info_vacq_div_texte svg,
  #F_info_riom_div_texte svg       { width: 5vw; }

  #F_reseau_div svg,
  .telechargement_brochure svg     { width: 6vw; }
}

/* ── 14i. Mobile portrait — max-width: 450px ─────────────────── */
@media (max-width: 450px) {

  #H_header {
    height:     56px;
    min-height: 56px;
    --header-h: 56px;
    padding:    0 1rem;
  }

  #H_logo_img { height: 38px; }

  .nav-wrapper {
    top:       56px;
    height:    calc(100dvh - 56px);
    max-width: 450px;
  }

  #nav-overlay { inset: 56px 0 0 0; }

  #A_mosaique_div { height: calc(100dvh - 56px); }

  #A_mosaique_image_div {
    --cols: 2 !important;
    --rows: 3 !important;
  }

  #A_mosaique_texte_h1 { font-size: 1.7rem; letter-spacing: .1em; }
  #A_mosaique_texte_p  { font-size: .9rem;  letter-spacing: .14em; }

  #Q_img_div {
    height:     calc(100dvh - 56px);
    max-height: none;
  }

  #Q_img_front { width: 100%; height: 100%; object-fit: cover; }
}

/* ── 14j. Valeurs — texte centré en responsive ───────────────── */
@media (max-width: 1024px) {
  #A_valeur_liste > div,
  #A_valeur_liste > div > div:first-child,
  #A_valeur_liste > div > div:last-child {
    text-align: center;
  }

  #A_valeur_liste > div > div:first-child::after {
    left:      50%;
    transform: translateX(-50%);
  }
}


/* ============================================================
    15. ACCESSIBILITÉ — prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .R_ligne { animation: none; }
}