:root{--encre:#000;--craie:#F6F3EC;--cendre:#9E988C;--cinabre:#FF3B0B;--trait:#2A2A2A;
  --trait-fort:#4A4A4A}

*{box-sizing:border-box;margin:0;padding:0}

body{background:var(--encre);color:var(--craie);
  font:400 16px/1.6 'Plus Jakarta Sans',system-ui,sans-serif}

[id]{scroll-margin-top:96px}

.evitement{position:absolute;left:-9999px;top:0;z-index:70;background:var(--cinabre);
  color:#000;padding:12px 18px;font:700 13px/1 'Plus Jakarta Sans',sans-serif}

.evitement:focus{left:12px;top:12px}

:focus-visible{outline:2px solid var(--cinabre);outline-offset:3px}

.page{position:relative;z-index:1}


/* ---------- barre : variante Pastille ----------
   A l'arret, une barre pleine centree. Des 50 px de defilement elle se retracte
   en pastille : monogramme et bouton reduit a son icone. La navigation reste a
   un clic sans jamais occuper la largeur pendant la lecture. */
.coque-barre{position:fixed;top:20px;left:0;right:0;z-index:30;display:flex;
  justify-content:center;pointer-events:none}

/* Trois colonnes : la marque a gauche, la navigation au centre exact, l'action
   a droite. En flex simple la nav se centrait dans l'espace restant, donc
   decalee de la demi-difference entre le logo et le bouton. */
.barre{pointer-events:auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:22px;
  width:min(96%,1500px);padding:11px 18px;border-radius:999px;
  background:rgba(10,10,10,.70);border:1px solid rgba(246,243,236,.12);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:width .42s cubic-bezier(.4,0,.2,1),padding .42s,gap .3s,background .3s}

.barre.compact{width:auto;padding:9px 12px;gap:14px;background:rgba(10,10,10,.82);
  grid-template-columns:auto auto auto}

/* Retractee, la pastille n'offre plus aucun acces aux rubriques : sur la planche
   de demonstration c'etait sans consequence, sur un vrai site c'est perdre la
   navigation des 50 px de defilement. Elle se redeploie donc au survol et des
   qu'un element de la barre prend le focus, ce qui couvre aussi le clavier.
   Le tactile, lui, passe par le burger. */
.barre.compact:focus-within{width:min(96%,1500px);padding:11px 18px;gap:22px;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}

.barre.compact:focus-within .liens{max-width:1120px;opacity:1;overflow:visible;
  transition:max-width .42s cubic-bezier(.4,0,.2,1),opacity .24s,overflow 0s .42s}

.barre.compact:focus-within .marque.plein{display:block}

.barre.compact:focus-within .marque.mono{display:none}

.barre.compact:focus-within .bouton{padding:0 20px 0 46px;width:auto;height:44px}

.barre.compact:focus-within .bouton .picto{display:none}

.barre.compact:focus-within .bouton .galet,
.barre.compact:focus-within .bouton .fleche{display:block}

.barre.compact:focus-within .bouton .intitule{display:inline}

/* Le survol est reserve aux vrais pointeurs : sur ecran tactile un appui laisse
   l'element en :hover jusqu'au suivant, et la barre restait deployee apres chaque
   appui sur le burger. Le tactile passe par le burger. */
@media (hover:hover) and (pointer:fine){
  .barre.compact:hover{width:min(96%,1500px);padding:11px 18px;gap:22px;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .barre.compact:hover .liens{max-width:1120px;opacity:1;overflow:visible;
    transition:max-width .42s cubic-bezier(.4,0,.2,1),opacity .24s,overflow 0s .42s}
  .barre.compact:hover .marque.plein{display:block}
  .barre.compact:hover .marque.mono{display:none}
  .barre.compact:hover .bouton{padding:0 20px 0 46px;width:auto;height:44px}
  .barre.compact:hover .bouton .picto{display:none}
  .barre.compact:hover .bouton .galet,
  .barre.compact:hover .bouton .fleche{display:block}
  .barre.compact:hover .bouton .intitule{display:inline}
}

/* La marque ramene a l'accueil. Enfant direct de .gauche, donc elle reprend
   le flex:none que portaient les deux marques. */
.vers-accueil{flex:none;color:inherit;text-decoration:none;display:block}

.marque{font:400 17px/1 'Archivo Black',sans-serif;letter-spacing:-.045em;
  text-transform:uppercase;white-space:nowrap;flex:none}

.marque span{color:var(--cinabre)}

.marque.mono{display:none}

.barre.compact .marque.plein{display:none}

.barre.compact .marque.mono{display:block}

.liens{display:flex;flex-wrap:nowrap;gap:22px;justify-content:center;align-items:center;
  overflow:visible;max-width:1120px;justify-self:center;
  transition:max-width .42s cubic-bezier(.4,0,.2,1),opacity .24s}

.barre.compact .liens{max-width:0;opacity:0;overflow:hidden}

.liens>a,.liens .declencheur{color:var(--craie);text-decoration:none;font-size:14px;opacity:.82;
  white-space:nowrap;background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;display:inline-flex;align-items:center;gap:6px}

.liens>a:hover,.liens .declencheur:hover,.liens .hote:hover .declencheur{opacity:1;color:var(--cinabre)}

/* Mention « gratuit » du menu Outils, en exposant. L'aplat plein de la version
   precedente pesait 74 px dans une rangee qui n'en avait pas a donner. Ici le
   fond disparait et il ne reste que le signal : police d'affichage (Archivo
   Black) la ou le menu est en Plus Jakarta Sans, cinabre la ou tout est en
   craie, et une position haute qui la detache de la ligne de base. Deux
   ruptures sur trois axes pour 40 px au lieu de 74.
   10 px : sous le plancher de 12 px de la charte, assume pour un exposant qui
   n'est pas du texte courant. Pas d'animation, la barre est un calque fixe. */
.marqueur{font:400 10px/1 'Archivo Black',sans-serif;font-style:normal;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cinabre);
  background:none;padding:0;margin-left:3px;align-self:flex-start;
  display:inline-block;flex:none;transform:translateY(-4px);
  transition:color .2s,text-shadow .2s}

/* Au survol elle s'allume au lieu de changer de place. */
.hote:hover .marqueur,.declencheur:focus-visible .marqueur,
.hote[data-ouvert="1"] .marqueur{color:#FF6A3D;
  text-shadow:0 0 12px rgba(255,59,11,.55)}

/* chevron du menu deroulant */
.chev{width:7px;height:7px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .25s}

.hote[data-ouvert="1"] .chev{transform:rotate(-135deg) translateY(-2px)}


/* ---------- tiroir Etudes de cas ---------- */
.hote{position:relative;display:inline-flex;align-items:center}

.tiroir{position:absolute;top:calc(100% + 18px);left:50%;
  /* --decal : correction laterale posee par le script a l'ouverture, pour
     qu'un panneau centre sur un declencheur proche du bord ne sorte pas de
     la fenetre. Zero par defaut, donc le centrage reste la regle. */
  transform:translateX(calc(-50% + var(--decal,0px))) translateY(-6px);
  width:min(760px,86vw);padding:14px;border-radius:22px;
  background:rgba(8,8,8,.94);border:1px solid rgba(246,243,236,.12);
  box-shadow:0 30px 70px rgba(0,0,0,.62);
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  opacity:0;visibility:hidden;pointer-events:none;
  /* visibility bascule apres le fondu a la fermeture, et sans delai a
     l'ouverture : transitionner visibility tout court la laisse a hidden
     pendant toute la duree, le panneau apparait alors en retard. */
  transition:opacity .22s ease,transform .26s cubic-bezier(.2,.7,.2,1),
             visibility 0s linear .22s}

.hote[data-ouvert="1"] .tiroir{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(calc(-50% + var(--decal,0px))) translateY(0);transition-delay:0s}

/* la zone morte entre la barre et le tiroir, sinon il se ferme en descendant */
.tiroir::before{content:'';position:absolute;left:0;right:0;top:-20px;height:20px}

.cas{display:block;padding:14px;border-radius:14px;text-decoration:none;color:var(--craie);
  background:rgba(246,243,236,.035);border:1px solid rgba(246,243,236,.07);
  transition:background .2s,border-color .2s,transform .2s}

.cas:hover{background:rgba(255,59,11,.09);border-color:rgba(255,59,11,.34);transform:translateY(-2px)}

.cas .secteur{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinabre);
  display:block;margin-bottom:9px}

.cas .nomcas{font:400 17px/1.15 'Archivo Black',sans-serif;letter-spacing:-.03em;
  text-transform:uppercase;display:block;margin-bottom:8px}

.cas .resume{font-size:13px;line-height:1.45;color:var(--cendre);display:block}

.cas .gain{display:block;margin-top:11px;padding-top:11px;border-top:1px solid rgba(246,243,236,.09);
  font-size:12px;color:var(--craie);opacity:.9}

/* ---------- mention de provenance, a cote du menu ----------
   « Depuis Marseille » : la ville du visiteur, deduite cote serveur sur un
   index local (aucune adresse IP ne part chez un tiers).

   Trois decisions de forme, toutes contraintes par la barre :

   1. Au repos la pastille ne porte que le point et le nom de la ville, soit
      une centaine de pixels. La phrase complete vit dans un tiroir, comme les
      rubriques du menu : c'est deja le langage de cette barre, et une phrase
      de soixante caracteres n'avait aucune place dans une rangee qui s'est
      deja battue pour l'exposant « gratuit ».
   2. Aucune animation permanente. Un point qui clignote en boucle est tentant
      pour dire « en ligne », mais la barre est un calque fixe : tout ce qui y
      bat est recompose a chaque image de defilement. L'apparition joue une
      fois, a l'arrivee de la donnee, et plus rien ensuite.
   3. Le mot « depuis » porte tout le sens. Sans lui, un nom de ville dans une
      barre se lit comme l'adresse de l'agence, pas comme la provenance du
      visiteur. */
/* justify-self:stretch et non start : cale sur start, le conteneur prend sa
   taille naturelle et deborde la piste sans jamais etre contraint par elle,
   donc l'ellipse du nom de ville ne se declenchait jamais. Etire, il est
   borne par la piste, et la compression descend jusqu'au nom. */
.gauche{grid-column:1;justify-self:stretch;display:flex;align-items:center;
  min-width:0;max-width:100%}

.lieu{position:relative;display:inline-flex;align-items:center;flex:none}

/* Masquee jusqu'a l'arrivee de la donnee, et definitivement si la ville est
   introuvable : mieux vaut aucune mention qu'un gabarit vide ou une
   approximation. La largeur s'ouvre en meme temps que l'opacite, sinon la
   rangee de liens se decale d'un bloc quand la reponse arrive.

   L'ouverture porte sur le bouton et non sur l'hote : un overflow:hidden pose
   sur .lieu clippait le tiroir, qui est son enfant absolu, et le panneau
   n'apparaissait jamais en entier. */
.lieu[hidden]{display:none}

.lieu{min-width:0;flex:0 1 auto;opacity:0;margin-left:14px;
  transition:opacity .4s ease .1s,margin-left .42s cubic-bezier(.4,0,.2,1)}

.lieu.vu{opacity:1}

.lieu .declencheur{display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:4px 2px;margin:0;cursor:pointer;
  font-family:inherit;font-size:12.5px;letter-spacing:-.005em;color:var(--cendre);
  white-space:nowrap;max-width:0;overflow:hidden;min-width:0;
  transition:color .2s,max-width .5s cubic-bezier(.4,0,.2,1),padding .42s}

.lieu.vu .declencheur{max-width:220px}

.lieu .declencheur:hover,.lieu[data-ouvert="1"] .declencheur{color:var(--craie)}

/* Un nom de ville a rallonge ne doit pas pousser la rangee de liens. Mesure :
   « Villeneuve-d'Ascq » debordait de 2 px des 1600 px de large et de 38 px a
   1024. Le nom est le seul element de la mention qui a le droit de retrecir,
   et il se coupe par une ellipse plutot que d'elargir la barre. */
.lieu .nomville{font-weight:600;color:var(--craie);
  min-width:0;flex:0 1 auto;max-width:132px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Le point : statique, cinabre, avec un halo fixe. C'est le seul aplat colore
   de la barre en dehors du bouton et de l'exposant, donc il suffit a signaler
   « en direct » sans battre. */
.lieu .pointe{width:6px;height:6px;border-radius:999px;background:var(--cinabre);
  box-shadow:0 0 0 3px rgba(255,59,11,.16);flex:none;transition:box-shadow .25s}

.lieu .declencheur:hover .pointe,.lieu[data-ouvert="1"] .pointe{box-shadow:0 0 0 5px rgba(255,59,11,.22)}

/* Le tiroir reprend le fond, le rayon et l'ombre de ceux du menu, mais cale a
   gauche : centre sur une pastille collee au bord, il sortait de l'ecran. */
.barre .lieu .tiroir{width:min(304px,86vw);left:0;right:auto;
  transform:translateX(0) translateY(-6px);
  display:block;padding:16px 17px;border-radius:18px;text-align:left}

.barre .lieu[data-ouvert="1"] .tiroir{transform:translateX(0) translateY(0)}

.lieu .phrase{font-size:13.5px;line-height:1.5;color:var(--cendre);margin:0 0 13px}

.lieu .phrase b{color:var(--craie);font-weight:600}

.lieu .appel{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:12.5px;color:var(--craie);padding:9px 14px;border-radius:999px;
  background:rgba(255,59,11,.11);border:1px solid rgba(255,59,11,.34);
  transition:background .2s,border-color .2s}

.lieu .appel:hover{background:rgba(255,59,11,.2);border-color:var(--cinabre)}

.lieu .appel span[aria-hidden]{color:var(--cinabre)}

/* Retractee, la barre masque la mention avec les liens, et la redeploie au
   survol par les memes regles. */
.barre.compact .lieu .declencheur{max-width:0;padding-left:0;padding-right:0}

.barre.compact .lieu{opacity:0;margin-left:0}

.barre.compact:focus-within .lieu.vu{opacity:1;margin-left:14px}

.barre.compact:focus-within .lieu.vu .declencheur{max-width:220px;padding-left:2px;padding-right:2px}
@media (hover:hover) and (pointer:fine){

  .barre.compact:hover .lieu.vu{opacity:1;margin-left:14px}

  .barre.compact:hover .lieu.vu .declencheur{max-width:220px;padding-left:2px;padding-right:2px}
}

/* Paliers mesures, pas estimes. Au-dessus de 1200 px la mention tient avec
   43 px de jeu avant la rangee de liens ; a 1140 elle mord de 12 px. Le mot
   « Depuis » pese une cinquantaine de pixels a lui seul, donc il tombe en
   premier : la pastille garde le point et la ville, et le tiroir garde la
   phrase entiere. Sous 1024 px il n'y a plus rien a retirer sans rendre la
   mention illisible, elle quitte la barre. */
@media (max-width:1199px){
  .lieu .prefixe{display:none}
}
@media (max-width:1023px){

  .barre .lieu{display:none}
}

/* Reprise dans le menu mobile, ou la place ne manque pas : la phrase entiere,
   sans tiroir. */
.panneau .lieu-mob{display:none;align-items:center;gap:9px;font-size:13px;
  color:var(--cendre);padding:0 0 4px}

.panneau .lieu-mob.vu{display:flex}

.panneau .lieu-mob b{color:var(--craie);font-weight:600}

.panneau .lieu-mob .pointe{width:6px;height:6px;border-radius:999px;background:var(--cinabre);
  box-shadow:0 0 0 3px rgba(255,59,11,.16);flex:none}


/* le tiroir des outils : deux volets, le payant et le gratuit */
.tiroir.large{width:min(900px,calc(100vw - 32px));grid-template-columns:1.25fr 1fr;gap:0;padding:0;
  overflow:hidden}

.tiroir.large .pan{padding:18px}

.tiroir.large .pan.gratuit{background:rgba(255,59,11,.045);
  border-left:1px solid rgba(246,243,236,.09);display:flex;flex-direction:column}

.rubrique{font:700 10.5px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cendre);margin:4px 0 12px;padding:0 6px}

.tiroir.large .pan.gratuit .rubrique{color:var(--cinabre)}

.outil{display:block;padding:10px 12px;border-radius:11px;text-decoration:none;color:var(--craie);
  transition:background .17s,transform .17s}

.outil:hover{background:rgba(246,243,236,.07);transform:translateX(2px)}

.outil.vif:hover{background:rgba(255,59,11,.12)}

.nomoutil{display:block;font-size:14.5px;font-weight:600;margin-bottom:3px}

.detoutil{display:block;font-size:12.5px;line-height:1.45;color:var(--cendre)}

.tiroir.large .tous{margin-top:auto;grid-column:auto}

.tiroir .tous{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  margin-top:4px;padding:13px 16px;border-radius:14px;text-decoration:none;
  background:var(--cinabre);color:#000;font:700 13px/1 'Plus Jakarta Sans',sans-serif;
  transition:background .2s}

.tiroir .tous:hover{background:#ff5526}

.tiroir .tous span:last-child{font-size:16px;transition:transform .2s}

.tiroir .tous:hover span:last-child{transform:translateX(4px)}

/* ---------- actions ----------
   Le principe : une pastille d'encre tient la fleche a gauche du libelle ; au
   survol elle s'etend sur toute la largeur et le texte s'inverse. Le bouton
   change d'etat au lieu de changer de teinte, ce qui se lit de loin et donne
   une direction (la fleche part vers la droite). Tout est en CSS, aucune
   bibliotheque, aucune propriete qui force un recalcul de mise en page :
   la pastille est animee par sa largeur a l'interieur d'un conteneur a taille
   fixe, donc le texte autour ne bouge jamais. */
.bouton{position:relative;isolation:isolate;overflow:hidden;
  background:var(--cinabre);color:#060300;border:none;border-radius:999px;
  padding:0 26px 0 52px;height:50px;
  font:700 13.5px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.005em;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
  transition:background .25s}

.bouton .galet{position:absolute;z-index:-1;left:5px;top:5px;width:40px;height:40px;
  border-radius:999px;background:var(--encre);
  transition:width .46s cubic-bezier(.33,1,.42,1)}

.bouton:hover .galet,.bouton:focus-visible .galet{width:calc(100% - 10px)}

.bouton .fleche{position:absolute;left:18px;top:50%;margin-top:-7px;width:14px;height:14px;
  color:var(--cinabre);transition:transform .46s cubic-bezier(.33,1,.42,1)}

.bouton:hover .fleche,.bouton:focus-visible .fleche{transform:translateX(5px)}

.bouton .intitule{transition:color .3s ease .04s}

.bouton:hover .intitule,.bouton:focus-visible .intitule{color:var(--craie)}

/* repli : un bouton sans galet reste un aplat cinabre lisible */
.bouton:not(:has(.galet)){padding:0 26px;justify-content:center}

.bouton:not(:has(.galet)):hover{background:#ff5526}

.barre .bouton{justify-self:end;grid-column:3;white-space:nowrap;height:44px;padding:0 20px 0 46px}

.barre .bouton .galet{width:34px;height:34px;left:5px;top:5px}

.barre .bouton .fleche{left:15px}

.barre .bouton .picto{display:none}

/* en pastille, le bouton tombe a son icone seule : un rond de 40 px */
.barre.compact .bouton{padding:0;width:40px;height:40px;justify-content:center}

.barre.compact .bouton .picto{display:block}

.barre.compact .bouton .galet,.barre.compact .bouton .fleche,
.barre.compact .bouton .intitule{display:none}

.burger{display:none;margin-left:auto;width:42px;height:38px;border-radius:999px;border:1px solid var(--trait-fort);
  background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}

.burger i{width:18px;height:1.5px;background:var(--craie)}


/* ---------- panneau mobile ---------- */
.voile-menu{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.65);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}

.voile-menu.ouvert{opacity:1;visibility:visible}

.panneau{position:fixed;top:0;left:0;right:0;bottom:0;z-index:50;background:var(--encre);
  overflow-y:auto;overscroll-behavior:contain;padding:88px 20px 28px;
  transform:translateY(-100%);transition:transform .3s ease;visibility:hidden}

.panneau.ouvert{transform:translateY(0);visibility:visible}

.panneau a{display:block;padding:16px 0;border-bottom:1px solid var(--trait);
  color:var(--craie);text-decoration:none;font:600 17px/1.2 'Plus Jakarta Sans',sans-serif}

.panneau a:hover{color:var(--cinabre)}

.panneau a.avec-marqueur{display:flex;align-items:center;justify-content:flex-start}

/* Dans le panneau mobile la ligne fait 50 px de haut : l'exposant y
   flotterait dans le vide. Il revient sur la ligne de base. */
.panneau .marqueur{transform:none;margin-left:7px;font-size:11px}

.panneau .bouton{display:flex;width:100%;margin-top:24px}

/* .panneau a (0,1,1) ecrasait le retrait gauche du bouton : le texte
   passait sous la pastille. On rend au bouton ses propres valeurs. */
.panneau a.bouton{padding:0 26px 0 60px;height:56px;border-bottom:0;
  color:#060300;font:700 15px/1 'Plus Jakarta Sans',sans-serif}
.panneau a.bouton .galet{width:46px;height:46px}
.panneau a.bouton:hover{color:#060300}

.fermer{position:absolute;top:22px;right:18px;width:42px;height:38px;
  border:1px solid var(--trait-fort);background:none;color:var(--craie);cursor:pointer}

.fermer::before,.fermer::after{content:"";position:absolute;left:50%;top:50%;
  width:15px;height:1.5px;background:currentColor}

.fermer::before{transform:translate(-50%,-50%) rotate(45deg)}

.fermer::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* Le decentrage CSS a ete retire : le Boss prefere l'animation d'origine, ou
   la LUMIERE tourne autour du trou noir au lieu que la figure se deplace.
   C'est le lacet du shader qui fait ca, et il le fait a pleine amplitude —
   voir l'abonnement au champ de presence, plus bas. Le canvas reprend donc
   ses dimensions exactes, sans marge de debordement devenue inutile. */
#fond-trounoir{position:absolute;inset:0;width:100%;height:100%;display:block}

h1{font:400 clamp(40px,7.2vw,116px)/0.92 'Archivo Black',sans-serif;letter-spacing:-.045em;
  text-transform:uppercase;max-width:17ch;margin-bottom:26px}

h1 em{font-style:normal;color:var(--cinabre)}

.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

@keyframes defile{to{transform:translateX(-50%)}}

/* Six chemins, ecrits en valeurs litterales. C'est le point qui compte :
   une image-cle dont la valeur contient un var() ne peut pas etre confiee
   au compositeur, Chrome la rejoue sur le fil principal. Quinze cadres
   animes sur le fil principal, en concurrence avec le shader, ca se sent
   tout de suite. Les durees, le dephasage et le sens restent variables
   par cadre, eux : ce sont des proprietes de cadence, pas des valeurs
   d'image-cle, elles n'empechent rien. */
@keyframes derive-a{0%{transform:translate3d(0,0,0) rotate(0deg)}23%{transform:translate3d(3px,5px,0) rotate(0.1deg)}48%{transform:translate3d(14px,7px,0) rotate(0.3deg)}74%{transform:translate3d(-13px,6px,0) rotate(0.3deg)}100%{transform:translate3d(0,0,0) rotate(0deg)}}

@keyframes derive-b{0%{transform:translate3d(0,0,0) rotate(0deg)}23%{transform:translate3d(14px,-8px,0) rotate(-0.0deg)}48%{transform:translate3d(-4px,-7px,0) rotate(0.8deg)}74%{transform:translate3d(-4px,-13px,0) rotate(0.4deg)}100%{transform:translate3d(0,0,0) rotate(0deg)}}

@keyframes derive-c{0%{transform:translate3d(0,0,0) rotate(0deg)}23%{transform:translate3d(-3px,-14px,0) rotate(-0.7deg)}48%{transform:translate3d(6px,-12px,0) rotate(0.1deg)}74%{transform:translate3d(14px,5px,0) rotate(1.0deg)}100%{transform:translate3d(0,0,0) rotate(0deg)}}

@keyframes derive-d{0%{transform:translate3d(0,0,0) rotate(0deg)}23%{transform:translate3d(11px,-14px,0) rotate(0.1deg)}48%{transform:translate3d(5px,4px,0) rotate(0.4deg)}74%{transform:translate3d(-2px,-12px,0) rotate(-0.5deg)}100%{transform:translate3d(0,0,0) rotate(0deg)}}

@keyframes derive-e{0%{transform:translate3d(0,0,0) rotate(0deg)}23%{transform:translate3d(-15px,-9px,0) rotate(-0.3deg)}48%{transform:translate3d(11px,13px,0) rotate(-0.7deg)}74%{transform:translate3d(-2px,4px,0) rotate(0.4deg)}100%{transform:translate3d(0,0,0) rotate(0deg)}}

@keyframes derive-f{0%{transform:translate3d(0,0,0) rotate(0deg)}23%{transform:translate3d(4px,-8px,0) rotate(-0.8deg)}48%{transform:translate3d(11px,-15px,0) rotate(-0.1deg)}74%{transform:translate3d(5px,-11px,0) rotate(-0.5deg)}100%{transform:translate3d(0,0,0) rotate(0deg)}}

.oeil{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinabre);
  margin-bottom:16px}

h2{font:400 clamp(30px,4.4vw,64px)/0.95 'Archivo Black',sans-serif;letter-spacing:-.045em;
  text-transform:uppercase;margin-bottom:18px;max-width:24ch}

/* Chaque image-cle porte son « to » explicite. Sans lui, l'etat final reprend
   la valeur de base de la propriete, soit opacity:0 : l'animation se termine
   sur une carte invisible. */
@keyframes pb-c1{from{opacity:0;transform:translate(-90px,-60px) rotate(-5deg) scale(.9)}
  to{opacity:1;transform:none}}

@keyframes pb-c2{from{opacity:0;transform:translate(90px,-55px) rotate(4deg) scale(.9)}
  to{opacity:1;transform:none}}

@keyframes pb-c3{from{opacity:0;transform:translate(-110px,0) rotate(-3deg) scale(.9)}
  to{opacity:1;transform:none}}

@keyframes pb-c4{from{opacity:0;transform:translate(110px,0) rotate(3deg) scale(.9)}
  to{opacity:1;transform:none}}

@keyframes pb-c5{from{opacity:0;transform:translate(-70px,80px) rotate(-2deg) scale(.9)}
  to{opacity:1;transform:none}}

@keyframes pb-c6{from{opacity:0;transform:translate(70px,75px) rotate(2deg) scale(.9)}
  to{opacity:1;transform:none}}

@keyframes pb-coeur{from{opacity:.55;transform:scale(1.06)} to{opacity:1;transform:none}}

@keyframes pb-bas{from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none}}

/* « contain » et non « entry » : sur une piste plus haute que l'ecran, cette
   phase commence exactement quand la section s'epingle et finit quand elle se
   decolle. Melanger entry et cover inverse la plage et rien ne se declenche. */
@supports (animation-timeline:view()){
  .pb-carte{opacity:0}
  .pb-coeur,.pb-carte{animation-duration:auto;animation-timing-function:linear;
    animation-fill-mode:both;animation-timeline:--pb}
  .pb-coeur{animation-name:pb-coeur;animation-range:contain 0% contain 18%}
  .pb-c1{animation-name:pb-c1;animation-range:contain 2% contain 26%}
  .pb-c2{animation-name:pb-c2;animation-range:contain 8% contain 32%}
  .pb-c3{animation-name:pb-c3;animation-range:contain 14% contain 38%}
  .pb-c4{animation-name:pb-c4;animation-range:contain 20% contain 44%}
  .pb-c5{animation-name:pb-c5;animation-range:contain 26% contain 50%}
  .pb-c6{animation-name:pb-c6;animation-range:contain 32% contain 56%}
}

/* Sous 1100 px les cartes n'ont plus la place d'orbiter : la section redevient
   la grille d'origine, qui se devoile en cascade. L'original 21st fait de meme. */
@media (max-width:1280px){
  .pb-piste{height:auto;view-timeline-name:none}
  .pb-colle{position:static;height:auto;display:block;padding:112px 48px;overflow:visible}
  .pb-colle::before{left:0;top:0;transform:none;width:min(1280px,100%);height:min(680px,78%);
    background:radial-gradient(64% 54% at 22% 50%, rgba(0,0,0,.95), rgba(0,0,0,.74) 30%,
      rgba(0,0,0,.40) 56%, rgba(0,0,0,.16) 70%, transparent 80%)}
  .pb-halo{display:none}
  .pb-coeur{text-align:left;max-width:none;margin-bottom:40px;animation:none;opacity:1}
  .pb-coeur h2,.pb-coeur .chapeau{margin-left:0}
  .pb-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;
    background:var(--trait);border:1px solid var(--trait)}
  .pb-carte{position:static;width:auto;border:0;box-shadow:none;translate:none;
    background:rgba(0,0,0,.82);padding:30px 26px}
  .pb-carte::before{display:none}
}

@supports (animation-timeline:view()){
  @media (max-width:1280px){
    .pb-carte{opacity:0;animation-name:pb-bas;animation-timeline:view();
      animation-range:entry 10% cover 28%}
  }
}

/* Le mouvement n'est jamais la condition de la lecture. */
@media (prefers-reduced-motion:reduce){
  .pb-carte,.pb-coeur{animation:none !important;opacity:1 !important;transform:none !important}
  .pb-piste{height:auto}
  .pb-colle{position:static;height:auto;display:block;padding:112px 48px;overflow:visible}
  .pb-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;
    background:var(--trait);border:1px solid var(--trait)}
  .pb-carte{position:static;width:auto;border:0;box-shadow:none;translate:none;
    background:rgba(0,0,0,.82);padding:30px 26px}
  .pb-coeur{text-align:left;max-width:none;margin-bottom:40px}
}

@keyframes roue-invite{0%,100%{transform:translateY(0);opacity:1}
  60%{transform:translateY(7px);opacity:.25}}

/* Une roue qui detourne la molette est exactement ce que le reglage
   « moins d'animation » demande d'eviter. Dans ce mode, la grille. */
@media (prefers-reduced-motion:reduce){
  .roue-piste{display:none}
  .solutions-repli{display:grid}
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

/* visibility, et pas seulement opacity : un panneau a opacity zero reste dans
   l'arbre d'accessibilite, et un lecteur d'ecran annoncerait les quatre
   etapes a la suite, superposees. Le piege deja rencontre sur la planche des
   metiers. Les paliers a 3 et 97 % font basculer la visibilite juste avant
   et juste apres le fondu, jamais pendant. */
@keyframes tl-etape{
  0%{opacity:0;visibility:hidden;translate:0 26px}
  3%{visibility:visible}
  14%{opacity:1;translate:0 0}
  86%{opacity:1;translate:0 0}
  97%{visibility:visible}
  100%{opacity:0;visibility:hidden;translate:0 -26px}
}

/* Les deux bouts de la frise sont des cas a part, pour la meme raison :
   la scene est collee a l'ecran AVANT que la course commence et APRES
   qu'elle finisse. Une courbe commune, qui part de rien et retourne a rien,
   laisse donc un panneau vide aux deux extremites. La 01 est amputee de son
   entree, la 04 de sa sortie. */
/* Meme courbe, amputee de son entree : l'etape 01 commence a l'ecran. */
@keyframes tl-etape-1{
  0%{opacity:1;visibility:visible;translate:0 0}
  86%{opacity:1;translate:0 0}
  97%{visibility:visible}
  100%{opacity:0;visibility:hidden;translate:0 -26px}
}

/* Meme courbe, amputee de sa sortie : l'etape 04 reste tant qu'on la voit.
   Sans cela, le lecteur qui continue a defiler apres la quatrieme etape
   gardait les quatre jalons a gauche et un panneau vide a droite, jusqu'a la
   fin de la scene. */
@keyframes tl-etape-4{
  0%{opacity:0;visibility:hidden;translate:0 26px}
  3%{visibility:visible}
  14%{opacity:1;translate:0 0}
  100%{opacity:1;visibility:visible;translate:0 0}
}

@keyframes tl-jalon-4{
  0%{background:rgba(0,0,0,.72);color:var(--cendre);border-color:var(--trait-fort)}
  12%{background:var(--craie);color:var(--encre);border-color:var(--craie)}
  100%{background:var(--craie);color:var(--encre);border-color:var(--craie)}
}

@keyframes tl-jalon-1{
  0%{background:var(--craie);color:var(--encre);border-color:var(--craie)}
  88%{background:var(--craie);color:var(--encre);border-color:var(--craie)}
  100%{background:rgba(0,0,0,.72);color:var(--cendre);border-color:var(--trait-fort)}
}

@keyframes tl-jalon{
  0%{background:rgba(0,0,0,.72);color:var(--cendre);border-color:var(--trait-fort)}
  12%{background:var(--craie);color:var(--encre);border-color:var(--craie)}
  88%{background:var(--craie);color:var(--encre);border-color:var(--craie)}
  100%{background:rgba(0,0,0,.72);color:var(--cendre);border-color:var(--trait-fort)}
}

/* Trois raisons de tout derouler a plat, et le meme repli pour les trois :
   le navigateur ne sait pas animer au defilement, le visiteur a demande moins
   de mouvement, ou l'ecran est trop petit pour qu'une scene collante de trois
   hauteurs soit autre chose qu'une punition au doigt.
   Sans ce repli, les panneaux resteraient a opacity zero et la section serait
   vide — c'est le genre de defaut qui ne se voit que sur la machine du
   visiteur, jamais sur celle qui a ecrit la page. */
@supports not (animation-timeline:view()){
  .tl-scene{height:auto}
  .tl-collant{position:static}
  .tl-piste{display:block}
  .tl-pan{opacity:1;visibility:visible;animation:none}
  .tl-pan+.tl-pan{margin-top:22px}
  .tl-cols li{animation:none}
}


/* final */
/* ---------- pied de page : le trou noir de particules ----------
   La toile occupe tout le pied et se place sous le contenu. Elle ne tourne que
   si le pied est a l'ecran et l'onglet au premier plan, et pas du tout en
   mouvement reduit : un fond decoratif ne doit pas consommer de batterie
   pendant que le visiteur lit trois ecrans plus haut. */
.pied{position:relative;padding:0 48px 34px;
  background:radial-gradient(130% 100% at 50% 118%, #0C0C0C 0%, #050505 58%);
  font-size:14px;z-index:1;overflow:hidden}

#toile-pied{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}

.pied>*:not(#toile-pied){position:relative;z-index:2}

.pied .haut{padding:96px 0 72px}

.pied .signal{font:400 clamp(30px,4.6vw,66px)/0.98 'Archivo Black',sans-serif;
  letter-spacing:-.05em;text-transform:uppercase;max-width:17ch;margin:0}

.pied .signal em{font-style:normal;color:var(--cinabre)}

.pied .relance{margin-top:22px;max-width:46ch;color:var(--cendre);line-height:1.62}

.pied .haut .bouton{margin-top:28px}

.colonnes{display:grid;grid-template-columns:1.25fr 1.5fr .9fr .9fr;gap:36px;
  padding:52px 0 40px}

.colonnes h2{font:700 11px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cendre);margin:0 0 17px}

.colonnes a{display:block;color:var(--craie);text-decoration:none;font-size:14px;padding:6px 0;
  opacity:.84;transition:opacity .18s,color .18s,transform .18s}

.colonnes a:hover{opacity:1;color:var(--cinabre);transform:translateX(3px)}

.pied .sceau{font:400 19px/1 'Archivo Black',sans-serif;letter-spacing:-.045em;
  text-transform:uppercase}

.pied .sceau i{font-style:normal;color:var(--cinabre)}

.pied .adresse{margin-top:16px;font-size:13.5px;color:var(--cendre);line-height:1.72;max-width:30ch}

.pied .ourlet{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:26px;
  border-top:1px solid var(--trait);font-size:12.5px;color:var(--cendre)}

.pied .ourlet .fin{margin-left:auto;display:flex;gap:18px}

.pied .ourlet a{text-decoration:none;color:inherit;opacity:.84}

.pied .ourlet a:hover{opacity:1;color:var(--cinabre)}
@media (max-width:980px){

  .pied{padding:0 24px 28px}

  .pied .haut{padding:70px 0 52px}

  .colonnes{grid-template-columns:1fr 1fr;gap:26px}
}
@media (max-width:640px){

  .pied{padding:0 20px 24px}

  .colonnes{grid-template-columns:1fr;gap:20px}

  .pied .ourlet .fin{margin-left:0;flex-wrap:wrap}
}


/* Un seul palier avant le burger. L'exposant ne coute plus que 40 px, mais la
   rangee reste juste entre 980 et 1060 px : les intervalles se resserrent la,
   et nulle part ailleurs. */
@media (max-width:1100px){
  .liens{gap:13px}
}

/* Mesure : a 984 px, juste avant le burger, les liens mordaient encore de 6 px
   sur le bouton d'action. Trois pixels de moins par intervalle suffisent. */
@media (max-width:1024px){
  .liens{gap:10px}
}
/* 28/10, deuxième version : le Boss veut ses sept entrées dans la rangée, pas
   un tiroir « Agence ». La barre s'élargit donc (1 500 px au lieu de 1 180) et,
   entre 981 et 1 259 px, là où la rangée touchait le bouton d'action, ce bouton
   prend sa forme compacte (le picto seul, comme dans la barre réduite au
   défilement). Rien n'est retiré : le bouton reste, la ville reste. */
.tiroir.etroit{width:min(330px,86vw);grid-template-columns:1fr;gap:2px;padding:10px}
@media (min-width:981px) and (max-width:1259px){
  .barre .bouton{padding:0;width:44px;justify-content:center}
  .barre .bouton .picto{display:block}
  .barre .bouton .galet,.barre .bouton .fleche,.barre .bouton .intitule{display:none}
}

@media (max-width:980px){

  .liens,.barre .bouton{display:none}

  .burger{display:flex}

  /* Liens et bouton masques, le burger tombait dans la colonne centrale et
     chevauchait la marque a 320 px. Deux colonnes : marque, burger. */
  .barre{grid-template-columns:minmax(0,1fr) auto}

  /* le CTA quitte la barre et vit dans la barre collante du bas : la pastille
     mobile se reduit donc au monogramme et au burger */
  .barre.compact{width:auto}

  .barre.compact .burger{margin-left:0}

  .pied{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){

  .barre{padding:16px 20px}

  h1{max-width:100%}

  body{padding-bottom:88px}

  [id]{scroll-margin-top:76px}
}
@media (prefers-reduced-motion:reduce){

  html{scroll-behavior:auto}

  *{transition:none!important}
}

#fond-trounoir{transform-origin:50% 50%;
  transform:scale(var(--sc,1)) rotate(var(--rot,0deg))}

@keyframes surgit{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){

  #fond-trounoir{transition:none!important}
}

/* Sans survol, le tiroir est ouvert d'office et reprend les valeurs du fond
   sombre : le texte du panneau est écrit pour la craie du survol. */
@media (hover:none),(pointer:coarse),(max-width:860px){
  .mur-sous{opacity:1}
  .mur-sous p{color:#D8D3C9;border-top-color:var(--trait)}
  .mur-sous .t{color:var(--cinabre);border-top-color:var(--trait)}
  .mur-b:hover .mur-sous p{color:#3A352C;border-top-color:rgba(10,10,10,.25)}
  .mur-b:hover .mur-sous .t{color:#9A1100;border-top-color:rgba(10,10,10,.25)}
}

/* ====================== le champ de présence ======================
   Une seule source entretient cinq variables sur <html> ; aucune section
   n'écoute la souris de son côté. Les valeurs ne sont réécrites qu'au-delà
   d'un seuil : changer une variable portée par la racine invalide le style
   du document entier, et le faire soixante fois par seconde pour un dixième
   de pixel coûte plus cher que tout ce qu'on gagne.

     --px, --py  position du curseur, 0 à 1, lissée
     --vit       vitesse de défilement, 0 à 1, lissée
     --repos     monte vers 1 quand plus rien ne bouge depuis deux secondes
     --eveil     0 avant le premier geste du visiteur, 1 après

   En mouvement réduit et sur pointeur grossier, tout reste aux valeurs
   neutres ci-dessous : la page se tient exactement comme avant. */
/* Typees plutot que laissees en jetons bruts. Une variable declaree par
   @property est connue du moteur comme un nombre : il sait ce qui en depend,
   et l'invalidation de style qui suit chaque ecriture peut etre ciblee au
   lieu de repasser sur tout le document. Mesure sur ce VPS : un recalcul
   complet coute 7,8 ms, et c'est le seul poste de depense du champ — le reste
   (arithmetique, ecriture) est a 0,001 ms. Sans @property, rien ne casse :
   les declarations html{}
 ci-dessous restent le repli. */
@property --px{syntax:'<number>';inherits:true;initial-value:0.5}

@property --py{syntax:'<number>';inherits:true;initial-value:0.5}

@property --vit{syntax:'<number>';inherits:true;initial-value:0}

@property --repos{syntax:'<number>';inherits:true;initial-value:0}

/* --prox DOIT heriter : il est pose en ligne sur la bande, mais il est lu
   par la bande ET par son numero, qui est un descendant. Avec inherits:false
   le numero retombait sur l'initial-value et ne s'allumait plus. */
@property --prox{syntax:'<number>';inherits:true;initial-value:0}

html{--px:.5;--py:.5;--vit:0;--repos:0;--eveil:0}


/* ---- la pastille de provenance bat une fois, au premier geste ----
   Une seule fois : l'animation n'a pas d'itération et la classe ne revient
   jamais. Un point qui clignote en boucle dans une barre de navigation est
   un bandeau publicitaire. */
@keyframes battement-pointe{
  0%{box-shadow:0 0 0 0 rgba(255,59,11,.55)}
  70%{box-shadow:0 0 0 9px rgba(255,59,11,0)}
  100%{box-shadow:0 0 0 0 rgba(255,59,11,0)}
}

html[data-eveille] .lieu.vu .pointe{animation:battement-pointe .9s ease-out 1 both}
@media (prefers-reduced-motion:reduce){

  html[data-eveille] .lieu.vu .pointe{animation:none}
}


/* ---- l'heure du visiteur, dans la pastille ----
   Affichée seulement si son fuseau diffère du nôtre, sinon elle n'apporte
   rien. Elle ne change RIEN à ce que la page propose : c'est un fait posé,
   le lecteur en tire ce qu'il veut. */
/* Mesure sur capture : le séparateur était en --trait-fort, soit 2:1 sur le
   fond de la barre, c'est-à-dire invisible. Il est décoratif (aria-hidden) et
   n'a pas à tenir 4,5:1, mais s'il ne se voit pas il ne sépare rien. */
.lieu .sep{color:var(--cendre);margin:0 1px}

/* Avec l'heure, « Depuis Casablanca · 07:38 » ne tient pas dans les 220 px
   d'origine : la ville se faisait tronquer en « Casabla… » alors qu'elle a la
   place. 290 px suffisent pour les noms de ville usuels ; au-delà l'ellipse
   de .nomville reprend la main, et sous 1100 px « Depuis » disparaît déjà. */
.lieu.vu[data-heure] .declencheur{max-width:290px}

.barre.compact:focus-within .lieu.vu[data-heure] .declencheur{max-width:290px}
@media (hover:hover) and (pointer:fine){

  .barre.compact:hover .lieu.vu[data-heure] .declencheur{max-width:290px}
}

.lieu .heure{font-weight:600;color:var(--craie);font-variant-numeric:tabular-nums}

.lieu .sep,.lieu .heure{display:none}

.lieu[data-heure] .sep,.lieu[data-heure] .heure{display:inline}

/* Sans ville connue, « Depuis » n'a pas d'objet et le séparateur non plus. */
.lieu:not([data-ville]) .prefixe,.lieu:not([data-ville]) .sep{display:none}

.lieu .chez{color:var(--cendre);margin-left:5px}

/* Avec la ville, « chez vous » est redondant et allonge une pastille dont la
   largeur reste bornée. Seule, l'heure a besoin de dire à qui elle est. */
.lieu[data-ville] .chez{display:none}

.lieu .deux-heures{font-size:12.5px;line-height:1.5;color:var(--cendre);
  margin:0 0 13px;padding-bottom:11px;border-bottom:1px solid var(--trait)}

.lieu:not([data-heure]) .deux-heures{display:none}

/* Heure connue mais pas la ville : .phrase reste vide, et un paragraphe vide
   garde sa marge basse, soit treize pixels de blanc pour rien dans le tiroir. */
.lieu:not([data-ville]) .phrase{display:none}

.lieu:not([data-ville]) .deux-heures{border-bottom:0;padding-bottom:0}

.lieu .deux-heures b{color:var(--craie);font-weight:600;
  font-variant-numeric:tabular-nums}

.lieu:not([data-heure]) .chez{display:none}

@supports not (color: color-mix(in srgb, red 50%, blue)){
  .mur-b{border-bottom-color:var(--trait-fort)}
  .mur-b .n{color:var(--trait-fort)}
}


/* ---- la distance, au pied ----
   Affichée seulement si elle est connue. Pas de valeur par défaut, pas de
   ville posée au hasard : un site qui affirme une chose fausse sur vous perd
   plus qu'il ne gagne. */
/* Sous 1024 px la pastille de la barre disparaît : sans ce relais, l'heure
   du visiteur n'existerait tout simplement pas sur téléphone. Elle rejoint la
   mention de provenance du panneau, au même endroit et dans le même registre. */
.panneau .lieu-mob .heure-mob{display:none;color:var(--cendre)}

.panneau .lieu-mob .heure-mob.vu{display:inline}

.panneau .lieu-mob .heure-mob b{color:var(--craie);font-weight:600;
  font-variant-numeric:tabular-nums}


.ourlet .distance{display:none;color:var(--cendre)}

.ourlet .distance.vu{display:inline}

.ourlet .distance b{color:var(--craie);font-weight:600}


/* ---------- lisibilite sur telephone -----------------------------------
   Un seul endroit ou sont remontees les tailles de corps. Les valeurs de
   bureau restent intactes : rien ici ne s'applique au-dessus de 980 px. */
@media (max-width:980px){
  .pb-carte p,
  .solutions-repli a p,
  .bento-t p.d,
  .mur-sous p,
  .esc-b p{font-size:15.5px;line-height:1.6}
  .solutions-repli a .ex,
  .mur-sous .t,
  .bento-fiche dd,
  .esc-x span,
  .pied .colonnes a,
  .pied .haut .relance{font-size:15px}
  /* Les mentions se consultent, elles ne se lisent pas : 14 px suffisent,
     et c'est deja un point et demi de plus qu'avant. */
  .avis-centre .rassure,
  .bento-bas .rassure,
  .jonction-note,
  .esc-bas .mention,
  .mur-bas .relance,
  .pied .ourlet span{font-size:14px}
  .jonction-centre .bouton .intitule{font-size:15px}
}

/* ====================== le tiroir des solutions ======================
   Dix offres rangees en quatre familles : trois volets, et la derniere colonne
   porte deux familles courtes separees par un filet. Un tiroir de dix liens
   nus se lit mal ; les familles donnent l'ordre de lecture.
   La largeur est bornee par la fenetre autant que par les 880 px voulus : le
   menu n'existe qu'au-dela de 980 px, mais la borne evite d'avoir a y penser
   si le palier du burger bouge un jour. */
.tiroir.mega{width:min(880px,calc(100vw - 32px));grid-template-columns:repeat(3,1fr);
  gap:0;padding:0;overflow:hidden;text-align:left}

.tiroir.mega .pan{padding:18px 14px}

.tiroir.mega .pan + .pan{border-left:1px solid rgba(246,243,236,.09)}

/* Deuxieme famille dans le meme volet : elle a besoin d'air au-dessus, sinon
   les deux listes se lisent comme une seule. */
.tiroir.mega .rubrique.suite{margin-top:18px;padding-top:15px;
  border-top:1px solid rgba(246,243,236,.09)}

.tiroir.mega .tous{grid-column:1/-1;margin:0;border-radius:0}

/* ---------- le depliant des solutions, sur mobile ----------
   Dix liens de plus dans le panneau le rendraient deux fois plus long. Le
   depliant natif tient la liste fermee par defaut ; aucun script. */
.panneau .repli{border-bottom:1px solid var(--trait)}

.panneau .repli summary{display:flex;align-items:center;gap:9px;padding:16px 0;
  cursor:pointer;list-style:none;color:var(--craie);font-size:17px;font-weight:500}

.panneau .repli summary::-webkit-details-marker{display:none}

.panneau .repli summary .chev{transition:transform .2s}

.panneau .repli[open] summary .chev{transform:rotate(-135deg) translateY(-2px)}

.panneau .repli .dedans{padding:2px 0 14px}

.panneau .repli .rub-mob{font:700 10.5px/1 'Plus Jakarta Sans',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cendre);margin:14px 0 2px}

.panneau .repli a{padding:11px 0 11px 14px;border-bottom:0;font-size:15px;
  color:rgba(246,243,236,.82);position:relative}

.panneau .repli a::before{content:"";position:absolute;left:0;top:19px;width:7px;
  height:1px;background:var(--cinabre)}

.panneau .repli a:hover{color:var(--cinabre)}

.panneau .repli .toutes{margin-top:10px;font-weight:600;color:var(--cinabre)}

/* Le panneau mobile defile.
   Mesure apres l'ajout du depliant : panneau de 1090 px de haut dans une
   fenetre de 844, donc le bouton d'appel du bas devenait inatteignable. Le
   panneau est en position fixe : sans hauteur bornee, rien ne defile.
   100dvh en plus de 100vh : sur mobile, la barre d'adresse mange la difference. */
.panneau{max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}

/* ---------- la colonne des offres du pied ---------- */
.colonnes .offres .deux{columns:2;column-gap:26px}

.colonnes .offres .deux a{break-inside:avoid}

@media (max-width:980px){
  .colonnes .offres .deux{columns:2}
}
@media (max-width:640px){
  .colonnes .offres .deux{columns:1}
}

/* lg-menu:debut */
/* ---------- sélecteur de langue (04/11/2026) ----------
   Un bouton compact « FR » à côté de l'action, une liste de quatre langues.
   Seul l'accueil est traduit : les autres langues mènent à l'accueil traduit.
   Il partage le comportement des tiroirs (data-tiroir : survol, clic, Échap,
   clic extérieur) mais pas leur forme : angle droit, aucune ombre, et le
   cinabre réservé à la coche de la langue courante. */
.lg-cote{grid-column:3;justify-self:end;display:flex;align-items:center;gap:14px;min-width:0}
.lg-hote{position:relative;display:inline-flex;align-items:center}
.lg-bouton{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 4px;
  background:none;border:0;cursor:pointer;color:var(--craie);opacity:.82;
  font:600 13px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.04em;white-space:nowrap;
  transition:opacity .2s,color .2s}
.lg-bouton:hover,.lg-hote[data-ouvert="1"] .lg-bouton{opacity:1;color:var(--cinabre)}
.lg-bouton:focus-visible{outline:1px solid var(--cinabre);outline-offset:4px}
.lg-globe{flex:none}
.lg-hote[data-ouvert="1"] .chev{transform:rotate(-135deg) translateY(-2px)}
.barre .tiroir.lg-liste{left:auto;right:auto;inset-inline-end:0;top:calc(100% + 16px);
  transform:translateY(-6px);width:212px;padding:6px;border-radius:0;box-shadow:none;
  background:#080808;border:1px solid rgba(246,243,236,.16);
  display:grid;grid-template-columns:1fr;gap:0}
.barre .lg-hote[data-ouvert="1"] .tiroir.lg-liste{transform:translateY(0)}
.lg-liste a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 12px;color:var(--craie);text-decoration:none;opacity:.86;
  font:500 14px/1.2 'Plus Jakarta Sans',sans-serif;border-radius:0;
  transition:background .15s,opacity .15s}
.lg-liste a:hover,.lg-liste a:focus-visible{background:rgba(246,243,236,.07);opacity:1;outline:0}
.lg-liste a[aria-current]{opacity:1;font-weight:600}
.lg-abr{font-size:12px;letter-spacing:.06em;color:var(--cendre)}
.lg-coche{color:var(--cinabre);flex:none}
/* Barre réduite au défilement : le sélecteur part avec les liens, revient avec eux. */
.barre.compact .lg-hote{display:none}
.barre.compact:focus-within .lg-hote{display:inline-flex}
@media (hover:hover) and (pointer:fine){.barre.compact:hover .lg-hote{display:inline-flex}}
/* Le sélecteur prend une soixantaine de pixels à droite. Entre 1 260 et
   1 399 px la rangée touchait alors le bouton d'action : il prend sa forme
   compacte (picto seul), comme il le fait déjà de 981 à 1 259 px. Aucune
   entrée du menu ne bouge. */
@media (min-width:981px) and (max-width:1399px){
  .barre .lg-cote .bouton,.barre.compact:hover .lg-cote .bouton,.barre.compact:focus-within .lg-cote .bouton{padding:0;width:44px;height:44px;justify-content:center}
  .barre .lg-cote .bouton .picto,.barre.compact:hover .lg-cote .bouton .picto,.barre.compact:focus-within .lg-cote .bouton .picto{display:block}
  .barre .lg-cote .bouton .galet,.barre .lg-cote .bouton .fleche,.barre .lg-cote .bouton .intitule,
  .barre.compact:hover .lg-cote .bouton .galet,.barre.compact:hover .lg-cote .bouton .fleche,.barre.compact:hover .lg-cote .bouton .intitule,
  .barre.compact:focus-within .lg-cote .bouton .galet,.barre.compact:focus-within .lg-cote .bouton .fleche,.barre.compact:focus-within .lg-cote .bouton .intitule{display:none}
}
/* Juste avant le burger, la rangée n'a plus que quelques pixels : le globe
   s'efface, le code de langue et le chevron restent. */
@media (min-width:981px) and (max-width:1099px){.lg-cote{gap:8px}.lg-globe{display:none}}
@media (max-width:980px){.lg-cote{display:none}}
/* panneau mobile : quatre cases, la courante bordée de cinabre */
.panneau .lg-mob{margin-top:22px}
.panneau .lg-mob-titre{font:700 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cendre);margin:0 0 10px}
.panneau .lg-mob-liste{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.panneau .lg-mob-liste a{display:flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 10px;border:1px solid rgba(246,243,236,.16);border-radius:0;
  font:600 15px/1.2 'Plus Jakarta Sans',sans-serif;color:var(--craie)}
.panneau .lg-mob-liste a[aria-current]{border-color:var(--cinabre)}
.panneau .lg-mob-liste a:hover{color:var(--cinabre)}
/* lg-menu:fin */