/* ============================================================================
   FITAM 2026 — 7ème Forum International du Tourisme à Meknès
   Page d'attente.

   Parti pris : fond sable de l'affiche, vert impérial en encre, or et
   terre cuite en accents. Structure d'application mobile — barre d'onglets
   flottante, cartes tactiles, puces de dates, pastilles d'état.
   ========================================================================== */

/* ------------------------------------------------------------- 01 JETONS -- */
:root{
  --sand-50:#FAF7EF;
  --sand-100:#F2EDE1;
  --sand-200:#E8E2D2;
  --sand-300:#DBD2BC;
  --sand-400:#C4B79B;

  --ink:#14301F;
  --ink-2:#1E4630;
  --ink-soft:#5A6B5C;

  --gold:#C0963C;
  --gold-lt:#DFB661;
  --gold-dk:#8C6B2F;

  --terra:#B4532F;
  --terra-lt:#D2704A;
  --clay:#8C4A2F;

  --white:#FFFFFF;

  --r-sm:14px;
  --r-md:22px;
  --r-lg:32px;
  --r-xl:44px;

  --sh-1:0 2px 6px rgba(20,48,31,.05), 0 8px 24px rgba(20,48,31,.06);
  --sh-2:0 4px 12px rgba(20,48,31,.07), 0 18px 48px rgba(20,48,31,.10);
  --sh-3:0 8px 20px rgba(20,48,31,.10), 0 32px 72px rgba(20,48,31,.14);

  --display:"EB Garamond","Georgia",serif;
  --ui:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;

  --gut:clamp(20px,4vw,56px);
  --e:cubic-bezier(.22,1,.36,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
}

/* -------------------------------------------------------------- 02 BASE -- */
*,*::before,*::after{box-sizing:border-box}
/* Le bandeau incliné déborde volontairement ; la page ne défile jamais pour lui. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--sand-50);color:var(--ink);
  font-family:var(--ui);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;position:relative;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:6px}

/* ------------------------------------------------------- 03 FOND ANIMÉ ---- */
/* Trois couches : la trame de zellige qui dérive, deux halos qui respirent. */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg__tile{
  /* Le débord doit dépasser la course de l'animation (212 px), sinon le bord
     droit et le bas se retrouvent sans trame en fin de cycle. */
  position:absolute;inset:-280px;
  background:url("../img/mosaic-tile.svg") repeat;
  background-size:212px 212px;
  opacity:.5;
  animation:drift 90s linear infinite;
}
@keyframes drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-212px,-212px,0)}
}
.bg__blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.bg__blob--a{
  width:52vw;height:52vw;left:-14vw;top:-12vw;
  background:radial-gradient(circle,rgba(192,150,60,.42),transparent 68%);
  animation:float-a 26s var(--e-soft) infinite alternate;
}
.bg__blob--b{
  width:46vw;height:46vw;right:-12vw;bottom:-10vw;
  background:radial-gradient(circle,rgba(180,83,47,.30),transparent 68%);
  animation:float-b 32s var(--e-soft) infinite alternate;
}
@keyframes float-a{to{transform:translate3d(7vw,5vw,0) scale(1.14)}}
@keyframes float-b{to{transform:translate3d(-6vw,-6vw,0) scale(1.10)}}
.bg__grain{
  position:absolute;inset:0;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ 04 TRAME ---- */
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gut)}
.page{position:relative;z-index:1}

/* ------------------------------------------------------- 05 BARRE HAUTE --- */
.top{
  position:sticky;top:0;z-index:60;padding-top:clamp(12px,2vw,20px);
  transition:padding .4s var(--e);
}
.top.is-stuck{padding-top:8px}
.top__in{
  display:flex;align-items:center;gap:9px;
  background:rgba(250,247,239,.82);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--sand-300);border-radius:100px;
  padding:9px 9px 9px 18px;box-shadow:var(--sh-1);
  transition:box-shadow .4s var(--e),border-color .4s var(--e);
}
.top.is-stuck .top__in{box-shadow:var(--sh-2);border-color:var(--sand-400)}

.brand{display:flex;align-items:baseline;gap:8px;flex:0 0 auto}
.brand b{
  font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;
  color:var(--ink);line-height:1;
}
.brand span{
  font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--gold-dk);
  line-height:1;
}

.top__nav{display:flex;align-items:center;gap:1px;margin-left:auto;margin-right:8px}
.top__nav a{
  position:relative;padding:9px 12px;border-radius:100px;white-space:nowrap;
  font-size:12.5px;font-weight:500;color:var(--ink-soft);
  transition:color .3s var(--e),background .3s var(--e);
}
.top__nav a::before{
  content:"";position:absolute;inset:0;border-radius:100px;background:var(--sand-200);
  transform:scale(.7);opacity:0;transition:transform .38s var(--e),opacity .3s var(--e);
}
.top__nav a span{position:relative;z-index:1}
.top__nav a:hover{color:var(--ink)}
.top__nav a:hover::before{transform:scale(1);opacity:1}

.pill-state{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  background:var(--ink);color:var(--sand-100);border-radius:100px;
  padding:10px 17px;font-size:12px;font-weight:600;letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(20,48,31,.22);
  transition:transform .38s var(--e),box-shadow .38s var(--e);
}
.pill-state:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,48,31,.3)}
.pill-state i{
  width:7px;height:7px;border-radius:50%;background:var(--gold-lt);flex:0 0 auto;
  animation:blip 2.4s var(--e-soft) infinite;
}
@keyframes blip{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(223,182,97,.6)}
  50%{opacity:.6;box-shadow:0 0 0 6px rgba(223,182,97,0)}
}

.burger{
  display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--sand-300);
  background:var(--white);position:relative;cursor:pointer;flex:0 0 auto;
  -webkit-tap-highlight-color:transparent;
  transition:transform .35s var(--e),background .3s var(--e);
}
.burger:hover{transform:scale(1.06)}
.burger i{
  position:absolute;left:12px;right:12px;height:1.6px;border-radius:2px;background:var(--ink);
  transition:transform .42s var(--e),opacity .25s var(--e);
}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:22px}
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.nav-toggle:checked+.wrap .burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav-toggle:checked+.wrap .burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* -------------------------------------------------------------- 06 HERO --- */
/* padding-block seulement : .hero porte aussi .wrap, dont il ne doit pas
   écraser le padding horizontal (sinon le texte colle aux bords en mobile). */
.hero{padding-block:clamp(26px,5vw,56px) clamp(40px,6vw,72px)}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(24px,3.4vw,52px);align-items:center;
}

.sticker{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--gold);color:var(--ink);
  border-radius:100px;padding:8px 16px 8px 12px;
  font-size:12px;font-weight:700;letter-spacing:.04em;
  transform:rotate(-2.2deg);box-shadow:var(--sh-1);
  transition:transform .42s var(--e),box-shadow .42s var(--e);
}
.sticker:hover{transform:rotate(0deg) scale(1.05);box-shadow:var(--sh-2)}
.sticker b{
  font-family:var(--display);font-weight:900;font-size:19px;line-height:1;
  background:var(--ink);color:var(--gold-lt);border-radius:50%;
  width:26px;height:26px;display:grid;place-items:center;
}

.hero__title{
  margin-top:clamp(18px,2.6vw,28px);
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.3rem,4.9vw,3.85rem);line-height:.98;letter-spacing:-.028em;
  color:var(--ink);
}
.hero__title .thin{font-weight:300;font-style:italic;color:var(--ink-2)}
.hero__title .big{
  display:block;font-weight:900;letter-spacing:-.045em;
  font-size:clamp(3.4rem,9.4vw,7.2rem);line-height:.86;
  margin-top:.06em;color:var(--terra);
}
.hero__title .big em{
  font-style:normal;-webkit-text-stroke:2px var(--ink);color:transparent;
  padding-left:.06em;
}

.hero__lead{
  margin-top:clamp(16px,2.4vw,24px);max-width:44ch;
  font-size:clamp(15px,1.1vw,17px);line-height:1.66;color:var(--ink-soft);
}

/* Puces de dates — sélecteur de dates d'application */
.days{display:flex;gap:10px;margin-top:clamp(22px,3vw,32px);flex-wrap:wrap}
.day{
  position:relative;background:var(--white);border:1px solid var(--sand-300);
  border-radius:var(--r-md);padding:13px 17px;min-width:76px;text-align:center;
  box-shadow:var(--sh-1);overflow:hidden;
  transition:transform .42s var(--e),box-shadow .42s var(--e),border-color .3s;
}
.day::after{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .48s var(--e);
}
.day>*{position:relative;z-index:1;transition:color .34s var(--e)}
.day:hover{transform:translateY(-5px) rotate(-1.4deg);box-shadow:var(--sh-2);border-color:var(--ink)}
.day:hover::after{transform:translateY(0)}
.day:hover b,.day:hover span{color:var(--sand-100)}
.day b{
  display:block;font-family:var(--display);font-weight:800;font-size:30px;
  line-height:1;color:var(--ink);
}
.day span{
  display:block;margin-top:5px;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dk);
}
.day--last{background:var(--ink);border-color:var(--ink)}
.day--last b{color:var(--sand-100)}
.day--last span{color:var(--gold-lt)}
.day--last::after{background:var(--terra)}

.hero__place{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-size:13.5px;font-weight:500;color:var(--ink-soft);
}
.hero__place i{
  width:8px;height:8px;border-radius:50%;background:var(--terra);flex:0 0 auto;
}

.hero__cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:clamp(24px,3.4vw,34px)}

/* ------------------------------------------------------------ 07 BOUTONS -- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:11px;
  border-radius:100px;padding:15px 26px;border:1px solid transparent;
  font-size:14px;font-weight:600;letter-spacing:.005em;cursor:pointer;
  overflow:hidden;isolation:isolate;
  transition:transform .4s var(--e),box-shadow .4s var(--e),color .34s var(--e);
}
.btn span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:11px}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  transform:translateY(102%);transition:transform .5s var(--e);
}
.btn:hover{transform:translateY(-3px)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translateY(-1px)}
.btn svg{width:15px;height:15px;transition:transform .42s var(--e)}
.btn:hover svg{transform:translateX(4px)}

.btn--fill{background:var(--ink);color:var(--sand-100);box-shadow:0 6px 18px rgba(20,48,31,.24)}
.btn--fill::before{background:var(--terra)}
.btn--fill:hover{box-shadow:0 12px 30px rgba(180,83,47,.34)}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--sand-400)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{color:var(--sand-100);border-color:var(--ink)}

/* ----------------------------------------------------- 08 PILE DE CARTES -- */
/* Les photos sont empilées comme des cartes d'application, légèrement
   désaxées ; elles se redressent et se séparent au survol.                  */
.stack{position:relative;aspect-ratio:1/1.04;perspective:1400px}
.card-ph{
  position:absolute;border-radius:var(--r-lg);overflow:hidden;
  background:var(--sand-200);box-shadow:var(--sh-3);
  transition:transform .78s var(--e),box-shadow .5s var(--e);
  will-change:transform;
}
.card-ph img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--e),filter .7s var(--e);
}
.card-ph::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(255,255,255,.34);pointer-events:none;
}
.card-ph--main{inset:6% 12% 10% 0;z-index:3;transform:rotate(-2deg)}
.card-ph--b{inset:0 0 42% 46%;z-index:2;transform:rotate(4.5deg)}
.card-ph--c{inset:56% 4% 0 40%;z-index:4;transform:rotate(-4deg)}
.stack:hover .card-ph--main{transform:rotate(-3.4deg) translate(-10px,-6px) scale(1.015)}
.stack:hover .card-ph--b{transform:rotate(7deg) translate(14px,-14px)}
.stack:hover .card-ph--c{transform:rotate(-6.5deg) translate(-6px,14px)}
.card-ph:hover{box-shadow:0 18px 40px rgba(20,48,31,.2),0 44px 100px rgba(20,48,31,.2)}
.card-ph:hover img{transform:scale(1.07)}

.tag-float{
  position:absolute;z-index:6;background:var(--white);border-radius:100px;
  padding:9px 15px;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  box-shadow:var(--sh-2);display:inline-flex;align-items:center;gap:7px;
  transition:transform .48s var(--e);
}
.tag-float i{width:6px;height:6px;border-radius:50%;background:var(--terra)}
.tag-float--1{left:-3%;top:34%;transform:rotate(-5deg)}
.tag-float--2{right:2%;bottom:20%;transform:rotate(4deg)}
.stack:hover .tag-float--1{transform:rotate(-8deg) translateY(-7px)}
.stack:hover .tag-float--2{transform:rotate(7deg) translateY(7px)}

/* ---------------------------------------------------------- 09 BANDEAU ---- */
.ticker{
  position:relative;overflow:hidden;background:var(--ink);color:var(--sand-100);
  padding:15px 0;transform:rotate(-1deg) scale(1.03);margin:clamp(20px,4vw,44px) 0;
  box-shadow:var(--sh-2);
}
.ticker__row{display:flex;width:max-content;animation:slide 34s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
.ticker span{
  display:inline-flex;align-items:center;gap:22px;padding-right:22px;
  font-family:var(--display);font-weight:600;font-size:clamp(15px,1.7vw,22px);
  letter-spacing:-.008em;white-space:nowrap;
}
.ticker span::after{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);flex:0 0 auto;
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ------------------------------------------------------------ 10 SECTION -- */
.sec{padding-block:clamp(34px,5.4vw,66px)}
.sec__head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,32px)}
.sec__head h2{
  font-family:var(--display);font-weight:700;letter-spacing:-.028em;
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.02;color:var(--ink);
}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dk);margin-bottom:10px;
}
.kicker::before{
  content:"";width:22px;height:2px;border-radius:2px;background:var(--terra);
}

/* --------------------------------------------------------- 11 CARTE MAIN -- */
.build{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:var(--white);border:1px solid var(--sand-300);box-shadow:var(--sh-2);
  padding:clamp(26px,4vw,52px);
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(26px,4vw,56px);align-items:center;
}
.build::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--terra),var(--gold),var(--ink));
}
/* Calibré pour que « Le FITAM 2026 commence dans… » tienne sur une ligne
   dans sa colonne, à côté du compteur. */
.build h2{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.04;
}
.build p{margin-top:16px;color:var(--ink-soft);font-size:15.5px;line-height:1.68;max-width:46ch}

/* Compteur — tuiles d'application */
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.count__c{
  background:var(--sand-100);border:1px solid var(--sand-300);border-radius:var(--r-md);
  padding:16px 8px;text-align:center;
  transition:transform .42s var(--e),background .35s var(--e),border-color .35s;
}
.count__c:hover{transform:translateY(-5px);background:var(--ink);border-color:var(--ink)}
.count__c:hover b{color:var(--sand-100)}
.count__c:hover span{color:var(--gold-lt)}
.count__c b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.count__c span{
  display:block;margin-top:7px;font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}

/* --------------------------------------------------------- 12 INFO CARDS -- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.card{
  position:relative;background:var(--white);border:1px solid var(--sand-300);
  border-radius:var(--r-lg);padding:clamp(20px,2.4vw,30px);overflow:hidden;
  box-shadow:var(--sh-1);
  transition:transform .48s var(--e),box-shadow .48s var(--e),border-color .4s;
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;
  background:radial-gradient(120% 100% at 0% 0%,rgba(192,150,60,.18),transparent 62%);
  transition:opacity .55s var(--e);
}
.card:hover{transform:translateY(-7px);box-shadow:var(--sh-3);border-color:var(--gold)}
.card:hover::before{opacity:1}
.card>*{position:relative;z-index:1}
.card__ico{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--sand-100);border:1px solid var(--sand-300);margin-bottom:16px;
  transition:transform .5s var(--e),background .4s var(--e);
}
.card:hover .card__ico{transform:rotate(-8deg) scale(1.08);background:var(--gold)}
.card__ico svg{width:20px;height:20px;stroke:var(--ink)}
.card h3{
  font-family:var(--display);font-weight:700;font-size:1.18rem;
  letter-spacing:-.018em;line-height:1.16;
}
.card p{margin-top:9px;font-size:14px;line-height:1.62;color:var(--ink-soft)}

/* ------------------------------------------------------------ 13 CONTACT -- */
.foot{
  margin-top:clamp(30px,5vw,60px);
  border-top:1px solid var(--sand-300);
  padding:clamp(26px,4vw,44px) 0 clamp(96px,12vw,56px);
}
.foot__in{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center}
.foot__brand{display:flex;flex-direction:column;gap:5px}
.foot__brand b{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.foot__brand span{font-size:12.5px;color:var(--ink-soft)}
.foot__links{display:flex;flex-wrap:wrap;gap:9px;margin-left:auto}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);border:1px solid var(--sand-300);border-radius:100px;
  padding:10px 17px;font-size:13px;font-weight:500;color:var(--ink);
  transition:transform .4s var(--e),box-shadow .4s var(--e),background .35s,color .35s,border-color .35s;
}
.chip:hover{
  transform:translateY(-3px);background:var(--ink);color:var(--sand-100);
  border-color:var(--ink);box-shadow:var(--sh-2);
}
.foot__legal{
  width:100%;padding-top:20px;margin-top:4px;border-top:1px solid var(--sand-200);
  display:flex;flex-wrap:wrap;gap:8px 26px;
  font-size:11.5px;color:var(--ink-soft);
}

/* --------------------------------------------------- 14 BARRE D'ONGLETS --- */
/* Uniquement en mobile : la barre d'onglets flottante d'une application. */
.tabbar{
  display:none;position:fixed;z-index:70;
  left:50%;transform:translateX(-50%);
  bottom:calc(12px + env(safe-area-inset-bottom));
  width:calc(100% - 28px);max-width:420px;
  background:rgba(20,48,31,.94);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-radius:100px;padding:7px;
  box-shadow:0 10px 32px rgba(20,48,31,.32);
}
.tabbar ul{display:flex;align-items:center;gap:4px}
.tabbar li{flex:1}
.tabbar a{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 4px;border-radius:100px;color:rgba(242,237,225,.66);
  font-size:9.5px;font-weight:600;letter-spacing:.03em;
  transition:color .3s var(--e),background .35s var(--e);
}
.tabbar a svg{width:18px;height:18px;stroke:currentColor;transition:transform .4s var(--e)}
.tabbar a:hover,.tabbar a.is-on{color:var(--sand-50);background:rgba(255,255,255,.10)}
.tabbar a:hover svg{transform:translateY(-2px) scale(1.1)}
.tabbar a.is-on svg{stroke:var(--gold-lt)}

/* ------------------------------------------------------- 15 APPARITIONS --- */
/* Animations CSS pures : l'opacité de départ ne vit que dans la keyframe,
   donc rien ne peut rester masqué si le CSS animé est indisponible.        */
.rv{animation:rise .9s var(--e) both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.rv[data-d="1"]{animation-delay:.07s}
.rv[data-d="2"]{animation-delay:.14s}
.rv[data-d="3"]{animation-delay:.21s}
.rv[data-d="4"]{animation-delay:.28s}
.rv[data-d="5"]{animation-delay:.35s}
.rv[data-d="6"]{animation-delay:.42s}

@media (prefers-reduced-motion:reduce){
  .rv,.bg__tile,.bg__blob,.ticker__row,.pill-state i{animation:none}
  *{transition-duration:.01ms!important}
}

/* ------------------------------------------------------------ 16 FORMATS -- */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}
  .stack{max-width:560px;margin-inline:auto;width:100%}
  .build{grid-template-columns:1fr;gap:28px}
}

@media (max-width:1280px){
  .top__nav{
    position:absolute;left:0;right:0;top:calc(100% + 10px);
    flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(250,247,239,.97);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border:1px solid var(--sand-300);border-radius:var(--r-lg);
    padding:10px;box-shadow:var(--sh-3);margin:0;
    opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);
    transition:opacity .34s var(--e),transform .42s var(--e),visibility .34s;
  }
  .nav-toggle:checked+.wrap .top__nav{opacity:1;visibility:visible;transform:none}
  .top__nav a{padding:14px 16px;font-size:15px;border-radius:var(--r-md)}
  .top__in{position:relative}
  .burger{display:block}
  .pill-state{margin-left:auto;order:0}
  .cards{grid-template-columns:1fr}
}
@media (max-width:900px){
  .tabbar{display:block}
}

@media (max-width:640px){
  .top__in{padding:8px 8px 8px 15px}
  .brand b{font-size:17px}
  .brand span{font-size:10px}
  .pill-state{padding:9px 13px;font-size:11px}
  .pill-state em{display:none}
  .hero{padding-top:18px}
  .hero__title{font-size:clamp(2rem,8.4vw,2.6rem)}
  .hero__title .big{font-size:clamp(3rem,15vw,4.4rem)}
  .day{flex:1;min-width:0;padding:12px 8px}
  .day b{font-size:26px}
  .btn{width:100%;justify-content:center;padding:16px 22px}
  .stack{aspect-ratio:1/1.14}
  .card-ph--main{inset:5% 16% 12% 0}
  .tag-float{font-size:10.5px;padding:8px 12px}
  .foot__links{margin-left:0;width:100%}
  .chip{flex:1;justify-content:center}
  .count{grid-template-columns:repeat(4,1fr);gap:6px}
  .count__c{padding:13px 4px}
  .count__c span{font-size:8.5px;letter-spacing:.06em}
}

/* ============================================================ 17 CHIFFRES = */
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.2vw,14px)}
.stat{
  position:relative;background:var(--white);border:1px solid var(--sand-300);
  border-radius:var(--r-md);padding:clamp(16px,2vw,24px) 12px;text-align:center;
  box-shadow:var(--sh-1);overflow:hidden;
  transition:transform .46s var(--e),box-shadow .46s var(--e),border-color .4s;
}
.stat::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--terra);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--e);
}
.stat:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--sh-2);border-color:var(--gold)}
.stat:hover::after{transform:scaleX(1)}
.stat b{
  display:block;font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(1.7rem,3vw,2.5rem);color:var(--ink);font-variant-numeric:tabular-nums;
}
.stat b i{font-style:normal;color:var(--terra)}
.stat span{
  display:block;margin-top:9px;font-size:9.5px;font-weight:700;line-height:1.4;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
}
@media (max-width:900px){.stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ============================================================== 18 AXES === */
.axes{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.6vw,18px)}
.axes>.axe{flex:0 1 calc(25% - 14px)}
.axes--3>.axe{flex:0 1 calc(33.333% - 12px)}
@media (max-width:1180px){.axes>.axe{flex:0 1 calc(33.333% - 12px)}}
@media (max-width:860px){.axes>.axe,.axes--3>.axe{flex:0 1 calc(50% - 9px)}}
@media (max-width:600px){.axes>.axe,.axes--3>.axe{flex:1 1 100%}}
/* Quatre axes : une rangée de quatre, puis 2×2. Sans cette règle, le palier
   à trois colonnes laissait une carte orpheline sur sa ligne. */
.axes--4>.axe{flex:0 1 calc(25% - 14px)}
@media (max-width:1180px){.axes--4>.axe{flex:0 1 calc(50% - 9px)}}
@media (max-width:600px){.axes--4>.axe{flex:1 1 100%}}
.axe{
  position:relative;background:var(--white);border:1px solid var(--sand-300);
  border-radius:var(--r-lg);padding:clamp(22px,2.6vw,30px);overflow:hidden;
  box-shadow:var(--sh-1);
  transition:transform .5s var(--e),box-shadow .5s var(--e),border-color .4s;
}
.axe::before{
  content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;
  border-radius:50%;background:var(--sand-100);
  transition:transform .7s var(--e),background .5s var(--e);
}
.axe:hover{transform:translateY(-8px);box-shadow:var(--sh-3);border-color:var(--ink)}
.axe:hover::before{transform:scale(2.6);background:rgba(192,150,60,.16)}
.axe>*{position:relative;z-index:1}
.axe__n{
  display:inline-block;font-family:var(--display);font-weight:900;
  font-size:13px;letter-spacing:.06em;color:var(--gold-dk);
  background:var(--sand-100);border-radius:8px;padding:5px 10px;margin-bottom:14px;
  transition:background .4s var(--e),color .4s var(--e);
}
.axe:hover .axe__n{background:var(--ink);color:var(--gold-lt)}
.axe h3{
  font-family:var(--display);font-weight:700;font-size:1.14rem;
  line-height:1.2;letter-spacing:-.018em;
}
.axe p{margin-top:10px;font-size:13.8px;line-height:1.62;color:var(--ink-soft)}
.axe__fmt{
  margin-top:16px;padding-top:14px;border-top:1px dashed var(--sand-300);
  font-size:11.5px;font-weight:600;color:var(--gold-dk);
}

/* ======================================================= 19 EXPÉRIENCES === */
.exps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(12px,1.6vw,18px)}
.exp{
  position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  min-height:290px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(20px,2.2vw,26px);color:var(--sand-50);box-shadow:var(--sh-2);
  transition:transform .55s var(--e),box-shadow .55s var(--e);
}
.exp img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform 1.5s var(--e);
}
.exp::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,48,31,.16) 0%,rgba(20,48,31,.52) 46%,rgba(20,48,31,.92) 100%);
  transition:background .6s var(--e);
}
.exp:hover{transform:translateY(-8px) scale(1.012);box-shadow:var(--sh-3)}
.exp:hover img{transform:scale(1.1)}
.exp:hover::after{background:linear-gradient(180deg,rgba(180,83,47,.24) 0%,rgba(20,48,31,.6) 46%,rgba(20,48,31,.95) 100%)}
.exp__top{
  position:absolute;top:16px;left:16px;right:16px;z-index:1;
  display:flex;align-items:center;gap:8px;
}
.exp__n{
  font-family:var(--display);font-weight:900;font-size:12px;
  background:var(--gold);color:var(--ink);border-radius:8px;padding:5px 9px;
}
.exp__meta{
  margin-left:auto;display:flex;gap:6px;
}
.exp__meta span{
  background:rgba(250,247,239,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(250,247,239,.26);border-radius:100px;
  padding:5px 11px;font-size:10.5px;font-weight:600;
}
.exp h3{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.16;letter-spacing:-.018em}
.exp p{
  margin-top:9px;font-size:13.2px;line-height:1.55;color:rgba(250,247,239,.78);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .6s var(--e),opacity .45s var(--e),margin .5s var(--e);
}
.exp:hover p{max-height:130px;opacity:1}
.exp__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--gold-lt);
}
.exp__go svg{width:13px;height:13px;stroke:currentColor;transition:transform .42s var(--e)}
.exp:hover .exp__go svg{transform:translateX(5px)}

/* =========================================================== 20 FORMULAIRE */
.form-card{
  background:var(--white);border:1px solid var(--sand-300);border-radius:var(--r-xl);
  padding:clamp(24px,3.4vw,46px);box-shadow:var(--sh-2);
}
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,20px)}
.f-full{grid-column:1/-1}
.field label{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px;
}
.field label i{color:var(--terra);font-style:normal}
.field input,.field select,.field textarea{
  width:100%;background:var(--sand-50);border:1.5px solid var(--sand-300);
  border-radius:var(--r-sm);padding:14px 16px;font-size:15px;color:var(--ink);
  transition:border-color .35s var(--e),background .35s var(--e),box-shadow .35s var(--e),transform .35s var(--e);
  -webkit-appearance:none;appearance:none;
}
.field textarea{min-height:130px;resize:vertical}
.field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6B5C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;
  padding-right:40px;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--sand-400)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--ink);background:var(--white);
  box-shadow:0 0 0 4px rgba(20,48,31,.08);transform:translateY(-1px);
}
.check{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-size:13px;line-height:1.5;color:var(--ink-soft);
}
.check input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:21px;height:21px;border:1.5px solid var(--sand-400);border-radius:7px;
  background:var(--sand-50);cursor:pointer;position:relative;margin:0;
  transition:background .3s var(--e),border-color .3s var(--e),transform .3s var(--e);
}
.check input::after{
  content:"";position:absolute;left:6.5px;top:3px;width:5px;height:10px;
  border:solid var(--sand-50);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  transition:transform .3s var(--e);
}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{transform:rotate(45deg) scale(1)}
.check:hover input{border-color:var(--ink);transform:scale(1.06)}
.form__ok{
  grid-column:1/-1;display:none;align-items:center;gap:12px;
  background:rgba(30,70,48,.07);border:1.5px solid rgba(30,70,48,.28);
  border-radius:var(--r-md);padding:16px 20px;font-size:14.5px;color:var(--ink-2);
}
.form__ok.is-on{display:flex;animation:rise .6s var(--e) both}
.form__err{
  grid-column:1/-1;display:none;align-items:center;gap:12px;
  background:rgba(180,83,47,.08);border:1.5px solid rgba(180,83,47,.3);
  border-radius:var(--r-md);padding:16px 20px;font-size:14.5px;color:var(--clay);
}
.form__err.is-on{display:flex;animation:rise .6s var(--e) both}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:var(--terra)}
@media (max-width:640px){.form{grid-template-columns:1fr}}

/* ============================================================== 21 PASS === */
.pass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
@media (max-width:900px){.pass-grid{grid-template-columns:1fr}}
.pass{
  position:relative;background:var(--white);border:1.5px solid var(--sand-300);
  border-radius:var(--r-lg);padding:clamp(22px,2.6vw,32px);box-shadow:var(--sh-1);
  display:flex;flex-direction:column;
  transition:transform .5s var(--e),box-shadow .5s var(--e),border-color .4s;
}
.pass:hover{transform:translateY(-8px);box-shadow:var(--sh-3);border-color:var(--gold)}
.pass--reco{border-color:var(--ink);box-shadow:var(--sh-2)}
.pass__flag{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--terra);color:var(--sand-50);border-radius:100px;
  padding:6px 15px;font-size:10px;font-weight:800;letter-spacing:.1em;
  white-space:nowrap;box-shadow:var(--sh-1);
}
.pass h3{font-family:var(--display);font-weight:800;font-size:1.34rem;letter-spacing:-.02em}
.pass__price{
  font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--gold-dk);
  margin:8px 0 4px;
}
.pass__note{font-size:12.5px;color:var(--ink-soft)}
.pass ul{margin-top:18px;display:grid;gap:10px;flex:1}
.pass li{position:relative;padding-left:26px;font-size:13.6px;line-height:1.5;color:var(--ink-soft)}
.pass li::before{
  content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--sand-100);border:1px solid var(--sand-300);
}
.pass li::after{
  content:"";position:absolute;left:5.5px;top:9px;width:4px;height:8px;
  border:solid var(--gold-dk);border-width:0 1.8px 1.8px 0;transform:rotate(45deg);
}
.pass .btn{margin-top:22px;width:100%;justify-content:center}

/* ========================================================= 22 À PROPOS === */
.about{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4vw,64px);
  /* Les deux colonnes partagent exactement la même hauteur : le texte ne
     décroche plus du thème au-dessus, et l'image ne déborde plus en bas. */
  align-items:stretch;
}
@media (max-width:980px){.about{grid-template-columns:1fr}}
/* Le titre et le thème vivent maintenant DANS la colonne de texte : la
   vignette monte jusqu'en haut de la section et les deux colonnes se
   terminent au même endroit — plus de vide en haut à droite ni en bas à
   gauche. */
.about__txt{display:flex;flex-direction:column;justify-content:center}
.about__txt>*:first-child{margin-top:0}
.about h2{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.04;
}
.about__txt>p:not(.kicker):not(.sec__theme){
  margin-top:16px;color:var(--ink-soft);font-size:15.5px;line-height:1.72;max-width:52ch;
}
.about__txt>.sec__theme+p{margin-top:22px}
.about__theme{
  margin-top:26px;background:var(--ink);color:var(--sand-100);
  border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);position:relative;overflow:hidden;
}
.about__theme::after{
  content:"";position:absolute;right:-40px;bottom:-40px;width:150px;height:150px;
  border-radius:50%;background:rgba(192,150,60,.2);transition:transform .8s var(--e);
}
.about__theme:hover::after{transform:scale(1.7)}
.about__theme span{
  position:relative;z-index:1;display:block;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:10px;
}
.about__theme q{
  position:relative;z-index:1;display:block;font-family:var(--display);
  font-weight:600;font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.34;quotes:"« " " »";
}
.about__ph{
  position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);
  aspect-ratio:4/3.4;
}
@media (min-width:981px){
  /* La vignette épouse la hauteur du texte, avec un plancher pour rester
     lisible. L'image est sortie du flux : en flux, sa hauteur naturelle
     imposait sa propre taille à la rangée et cassait l'alignement. */
  .about__ph{aspect-ratio:auto;min-height:clamp(300px,29vw,390px)}
  .about__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}
.about__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--e)}
.about__ph:hover img{transform:scale(1.07)}
.about__ph figcaption{
  position:absolute;left:16px;bottom:16px;right:16px;z-index:1;
  background:rgba(250,247,239,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:var(--r-md);padding:13px 17px;font-size:12.5px;font-weight:600;color:var(--ink);
}

/* ======================================================== 23 OBJECTIFS === */
/* Flex + justify-content:center : la derniere rangee, incomplete, se centre
   au lieu de rester callee a gauche comme le ferait une grille. */
.goals{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.4vw,16px)}
.goals>.goal{flex:0 1 calc(25% - 12px)}
@media (max-width:1100px){.goals>.goal{flex:0 1 calc(33.333% - 11px)}}
@media (max-width:820px){.goals>.goal{flex:0 1 calc(50% - 8px)}}
.goal{
  position:relative;background:var(--white);border:1px solid var(--sand-300);
  border-radius:var(--r-md);padding:clamp(18px,2.2vw,26px);overflow:hidden;
  transition:transform .46s var(--e),box-shadow .46s var(--e),background .4s;
}
.goal:hover{transform:translateY(-6px);box-shadow:var(--sh-2);background:var(--ink)}
.goal:hover h3,.goal:hover p{color:var(--sand-100)}
.goal:hover .goal__n{color:var(--gold-lt)}
.goal__n{
  font-family:var(--display);font-weight:900;font-size:2.1rem;line-height:1;
  color:var(--sand-300);transition:color .4s var(--e);
}
.goal h3{
  margin-top:10px;font-family:var(--display);font-weight:700;font-size:1.1rem;
  letter-spacing:-.015em;transition:color .4s var(--e);
}
.goal p{margin-top:7px;font-size:13.4px;line-height:1.58;color:var(--ink-soft);transition:color .4s var(--e)}

/* ======================================================== 24 PROGRAMME === */
.pg-tabs{display:flex;gap:9px;margin-bottom:clamp(18px,2.4vw,26px);flex-wrap:wrap}
.pg-tab{
  flex:1;min-width:150px;background:var(--white);border:1.5px solid var(--sand-300);
  border-radius:var(--r-md);padding:15px 18px;cursor:pointer;text-align:left;
  transition:transform .42s var(--e),border-color .35s,background .35s,box-shadow .42s;
}
.pg-tab b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.13em;color:var(--gold-dk);transition:color .35s}
.pg-tab span{
  display:block;margin-top:5px;font-family:var(--display);font-weight:700;
  font-size:1.12rem;letter-spacing:-.018em;color:var(--ink);transition:color .35s;
}
.pg-tab:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--gold)}
.pg-tab.is-on{background:var(--ink);border-color:var(--ink);box-shadow:var(--sh-2)}
.pg-tab.is-on b{color:var(--gold-lt)}
.pg-tab.is-on span{color:var(--sand-50)}

.pg-panel{display:none}
.pg-panel.is-on{display:block;animation:rise .6s var(--e) both}
.pg-day{
  font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2vw,1.5rem);
  letter-spacing:-.02em;margin-bottom:16px;
}
.slot{
  display:grid;grid-template-columns:118px 1fr;gap:clamp(14px,2vw,26px);
  background:var(--white);border:1px solid var(--sand-300);border-radius:var(--r-md);
  padding:clamp(15px,1.8vw,20px);margin-bottom:9px;
  transition:transform .42s var(--e),box-shadow .42s var(--e),border-color .35s;
}
.slot:hover{transform:translateX(6px);box-shadow:var(--sh-2);border-color:var(--gold)}
.slot__t{font-family:var(--display);font-weight:700;font-size:14px;color:var(--terra);line-height:1.3}
.slot__k{
  display:inline-block;margin-top:7px;font-size:9px;font-weight:800;letter-spacing:.1em;
  background:var(--sand-100);color:var(--ink-soft);border-radius:6px;padding:4px 8px;
}
/* Toutes les lignes d'un créneau ont le même poids, comme sur le programme
   officiel : les tirets y marquent des points de même niveau, pas un titre
   suivi d'un commentaire. */
.slot__l{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.slot__l li{
  font-family:var(--display);font-weight:700;font-size:1.06rem;
  letter-spacing:-.015em;line-height:1.28;color:var(--ink);
}
/* Le tiret n'apparaît que là où le programme en met un : quand l'heure porte
   plusieurs points. */
.slot__l li:not(:only-child){position:relative;padding-inline-start:17px}
.slot__l li:not(:only-child)::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:9px;height:1.6px;border-radius:2px;background:var(--gold);
}
.slot__loc{
  margin-top:9px;display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;color:var(--gold-dk);
}
.slot__loc::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
@media (max-width:640px){
  .slot{grid-template-columns:1fr;gap:10px}
  .slot__k{margin-top:0;margin-left:9px}
}
.note{
  margin-top:18px;display:flex;gap:12px;align-items:flex-start;
  background:rgba(192,150,60,.09);border:1px dashed var(--gold);border-radius:var(--r-md);
  padding:14px 18px;font-size:13.4px;line-height:1.6;color:var(--ink-soft);
}

/* ======================================================= 26 DESTINATION == */
.dest{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(12px,1.6vw,18px)}
.dest__b{
  background:var(--white);border:1px solid var(--sand-300);border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px);
  transition:transform .46s var(--e),box-shadow .46s var(--e),border-color .4s;
}
.dest__b:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--gold)}
.dest__b h3{font-family:var(--display);font-weight:700;font-size:1.14rem;letter-spacing:-.018em;line-height:1.2}
.dest__b p{margin-top:10px;font-size:13.8px;line-height:1.66;color:var(--ink-soft)}
.map{
  margin-top:clamp(14px,2vw,20px);position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--sand-300);box-shadow:var(--sh-1);aspect-ratio:21/8;min-height:250px;background:var(--sand-200);
}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.85) contrast(1.03)}
.map__pin{
  position:absolute;z-index:2;left:16px;top:16px;background:var(--white);border-radius:var(--r-md);
  padding:14px 18px;box-shadow:var(--sh-2);max-width:280px;
}
.map__pin b{display:block;font-family:var(--display);font-weight:700;font-size:1rem}
.map__pin span{display:block;margin-top:5px;font-size:12.5px;color:var(--ink-soft)}
@media (max-width:640px){.map{aspect-ratio:4/3}}

/* ======================================================= 27 PARTENAIRES == */
.pt-tier{margin-top:clamp(20px,2.6vw,32px)}
.pt-tier>span{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-dk);margin-bottom:12px;
}
.pt-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.pt{
  background:var(--white);border:1px solid var(--sand-300);border-radius:var(--r-md);
  min-height:118px;display:grid;place-items:center;padding:18px 20px;text-align:center;
  font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-soft);line-height:1.4;
  transition:transform .44s var(--e),box-shadow .44s var(--e),border-color .35s,color .35s;
}
.pt:hover{transform:translateY(-5px) scale(1.02);box-shadow:var(--sh-2);border-color:var(--gold);color:var(--ink)}
/* Les emblèmes officiels restent en couleur ; l'animation porte sur la carte. */
.pt img{
  max-height:72px;max-width:100%;width:auto;object-fit:contain;
  transition:transform .5s var(--e);
}
.pt:hover img{transform:scale(1.05)}
.pt--royal{
  grid-column:1/-1;background:var(--ink);color:var(--sand-100);border-color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em;
}
.pt--royal:hover{color:var(--gold-lt)}

/* ======================================================== 28 ACTUALITÉS == */
.news{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(12px,1.6vw,18px)}
.art{
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--sand-300);
  border-radius:var(--r-lg);padding:clamp(20px,2.4vw,26px);
  transition:transform .48s var(--e),box-shadow .48s var(--e),border-color .4s;
}
.art:hover{transform:translateY(-7px);box-shadow:var(--sh-3);border-color:var(--ink)}
.art__k{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.art__cat{
  font-size:9.5px;font-weight:800;letter-spacing:.1em;background:var(--gold);
  color:var(--ink);border-radius:6px;padding:5px 9px;
}
.art__d{font-size:11.5px;font-weight:600;color:var(--ink-soft)}
.art h3{font-family:var(--display);font-weight:700;font-size:1.08rem;line-height:1.28;letter-spacing:-.015em}
.art p{margin-top:9px;font-size:13.4px;line-height:1.58;color:var(--ink-soft);flex:1}

/* ========================================================== 29 CONTACT === */
.ct{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(16px,2.4vw,26px)}
@media (max-width:900px){.ct{grid-template-columns:1fr}}
.ct__side{display:grid;gap:10px;align-content:start}
.ct__b{
  background:var(--white);border:1px solid var(--sand-300);border-radius:var(--r-lg);
  padding:clamp(18px,2.2vw,24px);
  transition:transform .44s var(--e),box-shadow .44s var(--e),border-color .35s;
}
.ct__b:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--gold)}
.ct__b span{
  display:block;font-size:10px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-dk);margin-bottom:9px;
}
.ct__b a,.ct__b p{display:block;font-size:14.5px;line-height:1.6;color:var(--ink);font-weight:500}
.ct__b a{transition:color .3s var(--e)}
.ct__b a:hover{color:var(--terra)}

/* ============================================================ 30 FOOTER == */
/* Pas de trame dans le pied de page : la couche faisait la taille exacte du
   footer alors que l'animation « drift » la décale de 212 px, ce qui laissait
   une bande nue sur un bord. Le vert profond se suffit à lui-même. */
.ft{background:var(--ink);color:var(--sand-100);margin-top:clamp(34px,5vw,64px);position:relative;overflow:hidden}
.ft__grid{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(22px,3vw,44px);padding:clamp(34px,4.6vw,58px) 0 clamp(26px,3vw,36px);
}
@media (max-width:900px){.ft__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft__grid{grid-template-columns:1fr}}
.ft__logo{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.ft__logo b{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em}
.ft__logo span{font-size:13px;font-weight:600;color:var(--gold-lt)}
.ft p{font-size:13.4px;line-height:1.68;color:rgba(242,237,225,.68)}
.ft h4{
  font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-lt);margin-bottom:14px;
}
.ft ul{display:grid;gap:9px}
.ft ul a{
  font-size:13.4px;color:rgba(242,237,225,.72);display:inline-block;
  transition:color .3s var(--e),transform .34s var(--e);
}
.ft ul a:hover{color:var(--sand-50);transform:translateX(4px)}
.ft__soc{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ft__soc a{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(242,237,225,.2);font-size:12px;font-weight:700;
  color:rgba(242,237,225,.78);
  transition:transform .4s var(--e),background .35s,border-color .35s,color .35s;
}
.ft__soc a:hover{transform:translateY(-4px) rotate(-6deg);background:var(--gold);border-color:var(--gold);color:var(--ink)}
.ft__news{display:flex;gap:8px;margin-top:14px}
.ft__news input{
  flex:1;min-width:0;background:rgba(242,237,225,.09);border:1px solid rgba(242,237,225,.2);
  border-radius:var(--r-sm);padding:12px 14px;font-size:14px;color:var(--sand-50);
  transition:border-color .35s,background .35s;
}
.ft__news input::placeholder{color:rgba(242,237,225,.42)}
.ft__news input:focus{outline:0;border-color:var(--gold);background:rgba(242,237,225,.14)}
.ft__news button{
  flex:0 0 auto;background:var(--gold);color:var(--ink);border:0;border-radius:var(--r-sm);
  padding:12px 18px;font-size:12px;font-weight:800;letter-spacing:.06em;cursor:pointer;
  transition:transform .4s var(--e),background .35s;
}
.ft__news button:hover{transform:translateY(-3px);background:var(--gold-lt)}
.ft__bot{
  position:relative;z-index:1;border-top:1px solid rgba(242,237,225,.14);
  padding:20px 0 calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-size:11.5px;color:rgba(242,237,225,.55);
}
@media (max-width:900px){.ft__bot{padding-bottom:calc(86px + env(safe-area-inset-bottom))}}

/* ═══════════════════════════════════════════════ 31 AJUSTEMENTS MOBILES ═══
   Placés en fin de feuille : ces règles visent des composants définis plus
   haut et doivent donc gagner la cascade à spécificité égale.              */
@media (max-width:640px){
  /* Onglets du programme : bande défilante horizontale, comme dans une app */
  .pg-tabs{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);padding-bottom:4px;
  }
  .pg-tabs::-webkit-scrollbar{display:none}
  .pg-tab{flex:0 0 auto;min-width:0;padding:12px 20px;scroll-snap-align:start}
  .pg-tab span{font-size:1rem;white-space:nowrap}

  /* Objectifs : deux colonnes, les textes sont courts */
  .goals{grid-template-columns:1fr 1fr;gap:8px}
  .goal{padding:16px 14px}
  .goal__n{font-size:1.6rem}
  .goal h3{font-size:.98rem}
  .goal p{font-size:12.4px;line-height:1.5}

  /* Chiffres : deux colonnes lisibles plutôt que six colonnes écrasées */
  .stats{grid-template-columns:1fr 1fr}

  /* Mur de partenaires : deux logos par ligne */
  .pt-wall{grid-template-columns:1fr 1fr;gap:8px}
  .pt{min-height:96px;padding:14px}
  .pt img{max-height:56px}
}

/* ══════════════════════════════════ 32 — ÉDITION FINALE ═══════════════════
   Reprises demandées : hero repris de l'affiche, sélecteur de langue,
   intervenants avec portrait, carte encadrée, patronage royal, réseaux
   sociaux visibles, bouton calendrier.
   ========================================================================= */

/* ---------------------------------------------------- sélecteur de langue */
.lang{display:flex;gap:2px;background:var(--sand-100);border:1px solid var(--sand-300);
  border-radius:100px;padding:3px;flex:0 0 auto}
.lang__b{
  border:0;background:transparent;cursor:pointer;border-radius:100px;
  padding:7px 12px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:var(--ink-soft);transition:background .3s var(--e),color .3s var(--e);
}
.lang__b:hover:not(:disabled){background:var(--white);color:var(--ink)}
.lang__b.is-on{background:var(--ink);color:var(--sand-50)}
.lang__b:disabled{opacity:.38;cursor:not-allowed}

/* ------------------------------------------------------- hero « affiche » */
/* Le bloc central de l'affiche est repris tel quel, centré sur la page.    */
/* Le bloc tient dans un écran : dates et boutons restent au-dessus de la ligne
   de flottaison sur un portable comme sur un grand écran. */
.hero{text-align:center;padding-block:clamp(14px,2.4vh,30px) clamp(30px,5vw,60px)}
.hero__patronage{
  font-size:clamp(10.5px,.92vw,12.5px);font-weight:600;letter-spacing:.06em;
  color:var(--ink-soft);max-width:56ch;margin-inline:auto;
}
.hero__lockup{margin:clamp(10px,1.8vh,20px) auto 0;width:clamp(250px,38vw,430px);max-width:100%}
.hero__lockup img{width:100%;height:auto}
.hero__theme{
  margin:clamp(10px,1.6vh,18px) auto 0;max-width:38ch;
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1rem,1.55vw,1.28rem);line-height:1.32;color:var(--ink-2);
}
.hero .days{margin-top:clamp(16px,2.4vh,26px)}
.hero .hero__cta{margin-top:clamp(18px,2.6vh,28px)}
.hero .days{justify-content:center}
.hero__place{justify-content:center}
.hero .hero__cta{justify-content:center}

/* thème répété sous le titre de la section À propos */
.sec__theme{
  margin-top:14px;font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1.02rem,1.55vw,1.3rem);line-height:1.36;color:var(--gold-dk);
  max-width:46ch;
}
.lead-p{max-width:62ch;color:var(--ink-soft);font-size:15px;line-height:1.7;margin-bottom:24px}
.mt-lg{margin-top:clamp(22px,3vw,36px)}

/* --------------------------------------------------- bouton « calendrier » */
.btn--cal{background:var(--white);color:var(--ink);border-color:var(--sand-400)}
.btn--cal::before{background:var(--gold)}
.btn--cal:hover{color:var(--ink);border-color:var(--gold)}
.btn--cal svg{width:16px;height:16px}
.btn--cal.is-done::before{transform:translateY(0)}

/* ------------------------------------------------ programme (contenu réel) */
.slot{grid-template-columns:96px 1fr}
.slot__t{font-size:15px}
@media (max-width:640px){.slot{grid-template-columns:1fr}}

/* ------------------------------------------------------- carte + itinéraire */
/* Encadrement inspiré des bordures de zellige : double filet et coins dorés. */
.map-wrap{
  position:relative;padding:clamp(9px,1.1vw,14px);
  border:1px solid var(--sand-300);border-radius:calc(var(--r-lg) + 10px);
  background:linear-gradient(180deg,var(--white),var(--sand-50));
  box-shadow:var(--sh-1);
}
.map-wrap::before{
  content:"";position:absolute;inset:5px;border-radius:calc(var(--r-lg) + 5px);
  border:1px dashed rgba(192,150,60,.45);pointer-events:none;
}
.map-wrap::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(var(--gold),var(--gold)) left 14px top -1px/58px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 14px bottom -1px/58px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left -1px top 14px/2px 58px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right -1px bottom 14px/2px 58px no-repeat;
}
.map{margin-top:0;border-radius:var(--r-lg)}
.map__go{
  position:absolute;z-index:3;right:clamp(14px,1.8vw,22px);bottom:clamp(14px,1.8vw,22px);
  padding:13px 22px;font-size:13px;
}
.map__go svg{width:15px;height:15px}
@media (max-width:560px){
  .map__go{left:clamp(14px,1.8vw,22px);right:auto;justify-content:center;width:auto}
  .map__pin{max-width:calc(100% - 32px)}
}

/* ------------------------------------------------------- patronage royal  */
.royal{
  position:relative;overflow:hidden;text-align:center;
  background:var(--ink);color:var(--sand-50);
  border-radius:var(--r-xl);padding:clamp(30px,4.4vw,58px) clamp(22px,3vw,44px);
  box-shadow:var(--sh-2);margin-bottom:clamp(22px,3vw,34px);
}
.royal::before{
  content:"";position:absolute;inset:0;opacity:.14;
  background:url("../img/mosaic-tile.svg") repeat;background-size:190px;
}
.royal::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(16px,2vw,24px);width:clamp(90px,14vw,190px);height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.royal>*{position:relative;z-index:1}
.royal span{
  display:block;font-size:clamp(10px,.85vw,12px);font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:14px;
}
.royal b{
  display:block;font-family:var(--display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.5rem,4.1vw,3.1rem);line-height:1.1;
}
.royal em{
  display:block;margin-top:12px;margin-bottom:clamp(14px,2vw,22px);font-style:italic;
  font-family:var(--display);font-size:clamp(1rem,1.6vw,1.32rem);color:rgba(242,237,225,.8);
}

/* -------------------------------------------- réseaux sociaux (fond clair) */
/* Ils étaient en ivoire, donc invisibles hors survol sur les cartes claires. */
.soc{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.soc a{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  border:1px solid var(--sand-300);background:var(--sand-50);color:var(--ink);
  transition:transform .4s var(--e),background .35s var(--e),color .35s var(--e),border-color .35s;
}
.soc a svg{width:19px;height:19px}
.soc a:hover{transform:translateY(-4px) rotate(-6deg);background:var(--ink);color:var(--gold-lt);border-color:var(--ink)}
.ft__soc a svg{width:18px;height:18px}
.ft__soc a{color:rgba(242,237,225,.82)}

/* les formules de pass ont été retirées */
.pass,.pass-grid,.pass__flag,.pass__price,.pass__note{display:none!important}

/* ─────────────────────── barre haute : place pour le sélecteur de langue ── */
@media (max-width:900px){
  /* « Participer » reste accessible via la barre d'onglets du bas :
     on libère la place en haut plutôt que de tout comprimer. */
  .pill-state{display:none}
  .lang{padding:2px;margin-left:auto}   /* pousse langue + menu vers la droite */
  .lang__b{padding:6px 9px;font-size:10.5px}
}
@media (max-width:420px){
  .brand b{font-size:16px}
  .brand span{font-size:9.5px}
  .lang__b{padding:6px 7px;font-size:10px;letter-spacing:0}
  .top__in{gap:7px;padding:7px 7px 7px 13px}
}

/* ───────────────── logo : le « FITAM 2026 » doré repris de l'affiche ────── */
.brand{display:flex;align-items:center;gap:0}
.brand img{
  height:clamp(23px,2.5vw,34px);width:auto;display:block;
  transition:transform .45s var(--e);
}
.brand:hover img{transform:scale(1.05)}
.ft__logo{display:block;margin-bottom:18px}
.ft__logo img{height:clamp(30px,3.4vw,42px);width:auto}

/* ───────────────── respiration au-dessus du cadre de la carte ──────────── */
.map-wrap{margin-top:clamp(26px,4vw,52px)}

/* ═════════════ 33 — HERO : texte à gauche, la porte en carte à droite ═════
   Mobile : bloc centré, sans image — inchangé.
   Desktop : deux colonnes. La carte reprend le style du premier hero — coins
   arrondis, léger désaxement, ombre portée, filet intérieur, réactions au
   survol — mais n'accueille qu'une seule image.
   ======================================================================== */
.hero__grid{display:block}
.hero__art{display:none;margin:0}

/* ---- HERO À DEUX COLONNES — DÉSACTIVÉ ----------------------------------
   Le hero est revenu à sa version centrée, sans la photo de Bab Mansour.
   Le balisage de la carte est intact dans les trois index.html : pour
   remettre les deux colonnes, il suffit de décommenter ce bloc, celui du
   .lockup et celui du .hero__sub-en plus bas, ainsi que le bloc jumeau en
   fin de rtl.css.

@media (min-width:1000px){
  .hero{text-align:start;padding-block:clamp(14px,2.4vh,32px) clamp(30px,4.2vw,58px)}
  .hero__grid{
    display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:clamp(26px,3.6vw,58px);align-items:center;
  }
  .hero__col{min-width:0}

  .hero__patronage{margin-inline:0;max-width:44ch}
  .hero__lockup{margin-inline:0;width:clamp(265px,25vw,365px);margin-top:clamp(6px,1.1vh,13px)}
  .hero__theme{margin-inline:0;max-width:34ch;margin-top:clamp(6px,1vh,12px)}
  .hero .days{margin-top:clamp(10px,1.5vh,17px);justify-content:flex-start}
  .hero__place{margin-top:13px;justify-content:flex-start}
  .hero .hero__cta{margin-top:clamp(11px,1.6vh,18px);justify-content:flex-start}

  .hero__art{display:block;min-width:0}
  .hero__art .stack{position:relative;aspect-ratio:auto;perspective:1400px}
}
   ---- fin du bloc désactivé -------------------------------------------- */

/* ---- la carte : une seule image, style du premier hero ------------------ */
.card-ph--solo{
  position:relative;inset:auto;z-index:1;
  aspect-ratio:4/3.05;transform:rotate(-2deg);
  /* Le PNG est un détourage : la carte lui donne un ciel, sinon la porte
     flotterait sur du vide au lieu de remplir le cadre. */
  background:linear-gradient(178deg,
    #FBF8F2 0%, #F6F0E4 34%, #F0E7D6 64%, #E9DEC8 100%);
}
/* trame très pâle par-dessus le dégradé, pour rappeler le fond du site */
.card-ph--solo::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../img/mosaic-tile.svg") repeat center/175px;
  opacity:.30;
}
.card-ph--solo picture{position:relative;z-index:1;display:block;width:100%;height:100%}
.card-ph--solo img{
  width:100%;height:100%;
  /* « cover » plutôt que « contain » : le cadrage se resserre sur la porte
     au lieu de laisser deux bandes vides sur les côtés. */
  object-fit:cover;object-position:64% bottom;
  transform-origin:64% bottom;
}
.card-ph--solo:hover{transform:rotate(-3.2deg) translateY(-6px) scale(1.012)}
.card-ph--solo:hover img{transform:scale(1.05)}

/* Désactivé avec le hero à deux colonnes.
@media (min-width:1400px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
*/
@media (prefers-reduced-motion:reduce){
  .card-ph--solo,.card-ph--solo img{transition:none}
}

/* --------------------------------------------------------- pages légales */
.legal{padding-block:clamp(30px,5vw,64px) clamp(50px,7vw,96px)}
.legal__head{margin-bottom:clamp(26px,3.4vw,44px)}
.legal__head h1{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.04;
}
.legal__head p{margin-top:12px;color:var(--ink-soft);font-size:14.5px}
.legal__body{
  background:var(--white);border:1px solid var(--sand-300);border-radius:var(--r-xl);
  padding:clamp(24px,3.6vw,52px);box-shadow:var(--sh-1);max-width:82ch;
}
.legal__body h2{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.16rem,1.9vw,1.5rem);line-height:1.2;
  margin-top:clamp(26px,3vw,38px);padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--sand-200);
}
.legal__body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal__body p,.legal__body li{font-size:15px;line-height:1.75;color:var(--ink-soft)}
.legal__body p{margin-top:12px}
.legal__body ul{margin-top:12px;display:grid;gap:8px}
.legal__body li{position:relative;padding-left:20px}
.legal__body li::before{
  content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--gold);
}
.legal__body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal__body a:hover{color:var(--terra)}
.legal__body strong{color:var(--ink);font-weight:700}
.legal__todo{
  margin-top:14px;background:rgba(192,150,60,.10);border:1px dashed var(--gold);
  border-radius:var(--r-md);padding:14px 18px;font-size:13.5px;color:var(--gold-dk);
}
.legal__back{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);
  transition:color .3s var(--e),transform .35s var(--e);
}
.legal__back:hover{color:var(--ink);transform:translateX(-3px)}
.ft__bot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ft__bot a:hover{color:var(--sand-50)}

/* ════════════ 34 — CARTOUCHE DU HAUT-PATRONAGE ═══════════════════════════
   C'est la mention protocolaire la plus importante de la page. L'affiche la
   traite en bandeau vert : on reprend ce registre, en cartouche, pour qu'elle
   ne se lise plus comme une note de bas de page.
   ======================================================================== */
/* Un simple filet, pas un aplat : la mention royale se pose sur le fond de
   sable comme un cartouche gravé. Le vert plein la faisait lire comme un
   bouton, et sa trame propre doublait celle de la page derrière. */
.hero__patronage{
  display:inline-flex;align-items:center;gap:clamp(9px,1vw,13px);
  background:transparent;color:var(--ink);
  border:1px solid var(--gold);
  border-radius:clamp(16px,1.6vw,20px);
  padding:clamp(11px,1.2vw,15px) clamp(17px,1.8vw,26px);
  font-family:var(--display);font-weight:600;
  font-size:clamp(13px,1.32vw,17px);line-height:1.36;letter-spacing:.008em;
  max-width:none;text-align:center;text-wrap:balance;
  box-shadow:none;
  position:relative;
  transition:border-color .5s var(--e),color .5s var(--e);
}
.hero__patronage:hover{border-color:var(--gold-dk);color:var(--ink-2)}

@media (max-width:620px){
  .hero__patronage{padding:12px 15px;font-size:12.6px}
}

/* ═══════════════════════ 35 — PIED DE PAGE : REPRISES ════════════════════ */

/* Les lignes sans lien héritaient de la taille du corps de page : elles
   ressortaient plus grosses et plus claires que les liens voisins. */
.ft ul li{
  font-size:13.4px;line-height:1.6;color:rgba(242,237,225,.72);
}
.ft ul a{font-size:inherit;color:inherit}

/* Colonnes plus régulières et respiration accrue sur grand écran */
@media (min-width:1000px){
  .ft__grid{
    grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.15fr);
    gap:clamp(28px,3.6vw,64px);
    padding-block:clamp(44px,5.4vw,74px) clamp(30px,3.4vw,42px);
  }
  .ft__grid>div{min-width:0}
}

.ft h4{margin-bottom:16px}
.ft__brand-txt,.ft>.wrap .ft__grid p{max-width:42ch}

/* Newsletter : le champ et le bouton se serraient l'un contre l'autre */
.ft__news{margin-top:16px;gap:9px;flex-wrap:wrap}
.ft__news input{flex:1 1 150px;padding:13px 15px}
.ft__news button{flex:0 0 auto;padding:13px 20px;white-space:nowrap}

/* Bas de page : les mentions passent à droite, séparées du copyright */
.ft__bot{
  padding-block:clamp(20px,2.4vw,26px);
  gap:10px clamp(20px,3vw,40px);align-items:center;
}
.ft__bot span:last-child{margin-left:auto;text-align:right}
@media (max-width:700px){
  .ft__bot span:last-child{margin-left:0;text-align:left}
}

/* Le sélecteur de langue mêle boutons, liens et libellé actif :
   ils doivent tous se présenter de la même façon. */
.lang__b{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;font-family:inherit;
}
a.lang__b:hover{background:var(--white);color:var(--ink)}
span.lang__b.is-on{background:var(--ink);color:var(--sand-50)}

/* ═══════ 36 — HIÉRARCHIE PARTENAIRES / SPONSORS ══════════════════════════
   Les partenaires portent le forum, les sponsors le soutiennent. La
   différence doit se voir sans lire : cartes plus grandes, bordure dorée et
   logos plus présents d'un côté ; grille plus dense et plus sobre de l'autre.
   ======================================================================== */
.pt-tier>span{display:block}


/* ---- palier principal : les partenaires -------------------------------- */
.pt-tier--main>span{color:var(--ink);font-size:12px;letter-spacing:.16em}
.pt-tier--main>span::after{
  content:"";display:inline-block;vertical-align:middle;
  width:clamp(26px,3vw,54px);height:2px;margin-inline-start:12px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.pt-tier--main .pt-wall{grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.pt-tier--main .pt{
  min-height:150px;padding:24px;
  border:1.5px solid var(--sand-400);
  box-shadow:var(--sh-2);
  background:linear-gradient(180deg,var(--white) 0%,var(--sand-50) 100%);
}
.pt-tier--main .pt::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e);
}
.pt-tier--main .pt:hover{border-color:var(--gold);box-shadow:var(--sh-3)}
.pt-tier--main .pt:hover::after{transform:scaleX(1)}
.pt-tier--main .pt img{max-height:92px}

/* Sur grand écran, les partenaires se rangent en 3 par 3 : ils sont neuf, la
   grille tombe donc juste, et des cartes larges les distinguent encore mieux
   du mur dense des sponsors. */
@media (min-width:641px){
  .pt-tier--main .pt-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
  .pt-tier--main .pt{min-height:clamp(150px,14vw,186px)}
  .pt-tier--main .pt img{max-height:clamp(92px,8.6vw,112px)}
}

/* ---- palier secondaire : les sponsors ---------------------------------- */
.pt-tier--sec{margin-top:clamp(30px,4vw,52px)}
.pt-tier--sec>span{color:var(--ink-soft);font-size:10.5px;letter-spacing:.18em}
.pt-tier--sec .pt-wall{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:8px}
.pt-tier--sec .pt{
  min-height:96px;padding:14px 16px;
  border:1px solid var(--sand-300);background:var(--white);box-shadow:none;
}
.pt-tier--sec .pt:hover{box-shadow:var(--sh-1);border-color:var(--sand-400)}
/* Le plafond de hauteur ne borne que les logos verticaux — les logos en
   bandeau sont déjà bornés par la largeur. « Airports of Morocco », qui est
   un bloc empilé, restait deux fois plus petit que ses voisins. */
.pt-tier--sec .pt img{max-height:68px;opacity:.9}
.pt-tier--sec .pt:hover img{opacity:1}

@media (max-width:640px){
  .pt-tier--main .pt-wall{grid-template-columns:1fr 1fr;gap:9px}
  .pt-tier--main .pt{min-height:118px;padding:16px}
  .pt-tier--main .pt img{max-height:66px}
  .pt-tier--sec .pt-wall{grid-template-columns:1fr 1fr 1fr;gap:7px}
  .pt-tier--sec .pt{min-height:76px;padding:11px}
  .pt-tier--sec .pt img{max-height:40px}
}

/* Le visuel du hero est l'artwork de l'affiche, donc en français : sur la
   page anglaise, une ligne discrète en donne le sens sans toucher à l'identité. */
.hero__sub-en{
  margin:clamp(8px,1.3vh,14px) auto 0;max-width:44ch;
  font-size:clamp(11.5px,1.02vw,13.5px);font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gold-dk);
}
/* @media (min-width:1000px){.hero__sub-en{margin-inline:0}} */

/* ═══════════ 37 — LOCKUP COMPOSÉ (versions traduites du visuel) ═══════════
   Le visuel de l'affiche est une image, donc intraduisible. On le recompose :
   le « 7 » doré découpé de l'affiche, les lignes de texte dans la police de
   la langue, et le logo FITAM 2026. Même mise en page, contenu traduisible.
   ======================================================================== */
.lockup{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "seven text"
    "line3 line3"
    "logo  logo";
  column-gap:clamp(6px,.9vw,12px);
  align-items:end;justify-items:start;
  width:fit-content;
  /* Même respiration que le visuel français sous le cartouche royal. */
  margin:clamp(10px,1.8vh,20px) auto 0;
}
/* Le 7 est calibré sur la hauteur des deux lignes qu'il accompagne, avec le
   même léger débord de queue que sur l'affiche. Plus grand, il décrochait du
   texte et repoussait « International » loin en dessous. */
.lockup__7{
  grid-area:seven;align-self:start;
  width:clamp(58px,7.2vw,84px);height:auto;
}
/* Les deux premières lignes vivent dans UNE seule cellule, calées en haut,
   comme sur l'affiche. Avec deux rangées de grille, la hauteur du 7 se
   répartissait entre elles et creusait un vide au milieu du bloc. */
.lockup__t{
  grid-area:text;align-self:start;
  display:flex;flex-direction:column;
  padding-top:clamp(2px,.5vh,7px);
}
.lockup__l1{
  font-family:var(--display);font-weight:500;font-style:italic;
  font-size:clamp(1.15rem,2.5vw,2.05rem);line-height:1;color:var(--ink);
  letter-spacing:-.005em;
}
.lockup__l2{
  font-family:var(--display);font-weight:500;font-style:italic;
  font-size:clamp(2.5rem,5.6vw,4.6rem);line-height:.92;color:var(--ink);
  letter-spacing:-.02em;
}
.lockup__l3{
  grid-area:line3;
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.2rem,2.6vw,2.15rem);line-height:1.14;color:var(--ink);
  letter-spacing:-.008em;margin-top:.16em;
}
.lockup__logo{
  grid-area:logo;width:clamp(180px,26vw,330px);height:auto;
  margin-top:clamp(6px,1vh,14px);
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Désactivé avec le hero à deux colonnes : le bloc-titre reste centré.
@media (min-width:1000px){.lockup{margin-inline:0;margin-top:clamp(6px,1.1vh,13px)}} */

/* En arabe le bloc se lit de droite à gauche : le « 7 » passe à droite tout
   seul, la grille étant décrite en axes logiques (« start » = le bord de
   début de lecture). Forcer « end » ici décollait le texte du 7. */
[dir="rtl"] .lockup__l1,[dir="rtl"] .lockup__l2{font-style:normal}
[dir="rtl"] .lockup__l2{font-weight:700}

/* ═══════════════ 38 — BOUTON WHATSAPP FLOTTANT ══════════════════════════
   Un lien simple, sans JavaScript : il fonctionne même si le script ne se
   charge pas. Replié c'est un cercle ; au survol il s'ouvre en pastille et
   laisse apparaître son libellé.
   ======================================================================== */
.wa{
  --wa-s:clamp(52px,4.4vw,58px);
  position:fixed;z-index:65;
  right:clamp(16px,2.2vw,28px);
  bottom:clamp(16px,2.2vw,28px);
  display:flex;align-items:center;
  height:var(--wa-s);min-width:var(--wa-s);
  /* Le glyphe fait 26 px. Le « -1px » compense le filet : sans lui, le
     contenu dépassait la largeur minimale et le cercle devenait ovale. */
  padding-inline:calc((var(--wa-s) - 26px) / 2 - 1px);
  border-radius:999px;
  background:var(--ink);color:var(--sand-50);
  border:1px solid rgba(192,150,60,.45);
  box-shadow:0 10px 26px rgba(20,48,31,.26);
  text-decoration:none;
  transition:transform .45s var(--e),box-shadow .45s var(--e),
             background .35s var(--e),border-color .35s var(--e);
}
.wa__ic{flex:0 0 26px;width:26px;height:26px;display:grid;place-items:center}
.wa__ic svg{width:26px;height:26px;fill:currentColor}
.wa__t{
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  font-family:var(--ui);font-size:13.5px;font-weight:700;letter-spacing:.02em;
  transition:max-width .45s var(--e),opacity .3s var(--e),margin .45s var(--e);
}
.wa:hover,.wa:focus-visible{
  background:var(--ink-2);border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(20,48,31,.34);
}
.wa:hover .wa__t,.wa:focus-visible .wa__t{
  max-width:130px;opacity:1;margin-inline-start:11px;
}
.wa:active{transform:translateY(-1px)}

/* La barre d'onglets occupe le bas de l'écran sous 900 px, mais elle est
   centrée et plafonnée à 420 px : les deux ne se gênent qu'en dessous de
   ~592 px de large. On ne relève donc le bouton que là. */
@media (max-width:620px){
  .wa{bottom:calc(88px + env(safe-area-inset-bottom));right:14px}
  .wa__t{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wa,.wa__t{transition:none}
  .wa:hover,.wa:focus-visible{transform:none}
}

/* ═══════════ 39 — « SIGNAL » DU BOUTON PRINCIPAL DU HERO ═════════════════
   Un reflet traverse le bouton, puis s'efface pendant trois secondes avant de
   repasser. Le balayage est porté par ::after (::before sert déjà au
   remplissage au survol) et passe au-dessus du libellé, comme un vrai reflet.
   ======================================================================== */
.btn--signal::after{
  content:"";position:absolute;inset:0;z-index:3;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(104deg,
    transparent 30%,
    rgba(255,255,255,.20) 42%,
    rgba(223,182,97,.62) 50%,
    rgba(255,255,255,.20) 58%,
    transparent 70%);
  transform:translateX(-140%);
  animation:signal 4.8s ease-in-out infinite;
}
/* 0 → 28 % : le reflet traverse en 1,3 s. Le reste du cycle, il attend hors
   champ : c'est ce silence qui fait « signal » plutôt que « clignotant ». */
@keyframes signal{
  0%   {transform:translateX(-140%)}
  28%  {transform:translateX(140%)}
  100% {transform:translateX(140%)}
}
/* Au survol, le remplissage terracotta prend le relais : le reflet s'efface
   pour ne pas brouiller la lecture. */
.btn--signal:hover::after,
.btn--signal:focus-visible::after{animation-play-state:paused;opacity:0;transition:opacity .3s var(--e)}

/* Quand le système demande de réduire les animations, on ne supprime pas le
   signal : on remplace le déplacement par une lueur qui monte et redescend
   sur place. C'est le mouvement qui gêne, pas la variation d'opacité. */
@keyframes signal-lueur{
  0%,66%,100%{opacity:0}
  18%,38%{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .btn--signal::after{
    /* La lueur passe SOUS le libellé (le balayage, lui, passe au-dessus :
       un reflet traverse la surface, une lueur vient de dessous). */
    z-index:0;transform:none;opacity:0;
    background:radial-gradient(130% 165% at 50% 50%,rgba(223,182,97,.62),rgba(223,182,97,.22) 58%,transparent 80%);
    animation:signal-lueur 4.8s ease-in-out infinite;
  }
}