/* ==========================================================================
   Ducrocq TP — feuille de style principale
   Identité : bleu profond + jaune chantier (les couleurs des véhicules Ducrocq)
   ========================================================================== */

:root {
  --bleu: #0e2a5c;
  --bleu-fonce: #081c40;
  --bleu-clair: #eef2f9;
  --jaune: #f7b500;
  --jaune-fonce: #d99e00;
  --encre: #1a2333;
  --gris: #5b6575;
  --gris-texte: #4b5568;
  --blanc: #ffffff;
  --fond: #fafbfd;
  --bordure: #e6eaf2;
  --erreur: #b3261e;
  --radius: 14px;
  --shadow: 0 10px 30px -12px rgba(14, 42, 92, .25);
  --font: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--encre);
  background: var(--fond);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { line-height: 1.15; font-weight: 800; letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.18rem; }
p { margin: 0 0 1em; }
a { color: var(--bleu); }
img { max-width: 100%; height: auto; }
/* <picture> ne génère pas de boîte : les sélecteurs de mise en page continuent de
   viser l'<img> comme s'il était enfant direct de la figure ou de la carte. */
picture { display: contents; }
figure { margin: 0; }
figcaption { font-size: .88rem; color: var(--gris-texte); margin-top: 10px; }

.lead { font-size: 1.15rem; color: var(--gris-texte); max-width: 46em; }

.kicker {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jaune-fonce);
  margin: 0 0 .8em;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--jaune); color: var(--encre);
  padding: .6em 1em; z-index: 100; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --- Boutons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: .8em 1.6em;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-jaune { background: var(--jaune); color: var(--encre); box-shadow: 0 8px 20px -8px rgba(247, 181, 0, .6); }
.btn-jaune:hover { background: var(--jaune-fonce); }
.btn-ghost { background: transparent; color: var(--blanc); border: 2px solid rgba(255, 255, 255, .45); }
.btn-ghost:hover { border-color: var(--blanc); }
.btn-ghost-bleu { background: transparent; color: var(--bleu); border: 2px solid var(--bleu); }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }

/* Le logo d'origine (JPEG blanc) : on ne le montre que sur fond blanc. */
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { display: block; height: 44px; width: auto; max-width: none; } /* jamais écrasé par le menu */

.site-nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
  padding: .5em .6em; border-radius: 8px;
  text-decoration: none; color: var(--encre); font-weight: 600; font-size: .9rem;
  white-space: nowrap; /* un libellé de menu ne se coupe jamais en plusieurs lignes */
}
.nav-link:hover { background: var(--bleu-clair); }
.nav-link.is-active { color: var(--bleu); background: var(--bleu-clair); }
.nav-cta { background: var(--jaune); color: var(--encre) !important; margin-left: 8px; }
.nav-cta:hover { background: var(--jaune-fonce); }
.nav-group { display: contents; }
.nav-group-label { display: none; }

.nav-toggle { display: none; }

/* --- Messages flash -------------------------------------------------------- */
.flash { padding-top: 16px; }
.flash p { margin: 0; padding: 12px 18px; border-radius: 10px; font-weight: 600; }
.flash-alert { background: #fdecea; color: #7a1f1a; border: 1px solid #f5c2c0; }
.flash-notice { background: var(--bleu-clair); color: var(--bleu); border: 1px solid #d4ddee; }

/* --- Hero (accueil) ------------------------------------------------------ */
.hero {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(247, 181, 0, .22), transparent 60%),
    linear-gradient(160deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
  color: var(--blanc);
  padding: 80px 0 72px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--jaune) 0 22px, var(--bleu-fonce) 22px 44px);
}
/* Au-dessus du plan du réseau (.plan-reseau), qui se peint sur le fond du héros. */
.hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.hero .kicker { color: var(--jaune); }
.hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.hero h1 em { font-style: normal; color: var(--jaune); white-space: nowrap; }
.hero-implantation { color: var(--jaune); font-weight: 700; font-size: 1.15rem; margin: -.1em 0 .9em; }
.hero .lead { color: rgba(255, 255, 255, .82); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 44px; }

.hero-media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
  border: 4px solid rgba(255, 255, 255, .1);
}
.hero-media figcaption { color: rgba(255, 255, 255, .7); }
/* Deuxième photo du héros, en médaillon sur le coin haut gauche de la première (du ciel). */
.hero-media { position: relative; }
.hero-media .hero-media-second {
  position: absolute; top: -9%; left: -12%; width: 46%;
  border: 4px solid var(--blanc); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .75);
}

.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin: 0; padding: 26px 0 0; border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-stats dt { font-size: 2rem; font-weight: 800; color: var(--jaune); }
.hero-stats dd { margin: 0; font-size: .88rem; color: rgba(255, 255, 255, .75); }

/* --- Bandeau des pages intérieures --------------------------------------- */
.page-hero {
  background: linear-gradient(160deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
  color: var(--blanc);
  padding: 48px 0 56px;
  position: relative;
}
.page-hero::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--jaune) 0 22px, var(--bleu-fonce) 22px 44px);
}
.page-hero .kicker { color: var(--jaune); }
.page-hero .lead { color: rgba(255, 255, 255, .82); }
.page-hero h1 { max-width: 22em; }

.breadcrumb { font-size: .85rem; margin: 0 0 28px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.breadcrumb li { color: rgba(255, 255, 255, .7); }
.breadcrumb li + li::before { content: "›"; margin-right: 8px; color: rgba(255, 255, 255, .5); }
.breadcrumb a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.breadcrumb a:hover { color: var(--jaune); }

/* --- Sections ------------------------------------------------------------ */
.section { padding: 72px 0; }
.section-bleu { background: var(--bleu-clair); }
.section-more { margin-top: 28px; }

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

/* Texte + photo côte à côte ; les portraits sont recadrés en 4/3. */
.split-media { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.split-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.split-media h2 + p, .split-media p + h2 { margin-top: 0; }
.split-media p + h2 { margin-top: 1.2em; }

/* --- Grilles de photos ------------------------------------------------------ */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.photo-grid-2 { grid-template-columns: repeat(2, 1fr); }
.photo-grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Photos en portrait (le parc matériel) : quatre de front, sans recadrage en paysage. */
.photo-grid-portrait { grid-template-columns: repeat(4, 1fr); }
.photo-grid.photo-grid-portrait img { aspect-ratio: 3 / 4; }
.parc-materiel { margin-top: 56px; }
.photo-grid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 12px; border: 1px solid var(--bordure);
  transition: transform .18s ease, box-shadow .18s ease;
}
.photo-grid a:hover img { transform: translateY(-4px); box-shadow: var(--shadow); }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
.gallery figure {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gallery .photo-entiere img { object-fit: contain; background: var(--bleu-clair); }
.gallery figcaption { padding: 16px 20px 20px; margin: 0; }
.gallery h3 { font-size: 1.05rem; margin-bottom: .3em; }
.gallery p { color: var(--gris-texte); font-size: .92rem; margin: 0; }

/* --- Cartes --------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 34px; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
/* Cinq métiers : 3 + 2, la dernière rangée s'étire. */
.cards-metiers { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
  display: block;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 28px;
  text-decoration: none;
  color: var(--encre);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.card:hover, .card:has(.card-link):hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--jaune); }
/* Carte cliquable dont l'ancre se limite au titre : le lien du titre s'étire sur la carte. */
.card:has(.card-link) { position: relative; }
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link:focus-visible { outline: none; }
.card:has(.card-link:focus-visible) { outline: 3px solid var(--jaune); outline-offset: 3px; }
.card p { color: var(--gris-texte); font-size: .95rem; margin-bottom: .6em; }
.card-icon { font-size: 1.7rem; display: block; margin-bottom: 12px; }
.card-more { font-weight: 700; color: var(--bleu); font-size: .92rem; }
.card-plain { cursor: default; }
.card-plain h2 { font-size: 1.18rem; }

.card-media { padding: 0 0 26px; overflow: hidden; }
.card-media img { width: 100%; height: 200px; object-fit: cover; display: block; margin-bottom: 20px; }
.card-media h3, .card-media p, .card-media .card-more { margin-left: 26px; margin-right: 26px; }
.card-media .card-more { display: block; }

/* --- Listes -------------------------------------------------------------- */
.check-list, .value-list { list-style: none; padding: 0; margin: 0; }
.check-list li, .value-list li { padding: 10px 0 10px 34px; position: relative; }
.check-list li::before, .value-list li::before {
  content: "";
  position: absolute; left: 0; top: 16px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--jaune);
}
.check-list li::after, .value-list li::after {
  content: "✓";
  position: absolute; left: 4px; top: 8px;
  font-size: .8rem; font-weight: 900; color: var(--bleu-fonce);
}
.value-list { margin-bottom: 28px; }
.value-list li { border-bottom: 1px solid #dce3ef; }
.value-list li:last-child { border-bottom: 0; }

.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { padding: 6px 0; border-bottom: 1px solid var(--bordure); }
.link-list li:last-child { border-bottom: 0; }
.link-list a { text-decoration: none; font-weight: 600; }
.link-list a:hover { text-decoration: underline; }

.note { margin-top: 30px; color: var(--gris-texte); font-size: .95rem; }

/* --- Métiers liés (maillage interne) --------------------------------------- */
.section-lies { padding: 56px 0; border-top: 1px solid var(--bordure); }
.section-lies h2 { font-size: 1.4rem; }
.metiers-lies { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; }
.metiers-lies li { padding-bottom: 12px; border-bottom: 1px solid var(--bordure); }
.metiers-lies a { font-weight: 700; text-decoration: none; }
.metiers-lies a:hover { text-decoration: underline; }
.metiers-lies span { display: block; font-size: .92rem; color: var(--gris-texte); }

/* --- Organigramme (L'entreprise) ---------------------------------------------
   Sur le bleu du bandeau, le président puis trois pôles, reliés par des traits jaunes :
   les « voies » du héros de l'accueil. À l'entrée dans l'écran ([data-reveal], voir
   « Mouvement »), les traits se tracent du président vers les pôles, puis les personnes
   arrivent pôle après pôle, chaque branche se dessinant juste avant sa carte. Sans script
   ou avec les animations réduites, tout est visible d'emblée. Les animations jouent sur
   `translate`/`scale`, le survol sur `transform` : les deux ne se marchent pas dessus. */
.section-orga {
  background:
    radial-gradient(ellipse 55% 42% at 50% 0%, rgba(247, 181, 0, .09), transparent 70%),
    linear-gradient(160deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
  color: var(--blanc);
}
.section-orga .kicker { color: var(--jaune); }
.section-orga .lead { color: rgba(255, 255, 255, .8); margin-inline: auto; }
.orga-intro { text-align: center; max-width: 44em; margin: 0 auto; }

.orga {
  --trait: rgba(247, 181, 0, .8);
  --liaison: 30px; /* hauteur de chaque palier de traits */
  --ecart: 28px;   /* entre deux pôles */
  --courbe: cubic-bezier(.2, .7, .2, 1);
  margin-top: 44px;
}

/* Président → barre → pôles : la tige, la barre (du milieu du premier pôle au milieu du
   dernier) et une descente par pôle. */
.orga-tete { position: relative; display: flex; justify-content: center; padding-bottom: var(--liaison); }
.orga-poles {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--ecart); align-items: start; padding-top: var(--liaison);
}
.orga-pole { position: relative; }
.orga-tete::after, .orga-poles::before, .orga-pole::before {
  content: ""; position: absolute; background: var(--trait); border-radius: 2px;
}
.orga-tete::after { left: 50%; bottom: 0; width: 2px; height: var(--liaison); margin-left: -1px; transform-origin: top; }
.orga-poles::before { top: 0; height: 2px; left: calc((100% - 2 * var(--ecart)) / 6); right: calc((100% - 2 * var(--ecart)) / 6); }
.orga-pole::before { left: 50%; top: calc(-1 * var(--liaison)); width: 2px; height: var(--liaison); margin-left: -1px; transform-origin: top; }

.orga-pole-titre {
  margin: 0 0 16px; padding: 10px 14px; text-align: center;
  font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
  color: var(--jaune); background: rgba(247, 181, 0, .08);
  border: 1px solid rgba(247, 181, 0, .45); border-radius: 10px;
}

.orga-carte {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px;
  padding: 12px 16px 12px 12px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  transition: transform .3s var(--courbe), background-color .3s ease, border-color .3s ease;
}
/* <picture> en display: contents : sans ça, sa <source> AVIF prendrait une case de la grille. */
.orga-carte source { display: none; }
.orga-portrait {
  display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 8px 18px -8px rgba(0, 0, 0, .6);
  transition: box-shadow .3s ease;
}
.orga-identite { margin: 0; line-height: 1.3; min-width: 0; }
.orga-nom { display: block; font-weight: 700; color: var(--blanc); }
/* Le filet jaune du PowerPoint, entre le nom et la fonction ; il s'allonge au survol. */
.orga-nom::after {
  content: ""; display: block; width: 22px; height: 2px; margin: 6px 0 5px;
  border-radius: 2px; background: var(--jaune); transition: width .35s var(--courbe);
}
.orga-role { display: block; font-size: .86rem; color: rgba(255, 255, 255, .74); }

@media (hover: hover) {
  .orga-carte:hover { transform: translateY(-3px); background-color: rgba(255, 255, 255, .1); border-color: rgba(247, 181, 0, .5); }
  .orga-carte:hover .orga-portrait { box-shadow: 0 0 0 2px var(--jaune), 0 8px 18px -8px rgba(0, 0, 0, .6); }
  .orga-carte:hover .orga-nom::after { width: 44px; }
}

.orga-carte-responsable { background: rgba(255, 255, 255, .1); border-color: rgba(247, 181, 0, .35); }
.orga-carte-responsable .orga-portrait { width: 64px; height: 64px; }

/* Le président : seule carte blanche, médaillon cerclé de jaune. */
.orga-carte.orga-carte-tete {
  gap: 20px; padding: 16px 32px 16px 16px;
  background: var(--blanc); border-color: transparent; box-shadow: 0 28px 60px -24px rgba(0, 0, 0, .65);
}
.orga-carte-tete .orga-portrait,
.orga-carte-tete:hover .orga-portrait { width: 88px; height: 88px; box-shadow: 0 0 0 3px var(--jaune); }
.orga-carte-tete .orga-nom { font-size: 1.3rem; color: var(--bleu); }
.orga-carte-tete .orga-role { font-size: .95rem; color: var(--gris-texte); }

/* L'équipe d'une agence pend sous son chef d'agence : le trait part du milieu de son
   médaillon (1 px de bordure + 12 px de marge + 32 px de rayon = 45 px) et dessert
   chaque carte d'une branche. Les services supports, sans responsable, n'en ont pas. */
.orga-equipe { list-style: none; margin: 12px 0 0; padding: 0 0 0 64px; display: grid; gap: 12px; }
.orga-equipe > li { position: relative; }
.orga-equipe > li::before, .orga-equipe > li::after { content: ""; position: absolute; left: -20px; background: var(--trait); }
.orga-equipe > li::before { top: -12px; width: 2px; height: calc(100% + 12px); transform-origin: top; }
.orga-equipe > li:last-child::before { height: calc(50% + 13px); }
.orga-equipe > li::after { top: 50%; width: 20px; height: 2px; margin-top: -1px; transform-origin: left; }
.orga-equipe-libre { margin-top: 0; padding-left: 0; }
.orga-equipe-libre > li::before, .orga-equipe-libre > li::after { display: none; }

/* Entrée : le président, la tige, la barre qui s'ouvre depuis le centre, les descentes, puis
   chaque pôle (titre, chef d'agence, branche par branche) avec 110 ms de décalage. */
@keyframes orga-trace-v { from { scale: 1 0; } }
@keyframes orga-trace-h { from { scale: 0 1; } }
@keyframes orga-pose { from { opacity: 0; translate: 0 14px; } }
@keyframes orga-glisse { from { opacity: 0; translate: -14px 0; } }

.orga.reveal-vu { animation: none; }
.orga.reveal-vu .orga-carte-tete { animation: orga-pose .7s var(--courbe) both; }
.orga.reveal-vu .orga-tete::after { animation: orga-trace-v .3s cubic-bezier(.5, 0, .5, 1) .35s both; }
.orga.reveal-vu .orga-poles::before { animation: orga-trace-h .55s cubic-bezier(.6, 0, .3, 1) .62s both; }
.orga.reveal-vu .orga-pole::before { animation: orga-trace-v .3s cubic-bezier(.5, 0, .5, 1) 1.1s both; }
.orga.reveal-vu .orga-pole { --t: calc(1.25s + var(--p) * 110ms); }
.orga.reveal-vu .orga-pole-titre { animation: orga-pose .55s var(--courbe) var(--t) both; }
.orga.reveal-vu .orga-carte-responsable { animation: orga-pose .6s var(--courbe) calc(var(--t) + 110ms) both; }
.orga.reveal-vu .orga-equipe > li::before { animation: orga-trace-v .2s linear calc(var(--t) + 60ms + var(--i) * 120ms) both; }
.orga.reveal-vu .orga-equipe > li::after { animation: orga-trace-h .2s ease-out calc(var(--t) + 140ms + var(--i) * 120ms) both; }
.orga.reveal-vu .orga-equipe .orga-carte { animation: orga-glisse .6s var(--courbe) calc(var(--t) + 200ms + var(--i) * 120ms) both; }
.orga.reveal-vu .orga-equipe-libre .orga-carte { animation-name: orga-pose; }

/* Sous 1100 px, trois colonnes ne laissent plus la place aux fonctions : les pôles
   s'empilent et les traits entre le président et les pôles disparaissent. */
@media (max-width: 1099px) {
  .orga-poles { grid-template-columns: 1fr; gap: 32px; max-width: 560px; margin: 0 auto; padding-top: 0; }
  .orga-tete { padding-bottom: 36px; }
  .orga-tete::after, .orga-poles::before, .orga-pole::before { display: none; }
}
@media (max-width: 700px) {
  .orga-carte.orga-carte-tete { gap: 16px; padding: 14px 22px 14px 14px; }
  .orga-carte-tete .orga-portrait, .orga-carte-tete:hover .orga-portrait { width: 72px; height: 72px; }
  .orga-carte-tete .orga-nom { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .orga *, .orga *::before, .orga *::after { animation: none !important; transition: none; }
}
@media print {
  .section-orga, .orga-nom { color: var(--encre); }
  .orga-role, .section-orga .lead { color: var(--gris-texte); }
}

/* --- Bande CTA ------
------------------------------------------------------ */
.cta-band {
  background: linear-gradient(120deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
  color: var(--blanc);
  padding: 56px 0;
}
.cta-band h2 { margin-bottom: .3em; }
.cta-band p { color: rgba(255, 255, 255, .8); margin: 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-solo { display: flex; align-items: center; }

/* --- Contact -------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
.contact-aside h2 { font-size: 1.5rem; }
.contact-aside h3 { margin-top: 1.6em; }

.agences { display: grid; gap: 20px; }
.agence-card { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--radius); padding: 22px; }
.agence-card img { width: 100%; height: 170px; object-fit: cover; display: block; border-radius: 10px; margin-bottom: 16px; }
.agence-card h3 { margin-top: 0; }
.agence-card address { font-style: normal; margin-bottom: 1em; }
.agence-card .kicker { margin-bottom: .3em; }
.phones { display: flex; gap: 12px; flex-wrap: wrap; }

.hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours th { text-align: left; font-weight: 600; padding: 8px 0; border-bottom: 1px solid var(--bordure); }
.hours td { text-align: right; padding: 8px 0; color: var(--gris-texte); border-bottom: 1px solid var(--bordure); white-space: nowrap; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }

/* --- Formulaire ------------------------------------------------------------- */
.form { margin-top: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .95rem; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--encre); background: var(--blanc);
  padding: .75em .9em; border: 1px solid #cfd6e2; border-radius: 10px;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 9em; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid rgba(247, 181, 0, .5); outline-offset: 1px; border-color: var(--bleu);
}
.field .is-invalid { border-color: var(--erreur); }

.field-consent { flex-direction: row; align-items: flex-start; gap: 12px; margin-top: 22px; }
.field-consent input { width: 20px; height: 20px; flex: none; margin: 3px 0 0; accent-color: var(--bleu); }
.field-consent label { font-weight: 400; font-size: .9rem; color: var(--gris-texte); }

.form-errors {
  background: #fdecea; border: 1px solid #f5c2c0; color: #7a1f1a;
  border-radius: 10px; padding: 14px 18px; margin-bottom: 22px;
}
.form-errors p { margin: 0; }
.form-errors ul { margin: .4em 0 0; padding-left: 1.2em; }

/* Champ piège à robots : hors écran, jamais dans le parcours clavier. */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.form-actions .btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.form-note { font-size: .88rem; color: var(--gris-texte); }

/* --- Prose (mentions légales, vie privée) ------------------------------------ */
.prose { max-width: 46em; }
.prose h2 { font-size: 1.3rem; margin-top: 2em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }
.prose a, .note a, figcaption a, .form-note a, .field-consent a { text-decoration: underline; }

/* --- Footer ---------------------------------------------------------------- */
.site-footer { background: var(--bleu-fonce); color: rgba(255, 255, 255, .78); padding: 56px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.footer-brand { font-size: 1.3rem; font-weight: 800; color: var(--blanc); margin-bottom: .4em; }
.footer-tagline { font-size: .92rem; }
.footer-title { font-weight: 700; color: var(--jaune); margin-bottom: .8em; font-size: .95rem; }
.site-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; display: block; padding: 2px 0; }
.site-footer a:hover { color: var(--jaune); }
.site-footer p { font-size: .92rem; }
.site-footer p a, .footer-legal a { text-decoration: underline; }
.footer-legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .85rem;
}
.footer-legal a { display: inline; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
  .split, .split-media, .hero-inner, .contact-layout { grid-template-columns: 1fr; gap: 36px; }
  .hero-media .hero-media-second { top: -7%; left: 4%; width: 42%; }
  .cards, .cards-3, .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .photo-grid, .photo-grid-4, .gallery { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Le menu (9 entrées) ne tient à l'horizontale qu'au-delà de ~1100px : en dessous, burger.
   Sinon le menu déborde et écrase le logo (bug « logo pété » en tablette/petit portable). */
@media (max-width: 1120px) {
  .brand img { height: 36px; }

  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px;
    background: none; border: 1px solid #dce3ef; border-radius: 10px; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2.5px; background: var(--bleu); border-radius: 2px; }

  .site-nav {
    display: none;
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--blanc); border-bottom: 1px solid var(--bordure);
    padding: 12px 24px 20px;
    box-shadow: 0 20px 30px -20px rgba(14, 42, 92, .3);
  }
  .site-nav.is-open { display: flex; }
  .nav-link { padding: .8em .9em; font-size: .95rem; }
  .nav-group { display: flex; flex-direction: column; }
  .nav-group-label {
    display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gris-texte); padding: .9em .9em .3em;
  }
  .nav-cta { margin: 10px 0 0; text-align: center; }
}

@media (max-width: 700px) {
  .section { padding: 52px 0; }
  .hero { padding: 56px 0 52px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .cards, .cards-3, .cards-4, .cards-metiers { grid-template-columns: 1fr; }
  .metiers-lies { grid-template-columns: 1fr; }
  .photo-grid, .photo-grid-2, .photo-grid-4, .gallery, .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* --- Plan du réseau (fond du héros de l'accueil) ----------------------------
   Le vrai réseau routier de la zone d'intervention (PlanReseau, pages/_plan_reseau) :
   autoroutes, nationales et départementales en traits blancs très légers, itinéraires
   réels du siège vers l'agence d'Annezin, Saint-Omer et Boulogne-sur-Mer en jaune.
   Le plan est ancré sur le siège : `--sx`/`--sy` placent le siège dans la colonne du
   contenu, `--pw` fixe la largeur du plan (donc l'échelle) ; `--ox`/`--oy` (posées par la
   vue) disent où est le siège dans le plan. Changer de cadrage, c'est changer ces trois
   variables, rien d'autre. */
.plan-reseau {
  /* Ordinateur : le siège dans la gouttière entre le texte et la photo, juste au-dessus de
     son coin haut (la photo est centrée verticalement, d'où le calcul depuis 50 %). L'échelle
     suit la largeur de l'écran pour que l'agence d'Annezin tombe dans la marge droite. */
  --sx: 56.8%; --sy: calc(50% - 172px); --pw: clamp(1100px, calc(50vw + 530px), 1320px);
  position: absolute; inset: 0; pointer-events: none;
  /* Sous le texte, le plan passe au second plan : il s'estompe vers la gauche. */
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3) calc(50% - 60px), #000 calc(50% + 120px));
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3) calc(50% - 60px), #000 calc(50% + 120px));
}
/* Sans marge à droite de la photo, l'agence ne tiendrait qu'à moitié au bord de l'écran :
   on resserre l'échelle pour qu'elle passe franchement derrière la photo. */
@media (max-width: 1179px) { .plan-reseau { --pw: 80vw; } }
/* Téléphone et tablette : le texte occupe toute la largeur. Le siège se pose dans la marge
   haute, à droite ; le réseau s'étend derrière le texte, baissé d'un cran, et les tracés
   partent presque aussitôt hors de l'écran — le texte reste le premier plan. */
@media (max-width: 900px) {
  .plan-reseau {
    --sx: 80%; --sy: 30px; --pw: 820px;
    -webkit-mask-image: none; mask-image: none; opacity: .75;
  }
  .plan-ville { display: none; }
}
.plan-cadre { position: relative; max-width: 1120px; height: 100%; margin: 0 auto; }
.plan {
  position: absolute; left: var(--sx); top: var(--sy); width: var(--pw); aspect-ratio: var(--ratio);
  translate: calc(var(--ox) * -1) calc(var(--oy) * -1);
  transform-origin: var(--ox) var(--oy);
  animation: plan-souffle 30s ease-in-out 3.6s 2 alternate;
}
/* Vignettage : le plan se fond dans le bleu vers ses bords. */
.plan-carte {
  position: absolute; inset: 0;
  clip-path: circle(0 at var(--ox) var(--oy));
  animation: plan-devoile 2.4s cubic-bezier(.3, .6, .2, 1) .35s forwards;
  -webkit-mask-image: radial-gradient(ellipse 62% 66% at 46% 46%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 66% at 46% 46%, #000 58%, transparent 100%);
}
.plan svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.plan-voies path {
  fill: none; stroke: var(--blanc); stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.plan-v-s { stroke-opacity: .11; stroke-width: .8px; }
.plan-v-p { stroke-opacity: .2; stroke-width: 1.1px; }
.plan-v-a { stroke-opacity: .32; stroke-width: 1.7px; }
/* Tracés jaunes : `pathLength="1"`, un tiret de longueur 1 qui glisse de 1,02 à 0. Le
   décalage de départ à 1,02 (et non 1) empêche le bout arrondi du tiret de pointer au siège
   avant l'heure ; l'écart de 2 empêche un second tiret d'apparaître en bout de tracé. */
.plan-traces path {
  fill: none; stroke: var(--jaune); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  stroke-opacity: .9; stroke-dasharray: 1 2; stroke-dashoffset: 1.02;
  animation: plan-trace var(--duree) cubic-bezier(.45, 0, .3, 1) var(--depart) forwards;
}

.plan-repere {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: var(--jaune); box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), 0 6px 18px rgba(0, 0, 0, .4);
  animation: plan-pose .6s cubic-bezier(.3, 1.6, .5, 1) .1s both;
}
.plan-repere::before, .plan-repere::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--jaune); opacity: 0;
  animation: plan-pouls 3.2s ease-out 2.2s 4;
}
.plan-repere::after { animation-delay: 3.8s; }
.plan-repere-agence {
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 5px 14px rgba(0, 0, 0, .4);
  animation-delay: var(--arrivee);
}
.plan-repere-agence::before { animation-delay: calc(var(--arrivee) + .5s); }
.plan-repere-agence::after { animation-delay: calc(var(--arrivee) + 2.1s); }
/* L'onde qui accompagne le dévoilement : un anneau qui part du siège, au bord du plan qui
   se découvre (même durée, même courbe). Animée en taille et non en `scale`, qui aurait
   grossi sa bordure avec elle. */
.plan-onde {
  position: absolute; left: var(--ox); top: var(--oy); width: 0; height: 0; border-radius: 50%;
  border: 1.5px solid var(--jaune); translate: -50% -50%; opacity: 0;
  animation: plan-onde 2.4s cubic-bezier(.3, .6, .2, 1) .35s forwards;
}

.plan-ville {
  position: absolute; translate: 11px -50%; white-space: nowrap;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.plan-ville::before {
  content: ""; position: absolute; left: -11px; top: 50%; width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: rgba(255, 255, 255, .8);
}
/* Béthune touche Annezin : le repère de l'agence tient lieu de point, et le nom passe
   au-dessus, calé à gauche du centre-ville — à droite, il sortirait de l'écran ; dessous, il
   couvrirait l'arrivée du tracé. Sous 1300 px, la marge droite est trop étroite pour lui. */
.plan-ville-bethune { translate: calc(-100% + 8px) calc(-100% - 10px); }
.plan-ville-bethune::before { display: none; }
@media (max-width: 1299px) { .plan-ville-bethune { display: none; } }

@keyframes plan-devoile { to { clip-path: circle(100% at var(--ox) var(--oy)); } }
@keyframes plan-onde {
  0% { opacity: .9; width: 0; height: 0; }
  70% { opacity: .22; }
  100% { opacity: 0; width: calc(var(--pw) * var(--onde)); height: calc(var(--pw) * var(--onde)); }
}
@keyframes plan-trace { to { stroke-dashoffset: 0; } }
@keyframes plan-pose { from { scale: 0; opacity: 0; } }
@keyframes plan-pouls { 0% { scale: 1; opacity: .7; } 100% { scale: 3.2; opacity: 0; } }
@keyframes plan-souffle { to { scale: 1.05; } }

/* --- Mouvement : entrée du héros et apparitions au défilement --------------------
   Le texte du héros monte en cascade, en CSS pur (sans script, il entre quand même) ; la
   photo du porte-engin, LCP, ne bouge pas. Au défilement, ducrocqtp.js ne masque
   (.reveal-attente) que les blocs [data-reveal] encore sous la ligne de flottaison, puis
   les passe en .reveal-vu à leur entrée dans l'écran : sans script, tout reste visible,
   et rien n'est masqué à l'impression (@media screen). */
@keyframes monte { from { opacity: 0; translate: 0 18px; } }
.hero-entre { animation: monte .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
@media screen { .reveal-attente { opacity: 0; } }
.reveal-vu { animation: monte .8s cubic-bezier(.2, .7, .2, 1) var(--reveal-delai, 0ms) both; }

@media (prefers-reduced-motion: reduce) {
  .plan, .plan-carte, .plan-onde, .plan-repere, .plan-repere::before, .plan-repere::after,
  .plan-traces path, .hero-entre, .reveal-vu { animation: none; }
  .plan-carte { clip-path: none; }
  .plan-traces path { stroke-dashoffset: 0; }
  .plan-onde { display: none; }
}

@media print {
  .plan-reseau { display: none; }
}