/* ==========================================================================
   RMJD GROUP SRL
   Direction artistique : papier ivoire, encre, vermillon.
   Bricolage Grotesque (titrage) · Schibsted Grotesk (texte) · Martian Mono (labels)
   ========================================================================== */

/* ---------- 1. Jetons ---------- */

:root{
  --paper:    #efece4;
  --paper-2:  #e6e2d7;
  --ink:      #131210;
  --ink-2:    #56534b;
  --ink-3:    #8d8a80;
  --accent:   #e23b13;
  --rule:     rgba(19,18,16,.16);
  --rule-2:   rgba(19,18,16,.08);
  --rule-inv: rgba(239,236,228,.18);

  --display:"Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --text:"Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:"Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut: clamp(1.15rem, 4.2vw, 4.5rem);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --maxw: 1680px;
  --ease: cubic-bezier(.16,1,.3,1);
  --swipe: cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--paper); }
html.is-intro{ overflow:hidden; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:clamp(1rem,.94rem + .28vw,1.1rem);
  font-weight:400;
  line-height:1.55;
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Léger grain papier */
body::after{
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

::selection{ background:var(--accent); color:var(--paper); }
a{ -webkit-tap-highlight-color:rgba(226,59,19,.16); }

h1,h2,h3{ margin:0; font-family:var(--display); font-weight:600; letter-spacing:-.035em; line-height:1; }
p{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
sup{ font-size:.5em; vertical-align:super; }

/* ---------- 2. Trame verticale ---------- */

.rails{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  display:grid; grid-template-columns:repeat(5,1fr);
  padding:0 var(--gut);
  max-width:var(--maxw); margin-inline:auto;
  mix-blend-mode:multiply;
}
.rails i{ border-left:1px solid rgba(19,18,16,.055); }
.rails i:first-child{ border-left:0; }

/* Filet de progression, bord gauche */
.scrollbar{
  position:fixed; top:0; left:0; bottom:0; width:2px; z-index:80;
  pointer-events:none;
}
.scrollbar span{
  display:block; width:100%; height:0%;
  background:var(--accent);
}

/* ---------- 3. Rideau d'ouverture ---------- */
/*  Séquence : les six pôles défilent, puis le mot-signe, puis le rideau se lève.
    Tout est piloté en CSS ; le script ne fait qu'animer le compteur.           */

.intro{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:var(--ink); color:var(--paper);
  clip-path:inset(0 0 0 0);
  animation:curtain .85s var(--swipe) 1.3s forwards;
}
.intro__meta{
  position:absolute; top:var(--gut);
  font-family:var(--mono); font-size:.55rem; line-height:1.9;
  letter-spacing:.07em; text-transform:uppercase;
  color:rgba(239,236,228,.45);
  animation:fade .5s ease both;
}
.intro__meta--l{ left:var(--gut); }
.intro__meta--r{
  right:var(--gut); text-align:right;
  color:var(--accent); font-size:.62rem;
  font-variant-numeric:tabular-nums;
}

.intro__stage{
  display:grid; place-items:center;
  animation:stageUp .85s var(--swipe) 1.3s both;
}
.intro__w{
  grid-area:1 / 1;
  opacity:0; white-space:nowrap;
  font-family:var(--mono); font-size:clamp(.7rem,2.2vw,1.05rem);
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(239,236,228,.75);
  animation:seq .1s linear calc(.12s + var(--i) * .1s) both;
}
.intro__w--last{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.1rem,9vw,6.5rem); letter-spacing:-.05em;
  text-transform:uppercase; color:var(--paper);
  animation:seqLast .55s var(--ease) .72s both;
}
.intro__bar{
  position:absolute; left:var(--gut); right:var(--gut); bottom:var(--gut);
  height:2px; background:rgba(239,236,228,.14); overflow:hidden;
}
.intro__bar i{
  display:block; height:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  animation:load 1.3s cubic-bezier(.5,0,.2,1) both;
}

@keyframes curtain{ to{ clip-path:inset(0 0 100% 0); } }
@keyframes stageUp{ to{ transform:translateY(-22%); opacity:.6; } }
@keyframes seq{ 0%,88%{ opacity:1 } 100%{ opacity:0 } }
@keyframes seqLast{
  from{ opacity:0; transform:translateY(.22em) scale(.97) }
  to{ opacity:1; transform:none }
}
@keyframes load{ to{ transform:scaleX(1); } }

/* Visite déjà vue dans l'onglet : on enchaîne directement */
.skip-intro .intro{ display:none; }
.skip-intro .hero__word-wrap .fit{ animation-delay:.15s; }
.skip-intro .head{ animation-delay:.35s; }

/* ---------- 4. En-tête ---------- */

.head{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(1rem,2vw,1.6rem) var(--gut);
  color:#fff; mix-blend-mode:difference;
  animation:fade .8s ease 2s both;
}
.head__logo{
  font-family:var(--display); font-weight:600; font-size:1rem;
  letter-spacing:-.03em; text-decoration:none; white-space:nowrap;
}
.head__nav{ display:flex; gap:clamp(1rem,2.2vw,2.2rem); }
.head__nav a{
  position:relative; text-decoration:none;
  font-family:var(--mono); font-size:.58rem; font-weight:400;
  letter-spacing:.06em; text-transform:uppercase;
}
.head__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-.4em; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.head__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.head__status{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
}
.head__status i{
  width:6px; height:6px; background:currentColor; border-radius:50%;
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.15} }
@keyframes fade{ from{opacity:0} to{opacity:1} }

/* ---------- 5. Ouverture ---------- */

.hero{
  position:relative; z-index:1;
  min-height:100vh;      /* repli */
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(2rem,6vh,4rem);
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(6rem,14vh,10rem) var(--gut) clamp(1rem,2.4vh,1.8rem);
}
.hero__top{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1.5rem;
  padding-bottom:clamp(1rem,2vw,1.6rem);
  border-bottom:1px solid var(--rule);
}
.hero__meta:nth-child(1){ grid-column:1; }
.hero__meta:nth-child(2){ grid-column:3; }
.hero__meta:nth-child(3){ grid-column:5; }
.hero__meta{
  font-family:var(--mono); font-size:.58rem; line-height:1.9;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2);
}
.hero__meta:last-child{ text-align:right; }

.hero__mid{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  flex:1;
  padding:clamp(2rem,5vh,4rem) 0;
}
.hero__claim{
  max-width:32ch;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,1rem + 1.75vw,2.45rem);
  line-height:1.16; letter-spacing:-.035em;
  text-wrap:balance;
}
.hero__claim span{ color:var(--accent); }

/* Sceau tournant */
.seal{
  position:relative; flex:none;
  width:clamp(94px,11vw,140px); aspect-ratio:1;
  display:grid; place-items:center;
  text-decoration:none;
}
.seal svg{
  width:100%; height:100%;
  animation:spin 22s linear infinite;
  fill:var(--ink);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
}
@media (hover:hover){ .seal:hover svg{ fill:var(--accent); } }
.seal__arrow{
  position:absolute; width:11px; height:11px;
  border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .5s var(--ease), border-color .3s;
}
.seal:hover .seal__arrow{
  border-color:var(--accent);
  transform:rotate(45deg) translate(2px,2px);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Mot-signe calé sur la largeur */
.hero__word-wrap, .foot__word-wrap{ overflow:hidden; padding:0; margin:0; }
.fit{
  display:block; white-space:nowrap;
  font-family:var(--display); font-weight:800;
  line-height:.78; letter-spacing:-.045em;
  font-size:14vw; /* valeur de repli, ajustée au pixel par script.js */
}
.hero__word{ text-transform:uppercase; }
.hero__word-wrap .fit{ animation:wordUp 1.25s var(--ease) 1.45s both; }
@keyframes wordUp{ from{ transform:translateY(105%) } to{ transform:none } }

/* ---------- 6. Bande défilante ---------- */

.band{
  position:relative; z-index:1;
  background:var(--ink); color:var(--paper);
  padding:clamp(.9rem,2vw,1.5rem) 0;
  overflow:hidden;
  /*  Hauteur naturelle : 59 px sur téléphone, 108 px sur grand écran.
      Le plafond est une sécurité : quoi qu'il arrive au contenu, la bande
      reste une bande et ne peut pas envahir l'écran.                       */
  max-height:9rem;
}
/*  Le ruban est animé image par image dans script.js : moduler la durée d'une
    animation CSS au défilement la faisait sauter, et le motif ne couvrait pas
    les écrans très larges. Le groupe est cloné autant de fois que nécessaire. */
/*  Tout est en flex:0 0 auto : si `max-content` n'est pas appliqué (WebKit),
    les motifs ne rétrécissent pas et ne se replient pas — la bande ne peut
    donc jamais dépasser une ligne de hauteur.                               */
.band__track{
  display:flex; flex-wrap:nowrap; align-items:center;
  width:-webkit-max-content; width:max-content;
  white-space:nowrap;
}
.band__group{
  flex:0 0 auto;
  display:flex; flex-wrap:nowrap; align-items:center;
  gap:clamp(1.4rem,3vw,2.6rem);
  padding-right:clamp(1.4rem,3vw,2.6rem);
}
.band span{
  flex:0 0 auto;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem,3.6vw,3rem); line-height:1.25; letter-spacing:-.04em;
}
/*  Un SVG sans attributs width/height retombe sur 300x150 px dans WebKit :
    dimensions dans le balisage, et plafond ici par sécurité.                */
.band__mark{
  flex:0 0 auto;
  width:clamp(.85rem,1.7vw,1.3rem); height:clamp(.85rem,1.7vw,1.3rem);
  max-width:1.4rem; max-height:1.4rem;
  color:var(--accent);
}

/* ---------- 7. Sections ---------- */

.sec{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem);
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(5rem,13vh,10rem) var(--gut);
  scroll-margin-top:4rem;
}
.sec + .sec{ border-top:1px solid var(--rule-2); }
.sec__body{ min-width:0; }
.sec--wide .sec__body{ max-width:none; }

.tag{
  display:flex; align-items:baseline; gap:.7rem;
  height:max-content; position:sticky; top:clamp(4.5rem,8vw,6rem);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-2);
}
.tag i{ font-style:normal; color:var(--accent); }
.tag--inv{ color:rgba(239,236,228,.55); }

.say{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.75rem,1rem + 3.1vw,4.1rem);
  line-height:1.04; letter-spacing:-.045em;
  max-width:20ch; text-wrap:balance;
}
.say--sm{ font-size:clamp(1.5rem,1rem + 2.2vw,3rem); max-width:22ch; }

.duo{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(1.4rem,3vw,3rem);
  margin-top:clamp(2.4rem,5vw,4rem);
  max-width:66rem;
  color:var(--ink-2);
}
.lede{
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
  max-width:56ch; color:var(--ink-2);
  font-size:clamp(1rem,.95rem + .35vw,1.2rem);
}

/* ---------- 8. Activités ---------- */

.acts{ margin-top:clamp(2.4rem,5vw,4rem); border-bottom:1px solid var(--rule); }
.act{
  position:relative;
  display:grid;
  grid-template-columns:3.6rem minmax(0,.95fr) minmax(0,1.15fr) 2.2rem;
  align-items:center; gap:clamp(.8rem,2.5vw,2.5rem);
  padding:clamp(1.15rem,2.2vw,1.85rem) 0;
  border-top:1px solid var(--rule);
  transition:color .4s var(--ease);
}
.act::before{
  content:""; position:absolute; inset:0 calc(var(--gut) * -.5);
  background:var(--ink); z-index:0;
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s var(--swipe);
}
.act > *{ position:relative; z-index:1; }
.act__n{
  font-family:var(--mono); font-size:.62rem; color:var(--ink-3);
  transition:color .4s var(--ease);
}
.act__t{
  font-size:clamp(1.15rem,.95rem + .85vw,1.95rem);
  letter-spacing:-.04em; font-weight:500;
}
.act__t span{ color:var(--accent); font-weight:400; }
.act__d{ font-size:.92rem; line-height:1.5; color:var(--ink-2); transition:color .4s var(--ease); }
.act__a{
  justify-self:end; width:14px; height:14px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:rotate(45deg); opacity:.35;
  transition:transform .5s var(--ease), opacity .4s;
}
@media (hover:hover){
  .act:hover{ color:var(--paper); }
  .act:hover::before{ transform:scaleY(1); }
  .act:hover .act__n{ color:var(--accent); }
  .act:hover .act__d{ color:rgba(239,236,228,.72); }
  .act:hover .act__a{ opacity:1; transform:rotate(45deg) translate(3px,-3px); }
}

/* ---------- 9. Jalons ---------- */

.steps{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,3rem);
  margin-top:clamp(3rem,6vw,5rem);
}
.step{ position:relative; border-top:1px solid var(--ink); padding-top:1.5rem; }
.step::before{
  content:""; position:absolute; top:-4.5px; left:0;
  width:9px; height:9px; border-radius:50%; background:var(--ink);
}
.step.is-now::before{ background:var(--accent); }
.step.is-now::after{
  content:""; position:absolute; top:-4.5px; left:0;
  width:9px; height:9px; border-radius:50%; background:var(--accent);
  animation:ping 2.6s ease-out infinite;
}
@keyframes ping{ 0%{transform:scale(1);opacity:.6} 70%,100%{transform:scale(3.6);opacity:0} }
.step__k{
  display:block; margin-bottom:.9rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent);
}
.step h3{ font-size:clamp(1.2rem,1rem + .7vw,1.6rem); letter-spacing:-.035em; margin-bottom:.5rem; }
.step p{ font-size:.92rem; color:var(--ink-2); }

/* ---------- 10. Direction (négatif) ---------- */

.dir{
  position:relative; z-index:1;
  background:var(--ink); color:var(--paper);
}
.dir__inner{
  display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem);
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(5rem,14vh,11rem) var(--gut);
  scroll-margin-top:4rem;
}
.dir__body{ min-width:0; }
.dir__role{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:clamp(1.2rem,2.5vw,2rem);
}
.dir__name{ font-weight:600; overflow:hidden; padding-bottom:.06em; }
.dir__name .fit{ font-weight:600; letter-spacing:-.05em; line-height:.92; }
.dir__cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(1.4rem,3vw,3rem);
  margin-top:clamp(2.2rem,4.5vw,3.5rem);
  padding-top:clamp(2.2rem,4.5vw,3.5rem);
  border-top:1px solid var(--rule-inv);
  max-width:60rem;
  color:rgba(239,236,228,.66);
}
.dir__cols a{
  color:var(--paper); text-decoration:none;
  border-bottom:1px solid var(--accent);
  padding-bottom:.05em;
  transition:color .3s;
}
.dir__cols a:hover{ color:var(--accent); }

.btn{
  display:inline-flex; align-items:center; gap:1rem;
  margin-top:clamp(2.2rem,4vw,3rem);
  padding:1.05rem 1.6rem;
  border:1px solid var(--rule-inv); border-radius:999px;
  text-decoration:none;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.07em; text-transform:uppercase;
  overflow:hidden; position:relative;
  transition:color .4s var(--ease), border-color .4s;
}
.btn span, .btn i, .btn .ic{ position:relative; z-index:1; }
.ic{ flex:0 0 auto; width:14px; height:14px; max-width:14px; max-height:14px; }
.btn .ic{ margin-right:-.35rem; }
.btn i{
  width:12px; height:12px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .5s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--swipe);
}
@media (hover:hover){
  .btn:hover{ color:var(--paper); border-color:var(--accent); }
  .btn:hover::before{ transform:scaleX(1); transform-origin:left; }
  .btn:hover i{ transform:rotate(45deg) translate(3px,-3px); }
}

/* ---------- 11. Registre ---------- */

.reg{ margin:0; border-top:1px solid var(--ink); }
.reg > div{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:1rem 2rem; align-items:baseline;
  padding:clamp(.95rem,1.8vw,1.35rem) 0;
  border-bottom:1px solid var(--rule);
  transition:padding-left .45s var(--ease);
}
@media (hover:hover){ .reg > div:hover{ padding-left:.9rem; } }
.reg dt{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-2);
}
.reg dd{
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.05rem,.95rem + .45vw,1.35rem);
  letter-spacing:-.03em;
}

/* ---------- 12. Pied ---------- */

.foot{
  position:relative; z-index:1;
  background:var(--ink); color:var(--paper);
  max-width:none;
  padding:clamp(3rem,6vw,5rem) var(--gut) clamp(1.2rem,2.5vw,2rem);
}
.foot__top, .foot__bot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem 2rem;
  flex-wrap:wrap;
  max-width:var(--maxw); margin-inline:auto;
}
.foot__line{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(239,236,228,.5);
}
.foot__in{
  display:inline-flex; align-items:center; gap:.55rem;
  text-decoration:none;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.07em; text-transform:uppercase;
}
.foot__in i{
  width:10px; height:10px;
  border-top:1.5px solid var(--accent); border-right:1.5px solid var(--accent);
  transform:rotate(45deg);
  transition:transform .5s var(--ease);
}
.foot__in:hover i{ transform:rotate(45deg) translate(3px,-3px); }

.foot__word-wrap{
  max-width:var(--maxw); margin:clamp(2rem,5vw,3.5rem) auto clamp(1.5rem,3vw,2.5rem);
}
.foot__word{ text-transform:uppercase; }
.foot__bot{
  padding-top:1.2rem; border-top:1px solid var(--rule-inv);
  font-family:var(--mono); font-size:.55rem; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(239,236,228,.45);
}
.foot__bot b{ font-weight:400; }

/* ---------- 13. Apparitions ---------- */

.up{
  opacity:0; transform:translateY(16px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0s);
}
.up.is-in{ opacity:1; transform:none; }
.hero__word-wrap{ opacity:1; }

/* Filet de sécurité : si le script n'a pas pu armer les apparitions,
   le contenu s'affiche seul au bout de 5 s plutôt que de rester invisible. */
html:not(.reveals-ready) .up{ animation:failsafe 0s linear 5s forwards; }
@keyframes failsafe{ to{ opacity:1; transform:none; } }

/* ---------- 14. Zones sûres iOS (encoche, barre d'accueil) ---------- */
/*  viewport-fit=cover laisse le contenu passer sous l'encoche en paysage et
    sous la barre d'accueil en portrait : on reprend les marges à la main.   */

.head, .hero, .sec, .dir__inner, .foot, .rails{
  padding-left:max(var(--gut), var(--safe-l));
  padding-right:max(var(--gut), var(--safe-r));
}
.hero{ padding-bottom:calc(clamp(1rem,2.4vh,1.8rem) + var(--safe-b)); }
.foot{ padding-bottom:calc(clamp(1.2rem,2.5vw,2rem) + var(--safe-b)); }
.scrollbar{ left:var(--safe-l); }
.intro__meta--l{ left:max(var(--gut), var(--safe-l)); }
.intro__meta--r{ right:max(var(--gut), var(--safe-r)); }
.intro__bar{
  left:max(var(--gut), var(--safe-l));
  right:max(var(--gut), var(--safe-r));
  bottom:calc(var(--gut) + var(--safe-b));
}

/* ---------- 15. Adaptation aux écrans ---------- */

/* Portables larges / petits écrans de bureau : la colonne des repères rétrécit */
@media (max-width:1240px){
  .sec, .dir__inner{ grid-template-columns:minmax(0,8.5rem) minmax(0,1fr); }
  .act{ grid-template-columns:3.2rem minmax(0,1fr) minmax(0,1fr) 2rem; }
}

/* Tablettes : la description des activités passe sous le titre */
@media (max-width:1040px){
  .act{
    grid-template-columns:2.9rem minmax(0,1fr);
    align-items:start; gap:.1rem 1rem;
  }
  .act__n{ grid-column:1; grid-row:1; padding-top:.4em; }
  .act__t{ grid-column:2; grid-row:1; }
  .act__d{ grid-column:2; grid-row:2; margin-top:.55rem; }
  .act__a{ display:none; }
  .act::before{ inset:0 calc(var(--gut) * -.35); }
}

/* Une seule colonne */
@media (max-width:860px){
  .hero__top{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.5rem; }
  .hero__meta:nth-child(1){ grid-column:1; }
  .hero__meta:nth-child(2){ grid-column:2; }
  .hero__meta:nth-child(3){ grid-column:1 / -1; }
  .sec, .dir__inner{ grid-template-columns:minmax(0,1fr); gap:1.5rem; }
  .tag{ position:static; }
  .head__nav{ display:none; }
  /*  En fixe, l'en-tête passait au-dessus du texte : en une seule colonne
      il n'y a plus de marge latérale pour l'accueillir. Il défile.          */
  .head{ position:absolute; }
  .hero__mid{ flex-direction:column; align-items:flex-start; gap:2.2rem; }
  .hero__meta:last-child{ text-align:left; }
  .steps{ grid-template-columns:1fr; gap:2rem; }
  .reg > div{ grid-template-columns:1fr; gap:.3rem; }
  .rails{ grid-template-columns:repeat(2,1fr); }
  .duo, .dir__cols{ gap:1.6rem; }
  .foot__top{ align-items:flex-start; }
}

/* Téléphones */
@media (max-width:560px){
  .hero{ padding-top:clamp(4.5rem,17vh,6.5rem); gap:1.25rem; }
  /*  Sur téléphone, la zone centrale ne s'étire plus : le chapô et le sceau
      forment un bloc, et le vide se répartit au-dessus et en dessous.       */
  .hero__mid{ flex:0 0 auto; padding:0; gap:1.7rem; }
  .hero__top{ gap:.9rem 1.2rem; }
  .hero__meta{ font-size:.55rem; line-height:1.7; }
  .sec, .dir__inner{
    padding-top:clamp(3.6rem,9vh,5.5rem);
    padding-bottom:clamp(3.6rem,9vh,5.5rem);
  }
  .acts{ margin-top:2rem; }
  .steps{ margin-top:2.4rem; }
  .duo{ margin-top:1.8rem; }
  .hero__claim{ max-width:26ch; }
  .seal{ width:86px; }
  .band span{ letter-spacing:-.03em; }
  .act{ grid-template-columns:2.3rem minmax(0,1fr); }
  .act__d{ font-size:.88rem; }
  .step p, .duo, .lede{ font-size:.95rem; }
  .btn{ width:100%; justify-content:space-between; }
  .foot__bot{ flex-direction:column; align-items:flex-start; gap:.4rem; }
}

/* Très petits téléphones */
@media (max-width:370px){
  :root{ --gut:1rem; }
  .head__logo{ font-size:.9rem; }
  .head__status{ font-size:.5rem; }
  .intro__w{ letter-spacing:.16em; }
}

/* Paysage sur téléphone : on comprime l'ouverture au lieu de l'étirer */
@media (max-height:620px) and (orientation:landscape){
  .hero{ min-height:auto; padding-top:3.8rem; padding-bottom:1.2rem; }
  .hero__top{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hero__meta:nth-child(2){ grid-column:2; }
  .hero__meta:nth-child(3){ grid-column:3; text-align:right; }
  .hero__mid{ flex:0 0 auto; flex-direction:row; align-items:center; gap:2rem; padding:1.2rem 0; }
  .hero__claim{ font-size:1.2rem; max-width:34ch; }
  .seal{ width:74px; }
  .sec, .dir__inner{ padding-top:4rem; padding-bottom:4rem; }
  .intro__w--last{ font-size:clamp(1.8rem,7vw,3.4rem); }
}

/* Grands écrans : on empêche le texte de s'étaler */
@media (min-width:1900px){
  .duo, .dir__cols{ max-width:74rem; }
  .lede{ max-width:60ch; }
}

/* ---------- 16. Accessibilité ---------- */

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.dir :focus-visible, .foot :focus-visible{ outline-color:var(--accent); }

@media (prefers-contrast:more){
  :root{ --ink-2:#2c2a26; --ink-3:#4a4842; --rule:rgba(19,18,16,.35); }
}

/* ---------- 17. Mouvement réduit ---------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .intro{ display:none; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .up{ opacity:1; transform:none; }
  .band__track{ transform:none !important; }
  .seal svg{ animation:none; }
}