/* =====================================================================
   À propos — première section « Notre histoire »
   Panneaux photographiques diagonaux (ordinateur) / carrousel (mobile).
   Fichier chargé uniquement par a-propos.html.
   ===================================================================== */
.hist {
  --nuit: #0a1622;
  --nuit-2: #0f2133;
  --bleu: #229ad6;
  --ang: 11deg;              /* inclinaison des panneaux */
  --tan: .1944;              /* tan(11deg) */
  --hh: clamp(600px, 90svh, 980px);
  --off: calc(var(--hh) * var(--tan));
  --iw: clamp(350px, 32vw, 540px);
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  display: grid; grid-template-columns: var(--iw) minmax(0, 1fr); grid-template-rows: var(--hh) auto;
  background: var(--nuit); color: #fff;
}
@media (min-width: 1100px) { main > .hist:first-child:not(.ph):not(.hero) { padding-top: 0; } }
/* Voile haut pour la lisibilité de l'en-tête transparent */
.hist::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--hdr-h) + 70px); z-index: 7; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,22,34,.82) 0%, rgba(10,22,34,.5) 55%, rgba(10,22,34,0)); }

/* ---------- Introduction (zone stable) ---------------------------------- */
.hist__intro { grid-column: 1; grid-row: 1; position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--hdr-h) + 34px) 28px clamp(36px, 6vh, 64px) var(--gut);
  background: var(--nuit); }
.hist__crumbs { margin: 0; color: rgba(255,255,255,.66); }
.hist__crumbs a { color: inherit; }
.hist__head { max-width: 26rem; }
.hist__kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-family: var(--mono, ui-monospace, monospace); font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #8fd0f2; }
.hist__kicker::before { content: ""; width: 26px; height: 1px; background: var(--bleu); }
@media (min-width: 1321px) { .hist__title span { white-space: nowrap; } }
.hist__title { margin: 0; font-weight: 300; font-stretch: 96%; font-size: clamp(1.8rem, 2.3vw, 2.7rem); line-height: 1.12; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.hist__lead { margin: 22px 0 0; max-width: 24em; font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,.74); }
.hist__hint { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-family: var(--mono, ui-monospace, monospace); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* ---------- Scène : panneaux diagonaux ----------------------------------- */
.hist__stage { grid-column: 2; grid-row: 1; position: relative; z-index: 1; min-width: 0; overflow: hidden; overflow: clip; } /* clip : aucun défilement interne au focus */
.hist__list { display: flex; gap: 3px; height: 100%; margin: 0; padding: 0; list-style: none; }
.hist__item { position: relative; flex: 1 1 0; min-width: 150px; transition: flex-grow .75s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
/* Inclinaison depuis le coin bas-gauche : le haut du dernier panneau déborde à droite et se coupe net au bord de l'écran */
@media (min-width: 1100px) and (hover: hover) {
  .hist__list:hover .hist__item { flex-grow: .78; }
  .hist__list .hist__item:hover { flex-grow: 2.15; }
}
@media (min-width: 1100px) {
  .hist__list:has(.hist__panel:focus-visible) .hist__item { flex-grow: .78; }
  .hist__list .hist__item:has(.hist__panel:focus-visible) { flex-grow: 2.15; }
}

.hist__panel { all: unset; box-sizing: border-box; position: absolute; inset: 0; display: block; cursor: pointer; overflow: hidden; background: #0d1b29;
  transform: skewX(calc(-1 * var(--ang))); transform-origin: 0 100%; -webkit-tap-highlight-color: transparent; }
.hist__panel:focus-visible { outline: none; }
.hist__panel::before { content: ""; position: absolute; inset: 0; z-index: 3; border: 3px solid var(--bleu); opacity: 0; pointer-events: none; }
.hist__panel:focus-visible::before { opacity: 1; }

/* Photo : largeur fixe et centrée, contre-inclinée — la largeur du panneau
   change, la photo n'est jamais étirée ni recadrée brutalement. */
.hist__media { position: absolute; top: 0; bottom: 0; left: calc(50% + var(--off) / 2);
  width: calc((100vw - var(--iw)) * .58 + var(--off) * 2);
  transform: translateX(-50%) skewX(var(--ang)); transform-origin: 50% 100%; pointer-events: none; }
.hist__media .pic, .hist__media img { width: 100%; height: 100%; }
.hist__media img { object-fit: cover; filter: grayscale(0);
  transform: scale(1.02); transition: filter .9s cubic-bezier(.4, 0, .2, 1), transform 1.2s var(--ease-out, ease); }
.hist__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,17,27,.84) 0%, rgba(8,17,27,.4) 30%, rgba(8,17,27,0) 58%),
              linear-gradient(180deg, rgba(10,22,34,.35), rgba(10,22,34,0) 30%); transition: opacity .8s; }

/* Textes : contre-inclinés, ancrés en bas, toujours lisibles */
.hist__txt { position: absolute; left: 0; right: 0; bottom: 0; transform: skewX(var(--ang)); transform-origin: 0 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 18px clamp(30px, 5vh, 48px) 46px; pointer-events: none; }
.hist__txt::before { content: ""; width: 26px; height: 2px; margin-bottom: 16px; background: rgba(255,255,255,.5); transition: width .6s var(--ease-out, ease), background .4s; }
.hist__n { font-family: var(--mono, ui-monospace, monospace); font-size: .78rem; font-weight: 500; letter-spacing: .12em; color: rgba(255,255,255,.78); transition: color .4s; }
.hist__name { margin-top: 6px; font-weight: 450; font-stretch: 100%; font-size: clamp(1.02rem, 1.3vw, 1.32rem); line-height: 1.15; letter-spacing: -.005em; color: rgba(255,255,255,.9); text-shadow: 0 1px 14px rgba(0,0,0,.45); transition: color .4s; }
.hist__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease-out, ease), opacity .45s; }
.hist__more-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.hist__line { padding-top: 12px; max-width: 22em; font-size: .94rem; line-height: 1.5; color: rgba(255,255,255,.86); }
.hist__go { font-size: .8rem; font-weight: 650; letter-spacing: .02em; color: #fff; }
.hist__go span { display: inline-block; margin-left: 4px; color: var(--bleu); transition: transform .4s var(--ease-out, ease); }

/* État actif (survol / focus clavier) */
/* Couleur au repos ; passage progressif en noir et blanc au survol / focus, retour en couleur à la sortie */
@media (min-width: 1100px) { .hist__panel:focus-visible .hist__media img { filter: grayscale(1) contrast(1.05); transform: scale(1); } }
@media (min-width: 1100px) and (hover: hover) { .hist__panel:hover .hist__media img { filter: grayscale(1) contrast(1.05); transform: scale(1); } }
.hist__panel:is(:hover, :focus-visible) .hist__media::after { opacity: .82; }
.hist__panel:is(:hover, :focus-visible) .hist__txt::before { width: 54px; background: var(--bleu); }
.hist__panel:is(:hover, :focus-visible) .hist__n { color: #8fd0f2; }
.hist__panel:is(:hover, :focus-visible) .hist__name { color: #fff; }
.hist__panel:is(:hover, :focus-visible) .hist__more { grid-template-rows: 1fr; opacity: 1; }
.hist__panel:hover .hist__go span { transform: translateX(4px); }
/* Filet bleu discret au pied du panneau actif */
.hist__panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bleu); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out, ease); }
.hist__panel:is(:hover, :focus-visible)::after { transform: scaleX(1); }

/* Contrôles du carrousel : mobile uniquement */
.hist__ctrl { display: none; }

/* ---------- Encart de chapitre ------------------------------------------- */
.hist__details { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 6; }
.js .hist__details { grid-column: 2; grid-row: 1; pointer-events: none; }
.js .hist__detail:not(.is-open) { display: none; }
.hist__detail { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); background: var(--nuit); color: #fff; }
.js .hist__detail { position: absolute; inset: 0; pointer-events: auto; }
html:not(.js) .hist__detail { min-height: 70vh; border-top: 1px solid rgba(255,255,255,.12); }
.hist__fig { position: relative; margin: 0; overflow: hidden; clip-path: polygon(var(--off) 0, 100% 0, 100% 100%, 0 100%); background: #0d1b29; }
.hist__fig .pic, .hist__fig img { width: 100%; height: 100%; }
.hist__fig img { object-fit: cover; }
.hist__fig::after { content: ""; position: absolute; inset: auto 0 0 0; height: 150px; background: linear-gradient(0deg, rgba(8,17,27,.88), rgba(8,17,27,0)); pointer-events: none; }
.hist__fig figcaption { position: absolute; z-index: 1; left: calc(var(--off) * .3 + 22px); right: 22px; bottom: 18px; max-width: 34em; font-size: .78rem; line-height: 1.45; color: rgba(255,255,255,.94); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.hist__fig figcaption span { color: #8fd0f2; }
.hist__body { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--hdr-h) + 28px) clamp(28px, 4vw, 64px) 40px; min-width: 0; }
.hist__mark { display: flex; flex-direction: column; gap: 6px; margin: 0 0 26px; padding-left: 16px; border-left: 2px solid var(--bleu); }
.hist__mark b { font-weight: 250; font-stretch: 92%; font-size: clamp(2.6rem, 4.4vw, 4.2rem); line-height: 1; letter-spacing: -.03em; color: #fff; }
.hist__mark span { font-family: var(--mono, ui-monospace, monospace); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #8fd0f2; }
.hist__h { margin: 0 0 18px; font-weight: 400; font-stretch: 100%; font-size: clamp(1.45rem, 1.9vw, 1.9rem); line-height: 1.15; letter-spacing: -.01em; }
.hist__h span { font-family: var(--mono, ui-monospace, monospace); font-size: .5em; letter-spacing: .1em; color: var(--bleu); vertical-align: .35em; margin-right: .4em; }
.hist__h:focus { outline: none; }
.hist__h:focus-visible { outline: 3px solid var(--bleu); outline-offset: 6px; }
.hist__prose { max-width: 30em; color: rgba(255,255,255,.84); font-size: 1rem; line-height: 1.65; }
.hist__prose p:last-child { margin-bottom: 0; }
.hist__links { margin: 22px 0 0; }
.hist__links .text-link { color: #8fd0f2; }
.hist__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.hist__back-ico { display: inline-block; margin-right: 6px; transition: transform .4s var(--ease-out, ease); }
.hist__back:hover .hist__back-ico { transform: translateX(-4px); }
.hist__next { all: unset; cursor: pointer; font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.82); border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 3px; }
.hist__next:hover { color: #fff; border-color: var(--bleu); }
.hist__next:focus-visible { outline: 3px solid var(--bleu); outline-offset: 4px; }
.hist__next span { color: var(--bleu); }

/* Panneaux inertes pendant la lecture d'un chapitre */
.hist.is-open .hist__stage { visibility: hidden; }

/* ---------- Animations (uniquement si autorisées) ------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .js .hist__item { animation: hist-in 1.1s var(--ease-out, ease) both; animation-delay: calc(.12s + var(--i) * .11s); }
  .js .hist__head > * { animation: hist-up .9s var(--ease-out, ease) both; }
  .js .hist__head > :nth-child(2) { animation-delay: .1s; }
  .js .hist__head > :nth-child(3) { animation-delay: .2s; }
  .js .hist__head > :nth-child(4) { animation-delay: .3s; }
  .hist__detail.is-open .hist__fig { animation: hist-fig .8s var(--ease-out, ease) both; }
  .hist__detail.is-open .hist__body > * { animation: hist-up .7s var(--ease-out, ease) both; }
  .hist__detail.is-open .hist__body > :nth-child(2) { animation-delay: .05s; }
  .hist__detail.is-open .hist__body > :nth-child(3) { animation-delay: .1s; }
  .hist__detail.is-open .hist__body > :nth-child(n+4) { animation-delay: .15s; }
}
@keyframes hist-in { from { opacity: 0; transform: translate3d(0, 36px, 0); } to { opacity: 1; transform: none; } }
@keyframes hist-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hist-up { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes hist-fig { from { opacity: 0; clip-path: polygon(calc(var(--off) + 30%) 0, 100% 0, 100% 100%, 30% 100%); } to { opacity: 1; clip-path: polygon(var(--off) 0, 100% 0, 100% 100%, 0 100%); } }
@media (prefers-reduced-motion: reduce) {
  .hist__item, .hist__media img, .hist__more, .hist__txt::before, .hist__panel::after { transition: none !important; }
}

/* ---------- Écrans moyens -------------------------------------------------- */
@media (min-width: 1100px) and (max-width: 1320px) {
  .hist { --iw: 330px; }
  .hist__hint { display: none; }
  .hist__txt { padding-left: 40px; padding-right: 12px; }
  .hist__line { font-size: .88rem; }
}

/* ---------- Mobile et tablette : carrousel de cartes ----------------------- */
@media (max-width: 1099px) {
  .hist { display: block; overflow: visible; padding: calc(var(--hdr-h) + 22px) 0 36px; }
  .hist::before { display: none; }
  .hist__intro { padding: 0 var(--gut); background: none; display: block; }
  .hist__crumbs { margin-bottom: 30px; }
  .hist__head { max-width: 34rem; }
  .hist__kicker { margin-bottom: 16px; }
  .hist__title { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  .hist__lead { margin-top: 14px; font-size: .98rem; }
  .hist__hint { display: none; }
  .hist__stage { overflow: visible; margin-top: 28px; }
  .hist__list { gap: 12px; height: auto; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); padding: 0 var(--gut); scrollbar-width: none; }
  .hist__list::-webkit-scrollbar { display: none; }
  .hist__item { flex: 0 0 min(82vw, 400px); min-width: 0; scroll-snap-align: start; animation: none !important; }
    .hist__panel { position: relative; transform: none; aspect-ratio: 4 / 5; max-height: 62svh; width: 100%; border-radius: 6px; }
  .hist__media { left: 0; width: 100%; transform: none; }
  .hist__media img { filter: none; transform: none; }
  .hist__txt { transform: none; padding: 0 20px 22px; }
  .hist__more { grid-template-rows: 1fr; opacity: 1; }
  .hist__txt::before { background: var(--bleu); }
  .hist__name { font-size: 1.32rem; }
  .hist__panel::after { transform: none; }
  .hist__ctrl { display: flex; align-items: center; gap: 14px; margin: 18px var(--gut) 0; }
  .hist__arrow { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); color: #fff; cursor: pointer; }
  .hist__arrow:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
  .hist__arrow:disabled { opacity: .35; cursor: default; }
  .hist__pos { margin: 0; font-family: var(--mono, ui-monospace, monospace); font-size: .8rem; letter-spacing: .08em; color: rgba(255,255,255,.7); }
  .hist__pos b { color: #fff; font-weight: 500; }
  .hist__dots { display: flex; gap: 6px; margin-right: auto; }
  .hist__dots i { width: 18px; height: 2px; background: rgba(255,255,255,.28); transition: background .3s, width .3s; }
  .hist__dots i.is-on { width: 30px; background: var(--bleu); }
  .hist__ctrl [data-hist-prev] { order: 3; }
  .hist__ctrl [data-hist-next] { order: 4; }

  .js .hist__details { pointer-events: auto; }
  .js .hist__detail { position: relative; inset: auto; }
  .hist__detail { display: block; margin: 0; }
  .hist__fig { clip-path: none; aspect-ratio: 4 / 3; max-height: 60svh; }
  .hist__detail.is-open .hist__fig { animation-name: hist-fade; }
  .hist__fig figcaption { left: var(--gut); right: var(--gut); }
  .hist__body { padding: 26px var(--gut) 8px; }
  .hist__mark b { font-size: 2.6rem; }
  .hist.is-open .hist__stage { display: none; }
}
@media (max-width: 420px) {
  .hist__item { flex-basis: 84vw; }
  .hist__actions .btn { width: 100%; justify-content: center; }
}
@media print { .hist__stage { display: none; } .hist__detail { display: grid !important; position: static !important; } }
html:not(.js) .hist__actions, html:not(.js) .hist__ctrl { display: none; }

/* ---------- Nettoyage des doublons (v42) ------------------------------- */
/* Numérotation : la section « machines » devient la n°02 (usine = 01) */
body.p-a-propos main { counter-reset: sec 1; }
/* Liste des cinq savoir-faire, déplacée dans la section usine */
.chap__skills { margin-top: clamp(28px, 4vw, 48px); }
/* Adresse unique + itinéraire */
.chap__addr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 0 0 22px; font-style: normal; color: rgba(255,255,255,.86); }
.chap__addr .text-link { color: #8fd0f2; }
/* Pose : une seule image, sans case vide */
.chap__duo--solo { grid-template-columns: minmax(0, min(100%, 46rem)); }
@media (max-width: 900px) { .chap__duo--solo { grid-template-columns: 1fr; } }
/* Les cartes réutilisent le style « fond sombre » existant (.dark .panels) dans la section .chap--dark */
.chap--dark .panels > li { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.chap--dark .panels p { color: rgba(255,255,255,.7); }
.chap--dark .panels > li::before { color: rgba(255,255,255,.62); }
.chap--dark .panels > li:hover::before { color: var(--bleu); }
.chap--dark .panels h3 a { color: #fff; }
/* Valeurs : le mot « Responsabilité » ne doit plus chevaucher sa description */
.chap__values li { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.chap__values b { font-size: clamp(1.8rem, 3.4vw, 3.4rem); overflow-wrap: anywhere; }
@media (max-width: 900px) { .chap__values li { grid-template-columns: 1fr; } }
/* Pose : une seule mention « Visuel d'illustration » (l'étiquette et la légende se superposaient) */
.chap__ph .ill__tag { display: none; }

/* ---------- v44 : grands numéros de section 01 → 04 (même style que le « 03 ») ---------- */
body.p-a-propos main .h-sec::before { content: none; }
.fan .chap__n, .machines .chap__n { -webkit-text-stroke-color: rgba(255,255,255,.85); }
.fan .chap__side .meta, .machines .chap__side .meta { color: var(--bleu); }
.fan__head { align-items: end; }
.fan__hbody { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 64px); align-items: end; }
.fan__head .chap__side { position: static; }
.machines__head { margin-bottom: 0; }
.machines__head .chap__side { position: static; }
.machines__head .sec-head--stack { max-width: 52em; }
@media (max-width: 1099px) { .fan__hbody { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .fan__head, .machines__head { gap: 20px; }
}
/* « Une entreprise à taille humaine » : fond blanc pur, sur toute la largeur de la section */
body.p-a-propos .chap--paper { background: #fff; }