/* ==========================================================================
   M&MSG — feuille de style
   Charte (cahier des charges) : bleus institutionnels #0F172A / #1E3A8A,
   bleu ciel #38BDF8 (boutons d'action et touches de couleur).
   ========================================================================== */

:root {
  /* 3 bleus seulement (charte) + teintes claires dérivées du bleu de marque */
  --marine: #1E3A8A;      /* bleu de marque : surfaces bleues, accents sur fond clair */
  --marine-900: #0F172A;  /* bleu nuit : TOUTES les surfaces bleues + texte foncé */
  --marine-700: #1E293B;  /* survol des surfaces bleu nuit */
  --ciel: #38BDF8;        /* bleu ciel : uniquement sur fond bleu */
  --beton: #EEF2FA;       /* fond clair (teinte de #1E3A8A) */
  --beton-2: #D5DDF0;     /* bordures */
  --beton-3: #B4C2E2;     /* bordures marquées, numéros discrets */
  --encre: #0F172A;
  --texte: #3B4559;
  --texte-doux: #5F6B80;
  --blanc: #FFFFFF;
  --ok: #2F7D4F;
  --erreur: #B3261E;

  --police-titre: "Barlow Condensed", "Arial Narrow", sans-serif;
  --police-texte: "Barlow", "Segoe UI", Arial, sans-serif;

  --largeur: 1200px;
  --gouttiere: clamp(16px, 4vw, 32px);
  --rayon: 4px;
  --ombre: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .08);
  --transition: 200ms cubic-bezier(.2, .7, .3, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texte);
  background: var(--blanc);
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--marine); text-underline-offset: 3px; }
a:hover { color: var(--marine-900); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }

h1, h2, h3 {
  font-family: var(--police-titre);
  color: var(--encre);
  line-height: 1.08;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: .005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.4rem; font-weight: 600; }

:focus-visible { outline: 3px solid var(--ciel); outline-offset: 3px; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lien-evitement {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--marine-900); color: var(--blanc); padding: 10px 16px;
}
.lien-evitement:focus { top: 12px; color: var(--blanc); }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* --- Boutons ------------------------------------------------------------ */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.5em;
  font-family: var(--police-titre); font-size: 1.15rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--rayon);
  cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.bouton:active { transform: translateY(1px); }
.bouton--accent { background: var(--ciel); color: var(--marine-900); }
.bouton--accent:hover { background: var(--ciel); filter: brightness(.9); color: var(--marine-900); }
.bouton--marine { background: var(--marine-900); color: var(--blanc); }
.bouton--marine:hover { background: var(--marine-700); color: var(--blanc); }
.bouton--contour-clair { border-color: rgba(255,255,255,.6); color: var(--blanc); }
.bouton--contour-clair:hover { border-color: var(--blanc); background: rgba(255,255,255,.08); color: var(--blanc); }
.bouton--plein { width: 100%; }

.lien-fleche {
  font-family: var(--police-titre); font-weight: 600; font-size: 1.05rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--marine);
  display: inline-flex; align-items: center; gap: .4em;
}
.lien-fleche::after { content: "→"; transition: transform var(--transition); }

.surtitre {
  font-family: var(--police-titre); font-weight: 600; font-size: 1rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--marine);
  margin-bottom: .75em; display: flex; align-items: center; gap: .75em;
}
.surtitre::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.surtitre--clair { color: var(--ciel); }

/* --- En-tête ------------------------------------------------------------ */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--beton-2);
  transition: box-shadow var(--transition);
}
.entete.est-defile { box-shadow: 0 6px 20px rgba(15,23,42,.08); }
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }

.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--marine); min-width: 0; }
.marque img { width: 44px; height: 44px; flex: none; }
.marque__texte { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.marque__sigle { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.55rem; letter-spacing: .01em; }
.marque__nom { font-size: .72rem; color: var(--texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.navigation { display: flex; align-items: center; gap: 28px; }
.navigation__cta { white-space: nowrap; }
.navigation ul { list-style: none; display: flex; gap: 26px; }
.navigation a:not(.bouton) {
  white-space: nowrap;
  font-family: var(--police-titre); font-weight: 600; font-size: 1.15rem;
  letter-spacing: .03em; text-decoration: none; color: var(--encre);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.navigation a:not(.bouton):hover { color: var(--marine); border-bottom-color: var(--beton-3); }
.navigation a[aria-current="page"] { color: var(--marine); border-bottom-color: var(--ciel); }

.menu-bouton {
  display: none; width: 48px; height: 48px; border: 0; background: transparent;
  cursor: pointer; padding: 12px; margin-right: -12px;
  position: relative; z-index: 2; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.menu-bouton__barres,
.menu-bouton__barres::before,
.menu-bouton__barres::after {
  display: block; width: 24px; height: 2px; background: var(--marine);
  position: relative; transition: transform var(--transition), background var(--transition);
}
.menu-bouton__barres::before, .menu-bouton__barres::after { content: ""; position: absolute; left: 0; }
.menu-bouton__barres::before { top: -7px; }
.menu-bouton__barres::after { top: 7px; }
.menu-bouton[aria-expanded="true"] .menu-bouton__barres { background: transparent; }
.menu-bouton[aria-expanded="true"] .menu-bouton__barres::before { transform: translateY(7px) rotate(45deg); }
.menu-bouton[aria-expanded="true"] .menu-bouton__barres::after { transform: translateY(-7px) rotate(-45deg); }

/* Sous-titre du logo sur deux lignes, pour tenir à côté des 7 entrées du menu. */
.marque__nom {
  display: block; max-width: 150px; margin-top: 2px;
  font-size: .68rem; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip;
}
@media (min-width: 1241px) { .navigation ul { gap: 22px; } .navigation { gap: 24px; } }

/* Menu ☰ sous 1240 px : 7 entrées + bouton ne tiennent plus en dessous. */
@media (max-width: 1240px) {
  .menu-bouton { display: block; }
  .navigation {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanc); border-bottom: 1px solid var(--beton-2);
    padding: 8px var(--gouttiere) 24px;
    box-shadow: 0 16px 24px rgba(15,23,42,.1);
    display: none;
  }
  .navigation.est-ouverte { display: flex; }
  .navigation ul { flex-direction: column; gap: 0; }
  .navigation li a:not(.bouton) { display: block; padding: 14px 0; border-bottom: 1px solid var(--beton); font-size: 1.3rem; }
  .navigation a[aria-current="page"] { border-bottom-color: var(--beton); color: var(--marine); }
  .navigation__cta { margin-top: 16px; }
}
/* Sans JavaScript, le menu mobile reste visible. */
html:not(.js) .menu-bouton { display: none; }
html:not(.js) .navigation { position: static; display: flex; box-shadow: none; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  background-color: var(--marine-900);
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  color: rgba(255,255,255,.85);
  overflow: hidden;
}
.hero__grille {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
  padding-block: clamp(56px, 9vw, 112px) clamp(48px, 7vw, 88px);
}
.hero h1 { color: var(--blanc); }
.hero h1 .ligne--accent { color: var(--ciel); }
.hero__intro { font-size: 1.2rem; max-width: 34em; color: rgba(255,255,255,.82); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero__visuel { position: relative; }

.usine { width: 100%; height: auto; }
.usine__trait path, .usine__trait rect {
  fill: none; stroke: rgba(255,255,255,.78); stroke-width: 2; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.usine__trait .usine__fin { stroke: rgba(255,255,255,.3); stroke-width: 1; }
.usine__cote path { stroke: rgba(56,189,248,.55); stroke-width: 1; }
.usine__flamme { mix-blend-mode: screen; animation: allumage .8s ease 2.6s both, flamme 3.2s ease-in-out 3.4s infinite; transform-origin: 508px 342px; }
@keyframes flamme { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .usine__flamme { animation: none; } }

.hero__plaque { background: rgba(15,23,42,.28); border-top: 1px solid rgba(255,255,255,.1); }
.plaque { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); }
.plaque li + li { border-left: 1px solid rgba(255,255,255,.1); }
.plaque a {
  display: flex; align-items: baseline; gap: 10px; padding: 20px 18px;
  color: var(--blanc); text-decoration: none; font-family: var(--police-titre);
  font-size: 1.15rem; font-weight: 600; letter-spacing: .02em; line-height: 1.2;
  transition: background var(--transition);
}
.plaque a:hover { background: rgba(255,255,255,.06); color: var(--blanc); }
.plaque__num { color: var(--ciel); font-size: .95rem; }

@media (max-width: 920px) {
  .hero__grille { grid-template-columns: 1fr; }
  .hero__visuel { max-width: 560px; }
  .plaque { grid-template-columns: 1fr 1fr; }
  .plaque li + li { border-left: 0; }
  .plaque li { border-top: 1px solid rgba(255,255,255,.1); }
  .plaque li:nth-child(even) { border-left: 1px solid rgba(255,255,255,.1); }
}
@media (max-width: 520px) {
  .plaque { grid-template-columns: 1fr; }
  .plaque li:nth-child(even) { border-left: 0; }
  .plaque a { padding: 14px 4px; }
}

/* --- Sections ----------------------------------------------------------- */
.section { padding-block: clamp(64px, 9vw, 112px); }
.section--beton { background: var(--beton); }
.section--marine { background: var(--marine-900); color: rgba(255,255,255,.85); }
.section--marine h2, .section--marine h3 { color: var(--blanc); }
.section--marine a:not(.bouton) { color: var(--blanc); }

.entete-section { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.entete-section__intro { font-size: 1.15rem; color: var(--texte-doux); }

.deux-colonnes { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.deux-colonnes--texte { grid-template-columns: 1fr 1.4fr; }
@media (max-width: 860px) { .deux-colonnes, .deux-colonnes--texte { grid-template-columns: 1fr; } }

.texte-long { font-size: 1.1rem; }
.texte-long h2 { font-size: 1.8rem; margin-top: 1.4em; }
.texte-long h2:first-child { margin-top: 0; }
.texte-long--etroit { max-width: 760px; }

/* --- Cartes services ---------------------------------------------------- */
.cartes-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--beton-2); border: 2px solid var(--beton-2); }
.carte-service {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 36px 32px 32px; background: var(--blanc);
  text-decoration: none; color: var(--texte);
  transition: background var(--transition);
}
.carte-service .icone { color: var(--marine); margin-bottom: 18px; }
.carte-service h3 { margin-bottom: .35em; }
.carte-service p { flex: 1; }
.carte-service__num {
  position: absolute; top: 28px; right: 28px;
  font-family: var(--police-titre); font-weight: 700; font-size: 1.1rem; color: var(--beton-3);
}
.carte-service::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--ciel); transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.carte-service:hover { color: var(--texte); background: #F7F9FD; }
.carte-service:hover::before { transform: scaleX(1); }
.carte-service:hover .lien-fleche::after { transform: translateX(4px); }
.carte-service--cta { background: var(--marine-900); color: rgba(255,255,255,.85); }
.carte-service--cta h3, .carte-service--cta .lien-fleche { color: var(--blanc); }
.carte-service--cta:hover { background: var(--marine-700); color: rgba(255,255,255,.85); }
@media (max-width: 980px) { .cartes-services { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cartes-services { grid-template-columns: 1fr; } .carte-service { padding: 28px 22px; } }

/* --- Chiffres ----------------------------------------------------------- */
.chiffres { padding-block: 56px; }
.chiffres__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
.chiffre { display: flex; flex-direction: column; border-left: 2px solid var(--ciel); padding-left: 18px; }
.chiffre__valeur { font-family: var(--police-titre); font-size: 3rem; font-weight: 700; color: var(--blanc); line-height: 1; }
.chiffre__libelle { margin-top: 6px; }

/* --- Engagements -------------------------------------------------------- */
.engagements { list-style: none; display: grid; gap: 0; }
.engagement { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid var(--beton-3); }
.engagement:last-child { border-bottom: 1px solid var(--beton-3); }
.engagement h3 { font-size: 1.35rem; margin-bottom: .25em; }
.engagement p { margin: 0; }
.engagement__repere { font-family: var(--police-titre); font-weight: 700; font-size: 1.5rem; color: var(--marine); line-height: 1.1; }
.engagements--grille { grid-template-columns: 1fr 1fr; column-gap: 48px; }
.engagements--grille .engagement:nth-last-child(2) { border-bottom: 1px solid var(--beton-3); }
@media (max-width: 760px) {
  .engagements--grille { grid-template-columns: 1fr; }
  .engagements--grille .engagement:nth-last-child(2) { border-bottom: 0; }
}

/* --- Méthode ------------------------------------------------------------ */
.methode { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; counter-reset: etape; position: relative; }
.methode::before { content: ""; position: absolute; top: 23px; left: 24px; right: 24px; height: 2px; background: repeating-linear-gradient(90deg, var(--beton-3) 0 8px, transparent 8px 14px); }
.methode__etape { position: relative; z-index: 1; }
.methode__num {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px;
  border-radius: 50%; background: var(--marine); color: var(--blanc);
  font-family: var(--police-titre); font-weight: 700; font-size: 1.3rem;
  box-shadow: 0 0 0 6px var(--blanc); position: relative;
}
.methode h3 { font-size: 1.35rem; margin-bottom: .3em; }
.methode p { font-size: 1rem; margin: 0; }
@media (max-width: 920px) {
  .methode { grid-template-columns: 1fr; gap: 0; }
  .methode::before { top: 24px; bottom: 24px; left: 23px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--beton-3) 0 8px, transparent 8px 14px); }
  .methode__etape { display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; padding-bottom: 28px; }
  .methode__num { grid-row: span 2; margin: 0; }
}

/* --- Références --------------------------------------------------------- */
.references { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.references li { padding: 12px 20px; background: var(--blanc); border: 1px solid var(--beton-2); font-family: var(--police-titre); font-weight: 600; font-size: 1.2rem; color: var(--marine); }

/* --- Appel à l'action --------------------------------------------------- */
.section--appel { background: var(--beton); border-top: 6px solid var(--marine); padding-block: clamp(48px, 7vw, 80px); }
.appel { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.appel h2 { margin-bottom: .2em; }
.appel p { margin: 0; max-width: 40em; font-size: 1.1rem; }

/* --- Bande urgence ------------------------------------------------------ */
.bande-urgence { background: var(--marine-900); color: rgba(255,255,255,.8); border-bottom: 1px solid rgba(255,255,255,.15); }
.bande-urgence__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 28px; }
.bande-urgence p { margin: 0; }
.bande-urgence__titre { font-family: var(--police-titre); font-weight: 700; font-size: 1.6rem; color: var(--blanc); }
.bande-urgence__titre::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ciel); margin-right: 12px; vertical-align: middle; box-shadow: 0 0 0 4px rgba(56,189,248,.3); }

/* --- Pied de page ------------------------------------------------------- */
.pied { background: var(--marine-900); color: rgba(255,255,255,.7); font-size: .98rem; }
.pied a { color: rgba(255,255,255,.85); text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied ul { list-style: none; display: grid; gap: 8px; }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-block: 56px 40px; }
.pied__logo { filter: brightness(0) invert(1); opacity: .9; margin-bottom: 12px; }
.pied__sigle { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.6rem; color: var(--blanc); margin: 0; }
.pied__signature { color: var(--ciel); }
.pied__titre { font-family: var(--police-titre); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blanc); margin-bottom: 14px; }
.pied__contact li { overflow-wrap: anywhere; }
.pied__bas { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: .9rem; }
.pied__bas p { margin: 0; }
@media (max-width: 900px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; } }

/* --- Bandeau de page intérieure ----------------------------------------- */
.bandeau {
  background-color: var(--marine-900);
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  color: rgba(255,255,255,.82);
  padding-block: clamp(40px, 6vw, 72px) clamp(44px, 6vw, 80px);
  border-bottom: 6px solid var(--ciel);
}
.bandeau h1 { color: var(--blanc); margin-bottom: .25em; }
.bandeau__intro { font-size: 1.2rem; max-width: 40em; margin: 0; }
.bandeau--plein { min-height: 60vh; display: flex; align-items: center; }
.fil { display: flex; flex-wrap: wrap; gap: 8px; font-size: .92rem; margin-bottom: 28px; color: rgba(255,255,255,.6); }
.fil a { color: rgba(255,255,255,.8); }
.fil a:hover { color: var(--blanc); }

/* --- Page services ------------------------------------------------------ */
.liste-services { display: grid; gap: 0; }
.ligne-service {
  display: grid; grid-template-columns: 120px 1.3fr 1fr auto; gap: 32px; align-items: start;
  padding: 40px 0; border-top: 1px solid var(--beton-2); scroll-margin-top: 100px;
}
.ligne-service:last-child { border-bottom: 1px solid var(--beton-2); }
.ligne-service__tete { display: flex; flex-direction: column; gap: 12px; color: var(--marine); }
.ligne-service__num { font-family: var(--police-titre); font-weight: 700; font-size: 2.6rem; color: var(--beton-3); line-height: 1; }
.ligne-service h2 { font-size: 2rem; margin-bottom: .2em; }
.ligne-service__accroche { font-weight: 600; color: var(--marine); }
.ligne-service__points { list-style: none; display: grid; gap: 10px; font-size: .98rem; }
.ligne-service__points li { padding-left: 18px; position: relative; }
.ligne-service__points li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 2px; background: var(--marine); }
@media (max-width: 1000px) {
  .ligne-service { grid-template-columns: 80px 1fr; }
  .ligne-service__points, .ligne-service__actions { grid-column: 2; }
}
@media (max-width: 560px) {
  .ligne-service { grid-template-columns: 1fr; gap: 16px; }
  .ligne-service__tete { flex-direction: row; align-items: center; justify-content: space-between; }
  .ligne-service__points, .ligne-service__actions { grid-column: auto; }
}

.faq details { border-top: 1px solid var(--beton-3); }
.faq details:last-child { border-bottom: 1px solid var(--beton-3); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--police-titre); font-weight: 600; font-size: 1.3rem; color: var(--encre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--marine); transition: transform var(--transition); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding-bottom: 20px; margin: 0; }

/* --- Fiche service ------------------------------------------------------ */
.service { display: grid; grid-template-columns: 1fr 360px; gap: clamp(32px, 6vw, 72px); align-items: start; }
.service__intro { font-size: 1.25rem; color: var(--encre); line-height: 1.6; margin-bottom: 2em; }
.service__principal h2 { font-size: 1.9rem; margin-top: 1.6em; }
.service__aside { position: sticky; top: 100px; display: grid; gap: 24px; }
@media (max-width: 920px) { .service { grid-template-columns: 1fr; } .service__aside { position: static; } }

.coches { list-style: none; display: grid; gap: 12px; }
.coches li { position: relative; padding-left: 34px; }
.coches li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px;
  background: var(--marine);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.coches--compact { gap: 8px; font-size: .98rem; }
.coches--compact li::before { width: 18px; height: 18px; }

.etiquettes { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.etiquettes li { padding: 8px 14px; background: var(--beton); border-left: 3px solid var(--marine); font-weight: 500; font-size: .98rem; color: var(--encre); }

.benefices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.benefice { padding: 24px; background: var(--beton); border-top: 3px solid var(--marine); }
.benefice h3 { font-size: 1.3rem; }
.benefice p { margin: 0; font-size: .98rem; }
@media (max-width: 760px) { .benefices { grid-template-columns: 1fr; } }

.encart { padding: 28px; background: var(--beton); border: 1px solid var(--beton-2); }
.encart .icone { color: var(--marine); margin-bottom: 12px; }
.encart__titre { font-family: var(--police-titre); font-weight: 700; font-size: 1.6rem; color: var(--encre); line-height: 1.1; margin-bottom: .5em; }
.encart__tel { display: block; text-align: center; margin-top: 14px; font-weight: 600; }
.encart--marine { background: var(--marine-900); border-color: var(--marine-900); color: rgba(255,255,255,.85); }
.encart--marine .encart__titre { color: var(--blanc); }
.encart--marine a { color: var(--blanc); }

.autres__titre { font-family: var(--police-titre); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 8px; }
.autres ul, .liste-services-courte { list-style: none; }
.autres a, .liste-services-courte a {
  display: flex; gap: 14px; align-items: baseline; padding: 14px 0;
  border-bottom: 1px solid var(--beton-2); text-decoration: none;
  font-family: var(--police-titre); font-weight: 600; font-size: 1.2rem; color: var(--encre);
}
.autres a span, .liste-services-courte a span { color: var(--marine); font-size: 1rem; }
.autres a:hover { color: var(--marine); }
.liste-services-courte a { border-bottom-color: rgba(255,255,255,.15); font-size: 1.45rem; padding: 18px 0; }
.section--marine .liste-services-courte a { color: var(--blanc); }
.section--marine .liste-services-courte a span { color: var(--ciel); }
.liste-services-courte a:hover { padding-left: 6px; transition: padding var(--transition); }

/* --- Contact ------------------------------------------------------------ */
.contact { display: grid; grid-template-columns: 1fr 380px; gap: clamp(32px, 6vw, 72px); align-items: start; scroll-margin-top: 100px; }
.contact__coordonnees { display: grid; gap: 24px; }
@media (max-width: 920px) { .contact { grid-template-columns: 1fr; } }

.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-bottom: 20px; }
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ--large { grid-column: 1 / -1; }
@media (max-width: 620px) { .champs { grid-template-columns: 1fr; } }
.champ label { font-weight: 600; color: var(--encre); font-size: .98rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--encre);
  padding: 12px 14px; min-height: 48px;
  background: var(--blanc); border: 1px solid var(--beton-3); border-radius: var(--rayon);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { resize: vertical; min-height: 150px; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--marine); box-shadow: 0 0 0 3px rgba(30,58,138,.18);
}
.champ small { color: var(--texte-doux); font-size: .88rem; }
.champ small.erreur { color: var(--erreur); font-weight: 600; }
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--erreur); }
.champ--case { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; background: var(--beton); border: 1px solid var(--beton-2); border-radius: var(--rayon); }
.champ--case input { width: 20px; height: 20px; accent-color: var(--marine); flex: none; }
.champ--case label { font-weight: 600; }
.requis { color: var(--marine); }
.mention-form { font-size: .92rem; color: var(--texte-doux); }
.erreur-globale { padding: 14px 16px; background: #FCECEA; color: var(--erreur); margin-bottom: 20px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.message-ok { padding: 36px; background: #EDF6F0; border-left: 4px solid var(--ok); }
.message-ok h2 { font-size: 1.9rem; }

.coordonnees { margin: 0 0 20px; }
.coordonnees dt { font-family: var(--police-titre); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; color: var(--ciel); }
.coordonnees dd { margin: 2px 0 16px; overflow-wrap: anywhere; }

/* --- Bouton WhatsApp ---------------------------------------------------- */
.whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: var(--blanc); box-shadow: var(--ombre);
}
.whatsapp:hover { color: var(--blanc); transform: scale(1.05); }

/* --- Apparition au défilement (uniquement si JS actif) ------------------- */
.js .revele { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
.js .revele.est-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .revele { opacity: 1; transform: none; transition: none; } }

/* --- Dirigeant, valeurs ------------------------------------------------- */
.dirigeant { display: flex; align-items: center; gap: 18px; padding: 20px; background: var(--blanc); border: 1px solid var(--beton-2); border-left: 4px solid var(--marine); }
.dirigeant__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px var(--blanc), 0 0 0 5px var(--marine); }
.dirigeant p { margin: 0; }
.dirigeant__role { font-family: var(--police-titre); font-weight: 600; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--marine); }
.dirigeant__nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.5rem; color: var(--encre); line-height: 1.15; }
.dirigeant__fonction { color: var(--texte-doux); }
.texte-long .dirigeant { margin-top: 28px; }

.valeurs { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin-top: 8px; }
.valeurs li { font-family: var(--police-titre); font-weight: 700; font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase; color: var(--marine); padding: 4px 18px; border-left: 3px solid var(--marine); }
.valeurs li:first-child { padding-left: 14px; }
.pied__valeurs { font-family: var(--police-titre); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blanc); }

/* ==========================================================================
   Animations « industrielles »
   - titre qui monte ligne par ligne, entrée du texte du hero ;
   - schéma d'usine tracé trait par trait, puis mise en route : four qui
     tourne, points de contrôle maintenance sur les équipements, fumée, flamme ;
   - icônes de service dessinées à l'apparition ;
   - frise « méthode » qui se remplit comme une ligne de production ;
   - engrenages qui tournent dans les bandeaux de pages.
   Tout est coupé si l'utilisateur a demandé moins d'animations.
   ========================================================================== */
@keyframes monte { to { transform: none; } }
@keyframes entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes apparait { to { opacity: 1; } }
@keyframes allumage { from { opacity: 0; transform: scale(.3); } to { opacity: .85; transform: scale(1); } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes tourne-inverse { to { transform: rotate(-360deg); } }
@keyframes virole { to { transform: translateY(8px); } }
@keyframes fumee {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  15% { opacity: .45; }
  100% { opacity: 0; transform: translate(28px, -64px) scale(2.8); }
}

/* Titre du hero */
h1 .ligne { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
h1 .ligne > span { display: block; transform: translateY(110%); animation: monte .9s cubic-bezier(.2,.8,.2,1) var(--d, 0s) forwards; }
.hero__entree { opacity: 0; animation: entree .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) forwards; }

/* Schéma d'usine : tracé (classes posées par main.js) */
.js .usine .a-tracer { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 1.3s cubic-bezier(.6,.1,.3,1) var(--d, 0s) forwards; }
.js .usine .a-apparaitre { opacity: 0; animation: apparait .8s ease var(--d, 0s) forwards; }

/* Schéma d'usine : mise en route */
.usine__rotation { opacity: 0; animation: apparait .8s ease 2.2s forwards; }
.usine__virole path { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1; stroke-dasharray: 16 22; vector-effect: non-scaling-stroke; }
.usine__virole { animation: virole .9s linear infinite; }
.usine__fumee circle { fill: rgba(255,255,255,.4); opacity: 0; transform-box: fill-box; transform-origin: center; animation: fumee 4.8s ease-out infinite; }
.usine__fumee circle:nth-child(1) { animation-delay: 2.4s; }
.usine__fumee circle:nth-child(2) { animation-delay: 4s; }
.usine__fumee circle:nth-child(3) { animation-delay: 5.6s; }
@keyframes onde { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3.2); } }
@keyframes pointe { 0%, 100% { opacity: .55; } 12% { opacity: 1; } }
.usine__controles { opacity: 0; animation: apparait .6s ease 2.8s forwards; }
.controle__point { fill: var(--ciel); opacity: .55; animation: pointe 5s ease-in-out calc(3s + var(--i) * 1s) infinite; }
.controle__onde { fill: none; stroke: var(--ciel); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: onde 5s ease-out calc(3s + var(--i) * 1s) infinite; }

/* Logo de l'en-tête : l'engrenage tourne au survol */
.marque img { transition: transform .8s cubic-bezier(.3,.7,.2,1); }
.marque:hover img { transform: rotate(90deg); }

/* Icônes dessinées à l'apparition des cartes */
.js .revele .icone > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .revele.est-visible .icone > * { animation: trace 1.2s cubic-bezier(.6,.1,.3,1) .25s forwards; }
.carte-service .icone { transition: transform .5s cubic-bezier(.3,.7,.2,1); }
.carte-service:hover .icone { transform: rotate(-10deg) scale(1.08); }

/* Frise de la méthode */
.methode::after {
  content: ""; position: absolute; top: 23px; left: 24px; right: 24px; height: 2px;
  background: var(--marine); transform-origin: left; transform: scaleX(1);
}
.js .methode::after { transform: scaleX(0); transition: transform 1.8s cubic-bezier(.6,.1,.3,1) .2s; }
.js .methode.est-visible::after { transform: scaleX(1); }
.js .methode .methode__num { background: var(--beton-3); transform: scale(.7); transition: transform .45s cubic-bezier(.3,1.6,.5,1), background .45s ease; }
.js .methode.est-visible .methode__num { background: var(--marine); transform: none; }
.methode__etape:nth-child(1) .methode__num { transition-delay: .2s; }
.methode__etape:nth-child(2) .methode__num { transition-delay: .55s; }
.methode__etape:nth-child(3) .methode__num { transition-delay: .9s; }
.methode__etape:nth-child(4) .methode__num { transition-delay: 1.25s; }
.methode__etape:nth-child(5) .methode__num { transition-delay: 1.6s; }
@media (max-width: 920px) {
  .methode::after { top: 24px; bottom: 24px; left: 23px; right: auto; width: 2px; height: auto; transform-origin: top; transform: scaleY(1); }
  .js .methode::after { transform: scaleY(0); }
  .js .methode.est-visible::after { transform: scaleY(1); }
}

/* Engrenages des bandeaux */
.bandeau { position: relative; overflow: hidden; }
.bandeau .conteneur { position: relative; z-index: 1; }
.engrenage { position: absolute; top: 50%; color: rgba(255,255,255,.1); pointer-events: none; }
.engrenage--grand { width: 380px; height: 380px; right: -90px; margin-top: -190px; animation: tourne 60s linear infinite; }
.engrenage--petit { width: 190px; height: 190px; right: 262px; margin-top: -175px; animation: tourne-inverse 30s linear infinite; color: rgba(56,189,248,.16); }
@media (max-width: 760px) {
  .engrenage--grand { width: 240px; height: 240px; right: -80px; margin-top: -120px; }
  .engrenage--petit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  h1 .ligne > span, .hero__entree { animation: none; transform: none; opacity: 1; }
  .js .usine .a-tracer { animation: none; stroke-dashoffset: 0; }
  .js .usine .a-apparaitre, .usine__rotation { animation: none; opacity: 1; }
  .usine__virole, .engrenage { animation: none; }
  .usine__fumee { display: none; }
  .usine__controles, .controle__point { animation: none; opacity: 1; }
  .controle__onde { display: none; }
  .js .revele .icone > *, .js .revele.est-visible .icone > * { animation: none; stroke-dashoffset: 0; }
  .js .methode::after { transition: none; transform: none; }
  .js .methode .methode__num { transition: none; transform: none; background: var(--marine); }
  .marque img, .carte-service .icone { transition: none; }
}

/* ==========================================================================
   Blocs ajoutés (cahier des charges) : formations, partenaires, mot du CEO
   ========================================================================== */
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.module {
  display: flex; flex-direction: column; gap: 10px; padding: 28px;
  background: var(--blanc); border: 1px solid var(--beton-2); border-top: 4px solid var(--marine);
  scroll-margin-top: 100px; transition: border-color var(--transition), box-shadow var(--transition);
}
.module:hover, .module:target { border-top-color: var(--ciel); box-shadow: var(--ombre); }
.module__num { font-family: var(--police-titre); font-weight: 700; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--marine); }
.module h3 { font-size: 1.7rem; margin: 4px 0 6px; }
.module__resume { color: var(--encre); font-weight: 500; margin: 0; }
.module__label { font-family: var(--police-titre); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; color: var(--texte-doux); margin: 12px 0 0; }
.module .coches { flex: 1; }
.module__public { font-size: .95rem; margin: 6px 0 4px; padding-top: 12px; border-top: 1px solid var(--beton-2); }
@media (max-width: 980px) { .modules { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .modules { grid-template-columns: 1fr; } .module { padding: 22px; } }

.benefices--quatre { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .benefices--quatre { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .benefices--quatre { grid-template-columns: 1fr; } }

.champ--modules { border: 0; padding: 0; margin: 0; }
.champ--modules legend { font-weight: 600; color: var(--encre); font-size: .98rem; margin-bottom: 8px; padding: 0; }
.cases-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 620px) { .cases-modules { grid-template-columns: 1fr; } }
.case-module {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--beton-3); border-radius: var(--rayon); background: var(--blanc);
  transition: border-color var(--transition), background var(--transition);
}
.case-module input { width: 20px; height: 20px; accent-color: var(--marine); flex: none; margin: 0; }
.case-module:has(input:checked) { border-color: var(--marine); background: var(--beton); }
.champ--modules.champ--erreur .case-module { border-color: var(--erreur); }

.formations-teaser .bouton { margin-top: 8px; }

.partenaires { padding-block: clamp(56px, 7vw, 88px); }
.partenaires__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.partenaires__liste { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.partenaire {
  display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 120px; padding: 24px;
  border: 1px solid var(--beton-2); border-left: 4px solid var(--marine); background: var(--blanc);
}
.partenaire__nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.8rem; color: var(--marine); line-height: 1.1; }
.partenaire__role { font-size: .95rem; color: var(--texte-doux); }
@media (max-width: 860px) { .partenaires__inner { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .partenaires__liste { grid-template-columns: 1fr; } }

.appel__direct { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px !important; font-weight: 600; }
.appel__direct a { color: var(--marine); }

.mot-ceo__grille { display: grid; grid-template-columns: 260px 1fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
.mot-ceo__portrait { margin: 0; text-align: center; }
.mot-ceo__portrait img {
  width: 210px; height: 210px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px;
  box-shadow: 0 0 0 6px var(--blanc), 0 0 0 8px var(--marine);
}
.mot-ceo__portrait figcaption { display: flex; flex-direction: column; }
.mot-ceo__portrait strong { font-family: var(--police-titre); font-size: 1.5rem; color: var(--encre); }
.mot-ceo__portrait span { color: var(--texte-doux); }
.mot-ceo__texte { margin: 0; padding-left: 28px; border-left: 4px solid var(--ciel); font-size: 1.2rem; line-height: 1.7; color: var(--encre); }
.mot-ceo__texte p:last-child { margin-bottom: 0; }
.mot-ceo__signature { margin-top: 20px; font-family: var(--police-titre); font-weight: 600; font-size: 1.2rem; color: var(--marine); }
@media (max-width: 760px) { .mot-ceo__grille { grid-template-columns: 1fr; } }

.texte-long h3 { font-size: 1.3rem; margin: 1.2em 0 .4em; }

/* --- Carte de localisation (page Contact) ------------------------------ */
.localisation { scroll-margin-top: 80px; }
.carte { display: grid; grid-template-columns: 1fr 340px; min-height: 440px; border: 1px solid var(--beton-2); background: var(--blanc); }
.carte__iframe { width: 100%; height: 100%; min-height: 440px; border: 0; display: block; filter: saturate(.85); }
.carte__panneau { padding: 32px 28px; display: flex; flex-direction: column; gap: 4px; border-left: 4px solid var(--marine); }
.carte__titre { font-family: var(--police-titre); font-weight: 700; font-size: 1.6rem; color: var(--encre); margin-bottom: .3em; }
.carte__note { font-size: .9rem; color: var(--texte-doux); }
.carte__panneau .bouton { margin-top: auto; }
.carte__liens { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; font-size: .95rem; }
@media (max-width: 860px) {
  .carte { grid-template-columns: 1fr; }
  .carte__iframe { min-height: 320px; height: 320px; }
  .carte__panneau { border-left: 0; border-top: 4px solid var(--marine); }
  .carte__panneau .bouton { margin-top: 12px; }
}
@media (max-width: 480px) {
  .valeurs li { font-size: 1.05rem; padding: 2px 12px; letter-spacing: .08em; }
  .valeurs li:first-child { padding-left: 10px; }
}

/* --- Partenariat Haver & Boecker --------------------------------------- */
.partenariat__grille { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.partenariat__texte > p:not(.surtitre):not(.partenariat__label) { font-size: 1.1rem; }
.partenariat__marques { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: stretch; margin: 28px 0; }
.partenariat__logo { margin: 0; border: 1px solid rgba(255,255,255,.18); line-height: 0; }
.partenariat__logo img { width: 220px; height: auto; }
.partenariat__service {
  display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 20px;
  border: 1px solid rgba(255,255,255,.18); border-left: 4px solid var(--ciel);
}
.partenariat__sigle { font-family: var(--police-titre); font-weight: 700; font-size: 1.9rem; color: var(--blanc); line-height: 1; }
.partenariat__label { font-family: var(--police-titre); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .95rem; color: var(--ciel); margin-bottom: 10px; }
.responsables { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.responsable { display: flex; flex-direction: column; padding: 14px 16px; background: rgba(255,255,255,.05); border-top: 2px solid var(--ciel); }
.responsable__nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.35rem; color: var(--blanc); }
.responsable__fonction { font-size: .95rem; color: rgba(255,255,255,.7); }
.partenariat__photo { margin: 0; }
.partenariat__photo img { width: 100%; height: auto; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 24px 48px rgba(0,0,0,.35); }
.partenariat__photo figcaption { margin-top: 12px; font-size: .92rem; color: rgba(255,255,255,.65); }
@media (max-width: 900px) {
  .partenariat__grille { grid-template-columns: 1fr; }
  .partenariat__photo { max-width: 560px; }
}
@media (max-width: 520px) {
  .partenariat__marques { grid-template-columns: 1fr; }
  .partenariat__logo img { width: 100%; }
  .responsables { grid-template-columns: 1fr; }
}

/* --- Page Haver & Boecker ---------------------------------------------- */
.partenariat__cta { margin-top: 24px; }
.maison__logo { margin: 24px 0 0; max-width: 340px; line-height: 0; border: 1px solid var(--beton-2); }
.maison__logo img { width: 100%; height: auto; }
.reperes { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.repere { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--beton); border-top: 3px solid var(--marine); }
.repere__valeur { font-family: var(--police-titre); font-weight: 700; font-size: 2rem; color: var(--marine); line-height: 1; }
.repere__libelle { font-size: .95rem; }
.machines { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.machine { padding: 32px; background: var(--blanc); border: 1px solid var(--beton-2); border-left: 4px solid var(--marine); }
.machine__type { font-family: var(--police-titre); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .95rem; color: var(--marine); margin-bottom: 4px; }
.machine h3 { font-size: 2rem; margin-bottom: .3em; }
.machine__liens { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 8px; }
@media (max-width: 760px) {
  .reperes { grid-template-columns: 1fr; }
  .machines { grid-template-columns: 1fr; }
  .machine { padding: 24px; }
}

/* --- Pièces d'origine ---------------------------------------------------- */
.pieces-origine__tete { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 5vw, 64px); align-items: end; margin-bottom: clamp(32px, 5vw, 48px); }
.pieces-origine__tete h2 { margin: 0; }
.pieces-origine__intro { font-size: 1.15rem; margin: 0; }
.pieces-origine__grille { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--beton-2); border: 2px solid var(--beton-2); }
.argument { padding: 28px; background: var(--blanc); }
.argument__num { font-family: var(--police-titre); font-weight: 700; font-size: 1.1rem; color: var(--marine); }
.argument h3 { font-size: 1.4rem; margin: 6px 0 .3em; }
.argument p { margin: 0; font-size: .98rem; }
.pieces-origine__alerte {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 24px; padding: 20px 24px; background: var(--blanc); border: 1px solid var(--beton-2); border-left: 4px solid var(--ciel);
}
.pieces-origine__alerte p { margin: 0; max-width: 46em; font-weight: 500; color: var(--encre); }
@media (max-width: 900px) {
  .pieces-origine__tete { grid-template-columns: 1fr; }
  .pieces-origine__grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .pieces-origine__grille { grid-template-columns: 1fr; } .argument { padding: 22px; } }

/* --- Nouveautés ---------------------------------------------------------- */
.entete-section--lien { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.entete-section--lien h2 { margin-bottom: 0; }
.nouveautes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.nouveaute { display: flex; flex-direction: column; gap: 6px; padding: 28px; background: var(--blanc); border: 1px solid var(--beton-2); border-top: 4px solid var(--marine); scroll-margin-top: 100px; }
.nouveaute h3 { font-size: 1.5rem; margin: 4px 0 .2em; }
.nouveaute p { margin: 0; }
.nouveaute .lien-fleche { margin-top: auto; padding-top: 12px; }
.nouveaute__meta { display: flex; align-items: center; gap: 12px; }
.nouveaute__categorie { font-family: var(--police-titre); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; padding: 3px 10px; background: var(--beton); color: var(--marine); }
.nouveaute__categorie--innovation { background: var(--ciel); color: var(--marine-900); }
.nouveaute__date { font-size: .9rem; color: var(--texte-doux); }
@media (max-width: 380px) { .nouveautes { grid-template-columns: 1fr; } }

/* --- Espace client ------------------------------------------------------- */
.cas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cas__carte { padding: 24px; background: var(--beton); border-top: 3px solid var(--marine); }
.cas__carte h3 { font-size: 1.35rem; }
.cas__carte p { margin: 0; font-size: .98rem; }
.etapes-suivi { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(32px, 5vw, 56px); }
.etapes-suivi li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.etapes-suivi__num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--marine-900); color: var(--ciel); font-family: var(--police-titre); font-weight: 700; font-size: 1.25rem; }
.etapes-suivi h3 { font-size: 1.3rem; margin-bottom: .2em; }
.etapes-suivi p { margin: 0; font-size: .98rem; }
.numero-suivi { font-family: var(--police-titre); font-weight: 700; font-size: 2rem; letter-spacing: .06em; color: var(--marine); padding: 10px 16px; background: var(--blanc); display: inline-block; border: 2px dashed var(--marine); }
.champ input[type="file"] { padding: 10px; min-height: auto; background: var(--blanc); }
@media (max-width: 980px) { .cas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .etapes-suivi { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cas { grid-template-columns: 1fr; } }

/* --- Page « Nos marques » ------------------------------------------------ */
.marques-sommaire { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: clamp(36px, 5vw, 56px); }
.marques-sommaire a {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; text-decoration: none;
  background: var(--beton); border-bottom: 3px solid var(--marine); color: var(--texte);
  transition: background var(--transition);
}
.marques-sommaire a:hover { background: var(--beton-2); color: var(--texte); }
.marques-sommaire strong { font-family: var(--police-titre); font-size: 1.35rem; color: var(--encre); }
.marques-sommaire span { font-size: .92rem; }
.marques { display: grid; gap: clamp(32px, 5vw, 56px); }
.marque-fiche { display: grid; grid-template-columns: 320px 1fr; gap: clamp(24px, 5vw, 56px); align-items: start; scroll-margin-top: 110px; padding-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--beton-2); }
.marque-fiche:first-child { border-top: 0; padding-top: 0; }
.marque-fiche__visuel { aspect-ratio: 340 / 216; background: var(--marine-900); display: grid; place-items: center; overflow: hidden; }
.marque-fiche__visuel img { width: 100%; height: 100%; object-fit: cover; }
.marque-fiche__nom-logo { font-family: var(--police-titre); font-weight: 700; font-size: 2.4rem; letter-spacing: .04em; color: var(--blanc); text-align: center; padding: 16px; }
.marque-fiche__role { font-family: var(--police-titre); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; color: var(--marine); margin-bottom: 4px; }
.marque-fiche h2 { font-size: clamp(2rem, 3.4vw, 2.6rem); margin-bottom: .1em; }
.marque-fiche__specialite { font-size: 1.15rem; font-weight: 600; color: var(--encre); }
.marque-fiche__produits { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 20px 0; }
.marque-fiche__produits li { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--beton); border-left: 3px solid var(--marine); }
.marque-fiche__produits strong { font-family: var(--police-titre); font-size: 1.3rem; color: var(--encre); }
.marque-fiche__produits span { font-size: .95rem; }
.marque-fiche__produits .lien-fleche { font-size: .95rem; margin-top: 4px; }
.benefice--blanc { background: var(--blanc); }
.partenariat__liste { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.partenariat__liste li {
  font-family: var(--police-titre); font-weight: 600; letter-spacing: .06em; font-size: 1.05rem;
  padding: 6px 14px; border: 1px solid rgba(255,255,255,.25); color: var(--blanc);
}
@media (max-width: 900px) {
  .marques-sommaire { grid-template-columns: 1fr 1fr; }
  .marque-fiche { grid-template-columns: 1fr; }
  .marque-fiche__visuel { max-width: 360px; }
}