@font-face{font-family:Figtree;src:url(/polices/Figtree-latin.woff2) format("woff2");font-weight:300 900;font-display:swap}*{box-sizing:border-box}html{height:100%}body{margin:0;min-height:100%;background-color:#fff;font-family:Arial,sans-serif;font-size:14px;line-height:20px;color:#333}img{max-width:100%;vertical-align:middle;display:inline-block}h1{font-size:38px;line-height:44px;margin:20px 0 10px;font-weight:bold}h2{font-size:32px;line-height:36px;margin:20px 0 10px;font-weight:bold}h3{font-size:24px;line-height:30px;margin:20px 0 10px;font-weight:bold}p{margin-top:0;margin-bottom:10px}ul,ol{margin-top:0;margin-bottom:10px;padding-left:40px}a{background-color:transparent}
.ftcs-page { position: relative; background-color: #FFFFFF; color: #06243F; font-family: Figtree, "Segoe UI", sans-serif; font-size: 17px; line-height: 28px; }
.gouttiere { padding-left: 56px; padding-right: 56px; }
.conteneur { width: 100%; max-width: 1296px; margin-left: auto; margin-right: auto; }
.point { display: block; flex: none; width: 8px; height: 8px; border-radius: 999px; background-color: #2F5FD0; box-shadow: 0 0 10px rgba(47, 95, 208, 0.8); }
.point.blanc { background-color: #FFFFFF; box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-family: Figtree, "Segoe UI", sans-serif; font-size: 16px; line-height: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.bouton.lumiere { color: #FFFFFF; background-image: linear-gradient(135deg, #3D6FE0, #2A55C2); box-shadow: 0 10px 24px -8px rgba(47, 95, 208, 0.65); }
.bouton.doux { color: #06243F; background-color: #FFFFFF; box-shadow: 0 0 0 1px #DCE6F7; }
.bouton.verre { color: #FFFFFF; background-color: rgba(255, 255, 255, 0.14); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.bouton.lumiere-petit { min-height: 44px; padding: 0 18px; color: #FFFFFF; background-image: linear-gradient(135deg, #3D6FE0, #2A55C2); box-shadow: 0 10px 24px -8px rgba(47, 95, 208, 0.65); font-size: 15px; line-height: 15px; }
.bouton.doux-petit { min-height: 44px; padding: 0 18px; color: #06243F; background-color: #FFFFFF; box-shadow: 0 0 0 1px #DCE6F7; font-size: 15px; line-height: 15px; }
.titre-section { margin: 0; font-size: 42px; line-height: 48px; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.accent { font-style: normal; color: #2F5FD0; }
.accent-clair { font-style: normal; color: #A9CBFF; }
.chapo { margin: 0; max-width: 42rem; color: #40536A; font-size: 18px; line-height: 29px; }
.chapo.chapo-clair { color: rgba(255, 255, 255, 0.92); }
.bloc-titre { display: grid; gap: 14px; }
.photo-cadre { position: relative; overflow: hidden; background-color: #DCE6F7; }
.photo-fond { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; background-color: #DCE6F7; }
.photo-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.voile { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #2F5FD0; font-weight: 600; text-decoration: none; }
.lien-fleche.lien-clair { min-height: 0; color: #FFFFFF; }
.saut { position: absolute; left: 12px; top: -60px; z-index: 20; padding: 10px 16px; border-radius: 999px; background-color: #06243F; color: #FFFFFF; font-weight: 600; text-decoration: none; }
.saut:focus { top: 12px; }
/* Focus clavier visible (contrôle en ligne du 22/10/2026) : bleu sur fond clair, blanc sur photo. */
.saut:focus-visible, .logo-lien:focus-visible, .nav-lien:focus-visible, .bouton:focus-visible, .vignette:focus-visible, .carte:focus-visible, .lien-texte:focus-visible, .lien-fleche:focus-visible, .fin-lien:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 3px; }
.bouton.lumiere:focus-visible, .bouton.verre:focus-visible, .fil-lien:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
/* Le badge Webflow (offre Starter) occupe le coin bas droit : un élément qui reçoit le focus s'arrête au-dessus. */
.saut, .logo-lien, .nav-lien, .bouton, .vignette, .carte, .lien-texte, .lien-fleche, .fin-lien, .fil-lien, .bande, .logos, .obstacles-mosaique, .real-cartes, .etapes-piste { scroll-margin-bottom: 56px; }
/* Titres de section plus petits entre 992 et 1279 px, où les colonnes sont étroites. */
@media screen and (min-width: 1280px) {
  .titre-section { font-size: 48px; line-height: 54px; }
}
@media screen and (max-width: 991px) {
  .gouttiere { padding-left: 20px; padding-right: 20px; }
  .titre-section { font-size: 40px; line-height: 46px; }
  /* La barre de contact et le badge Webflow occupent le bas de l'écran : un élément qui reçoit le focus reste au-dessus (WCAG 2.4.11). */
  .saut, .logo-lien, .bouton, .vignette, .carte, .lien-texte, .lien-fleche, .fin-lien, .fil-lien, .bande, .logos, .obstacles-mosaique, .real-cartes, .etapes-piste { scroll-margin-bottom: 130px; }
}
@media screen and (max-width: 767px) {
  .titre-section { font-size: 32px; line-height: 38px; }
}


.site { position: absolute; left: 0; right: 0; top: 0; z-index: 10; padding-top: 12px; }
.site-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 8px 8px 16px; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 999px; background-color: rgba(255, 255, 255, 0.82); backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(6, 36, 63, 0.16); }
.logo-lien { display: inline-flex; align-items: center; gap: 10px; color: #06243F; font-size: 16px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.logo-img { display: block; width: 34px; height: 34px; }
.nav { display: flex; gap: 14px; font-size: 15px; font-weight: 600; }
.nav-lien { color: #06243F; text-decoration: none; white-space: nowrap; }
.nav-lien:hover { color: #2F5FD0; }
.site-actions { display: flex; align-items: center; gap: 12px; }
.numero { font-size: 15px; font-weight: 600; user-select: all; }
.seul-ordinateur { display: block; }
.seul-mobile { display: none; }
@media screen and (min-width: 1280px) {
  .nav { gap: 22px; }
}
@media screen and (max-width: 991px) {
  .nav { display: none; }
  .numero { display: none; }
  .seul-ordinateur { display: none; }
  .seul-mobile { display: block; }
}

.ouverture { position: relative; display: grid; align-items: end; min-height: min(92vh, 900px); height: auto; max-height: none; color: #FFFFFF; }
.photo-img.hero-mobile { display: none; }
.voile-ouverture { background-image: radial-gradient(498px 594px at 25.1% 94.6%, rgba(6, 36, 63, 0.41) 0%, rgba(6, 36, 63, 0.73) 59%, rgba(6, 36, 63, 0.71) 89.6%, rgba(6, 36, 63, 0.6) 100.8%, rgba(6, 36, 63, 0.36) 112.1%, rgba(6, 36, 63, 0.12) 123.4%, rgba(6, 36, 63, 0) 134.6%); }
.ouverture-cadre { position: relative; width: 100%; }
.ouverture-in { display: grid; gap: 18px; padding-top: 160px; padding-bottom: 44px; }
.titre-page { margin: 0; max-width: 13ch; font-size: 76px; line-height: 74px; font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; text-shadow: 0 2px 20px rgba(6, 36, 63, 0.35); }
.ouverture-texte { margin: 0; max-width: 34rem; color: rgba(255, 255, 255, 0.92); font-size: 20px; line-height: 32px; text-shadow: 0 1px 12px rgba(6, 36, 63, 0.45); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media screen and (max-width: 991px) {
  .voile-ouverture { background-image: radial-gradient(515px 603px at 172px 96.5%, rgba(6, 36, 63, 0.46) 0%, rgba(6, 36, 63, 0.73) 51.5%, rgba(6, 36, 63, 0.77) 79.2%, rgba(6, 36, 63, 0.65) 90.5%, rgba(6, 36, 63, 0.39) 101.7%, rgba(6, 36, 63, 0.13) 113%, rgba(6, 36, 63, 0) 124.2%); }
  .titre-page { font-size: 60px; line-height: 60px; }
  .ouverture-in { padding-top: 120px; padding-bottom: 28px; }
}
@media screen and (max-width: 767px) {
  .photo-img.hero-large { display: none; }
  .photo-img.hero-mobile { display: block; }
  .voile-ouverture { background-image: linear-gradient(180deg, rgba(6, 36, 63, 0) 109px, rgba(6, 36, 63, 0.1) 129px, rgba(6, 36, 63, 0.3) 149px, rgba(6, 36, 63, 0.51) 169px, rgba(6, 36, 63, 0.6) 189px, rgba(6, 36, 63, 0.71) 336px, rgba(6, 36, 63, 0.56) 618px, rgba(6, 36, 63, 0.25) 734px); }
  .titre-page { font-size: 44px; line-height: 46px; }
  .ouverture-texte { font-size: 18px; line-height: 28px; }
}

.coupe-sec { padding-top: 104px; padding-bottom: 24px; }
.coupe-tete { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 24px 64px; }
.coupe-intro { display: grid; gap: 6px; }
.atelier { margin-top: 40px; padding: 12px; border-radius: 34px; background-image: linear-gradient(180deg, #FFFFFF, #F2F7FF); box-shadow: 0 0 0 1px #E3ECFA, 0 50px 100px -50px rgba(47, 95, 208, 0.55); }
.etapes-piste { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px; margin: 0; padding: 0 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
/* Rangée atteignable au clavier dans tous les navigateurs (Safari ne rend pas focalisable une zone qui défile) : Tab, puis flèches. */
.etapes-piste:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 4px; }
.etape-carte { display: grid; gap: 12px; scroll-snap-align: start; }
.etape-image { overflow: hidden; border-radius: 24px; aspect-ratio: 2544 / 1119; background-color: #EAF1FC; }
.etape-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.etape-texte { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 24px; padding: 4px 10px; }
.etape-haut { grid-column: 1 / -1; margin: 0; color: #2F5FD0; font-size: 13px; line-height: 18px; font-weight: 600; }
.etape-titre { margin: 0; font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.015em; }
.etape-desc { margin: 0; max-width: 40rem; color: #40536A; font-size: 15px; line-height: 22px; }
.points { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 8px 0 0; padding: 0 4px; list-style: none; }
.point-etape { display: grid; justify-items: center; gap: 2px; min-height: 44px; padding: 6px 2px; color: #5D7088; font-size: 13px; line-height: 16px; font-weight: 600; text-align: center; }
.point-num { font-weight: 800; color: #2F5FD0; }
.legende-coupe { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 6px 0; color: #40536A; font-size: 13px; line-height: 18px; font-weight: 600; }
.reseau { display: inline-flex; align-items: center; gap: 6px; }
.pastille { display: block; width: 10px; height: 10px; border-radius: 999px; }
.pastille.rouge { background-color: #E5484D; }
.pastille.jaune { background-color: #F5D90A; }
.pastille.bleue { background-color: #3E9BF2; }
.pastille.verte { background-color: #30A46C; }
@media screen and (max-width: 991px) {
  .coupe-sec { padding-top: 64px; }
  .coupe-tete { grid-template-columns: 1fr; gap: 14px; }
  .atelier { margin-top: 28px; padding: 10px; border-radius: 28px; }
  .etape-texte { grid-template-columns: 1fr; }
}
@media screen and (max-width: 767px) {
  .etapes-piste { grid-auto-columns: 92%; gap: 10px; }
  .etape-image { border-radius: 18px; }
  .point-nom { display: none; }
}

.pleine { position: relative; display: grid; align-items: end; min-height: 760px; margin-top: 104px; color: #FFFFFF; }
.voile-pleine { background-image: linear-gradient(180deg, rgba(6, 36, 63, 0) 30%, rgba(6, 36, 63, 0.72) 70%, rgba(6, 36, 63, 0.9) 100%); }
.pleine-cadre { position: relative; width: 100%; }
.pleine-in { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 24px 64px; padding-top: 280px; padding-bottom: 56px; }
/* Liste sur un panneau de verre marine : lisible sur le ciel clair entre 992 et 1280 px (contrôle en ligne du 22/10/2026). */
.atouts { display: grid; gap: 8px; max-width: 46rem; margin: 4px 0 0; padding: 16px 20px; list-style: none; border-radius: 20px; background-color: rgba(6, 36, 63, 0.55); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.atout { display: flex; align-items: baseline; gap: 10px; font-size: 16px; line-height: 24px; }
.point.point-clair { background-color: #A9CBFF; box-shadow: 0 0 10px rgba(169, 203, 255, 0.9); }
@media screen and (max-width: 991px) {
  .pleine { display: block; min-height: 0; margin-top: 64px; background-color: #06243F; }
  .photo-fond.pleine-photo { position: relative; top: auto; right: auto; bottom: auto; left: auto; aspect-ratio: 4 / 3; }
  .voile-pleine { background-image: linear-gradient(180deg, rgba(6, 36, 63, 0) 55%, rgba(6, 36, 63, 0.6) 80%, #06243F 100%); }
  .pleine-in { grid-template-columns: 1fr; padding-top: 0; padding-bottom: 36px; margin-top: -36px; }
  .atouts { padding: 0; border-radius: 0; background-color: transparent; backdrop-filter: none; box-shadow: none; }
}

.savoir { padding-top: 104px; padding-bottom: 24px; }
.cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.carte-item { display: grid; scroll-snap-align: start; }
.carte { position: relative; display: grid; align-items: end; min-height: 460px; overflow: hidden; border-radius: 24px; color: #FFFFFF; text-decoration: none; }
.voile-carte { background-image: linear-gradient(180deg, rgba(6, 36, 63, 0) 41%, rgba(6, 36, 63, 0.1) 45.5%, rgba(6, 36, 63, 0.26) 48.5%, rgba(6, 36, 63, 0.46) 51%, rgba(6, 36, 63, 0.655) 61%, rgba(6, 36, 63, 0.68) 100%); }
.carte-in { position: relative; display: grid; gap: 6px; padding: 22px; }
.carte-titre { margin: 0; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.02em; }
.carte-texte { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 15px; line-height: 22px; }
@media screen and (max-width: 991px) {
  .savoir { padding-top: 72px; }
  .voile-carte { background-image: linear-gradient(180deg, rgba(6, 36, 63, 0) 30%, rgba(6, 36, 63, 0.1) 34.5%, rgba(6, 36, 63, 0.26) 37.5%, rgba(6, 36, 63, 0.46) 40%, rgba(6, 36, 63, 0.655) 48%, rgba(6, 36, 63, 0.68) 100%); }
  /* Rangée défilante dès la tablette : trois colonnes de 233 px y sont trop étroites (contrôle du 22/10/2026). */
  .cartes { display: flex; gap: 12px; margin: 28px -20px 0; padding: 0 20px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; }
  .carte-item { flex: 0 0 46%; }
}
@media screen and (max-width: 767px) {
  .carte-item { flex: 0 0 84%; }
  .carte { min-height: 380px; }
  .voile-carte { background-image: linear-gradient(180deg, rgba(6, 36, 63, 0) 19%, rgba(6, 36, 63, 0.32) 29%, rgba(6, 36, 63, 0.46) 39%, rgba(6, 36, 63, 0.655) 49%, rgba(6, 36, 63, 0.68) 100%); }
}

.galerie-sec { padding-top: 104px; padding-bottom: 24px; }
.galerie-tete { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 16px 64px; }
.galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.gal-item { scroll-snap-align: start; }
.gal-item.grand { grid-column: span 2; grid-row: span 2; }
.gal-item.large { grid-column: span 2; }
.vignette { position: relative; display: block; height: 100%; color: #40536A; text-decoration: none; }
.vignette-photo { display: block; height: 100%; border-radius: 20px; }
@media screen and (max-width: 991px) {
  .galerie-sec { padding-top: 72px; }
  .galerie-tete { grid-template-columns: 1fr; gap: 12px; }
  .galerie { display: flex; gap: 12px; margin: 24px -20px 0; padding: 0 20px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; }
  .gal-item { flex: 0 0 84%; }
  .gal-item.grand { grid-column: auto; grid-row: auto; }
  .gal-item.large { grid-column: auto; }
  .vignette { height: auto; }
  .vignette-photo { height: auto; aspect-ratio: 4 / 3; }
}

.parc-sec { padding-top: 104px; padding-bottom: 24px; background-image: linear-gradient(180deg, #FFFFFF 0%, #F5F8FF 100%); }
.parc-tete { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 16px 64px; }
.bande { display: flex; gap: 14px; margin: 24px 0 0; padding: 0 max(56px, calc((100% - 1296px) / 2)) 12px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: max(56px, calc((100% - 1296px) / 2)); }
.bande:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 4px; }
.parc-item { flex: none; width: 360px; scroll-snap-align: start; }
.parc-photo { display: block; aspect-ratio: 4 / 3; border-radius: 20px; }
@media screen and (max-width: 991px) {
  .parc-sec { padding-top: 72px; }
  .parc-tete { grid-template-columns: 1fr; gap: 12px; }
  .bande { padding: 0 20px 12px; scroll-padding-left: 20px; }
}
@media screen and (max-width: 767px) {
  .parc-item { width: 300px; }
}

.groupe-sec { padding-top: 104px; padding-bottom: 24px; }
.cote { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 64px; }
.cote-photo { display: block; aspect-ratio: 4 / 3; border-radius: 28px; }
.cote-texte { display: grid; gap: 14px; }
.societes { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.societe { padding-left: 16px; border-left: 3px solid #6EA8FF; color: #40536A; font-size: 16px; line-height: 24px; }
.societe-nom { color: #06243F; }
@media screen and (max-width: 991px) {
  .groupe-sec { padding-top: 72px; }
  .cote { grid-template-columns: 1fr; gap: 24px; }
}

.ref-sec { padding-top: 104px; padding-bottom: 24px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 48px; margin: 28px auto 0; padding: 12px 0; list-style: none; }
.logos:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 4px; }
.logo-item { display: flex; align-items: center; height: 44px; }
.logo-client { display: block; width: auto; height: 30px; max-width: 140px; object-fit: contain; }
@media screen and (max-width: 991px) {
  .ref-sec { padding-top: 72px; }
}
@media screen and (max-width: 767px) {
  .logos-cadre { padding-left: 0; padding-right: 0; }
  .logos { flex-wrap: nowrap; justify-content: flex-start; gap: 36px; padding: 12px 20px; overflow-x: auto; }
  .logo-item { flex: none; }
}

.appel { position: relative; display: grid; place-items: center; min-height: 640px; margin-top: 104px; color: #FFFFFF; text-align: center; }
.voile-appel { background-image: radial-gradient(70% 70% at 50% 50%, rgba(6, 36, 63, 0.66), rgba(6, 36, 63, 0.82)); }
.appel-in { position: relative; display: grid; justify-items: center; gap: 16px; padding-top: 72px; padding-bottom: 72px; }
.appel-titre { max-width: 18ch; }
.appel-texte { margin: 0; max-width: 36rem; color: rgba(255, 255, 255, 0.9); }
.actions.centre { justify-content: center; }
@media screen and (max-width: 991px) {
  .appel { min-height: 560px; margin-top: 72px; }
}

.fin { padding-top: 40px; padding-bottom: 56px; background-color: #F5F8FF; color: #40536A; font-size: 15px; line-height: 24px; }
.fin-in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px; }
.fin-bloc { display: grid; align-content: start; gap: 4px; }
.fin-titre { color: #06243F; }
.fin-texte { margin: 0; }
.fin-liste { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.fin-lien { color: #40536A; text-decoration: none; }
.fin-lien:hover { color: #2F5FD0; }
@media screen and (max-width: 991px) {
  .fin { padding-bottom: 160px; }
  .fin-in { grid-template-columns: 1fr; }
}

.barre { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9; grid-template-columns: auto 1fr; gap: 8px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 999px; background-color: rgba(255, 255, 255, 0.82); backdrop-filter: blur(14px); box-shadow: 0 14px 30px -14px rgba(6, 36, 63, 0.45); }
@media screen and (max-width: 991px) {
  /* Au-dessus du badge « Made in Webflow » (28 px, à 12 px du bas) imposé sur l'offre Starter ; revenir à 12 px avec un plan payant. */
  .barre { display: grid; bottom: 52px; }
}


.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-self: start; margin: -6px 0; padding: 6px 14px; border-radius: 999px; background-color: rgba(6, 36, 63, 0.72); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.9); font-size: 14px; line-height: 20px; font-weight: 600; }
.fil-lien { color: #FFFFFF; text-decoration: underline; }
.fil-sep { color: rgba(255, 255, 255, 0.7); }
.titre-page.long { max-width: 16ch; font-size: 64px; line-height: 64px; }
@media screen and (max-width: 991px) {
  .titre-page.long { font-size: 52px; line-height: 54px; }
}
@media screen and (max-width: 767px) {
  .titre-page.long { font-size: 38px; line-height: 42px; }
}
.capacites-sec { padding-top: 104px; padding-bottom: 24px; }
.capacites { display: grid; grid-template-columns: 1.35fr 1fr; align-items: start; gap: 48px; }
.capacites-texte { display: grid; gap: 16px; }
.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid #E6EEFB; }
.chiffre { display: grid; align-content: start; gap: 4px; padding: 18px 16px 18px 0; border-bottom: 1px solid #E6EEFB; }
.chiffre-valeur { color: #2F5FD0; font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -0.02em; }
.chiffre-libelle { color: #40536A; font-size: 15px; line-height: 22px; }
.texte-courant { margin: 0; max-width: 42rem; color: #40536A; font-size: 17px; line-height: 28px; }
.sous-titre { margin: 8px 0 0; color: #06243F; font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.015em; }
.sols { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sol { padding: 6px 14px; border-radius: 999px; background-color: #EEF4FF; color: #06243F; font-size: 15px; line-height: 22px; font-weight: 600; }
.capacites-image { display: grid; gap: 8px; }
.capacites-photo { display: block; aspect-ratio: 4 / 5; border-radius: 28px; }
/* Entre 992 et 1279 px, plus de place pour le texte et les chiffres (contrôle du 22/10/2026). */
@media screen and (min-width: 1280px) {
  .capacites { grid-template-columns: 1fr 1fr; gap: 64px; }
}
@media screen and (max-width: 991px) {
  .capacites-sec { padding-top: 72px; }
  .capacites { grid-template-columns: 1fr; gap: 28px; }
  .capacites-photo { aspect-ratio: 4 / 3; }
}
@media screen and (max-width: 479px) {
  .chiffres { grid-template-columns: 1fr; }
}
.etape-corps { display: grid; gap: 8px; }
.etapes-titre { margin: 36px 0 0; color: #06243F; font-size: 18px; line-height: 26px; font-weight: 700; }
.atelier.atelier-suite { margin-top: 14px; }
@media screen and (max-width: 991px) {
  .etapes-titre { margin-top: 28px; }
  .atelier.atelier-suite { margin-top: 12px; }
}
.reseaux-image { display: grid; gap: 8px; align-self: start; }
.cote-photo.reseaux-photo { aspect-ratio: 4 / 5; }
.reseaux-liste { display: grid; gap: 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.reseau-item { display: grid; gap: 4px; padding-left: 16px; border-left: 3px solid #6EA8FF; }
.reseau-titre { margin: 0; color: #06243F; font-size: 18px; line-height: 24px; font-weight: 800; }
.reseau-texte { margin: 0; color: #40536A; font-size: 16px; line-height: 24px; }
@media screen and (max-width: 991px) {
  .cote-photo.reseaux-photo { aspect-ratio: 4 / 3; }
}
.obstacles-sec { padding-top: 104px; padding-bottom: 24px; }
.obstacles { display: grid; grid-template-columns: 5fr 7fr; align-items: start; gap: 64px; }
.obstacles-texte { display: grid; gap: 16px; }
.obstacles-liste { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.obstacle { display: flex; align-items: baseline; gap: 10px; color: #06243F; font-size: 17px; line-height: 26px; font-weight: 600; }
.obstacles-mosaique { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.obstacles-mosaique:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 4px; }
.obstacle-photo-item { display: grid; align-content: start; gap: 8px; scroll-snap-align: start; }
.obstacle-photo { display: block; aspect-ratio: 4 / 3; border-radius: 20px; }
@media screen and (max-width: 991px) {
  .obstacles-sec { padding-top: 72px; }
  .obstacles { grid-template-columns: 1fr; gap: 28px; }
}
@media screen and (max-width: 767px) {
  .obstacles-mosaique { display: flex; gap: 12px; margin: 0 -20px; padding: 0 20px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; }
  .obstacle-photo-item { flex: 0 0 84%; }
}

.cote.cote-inverse { grid-template-columns: 1fr 1.15fr; }
.titre-encadre { margin: 0; color: #06243F; font-size: 36px; line-height: 42px; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
@media screen and (max-width: 767px) {
  .titre-encadre { font-size: 28px; line-height: 34px; }
}
@media screen and (max-width: 991px) {
  .cote.cote-inverse { grid-template-columns: 1fr; }
}
.real-sec { padding-top: 104px; padding-bottom: 24px; }
.real-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.real-cartes:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 4px; }
.real-carte { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: 24px; background-image: linear-gradient(180deg, #FFFFFF, #F2F7FF); box-shadow: 0 0 0 1px #E3ECFA, 0 30px 60px -40px rgba(47, 95, 208, 0.45); scroll-snap-align: start; }
.real-chiffre { color: #2F5FD0; font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: -0.02em; }
.real-titre { margin: 0; color: #06243F; font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -0.015em; }
.real-texte { margin: 0; color: #40536A; font-size: 15px; line-height: 23px; }
.real-conducteur { margin: 0; color: #5D7088; font-size: 14px; line-height: 20px; font-weight: 600; }
@media screen and (max-width: 991px) {
  .real-sec { padding-top: 72px; }
  /* Rangée défilante dès la tablette : trois colonnes y sont trop étroites (contrôle du 22/10/2026). */
  .real-cartes { display: flex; gap: 12px; margin: 24px -20px 0; padding: 0 20px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; }
  .real-carte { flex: 0 0 46%; }
}
@media screen and (max-width: 767px) {
  .real-carte { flex: 0 0 86%; }
}
.cote.faq { grid-template-columns: 1fr 1.15fr; align-items: start; }
.faq-liste { display: grid; gap: 18px; margin-top: 4px; }
.faq-item { display: grid; gap: 6px; padding-bottom: 18px; border-bottom: 1px solid #E6EEFB; }
.faq-question { margin: 0; color: #06243F; font-size: 19px; line-height: 26px; font-weight: 800; letter-spacing: -0.01em; }
.faq-reponse { margin: 0; color: #40536A; font-size: 16px; line-height: 25px; }
.lien-texte { color: #2F5FD0; font-weight: 600; }
.faq-image { position: sticky; top: 104px; }
@media screen and (max-width: 991px) {
  .faq-image { position: static; }
  .cote.faq { grid-template-columns: 1fr; }
}



/* Gabarit du site local : compléments au design validé (accueil et Forage dirigé), pour 10 pages au lieu de 2.
   En-tête : navigation horizontale à partir de 1 280 px, bouton « Menu » en dessous (fiche 00 § 3.2 et 3.3). */
[hidden] { display: none !important; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-in { position: relative; }

/* 05/11/2026, demande du client : « Il faut que le bandeau avec le nom des pages reste tout le temps même quand on est
   en bas de page ». L'en-tête (pilule en verre blanc : logo, pages, téléphone, devis ; bouton « Menu » sur téléphone)
   reste fixé en haut de l'écran sur toutes les pages, à la même place qu'avant en haut de page (12 px du bord, 62 px de
   haut) : rien ne bouge sur les photos du haut de page. Au-dessus de tout le contenu (z-index 40) ; le lien
   « Aller au contenu » passe encore devant lui. --sous-entete : bas de la pilule (74 px) plus 22 px d'air ; une ancre
   suivie et les blocs collants des pages (coordonnées de /contact, thèmes de /faq, sommaire des mentions légales,
   autrefois à 24 px du haut) s'arrêtent sous lui. Le fondu entre les pages (view-transition-name: entete) est gardé
   dans mouvement.css. */
:root { --sous-entete: 96px; }
header.site { position: fixed; z-index: 40; }
/* La bande de l'en-tête est transparente autour de la pilule (12 px au-dessus, gouttières sur les côtés) : les clics y
   passent au contenu qui défile dessous ; seule la pilule (et le panneau du menu qu'elle contient) les reçoit. */
header.site { pointer-events: none; }
header.site .site-in { pointer-events: auto; }
/* Logo rond de l'en-tête : l'image (logo-ftcs-bleu.png) est un disque sur un carré blanc ; le carré se voyait sur le
   verre de la pilule, désormais toujours à l'écran. Coupé en rond, au bord exact du disque. */
.logo-img { border-radius: 50%; }
.saut { z-index: 50; }
html { scroll-padding-top: var(--sous-entete); }
html .ct-coord, html .fq-cote, html .ml-sommaire { top: var(--sous-entete); }
/* Page défilée (js/site.js) : verre blanc plus opaque, pour que le texte qui passe dessous ne se lise plus au travers
   de l'en-tête ni de la barre mobile ; en haut de page, le verre validé (82 %) reste sur la photo. Le panneau du menu
   (téléphone et tablette), qui s'ouvre désormais n'importe où dans la page, est en blanc plein : son verre, imbriqué
   dans celui de l'en-tête, laissait lire le texte de la page au travers des liens (capture du 05/11). */
.site-in, .barre { transition: background-color 200ms ease, box-shadow 200ms ease; }
html.hors-haut .site-in { background-color: rgba(255, 255, 255, 0.98); box-shadow: 0 12px 32px -8px rgba(6, 36, 63, 0.22); }
html.hors-haut .barre { background-color: rgba(255, 255, 255, 0.98); }
/* Page défilée : un voile blanc dégradé derrière la pilule efface en douceur le contenu qui passe au-dessus et sur les
   côtés d'elle (sinon des morceaux de titres et de boutons restent visibles autour de la pilule, surtout sur téléphone).
   Sur une photo ou une section bleu nuit (html.entete-sur-fonce, js/site.js), pas de voile : la pilule blanche s'y
   détache nettement, comme en haut de page. */
header.site::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: calc(100% + 24px); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.8) 55%, rgba(255, 255, 255, 0) 100%); opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
html.hors-haut header.site::before { opacity: 1; }
html.entete-sur-fonce header.site::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .site-in, .barre, header.site::before { transition: none; }
}
@media print {
  header.site { position: absolute; }
}

/* 05/11/2026, demande du client : « Essaye d'occuper la largeur de la page pour que ça fasse moins resserré ». Conteneur
   commun de 1 520 px au plus (1 296 avant) et gouttières fluides sur ordinateur, de 28 à 64 px (56 avant) : 1 340 px de
   contenu sur un écran de 1 440, 1 520 sur un écran de 1 920. Sous 992 px, gouttières de 20 px inchangées (les rangées
   défilantes en dépendent). Les paragraphes gardent leur mesure (chapô 42rem, textes des colonnes et des cartes) ; les
   deux blocs que l'élargissement allongeait au-delà de 90 signes par ligne (réponses de la foire aux questions de
   /forage-dirige, liste de la démarche de /travaux-speciaux, mesures du 05/11 à 1 920 px) sont ramenés à 44rem. La
   rangée défilante du parc s'aligne sur le conteneur élargi. */
:root { --largeur: 1520px; --gouttiere: clamp(28px, 3.5vw, 64px); }
.conteneur { max-width: var(--largeur); }
.faq-reponse, .ts-liste { max-width: 44rem; }
@media screen and (min-width: 992px) {
  .gouttiere { padding-left: var(--gouttiere); padding-right: var(--gouttiere); }
  .bande { padding: 0 max(var(--gouttiere), calc((100% - var(--largeur)) / 2)) 12px; scroll-padding-left: max(var(--gouttiere), calc((100% - var(--largeur)) / 2)); }
}
/* Page courante : texte bleu nuit (contraste suffisant sur l'en-tête en verre), soulignement bleu de 3 px (fiche 00 § 3.2). */
.nav-lien[aria-current] { text-decoration: underline; text-decoration-color: #2F5FD0; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.menu-mobile { display: none; }
.menu-mobile > summary { list-style: none; cursor: pointer; }
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-fermer { display: none; }
.menu-mobile[open] .menu-ouvrir { display: none; }
.menu-mobile[open] .menu-fermer { display: inline; }
.menu-panneau { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 11; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow: auto; overscroll-behavior: contain; padding: 12px; border: 1px solid #FFFFFF; border-radius: 28px; background-color: #FFFFFF; box-shadow: 0 24px 48px -16px rgba(6, 36, 63, 0.4); }
.menu-liste { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.menu-lien { display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 16px; color: #06243F; font-size: 18px; line-height: 24px; font-weight: 600; text-decoration: none; }
.menu-lien:hover { background-color: #F2F6FF; }
.menu-lien[aria-current] { background-color: #F2F6FF; box-shadow: inset 4px 0 0 #2F5FD0; font-weight: 800; }
.menu-lien:focus-visible { outline: 3px solid #2F5FD0; outline-offset: -3px; }
.menu-actions { display: grid; gap: 8px; margin-top: 10px; }
.suite-lien { margin: 20px 0 0; }
.actions-legales { margin: 0; }
@media screen and (max-width: 1279px) {
  .nav { display: none; }
  .menu-mobile { display: block; }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .menu-panneau { left: auto; width: 480px; }
}

/* Pied de page : 4 colonnes (fiche 00 § 3.7), dans les couleurs claires du design validé. */
.fin-in { grid-template-columns: 1.5fr 1.2fr 1fr 1fr; gap: 32px; }
.fin-titre { margin: 0 0 2px; font-size: 16px; line-height: 24px; font-weight: 800; }
.fin-identite .fin-titre { margin-top: 14px; }
.fin-nom { margin: 0; color: #06243F; font-size: 18px; line-height: 26px; font-weight: 800; }
.fin address { font-style: normal; }
.fin-lien { text-decoration: underline; text-decoration-color: #B9CBEE; text-underline-offset: 3px; }
.fin-devis { justify-self: start; margin-top: 12px; }
.fin-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 32px; padding-top: 16px; border-top: 1px solid #DCE6F7; font-size: 14px; line-height: 22px; }
.fin-legal p { margin: 0; }
@media screen and (max-width: 991px) {
  .fin-in { grid-template-columns: 1fr 1fr; }
  /* Sans badge Webflow en local : la barre revient à 12 px du bas. */
  .barre { bottom: 12px; }
  .fin { padding-bottom: 110px; }
}
@media screen and (max-width: 767px) {
  .fin-in { grid-template-columns: 1fr; }
  /* Cibles tactiles de 44 px au doigt (brief client : « zones tactiles de 44 × 44 px minimum ») : liens du pied de
     page et du fil d'Ariane ; la marge négative garde la pastille du fil d'Ariane à sa taille. */
  .fin-liste { gap: 0; }
  .fin-lien { display: inline-flex; align-items: center; min-height: 44px; }
  .fil-lien { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
  /* Vérification du 28/10 : 44 px aussi en largeur (lien « RSE »), anneau de focus arrondi qui reste dans la pastille
     du fil d'Ariane, même sur deux lignes ; le lien passe au-dessus de la 2e ligne de la pastille (clic en bas du lien). */
  .fin-lien, .fil-lien { padding-inline: 12px; margin-inline: -12px; border-radius: 14px; }
  .fin-lien:focus-visible, .fil-lien:focus-visible { outline-offset: -9px; }
  .fil-lien { position: relative; z-index: 1; }
}

/* Haut de page sans photo (page légale, 404, pages de résultat d'envoi). */
.page-simple { padding-top: 132px; padding-bottom: 48px; background-image: linear-gradient(180deg, #EEF4FF, #FFFFFF); }
.page-simple-in { display: grid; gap: 16px; }
.titre-simple { margin: 0; max-width: 20ch; color: #06243F; font-size: 52px; line-height: 56px; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.fil.fil-clair { background-color: #FFFFFF; color: #40536A; box-shadow: inset 0 0 0 1px #DCE6F7; backdrop-filter: none; }
.fil.fil-clair .fil-lien { color: #2F5FD0; }
.fil.fil-clair .fil-sep { color: #8A9BB0; }
.fil.fil-clair .fil-lien:focus-visible { outline-color: #2F5FD0; }
@media screen and (max-width: 767px) {
  .page-simple { padding-top: 112px; }
  .titre-simple { font-size: 36px; line-height: 42px; }
}

/* Formulaires (devis et candidature) : libellés au-dessus, aides toujours visibles, erreurs en texte. */
.formulaire { display: grid; gap: 22px; max-width: 720px; padding: 28px; border-radius: 28px; background-color: #FFFFFF; box-shadow: 0 0 0 1px #DCE6F7, 0 30px 60px -40px rgba(6, 36, 63, 0.45); }
.form-consigne { margin: 0; color: #40536A; font-size: 15px; line-height: 24px; }
.groupe-champs { display: grid; gap: 18px; margin: 0; padding: 0; border: 0; }
.groupe-titre { margin: 0 0 2px; padding: 0; color: #06243F; font-size: 20px; line-height: 28px; font-weight: 800; }
.groupe-aide { margin: -4px 0 0; color: #40536A; font-size: 15px; line-height: 24px; }
.champ { display: grid; gap: 6px; }
.champs-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.champ-libelle { color: #06243F; font-size: 16px; line-height: 24px; font-weight: 700; }
.champ-aide { margin: 0; color: #40536A; font-size: 15px; line-height: 22px; }
.saisie { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid #8A96A3; border-radius: 14px; background-color: #FFFFFF; color: #06243F; font-family: inherit; font-size: 16px; line-height: 24px; }
textarea.saisie { min-height: 140px; resize: vertical; }
select.saisie { appearance: auto; }
.saisie:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 2px; border-color: #2F5FD0; }
.saisie[aria-invalid="true"] { border-color: #B42318; }
.champ-erreur { margin: 0; color: #B42318; font-size: 15px; line-height: 22px; font-weight: 700; }
.champ-erreur:empty { display: none; }
.case { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: 12px; }
.case input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 24px; height: 24px; margin: 2px 0 0; border: 2px solid #2F5FD0; border-radius: 8px; background-color: #FFFFFF; cursor: pointer; }
/* Case arrondie, bleu et blanc (la case native, carrée et grise, était le seul angle droit restant) ; coche blanche. */
.case input::before { content: ""; width: 12px; height: 12px; background-color: #FFFFFF; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); transform: scale(0); transition: transform 120ms ease; }
.case input:checked { background-color: #2F5FD0; }
.case input:checked::before { transform: scale(1); }
.case input[aria-invalid="true"] { border-color: #B42318; }
@media (forced-colors: active) { .case input { appearance: auto; -webkit-appearance: auto; } .case input::before { content: none; } }
@media (prefers-reduced-motion: reduce) { .case input::before { transition: none; } }
.case input:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 2px; }
.case label { color: #06243F; font-size: 16px; line-height: 26px; font-weight: 600; }
.form-info { margin: 0; color: #4A5561; font-size: 16px; line-height: 25px; }
/* 06/11 (vérification, R14) : sur grand écran, les formulaires n'ont plus de largeur maximale (colonne de /contact) ;
   textes d'aide et information RGPD ramenés à une mesure lisible (environ 80 signes par ligne au lieu de 108). */
.formulaire .form-info, .formulaire .champ-aide { max-width: 38rem; }
.form-info a, .form-consigne a, .champ-aide a { color: #2F5FD0; font-weight: 600; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.form-actions .bouton { border: 0; cursor: pointer; }
.form-actions .bouton[disabled] { opacity: 0.7; cursor: progress; }
.form-message { padding: 18px 20px; border-radius: 18px; font-size: 16px; line-height: 25px; }
.form-message:empty { display: none; }
.form-message p { margin: 0; }
.form-message p + p { margin-top: 6px; }
.form-message.succes { background-color: #EEF4FF; color: #06243F; box-shadow: inset 4px 0 0 #2F5FD0; }
.form-message.echec { background-color: #FFF4F3; color: #06243F; box-shadow: inset 4px 0 0 #B42318; }
.form-message-titre { font-weight: 800; }
.form-message a { color: #2F5FD0; font-weight: 700; }
@media screen and (max-width: 767px) {
  .formulaire { padding: 20px; border-radius: 22px; }
  .champs-paire { grid-template-columns: 1fr; }
}

/* Anneau de focus des boutons « lumière » : bleu sur fond clair, blanc seulement sur photo ou fond sombre. */
.bouton.lumiere:focus-visible, .bouton.lumiere-petit:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 3px; }
.ouverture .bouton.lumiere:focus-visible, .appel .bouton.lumiere:focus-visible, .pleine .bouton.lumiere:focus-visible, .carte .bouton.lumiere:focus-visible { outline-color: #FFFFFF; }
/* Bouton du champ fichier dans la charte (arrondi, bleu et blanc). */
.saisie-fichier { padding: 8px; font-size: 15px; line-height: 22px; }
.saisie-fichier::file-selector-button { margin-right: 12px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background-color: #EEF4FF; color: #06243F; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 1px #DCE6F7; }
.saisie-fichier::file-selector-button:hover { background-color: #DCE6F7; }
/* Un champ qui reçoit le focus reste au-dessus de la barre mobile (WCAG 2.4.11). */
.formulaire .saisie, .formulaire .case input, .formulaire .bouton { scroll-margin-bottom: 56px; }
@media screen and (max-width: 991px) {
  .formulaire .saisie, .formulaire .case input, .formulaire .bouton { scroll-margin-bottom: 130px; }
}

/* Vérification finale du 27/10 : corrections communes. */
/* Un élément qui reçoit le focus n'est jamais caché par la barre mobile (74 px de haut avec sa marge ; WCAG 2.4.11). */
@media screen and (max-width: 991px) {
  html { scroll-padding-bottom: 96px; }
}
/* Bouton « verre » du haut de page : verre bleu nuit, lisible sur les photos claires (1.4.3). */
.ouverture .bouton.verre { background-color: rgba(6, 36, 63, 0.62); }
/* 06/11 (vérification, R12) : au téléphone, les deux boutons du haut de page et du bandeau d'appel s'empilent en
   grille, de même largeur, sur toutes les pages, comme sur /contact (pleine largeur en haut de page, largeur du plus
   long et centrés dans le bandeau d'appel) ; avant, 183 et 230 px de large, alignés à gauche. */
@media screen and (max-width: 767px) {
  .ouverture .actions, .appel .actions { display: grid; }
}
/* Vérification du 28/10 : tant que la photo du haut de page charge, fond bleu nuit (au lieu du #DCE6F7 de Webflow)
   sous le texte blanc ; plus d'éclat clair au passage d'une page à l'autre sur réseau lent. */
.ouverture .photo-fond { background-color: #06243F; }
/* Liens des formulaires : contour du site. */
.formulaire a:focus-visible, .form-message a:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 2px; border-radius: 4px; }
/* Paires de champs alignées ligne à ligne (libellé, aide, champ, erreur). */
@media screen and (min-width: 768px) {
  .champs-paire { row-gap: 0; }
  .champs-paire > .champ { grid-row: span 4; grid-template-rows: subgrid; }
}
/* Fichier choisi et bouton pour le retirer (fiche 07 § 5). */
.fichier-choisi { margin: 0; color: #06243F; font-size: 15px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.bouton-retirer { justify-self: start; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background-color: #FFFFFF; color: #06243F; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 1.5px #DCE6F7; }
.bouton-retirer:hover { box-shadow: inset 0 0 0 1.5px #2F5FD0; }
.bouton-retirer:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 2px; }
/* Menu ouvert : la barre fixe disparaît (ses deux actions sont dans le panneau) ; liens resserrés sur les écrans bas. */
body:has(.menu-mobile[open]) .barre { display: none; }
@media screen and (max-height: 640px) {
  .menu-lien { min-height: 44px; font-size: 17px; }
}
/* Avec le script, le nom natif du fichier (tronqué sur mobile) est remplacé par la ligne « Fichier choisi : … ». */
.js .saisie-fichier { color: transparent; }
/* Forage dirigé : titres des cartes de chantier liés à leur fiche ; lien vers les travaux spéciaux dans le bandeau. */
.real-lien { color: inherit; text-decoration: underline; text-decoration-color: #A9CBFF; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.real-lien:hover { color: #2F5FD0; }
.real-lien:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 3px; border-radius: 4px; }
.lien-fleche.lien-clair.appel-lien { min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.appel-lien:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }


/* 06/11/2026 (« duplique ce schéma sur les autres pages », puis « des sections moins grosses […] tout en gardant la
   largeur du site ») : sur grand écran, les grilles de cartes de toutes les pages prennent les écarts réguliers de
   l'accueil (24 px entre cartes, 40 px sous le titre) ; l'espacement des sections reste celui du design validé. */
@media screen and (min-width: 1280px) {
  .cartes, .real-cartes, .ct-cartes, .en-frise, .en-valeurs, .re-cartes, .re-activites, .rc-metiers, .rc-avantages,
  .rs-cartes, .rs-frise, .ts-situations, .rubriques { gap: 24px; margin-top: 40px; }
  /* 06/11 (vérification) : .ct-autres retiré (section « Autres demandes » de /contact coupée). */
  .reseaux-liste, .obstacles-mosaique, .fd-etapes, .en-personnes, .en-org-filles, .rs-actions { gap: 20px; }
}

/* HEROS-ACCUEIL debut */
/* 06/11/2026, hauts de page à photo. Demande du client : la photo de la foreuse électrique de l'accueil « a l'air zoomée
   x30 », puis « je veux garder comme c'est, juste dézoomer », captures d'iPhone de l'accueil et de /forage-dirige à
   l'appui (au téléphone, on ne voyait que 28 % de la largeur des photos). Même haut de page : photo, texte blanc sur le
   voile bleu nuit. Une copie floutée de la même photo (img.photo-flou, posée par ouvertureFloue dans outils/socle.mjs,
   classe a-photo sur la section) prolonge le ciel et le sol autour de la photo.
   Téléphone et tablette en portrait (moins de 992 px), toutes les pages : photo entière, à ses proportions, sous l'en-tête,
   puis le texte, sur la copie floutée foncée par le voile.
   Ordinateur : l'accueil (crochet ac-ouverture) montre sa photo plus petite, calée en bas à droite, jamais plus grande que
   son fichier (1 600 × 900) ; les autres pages gardent leur photo plein cadre. */
.photo-flou { display: none; }
@media screen and (max-width: 991px) {
  .ouverture.a-photo { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; min-height: 0; overflow: hidden; }
  .a-photo .photo-fond { position: static; grid-row: 1; background-color: transparent; }
  .a-photo .photo-flou { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(1.1) brightness(0.9); transform: scale(1.2); }
  .a-photo .voile-ouverture { z-index: 1; background-image: linear-gradient(180deg, rgba(6, 36, 63, 0.4) 0, rgba(6, 36, 63, 0.72) 42%, rgba(6, 36, 63, 0.82) 100%); }
  .a-photo .photo-img { position: relative; z-index: 2; display: block; width: 100%; height: auto; margin-top: 64px; object-fit: cover; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, transparent 100%); }
  .a-photo .ouverture-cadre { grid-row: 2; z-index: 3; }
  .ouverture.a-photo .ouverture-in { padding-top: 4px; }
  .a-photo .titre-page, .a-photo .ouverture-texte { text-shadow: none; }
}
@media screen and (min-width: 992px) {
  .ac-ouverture .photo-fond { background-color: #06243F; }
  .ac-ouverture .photo-flou { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(30px) saturate(1.1) brightness(0.92); transform: scale(1.12); }
  /* Photo calée en bas à droite, aux trois quarts de la largeur ; bords gauche et haut fondus dans la copie floutée. */
  .ac-ouverture .photo-img { position: absolute; z-index: 1; top: auto; right: 0; bottom: 0; left: auto; width: min(72%, 1600px); height: auto; aspect-ratio: 16 / 9; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to bottom, transparent 0, #000 16%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to bottom, transparent 0, #000 16%); mask-composite: intersect; }
  /* Le texte reste sur fond sombre : en plus du voile validé, un dégradé bleu nuit depuis la gauche, sous la colonne de
     texte (contraste du paragraphe mesuré ligne à ligne : 7,4:1 au moins de 992 à 1 920 px). */
  .ac-ouverture .voile-ouverture { background-image: linear-gradient(90deg, rgba(6, 36, 63, 0.72) 0, rgba(6, 36, 63, 0.62) 38%, rgba(6, 36, 63, 0) 60%), radial-gradient(498px 594px at 25.1% 94.6%, rgba(6, 36, 63, 0.41) 0%, rgba(6, 36, 63, 0.73) 59%, rgba(6, 36, 63, 0.71) 89.6%, rgba(6, 36, 63, 0.6) 100.8%, rgba(6, 36, 63, 0.36) 112.1%, rgba(6, 36, 63, 0.12) 123.4%, rgba(6, 36, 63, 0) 134.6%); }
}
/* Petits ordinateurs : la colonne de texte prend plus de place, la photo de l'accueil se resserre à droite. */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .ac-ouverture .photo-img { width: 60%; }
}
/* HEROS-ACCUEIL fin */

/* ===== Symboles FTCS (outils/symboles.mjs) : tuile, variante nue, tailles compensées, scènes, entrée,
   micro-mouvements. Spécification : spec-mouvement révision 2 et arbitrages du 27/10 § D. Le dessin est juste sans
   cette feuille (attributs de présentation) ; elle ne fait que présenter et animer. ===== */
.symbole { --taille: 64px; --s-t: #2F5FD0; --s-s: #6EA8FF; --s-f: #DCE8FF; --s-halo: rgba(110, 168, 255, 0.38); --s-coeur: #2F5FD0; --s-bord: #FFFFFF;
  display: inline-grid; place-items: center; flex: none; width: var(--taille); height: var(--taille); border-radius: calc(var(--taille) * 0.34);
  background-image: radial-gradient(120% 120% at 28% 18%, #FFFFFF 0%, #F5F8FF 45%, #E6EEFF 100%);
  box-shadow: inset 0 0 0 1px #FFFFFF, 0 0 0 1px #DCE6F7, 0 14px 26px -16px rgba(47, 95, 208, 0.75); }
.symbole-svg { display: block; width: 74%; height: 74%; overflow: visible; }
.symbole .s-t { stroke: var(--s-t); }
.symbole .s-s, .symbole .s-d { stroke: var(--s-s); }
.symbole .s-f { fill: var(--s-f); }
.symbole .s-gaine { stroke: var(--s-s); stroke-opacity: 0.35; }
.symbole .s-halo { fill: var(--s-halo); fill-opacity: 1; }
.symbole .s-coeur { fill: var(--s-coeur); stroke: var(--s-bord); }

/* Tailles. Le trait est compensé pour afficher 2,3 à 2,5 px partout (jamais le « filet fin » refusé le 17/10) :
   tuile 64 : 2,5 × 47,4/48 = 2,47 px · tuile 52 : 3 × 38,5/48 = 2,40 px · tuile 40 : 3,4 × 32,8/48 = 2,32 px
   · tuile 96 : 2,1 × 71/48 = 3,1 px · nue 40 : 3 × 40/48 = 2,50 px · nue 32 : 3,4 × 32/48 = 2,27 px. */
.symbole.petit { --taille: 40px; border-radius: 13px; }
.symbole.petit .symbole-svg { width: 82%; height: 82%; }
.symbole.petit :is(.s-t, .s-s, .s-d) { stroke-width: 3.4; }
.symbole.petit .s-detail { display: none; }
.symbole.moyen { --taille: 52px; border-radius: 17px; }
.symbole.moyen :is(.s-t, .s-s, .s-d) { stroke-width: 3; }
.symbole.grand { --taille: 96px; border-radius: 30px; }
.symbole.grand :is(.s-t, .s-s, .s-d) { stroke-width: 2.1; }
/* Variante nue (listes, coordonnées) : pas de tuile, le dessin occupe tout le carré. La tuile reste réservée aux
   grilles de cartes, pour ne pas recréer « le même carré répété ». */
.symbole.nu { background: none; box-shadow: none; border-radius: 0; }
.symbole.nu .symbole-svg { width: 100%; height: 100%; }
.symbole.nu.petit { --taille: 32px; }
.symbole.nu.moyen { --taille: 40px; }
.symbole.nu.grand { --taille: 72px; }
/* Illustrations des métiers (tariere, palplanches ; vue 160 × 96, 05/11/2026), au style de la foreuse envoyée par le
   client : dessin à plat à sa taille, 96 px de haut, sans tuile ; il porte sa propre terre en coupe. Dans un
   emplacement plus étroit, il se réduit sans se déformer. */
.symbole.illustration { width: 160px; max-width: 100%; height: auto; aspect-ratio: 160 / 96; border-radius: 0; background: none; box-shadow: none; }
.symbole.illustration .symbole-svg { width: 100%; height: 100%; }

/* Scènes. Mini-coupe en bandeau (« Le chantier en bref » des fiches chantier) : panneau clair arrondi. */
.scene { display: block; padding: 10px 14px; border-radius: 20px; background-image: linear-gradient(180deg, #F5F8FF, #E6EEFF); box-shadow: inset 0 0 0 1px #DCE6F7; }
.scene-svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Scène d'emplacement photo (classe « photo ») : elle prend la place de l'image et remplit son cadre arrondi
   (.photo-cadre, déjà en position relative, overflow hidden, au format de la photo). Hors d'un cadre, elle garde le
   format 4:3. Le décor (sol, ciel) déborde de la grille : aucun vide quel que soit le format du cadre. */
.scene.photo { position: relative; overflow: hidden; padding: 0; aspect-ratio: 4 / 3; border-radius: 28px; background-image: linear-gradient(180deg, #FFFFFF 0%, #F5F8FF 38%, #E6EEFF 100%); box-shadow: inset 0 0 0 1px #DCE6F7; }
.photo-cadre > .scene.photo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; aspect-ratio: auto; border-radius: inherit; }
.scene.photo .scene-svg { position: absolute; top: 6%; left: 5%; width: 90%; height: 88%; }

/* ----- Entrée : un seul dévoilement, de gauche à droite (dans le sens du forage), puis le point s'allume. -----
   Symbole ou scène seuls : classe « vu » sur eux-mêmes. Dans une unité (carte d'un groupe, cadre photo) : ils partent
   avec elle, 150 ms après elle (--retard posé par mouvement.css). Durée propre : 420 + 280 = 700 ms, sans rebond.
   Seuls clip-path, opacity et transform (du point) sont animés : aucune mise en page ne bouge. */
:is(.symbole, .scene) .s-p, .symbole .s-m { transform-box: fill-box; transform-origin: center; }
html.js .symbole.a-venir .symbole-svg { clip-path: inset(-12% 100% -12% -12%); }
/* Scène : son décor déborde de la grille (sol, ciel) ; le dévoilement part du bord gauche du cadre et couvre tout. */
html.js .scene.a-venir .scene-svg { clip-path: inset(-100% 112% -100% -100%); }
html.js :is(.symbole, .scene).a-venir .s-p { opacity: 0; }
:is(.symbole.vu, .scene.vu, .vu .symbole, .vu .scene) :is(.symbole-svg, .scene-svg) { animation: s-devoile 420ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--retard, 0ms) + var(--s-depart, 0ms)) backwards; }
:is(.symbole.vu, .scene.vu, .vu .symbole, .vu .scene) .s-p { animation: s-allume 280ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--retard, 0ms) + var(--s-depart, 0ms) + 420ms) backwards; }
.vu :is(.symbole, .scene) { --s-depart: 150ms; }
:is(.symbole, .scene).vu { --s-depart: 0ms; }
.vu .scene .scene-svg, .scene.vu .scene-svg { animation-name: s-devoile-scene; }
@keyframes s-devoile { from { clip-path: inset(-12% 100% -12% -12%); } to { clip-path: inset(-12% -12% -12% -12%); } }
@keyframes s-devoile-scene { from { clip-path: inset(-100% 112% -100% -100%); } 85% { clip-path: inset(-100% -6% -100% -100%); } to { clip-path: inset(-100% -100% -100% -100%); } }
@keyframes s-allume { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
/* Révélation immédiate (clavier, ancre, impression, saut) et fin d'entrée : plus aucune animation d'entrée. Les
   micro-mouvements au survol, eux, restent permis. */
:is(.vu-immediat, .vu-fini) :is(.symbole-svg, .scene-svg, .s-p), :is(.symbole, .scene):is(.vu-immediat, .vu-fini) :is(.symbole-svg, .scene-svg, .s-p) { animation: none !important; }

/* ----- Micro-mouvements : quatre seulement, au survol du lien ou de la carte, une fois, jamais en boucle. -----
   Les ondes ne repartent pas de 0 (pas de clignotement) : elles s'émettent depuis leur source. */
@media (hover: hover) {
  :is(a, button, .carte-symbole):hover .symbole :is(.s-onde1, .s-onde2) { transform-box: view-box; animation: s-onde 520ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  :is(a, button, .carte-symbole):hover .symbole .s-onde2 { animation-delay: 110ms; }
  :is(a, button, .carte-symbole):hover .symbole[data-symbole="pilote"] .s-m { transform-origin: 28px 24px; }
  :is(a, button, .carte-symbole):hover .symbole[data-symbole="telephone"] .s-m { transform-origin: 28px 20px; }
  :is(a, button, .carte-symbole):hover .symbole[data-symbole="eolien"] .s-pales { transform-box: view-box; transform-origin: 17px 15px; animation: s-tour 1400ms cubic-bezier(0.45, 0, 0.2, 1) both; }
  :is(a, button, .carte-symbole):hover .symbole[data-symbole="adresse"] .s-coeur { animation: s-pouls 560ms ease-out; }
}
@keyframes s-onde { from { opacity: 0.35; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes s-tour { to { transform: rotate(120deg); } }
@keyframes s-pouls { 50% { transform: scale(1.2); } }

@media (prefers-reduced-motion: reduce) {
  :is(.symbole, .scene), :is(.symbole, .scene) * { animation: none !important; }
  :is(.symbole, .scene) :is(.symbole-svg, .scene-svg) { clip-path: none !important; }
  :is(.symbole, .scene) .s-p { opacity: 1 !important; transform: none !important; }
}
@media print {
  :is(.symbole, .scene) * { animation: none !important; }
  :is(.symbole, .scene) :is(.symbole-svg, .scene-svg) { clip-path: none !important; }
  :is(.symbole, .scene) .s-p { opacity: 1 !important; transform: none !important; }
}

/* ===== Mouvement : passages entre sections et entre pages (spec-mouvement révision 2, arbitrages du 27/10 § D).
   Rien n'est caché par défaut : seules les unités marquées « a-venir » par js/site.js (encore sous l'écran, arrivée
   neuve sur la page) le sont, et seulement sous html.js. Sans script, tout est visible. Seuls opacity, translate,
   transform (zoom des photos) et clip-path (symboles) sont animés : aucune mise en page
   ne bouge (CLS nul). Toute révélation dure 700 ms au plus, retards compris, et finit sans déplacement (remplissage
   « backwards » : l'état final est l'état naturel de la page). La coupe interactive de l'accueil n'est jamais une
   unité (voir site.js). La montée passe par la propriété translate et non transform (vérification du 27/10) : des
   cartes font transiter transform au survol (200 ms) ; une révélation immédiate (focus, ancre) les faisait encore
   glisser de 20 px sous l'anneau de focus. ===== */
:root { --m-sortie: cubic-bezier(0.2, 0.7, 0.2, 1); --m-ui: cubic-bezier(0.4, 0, 0.2, 1); --m-pas: 44ms; }

/* 1. Unités simples (photos de côté, crochets locaux) : fondu + 16 px de montée, 520 ms. */
html.js .apparition.a-venir { opacity: 0; translate: 0 16px; }
.apparition.vu { animation: m-monte 520ms var(--m-sortie) backwards; }
/* Tête de section : titre et chapô entrent l'un après l'autre (480 ms, décalés de 60 ms : 660 ms au plus). */
html.js :is(.bloc-titre, .coupe-tete, .galerie-tete).a-venir { opacity: 1; translate: none; }
html.js :is(.bloc-titre, .coupe-tete, .galerie-tete).a-venir > * { opacity: 0; translate: 0 14px; }
:is(.bloc-titre, .coupe-tete, .galerie-tete).vu { animation: none; }
:is(.bloc-titre, .coupe-tete, .galerie-tete).vu > * { animation: m-monte 480ms var(--m-sortie) backwards; }
:is(.bloc-titre, .coupe-tete, .galerie-tete).vu > :nth-child(2) { animation-delay: 60ms; }
:is(.bloc-titre, .coupe-tete, .galerie-tete).vu > :nth-child(3) { animation-delay: 120ms; }
:is(.bloc-titre, .coupe-tete, .galerie-tete).vu > :nth-child(n+4) { animation-delay: 180ms; }

/* 2. Groupes (cartes, listes, rangées) : les enfants entrent décalés de 44 ms, 6 au plus (480 + 5 × 44 = 700 ms).
   --retard est hérité par les symboles de la carte, qui partent 150 ms après elle (symboles.css). */
html.js .apparition-groupe.a-venir > * { opacity: 0; translate: 0 20px; }
.apparition-groupe.vu > * { --retard: 0ms; animation: m-monte 480ms var(--m-sortie) var(--retard) backwards; }
.apparition-groupe.vu > :nth-child(2) { --retard: calc(var(--m-pas) * 1); }
.apparition-groupe.vu > :nth-child(3) { --retard: calc(var(--m-pas) * 2); }
.apparition-groupe.vu > :nth-child(4) { --retard: calc(var(--m-pas) * 3); }
.apparition-groupe.vu > :nth-child(5) { --retard: calc(var(--m-pas) * 4); }
.apparition-groupe.vu > :nth-child(n+6) { --retard: calc(var(--m-pas) * 5); }

/* 3. Photos : le cadre arrondi monte, l'image se pose (léger zoom arrière dans le cadre, qui la coupe déjà). */
.apparition.vu .photo-img { animation: m-pose 700ms var(--m-sortie) backwards; }
@keyframes m-monte { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: none; } }
@keyframes m-pose { from { transform: scale(1.05); } to { transform: none; } }

/* 4. Révélation immédiate (focus clavier, ancre, impression, unité sautée, préférence changée) et fin d'entrée :
   aucune animation, donc aucun anneau de focus à demi transparent (WCAG 2.4.7) et rien qui rejoue si un élément est
   masqué puis remontré. */
:is(.vu-immediat, .vu-fini), :is(.vu-immediat, .vu-fini) > *, :is(.vu-immediat, .vu-fini) .photo-img { animation: none !important; }

/* 5. Cohabitation avec les survols existants (200 ms) : remplissage « backwards » partout, l'entrée ne fige pas
   transform après coup (translateY -2px des cartes au survol conservé). */

/* 6. Entre les pages : la nouvelle page entre en fondu de 200 ms sur l'ancienne, qui reste opaque dessous (ni retard
   ni translation). Vérification du 27/10 : une sortie de 120 ms plus courte que l'entrée laissait voir le fond blanc
   du navigateur entre les deux vues (éclat clair d'environ 100 ms à chaque changement de page). L'en-tête et la barre
   mobile ne bougent pas. Amélioration progressive : navigation normale ailleurs. */
@view-transition { navigation: auto; }
header.site { view-transition-name: entete; }
.barre { view-transition-name: barre; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: m-entre 200ms var(--m-ui) both; }
::view-transition-group(entete), ::view-transition-group(barre) { animation-duration: 0s; }
@keyframes m-entre { from { opacity: 0; } }

/* 7. Préférences et impression : tout visible, rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .a-venir, .a-venir > * { opacity: 1 !important; translate: none !important; transform: none !important; }
  .vu, .vu > *, .vu .photo-img { animation: none !important; }
}
@media print {
  .a-venir, .a-venir > * { opacity: 1 !important; translate: none !important; transform: none !important; }
  .vu, .vu > *, .vu .photo-img { animation: none !important; }
}

/* accueil.mjs */
/* Accueil : sections ajoutées et crochets « ac- » des sections validées (pages/accueil-ajouts.mjs) */
.ac-suite { margin: 2px 0 0; }
.ac-actions { margin-top: 24px; }
/* Bouton « lumière » sur fond blanc : anneau de focus bleu (la règle commune, blanche, vise les fonds sombres). */
.ac-actions .bouton.lumiere:focus-visible { outline-color: #2F5FD0; }

/* Franchir l'obstacle, poser le réseau : la photo garde le titre et le chapô (en bas à gauche) ; les quatre atouts
   passent dessous, en cartes claires sur toute la largeur, pastille ronde à coche dessinée en CSS. */
.pleine.ac-pleine { display: block; min-height: 0; }
.ac-pleine-scene { position: relative; display: grid; align-items: end; min-height: 720px; }
.ac-atouts-cadre { padding-top: 20px; }
.ac-atouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 auto; padding: 0; list-style: none; }
.ac-atout { display: grid; align-content: start; justify-items: start; gap: 16px; padding: 22px 24px 26px; border-radius: 24px; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #DCE6F7, 0 30px 60px -40px rgba(47, 95, 208, 0.45); color: #06243F; font-size: 16px; line-height: 24px; font-weight: 600; }
.ac-atout-puce { position: relative; display: block; flex: none; width: 36px; height: 36px; border-radius: 999px; background-image: linear-gradient(135deg, #3D6FE0, #2A55C2); box-shadow: 0 10px 20px -8px rgba(47, 95, 208, 0.65); }
.ac-atout-puce::after { content: ""; position: absolute; left: 14px; top: 9px; width: 7px; height: 13px; border-right: 3px solid #FFFFFF; border-bottom: 3px solid #FFFFFF; border-radius: 0 0 2px 0; transform: rotate(45deg); }

/* Trois métiers : cartes claires, zone d'illustration de 96 px en tête (foreuse du client en image, symboles tariere et
   palplanches en viewBox 160 × 96), lien en bas ; les trois cartes ont la même hauteur (grille validée, cartes
   étirées). L'image de la foreuse a la hauteur des dessins et sa largeur propre ; elle se dévoile avec sa carte, de
   gauche à droite, comme les deux dessins (images clés s-devoile de outils/symboles.css). */
.carte.ac-carte-sym { display: flex; flex-direction: column; align-items: stretch; min-height: 0; color: #06243F; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #DCE6F7, 0 30px 60px -40px rgba(47, 95, 208, 0.45); transition: box-shadow 200ms ease, transform 200ms ease; }
a.ac-carte-sym:hover { box-shadow: 0 0 0 2px #2F5FD0, 0 30px 60px -40px rgba(47, 95, 208, 0.45); transform: translateY(-2px); }
.ac-metier-illu { display: grid; place-items: center; height: 136px; margin: 12px 12px 0; border-radius: 18px; background-image: radial-gradient(120% 150% at 25% 0%, #FFFFFF 0%, #EEF4FF 55%, #E1EAFF 100%); box-shadow: inset 0 0 0 1px #DCE6F7; }
.ac-metier-illu .symbole[data-symbole] { --taille: 96px; width: auto; max-width: 100%; height: 96px; aspect-ratio: 160 / 96; border-radius: 0; background: none; box-shadow: none; }
.ac-metier-illu .symbole-svg { width: 100%; height: 100%; }
.ac-metier-img { display: block; width: auto; max-width: 100%; height: 96px; object-fit: contain; }
.vu .ac-metier-img { animation: s-devoile 420ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--retard, 0ms) + 150ms) backwards; }
:is(.vu-immediat, .vu-fini) .ac-metier-img { animation: none; }
.ac-carte-sym .carte-in { flex: 1 1 auto; grid-template-rows: auto 1fr auto; align-content: start; gap: 10px; padding: 22px 26px 24px; }
.ac-carte-sym .carte-texte { color: #40536A; font-size: 16px; line-height: 25px; }
.ac-carte-sym .lien-fleche { align-self: end; min-height: 0; margin-top: 6px; }

/* En-têtes sans texte à droite (05/11) : le titre prend toute la largeur au lieu de rester dans la colonne de gauche
   de la grille validée (il ne se coupe plus en deux lignes sans raison). */
.ac-galerie .galerie-tete, .ac-real .galerie-tete, .ac-parc .parc-tete { grid-template-columns: minmax(0, 1fr); }

/* Galerie : 3 vignettes, une grande et deux larges (règles .grand et .large du design validé). Froges, en bande large,
   est cadrée vers le bas : le chantier est au bas de la photo. */
.ac-gal-froges .photo-img { object-position: 50% 85%; }

/* Parc : les deux Grundodrill 18N se partagent la largeur du conteneur. Le fond bleu très clair de la section validée
   revient au blanc sous les photos : sans les noms des machines, il s'arrêtait net juste sous elles. */
.ac-parc { background-image: linear-gradient(180deg, #FFFFFF 0%, #F5F8FF 36%, #F5F8FF 70%, #FFFFFF 100%); }
.ac-parc-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; margin-bottom: 0; padding: 0; list-style: none; }
.ac-parc-duo > .parc-item { width: auto; }
.ac-parc-duo .parc-photo { aspect-ratio: 4 / 3; border-radius: 24px; }
/* Photo portrait de la Grundodrill 18N roche dans le cadre 4:3. */
.ac-parc-roche .photo-img { object-position: 50% 55%; }

/* Chantiers de référence : cartes validées (real-cartes), titre-lien étendu à toute la carte. */
.ac-real-carte { position: relative; transition: box-shadow 200ms ease, transform 200ms ease; }
.ac-real-carte:hover { box-shadow: 0 0 0 2px #2F5FD0, 0 30px 60px -40px rgba(47, 95, 208, 0.45); transform: translateY(-2px); }
.ac-real-lien { color: #06243F; text-decoration: none; }
.ac-real-carte:hover .ac-real-lien { color: #2F5FD0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ac-real-lien::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 24px; }
.ac-real-lien:focus-visible { outline: none; }
/* Anneau de focus à l'intérieur de la carte : la rangée défile (overflow) sous 992 px et rognerait un anneau extérieur. */
.ac-real-lien:focus-visible::after { outline: 3px solid #2F5FD0; outline-offset: -3px; }

/* Une entreprise basée à Fretin : photo du siège d'un côté, titre et texte de l'autre, trois cartes dessous. */
.ac-bref { padding-top: 104px; padding-bottom: 24px; }
.ac-bref-cote { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "photo texte"; align-items: center; gap: 32px 72px; }
.cote-photo.ac-bref-photo { grid-area: photo; aspect-ratio: 4 / 3; border-radius: 28px; }
/* Grand écran : cadre 3:2, la photo ne dépasse pas trop la colonne de texte voisine. */
@media screen and (min-width: 1280px) {
  .cote-photo.ac-bref-photo { aspect-ratio: 3 / 2; }
}
.ac-bref-texte { grid-area: texte; gap: 16px; }
.ac-rubriques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.ac-rub { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 24px; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #DCE6F7, 0 30px 60px -40px rgba(47, 95, 208, 0.45); transition: box-shadow 200ms ease, transform 200ms ease; }
.ac-rub:hover { box-shadow: 0 0 0 2px #2F5FD0, 0 30px 60px -40px rgba(47, 95, 208, 0.45); transform: translateY(-2px); }
.ac-rub > .symbole { margin: 24px 24px 0; }
.ac-rub-in { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; padding: 16px 24px 14px; }
.ac-rub-titre { margin: 0; color: #06243F; font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.015em; }
.ac-rub-texte { margin: 0; color: #40536A; font-size: 15px; line-height: 23px; }
.ac-rub-lien::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 24px; }
.ac-rub-lien:focus-visible { outline: none; }
/* Anneau de focus à l'intérieur de la carte (overflow hidden). */
.ac-rub-lien:focus-visible::after { outline: 3px solid #2F5FD0; outline-offset: -3px; }

/* Groupe RESUM : titre et phrase d'introduction, puis une tuile cliquable par société (logo en couleur, nouvel
   onglet, petite flèche ronde dans le coin). Le logo du groupe, blanc, est posé sur la tuile bleue. */
.ac-groupe-tete { max-width: 48rem; }
.ac-groupe-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 36px 0 0; padding: 0; list-style: none; }
.ac-groupe-item { display: grid; }
.ac-groupe-lien { position: relative; display: grid; place-items: center; min-height: 168px; padding: 28px 24px; border-radius: 24px; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #DCE6F7, 0 30px 60px -40px rgba(47, 95, 208, 0.45); transition: box-shadow 200ms ease, transform 200ms ease; }
.ac-groupe-lien:hover { box-shadow: 0 0 0 2px #2F5FD0, 0 30px 60px -40px rgba(47, 95, 208, 0.45); transform: translateY(-2px); }
.ac-groupe-lien:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 3px; }
.ac-groupe-lien.ac-groupe-resum { background-image: linear-gradient(135deg, #3D6FE0, #2A55C2); box-shadow: 0 24px 48px -28px rgba(47, 95, 208, 0.9); }
.ac-groupe-lien.ac-groupe-resum:hover { box-shadow: 0 0 0 2px #06243F, 0 24px 48px -28px rgba(47, 95, 208, 0.9); }
.ac-groupe-logo { display: block; width: auto; max-width: 100%; height: 54px; }
.ac-groupe-resum .ac-groupe-logo { height: 62px; }
.ac-groupe-safe .ac-groupe-logo { height: 112px; }
.ac-groupe-foroutil .ac-groupe-logo { height: 38px; }
.ac-groupe-fleche { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background-color: #EEF4FF; box-shadow: inset 0 0 0 1px #DCE6F7; color: #2F5FD0; transition: transform 200ms ease; }
.ac-groupe-fleche-svg { display: block; width: 14px; height: 14px; }
.ac-groupe-lien:hover .ac-groupe-fleche { transform: translate(2px, -2px); }
.ac-groupe-resum .ac-groupe-fleche { background-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); color: #FFFFFF; }

/* Ils nous font confiance : logos en couleur, carrousel infini sur toute la largeur de la page. La piste porte deux
   fois la liste et glisse de la moitié de sa largeur (chaque liste finit par un écart égal à l'espacement : la boucle
   tombe juste). Pause au survol et au focus ; fondu blanc sur les bords. */
.ac-defile { position: relative; overflow: hidden; margin-top: 36px; padding: 14px 0 28px; }
.ac-defile::before, .ac-defile::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: min(14%, 200px); pointer-events: none; }
.ac-defile::before { left: 0; background-image: linear-gradient(90deg, #FFFFFF 10%, rgba(255, 255, 255, 0)); }
.ac-defile::after { right: 0; background-image: linear-gradient(270deg, #FFFFFF 10%, rgba(255, 255, 255, 0)); }
.ac-defile:focus-visible { outline: 3px solid #2F5FD0; outline-offset: -3px; border-radius: 28px; }
.ac-defile-piste { display: flex; width: max-content; animation: ac-defile 75s linear infinite; }
.ac-defile:hover .ac-defile-piste, .ac-defile:focus .ac-defile-piste { animation-play-state: paused; }
.ac-defile-liste { display: flex; flex: none; align-items: center; gap: 20px; margin: 0; padding: 0 20px 0 0; list-style: none; }
.ac-defile-item { display: grid; place-items: center; flex: none; height: 100px; padding: 0 34px; border-radius: 26px; background-color: #FFFFFF; box-shadow: 0 0 0 1px #E3ECFA, 0 20px 40px -30px rgba(47, 95, 208, 0.4); }
.ac-logo-client { display: block; max-width: none; }
@keyframes ac-defile { to { transform: translateX(-50%); } }

/* Sécurité et réglementation : trois faits en cartes de verre clair, symbole en tête. */
.ac-sec { padding-top: 104px; padding-bottom: 24px; }
.ac-faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.ac-fait { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; gap: 10px; padding: 24px; border-radius: 24px; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #DCE6F7, 0 30px 60px -40px rgba(47, 95, 208, 0.45); }
.ac-fait > .symbole { margin-bottom: 6px; }
.ac-fait-titre { margin: 0; color: #06243F; font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -0.015em; }
/* 06/11 (vérification, R15) : 36rem au plus, soit 90 signes par ligne au plus (102 à 768 px, carte pleine largeur). */
.ac-fait-texte { max-width: 36rem; margin: 0; color: #40536A; font-size: 15px; line-height: 23px; }
.ac-sec-suite { margin-top: 16px; }

/* Questions fréquentes : les intitulés seulement, chacun lien (pastille de verre clair) vers son thème de /faq ; à
   droite, une puce ronde à chevron dessiné en CSS (décor). Photo sous le titre, dans la colonne de gauche. */
.ac-faq { padding-top: 104px; padding-bottom: 24px; }
.ac-faq-grille { display: grid; grid-template-columns: 1fr 1.6fr; grid-template-areas: "tete liste" "photo liste"; align-items: start; gap: 24px 64px; }
.ac-faq-tete { grid-area: tete; }
.ac-faq-liste { grid-area: liste; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ac-faq-item { border-radius: 20px; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #DCE6F7; transition: box-shadow 200ms ease; }
.ac-faq-item:hover { box-shadow: 0 0 0 2px #2F5FD0, 0 20px 40px -30px rgba(47, 95, 208, 0.45); }
.ac-faq-lien { position: relative; display: flex; align-items: center; min-height: 64px; padding: 16px 68px 16px 22px; border-radius: 20px; color: #06243F; font-size: 18px; line-height: 25px; font-weight: 800; letter-spacing: -0.01em; text-decoration: none; }
.ac-faq-lien:hover { color: #2F5FD0; }
.ac-faq-lien:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 3px; }
.ac-faq-lien::before { content: ""; position: absolute; top: 50%; right: 18px; width: 32px; height: 32px; margin-top: -16px; border-radius: 999px; background-color: #EEF4FF; box-shadow: inset 0 0 0 1px #DCE6F7; }
.ac-faq-lien::after { content: ""; position: absolute; top: 50%; right: 32px; width: 7px; height: 7px; margin-top: -4px; border-top: 2.5px solid #2F5FD0; border-right: 2.5px solid #2F5FD0; border-radius: 0 2px 0 0; transform: rotate(45deg); }
.cote-photo.ac-faq-photo { grid-area: photo; aspect-ratio: 16 / 10; border-radius: 24px; }
/* Dès 1 280 px, cadre 2:1 : en 16:10, la photo descendait sous la liste des questions voisine. */
@media screen and (min-width: 1280px) {
  .cote-photo.ac-faq-photo { aspect-ratio: 2 / 1; }
}

/* Grand écran (05/11, « occuper la largeur de la page pour que ça fasse moins resserré ») : à partir de « Trois
   métiers », sections plus aérées dans le conteneur commun (élargi sur grand écran par le gabarit). */
@media screen and (min-width: 1280px) {
  .ac-savoir, .ac-galerie, .ac-real, .ac-parc, .ac-bref, .ac-groupe-sec, .ac-ref, .ac-sec, .ac-faq { padding-top: 128px; }
  .ac-savoir .cartes, .ac-real .real-cartes, .ac-faits { gap: 24px; margin-top: 40px; }
  .ac-rubriques { gap: 24px; margin-top: 48px; }
  .ac-atouts-cadre { padding-top: 24px; }
  .ac-atouts, .ac-parc-duo, .ac-groupe-logos { gap: 24px; }
  .ac-parc-duo { margin-top: 40px; }
  .ac-groupe-logos { margin-top: 44px; }
  .ac-galerie .galerie { grid-auto-rows: clamp(220px, 17vw, 320px); gap: 16px; margin-top: 40px; }
  .ac-carte-sym .carte-in { padding: 26px 32px 30px; }
  .ac-carte-sym .carte-titre { font-size: 26px; line-height: 32px; }
  /* Cartes plus larges : dessin un peu plus grand (112 px de haut) pour mieux remplir sa zone. */
  .ac-metier-illu { height: 152px; margin: 14px 14px 0; border-radius: 20px; }
  .ac-metier-illu .symbole[data-symbole], .ac-metier-img { height: 112px; }
  .ac-real .real-carte, .ac-fait { padding: 28px 32px; }
  .ac-fait-texte, .ac-rub-texte { font-size: 16px; line-height: 25px; }
  .ac-rub > .symbole { margin: 28px 32px 0; }
  .ac-rub-in { padding: 18px 32px 18px; }
  .ac-bref-cote { gap: 40px 96px; }
  .ac-faq-grille { gap: 28px 96px; }
  .ac-defile { margin-top: 44px; }
  .ac-groupe-lien { padding: 28px 36px; }
}
/* 06/11 (vérification, R06) : très grand écran, tailles seules (textes et ordre inchangés). Galerie en rangées de 250 px
   au plus (la grande vignette faisait 752 × 656 à 1 920 px) ; photos du parc en 16:9 (deux 4:3 de 748 × 561) ; photo
   du siège à hauteur fixe, proche de celle du texte voisin (497 px de haut pour 231 px de texte à 1 920 px). */
@media screen and (min-width: 1440px) {
  .ac-galerie .galerie { grid-auto-rows: clamp(220px, 13vw, 250px); }
  .ac-parc-duo .parc-photo { aspect-ratio: 16 / 9; }
  .cote-photo.ac-bref-photo { aspect-ratio: auto; height: clamp(320px, 20vw, 360px); }
  /* Cadre plus bas (environ 2:1) : la photo est cadrée un peu plus haut pour garder entières les enseignes du siège. */
  .ac-bref-photo .photo-img { object-position: 50% 35%; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-real-carte, .ac-rub, .ac-faq-item, .ac-carte-sym, .ac-groupe-lien, .ac-groupe-fleche { transition: none; }
  .vu .ac-metier-img { animation: none; }
  .ac-real-carte:hover, .ac-rub:hover, a.ac-carte-sym:hover, .ac-groupe-lien:hover, .ac-groupe-lien:hover .ac-groupe-fleche { transform: none; }
  /* Carrousel immobile : une seule liste, logos sur plusieurs lignes, sans fondu. */
  .ac-defile-piste { width: auto; animation: none; }
  .ac-defile-liste { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 0 56px; }
  .ac-defile-liste[aria-hidden="true"] { display: none; }
  .ac-defile::before, .ac-defile::after { display: none; }
}
@media screen and (max-width: 991px) {
  .ac-bref, .ac-sec, .ac-faq { padding-top: 72px; }
  .pleine.ac-pleine { background-color: transparent; }
  .ac-pleine-scene { display: block; min-height: 0; background-color: #06243F; }
  .ac-atouts-cadre { padding-top: 16px; }
  .ac-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* Tablette : photo et texte restent côte à côte (empilée, la photo occupait toute la largeur sur 550 px de haut). */
  .ac-bref-cote { gap: 24px 40px; }
  .ac-groupe-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
  .ac-faits { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .ac-fait { padding: 20px; border-radius: 22px; }
  .ac-faq-grille { grid-template-columns: 1fr; grid-template-areas: "tete" "photo" "liste"; }
  .ac-defile-liste { padding-left: 20px; padding-right: 20px; }
}
@media screen and (max-width: 767px) {
  /* Atouts en lignes : pastille à gauche, texte à droite. */
  .ac-atouts { grid-template-columns: 1fr; gap: 10px; }
  .ac-atout { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 20px; font-size: 15px; line-height: 22px; }
  .ac-atout-puce { width: 32px; height: 32px; }
  .ac-atout-puce::after { left: 12px; top: 8px; width: 6px; height: 12px; }
  .ac-metier-illu { height: 124px; margin: 10px 10px 0; border-radius: 16px; }
  /* Une carte visible à la fois (rangée défilante) : liens alignés en bas des trois cartes, titres sur une ligne. */
  .ac-carte-sym .carte-in { padding: 18px 20px 20px; }
  .ac-carte-sym .carte-titre { font-size: 22px; line-height: 28px; }
  .ac-parc-duo { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .ac-parc-duo .parc-photo { border-radius: 20px; }
  .ac-bref-cote { grid-template-columns: 1fr; grid-template-areas: "texte" "photo"; gap: 24px; }
  .cote-photo.ac-bref-photo { border-radius: 22px; }
  /* Cartes « en bref » en ligne : symbole à gauche, texte à droite, pour garder la section courte. */
  .ac-rubriques { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .ac-rub { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; border-radius: 22px; }
  .ac-rub > .symbole { margin: 18px 0 0 16px; }
  .ac-rub-in { padding: 16px 16px 8px; gap: 4px; }
  .ac-rub-titre { font-size: 19px; line-height: 25px; }
  .ac-rub-lien::after, .ac-real-lien::after { border-radius: 22px; }
  .ac-groupe-lien { min-height: 116px; padding: 20px 14px; border-radius: 20px; }
  .ac-groupe-logo { height: 36px; }
  .ac-groupe-resum .ac-groupe-logo { height: 42px; }
  .ac-groupe-safe .ac-groupe-logo { height: 76px; }
  .ac-groupe-foroutil .ac-groupe-logo { height: 24px; }
  .ac-groupe-fleche { top: 8px; right: 8px; width: 24px; height: 24px; }
  .ac-groupe-fleche-svg { width: 12px; height: 12px; }
  .ac-defile { margin-top: 24px; padding-bottom: 20px; }
  .ac-defile-item { height: 84px; padding: 0 24px; border-radius: 22px; }
  .ac-defile-piste { zoom: 0.8; animation-duration: 60s; }
  .ac-faq-lien { padding-left: 18px; font-size: 17px; line-height: 24px; }
  .cote-photo.ac-faq-photo { aspect-ratio: 4 / 3; border-radius: 22px; }
}
/* Après les règles du téléphone, qu'elle corrige. */
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  /* Téléphone : deux logos par ligne, logos réduits à la largeur de leur pastille. */
  .ac-defile-piste { zoom: 1; }
  .ac-defile-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 20px; }
  .ac-defile-item { height: 76px; padding: 0 14px; border-radius: 20px; }
  .ac-logo-client { max-width: 100%; height: auto; }
}



/* Coupe vivante (accueil, section 2). Préfixe cv-. Sans script : dessin fixe + six étapes en cartes. */
.cv-cadre { position: relative; container: cv-cadre / inline-size; }
.cv-dessin { position: relative; overflow: hidden; border-radius: 20px; background-color: #EAF1FC; }
.cv-svg { display: block; width: 100%; height: auto; }
/* En-tête : le titre seul (le texte de droite est retiré le 05/11). */
.cv .coupe-tete { grid-template-columns: minmax(0, 1fr); }
/* Légende des réseaux du schéma (anciennement legende-coupe, même rendu). 06/11 (vérification, R16) : 14 px au lieu
   de 13 px, comme le numéro d'étape et les pastilles. */
.cv-cle { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 6px 0; color: #40536A; font-size: 14px; line-height: 20px; font-weight: 600; }
.cv-num { display: none; font-family: Figtree, "Segoe UI", sans-serif; font-size: 16px; font-weight: 800; paint-order: stroke; stroke: #06243F; stroke-width: 3px; stroke-linejoin: round; }
@container cv-cadre (min-width: 700px) { .cv-num { display: inline; } }

/* Les six étapes : cartes claires sans script (1, 2 puis 3 colonnes). */
.cv-etapes { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.cv-etape { display: grid; align-content: start; gap: 4px; padding: 14px 16px; border-radius: 18px; background-color: #F5F8FF; box-shadow: inset 0 0 0 1px #E3ECFA; }
.cv-etape .etape-haut, .cv-etape .etape-titre, .cv-etape .etape-desc { grid-column: auto; }
/* 06/11 (vérification) : « Étape 0N sur 06 » en 14 px au lieu de 13 px (R16) ; texte de l'étape limité à 35rem, soit
   90 signes par ligne au plus (98 de 768 à 1 280 px avec les 40rem communs, R15). Accueil seulement (.cv-etape). */
.cv-etape .etape-haut { font-size: 14px; line-height: 20px; }
.cv-etape .etape-desc { max-width: 35rem; }
@container cv-cadre (min-width: 600px) { .cv-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container cv-cadre (min-width: 1000px) { .cv-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Avec le script : une seule étape montrée (l'étape en cours), les autres restent lues par les lecteurs d'écran.
   Les six cartes s'empilent dans la même case de grille : la liste garde la hauteur de la plus haute, et le curseur et
   les pastilles ne bougent plus d'une étape à l'autre (vérification du 27/10 : jusqu'à 70 px de saut à 375 px quand
   seule la carte en cours restait dans le flux). À l'écran seulement : imprimée, la liste reste en cartes, comme sans
   script. Grand écran : la carte posée sur le dessin laisse passer le glissé (pointer-events). */
.cv.est-vivante .cv-dessin { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cv.est-vivante .cv-dessin.cv-saisi { cursor: grabbing; }
@media screen {
  .cv.est-vivante .cv-etapes { grid-template-columns: minmax(0, 1fr); }
  .cv.est-vivante .cv-etape { grid-area: 1 / 1; align-self: start; padding: 4px 6px; background-color: transparent; box-shadow: none; }
  .cv.est-vivante .cv-etape:not([aria-current]) { opacity: 0; pointer-events: none; }
  @container cv-cadre (min-width: 1240px) {
    .cv.est-vivante .cv-etapes { position: absolute; top: 20px; right: 20px; width: min(380px, calc(100% - 40px)); margin: 0; pointer-events: none; }
    .cv.est-vivante .cv-etape[aria-current] { padding: 18px 20px; border-radius: 18px; background-color: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 14px 30px -16px rgba(6, 36, 63, 0.45); }
  }
}

/* Poignée : invite à glisser, posée en bas à gauche du dessin (zone vide à toutes les largeurs). */
.cv-poignee { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px; border-radius: 999px; background-color: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 10px 24px -12px rgba(47, 95, 208, 0.6); color: #06243F; font-size: 14px; line-height: 20px; font-weight: 600; pointer-events: none; transition: opacity 300ms ease; }
.cv-poignee[hidden] { display: none; }
.cv-poignee-symbole { display: block; flex: none; width: 28px; height: 28px; }
.cv-poignee-texte { display: none; padding-right: 10px; }
@container cv-cadre (min-width: 600px) { .cv-poignee { left: 20px; bottom: 20px; } .cv-poignee-symbole { width: 32px; height: 32px; } .cv-poignee-texte { display: inline; } }
.cv-touche .cv-poignee { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cv-indice .cv-poignee-symbole { animation: cv-balance 1600ms ease-in-out; }
  .cv.est-vivante .cv-etape[aria-current] { animation: cv-apparait 240ms ease-out; }
}
@keyframes cv-balance { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes cv-apparait { from { opacity: 0; transform: translateY(4px); } }

/* Commandes (montrées par le script) : curseur et six pastilles (point + numéro + nom, sans symbole : arbitrage A2). */
.cv-commande { margin-top: 14px; padding: 6px 6px 0; }
.cv-commande[hidden] { display: none; }
.cv-glisser { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: #40536A; font-size: 14px; line-height: 20px; font-weight: 600; }
.cv-pourcent { color: #2F5FD0; }
.cv-curseur { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: grab; touch-action: pan-y; }
.cv-curseur::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #2F5FD0 0, #6EA8FF var(--p, 27%), #E3ECFA var(--p, 27%)); }
.cv-curseur::-moz-range-track { height: 10px; border-radius: 999px; background: #E3ECFA; }
.cv-curseur::-moz-range-progress { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #2F5FD0, #6EA8FF); }
.cv-curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -12px; border: 0; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 2px #2F5FD0, 0 0 0 6px rgba(110, 168, 255, 0.35), 0 6px 16px rgba(47, 95, 208, 0.55); }
.cv-curseur::-moz-range-thumb { width: 34px; height: 34px; border: 0; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 2px #2F5FD0, 0 0 0 6px rgba(110, 168, 255, 0.35), 0 6px 16px rgba(47, 95, 208, 0.55); }
.cv-curseur:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 3px; border-radius: 999px; }
.cv-points { margin: 6px 0 0; padding: 0; }
/* 06/11 (vérification, R16) : numéros et noms des pastilles en 14 px au lieu de 13 px. */
.cv-point { display: grid; justify-items: center; gap: 4px; width: 100%; min-height: 44px; padding: 6px 2px; border: 0; border-radius: 14px; background-color: transparent; color: #5D7088; font-family: Figtree, "Segoe UI", sans-serif; font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer; }
.cv-point:hover { background-color: #F5F8FF; }
.cv-point:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 2px; }
.cv-point-marque { display: block; width: 10px; height: 10px; border-radius: 999px; background-color: #D3DFF3; transition: background-color 200ms ease, box-shadow 200ms ease; }
.cv-point[aria-current] { color: #06243F; background-color: #EEF4FF; }
.cv-point[aria-current] .cv-point-marque { background-color: #2F5FD0; box-shadow: 0 0 10px rgba(47, 95, 208, 0.8); }
/* Le nom reste dans le nom accessible du bouton (critère 2.5.3) : masqué visuellement seulement sous 768 px, jamais
   display: none (le design validé masque .point-nom sous 768 px pour l'ancienne rangée de repères). */
.cv-point .point-nom { display: block; }
@media screen and (max-width: 767px) {
  .cv-point .point-nom { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media screen and (min-width: 992px) { .cv-commande { padding: 10px 14px 4px; } .cv-dessin { border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) { .cv-poignee, .cv-point-marque { transition: none; } }
@media print { .cv-commande, .cv-poignee { display: none; } .cv-etape { animation: none; } }

/* contact.mjs */
/* 06/11 : photo du haut de page un peu assombrie (même réglage que l'ancien haut de /rse) ; section de candidature
   moins haute que sur /recrutement, la première après le devis. */
.ct-ouverture-img { filter: brightness(0.82); }
.ct-ouverture-postuler { margin: 4px 0 0; }
/* 06/11 (vérification, R2) : anneau de focus blanc sur la photo voilée de bleu nuit, comme les boutons et le fil
   d'Ariane du même haut de page (le bleu commun des liens fléchés n'y atteignait pas 3:1). */
.ct-ouverture-postuler .lien-fleche:focus-visible { outline-color: #FFFFFF; }
.rc-candidature-sec.ct-postuler { margin-top: 72px; }
/* Section de candidature : styles venus de l'ancienne page /recrutement (fondue dans /entreprise le 06/11). */
.rc-figure { display: grid; gap: 8px; margin: 0; }
.cote-photo.rc-candidature-photo { aspect-ratio: 16 / 9; }
.rc-candidature-photo .photo-img { object-position: 50% 60%; }
.rc-candidature-sec { margin-top: 104px; padding-top: 88px; padding-bottom: 88px; background-image: linear-gradient(180deg, #F5F8FF, #EEF4FF); }
.conteneur.rc-candidature { display: grid; gap: 28px; }
.rc-candidature-form { display: grid; gap: 16px; }
.rc-candidature-form > .formulaire { max-width: none; }
.rc-appeler { margin: 0; color: #40536A; font-size: 16px; line-height: 26px; }
@media screen and (min-width: 992px) {
  .conteneur.rc-candidature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "titre formulaire" "photo formulaire" "appeler formulaire"; grid-template-rows: auto auto 1fr; align-items: start; gap: 28px 56px; }
  .rc-candidature > .bloc-titre { grid-area: titre; }
  .rc-candidature > .rc-candidature-figure { grid-area: photo; }
  .rc-candidature > .rc-candidature-form { grid-area: formulaire; }
  .rc-candidature > .rc-appeler { grid-area: appeler; }
  .cote-photo.rc-candidature-photo { aspect-ratio: 4 / 5; }
  .rc-candidature-photo .photo-img { object-position: 58% 50%; }
}
@media screen and (max-width: 991px) {
  .rc-candidature-sec { margin-top: 72px; padding-top: 64px; padding-bottom: 64px; }
  .conteneur.rc-candidature { max-width: 720px; }
}
@media screen and (max-width: 767px) {
  .cote-photo.rc-metiers-photo, .cote-photo.rc-candidature-photo { aspect-ratio: 4 / 3; }
}
/* Haut de page : structure « ouverture » de Forage dirigé, sans photo à toutes les largeurs, sur bleu nuit lumineux
   (fiche 08 § 3.1, maquette 375 validée) ; plus court, pour que les coordonnées et le formulaire arrivent tôt. */
.ct-ouverture { min-height: 0; background-color: #06243F; background-image: radial-gradient(60% 75% at 100% 0%, rgba(47, 95, 208, 0.62) 0%, rgba(47, 95, 208, 0) 100%), radial-gradient(55% 60% at 0% 100%, rgba(127, 160, 230, 0.26) 0%, rgba(127, 160, 230, 0) 100%); }
.ct-ouverture .ouverture-in { padding-top: 150px; padding-bottom: 64px; }
.ct-ouverture .titre-page.long { max-width: 14ch; }
@media screen and (max-width: 991px) {
  .ct-ouverture .ouverture-in { padding-top: 128px; padding-bottom: 48px; }
}
@media screen and (max-width: 767px) {
  .ct-ouverture { background-image: radial-gradient(90% 55% at 100% 0%, rgba(47, 95, 208, 0.62) 0%, rgba(47, 95, 208, 0) 100%), radial-gradient(80% 45% at 0% 100%, rgba(127, 160, 230, 0.26) 0%, rgba(127, 160, 230, 0) 100%); }
  .ct-ouverture .ouverture-in { padding-top: 108px; padding-bottom: 40px; }
  /* 06/11 (vérification, R12) : boutons en grille de même largeur au téléphone, règle passée dans outils/gabarit.css
     pour tous les hauts de page et bandeaux d'appel du site. */
}

/* Coordonnées (5/12) et formulaire (7/12) côte à côte à partir de 1 280 px. */
.ct-prise { padding-top: 96px; padding-bottom: 24px; }
.ct-prise-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 56px; }
/* 05/11 : sous l'en-tête désormais fixe (--sous-entete, gabarit commun), 24 px à défaut. */
.ct-coord { position: sticky; top: var(--sous-entete, 24px); min-width: 0; }
.ct-coord-carte { display: grid; gap: 14px; padding: 32px; border-radius: 28px; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #DCE6F7, 0 30px 60px -40px rgba(47, 95, 208, 0.45); }
.ct-coord .titre-section { font-size: 36px; line-height: 42px; }
.ct-coord-bloc { font-style: normal; }
.ct-coord-liste { display: grid; margin: 6px 0 0; padding: 0; list-style: none; }
/* Ligne : symbole (nu, 40 px) à gauche, libellé et valeur à droite. */
.ct-coord-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; align-content: start; column-gap: 16px; min-width: 0; padding: 18px 0; border-top: 1px solid #DCE6F7; }
.ct-coord-item:last-child { padding-bottom: 0; }
.ct-coord-contenu { display: grid; justify-items: start; align-content: start; gap: 4px; min-width: 0; }
.ct-coord-libelle { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 2px; color: #2F5FD0; font-size: 14px; line-height: 20px; font-weight: 600; }
.ct-coord-tel { display: inline-flex; align-items: center; min-height: 44px; color: #06243F; font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.ct-coord-tel:hover { color: #2F5FD0; }
.ct-coord-lien { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; color: #2F5FD0; font-size: 18px; line-height: 26px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.ct-coord-maps { display: inline-block; padding: 9px 0; color: #2F5FD0; font-size: 17px; line-height: 26px; font-weight: 600; text-decoration: none; }
.ct-coord-maps:hover { text-decoration: underline; text-underline-offset: 4px; }
.ct-coord-texte { margin: 0; color: #40536A; font-size: 16px; line-height: 25px; }
.ct-coord-texte.ct-coord-adresse { color: #06243F; font-size: 17px; line-height: 26px; font-weight: 600; }
.ct-devis { display: grid; gap: 28px; min-width: 0; }
/* 05/11 : à partir de 1 280 px, le formulaire occupe toute sa colonne (7/12 du conteneur élargi) au lieu de s'arrêter
   à 720 px ; en dessous, la mesure commune (720 px) reste. */
@media screen and (min-width: 1280px) {
  .ct-devis .formulaire { max-width: none; }
}
.ct-devis-tete .chapo, .ct-devis-tete .texte-courant { max-width: 40rem; }
.ct-gratuit { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: #06243F; font-size: 17px; line-height: 26px; font-weight: 700; }
.ct-gratuit .point { margin-top: 9px; }
/* 06/11 (vérification, REP-08) : styles de l'encadré .ct-delai retirés avec lui. */
@media screen and (max-width: 1279px) {
  .ct-prise-in { grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .ct-coord { position: static; }
  .ct-coord-carte { padding: 28px; }
  .ct-coord-liste { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 0 20px; }
  .ct-coord-item, .ct-coord-item:last-child { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 4px 0 4px 16px; border-top: 0; border-left: 1px solid #DCE6F7; }
  .ct-coord-tel { font-size: 26px; line-height: 32px; }
  .ct-coord-lien { font-size: 17px; }
}
@media screen and (max-width: 991px) {
  .ct-prise { padding-top: 64px; }
}
@media screen and (max-width: 767px) {
  .ct-prise-in { gap: 56px; }
  .ct-coord-carte { padding: 24px 20px; border-radius: 24px; }
  .ct-coord .titre-section { font-size: 32px; line-height: 38px; }
  .ct-coord-liste { grid-template-columns: minmax(0, 1fr); }
  .ct-coord-item, .ct-coord-item:last-child { grid-template-columns: 40px minmax(0, 1fr); row-gap: 0; column-gap: 14px; padding: 16px 0; border-left: 0; border-top: 1px solid #DCE6F7; }
  .ct-coord-item:last-child { padding-bottom: 0; }
  .ct-coord-tel { font-size: 30px; line-height: 36px; }
  .ct-coord-lien { font-size: 18px; }
}

/* Interlocuteurs : 4 cartes à 1 280 px, 2 en tablette, 1 sur mobile ; pastilles d'initiales décoratives. */
.ct-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.ct-carte { display: grid; align-content: start; justify-items: start; gap: 8px; min-width: 0; padding: 24px; border-radius: 24px; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #DCE6F7, 0 30px 60px -40px rgba(47, 95, 208, 0.45); }
.ct-initiales { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 6px; border-radius: 999px; background-image: linear-gradient(135deg, #2F5FD0, #06243F); color: #FFFFFF; font-size: 24px; line-height: 24px; font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 12px 28px -10px rgba(47, 95, 208, 0.7), inset 0 0 0 3px rgba(169, 203, 255, 0.45); }
.ct-nom { margin: 0; color: #06243F; font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -0.015em; }
.ct-fonction { margin: 0; color: #40536A; font-size: 15px; line-height: 22px; }
.ct-courriel { max-width: 100%; margin: 0; }
.ct-courriel a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; color: #2F5FD0; font-size: 15px; line-height: 22px; font-weight: 700; overflow-wrap: anywhere; }
.ct-chantier { justify-self: stretch; margin: 6px 0 0; padding-top: 12px; border-top: 1px solid #DCE6F7; font-size: 15px; line-height: 22px; }
@media screen and (max-width: 1279px) {
  .ct-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .ct-cartes { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .ct-carte { padding: 22px 20px; }
  .ct-initiales { width: 56px; height: 56px; margin-bottom: 4px; font-size: 20px; line-height: 20px; }
}

.ct-insecable { white-space: nowrap; }
/* Nous trouver (05/11), dernière rangée avant le pied de page. 06/11 (vérification, REP-09 et R03) : « Autres
   demandes » coupée, plus de grille en trois colonnes ; « Nous trouver » seule, sur toute la largeur du conteneur, ses
   deux lignes côte à côte dans la carte à partir de 768 px (une colonne par phrase, sans case vide). */
.ct-fin { padding-bottom: 104px; }
.ct-bas-sec { display: grid; gap: 28px; min-width: 0; }
.ct-autre { display: grid; align-content: start; justify-items: start; gap: 8px; min-width: 0; padding: 28px; border-radius: 24px; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #DCE6F7, 0 30px 60px -40px rgba(47, 95, 208, 0.45); }
/* Carte « Nous trouver » : une ligne à puce lumineuse par phrase. */
.ct-trouver { gap: 14px; }
.ct-trouver-ligne { display: flex; align-items: flex-start; gap: 12px; max-width: 34rem; margin: 0; color: #06243F; font-size: 17px; line-height: 26px; font-weight: 600; }
.ct-trouver-ligne .point { margin-top: 9px; }
/* Liens de suite (ancienne section « Questions sur le devis ») : une rangée sous la carte. */
.ct-liens { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 28px 0 0; padding: 0; list-style: none; }
@media screen and (min-width: 768px) {
  .ct-trouver { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: stretch; gap: 14px 40px; }
}
@media screen and (max-width: 991px) {
  .ct-fin { padding-bottom: 72px; }
}
@media screen and (max-width: 767px) {
  .ct-bas-sec { gap: 24px; }
  .ct-autre { padding: 24px 20px; }
  .ct-trouver-ligne { font-size: 16px; line-height: 25px; }
}

/* Focus visible et marge basse : un élément qui reçoit le focus reste au-dessus de la barre mobile (WCAG 2.4.11).
   06/11 (vérification) : .ct-delai a et .ct-autre-texte a retirés avec leurs blocs. */
.ct-coord-tel:focus-visible, .ct-coord-lien:focus-visible, .ct-coord-maps:focus-visible, .ct-courriel a:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 3px; border-radius: 4px; }
@media screen and (max-width: 991px) {
  .ct-coord-tel, .ct-coord-lien, .ct-coord-maps, .ct-courriel a, .ct-liens a, .ct-devis .saisie, .ct-devis .case input, .ct-devis a, .ct-devis .bouton { scroll-margin-bottom: 130px; }
}
/* entreprise.mjs */
.en-cible { scroll-margin-top: 24px; }
.titre-page.long.en-h1 { max-width: 17ch; }
/* Sommaire : pastilles qui passent à la ligne, cibles de 44 px. */
.en-sommaire { padding-top: 32px; }
.en-sommaire-liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 auto; padding: 0; list-style: none; }
.en-pastille { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background-color: #F5F8FF; box-shadow: inset 0 0 0 1px #DCE6F7; color: #06243F; font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; }
.en-pastille:hover { color: #2F5FD0; box-shadow: inset 0 0 0 2px #2F5FD0; }
.en-pastille:focus-visible, .en-carte .lien-fleche:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 3px; }
/* Cartes claires communes (histoire, personnes, valeurs). */
.en-carte { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: 24px; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #DCE6F7, 0 30px 60px -40px rgba(47, 95, 208, 0.45); }
.en-carte-titre { margin: 0; color: #06243F; font-size: 21px; line-height: 27px; font-weight: 800; letter-spacing: -0.015em; }
.en-carte-texte { margin: 0; color: #40536A; font-size: 16px; line-height: 26px; }
.en-liens { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
/* En bref */
.groupe-sec.en-bref-sec { padding-top: 72px; }
.en-bref { display: grid; gap: 28px; }
/* Histoire : trois étapes reliées par un trait (horizontal sur grand écran, vertical en dessous). */
.en-frise { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.en-frise::before { content: ""; position: absolute; top: 11px; left: 12px; right: 12px; height: 2px; border-radius: 2px; background-image: linear-gradient(90deg, #A9CBFF, #2F5FD0 50%, #A9CBFF); }
.en-jalon { position: relative; display: grid; padding-top: 42px; }
.en-jalon-point { position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 999px; background-color: #FFFFFF; box-shadow: inset 0 0 0 6px #2F5FD0, 0 0 16px rgba(47, 95, 208, 0.6); }
.en-jalon-carte { height: 100%; }
/* Direction et encadrement */
.en-equipe { display: grid; gap: 14px; margin-top: 36px; }
.en-personnes { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.en-personnes.en-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.en-personnes.en-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.en-nom { margin: 0; color: #06243F; font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.015em; }
.en-fonction { margin: -4px 0 0; color: #2F5FD0; font-size: 15px; line-height: 22px; font-weight: 700; }
.en-personne .lien-fleche { justify-self: start; }
/* Direction et encadrement (06/11) : organigramme. Président puis directeur général au centre, les trois conducteurs
   de travaux en rangée dessous ; traits bleu clair décoratifs comme l'organigramme du groupe. Cartes au survol. */
.en-orga { display: grid; justify-items: center; margin-top: 36px; }
.en-orga-direction { display: grid; justify-items: center; gap: 36px; width: 100%; margin: 0; padding: 0; list-style: none; }
.en-orga-direction > li { position: relative; width: min(680px, 100%); }
.en-orga-direction > li + li::before, .en-orga-label::before { content: ""; position: absolute; left: 50%; top: -36px; width: 2px; height: 36px; margin-left: -1px; background-color: #A9CBFF; }
.en-orga-label { position: relative; margin: 36px 0 0; padding: 8px 18px; border-radius: 999px; background-color: #EEF4FF; box-shadow: inset 0 0 0 1px #DCE6F7; color: #2F5FD0; font-size: 15px; line-height: 22px; font-weight: 700; text-align: center; }
.en-orga-equipe { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; margin: 0; padding: 40px 0 0; list-style: none; }
.en-orga-equipe::before { content: ""; position: absolute; top: 20px; left: calc((100% - 40px) / 6); right: calc((100% - 40px) / 6); height: 2px; background-color: #A9CBFF; }
.en-orga-equipe::after { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 20px; margin-left: -1px; background-color: #A9CBFF; }
.en-orga-equipe > li { position: relative; }
.en-orga-equipe > li::before { content: ""; position: absolute; top: -20px; left: 50%; width: 2px; height: 20px; margin-left: -1px; background-color: #A9CBFF; }
.en-orga .en-personne { transition: box-shadow 200ms ease, transform 200ms ease; }
.en-orga .en-personne:hover { box-shadow: 0 0 0 2px #2F5FD0, 0 30px 60px -40px rgba(47, 95, 208, 0.45); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .en-orga .en-personne { transition: none; }
  .en-orga .en-personne:hover { transform: none; }
}
@media screen and (max-width: 991px) {
  .en-orga { justify-items: stretch; }
  .en-orga-direction { justify-items: stretch; gap: 24px; }
  .en-orga-direction > li { width: 100%; }
  .en-orga-direction > li + li::before, .en-orga-label::before { top: -24px; height: 24px; left: 16px; }
  .en-orga-label { justify-self: start; margin-top: 24px; }
  .en-orga-equipe { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 0 0 36px; }
  /* 06/11 (vérification, R02) : le trait vertical continu dépassait sous la dernière branche (86 px à 375 et 768,
     148 px à 320) ; il est remplacé par un segment par carte, le dernier arrêté à sa branche. */
  .en-orga-equipe::before { display: none; }
  .en-orga-equipe::after { display: none; }
  .en-orga-equipe > li::before { top: 44px; left: -21px; width: 21px; height: 2px; margin-left: 0; }
  .en-orga-equipe > li::after { content: ""; position: absolute; left: -21px; top: -14px; bottom: -14px; width: 2px; background-color: #A9CBFF; }
  .en-orga-equipe > li:last-child::after { bottom: auto; height: 60px; }
}
/* Recrutement (06/11) : styles de l'ancienne page /recrutement (métiers, compétences, bouton de candidature) et faits
   en petites cartes claires sous l'accroche. */
.rc-intro { display: grid; gap: 10px; }
.rc-accroche { margin: 0; max-width: 42rem; color: #2F5FD0; font-size: 17px; line-height: 27px; font-weight: 600; }
.rc-metiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.rc-metier { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; }
.rc-metier-titre { font-size: 24px; line-height: 30px; }
.rc-metier-texte { max-width: 36rem; font-size: 16px; line-height: 25px; }
.rc-competences-titre { margin: 4px 0 0; color: #06243F; font-size: 14px; line-height: 20px; font-weight: 700; }
.rc-competences .sol { background-color: #FFFFFF; box-shadow: inset 0 0 0 1px #DCE6F7; }
.bouton.rc-postuler { margin-top: auto; white-space: normal; text-align: center; line-height: 20px; padding: 12px 22px; }
.cote.rc-metiers-tete { grid-template-columns: 1fr 1fr; gap: 24px 64px; }
.rc-metiers-texte { display: grid; gap: 16px; }
.cote-photo.rc-metiers-photo { aspect-ratio: 16 / 10; }
.rc-lien, .rc-postuler { scroll-margin-bottom: 56px; }
@media screen and (max-width: 991px) {
  .rc-metiers { margin-top: 24px; }
  .cote.rc-metiers-tete { grid-template-columns: 1fr; }
  .rc-metier { padding: 24px; }
  .bouton.rc-postuler { align-self: stretch; padding: 12px 16px; }
  .rc-lien, .rc-postuler { scroll-margin-bottom: 130px; }
}
@media screen and (max-width: 767px) {
  /* 06/11 (vérification, R01) : au téléphone, les quatre métiers en rangée qui défile à l'horizontale avec accroche,
     comme les cartes de l'accueil (.cartes) ; la liste empilée faisait 1 809 px à 375. Cartes à 86 % (.real-carte). */
  .rc-metiers { display: flex; gap: 12px; margin: 24px -20px 0; padding: 0 20px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; }
  .rc-metier { padding: 22px; }
  .rc-metier-titre { font-size: 22px; line-height: 28px; }
  .cote-photo.rc-metiers-photo, .cote-photo.rc-candidature-photo { aspect-ratio: 4 / 3; }
}
/* 06/11 (vérification, REP-06) : trois faits (« Profils » retiré), sur une grille de trois, sans case vide. */
.en-recrut-faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.en-recrut-fait { padding: 12px 16px; border-radius: 16px; background-color: #F5F8FF; box-shadow: inset 0 0 0 1px #DCE6F7; }
.en-recrut-fait dt { color: #2F5FD0; font-size: 14px; line-height: 20px; font-weight: 700; }
.en-recrut-fait dd { margin: 2px 0 0; color: #40536A; font-size: 15px; line-height: 22px; }
.en-recrut-actions { margin: 0; }
@media screen and (min-width: 1280px) {
  .rc-metiers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rc-metier { padding: 24px; }
  .rc-metier-titre { font-size: 22px; line-height: 28px; }
}
/* 06/11 (vérification, REP-06) : là où la colonne de texte est étroite pour trois cases (480 à 599 px, puis 992 à
   1 279 px, où elle partage la rangée avec la photo), deux colonnes et le troisième fait sur toute la largeur. */
@media screen and (min-width: 480px) and (max-width: 599px), screen and (min-width: 992px) and (max-width: 1279px) {
  .en-recrut-faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .en-recrut-fait:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media screen and (max-width: 479px) {
  .en-recrut-faits { grid-template-columns: minmax(0, 1fr); }
}
/* FTCS Forage en bref (06/11) : carte unique. */
/* En bref, piste « carte unique » : photo, chiffres et carte d'identité dans un seul objet arrondi. Au téléphone et
   sur tablette, la photo est un bandeau en haut de la carte et le corps la recouvre d'un arrondi ; à partir de 992 px,
   elle occupe le côté gauche sur toute la hauteur. */
#en-bref .en-bref-carte { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 28px; background-color: #FFFFFF; box-shadow: 0 0 0 1px #DCE6F7, 0 40px 80px -48px rgba(47, 95, 208, 0.5); }
#en-bref .en-bref-visuel { display: block; aspect-ratio: 16 / 9; }
#en-bref .en-bref-visuel .photo-img { position: absolute; top: 0; left: 0; object-position: 50% 62%; }
#en-bref .en-bref-corps { position: relative; z-index: 1; display: grid; align-content: center; gap: 24px; margin-top: -28px; padding: 26px 20px 24px; border-radius: 28px 28px 0 0; background-color: #FFFFFF; background-image: radial-gradient(60% 120% at 100% 0%, rgba(169, 203, 255, 0.35), rgba(169, 203, 255, 0) 70%), linear-gradient(180deg, #FFFFFF 40%, #F5F8FF); }
/* Chiffres : nombre à gauche et libellé à droite au téléphone, rangée de trois à partir de 768 px. */
#en-bref .en-bref-chiffres { display: grid; gap: 16px; margin: 0; }
#en-bref .en-bref-chiffre { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 14px; }
#en-bref .en-bref-nombre { color: #2F5FD0; font-size: 38px; line-height: 42px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
#en-bref .en-bref-avant { display: block; color: #2F5FD0; font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: 0; }
#en-bref .en-bref-libelle { margin: 0; color: #40536A; font-size: 15px; line-height: 22px; }
#en-bref .en-bref-abbr { text-decoration: underline dotted #7FA0E6; text-underline-offset: 3px; cursor: help; }
/* Carte d'identité : petites lignes sous un filet. */
#en-bref .en-bref-fiche { display: grid; gap: 14px; margin: 0; padding-top: 22px; border-top: 1px solid #DCE6F7; }
#en-bref .en-bref-ligne { display: grid; align-content: start; gap: 2px; }
#en-bref .en-bref-terme { color: #2F5FD0; font-size: 14px; line-height: 20px; font-weight: 700; }
#en-bref .en-bref-valeur { margin: 0; color: #06243F; font-size: 16px; line-height: 24px; font-weight: 600; }
#en-bref .en-bref-valeur::first-letter { text-transform: uppercase; }
/* Téléphone : Groupe et Zone d'intervention, valeurs courtes, côte à côte sous l'activité. */
@media screen and (min-width: 360px) and (max-width: 767px) {
  #en-bref .en-bref-fiche { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  #en-bref .en-bref-activite, #en-bref .en-bref-clients { grid-column: 1 / -1; }
}
@media screen and (max-width: 399px) {
  #en-bref .en-bref-chiffre { grid-template-columns: 5.75rem minmax(0, 1fr); gap: 12px; }
  #en-bref .en-bref-nombre { font-size: 34px; line-height: 38px; }
}
@media screen and (min-width: 768px) {
  #en-bref .en-bref-visuel { aspect-ratio: 3 / 1; }
  #en-bref .en-bref-corps { gap: 28px; padding: 34px 36px 32px; }
  /* Les chiffres et la carte d'identité partagent les mêmes colonnes : Groupe et Zone sous « 100 % ». */
  #en-bref .en-bref-chiffres, #en-bref .en-bref-fiche { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 28px; }
  #en-bref .en-bref-chiffres { grid-template-rows: auto auto; row-gap: 8px; }
  #en-bref .en-bref-chiffre { grid-row: span 2; grid-template-columns: none; grid-template-rows: subgrid; align-items: start; gap: 8px; }
  #en-bref .en-bref-nombre { align-self: end; font-size: 46px; line-height: 50px; }
  #en-bref .en-bref-avant { margin-bottom: 2px; font-size: 16px; line-height: 22px; }
  #en-bref .en-bref-fiche { row-gap: 18px; padding-top: 26px; }
  /* Fiche placée sur les colonnes des chiffres : Activité et Clients sous les deux premiers, Groupe et Zone sous « 100 % ». */
  #en-bref .en-bref-activite { grid-column: 1 / span 2; grid-row: 1; }
  #en-bref .en-bref-groupe { grid-column: 3; grid-row: 1; }
  #en-bref .en-bref-clients { grid-column: 1 / span 2; grid-row: 2; }
  #en-bref .en-bref-zone { grid-column: 3; grid-row: 2; }
}
@media screen and (min-width: 992px) {
  #en-bref .en-bref-carte { grid-template-columns: minmax(0, 29fr) minmax(0, 71fr); }
  #en-bref .en-bref-visuel { aspect-ratio: auto; min-height: 100%; }
  /* Image plus haute que son cadre, calée en bas : le haut de la photo (rue, camion) reste hors champ. */
  #en-bref .en-bref-visuel .photo-img { top: auto; bottom: 0; height: 150%; object-position: 50% 100%; }
  #en-bref .en-bref-corps { margin-top: 0; margin-left: -28px; padding: 36px 40px 36px 54px; border-radius: 28px 0 0 28px; }
}
@media screen and (min-width: 1280px) {
  #en-bref .en-bref-carte { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); }
  #en-bref .en-bref-corps { padding: 40px 48px 40px 58px; }
  #en-bref .en-bref-chiffres, #en-bref .en-bref-fiche { column-gap: 32px; }
  #en-bref .en-bref-libelle { font-size: 16px; line-height: 24px; }
}
@media screen and (min-width: 1440px) {
  #en-bref .en-bref-carte { grid-template-columns: minmax(0, 32fr) minmax(0, 68fr); }
  #en-bref .en-bref-corps { gap: 32px; padding: 48px 64px 48px 74px; }
  #en-bref .en-bref-nombre { font-size: 60px; line-height: 62px; }
  #en-bref .en-bref-chiffres, #en-bref .en-bref-fiche { column-gap: 48px; }
}
/* Améliorations du juge (06/11) : unités en petit, filets bleus en dégradé qui relient les colonnes, zoom lent de la photo
   au survol (souris seulement, mouvement non réduit). */
#en-bref .en-bref-unite { font-size: 0.55em; letter-spacing: -0.02em; }
#en-bref .en-bref-unite-pct { font-size: 0.7em; }
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  #en-bref .en-bref-nombre { font-size: 56px; line-height: 58px; }
}
@media screen and (min-width: 768px) {
  #en-bref .en-bref-chiffre, #en-bref .en-bref-groupe, #en-bref .en-bref-zone { position: relative; }
  #en-bref .en-bref-chiffre + .en-bref-chiffre::before, #en-bref .en-bref-groupe::before, #en-bref .en-bref-zone::before { content: ""; position: absolute; top: 0; bottom: 0; left: -14px; width: 1px; background-image: linear-gradient(180deg, rgba(47, 95, 208, 0), rgba(47, 95, 208, 0.4) 50%, rgba(47, 95, 208, 0)); }
}
@media screen and (min-width: 1280px) {
  #en-bref .en-bref-chiffre + .en-bref-chiffre::before, #en-bref .en-bref-groupe::before, #en-bref .en-bref-zone::before { left: -16px; }
}
@media screen and (min-width: 1440px) {
  #en-bref .en-bref-chiffre + .en-bref-chiffre::before, #en-bref .en-bref-groupe::before, #en-bref .en-bref-zone::before { left: -24px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #en-bref .en-bref-visuel .photo-img { transform-origin: 50% 100%; transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  #en-bref .en-bref-carte:hover .photo-img { transform: scale(1.04); }
}
/* Démarche RSE (06/11) : deux cartes claires côte à côte, photos en haut (hauteur mesurée), texte dessous. */
.en-rse { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; margin-top: 32px; }
.en-rse-carte { grid-template-rows: auto 1fr; gap: 0; padding: 12px; }
.en-rse-photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.en-rse-ruches .en-rse-photos { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.en-rse-photo { display: block; height: clamp(200px, 19vw, 300px); border-radius: 18px; }
.en-rse-photo .photo-img { width: 100%; height: 100%; object-fit: cover; }
.en-rse-texte { display: grid; align-content: start; gap: 8px; padding: 18px 12px 10px; }
@media screen and (max-width: 991px) {
  .en-rse { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
  .en-rse-photo { height: clamp(180px, 34vw, 260px); }
}
@media screen and (max-width: 479px) {
  .en-rse-ruches .en-rse-photos { grid-template-columns: minmax(0, 1fr); }
}
/* Groupe RESUM : organigramme en liste imbriquée, traits de liaison décoratifs. */
.en-organigramme { display: grid; gap: 16px; }
.en-org { margin: 0; padding: 0; list-style: none; }
.en-org-parent { display: grid; justify-items: center; gap: 28px; }
.en-org-boite { position: relative; display: grid; place-items: center; min-height: 72px; padding: 14px 18px; border-radius: 22px; background-color: #FFFFFF; box-shadow: 0 0 0 1px #DCE6F7, 0 24px 48px -32px rgba(6, 36, 63, 0.45); color: #06243F; font-size: 17px; line-height: 24px; font-weight: 800; text-align: center; }
.en-org-tete { min-width: 260px; background-color: #06243F; background-image: radial-gradient(120% 140% at 0% 0%, rgba(47, 95, 208, 0.7), rgba(47, 95, 208, 0) 70%); box-shadow: 0 24px 48px -24px rgba(6, 36, 63, 0.6); color: #FFFFFF; font-size: 20px; }
.en-org-tete::after { content: ""; position: absolute; left: 50%; bottom: -28px; width: 2px; height: 28px; margin-left: -1px; background-color: #A9CBFF; }
.en-org-filles { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; margin: 0; padding: 28px 0 0; list-style: none; }
.en-org-filles::before { content: ""; position: absolute; top: 0; left: calc((100% - 28px) / 6); right: calc((100% - 28px) / 6); height: 2px; background-color: #A9CBFF; }
.en-org-filles > li { position: relative; display: grid; }
.en-org-filles > li::before { content: ""; position: absolute; top: -28px; left: 50%; width: 2px; height: 28px; margin-left: -1px; background-color: #A9CBFF; }
/* 06/11 : tuiles de logos cliquables ; le logo blanc du Groupe RESUM reste sur la tuile bleu nuit, les autres sur des
   tuiles blanches ; FTCS Forage, la page où l'on est, cerclée de bleu. */
.en-org-lien { gap: 8px; min-height: 96px; text-decoration: none; transition: box-shadow 200ms ease, transform 200ms ease; }
.en-org-lien:hover { box-shadow: 0 0 0 2px #2F5FD0, 0 24px 48px -32px rgba(6, 36, 63, 0.45); transform: translateY(-2px); }
.en-org-lien:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 3px; }
.en-org-logo { display: block; width: auto; max-width: 100%; height: 60px; object-fit: contain; }
.en-org-tete .en-org-logo { height: 46px; }
.en-org-sftp .en-org-logo { height: 52px; }
.en-org-ici { box-shadow: 0 0 0 2px #2F5FD0, 0 24px 48px -32px rgba(47, 95, 208, 0.6); }
.en-org-note { display: block; color: #2F5FD0; font-size: 14px; line-height: 20px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .en-org-lien { transition: none; }
  .en-org-lien:hover { transform: none; }
}
/* 06/11 : portraits en médaillon à gauche du nom et de la fonction. */
.en-personne-tete { display: flex; align-items: center; gap: 16px; }
.en-personne-id { display: grid; gap: 4px; min-width: 0; }
.en-personne-id .en-fonction { margin: 0; }
.en-portrait { flex: none; width: 72px; height: 72px; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4px #DCE6F7, 0 14px 28px -14px rgba(6, 36, 63, 0.5); }
.en-initiales { display: grid; place-items: center; background-image: linear-gradient(135deg, #2F5FD0, #06243F); color: #FFFFFF; font-size: 24px; line-height: 1; font-weight: 800; letter-spacing: 0.02em; }
/* 06/11 (vérification, REP-01) : styles de la section Siège (.en-coord, .en-adresse, .en-carte-bouton) retirés avec elle. */
/* Parc matériel */
/* 06/11 (rythme) : panneau bleu nuit arrondi (même fond que la tuile du Groupe RESUM et les hauts de page sombres du
   site), distinct du groupe qui le précède (photo et texte sur fond blanc) et des valeurs qui le suivent (grille claire
   sans cadre). Liste en lignes séparées par des filets, point lumineux en tête de ligne ; photo encadrée de 12 px, en
   bas du panneau au téléphone et sur tablette, en troisième zone à partir de 992 px. */
.en-parc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; overflow: hidden; padding: 40px 40px 12px; border-radius: 28px; background-color: #06243F; background-image: radial-gradient(70% 90% at 0% 0%, rgba(47, 95, 208, 0.55), rgba(47, 95, 208, 0) 70%), radial-gradient(50% 70% at 100% 100%, rgba(127, 160, 230, 0.22), rgba(127, 160, 230, 0) 70%); box-shadow: 0 40px 80px -48px rgba(6, 36, 63, 0.7); color: #FFFFFF; }
.en-parc .titre-section { color: #FFFFFF; }
.en-parc-tete { align-content: start; }
.en-parc-lien { margin: 0; }
.en-parc .lien-fleche.lien-clair { min-height: 44px; color: #FFFFFF; }
.en-parc .lien-fleche.lien-clair:hover { color: #A9CBFF; }
.en-parc .lien-fleche:focus-visible { outline-color: #FFFFFF; }
.en-parc-liste { position: relative; display: grid; align-content: start; gap: 6px; }
.en-parc-sous-titre { margin: 0; color: #FFFFFF; font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -0.01em; }
/* 06/11 (vérification, R13) : max-width 42rem, la ligne atteignait 97 signes à 1 920. */
.en-faits { display: grid; max-width: 42rem; margin: 0; padding: 0; list-style: none; }
.en-fait { position: relative; padding: 12px 0 12px 24px; color: #DCE6F7; font-size: 16px; line-height: 25px; }
.en-fait + .en-fait { border-top: 1px solid rgba(169, 203, 255, 0.2); }
.en-fait::before { content: ""; position: absolute; top: 21px; left: 2px; width: 8px; height: 8px; border-radius: 999px; background-color: #A9CBFF; box-shadow: 0 0 10px rgba(169, 203, 255, 0.8); }
.en-fait-annee { color: #A9CBFF; font-weight: 800; }
.en-parc-photo { display: block; aspect-ratio: 16 / 9; margin: 0 -28px; border-radius: 20px; }
.en-parc-photo .photo-img { position: absolute; top: 0; left: 0; }
@media screen and (min-width: 768px) and (max-width: 991px) {
  .en-parc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 40px; }
  .en-parc-photo { grid-column: 1 / -1; aspect-ratio: auto; height: clamp(220px, 30vw, 280px); }
}
@media screen and (min-width: 992px) {
  .en-parc { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); column-gap: 48px; padding: 12px 12px 12px 48px; }
  .en-parc-tete, .en-parc-liste { padding: 36px 0; }
  .en-parc-liste::before { content: ""; position: absolute; top: 36px; bottom: 36px; left: -24px; width: 1px; background-image: linear-gradient(180deg, rgba(169, 203, 255, 0), rgba(169, 203, 255, 0.45) 50%, rgba(169, 203, 255, 0)); }
  .en-parc-photo { aspect-ratio: auto; min-height: 100%; margin: 0; }
}
/* De 992 à 1 279 px, trois zones plus étroites : titre, chapô et liste un cran plus petits. */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .en-parc { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3.5fr); column-gap: 40px; padding-left: 40px; }
  .en-parc-liste::before { left: -20px; }
  .en-parc .titre-section { font-size: 34px; line-height: 40px; }
  .en-parc .chapo { font-size: 17px; line-height: 27px; }
  .en-fait { padding-top: 10px; padding-bottom: 10px; font-size: 15px; line-height: 23px; }
  .en-fait::before { top: 18px; }
}
@media screen and (max-width: 767px) {
  /* 06/11 (rythme) : panneau plus court au téléphone (939 px à 375) : écart de 20 px, photo en bandeau 21/9 (environ
     147 px de haut au lieu de 193) comme sur tablette ; la photo reste sur la page. */
  .en-parc { gap: 20px; padding: 28px 22px 10px; }
  .en-parc-photo { aspect-ratio: 21 / 9; margin: 0 -12px; border-radius: 18px; }
  .en-fait { padding: 10px 0 10px 22px; font-size: 15px; line-height: 23px; }
  .en-fait::before { top: 18px; left: 1px; }
}
/* Valeurs : grille 2 × 2, puis une rangée de quatre sur grand écran, sur toute la largeur du conteneur (05/11 :
   « occuper la largeur de la page »). */
/* 06/11 (rythme) : sans cadre ni fond de carte ; un filet sous le titre, de fins traits bleus en dégradé entre les
   colonnes (comme dans « En bref »). Rangée de quatre dès 992 px. */
.en-valeurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin: 32px 0 0; padding: 32px 0 0; border-top: 1px solid #DCE6F7; list-style: none; }
/* 06/11 (vérification, R01) : contour de focus de la liste des valeurs (focalisable, elle défile au téléphone). */
.en-valeurs:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 4px; }
.en-valeur { position: relative; display: grid; align-content: start; gap: 12px; }
.en-valeur:nth-child(even)::before { content: ""; position: absolute; top: 0; bottom: 0; left: -24px; width: 1px; background-image: linear-gradient(180deg, rgba(47, 95, 208, 0), rgba(47, 95, 208, 0.35) 50%, rgba(47, 95, 208, 0)); }
@media screen and (min-width: 992px) {
  .en-valeurs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .en-valeur + .en-valeur::before { content: ""; position: absolute; top: 0; bottom: 0; left: -24px; width: 1px; background-image: linear-gradient(180deg, rgba(47, 95, 208, 0), rgba(47, 95, 208, 0.35) 50%, rgba(47, 95, 208, 0)); }
}
@media screen and (min-width: 1280px) {
  .en-valeurs { column-gap: 48px; margin-top: 40px; }
}
.en-puces { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.en-puce { display: flex; align-items: baseline; gap: 10px; color: #06243F; font-size: 16px; line-height: 24px; font-weight: 600; }
/* Photos réparties le 04/11 : « en bref » (photo à gauche de la carte d'identité, chiffres en rangée au-dessus), bandeau
   sous la frise de l'histoire, photo à gauche du groupe, photo à droite du titre des valeurs (après les cartes sur mobile). */
.cote-photo.en-bandeau { aspect-ratio: 12 / 5; margin-top: 32px; }
.en-bandeau .photo-img { object-position: 50% 58%; }
.en-groupe-texte { display: grid; gap: 32px; }
.en-groupe-photo .photo-img { object-position: 50% 72%; }
/* 06/11 (rythme) : règles de la photo des valeurs (en-valeurs-cadre, en-valeurs-photo, R04) retirées avec elle. */
@media screen and (min-width: 992px) {
  /* Image posée en absolu : la hauteur naturelle de la photo portrait n'allonge pas la rangée. */
  .cote.en-groupe { grid-template-columns: 1fr 1.15fr; }
}
/* Bandeau de l'histoire : toute la largeur du conteneur, hauteur plafonnée à 560 px sur grand écran (le rapport 12/5
   donnerait plus de 600 px de haut dans un conteneur élargi). */
/* 06/11 (vérification, R09) : la hauteur plafonnée part de 992 px, et non plus de 1 440 px ; le rapport 12/5 donnait
   un bandeau plus haut à 1 280 (496 px) qu'à 1 920 (420 px). */
@media screen and (min-width: 992px) {
  /* 06/11 (« des sections moins grosses ») : 420 px au plus, au lieu de 560. */
  .cote-photo.en-bandeau { aspect-ratio: auto; height: clamp(320px, 28vw, 420px); }
}
/* Ambition : panneau clair, texte centré. */
.en-ambition-sec { padding-top: 104px; }
.en-ambition { position: relative; display: grid; justify-items: center; gap: 18px; overflow: hidden; padding: 72px 48px 80px; border-radius: 36px; background-image: radial-gradient(60% 90% at 50% 0%, rgba(169, 203, 255, 0.55) 0%, rgba(169, 203, 255, 0) 70%), linear-gradient(180deg, #EEF4FF, #F5F8FF); box-shadow: inset 0 0 0 1px #DCE6F7; text-align: center; }
.en-ambition::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 34px; height: 2px; border-radius: 2px; background-image: linear-gradient(90deg, rgba(47, 95, 208, 0), #2F5FD0 50%, rgba(47, 95, 208, 0)); }
.en-ambition-texte { margin: 0; max-width: 880px; color: #06243F; font-size: 22px; line-height: 34px; font-weight: 600; }
.en-ambition-texte.en-ambition-suite { color: #40536A; font-size: 19px; line-height: 30px; font-weight: 400; }
/* 06/11 (vérification, REP-06) : styles du lien « métiers » du bandeau d'appel retirés avec lui. */
@media screen and (max-width: 991px) {
  .groupe-sec.en-bref-sec { padding-top: 56px; }
  .en-frise { grid-template-columns: 1fr; gap: 16px; }
  .en-frise::before { top: 12px; bottom: 12px; left: 11px; right: auto; width: 2px; height: auto; background-image: linear-gradient(180deg, #A9CBFF, #2F5FD0 50%, #A9CBFF); }
  .en-jalon { padding-top: 0; padding-left: 44px; }
  .en-personnes.en-trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cote-photo.en-bandeau, .cote-photo.en-groupe-photo { aspect-ratio: 16 / 9; }
  .en-ambition-sec { padding-top: 72px; }
  .en-ambition { padding: 56px 32px 72px; }
  .en-ambition-texte { max-width: 600px; }
}
@media screen and (max-width: 767px) {
  .en-sommaire { padding-top: 24px; }
  .en-frise::before { left: 8px; }
  .en-jalon { padding-left: 30px; }
  .en-jalon-point { top: 2px; width: 18px; height: 18px; box-shadow: inset 0 0 0 5px #2F5FD0, 0 0 14px rgba(47, 95, 208, 0.6); }
  .en-personnes.en-deux, .en-personnes.en-trois { grid-template-columns: 1fr; }
  .en-carte { padding: 22px; }
  /* 06/11 (vérification, R01) : valeurs en rangée qui défile à l'horizontale avec accroche (1 016 px empilées à 375),
     comme les cartes de l'accueil ; la liste reçoit le focus au clavier (tabindex, nom = titre de la section) et son
     contour reste visible à l'intérieur de l'écran. */
  /* 06/11 (rythme) : au téléphone seulement, chaque valeur devient une tuile plate bleu pâle (#EEF4FF, sans anneau ni
     ombre, arrondi de 24 px) : la rangée qui défile ne reprend plus l'aspect .en-carte des cartes RSE juste dessous,
     et la tuile blanche du symbole s'y détache ; pas de filet ni de trait entre colonnes. */
  .en-valeurs { display: flex; gap: 12px; margin: 24px -20px 0; padding: 0 20px 12px; border-top: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; }
  .en-valeur { flex: 0 0 84%; scroll-snap-align: start; padding: 22px; border-radius: 24px; background-image: none; background-color: #EEF4FF; box-shadow: none; }
  .en-valeur:nth-child(even)::before { display: none; }
  .en-valeurs:focus-visible { outline-offset: -3px; border-radius: 28px; }
  .cote-photo.en-bandeau, .cote-photo.en-groupe-photo { aspect-ratio: 4 / 3; }
  .cote-photo.en-bandeau { margin-top: 24px; }
  .en-org-parent { justify-items: stretch; gap: 20px; }
  .en-org-tete { min-width: 0; }
  .en-org-tete::after { left: 24px; bottom: -20px; height: 20px; }
  .en-org-filles { grid-template-columns: 1fr; gap: 12px; padding: 0 0 0 48px; }
  .en-org-filles::before { top: -1px; bottom: 36px; left: 23px; right: auto; width: 2px; height: auto; }
  .en-org-filles > li::before { top: 50%; left: -25px; width: 25px; height: 2px; margin: -1px 0 0; }
  .en-org-boite { min-height: 64px; justify-items: start; text-align: left; }
  .en-ambition { padding: 40px 22px 60px; border-radius: 28px; }
  .en-ambition-texte { font-size: 19px; line-height: 30px; }
  .en-ambition-texte.en-ambition-suite { font-size: 17px; line-height: 28px; }
}
/* 06/11 (vérification, R13) : lignes de plus de 90 signes ramenées sous ce seuil. Second paragraphe de l'ambition à
   720 px sur grand écran seulement (sous 992 px, la règle de 600 px reste) ; textes des jalons et des cartes de
   direction à 36rem sur tablette et téléphone. */
@media screen and (min-width: 992px) {
  .en-ambition-texte.en-ambition-suite { max-width: 720px; }
}
@media screen and (max-width: 991px) {
  .en-jalon-carte .en-carte-texte, .en-orga-direction .en-carte-texte { max-width: 36rem; }
}
/* 06/11 (vérification, R11) : sur tablette, photos pleine largeur en 21/9 au lieu de 16/9 (728 x 312 au lieu de
   728 x 410) ; #parc-materiel n'est plus plus haute à 768 qu'à 375. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .cote-photo.en-bandeau, .cote-photo.en-groupe-photo, .cote-photo.rc-metiers-photo { aspect-ratio: 21 / 9; }
}
/* 06/11 (rythme) : la règle R18 (photo du parc en 16/10 à partir de 1 440 px) est retirée ; dans le panneau, la photo
   prend la hauteur des deux zones de texte. */
/* faq.mjs */
/* FAQ : sommaire collant et thèmes en accordéons (fiche 09 § 3 et § 6), dans le style « coupe vivante ». */
.fq-ouverture-img { object-position: 40% 60%; }
.fq-zone { padding-top: 88px; padding-bottom: 24px; background-image: linear-gradient(180deg, #FFFFFF 0%, #F5F8FF 40%, #F5F8FF 70%, #FFFFFF 100%); }
.fq-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.fq-cote { min-width: 0; }
.fq-sommaire { display: grid; gap: 14px; padding: 22px; border-radius: 28px; background-color: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px #DCE6F7, 0 30px 60px -40px rgba(6, 36, 63, 0.45); }
.fq-sommaire-intro { margin: 0; color: #06243F; font-size: 16px; line-height: 24px; font-weight: 700; }
.fq-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fq-pastille { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px; border-radius: 999px; background-color: #EEF4FF; color: #06243F; font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1px #DCE6F7; }
.fq-pastille:hover { background-color: #FFFFFF; box-shadow: inset 0 0 0 2px #2F5FD0; }
.fq-pastille:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 3px; }
.fq-themes { display: grid; gap: 80px; min-width: 0; }
.fq-theme { display: grid; gap: 24px; }
.fq-titre { scroll-margin-top: 24px; }
.fq-liste { display: grid; gap: 12px; }
.fq-item { border-radius: 24px; background-color: #F5F8FF; box-shadow: inset 0 0 0 1px #DCE6F7; }
.fq-item[open] { background-color: #FFFFFF; box-shadow: 0 0 0 1px #DCE6F7, 0 24px 48px -32px rgba(6, 36, 63, 0.4); }
.fq-resume { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 64px; padding: 16px 18px 16px 24px; border-radius: 24px; color: #06243F; cursor: pointer; list-style: none; }
.fq-resume::-webkit-details-marker { display: none; }
.fq-resume:hover .fq-signe { background-color: #DCE6F7; }
.fq-resume:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 2px; }
.fq-question { margin: 0; color: #06243F; font-size: 19px; line-height: 26px; font-weight: 800; letter-spacing: -0.01em; }
.fq-signe { position: relative; display: block; flex: none; width: 36px; height: 36px; border-radius: 999px; background-color: #EEF4FF; box-shadow: inset 0 0 0 1px #DCE6F7; }
.fq-signe::before, .fq-signe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background-color: #2F5FD0; }
.fq-signe::after { transform: rotate(90deg); }
.fq-item[open] .fq-signe { background-color: #2F5FD0; box-shadow: 0 6px 16px -6px rgba(47, 95, 208, 0.65); }
.fq-item[open] .fq-signe::before { background-color: #FFFFFF; }
.fq-item[open] .fq-signe::after { display: none; }
.fq-reponse { display: grid; gap: 12px; padding: 0 24px 24px; color: #40536A; font-size: 16px; line-height: 26px; }
.fq-reponse p { margin: 0; max-width: 68ch; }
.fq-insecable { white-space: nowrap; }
.fq-etapes { display: grid; gap: 4px; margin: 0; padding-left: 26px; max-width: 64ch; }
.fq-etapes li::marker { color: #2F5FD0; font-weight: 800; }
.fq-lien { margin-top: -6px; }
/* Photo de chantier dans un thème (04/11), entre deux questions. */
.fq-figure { display: grid; gap: 8px; margin: 0; }
.cote-photo.fq-photo { aspect-ratio: 3 / 2; border-radius: 24px; }
.fq-photo .photo-img { object-position: 50% 58%; }
.fq-appel-titre { max-width: 21ch; }
@media screen and (min-width: 480px) {
  .fq-appel-debut { white-space: nowrap; }
}
.fq-suite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
/* À partir de 1 280 px : sommaire collant à gauche, thèmes sur toute la colonne de droite (05/11 : plus de plafond à
   760 px, la page paraît moins resserrée) ; réponses un peu plus larges, photo plus panoramique. */
@media screen and (min-width: 1280px) {
  .fq-grille { grid-template-columns: minmax(336px, 3fr) minmax(0, 8fr); gap: 64px; align-items: start; }
  .fq-cote { position: sticky; top: var(--sous-entete, 24px); } /* 05/11 : sous l'en-tête fixe du gabarit commun */
  .fq-pastilles { flex-direction: column; }
  .fq-pastille { display: flex; }
  .fq-reponse { padding: 0 28px 28px; }
  .fq-reponse p { max-width: 78ch; }
  .fq-etapes { max-width: 74ch; }
  .fq-resume { padding: 18px 20px 18px 28px; }
  .cote-photo.fq-photo { aspect-ratio: 16 / 9; border-radius: 28px; }
}
@media screen and (max-width: 991px) {
  .fq-zone { padding-top: 56px; }
  .fq-themes { gap: 64px; }
}
@media screen and (max-width: 767px) {
  .fq-sommaire { padding: 18px; border-radius: 24px; }
  .fq-resume { gap: 12px; min-height: 56px; padding: 14px 14px 14px 18px; border-radius: 20px; }
  .fq-item { border-radius: 20px; }
  .fq-question { font-size: 17px; line-height: 24px; }
  .fq-signe { width: 32px; height: 32px; }
  .fq-reponse { padding: 0 18px 20px; }
  .cote-photo.fq-photo { aspect-ratio: 4 / 3; border-radius: 20px; }
}
/* forage-dirige.mjs */
/* /forage-dirige, « Comment se déroule un forage dirigé » (06/11/2026) : six blocs repliables reliés par un fil. Préfixe fd-. */
.fd-etapes-sec { --fd-marge: 14px; --fd-tuile: 52px; --fd-ecart: 12px; --fd-col: 16px; }
.fd-etapes-sec .coupe-tete { grid-template-columns: minmax(0, 1fr); }
.fd-etapes { display: grid; gap: var(--fd-ecart); margin: 18px 0 0; padding: 0; list-style: none; }
.fd-etape { position: relative; }
.fd-etape:not(:last-child)::before { content: ""; position: absolute; z-index: 1; top: calc(var(--fd-marge) + var(--fd-tuile) / 2); left: calc(var(--fd-marge) + var(--fd-tuile) / 2 - 2px); width: 4px; height: calc(100% + var(--fd-ecart)); border-radius: 4px; background-color: #C9DCFF; pointer-events: none; transition: background-color 240ms cubic-bezier(0.4, 0, 0.2, 1); }
/* Le fil fonce jusqu'à l'étape ouverte (navigateurs qui connaissent :has ; sinon il reste clair). */
.fd-etape:has(~ .fd-etape > .fd-pli[open])::before { background-color: #7FAEFF; }
.fd-pli { border-radius: 24px; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #E3ECFA; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.fd-pli[open] { background-image: linear-gradient(180deg, #FFFFFF, #FFFFFF); box-shadow: 0 0 0 1px #BFD3F5, 0 26px 50px -34px rgba(47, 95, 208, 0.55); }
.fd-pli-tete { display: grid; grid-template-columns: var(--fd-tuile) minmax(0, 1fr) 32px; grid-template-areas: "tuile haut fleche" "tuile titre fleche"; align-items: center; column-gap: var(--fd-col); min-height: calc(var(--fd-tuile) + 2 * var(--fd-marge)); padding: var(--fd-marge); border-radius: 24px; list-style: none; cursor: pointer; }
.fd-pli-tete::-webkit-details-marker { display: none; }
.fd-pli-tete > .symbole, .fd-pli-tete > .fd-num { --taille: var(--fd-tuile); grid-area: tuile; align-self: start; position: relative; z-index: 2; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.fd-pli-tete > .etape-haut { grid-area: haut; align-self: end; }
.fd-pli-tete > .etape-titre { grid-area: titre; align-self: start; color: #06243F; font-size: 19px; line-height: 25px; }
.fd-fleche { grid-area: fleche; position: relative; width: 32px; height: 32px; border-radius: 50%; background-color: #EEF4FF; box-shadow: inset 0 0 0 1px #DCE6F7; transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.fd-fleche::after { content: ""; position: absolute; left: 11px; top: 9px; width: 8px; height: 8px; border-right: 2.5px solid #2F5FD0; border-bottom: 2.5px solid #2F5FD0; border-radius: 0 0 2px 0; transform: rotate(45deg); }
.fd-pli-tete:hover { background-color: rgba(47, 95, 208, 0.04); }
.fd-pli-tete:hover > .fd-fleche { background-color: #DCE8FF; }
.fd-pli-tete:hover > .symbole, .fd-pli-tete:hover > .fd-num { transform: translateY(-2px); }
.fd-pli-tete:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 3px; }
.fd-pli[open] > .fd-pli-tete > .fd-fleche { transform: rotate(180deg); background-color: #2F5FD0; box-shadow: none; }
.fd-pli[open] > .fd-pli-tete > .fd-fleche::after { border-color: #FFFFFF; }
.fd-pli[open] > .fd-pli-tete > .symbole, .fd-pli[open] > .fd-pli-tete > .fd-num { box-shadow: inset 0 0 0 1px #FFFFFF, 0 0 0 2px #2F5FD0, 0 14px 26px -16px rgba(47, 95, 208, 0.75); }
.fd-pli > .etape-corps { padding: 0 20px 20px calc(var(--fd-marge) + var(--fd-tuile) + var(--fd-col)); }
.fd-pli > .etape-corps > .etape-desc { max-width: 46rem; font-size: 16px; line-height: 25px; }
.fd-num { display: grid; place-items: center; width: var(--fd-tuile); height: var(--fd-tuile); border-radius: 17px; background-image: radial-gradient(120% 120% at 28% 18%, #FFFFFF 0%, #F5F8FF 45%, #E6EEFF 100%); box-shadow: inset 0 0 0 1px #FFFFFF, 0 0 0 1px #DCE6F7, 0 14px 26px -16px rgba(47, 95, 208, 0.75); color: #2F5FD0; font-size: 20px; line-height: 1; font-weight: 800; } /* repli tant qu'un symbole manque */
.fd-suite { margin: 16px 0 0; }
/* Ouverture : le texte apparaît en fondu court (260 ms), sans rien déplacer autour. */
@media (prefers-reduced-motion: no-preference) {
  .fd-pli[open] > .etape-corps { animation: fd-deplie 260ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
}
@keyframes fd-deplie { from { opacity: 0; translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) {
  .fd-etape::before, .fd-pli, .fd-fleche, .fd-pli-tete > .symbole, .fd-pli-tete > .fd-num { transition: none; }
  .fd-pli-tete:hover > .symbole, .fd-pli-tete:hover > .fd-num { transform: none; }
}
/* Ordinateur : titre de la section et lien vers la coupe à gauche, frise à droite. */
@media screen and (min-width: 992px) {
  .fd-etapes-grille { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); grid-template-rows: auto 1fr; grid-template-areas: "tete frise" "suite frise"; column-gap: 64px; align-items: start; }
  .fd-etapes-tete { grid-area: tete; }
  .fd-etapes { grid-area: frise; margin: 0; }
  .fd-suite { grid-area: suite; margin: 12px 0 0; }
}
@media screen and (min-width: 1280px) {
  .fd-etapes-sec { --fd-marge: 16px; --fd-tuile: 56px; --fd-col: 20px; }
}
/* Téléphone : tuile plus petite ; le texte garde sa colonne à droite du fil. */
@media screen and (max-width: 767px) {
  .fd-etapes-sec { --fd-marge: 12px; --fd-tuile: 44px; --fd-ecart: 10px; --fd-col: 12px; }
  .fd-pli, .fd-pli-tete { border-radius: 20px; }
  .fd-pli-tete { grid-template-columns: var(--fd-tuile) minmax(0, 1fr) 28px; }
  .fd-pli-tete > .etape-titre { font-size: 17px; line-height: 23px; }
  .fd-fleche { width: 28px; height: 28px; }
  .fd-fleche::after { left: 9.5px; top: 7.5px; }
  .fd-pli > .etape-corps { padding-right: 14px; padding-bottom: 16px; }
  .fd-pli > .etape-corps > .etape-desc { font-size: 15px; line-height: 23px; }
}
@media print { .fd-etape::before { display: none; } }

/* /forage-dirige : remplacements du 27/10 (sections/forage-dirige-remplacements.mjs) */
/* Réseaux : le symbole remplace le filet bleu à gauche de chaque carte. */
.reseau-item.fd-reseau { grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; padding-left: 0; border-left: 0; }
.fd-reseau > .symbole { grid-row: 1 / span 2; align-self: start; }
.fd-reseau > .reseau-titre, .fd-reseau > .reseau-texte { grid-column: 2; }
.fd-reseau > .reseau-titre { padding-top: 2px; }
/* Questions fréquentes : la foreuse est au bord droit de la photo ; à 92 % le cadre garde le mât, la cabine et le capot
   entiers (à 70 %, la cabine était coupée). */
.fd-faq-photo { object-position: 92% 50%; }
/* Obstacles (04/11) : deux photos au lieu de trois. Sur grand écran, la rangée 4:3 ne fait plus que la moitié de la
   hauteur du texte voisin (1 024 px : 242 px de photos pour 480 px de texte) : elle se centre en hauteur au lieu de
   laisser tout le blanc dessous. Tablette et mobile : grille validée inchangée. */
@media screen and (min-width: 992px) {
  .obstacles > .obstacles-mosaique { align-self: center; }
}
/* 05/11 : photos échangées avec la réserve (Ditch Witch retirées). Capacités : cadre portrait (4:5) sur grand écran ;
   à 30 % il garde le flanc marqué TRACTO-TECHNIK et la cabine. Bandeau d'appel : la grande foreuse de Lesquin est à
   droite du centre ; à 60 %, la cabine et les tiges restent derrière le texte centré. */
.fd-capacites-img { object-position: 30% 50%; }
.fd-appel-img { object-position: 60% 50%; }
/* Capacités, à partir de 1 280 px (deux colonnes égales) : le cadre suit la hauteur du texte voisin (440 px au moins)
   au lieu du format 4:5, qui laissait un grand blanc sous le texte avec le conteneur élargi ; l'image, posée en absolu,
   ne l'allonge pas. Entre 992 et 1 279 px, la colonne de la photo est étroite et le texte long : le format 4:5 validé
   reste (sinon la photo deviendrait une bande verticale). */
@media screen and (min-width: 1280px) {
  .capacites > .capacites-image { align-self: stretch; grid-template-rows: minmax(0, 1fr); }
  .capacites-photo.fd-capacites-cadre { aspect-ratio: auto; min-height: 440px; }
  .fd-capacites-cadre > .photo-img { position: absolute; top: 0; left: 0; }
}
/* Bandeau d'appel : paragraphe du lien vers les travaux spéciaux (pages/forage-dirige.mjs), styles de l'ancienne ligne
   d'horaires du design validé. */
.fd-appel-suite { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 15px; }
/* Avantages (06/11, « C'est redondant ») : panneau bleu clair arrondi, sans photo ; titre à gauche, trois atouts cochés à
   droite, séparés par un filet. Plus bas qu'une rangée de cartes, et d'une autre forme que « Franchir l'obstacle » de
   l'accueil. Téléphone et tablette : titre au-dessus de la liste. */
.fd-avantages-sec { padding-top: 104px; padding-bottom: 24px; }
.fd-avantages { display: grid; gap: 20px; padding: 28px 22px; border-radius: 28px; background-image: linear-gradient(135deg, #F5F9FF 0%, #E8F0FF 100%); box-shadow: inset 0 0 0 1px #DCE6F7; }
.fd-avantages-tete .titre-section { color: #06243F; }
.fd-avantages-liste { display: grid; margin: 0; padding: 0; list-style: none; }
.fd-avantage { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 14px; padding: 14px 0; border-top: 1px solid #D3E0F7; color: #06243F; font-size: 17px; line-height: 26px; font-weight: 600; }
.fd-avantage:first-child { border-top: 0; padding-top: 0; }
.fd-avantage:last-child { padding-bottom: 0; }
/* Coche dessinée (aucun caractère) : pastille bleue, trait blanc arrondi. */
.fd-coche { position: relative; width: 30px; height: 30px; border-radius: 50%; background-color: #2F5FD0; box-shadow: 0 8px 16px -8px rgba(47, 95, 208, 0.8); }
.fd-coche::after { content: ""; position: absolute; left: 10px; top: 7px; width: 7px; height: 12px; border-right: 3px solid #FFFFFF; border-bottom: 3px solid #FFFFFF; border-radius: 0 0 2px 0; transform: rotate(45deg); }
@media screen and (min-width: 768px) {
  .fd-avantages { padding: 40px 44px; border-radius: 32px; }
  .fd-avantage { font-size: 18px; line-height: 28px; padding: 18px 0; }
}
@media screen and (min-width: 992px) {
  .fd-avantages { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: center; gap: 56px; padding: 48px 56px; }
}
@media screen and (max-width: 991px) {
  .fd-avantages-sec { padding-top: 72px; }
}
/* Recyclage des boues (06/11, « Essaye de faire des sections moins grosses […] tout en gardant la largeur du site ») :
   texte et dessin à parts égales, centrés l'un sur l'autre ; le dessin passe du format 4:3 (585 px de haut à 1 920 px)
   au format bandeau, 340 px au plus : la scène garde ses proportions, son décor (sol, ciel) remplit le cadre. Elle suit
   les « Avantages » dont elle est l'exemple : moins d'espace au-dessus. */
.groupe-sec.fd-recyclage-sec { padding-top: 64px; }
.cote.cote-inverse.fd-recyclage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.cote-photo.fd-recyclage-cadre { width: 100%; aspect-ratio: 16 / 7; max-height: 340px; border-radius: 28px; } /* largeur imposée : dans une grille, un cadre à format fixe ne s'étire pas seul */
@media screen and (max-width: 991px) {
  .groupe-sec.fd-recyclage-sec { padding-top: 48px; }
  .cote.cote-inverse.fd-recyclage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cote-photo.fd-recyclage-cadre { aspect-ratio: 16 / 7; border-radius: 24px; }
}
@media screen and (max-width: 479px) {
  .cote-photo.fd-recyclage-cadre { aspect-ratio: 2 / 1; border-radius: 22px; }
}
/* 06/11 (« Améliore ce vieux schéma et remplace la foreuse par une vraie foreuse ») : la scène, au format bandeau
   (vue 350 × 140), prend toute la largeur du cadre, moins une marge régulière ; sol, ciel et rivière débordent de sa vue
   et remplissent le reste. Cadre de la tablette en 16:7 et du téléphone en 2:1 (au lieu de 16:8 et 16:10, faits pour la
   scène 4:3 d'avant) : la scène y garde toute la largeur sans bandes vides dessus et dessous. Le fluide avance
   lentement dans le forage et les tuyaux (stroke-dashoffset, deux motifs en 4 s) ; immobile si le visiteur réduit les
   animations. */
.fd-recyclage-cadre > .scene.photo .scene-svg { top: 5%; left: 3.5%; width: 93%; height: 90%; }
@media (prefers-reduced-motion: no-preference) {
  .fd-recyclage-cadre .sb-flux { animation: fd-flux 4s linear infinite; }
}
@keyframes fd-flux { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) {
  .fd-recyclage-cadre .sb-flux { animation: none; }
}
/* Questions fréquentes (06/11) : les questions seules, en liens vers /faq, une par ligne sous un filet, flèche dessinée
   à droite qui avance au survol (autre forme que les pastilles de l'accueil). Sur ordinateur, la photo prend la
   hauteur de la colonne de texte (320 px au moins) au lieu du format 4:5, trop haut à côté de quatre questions. */
.fd-faq-liste { gap: 0; margin-top: 8px; }
.fd-faq-liste > .faq-item { padding: 0; border-bottom: 1px solid #E6EEFB; }
.fd-faq-liste > .faq-item:first-child { border-top: 1px solid #E6EEFB; }
.fd-faq-lien { position: relative; display: flex; align-items: center; min-height: 64px; padding: 14px 52px 14px 4px; border-radius: 14px; color: #06243F; text-decoration: none; transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.fd-faq-lien::before { content: ""; position: absolute; right: 14px; top: 50%; width: 22px; height: 2.5px; margin-top: -1.25px; border-radius: 2px; background-color: #2F5FD0; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.fd-faq-lien::after { content: ""; position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; margin-top: -5.5px; border-top: 2.5px solid #2F5FD0; border-right: 2.5px solid #2F5FD0; border-radius: 0 2px 0 0; transform: rotate(45deg); transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.fd-faq-lien:hover { color: #2F5FD0; background-color: #F5F8FF; }
.fd-faq-lien:hover::before { transform: translateX(4px); }
.fd-faq-lien:hover::after { transform: translateX(4px) rotate(45deg); }
.fd-faq-lien:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 2px; }
@media screen and (min-width: 992px) {
  .fd-faq > .faq-image { position: static; align-self: stretch; grid-template-rows: minmax(0, 1fr); }
  .fd-faq .cote-photo.reseaux-photo { aspect-ratio: auto; height: 100%; min-height: 320px; }
  .fd-faq .cote-photo.reseaux-photo > .photo-img { position: absolute; top: 0; left: 0; }
}
/* Tablette et téléphone : la photo passe au-dessus du texte, au format paysage (le 4:3 validé faisait 546 px de haut à
   768 px de large, au-dessus de quatre questions). */
@media screen and (max-width: 991px) {
  .fd-faq .cote-photo.reseaux-photo { aspect-ratio: 16 / 9; }
}
@media screen and (max-width: 767px) {
  .fd-faq .cote-photo.reseaux-photo { aspect-ratio: 3 / 2; }
}
/* 06/11 (vérification) : Réseaux, la photo 4:5 dépassait de loin le texte voisin sur grand écran (779 x 973 px à
   1 920 px pour 635 px de texte, et dès 1 500 px une fois le chapô coupé). À partir de 1 280 px, comme « Capacités »
   plus haut, le cadre suit la hauteur du texte (440 px au moins) ; l'image, posée en absolu, ne l'allonge pas. Entre
   992 et 1 279 px, le 4:5 validé reste (il y est à la hauteur du texte). Tablette (768 à 991 px) : photos de
   « Capacités » et de « Réseaux » en paysage (16:9) au lieu du 4:3 pleine largeur (728 x 546 px). Étapes : texte
   déplié limité à 36rem (107 signes par ligne à 1 920 px), ligne d'étape au-dessus du titre à 14 px au lieu de 13. */
@media screen and (min-width: 1280px) {
  #reseaux .cote > .reseaux-image { align-self: stretch; grid-template-rows: minmax(0, 1fr); }
  #reseaux .cote-photo.reseaux-photo { aspect-ratio: auto; height: 100%; min-height: 440px; }
  #reseaux .cote-photo.reseaux-photo > .photo-img { position: absolute; top: 0; left: 0; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .capacites-photo.fd-capacites-cadre, #reseaux .cote-photo.reseaux-photo { aspect-ratio: 16 / 9; }
}
.fd-pli > .etape-corps > .etape-desc { max-width: 36rem; }
.fd-pli-tete > .etape-haut { font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .fd-faq-lien, .fd-faq-lien::before, .fd-faq-lien::after { transition: none; }
}

/* mentions-legales.mjs */

.titre-simple.ml-titre { max-width: 24ch; }
.ml-parties { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.ml-partie { padding-top: 56px; padding-bottom: 24px; }
.ml-sans-coupure { white-space: nowrap; }
.ml-partie, .ml-bloc, .ml-essentiel, .ml-sommaire { scroll-margin-top: 24px; }
.ml-politique { margin-top: 88px; padding-top: 96px; padding-bottom: 112px; border-radius: 48px 48px 0 0; background-image: linear-gradient(180deg, #EEF4FF 0px, #F5F8FF 360px, #FFFFFF 900px); box-shadow: inset 0 1px 0 #DCE6F7; }
.ml-cadre { display: grid; gap: 32px; }
.ml-tete { display: grid; gap: 14px; max-width: 46rem; }
.ml-p { margin: 0; color: #40536A; font-size: 17px; line-height: 28px; }
.ml-p strong, .ml-puces strong, .ml-essentiel-liste strong { color: #06243F; font-weight: 700; }
.ml-adresse { display: inline; font-style: normal; }
.ml-cadre .lien-texte { text-underline-offset: 3px; overflow-wrap: anywhere; }
.ml-icone { margin-left: 3px; font-weight: 400; text-decoration: none; display: inline-block; }

/* Sommaire « Sur cette page » : carte en verre clair, zones de 44 px de haut. */
.ml-sommaire { align-self: start; padding: 16px; border-radius: 26px; background-color: rgba(255, 255, 255, 0.86); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px #DCE6F7, 0 30px 60px -44px rgba(6, 36, 63, 0.45); }
.ml-sommaire-titre { margin: 0 0 6px; padding: 4px 12px 0; color: #2F5FD0; font-size: 14px; line-height: 20px; font-weight: 700; }
.ml-sommaire-liste { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: ml-n; }
.ml-sommaire-lien { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 14px; color: #06243F; font-size: 15px; line-height: 21px; font-weight: 600; text-decoration: none; }
.ml-sommaire-lien:hover { background-color: #EEF4FF; color: #2F5FD0; }
.ml-sommaire-lien:focus-visible { outline: 3px solid #2F5FD0; outline-offset: -3px; }
.ml-numerote > li { counter-increment: ml-n; }
.ml-numerote .ml-sommaire-lien::before { content: counter(ml-n); display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 999px; background-color: #EEF4FF; color: #2F5FD0; font-size: 13px; line-height: 13px; font-weight: 800; box-shadow: inset 0 0 0 1px #DCE6F7; }

/* Contenu : sections séparées par un filet de 1 px. */
.ml-contenu { display: grid; align-content: start; min-width: 0; max-width: 46rem; }
.ml-bloc { display: grid; align-content: start; gap: 14px; min-width: 0; }
.ml-bloc + .ml-bloc, .ml-bloc + .ml-suite { margin-top: 44px; }
.ml-bloc + .ml-bloc { padding-top: 44px; border-top: 1px solid #DCE6F7; }
.ml-h3 { margin: 0; color: #06243F; font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
.ml-h4 { margin: 0; color: #06243F; font-size: 18px; line-height: 24px; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
.ml-h4-seul { margin-top: 10px; font-size: 20px; line-height: 26px; }
.ml-suite { margin: 0; }
.ml-actions { margin-top: 6px; align-items: center; }

/* Liste « libellé : valeur » : carte blanche, libellé au-dessus en mobile, 35 / 65 à partir de 768 px. */
.ml-liste { margin: 4px 0 0; padding: 4px 0; border-radius: 24px; background-color: #FFFFFF; box-shadow: inset 0 0 0 1px #DCE6F7, 0 30px 60px -48px rgba(47, 95, 208, 0.5); }
.ml-ligne { display: grid; gap: 2px; padding: 14px 20px; }
.ml-ligne + .ml-ligne { border-top: 1px solid #DCE6F7; }
.ml-libelle { color: #40536A; font-size: 15px; line-height: 22px; font-weight: 700; }
.ml-valeur { margin: 0; min-width: 0; color: #06243F; font-size: 17px; line-height: 27px; overflow-wrap: anywhere; }

/* L'essentiel : encadré lumineux à filet bleu à gauche. */
.ml-essentiel { display: grid; gap: 16px; max-width: 46rem; padding: 26px 28px; border-radius: 30px; background-image: linear-gradient(135deg, #FFFFFF, #EEF4FF); box-shadow: inset 4px 0 0 #2F5FD0, inset 0 0 0 1px #DCE6F7, 0 40px 80px -56px rgba(47, 95, 208, 0.6); }
.ml-essentiel-titre { display: flex; align-items: center; gap: 12px; }
.ml-essentiel-liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ml-essentiel-liste > li { color: #40536A; font-size: 16px; line-height: 26px; }

/* Puces : point bleu lumineux du design validé. */
.ml-puces { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ml-puces > li { position: relative; min-width: 0; padding-left: 24px; color: #40536A; font-size: 17px; line-height: 28px; }
.ml-puces > li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 8px; height: 8px; border-radius: 999px; background-color: #2F5FD0; box-shadow: 0 0 10px rgba(47, 95, 208, 0.6); }

/* Fiches empilées (données, finalités, durées, cookies). */
.ml-fiches { display: grid; gap: 12px; margin: 4px 0 0; }
.ml-fiche { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 18px 20px; border-radius: 22px; background-color: #F5F8FF; box-shadow: inset 0 0 0 1px #DCE6F7; }
.ml-fiche .ml-p { font-size: 16px; line-height: 25px; }

.ml-voir { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }

@media screen and (min-width: 768px) {
  .ml-ligne { grid-template-columns: 35% minmax(0, 1fr); gap: 20px; align-items: start; }
  .ml-libelle { padding-top: 3px; }
  /* Fiches en deux colonnes : une dernière fiche seule prend toute la rangée (05/11). */
  .ml-fiche:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .ml-sommaire-liste { display: block; columns: 2; column-gap: 12px; }
  .ml-sommaire-liste > li { break-inside: avoid; }
  .ml-fiches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-puces.ml-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}
/* À partir de 1 280 px : sommaire collant dans une colonne à gauche, texte dans la colonne de contenu.
   05/11/2026 (demande du client : occuper la largeur, moins resserré) : la colonne de contenu prend les trois quarts
   du conteneur (66rem au plus) ; tableaux, fiches (2 par rangée), puces en deux colonnes et « L'essentiel » en occupent
   toute la largeur ; les paragraphes restent à 50rem au plus pour la lecture. */
@media screen and (min-width: 1280px) {
  .ml-cadre { grid-template-columns: minmax(296px, 1fr) minmax(0, 3fr); grid-template-areas: "som tete" "som corps"; column-gap: 80px; row-gap: 44px; align-items: start; }
  .ml-tete, .ml-contenu, .ml-essentiel { max-width: 66rem; }
  .ml-p, .ml-puces:not(.ml-deux) > li { max-width: 50rem; }
  .ml-fiche .ml-p { max-width: none; }
  .ml-fiches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-puces.ml-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .ml-cadre-politique { grid-template-areas: "som tete" "som essentiel" "som corps"; }
  .ml-tete { grid-area: tete; }
  .ml-essentiel { grid-area: essentiel; }
  .ml-contenu { grid-area: corps; }
  .ml-sommaire { grid-area: som; position: sticky; top: var(--sous-entete, 24px); } /* 05/11 : sous l'en-tête fixe */
  .ml-essentiel-liste { display: block; columns: 2; column-gap: 32px; }
  .ml-essentiel-liste > li { break-inside: avoid; margin-bottom: 14px; }
  .ml-essentiel-liste > li:last-child { margin-bottom: 0; }
  .ml-etroit { display: none; }
}
@media screen and (max-width: 991px) {
  .ml-sommaire-lien { scroll-margin-bottom: 130px; }
}
@media screen and (max-width: 767px) {
  .ml-partie { padding-top: 40px; }
  .ml-politique { margin-top: 64px; padding-top: 64px; padding-bottom: 80px; border-radius: 32px 32px 0 0; }
  .ml-cadre { gap: 28px; }
  .ml-h3 { font-size: 25px; line-height: 31px; }
  .ml-bloc + .ml-bloc { margin-top: 36px; padding-top: 36px; }
  .ml-essentiel { padding: 22px 20px; border-radius: 24px; }
  .ml-ligne { padding: 12px 16px; }
  .ml-fiche { padding: 16px 18px; border-radius: 20px; }
  .ml-parties .bouton { white-space: normal; text-align: left; }
}
/* realisations.mjs */

.re-diam { white-space: nowrap; }
.re-abbr { text-decoration: none; }

/* Liste : cartes chantier */
.re-liste-sec, .re-activites-sec, .re-autres-sec { padding-top: 104px; padding-bottom: 24px; }
.re-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.re-carte { display: flex; flex-direction: column; gap: 16px; padding: 12px 12px 20px; border-radius: 28px; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #DCE6F7, 0 30px 60px -40px rgba(47, 95, 208, 0.45); }
.re-carte:hover, .re-carte:focus-within { box-shadow: 0 0 0 2px #2F5FD0, 0 30px 60px -40px rgba(47, 95, 208, 0.45); }
/* Vignette claire : le symbole du chantier en tuile « grand », en attendant la photo. */
.re-visuel { position: relative; overflow: hidden; border-radius: 20px; }
/* 06/11 (vérification, R07) : hauteur bornée au lieu du 16/9 (cadre presque vide autour du symbole de 96 px). Revenir au
   16/9 quand les photos des chantiers arriveront. */
.re-vignette { display: grid; place-items: center; aspect-ratio: auto; height: clamp(136px, 11vw, 176px); padding: 20px; background-image: radial-gradient(70% 90% at 50% 40%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, #F5F8FF, #E6EEFF); box-shadow: inset 0 0 0 1px #DCE6F7; }
.re-carte-corps { display: grid; align-content: start; gap: 10px; padding: 0 8px; }
.re-carte-titre { margin: 0; color: #06243F; font-size: 21px; line-height: 27px; font-weight: 800; letter-spacing: -0.015em; }
.re-carte-lien { color: #06243F; text-decoration: none; }
.re-carte-lien:hover { color: #2F5FD0; text-decoration: underline; text-underline-offset: 4px; }
.re-carte-lien:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 3px; border-radius: 6px; }
.re-faits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); margin: auto 8px 0; }
.re-faits dt, .re-faits dd { margin: 0; padding: 9px 0; border-top: 1px solid #DCE6F7; font-size: 14px; line-height: 20px; }
.re-faits dt { padding-right: 12px; color: #5D7088; font-weight: 600; }
.re-faits dd { color: #06243F; font-weight: 700; }
.re-cartes-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* « Autres réalisations » : carte compacte sans vignette, titre-lien seulement. */
.re-carte-compacte { gap: 12px; padding: 24px 22px 26px; }
.re-carte-compacte .re-carte-corps { padding: 0; }

/* Liste : réalisations par activité, symbole de rubrique (tuile « grand ») à gauche du texte */
.re-activites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.re-activite { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; align-content: start; gap: 24px; padding: 28px; border-radius: 28px; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #DCE6F7, 0 30px 60px -40px rgba(47, 95, 208, 0.45); }
.re-activite-texte { display: grid; align-content: start; gap: 12px; }
.re-activite-titre { margin: 0; color: #06243F; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.02em; }
.re-activite-p { margin: 0; color: #40536A; font-size: 16px; line-height: 25px; }
.re-compte { margin: 0; color: #06243F; font-size: 16px; line-height: 24px; font-weight: 700; }
.re-activite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 4px 0 0; }
/* Réalisations par activité (04/11) : photo de chantier à gauche, les deux cartes empilées à droite. */
.re-activites-cadre { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; margin-top: 32px; }
.re-activites-cadre > .re-activites { grid-template-columns: minmax(0, 1fr); margin: 0; }
/* 06/11 : cadre d'illustration des cartes « Trois métiers » de l'accueil, à gauche du texte, sur toute la hauteur de la
   carte ; au-dessus du texte sous 992 px. */
.re-activite.re-activite-metier { grid-template-columns: minmax(200px, 2fr) minmax(0, 3fr); align-items: stretch; }
.re-activite .re-activite-illu { height: auto; min-height: 152px; margin: 0; }
@media screen and (max-width: 991px) {
  .re-activite.re-activite-metier { grid-template-columns: minmax(0, 1fr); }
  .re-activite .re-activite-illu { min-height: 136px; }
}
.re-figure { display: grid; grid-template-rows: minmax(0, 1fr); margin: 0; }
.cote-photo.re-figure-photo { aspect-ratio: auto; min-height: 320px; }
/* Image posée en absolu : la hauteur naturelle de la photo portrait n'allonge pas les cartes voisines. */
.re-figure-photo .photo-img { position: absolute; top: 0; left: 0; object-position: 50% 40%; }

/* Bandeau d'appel final des 4 pages Réalisations, sans image (arbitrages B1) : bleu nuit et halos du haut des fiches. */
.appel.re-appel { min-height: 0; overflow: hidden; background-color: #06243F; background-image: radial-gradient(60% 90% at 100% 0%, rgba(47, 95, 208, 0.7), rgba(47, 95, 208, 0) 70%), radial-gradient(55% 80% at 0% 100%, rgba(127, 160, 230, 0.3), rgba(127, 160, 230, 0) 70%); }
.re-appel .appel-in { padding-top: 104px; padding-bottom: 104px; }

/* Fiche : haut de page sans photo, bleu nuit lumineux, trajectoire de forage décorative */
.ouverture.re-ouverture { min-height: 0; overflow: hidden; background-color: #06243F; background-image: radial-gradient(70% 90% at 95% 0%, rgba(47, 95, 208, 0.7), rgba(47, 95, 208, 0) 70%), radial-gradient(60% 70% at 0% 100%, rgba(127, 160, 230, 0.28), rgba(127, 160, 230, 0) 70%); }
.re-trajet { position: absolute; left: 0; right: 0; bottom: 16px; height: 96px; border-bottom: 2px dashed rgba(169, 203, 255, 0.4); border-radius: 50%; pointer-events: none; }
.re-trajet::after { content: ""; position: absolute; left: calc(50% - 6px); bottom: -7px; width: 12px; height: 12px; border-radius: 999px; background-color: #A9CBFF; box-shadow: 0 0 18px rgba(169, 203, 255, 0.95); }
.ouverture-in.re-ouverture-in { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 72px; }
.re-tete { display: grid; align-content: end; gap: 18px; }
.titre-page.re-titre-fiche { max-width: 20ch; font-size: 54px; line-height: 58px; }
.re-bref { display: grid; align-content: start; gap: 16px; padding: 26px; border-radius: 28px; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 60px -10px rgba(169, 203, 255, 0.35), 0 40px 80px -40px rgba(6, 36, 63, 0.8); color: #06243F; }
.re-bref-titre { margin: 0; font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.015em; }
.re-bref-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; margin: 0; }
.re-bref-paire { display: grid; align-content: start; gap: 2px; padding: 10px 0; border-top: 1px solid #DCE6F7; }
/* 06/11 (vérification, R16) : 14 px au lieu de 13. */
.re-bref-paire dt { color: #5D7088; font-size: 14px; line-height: 20px; font-weight: 600; }
.re-bref-paire dd { margin: 0; color: #06243F; font-size: 16px; line-height: 23px; font-weight: 700; }
.re-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.re-chiffre { display: grid; align-content: start; gap: 4px; padding: 14px; border-radius: 18px; background-color: #EEF4FF; }
.re-chiffre-valeur { color: #2F5FD0; font-size: 26px; line-height: 32px; font-weight: 800; letter-spacing: -0.02em; }
.re-chiffre-libelle { color: #40536A; font-size: 14px; line-height: 20px; }

/* Fiche : contraintes, moyens, résultats */
.re-detail-sec { padding-top: 72px; padding-bottom: 24px; }
.re-blocs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.re-blocs.re-blocs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 06/11 (vérification) : un seul bloc restant occupe la ligne. */
.re-blocs.re-blocs-1 { grid-template-columns: minmax(0, 1fr); }
.re-bloc { display: grid; align-content: start; gap: 16px; padding: 26px; border-radius: 28px; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #DCE6F7, 0 30px 60px -40px rgba(47, 95, 208, 0.45); }
.re-bloc-titre { margin: 0; color: #06243F; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.02em; }
/* 06/11 (vérification, R15) : lignes de 90 signes au plus quand le bloc prend toute la largeur (768 px). */
.re-puces { display: grid; gap: 12px; max-width: 38rem; margin: 0; padding: 0; list-style: none; }
.re-puce { position: relative; padding-left: 24px; color: #40536A; font-size: 16px; line-height: 25px; }
/* 05/11 : puce ronde et lumineuse (celle du site, .point) au lieu d'un tiret. */
.re-puce::before { content: ""; position: absolute; left: 3px; top: 9px; width: 8px; height: 8px; border-radius: 999px; background-color: #2F5FD0; box-shadow: 0 0 10px rgba(47, 95, 208, 0.8); }
.re-puces-coches .re-puce { padding-left: 34px; }
.re-puces-coches .re-puce::before { content: ""; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 999px; background-color: #2F5FD0; box-shadow: 0 6px 14px -6px rgba(47, 95, 208, 0.8); }
.re-puces-coches .re-puce::after { content: ""; position: absolute; left: 8px; top: 7px; width: 6px; height: 10px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Fiche : conducteur de travaux et activité associée */
.re-duo-sec { padding-top: 16px; padding-bottom: 24px; }
.re-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.re-personne { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 20px; }
/* 06/11 : portrait du conducteur (même photo que sur /entreprise). */
.re-portrait { display: block; width: 96px; height: 96px; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4px #DCE6F7, 0 16px 30px -14px rgba(6, 36, 63, 0.5); }
.re-initiales { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 999px; background-image: radial-gradient(circle at 30% 25%, #7FA0E6, #2F5FD0 55%, #06243F); box-shadow: 0 16px 30px -14px rgba(47, 95, 208, 0.8); color: #FFFFFF; font-size: 30px; line-height: 30px; font-weight: 800; letter-spacing: 0.02em; }
.re-personne-texte { display: grid; justify-items: start; gap: 6px; }
.re-personne-nom { margin: 0; color: #06243F; font-size: 20px; line-height: 26px; }
.re-personne-fonction { margin: 0; color: #40536A; font-size: 16px; line-height: 24px; }
.re-liens { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.re-lien { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 12px 18px; border-radius: 18px; background-color: #FFFFFF; box-shadow: inset 0 0 0 1px #DCE6F7; color: #06243F; font-size: 16px; line-height: 24px; font-weight: 700; text-decoration: none; }
.re-lien:hover { color: #2F5FD0; box-shadow: inset 0 0 0 2px #2F5FD0; }
.re-lien:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 3px; }
.re-lien-texte { display: grid; gap: 2px; }
.re-lien-fleche { flex: none; color: #2F5FD0; }

@media screen and (min-width: 1280px) {
  .ouverture-in.re-ouverture-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; column-gap: 56px; }
}
@media screen and (max-width: 1279px) {
  .re-activite { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px; }
  .re-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media screen and (max-width: 991px) {
  .re-liste-sec, .re-activites-sec, .re-autres-sec { padding-top: 72px; }
  .re-activites-cadre { grid-template-columns: minmax(0, 1fr); }
  .cote-photo.re-figure-photo { aspect-ratio: 16 / 9; min-height: 0; }
  .re-cartes-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .re-appel .appel-in { padding-top: 80px; padding-bottom: 80px; }
  .titre-page.re-titre-fiche { font-size: 44px; line-height: 48px; }
  .re-detail-sec { padding-top: 56px; }
  .re-blocs, .re-blocs.re-blocs-2, .re-duo { grid-template-columns: 1fr; }
  .re-liens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tablette : la 3e carte occupe toute la largeur, visuel à gauche et texte à droite (fiche § 3.A section 2). */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .re-cartes-liste .re-carte:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; align-items: start; column-gap: 20px; row-gap: 16px; }
  /* 06/11 (vérification, R07) : height: auto, pour que le visuel reste étiré sur la hauteur de la carte. */
  .re-cartes-liste .re-carte:nth-child(3) .re-visuel { grid-row: 1 / span 2; align-self: stretch; aspect-ratio: auto; height: auto; min-height: 180px; }
  .re-cartes-liste .re-carte:nth-child(3) .re-faits { align-self: end; margin-top: 0; }
}
@media screen and (max-width: 767px) {
  .re-cartes, .re-cartes-liste, .re-cartes-duo, .re-activites { grid-template-columns: 1fr; }
  .re-activite { padding: 22px 20px; }
  .cote-photo.re-figure-photo { aspect-ratio: 4 / 3; }
  .re-appel .appel-in { padding-top: 72px; padding-bottom: 72px; }
  .titre-page.re-titre-fiche { font-size: 34px; line-height: 40px; }
  .re-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .re-liens { grid-template-columns: 1fr; }
  .re-bloc { padding: 22px 20px; }
}
@media screen and (max-width: 479px) {
  .re-bref { padding: 20px 18px; }
  .re-bref-liste { grid-template-columns: 1fr; }
  .re-chiffre { padding: 12px; }
  .re-chiffre-valeur { font-size: 22px; line-height: 28px; }
  .re-personne { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .re-initiales { width: 72px; height: 72px; font-size: 24px; line-height: 24px; }
  .re-portrait { width: 72px; height: 72px; }
}



/* travaux-speciaux.mjs */
/* Section 2 : texte et figure alignés en haut (fiche § 3.2) ; 05/11 : centrés en hauteur (plus bas, sections 2 et 4). */
.cote.ts-approche { align-items: start; }
.ts-figure { margin: 0; }
/* Photo portrait de la section 2 : 4:3 à partir de 992 px, à la hauteur du texte voisin. */
@media screen and (min-width: 992px) {
  /* 06/11 (« des sections moins grosses ») : 4:3 au lieu du carré. */
  .ts-approche .reseaux-photo { aspect-ratio: 4 / 3; }
}
/* 06/11 (vérification) : photo trop haute à côté d'un texte court. Section 2 : réduite à ses deux phrases, le cadre
   prend la hauteur de la colonne de texte (280 px au moins) au lieu du 4:3 ; l'image, posée en absolu, ne l'allonge pas,
   et le cadrage garde la machine verte et le haut du fourreau. Tablette (768 à 991 px) : photo au format paysage au lieu
   du 4:3 pleine largeur (728 x 546 px), qui rendait la section plus haute qu'au téléphone. */
@media screen and (min-width: 992px) {
  .ts-approche > .ts-figure { align-self: stretch; grid-template-rows: minmax(0, 1fr); }
  .ts-approche .reseaux-photo { aspect-ratio: auto; height: 100%; min-height: 280px; }
  .ts-approche .reseaux-photo > .photo-img { position: absolute; top: 0; left: 0; object-position: 50% 35%; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  /* 06/11 (rythme, critique du directeur artistique) : 2:1 au lieu du 16:9 (728 x 364 px au lieu de 410) : la section
     redescend sous sa hauteur au téléphone ; cadrage sur la machine verte et le haut du fourreau. */
  .ts-approche .reseaux-photo { aspect-ratio: 2 / 1; }
  .ts-approche .reseaux-photo > .photo-img { object-position: 50% 35%; }
}
/* Section 3 : trois cartes en verre clair, non cliquables, symbole décoratif de la famille (tuile 64 px). */
.ts-situations-sec { padding-top: 104px; padding-bottom: 24px; }
/* 06/11 (rythme) : rangée de trois cartes basses sur toute la largeur du conteneur, symbole à gauche du titre (à partir
   de 992 px) ; tablette : trois cartes côte à côte, symbole au-dessus du titre ; téléphone : l'une sous l'autre. Plus
   de photo dans la section. Écarts de la règle commune des grilles de cartes (24 px, 40 px sous le titre) à 1 280 px. */
.ts-situations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.ts-situation { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; column-gap: 18px; padding: 22px; border-radius: 24px; background-image: linear-gradient(180deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #DCE6F7, 0 30px 60px -40px rgba(47, 95, 208, 0.45); }
.ts-situation-titre { margin: 0; color: #06243F; font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; }
@media screen and (min-width: 1280px) {
  .ts-situations { gap: 24px; margin-top: 40px; }
  .ts-situation { column-gap: 20px; padding: 24px 28px 24px 24px; }
  .ts-situation-titre { font-size: 21px; line-height: 27px; }
  /* 06/11 (rythme, critique du directeur artistique) : à 1 440 et 1 920 px, deux titres tenaient sur une ligne et le
     troisième sur deux ; largeur bornée pour que les trois passent sur deux lignes, comme à 1 280 px (244 px). */
  .ts-situation-titre { max-width: 250px; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .ts-situation { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; row-gap: 16px; padding: 20px; }
}
/* 06/11 (rythme) : section 4 dans un panneau clair arrondi (dégradé de l'ancienne carte des questions fréquentes), titre
   et puces à gauche, plans incrustés à droite (7 et 5 colonnes) à partir de 768 px, à la hauteur du texte ; au
   téléphone, plans en bandeau sous le texte, dans le panneau. L'image, posée en absolu, n'allonge pas le panneau. */
.ts-demarche { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 28px; background-color: #FFFFFF; background-image: radial-gradient(60% 140% at 0% 0%, #DCE6F7 0%, rgba(220, 230, 247, 0) 70%), linear-gradient(135deg, #FFFFFF, #F5F8FF); box-shadow: 0 0 0 1px #DCE6F7, 0 40px 80px -50px rgba(47, 95, 208, 0.55); }
.ts-demarche-corps { display: grid; align-content: center; gap: 18px; padding: 26px 22px 24px; }
.ts-demarche-visuel { display: block; aspect-ratio: 16 / 9; margin: 0 10px 10px; border-radius: 20px; }
.ts-demarche-visuel > .photo-img { position: absolute; top: 0; left: 0; }
/* 06/11 (rythme, critique du directeur artistique) : à partir de 768 px, panneau inversé, plans incrustés à gauche (5
   colonnes) et texte à droite (7 colonnes), par order: -1 sans toucher à l'ordre du code ; halo déplacé à droite,
   derrière le texte ; marges et retraits du texte retournés. Le téléphone ne change pas. */
@media screen and (min-width: 768px) {
  .ts-demarche { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background-image: radial-gradient(60% 140% at 100% 0%, #DCE6F7 0%, rgba(220, 230, 247, 0) 70%), linear-gradient(225deg, #FFFFFF, #F5F8FF); }
  .ts-demarche-corps { padding: 36px 36px 36px 28px; }
  .ts-demarche-visuel { order: -1; aspect-ratio: auto; min-height: 240px; margin: 12px 0 12px 12px; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .ts-demarche .titre-section { font-size: 34px; line-height: 40px; }
}
@media screen and (min-width: 992px) {
  .ts-demarche-corps { padding: 44px 48px 44px 40px; }
  .ts-demarche-visuel { min-height: 260px; margin: 14px 0 14px 14px; border-radius: 22px; }
}
@media screen and (min-width: 1280px) {
  .ts-demarche-corps { gap: 22px; padding: 52px 60px 52px 48px; }
}
/* Liste à puces bleues de la section 4. */
.ts-liste { display: grid; gap: 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.ts-liste-item { display: flex; align-items: baseline; gap: 12px; color: #40536A; font-size: 17px; line-height: 28px; }
.ts-liste-item .point { position: relative; top: -3px; }
/* Sections 5 et 8 (06/11, « duplique ce schéma ») : cartes de l'accueil (carte ac-carte-sym, ac-metier-illu) côte à
   côte sur toute la largeur du conteneur ; dessous, la carte claire des questions fréquentes, le lien sous le titre. */
.ts-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ts-metier .carte-in { grid-template-rows: none; }
.ts-metier .carte-titre { text-wrap: balance; }
.ts-metier-liste { margin: 2px 0 0; }
.ts-faq-sec { padding-top: 16px; }
.ts-carte { display: grid; align-content: start; gap: 14px; padding: 40px 44px; border-radius: 28px; box-shadow: 0 0 0 1px #DCE6F7, 0 40px 80px -50px rgba(47, 95, 208, 0.55); }
.ts-faq { background-image: radial-gradient(60% 140% at 0% 0%, #DCE6F7 0%, rgba(220, 230, 247, 0) 70%), linear-gradient(135deg, #FFFFFF, #F5F8FF); }
.ts-faq-lien { margin: 0; }
@media screen and (min-width: 1280px) {
  .ts-duo { gap: 24px; }
  .ts-faq-sec { padding-top: 24px; }
}
/* 05/11 : avec le conteneur élargi, la photo de la section 2 est plus haute que le texte voisin ; le texte se centre en
   hauteur à côté d'elle au lieu de laisser tout le blanc dessous. 06/11 (rythme) : la section 4 n'est plus en .cote. */
@media screen and (min-width: 992px) {
  .cote.ts-approche { align-items: center; }
}
@media screen and (max-width: 991px) {
  .ts-situations-sec { padding-top: 72px; }
  .ts-duo { grid-template-columns: 1fr; }
  .ts-faq-sec { padding-top: 12px; }
}
@media screen and (max-width: 767px) {
  /* 06/11 (rythme) : au téléphone, les trois situations l'une sous l'autre, symbole à gauche du titre ; titre du panneau
     de la démarche à la taille des titres d'encadré (28 px) : deux lignes à 375 px au lieu de trois. */
  .ts-situations { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ts-situation { column-gap: 16px; padding: 16px 18px 16px 16px; }
  .ts-demarche .titre-section { font-size: 28px; line-height: 34px; }
  .ts-carte { padding: 24px 20px 26px 22px; border-radius: 24px; }
}
/* utilitaires.mjs */
.actions-simples { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ut-insecable { white-space: nowrap; }
.rubriques-sec { padding-top: 24px; padding-bottom: 96px; }
.rubriques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.rubrique { display: grid; align-content: start; gap: 6px; height: 100%; padding: 22px; border-radius: 24px; background-color: #F5F8FF; color: #06243F; text-decoration: none; box-shadow: inset 0 0 0 1px #DCE6F7; }
.rubrique:hover { box-shadow: inset 0 0 0 2px #2F5FD0; }
.rubrique:focus-visible { outline: 3px solid #2F5FD0; outline-offset: 3px; }
.rubrique-titre { margin: 0; font-size: 20px; line-height: 26px; font-weight: 800; }
.rubrique-texte { margin: 0; color: #40536A; font-size: 15px; line-height: 23px; }
@media screen and (max-width: 991px) { .rubriques { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 479px) { .rubriques { grid-template-columns: 1fr; } }