/* Feuille de style du site 7000.fr — charte S7PT MILLE (entrée hub-7000 « Charte graphique 7000 »).
   Chargée par le site public ET par l'aperçu de l'éditeur : ce que l'on voit en éditant est ce qui
   est publié.
   Style sheet of 7000.fr — loaded by the public site AND the editor preview: what you see while
   editing is what gets published.
   Règles de charte tenues ici : ni dégradé, ni rouge sur noir, ni noir sur rouge, texte jamais
   justifié, titres en Open Sans Condensed ExtraBold capitales, corps Open Sans interligne 1,6. */
@import url("/polices/polices.css");

:root {
  --rouge: #FF0700; --blanc: #FFFFFF; --noir: #000000;
  --bleu: #0089C9; --orange: #FF6700; --orange-clair: #FF7837; --bleu-vert: #005B5E; --vert-poker: #005E00;
  --gris-clair: #F0F0F0; --gris-neutre: #A3A3A3; --gris-fonce: #606060;
  --police: "Open Sans", system-ui, sans-serif;
  --marge: clamp(20px, 5vw, 72px);
  --largeur: 1412px; /* 1268 px de contenu à 1440 (x = 86 → 1354, comme l'ancien site) / 1268 px of content at 1440 */
  --bloc: clamp(48px, 5.5vw, 80px); /* ≈ 80 px à 1440 : blancs de section de l'ancien / old-site section spacing */
  --rayon: 0px;
  --duree: .5s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; font-family: var(--police); font-weight: 400; font-size: 16px;
  line-height: 1.6; color: var(--noir); background: var(--blanc); text-align: left;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, picture, iframe { display: block; max-width: 100%; }
picture img { width: 100%; height: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }

/* ---------- Typographie de charte ---------- */
.titre-geant, .titre-section, .petit-titre, .accroche-texte, .surtitre, .bouton, .nav a, .chiffre-valeur, .chrono-date {
  font-stretch: 75%; font-weight: 800;
}
.titre-geant { font-size: clamp(44px, 8.2vw, 148px); line-height: .92; text-transform: uppercase; letter-spacing: 0; white-space: pre-line; }
.titre-section { font-size: clamp(34px, 4.6vw, 78px); line-height: 1; text-transform: uppercase; margin-bottom: .45em; }
.petit-titre { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.15; text-transform: uppercase; margin: 0 0 .4em; }
.surtitre { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--rouge); margin-bottom: 1.1em; }
.intro { font-size: 16px; max-width: 34em; }
.accroche-texte { text-transform: uppercase; white-space: pre-line; margin: 0; line-height: .86; }
.accroche-grande .accroche-texte { font-size: clamp(48px, 8vw, 132px); }
.accroche-geante .accroche-texte { font-size: clamp(56px, 13vw, 230px); line-height: .82; }
.riche > *:last-child { margin-bottom: 0; }
.riche h1, .riche h2 { font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: 1.6em; line-height: 1.05; margin: 1.2em 0 .5em; }
.riche h3 { font-stretch: 75%; font-weight: 800; font-size: 1.2em; margin: 1em 0 .4em; }
.riche a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* noir souligné comme l'ancien / black underlined as on the old site */
.fond-noir .riche a, .fond-rouge .riche a { color: inherit; }
.riche ul { padding-left: 1.2em; }

/* ---------- Mise en page ---------- */
.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
.etroit { max-width: 900px; }
.bloc { padding: var(--bloc) 0; position: relative; }
.align-centre { text-align: center; }
.align-centre .intro, .align-centre .etroit { margin-left: auto; margin-right: auto; }
.grille { display: grid; gap: clamp(24px, 3vw, 48px); }
.grille-1 { grid-template-columns: 1fr; }
.grille-2 { display: grid; gap: clamp(32px, 5vw, 96px); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.grille.grille-2 { align-items: start; }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; } }

/* Fonds : seules les combinaisons de la p. 18 du guide. / Backgrounds: only page-18 combinations. */
.fond-blanc { background: var(--blanc); color: var(--noir); }
.fond-gris { background: var(--gris-clair); color: var(--noir); }
.fond-noir { background: var(--noir); color: var(--blanc); }
.fond-noir .surtitre { color: var(--gris-neutre); } /* pas de rouge sur noir / no red on black */
.fond-rouge { background: var(--rouge); color: var(--blanc); }
.fond-rouge .surtitre { color: var(--blanc); }
.page-noir { background: var(--noir); color: var(--blanc); }

.img-vide { background: var(--gris-clair); aspect-ratio: 16 / 10; width: 100%; }
.fond-noir .img-vide { background: var(--gris-fonce); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em; margin-top: 1.4em; padding: .4em 1.6em; font-size: 20px; letter-spacing: 0;
  min-width: min(270px, 100%); min-height: 58px; border-radius: 6px; /* boutons Wix d'origine : ≈ 270 × 58, coins de 6 px / original Wix buttons */
  text-transform: uppercase; text-decoration: none; border: 2px solid currentColor; cursor: pointer; transition: transform .2s, background .2s, color .2s;
}
.bouton::after { content: "→"; font-stretch: 100%; transition: transform .2s; }
.bouton:hover::after { transform: translateX(4px); }
.bouton-plein { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.bouton-plein:hover { background: var(--noir); border-color: var(--noir); }
.fond-noir .bouton-plein:hover, .heros .bouton-plein:hover { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.bouton-contour { background: transparent; }
.bouton-blanc { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.fond-rouge .bouton-blanc:hover { background: transparent; color: var(--blanc); }
.fond-noir .bouton-blanc:hover { background: transparent; color: var(--blanc); }

/* ---------- En-tête ---------- */
.entete { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s, color .3s, box-shadow .3s; color: var(--noir); background: var(--blanc); }
.entete-interieur { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; }
.avec-heros .entete:not(.entete-pleine) { background: transparent; color: var(--blanc); }
.entete-pleine { box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.logo { display: block; height: 44px; }
.logo img { height: 100%; width: auto; }
.logo .logo-blanc { display: none; }
.avec-heros .entete:not(.entete-pleine) .logo-noir { display: none; }
.avec-heros .entete:not(.entete-pleine) .logo-blanc { display: block; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); }
.nav a { text-decoration: none; text-transform: uppercase; letter-spacing: .06em; font-size: 17px; position: relative; padding: 6px 0; }
.nav a:not(.bouton)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav a:not(.bouton):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .bouton { margin: 0; padding: .55em 1.1em; font-size: 15px; }
.langues { display: flex; gap: 8px; font-size: 14px; font-weight: 700; }
.langues a { text-decoration: none; opacity: .55; }
.langues a[aria-current="true"] { opacity: 1; }
.burger { display: none; background: none; border: 0; color: inherit; width: 44px; height: 44px; cursor: pointer; padding: 10px; }
.burger span { display: block; height: 2px; background: currentColor; margin: 6px 0; transition: transform .25s, opacity .25s; }
@media (max-width: 900px) {
  .burger { display: block; }
  .nav { position: fixed; inset: 84px 0 0 0; background: var(--noir); color: var(--blanc); flex-direction: column; align-items: flex-start;
    padding: 40px var(--marge); gap: 22px; transform: translateX(100%); transition: transform .35s; }
  .nav a { font-size: 34px; }
  .menu-ouvert .nav { transform: none; }
  .menu-ouvert .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-ouvert .burger span:nth-child(2) { opacity: 0; }
  .menu-ouvert .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
main { padding-top: 84px; }
.avec-heros main { padding-top: 0; }

/* ---------- Bandeau d'accueil ---------- */
.heros { padding: 0; color: var(--blanc); background: var(--noir); display: flex; align-items: flex-end; overflow: hidden; }
.heros-ecran { min-height: 100svh; } .heros-grande { min-height: 82svh; } .heros-moyenne { min-height: 56svh; }
.heros-fond, .heros-fond picture, .heros-fond > img, .heros-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heros-fond img { object-fit: cover; }
.heros-voile { position: absolute; inset: 0; background: var(--noir); } /* aplat, jamais de dégradé / flat, never a gradient */
.heros-contenu { position: relative; padding-top: 140px; padding-bottom: clamp(48px, 8vw, 120px); }
.heros .surtitre { color: var(--blanc); }
.heros-texte { font-size: clamp(18px, 1.5vw, 24px); max-width: 46ch; margin-top: 1.2em; white-space: pre-line; }
.heros-texte + .heros-texte { margin-top: .8em; }
.heros.align-centre { justify-content: center; }

/* ---------- Colonnes, chiffres, cartes ---------- */
.colonne { text-decoration: none; display: block; } /* sans filet : l'ancien n'en avait pas / no rule, as on the old site */
.colonne p { white-space: pre-line; }
.colonne-lien { display: inline-block; margin-top: 10px; font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid currentColor; }
.colonne-image { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 18px; }
.colonne-image img { height: 100%; object-fit: cover; }
.chiffre-valeur { font-size: clamp(48px, 5.6vw, 81px); line-height: 1.2; margin: 0 0 .1em; } /* 81 px à 1440 comme l'ancien / as on the old site */
.fond-blanc .chiffre-valeur, .fond-gris .chiffre-valeur { color: var(--rouge); }
.chiffre-libelle { font-weight: 700; margin-bottom: .2em; }
.chiffre-detail { opacity: .7; font-size: .9em; }
.carte { display: block; text-decoration: none; position: relative; overflow: hidden; background: var(--noir); color: var(--blanc); aspect-ratio: 4 / 5; }
.carte-image, .carte-image img, .carte > .img-vide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.carte-image img { transition: transform var(--duree) cubic-bezier(.2,.7,.2,1), opacity var(--duree); }
a.carte:hover .carte-image img { transform: scale(1.06); opacity: .75; }
.carte-texte { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; background: rgba(0,0,0,.55); }
.carte-texte p { margin: 0; font-size: .9em; }
a.carte .petit-titre::after { content: " →"; }

/* ---------- Galerie ---------- */
.galerie-images { display: grid; gap: 12px; }
.galerie-grille .galerie-images { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galerie-grille .galerie-photo img { aspect-ratio: 1; object-fit: cover; }
.galerie-mosaique .galerie-images { columns: 3 280px; display: block; column-gap: 12px; }
.galerie-mosaique .galerie-photo { break-inside: avoid; margin: 0 0 12px; }
.galerie-bandeau .galerie-images { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--marge); scrollbar-width: thin; }
.galerie-bandeau .galerie-photo { flex: 0 0 min(80vw, 560px); scroll-snap-align: start; }
.galerie-bandeau .galerie-photo img { aspect-ratio: 3 / 2; object-fit: cover; }
.galerie-photo { margin: 0; overflow: hidden; cursor: zoom-in; }
.galerie-photo figcaption { font-size: 14px; padding-top: 8px; opacity: .8; }
@media (max-width: 680px) { .galerie-grille .galerie-images { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.visionneuse { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.94); display: flex; align-items: center; justify-content: center; padding: 4vw; cursor: zoom-out; }
.visionneuse img { max-height: 92vh; width: auto; object-fit: contain; }

/* ---------- Logos, chronologie, équipe ---------- */
.logos-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 40px; align-items: center; }
.logo-client { display: block; height: 72px; }
.logo-client img, .logo-client picture { height: 100%; object-fit: contain; }
.logos-nb .logo-client img { filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.logos-nb .logo-client:hover img { filter: none; opacity: 1; }
.chrono-liste { list-style: none; margin: 0; padding: 0; }
.chrono-etape { display: grid; grid-template-columns: minmax(120px, 260px) 1fr; gap: clamp(20px, 4vw, 64px); padding: 40px 0; border-top: 1px solid var(--gris-neutre); }
.chrono-date { font-size: clamp(36px, 4vw, 64px); line-height: .95; color: var(--rouge); white-space: pre-line; margin: 0; }
.chrono-texte { white-space: pre-line; }
.chrono-image { margin-top: 20px; max-width: 560px; }
@media (max-width: 680px) { .chrono-etape { grid-template-columns: 1fr; gap: 8px; } }
.membre-photo { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 14px; background: var(--gris-clair); }
.membre-photo img { height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .4s; }
.membre:hover .membre-photo img { filter: none; }
.membre-role { opacity: .7; margin: 0; }

/* ---------- Citation, vidéo, appel ---------- */
.citation blockquote { margin: 0; padding-left: 28px; border-left: 6px solid var(--rouge); }
.citation blockquote p { font-stretch: 75%; font-weight: 800; font-style: italic; font-size: clamp(26px, 3vw, 44px); line-height: 1.15; white-space: pre-line; }
.citation footer { font-size: 16px; opacity: .75; }
.video-cadre { position: relative; aspect-ratio: 16 / 9; background: var(--noir); }
.video-cadre video, .video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.legende { font-size: 14px; opacity: .75; margin-top: 12px; }
.appel-grille { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; }
.appel-texte { font-size: clamp(18px, 1.5vw, 24px); }
@media (max-width: 900px) { .appel-grille { grid-template-columns: 1fr; } }

/* ---------- Contact, offre ---------- */
.coordonnees { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; margin: 28px 0 0; }
.coordonnees dt { font-stretch: 75%; font-weight: 800; text-transform: uppercase; }
.coordonnees dd { margin: 0; }
.coordonnees a { text-decoration: none; border-bottom: 2px solid var(--rouge); }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-self: start; }
.formulaire label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.formulaire .pleine, .formulaire button, .formulaire-etat { grid-column: 1 / -1; }
.formulaire input, .formulaire textarea, .formulaire select {
  font: inherit; font-size: 17px; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 14px 16px;
  border: 0; border-bottom: 2px solid var(--noir); background: var(--gris-clair); color: var(--noir); border-radius: 0;
}
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus { outline: none; border-bottom-color: var(--rouge); }
.formulaire button { justify-self: start; margin-top: 4px; }
.formulaire .piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire-etat:empty { display: none; }
@media (max-width: 680px) { .formulaire { grid-template-columns: 1fr; } }
.offre-infos { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.offre-infos li { background: var(--noir); color: var(--blanc); padding: 6px 14px; font-size: 14px; font-weight: 700; text-transform: uppercase; }

/* ---------- Section, texte-image ---------- */
.espacement-petit { padding: 40px 0; } .espacement-grand { padding: calc(var(--bloc) * 1.4) 0; }
.texte-image-image { aspect-ratio: 4 / 5; overflow: hidden; }
.texte-image-image img { height: 100%; object-fit: cover; }
.image-gauche .texte-image-image { order: -1; }
@media (max-width: 680px) { .image-gauche .texte-image-image { order: 0; } }

/* ---------- Pied ---------- */
.pied { background: var(--noir); color: var(--blanc); padding: clamp(64px, 8vw, 120px) 0 32px; }
.pied-accroche { font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 6vw, 96px); line-height: .92; margin-bottom: 56px; white-space: pre-line; }
.pied-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--gris-fonce); }
.pied h2 { font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: 15px; letter-spacing: .1em; color: var(--gris-neutre); margin-bottom: 14px; }
.pied p, .pied li { margin: 0 0 6px; } .pied ul { list-style: none; padding: 0; margin: 0; }
.pied a { text-decoration: none; } .pied a:hover { text-decoration: underline; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: 14px; color: var(--gris-neutre); }
.pied-bas nav { display: flex; flex-wrap: wrap; gap: 20px; }
.pied .symbole { width: 56px; height: 56px; }
.pied-bouton { margin-top: 18px !important; } .pied-lien { margin-top: 14px !important; font-stretch: 75%; font-weight: 800; text-transform: uppercase; }
.pied-logo img { width: 182px; height: auto; display: block; } .pied-reseaux { margin-top: 18px !important; }
@media (max-width: 900px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied-grille { grid-template-columns: 1fr; } }

/* ---------- Apparition au défilement (le script pose .visible) ---------- */
.js .bloc:not(.heros) .conteneur { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .bloc.visible .conteneur { opacity: 1; transform: none; }
.lien-evitement { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--noir); color: var(--blanc); padding: 10px 16px; }
.lien-evitement:focus { left: 8px; }
/* Vidéo pleine largeur (lecteur d'intro de l'accueil) : bord à bord, sans marges de bloc. */
.video-pleine { padding: 0; }
.video-pleine .video-cadre { max-width: none; border-radius: 0; }
.video-pleine .titre-section, .video-pleine .legende { padding: 0 var(--marge); }

/* ---------- En-tête et pied comme l'ancien site Wix (09/11) / Header and footer as on the old Wix site ---------- */
.entete, .avec-heros .entete:not(.entete-pleine) { background: var(--blanc); color: var(--noir); }
.avec-heros main { padding-top: 84px; }
.logo { display: flex; align-items: center; gap: 30px; height: 54px; }
.logo .logo-symbole { height: 54px; width: 54px; }
.logo .logo-noir { height: 38px; width: auto; display: block; }
.avec-heros .entete:not(.entete-pleine) .logo-noir { display: block; }
.entete-interieur { justify-content: flex-start; gap: 60px; }
.nav { flex: 1; gap: clamp(20px, 4vw, 70px); }
.nav a { letter-spacing: 0; font-size: 20px; font-stretch: 75%; font-weight: 800; padding: 4px 0; }
.nav a::after { background: var(--rouge) !important; }
.nav .langues { margin-left: auto; }
.pied { background: var(--blanc); color: var(--noir); padding: 0 0 40px; position: relative; }
.pied-filet { position: relative; height: 96px; display: flex; justify-content: center; align-items: flex-start; }
.pied-filet::before { content: ""; position: absolute; left: 0; right: 0; top: 54px; height: 1px; background: var(--noir); }
.pied-filet img { position: relative; width: 82px; height: 82px; margin-top: 13px; }
.pied-grille { grid-template-columns: 1fr 1fr 1fr 1fr; border-bottom: 0; padding: 32px 0 24px; align-items: start; }
.pied h2 { font-size: 22.5px; letter-spacing: 0; text-transform: none; color: var(--noir); margin-bottom: 22px; }
.pied p, .pied li { font-size: 14px; line-height: 1.6; }
.pied a { text-decoration: underline; }
/* Pied anglais d'origine : seul « Press » souligné (le français soulignait tous ses liens).
   Original English footer: only "Press" underlined (the French one underlined every link). */
html[lang="en"] .pied a { text-decoration: none; }
html[lang="en"] .pied-bas nav a:last-child { text-decoration: underline; }
.pied-bouton { margin-top: 36px !important; }
.pied-bouton .bouton { border-radius: 6px; text-decoration: none; font-size: 14px; padding: 1.1em 1.6em; }
.pied-bouton .bouton::after { content: none; }
.pied-liste { list-style: disc !important; padding-left: 22px !important; }
.pied-liste li { font-size: 12px; line-height: 1.6; margin: 0; }
.pied-reseaux { display: flex; gap: 18px; margin-top: 14px !important; margin-left: -40px !important; list-style: none; }
.pied-reseaux a { display: block; color: var(--noir); }
.pied-marque { display: flex; justify-content: flex-end; padding-top: 30px; }
.pied-logo img { width: 214px; height: auto; }
.pied-bas { color: var(--noir); border: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 12px; }
.pied-copyright { font-style: italic; font-size: 15px; }
.pied-bas nav { gap: 6px; } .pied-bas nav a { font-size: 12px; }
@media (max-width: 900px) { .pied-grille { grid-template-columns: 1fr 1fr; } .pied-bas { grid-template-columns: 1fr; } .pied-marque { justify-content: flex-start; } .entete-interieur { gap: 20px; } }
/* Largeurs de l'en-tête et du pied d'origine (1440 px : logo à 36 px du bord, pied à 86 px). */
.entete .conteneur { max-width: none; padding: 0 clamp(16px, 2.5vw, 36px); }
.pied .conteneur { max-width: var(--largeur); }
.nav a { font-size: 19px; }
@media (min-width: 901px) { .nav a { font-size: 17.6px; } } /* largeur des liens de l'ancien menu / old menu link widths */

/* ---------- Options de mise en page de l'ancien site (09/11) / Old-site layout options ---------- */
.bouton-noir { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.bouton-noir:hover { background: var(--rouge); border-color: var(--rouge); }
.align-titre-centre .titre-section, .align-titre-centre .surtitre { text-align: center; }
.texte-image-encart { position: relative; overflow: hidden; min-height: 620px; display: flex; align-items: center; }
.texte-image-encart .encart-fond, .texte-image-encart .encart-fond img, .texte-image-encart .encart-fond picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.texte-image-encart .conteneur { position: relative; display: flex; }
.texte-image-encart.image-gauche .conteneur { justify-content: flex-end; }
.texte-image-encart .encart { width: min(560px, 100%); padding: clamp(32px, 4vw, 64px); }
.texte-image-encart .encart.fond-gris { background: #a9a9a9; color: var(--blanc); }
.texte-image-encart .encart.fond-noir { background: rgba(30, 30, 30, .92); color: var(--blanc); }
.texte-image-encart .encart.fond-blanc { background: var(--blanc); color: var(--noir); }
.cartes-diaporama { position: relative; }
.diaporama-piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.diaporama-piste::-webkit-scrollbar { display: none; }
.diaporama-piste > .carte { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 7; }
.diaporama-fleches { position: absolute; inset: 50% 0 auto 0; z-index: 2; display: flex; justify-content: space-between; padding: 0 var(--marge); pointer-events: none; }
.diaporama-fleches button { pointer-events: auto; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: var(--blanc); font-size: 34px; line-height: 1; cursor: pointer; }
@media (max-width: 680px) { .diaporama-piste > .carte { aspect-ratio: 4 / 5; } .texte-image-encart { min-height: 0; } .texte-image-encart .conteneur { padding-top: 220px; } }
.heros.align-droite { justify-content: flex-end; } .heros.align-droite .heros-contenu { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.titre-heros-moyen { font-size: clamp(30px, 3.4vw, 54px); line-height: 1; text-transform: uppercase; }
.heros.align-centre .heros-contenu { text-align: center; display: flex; flex-direction: column; align-items: center; }
.colonnes-cote-grille { align-items: start; }
.colonnes-cote .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galerie-col-4 .galerie-images { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.galerie-pleine { padding: 0 var(--marge); }
.titre-section.titre-geant { font-size: clamp(44px, 8.2vw, 148px); }
/* Frise comme l'original : dates en noir, rubriques et noms en rouge. / Timeline as on the old site. */
.chrono-date { color: var(--noir); }
.chrono-texte h3 { color: var(--rouge); }
.chrono-texte strong { color: var(--rouge); }
/* Offre : rubriques en rouge avec filets, deux colonnes possibles. / Job offer: red headings with rules. */
.offre .riche h3 { color: var(--rouge); border-top: 1px solid var(--noir); padding-top: 18px; }
.offre-colonnes .offre-tete { position: sticky; top: 110px; background: var(--gris-clair); padding: clamp(24px, 3vw, 40px); }
@media (max-width: 680px) { .galerie-col-4 .galerie-images { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .offre-colonnes .offre-tete { position: static; } }

/* ---------- Troisième passe : écarts du contrôle visuel du 09/11 20:26 / Third pass ---------- */
html { overflow-x: clip; }
/* Casse telle que saisie (l'original n'imposait pas les capitales : « EFFET « Oh ! » »). */
.titre-section, .petit-titre, .bouton, .surtitre, .formulaire label { text-transform: none; }
.bouton::after, a.carte .petit-titre::after { content: none; }
.accroche-geante .accroche-texte { font-size: clamp(52px, 12.5vw, 180px); line-height: .8; } /* 180 px à 1440 comme l'ancien / as on the old site */
/* En-tête : 103 px, menu plus à droite, soulignement sur toute la case. */
.entete-interieur { height: 103px; gap: clamp(30px, 5.4vw, 78px); }
main, .avec-heros main { padding-top: 103px; }
.nav { gap: 0; }
.nav a { padding: 4px clamp(14px, 2.4vw, 34px); letter-spacing: -.01em; } /* ≈ 68 px entre deux liens à 1440 / ≈ 68 px between links */
/* Chiffres clés : noirs, centrés, légende en italique. */
.chiffre { text-align: center; }
.chiffre-valeur, .fond-blanc .chiffre-valeur, .fond-gris .chiffre-valeur { color: var(--noir); }
.chiffre-libelle { font-weight: 400; font-style: italic; font-size: 15px; }
/* Logos clients : grands, noirs, dix par ligne, sur toute la largeur. */
section:has(> .conteneur > .logos-liste) > .conteneur { max-width: none; padding: 0 20px; }
/* Neuf logos par ligne en cases carrées de ≈ 121 px, 40 px entre colonnes, comme l'ancien. / Nine per row, ≈ 121 px square cells. */
.logos-liste { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0 40px; }
.logo-client { height: auto; aspect-ratio: 1; }
.logos-nb .logo-client img { filter: none; opacity: 1; }
@media (max-width: 900px) { .logos-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Galeries et diaporamas bord à bord. */
.galerie-pleine { padding: 0 !important; }
.cartes-diaporama .conteneur { max-width: none; padding: 0; }
.cartes-diaporama .carte-texte { display: none; }
.cartes-diaporama .diaporama-prec { visibility: hidden; }
/* Bandeaux : hauteurs de l'original (563 px à 1440 = 39vw ; bas = 24vw). */
.heros-moyenne { min-height: max(320px, 39vw); }
.heros-basse { min-height: max(220px, 24vw); }
.titre-heros-moyen { font-size: clamp(36px, 4.4vw, 64px); white-space: pre-line; }
.heros.align-droite .heros-contenu { text-align: left; align-items: flex-start; max-width: 50%; margin-left: 50%; }
/* Équipe, frise, offres, encart noir. */
.equipe { padding-top: 32px; }
.membre-role { opacity: 1; }
.membre-photo { background: transparent; }
.chrono-etape { grid-template-columns: minmax(200px, 42%) 1fr; }
.chrono-date { font-size: clamp(48px, 6.2vw, 90px); }
.offre-colonnes .grille-2 { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
.offre-colonnes .offre-tete { background: none; padding: 0; position: static; }
.offre-colonnes .offre-tete .titre-section { font-size: 22px; font-stretch: 100%; font-weight: 700; }
.texte-image-encart .encart.fond-noir { background: #000; }
.colonne-lien { display: block; text-align: right; font-size: 15px; font-stretch: 100%; font-weight: 400; border: 0; text-decoration: underline; }
/* Formulaire comme l'original : champs bordés, bouton blanc bordé sur toute la largeur. */
.formulaire input, .formulaire textarea, .formulaire select { border: 1px solid var(--noir); background: var(--blanc); padding: 10px 12px; }
.formulaire label { font-weight: 400; letter-spacing: 0; }
.formulaire button { justify-self: stretch; background: var(--blanc); color: var(--noir); border: 1px solid var(--noir); }
.formulaire button:hover { background: var(--noir); color: var(--blanc); }
@media (max-width: 680px) { .offre-colonnes .grille-2 { grid-template-columns: 1fr; } .heros.align-droite .heros-contenu { max-width: none; margin-left: 0; } }
/* Colonnes en liste (cartes d'offres d'origine) : ligne compacte, photo à gauche, lien en petit bouton noir à droite. */
.colonnes-liste .grille { grid-template-columns: 1fr !important; gap: 10px; }
.colonnes-liste .colonne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; border-top: 0; padding-top: 0; align-items: start; }
.colonnes-liste .colonne-image { margin: 0; aspect-ratio: 3 / 2; }
.colonnes-liste .petit-titre { font-size: 17px; margin-top: 24px; }
.colonnes-liste .colonne-texte p { font-size: 13px; margin: 0 0 4px; }
.colonnes-liste .colonne-texte p:first-of-type { font-weight: 700; font-size: 17px; font-stretch: 75%; margin-bottom: 18px; }
.colonnes-liste .colonne-lien { display: block; width: max-content; margin: 16px 0 0 auto; background: var(--noir); color: var(--blanc); padding: 8px 18px; text-decoration: none; font-size: 13px; }
@media (max-width: 680px) { .colonnes-liste .colonne { grid-template-columns: 1fr; } }

.colonnes-liste { padding-top: 16px; }
.colonnes-liste .petit-titre { font-size: 20px; }
.colonnes-liste .colonne-texte p { font-size: 15px; }
.colonnes-liste .colonne-texte p:first-of-type { font-size: 20px; }
.colonnes-liste .colonne-lien { text-transform: none; letter-spacing: 0; font-size: 14px; }
/* ---------- Quatrième passe (contrôle FR+EN du 09/11 20:44) ---------- */
.titre-heros-moyen { text-transform: uppercase; }
section:has(.chiffre) .titre-section { text-align: center; }
/* Frise anglaise d'origine : libellés et marques en noir, introductions en romain. / English timeline as on the old site. */
html[lang="en"] .chrono-texte h3, html[lang="en"] .chrono-texte strong { color: inherit; }
html[lang="en"] .chrono-texte em { font-style: normal; }
/* Contact avec photo : formulaire à gauche, photo à droite. */
.contact-photo .grille-2 { align-items: start; }
.contact-photo .contact-image { order: 2; }
.contact-photo .contact-tete:empty { display: none; }
.contact-photo .formulaire { order: 1; }
.contact-photo .contact-tete { grid-column: 1 / -1; order: 0; }
.contact-photo { padding-top: 0; }
.contact-photo .titre-section { font-size: 24px; font-stretch: 100%; margin-bottom: 18px; }
.contact-photo .grille-2 { gap: 0; }

/* ---------- Cinquième passe (10/11) : mise en page commune, registre docs/ECARTS-VISUELS.md § A ----------
   Mesures de l'ancien site à 1440 px (relevé des styles calculés, ancien | nouveau). Les valeurs simples des
   passes précédentes (largeur, blancs, corps de texte, boutons, logos, pied, menu) ont été remplacées en place.
   Fifth pass (10/11): shared layout, register § A. Measured on the old site at 1440 px; simple values of the
   earlier passes were replaced in place. */

/* A2 — Corps de texte : 16 px partout (ancien), 17,3 px dans les blocs Texte et Texte-image côte à côte.
   Body text: 16 px (old site), 17.3 px in Text and side-by-side Text-image blocks. */
.texte .riche, .texte-image .texte-image-texte .riche { font-size: clamp(16px, 1.2vw, 17.28px); }

/* A4 — Bandeaux du haut (premier bloc de la page) aux hauteurs de l'ancien : études de cas 563, pages
   intérieures ≈ 490, pages légales 209 ; et pas de grand blanc sous celui des offres.
   Top banners (first block) at the old heights; no big gap under the job-offer banner. */
.page > div > .heros:first-child.heros-grande { min-height: max(300px, 39vw); }
.page > div > .heros:first-child.heros-moyenne { min-height: max(260px, 34vw); }
.page > div > .heros:first-child.heros-basse { min-height: max(120px, 14.5vw); }
.heros + .offre { padding-top: 40px; }

/* Bandeau sans texte : sa hauteur est celle de la photo, pas celle des marges du texte.
   Banner without text: height is the photo's, not the text padding's. */
.heros-contenu:empty { padding: 0; }

/* A5 — Encarts sur photo (EFFET « Oh ! ») : 632 px de large, texte à 88 px du bord, bouton centré.
   Boxed text on photo: 632 px wide, 88 px inner margin, centred button. */
.texte-image-encart .encart { width: min(632px, 100%); padding: clamp(28px, 6vw, 80px) clamp(24px, 6.1vw, 88px) clamp(28px, 2.8vw, 40px); }
.texte-image-encart .encart .bouton { display: flex; width: max-content; max-width: 100%; margin: 40px auto 0; }
/* A12 — « Visitez avec nous » : pilule blanche, texte noir 14 px (border-radius 300px dans Wix).
   Outline button inside a box: white pill, as on the old site. */
.encart .bouton-contour { background: var(--blanc); border-color: var(--blanc); color: var(--noir); border-radius: 300px; min-width: 200px; min-height: 44px; font-size: 14px; font-stretch: 100%; font-weight: 400; }
.encart .bouton-contour:hover { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
/* A12 — Bouton d'un bloc texte-image côte à côte (« UN PROJET ? ») : centré sous le texte.
   Side-by-side text-image button: centred under the text. */
.texte-image-texte .bouton { display: flex; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }
/* Bouton du pied : garde sa taille propre. / Footer button keeps its own size. */
.pied-bouton .bouton { min-width: 0; min-height: 0; }

/* A1 — Titre à gauche des colonnes (études de cas, Nos métiers) : 54 px comme l'ancien.
   Heading left of the columns: 54 px as on the old site. */
.colonnes-cote .colonnes-tete .titre-section { font-size: clamp(30px, 3.75vw, 54px); line-height: 1.3; }

/* A6 — Logos collés au texte qui les présente (ancien : ≈ 16 px). / Logos right under their text. */
.bloc:has(+ .logos) { padding-bottom: 16px; }
.bloc + .logos { padding-top: 16px; }

/* A10 — Chiffres d'une étude de cas (bloc sans titre suivi d'une photo) : carte blanche ombrée à cheval
   sur le haut de la photo, qui fait 648 px de haut.
   Case-study figures (untitled block followed by a photo): white shadowed card overlapping the photo top. */
.chiffres:not(:has(.titre-section)):has(+ .heros) { padding-top: 56px; padding-bottom: 0; background: transparent; z-index: 2; }
.chiffres:not(:has(.titre-section)):has(+ .heros) .grille { background: var(--blanc); box-shadow: 0 0 14px rgba(0, 0, 0, .16); border-radius: 4px; padding: 14px 24px 20px; }
.chiffres:not(:has(.titre-section)) + .heros { min-height: max(320px, 45vw); }
@media (min-width: 681px) { .chiffres:not(:has(.titre-section)):has(+ .heros) { margin-bottom: -133px; } }

/* A8 — Pied : « Implantations » en 20 px comme l'ancien. / Footer: "Locations" heading at 20 px. */
.pied-grille > div:nth-child(3) h2 { font-size: 20px; }

/* A11 — Galeries : 20 px entre vignettes ; 104 px entre sous-titre et photos, 128 px sans sous-titre ;
   sous-titre sur une colonne plus large. Galleries: 20 px gaps; 104 / 128 px above the photos. */
.galerie-images { gap: 20px; }
.galerie-mosaique .galerie-images { column-gap: 20px; } .galerie-mosaique .galerie-photo { margin-bottom: 20px; }
.galerie .conteneur .titre-section { margin-bottom: 0; }
.galerie .conteneur .intro { max-width: 60em; margin: 24px 0 0; }
.galerie.align-centre .conteneur .intro { margin-left: auto; margin-right: auto; }
.galerie .conteneur:has(.titre-section, .intro) + .galerie-images { margin-top: 104px; }
.galerie .conteneur:has(.titre-section):not(:has(.intro)) + .galerie-images { margin-top: 128px; }

/* A7 — Menu mobile : pas de retrait latéral. / Mobile menu: no side padding. */
@media (max-width: 900px) { .nav a { padding: 4px 0; } }
@media (max-width: 680px) {
  .logos-liste { gap: 0 16px; }
  .galerie-images { gap: 8px; }
  .galerie .conteneur:has(.titre-section, .intro) + .galerie-images,
  .galerie .conteneur:has(.titre-section):not(:has(.intro)) + .galerie-images { margin-top: 40px; }
  .pied-reseaux { margin-left: 0 !important; } /* le retrait de -40 px coupait l'icône Instagram / the -40 px offset clipped the first icon */
}

/* ---------- Sixième passe (10/11) — pages : accueil, Nos métiers, Réalisations, Notre histoire, Jobs, La team ----------
   Registre docs/ECARTS-VISUELS.md § B1, B2, B3, B5, B6. Valeurs relevées sur les styles calculés de l'ancien à 1440 px.
   Sixth pass (10/11) — pages; register § B1-B6. Values measured on the old site's computed styles at 1440 px. */

/* Titres de blocs Texte et Texte-image : retours à la ligne saisis respectés, interligne 1,2 de l'ancien.
   Text and Text-image block titles: typed line breaks kept, old 1.2 line height. */
.texte .titre-section, .texte-image .titre-section, .texte-image-encart .titre-section { white-space: pre-line; }
.texte .titre-section:not(.titre-geant) { line-height: 1.2; }
/* Tailles de titre : grande 80,6 px (« NOUS RELEVONS », « CES LIEUX… », EFFET), petite 37,4 px (encarts de Nos
   métiers, titre décalé de 29 px à gauche du texte), géante 95,6 px (« DEUX VALISES » de Notre histoire).
   Title sizes: large 80.6 px, small 37.4 px (outdented 29 px), giant 95.6 px. */
.titre-section.titre-grand { font-size: clamp(40px, 5.6vw, 80.64px); line-height: 1.2; }
.titre-section.titre-petit { font-size: clamp(26px, 2.6vw, 37.44px); line-height: 1.3; margin-left: calc(-1 * min(29px, 2vw)); }
.texte .titre-section.titre-geant { font-size: clamp(44px, 6.64vw, 95.6px); line-height: 1; }
/* Texte grand (20,2 px) ; largeur « moyenne » : titre sur toute la largeur, texte en colonne de 54 caractères.
   Large text (20.2 px); "moyenne" width: full-width title, 54-character text column. */
.texte.texte-grand .riche { font-size: clamp(17px, 1.4vw, 20.16px); line-height: 1.6; }
.texte .moyen > .riche { max-width: 54em; }
.texte.align-centre .moyen > .riche, .texte.align-titre-centre .moyen > .riche { margin-left: auto; margin-right: auto; }
/* Texte étroit aligné à gauche (Notre histoire) : titre à gauche, texte en colonne de 604 px (86-690 dans l'ancien).
   Narrow left-aligned text: title on the left, 604 px text column. */
.texte.align-gauche .conteneur.etroit { max-width: var(--largeur); }
.texte.align-gauche .etroit > .riche { max-width: 604px; }

/* B1 — Logo de l'accueil entier et carré, 368 px centré dans sa colonne (ancien), au lieu d'un portrait recadré.
   Home logo whole and square, 368 px centred in its column. */
.texte-image.image-entiere .texte-image-image { aspect-ratio: auto; width: clamp(200px, 25.6vw, 368px); justify-self: center; }
.texte-image.image-entiere .texte-image-image img { height: auto; }

/* B2 — Encart gris foncé (#464646 relevé sur l'ancien). / Dark grey box (#464646 measured on the old site). */
.fond-gris-fonce, .texte-image-encart .encart.fond-gris-fonce { background: #464646; color: var(--blanc); }
/* B2 — Chiffres avec titre (Nos métiers) : titre 81 px, chiffres répartis sur 40-1400, légendes droites en 16 px.
   Titled figures: 81 px title, spread over 40-1400, upright 16 px captions. */
.chiffres:has(.titre-section) .titre-section { font-size: clamp(40px, 5.625vw, 81px); line-height: 1.2; }
.chiffres:has(.titre-section) .chiffre-libelle, .chiffres:has(.titre-section) .chiffre-detail { font-style: normal; font-size: 16px; line-height: 1.6; }
@media (min-width: 900px) { .chiffres:has(.titre-section) .conteneur { max-width: none; padding: 0 40px; } }

/* B3 — Diaporamas aux formats de l'ancien (1440 × 565 puis 1440 × 815), collés au texte qui les précède ;
   pas de blanc entre le dernier diaporama et le pied.
   Slideshows at the old formats, tight under the preceding text; no gap before the footer. */
@media (min-width: 681px) {
  .cartes-diaporama.format-5-2 .diaporama-piste > .carte { aspect-ratio: 1440 / 565; }
  .cartes-diaporama.format-16-9 .diaporama-piste > .carte { aspect-ratio: 1440 / 815; }
}
.texte:has(+ .cartes-diaporama) { padding-bottom: 16px; }
.texte + .cartes-diaporama, .accroche + .cartes-diaporama { padding-top: 0; }
.cartes-diaporama:last-child { padding-bottom: 0; }
/* Titre suivant un diaporama : 43 px sous les photos (ancien). / Heading after a slideshow: 43 px below (old site). */
.cartes-diaporama:has(+ .texte) { padding-bottom: 0; }
.cartes-diaporama + .texte { padding-top: 40px; }

/* B5 — Frise : titre 54 px, dates 101 px sur deux lignes dans une colonne de 518 px, texte en 630 px, intertitres
   16 px collés à leur texte, paragraphes sans blanc, puces pleines.
   Timeline: 54 px title, 101 px dates on two lines in a 518 px column, 630 px text, tight 16 px labels, disc bullets. */
.chronologie .titre-section { font-size: clamp(30px, 3.75vw, 54px); line-height: 1.4; }
@media (min-width: 681px) { .chrono-etape { grid-template-columns: minmax(0, 518px) minmax(0, 630px); justify-content: space-between; } }
@media (max-width: 680px) { .chrono-etape { grid-template-columns: 1fr; } }
.chrono-date { font-size: clamp(48px, 7.03vw, 101.25px); line-height: 1.2; }
.chrono-texte p, .chrono-texte ul { margin: 0; }
.chrono-texte h3 { font-size: 16px; line-height: 1.6; margin: 1.6em 0 0; }
.chrono-texte ul { list-style: disc; }

/* B6 — Bandeau « LA TEAM » (image à droite) : colonne de texte à 66 % (x = 923 dans l'ancien), titre 67,5 px,
   texte 17,3 px, bouton 290 × 63 centré, contenu en bas du bandeau.
   "LA TEAM" banner: text column at 66 %, 67.5 px title, 17.3 px text, centred 290 × 63 button, content at the bottom. */
/* .heros-contenu est un .conteneur (72 px de marge intérieure) : 59,1 % + 72 = 923 px, 39,9 % − 144 = 430 px.
   .heros-contenu is a .conteneur (72 px padding): 59.1 % + 72 = 923 px, 39.9 % − 144 = 430 px. */
@media (min-width: 681px) { .heros.align-droite .heros-contenu { margin-left: 59.1%; max-width: 39.9%; padding-bottom: 40px; } }
.heros.align-droite .titre-heros-moyen { font-size: clamp(36px, 4.69vw, 67.5px); line-height: 1.2; }
.heros.align-droite .heros-texte { font-size: clamp(16px, 1.2vw, 17.28px); line-height: 1.6; max-width: none; }
.heros.align-droite .bouton { align-self: center; min-width: 290px; min-height: 63px; }
/* B6 — Cartes d'offres : photo 630 px de la hauteur de la carte (425 au moins), texte en 500 px, titre et
   sous-titre 24 px, paragraphes 16 px sans blanc, bouton 142 × 42 ; cartes collées au texte d'introduction.
   Job cards: 630 px photo as tall as the card, 500 px text, 24 px heading and subheading, 16 px paragraphs. */
@media (min-width: 681px) {
  .colonnes-liste .colonne { grid-template-columns: minmax(0, 630px) minmax(0, 500px); gap: 40px; align-items: stretch; }
  .colonnes-liste .colonne-image { aspect-ratio: auto; min-height: 425px; height: 100%; }
}
.colonnes-liste .grille { gap: 20px; }
.colonnes-liste .petit-titre { font-size: clamp(20px, 1.67vw, 24px); line-height: 1.4; margin: 40px 0 0; }
.colonnes-liste .colonne-texte p { font-size: 16px; line-height: 1.6; margin: 0; }
.colonnes-liste .colonne-texte p:first-of-type { font-size: clamp(20px, 1.67vw, 24px); line-height: 1.4; font-weight: 800; font-stretch: 75%; margin-bottom: 20px; }
.colonnes-liste .colonne-lien { display: flex; align-items: center; justify-content: center; min-width: 142px; min-height: 42px; margin-top: 40px; }
.texte:has(+ .colonnes-liste) { padding-bottom: 28px; }
.texte + .colonnes-liste { padding-top: 0; }

/* La team — portraits 409 × 462 à 20 px d'écart, noms 22,5 px (ancien). / Team: 409 × 462 portraits, 20 px gaps. */
.equipe .grille { column-gap: 20px; }
.membre-photo { aspect-ratio: 409 / 462; margin-bottom: 17px; }
.equipe .petit-titre { font-size: clamp(19px, 1.56vw, 22.5px); line-height: 1.5; margin-bottom: 0; }

/* ---------- Septième passe (10/11) — contact, offres, légales ----------
   Registre docs/ECARTS-VISUELS.md § B4, B7, B8, B10, études de cas. Valeurs relevées sur les styles calculés de
   l'ancien à 1440 px (ancien | nouveau). Le contact d'origine diffère selon la langue (FR : cadre noir, champs
   nus ; EN : panneau gris, champs à trait rouge, bouton rouge) : les deux sont repris tels quels.
   Seventh pass (10/11) — contact, job offers, legal pages. Old-site computed styles at 1440 px. The old contact
   form differs per language (FR: black frame, bare fields; EN: grey panel, red-underlined fields, red button). */

/* B4 — Bandeau du contact 335 px (209 ici) ; titre « NOUS CONTACTER » 47 px gras, texte en colonne de 880 px à
   x = 203 ; EN : « CONTACT US » centré. / Contact banner 335 px; 47 px title, 880 px text column at x = 203. */
.page > div > .heros:first-child.heros-basse:has(~ .contact-photo) { min-height: max(160px, 23.26vw); }
.texte:has(+ .contact-photo) { padding-top: 39px; padding-bottom: 67px; }
.texte:has(+ .contact-photo) .titre-section, .texte:has(+ .contact-photo) .riche { margin-left: min(117px, 8.125vw); max-width: 880px; }
html[lang="fr"] .texte:has(+ .contact-photo) .titre-section { font-size: clamp(32px, 3.27vw, 47.04px); font-weight: 700; line-height: 1.3; margin-bottom: 20px; }
html[lang="en"] .texte:has(+ .contact-photo) .titre-section { text-align: center; margin-left: 0; max-width: none; margin-bottom: 0; }
/* B4 — Formulaire collé au bord gauche (0-720), photo du flight case collée au bord droit, de la hauteur du
   formulaire ; champ Entreprise sur toute la largeur. / Form flush left, photo flush right at the form's height. */
@media (min-width: 681px) {
  .contact-photo .conteneur.grille-2 { position: relative; max-width: none; padding: 0; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
  .contact-photo .contact-tete { grid-column: 1; grid-row: 1; }
  .contact-photo .formulaire { grid-column: 1; grid-row: 2; }
  .contact-photo .contact-image { position: absolute; top: 0; right: 0; width: 50%; height: 100%; object-fit: cover; }
}
.contact-photo .formulaire label:has([name="societe"]) { grid-column: 1 / -1; }
/* Message sur 91 px et photos cadrées comme l'ancien (têtes de l'équipe, haut du flight case).
   91 px message box; photos framed as on the old site (team heads, top of the flight case). */
.contact-photo .formulaire textarea { height: 91px; min-height: 0; }
.contact-photo .contact-image { object-position: 50% 0; }
.page > div > .heros:first-child.heros-basse:has(~ .contact-photo) .heros-fond img { object-position: 50% 22%; }
.contact-photo .contact-tete .titre-section { margin: 0; }
.contact-photo .formulaire button { border-radius: 0; text-transform: none; letter-spacing: 0; min-width: 0; }
/* FR : cadre noir de 2 px, titre 28 px en romain large, champs sans bordure, message bordé, bouton contour 43 px.
   FR: 2 px black frame, 28 px wide title, borderless fields, bordered message, 43 px outline button. */
html[lang="fr"] .contact-photo .contact-tete { border: 2px solid var(--noir); border-bottom: 0; padding: 4px 3px 0; }
html[lang="fr"] .contact-photo .formulaire { border: 2px solid var(--noir); border-top: 0; padding: 20px 3px 3px; gap: 18px 27px; }
html[lang="fr"] .contact-photo .contact-tete .titre-section { font-size: 28px; font-stretch: 100%; font-weight: 700; line-height: 1.5; }
html[lang="fr"] .contact-photo .formulaire input, html[lang="fr"] .contact-photo .formulaire select { border: 0; padding: 10px 7px; }
html[lang="fr"] .contact-photo .formulaire textarea { border: 1px solid #7a7a7a; }
html[lang="fr"] .contact-photo .formulaire button { min-height: 43px; padding: 0; font-size: 16px; font-stretch: 100%; font-weight: 400; }
/* EN : panneau gris clair, contenu à 65 px du bord, champs gris à trait rouge, bouton rouge plein 53 px.
   EN: light grey panel, 65 px inset, grey fields with a red underline, solid red 53 px button. */
html[lang="en"] .contact-photo .contact-tete, html[lang="en"] .contact-photo .formulaire { background: #fafafa; }
html[lang="en"] .contact-photo .contact-tete { padding: 47px 65px 18px; }
html[lang="en"] .contact-photo .formulaire { padding: 0 65px 40px; gap: 18px 23px; }
html[lang="en"] .contact-photo .contact-tete .titre-section { font-size: 32px; line-height: 1.3; }
html[lang="en"] .contact-photo .formulaire input, html[lang="en"] .contact-photo .formulaire textarea, html[lang="en"] .contact-photo .formulaire select { border: 0; border-bottom: 1px solid var(--rouge); background: #efefef; }
html[lang="en"] .contact-photo .formulaire button { min-height: 53px; padding: 0; border: 0; background: var(--rouge); color: var(--blanc); font-size: 26px; font-stretch: 75%; font-weight: 800; }
html[lang="en"] .contact-photo .formulaire button:hover { background: var(--noir); color: var(--blanc); }

/* B7 — Offres : intitulé en capitales grasses (retours saisis respectés), rubriques rouges 22,5 px, paragraphes
   décalés de 23 px et puces de 56 px sous les rubriques, ligne vide entre les puces des deux premières listes,
   sous-puces creuses (« Indicateurs clés »), titre centré 32 px dans « POURQUOI VOUS ? ».
   Job offers: bold capital job title, 22.5 px red headings, indented text, blank line between the first two
   lists' bullets, hollow sub-bullets, 32 px centred heading. */
.offre-colonnes .offre-tete .titre-section { text-transform: uppercase; font-weight: 800; font-stretch: 100%; line-height: 1; white-space: pre-line; }
.offre .riche h3 { font-size: clamp(19px, 1.56vw, 22.5px); line-height: 1.5; }
@media (min-width: 681px) {
  .offre-colonnes .rich-text > p { padding-left: 23px; }
  .offre-colonnes .rich-text > ul { padding-left: 56px; }
}
/* Le texte riche publié est enveloppé (.riche > div > .rich-text) : les sélecteurs d'enfant visent .rich-text.
   Published rich text is wrapped (.riche > div > .rich-text): child selectors target .rich-text. */
.offre-colonnes .rich-text > ul:nth-of-type(-n+2) > li + li { margin-top: 25.6px; }
.offre .riche ul ul { list-style: circle; padding-left: 29px; }
.offre .riche h2 { font-size: clamp(22px, 2.2vw, 32px); font-stretch: 100%; font-weight: 700; text-transform: none; text-align: center; line-height: 1.4; margin: 24px 0; }
/* B7/B8 — POSTULER / JOB APPLICATION : photo encadrée 882 × 663 à x = 90, pavé noir 560 px qui déborde à droite
   (bord à 1350), titre 38 px, texte 400 px ; EN : courriel non souligné.
   Apply box: framed 882 × 663 photo, 560 px black box overlapping to the right, 38 px title; EN: plain email. */
@media (min-width: 681px) {
  .offre ~ .texte-image-encart { display: block; min-height: 0; padding: 67px 0 80px; }
  .offre ~ .texte-image-encart .encart-fond { position: relative; inset: auto; display: block; width: min(882px, 61.25vw); height: auto; aspect-ratio: 882 / 663; margin-left: min(90px, 6.25vw); }
  .offre ~ .texte-image-encart .conteneur { position: absolute; inset: 67px 0 80px; max-width: none; padding: 0 min(90px, 6.25vw) 0 0; align-items: center; justify-content: flex-end; }
  .offre ~ .texte-image-encart .encart { width: min(560px, 38.9vw); padding: 60px 68px; }
  .offre ~ .texte-image-encart .riche { padding-left: 10px; max-width: 410px; }
  .offre ~ .texte-image-encart .titre-section { font-size: clamp(28px, 2.66vw, 38.25px); line-height: 1.3; margin-bottom: 20px; }
}
html[lang="en"] .offre ~ .texte-image-encart .riche a { text-decoration: none; }

/* B10 — Pages légales : titre 47 px gras centré (posé sur le bandeau de 346 px pour les données personnelles),
   intertitres en gras à la taille du texte, paragraphes et listes serrés, libellés de listes soulignés non gras.
   Legal pages: 47 px bold centred title (on the 346 px banner for the privacy page), body-size bold headings,
   tight paragraphs and lists, underlined non-bold list labels. */
.page > div > .heros:first-child.heros-basse.align-centre:has(.titre-heros-moyen) { min-height: max(200px, 24.03vw); align-items: center; }
.heros-basse.align-centre:has(.titre-heros-moyen) .heros-contenu { padding-top: 24px; padding-bottom: 24px; }
.heros-basse.align-centre .titre-heros-moyen { color: var(--noir); font-size: clamp(30px, 3.27vw, 47.04px); font-weight: 700; line-height: 1.3; }
.heros-basse + .texte.align-titre-centre .titre-section { font-size: clamp(30px, 3.27vw, 47.04px); font-weight: 700; line-height: 1.3; }
.heros-basse + .texte.align-titre-centre .riche h3 { font-size: 1em; font-stretch: 100%; font-weight: 700; line-height: 1.6; margin: 1.6em 0 0; }
.heros-basse + .texte.align-titre-centre .riche p, .heros-basse + .texte.align-titre-centre .riche ul, .heros-basse + .texte.align-titre-centre .riche li { margin-top: 0; margin-bottom: 0; }
.heros-basse + .texte.align-titre-centre .riche ul { padding-left: 31px; }
.heros-basse + .texte.align-titre-centre .riche li > strong:first-child { font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
/* Téléphone : panneau anglais du contact à 16 px du bord (65 px y faisait déborder la page de 4 px).
   Phone: English contact panel at 16 px (65 px overflowed the page by 4 px). */
@media (max-width: 680px) { html[lang="en"] .contact-photo .contact-tete, html[lang="en"] .contact-photo .formulaire { padding-left: 16px; padding-right: 16px; } }