/* ==========================================================================
   Monclar Studio : couche commune à TOUTES les pages (accueil compris).
   Chargée juste après site.css et rb.css ; les feuilles de page (pages/*.css) et celles de l'accueil viennent après.
   Le 28 octobre 2026, l'ancienne couche de finition refine.css y a été fusionnée (elle est supprimée) :
   jetons, focus, échelle des titres, rythme vertical, boutons, éléments fixes, pied, en-tête des pages intérieures,
   formulaire, cibles tactiles, contrastes, aplat orange et bandeau d'appel.
   Palette : papier #F9F6F2 · vert #184840 · encre #0C0B09 · orange brûlé #D9753B. Aucun jaune, aucun or, aucun vert clair.
   Après toute modification : python3 outils-build/build-accueil-css.py (feuille fusionnée de l'accueil).
   ========================================================================== */

/* ---------- jetons ---------- */
:root {
  color-scheme: light;
  --sec: clamp(64px, 8vw, 120px);
  --green-dk: #0F332D;
  --sec-y: 112px;                       /* respiration verticale d'une section (haut et bas) */
  --t-h2: clamp(40px, 4.2vw, 60px);     /* titre de section : 60 px au bureau */
  --t-h3: clamp(22px, 1.9vw, 28px);     /* titre de carte, d'étape, de ligne de tableau */
  --btn-h: 48px;
  --focus: var(--green);
  --lift: .28s;
  --t-mid: .5s;
}
@media (max-width: 767px) {
  :root { --sec-y: 64px; --t-h2: 36px; --t-h3: 22px; }
}
::selection { background: var(--accent); color: #0C0B09; }
.dark ::selection, .fx ::selection, .sm__panel ::selection { background: var(--accent); color: #0C0B09; }

/* transition native entre les pages (Chrome, Safari 18.2+), sans script */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }

/* ---------- focus ---------- */
.dark, .ink, .fx, .cc, .sm__panel, .bar { --focus: var(--paper); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:where(.btn, .hd__cta, .cc__btn, .bar a, .hd__menu, .fz__rev):focus-visible { border-radius: 999px; }

/* ---------- échelle typographique : h1 > h2 > h3 > corps ---------- */
.lead, h2.lead, h2.sec__h { font-size: var(--t-h2); line-height: 1.04; }
.display { letter-spacing: -.012em; }
.st-a__lead { font-size: var(--t-h2); line-height: 1.08; }
.mt-a__n, .rl-a__n, .step__t, .cap__t, h3.display-s, .sec h3, .art h3, .idx h3 { font-size: var(--t-h3); }
.lead--s, h2.lead.lead--s, h2.lead.art__h, h2.art__h { font-size: var(--t-h3); line-height: 1.1; }

/* ---------- rythme vertical : un seul jeton pour toutes les sections ---------- */
.sec, .sec--a, .sec--b, .sec--c, .st-a, .mt-a, .rl-a, .px, .tx, .vx, .qx, .cta, .ct, .nx { padding-block: var(--sec-y); }
.sec--c { padding-block-start: calc(var(--sec-y) * .6); }
/* pas de rendu différé : il masquait des sections entières aux captures et aux ancres */
.sec, .cta, .pager, .fx, .nf__list, .cs, .arts, .st-a, .mt-a, .rl-a, .px, .tx, .vx, .qx { content-visibility: visible; contain-intrinsic-size: none; }
/* sections qui ne portent que leur titre : elles n'occupent plus de hauteur */
.sec:not(:has(:not(h2, h3, .folio, .sec__h, .lbl, span, br))):not(:has(img, figure, ul, ol, dl, table, details, form, a, p)) { padding-block: 0; }

/* ---------- labels ---------- */
.sx-cap { font-family: var(--f-text); font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; }

/* ---------- boutons : deux styles, une définition chacun (décision de Clara, 28 octobre 2026) ----------
   .sx-btn = n° 6, action principale (devis, appel, envoi du formulaire, appel de fin de section) : rectangle à 14 px, filet 1,5 px,
             ombre décalée de 5 px, effet d'appui au survol. Fond orange sur papier et sur vert ; fond vert sur l'aplat orange.
             .sx-btn--line : même dessin sans fond, pour l'appel posé à côté d'un devis (jamais deux boutons pleins côte à côte).
   .btn    = pilule, actions secondaires, filtres et contrôles : 48 px, filet vert ; .btn--ghost et « Devis » de l'en-tête sans fond.
   Les couleurs passent par des variables (--b-*) : chaque contexte ne change que les couleurs, jamais la forme. */
.sx-btn { --b-bg: var(--accent); --b-hv: var(--accent-hv); --b-fg: var(--paper); --b-fg-hv: var(--paper); /* texte blanc sur orange (28 octobre 2026) */ --b-line: var(--ink); --b-line-hv: var(--ink); --b-sh: var(--green);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px;
  background: var(--b-bg); color: var(--b-fg); border: 1.5px solid var(--b-line); border-radius: 16px; box-shadow: 5px 5px 0 var(--b-sh);
  font-family: var(--f-text); font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.sx-btn:visited { color: var(--b-fg); }
.sx-btn:hover, .sx-btn:focus-visible { background: var(--b-hv); color: var(--b-fg-hv); border-color: var(--b-line-hv); transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--b-sh); }
.sx-btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--b-sh); }
.sx-btn:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: 5px 5px 0 var(--b-sh); }
.dark .sx-btn, .fx .sx-btn, .fz__stick .sx-btn { --b-sh: var(--ink); }
.orange .sx-btn { --b-bg: #184840; --b-hv: var(--ink); --b-fg: var(--paper); --b-fg-hv: var(--paper); --b-line: #184840; --b-sh: var(--ink); }
.sx-btn--line { --b-bg: transparent; --b-hv: var(--green); --b-fg: var(--green); --b-fg-hv: var(--paper); --b-line: var(--green); --b-line-hv: var(--green); }
.dark .sx-btn--line, .fz__stick .sx-btn--line { --b-hv: var(--paper); --b-fg: var(--paper); --b-fg-hv: var(--green); --b-line: var(--paper); --b-line-hv: var(--paper); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--btn-h); padding: 0 26px; border-radius: var(--r-pill);
  background: var(--green); color: var(--paper); border: 1.5px solid var(--green);
  font-family: var(--f-text); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: .01em; text-transform: none; text-decoration: none; cursor: pointer;
  transition: background-color var(--lift) var(--ease), color var(--lift) var(--ease), border-color var(--lift) var(--ease), transform var(--lift) var(--ease); }
.btn:hover, .btn:focus-visible { background: var(--green-dk); border-color: var(--green-dk); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn--ghost, .hd__cta { background: transparent; color: var(--green); border-color: var(--green); }
.btn--ghost:hover, .btn--ghost:focus-visible, .hd__cta:hover, .hd__cta:focus-visible { background: var(--green); border-color: var(--green); color: var(--paper); }
.dark .btn, .ink .btn { background: var(--paper); border-color: var(--paper); color: var(--green); }
.dark .btn:hover, .dark .btn:focus-visible, .ink .btn:hover, .ink .btn:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.dark .btn--ghost { background: transparent; color: var(--paper); border-color: var(--paper); }
.dark .btn--ghost:hover, .dark .btn--ghost:focus-visible { background: var(--paper); color: var(--green); }
.orange .btn { background: #184840; border-color: #184840; color: var(--paper); }
.hd__cta { min-height: var(--btn-h); padding: 0 26px; transition: background-color var(--lift) var(--ease), color var(--lift) var(--ease), border-color var(--lift) var(--ease); }
/* contrôles du bandeau cookies : même pilule, couleurs posées dans site.css */
.cc__btn { border-radius: var(--r-pill); font-family: var(--f-text); font-size: 14px; font-weight: 600; letter-spacing: .01em; text-transform: none; line-height: 1; height: auto; box-shadow: none;
  transition: background-color var(--lift) var(--ease), color var(--lift) var(--ease), border-color var(--lift) var(--ease), opacity var(--lift) var(--ease); }

/* ---------- en-tête : se retire en descendant, revient en remontant ---------- */
.hd { transition: transform .4s var(--ease); }
.hd.is-away { transform: translateY(calc(-100% - 24px)); }
.hd__menu { transition: background-color var(--lift) var(--ease), color var(--lift) var(--ease), border-color var(--lift) var(--ease), opacity .25s var(--ease); }
/* le rond « Menu » ne sert qu'à la pilule compacte ou quand la nav complète n'est pas affichée */
@media (min-width: 1024px) {
  .hd .hd__menu { transition: margin-left .3s var(--ease), opacity .25s var(--ease), background-color var(--lift) var(--ease), color var(--lift) var(--ease); }
  .hd:not(.is-compact) .hd__menu { visibility: hidden; opacity: 0; pointer-events: none; margin-left: calc(-48px - 24px); }
}
.hd:has(.hd__menu[aria-expanded="true"]) { transform: none; }

/* ---------- barre d'action mobile : n'apparaît qu'après le premier écran ---------- */
@media (max-width: 860px) {
  .bar-js .bar { transform: translateY(calc(100% + 28px)); opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform .4s var(--ease), opacity .3s var(--ease), visibility 0s linear .4s; }
  .bar-js body.bar-on .bar { transform: none; opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .bar-js body.bar-on.at-end .bar { transform: translateY(calc(100% + 28px)); opacity: 0; pointer-events: none; }
  .bar a { font-size: 15px; }
  .bar a:last-child { min-height: var(--btn-h); height: auto; padding: 0 26px; border-radius: 999px; font-family: var(--f-text); font-size: 14px; font-weight: 600; letter-spacing: .01em; text-transform: none; line-height: 1; box-shadow: none; }
  /* tant que la barre est cachée, l'en-tête garde son « Devis » */
  .bar-js body.has-bar:not(.bar-on) .hd__cta { display: inline-flex; }
  .has-bar .hd { padding-right: 6px; }
  .hd { min-height: 60px; padding: 6px 6px 6px 16px; }
  .hd__cta { min-height: 48px; padding: 0 18px; }
  .hd__menu { width: 48px; height: 48px; }
}

/* ---------- bandeau cookies : bloc compact, discret ---------- */
.cc { left: auto; right: 16px; bottom: 16px; margin: 0; width: max-content; max-width: min(760px, calc(100vw - 32px)); min-height: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 6px 6px 6px 20px; border-radius: 28px; font-size: 13px; line-height: 1.35; max-height: none; }
.cc__txt { flex: 1 1 320px; max-width: 34em; font-size: 13px; line-height: 1.35; }
.cc__act { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
.cc__btn { min-height: 44px; min-width: 0; padding: 0 18px; font-size: 14px; }
.cc__btn[data-cc="custom"] { min-height: 44px; padding: 0 8px; border: 0; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(249, 246, 242, .5); border-bottom: 0; }
.cc__btn[data-cc="custom"]:hover { text-decoration-color: var(--paper); }
.cc:has(.cc__panel:not([hidden])) { border-radius: 24px; padding: 14px 16px 14px 20px; }
.cc__panel { flex: 1 1 100%; }
.cc__open { font-size: 13px; min-height: 44px; }
@media (max-width: 767px) {
  .cc { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; min-height: 56px; max-height: 56px; flex-wrap: nowrap; padding: 6px 6px 6px 14px; border-radius: 999px; gap: 8px; }
  .cc:has(.cc__panel:not([hidden])) { max-height: none; flex-wrap: wrap; border-radius: 24px; }
  .cc__txt { flex: 1 1 auto; font-size: 12px; line-height: 1.3; min-width: 0; }
  .cc__txt a, .cc__ga { display: none; }
  .cc__btn { padding: 0 14px; font-size: 13px; }
  .cc__btn[data-cc="custom"] { display: none; }
  .cc:has(.cc__panel:not([hidden])) .cc__btn[data-cc="custom"] { display: inline-flex; }
  .has-bar .cc { bottom: 12px; }
  body.bar-on .cc { bottom: calc(12px + 64px + env(safe-area-inset-bottom, 0px)); }
  .cc__open { left: 12px; bottom: 12px; }
}

/* ---------- pied de page : colonne centrée ; la photo des Calanques en tête, ENTIÈRE (16:9, aucun recadrage), centrée avec de l'air sur les côtés, rayon 16 px ---------- */
.fx { position: relative; isolation: isolate; overflow: hidden; padding-inline: var(--m); text-align: center; display: grid; justify-items: center; gap: 20px; color: var(--paper);
  --pw: min(calc(100vw - 4 * var(--m)), 1000px); --ph: calc(var(--pw) * .5625); --bg: #184840;
  padding-block: calc(var(--m) * 1.5 + var(--ph) + clamp(52px, 6.5vw, 96px)) 32px; background: var(--bg); }
.fx::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; margin-inline: auto; top: calc(var(--m) * 1.5); width: var(--pw); height: var(--ph); border-radius: var(--r); pointer-events: none;
  background: url(../img/fond-pied-1600.webp) center / cover no-repeat; }
.fx a { text-decoration: none; }
.fx :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fx__logo { margin-bottom: 10px; }
.fx__logo img { width: clamp(70px, 8vw, 110px); height: auto; filter: brightness(0) invert(1); }
.fx .sx-cap { color: var(--paper); }
.fx__t { max-width: 17ch; font-size: clamp(38px, 5.4vw, 80px); line-height: 1.02; margin-top: 6px; }
.fx__cta { margin: 6px 0 4px; }
.fx__tm { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 20px; font-family: var(--f-text); font-weight: 500; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; }
.fx__tm span { width: 6px; height: 6px; border-radius: 50%; background: var(--paper); }
.fx__tm a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule-dk); transition: border-color .25s var(--ease); }
.fx__tm a:hover, .fx__tm a:focus-visible { border-bottom-color: var(--paper); }
.fx__adr { color: var(--paper); }
.fx__adr a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-dk); }
.fx__rule { width: 100%; max-width: 1100px; height: 1px; background: var(--rule-dk); margin: clamp(20px, 3vw, 40px) 0 clamp(8px, 2vw, 24px); }
.fx__nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 28px clamp(40px, 7vw, 112px); max-width: 1100px; }
.fx__nav > div { display: grid; gap: 12px; justify-items: center; align-content: start; }
.fx__nav ul { display: grid; gap: 0; justify-items: center; }
/* soulignement qui se trace au survol : un filet de 1 px (pseudo-élément), aucun dégradé */
.fx__nav ul a { position: relative; display: inline-flex; align-items: center; min-height: 44px; }
.fx__nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .3s var(--ease); }
.fx__nav ul a:hover::after, .fx__nav ul a:focus-visible::after { transform: scaleX(1); }
.fx__legal { display: grid; gap: 6px; justify-items: center; width: 100%; max-width: 1280px; margin-top: clamp(32px, 5vw, 64px); padding-top: 20px; border-top: 1px solid var(--rule-dk); font-size: 13px; line-height: 1.5; color: var(--paper); }
.fx__legal p { max-width: 70ch; }
.fx__legal p:has(a) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: .4em; }
.fx__legal a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
@media (max-width: 767px) {
  .fx::before { background-image: url(../img/fond-pied-800.webp); }
  .fx__tm span { display: none; }
  .fx__tm { flex-direction: column; gap: 10px; }
  .fx .sx-btn { width: 100%; max-width: 360px; }
  .fx__cta { width: 100%; display: grid; justify-items: center; }
  .has-bar .fx { padding-bottom: calc(32px + 92px); }
}

/* ---------- courbes de niveau (img/courbes-niveau-vert.svg), le motif de l'accueil, sur les fonds clairs des pages intérieures ---------- */
.pg, .sec.pale, .sec.alt, .cta.pale, .ct, .nf__list { position: relative; isolation: isolate; }
.pg::before, .sec.pale::before, .sec.alt::before, .cta.pale::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../img/courbes-niveau-vert.svg) var(--cx, 0%) var(--cy, 0%) / 230% auto no-repeat; opacity: .07; }
.sec.pale { --cx: 100%; --cy: 30%; overflow: hidden; }
.sec.alt { --cx: 30%; --cy: 70%; overflow: hidden; }
.cta.pale { --cx: 70%; --cy: 100%; overflow: hidden; }
.pg::before { --cx: 0%; --cy: 0%; }

/* ---------- en-tête des pages intérieures : titre lisible d'emblée, une action, une image réelle quand elle existe ---------- */
.pg { background: var(--paper); overflow: hidden; }
.pg.pg--dark { background: var(--green); }
.pg.pg--dark::before { content: none; }
.pg__act { grid-column: 8 / 13; grid-row: 4; margin-top: clamp(24px, 3vw, 36px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.pg__tel { text-decoration: none; border-bottom: 1px solid rgba(12, 11, 9, .4); padding: 12px 0 2px; font-variant-numeric: tabular-nums; }
.pg__tel:hover, .pg__tel:focus-visible { border-bottom-color: currentColor; }
.dark .pg__tel { border-bottom-color: var(--rule-dk); }
.pg__media { display: block; margin: 0; overflow: hidden; border-radius: var(--r); background: var(--paper-2); aspect-ratio: 4 / 3; }
.pg__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pg__media figcaption { display: none; }
.pg__cap { color: var(--ink-2); margin-top: 8px; }
@media (min-width: 861px) {
  .pg--media .crumb { grid-column: 4 / 9; }
  .pg--media .pg__title { grid-column: 1 / 9; font-size: clamp(56px, 6vw, 100px); }
  .pg--media .pg__intro { grid-column: 4 / 9; }
  .pg--media .pg__act { grid-column: 4 / 9; }
  .pg--media .pg__fig { grid-column: 9 / 13; grid-row: 1 / 6; align-self: start; margin: 0; }
}
@media (max-width: 860px) {
  .pg__act { margin-top: 28px; gap: 6px 20px; }
  .pg__fig { margin: 32px 0 0; }
}

/* premier écran avec un média propre à la page (capture d'une réalisation, photo réelle) dans la moitié droite, à côté du titre */
.pg__fig { margin: 0; }
.pg--fig .pg__media { display: block; aspect-ratio: 4 / 3; }
.pg--fig .pg__media img { object-position: top center; }
@media (min-width: 861px) {
  .pg--fig .crumb { grid-column: 4 / 9; }
  .pg--fig .pg__title { grid-column: 1 / 9; }
  .pg--fig .pg__fig { grid-column: 9 / 13; grid-row: 1 / 3; align-self: end; }
}
@media (max-width: 860px) {
  .pg--fig .pg__fig { margin-top: 32px; }
  .pg--fig .pg__media { aspect-ratio: 16 / 10; }
}

/* ---------- page contact : le formulaire dès le premier écran ---------- */
@media (min-width: 861px) {
  .pg--ct .folio { grid-column: 1 / 3; }
  .pg--ct .crumb { grid-column: 3 / 7; }
  .pg--ct .pg__title { grid-column: 1 / 7; font-size: clamp(56px, 6vw, 100px); }
  .pg--ct .pg__meta { grid-column: 1 / 3; }
  .pg--ct .pg__intro { grid-column: 3 / 7; }
  .pg--ct .ct__big { grid-column: 1 / 7; grid-row: 4; }
  .pg--ct .ct__form { grid-column: 8 / 13; grid-row: 1 / 6; align-self: start; }
}
.pg--ct .ct__big a { border-bottom-color: var(--rule); display: inline-flex; align-items: center; min-height: 44px; }
.pg--ct .ct__big a:hover { border-bottom-color: var(--ink); }
.ct__form .ct__n { color: var(--ink-2); margin-bottom: 10px; }
.ct--after .ct__side { grid-column: 1 / 13; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px var(--g); }
@media (max-width: 860px) { .pg--ct .ct__form { margin-top: 48px; } }

/* ---------- formulaire de contact ---------- */
/* case de consentement : 24 px, ligne de 44 px, casse normale */
.form__consent { min-height: 44px; align-items: flex-start; gap: 16px; padding: 4px 0; font-size: 13px; line-height: 1.55; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.form .form__consent, .form label.form__consent { padding-left: 0; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; }
.form__consent input, .cc__opt input { width: 24px; height: 24px; margin: 0; border-radius: 6px; border-width: 1.5px; }
.form__consent input::before, .cc__opt input::before { width: 12px; height: 12px; border-radius: 3px; }
.form__consent input::before { background: var(--green); }
.form__consent .form__err { margin-left: 38px; }
.form__consent { flex-wrap: nowrap; }
.form__consent > span { flex: 1 1 0; min-width: 0; } /* le texte à côté de la case, pas dessous */
.form__consent a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-transform: none; }
.form__more summary { min-height: 44px; display: inline-flex; align-items: center; }
.form__send { margin-top: 20px; }
.form input::placeholder, .form textarea::placeholder { color: rgba(12, 11, 9, .56); }
.form :is(input, select, textarea) { transition: border-color var(--lift) var(--ease), background-color var(--lift) var(--ease), box-shadow var(--lift) var(--ease); }
.form :is(input, select, textarea):hover:not(:focus) { border-color: var(--green); }
.form :is(input, select, textarea):focus { box-shadow: 0 0 0 3px rgba(24, 72, 64, .18); }
.form :is(input, select, textarea):user-invalid { border-color: #9c2b1e; }
.ct .lbl.ct__q, #ct-title { font-family: var(--f-text); font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }

/* ---------- 404 (papier, chemins absolus) ---------- */
.nf.pg { background: var(--paper); color: var(--ink); }

/* ---------- liens et cartes : états soignés ---------- */
a { text-underline-offset: .22em; text-decoration-thickness: 1px; }
.lnk, .form__alt a, .ct__side a, .sec__aside a, .art a, .faq a { transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); }
.ct__side a:hover, .sec__aside a:hover { color: var(--green); border-bottom-color: var(--green); }
.mt-a__r > a, .rl-a__t, .idx a, .cs__it, .pager a, .map__city { transition: background-color var(--lift) var(--ease), border-color var(--lift) var(--ease), color var(--lift) var(--ease), transform var(--lift) var(--ease); }
.mt-a__r > a:focus-visible, .idx a:focus-visible, .pager a:focus-visible, .rl-a__t:focus-visible { outline-offset: -3px; }
.mt-a__go, .idx__go { transition: transform var(--lift) var(--ease); }
.mt-a__r a:hover .mt-a__go, .mt-a__r a:focus-visible .mt-a__go { transform: translateX(6px); }

/* ---------- cibles tactiles de 44 px ---------- */
.crumb a, .pager a, .ix__go, .art__side a, .sec__aside a, .ix__links a, .ct__side a { display: inline-flex; align-items: center; min-height: 44px; }
.crumb a { padding-bottom: 0; }
.crumb ol { align-items: center; }
.ix__go { min-width: 44px; justify-content: flex-end; }
.map__hit { fill: transparent; stroke: none; }
@media (max-width: 767px) {
  .crumb a, .fx a, .fx__nav ul a, .fx__legal a, .fx__tm a, .fx__adr a, .pager a, .ix__links a, .ct__side a, .sec__aside a, .art__aside a, .map__city, a.lnk, .qx__more .lnk, .tx__act .lnk, .sm__foot a, .faq summary, .form__more summary {
    display: inline-flex; align-items: center; min-height: 44px; }
  .fx__adr a { display: inline; min-height: 0; padding-block: 12px; }
  .crumb ol { row-gap: 0; }
  .hd__brand { min-height: 44px; }
  .ix__t, .nf a, .ix a { display: inline-flex; align-items: center; min-height: 44px; }
  .ct__big a, .form__alt a { display: inline-flex; align-items: center; min-height: 44px; }
  .form__consent a { padding-block: 13px; margin-block: -13px; }
  .sec p a:not(.btn), .row p a:not(.btn), .art p a, .faq a { padding-block: 11px; margin-block: -11px; }
}

/* ---------- contrastes ---------- */
.dark .lbl, .dark .folio, .sec.dark .lbl, .sec.dark .folio, .fx .sx-cap, .fx__legal, .fx__adr { color: rgba(249, 246, 242, .82); }
.pale:not(.dark) .lbl, .alt:not(.dark) .lbl, .sec:not(.dark) .lbl { color: var(--ink-2); }

/* ---------- section pleine orange (.orange) : aplat #D9753B pur, sans voile, dégradé, grain, trame ni filtre ; texte BLANC papier à pleine opacité
   (demande de Clara, 28 octobre 2026) ; filets papier de 1,5 px ; bords droits ; boutons verts (voir « boutons »). Accueil : « Métiers », « Procédé » et le bandeau d'appel .cta-or
   (jamais deux de suite). Pages intérieures : le bandeau .cta-or, plus l'appel d'un article du journal. ---------- */
.orange { --ink-2: var(--paper); --green: var(--paper); --green-2: var(--paper); --gold: var(--paper); --rule: var(--paper); --green-3: var(--accent-hv);
  background: var(--accent); background-image: none; color: var(--paper); border-radius: 0; isolation: isolate; filter: none; backdrop-filter: none; }
.orange::before, .orange::after, .orange[data-noise]::before { content: none; background: none; }
.orange :is(canvas, .stk, .grain, .topo) { display: none; }
.orange :is(h1, h2, h3, h4, p, li, span, a, dt, dd, small, address, .lbl, .sx-cap, .lead, .folio):not(.sx-btn):not(.btn) { color: var(--paper); opacity: 1; }
.orange :is(.sx-cap, .lbl) { font-weight: 600; }
.orange :focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.orange ::selection { background: var(--paper); color: var(--accent-dk); }
.orange .lnk, .orange a:not(.sx-btn) { text-decoration-color: var(--paper); }
.orange .lnk::after { background: var(--paper); }

/* bandeau d'appel : détaché du pied de page, juste au-dessus */
.cta-or { position: relative; display: grid; justify-items: center; gap: 20px; text-align: center; padding: clamp(72px, 9vw, 128px) var(--m); }
.cta-or .fx__t { color: var(--paper); }
.cta-or .fx__tm span { background: var(--paper); }
.cta-or .fx__tm a { color: var(--paper); border-bottom: 1.5px solid var(--paper); text-decoration: none; }
.cta-or .fx__tm a:hover, .cta-or .fx__tm a:focus-visible { background: var(--paper); color: var(--accent-dk); }
/* au survol sur fond orange, la bande est VERTE (comme les boutons) : le texte reste papier, lisible (la règle .orange ci-dessus force le texte en papier, une bande papier le rendait invisible) */
.orange .mt-a__r a::before { background: #184840; }
.cta-or.orange .fx__tm a:hover, .cta-or.orange .fx__tm a:focus-visible { background: #184840; color: var(--paper); }
.cta-or .fx__adr a { text-decoration: underline; }
@media (max-width: 767px) { .cta-or .sx-btn { width: 100%; max-width: 360px; } .cta-or .fx__cta { width: 100%; display: grid; justify-items: center; } .cta-or .fx__tm { flex-direction: column; gap: 10px; } .cta-or .fx__tm span { display: none; } }

/* ---------- impression (CGV, mentions, offres) ---------- */
@media print {
  .hd, .bar, .cc, .cc__open, .sm, canvas, video, .fx__logo, .fx__nav, .pg__fig, .pg::before, .sec::before, .fx::before { display: none !important; }
  body { background: #fff; color: #000; }
  .dark, .pale, .alt, .pg, .fx { background: none !important; color: #000 !important; }
  .fx * , .dark * { color: #000 !important; }
  .sec, .cta, .pager, .fx { content-visibility: visible; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
  .pg { padding-top: 24px; }
}

/* ---------- mouvement : doux, cohérent, et coupé si demandé ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hd.is-away { transform: none; }
  .bar-js .bar { transform: none; transition: none; }
  .sx-btn { transition: none; }
}

/* ---------- titres centrés sur toutes les pages (28 octobre 2026, demande de Clara) ----------
   Haut de page : label, fil d'Ariane et titre centrés sur toute la largeur ; dessous, texte à gauche et image à droite.
   Sections : label et titre centrés, le texte passe dans une colonne centrée. Exceptions : la variante .pg--ct (formulaire
   dans la moitié droite du premier écran, inutilisée à ce jour) et les intertitres du corps des articles du journal. */
.pg:not(.pg--ct) > .folio, .pg:not(.pg--ct) > .pg__title { text-align: center; }
.pg:not(.pg--ct) .crumb ol { justify-content: center; }
.pg:not(.pg--ct) > .pg__title { text-wrap: balance; }
@media (min-width: 861px) {
  .pg:not(.pg--ct) > .folio { grid-column: 1 / -1; grid-row: 1; }
  .pg:not(.pg--ct) > .crumb { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 10px; }
  .pg:not(.pg--ct) > .pg__title { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
  .pg:not(.pg--ct) > .pg__meta, .pg:not(.pg--ct) > .pg__intro { grid-row: 4; }
  .pg:not(.pg--ct) > .pg__act, .pg:not(.pg--ct) > .ct__big { grid-row: 5; }
  .pg:not(.pg--ct) > .ct__big { grid-column: 1 / -1; justify-content: center; }
  .pg.pg--fig > .pg__intro { grid-column: 1 / 7; grid-row: 4; }
  .pg.pg--fig > .pg__meta { grid-column: 1 / 7; grid-row: 5; }
  .pg.pg--fig > .pg__act { grid-column: 1 / 7; grid-row: 6; }
  .pg.pg--fig > .pg__fig { grid-column: 8 / 13; grid-row: 4 / 8; align-self: start; margin-top: clamp(32px, 4vw, 56px); }
}
.sec > .folio, .art > .folio { text-align: center; }
.sec.sec > .sec__h, .art.art > .art__h { text-align: center; text-wrap: balance; max-width: 24em; margin-inline: auto; }
@media (min-width: 861px) {
  .sec > .folio, .art > .folio { grid-column: 1 / -1; }
  .sec.sec > .sec__h, .art.art > .art__h { grid-column: 2 / 12; justify-self: center; }
  .sec.sec > .sec__body { grid-column: 4 / 10; }
  .sec.sec > .sec__body--wide { grid-column: 3 / 11; }
}

/* ---------- verre dépoli en bas de l'écran pendant le défilement (28 octobre 2026, demande de Clara ; js/glass-bas.js) ----------
   Quatre couches de flou de plus en plus fort vers le bas (flou progressif) et un léger voile clair, d'après « Glass Surface »
   (React Bits) sans sa réfraction irisée. Sous l'en-tête, la barre mobile et le bandeau cookies ; aucun clic capté. */
.gb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 39; height: clamp(84px, 12vh, 132px); pointer-events: none;
  opacity: 0; transition: opacity .45s var(--ease); }
.gb.is-on { opacity: 1; }
.gb i, .gb::after { position: absolute; inset: 0; pointer-events: none; }
.gb i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 55%, transparent 80%); mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 55%, transparent 80%); }
.gb i:nth-child(2) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 25%, #000 50%, #000 75%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 25%, #000 50%, #000 75%, transparent 100%); }
.gb i:nth-child(3) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, #000 78%); mask-image: linear-gradient(to bottom, transparent 50%, #000 78%); }
.gb i:nth-child(4) { -webkit-backdrop-filter: blur(11px) saturate(1.35); backdrop-filter: blur(11px) saturate(1.35);
  -webkit-mask-image: linear-gradient(to bottom, transparent 68%, #000 100%); mask-image: linear-gradient(to bottom, transparent 68%, #000 100%); }
.gb::after { content: ""; background: linear-gradient(to bottom, rgba(249, 246, 242, 0), rgba(249, 246, 242, .14)); }
@media (prefers-reduced-transparency: reduce) { .gb { display: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gb { display: none; } }
@media print { .gb { display: none; } }