/* Hallmark · macrostructure: Photographic + Feature Stack · nav: N10 barre → pilule au défilement · pied: Ft5 statement · thème: DA client (navy #1E325D, teal #69B8AB, Montserrat) · tone: immersif
 * motion-pro: level 3 · Lenis + GSAP (ScrollTrigger, SplitText) · fondu héros, piles collantes, colonnes dérivantes, bandeau d’avis · gates M1–M12 à contrôler après rendu
 * pre-emit critique: P4 H4 E4 S4 R3 V5 */

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
/* blocs collants : ils se calent sous la barre fixe en état défilé (72 px) avec une marge franche ; le thème ajoute la barre d'admin WordPress à --barre-fixe (Maxime 07/10 : « une marge entre le menu sticky et les blocs qui s'empilent ») */
body { --barre-fixe: 72px; --colle-marge: 32px; --colle: calc(var(--barre-fixe) + var(--colle-marge)); } /* sur body, pas :root : la classe admin-bar de WordPress est sur body et doit entrer dans le calcul */
.h2 { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem); line-height: 1.06; letter-spacing: -.01em; }
.h2--xl { font-size: clamp(1.75rem, 1.05rem + 2vw, 2.6rem); /* 56 → 42 px à 1440 (Maxime, 16/10 : « retravailler la taille de certains titres, celui-ci est très gros ») */ line-height: 1; letter-spacing: -.015em; text-transform: uppercase; }
section { position: relative; }

/* ---------- en-tête : reprise de la prod — bandeau navy, barre transparente sur la photo, barre blanche collante ---------- */
.hd { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); color: var(--c-white); }
.hd .wrap { max-width: 1400px; }
.hd::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 183px; background: linear-gradient(rgb(0 0 0 / .73), rgb(0 0 0 / 0)); pointer-events: none; z-index: -1; transition: opacity var(--dur-base) var(--ease-out); }
.hd.is-scrolled::before { opacity: 0; }
.hd__strip { background: var(--c-navy); font-size: .875rem; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.hd.is-scrolled .hd__strip { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.hd__strip-in { display: flex; align-items: center; justify-content: flex-end; gap: 28px; min-height: 46px; }
.sec { display: flex; align-items: center; }
.sec li { display: flex; align-items: center; }
.sec li + li::before { content: ""; width: 1px; height: 14px; margin: 0 15px; background: currentColor; opacity: .55; }
.sec a { white-space: nowrap; text-decoration: none; text-transform: uppercase; letter-spacing: .02em; font-weight: 400; }
.sec a:hover { text-decoration: underline; }
.hd__strip-droite { display: flex; align-items: center; gap: 18px; }
.hd__reseau { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-teal); color: var(--c-navy); margin-left: -8px; }
.hd__reseau:first-child { margin-left: 0; }
.hd__reseau svg { width: 11px; height: 11px; fill: currentColor; }
.hd__reseau:hover { background: var(--c-white); }
/* sélecteur de langue en curseur (Maxime, 26/10) : une gélule qui contient FR et EN ; la pastille turquoise est sous la langue courante.
   Elle glisse au clic, pas au survol (Maxime, 26/10) : commun.js pose data-vers = rang de la langue visée, puis change de page.
   Deux langues : la 2e position se lit par :has(li:nth-child(2) …).
   « ul. » devant : la remise à zéro ul[class] de base.css annulait le padding de la gélule (pastille décentrée). */
ul:is(.langues, .feuille__langues) { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; padding: 3px; list-style: none; border: 1px solid var(--c-white-line); border-radius: var(--r-pill); background: rgb(255 255 255 / .06); isolation: isolate; }
:is(.langues, .feuille__langues)::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: var(--r-pill); background: var(--c-teal); box-shadow: 0 1px 4px rgb(0 0 0 / .18); transition: transform var(--dur-base) var(--ease-out); }
:is(.langues, .feuille__langues):has(li:nth-child(2) a[aria-current])::before, :is(.langues, .feuille__langues)[data-vers="1"]::before { transform: translateX(100%); }
:is(.langues, .feuille__langues)[data-vers="0"]:has(li:nth-child(2) a[aria-current])::before { transform: none; } /* même spécificité que la règle de la langue courante, plus un attribut */
:is(.langues, .feuille__langues) a { display: grid; place-items: center; min-width: 34px; height: 24px; padding: 0 8px; border-radius: var(--r-pill); color: var(--c-white); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
:is(.langues, .feuille__langues) a[aria-current] { color: var(--c-navy); }
:is(.langues, .feuille__langues) a:not([aria-current]):hover { color: var(--c-teal); } /* survol : simple indice, la pastille ne bouge pas */
:is(.langues, .feuille__langues)[data-vers] a[aria-current] { color: var(--c-white); }
:is(.langues, .feuille__langues)[data-vers="0"] li:nth-child(1) a, :is(.langues, .feuille__langues)[data-vers="1"] li:nth-child(2) a { color: var(--c-navy); }
:is(.langues, .feuille__langues) a:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
.hd__bar { transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out); }
.hd.is-scrolled .hd__bar { margin-top: -46px; background: var(--c-white); color: var(--c-navy); box-shadow: 0 2px 14px rgb(30 50 93 / .14); }
.bar { display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); height: 122px; transition: height var(--dur-base) var(--ease-out); }
.hd.is-scrolled .bar { height: 72px; gap: var(--space-lg); }
.hd.is-scrolled .menu__lien { font-size: .875rem; height: 40px; }
.hd.is-scrolled .menu__item + .menu__item::before { height: 14px; }
.hd.is-scrolled .bar__tel, .hd.is-scrolled .bar__contact { min-height: 38px; }
.hd.is-scrolled .bar__contact { width: 38px; }
.hd.is-scrolled .bar__tel { font-size: .75rem; padding: 0 .9rem; }
.bar__logo { flex: none; color: var(--c-white); --logo-accent: var(--c-teal); transition: color var(--dur-base) var(--ease-out); }
.hd.is-scrolled .bar__logo { color: var(--c-navy); }
.bar__logo svg { height: 92px; width: auto; transition: height var(--dur-base) var(--ease-out); }
.hd.is-scrolled .bar__logo svg { height: 48px; }
.bar__nav { flex: 1; min-width: 0; display: flex; justify-content: center; align-self: stretch; } /* pleine hauteur de la barre : le sous-menu part de son bord bas */
.bar__logo { margin-right: 8px; }
.menu { display: flex; align-items: stretch; }
.menu__item { position: relative; display: flex; align-items: center; }
.menu__item + .menu__item::before { content: ""; width: 2px; height: 16px; margin: 0 12px; background: currentColor; opacity: .9; flex: none; }
.menu__lien { display: inline-flex; align-items: center; height: 44px; font-weight: 500; font-size: .9375rem; text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
@media (min-width: 1500px) { .menu__lien { font-size: 1rem; } .menu__item + .menu__item::before { margin: 0 14px; } }
.menu__item:hover > .menu__lien, .menu__item.is-open > .menu__lien { text-decoration: underline; text-underline-offset: .3em; }
.menu__toggle { display: grid; place-items: center; width: 22px; height: 44px; margin-left: 6px; color: inherit; }
.menu__toggle svg { width: 14px; height: 14px; transition: transform var(--dur-short) var(--ease-out); }
.menu__item.is-open .menu__toggle svg { transform: rotate(180deg); }
/* sous-menus « Offres » (proposition C retenue par Maxime le 16/10, après les vignettes A du 14/10) : panneau centré sous la barre (et non sous l'entrée) ;
   à gauche la page parente sur fond bleu marine (titre de son héros, accroche, tarifs, visite virtuelle, téléphone), à droite une carte par sous-page
   (photo qui l'ouvre, accroche, prix, bouton) ; la carte entière mène à la page (lien étiré), le bouton passe au-dessus.
   Pas d'overflow: hidden sur le panneau : il couperait la passerelle de survol ::before et le panneau se refermerait en y descendant. */
.hd__bar { position: relative; }
.bar__nav .menu__item--parent { position: static; } /* le panneau se place par rapport à la barre ; le survol tient, il reste un descendant de l'entrée */
.menu__sous { position: absolute; top: 100%; left: 0; right: 0; width: max-content; max-width: calc(100vw - 32px); margin-inline: auto; background: var(--c-white); color: var(--c-navy); box-shadow: 0 26px 44px -22px rgb(30 50 93 / .38); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); } /* prolonge la barre : ni liseré ni coins, ombre vers le bas */
.menu__sous::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; }
.menu__item:hover > .menu__sous, .menu__item:focus-within > .menu__sous, .menu__item.is-open > .menu__sous { opacity: 1; transform: none; pointer-events: auto; }
.menu__in { display: grid; grid-template-columns: 290px auto; }
.menu__tete { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 22px; background: var(--c-navy); color: var(--c-white); }
.menu__titre { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 1.125rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; color: var(--c-white); text-decoration: none; }
.menu__fleche { width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--c-teal); transition: transform var(--dur-short) var(--ease-out); }
.menu__titre:hover > span { text-decoration: underline; text-underline-offset: .22em; }
.menu__titre:hover .menu__fleche { transform: translateX(3px); }
.menu__tete .menu__acc { font-size: .875rem; line-height: 1.45; color: rgb(255 255 255 / .84); }
.menu__tarifs { display: grid; margin-top: 2px; }
.menu__tarifs > span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgb(255 255 255 / .14); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .8); }
.menu__tarifs strong { font-size: 1.0625rem; letter-spacing: 0; text-transform: none; color: var(--c-white); }
.menu__tarifs small { padding-top: 6px; font-size: .75rem; color: rgb(255 255 255 / .72); }
.menu__actions { display: grid; gap: 8px; margin-top: auto; padding-top: 6px; }
.menu__actions a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 1rem; border: 1.5px solid rgb(255 255 255 / .45); border-radius: var(--r-pill); color: var(--c-white); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.menu__actions a:first-child { background: var(--c-teal); border-color: var(--c-teal); color: var(--c-navy); }
.menu__actions a:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-navy); }
.menu__actions svg { width: 18px; height: 18px; flex: none; }
ul.menu__cartes { display: grid; grid-auto-flow: column; grid-auto-columns: 236px; gap: 18px; padding: 20px 22px 22px; } /* ul. : la remise à zéro ul[class] de base.css (0,1,1) l’emporterait sur la marge intérieure */
.menu__carte { position: relative; display: flex; flex-direction: column; gap: 7px; }
.menu__fig { aspect-ratio: 16 / 11; margin-bottom: 5px; border-radius: var(--r-s); overflow: hidden; background: var(--c-grey); }
.menu__fig img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.menu__carte:hover .menu__fig img { transform: scale(1.05); }
.menu__nom { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.25; color: var(--c-navy); text-decoration: none; text-wrap: balance; }
.menu__nom::after { content: ""; position: absolute; inset: 0; } /* toute la carte mène à la page */
.menu__carte:hover .menu__nom, .menu__nom:focus-visible { text-decoration: underline; text-underline-offset: .22em; }
.menu__carte > .menu__acc { font-size: .8125rem; line-height: 1.45; color: var(--c-ink-soft); text-wrap: pretty; }
.menu__prix { margin-top: auto; padding-top: 4px; font-size: .75rem; line-height: 1.2; color: var(--c-ink-soft); }
.menu__prix strong { font-size: 1.375rem; font-weight: 700; color: var(--c-navy); }
.menu__cta { position: relative; z-index: 1; min-height: 40px; margin-top: 6px; background: var(--c-teal); color: var(--c-navy); }
.menu__cta:hover { background: var(--c-navy); color: var(--c-white); }
@media (prefers-reduced-motion: reduce) { .menu__fig img, .menu__fleche { transition: none; } }
.hd:not(.is-scrolled):has(.bar__nav .menu__item--parent:is(:hover, :focus-within, .is-open)) .hd__bar { background: var(--c-white); color: var(--c-navy); }
.hd:not(.is-scrolled):has(.bar__nav .menu__item--parent:is(:hover, :focus-within, .is-open)) .bar__logo { color: var(--c-navy); }
.bar__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.bar__tel, .bar__contact { background: var(--c-teal); color: var(--c-navy); border: 0; min-height: 43px; }
.bar__tel { font-size: .8125rem; padding: 0 1.1rem; }
.bar__tel svg { display: none; }
.bar__tel:hover, .bar__contact:hover { background: var(--c-white); color: var(--c-navy); }
.hd.is-scrolled .bar__tel:hover, .hd.is-scrolled .bar__contact:hover { background: var(--c-navy); color: var(--c-white); }
.bar__contact { width: 43px; }
.bar__burger { display: none; border-color: var(--c-white-line); color: inherit; }
.hd.is-scrolled .bar__burger { border-color: var(--c-navy-line); }
@media (max-width: 1280px) { .menu__item + .menu__item::before { margin: 0 10px; } .menu__lien { font-size: .9375rem; } .bar { gap: var(--space-lg); } }
@media (max-width: 1180px) { .bar__nav { display: none; } .bar__burger { display: inline-flex; } .bar { justify-content: space-between; } }
@media (max-width: 640px) {
  .hd__strip .sec li:nth-child(n+3), .hd__strip .hd__reseau { display: none; }
  .hd__strip-in { justify-content: space-between; min-height: 40px; }
  .bar__tel span { display: none; } .bar__tel svg { display: block; } .bar__tel { width: 43px; padding: 0; }
  .bar { height: 84px; } .bar__logo svg { height: 64px; }
  .hd.is-scrolled .hd__bar { margin-top: -40px; } .hd.is-scrolled .bar { height: 66px; } .hd.is-scrolled .bar__logo svg { height: 48px; }
}

/* ---------- héros : diaporama plein écran, texte en bas à gauche dans une colonne mesurée, vignettes à droite ---------- */
.panorama { position: relative; min-height: 100svh; display: grid; align-items: end; color: var(--c-white); background: var(--c-navy); overflow: clip; isolation: isolate; }
.panorama__diapos, .panorama__diapo { position: absolute; inset: 0; }
.panorama__diapo { opacity: 0; }
.panorama__diapo.is-active { opacity: 1; }
.panorama__diapo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.panorama__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(13 24 48 / .42) 0%, rgb(13 24 48 / 0) 24%, rgb(13 24 48 / 0) 62%, rgb(13 24 48 / .5) 100%); }
/* halo sous le bloc de texte seulement : la photo reste lisible partout ailleurs */
.panorama__texte { position: relative; }
.panorama__texte::before { content: ""; position: absolute; inset: -22% -34% -26% -30%; background: radial-gradient(ellipse at 42% 56%, rgb(13 24 48 / .82) 0%, rgb(13 24 48 / .72) 34%, rgb(13 24 48 / .42) 60%, rgb(13 24 48 / 0) 78%); z-index: -1; pointer-events: none; }
/* bords du halo fondus (08/10, Maxime : « ok ») : l'ellipse en farthest-corner valait encore .24 au bord haut de sa boîte (.50 au bas sur mobile) → ligne droite sur la photo.
   Masque en fondu sur la marge de la boîte qui dépasse le texte (texte = 15 → 82 % de la hauteur et 18 → 79 % de la largeur ; sous 1024 px : 11 → 86 % et 10 → 90 %) ; contraste sous le texte inchangé (±0,06). */
.panorama__texte::before { -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 83%, transparent), linear-gradient(90deg, transparent, #000 18%, #000 79%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent, #000 14%, #000 83%, transparent), linear-gradient(90deg, transparent, #000 18%, #000 79%, transparent); mask-composite: intersect; }
@media (max-width: 1023px) { .panorama__voile { background: linear-gradient(180deg, rgb(13 24 48 / .42) 0%, rgb(13 24 48 / 0) 24%, rgb(13 24 48 / .2) 55%, rgb(13 24 48 / .62) 100%); } .panorama__texte::before { inset: -14% -12% -18% -12%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 87%, transparent), linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(180deg, transparent, #000 10%, #000 87%, transparent), linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } }
.panorama__in { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); align-items: end; padding-top: 190px; padding-bottom: clamp(32px, 5vh, 56px); }
.panorama__texte { max-width: max(80%, 50rem); }
/* grand écran : colonne de texte à 800 px comme la prod, vignettes posées en bas à droite (zone libre sous le H1) */
@media (min-width: 1280px) { .panorama__in { grid-template-columns: minmax(0, 1fr); } .panorama__vignettes { position: absolute; right: var(--gutter); bottom: clamp(32px, 5vh, 56px); } }
.panorama__h1 { color: var(--c-white); font-size: clamp(2.1rem, 1.2rem + 2.5vw, 3.5rem); line-height: 1.02; letter-spacing: -.005em; text-transform: uppercase; font-weight: 600; }
.panorama__lede { margin-top: var(--space-md); font-size: 1.125rem; line-height: 1.5; max-width: max(80%, 60ch); }
.panorama__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-lg); }
.panorama__vignettes { display: flex; gap: 8px; padding: 8px; border-radius: 16px; background: rgb(13 24 48 / .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.panorama__vignette { width: 88px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; opacity: .55; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.panorama__vignette img { width: 100%; height: 100%; object-fit: cover; }
.panorama__vignette.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--c-teal); }
.panorama__vignette:hover { opacity: 1; }
@media (min-width: 1024px) and (max-height: 760px) { .panorama__h1 { font-size: clamp(2rem, 1rem + 2.3vw, 3.1rem); } .panorama__in { padding-top: 176px; } .panorama__cta { margin-top: var(--space-md); } }
@media (max-width: 1023px) {
  .panorama__in { grid-template-columns: minmax(0, 1fr); padding-top: 150px; }
  .panorama__texte { max-width: none; }
  .panorama__vignettes { justify-self: start; }
  .panorama__vignette { width: 56px; }
}

/* ---------- présentation : colonne collée + pile de cartes ---------- */
.pres { padding: clamp(64px, 8vw, 120px) 0; } /* marge basse alignée sur les autres sections (72 px à 1440 avant le 13/10, audit des marges) */
.pres__tete { margin-bottom: clamp(28px, 4vw, 56px); }
.pres__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pres__colle { position: sticky; top: var(--colle); display: grid; gap: var(--space-lg); justify-items: start; }
.pres__texte { font-size: 1.0625rem; }
.pile { display: grid; gap: 0; }
.pile__carte { position: sticky; top: var(--colle); height: min(78svh, 680px); min-height: 460px; margin-bottom: 24px; border-radius: var(--r-card-l); overflow: hidden; display: flex; align-items: end; color: var(--c-white); background: var(--c-navy); transform-origin: 50% 0; box-shadow: var(--shadow-float); }
.pile__carte:last-child { margin-bottom: 0; }
.pile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pile__carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(13 24 48 / 0) 45%, rgb(13 24 48 / .2) 100%); }
.pile__corps { position: relative; z-index: 1; padding: 130px clamp(22px, 3vw, 40px) clamp(22px, 3vw, 40px); max-width: 100%; background: linear-gradient(180deg, rgb(13 24 48 / 0) 0, rgb(13 24 48 / .55) 60px, rgb(13 24 48 / .86) 116px, rgb(13 24 48 / .94) 100%); }
.pile__h3 { color: var(--c-white); font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); font-weight: 600; text-transform: uppercase; line-height: 1.06; }
.pile__p { margin-top: var(--space-md); font-size: 1rem; line-height: 1.55; max-width: max(80%, 60ch); }
@media (max-width: 1023px) {
  .pres__grid { grid-template-columns: minmax(0, 1fr); }
  .pres__colle { position: static; }
  .pile__carte { position: relative; top: auto; height: auto; min-height: 0; display: block; margin-bottom: 20px; }
  .pile__img { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; } /* height: auto (07/10) : le height: 100 % de base se résolvait sur la carte étirée par la grille, la photo prenait toute la carte et rognait le titre et le texte (accueil compris) */
  .pile__carte::after { display: none; }
  .pile__corps { background: var(--c-navy); padding-top: clamp(22px, 3vw, 40px); }
}

/* ---------- espaces : bande navy, film de photos, deux offres en rangs ---------- */
.esp { background: var(--c-navy); color: var(--c-white); padding: clamp(64px, 8vw, 120px) 0; overflow: clip; }
.esp__tete { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: start; margin-bottom: var(--space-2xl); } /* titre pleine largeur au-dessus de l'intro : en colonne 7/12 il faisait 5 lignes (règle : 2 à 3 lignes maximum) */
.esp__h2 { color: var(--c-white); }
.esp__texte { font-size: 1.0625rem; }
.film__piste { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
.film__piste::-webkit-scrollbar { display: none; }
.film__diapo { flex: 0 0 min(62vw, 880px); scroll-snap-align: start; }
.film__diapo figure { aspect-ratio: 3 / 2; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-navy-2); transition: opacity var(--dur-base) var(--ease-out); }
.film__diapo:not(.is-active) figure { opacity: .6; }
.film__diapo img { width: 100%; height: 100%; object-fit: cover; }
.film__ctrl { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.film__btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--c-white); color: var(--c-navy); transition: background-color var(--dur-short) var(--ease-out); }
.film__btn svg { width: 20px; height: 20px; }
.film__btn:hover { background: var(--c-teal); }
.film__compteur { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9rem; min-width: 4ch; text-align: center; }
.film__points { display: flex; margin-left: var(--space-md); }
.film__points button { display: grid; place-items: center; width: 24px; height: 24px; } /* cible de 24 px (WCAG 2.5.8), point de 10 px */
.film__points button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-white-line); }
.film__points button[aria-current="true"]::before { background: var(--c-teal); }
.onglets { margin-top: clamp(40px, 6vw, 80px); }
.onglets__liste { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.onglets__onglet { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 6px 22px 6px 8px; border-radius: var(--r-pill); background: var(--c-navy-2); color: var(--c-white); box-shadow: 0 0 0 1px var(--c-white-line); font-weight: 600; font-size: .9375rem; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.onglets__onglet:hover { background: color-mix(in srgb, var(--c-navy-2) 70%, var(--c-white)); }
.onglets__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-white-line); color: var(--c-teal); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.onglets__ico svg { width: 24px; height: 24px; }
.onglets__panneau { display: none; }
.onglets:has(#offre-0:checked) [for="offre-0"], .onglets:has(#offre-1:checked) [for="offre-1"], .onglets:has(#offre-2:checked) [for="offre-2"] { background: var(--c-teal); color: var(--c-navy); box-shadow: none; }
.onglets:has(#offre-0:checked) [for="offre-0"] .onglets__ico, .onglets:has(#offre-1:checked) [for="offre-1"] .onglets__ico, .onglets:has(#offre-2:checked) [for="offre-2"] .onglets__ico { background: var(--c-navy); color: var(--c-teal); }
.onglets:has(#offre-0:checked) #offre-p-0, .onglets:has(#offre-1:checked) #offre-p-1, .onglets:has(#offre-2:checked) #offre-p-2 { display: grid; }
.onglets:has(#offre-0:focus-visible) [for="offre-0"], .onglets:has(#offre-1:focus-visible) [for="offre-1"], .onglets:has(#offre-2:focus-visible) [for="offre-2"] { outline: 3px solid var(--c-teal); outline-offset: 3px; }
@supports not selector(:has(a)) { .onglets__panneau { display: grid; margin-bottom: 24px; } }
.offre { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-navy-2); box-shadow: 0 0 0 1px var(--c-white-line); }
.offre__fig { position: relative; min-height: 440px; } /* hauteur = celle du texte (grille étirée) ; pas de ratio, il déborderait de sa colonne */
.offre__img { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.offre__img.is-active { opacity: 1; }
.offre__img img { width: 100%; height: 100%; object-fit: cover; }
.offre__nav { position: absolute; right: 20px; bottom: 18px; /* à droite : la bannière cookies occupe le bas gauche à la première visite */ display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r-pill); background: rgb(13 24 48 / .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.offre__fleche { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-white); color: var(--c-navy); }
.offre__fleche svg { width: 16px; height: 16px; }
.offre__fleche:hover { background: var(--c-teal); }
.offre__points { display: flex; padding: 0 2px; }
.offre__points button { display: grid; place-items: center; width: 24px; height: 24px; } /* cible de 24 px (WCAG 2.5.8), point de 10 px */
.offre__points button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / .45); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.offre__points button[aria-pressed="true"]::before { background: var(--c-teal); transform: scale(1.2); }
.offre__corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); justify-items: start; align-content: center; padding: clamp(28px, 3.5vw, 52px) clamp(24px, 3.2vw, 48px); } /* colonne bornée : un bouton insécable ne l’élargit plus */
@media (max-width: 639px) { .offre__corps .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-block: 12px; } } /* « Découvrir nos offres de coworking » (359 px) débordait de 9 px à 390 */
.offre__h3 { color: var(--c-white); font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.12; }
.offre__texte { font-size: .9875rem; line-height: 1.6; }
.offre .btn { margin-top: var(--space-xs); }
@media (max-width: 1023px) { .onglets__liste { flex-direction: column; align-items: stretch; } .onglets__onglet { white-space: normal; } .offre { grid-template-columns: minmax(0, 1fr); } .offre__fig { min-height: 0; aspect-ratio: 16 / 10; } }
@media (max-width: 1023px) { .esp__tete { grid-template-columns: minmax(0, 1fr); } .film__diapo { flex-basis: 86vw; } }

/* ---------- salles : mur de photos en trois colonnes + onglets Réunion / Séminaire / Formation (composant des offres sur fond clair, choix de Maxime du 06/10) ---------- */
.sal { padding: clamp(64px, 8vw, 120px) 0; overflow: clip; }
.sal__tete { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl) var(--space-3xl); align-items: start; margin-bottom: var(--space-2xl); }
.sal__texte { font-size: 1.0625rem; }
.wrap.mur { max-width: none; padding-inline: 14px; } /* toutes les galeries en pleine largeur de page, marge extérieure = interstice (Maxime, 07/10) */
.mur--apres { margin-top: clamp(40px, 6vw, 80px); } /* mur placé après les onglets des salles (Maxime, 07/10) */
/* galeries en grille régulière (Maxime, 16/10 : « que le haut et bas soit aligné et qu'il n'y ait pas de différence entre les images, cela évitera les espaces
   blancs non utilisés ») : cadres identiques en 4:3 (format de la plupart des photos ; les autres recadrées au centre), rangées complètes. Colonnes au bureau
   (--mur-cols, et_mur() / murGalerie()) : 4 ou 3 selon le nombre de photos, 2 sous 1024 px ; les photos qui ne complètent pas une rangée sont masquées de la
   grille mais restent dans la visionneuse, annoncées « +N » sur la dernière case. Plus de colonne décalée ni de dérive au défilement. */
.mur__grille { display: grid; grid-template-columns: repeat(var(--mur-cols, 4), minmax(0, 1fr)); gap: 14px; }
.mur__grille > li { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--c-grey); }
.mur__grille a { position: relative; display: block; height: 100%; }
.mur__grille img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.mur__grille a:hover img { transform: scale(1.03); }
.mur__grille a:is([data-plus-d], [data-plus-m])::after { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(30 50 93 / .62); color: var(--c-white); font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 700; letter-spacing: -.01em; }
@media (min-width: 1024px) {
  .mur__hors-d { display: none; }
  .mur__grille a[data-plus-d]::after { content: "+" attr(data-plus-d); content: "+" attr(data-plus-d) / ""; } /* « / "" » : texte de remplacement vide, le nombre n'est pas lu en plus du lien */
}
.onglets--clair .onglets__onglet { background: var(--c-white); color: var(--c-navy); box-shadow: 0 0 0 1px var(--c-navy-line); }
.onglets--clair .onglets__onglet:hover { background: var(--c-grey); }
.onglets--clair .onglets__ico { background: var(--c-teal-wash); color: var(--c-teal-deep); }
.onglets:has(#salle-0:checked) [for="salle-0"], .onglets:has(#salle-1:checked) [for="salle-1"], .onglets:has(#salle-2:checked) [for="salle-2"], .onglets:has(#salle-3:checked) [for="salle-3"] { background: var(--c-teal); color: var(--c-navy); box-shadow: none; }
.onglets:has(#salle-0:checked) [for="salle-0"] .onglets__ico, .onglets:has(#salle-1:checked) [for="salle-1"] .onglets__ico, .onglets:has(#salle-2:checked) [for="salle-2"] .onglets__ico, .onglets:has(#salle-3:checked) [for="salle-3"] .onglets__ico { background: var(--c-navy); color: var(--c-teal); }
.onglets:has(#salle-0:checked) #salle-p-0, .onglets:has(#salle-1:checked) #salle-p-1, .onglets:has(#salle-2:checked) #salle-p-2, .onglets:has(#salle-3:checked) #salle-p-3 { display: grid; }
.onglets:has(#salle-0:focus-visible) [for="salle-0"], .onglets:has(#salle-1:focus-visible) [for="salle-1"], .onglets:has(#salle-2:focus-visible) [for="salle-2"], .onglets:has(#salle-3:focus-visible) [for="salle-3"] { outline: 3px solid var(--c-teal); outline-offset: 3px; }
.offre--clair { background: var(--c-white); box-shadow: var(--shadow-card), 0 0 0 1px var(--c-navy-line); }
.offre--clair .offre__h3 { color: var(--c-navy); }
.offre--clair .offre__texte { color: var(--c-ink); }
.fiche-onglet__lien { margin-top: var(--space-xs); color: var(--c-teal-deep); }
@media (max-width: 1023px) {
  .sal__tete { grid-template-columns: minmax(0, 1fr); }
  .mur__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mur__hors-m { display: none; }
  .mur__grille a[data-plus-m]::after { content: "+" attr(data-plus-m); content: "+" attr(data-plus-m) / ""; }
}

/* ---------- pourquoi : quatre atouts empilés au défilement ---------- */
.pq { background: var(--c-grey); padding: clamp(64px, 8vw, 120px) 0; }
.pq__tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); align-items: start; margin-bottom: var(--space-2xl); }
.pq__texte { margin-top: var(--space-md); font-size: 1.0625rem; } /* pleine largeur de sa colonne, jusqu'au bouton (Maxime 06/10 : « utilise la place disponible ») */
.atouts { display: grid; }
.atout { position: sticky; top: var(--colle); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); min-height: 440px; margin-bottom: 24px; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-white); box-shadow: var(--shadow-float); transform-origin: 50% 0; }
.atout:last-child { margin-bottom: 0; }
.atout__fig { position: relative; } /* la hauteur de la carte vient du texte, jamais de la photo : une photo en portrait est recadrée, la carte reste dans l'écran (Maxime 06/10) */
.atout__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.atout__panneau { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; font-size: .9875rem; }
.atout__num { font-weight: 700; color: var(--c-teal-deep); font-variant-numeric: tabular-nums; margin-bottom: var(--space-sm); }
.atout__h2 { font-size: clamp(1.15rem, 1rem + .6vw, 1.55rem); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.15; margin-bottom: var(--space-md); } /* 2 à 3 lignes maximum dans la colonne 6/12 */
@media (max-width: 1023px) {
  .pq__tete { grid-template-columns: minmax(0, 1fr); }
  .atout { position: relative; top: auto; grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .atout__fig { aspect-ratio: 16 / 9; }
  .atout__panneau { overflow: visible; }
}

/* ---------- avis : bande voilée, UN rang défilant de cartes de même hauteur (texte borné à 7 lignes, « Lire l'avis complet » ouvre un dialogue ; pause au survol, grille fixe en mouvement réduit) ---------- */
.avis { padding: clamp(64px, 8vw, 120px) 0; /* même marge que les autres sections (110 avant le 13/10) */ color: var(--c-white); isolation: isolate; overflow: clip; }
.avis__fond { position: absolute; inset: 0; z-index: -1; }
.avis__fond img { width: 100%; height: 100%; object-fit: cover; }
.avis__fond::after { content: ""; position: absolute; inset: 0; background: var(--c-veil-avis); opacity: .8; }
.avis__tete { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl) var(--space-3xl); align-items: start; margin-bottom: var(--space-2xl); }
.avis__h2 { color: var(--c-white); }
.avis__droite { display: grid; gap: var(--space-lg); justify-items: start; }
.avis__texte { font-size: 1.0625rem; }
.avis__rangs { display: grid; gap: 20px; }
.defile { display: flex; gap: 20px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.defile__piste { display: flex; align-items: stretch; gap: 20px; flex: none; animation: defiler 120s linear infinite; } /* stretch : toutes les cartes du rang à la même hauteur */
.defile--droite .defile__piste { animation-direction: reverse; }
.defile:hover .defile__piste, .defile:focus-within .defile__piste { animation-play-state: paused; }
@keyframes defiler { to { transform: translateX(calc(-100% - 20px)); } }
.avis-carte { display: flex; flex-direction: column; gap: 14px; width: clamp(300px, 28vw, 420px); background: var(--c-white); color: var(--c-ink); border-radius: var(--r-card-l); padding: 24px; }
.avis-carte__tete { display: flex; align-items: center; gap: 12px; }
.avis-carte__nom { font-weight: 700; color: var(--c-navy); line-height: 1.2; }
.avis-carte__texte { font-size: .9375rem; flex: 1; }
.avis-carte__clamp { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; } /* sur un enfant, pas sur l'élément flex (le clamp y serait ignoré) */
.avis-carte__plus { align-self: flex-start; font-size: .875rem; font-weight: 600; color: var(--c-teal-deep); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.avis-carte__source { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-soft); font-weight: 600; }
.avis-dialog { position: relative; border: 0; padding: 0; width: min(92vw, 640px); max-height: 86svh; border-radius: var(--r-card-l); background: var(--c-white); color: var(--c-ink); box-shadow: var(--shadow-float); }
.avis-dialog::backdrop { background: rgb(13 24 48 / .88); }
.avis-dialog__in { display: grid; gap: var(--space-md); padding: clamp(24px, 3vw, 40px); padding-right: clamp(64px, 6vw, 80px); }
.avis-dialog__fermer { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-grey); color: var(--c-navy); }
.avis-dialog__fermer:hover { background: var(--c-teal); }
.avis-dialog__fermer svg { width: 18px; height: 18px; }
.avis-dialog__texte { font-size: 1rem; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .defile { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); mask-image: none; -webkit-mask-image: none; padding-inline: var(--gutter); }
  .defile__piste { display: contents; animation: none; }
  .defile__piste[aria-hidden="true"] { display: none; }
  .avis-carte { width: auto; }
}
@media (max-width: 1023px) { .avis__tete { grid-template-columns: minmax(0, 1fr); } }

/* ---------- pied : titre pleine largeur, puis texte d'accès + coordonnées à gauche et plan pleine hauteur à droite (proposition A choisie par Maxime le 07/10) ---------- */
.pied { background: var(--c-navy); color: var(--c-white); padding: clamp(64px, 8vw, 110px) 0 var(--space-xl); }
.pied__h2 { color: var(--c-white); font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1.06; margin-bottom: var(--space-xl); }
.pied__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl) var(--space-2xl); align-items: stretch; }
.pied__gauche { display: grid; gap: var(--space-xl); align-content: start; }
.pied__texte { font-size: 1rem; }
.pied__adresse { font-style: normal; font-size: 1rem; }
/* fiche d'accès en tête de colonne (pied, série 2, proposition A « coordonnées d'abord » retenue par Maxime le 07/10) : adresse en grand, téléphone + itinéraire, filet, puis le texte */
.pied__fiche { display: grid; gap: var(--space-lg); justify-items: start; }
.pied__gauche > .pied__fiche { padding-bottom: var(--space-xl); border-bottom: 1px solid var(--c-white-line); }
.pied__fiche .pied__adresse { font-size: 1.25rem; line-height: 1.45; }
.pied__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pied__actions .btn svg { width: 1.15em; height: 1.15em; }
.pied__carte { min-height: 420px; } /* colonne étirée : la hauteur vient du texte, le plan (.plan en height 100 %) la remplit */
.pied__carte .plan { border-radius: var(--r-card-l); }
.pied__bas { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--c-white-line); }
.pied__logo { color: var(--c-white); --logo-accent: var(--c-teal); }
.pied__logo svg { height: 72px; width: auto; }
.pied__menu { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pied__menu a { font-size: .875rem; text-decoration: none; }
.pied__menu a:hover { text-decoration: underline; }
.pied__bas-droite { display: flex; align-items: center; gap: var(--space-md); }
.pied__reseau { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--c-white); }
.pied__reseau svg { width: 16px; height: 16px; fill: currentColor; }
.pied__reseau:hover { background: var(--c-white-line); }
@media (max-width: 1023px) { .pied__grid { grid-template-columns: minmax(0, 1fr); } .pied__carte { height: clamp(260px, 60vw, 420px); min-height: 0; } } /* hors colonne étirée, le plan a besoin d'une hauteur explicite (iframe en height 100 %) */

/* ---------- feuille mobile ---------- */
.feuille { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh; background: var(--c-navy); color: var(--c-white); }
.feuille::backdrop { background: rgb(13 24 48 / .6); }
.feuille__in { padding: 18px var(--gutter) var(--space-2xl); display: grid; gap: var(--space-xl); overflow-y: auto; height: 100%; }
.feuille__haut { display: flex; justify-content: space-between; align-items: center; }
.feuille__logo { color: var(--c-white); --logo-accent: var(--c-teal); }
.feuille__logo svg { height: 56px; width: auto; }
.feuille__fermer { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--c-white-line); color: var(--c-white); }
.feuille__fermer svg { width: 20px; height: 20px; }
.fm { display: grid; gap: 6px; }
.fm__item { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.fm__lien { font-size: 1.35rem; font-weight: 600; text-decoration: none; padding: 8px 0; }
.fm__toggle { display: none; }
.fm__sous { grid-column: 1 / -1; display: grid; gap: 2px; padding: 0 0 8px 16px; border-left: 2px solid var(--c-teal); margin-left: 4px; }
.fm__sous a { font-size: 1rem; text-decoration: none; padding: 6px 0; display: block; opacity: .92; }
.fm-sec { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.fm-sec a { font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; font-weight: 500; opacity: .85; }
.feuille__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.feuille__bas { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.feuille__reseau { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-white-line); color: var(--c-white); margin-right: 6px; }
.feuille__reseau svg { width: 16px; height: 16px; fill: currentColor; }
.feuille__langues a { min-width: 40px; height: 30px; font-size: .8rem; } /* menu mobile : même curseur que le bandeau, cible plus grande */

/* pages anglaises (Polylang, html lang="en-GB") : titres de l'accueil plus longs à la ligne qu'en français en mobile (capitales :
   « PROFESSIONALS » coupe autrement) — 4 et 5 lignes à 390 px ; ramenés à 3 au plus. Aucun effet sur les pages françaises. */
@media (max-width: 639px) {
  .pres__tete .h2 { font-size: 1.625rem; } /* 16/10 : aussi en français (« ESPACE TRIANGLE : votre espace professionnel flexible en Normandie » : 4 lignes à 30 px) */
  html[lang^="en"] .esp__h2 { font-size: 1.5rem; }
  /* français (16/10, après la baisse de .h2--xl) : « DES ESPACES DE TRAVAIL PENSÉS POUR TOUS LES PROFESSIONNELS NON LOIN DE CAEN » faisait 5 lignes à 390 px */
  html[lang^="fr"] .esp__h2 { font-size: 1.1875rem; } /* 19 px : 3 lignes à 390 et 375 (5 lignes à 28 px, 4 à 20 px) */
  .pile__h3 { font-size: 1.25rem; } /* « Des équipements conçus pour optimiser vos conditions de travail » : 4 lignes à 375 px (20,5 px) */
}


/* ---------- filigrane : le triangle du logo en très pâle, comme sur la prod (accueil : présentation, espaces), en touches discrètes (Maxime, 16/10) ;
   masque du symbole (assets/svg/symbole.svg) teinté selon le fond ; derrière le contenu, jamais cliquable ---------- */
.filigrane { position: relative; isolation: isolate; }
.filigrane::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: clamp(300px, 34vw, 600px); aspect-ratio: 701.7 / 734.76; background: var(--filigrane, rgb(105 184 171 / .14)); -webkit-mask: url("../svg/symbole.svg") center / contain no-repeat; mask: url("../svg/symbole.svg") center / contain no-repeat; }
.pres.filigrane { overflow: clip; }
.pres.filigrane::before { left: -7vw; top: 50%; transform: translateY(-50%); }
.esp.filigrane::before { --filigrane: rgb(150 190 220 / .07); left: -140px; top: 100px; }
.pied.filigrane { overflow: clip; }
.pied.filigrane::before { --filigrane: rgb(150 190 220 / .05); width: clamp(260px, 26vw, 460px); right: -90px; bottom: -70px; transform: rotate(-8deg); }
@media (max-width: 639px) { .pres.filigrane::before { left: -30vw; width: 90vw; } .esp.filigrane::before { left: -40vw; width: 90vw; } }
/* toutes les pages (Maxime, 16/10 : « intègre le filigrane sur toutes les pages du site FR et EN, cela doit rester subtil comme sur la page d'accueil ») :
   mêmes teintes que l'accueil, posées par les classes des sections (aucun gabarit touché, pages anglaises comprises) — la 1re section après le bandeau photo
   (fond clair ou gris : comme la présentation de l'accueil, à gauche), la section bleu marine de la page (publics, équipements de la salle de séminaire,
   « ce que vous y gagnez », l’équipe : comme les espaces de l’accueil, en haut à gauche), la liste du blog, « À lire aussi » des articles, le bandeau des pages
   légales, la page introuvable ; le pied de page en porte déjà un. overflow: clip : le triangle ne sort ni sur les côtés (pas de défilement latéral) ni sur les sections voisines, sans
   gêner les éléments collants (clip n’est pas un conteneur de défilement). */
:is(main > .panorama--page + section, .pu, .se-inclus--navy, .pr-gagne, .li-equipe, .bla, .ar-suite, .tx-tete, .page-int) { position: relative; isolation: isolate; overflow: clip; }
:is(main > .panorama--page + section, .pu, .se-inclus--navy, .pr-gagne, .li-equipe, .bla, .ar-suite, .tx-tete, .page-int)::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: clamp(300px, 34vw, 600px); aspect-ratio: 701.7 / 734.76; background: var(--filigrane, rgb(105 184 171 / .14)); -webkit-mask: url("../svg/symbole.svg") center / contain no-repeat; mask: url("../svg/symbole.svg") center / contain no-repeat; }
:is(main > .panorama--page + section, .bla, .ar-suite, .page-int)::before { left: -7vw; top: 50%; transform: translateY(-50%); }
:is(.pu, .se-inclus--navy, .pr-gagne, .li-equipe)::before { --filigrane: rgb(150 190 220 / .07); left: -140px; top: 100px; } /* comme les espaces de l’accueil : en haut à gauche, derrière le titre */
.tx-tete::before { --filigrane: rgb(150 190 220 / .07); width: clamp(220px, 20vw, 320px); right: -40px; top: 50%; transform: translateY(-50%) rotate(-8deg); }
@media (max-width: 639px) {
  :is(main > .panorama--page + section, .bla, .ar-suite, .page-int)::before { left: -30vw; width: 90vw; }
  :is(.pu, .se-inclus--navy, .pr-gagne, .li-equipe)::before { left: -40vw; width: 90vw; }
}

/* ---------- « Pourquoi choisir » en rangée latérale (Maxime, 16/10 : « sur cette section, je souhaite un scroll latéral ») : mêmes cartes photo | texte, côte à côte ;
   grand écran : la rangée se fige sous le menu et le défilement la fait glisser (module [data-epingle] de commun.js, celui de la page Événement), barre de progression ;
   mobile, écran bas, mouvement réduit : rangée à faire glisser au doigt, flèches au-dessus à droite ---------- */
.pq .pq-epingle .pq-rail { --evty-carte: min(920px, 84vw); }
.pq-epingle ul.evty-rail__piste { display: flex; gap: 20px; margin: 0; padding: 4px max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); scrollbar-width: none; list-style: none; }
.pq-epingle ul.evty-rail__piste::-webkit-scrollbar { display: none; }
.pq-epingle .evty-rail__ctrl { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 16px; }
.pq-epingle .evty-rail__ctrl .film__btn { box-shadow: 0 0 0 1px var(--c-navy-line); }
.pq-epingle .evty-epingle__barre { display: none; }
.pq .pq-epingle .atout { position: relative; top: auto; flex: 0 0 var(--evty-carte); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 0; margin: 0; scroll-snap-align: start; transform: none; }
@media (min-width: 1024px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .pq-epingle { height: calc(100svh - var(--header-h) + var(--evfl-course, 0px)); }
  .pq-epingle .evty-epingle__colle { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 18px; overflow: hidden; overflow: clip; }
  .pq-epingle .evty-rail { min-width: 0; }
  .pq-epingle .evty-rail__ctrl { display: none; }
  .pq-epingle ul.evty-rail__piste { overflow-x: hidden; scroll-snap-type: none; padding-bottom: 8px; }
  .pq .pq-epingle .atout { height: min(540px, calc(100svh - var(--header-h) - 110px)); }
  .pq-epingle .evty-epingle__barre { display: block; width: 100%; }
  .pq-epingle .evty-epingle__barre::before { content: ""; display: block; height: 3px; margin-bottom: -3px; border-radius: 3px; background: var(--c-navy-line); }
  .pq-epingle .evty-epingle__barre span { display: block; height: 3px; border-radius: 3px; background: var(--c-teal); transform: scaleX(0); transform-origin: left; }
}
@media (max-width: 1023px) { .pq .pq-epingle .atout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; height: auto; } .pq .pq-epingle .atout__fig { aspect-ratio: 16 / 10; } .pq .pq-epingle .atout__panneau { justify-content: flex-start; } } /* cartes à la hauteur de la plus longue : texte calé en haut, sous la photo (pas de vide entre les deux) */
@media (max-width: 639px) { .pq .pq-epingle .pq-rail { --evty-carte: 88vw; } .pq .atout__h2 { font-size: 1.0625rem; } } /* titres des cartes : 3 lignes au plus à 375 */


/* ================= pages intérieures (maquettes/assets/css/pages.css) ================= */
/* Pages intérieures · DA Espace Triangle (jetons de base.css, composants de m2.css : héros panorama, scène .offre__fig, mur, onglets, pied). Chargée après m2.css.
   Règles acquises sur l'accueil : titres sur 2 à 3 lignes maximum et en pleine largeur, intros à 100 % de leur colonne, blocs collants à 32 px sous la barre (var(--colle)), commandes de photo en bas à droite. */

/* ---------- héros de page : même composant que l'accueil, moins haut, une seule photo (le sujet de la page) ---------- */
/* hauteur : 92 % de l'écran (Maxime, 08/10, « agrandir un peu plus les sections hero des pages validées », proposition B parmi 86 / 92 / 100 %) : 828 px à 1440 × 900 ; avant min(78svh, 760px) = 702 px */
.panorama--page { min-height: min(92svh, 920px); }
.panorama--page .panorama__in { grid-template-columns: minmax(0, 1fr); padding-top: 170px; }
/* chapeau élargi (Maxime, 07/10, capture annotée sur « au mois » : « élargis un peu plus le container pour diminuer le nombre de lignes ») : 768 → 1 120 px, 6 → 4 lignes ; pages intérieures seulement */
.panorama--page .panorama__texte { max-width: min(100%, 1120px); }
.panorama--page .panorama__lede { max-width: none; }
/* halo un peu plus dense sur l'anneau extérieur (08/10) : chapeau de Bureau partagé à 1366 × 657, fin de la première ligne sur le « B3 » dépoli, 4,47:1 au pire pixel → 4,96:1 (.42 → .48 à 60 %) */
.panorama--page .panorama__texte::before { background: radial-gradient(ellipse at 42% 56%, rgb(13 24 48 / .82) 0%, rgb(13 24 48 / .72) 34%, rgb(13 24 48 / .48) 60%, rgb(13 24 48 / 0) 78%); }
/* menu blanc sur la photo : le dégradé de la prod (noir .73 → 0 sur 183 px) ne suffit pas sur une photo claire (Bureau partagé : « Événement professionnel » à 2,6:1 au pire pixel ;
   à la journée : tous les liens sous 4,5:1). Halo plus dense sous la barre, pages intérieures seulement (maquette .page-int, thème .et-page-heros) ; l'accueil validé garde le sien. */
:is(.page-int, .et-page-heros) .hd::before { height: 230px; background: linear-gradient(180deg, rgb(13 24 48 / .82) 0, rgb(13 24 48 / .72) 120px, rgb(13 24 48 / .3) 175px, rgb(13 24 48 / 0) 100%); }

/* ---------- pourquoi louer : titre puis texte en une colonne pleine largeur (jamais deux colonnes de texte, préférence de Maxime) ---------- */
.pl { padding: clamp(64px, 8vw, 120px) 0; }
.pl__texte { margin-top: var(--space-xl); font-size: 1.0625rem; }

/* ---------- formules : bande grise, scène photo (lecture auto, commandes en bas à droite) + trois fiches ---------- */
.fo { background: var(--c-grey); padding: clamp(64px, 8vw, 120px) 0; }
.fo__tete { display: grid; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.fo__intro { font-size: 1.0625rem; }
.fo__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: stretch; }
.fo__scene { position: relative; min-height: 420px; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-navy-2); }
.fo__fig { position: absolute; inset: 0; min-height: 0; } /* la hauteur vient de la colonne des fiches, jamais de la photo */
.fo__fiches { display: grid; gap: 16px; align-content: start; }
.fiche-fo { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-lg); padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-card); background: var(--c-white); box-shadow: var(--shadow-card), 0 0 0 1px var(--c-navy-line); }
.fiche-fo__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--c-teal-wash); color: var(--c-teal-deep); }
.fiche-fo__ico svg { width: 32px; height: 32px; }
.fiche-fo__h3 { font-size: 1.1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; }
.fiche-fo__texte { margin-top: var(--space-xs); font-size: .9875rem; }
.fiche-fo__lien { margin-top: var(--space-sm); color: var(--c-teal-deep); }
/* formules en accordéon (proposition A retenue par Maxime le 07/10 : « je trouve cette section très longue », 1 380 → 1 026 px) : une seule formule ouverte à la fois, details[name] sans JS */
.acc { display: grid; gap: 12px; align-content: start; }
.acc__item { border-radius: var(--r-card); background: var(--c-white); box-shadow: var(--shadow-card), 0 0 0 1px var(--c-navy-line); }
.acc__tete { display: grid; grid-template-columns: 56px minmax(0, 1fr) 28px; gap: var(--space-lg); align-items: center; padding: 16px 22px; cursor: pointer; list-style: none; }
.acc__tete::-webkit-details-marker { display: none; }
.acc__tete:hover .fiche-fo__h3 { color: var(--c-teal-deep); }
.acc__tete:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 3px; border-radius: var(--r-card); }
.acc__chevron { display: grid; place-items: center; width: 28px; height: 28px; color: var(--c-teal-deep); transition: transform var(--dur-base) var(--ease-out); }
.acc__chevron svg { width: 20px; height: 20px; }
.acc__item[open] .acc__chevron { transform: rotate(180deg); }
.acc__corps { padding: 0 22px 24px calc(22px + 56px + var(--space-lg)); }
.acc__corps .fiche-fo__texte { margin-top: 0; }

/* ---------- galerie : en-tête titre | texte + bouton, puis le mur de photos de l'accueil ---------- */
.ga { padding: clamp(64px, 8vw, 120px) 0; overflow: clip; }
.ga__tete { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl) var(--space-3xl); align-items: start; margin-bottom: var(--space-2xl); }
.ga__droite { display: grid; gap: var(--space-lg); justify-items: start; font-size: 1.0625rem; }

/* ---------- publics : chapitre navy, onglets verticaux (picto + nom) à gauche, panneau du public survolé à droite ---------- */
.pu { background: var(--c-navy); color: var(--c-white); padding: clamp(64px, 8vw, 120px) 0; overflow: clip; }
.pu__h2 { color: var(--c-white); }
.pu__tete { margin-bottom: var(--space-2xl); }
.pu__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; } /* la colonne des onglets est centrée sur la hauteur du panneau (Maxime, 07/10) */
.pu__onglets { display: grid; gap: 10px; }
.pu__onglet { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 8px 20px 8px 8px; border-radius: var(--r-pill); background: var(--c-navy-2); color: var(--c-white); box-shadow: 0 0 0 1px var(--c-white-line); text-align: left; font-weight: 600; font-size: .9375rem; text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.pu__onglet:hover { background: color-mix(in srgb, var(--c-navy-2) 70%, var(--c-white)); }
.pu__onglet[aria-selected="true"] { background: var(--c-teal); color: var(--c-navy); box-shadow: none; }
.pu__ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--c-white-line); color: var(--c-teal); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.pu__ico svg { width: 24px; height: 24px; }
.pu__onglet[aria-selected="true"] .pu__ico { background: var(--c-navy); color: var(--c-teal); }
.pu__panneaux { display: grid; } /* tous les panneaux dans la même cellule : la hauteur est celle du plus long, rien ne saute au survol */
.pu__panneau { grid-area: 1 / 1; display: grid; align-content: start; gap: var(--space-md); padding: clamp(28px, 3vw, 44px); border-radius: var(--r-card-l); background: var(--c-navy-2); box-shadow: 0 0 0 1px var(--c-white-line); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s var(--dur-base); }
.pu__panneau.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pu__ico--grand { width: 64px; height: 64px; }
.pu__ico--grand svg { width: 34px; height: 34px; }
.pu__h3 { color: var(--c-white); font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.15; }
.pu__texte { font-size: 1.0625rem; line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .pu__panneau { transition: none; transform: none; } }

/* ---------- pourquoi choisir (proposition B retenue par Maxime le 07/10) : photo de la gare collée à gauche pendant la lecture, intro + repères en rangs numérotés filetés + conclusion à droite, réservation en bande navy ---------- */
.pc { padding: clamp(64px, 8vw, 120px) 0; }
.pc__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; margin-top: var(--space-xl); }
.pc__photo { grid-row: 1 / span 2; position: sticky; top: var(--colle); aspect-ratio: 1 / 1; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-grey); } /* colonne non étirée (align-items: start) : ratio natif 1:1 sans débordement ; la photo couvre les deux rangées (texte, puis réservation) : la zone de collage d'un élément de grille est sa zone de grille, elle reste donc collée à 32 px sous la barre jusqu'à la fin de la section */
.pc__photo img { width: 100%; height: 100%; object-fit: cover; }
.pc__intro, .pc__conclusion { font-size: 1.0625rem; }
.pc__conclusion { margin-top: var(--space-xl); }
:is(ol, ul).rangs { margin: var(--space-xl) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--c-navy-line); }
.rang { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-lg); padding: 18px 0; border-bottom: 1px solid var(--c-navy-line); }
.rang__num { font-weight: 700; color: var(--c-teal-deep); font-size: 1.25rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.rang__tete { font-weight: 700; color: var(--c-navy); }
.rang__desc { font-size: .9875rem; }
.pc-res { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-lg) var(--space-2xl); align-items: center; margin-top: clamp(40px, 5vw, 64px); padding: clamp(28px, 3.5vw, 48px); border-radius: var(--r-card-l); background: var(--c-navy); color: var(--c-white); }
.pc-res__h2 { color: var(--c-white); font-size: clamp(1.4rem, 1rem + 1.2vw, 2.1rem); line-height: 1.1; }
.pc-res__droite { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); justify-items: start; font-size: 1.0625rem; } /* colonne bornée : un bouton insécable ne l'élargit plus au-delà de l'écran */
.pc__grille .pc-res { grid-column: 2; margin-top: 0; grid-template-columns: minmax(0, 1fr); } /* dans la colonne de droite, sous la conclusion : titre, texte et bouton empilés */

/* ---------- tarifs : bande grise, onglets radio (composant des offres), trois fiches de prix par onglet ---------- */
.ta { background: var(--c-grey); padding: clamp(64px, 8vw, 120px) 0; }
.ta__tete { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.ta__sous { font-size: 1.0625rem; color: var(--c-ink-soft); }
.ta__onglets { margin-top: 0; }
.onglets__onglet--texte { padding: 6px 24px; }
.onglets:has(#tarif-0:checked) [for="tarif-0"], .onglets:has(#tarif-1:checked) [for="tarif-1"], .onglets:has(#tarif-2:checked) [for="tarif-2"] { background: var(--c-teal); color: var(--c-navy); box-shadow: none; }
.onglets:has(#tarif-0:checked) #tarif-p-0, .onglets:has(#tarif-1:checked) #tarif-p-1, .onglets:has(#tarif-2:checked) #tarif-p-2 { display: grid; }
.onglets:has(#tarif-0:focus-visible) [for="tarif-0"], .onglets:has(#tarif-1:focus-visible) [for="tarif-1"], .onglets:has(#tarif-2:focus-visible) [for="tarif-2"] { outline: 3px solid var(--c-teal); outline-offset: 3px; }
.ta__panneau { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.prix { display: grid; gap: 6px; padding: clamp(24px, 2.6vw, 32px); border-radius: var(--r-card); background: var(--c-white); box-shadow: var(--shadow-card), 0 0 0 1px var(--c-navy-line); text-align: center; }
.prix__nom { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-navy); }
.prix__detail { color: var(--c-ink-soft); font-size: .9375rem; }
.prix__montant { margin-top: var(--space-sm); font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.6rem); font-weight: 700; color: var(--c-navy); line-height: 1; }
.ta__note { margin-top: var(--space-md); font-size: .875rem; color: var(--c-ink-soft); text-align: right; }
.ta__cta { margin-top: var(--space-xl); }

/* ==================== pages « Location de bureau » à l'heure, à la journée, au mois (07/10) ====================
   Un seul modèle, une disposition propre à chaque page pour « Pourquoi louer », « Ce qui est inclus » et « Exemples d'usages » (pages sœurs ≠ copie) ;
   publics en onglets au survol, galerie en mur pleine largeur, avis de l'accueil et réservation communs. Titre toujours en pleine largeur, puis l'intro à 100 %. */
.lo { padding: clamp(64px, 8vw, 120px) 0; }
.lo--gris { background: var(--c-grey); }
.lo__tete { display: grid; gap: var(--space-lg); justify-items: start; margin-bottom: var(--space-2xl); }
.lo__intro { font-size: 1.0625rem; }
.lo__cta { margin-top: var(--space-2xl); }
/* publics : intro et bouton sous le titre du chapitre navy */
.pu__tete { display: grid; gap: var(--space-lg); justify-items: start; }
.pu__intro { font-size: 1.0625rem; }
.pu__fin { margin-top: var(--space-xl); font-size: 1.0625rem; } /* conclusion facultative sous les onglets (page anglaise de la salle de réunion) */
/* « Pourquoi louer » (à l'heure) : diptyques alternés (proposition C retenue par Maxime le 07/10, « je veux que tu retravailles cette section ») ; les cartes photo d'avant sont sous .pq-avant dans pages-pq-variantes.css */
ol.pq-dipt { display: grid; gap: clamp(24px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.pq-dipt__rang { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.pq-dipt__rang:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } /* la photo garde la colonne 5/12 quand elle passe à droite */
.pq-dipt__rang:nth-child(even) .pq-dipt__fig { order: 2; }
.pq-dipt__fig { aspect-ratio: 3 / 2; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-white); } /* rangée non étirée (align-items: center) : le ratio suit la largeur */
.pq-dipt__fig img { width: 100%; height: 100%; object-fit: cover; }
.pq-dipt__corps { display: grid; gap: var(--space-md); justify-items: start; }
.pq-dipt__num { font-weight: 700; color: var(--c-teal-deep); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.pq-dipt__h3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.15; }
.pq-dipt__texte { font-size: 1.0625rem; }
/* « Pourquoi louer » (au mois) : accordéon de l'offre, numéro à la place du picto */
.acc__num { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.fo__cta { margin-top: var(--space-xl); }
/* « Ce qui est inclus » (à l'heure) : tuiles à picto ; (au mois) : fiches navy ; grille de 6 : trois par rang, les deux dernières plus larges quand il y en a cinq */
ol.tuiles, .lo-navy { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
ol.tuiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* quatre textes longs (300 à 380 signes) : deux par rang, picto à gauche, plutôt que quatre colonnes étroites */
.tuile, .lo-navy > .fiche-navy { grid-column: span 2; }
ol.tuiles--4 .tuile { grid-column: auto; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--space-lg); }
ol.tuiles--4 .tuile__ico { grid-row: span 2; margin-bottom: 0; }
:is(.tuile, .lo-navy > .fiche-navy, .repere):is(:nth-child(4):nth-last-child(2), :nth-child(5):nth-last-child(1)) { grid-column: span 3; } /* cinq éléments exactement : 3 + 2 */
.tuile { display: grid; align-content: start; gap: var(--space-sm); padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-card-l); background: var(--c-grey); }
.tuile__ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--space-xs); border-radius: 14px; background: var(--c-teal-wash); color: var(--c-teal-deep); }
.tuile__ico svg { width: 30px; height: 30px; }
.tuile__h3 { font-size: 1.0625rem; font-weight: 700; color: var(--c-navy); line-height: 1.3; }
.tuile__texte { font-size: .9875rem; }
.fiche-navy { display: grid; justify-items: center; align-content: start; gap: var(--space-md); padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-card-l); background: var(--c-navy); color: var(--c-white); text-align: center; }
.fiche-navy__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-white-line); color: var(--c-teal); }
.fiche-navy__ico svg { width: 32px; height: 32px; }
.fiche-navy__h3 { color: var(--c-white); font-size: 1.1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; }
.fiche-navy__texte { font-size: .9875rem; line-height: 1.55; }
/* « Ce qui est inclus » (à la journée) : photo collée + rangs à picto (composant « Pourquoi choisir » de Bureau partagé) */
.rang__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--c-teal-wash); color: var(--c-teal-deep); }
.rang__ico svg { width: 26px; height: 26px; }
h3.rang__tete { font-size: 1.0625rem; line-height: 1.35; text-transform: none; letter-spacing: 0; }
.pc__cta { margin-top: var(--space-xl); }
/* « Faites évoluer votre formule » (proposition B retenue par Maxime le 07/10 : « pas fan de cette section ») : onglets radio sans JS, composant des offres de l'accueil,
   un onglet par formule sœur, panneau photo de la page visée | titre, texte, bouton. Les cartes d'avant restent sous .ev--avant dans pages-ev-variantes.css. */
.ev__onglets { margin-top: 0; }
.onglets:has(#evoluer-0:checked) [for="evoluer-0"], .onglets:has(#evoluer-1:checked) [for="evoluer-1"], .onglets:has(#evoluer-2:checked) [for="evoluer-2"] { background: var(--c-teal); color: var(--c-navy); box-shadow: none; }
.onglets:has(#evoluer-0:checked) #evoluer-p-0, .onglets:has(#evoluer-1:checked) #evoluer-p-1, .onglets:has(#evoluer-2:checked) #evoluer-p-2 { display: grid; }
.onglets:has(#evoluer-0:focus-visible) [for="evoluer-0"], .onglets:has(#evoluer-1:focus-visible) [for="evoluer-1"], .onglets:has(#evoluer-2:focus-visible) [for="evoluer-2"] { outline: 3px solid var(--c-teal); outline-offset: 3px; }
.ev .offre__fig { min-height: 420px; }
/* « Exemples d'usages » : repères numérotés (à l'heure, au mois) ; rangs numérotés sur deux colonnes (à la journée) */
ol.reperes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.repere { grid-column: span 2; display: grid; align-content: start; gap: 8px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-card-l); background: var(--c-grey); }
.repere__num { font-weight: 700; color: var(--c-teal-deep); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.repere__h3 { font-weight: 700; color: var(--c-navy); font-size: 1.0625rem; line-height: 1.3; text-transform: none; letter-spacing: 0; }
.repere__texte { font-size: .9875rem; }
:is(ol, ul).rangs--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); margin-top: 0; border-top: 0; }
:is(ol, ul).rangs--2 .rang:nth-child(-n+2) { border-top: 1px solid var(--c-navy-line); }
/* avis (composant de l'accueil) : titre seul en pleine largeur ; réservation : carte navy dans une section claire */
.avis__tete--seule { grid-template-columns: minmax(0, 1fr); }
.lo-res .pc-res { margin-top: 0; }

@media (max-width: 1023px) {
  .fo__grid, .ga__tete, .pc__grille, .pc-res, .pu__grid { grid-template-columns: minmax(0, 1fr); }
  .pu__onglets { display: flex; flex-wrap: wrap; gap: 8px; }
  .pu__onglet { width: auto; min-height: 48px; font-size: .8125rem; }
  .pu__onglet .pu__ico { width: 34px; height: 34px; }
  .pu__onglet .pu__ico svg { width: 20px; height: 20px; }
  .fo__scene { min-height: 0; aspect-ratio: 4 / 3; }
  .fo__fig { aspect-ratio: auto; } /* le composant des offres impose 16/10 à sa figure sous 1024 px ; ici la figure remplit la scène 4/3 */
  .pc__photo { position: relative; top: auto; grid-row: auto; } /* relative et non static (13/10) : la figure des photos défilantes, en absolu, couvrait toute la section sur mobile (salle de réunion, séminaire) ; top: auto, sinon le décalage collant (--colle) la pousse de 104 px sur le texte */
  .pc__grille .pc-res { grid-column: auto; }
  .ta__panneau { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 639px) {
  .acc__tete { grid-template-columns: 44px minmax(0, 1fr) 24px; gap: var(--space-md); padding: 14px 16px; }
  .acc__tete .fiche-fo__ico { width: 44px; height: 44px; }
  .acc__corps { padding: 0 16px 20px; }
  .fiche-fo { grid-template-columns: minmax(0, 1fr); }
  /* longs libellés de bouton (« Réserver votre bureau dès maintenant ») : passage à la ligne autorisé sur petit écran, centré */
  :is(.page-int, .et-page-heros) main .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-block: 12px; } /* maquette (.page-int) et thème (.et-page-heros) ; l'accueil (.et-accueil) n'est pas concerné */
}

/* pages « Location de bureau » : tablette puis mobile */
@media (max-width: 1023px) {
  .pq-dipt__rang, .pq-dipt__rang:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .pq-dipt__rang:nth-child(even) .pq-dipt__fig { order: 0; }
  ol.tuiles, ol.tuiles--4, .lo-navy, ol.reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuile, ol.tuiles--4 .tuile, .lo-navy > .fiche-navy, .repere, :is(.tuile, .lo-navy > .fiche-navy, .repere):is(:nth-child(4):nth-last-child(2), :nth-child(5):nth-last-child(1)) { grid-column: span 1; }
  :is(ol.tuiles, .lo-navy, ol.reperes) > :is(.tuile, .fiche-navy, .repere):last-child:nth-child(odd) { grid-column: 1 / -1; } /* plus spécifique que la remise à 1 colonne ci-dessus */
  .ev .offre__fig { min-height: 0; } /* sous 1024 px, le composant des offres passe la photo en 16/10 au-dessus du texte */
}
@media (max-width: 639px) {
  ol.tuiles, ol.tuiles--4, .lo-navy, ol.reperes, :is(ol, ul).rangs--2 { grid-template-columns: minmax(0, 1fr); }
  :is(ol, ul).rangs--2 .rang:nth-child(2) { border-top: 0; }
  .panorama--page .panorama__lede { font-size: 1rem; } /* chapeaux de la prod longs (à l'heure : deux paragraphes) : le héros tient dans un écran de 844 px */
  /* voile porté par le texte (08/10) : sur mobile, le chapeau couvre presque tout le héros et le halo elliptique s'éteint vers le titre (au mois, héros à 92 % : titre sur la fenêtre claire, 1,94:1).
     Bande verticale à .55 sous tout le bloc, fondue sur les 64 px au-dessus du titre (pas de bord net). Pire pixel, 5 pages, 390 et 375 px : titre ≥ 5,05:1, chapeau ≥ 5,15:1 (.45 ne suffit pas : 3,94:1). L'accueil garde son halo. */
  /* bas prolongé au-delà du héros (rogné par overflow: clip) : à -24px il s'arrêtait 18 px au-dessus du bas du héros, bord net (08/10) ; le masque de m2.css ne s'applique pas à cette bande, fondue par son propre dégradé */
  .panorama--page .panorama__texte::before { inset: -64px -16px -80px; background: linear-gradient(180deg, rgb(13 24 48 / 0) 0, rgb(13 24 48 / .55) 64px, rgb(13 24 48 / .55) 100%); -webkit-mask-image: none; mask-image: none; }
  /* accordéon numéroté (au mois) : titres longs (63 signes) en 3 lignes au plus ; le numéro, décoratif, laisse sa place au titre */
  .acc__tete:has(> .acc__num) { grid-template-columns: minmax(0, 1fr) 24px; }
  .acc__tete > .acc__num { display: none; }
  .acc__tete:has(> .acc__num) .fiche-fo__h3 { font-size: .95rem; letter-spacing: 0; }
}

/* ==================== page « Coworking à Bayeux » (07/10) : onglets des formules sous l'intro, liste cochée (liste non ordonnée : les règles des rangs visent ol et ul) ==================== */
.cw__onglets { margin-top: 0; }
.coches .rang { align-items: center; }

/* titres de section sur mobile, pages intérieures (07/10) : à 30 / 34 px, les titres longs de la prod passaient sur 4 lignes à 390 px (« Quelle formule de coworking vous correspond ? », « Pourquoi louer un bureau au mois à l’ESPACE TRIANGLE ? »…) ; règle d’or : 3 lignes au plus. L’accueil validé n’est pas concerné. */
@media (max-width: 639px) {
  :is(.page-int, .et-page-heros) main .h2 { font-size: 1.5rem; }
  :is(.page-int, .et-page-heros) main .h2--xl { font-size: 1.625rem; }
  .pu__h3 { font-size: 1.0625rem; } /* au mois, à 375 px : « Comptables externalisés & assistants indépendants » sur 4 lignes */
  .panorama--page .panorama__h1 { font-size: 1.75rem; } /* H1 de 46 signes en capitales (à l’heure) : 3 lignes à 375 px */
  :is(.page-int, .et-page-heros) .pile__h3 { font-size: 1.15rem; } /* cartes collantes (à la journée) : titre de 54 signes en 3 lignes */
}

/* ==================== « Ce qui est inclus » (à l'heure) : rangées pleine largeur (deuxième série, proposition A retenue par Maxime le 07/10) ====================
   Une rangée par élément : picto et titre sur 4/12, texte sur 8/12, filets entre les rangées ; tout le texte visible, sans interaction. */
ol.in-rangees { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-navy-line); }
.in-rangees__el { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-lg) var(--space-3xl); align-items: start; padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--c-navy-line); }
.in-rangees__tete { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-md); align-items: center; }
.in-rangees__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-teal-wash); color: var(--c-teal-deep); }
.in-rangees__ico svg { width: 28px; height: 28px; }
.in-rangees__h3 { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.2; }
.in-rangees__texte { font-size: 1.0625rem; }
@media (max-width: 1023px) {
  .in-rangees__el { grid-template-columns: minmax(0, 1fr); }
}

/* ==================== page « Coworking à l'heure » (08/10) : composants qu'aucune page sœur n'utilise (règles reprises des propositions non retenues ailleurs) ====================
   « Pourquoi choisir » en cartes bleu marine, photo en haut et numéro (Maxime, 26/10 : proposition C) ; « Ce qui est inclus » en une rangée à trait turquoise (Maxime, 26/10 : proposition A) ;
   « Exemples d'usages » en fiches navy numérotées deux par rang ; « Faites évoluer » en une rangée photo | texte. */
/* photo, numéro, titre et texte sur les quatre rangs de la grille (subgrid) : titres et textes alignés d’une carte à l’autre quelle que soit la longueur du titre */
.pq-plein { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); gap: 24px; }
.pq-plein__carte { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-items: start; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-navy); color: var(--c-white); }
.pq-plein__fig { grid-row: 1; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.pq-plein__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.pq-plein__carte:hover .pq-plein__fig img { transform: scale(1.03); }
.pq-plein__corps { display: contents; }
.pq-plein__num { grid-row: 2; padding: var(--space-lg) clamp(22px, 2.4vw, 32px) 0; font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--c-teal); }
.pq-plein__h3 { grid-row: 3; padding: var(--space-sm) clamp(22px, 2.4vw, 32px); color: var(--c-white); font-size: clamp(1rem, .55rem + .7vw, 1.2rem); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.15; } /* titres de la prod de 54 et 69 signes en capitales : 3 lignes au plus dans une carte de 312 px (1440) à 245 px (1024) */
.pq-plein__texte { grid-row: 4; padding: 0 clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px); font-size: .9875rem; line-height: 1.6; color: rgb(255 255 255 / .86); }
@media (min-width: 1024px) and (max-width: 1199px) { .pq-plein { gap: 16px; } } /* trois cartes de 300 px : un titre de 54 signes passait à 4 lignes à 1024 */
/* colonnes selon le nombre d’éléments (in-croix--nN posé par le gabarit) : 4 par défaut, 3 ou 2 quand il y en a 3 ou 2, jamais de case vide */
ol.in-croix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) clamp(24px, 1.8vw, 32px); margin: 0; padding: 0; list-style: none; }
ol.in-croix--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
ol.in-croix--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.in-croix__el { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 2px solid var(--c-teal); } /* icône, titre, texte sur trois rangs communs : les textes partent à la même hauteur */
.in-croix__ico { justify-self: start; margin-bottom: var(--space-xs); color: var(--c-teal-deep); }
.in-croix__ico svg { width: 40px; height: 40px; }
.in-croix__h3 { font-size: clamp(1rem, .8rem + .4vw, 1.1rem); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.15; }
.in-croix__texte { font-size: 1rem; }
@media (max-width: 1279px) { ol.in-croix:not(.in-croix--n3) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* quatre colonnes de 260 px : le titre anglais de 54 signes passait à 4 lignes à 1200 */
@media (max-width: 767px) { ol.in-croix--n3 { grid-template-columns: minmax(0, 1fr); } }
.lo-navy--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lo-navy--2 > .fiche-navy { grid-column: auto; justify-items: start; text-align: left; }
.fiche-navy__num { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); font-weight: 700; line-height: 1; color: var(--c-mint); font-variant-numeric: tabular-nums; }
ol.ev-rangs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-navy-line); }
.ev-rang { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: center; padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--c-navy-line); }
.ev-rang__fig { aspect-ratio: 3 / 2; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-white); } /* rangée non étirée (align-items: center) : le ratio suit la largeur */
.ev-rang__fig img { width: 100%; height: 100%; object-fit: cover; }
.ev-rang__corps { display: grid; gap: var(--space-md); justify-items: start; }
.ev-rang__h3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.15; }
.ev-rang__texte { font-size: 1.0625rem; }
.ev-rang__lien { display: inline; color: var(--c-teal-deep); } /* lien sur deux lignes : la flèche suit le dernier mot */
.ch-evoluer__fin { margin-top: var(--space-xl); font-size: 1.0625rem; }
@media (max-width: 1023px) {
  .pq-plein { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .pq-plein__carte { grid-row: auto; grid-template-rows: auto auto auto auto; }
  .ev-rang { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}
@media (max-width: 639px) {
  .lo-navy--2 { grid-template-columns: minmax(0, 1fr); }
  ol.in-croix:not(.in-croix--n3) { grid-template-columns: minmax(0, 1fr); }
}

/* ==================== pages « Salle de formation / Salle de réunion » (08/10) : un gabarit, une disposition par page (page-salle.mjs › PAGES_SALLE) ====================
   formation : « Pourquoi louer » en diptyques alternés, « Ce qui est inclus » en photos défilantes + accordéon à pictos (composants déjà dans cette feuille),
   services en colonne collée (intro + bouton) | liste filetée à grands pictos (règles reprises de la proposition A de « Ce qui est inclus », jamais en ligne ailleurs). */
.in-colle { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--space-3xl); align-items: start; }
.in-colle__gauche { position: sticky; top: var(--colle); display: grid; gap: var(--space-lg); justify-items: start; } /* pas de data-reveal sur un élément collant */
ol.in-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-navy-line); }
.in-liste__el { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-lg); padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--c-navy-line); }
.in-liste__ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--c-teal-wash); color: var(--c-teal-deep); }
.in-liste__ico svg { width: 36px; height: 36px; }
.in-liste__h3 { margin-bottom: var(--space-sm); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.2; }
.in-liste__texte { font-size: 1rem; }
@media (max-width: 1023px) {
  .in-colle { grid-template-columns: minmax(0, 1fr); }
  .in-colle__gauche { position: static; }
}
@media (max-width: 639px) {
  .in-liste__el { grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-md); }
  .in-liste__ico { width: 56px; height: 56px; }
  .in-liste__ico svg { width: 28px; height: 28px; }
}
@media (max-width: 639px) {
  /* accordéon « Ce qui est inclus » (salles) : titres de 47 à 51 signes en capitales, 4 lignes à 375 px à côté du picto ; le picto, décoratif, laisse sa place au titre (comme l'accordéon numéroté de « au mois ») */
  .sa-inclus .acc__tete { grid-template-columns: minmax(0, 1fr) 24px; }
  .sa-inclus .acc__tete > .fiche-fo__ico { display: none; }
  .sa-inclus .fiche-fo__h3 { font-size: .95rem; letter-spacing: 0; }
}
/* « Ce qui est inclus » (salles) : cartes en haut, collantes le long de la photo (Maxime, 08/10 : « je veux que les cards soient en haut et descendent en mode sticky » ;
   le centrage sur la photo essayé juste avant ne lui convenait pas). Éléments fermés à l'arrivée (comme la prod) ; photo à la hauteur de la colonne la plus haute
   (un élément ouvert, --acc-photo mesuré par commun.js) : elle ne bouge pas quand on déplie ; la colonne colle à 32 px sous la barre (var(--colle)) tant que la photo défile.
   Colonne sans data-reveal (une translation fausserait sa position collée). */
@media (min-width: 1024px) {
  [data-acc-colle] { align-items: start; }
  [data-acc-colle] > .fo__scene { height: var(--acc-photo, 640px); }
  [data-acc-colle] > :last-child { position: sticky; top: var(--colle); }
}
/* salle de réunion, formats : quatre tuiles numérotées sur un rang dès 1280 px (la grille de 6 en mettait trois puis une seule) ; de 1024 à 1279 px deux par rang ; sous 1024 px, les règles des tuiles s'appliquent (2 puis 1 par rang) */
@media (min-width: 1024px) and (max-width: 1279px) { ol.reperes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ol.reperes--4 > .repere { grid-column: auto; } }
@media (min-width: 1280px) { /* à 1024–1279 px, une tuile de 177 à 191 px mettait « Entretiens d’embauche & sessions de recrutement » sur 4 lignes : deux par rang en dessous */
  ol.reperes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  ol.reperes--4 > .repere { grid-column: auto; }
}
/* salle de réunion, titres à 3 lignes au plus (règle d'or) sans toucher aux pages validées qui partagent ces composants :
   cartes collantes (« Une solution flexible pour les professionnels, indépendants et entreprises », 73 signes en capitales : 4 lignes à 1024–1100 et à 375–390 px),
   rangées des options (titres de 48 et 54 signes à côté du picto : 4 lignes à 1024–1100 px), titre « Des options supplémentaires… » (4 lignes à 375 px) */
.sa-pourquoi .pile__h3 { font-size: clamp(1.25rem, .45rem + 1.55vw, 1.8rem); }
.sa-services--rangees .in-rangees__h3 { font-size: clamp(.95rem, .8rem + .35vw, 1.2rem); }
@media (max-width: 639px) {
  .sa-pourquoi .pile__h3 { font-size: 1rem; }
  :is(.page-int, .et-page-heros) main .sa-services--rangees .h2 { font-size: 1.375rem; } /* plus spécifique que la règle des titres mobiles des pages intérieures */
}

/* salle de réunion, « Les formats de réunions » : mosaïque (proposition C retenue par Maxime le 09/10, « retravailler cette section ») — le premier format en grande carte navy à gauche,
   les trois autres en cartes blanches empilées à droite (règles reprises de pages-ca-variantes.css) ; les tuiles grises d'avant étaient invisibles sur la section grise */
ol.ca-mos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-auto-rows: auto; gap: 20px; margin: 0; padding: 0; list-style: none; }
.ca-mos__une { grid-row: 1 / span 3; display: grid; align-content: end; gap: var(--space-lg); padding: clamp(28px, 3.5vw, 48px); border-radius: var(--r-card-l); background: var(--c-navy); color: var(--c-white); }
.ca-mos__une__num { font-size: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); font-weight: 700; line-height: 1; color: var(--c-mint); font-variant-numeric: tabular-nums; }
.ca-mos__une__h3 { margin-bottom: var(--space-sm); color: var(--c-white); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 700; line-height: 1.15; }
.ca-mos__une__texte { font-size: 1.0625rem; }
.ca-mos__el { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-lg); align-items: start; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-card-l); background: var(--c-white); box-shadow: var(--shadow-card); }
.ca-mos__num { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 700; line-height: 1; color: var(--c-teal-deep); font-variant-numeric: tabular-nums; }
.ca-mos__h3 { margin-bottom: var(--space-xs); font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem); font-weight: 700; color: var(--c-navy); line-height: 1.25; }
.ca-mos__texte { font-size: 1rem; }
@media (max-width: 1023px) {
  ol.ca-mos { grid-template-columns: minmax(0, 1fr); }
  .ca-mos__une { grid-row: auto; }
}
@media (max-width: 639px) {
  .ca-mos__el { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-md); }
}

/* ==================== page « Événement professionnel » (09/10) ====================
   « Quels événements… » : les six photos du carrousel de la prod en bandeau défilant pleine largeur (lecture auto [data-rangee], commandes en bas à droite), puis les tuiles 3 + 2 ;
   « Pour quelles entreprises… » : bande grise, picto + titre en pleine largeur (en colonne de 5/12, le titre faisait 4 lignes), texte + bouton dessous. */
.evt-bandeau { position: relative; aspect-ratio: 21 / 8; margin-bottom: var(--space-2xl); border-radius: var(--r-card-l); overflow: hidden; background: var(--c-navy-2); }
.evt-bande { display: grid; gap: var(--space-xl); }
.evt-bande__tete { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-lg); align-items: center; }
.evt-bande__ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--c-teal-wash); color: var(--c-teal-deep); }
.evt-bande__ico svg { width: 36px; height: 36px; }
.evt-bande__corps { display: grid; gap: var(--space-lg); justify-items: start; font-size: 1.0625rem; }
/* « Pourquoi organiser… » : proposition B retenue par Maxime le 09/10 (« je n'aime pas cette présentation » des cartes plein cadre, texte sur la photo) —
   trois onglets numérotés au titre entier (grille de 3, deux lignes à 1440), un panneau photo | titre, texte : composant des offres de l'accueil sur fond clair (radios sans JS) */
.evpq-onglets { margin-top: 0; }
.evpq-onglets .onglets__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.evpq-onglets .onglets__onglet { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; min-height: 0; height: 100%; padding: 16px 20px; border-radius: var(--r-card); white-space: normal; text-transform: none; letter-spacing: 0; font-size: .9375rem; line-height: 1.3; }
.evpq-onglets .onglets__num { font-size: 1.25rem; font-weight: 700; color: var(--c-teal-deep); font-variant-numeric: tabular-nums; }
.onglets:has(#argument-0:checked) [for="argument-0"], .onglets:has(#argument-1:checked) [for="argument-1"], .onglets:has(#argument-2:checked) [for="argument-2"] { background: var(--c-teal); color: var(--c-navy); box-shadow: none; }
.onglets:has(#argument-0:checked) [for="argument-0"] .onglets__num, .onglets:has(#argument-1:checked) [for="argument-1"] .onglets__num, .onglets:has(#argument-2:checked) [for="argument-2"] .onglets__num { color: var(--c-navy); }
.onglets:has(#argument-0:checked) #argument-p-0, .onglets:has(#argument-1:checked) #argument-p-1, .onglets:has(#argument-2:checked) #argument-p-2 { display: grid; }
.onglets:has(#argument-0:focus-visible) [for="argument-0"], .onglets:has(#argument-1:focus-visible) [for="argument-1"], .onglets:has(#argument-2:focus-visible) [for="argument-2"] { outline: 3px solid var(--c-teal); outline-offset: 3px; }
.evpq-onglets .offre__fig { min-height: 480px; }
.evpq-onglets .offre__texte { font-size: 1.0625rem; max-width: 52ch; }
/* « Quels événements… » : proposition A retenue par Maxime le 09/10 (« retravaille moi ce bloc avec les blocs de contenus en dessous », à la place du bandeau 21:8 + tuiles 3 + 2) —
   une carte par type (sa photo, picto, titre, texte) en rangée qui déborde à droite (curseur [data-slider] de l’accueil) ; navigation : rangée figée au défilement, voir plus bas */
ul.evty-rail__piste { display: flex; /* ul : la remise à zéro ul[class] de base.css l’emportait sur le retrait */ gap: 20px; margin: 0; padding: 4px max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); scrollbar-width: none; list-style: none; }
.evty-rail__piste::-webkit-scrollbar { display: none; }
.evty-rail { --evty-carte: clamp(290px, 28vw, 400px); }
.evty-carte { flex: 0 0 var(--evty-carte); scroll-snap-align: start; display: flex; flex-direction: column; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-white); box-shadow: var(--shadow-card), 0 0 0 1px var(--c-navy-line); }
.evty-carte__fig { position: relative; aspect-ratio: 3 / 2; margin: 0; background: var(--c-grey); }
.evty-carte__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.evty-carte__corps { display: grid; align-content: start; gap: var(--space-md); padding: clamp(22px, 2.4vw, 32px); }
.evty-carte__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-teal-wash); color: var(--c-teal-deep); }
.evty-carte__ico svg { width: 28px; height: 28px; }
.evty-carte__h3 { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.2; color: var(--c-navy); }
.evty-carte__texte { font-size: .9875rem; }
/* « Des options pour enrichir votre événement » : proposition C retenue par Maxime le 13/10 (« pas équilibrée » : textes de 199, 162 et 433 signes centrés dans trois colonnes de même hauteur,
   deux cartes vides à 32–40 %) — fiches navy alignées à gauche, les courtes côte à côte, la dernière en pleine largeur dessous (picto et titre | texte) */
.evop-21 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.evop-21 > .fiche-navy { justify-items: start; text-align: left; }
.evop-21__large { grid-column: 1 / -1; grid-template-columns: 64px minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(20px, 3vw, 48px); align-items: center; }
@media (max-width: 1023px) { .evop-21__large { grid-template-columns: 64px minmax(0, 1fr); row-gap: var(--space-sm); align-items: start; } .evop-21__large .fiche-navy__ico { grid-row: 1 / span 2; } }
@media (max-width: 639px) { .evop-21, .evop-21__large { grid-template-columns: minmax(0, 1fr); } .evop-21__large .fiche-navy__ico { grid-row: auto; } }
/* navigation (Maxime, 12/10 : « on ne voit pas les flèches », sous des cartes de 690 px ; puis « mettre la flèche sur les blocs ne me va pas ») : proposition A retenue —
   la rangée se fige sous le menu et le défilement de la page la fait glisser (module [data-epingle] de commun.js) ; ailleurs, flèches au-dessus des cartes, à droite, hors des cartes */
.evt-types .lo__tete { margin-bottom: var(--space-md); }
.evty-rail__ctrl { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 16px; }
.evty-rail__ctrl .film__btn { box-shadow: 0 0 0 1px var(--c-navy-line); }
.evty-epingle__barre { display: none; }
/* rangée figée : enveloppe = un écran + la course horizontale (--evfl-course, mesurée en JS), 1 px de défilement = 1 px de glissement ; seulement si une carte entière tient dans l'écran */
@media (min-width: 1024px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .evty-epingle { height: calc(100svh - var(--header-h) + var(--evfl-course, 0px)); }
  .evty-epingle__colle { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 18px; overflow: hidden; overflow: clip; }
  .evty-epingle .evty-rail { --evty-carte: 520px; min-width: 0; }
  .evty-epingle .evty-rail__ctrl { display: none; }
  .evty-epingle ul.evty-rail__piste { overflow-x: hidden; scroll-snap-type: none; padding-bottom: 8px; }
  .evty-epingle .evty-carte__fig { aspect-ratio: auto; height: clamp(170px, 27svh, 240px); } /* carte entière dans l'écran : 1366 × 768 compris */
  .evty-epingle__barre { display: block; width: 100%; } /* margin-inline: auto d’un élément de grille = largeur ajustée au contenu (80 px, la seule marge intérieure) : pleine largeur, plafonnée par .wrap */
  .evty-epingle__barre::before { content: ""; display: block; height: 3px; margin-bottom: -3px; border-radius: 3px; background: var(--c-navy-line); }
  .evty-epingle__barre span { display: block; height: 3px; border-radius: 3px; background: var(--c-teal); transform: scaleX(0); transform-origin: left; }
}
@media (max-width: 1023px) {
  .evt-bandeau { aspect-ratio: 16 / 10; }
  .evpq-onglets .onglets__liste { grid-template-columns: minmax(0, 1fr); }
  .evpq-onglets .offre__fig { min-height: 0; }
}
@media (max-width: 639px) { .evt-bandeau { aspect-ratio: 4 / 3; } .evt-bande__tete { grid-template-columns: minmax(0, 1fr); } .evty-rail { --evty-carte: 84vw; } } /* picto au-dessus du titre : à côté, il lui prenait 96 px ; une carte et un bord de la suivante sur mobile */
@media (max-width: 639px) {
  /* événement : titres de 55 et 68 signes en capitales (« Pourquoi organiser votre événement professionnel à ESPACE TRIANGLE ? ») : 4 lignes à 26 px ; règle d'or, 3 lignes au plus */
  :is(.page-int, .et-page-heros) main :is(.evt-pourquoi, .evt-types) .h2--xl { font-size: 1.25rem; }
}

/* ==================== salles de la catégorie Événement : conférence, séminaire (13/10) ====================
   « Équipements inclus » (conférence) : le texte riche de la prod (1 567 signes, une liste) sur deux colonnes équilibrées dans une carte blanche, bouton dessous ;
   « Options » (conférence) : titre, texte riche et bouton | photo de la prod. */
.se-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); row-gap: var(--space-md); align-items: start; padding: clamp(28px, 4vw, 56px); border-radius: var(--r-card-l); background: var(--c-white); box-shadow: var(--shadow-card); }
.se-colonnes__col, .se-colonnes .rich { font-size: 1.0625rem; } /* partage en deux colonnes calculé par le gabarit (bloc paragraphe + liste jamais coupé), bouton en fin de 1re colonne */
.se-colonnes__cta { margin-top: var(--space-xl); }
@media (max-width: 767px) { .se-colonnes { grid-template-columns: minmax(0, 1fr); } .se-colonnes__col:first-child { display: contents; } .se-colonnes__col:first-child .se-colonnes__cta { order: 2; } }
.se-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.se-split__texte { display: grid; gap: var(--space-lg); justify-items: start; }
.se-split__texte .rich { font-size: 1.0625rem; }
.se-split__texte .lo__cta { margin-top: 0; }
.se-split__fig { position: relative; aspect-ratio: 4 / 5; margin: 0; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-grey); }
.se-split__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
  .se-split { grid-template-columns: minmax(0, 1fr); }
  .se-split__fig { aspect-ratio: 3 / 2; }
}
@media (max-width: 639px) {
  /* titres de la prod en capitales de 55 à 72 signes (« Quels types d’événements organiser dans la salle de conférence ? ») : 4 lignes à 26 px ; règle d'or, 3 lignes au plus */
  :is(.page-int, .et-page-heros) main :is(.se-pourquoi, .se-types, .se-inclus) .h2--xl { font-size: 1.25rem; }
  .se-pourquoi .pq-dipt__h3 { font-size: 1.0625rem; }
}
.rich .se-colonnes__bloc + *, .rich * + .se-colonnes__bloc { margin-top: .9em; } /* le bloc paragraphe + liste garde l’espacement de .rich (p + p, ul + p) */

/* Salle de conférence, « Les équipements inclus » : proposition C retenue par Maxime le 13/10 (« retravailler ce bloc », le texte sur deux colonnes) —
   photo collée (salle en U, absente du reste de la page) | texte de la prod en une colonne, la liste des formats en tuiles dans le fil (mêmes mots, gabarit format()) */
/* tuiles des formats (B et C) : nom en capitales, précision dessous */
ul.sein-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: var(--space-md) 0; padding: 0; list-style: none; }
.sein-format { display: grid; align-content: start; gap: 4px; padding: 16px 18px; border-radius: var(--r-card); background: var(--c-white); box-shadow: 0 0 0 1px var(--c-navy-line); }
.sein-format__nom { font-weight: 700; color: var(--c-navy); text-transform: uppercase; letter-spacing: .02em; font-size: .9375rem; }
.sein-format__desc { font-size: .9375rem; line-height: 1.45; color: var(--c-ink); }
.sein-pc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.sein-pc__photo { position: sticky; top: calc(var(--header-h) + 24px); aspect-ratio: 4 / 5; margin: 0; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-grey); }
.sein-pc__photo img { width: 100%; height: 100%; object-fit: cover; }
.sein-pc__texte .rich { font-size: 1.0625rem; }
.sein-pc__texte .lo__cta { margin-top: var(--space-lg); }
@media (max-width: 1023px) { .sein-pc { grid-template-columns: minmax(0, 1fr); } .sein-pc__photo { position: static; aspect-ratio: 3 / 2; } }
@media (max-width: 479px) { ul.sein-formats { grid-template-columns: minmax(0, 1fr); } }
/* « Options » de la salle de conférence : photos défilantes dans le cadre 4:5 (Maxime, 13/10 : « pour ce genre de bloc je souhaite un défilement d'image comme un carrousel ») */
.se-split__fig .offre__fig { position: absolute; inset: 0; min-height: 0; aspect-ratio: auto; margin: 0; }

/* ==================== marges entre les blocs (Maxime, 13/10 : « check up complet et corrections sur les marges entre les blocs », outils/audit-marges.mjs) ====================
   Deux sections de même fond qui se suivent cumulaient leurs marges (230 à 278 px de vide à 1440, 128 px en mobile, sur 11 frontières de 7 pages) : la seconde perd sa marge
   haute, l'espace entre les deux contenus redevient celui d'une section, clamp(64px, 8vw, 120px). Fonds blancs : .lo, .ga, .pc, .pl, .sal, .pres ; gris : .lo--gris, .fo, .pq, .ta. */
:is(.lo:not(.lo--gris), .ga, .pc:not(.lo--gris), .pl, .sal, .pres) + :is(.lo:not(.lo--gris), .ga, .pc:not(.lo--gris), .pl, .sal, .pres) { padding-top: 0; }
:is(.lo--gris, .fo, .pq, .ta) + :is(.lo--gris, .fo, .pq, .ta) { padding-top: 0; }

/* Salle de conférence, « Des options supplémentaires » : proposition B retenue par Maxime le 13/10 (« propose moi une autre présentation à ce bloc ») —
   chapeau (1er paragraphe) et bouton | photos défilantes 3:2, puis chaque option de la prod (paragraphe, ou paragraphe + liste) dans une carte grise à picto ; aucun titre ajouté */
.seop-haut { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-bottom: clamp(32px, 4vw, 56px); }
.seop-haut__lede { display: grid; gap: var(--space-lg); justify-items: start; font-size: 1.1875rem; line-height: 1.6; color: var(--c-navy); }
.seop-haut__lede .lo__cta { margin-top: 0; }
.seop-haut__photos { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-grey); }
.seop-haut__photos .offre__fig { position: absolute; inset: 0; min-height: 0; aspect-ratio: auto; margin: 0; }
.seop-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.seop-carte { display: grid; align-content: start; gap: var(--space-md); padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-card-l); background: var(--c-grey); }
.seop-carte__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-white); color: var(--c-teal-deep); }
.seop-carte__ico svg { width: 30px; height: 30px; }
.seop-carte .rich { font-size: 1rem; }
@media (max-width: 1023px) { .seop-haut, .seop-cartes { grid-template-columns: minmax(0, 1fr); } }

/* ==================== Salle de séminaire (13/10) : composants propres à la page (pages sœurs ≠ copie) ==================== */
/* « Pourquoi » en mosaïque : grande carte (photo 3:2 au-dessus du texte) | deux cartes photo | texte empilées ; cartes blanches sur fond gris, aucun texte sur photo */
.se-mos { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px; align-items: stretch; }
.se-mos__pile { display: grid; gap: 20px; }
.se-mos__carte { display: grid; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-white); box-shadow: var(--shadow-card); }
.se-mos__carte--grande { grid-template-rows: minmax(0, 1fr) auto; } /* la photo prend la hauteur laissée par les deux cartes de droite, le texte suit sans vide */
.se-mos__pile .se-mos__carte { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } /* photo au tiers : titres de la prod de 57 à 64 signes en capitales, 3 lignes au plus */
.se-mos__pile .se-mos__h3 { font-size: clamp(1rem, .9rem + .3vw, 1.15rem); }
.se-mos__fig { position: relative; margin: 0; background: var(--c-grey); }
.se-mos__carte--grande .se-mos__fig { min-height: 320px; }
.se-mos__pile .se-mos__fig { min-height: 220px; } /* hauteur donnée par le texte, photo recadrée */
.se-mos__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.se-mos__corps { display: grid; align-content: center; gap: var(--space-md); padding: clamp(22px, 2.6vw, 36px); }
.se-mos__h3 { font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.2; color: var(--c-navy); }
.se-mos__texte { font-size: .9875rem; }
/* « Équipements inclus » en chapitre bleu marine : titre, intro et bouton | éléments à picto 2 × 2 (classe propre, hors règle des fonds identiques) */
.se-inclus--navy { padding: clamp(64px, 8vw, 120px) 0; background: var(--c-navy); color: var(--c-white); }
.se-navy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.se-navy__tete { display: grid; gap: var(--space-lg); justify-items: start; }
@media (min-width: 1024px) { .se-navy__tete { position: sticky; top: var(--colle); } } /* Maxime, 13/10 : « ce bloc doit être sticky » — titre, intro et bouton restent pendant que défilent les équipements (pas de data-reveal sur l’élément collé) */
.se-inclus--navy .se-navy__tete .h2 { color: var(--c-white); }
.se-navy__tete .rich { font-size: 1.0625rem; }
ul.se-navy__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.se-navy__el { display: grid; align-content: start; gap: var(--space-sm); padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-card-l); background: var(--c-navy-2); box-shadow: 0 0 0 1px var(--c-white-line); }
.se-navy__ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; background: var(--c-white-line); color: var(--c-teal); }
.se-navy__ico svg { width: 28px; height: 28px; }
.se-navy__h3 { color: var(--c-white); font-size: clamp(.9375rem, .85rem + .3vw, 1.0625rem); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.25; }
.se-navy__texte { font-size: .9875rem; }
/* « Options » : photos défilantes (1:1) | intro, éléments à picto filetés, bouton */
.se-liste { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.se-liste__photos { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-grey); }
.se-liste__photos .offre__fig { position: absolute; inset: 0; min-height: 0; aspect-ratio: auto; margin: 0; }
.se-liste__corps { display: grid; gap: var(--space-lg); justify-items: start; }
.se-liste__corps > .rich { font-size: 1.0625rem; }
.se-liste__corps .lo__cta { margin-top: 0; }
ul.se-liste__els { width: 100%; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-navy-line); }
.se-liste__el { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-lg); align-items: start; padding: 18px 0; border-bottom: 1px solid var(--c-navy-line); }
.se-liste__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--c-teal-wash); color: var(--c-teal-deep); }
.se-liste__ico svg { width: 28px; height: 28px; }
.se-liste__h3 { font-size: 1.0625rem; font-weight: 700; color: var(--c-navy); line-height: 1.3; }
.se-liste__texte { font-size: .9875rem; }
/* « Pour qui » : une + deux cartes blanches à picto, le premier public en pleine largeur (picto et titre | texte) */
.se-pcartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.se-pcarte { display: grid; align-content: start; gap: var(--space-md); padding: clamp(24px, 2.8vw, 40px); border-radius: var(--r-card-l); background: var(--c-white); box-shadow: var(--shadow-card); }
.se-pcarte--large { grid-column: 1 / -1; grid-template-columns: 64px minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(20px, 3vw, 48px); align-items: center; }
.se-pcarte__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-teal-wash); color: var(--c-teal-deep); }
.se-pcarte__ico svg { width: 30px; height: 30px; }
.se-pcarte__h3 { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.2; color: var(--c-navy); }
.se-pcarte__texte { font-size: .9875rem; }
/* « Pour qui » en colonne collée (proposition C retenue le 13/10 ; Maxime : « C mais le bloc de droite doit être sticky ») : titre, intro et bouton collés à gauche |
   cartes blanches à picto qui s’empilent : chacune se colle 24 px sous la précédente (--rang) et la suivante la recouvre ; la pile complète part ensuite d’un bloc.
   Mécanique : une carte collée ne sort pas de son bloc parent (marge comprise) ; la dernière, en bas du bloc, ne peut pas se coller. Chaque carte porte donc en
   marge basse 24 px par carte qui la suit (--reste) : la carte 1 est retenue 48 px au-dessus de la 3, la 2 à 24 px, et les trois partent ensemble quand la 3
   arrive à son cran. La marge haute (24 px × rang) compense : rangées égales (1fr), cartes de même hauteur (pile nette, sans liseré de la carte d’en dessous),
   72 px entre cartes pour trois. En dessous de 1024 px ou sur un écran bas : une colonne, cartes à la suite. */
.se-pcolle { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.se-pcolle__tete { display: grid; gap: var(--space-lg); justify-items: start; }
.se-pcolle__tete .rich { font-size: 1.0625rem; }
.se-pcolle__cartes { display: grid; gap: 20px; }
@media (min-width: 1024px) { .se-pcolle__tete { position: sticky; top: var(--colle); } }
@media (min-width: 1024px) and (min-height: 640px) {
  .se-pcolle__cartes { grid-auto-rows: 1fr; gap: 0; }
  .se-pcolle__cartes > .se-pcarte { position: sticky; top: calc(var(--colle) + var(--rang, 0) * 24px); margin: calc(var(--rang, 0) * 24px) 0 calc(var(--reste, 0) * 24px); box-shadow: 0 -14px 28px -18px rgb(30 50 93 / .3), var(--shadow-card); }
  .se-pcolle__cartes > :nth-child(2) { --rang: 1; }
  .se-pcolle__cartes > :nth-child(3) { --rang: 2; }
  .se-pcolle__cartes > :nth-child(4) { --rang: 3; }
  .se-pcolle__cartes > :nth-child(5) { --rang: 4; }
  .se-pcolle__cartes > :nth-child(6) { --rang: 5; }
  .se-pcolle__cartes > :nth-last-child(2) { --reste: 1; }
  .se-pcolle__cartes > :nth-last-child(3) { --reste: 2; }
  .se-pcolle__cartes > :nth-last-child(4) { --reste: 3; }
  .se-pcolle__cartes > :nth-last-child(5) { --reste: 4; }
  .se-pcolle__cartes > :nth-last-child(6) { --reste: 5; }
}
@media (max-width: 1023px) {
  .se-mos, .se-navy, .se-liste, .se-pcartes, .se-pcolle { grid-template-columns: minmax(0, 1fr); }
  .se-mos__pile .se-mos__carte { grid-template-columns: minmax(0, 1fr); }
  .se-mos__pile .se-mos__fig { min-height: 0; aspect-ratio: 16 / 10; }
  .se-liste__photos { aspect-ratio: 3 / 2; }
  .se-pcarte--large { grid-template-columns: 64px minmax(0, 1fr); row-gap: var(--space-sm); align-items: start; }
  .se-pcarte--large .se-pcarte__ico { grid-row: 1 / span 2; }
}
@media (max-width: 639px) {
  ul.se-navy__liste { grid-template-columns: minmax(0, 1fr); }
  .se-pcarte--large { grid-template-columns: minmax(0, 1fr); }
  .se-pcarte--large .se-pcarte__ico { grid-row: auto; }
}
@media (min-width: 1024px) and (max-width: 1199px) { ul.se-navy__liste { grid-template-columns: minmax(0, 1fr); } } /* deux colonnes de 207 px : « Équipement audiovisuel & supports de présentation » sur 4 lignes */
@media (max-width: 1023px) { .se-mos__carte--grande .se-mos__fig { min-height: 0; aspect-ratio: 3 / 2; } }

/* ================= page « Le lieu » (gabarits/page-lieu.mjs, templates/page-lieu.php) ================= */
/* héros : le H1 de la prod (« ESPACE TRIANGLE ») en surtitre, l'accroche H2 de la prod en grand */
.panorama__sur { margin-bottom: var(--space-sm); color: var(--c-white); font-size: clamp(.9375rem, .85rem + .3vw, 1.125rem); font-weight: 600; letter-spacing: .18em; line-height: 1.2; text-transform: uppercase; }
/* « Une équipe à taille humaine » et « À propos » : proposition A « grand format » retenue par Maxime le 13/10 (« je n'aime pas les sections 2 et 3 ») —
   équipe : chapitre bleu marine, titre, bande de photos d'un bord à l'autre de l'écran, texte coulé sur deux colonnes, le second texte de la prod en encadré (liens vers les offres) */
.li-equipe { padding: clamp(64px, 8vw, 120px) 0; background: var(--c-navy); color: var(--c-white); }
.li-equipe .h2 { color: var(--c-white); }
.li-equipe .rich { font-size: 1.0625rem; color: rgb(255 255 255 / .9); }
.li-equipe .rich strong { color: var(--c-white); }
.li-equipe__encadre { padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-card-l); background: var(--c-navy-2); box-shadow: inset 0 0 0 1px var(--c-white-line); }
.li-equipe__encadre a { color: var(--c-teal); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.li-equipe__encadre a:hover { color: var(--c-white); }
.li-equipe__bande { position: relative; height: clamp(300px, 46vw, 640px); margin-top: var(--space-2xl); overflow: hidden; background: var(--c-navy-2); }
.li-equipe__bande .offre__nav { right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); } /* commandes calées sur la marge du texte, pas sur le bord de l'écran */
.li-equipe__flux { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 2px solid var(--c-teal); column-count: 2; column-gap: clamp(24px, 4vw, 64px); } /* texte coulé : colonnes équilibrées (paragraphes de 470, 330 et 360 signes) */
.li-equipe__encadre { margin-top: var(--space-2xl); }
.li-ap__photos .offre__fig, .li-equipe__bande .offre__fig, .li-espaces__photos .offre__fig { position: absolute; inset: 0; min-height: 0; aspect-ratio: auto; margin: 0; }
/* « À propos » (13/10 soir : « trop de texte à l'écran ») : photos défilantes 4:3 collées | premier paragraphe en grand, la suite repliée sous « Lire la suite »
   (details natif : le texte reste entier dans la page) */
.li-ap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: var(--space-2xl); }
.li-ap__photos { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-grey); }
@media (min-width: 1024px) { .li-ap__photos { position: sticky; top: var(--colle); } }
.li-ap__chapeau { color: var(--c-navy); font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.55; }
.li-suite { margin-top: var(--space-lg); }
.li-suite > summary { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; list-style: none; color: var(--c-teal-deep); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.li-suite > summary::-webkit-details-marker { display: none; }
.li-suite > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.li-suite[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.li-suite > summary:hover { color: var(--c-navy); }
.li-suite > summary:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 4px; border-radius: 4px; }
.li-suite__moins, .li-suite[open] .li-suite__plus { display: none; }
.li-suite[open] .li-suite__moins { display: inline; }
.li-suite__texte { margin-top: var(--space-md); font-size: 1.0625rem; }
/* « Accessibilité & localisation » : carte de proximité statique (outils/carte-lieu.mjs, aucun tiers) | trois accès à vignette, filetés */
.li-acces__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.li-carte { margin: 0; }
.li-carte__plan { position: relative; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-grey); box-shadow: var(--shadow-card); }
.li-carte__plan img { display: block; width: 100%; height: auto; }
.li-carte__etiq { position: absolute; padding: 5px 10px; border-radius: 6px; background: var(--c-navy); color: var(--c-white); font-size: .75rem; font-weight: 700; letter-spacing: .06em; line-height: 1.3; white-space: nowrap; box-shadow: 0 2px 8px rgb(13 24 48 / .25); transform: translate(18px, -50%); }
.li-carte__etiq--gare { background: var(--c-teal-deep); transform: translate(calc(-100% - 16px), -50%); }
.li-carte__etiq--parking { display: inline-flex; align-items: center; gap: 6px; padding-left: 5px; background: var(--c-white); color: var(--c-navy); transform: translate(-50%, 8px); } /* ancrée au bas du contour surligné */
.li-carte__etiq--parking b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--c-navy); color: var(--c-white); font-size: .75rem; line-height: 1; }
.li-carte__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); margin-top: var(--space-md); }
.li-carte__pied small { color: var(--c-ink-soft); font-size: .75rem; }
.li-carte__pied small a { color: inherit; }
ul.li-acces__liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-navy-line); }
.li-acces__el { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-lg); align-items: start; padding: var(--space-lg) 0; border-bottom: 1px solid var(--c-navy-line); }
.li-acces__fig { margin: 0; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--c-grey); }
.li-acces__fig img { width: 100%; height: 100%; object-fit: cover; }
.li-acces__h3 { font-size: 1rem; font-weight: 600; letter-spacing: .01em; line-height: 1.25; text-transform: uppercase; color: var(--c-navy); }
.li-acces__texte { margin-top: 8px; font-size: .9875rem; }
.li-acces__texte ul { margin: 6px 0 8px; padding-left: 1.1em; }
/* « Nos espaces & configurations » : photos défilantes à la hauteur des trois cartes blanches à picto (3:2 sous 1024 px) */
.li-espaces__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 2.6vw, 40px); align-items: stretch; }
.li-espaces__photos { position: relative; min-height: 380px; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-white); } /* pas d'aspect-ratio en grille étirée : il élargissait la photo sous les cartes (largeur tirée de la hauteur de la rangée) */
ul.li-espaces__cartes { display: grid; grid-auto-rows: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.li-espaces__carte { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-md); align-items: center; padding: clamp(18px, 2vw, 28px); border-radius: var(--r-card-l); background: var(--c-white); box-shadow: var(--shadow-card); }
.li-espaces__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-teal-wash); color: var(--c-teal-deep); }
.li-espaces__ico svg { width: 30px; height: 30px; }
.li-espaces__h3 { font-size: 1rem; font-weight: 600; letter-spacing: .01em; line-height: 1.25; text-transform: uppercase; color: var(--c-teal-deep); }
.li-espaces__texte { margin-top: 6px; font-size: .9875rem; }
/* « Découvrez l'espace de travail en image » : façade 16:9 (photo voilée + bouton du thème), la visite tierce remplace la façade au clic ([data-visite], commun.js) */
.li-visite__cadre { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-navy); }
.li-visite__facade { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; }
.li-visite__facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out, ease); }
.li-visite__facade::after { content: ""; position: absolute; inset: 0; background: rgb(13 24 48 / .34); transition: background .3s; }
.li-visite__facade:hover img { transform: scale(1.03); }
.li-visite__facade:hover::after { background: rgb(13 24 48 / .44); }
.li-visite__facade:focus-visible { outline: 3px solid var(--c-teal); outline-offset: -3px; }
.li-visite__centre { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--space-md); pointer-events: none; }
.li-visite__play { display: grid; place-items: center; width: clamp(64px, 6vw, 88px); aspect-ratio: 1; border-radius: 50%; background: var(--c-teal); color: var(--c-navy); box-shadow: 0 0 0 10px rgb(105 184 171 / .28), 0 10px 30px rgb(13 24 48 / .35); transition: transform .3s; }
.li-visite__play svg { margin-left: 4px; }
.li-visite__facade:hover .li-visite__play { transform: scale(1.06); }
.li-visite__cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* « Venez découvrir » : le titre « Avis & témoignages » de la prod au-dessus du bandeau d'avis */
.li-avis__h3 { margin-bottom: var(--space-lg); color: var(--c-white); font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); font-weight: 600; letter-spacing: .02em; line-height: 1.2; text-transform: uppercase; }
@media (max-width: 1023px) {
  .li-acces__grille, .li-espaces__grille, .li-ap { grid-template-columns: minmax(0, 1fr); }
  .li-equipe__flux { column-count: 1; }
  ul.li-espaces__cartes { grid-auto-rows: auto; }
  .li-espaces__photos { min-height: 0; aspect-ratio: 3 / 2; }
}
@media (max-width: 639px) {
  .li-acces__el { grid-template-columns: 80px minmax(0, 1fr); gap: var(--space-md); }
  .li-carte__etiq { padding: 3px 7px; font-size: .625rem; transform: translate(12px, -50%); }
  .li-carte__etiq--gare { transform: translate(calc(-100% - 10px), -50%); }
  .li-carte__etiq--parking { padding-left: 3px; transform: translate(-50%, 4px); }
  .li-carte__etiq--parking b { width: 14px; height: 14px; font-size: .625rem; }
  .li-visite__cadre { aspect-ratio: 4 / 5; }
}
@media (max-width: 639px) { .li-hero .panorama__h1 { font-size: 1.375rem; line-height: 1.08; } } /* accroche de 61 signes en capitales : 5 lignes à 375 px en 1.75rem, 3 lignes ici */
@media (min-width: 1024px) { .li-hero .panorama__texte::before { inset-block-start: -30%; background: radial-gradient(ellipse at 42% 50%, rgb(13 24 48 / .82) 0%, rgb(13 24 48 / .72) 36%, rgb(13 24 48 / .48) 62%, rgb(13 24 48 / 0) 80%); } } /* surtitre en haut du bloc, devant la baie claire : 3,48:1 au pire pixel avec le halo commun (centré à 56 %) */

/* ================= page « Pour qui ? » (gabarits/page-pourqui.mjs, templates/page-pourqui.php) ================= */
/* « Pourquoi choisir » : titre pleine largeur, texte et bouton | photos défilantes 3:2 */
.pr-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: var(--space-2xl); }
.pr-split__texte { display: grid; gap: var(--space-lg); justify-items: start; }
.pr-split__texte > .rich { font-size: 1.0625rem; }
.pr-split__photos { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-grey); }
.pr-split__photos .offre__fig { position: absolute; inset: 0; min-height: 0; aspect-ratio: auto; margin: 0; }
/* Profils : onglets radio sans JS (:has), liste des métiers | profil choisi. Maxime, 13/10 : « ce bloc doit être sticky » → à partir de 1024 px, la liste
   (compacte : 11 noms tiennent sous le menu d'un écran de 768 px) reste collée pendant la lecture du profil ; dessous, rangée défilante au doigt au-dessus du profil. */
.pr-prof { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.pr-prof__liste { display: flex; gap: 8px; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: thin; } /* scroll-padding : sans lui, l’aimantation colle le premier nom au bord de l’écran */
.pr-prof__onglet { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; flex: 0 0 auto; max-width: min(74vw, 300px); padding: 10px 14px; border-radius: 12px; background: var(--c-white); color: var(--c-navy); font-weight: 600; font-size: .9rem; line-height: 1.25; cursor: pointer; scroll-snap-align: start; transition: background .2s, color .2s; }
.pr-prof__onglet:hover { background: var(--c-teal-wash); }
.pr-prof__num { color: var(--c-teal-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-prof__panneau { display: none; padding: clamp(24px, 3vw, 44px); border-radius: var(--r-card-l); background: var(--c-white); box-shadow: var(--shadow-card); }
.pr-prof__h3 { color: var(--c-navy); font-size: clamp(1.35rem, 1.05rem + 1vw, 2rem); font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.pr-prof__chapeau { margin-top: var(--space-lg); color: var(--c-navy); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.6; }
.pr-prof__intro { margin-top: var(--space-xl); color: var(--c-navy); font-weight: 700; }
ul.pr-offres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: var(--space-md) 0 0; padding: 0; list-style: none; }
ul.pr-offres--une { grid-template-columns: minmax(0, 1fr); }
.pr-offre { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-sm); justify-items: start; padding: clamp(18px, 2vw, 24px); border-radius: 14px; background: var(--c-grey); }
.pr-offre__h4 { color: var(--c-teal-deep); font-size: 1rem; font-weight: 700; letter-spacing: .01em; line-height: 1.25; text-transform: uppercase; }
.pr-offre__texte { font-size: .9875rem; }
.pr-offre__btn { margin-top: var(--space-xs); }
.pr-prof__fin { margin-top: var(--space-lg); font-size: 1rem; }
@media (min-width: 1024px) {
  .pr-prof { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .pr-prof__liste { position: sticky; top: var(--colle); display: grid; gap: 6px; max-height: calc(100svh - var(--colle) - 24px); margin: 0; padding: 0; overflow: auto; scroll-snap-type: none; }
  .pr-prof__onglet { max-width: none; padding: 9px 14px; }
}
.pr-prof:has(#profil-0:checked) #profil-p-0 { display: block; }
.pr-prof:has(#profil-0:checked) label[for="profil-0"] { background: var(--c-navy); color: var(--c-white); }
.pr-prof:has(#profil-0:checked) label[for="profil-0"] .pr-prof__num { color: var(--c-teal); }
.pr-prof:has(#profil-0:focus-visible) label[for="profil-0"] { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.pr-prof:has(#profil-1:checked) #profil-p-1 { display: block; }
.pr-prof:has(#profil-1:checked) label[for="profil-1"] { background: var(--c-navy); color: var(--c-white); }
.pr-prof:has(#profil-1:checked) label[for="profil-1"] .pr-prof__num { color: var(--c-teal); }
.pr-prof:has(#profil-1:focus-visible) label[for="profil-1"] { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.pr-prof:has(#profil-2:checked) #profil-p-2 { display: block; }
.pr-prof:has(#profil-2:checked) label[for="profil-2"] { background: var(--c-navy); color: var(--c-white); }
.pr-prof:has(#profil-2:checked) label[for="profil-2"] .pr-prof__num { color: var(--c-teal); }
.pr-prof:has(#profil-2:focus-visible) label[for="profil-2"] { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.pr-prof:has(#profil-3:checked) #profil-p-3 { display: block; }
.pr-prof:has(#profil-3:checked) label[for="profil-3"] { background: var(--c-navy); color: var(--c-white); }
.pr-prof:has(#profil-3:checked) label[for="profil-3"] .pr-prof__num { color: var(--c-teal); }
.pr-prof:has(#profil-3:focus-visible) label[for="profil-3"] { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.pr-prof:has(#profil-4:checked) #profil-p-4 { display: block; }
.pr-prof:has(#profil-4:checked) label[for="profil-4"] { background: var(--c-navy); color: var(--c-white); }
.pr-prof:has(#profil-4:checked) label[for="profil-4"] .pr-prof__num { color: var(--c-teal); }
.pr-prof:has(#profil-4:focus-visible) label[for="profil-4"] { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.pr-prof:has(#profil-5:checked) #profil-p-5 { display: block; }
.pr-prof:has(#profil-5:checked) label[for="profil-5"] { background: var(--c-navy); color: var(--c-white); }
.pr-prof:has(#profil-5:checked) label[for="profil-5"] .pr-prof__num { color: var(--c-teal); }
.pr-prof:has(#profil-5:focus-visible) label[for="profil-5"] { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.pr-prof:has(#profil-6:checked) #profil-p-6 { display: block; }
.pr-prof:has(#profil-6:checked) label[for="profil-6"] { background: var(--c-navy); color: var(--c-white); }
.pr-prof:has(#profil-6:checked) label[for="profil-6"] .pr-prof__num { color: var(--c-teal); }
.pr-prof:has(#profil-6:focus-visible) label[for="profil-6"] { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.pr-prof:has(#profil-7:checked) #profil-p-7 { display: block; }
.pr-prof:has(#profil-7:checked) label[for="profil-7"] { background: var(--c-navy); color: var(--c-white); }
.pr-prof:has(#profil-7:checked) label[for="profil-7"] .pr-prof__num { color: var(--c-teal); }
.pr-prof:has(#profil-7:focus-visible) label[for="profil-7"] { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.pr-prof:has(#profil-8:checked) #profil-p-8 { display: block; }
.pr-prof:has(#profil-8:checked) label[for="profil-8"] { background: var(--c-navy); color: var(--c-white); }
.pr-prof:has(#profil-8:checked) label[for="profil-8"] .pr-prof__num { color: var(--c-teal); }
.pr-prof:has(#profil-8:focus-visible) label[for="profil-8"] { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.pr-prof:has(#profil-9:checked) #profil-p-9 { display: block; }
.pr-prof:has(#profil-9:checked) label[for="profil-9"] { background: var(--c-navy); color: var(--c-white); }
.pr-prof:has(#profil-9:checked) label[for="profil-9"] .pr-prof__num { color: var(--c-teal); }
.pr-prof:has(#profil-9:focus-visible) label[for="profil-9"] { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.pr-prof:has(#profil-10:checked) #profil-p-10 { display: block; }
.pr-prof:has(#profil-10:checked) label[for="profil-10"] { background: var(--c-navy); color: var(--c-white); }
.pr-prof:has(#profil-10:checked) label[for="profil-10"] .pr-prof__num { color: var(--c-teal); }
.pr-prof:has(#profil-10:focus-visible) label[for="profil-10"] { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.pr-prof:has(#profil-11:checked) #profil-p-11 { display: block; }
.pr-prof:has(#profil-11:checked) label[for="profil-11"] { background: var(--c-navy); color: var(--c-white); }
.pr-prof:has(#profil-11:checked) label[for="profil-11"] .pr-prof__num { color: var(--c-teal); }
.pr-prof:has(#profil-11:focus-visible) label[for="profil-11"] { outline: 2px solid var(--c-teal); outline-offset: 2px; }
/* « Pourquoi chaque profil gagne » : bande bleu marine, titre pleine largeur, texte dessous */
.pr-gagne { padding: clamp(64px, 8vw, 120px) 0; background: var(--c-navy); color: var(--c-white); }
.pr-gagne .h2 { color: var(--c-white); }
.pr-gagne__texte { margin-top: var(--space-lg); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: rgb(255 255 255 / .9); }
@media (max-width: 1023px) {
  .pr-split { grid-template-columns: minmax(0, 1fr); }
  ul.pr-offres { grid-template-columns: minmax(0, 1fr); }
  .pr-prof__h3 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* le nom est déjà sur l’onglet juste au-dessus (4 lignes à 375 px pour « Comptables externalisés… ») : masqué à l’œil, gardé pour les lecteurs d’écran */
  .pr-prof__chapeau { margin-top: 0; }
}

/* ================= pages de texte : mentions légales, CGV, CGU (gabarits/page-texte.mjs, templates/page-texte.php) ================= */
/* bandeau bleu marine et titre (comme la prod), colonne de lecture de 74 signes, sommaire collé à gauche pour les textes longs */
.tx-tete { padding: calc(var(--barre-fixe) + clamp(48px, 6vw, 88px)) 0 clamp(40px, 5vw, 64px); background: var(--c-navy); color: var(--c-white); }
.tx-tete__h1 { color: var(--c-white); font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); font-weight: 700; line-height: 1.08; text-transform: uppercase; }
.tx { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding: clamp(48px, 6vw, 88px) var(--gutter) clamp(64px, 8vw, 120px); }
.tx__corps { max-width: 74ch; font-size: 1.0625rem; }
.tx__corps h2 { margin: 2.2em 0 .8em; color: var(--c-navy); font-size: clamp(1.1rem, 1rem + .4vw, 1.375rem); line-height: 1.25; text-transform: uppercase; scroll-margin-top: calc(var(--colle) + 16px); }
.tx__corps h2:first-child { margin-top: 0; }
.tx__corps a { color: var(--c-teal-deep); text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.tx__sommaire { padding: 18px; border-radius: var(--r-card-l); background: var(--c-grey); }
.tx__sommaire-titre { margin-bottom: 8px; padding: 0 10px; color: var(--c-navy); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tx__sommaire ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tx__sommaire a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--c-navy); font-size: .875rem; line-height: 1.35; text-decoration: none; }
.tx__sommaire a:hover, .tx__sommaire a:focus-visible { background: var(--c-white); }
@media (min-width: 1024px) {
  .tx--sommaire { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .tx__sommaire { position: sticky; top: var(--colle); max-height: calc(100svh - var(--colle) - 24px); overflow: auto; }
}
@media (max-width: 639px) { .tx-tete__h1 { font-size: 1.375rem; } .tx__corps h2 { font-size: 1rem; } } /* titre des CGU (66 signes) et article 11 des CGV : 4 lignes à 375 px sinon */

/* ================= page « Nous contacter » (gabarits/page-contact.mjs, templates/page-contact.php, inc/contact.php) ================= */
/* texte et coordonnées cliquables | formulaire dans une carte blanche ; champs ≥ 16 px (pas de zoom iOS), erreurs en rouge foncé lisible, case 22 px */
.ct__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ct__texte { font-size: 1.0625rem; }
dl.ct__coord { display: grid; gap: 14px; margin: var(--space-xl) 0 0; }
.ct__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; }
.ct__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-white); color: var(--c-teal-deep); box-shadow: 0 0 0 1px var(--c-navy-line); }
.ct__ico svg { width: 22px; height: 22px; }
.ct__item dt { color: var(--c-ink-soft); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ct__item dd { margin: 2px 0 0; color: var(--c-navy); font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
.ct__item dd a { color: inherit; text-decoration: none; }
.ct__item dd a:hover, .ct__item dd a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.ct__carte { padding: clamp(24px, 3vw, 44px); border-radius: var(--r-card-l); background: var(--c-white); box-shadow: var(--shadow-card); }
.ct-form__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.ct-champ { display: grid; align-content: start; gap: 6px; margin: 0; }
.ct-champ--plein { grid-column: 1 / -1; }
.ct-champ > label { color: var(--c-navy); font-size: .9375rem; font-weight: 600; }
.ct-champ input:not([type="checkbox"]), .ct-champ textarea { width: 100%; padding: 12px 14px; border: 1.5px solid color-mix(in srgb, var(--c-navy) 28%, transparent); border-radius: 10px; background: var(--c-white); color: var(--c-ink); font: inherit; font-size: 1.0625rem; line-height: 1.4; }
.ct-champ textarea { min-height: 150px; resize: vertical; }
.ct-champ input:focus-visible, .ct-champ textarea:focus-visible { outline: 3px solid var(--c-teal-wash); border-color: var(--c-teal-deep); }
.ct-champ [aria-invalid="true"] { border-color: #B42318; }
.ct-erreur { color: #B42318; font-size: .9375rem; font-weight: 600; }
.ct-req { color: var(--c-teal-deep); }
.ct-champ--case { grid-template-columns: 22px minmax(0, 1fr); align-items: start; column-gap: 12px; }
.ct-champ--case input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--c-teal-deep); }
.ct-champ--case label { font-weight: 500; line-height: 1.45; }
.ct-champ--case label a { color: var(--c-teal-deep); text-decoration: underline; text-underline-offset: .2em; }
.ct-champ--case .ct-erreur { grid-column: 2; }
.ct-pot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* pot de miel : découpé, pas rejeté hors écran (left: -9999px faussait l’audit de débordement) */
.ct-form__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 24px; }
.ct-form__note { margin: 0; color: var(--c-ink-soft); font-size: .875rem; }
.ct-alerte { margin: 0 0 20px; padding: 14px 18px; border-radius: 12px; font-weight: 600; }
.ct-alerte--ok { background: var(--c-teal-wash); color: var(--c-navy); }
.ct-alerte--erreur { background: #FEF3F2; color: #B42318; }
@media (max-width: 1023px) { .ct__grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .ct-form__grille { grid-template-columns: minmax(0, 1fr); } }

/* ================= blog (« Actualités ») : liste et article (gabarits/page-blog.mjs, home.php, single.php, inc/blog.php) =================
   Proposition A « magazine » retenue (Maxime, 13/10, après « il faut revoir entièrement le gabarit de la page actualité et article ») :
   liste = dernier article à la une (photo | texte sur bleu marine, bouton), les autres en cartes ; article = photo plein écran avec le titre (composant
   panorama), sommaire des intertitres collé à gauche du texte, « À lire aussi » en cartes. */
/* en-tête compact des pages sans photo en tête (règles du thème pour les pages intérieures, outils/theme-construire.mjs, reprises pour la maquette) */
.et-interieur .hd__strip { display: none; }
.et-interieur .hd.is-scrolled .hd__bar { margin-top: 0; } /* sans bandeau, rien à compenser : la remontée de 46 px des pages à photo coupait la barre (-36 → 36 px) */
/* carte d'article (liste et « À lire aussi ») */
ul.bl-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.bl-carte { display: flex; }
.bl-carte__lien { display: flex; flex-direction: column; width: 100%; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-white); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: transform .25s var(--ease-out, ease), box-shadow .25s; }
.bl-carte__lien:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
.bl-carte__lien:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 3px; }
.bl-carte__fig { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-grey); }
.bl-carte__fig img { width: 100%; height: 100%; object-fit: cover; }
.bl-carte__corps { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 26px); }
.bl-carte__meta { margin: 0; color: var(--c-teal-deep); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bl-carte__h { color: var(--c-navy); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; } /* titre de 84 signes : 4 lignes à 20 px dans une carte de 327 px */
.bl-carte__extrait { margin: 0; color: var(--c-ink-soft); font-size: .9375rem; line-height: 1.55; }
.bl-carte__suite { margin-top: auto; padding-top: 6px; color: var(--c-teal-deep); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
/* liste : titre de la page, article à la une, les autres en cartes (deux par rangée) */
.bla { padding: calc(var(--barre-fixe) + clamp(40px, 5vw, 72px)) 0 clamp(64px, 8vw, 112px); }
.bla__h1 { text-transform: none; }
.bla-une { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); margin-top: var(--space-2xl); border-radius: var(--r-card-l); overflow: hidden; background: var(--c-navy); color: var(--c-white); text-decoration: none; box-shadow: var(--shadow-card); }
.bla-une:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 3px; }
/* photo de l'article à la une : elle prend la hauteur de la rangée (texte, ou hauteur minimale de la carte). Un rapport fixe + min-height: 100%
   l'élargissait dès que le texte était plus haut (résumé ajouté le 19/10) : la photo passait sous le panneau de texte. */
.bla-une { min-height: clamp(360px, 30vw, 460px); }
.bla-une__fig { position: relative; margin: 0; min-width: 0; overflow: hidden; }
.bla-une__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out, ease); }
.bla-une:hover .bla-une__fig img { transform: scale(1.03); }
.bla-une__corps { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-md); padding: clamp(28px, 3.4vw, 52px); }
.bla-une .bl-carte__meta { color: var(--c-teal); }
.bla-une__h { text-wrap: pretty; color: var(--c-white); font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem); line-height: 1.15; } /* 73 signes : 3 lignes à 1440 dans 448 px */
.bla-une__extrait { margin: 0; color: rgb(255 255 255 / .85); font-size: 1.0625rem; line-height: 1.55; }
.bla-une .btn { margin-top: var(--space-sm); }
ul.bl-grille.bla-autres { margin-top: clamp(24px, 3vw, 40px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bla .pagination { margin-top: var(--space-2xl); }
/* article : photo plein écran et titre (composant panorama), sommaire collé, colonne de lecture */
.ar-tete__meta { margin-bottom: var(--space-md); color: rgb(255 255 255 / .9); font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ar-tete__meta a { color: var(--c-teal); text-decoration: none; }
.ar-tete__meta a:hover { text-decoration: underline; }
.ara-hero__h1 { text-wrap: pretty; color: var(--c-white); font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3.1rem); font-weight: 700; line-height: 1.1; }
.ara-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); padding-block: clamp(48px, 6vw, 88px) clamp(64px, 8vw, 112px); }
.ara-som { padding: 18px; border-radius: var(--r-card-l); background: var(--c-grey); }
.ara-som__titre { margin-bottom: 8px; padding: 0 10px; color: var(--c-navy); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ara-som ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ara-som a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--c-navy); font-size: .9rem; line-height: 1.35; text-decoration: none; }
.ara-som a:hover { background: var(--c-white); }
.ar__corps { width: 100%; max-width: 74ch; font-size: 1.0625rem; }
/* premier paragraphe en chapeau (la description de l'article n'est pas répétée en tête quand elle en est la première phrase) */
.ara .ar__corps > p:first-child { color: var(--c-navy); font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); line-height: 1.6; }
.ar__corps h2 { margin: 2em 0 .7em; color: var(--c-navy); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.75rem); line-height: 1.2; }
.ar__corps h3 { margin: 1.6em 0 .5em; color: var(--c-navy); font-size: clamp(1.1rem, 1rem + .3vw, 1.25rem); line-height: 1.3; }
.ar__corps h2:first-child, .ar__corps h3:first-child { margin-top: 0; }
.ar__corps a { color: var(--c-teal-deep); text-decoration: underline; text-underline-offset: .2em; }
.ar__fig { margin: 1.8em 0; }
.ar__fig img { display: block; width: 100%; height: auto; max-height: 80svh; object-fit: contain; border-radius: var(--r-card); }
.ar-suite .h2 { margin-bottom: var(--space-xl); }
.ar-suite__tous { margin-top: var(--space-xl); }
@media (min-width: 1024px) {
  .ara-grille { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .ara-som { position: sticky; top: var(--colle); }
  .ara-grille--sans-som { grid-template-columns: minmax(0, 1fr); justify-items: center; } /* article sans intertitre : pas de sommaire, texte centré */
}
@media (max-width: 1199px) { ul.bl-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bla-une { grid-template-columns: minmax(0, 1fr); min-height: 0; } .bla-une__fig { aspect-ratio: 16 / 10; } } /* trois cartes de 305 px à 1024 : titre de 84 signes sur 4 lignes ; une : 4 lignes dans la colonne de texte */
@media (max-width: 639px) {
  ul.bl-grille, ul.bl-grille.bla-autres { grid-template-columns: minmax(0, 1fr); }
  .ara-hero__h1, .bla-une__h { font-size: 1.1875rem; } /* titre de 84 signes : 4 lignes à 20 px dans 343 px (375) */
  .bla-une__corps { padding: 22px 20px 26px; }
}


/* ---------- salle de formation, organismes et professionnels : cartes 2 × 2 à picto sur fond gris (proposition A retenue par Maxime le 16/10 ; disposition « cartes ») ---------- */
.or-carte__haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.or-carte__num { font-size: .9375rem; font-weight: 700; letter-spacing: .06em; color: var(--c-teal-deep); }
.or-cartes .lo__tete { margin-bottom: var(--space-xl); }
ol.or-cartes__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.or-carte { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 2.6vw, 38px); border-radius: var(--r-card-l); background: var(--c-white); box-shadow: var(--shadow-card); }
.or-carte__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-teal-wash); color: var(--c-teal-deep); }
.or-carte__ico svg { width: 30px; height: 30px; }
.or-carte__h3 { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); font-weight: 600; letter-spacing: .01em; line-height: 1.2; text-transform: uppercase; color: var(--c-navy); text-wrap: balance; }
.or-carte__texte { font-size: .9875rem; }
@media (max-width: 767px) { ol.or-cartes__liste { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
/* titres d'une ou deux lignes : picto, titre et texte alignés d'une carte à l'autre DANS une rangée (subgrid : la rangée prend le plus haut titre, sans hauteur imposée — « Entreprises & PME » sur une ligne, et en anglais toute la 2e rangée sur une ligne) */
@media (min-width: 768px) { .or-carte { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px; align-content: start; } }


/* ---------- questions fréquentes (audit SEO/GEO du 17/10, P1 ; section commune, footer.php) : titre pleine largeur, questions à déplier sous un filet,
   réponses dans le code même fermées (lisibles par les moteurs) ; fond gris, blanc après une section grise ---------- */
.faq { background: var(--c-grey); }
:is(.lo--gris, .ta, .pr-profils) + .faq { background: var(--c-white); }
.faq .lo__tete { margin-bottom: var(--space-xl); }
.faq__liste { border-top: 1px solid var(--c-navy-line); }
.faq__item { border-bottom: 1px solid var(--c-navy-line); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer; font-size: clamp(1rem, .95rem + .25vw, 1.125rem); font-weight: 600; line-height: 1.35; color: var(--c-navy); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover > span:first-child { text-decoration: underline; text-underline-offset: .2em; }
.faq__q:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 4px; border-radius: 4px; }
.faq__plus { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--c-teal-wash); transition: transform var(--dur-base) var(--ease-out); }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--c-teal-deep); }
.faq__plus::after { transform: rotate(90deg); transition: transform var(--dur-base) var(--ease-out); }
.faq__item[open] .faq__plus::after { transform: rotate(0deg); }
.faq__r { max-width: 74ch; padding: 0 0 24px; }
@media (prefers-reduced-motion: reduce) { .faq__plus, .faq__plus::after { transition: none; } }


/* ---------- « En bref » en chiffres clés (audit SEO/GEO, P2 ; proposition C retenue le 18/10, inc/sections.php et_s_bref) ---------- */
.bref { margin-bottom: var(--space-3xl); }
.bref__note { margin: var(--space-md) 0 0; font-size: .9375rem; color: var(--c-ink-soft); }
.bref__lien { color: var(--c-teal-deep); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.bref__lien:hover { color: var(--c-navy); }
.bref__chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--c-navy); }
.bref__chiffres li { display: grid; align-content: start; gap: 6px; padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-right: 1px solid var(--c-navy-line); }
.bref__chiffres li + li { padding-left: var(--space-lg); }
.bref__chiffres li:last-child { border-right: 0; padding-right: 0; }
.bref__n { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); font-weight: 700; line-height: 1; color: var(--c-navy); white-space: nowrap; }
.bref__l { font-size: .9375rem; color: var(--c-ink-soft); }
.bref__phrase { max-width: 78ch; margin: var(--space-md) 0 0; line-height: 1.55; }
@media (max-width: 760px) {
  .bref__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bref__chiffres li, .bref__chiffres li + li { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-right: 0; border-bottom: 1px solid var(--c-navy-line); }
  .bref__chiffres li:nth-child(even) { padding-left: var(--space-md); border-left: 1px solid var(--c-navy-line); }
}

/* ---------- « Organiser un séminaire dans le Calvados » en ligne de train (audit SEO/GEO, P2 ; proposition C retenue le 18/10, page-salle-evenement.php) ---------- */
.cal .lo__tete { margin-bottom: var(--space-2xl); }
.cal__h3 { margin: 0 0 var(--space-xs); font-size: 1.125rem; line-height: 1.3; color: var(--c-navy); }
.cal__ligne { display: flex; align-items: flex-start; margin: 0 0 var(--space-lg); padding: 40px 0 0; list-style: none; }
.cal__arret { flex: none; display: grid; justify-items: center; gap: 10px; }
.cal__arret::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--c-white); box-shadow: inset 0 0 0 3px var(--c-navy); }
.cal__arret--fin::before { background: var(--c-teal); }
.cal__ville { font-weight: 700; color: var(--c-navy); }
.cal__trajet { position: relative; flex: 1; height: 2px; margin-top: 7px; background: var(--c-navy); }
.cal__trajet span { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-weight: 600; color: var(--c-teal-deep); white-space: nowrap; }
.cal__route { max-width: 72ch; margin: 0 0 var(--space-2xl); color: var(--c-ink-soft); }
.cal__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); }
.cal__item .rich p { margin: 0; }
@media (max-width: 760px) { .cal__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .cal__trajet span { font-size: .875rem; } }

/* ---------- « Vous restez moins longtemps ? » (Coworking à la journée, rangée sans titre ni texte ; Maxime, 26/10 : proposition A) ----------
   photos défilantes | introduction, phrase d’annonce et liste cochée, bouton */
.ev-coche p:has(+ ul) { font-weight: 600; color: var(--c-navy); }
.ev-coche ul { display: grid; gap: var(--space-sm); padding: 0; list-style: none; }
.ev-coche li { position: relative; margin: 0; padding-left: 34px; }
.ev-coche li::before { content: ""; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%; background: var(--c-teal-wash); }
.lo--gris .ev-coche li::before { background: var(--c-white); } /* sur le fond gris, la pastille turquoise pâle ne se voyait pas */
.ev-coche li::after { content: ""; position: absolute; left: 8px; top: calc(.15em + 5px); width: 6px; height: 10px; border: solid var(--c-teal-deep); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ev-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); align-items: stretch; }
.ev-duo__fig { min-height: 480px; margin: 0; border-radius: var(--r-card-l); overflow: hidden; background: var(--c-white); }
.ev-duo__corps { display: grid; align-content: center; justify-items: start; gap: var(--space-xl); }
.ev-duo__corps .rich { font-size: 1.0625rem; }
@media (max-width: 1023px) {
  .ev-duo { grid-template-columns: minmax(0, 1fr); }
  .ev-duo__fig { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---------- WordPress : barre d'administration, pages intérieures ---------- */
.admin-bar .hd { top: 32px; }
.admin-bar { --barre-fixe: 104px; } /* barre d'admin 32 px + barre compacte 72 px : les blocs collants gardent leur marge sous l'en-tête */
@media screen and (max-width: 782px) { .admin-bar .hd { top: 46px; } .admin-bar { --barre-fixe: 118px; } }
@media screen and (max-width: 600px) { .admin-bar .hd { position: absolute; top: 46px; } }
.et-interieur .hd__strip { display: none; }
.et-interieur .hd.is-scrolled .hd__bar { margin-top: 0; } /* sans bandeau, rien à compenser : la remontée de 46 px des pages à photo coupait la barre (-36 → 36 px) */
.page-int { padding: 150px 0 clamp(56px, 7vw, 96px); min-height: 60svh; }
.page-int__h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1.04; margin-bottom: var(--space-xl); }
.page-int__corps, .page-int__liste { max-width: max(80%, 60ch); font-size: 1.0625rem; }
.page-int__item + .page-int__item { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--c-navy-line); }
.page-int__item h2 { font-size: 1.4rem; margin-bottom: var(--space-sm); }
.page-int__item h2 a { text-decoration: none; }
.page-int__corps img { border-radius: var(--r-card); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }