/* ============================================================================
   Piste B, version 2 : la page se lit comme une coupe de toiture, du ciel au sol.
   Chaque section porte la couleur d'un materiau. Toutes les couleurs vivent ici.
   ============================================================================ */
:root {
  --nuit: #121416;
  --four: #1d120d;          /* terre cuite sortie du four, section de la tuile */
  --terre: #a9432a;         /* la SEULE couleur d'action */
  --terre-vif: #c25634;
  --terre-clair: #e8a07c;   /* la meme, eclaircie, pour les accents sur fond sombre */
  --ardoise: #1e2327;
  --ardoise-2: #2a3035;
  --zinc: #cfd4d6;
  --zinc-encre: #454d52;
  --tuffeau: #ece6d8;
  --tuffeau-encre: #5d584e;
  --sol: #141915;
  --sol-2: #222a23;
  --creme: #f3efe6;
  --creme-2: #bdb8ad;
  --affiche: 'Instrument Serif', 'Times New Roman', serif;
  --texte: 'Manrope', 'Arial Narrow', Arial, sans-serif;
  --marge: clamp(20px, 5vw, 80px);
  --sortie: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--terre) var(--nuit); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--nuit); color: var(--creme); font-family: var(--texte); font-size: 17px; line-height: 1.6; overflow-wrap: break-word; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; overflow-wrap: anywhere; text-wrap: balance; }
p { margin: 0; }
::selection { background: var(--terre); color: #fff; }
:focus-visible { outline: 2px solid var(--terre-clair); outline-offset: 4px; border-radius: 3px; }
.evitement { position: absolute; top: 8px; left: 8px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); z-index: 100; background: var(--creme); color: var(--nuit); padding: 10px 14px; }
.evitement:focus { width: auto; height: auto; clip-path: none; }
.colonne { width: 100%; max-width: calc(1320px + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); }
.etiquette { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 24px; }
h2 em, h1 em { font-style: italic; }

/* ---------- boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; font: 700 17px/1.2 var(--texte); text-decoration: none; padding: 18px 30px; border-radius: 999px; transition: background-color .25s var(--sortie), transform .2s var(--sortie); text-align: center; font-variant-numeric: tabular-nums; }
.bouton--action { background: var(--terre); color: #fff; }
.bouton--action:active { transform: scale(.97); }
.bouton--petit { padding: 12px 20px; font-size: 15px; }
@media (hover: hover) { .bouton--action:hover { background: var(--terre-vif); } }

/* ---------- barre qui apparait apres le hero ---------- */
/* deux pastilles independantes plutot qu'une barre pleine largeur : elle cachait le haut des photos */
.barre { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none; transform: translateY(calc(-100% - 24px)); transition: transform .45s var(--sortie); }
.barre > * { pointer-events: auto; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.barre.est-visible { transform: none; }
.barre__marque { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 15px; background: var(--nuit); color: var(--creme); padding: 6px 18px 6px 6px; border-radius: 999px; }
.barre__marque img { width: 40px; height: 40px; border-radius: 50%; }

/* ---------- le repere : la coupe de toiture en petit, a droite ---------- */
.repere { position: fixed; right: 12px; top: 50%; z-index: 25; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity .4s var(--sortie), visibility 0s linear .4s; }
/* invisible = hors du parcours clavier aussi (visibility) : sinon Tab arrivait sur des liens qu'on ne voit pas */
.repere.est-visible { opacity: 1; visibility: visible; transition-delay: 0s; }
.repere__trait { position: relative; display: block; width: 6px; height: 34px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); transition: width .3s var(--sortie); }
.repere__trait span { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 13px; font-weight: 700; background: var(--nuit); color: var(--creme); padding: 4px 10px; border-radius: 999px; visibility: hidden; pointer-events: none; }
.repere__trait.est-actif { width: 16px; }
.repere__trait:focus-visible span { visibility: visible; }
@media (hover: hover) { .repere__trait:hover span { visibility: visible; } .repere__trait:hover { width: 16px; } }
.repere__trait--tuile { background: var(--terre); }
.repere__trait--ardoise { background: #4a545b; }
.repere__trait--zinc { background: var(--zinc); }
.repere__trait--tuffeau { background: var(--tuffeau); }
.repere__trait--sol { background: #56654f; }

/* ============================================================================
   1. LE CIEL
   ============================================================================ */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 18vw, 280px); gap: 12px; height: 100svh; min-height: 640px; padding: 12px; }
.hero__cadre { position: relative; border-radius: 20px; overflow: hidden; background: #2a2f33 url('../video/hero-affiche.jpg') 60% 50% / cover no-repeat; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero__voile { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(18,20,22,.55) 0%, rgba(18,20,22,0) 22%),
  linear-gradient(90deg, rgba(18,20,22,.9) 0%, rgba(18,20,22,.78) 32%, rgba(18,20,22,.2) 62%, rgba(18,20,22,0) 80%),
  linear-gradient(0deg, rgba(18,20,22,.75) 0%, rgba(18,20,22,0) 42%); }
/* la pastille sombre garde la marque lisible quel que soit le moment de la video */
.hero__marque { position: absolute; top: 20px; left: 20px; z-index: 2; display: flex; align-items: center; gap: 12px; text-decoration: none; background: rgba(18,20,22,.62); padding: 6px 20px 6px 6px; border-radius: 999px; }
.hero__marque img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(214,169,78,.35); }
.hero__marque p { font-size: 15px; line-height: 1.35; color: var(--creme-2); }
.hero__marque b { display: block; font-size: 17px; color: var(--creme); }
.hero__texte { position: absolute; left: clamp(28px, 4vw, 64px); right: 34%; bottom: clamp(32px, 6vh, 64px); z-index: 2; }
.hero h1 { font-family: var(--affiche); font-size: clamp(64px, 8.4vw, 150px); line-height: .9; letter-spacing: -.02em; color: var(--creme); }
.hero h1 em { color: var(--terre-clair); }
/* le masque de ligne pose par SplitText rogne tout ce qui depasse : on lui laisse de la marge pour les
   accents, les jambages et la pente de l'italique (piege du 12/09 : « DÉPEND » affiche « DEPEND ») */
.ligne-mask { padding: .08em .18em .16em 0; margin: -.08em -.18em -.16em 0; }
.hero__chapo { max-width: 27em; margin-top: 28px; font-size: 19px; color: #e4dfd5; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 32px; }
.hero__rassure { order: 2; font-size: 15px; line-height: 1.4; color: #d6d1c6; } /* lu avant le bouton, affiche apres */

/* la coupe : le sommaire fait d'echantillons de matiere */
.coupe { display: grid; grid-template-rows: auto repeat(5, minmax(0, 1fr)); border-radius: 20px; overflow: hidden; }
.coupe__titre { background: #1b1f22; color: var(--creme-2); font-size: 13px; line-height: 1.45; padding: 20px 20px 20px; }
/* le lien ne porte que le nom de la matiere et s'etire sur tout le bloc (motif « lien etire ») :
   le bloc entier reste cliquable, et le focus clavier se dessine en creux dans le bloc */
.coupe__bloc { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 16px 20px; overflow: hidden; transition: padding .35s var(--sortie); } /* pas de transition sur le focus : il doit se voir a l'instant ou on arrive au clavier */
.coupe__bloc a { font-family: var(--affiche); font-size: 28px; line-height: 1; text-decoration: none; white-space: nowrap; }
.coupe__bloc a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
/* le cadre de focus se dessine sur le lien etire, donc AU-DESSUS de la texture du bloc :
   pose en creux sur le bloc, la texture (::before) le recouvrait a moitie et il ne se voyait plus */
.coupe__bloc a:focus-visible { outline: none; }
/* `:focus` et pas seulement `:focus-visible` : un focus pose par un script (ou par le contrôle) ne
   declenche pas `:focus-visible`, et le cadre ne se voyait donc jamais a la mesure */
.coupe__bloc a:focus::after { outline: 4px solid currentColor; outline-offset: -6px; }
/* et un changement DANS la boite du mot lui-meme : le cadre en creux, lui, tombe au bord du bloc,
   donc en dehors de ce que la mesure photographie */
.coupe__bloc a:focus { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
.coupe__bloc:focus-within { box-shadow: inset 0 0 0 3px currentColor; }
.coupe__bloc span { font-size: 13px; }
.coupe__bloc::before { content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none; }
@media (hover: hover) { .coupe__bloc:hover { padding-bottom: 24px; } }
.coupe__bloc--tuile { background: var(--terre); color: var(--creme); }
.coupe__bloc--tuile::before { background: repeating-linear-gradient(180deg, transparent 0 17px, rgba(0,0,0,.14) 17px 19px), repeating-radial-gradient(circle at 12px 100%, transparent 0 11px, rgba(255,255,255,.06) 11px 12px); background-size: auto, 24px 19px; }
.coupe__bloc--ardoise { background: var(--ardoise-2); color: var(--creme); }
.coupe__bloc--ardoise::before { background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(0,0,0,.35) 13px 14px), repeating-linear-gradient(90deg, transparent 0 21px, rgba(0,0,0,.25) 21px 22px); }
.coupe__bloc--zinc { background: var(--zinc); color: var(--ardoise); }
.coupe__bloc--zinc::before { background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,.7) 26px 27px, rgba(0,0,0,.12) 27px 28px); }
.coupe__bloc--zinc span, .coupe__bloc--tuffeau span { color: #3b4247; }
.coupe__bloc--tuffeau { background: var(--tuffeau); color: var(--ardoise); }
.coupe__bloc--tuffeau::before { background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(93,88,78,.18) 22px 23px); }
.coupe__bloc--sol { background: var(--sol-2); color: var(--creme); }
.coupe__bloc--sol::before { background: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1.5px) 0 0 / 12px 12px; }

/* ============================================================================
   2. LA TUILE
   ============================================================================ */
.tuile { position: relative; height: 320vh; background: linear-gradient(180deg, var(--nuit) 0, var(--four) 40vh, var(--four) calc(100% - 60vh), var(--ardoise) 100%); }
.tuile__collant { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 4vw, 72px); max-width: calc(1320px + 2 * var(--marge)); margin-inline: auto; padding: 90px var(--marge) 40px; overflow: clip; }
.tuile__scene { position: relative; width: 100%; max-width: 740px; aspect-ratio: 1; max-height: calc(100svh - 150px); justify-self: center; }
.tuile__lueur { position: absolute; inset: -6%; z-index: 0; background: radial-gradient(closest-side, rgba(194,86,52,.30), rgba(194,86,52,.08) 55%, rgba(194,86,52,0)); }
.tuile__scene canvas, .tuile__repli { position: absolute; inset: 0; width: 100%; height: 100%; }
.tuile__scene canvas { z-index: 2; cursor: grab; touch-action: pan-y; outline-offset: -2px; }
.tuile__scene.est-tenue canvas { cursor: grabbing; }
.tuile__repli { z-index: 1; object-fit: contain; transition: opacity .4s var(--sortie); }
.tuile__scene.est-vivant .tuile__repli { opacity: 0; }
.tuile__scene[data-etat="repli"] canvas { display: none; }
.tuile__astuce { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 3; font-size: 13px; font-weight: 600; color: var(--creme-2); white-space: nowrap; pointer-events: none; transition: opacity .4s var(--sortie); }
.tuile__astuce::before { content: '↔'; margin-right: 8px; }
.tuile__scene[data-etat="repli"] .tuile__astuce, .tuile__scene.a-tourne .tuile__astuce { opacity: 0; }
.tuile .etiquette { color: var(--terre-clair); }
.tuile__texte h2 { font-family: var(--affiche); font-size: clamp(52px, 5.6vw, 100px); line-height: .92; letter-spacing: -.015em; margin-bottom: 32px; }
.tuile__texte h2 em { color: var(--terre-clair); }
.etapes { list-style: none; margin: 0 0 32px; padding: 0 0 0 24px; position: relative; }
.etapes::before, .etapes::after { content: ''; position: absolute; left: 0; top: 8px; width: 2px; border-radius: 2px; }
.etapes::before { bottom: 8px; background: #4a3329; }
.etapes::after { height: calc((100% - 16px) * var(--p, 0)); background: var(--terre-clair); }
.etape { padding-block: 12px; }
.etape h3 { font-size: 19px; font-weight: 700; color: var(--creme-2); transition: color .3s var(--sortie); }
.etape__num { display: inline-block; min-width: 36px; font-family: var(--affiche); font-style: italic; font-weight: 400; font-size: 24px; color: var(--terre-clair); }
.etape p { display: grid; grid-template-rows: 0fr; color: var(--creme-2); padding-left: 36px; transition: grid-template-rows .45s var(--sortie), margin .45s var(--sortie); }
.etape p > span { overflow: hidden; min-height: 0; }
.etape.est-active h3 { color: var(--creme); }
.etape.est-active p { grid-template-rows: 1fr; margin-top: 6px; }

/* ============================================================================
   3. L'ARDOISE : les metiers
   ============================================================================ */
.metiers { position: relative; background: var(--ardoise); overflow: clip; }
.metiers__piste { display: flex; flex-direction: column; gap: 72px; padding: 160px var(--marge); }
.metiers .etiquette { color: var(--terre-clair); }
.metiers__intro h2 { font-family: var(--affiche); font-size: clamp(52px, 5.6vw, 100px); line-height: .95; letter-spacing: -.015em; margin-bottom: 24px; }
.metiers__intro h2 em { color: var(--terre-clair); }
.metiers__intro p { color: var(--creme-2); max-width: 26em; }
.panneau { display: grid; gap: 24px; }
.panneau__photo { margin: 0; overflow: hidden; border-radius: 12px; }
.panneau__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transform: scale(1.001); }
.panneau__texte h3 { font-family: var(--affiche); font-size: clamp(52px, 5.6vw, 100px); line-height: .92; letter-spacing: -.015em; margin-bottom: 16px; }
.panneau__texte p { color: var(--creme-2); max-width: 24em; }
/* le rail horizontal, pose par app.js sur ordinateur seulement */
.metiers--rail .metiers__piste { flex-direction: row; align-items: center; width: max-content; height: 100svh; gap: 6vw; padding: 90px 8vw 40px var(--marge); }
.metiers--rail .metiers__intro { width: min(34vw, 560px); flex: none; }
.metiers--rail .panneau { flex: none; width: 58vw; grid-template-columns: 34vw minmax(0, 1fr); align-items: end; gap: 3vw; }
.metiers--rail .panneau__photo img { height: 70svh; aspect-ratio: auto; }

/* ============================================================================
   4. LE ZINC : les chantiers
   ============================================================================ */
.chantiers { position: relative; background: var(--zinc); color: var(--ardoise); padding-block: 160px; }
.chantiers::before { content: ''; position: absolute; inset: 0 0 auto; height: 90px; background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(255,255,255,.55) 58px 59px, rgba(0,0,0,.08) 59px 60px); pointer-events: none; -webkit-mask: linear-gradient(180deg, #000, transparent); mask: linear-gradient(180deg, #000, transparent); }
.chantiers .etiquette { color: var(--zinc-encre); }
.chantiers__tete { margin-bottom: 64px; } 
.chantiers h2 { font-family: var(--affiche); font-size: clamp(56px, 7vw, 128px); line-height: .9; letter-spacing: -.02em; }
.chantiers h2 em { color: var(--terre); }
.planche { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: clamp(280px, 30vw, 472px) clamp(280px, 30vw, 472px) clamp(240px, 24vw, 380px); gap: 32px 20px; }
.planche figure { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.planche img { flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.planche figcaption { font-size: 15px; color: var(--zinc-encre); margin-top: 12px; }
.planche__a { grid-column: 1 / 8; grid-row: 1; }
.planche__b { grid-column: 8 / 13; grid-row: 1 / 3; }
.planche__c { grid-column: 1 / 4; grid-row: 2; }
.planche__d { grid-column: 4 / 8; grid-row: 2; }
.planche__e { grid-column: 3 / 11; grid-row: 3; }

/* ============================================================================
   5. LE TUFFEAU : avant de signer
   ============================================================================ */
.confiance { background: var(--tuffeau); color: var(--ardoise); padding-block: 160px; }
.confiance .etiquette { color: var(--tuffeau-encre); }
.confiance__phrase { font-family: var(--affiche); font-size: clamp(40px, 4.4vw, 78px); line-height: 1.02; letter-spacing: -.015em; max-width: 17em; text-wrap: pretty; }
.confiance__phrase .mot { color: #7d7669; transition: color .2s linear; }
.confiance__phrase .mot.est-lu { color: var(--ardoise); }
.faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 96px 0 0; }
.faits div { border-top: 1px solid rgba(30,35,39,.25); padding-top: 20px; }
.faits dt { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tuffeau-encre); margin-bottom: 8px; }
.faits dd { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.4; }
.faits a { text-decoration: none; color: var(--terre); font-variant-numeric: tabular-nums; }

/* ============================================================================
   6. LE TERRAIN : la carte
   ============================================================================ */
.zone { background: var(--sol); padding-block: 160px; }
.zone .etiquette { color: #9bb08f; }
.zone__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 72px; align-items: center; }
.zone h2 { font-family: var(--affiche); font-size: clamp(56px, 7vw, 128px); line-height: .9; letter-spacing: -.02em; margin-bottom: 28px; } 
.zone h2 em { color: var(--terre-clair); }
.zone__texte > p { color: var(--creme-2); max-width: 27em; }
.zone__liste { list-style: none; margin: 72px 0 0; padding: 0; columns: 4; column-gap: 36px; font-size: 15px; color: var(--creme-2); }
.zone__liste li { display: flex; justify-content: space-between; gap: 10px; padding-block: 5px; border-bottom: 1px solid #2c342d; break-inside: avoid; }
.zone__liste li span:last-child { font-variant-numeric: tabular-nums; color: #9aa29a; white-space: nowrap; }
.carte { margin: 0; width: min(100%, 78svh); justify-self: center; }
.carte svg { width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.carte figcaption { font-size: 13px; color: #8e968f; margin-top: 12px; text-align: right; }
.carte .anneau { fill: none; stroke: #37413a; stroke-width: .12; stroke-dasharray: .6 .5; }
.carte .anneau-texte { font: 600 1.05px var(--texte); fill: #8e968f; letter-spacing: .02px; }
.carte .point { fill: #4a554c; }
.carte .point--zone { fill: var(--creme); }
.carte .nom { font: 600 1.15px var(--texte); fill: var(--creme-2); paint-order: stroke; stroke: var(--sol); stroke-width: .35px; }
.carte .nom--fort { fill: var(--creme); font-size: 1.45px; }
.carte .centre { fill: var(--terre-clair); }
.carte .onde { fill: none; stroke: var(--terre-clair); stroke-width: .15; transform-box: fill-box; transform-origin: center; animation: onde 2.8s var(--sortie) infinite; animation-play-state: var(--jeu-anim, running); }
@keyframes onde { from { transform: scale(1); opacity: .9; } to { transform: scale(5); opacity: 0; } }

/* ============================================================================
   7. LE CONTACT
   ============================================================================ */
.contact { background: linear-gradient(180deg, var(--sol) 0, var(--ardoise) 34vh); padding-top: 40px; overflow: clip; }
.defile { overflow: hidden; padding-block: 24px 64px; }
.defile__piste { display: flex; width: max-content; animation: defile 38s linear infinite; animation-play-state: var(--jeu-anim, running); }
.defile__piste span { font-family: var(--affiche); font-style: italic; font-size: clamp(64px, 11vw, 200px); line-height: 1; white-space: nowrap; color: #6f787e; padding-right: .3em; }
@keyframes defile { to { transform: translateX(-50%); } }
.contact__grille { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px 80px; align-items: center; padding-bottom: 120px; }
.contact__logo { width: clamp(180px, 20vw, 290px); height: auto; border-radius: 50%; box-shadow: 0 0 0 1px rgba(214,169,78,.3), 0 30px 80px rgba(0,0,0,.4); }
.contact h2 { font-family: var(--affiche); font-size: clamp(44px, 5.6vw, 100px); line-height: .95; }
.contact h2 em { color: var(--terre-clair); }
.contact__tel { margin: 12px 0 24px; font-family: var(--affiche); font-size: clamp(60px, 9.4vw, 172px); line-height: .95; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.contact__tel a { text-decoration: none; color: var(--terre-clair); background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--sortie); }
@media (hover: hover) { .contact__tel a:hover { background-size: 100% 2px; } }
.contact__adresse { color: var(--creme-2); }
.contact__devise { margin-top: 10px; font-family: var(--affiche); font-style: italic; font-size: 28px; color: var(--creme); }
.pied { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 24px; border-top: 1px solid #353c42; font-size: 13px; color: var(--creme-2); }
.appel-mobile { display: none; }

/* ============================================================================
   ECRANS MOYENS ET TELEPHONE
   ============================================================================ */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .hero__cadre { height: calc(100svh - 20px); min-height: 600px; }
  .hero__texte { right: 12%; }
  .coupe { grid-template-rows: none; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .coupe__titre { display: none; }
  .coupe__bloc { min-height: 120px; }
  .repere { display: none; }
  .zone__liste { columns: 2; }
  .planche { grid-template-rows: clamp(240px, 36vw, 400px) clamp(240px, 36vw, 400px) clamp(200px, 30vw, 340px); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero { padding: 8px; gap: 8px; }
  .hero__cadre { height: auto; min-height: 0; display: flex; flex-direction: column; background: var(--ardoise); border-radius: 14px; }
  .hero__video { position: relative; inset: auto; height: 62svh; min-height: 340px; }
  .hero__voile { height: 62svh; min-height: 340px; background: linear-gradient(180deg, rgba(18,20,22,.88) 0%, rgba(18,20,22,.6) 16%, rgba(18,20,22,0) 34%, rgba(18,20,22,0) 55%, var(--ardoise) 100%); }
  .hero__marque { top: 16px; left: 16px; }
  .hero__marque img { width: 44px; height: 44px; }
  .hero__texte { position: relative; left: auto; right: auto; bottom: auto; padding: 0 20px 30px; margin-top: -84px; }
  .hero h1 { font-size: min(68px, 17vw); }
  .hero__actions .bouton { display: none; } /* la barre d'appel fixe fait ce travail sur telephone */
  .coupe { grid-template-columns: 1fr 1fr; border-radius: 14px; }
  .coupe__bloc { min-height: 96px; padding: 12px 14px; }
  .coupe__bloc--sol { grid-column: 1 / -1; min-height: 72px; }
  .barre { display: none; }

  .tuile { height: 290vh; }
  .tuile__collant { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 4px; padding: 56px var(--marge) 90px; }
  .tuile__scene { max-width: min(100%, 42svh); max-height: none; }
  .tuile .etiquette { display: none; }
  .tuile__texte h2 { font-size: min(46px, 12vw); margin-bottom: 12px; }
  .tuile__texte h2 br { display: none; }
  .etapes { margin-bottom: 0; }
  .etape { padding-block: 6px; }
  .etape h3 { font-size: 17px; }
  .etape__num { min-width: 28px; font-size: 20px; }
  .etape p { font-size: 15px; line-height: 1.5; padding-left: 28px; } /* 15 et 17 : deux paliers de l echelle */
  .tuile__texte .bouton { display: none; }

  .metiers__piste { padding: 96px var(--marge); gap: 56px; }
  .panneau__texte h3 { font-size: min(56px, 14vw); }

  .chantiers { padding-block: 96px; }
  .chantiers__tete { margin-bottom: 40px; }
  .planche { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 22px 12px; }
  .planche img { flex: none; height: auto; }
  .planche__a, .planche__d, .planche__e { grid-column: 1 / -1; grid-row: auto; }
  .planche__b, .planche__c { grid-column: auto; grid-row: auto; }
  .planche__a img, .planche__d img, .planche__e img { aspect-ratio: 4 / 3; }
  .planche__b img, .planche__c img { aspect-ratio: 3 / 4; }
  .planche figcaption { font-size: 13px; }

  .confiance { padding-block: 96px; }
  .faits { grid-template-columns: 1fr; margin-top: 56px; }

  .zone { padding-block: 96px; }
  .zone__grille { grid-template-columns: 1fr; }
  .zone__liste { columns: 1; margin-top: 48px; }
  .carte .nom { font-size: 1.9px; stroke-width: .5px; }
  .carte .nom--fort { font-size: 2.2px; }
  .carte .nom--secondaire { display: none; }
  .carte .anneau-texte { font-size: 1.7px; }

  .contact__grille { grid-template-columns: 1fr; padding-bottom: 60px; }
  .contact__logo { width: 140px; }
  .contact__tel { font-size: min(64px, 15vw); }
  .pied { padding-bottom: 90px; }

  .appel-mobile { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; background: var(--terre); color: #fff; font-weight: 700; text-align: center; text-decoration: none; padding: 15px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
}