/* ==========================================================================
   BERTHOLON — feuille de style du site vitrine (version 2 : marine, photos, animations)
   Polices libres auto-hébergées. Aucun style en ligne (politique de sécurité stricte).
   Les réglages modifiables depuis la page « outils » sont les variables de :root
   (elles peuvent être surchargées par reglages.css, chargé après ce fichier).
   ========================================================================== */

/* ---------- Polices (auto-hébergées : aucun appel à un service tiers) ---------- */
@font-face {
  font-family: "Urbanist";
  src: url("../polices/urbanist-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("../polices/caveat-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../polices/plexmono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  /* Réglables depuis la page outils */
  --couleur-accent: #04a0db;        /* bleu ciel de la charte */
  --couleur-accent-texte: #0277a6;  /* bleu assombri : lisible en petit texte sur fond clair */
  --couleur-encre: #071b30;         /* bleu marine profond : fonds sombres et texte principal */
  --couleur-papier: #f2f6fa;        /* fond des sections claires alternées */
  --taille-texte: 17px;
  --echelle-titres: 1;
  --graisse-titres: 800;
  --largeur-contenu: 1280px;
  --espace-section: 96px;
  --arrondi: 14px;
  --hauteur-logo: 44px;
  --hauteur-garde-accueil: 680px;
  --hauteur-garde-page: 380px;
  --voile-garde: 0.6;               /* opacité du voile marine posé sur la vidéo / photo de garde */
  --cadrage-garde: 50%;             /* cadrage vertical de la vidéo / photo de garde */

  /* Fixes */
  --blanc: #ffffff;
  --trait: #dbe4ec;
  --trait-sombre: rgba(255, 255, 255, 0.14);
  --gris-texte: #51627a;
  --gris-clair: #b4c4d6;
  --lueur: 0 0 0 1px rgba(4, 160, 219, 0.35), 0 18px 50px -18px rgba(4, 160, 219, 0.55);
  --ombre: 0 1px 2px rgba(7, 27, 48, 0.06), 0 14px 34px -18px rgba(7, 27, 48, 0.28);
  --police: "Urbanist", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --police-technique: "Plex Mono", ui-monospace, Consolas, monospace;
  --police-manuscrite: "Caveat", "Segoe Script", cursive;
  --gouttiere: clamp(20px, 4vw, 40px);
  --ressort: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--taille-texte); scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
/* Garde-fou : la page ne doit jamais pouvoir glisser sur le côté, même si un élément dépassait (smartphone).
   Il est posé sur le contenu et le pied de page, jamais sur html ni body : sinon l'en-tête ne resterait
   plus collée en haut de l'écran pendant le défilement. */
main, .pied { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--police);
  font-weight: 500;
  line-height: 1.6;
  color: var(--couleur-encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--couleur-accent-texte); text-underline-offset: 3px; }
a:hover { color: var(--couleur-encre); }
:focus-visible { outline: 3px solid var(--couleur-accent); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--graisse-titres); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: calc(clamp(2.1rem, 4.4vw, 3.4rem) * var(--echelle-titres)); }
h2 { font-size: calc(clamp(1.7rem, 3vw, 2.4rem) * var(--echelle-titres)); }
h3 { font-size: calc(1.2rem * var(--echelle-titres)); letter-spacing: -0.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

.conteneur { width: 100%; max-width: calc(var(--largeur-contenu) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.masque-visuel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--couleur-encre); color: var(--blanc); border-radius: 8px; }
.evitement:focus { top: 8px; color: var(--blanc); }
.accent { color: var(--couleur-accent); }
h2 .accent { color: var(--couleur-accent-texte); }
.sombre h2 .accent, .sombre h1 .accent { color: var(--couleur-accent); }

/* Étiquette : petite ligne en capitales au-dessus des titres, précédée d'un trait lumineux */
.etiquette {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--couleur-accent-texte);
}
.etiquette::before { content: ""; flex: none; width: 26px; height: 2px; border-radius: 2px; background: var(--couleur-accent); box-shadow: 0 0 10px var(--couleur-accent); }
.sombre .etiquette { color: var(--couleur-accent); }

/* ---------- Boutons ---------- */
.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ressort);
}
.bouton::after { content: "→"; font-size: 1.1em; transition: transform 0.25s var(--ressort); }
.bouton:hover { transform: translateY(-2px); }
.bouton:hover::after { transform: translateX(5px); }
.bouton--accent { background: var(--couleur-accent); color: var(--blanc); box-shadow: 0 10px 30px -10px var(--couleur-accent); }
.bouton--accent:hover { background: var(--blanc); color: var(--couleur-encre); }
.bouton--encre { background: var(--couleur-encre); color: var(--blanc); }
.bouton--encre:hover { background: var(--couleur-accent); color: var(--blanc); box-shadow: 0 10px 30px -10px var(--couleur-accent); }
.bouton--contour { border-color: rgba(255, 255, 255, 0.85); color: var(--blanc); }
.bouton--contour:hover { background: var(--blanc); border-color: var(--blanc); color: var(--couleur-encre); }
.bouton--contour-encre { border-color: var(--couleur-encre); color: var(--couleur-encre); }
.bouton--contour-encre:hover { background: var(--couleur-encre); color: var(--blanc); }
.lien-fleche { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border-bottom: 2px solid currentColor; padding-bottom: 3px; }
.lien-fleche::after { content: " →"; display: inline-block; margin-left: 4px; transition: transform 0.25s var(--ressort); }
.lien-fleche:hover::after { transform: translateX(5px); }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: box-shadow 0.3s, border-color 0.3s; }
.entete.est-defile { border-bottom-color: var(--trait); box-shadow: 0 10px 30px -20px rgba(7, 27, 48, 0.45); }
/* En-tête affinée dès qu'on a quitté le haut de la page (classe posée par site.js) : elle reste
   toujours visible, mais prend moins de hauteur pour laisser la place au contenu. */
.entete__rang, .entete__logo img, .entete__label, .entete__appel, .langues summary, .entete__bascule { transition: min-height 0.3s var(--ressort), height 0.3s var(--ressort), padding 0.3s var(--ressort), width 0.3s var(--ressort); }
.entete.est-compacte .entete__rang { min-height: 54px; }
.entete.est-compacte .entete__logo img { height: min(var(--hauteur-logo), 30px); }
.entete.est-compacte .entete__label { height: 30px; }
.entete.est-compacte .entete__appel { padding: 8px 18px; }
.entete.est-compacte .langues summary { height: 34px; }
.entete.est-compacte .entete__bascule { width: 38px; height: 38px; }
/* Le sommaire collant des pages longues suit la hauteur de l'en-tête affinée */
.sommaire { transition: top 0.3s var(--ressort); }
.entete-compacte .sommaire { top: 55px; }
.entete__rang { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; }
.entete__logo, .entete__label { flex: none; }
.entete__logo img { height: var(--hauteur-logo); width: auto; }
/* Label La French Fab, à côté du logo */
.entete__label { height: 46px; width: auto; margin-right: auto; padding-left: 18px; border-left: 1px solid var(--trait); box-sizing: content-box; }
.entete__nav { display: flex; align-items: center; gap: 30px; }
.entete__nav ul { display: flex; gap: 24px; }
.entete__nav li a, .entete__appel { white-space: nowrap; }
.entete__nav li a { position: relative; display: block; padding: 8px 0; color: var(--couleur-encre); font-weight: 600; font-size: 0.94rem; text-decoration: none; }
/* Soulignement animé des liens du menu */
.entete__nav li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--couleur-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ressort); }
.entete__nav li a:hover::after, .entete__nav li a[aria-current="page"]::after { transform: scaleX(1); }
.entete__nav li a[aria-current="page"] { color: var(--couleur-accent-texte); }
.entete__appel { padding: 12px 22px; }
.entete__bascule { display: none; }

@media (max-width: 1420px) {
  /* Menu mobile : replié uniquement si le JavaScript est actif (classe .js posée par site.js) */
  .entete__rang { flex-wrap: wrap; }
  .entete__label { height: 32px; padding-left: 12px; }
  .entete__nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 18px; }
  .entete__nav ul { flex-direction: column; gap: 0; }
  .entete__nav li a { padding: 13px 0; border-bottom: 1px solid var(--trait); }
  .entete__nav li a::after { display: none; }
  .entete__appel { margin-top: 16px; justify-content: center; }
  .js .entete__nav { display: none; }
  .js .entete__nav.est-ouvert { display: flex; }
  .js .entete__bascule { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; background: none; border: 1px solid var(--trait); border-radius: 12px; cursor: pointer; }
  .entete__bascule-traits, .entete__bascule-traits::before, .entete__bascule-traits::after { display: block; width: 20px; height: 2px; background: var(--couleur-encre); content: ""; position: relative; }
  .entete__bascule-traits::before { position: absolute; top: -6px; }
  .entete__bascule-traits::after { position: absolute; top: 6px; }
}

/* ---------- Sélecteur de langue (en-tête) ---------- */
/* Sur grand écran il passe après le menu ; sur écran réduit il reste à côté du bouton de menu */
.langues { position: relative; flex: none; order: 1; font-size: 0.84rem; font-weight: 700; }
.langues summary { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 11px; border: 1px solid var(--trait); border-radius: 12px; color: var(--couleur-encre); cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; transition: border-color 0.25s; }
.langues summary::-webkit-details-marker { display: none; }
.langues summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.langues summary:hover, .langues[open] summary { border-color: var(--couleur-accent); }
.langues ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 172px; margin: 0; padding: 6px; list-style: none; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre); }
.langues li a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--couleur-encre); font-weight: 600; text-decoration: none; white-space: nowrap; }
.langues li a span { width: 24px; font-family: var(--police-technique); font-size: 0.72rem; font-weight: 500; color: var(--gris-texte); }
.langues li a:hover { background: var(--couleur-papier); }
.langues li a[aria-current] { color: var(--couleur-accent-texte); }
@media (max-width: 1420px) {
  .langues { order: 0; }
}
@media (max-width: 480px) {
  /* Place pour le sélecteur : le label La French Fab n'est plus affiché que dans le pied de page */
  .entete__label { display: none; }
  .entete__logo { margin-right: auto; }
  .langues summary { height: 40px; padding: 0 9px; gap: 5px; }
}
@media (max-width: 350px) {
  .entete__logo img { height: 28px; }
}

/* ---------- Sections ---------- */
.section { position: relative; padding-block: var(--espace-section); }
.section--papier { background: var(--couleur-papier); }
.sombre { background: var(--couleur-encre); color: var(--blanc); }
/* Liens de texte sur fond sombre (les boutons gardent leurs propres couleurs) */
.sombre a:not(.bouton) { color: var(--couleur-accent); }
.section__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 40px; }
.section__tete p { max-width: 60ch; margin: 14px 0 0; color: var(--gris-texte); }
.sombre .section__tete p { color: var(--gris-clair); }
.chapo { font-size: 1.14rem; max-width: 62ch; color: var(--gris-texte); }

/* Fond technologique des sections sombres : halos bleus + trame de points */
.trame {
  background-image:
    radial-gradient(900px 420px at 85% -10%, rgba(4, 160, 219, 0.28), transparent 65%),
    radial-gradient(700px 380px at 0% 110%, rgba(47, 107, 255, 0.2), transparent 60%),
    radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.4px);
  background-size: auto, auto, 26px 26px;
}

/* ---------- Page de garde ---------- */
.garde { position: relative; isolation: isolate; display: flex; align-items: center; min-height: var(--hauteur-garde-page); padding-block: 64px; overflow: hidden; }
.garde--accueil { min-height: var(--hauteur-garde-accueil); padding-block: 80px 96px; }
.garde__media { position: absolute; inset: 0; z-index: -3; }
.garde__media img, .garde__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--cadrage-garde); }
/* Sans vidéo, l'image de fond avance très lentement */
.garde__media img:only-child { animation: zoom-lent 24s ease-in-out infinite alternate; }
@keyframes zoom-lent { from { transform: scale(1); } to { transform: scale(1.1); } }
/* Voile marine dégradé : posé seulement lorsqu'un média de fond est présent */
.garde:has(.garde__media > *)::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(7, 27, 48, calc(var(--voile-garde) + 0.26)) 0%, rgba(7, 27, 48, calc(var(--voile-garde) + 0.1)) 38%, rgba(7, 27, 48, calc(var(--voile-garde) - 0.38)) 100%),
    linear-gradient(0deg, rgba(7, 27, 48, 0.55), transparent 40%);
}
/* Balayage lumineux : un faisceau traverse lentement la page de garde */
.garde::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(4, 160, 219, 0.14) 48%, rgba(120, 215, 255, 0.3) 50%, rgba(4, 160, 219, 0.14) 52%, transparent);
  transform: translateX(-120%) skewX(-12deg);
  animation: balayage 9s linear infinite;
  pointer-events: none;
}
@keyframes balayage { 0% { transform: translateX(-120%) skewX(-12deg); } 60%, 100% { transform: translateX(380%) skewX(-12deg); } }

.garde__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.garde__texte p { max-width: 52ch; margin-top: 22px; font-size: 1.08rem; color: #dbe6f1; }
.garde__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.garde h1 { max-width: 18ch; text-shadow: 0 2px 30px rgba(7, 27, 48, 0.5); }
.garde h1 .accent { display: block; }
.garde--page h1 { max-width: 24ch; }
.garde--page p { max-width: 60ch; margin: 18px 0 0; font-size: 1.08rem; color: #dbe6f1; }
/* Avec une vidéo / photo de fond, la planche 3D laisse la place à l'image */
.garde:has(.garde__media > *) .planche--garde { display: none; }
.garde:has(.garde__media > *) .garde__grille { grid-template-columns: minmax(0, 1fr); }

/* Entrée en scène du texte de garde */
.js .garde .etiquette, .js .garde h1, .js .garde p, .js .garde .garde__actions { animation: entree 0.9s var(--ressort) both; }
.js .garde h1 { animation-delay: 0.12s; }
.js .garde p { animation-delay: 0.26s; }
.js .garde .garde__actions { animation-delay: 0.4s; }
@keyframes entree { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Signature manuscrite, soulignée d'un trait qui se dessine */
.signature { position: absolute; right: clamp(20px, 6vw, 96px); bottom: 54px; z-index: 1; margin: 0; font-family: var(--police-manuscrite); font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1; color: var(--blanc); transform: rotate(-7deg); text-align: right; text-shadow: 0 2px 18px rgba(7, 27, 48, 0.7); }
.signature svg { width: 100%; height: 16px; margin-top: 4px; overflow: visible; }
.signature path { fill: none; stroke: var(--couleur-accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; animation: trace 1.4s 1.2s ease-out forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.js .garde .signature { animation: entree-signature 0.9s 0.7s var(--ressort) both; }
@keyframes entree-signature { from { opacity: 0; transform: rotate(-7deg) translateY(26px); } to { opacity: 1; transform: rotate(-7deg); } }

/* Indication de défilement */
.defilement { position: absolute; left: 50%; bottom: 22px; width: 24px; height: 38px; margin-left: -12px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 14px; }
.defilement::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--couleur-accent); animation: molette 1.8s ease-in-out infinite; }
@keyframes molette { 0% { transform: translateY(0); opacity: 1; } 70%, 100% { transform: translateY(12px); opacity: 0; } }

/* ---------- Visuel de réalisation (rendu 3D ou photo) ---------- */
.planche { position: relative; margin: 0; border-radius: var(--arrondi); overflow: hidden; background: linear-gradient(160deg, #ffffff 0%, #e9f1f8 100%); border: 1px solid var(--trait); box-shadow: var(--ombre); color: var(--couleur-encre); transition: box-shadow 0.35s, transform 0.35s var(--ressort), border-color 0.35s; }
.planche__vue { position: relative; padding: clamp(14px, 2.4vw, 26px); background-image: radial-gradient(rgba(7, 27, 48, 0.1) 1px, transparent 1.4px); background-size: 22px 22px; }
.planche__vue img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.6s var(--ressort); }
/* Pastille du chiffre clé, avec voyant lumineux */
.cote { position: absolute; left: 14px; top: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--couleur-encre); color: var(--blanc); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; box-shadow: 0 8px 22px -10px rgba(7, 27, 48, 0.8); }
.cote::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--couleur-accent); animation: voyant 2s infinite; }
@keyframes voyant { 0% { box-shadow: 0 0 0 0 rgba(4, 160, 219, 0.7); } 100% { box-shadow: 0 0 0 10px rgba(4, 160, 219, 0); } }
.planche__cartouche { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--trait); background: var(--blanc); font-size: 0.8rem; font-weight: 700; color: var(--gris-texte); }
.planche__cartouche strong { font-weight: 800; letter-spacing: 0.1em; color: var(--couleur-accent-texte); }
.planche__cartouche > span:last-child { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--couleur-papier); color: var(--couleur-encre); }
.planche--garde { box-shadow: var(--lueur); animation: flotte 7s ease-in-out infinite; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- Bande de chiffres et repères ---------- */
.reperes { position: relative; z-index: 2; background: var(--blanc); box-shadow: 0 20px 40px -30px rgba(7, 27, 48, 0.35); }
.reperes ul { display: grid; grid-template-columns: repeat(6, auto); justify-content: space-between; }
.reperes li { display: flex; align-items: center; gap: 12px; padding: 28px 18px; border-left: 1px solid var(--trait); }
.reperes li:last-child { padding-right: 0; }
.reperes li:first-child { border-left: 0; padding-left: 0; }
.reperes svg { flex: none; width: 38px; height: 38px; color: var(--couleur-encre); }
/* Pictogrammes pleins du bandeau de repères */
.pictogramme { fill: currentColor; }
.pictogramme .creux { fill: var(--blanc); }
.reperes strong { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--couleur-encre); white-space: nowrap; }
.reperes div > span { display: block; color: var(--gris-texte); font-size: 0.88rem; line-height: 1.3; }
.reperes .reperes--texte strong { font-size: 1.02rem; letter-spacing: -0.01em; }

/* ---------- Cartes expertises ---------- */
.cartes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.cartes > li { display: flex; }
.cartes > li > .carte { flex: 1; }
.carte { position: relative; display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--arrondi); overflow: hidden; color: inherit; text-decoration: none; box-shadow: var(--ombre); transition: border-color 0.35s, transform 0.35s var(--ressort), box-shadow 0.35s; }
a.carte:hover { transform: translateY(-8px); border-color: transparent; box-shadow: var(--lueur); color: inherit; }
.carte__image { overflow: hidden; }
.carte__image:empty { display: none; }
.carte .photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.7s var(--ressort); }
a.carte:hover .photo { transform: scale(1.1); }
/* Liseré lumineux qui se déploie au survol */
.carte::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--couleur-accent), #2f6bff); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ressort); }
a.carte:hover::after { transform: scaleX(1); }
.carte__corps { display: flex; flex-direction: column; flex: 1; padding: 18px 16px 20px; }
.carte__titre { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.carte__icone { flex: none; width: 30px; height: 30px; color: var(--couleur-accent-texte); }
.carte h3 { font-size: calc(1rem * var(--echelle-titres)); }
.carte p { margin: 0; color: var(--gris-texte); font-size: 0.88rem; line-height: 1.45; }
.icone { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Bande partenaire (sombre, avec photo) ---------- */
.partenaire { position: relative; isolation: isolate; overflow: hidden; }
.partenaire > .photo { position: absolute; top: 0; bottom: 0; left: 30%; z-index: -2; width: 42%; height: 100%; object-fit: cover; opacity: 0.5; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent); }
.partenaire__grille { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.7fr) minmax(0, 0.55fr) minmax(0, 0.7fr); gap: clamp(24px, 3vw, 44px); align-items: center; }
.partenaire__texte p { color: #d4e0ec; max-width: 46ch; font-size: 0.96rem; }
.partenaire__texte h2 { margin-bottom: 18px; }
.partenaire__texte h2 .accent { display: block; }
.atouts li { display: flex; align-items: center; gap: 14px; padding: 9px 0; font-weight: 600; }
.atouts svg { flex: none; width: 28px; height: 28px; color: var(--blanc); }
.citation { position: relative; margin: 0; padding: 8px 0 8px 22px; border-left: 2px solid rgba(255, 255, 255, 0.5); font-size: 1.24rem; font-weight: 500; line-height: 1.35; }
.citation::before { content: "“"; position: absolute; left: 10px; top: -46px; font-size: 5rem; font-weight: 800; line-height: 1; color: var(--couleur-accent); }

/* Étapes d'un projet : vraie séquence, donc numérotée */
.etapes { counter-reset: etape; border-top: 1px solid var(--trait-sombre); }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 3.4rem 1fr; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--trait-sombre); }
.etapes li::before { content: counter(etape, decimal-leading-zero); font-family: var(--police-technique); font-size: 0.8rem; color: var(--couleur-accent); }
.etapes strong { font-weight: 700; }
.etapes span { display: block; grid-column: 2; color: var(--gris-clair); font-size: 0.93rem; }
.etapes--clair { border-top-color: var(--trait); }
.etapes--clair li { border-bottom-color: var(--trait); }
.etapes--clair li::before { color: var(--couleur-accent-texte); }
.etapes--clair span { color: var(--gris-texte); }

/* ---------- Frise du déroulé d'un projet (accueil) : 16 étapes sur 3 rangées, dont 7 jalons ---------- */
.parcours { --jalon: #f5b301; counter-reset: jalon; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 0; }
.parcours li { counter-increment: jalon; position: relative; display: flex; flex-direction: column; gap: 4px; padding-right: 14px; }
/* Tronçon de liaison vers l'étape suivante : il se remplit d'un trait lumineux à l'apparition */
.parcours li::after { content: ""; position: absolute; left: 64px; right: 8px; top: 27px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--couleur-accent), #2f6bff) left / 0% 100% no-repeat, var(--trait); transition: background-size 0.5s ease-out; }
.parcours.est-visible li::after { background-size: 100% 100%, auto; }
.parcours li:nth-child(6n)::after { display: none; }
.parcours li:nth-child(6n+2)::after { transition-delay: 0.25s; }
.parcours li:nth-child(6n+3)::after { transition-delay: 0.5s; }
.parcours li:nth-child(6n+4)::after { transition-delay: 0.75s; }
.parcours li:nth-child(6n+5)::after { transition-delay: 1s; }
.parcours li:last-child::after { display: none; }
/* Pastille de l'étape, avec son pictogramme */
.parcours__puce { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 12px; border-radius: 50%; background: var(--blanc); border: 3px solid var(--couleur-accent); color: var(--couleur-encre); transition: background-color 0.3s, color 0.3s, transform 0.3s var(--ressort); }
.parcours__puce svg { width: 28px; height: 28px; }
.parcours li:hover .parcours__puce { background: var(--couleur-encre); color: var(--blanc); transform: scale(1.1); }
/* Numéro de l'étape, au-dessus du titre */
.parcours strong { font-weight: 800; line-height: 1.2; }
.parcours strong::before { content: "Étape " counter(jalon, decimal-leading-zero); display: block; margin-bottom: 4px; font-family: var(--police-technique); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris-texte); }
.parcours li > span:last-child { color: var(--gris-texte); font-size: 0.86rem; line-height: 1.35; }
/* Jalons de validation : panneau en losange jaune, comme une signalisation routière */
.parcours .parcours--jalon .parcours__puce { width: 46px; height: 46px; margin: 5px 5px 17px; border-radius: 8px; border: 3px solid var(--couleur-encre); background: var(--jalon); color: var(--couleur-encre); transform: rotate(45deg); box-shadow: 0 0 0 4px var(--blanc), 0 6px 16px -6px rgba(7, 27, 48, 0.6); }
.parcours .parcours--jalon .parcours__puce svg { width: 24px; height: 24px; transform: rotate(-45deg); stroke-width: 2.4; }
.parcours .parcours--jalon:hover .parcours__puce { background: var(--jalon); color: var(--couleur-encre); transform: rotate(45deg) scale(1.1); }
.parcours .parcours--jalon strong::before { content: "Jalon · " attr(data-jalon); width: max-content; max-width: 100%; padding: 2px 8px; border-radius: 4px; background: var(--jalon); color: var(--couleur-encre); font-weight: 500; }
/* Mêmes libellés dans les autres langues (la langue vient de l'attribut lang de la page) */
:lang(en) .parcours strong::before { content: "Step " counter(jalon, decimal-leading-zero); }
:lang(es) .parcours strong::before { content: "Etapa " counter(jalon, decimal-leading-zero); }
:lang(it) .parcours strong::before { content: "Fase " counter(jalon, decimal-leading-zero); }
:lang(de) .parcours strong::before { content: "Schritt " counter(jalon, decimal-leading-zero); }
:lang(en) .parcours .parcours--jalon strong::before { content: "Milestone · " attr(data-jalon); }
:lang(es) .parcours .parcours--jalon strong::before { content: "Hito · " attr(data-jalon); }
:lang(it) .parcours .parcours--jalon strong::before { content: "Milestone · " attr(data-jalon); }
:lang(de) .parcours .parcours--jalon strong::before { content: "Meilenstein · " attr(data-jalon); }
.parcours__legende { display: flex; align-items: flex-start; gap: 12px; margin: 32px 0 0; color: var(--gris-texte); font-size: 0.9rem; }
.parcours__legende > span:first-child { flex: none; width: 16px; height: 16px; margin: 0 3px; border-radius: 3px; border: 2px solid var(--couleur-encre); background: #f5b301; transform: rotate(45deg); }

/* ---------- Blocs de savoir-faire (page Savoir-faire) ---------- */
.blocs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.blocs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blocs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blocs li { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border-radius: var(--arrondi); background: var(--blanc); border: 1px solid var(--trait); box-shadow: var(--ombre); overflow: hidden; transition: transform 0.35s var(--ressort), box-shadow 0.35s, border-color 0.35s; }
.blocs li:hover { transform: translateY(-8px); box-shadow: var(--lueur); border-color: transparent; }
.blocs__icone { width: 54px; height: 54px; padding: 12px; margin-bottom: 18px; border-radius: 14px; background: var(--couleur-encre); color: var(--couleur-accent); box-shadow: 0 12px 26px -14px var(--couleur-accent); }
.blocs h3 { margin-bottom: 10px; }
.blocs p { color: var(--gris-texte); font-size: 0.95rem; }
.blocs__marque { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--trait); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--couleur-accent-texte); }
.blocs--sombre li { background: rgba(255, 255, 255, 0.06); border-color: var(--trait-sombre); box-shadow: none; }
.blocs--sombre .blocs__icone { background: var(--couleur-accent); color: var(--blanc); }
.blocs--sombre p { color: #d4e0ec; }
.blocs--sombre .blocs__marque { border-top-color: var(--trait-sombre); color: var(--couleur-accent); }

/* Procédés de fabrication expliqués, avec leurs atouts */
.procedes { display: grid; gap: 16px; }
.procedes li { padding: 22px 24px; border-radius: var(--arrondi); background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--couleur-accent); transition: transform 0.3s var(--ressort), box-shadow 0.3s; }
.procedes li:hover { transform: translateX(8px); box-shadow: var(--ombre); }
.procedes .photo { width: 100%; margin-top: 14px; border-radius: 10px; aspect-ratio: 16 / 9; object-fit: cover; }
.procedes h3 { margin: 0 0 8px; font-size: calc(1.1rem * var(--echelle-titres)); }
.procedes p { margin: 0 0 10px; font-size: 0.96rem; }
.procedes .procedes__atouts { margin: 0; color: var(--couleur-encre); }
.procedes__atouts strong { display: block; margin-bottom: 2px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--couleur-accent-texte); }
.expertise .chapo { margin-top: 12px; }

/* ---------- Réalisations (cartes horizontales de l'accueil) ---------- */
.realisations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.realisation { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 18px; align-items: center; color: inherit; text-decoration: none; }
a.realisation:hover { color: inherit; }
a.realisation:hover .planche { box-shadow: var(--lueur); border-color: transparent; transform: translateY(-6px); }
a.realisation:hover .planche__vue img { transform: scale(1.08); }
.realisation .planche__vue { padding: 10px; }
.realisation .planche__vue img { aspect-ratio: 1 / 1; }
.realisation .etiquette { margin-bottom: 8px; font-size: 0.68rem; color: var(--gris-texte); }
.realisation .etiquette::before { display: none; }
.realisation h3 { margin: 0 0 8px; }
.realisation p { color: var(--gris-texte); font-size: 0.9rem; line-height: 1.45; margin-bottom: 12px; }
.realisation .lien-fleche { color: var(--couleur-accent-texte); border-bottom: 0; }
.realisation__chiffre { display: block; margin-bottom: 6px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--couleur-accent-texte); line-height: 1.1; }

/* Fiche détaillée (page Réalisations) */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; padding-block: 56px; border-top: 1px solid var(--trait); }
.fiche:first-of-type { border-top: 0; padding-top: 0; }
.fiche:nth-of-type(even) .fiche__visuel { order: 2; }
.fiche h3 { font-size: calc(1.6rem * var(--echelle-titres)); margin-bottom: 16px; }
.fiche p { color: var(--gris-texte); }
.fiche__visuel { position: sticky; top: 150px; }
.fiche__visuel:hover .planche__vue img { transform: scale(1.05); }
.fiche__visuel--portrait .planche__vue img { aspect-ratio: 4 / 3; }
.fiche__visuel--photos .photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--arrondi); box-shadow: var(--ombre); }
.fiche__visuel--photos .fiche__duo { margin-top: 12px; }
.fiche__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.liste-traits li { position: relative; padding: 7px 0 7px 26px; color: var(--gris-texte); }
.liste-traits li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--couleur-accent); }
.sombre .liste-traits li { color: #d4e0ec; }
.chiffre { display: flex; align-items: center; gap: 16px; margin: 22px 0; padding: 18px 22px; border-radius: var(--arrondi); background-color: var(--couleur-encre); background-image: radial-gradient(300px 120px at 0% 0%, rgba(4, 160, 219, 0.45), transparent 70%); }
.chiffre strong { font-size: 2.2rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--blanc); white-space: nowrap; }
.fiche .chiffre span { color: var(--gris-clair); font-size: 0.93rem; line-height: 1.4; }

/* Liste compacte des autres lignes réalisées */
.autres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.autres li { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--trait); border-radius: var(--arrondi); background: var(--blanc); transition: border-color 0.3s, transform 0.3s var(--ressort); }
.autres li:hover { border-color: var(--couleur-accent); transform: translateX(6px); }
.autres strong { font-weight: 800; }
.autres span { display: block; color: var(--gris-texte); font-size: 0.9rem; font-weight: 500; }
.autres .mention { flex: none; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris-texte); background: var(--couleur-papier); padding: 4px 10px; border-radius: 999px; }

/* Sommaire par secteur */
.sommaire { position: sticky; top: 78px; z-index: 20; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--trait); }
.sommaire ul { display: flex; gap: 8px; flex-wrap: wrap; padding-block: 12px; }
.sommaire a { display: block; padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 0.88rem; color: var(--couleur-encre); text-decoration: none; background: var(--couleur-papier); transition: background-color 0.25s, color 0.25s; }
.sommaire a:hover { background: var(--couleur-encre); color: var(--blanc); }

/* ---------- Secteurs ---------- */
.secteurs { display: flex; flex-wrap: wrap; gap: 10px; }
.secteurs li { border: 1px solid var(--trait); border-radius: 999px; font-weight: 700; font-size: 0.92rem; background: var(--blanc); transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ressort); }
.secteurs li, .secteurs a { padding: 10px 18px; }
.secteurs li:has(a) { padding: 0; border-color: var(--couleur-accent); }
.secteurs a { display: block; color: inherit; text-decoration: none; }
.secteurs li:has(a:hover) { background: var(--couleur-encre); border-color: var(--couleur-encre); color: var(--blanc); transform: translateY(-3px); }

.note-secteur { margin: 22px 0 0; padding: 16px 20px; border-left: 4px solid var(--couleur-accent); border-radius: 0 var(--arrondi) var(--arrondi) 0; background: var(--couleur-papier); color: var(--gris-texte); font-size: 0.96rem; }
.note-secteur strong { color: var(--couleur-encre); }

/* ---------- Tuiles des secteurs d'activité (photo en fond, texte par-dessus) ---------- */
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tuiles li { position: relative; overflow: hidden; border-radius: var(--arrondi); aspect-ratio: 4 / 3; background: var(--couleur-encre); color: var(--blanc); box-shadow: var(--ombre); }
.tuiles .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ressort); }
.tuiles li:hover .photo { transform: scale(1.08); }
.tuiles li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 27, 48, 0.94) 0%, rgba(7, 27, 48, 0.55) 45%, rgba(7, 27, 48, 0.05) 80%); }
.tuiles div { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px 18px 16px; }
.tuiles h3 { margin-bottom: 4px; font-size: calc(1.08rem * var(--echelle-titres)); }
.tuiles h3::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 10px; border-radius: 3px; background: var(--couleur-accent); }
.tuiles p { margin: 0; font-size: 0.86rem; line-height: 1.4; color: #d4e0ec; }
/* Tuile sans photo : fond technique en attendant une image */
.tuiles li:not(:has(.photo)) { background-image: radial-gradient(260px 160px at 85% 0%, rgba(4, 160, 219, 0.45), transparent 70%), radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.4px); background-size: auto, 22px 22px; }
.tuiles__suite { margin: 24px 0 0; color: var(--gris-texte); }

/* ---------- Logos : grille et bandeau défilant ---------- */
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.logos li { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: 12% 14%; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--arrondi); transition: transform 0.3s var(--ressort), box-shadow 0.3s; }
.logos li:hover { transform: translateY(-5px); box-shadow: var(--ombre); }
.logos img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: filter 0.3s, opacity 0.3s; }
.logos li:hover img { filter: none; opacity: 1; }
.logos a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none; }
.logos__nom { font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; text-align: center; color: var(--gris-texte); transition: color 0.3s; }
.logos__nom small { display: block; margin-top: 2px; font-size: 0.72rem; font-weight: 600; }
.logos li:hover .logos__nom { color: var(--couleur-encre); }
/* Marques de composants, regroupées par famille technique */
.familles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.familles > li { padding: 22px; border: 1px solid var(--trait); border-radius: var(--arrondi); background: var(--couleur-papier); }
.familles h3 { margin-bottom: 14px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--couleur-accent-texte); }
.familles .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.familles .logos li { aspect-ratio: 5 / 3; padding: 12%; border-radius: 10px; }
.familles .logos__nom { font-size: 0.86rem; }
/* Bandeau défilant (la liste est doublée par site.js pour boucler sans raccord) */
.defilant { overflow: hidden; padding-block: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.defilant .logos { display: flex; flex-wrap: wrap; gap: 14px; }
.defilant .logos li { width: 190px; flex: none; padding: 22px 26px; }
.js .defilant .logos { flex-wrap: nowrap; width: max-content; animation: defile 120s linear infinite; }
.js .defilant:hover .logos { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(calc(-50% - 7px)); } }

/* ---------- Deux colonnes éditoriales ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.duo h2 { margin-bottom: 18px; }
.duo .photo { width: 100%; margin-top: 24px; border-radius: var(--arrondi); aspect-ratio: 16 / 10; object-fit: cover; box-shadow: var(--ombre); }
.date-fondation { width: max-content; font-size: clamp(5rem, 13vw, 10rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; background: linear-gradient(120deg, var(--couleur-accent), #2f6bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.engagements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.engagements--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.engagements li { padding: 28px; border-radius: var(--arrondi); background: var(--blanc); border: 1px solid var(--trait); box-shadow: var(--ombre); transition: transform 0.35s var(--ressort), box-shadow 0.35s, border-color 0.35s; }
.engagements li:hover { transform: translateY(-8px); box-shadow: var(--lueur); border-color: transparent; }
.engagements h3 { margin-bottom: 8px; }
.engagements p { margin: 0; color: var(--gris-texte); font-size: 0.96rem; }

/* Bloc expertise détaillé (page Expertises) */
.expertise { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 6vw, 80px); padding-block: 56px; border-top: 1px solid var(--trait); }
.expertise:first-of-type { border-top: 0; padding-top: 0; }
.expertise__icone { width: 54px; height: 54px; padding: 12px; margin-bottom: 20px; border-radius: 14px; background: var(--couleur-encre); color: var(--couleur-accent); box-shadow: 0 12px 26px -14px var(--couleur-accent); }
.expertise h2 { font-size: calc(1.8rem * var(--echelle-titres)); }
.expertise .photo { width: 100%; margin-top: 24px; border-radius: var(--arrondi); aspect-ratio: 16 / 10; object-fit: cover; box-shadow: var(--ombre); }
.expertise__corps p { color: var(--gris-texte); }
.expertise__corps h3 { margin: 26px 0 8px; font-size: 1.05rem; }
/* Sur grand écran, quand le bloc a une photo, le texte de droite s'aligne sur la photo (et non sur le titre) :
   il démarre à la hauteur du haut de la photo. */
@media (min-width: 821px) {
  .expertise:has(> div > .photo) { row-gap: 0; }
  .expertise:has(> div > .photo) > div:first-child { display: contents; }
  .expertise:has(> div > .photo) .expertise__icone { grid-area: 1 / 1; }
  .expertise:has(> div > .photo) h2 { grid-area: 2 / 1; }
  .expertise:has(> div > .photo) > div:first-child > .chapo { grid-area: 3 / 1; }
  .expertise:has(> div > .photo) .photo { grid-area: 4 / 1; align-self: start; }
  .expertise:has(> div > .photo) .expertise__corps { grid-area: 4 / 2; align-self: start; padding-top: 24px; }
}
.colonnes-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }

/* ---------- Tableau du parc machines ---------- */
.tableau { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--arrondi); background: var(--blanc); box-shadow: var(--ombre); }
.tableau table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.96rem; }
.tableau th, .tableau td { padding: 15px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--trait); }
.tableau thead th { background: var(--couleur-encre); color: var(--blanc); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }
.tableau tbody th { font-weight: 800; white-space: nowrap; color: var(--couleur-accent-texte); }
.tableau td { color: var(--gris-texte); }
.tableau td:nth-child(2) { color: var(--couleur-encre); font-weight: 600; }
.tableau tbody tr:last-child th, .tableau tbody tr:last-child td { border-bottom: 0; }

/* ---------- Appel final ---------- */
.appel { display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; }
.appel h2 { max-width: 22ch; }
.appel p { margin: 12px 0 0; color: var(--gris-clair); }
.appel__actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.appel--clair p { color: var(--gris-texte); }
.appel--clair .appel__tel { font-size: 1.6rem; font-weight: 800; color: var(--couleur-encre); text-decoration: none; white-space: nowrap; }
.sombre a.appel__tel { font-size: 1.6rem; font-weight: 800; color: var(--blanc); text-decoration: none; white-space: nowrap; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.coordonnees > div { padding: 20px 0; border-bottom: 1px solid var(--trait); }
.coordonnees dt { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-texte); margin-bottom: 6px; }
.coordonnees dd { margin: 0; font-size: 1.1rem; font-weight: 600; }
.coordonnees dd a { color: inherit; }
.coordonnees dd a.grand { font-size: 1.9rem; font-weight: 800; text-decoration: none; color: var(--couleur-accent-texte); }

.formulaire { padding: clamp(22px, 4vw, 40px); background: var(--blanc); border: 1px solid var(--trait); border-radius: calc(var(--arrondi) + 6px); box-shadow: 0 30px 70px -40px rgba(7, 27, 48, 0.5); }
.formulaire h2 { font-size: calc(1.7rem * var(--echelle-titres)); margin-bottom: 8px; }
.formulaire > p { color: var(--gris-texte); margin-bottom: 26px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-weight: 700; font-size: 0.92rem; }
.champ input, .champ select, .champ textarea { width: 100%; padding: 13px 15px; font: inherit; color: var(--couleur-encre); background: var(--couleur-papier); border: 1px solid #c3d0dc; border-radius: 10px; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; }
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 0; background: var(--blanc); border-color: var(--couleur-accent); box-shadow: 0 0 0 4px rgba(4, 160, 219, 0.2); }
.consentement { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9rem; color: var(--gris-texte); }
.consentement input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--couleur-accent-texte); }
/* Champ piège anti-robots : invisible pour les visiteurs, rempli par les robots */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__pied { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.formulaire__etat { margin: 0; font-weight: 700; }
.formulaire__etat[data-etat="ok"] { color: #0b6b3a; }
.formulaire__etat[data-etat="erreur"] { color: #b3261e; }

/* ---------- Texte long (mentions légales) ---------- */
.texte { max-width: 74ch; }
.texte h2 { font-size: calc(1.5rem * var(--echelle-titres)); margin: 48px 0 14px; }
.texte h2:first-child { margin-top: 0; }
.texte p, .texte li { color: #33445a; }
.texte ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; }

/* ---------- Pied de page ---------- */
.pied { background: #04111f; color: var(--gris-clair); font-size: 0.94rem; }
.pied a { color: var(--blanc); text-decoration: none; }
.pied a:hover { color: var(--couleur-accent); }
.pied__grille { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 40px; padding-block: 64px 44px; }
.pied__marque img:first-child { height: 52px; width: auto; }
.pied__marque p { max-width: 34ch; margin: 18px 0 22px; }
.pied__label { width: 84px; height: auto; background: var(--blanc); padding: 8px; border-radius: 8px; }
.pied__titre { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blanc); margin-bottom: 16px; }
.pied__liens li { padding: 4px 0; }
.pied__adresse { line-height: 1.75; }
.pied__bas { display: flex; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; padding-block: 22px; border-top: 1px solid var(--trait-sombre); font-size: 0.86rem; }
.pied__bas p { margin: 0; }
.pied__bas ul { display: flex; gap: 8px 24px; flex-wrap: wrap; }

/* ---------- Apparition au défilement (activée par site.js) ---------- */
.js .apparait { opacity: 0; transform: translateY(34px); transition: opacity 0.8s var(--ressort), transform 0.8s var(--ressort); }
.js .apparait.est-visible { opacity: 1; transform: none; }
/* Décalage en cascade des éléments d'une même rangée */
.js li.apparait:nth-child(2), .js a.apparait:nth-child(2) { transition-delay: 0.08s; }
.js li.apparait:nth-child(3), .js a.apparait:nth-child(3) { transition-delay: 0.16s; }
.js li.apparait:nth-child(4) { transition-delay: 0.24s; }
.js li.apparait:nth-child(5) { transition-delay: 0.32s; }
.js li.apparait:nth-child(6) { transition-delay: 0.4s; }

/* ---------- Adaptation aux écrans ---------- */
@media (max-width: 1240px) {
  .cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .reperes ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reperes li:nth-child(4) { border-left: 0; padding-left: 0; }
  .reperes li:nth-child(n+4) { border-top: 1px solid var(--trait); }
  .realisations { grid-template-columns: minmax(0, 1fr); }
  .realisation { grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr); }
  .partenaire__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .partenaire__vide { display: none; }
  .parcours { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .familles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parcours li::after { display: none; }
  .blocs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partenaire .citation { grid-column: 1 / -1; }
  .partenaire > .photo { left: auto; right: 0; width: 55%; opacity: 0.3; }
}
@media (max-width: 1040px) {
  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  /* Sections moins hautes sur petit écran, quel que soit le réglage choisi */
  .section { padding-block: min(var(--espace-section), 64px); }
  .garde__grille, .partenaire__grille, .duo, .fiche, .expertise, .contact { grid-template-columns: minmax(0, 1fr); }
  .garde { flex-direction: column; align-items: stretch; justify-content: center; }
  .garde--accueil { min-height: min(var(--hauteur-garde-accueil), 88vh); padding-bottom: 56px; }
  .signature { position: static; align-self: flex-start; margin: 36px var(--gouttiere) 0; text-align: left; }
  .defilement { display: none; }
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche:nth-of-type(even) .fiche__visuel { order: 0; }
  .fiche__visuel { position: static; }
  .engagements, .engagements--4, .blocs--3 { grid-template-columns: 1fr; }
  .autres { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .pied__marque { grid-column: 1 / -1; }
  .sommaire { position: static; }
  .reperes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reperes li, .reperes li:nth-child(4) { border-left: 1px solid var(--trait); padding-left: 18px; }
  .reperes li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .reperes li:nth-child(n+3) { border-top: 1px solid var(--trait); }
}
@media (max-width: 600px) {
  .champs, .colonnes-2 { grid-template-columns: minmax(0, 1fr); }
  .parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blocs, .blocs--2 { grid-template-columns: minmax(0, 1fr); }
  .tuiles { grid-template-columns: minmax(0, 1fr); }
  .familles { grid-template-columns: minmax(0, 1fr); }
  .tuiles li { aspect-ratio: 16 / 9; }
  .realisation { grid-template-columns: minmax(0, 1fr); }
  .realisation .planche__vue img { aspect-ratio: 16 / 10; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .defilant .logos li { width: 150px; }
  .pied__grille { grid-template-columns: 1fr; }
  .garde__actions .bouton, .appel__actions .bouton, .formulaire .bouton { width: 100%; justify-content: center; }
  .carte__corps { padding: 14px 12px 16px; }
  .reperes svg { width: 30px; height: 30px; }
  .reperes strong { font-size: 1.25rem; white-space: normal; }
}

/* ---------- Respect du réglage « réduire les animations » ---------- */
@media (max-width: 480px) {
  /* Smartphones étroits (360 px) : rien ne doit dépasser de sa colonne ni élargir la page */
  .entete__rang { gap: 12px; }
  .entete__logo img { height: min(var(--hauteur-logo), 34px); }
  .entete__label { height: 26px; padding-left: 10px; }
  .reperes li { gap: 6px; padding: 20px 10px; }
  .reperes svg { width: 26px; height: 26px; }
  .reperes .reperes--texte strong { font-size: 0.86rem; }
  .reperes strong, .carte h3, .parcours strong { overflow-wrap: anywhere; hyphens: auto; }
  /* Cartes : pictogramme au-dessus du titre, pour laisser toute la largeur au texte */
  .carte__titre { flex-direction: column; align-items: flex-start; gap: 6px; }
  .carte h3 { font-size: 0.95rem; }
  .parcours li { padding-right: 10px; }
  /* Étiquette de jalon : passe à la ligne plutôt que de recouvrir l'étape voisine */
  .parcours .parcours--jalon strong::before { width: fit-content; max-width: 100%; letter-spacing: 0.04em; }
}
/* ---------- Circuit de la méthode (page L'entreprise) ---------- */
/* Une route en S que l'on suit d'étape en étape : trois étapes vers la droite, virage, trois vers
   la gauche, virage, puis les deux dernières. Chaque étape porte un panneau numéroté planté au
   bord de la route. --rang = hauteur d'une rangée (elle fixe aussi le rayon des virages),
   --niveau = hauteur de la route dans la rangée. */
.circuit__tete { max-width: 62ch; }
.circuit { --rang: 196px; --route: 10px; --niveau: 76px; counter-reset: circuit; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: var(--rang); margin: 44px calc(var(--rang) / 2 + 16px) 0; padding: 0; list-style: none; }
.circuit li { counter-increment: circuit; position: relative; padding: calc(var(--niveau) + var(--route) + 18px) 22px 0 6px; }
/* Tronçon de route, avec sa ligne discontinue */
.circuit li::before { content: ""; position: absolute; left: 0; right: 0; top: var(--niveau); height: var(--route); background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 55%, transparent 0) center / 22px 2px repeat-x, var(--couleur-encre); }
.circuit li:first-child::before { border-radius: 99px 0 0 99px; }
.circuit li:last-child::before { border-radius: 0 99px 99px 0; }
/* Placement en S : la deuxième rangée se lit de droite à gauche */
.circuit li:nth-child(4) { grid-area: 2 / 3; }
.circuit li:nth-child(5) { grid-area: 2 / 2; }
.circuit li:nth-child(6) { grid-area: 2 / 1; }
.circuit li:nth-child(7) { grid-area: 3 / 1; }
.circuit li:nth-child(8) { grid-area: 3 / 2; }
/* Virages : demi-cercles qui relient une rangée à la suivante */
.circuit li:nth-child(3)::after, .circuit li:nth-child(6)::after { content: ""; position: absolute; top: var(--niveau); box-sizing: border-box; width: calc(var(--rang) / 2 + var(--route) / 2); height: calc(var(--rang) + var(--route)); border: var(--route) solid var(--couleur-encre); }
.circuit li:nth-child(3)::after { left: 100%; border-left: 0; border-radius: 0 999px 999px 0; }
.circuit li:nth-child(6)::after { right: 100%; border-right: 0; border-radius: 999px 0 0 999px; }
/* Panneau numéroté et son poteau */
.circuit strong { display: block; font-weight: 800; line-height: 1.25; color: var(--couleur-encre); }
.circuit strong::before { content: counter(circuit, decimal-leading-zero); position: absolute; left: 6px; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 56px; height: 42px; border: 3px solid var(--blanc); border-radius: 9px; background: var(--couleur-accent); color: var(--blanc); font-family: var(--police-technique); font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; box-shadow: 0 8px 18px -8px rgba(7, 27, 48, 0.6), 0 0 0 2px var(--couleur-accent); transition: transform 0.3s var(--ressort); }
.circuit strong::after { content: ""; position: absolute; left: 32px; top: 44px; width: 4px; height: calc(var(--niveau) - 40px); border-radius: 2px; background: #8a97a6; }
.circuit li:hover strong::before { transform: translateY(-4px) rotate(-3deg); }
.circuit li > span { display: block; margin-top: 4px; color: var(--gris-texte); font-size: 0.92rem; line-height: 1.4; }
@media (max-width: 1100px) {
  .circuit { --rang: 210px; }
}
@media (max-width: 900px) {
  /* Écran étroit : la route descend tout droit, les panneaux sont posés dessus */
  .circuit { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; margin: 32px 0 0; }
  .circuit li:nth-child(n) { grid-area: auto; min-height: 84px; padding: 12px 0 26px 86px; }
  .circuit li:nth-child(n)::before { left: 29px; right: auto; top: 0; bottom: 0; width: var(--route); height: auto; border-radius: 0; background: linear-gradient(0deg, rgba(255, 255, 255, 0.92) 55%, transparent 0) center / 2px 22px repeat-y, var(--couleur-encre); }
  .circuit li:first-child::before { border-radius: 99px 99px 0 0; }
  .circuit li:last-child::before { border-radius: 0 0 99px 99px; }
  .circuit li:nth-child(n)::after { display: none; }
  .circuit strong::before { left: 6px; top: 10px; }
  .circuit strong::after { display: none; }
}

/* ---------- Questions fréquentes ---------- */
.faq { display: grid; gap: 12px; max-width: 920px; }
.faq details { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--arrondi); transition: border-color 0.25s, box-shadow 0.25s; }
.faq details[open] { border-color: var(--couleur-accent); box-shadow: var(--ombre); }
.faq summary { position: relative; padding: 18px 56px 18px 22px; font-weight: 800; line-height: 1.3; color: var(--couleur-encre); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--couleur-accent-texte); transition: transform 0.3s var(--ressort); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq p { margin: 0; padding: 0 22px 20px; max-width: 78ch; color: var(--gris-texte); }

/* ---------- Bouton « revenir en haut » ---------- */
/* Rond fixe en bas à droite ; il n'apparaît qu'après avoir fait défiler la page (classe posée par site.js) */
.retour-haut { position: fixed; right: clamp(14px, 3vw, 32px); bottom: clamp(14px, 3vw, 32px); z-index: 44; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--couleur-encre); color: var(--blanc); box-shadow: 0 12px 28px -12px rgba(7, 27, 48, 0.7); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s var(--ressort), visibility 0.3s, background-color 0.25s; }
.retour-haut.est-visible { opacity: 1; visibility: visible; transform: none; }
.retour-haut:hover { background: var(--couleur-accent); color: var(--blanc); }
.retour-haut svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) {
  /* Au-dessus de la barre d'action fixe du smartphone */
  .retour-haut { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
}

/* ---------- Smartphone : mise en page dédiée ---------- */
/* Barre d'action fixe en bas d'écran (appel direct + demande d'étude), visible sur smartphone seulement */
.barre-mobile { display: none; }
@media (max-width: 600px) {
  /* Expertises : rangée à faire défiler du doigt (la carte suivante dépasse pour l'indiquer) */
  .cartes { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--gouttiere)); padding: 4px var(--gouttiere) 22px; scroll-padding-inline: var(--gouttiere); scrollbar-width: none; }
  .cartes::-webkit-scrollbar { display: none; }
  .cartes > li { flex: 0 0 72%; scroll-snap-align: start; }
  /* Les cartes hors écran sur le côté doivent être visibles dès qu'on fait défiler */
  .js .cartes > li.apparait { opacity: 1; transform: none; transition: none; }
  .carte__titre { flex-direction: row; align-items: center; gap: 10px; }
  .carte h3 { font-size: 1.02rem; }
  .carte__corps { padding: 16px 16px 18px; }

  /* Déroulé du projet : frise verticale, pictogramme à gauche, texte à droite */
  .parcours { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .parcours li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; padding: 0 0 26px; }
  .parcours__puce { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .parcours .parcours--jalon .parcours__puce { margin: 5px; }
  .parcours strong { grid-column: 2; padding-top: 4px; }
  .parcours li > span:last-child { grid-column: 2; font-size: 0.92rem; }
  /* Trait vertical qui relie une étape à la suivante */
  .parcours li:nth-child(n)::after { display: block; left: 27px; right: auto; top: 60px; bottom: 4px; width: 2px; height: auto; background: var(--trait); }
  .parcours li:nth-child(n):last-child::after { display: none; }

  /* Secteurs : mosaïque de deux colonnes, titre seul */
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tuiles li { aspect-ratio: 1 / 1; }
  .tuiles div { padding: 12px; }
  .tuiles h3 { margin: 0; font-size: 0.95rem; line-height: 1.2; hyphens: auto; overflow-wrap: anywhere; }
  .tuiles h3::before { width: 22px; margin-bottom: 8px; }
  .tuiles p { display: none; }

  /* Barre d'action */
  .barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px; padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--trait); box-shadow: 0 -12px 30px -20px rgba(7, 27, 48, 0.5); }
  .barre-mobile a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding-inline: 10px; text-align: center; line-height: 1.15; white-space: nowrap; border-radius: 999px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
  .barre-mobile svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .barre-mobile__appel { border: 2px solid var(--couleur-encre); color: var(--couleur-encre); }
  .barre-mobile__etude { background: var(--couleur-accent); color: var(--blanc); }
  /* Réserve la hauteur de la barre pour qu'elle ne masque pas le bas de page */
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}
@media (max-width: 350px) {
  /* Très petits écrans : libellés de la barre d'action resserrés pour tenir sur une ligne */
  .barre-mobile { gap: 8px; }
  .barre-mobile a { font-size: 0.7rem; letter-spacing: 0.03em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .garde__media video { display: none; }
  .js .apparait { opacity: 1; transform: none; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .signature path { stroke-dashoffset: 0; }
}

@media print {
  .entete, .pied, .garde__media, .appel__actions, .barre-mobile, .retour-haut { display: none; }
}