/* ===========================================================================
   TEC'OFFICE M08 — histoire : le fil des annees + les plateaux livres
   ---------------------------------------------------------------------------
   Regle d'or : cette feuille ne cache rien par elle-meme.
   - .fil-on, .allume, .zm, .pl-on, .h1m et les elements .fil-* ne sont poses
     que par scenes-histoire.js, et seulement si GSAP est la ;
   - sans GSAP (librairie absente, mouvement refuse), la bande de photos est
     un simple defilement horizontal natif, lisible au doigt et au clavier.
   =========================================================================== */

/* ---- 0. TITRE DU HERO : masques poses par le script ------------------------
   inline-block : la coupure des lignes reste celle d'origine. Le masque deborde
   un peu (accents, apostrophes) sans rien deplacer (marges negatives). */
.phero h1 .h1m {
  display: inline-block; vertical-align: top; overflow: hidden;
  padding: .1em .06em .12em; margin: -.1em -.06em -.12em;
  color: inherit; font-weight: inherit;
}
.phero h1 .h1i { display: inline-block; color: inherit; font-weight: inherit; }

/* ---- 1. LE FIL DES ANNEES ------------------------------------------------
   L'annee devient grande (Inter Tight 900) : c'est elle qui « atterrit ». */
.tl-year {
  font-family: var(--disp); font-weight: 900;
  font-size: clamp(48px, 6vw, 92px); line-height: .9; letter-spacing: -.055em;
}
.tl-year::after { margin-top: 16px; }

/* au crayon (contour) tant que la plume ne l'a pas atteinte */
.tl.fil-on .tl-year {
  position: relative; color: transparent;
  -webkit-text-stroke: 1px var(--line2);
  transition: -webkit-text-stroke-color .3s ease .35s;
}
/* une fois l'encre posee, le contour au crayon s'efface (aucun liseré) */
.tl.fil-on .tlrow.allume .tl-year { -webkit-text-stroke-color: transparent; }
.fil-encre {
  position: absolute; left: 0; top: 0;
  color: var(--ink); -webkit-text-stroke: 0; white-space: nowrap;
  pointer-events: none; -webkit-user-select: none; user-select: none;
}
/* chaque chiffre descend de son propre masque : les chiffres se posent un par un */
.fil-encre .fd {
  display: inline-block; vertical-align: top; overflow: hidden;
  padding: .1em 0 .08em; margin: -.1em 0 -.08em;
}
.fil-encre .fd > i { display: inline-block; font-style: normal; }
/* le soulignement se trace quand l'annee est atteinte (transition d'origine) */
.tl.fil-on .tlrow:not(.allume) .tl-year::after { transform: scaleX(0); }
.tl.fil-on .tlrow.allume .tl-year::after { transform: scaleX(1); }

/* le trait a l'encre (3 px), pose sur le trait de crayon d'origine */
.fil-piste {
  position: absolute; left: -1px; width: 3px; z-index: 1; pointer-events: none;
  top: calc(-1 * var(--tl-pt)); bottom: calc(-1 * var(--tl-pb));
}
.fil-trait { position: absolute; inset: 0; background: var(--ink); will-change: transform; }
/* la plume : un losange d'encre et un trait de cote, au bout du trace */
.fil-plume { position: absolute; left: 1.5px; top: 0; width: 0; height: 0; will-change: transform; }
.fil-plume i {
  position: absolute; left: -5.5px; top: -5.5px; width: 11px; height: 11px;
  background: var(--ink); transform: rotate(45deg);
}
.fil-plume b {
  position: absolute; left: -16px; top: -.5px; width: 32px; height: 1px; background: var(--ink);
}

/* le jalon : meme carre que l'original, qui se remplit quand il est atteint */
.fil-noeud {
  position: absolute; left: -5px; top: 9px; width: 11px; height: 11px; z-index: 2;
  background: var(--paper); border: 1.5px solid var(--ink); pointer-events: none;
}
.fil-noeud i { position: absolute; inset: -1.5px; background: var(--ink); }
/* le repere qui « tamponne » le jalon a l'arrivee */
.fil-noeud b {
  position: absolute; inset: -9px; border: 1px solid var(--ink); pointer-events: none;
}
.tl.fil-on .tl-body::before { visibility: hidden; }
.tlrow:focus-within .fil-noeud { background: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .tlrow:hover .fil-noeud { background: var(--ink); }
}
@media (max-width: 860px) {
  .fil-piste { top: 0; bottom: 0; }
  .tl-year { font-size: clamp(46px, 13vw, 64px); }
}
@media (max-width: 600px) {
  .tl-year { font-size: clamp(44px, 13vw, 56px); margin-top: 10px; }
  .tl-year::after { margin-top: 11px; }
}

/* ---- 2. TITRES DE SECTION reveles ligne par ligne (masques du script) ---- */
.hl {
  display: block; overflow: hidden;
  padding: .16em 0 .08em; margin: 0 0 -.24em;
}
.hl:first-child { margin-top: -.16em; }
.hl:last-child { margin-bottom: -.08em; }
.hl > span { display: block; }
.hl-fini .hl { overflow: visible; }

/* zoom des figures par la propriete `scale` (pas transform : le survol
   d'origine .med:hover img reste intact) */
.med.zm img { scale: var(--z, 1); }
.eng-f1 img { object-position: 50% 58%; }
.eng-f2 img { object-position: 50% 64%; }
.next .nxt img { object-position: 50% 62%; }

/* ---- 3. 02 · DES PLATEAUX LIVRES — la bande de photos reelles -------------
   Par defaut : defilement horizontal natif avec aimantation (mobile, clavier,
   animations reduites, GSAP absent). Sur grand ecran, le script ajoute .pl-on :
   la scene s'epingle et la bande defile au rythme de la lecture. */
.plateaux .pl-intro {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px clamp(18px, 3vw, 48px); flex-wrap: wrap;
  margin-bottom: clamp(34px, 5vh, 64px);
}
.plateaux .pl-intro .sec-lede { margin: 0; }
.plateaux .pl-tout { margin-top: 0; }

.pl-scene { position: relative; }
.pl-strip {
  --plg: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  --plh: clamp(380px, 64vh, 620px);
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--plg);
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
}
.pl-strip:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.pl-track {
  display: flex; align-items: flex-start; gap: clamp(18px, 2.6vw, 44px);
  width: max-content; margin: 0; padding: 4px var(--plg) 14px; list-style: none;
}
.pl-item { flex: 0 0 auto; scroll-snap-align: start; }
.pl-item figure { margin: 0; }
.pl-img {
  position: relative; height: var(--plh); aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 8px; background: var(--dark); border: 1px solid var(--line);
}
.pl-pays .pl-img { aspect-ratio: 4 / 3; }
.pl-img img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
}
/* reperes d'angle de la planche, dans chaque cadre */
.pl-img::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)) 0 0 / 1px 16px no-repeat,
    linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)) 0 0 / 16px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)) 100% 100% / 1px 16px no-repeat,
    linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)) 100% 100% / 16px 1px no-repeat;
  opacity: .8; transition: inset .35s cubic-bezier(.23, 1, .32, 1), opacity .35s ease;
}
.pl-item figcaption {
  position: relative; width: 0; min-width: 100%;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line2);
}
.pl-item figcaption::before {
  content: ""; position: absolute; left: 0; top: -2px; width: 34px; height: 3px; background: var(--ink);
}
.pl-no {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--mute); font-variant-numeric: tabular-nums;
}
.pl-item figcaption b {
  display: block; margin-top: 8px; font-family: var(--disp); font-weight: 800;
  text-transform: uppercase; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.1;
  letter-spacing: -.012em; color: var(--ink);
}
.pl-lg {
  display: block; margin-top: 7px; font-size: 13px; line-height: 1.55; color: var(--ink2);
  max-width: 40ch;
}
@media (hover: hover) and (pointer: fine) {
  .pl-img img { transition: scale .5s cubic-bezier(.23, 1, .32, 1); }
  .pl-item:hover .pl-img img { scale: 1.04; }
  .pl-item:hover .pl-img::after { inset: 6px; opacity: 1; }
}

/* le panneau suivant n'a pas besoin de tout son elan apres la scene epinglee */
.plateaux + .panelsec { margin-top: clamp(56px, 8vh, 110px); }

/* pied : en natif, une invitation a glisser ; epingle, une cote d'avancement */
.pl-foot {
  display: flex; align-items: center; gap: 14px; margin-top: clamp(14px, 2vh, 24px);
  font-family: var(--mono); font-size: 9px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--mute); font-variant-numeric: tabular-nums;
}
.pl-fl, .pl-cote { display: none; }
.pl-glisse { margin-left: auto; color: var(--ink2); }

/* ---- mode epingle (grand ecran, GSAP present) ----------------------------- */
.plateaux.pl-on .pl-scene {
  height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--pl-top, 84px); padding-bottom: 18px; box-sizing: border-box;
}
.plateaux.pl-on .pl-strip {
  --plh: clamp(300px, calc(100vh - var(--pl-top, 84px) - 230px), 640px);
  overflow: hidden; scroll-snap-type: none;
}
.plateaux.pl-on .pl-track { will-change: transform; }
.plateaux.pl-on .pl-img img { width: 116%; margin-left: -8%; }
.plateaux.pl-on .pl-glisse { display: none; }
.plateaux.pl-on .pl-foot { width: 100%; }
.plateaux.pl-on .pl-fl { display: inline; }
.plateaux.pl-on .pl-cote {
  display: block; position: relative; flex: 1; height: 11px;
  border-left: 1px solid var(--ink2); border-right: 1px solid var(--ink2);
}
.pl-cote::before {
  content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--line2);
}
.pl-cote-f {
  position: absolute; left: 0; right: 0; top: 4px; height: 3px; background: var(--ink);
  transform-origin: left center;
}
.pl-tick {
  position: absolute; top: 1px; width: 1px; height: 9px; background: var(--line2);
  transition: background .25s ease, height .25s cubic-bezier(.23, 1, .32, 1), top .25s cubic-bezier(.23, 1, .32, 1);
}
.pl-tick.on { background: var(--ink); height: 13px; top: -1px; }

@media (max-width: 899px) {
  .pl-strip { --plh: min(104vw, 62vh, 560px); }
}
@media (max-width: 600px) {
  .plateaux .pl-intro { margin-bottom: 22px; }
  .pl-track { gap: 14px; padding-bottom: 10px; }
  .pl-item figcaption { margin-top: 11px; padding-top: 10px; }
  .pl-lg { font-size: 12.5px; }
}

/* ===========================================================================
   3 bis. DEFAUTS CORRIGES A TOUTES LES LARGEURS (bureau compris) — 07/10
   ---------------------------------------------------------------------------
   Le dessin du bureau (>= 1280 px) est valide et ne change pas ; seuls ces
   defauts, constates aussi a 1280 et 1440, sont corriges partout.
   =========================================================================== */
/* titres de section sur deux lignes : a .96 d'interlignage, l'accent de la
   2e ligne touchait la 1re (« LIVRÉS » sous le P de « PLATEAUX »,
   « CONCRÈTEMENT » sous « SYNERGIE ») et la virgule de « SYNERGIE, » tombait
   sur le M. Jour mesure entre l'encre des deux lignes (p-encre.js) : 1,5 px
   a .96 ; 3,3 px a 360 et 4,1 px a 768 avec 1.08 */
.sec .sec-head h2, .panelsec .sec-head h2 { line-height: 1.08; }
/* groupes insecables (span.ins dans la page) : « à aujourd'hui »,
   « depuis 2019 », « Acte de naissance », « loi AGEC », « mur végétal »,
   « Salle de formation en U »... (a 1440, « DEPUIS » restait seul en fin
   de ligne et « 2019 » seul dessous) */
.ins { white-space: nowrap; }
/* « Ce que le groupe change au quotidien » : sous la plaque ingedus, et non
   colle a sa droite (4 px d'ecart sur bureau, le texte touchait le cadre) */
.tl-plate + .tl-go { display: flex; width: fit-content; }
/* le pied des fiches (p.foot) heritait de la largeur maximale des
   paragraphes (46ch / 52ch, comptes dans la petite police mono : 250 a
   300 px) : son filet s'arretait au tiers de la carte et la mention se
   coupait sans raison (« … RECYCLAGE — / LOI AGEC ») */
.valcard .foot, .fiche .foot { max-width: none; }
/* certifications : une grille 2 x 2 nette ; en ligne, « Fabrication
   europeenne » restait seule sur la seconde rangee */
.certs { display: grid; grid-template-columns: 1fr 1fr; }
/* bande epinglee : le bouton « haut de page » (.backtop, fixe : 52 px a
   28 px du bord droit) recouvrait la cote « R.08 » a 1024 et 1280 ; la cote
   s'arrete 16 px avant lui (96 px du bord de l'ecran). Au-dela de ~1360 px,
   la marge de la colonne suffit : la cote reste alignee sur les photos.
   (100 % = largeur de la scene, c.-a-d. de l'ecran sans la barre de defilement) */
.plateaux.pl-on .pl-foot {
  padding-right: max(var(--pad), calc(96px - (100% - min(100%, var(--maxw))) / 2));
}

/* ===========================================================================
   4. TELEPHONES ET TABLETTES — passe responsive du 07/10
   ---------------------------------------------------------------------------
   Ce bloc est borne a 1279 px de large (le bureau ne recoit que le 3 bis).
   =========================================================================== */
@media (max-width: 1279px) {
  /* capitales tres serrees (-.04em) : l'espace entre deux mots disparaissait
     (« LEFIL », « VOIROÙ », « L'AVENIRDU ») ; on le rend lisible */
  .phero h1, .sec .sec-head h2, .panelsec .sec-head h2, .closing, .endcta h2 { word-spacing: .07em; }
  .tl-body h3, .prose h3, .fiche h3, .valcard h3, .synpt b, .pl-item figcaption b { text-wrap: balance; }
  .tl-body p, .prose p, .sec-lede, .lead, .plede, .fiche p, .valcard p, .synpt p,
  .endcta p, .pl-lg, .exergue q { text-wrap: pretty; }
  /* liste du developpement : la puce ne reste plus seule au-dessus du mot
     (« ▪ / INSTALLATEURS ») */
  .tl-list li { grid-template-columns: minmax(118px, 40%) 1fr; }
}

/* etiquettes mono : 8 a 9 px sur bureau, illisibles sur tablette et telephone */
@media (max-width: 1100px) {
  /* fil d'Ariane : cible tactile de 44 px sans deplacer la mise en page */
  .crumb { margin-top: -8px; margin-bottom: -8px; }
  .crumb a { min-height: 44px; }
  .crumb, .sec-tag, .tl-tag, .tl-go, .fiche .foot { font-size: 10.5px; }
  .pl-ref, .pl-ech, .phero-cart em, .phero-cart i, .tl-scale, .tl-cote, .exergue .sig,
  .tl-plate span, .tl-nums span, .tl-adr em, .synhd, .fiche-lab, .fiche-ref, .fiche-rows dt,
  .badge, .bigrow span:not(.big-num), .cert em, .vc-lab, .vc-ref, .valcard .foot,
  .med figcaption, .med figcaption em, .med .ref, .pl-no, .pl-foot { font-size: 10px; }
}

/* ---- tablettes ------------------------------------------------------------ */
@media (min-width: 601px) and (max-width: 1100px) {
  /* titres de section : a 29 px ils pesaient moins que les annees (64 px) */
  .sec .sec-head h2, .panelsec .sec-head h2 { font-size: clamp(30px, 4.6vw, 54px); }
  /* la nomenclature du groupe sur deux colonnes, au lieu d'une colonne
     etroite (42ch) collee a gauche */
  .synpts { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 700px) and (max-width: 1100px) {
  /* fiche groupe : identite + donnees a gauche, texte a droite */
  .fiche-bd {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: clamp(26px, 4vw, 46px); align-items: start;
  }
  .fiche-bd > * { grid-column: 2; }
  .fiche-bd > .synlink { grid-column: 1; grid-row: 1; }
  .fiche-bd > .fiche-rows { grid-column: 1; grid-row: 2 / span 5; margin: 8px 0 0; }
  .fiche-bd > h3 { grid-row: 1; max-width: 22ch; }
  .fiche-bd > .badge { justify-self: start; }

  /* engagements : texte + certifications a gauche, fiche Valdelia a droite,
     puis la photo de la cafeteria en pleine largeur (au lieu d'une carte
     etiree sur toute la largeur, texte colle a gauche) */
  #engagements .duo.r7 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* la fiche Valdelia, plus haute, donne son surplus a la rangee des
       certifications (sous elles), pas a l'ecart texte / certifications */
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(26px, 4vw, 48px); row-gap: 0; align-items: start;
  }
  #engagements .certs { display: grid; grid-template-columns: 1fr 1fr; }
  #engagements .duo.r7 > div:first-child { display: contents; }
  #engagements .duo.r7 .prose { grid-column: 1; grid-row: 1; }
  #engagements .duo.r7 .certs { grid-column: 1; grid-row: 2; }
  #engagements .duo.r7 .valcard { grid-column: 2; grid-row: 1 / span 2; }
  #engagements .duo.r7 .eng-f1 { grid-column: 1 / -1; grid-row: 3; }
  /* en pleine largeur, la photo garde une proportion de photo (21/9), pas un bandeau */
  #engagements .eng-f1 { height: auto; aspect-ratio: 21 / 9; }
}
@media (min-width: 700px) and (max-width: 900px) {
  /* chiffres du groupe : une seule rangee de quatre */
  .bigrow { grid-template-columns: repeat(4, 1fr); }
  .bigrow > div:nth-child(n+3) { border-top: none; }
  .bigrow > div:nth-child(n+2) {
    border-left: 1px solid var(--line); padding-left: clamp(14px, 2vw, 22px);
  }
  .on-dark-row > div:nth-child(n+2) { border-left-color: rgba(255,255,255,.16); }
}
/* la frise garde ses deux colonnes (annee | recit) jusqu'a 700 px : sur
   tablette portrait et telephone a l'horizontale, l'empilement laissait
   l'annee seule sur une bande vide et le texte etroit a gauche */
@media (min-width: 700px) and (max-width: 860px) {
  .tlrow { grid-template-columns: minmax(160px, 26%) 1fr; gap: clamp(22px, 3.4vw, 32px); }
  .tl-when { position: sticky; top: 104px; }
  .tl-tag { min-height: calc(2 * 1.7em); }
  .tl-year { font-size: clamp(46px, 7.2vw, 62px); }
  .tl-body::after, .fil-piste { top: calc(-1 * var(--tl-pt)); bottom: calc(-1 * var(--tl-pb)); }
}
/* frise empilee : le trait sous l'annee ne court plus sur toute la largeur
   (il se lisait comme un filet de separation) */
@media (max-width: 699px) {
  .tl-year { width: fit-content; }
  /* la plume attend 16 px au-dessus du jalon, au lieu de s'y superposer
     (losange + carre + repere formaient un pictogramme confus) */
  .tl-body::after, .fil-piste { top: -16px; }
}

/* ---- telephones ----------------------------------------------------------- */
@media (max-width: 600px) {
  .phero h1 { font-size: clamp(32px, 9.4vw, 44px); }
  .pl-ref { max-width: calc(100% - 44px); }
  /* corps de texte : 15 px minimum */
  .tl-list li, .synpt p, .fiche p, .valcard p { font-size: 15px; }
  .pl-lg { font-size: 14px; }
  .closing { font-size: clamp(25px, 7.2vw, 32px); }
  /* figures : un peu plus de photo, et un voile qui porte vraiment la legende
     (sur 268 px, la legende de la Fig. 02 montait sur le plateau clair) */
  .h-s { height: 232px; }
  .h-l { height: 300px; }
  .med figcaption { letter-spacing: .1em; line-height: 1.75; }
  /* relecture : le voile pose sur toute la figure (250 px sur une photo de
     232 px) noyait la cafeteria dans le noir. Le voile est maintenant porte
     par la legende elle-meme : il fait exactement sa hauteur (2 a 4 lignes),
     le haut de la photo reste clair. */
  .med::after { background: none; }
  .med figcaption {
    left: 0; right: 0; bottom: 0; padding: 50px 16px 16px;
    background: linear-gradient(180deg, rgba(11,10,8,0) 0, rgba(11,10,8,.74) 36px,
      rgba(11,10,8,.88) 70%, rgba(11,10,8,.94) 100%);
    border-radius: 0 0 7px 7px;
  }
  .med figcaption::before, .med figcaption::after { left: 16px; top: 37px; }
  /* certifications : une grille 2 x 2 nette, plus de « Fabrication europeenne »
     orpheline sur sa ligne */
  .certs { display: grid; grid-template-columns: 1fr 1fr; }
  /* appel final : des boutons a la largeur du pouce */
  .cta-row { gap: 12px; }
  .cta-row .btn { width: 100%; justify-content: space-between; }
  .cta-tel { margin-top: 6px; }
}

/* ---- telephone a l'horizontale : le hero ne mange plus l'ecran ------------- */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1279px) {
  .phero-in { padding-top: 46px; padding-bottom: 30px; }
  .phero h1 { font-size: clamp(30px, 9.5vh, 46px); margin: 14px 0 12px; max-width: 24ch; }
  .plede { font-size: 15px; line-height: 1.6; max-width: 72ch; }
  .phero-cart { margin-top: 18px; }
  .phero-cart > div { padding: 10px 13px 11px; }
  .phero-cart b { margin-top: 6px; font-size: 20px; }
  .phero-cart i { margin-top: 5px; }
}
@media (max-height: 500px) and (orientation: landscape) and (min-width: 761px) and (max-width: 1279px) {
  /* le cartouche reprend sa rangee unique (comme sur bureau) : une ligne de moins */
  .phero-cart { grid-template-columns: 1.35fr repeat(4, 1fr); }
  .phero-cart .pc-id { grid-column: auto; display: block; }
  .phero-cart .pc-id b { margin-top: 6px; }
  .phero-cart .pc-id i { margin-top: 5px; }
}

/* ===========================================================================
   5. RELECTURE (second passage du 07/10) — toujours borne sous 1280 px
   =========================================================================== */
@media (max-width: 1279px) {
  /* (groupes insecables .ins, pied des fiches, cote « R.08 » et interlignage
     des titres de section : desormais a toutes les largeurs, voir 3 bis) */
  /* etiquettes mono et legendes sur deux lignes : des lignes de longueur
     egale, plus de mot seul en fin (« … NE CHANGE / PAS » a 390) */
  .sec-tag, .fiche-lab, .vc-lab, .tl-plate > span, .fiche .foot, .valcard .foot,
  .med figcaption { text-wrap: balance; }
  /* liste du developpement : plus de mot seul en seconde ligne
     (« Revendeur & service / officiel ») */
  .tl-list li > span { text-wrap: balance; }
  /* la cedille de « FAÇONNER » au-dessus de la 2e ligne de la cloture */
  .closing { line-height: 1.12; }
}

/* tablettes : la phrase de cloture (25 px a 768) et le titre de l'appel
   final (34 px) pesaient moins que les titres de section */
@media (min-width: 601px) and (max-width: 1279px) {
  .closing { font-size: clamp(30px, 4.2vw, 42px); }
  .endcta h2 { font-size: clamp(40px, 6vw, 56px); }
}

@media (max-width: 600px) {
  /* fin de la frise (filet noir) puis filet de la section 02 : a 52 px
     d'ecart, les deux traits se lisaient comme un double filet */
  #frise + .plateaux { padding-top: 84px; }
  /* en-tetes mono qui passent sur deux lignes : les deux lignes restent
     groupees (« Nomenclature… » / « 04 postes », « Fiche groupe… » / « ING ») */
  .synhd, .fiche-hd { row-gap: 4px; }
  /* « Ce que le groupe change au quotidien → » passe sur deux lignes a 360 :
     en flex, la fleche partait seule au bord droit ; elle suit le dernier mot */
  .tl-plate + .tl-go { display: block; padding: 12px 0; line-height: 1.75; text-wrap: balance; }
  .tl-go .arw { display: inline-block; }
}