/* ============================================================
   COMPOSANTS DU LOT 1 - www.bachata-reunion.re

   Reference visuelle : maquettes d'accueil v1.1 et de pages
   interieures v1.0 du 2026-10-02. Les valeurs viennent des
   jetons (jetons.css), jamais d'une constante locale.

   Cohabitation avec le gabarit d'origine, conserve au lot 1 :
   - toutes les classes portent le prefixe "sj-" ;
   - les regles d'elements ne valent que dans une zone ".sj-zone"
     (en-tete, pied, barre mobile, contenu des pages aux jetons) ;
   - les tailles de police sont en rem, jamais en px : elles suivent
     le reglage de taille du navigateur. ATTENTION : la racine vaut
     125 % (voir ci-dessous), donc 1rem = 20 px et 16 px = .8rem au
     reglage par defaut. Aucun texte sous .8rem.
   ============================================================ */

/* ---------- racine ----------
   Le gabarit d'origine fixait la racine a 20 px : une valeur en px ignore le
   reglage de taille de police du visiteur, et toutes les tailles en rem avec
   elle. 125 % donne les memes 20 px au reglage par defaut (16 px), et suit le
   visiteur qui agrandit son texte. Les pages au balisage d'origine (mentions
   legales), ecrites en rem contre cette racine, ne bougent pas. */
:root{--bs-root-font-size:125%}

/* ---------- zone : neutralise le gabarit d'origine ---------- */
.sj-zone{font:400 .8rem/1.65 var(--corps);color:var(--texte-fort);background:var(--fond-clair);
  word-spacing:normal;letter-spacing:normal;text-align:left;overflow-wrap:break-word}
.sj-zone h1,.sj-zone h2,.sj-zone h3{font-family:var(--titre) !important;font-weight:400;line-height:1.14;
  letter-spacing:-.01em;word-spacing:normal;margin:0;color:inherit}
.sj-zone h1{font-size:clamp(1.6rem,5vw,2.64rem)}
.sj-zone h2{font-size:clamp(1.2rem,3.2vw,1.76rem)}
.sj-zone h3{font-size:.88rem;line-height:1.3}
.sj-zone p{margin:0 0 var(--e2);color:inherit}
.sj-zone a{color:inherit;text-decoration:underline;transition:none}
.sj-zone a[href^="tel"]{color:inherit !important}
.sj-zone ul{margin:0;padding:0}
.sj-zone b,.sj-zone strong{font-weight:700}
.sj-zone img{max-width:100%;height:auto}
.sj-zone figure{margin:0}
.sj-zone input[type=checkbox]{-webkit-appearance:checkbox !important;appearance:auto !important}
.sj-zone select{-webkit-appearance:menulist !important;appearance:auto !important}
/* Nom propre compose (Sainte-Clotilde, Saint-Just) : il ne se coupe pas a son
   trait d'union tant qu'il tient sur une ligne. L'enveloppe est posee a la
   sortie de la page (nomsInsecables(), lib/site.php), y compris sur la page au
   balisage d'origine : la regle n'est donc pas limitee a une zone.
   C'est un bloc en ligne, pas un "nowrap" : le nom passe ENTIER a la ligne
   suivante, et ne se coupe que s'il est plus large que son conteneur (texte
   agrandi a 200 %, colonne etroite). Un "nowrap" debordait alors de la page
   (mesure : 19 couples page-largeur sur 75 au texte double). Un bloc en ligne
   ne recoit pas le soulignement de son lien : il le reprend lui-meme. */
.sj-nom{display:inline-block;max-width:100%;text-decoration:inherit}
/* Sous 480 px, dans les grands titres, l'enveloppe ne s'applique plus : le nom
   peut s'y couper (arbitrage du 2026-10-05). Le texte courant reste protege. */
@media(max-width:479px){h1 .sj-nom,h2 .sj-nom{display:inline}}
.sj-wrap{width:min(1120px,100% - 2*var(--e3));margin-inline:auto}
.sj-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Le gabarit d'origine met le corps de page en colonne flexible a hauteur
   fixe : sans cette regle, l'en-tete, le contenu et le pied se compriment
   (en-tete mesure a 45 px au lieu de 72). */
body > .sj-entete,body > .sj-pied{flex:none}
body > main{flex:1 0 auto}

/* ---------- focus : un seul anneau, deux couleurs selon le fond ---------- */
.sj-zone a:focus-visible,.sj-zone button:focus-visible,.sj-zone input:focus-visible,
.sj-zone select:focus-visible,.sj-zone textarea:focus-visible,.sj-zone summary:focus-visible,
.sj-zone [tabindex]:focus-visible{outline:3px solid var(--accent-or-appui);outline-offset:3px;
  border-radius:4px;box-shadow:none}
.sj-sombre a:focus-visible,.sj-sombre button:focus-visible,
.sj-zone .sj-sombre a:focus-visible,.sj-zone .sj-sombre button:focus-visible{outline-color:var(--accent-or)}

/* ---------- en-tete ----------
   Le logo reprend les dimensions du site d'origine, mesurees sur son rendu :
   300 x 90 px, a 1280 comme a 375 px. L'en-tete prend la hauteur qu'il lui
   faut (--hauteur-entete) ; le logo ne se reduit que la ou la place manque
   (ecran de moins de 375 px, ou navigation large entre 901 et 1060 px).
   Sous 900 px : bandeau collant, en haut d'ecran. Au-dessus : bandeau flottant
   (voir "bandeau flottant", en fin de feuille). */
.sj-entete{position:sticky;top:0;z-index:90;height:var(--hauteur-entete);display:flex;align-items:center;
  background:rgba(var(--fond-sombre-rvb),var(--opacite-entete));backdrop-filter:blur(8px);color:#fff;
  border-bottom:1px solid rgba(212,162,76,.22)}
.sj-entete .sj-wrap{display:flex;align-items:center;gap:var(--e3);width:min(1120px,100% - 2*var(--e2))}
.sj-marque{display:flex;align-items:center;flex:0 1 300px;min-width:0;margin-right:auto;text-decoration:none}
.sj-zone .sj-marque img{display:block;width:100%;max-width:300px;height:auto;border-radius:0}
.sj-zone.sj-entete .sj-btn{flex:none;white-space:nowrap}
.sj-nav{display:flex;flex:none;gap:var(--e3);align-items:center}
/* Liens du menu en blanc (--texte-sombre-fort) : le bandeau est translucide
   (--opacite-entete), et une page claire qui defile dessous eclaircit son
   fond, jusqu'a #302C29 sous une surface blanche. Le blanc y tient 13,8:1 ; le
   gris doux y tombait sous 7:1. Le lien actif reste or. */
.sj-zone .sj-nav a{color:var(--texte-sombre-fort);text-decoration:none;font-size:.8rem;font-weight:600;
  padding:6px 2px;border-bottom:2px solid transparent;transition:color var(--duree-courte)}
/* Survol : le texte reste blanc, un filet or d'un pixel apparait sous le lien,
   moitie moins epais que celui du lien actif, qui garde seul son texte or. La
   marge basse reprend le pixel rendu : le lien ne bouge pas. */
.sj-zone .sj-nav a:not([aria-current]):hover{border-bottom:1px solid var(--accent-or);padding-bottom:7px}
.sj-zone .sj-nav a[aria-current]{color:var(--accent-or);border-bottom-color:var(--accent-or)}
.sj-zone .sj-menu-bouton{display:none}
/* Au-dessus de 900 px : les cinq entrees principales, les autres restent au menu. */
@media(min-width:901px){.sj-zone .sj-nav .sj-nav-plus{display:none}}
/* Entre 901 et 1100 px, la navigation se resserre pour laisser sa place au logo. */
@media(min-width:901px) and (max-width:1100px){.sj-nav{gap:var(--e2)}}

/* ---------- menu sous 900 px ----------
   La navigation est la meme liste : masquee, puis deployee sous l'en-tete
   quand le bouton porte aria-expanded="true" (assets/js/site.js). Le panneau
   vit dans l'en-tete et s'arrete au-dessus de la zone reservee a la barre
   mobile (--degagement-barre) : la barre ne masque ni le bouton ni le dernier
   lien, et le focus d'un lien ne fait pas defiler la page derriere le menu.
   Chaque cible fait 44 px au moins. */
@media(max-width:900px){
  .sj-nav{display:none}
  .sj-zone .sj-menu-bouton{display:inline-flex;align-items:center;flex:none;gap:7px;min-width:44px;min-height:44px;
    padding:0 13px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);
    border-radius:var(--rayon-bouton);font:700 .8rem/1 var(--corps);cursor:pointer}
  .sj-zone .sj-menu-bouton[hidden]{display:none}
  .sj-menu-bouton svg{width:16px;height:16px;flex:none;fill:currentColor}
  .sj-menu-bouton[aria-expanded=true] + .sj-nav{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - var(--hauteur-entete) - var(--degagement-barre));
    max-height:calc(100dvh - var(--hauteur-entete) - var(--degagement-barre));
    overflow-y:auto;overscroll-behavior:contain;padding:var(--e1) var(--e2) var(--e3);
    background:var(--fond-sombre);border-bottom:1px solid rgba(212,162,76,.22);box-shadow:0 14px 24px rgba(0,0,0,.35)}
  .sj-zone .sj-menu-bouton[aria-expanded=true] + .sj-nav a{display:flex;align-items:center;flex:none;min-height:44px;
    padding:8px;font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.1)}
  /* Menu ouvert : au survol, le filet qui separe les liens passe a l'or. */
  .sj-zone .sj-menu-bouton[aria-expanded=true] + .sj-nav a:not([aria-current]):hover{border-bottom-color:var(--accent-or)}
  .sj-zone .sj-menu-bouton[aria-expanded=true] + .sj-nav a[aria-current]{box-shadow:inset 3px 0 0 var(--accent-or);padding-left:14px}
}
/* L'en-tete est collant : sans marge de defilement haute, un element qui prend
   le focus en remontant (Maj+Tab) ou la cible d'une ancre s'arrete au bord haut,
   SOUS lui (WCAG 2.4.11). La marge reserve sa hauteur, a toutes les largeurs. */
html{scroll-padding-top:var(--degagement-entete)}
/* Sous 620 px, la largeur va au logo : le bouton d'essai quitte l'en-tete (la
   barre mobile et le premier ecran le portent) et le bouton du menu ne garde
   que son pictogramme, son libelle restant lu par les lecteurs d'ecran. A
   375 px le logo tient ses 300 px ; en dessous il se reduit avec l'ecran.
   L'en-tete porte lui-meme la classe de zone : le selecteur les accole. */
@media(max-width:620px){
  .sj-entete .sj-wrap{gap:10px;width:calc(100% - 20px)}
  .sj-zone.sj-entete .sj-btn{display:none}
  .sj-zone .sj-menu-bouton{justify-content:center;width:44px;padding:0}
  .sj-menu-bouton .sj-menu-libelle{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- boutons ---------- */
.sj-zone .sj-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 26px;border-radius:var(--rayon-bouton);border:2px solid transparent;
  font:700 .8rem/1 var(--corps);text-decoration:none;cursor:pointer;text-align:center;
  transition:transform var(--duree-courte),background var(--duree-courte)}
.sj-zone .sj-btn:active{transform:translateY(1px)}
.sj-zone .sj-btn-1{background:var(--accent-or);color:var(--texte-fort)}
.sj-zone .sj-btn-1:hover{background:#E3B463;color:var(--texte-fort)}
/* Le bouton secondaire porte souvent un lien "tel:" : sa couleur doit l'emporter
   sur la regle des liens telephoniques (defaut mesure : 1,02 sur la barre mobile). */
.sj-zone .sj-btn-2,.sj-zone a.sj-btn-2[href]{background:transparent;color:#fff !important;border-color:rgba(255,255,255,.55)}
.sj-zone .sj-btn-2:hover{border-color:#fff}
.sj-zone .sj-btn-3{background:var(--texte-fort);color:#fff}
.sj-zone .sj-btn-3:hover{color:#fff}
.sj-zone .sj-btn-min{min-height:44px;padding:10px 18px;font-size:.8rem}
.sj-zone .sj-btn-large{width:100%}

/* ---------- premier ecran de l'accueil ---------- */
.sj-hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--fond-sombre);color:#fff}
.sj-hero-media{position:absolute;inset:0}
.sj-zone .sj-hero-media img,.sj-hero-media video{position:absolute;inset:0;width:100%;height:100% !important;
  max-width:none;object-fit:cover;object-position:14% 30%;border-radius:0}
.sj-hero-contenu{position:relative;z-index:2;padding:var(--e6) 0 var(--e5)}
/* Le voile est limite au bas de l'image : il est accroche au bloc de texte,
   qu'il couvre en entier quelle que soit sa hauteur, puis s'efface en 72 px
   au-dessus de lui. Le haut de la photo reste nu. Le contraste du texte se
   mesure sur les pixels du rendu (un voile cale sur l'image laissait le titre
   a 1,44 a 768 px). */
.sj-hero-contenu::before{content:"";position:absolute;z-index:-1;left:50%;bottom:0;
  top:calc(-1 * var(--fondu-premier-ecran));width:100vw;transform:translateX(-50%);
  background:linear-gradient(to top,rgba(var(--fond-sombre-rvb),var(--voile-premier-ecran)) 0,
    rgba(var(--fond-sombre-rvb),var(--voile-premier-ecran)) calc(100% - var(--fondu-premier-ecran)),
    rgba(var(--fond-sombre-rvb),0) 100%)}
.sj-zone .sj-hero h1{font-size:clamp(1.68rem,6vw,3.12rem);line-height:1.12;max-width:14ch;text-wrap:balance;
  text-shadow:0 2px 28px rgba(0,0,0,.55)}
/* L'accroche se lit comme le titre : blanc (--texte-sombre-fort), 18 px au
   moins, 20 px des 900 px de large (regle plus bas). Le gris doux la laissait a
   10:1 sur la photo ; le blanc la porte au-dessus de 12:1 au 5e centile. */
.sj-zone .sj-accroche{color:var(--texte-sombre-fort);font-size:.9rem;font-weight:400;
  max-width:46ch;margin:var(--e3) 0 0}
/* Une mention, pas une commande : ni bordure, ni fond, ni forme arrondie. Dans
   son ancienne pastille doree, elle se lisait comme un bouton. La coche reste
   doree, le texte passe en blanc (--texte-sombre-fort) : 7:1 au moins. */
.sj-zone .sj-objection{display:flex;align-items:flex-start;gap:10px;margin:var(--e3) 0 var(--e4);
  color:var(--texte-sombre-fort);font-weight:700;font-size:.8rem}
.sj-objection svg{flex:none;margin-top:.3em;color:var(--accent-or)}
/* Le meme premier ecran ouvre /l-ecole (.sj-avec-photo), avec un texte
   d'introduction long. Sous 900 px ce texte laisse le haut de l'ecran a la
   photo : c'est une MARGE et non un remplissage, le voile couvre la boite du
   texte (un remplissage l'etendrait sur les visages). */
.sj-zone .sj-hero p.sj-intro{color:var(--texte-sombre-doux);margin:var(--e3) 0 0}
@media(max-width:900px){
  .sj-hero.sj-avec-photo .sj-hero-contenu{margin-top:min(44svh,320px);padding-top:var(--e2)}
  .sj-zone .sj-hero.sj-avec-photo .sj-hero-media img{object-position:14% 12%}
}
.sj-hero-actions,.sj-actions{display:flex;flex-wrap:wrap;gap:var(--e2)}
/* MOBILE : on coupe. L'action secondaire vit dans la barre persistante. */
@media(max-width:620px){
  .sj-hero{min-height:min(78svh,640px)}
  .sj-hero-contenu{padding:var(--e4) 0 var(--e3)}
  .sj-zone .sj-hero h1{font-size:1.6rem;max-width:16ch}
  .sj-zone .sj-accroche{margin-top:var(--e2)}
  .sj-accroche .sj-detail-long{display:none}
  .sj-zone .sj-objection{margin:var(--e2) 0 var(--e3)}
  .sj-zone .sj-hero-actions .sj-btn-2{display:none}
  .sj-zone .sj-hero-actions .sj-btn-1{width:100%}
}
/* La contrainte est ici la HAUTEUR : la regle interroge la hauteur. */
@media(max-height:820px){
  .sj-hero-contenu{padding:var(--e4) 0 var(--e3)}
  .sj-zone .sj-hero h1{font-size:clamp(1.4rem,4.2vw,2.08rem)}
  .sj-zone .sj-accroche{margin-top:var(--e2)}
  .sj-zone .sj-objection{margin:var(--e2) 0 var(--e3)}
}
@media(max-height:640px){
  .sj-zone .sj-accroche{display:none}
  .sj-zone .sj-hero h1{font-size:1.36rem}
}
/* Accroche : 20 px au moins des 900 px de large, quelle que soit la hauteur de
   l'ecran (cette regle suit celles de hauteur et l'emporte sur elles). */
@media(min-width:900px){.sj-zone .sj-accroche{font-size:clamp(1rem,1.6vw,1.1rem)}}
/* Au-dessus de 900 px : la photo a gauche, le texte a droite, sur la partie
   noire de l'image. L'image est calee a gauche, le couple reste entier ; le
   voile ne couvre que la moitie du texte. Ces regles suivent celles de hauteur :
   elles l'emportent sur elles pour le calage, pas pour les tailles. */
@media(min-width:901px){
  .sj-hero{align-items:center;min-height:min(92vh,820px)}
  .sj-zone .sj-hero-media img,.sj-hero-media video{object-position:left 30%}
  .sj-hero-media::after{content:"";position:absolute;inset:0;
    background:linear-gradient(to right,rgba(var(--fond-sombre-rvb),0) 40%,
    rgba(var(--fond-sombre-rvb),.6) 56%,rgba(var(--fond-sombre-rvb),.72) 100%)}
  .sj-hero-contenu::before{content:none}
  .sj-hero-contenu{display:flex;justify-content:flex-end;padding-bottom:var(--e4)}
  .sj-hero-texte{width:46%}
}
/* Premier ecran avec video en boucle (accueil, .sj-avec-video).
   Sous 900 px : une bande en haut, qui prend toute la hauteur que le texte
   n'occupe pas ; le voile du texte la fond dans le sombre, le texte est
   dessous. Au-dessus : la video est en PLEIN FOND, comme la photo de /l-ecole
   (arbitrage du CEO, 2026-10-08) - elle couvre le premier ecran en entier et
   passe sous le bandeau flottant, SANS VOILE en haut. Le texte est EN LIGNE,
   en bandeau au bas du premier ecran, sur la largeur du conteneur : le titre
   sur une ligne ou deux, puis l'accroche et la mention a gauche, les deux
   boutons a droite. En colonne a droite, son degrade couvrait l'un des deux
   enseignants. Le voile du bandeau est celui du texte sous 900 px : plein
   (--voile-premier-ecran) sous le texte, puis fondu vers le haut sur
   --fondu-premier-ecran. */
.sj-hero.sj-avec-video .sj-media{position:absolute;inset:0;background:var(--fond-sombre)}
.sj-zone .sj-hero .sj-media img,.sj-hero .sj-media video{position:absolute;inset:0;width:100%;height:100% !important;
  max-width:none;object-fit:cover;object-position:50% 62%;border-radius:0}
@media(max-width:900px){
  .sj-hero.sj-avec-video{flex-direction:column;align-items:stretch}
  .sj-hero.sj-avec-video .sj-media{position:relative;inset:auto;flex:1 1 auto;min-height:min(24svh,200px)}
  .sj-hero.sj-avec-video .sj-hero-contenu{flex:none;padding-top:var(--e4)}
}
/* Entre 621 et 900 px l'ecran est haut : la bande l'est aussi. A 200 px elle
   ne montrait qu'une tranche de l'image, les tetes au bord (vu a 768 px). */
@media(min-width:621px) and (max-width:900px){.sj-hero.sj-avec-video .sj-media{min-height:min(34svh,340px)}}
@media(min-width:901px){
  .sj-hero.sj-avec-video{align-items:flex-end}
  .sj-hero.sj-avec-video .sj-hero-contenu{display:block;padding:var(--e3) 0 var(--e4)}
  .sj-hero.sj-avec-video .sj-hero-contenu::before{content:""}
  .sj-hero.sj-avec-video .sj-hero-texte{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:var(--e1) var(--e4);align-items:center}
  .sj-zone .sj-hero.sj-avec-video h1{grid-column:1 / -1;max-width:none;font-size:clamp(1.7rem,3.3vw,2.5rem);
    margin-bottom:var(--e1)}
  .sj-zone .sj-hero.sj-avec-video .sj-accroche{grid-column:1;max-width:none;margin:0}
  .sj-zone .sj-hero.sj-avec-video .sj-objection{grid-column:1;margin:0}
  .sj-hero.sj-avec-video .sj-hero-actions{grid-column:2;grid-row:2 / span 2;flex-wrap:nowrap}
  /* le bandeau flottant survole le haut du premier ecran, le texte en tient le
     bas : le controle se range a droite, sous le bandeau flottant */
  .sj-zone .sj-hero .sj-pause{top:calc(var(--degagement-entete) + var(--e1))}
}
/* controle de pause - WCAG 2.2.2, cible 48 px. N'existe que si une video joue. */
.sj-zone .sj-pause{position:absolute;right:var(--e3);top:var(--e3);z-index:4;
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);padding:0;
  background:rgba(var(--fond-sombre-rvb),.72);color:#fff;cursor:pointer;display:grid;place-items:center}
.sj-zone .sj-pause[hidden]{display:none}
/* Le controle est pose sur une video : son anneau or tombait a 1,03 contre un
   plan clair. Un filet sombre l'entoure, comme sur les facades : l'or est
   toujours lu contre du sombre, quelle que soit l'image. */
.sj-zone .sj-pause:focus-visible{outline:3px solid var(--accent-or);outline-offset:2px;border-radius:50%;
  box-shadow:0 0 0 9px var(--fond-sombre)}
.sj-pause:hover{background:rgba(var(--fond-sombre-rvb),.92)}
.sj-pause svg{width:17px;height:17px;fill:currentColor}
.sj-pause .sj-ico-lecture{display:none}
.sj-pause[aria-pressed=true] .sj-ico-lecture{display:block}
.sj-pause[aria-pressed=true] .sj-ico-pause{display:none}

/* ---------- bande de preuve ---------- */
.sj-preuve{background:var(--fond-sombre);border-top:1px solid rgba(212,162,76,.2);padding:var(--e4) 0}
.sj-zone .sj-preuve ul{list-style:none;display:grid;gap:var(--e3);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));text-align:center}
.sj-preuve b{display:block;font:400 1.4rem/1.1 var(--titre);color:var(--accent-or)}
.sj-preuve span{color:var(--texte-sombre-doux);font-size:.8rem}

/* ---------- sections ---------- */
.sj-section{padding:var(--e6) 0}
.sj-douce{background:var(--surface-douce);border-block:1px solid var(--filet)}
.sj-section.sj-sombre{background:var(--fond-sombre);color:#fff}
.sj-centre{text-align:center}
.sj-titre-sec{max-width:52ch;margin-bottom:var(--e4)}
.sj-zone .sj-titre-sec p{color:var(--texte-doux);margin:var(--e2) 0 0}
.sj-zone .sj-sombre .sj-titre-sec p{color:var(--texte-sombre-doux)}
.sj-centre .sj-titre-sec{margin-inline:auto}
/* L'or ne porte pas de texte sur fond clair (2,92 a 3,24 mesures) : il souligne. */
.sj-surligne{text-decoration:underline;text-decoration-color:var(--accent-or);text-decoration-thickness:.12em;
  text-underline-offset:.14em}
.sj-accueil h2{font-size:clamp(1.28rem,3.6vw,2rem)}
.sj-zone .sj-doux{color:var(--texte-doux)}
.sj-zone .sj-lien{color:var(--texte-fort);font-weight:700;text-decoration-color:var(--accent-or-appui);
  text-decoration-thickness:2px;text-underline-offset:3px}
@media(max-width:620px){.sj-section{padding:var(--e5) 0}}

/* ---------- evenement date (bootcamp) : surtitre, liste de details, actions.
   Le surtitre et les details restent a la taille du corps : aucun petit texte. */
.sj-zone .sj-titre-sec p.sj-surtitre{font-weight:700;color:var(--texte-doux);margin:0 0 var(--e1)}
.sj-zone .sj-details{margin:0;max-width:760px;padding:var(--e1) var(--e3)}
.sj-details > div{display:grid;grid-template-columns:130px 1fr;gap:4px var(--e3);padding:var(--e2) 0}
.sj-details > div + div{border-top:1px solid var(--filet)}
.sj-zone .sj-details dt{font-weight:700;margin:0}
.sj-zone .sj-details dd{margin:0}
@media(max-width:620px){.sj-details > div{grid-template-columns:1fr}}
.sj-bootcamp .sj-actions{align-items:center;gap:var(--e2) var(--e3);margin-top:var(--e4)}
.sj-zone .sj-bootcamp .sj-mention{font-size:.8rem;margin-top:var(--e2)}

/* ---------- en-tete de page interieure ---------- */
.sj-chapeau{background:var(--fond-sombre);color:#fff;padding:var(--e6) 0 var(--e5)}
.sj-zone .sj-fil{font:700 .8rem/1 var(--corps);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-or);margin-bottom:var(--e2)}
.sj-zone .sj-chapeau h1{max-width:18ch;text-wrap:balance}
.sj-zone .sj-chapeau p.sj-intro{color:var(--texte-sombre-doux);max-width:56ch;margin:var(--e3) 0 0}
.sj-chapeau .sj-actions{margin-top:var(--e4)}
@media(max-width:620px){.sj-chapeau{padding:var(--e5) 0 var(--e4)}}

/* ---------- premier ecran photo (lady style) ---------- */
.sj-heropic{position:relative;min-height:min(72vh,620px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--fond-sombre);color:#fff}
.sj-heropic .sj-media{position:absolute;inset:0;
  background:radial-gradient(60% 80% at 68% 32%,rgba(242,164,19,.26),transparent 62%),
             radial-gradient(70% 90% at 18% 70%,rgba(212,162,76,.22),transparent 64%),
             linear-gradient(155deg,#3A2A1A,var(--fond-sombre) 62%)}
.sj-heropic .sj-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--fond-sombre-rvb),.94) 8%,rgba(var(--fond-sombre-rvb),.5) 48%,rgba(var(--fond-sombre-rvb),.2) 100%)}
.sj-heropic .sj-dedans{position:relative;z-index:2;padding:var(--e6) 0 var(--e4)}
.sj-zone .sj-heropic h1{max-width:15ch}
/* Une mention, pas une commande, comme celle de l'accueil (.sj-objection) : ni
   bordure, ni fond, ni forme arrondie. La coche reste doree, le texte est
   blanc (--texte-sombre-fort). */
.sj-zone .sj-certif-ligne{display:flex;align-items:flex-start;gap:10px;margin:var(--e3) 0 0;
  color:var(--texte-sombre-fort);font-weight:700;font-size:.8rem}
.sj-certif-ligne svg{flex:none;margin-top:.3em;color:var(--accent-or)}
.sj-zone .sj-heropic p.sj-intro{color:var(--texte-sombre-doux);max-width:46ch;margin:var(--e3) 0 0}
.sj-heropic .sj-actions{margin-top:var(--e4)}
@media(max-height:820px){.sj-heropic .sj-dedans{padding:var(--e4) 0 var(--e3)}.sj-zone .sj-heropic h1{font-size:1.6rem}}

/* Premier ecran avec video en boucle (lady style) : le principe de l'accueil.
   Sous 900 px : une bande en haut, que le voile du texte fond dans le sombre.
   Au-dessus : la video est en PLEIN FOND, sous le bandeau flottant, sans
   voile en haut ; le texte est en bandeau au bas du premier ecran, sur la
   largeur du conteneur - surtitre et titre, puis la mention et
   l'introduction a gauche, le bouton a droite. */
.sj-heropic.sj-avec-video .sj-media{background:var(--fond-sombre)}
.sj-heropic.sj-avec-video .sj-media::after{content:none}
.sj-zone .sj-heropic .sj-media img,.sj-heropic .sj-media video{position:absolute;inset:0;width:100%;
  height:100% !important;max-width:none;object-fit:cover;object-position:center 60%;border-radius:0}
.sj-heropic.sj-avec-video .sj-dedans::before{content:"";position:absolute;z-index:-1;left:50%;bottom:0;
  top:calc(-1 * var(--fondu-premier-ecran));width:100vw;transform:translateX(-50%);
  background:linear-gradient(to top,rgba(var(--fond-sombre-rvb),var(--voile-premier-ecran)) 0,
    rgba(var(--fond-sombre-rvb),var(--voile-premier-ecran)) calc(100% - var(--fondu-premier-ecran)),
    rgba(var(--fond-sombre-rvb),0) 100%)}
@media(max-width:900px){
  .sj-heropic.sj-avec-video{flex-direction:column;align-items:stretch}
  .sj-heropic.sj-avec-video .sj-media{position:relative;inset:auto;flex:1 1 auto;min-height:min(34svh,260px)}
  .sj-heropic.sj-avec-video .sj-dedans{flex:none;padding-top:var(--e2)}
}
@media(min-width:901px){
  .sj-heropic.sj-avec-video{min-height:min(90vh,780px)}
  .sj-heropic.sj-avec-video .sj-dedans{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:var(--e1) var(--e4);align-items:center;padding:var(--e3) 0 var(--e4)}
  .sj-zone .sj-heropic.sj-avec-video .sj-dedans > *{max-width:none;margin:0}
  .sj-zone .sj-heropic.sj-avec-video .sj-fil,.sj-zone .sj-heropic.sj-avec-video h1{grid-column:1 / -1}
  .sj-zone .sj-heropic.sj-avec-video h1{margin-bottom:var(--e1)}
  .sj-zone .sj-heropic.sj-avec-video .sj-certif-ligne,.sj-zone .sj-heropic.sj-avec-video p.sj-intro{grid-column:1}
  .sj-heropic.sj-avec-video .sj-actions{grid-column:2;grid-row:3 / span 2}
  /* le bandeau flottant survole le haut du premier ecran, le texte en tient le
     bas : le controle se range a droite, sous le bandeau flottant */
  .sj-zone .sj-heropic .sj-pause{top:calc(var(--degagement-entete) + var(--e1))}
}

/* ---------- cartes, deux colonnes ---------- */
.sj-carte{background:var(--surface);border:1px solid var(--filet);border-radius:var(--rayon-carte);
  box-shadow:var(--ombre-carte)}
.sj-deux{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5);align-items:start}
@media(max-width:900px){.sj-deux{grid-template-columns:1fr;gap:var(--e4)}}
.sj-deux h2{margin-bottom:var(--e3)}

/* ---------- cadre de repli : tient la place d'une photographie a venir.
   Aucun texte visible du public. ---------- */
.sj-photo{border-radius:var(--rayon-carte);overflow:hidden;aspect-ratio:4/3;
  background:radial-gradient(70% 90% at 24% 20%,rgba(242,164,19,.20),transparent 62%),
             linear-gradient(145deg,#3A2A16,#151210)}
.sj-photo.sj-portrait{aspect-ratio:3/4}
/* une photo publiee garde son format d'origine et remplit son cadre */
.sj-photo.sj-a-image,.sj-jour .sj-photo.sj-a-image{aspect-ratio:3/2;background:var(--surface-douce)}
.sj-zone .sj-photo img{display:block;width:100%;height:100% !important;max-width:none;object-fit:cover;border-radius:0}
/* une photo de personnes n'est pas recadree : le cadre prend ses proportions */
.sj-photo.sj-naturelle{aspect-ratio:auto;background:none}
.sj-zone .sj-photo.sj-naturelle img{height:auto !important}

/* ---------- formulaire ---------- */
.sj-form{padding:var(--e4)}
.sj-champ{margin-bottom:var(--e3)}
.sj-zone .sj-champ label{display:block;font-weight:700;font-size:.8rem;margin-bottom:7px}
.sj-zone .sj-champ input,.sj-zone .sj-champ select,.sj-zone .sj-champ textarea{width:100%;min-height:48px;
  padding:12px 14px;font:inherit;border:1px solid var(--bord-champ);border-radius:var(--rayon-champ);
  background:#fff;color:var(--texte-fort)}
.sj-zone .sj-champ textarea{min-height:140px;resize:vertical}
/* Un champ editable deja visible en partie quand il prend le focus n'est ramene
   a l'ecran que par son curseur : aucune marge de defilement, de la page ou du
   champ, ne gouverne ce geste du navigateur (une marge posee ici a ete essayee
   et retiree : elle ne tenait que pour une position de depart du champ). Le
   remede est dans assets/js/site.js, "champ de formulaire". */
.sj-champ .sj-aide{display:block;color:var(--texte-doux);font-size:.8rem;margin-top:6px}
.sj-zone .sj-err{display:none;color:var(--alerte);font-size:.8rem;font-weight:700;margin:6px 0 0}
.sj-zone .sj-en-erreur .sj-err{display:block}
.sj-zone .sj-en-erreur input,.sj-zone .sj-en-erreur select,.sj-zone .sj-en-erreur textarea{
  border-color:var(--alerte);border-width:2px}
.sj-consent{margin:var(--e3) 0}
.sj-zone .sj-consent label{display:flex;gap:11px;align-items:flex-start;font-size:.8rem;color:var(--texte-doux)}
.sj-zone .sj-consent input{width:24px;height:24px;flex:none;margin:1px 0 0}
/* champ piege : invisible et hors tabulation, il ne se remplit pas a la main */
.sj-piege{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.sj-zone .sj-mention{font-size:.8rem;color:var(--texte-doux);margin:var(--e3) 0 0}
.sj-zone .sj-rassure{list-style:none;margin:var(--e3) 0 0;display:grid;gap:9px;font-size:.8rem;color:var(--texte-doux)}
.sj-rassure li{display:flex;gap:9px;align-items:flex-start}
.sj-rassure svg{width:16px;height:16px;flex:none;margin-top:3px;fill:var(--succes)}
.sj-zone .sj-rassure b{color:var(--texte-fort)}
.sj-zone .sj-inversion{margin:var(--e3) 0 0;padding:var(--e2) 18px;border-left:3px solid var(--accent-or-appui);
  background:#FBF6EC;font-size:.8rem;color:var(--texte-fort)}
.sj-etat{padding:var(--e4);text-align:center}
.sj-etat svg{width:46px;height:46px;fill:var(--succes)}
.sj-zone .sj-etat h3{margin:var(--e2) 0 8px}
.sj-zone .sj-etat p{color:var(--texte-doux);font-size:.8rem}
.sj-zone .sj-refus{margin:0 0 var(--e3);padding:var(--e2) 18px;border-left:3px solid var(--alerte);
  background:var(--surface-douce);color:var(--alerte);font-weight:700;font-size:.8rem}

/* ---------- planning actionnable ---------- */
.sj-jours{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e3)}
@media(max-width:980px){.sj-jours{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.sj-jours{grid-template-columns:1fr}}
.sj-jour{overflow:hidden;display:flex;flex-direction:column}
/* cadre de repli et photo de salle au meme format, 3:2 : les cartes gardent
   la meme hauteur d'image, qu'une salle ait sa photo ou non */
.sj-jour .sj-photo{aspect-ratio:3/2;border-radius:0}
.sj-jour-corps{padding:var(--e3);display:flex;flex-direction:column;gap:12px;flex:1}
.sj-zone .sj-jour h3{font-family:var(--corps) !important;font-weight:800;font-size:.84rem}
.sj-zone .sj-lieu{font-size:.8rem;color:var(--texte-doux);line-height:1.45;margin:0}
.sj-jour .sj-creneau{border-top:1px solid var(--filet);padding-top:12px;display:flex;align-items:center;
  gap:12px;flex-wrap:wrap}
.sj-creneau .sj-h{font-weight:800;font-variant-numeric:tabular-nums;font-size:.8rem}
.sj-creneau .sj-d{font-size:.8rem;color:var(--texte-doux);margin-right:auto}
.sj-zone .sj-jour .sj-creneau .sj-btn{min-height:44px;padding:11px 16px;font-size:.8rem}
/* liste de creneaux des pages interieures */
.sj-creneaux{display:grid;gap:var(--e2)}
.sj-creneaux .sj-creneau{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;padding:var(--e3)}
.sj-creneaux .sj-creneau .sj-h{font-size:.84rem;min-width:70px}
.sj-creneaux .sj-creneau .sj-d{font-size:.8rem}
.sj-creneau .sj-l{display:block;font-size:.8rem;color:var(--texte-doux)}
@media(max-width:420px){.sj-zone .sj-creneaux .sj-creneau .sj-btn{width:100%}}
.sj-zone .sj-ligne-tarifs{margin:var(--e4) 0 0;font-size:.8rem;color:var(--texte-doux)}

/* ---------- certificats : badge en TEXTE SEUL, piece au clic ---------- */
.sj-badges{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3)}
@media(max-width:820px){.sj-badges{grid-template-columns:1fr}}
.sj-badge{display:flex;gap:var(--e3);align-items:center;padding:var(--e3)}
.sj-badge-txt{flex:1;min-width:0}
.sj-badge-surtitre{display:block;font:800 .8rem/1.3 var(--corps);letter-spacing:.12em;
  text-transform:uppercase;color:var(--texte-doux);margin-bottom:7px}
.sj-badge-txt b{display:block;font-size:.8rem}
.sj-badge-txt .sj-detail{display:block;color:var(--texte-doux);font-size:.8rem;margin-top:3px}
.sj-badge-txt .sj-badge-mention{margin-top:8px;font-weight:700}
.sj-badge-actions{display:flex;flex-direction:column;gap:8px}
/* Sous 420 px le badge s'empile : en ligne, il debordait. */
@media(max-width:420px){
  .sj-badge{flex-direction:column;align-items:flex-start;gap:var(--e2)}
  .sj-badge-actions,.sj-zone .sj-badge .sj-btn{width:100%}
}
/* section certificats de /l-ecole : la photo, et les badges en une colonne a sa droite */
.sj-certifs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--e4);align-items:start}
@media(max-width:860px){.sj-certifs{grid-template-columns:1fr}}
.sj-badges.sj-colonne{grid-template-columns:1fr}
/* citation */
.sj-zone blockquote.sj-citation{margin:var(--e3) 0 0;padding:var(--e2) 18px;border:0;
  border-left:3px solid var(--accent-or-appui);background:var(--surface-douce);font-size:.8rem;font-weight:400;
  line-height:1.65;color:var(--texte-fort)}
.sj-zone .sj-citation footer{margin-top:8px;font-size:.8rem;color:var(--texte-doux)}
/* canaux de contact */
.sj-zone .sj-canaux{list-style:none;display:grid;gap:var(--e2);margin:var(--e3) 0 0}
.sj-canaux b{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--texte-doux)}
.sj-zone .sj-canaux a.sj-grand{font-size:1.1rem;font-weight:800;text-decoration:none}
.sj-zone .sj-liste{margin:0 0 var(--e2);padding-left:20px}
/* piece ouverte au clic */
.sj-zone dialog.sj-piece{border:0;padding:0;border-radius:var(--rayon-carte);background:#fff;
  color:var(--texte-fort);max-width:min(720px,calc(100vw - 2*var(--e3)));width:100%;max-height:90vh}
dialog.sj-piece::backdrop{background:rgba(var(--fond-sombre-rvb),.86)}
.sj-piece .sj-cadre{padding:var(--e3)}
.sj-zone .sj-piece h2{font-size:1rem}
.sj-zone .sj-piece img{display:block;width:100%;height:auto !important;border-radius:10px;margin-top:var(--e3)}
.sj-zone .sj-piece .sj-note{margin:var(--e3) 0 0;font-size:.8rem;color:var(--texte-doux)}
.sj-piece .sj-btn{margin-top:var(--e3)}

/* ---------- facade video : rien ne part chez un tiers avant le clic ---------- */
.sj-facades{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3)}
@media(max-width:820px){.sj-facades{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.sj-facades{grid-template-columns:1fr}}
.sj-facades.sj-une{grid-template-columns:minmax(0,640px)}
.sj-facade-cadre{position:relative;aspect-ratio:16/9;border-radius:var(--rayon-carte);overflow:hidden;
  background:linear-gradient(150deg,#3B2B17,#141110)}
.sj-zone .sj-facade{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  background:transparent;display:grid;place-items:center;border-radius:var(--rayon-carte);color:#fff;
  text-decoration:none}
.sj-zone .sj-facade img{position:absolute;inset:0;width:100%;height:100% !important;max-width:none;
  object-fit:cover;border-radius:0}
/* Le bouton nomme la plateforme : c'est l'information due avant le clic. Fond
   opaque, pour que son texte ne depende jamais de la vignette. Sur une facade
   etroite, le libelle passe sur deux lignes. */
.sj-facade .sj-lire{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:44px;
  max-width:calc(100% - 2*var(--e2));padding:10px 18px;border-radius:var(--rayon-bouton);
  background:var(--accent-or);color:var(--texte-fort);font:700 .8rem/1.25 var(--corps);text-align:left;
  box-shadow:0 2px 14px rgba(var(--fond-sombre-rvb),.45);transition:transform var(--duree-courte)}
.sj-facade:hover .sj-lire{transform:scale(1.04)}
.sj-facade .sj-lire svg{width:16px;height:16px;flex:none;fill:currentColor}
/* Le titre vit SOUS le cadre, sur le fond de la page : il ne recouvre ni la
   vignette ni le bouton, et son contraste ne depend pas de l'image. */
.sj-zone .sj-video figcaption{margin-top:var(--e1);font-size:.8rem;font-weight:700;line-height:1.4}
.sj-facade-cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Focus d'une facade. Le cadre coupe tout ce qui depasse (overflow:hidden), et
   le contour de la facade elle-meme passe SOUS sa vignette : l'anneau du site y
   etait invisible. L'indicateur est donc porte par un pseudo-element pose
   au-dessus de la vignette, DANS le cadre, et il est double pour rester lisible
   sur n'importe quelle image : un anneau or (de 4 a 7 px du bord) entre deux
   filets sombres (de 0 a 10 px). C'est un vrai contour : il survit au mode de
   contraste eleve du systeme. */
.sj-zone .sj-facade:focus-visible{outline:3px solid var(--accent-or);outline-offset:-7px;border-radius:var(--rayon-carte)}
.sj-facade:focus-visible::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;outline:3px solid var(--accent-or);outline-offset:-7px;
  box-shadow:inset 0 0 0 10px var(--fond-sombre)}
/* lien discret vers le detail, dans la politique de confidentialite */
.sj-zone .sj-tiers{margin:var(--e3) 0 0;font-size:.8rem;color:var(--texte-doux)}
.sj-zone .sj-tiers a{text-decoration-color:var(--accent-or-appui);text-underline-offset:3px}

/* ---------- opposition a la mesure d'audience ---------- */
.sj-zone.sj-opposition{margin:var(--e3) 0;padding:var(--e3);border:1px solid var(--filet);border-left:3px solid var(--accent-or-appui);
  border-radius:var(--rayon-champ);background:var(--surface);max-width:60ch}
.sj-opposition .sj-consent{margin:0}
.sj-zone.sj-opposition .sj-consent label{font-size:.8rem;font-weight:700;color:var(--texte-fort)}
.sj-zone .sj-opposition-etat{margin:12px 0 0;font-size:.8rem;color:var(--texte-doux)}
.sj-zone .sj-opposition-etat:empty{display:none}

/* ---------- texte long (politique de confidentialite) ---------- */
.sj-prose > h2{margin:var(--e5) 0 var(--e2);max-width:40ch}
.sj-prose > h2:first-child{margin-top:0}
.sj-prose > p,.sj-prose > ul,.sj-prose > ol{max-width:76ch}
.sj-zone .sj-prose ul,.sj-zone .sj-prose ol{margin:0 0 var(--e2);padding-left:22px}
.sj-zone .sj-prose li{margin-bottom:6px}
.sj-zone .sj-prose li ul{margin:6px 0 0}
.sj-zone .sj-prose a{color:var(--texte-fort);text-decoration-color:var(--accent-or-appui);text-decoration-thickness:2px;
  text-underline-offset:3px}
/* tableau : il defile dans sa region sur un petit ecran, la page ne deborde pas */
.sj-tableau{overflow-x:auto;margin:0 0 var(--e3);border:1px solid var(--filet);border-radius:var(--rayon-champ);
  background:var(--surface)}
.sj-zone .sj-tableau table{border-collapse:collapse;width:100%;min-width:760px;font-size:.8rem;color:var(--texte-fort)}
.sj-zone .sj-tableau th,.sj-zone .sj-tableau td{padding:12px 14px;text-align:left;vertical-align:top;
  border:0;border-bottom:1px solid var(--filet);font-weight:400}
.sj-zone .sj-tableau thead th{background:var(--surface-douce);font-weight:800}
.sj-zone .sj-tableau tbody tr:last-child th,.sj-zone .sj-tableau tbody tr:last-child td{border-bottom:0}

/* ---------- questions frequentes ---------- */
.sj-faq{display:grid;gap:var(--e2);margin-top:var(--e4)}
.sj-faq details{padding:var(--e3)}
.sj-faq summary{font-weight:800;cursor:pointer;min-height:28px}
.sj-zone .sj-faq p{margin:12px 0 0;color:var(--texte-doux);font-size:.8rem}

/* ---------- emplacement reserve : conteneur de la bascule vers le widget.
   Il ne porte aucun habillage propre : le composant provisoire le remplit
   aujourd'hui, le widget le remplira demain, aux memes jetons. ---------- */
.sj-emplacement{display:block}

/* ---------- marges d'appoint, aux crans de l'echelle ---------- */
.sj-zone .sj-m0{margin-top:0}
.sj-zone .sj-mt3{margin:var(--e3) 0 0}
.sj-zone .sj-mt4{margin:var(--e4) 0 0}

/* ---------- pied ---------- */
.sj-pied{background:var(--fond-sombre);color:var(--texte-sombre-doux);padding:var(--e5) 0 120px;font-size:.8rem}
.sj-zone.sj-pied a{color:var(--texte-sombre-doux)}
.sj-zone.sj-pied a.sj-btn-1{color:var(--texte-fort)}
/* minmax(0, ...) : une colonne ne s'elargit pas pour un mot long. Au texte
   agrandi, l'adresse de courriel poussait la colonne "Nous joindre" hors de la
   page a 768 px ; elle se coupe desormais dans sa colonne. */
.sj-pied-grille{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--e4)}
@media(max-width:760px){.sj-pied-grille{grid-template-columns:minmax(0,1fr)}}
.sj-zone.sj-pied h2{color:#fff;font:800 .8rem/1.3 var(--corps) !important;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:var(--e2)}
.sj-zone.sj-pied p{color:var(--texte-sombre-doux) !important;max-width:36ch}
.sj-zone.sj-pied ul{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
/* le numero et l'adresse de courriel se coupent plutot que de sortir de leur colonne */
.sj-zone.sj-pied a{overflow-wrap:anywhere}
.sj-zone.sj-pied a.sj-tel{color:#fff !important;font-weight:700;white-space:normal}
.sj-zone.sj-pied .sj-espace{margin-top:var(--e2)}
.sj-zone.sj-pied p.sj-droits{margin:var(--e3) 0 0;font-size:.8rem}

/* ---------- barre d'action persistante - mobile ---------- */
.sj-barre-mobile{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:10px;
  padding:10px var(--e2) calc(10px + env(safe-area-inset-bottom));
  background:rgba(var(--fond-sombre-rvb),.97);box-shadow:var(--ombre-flottant);
  border-top:1px solid rgba(212,162,76,.3)}
.sj-zone.sj-barre-mobile .sj-btn{flex:1}
@media(max-width:900px){.sj-barre-mobile[data-visible=true]{display:flex}}
/* La barre est fixee en bas d'ecran : sans marge de defilement, le navigateur
   amene l'element qui prend le focus au bord bas, SOUS elle (WCAG 2.4.11 ;
   mesure : 176 arrets de tabulation sur 1 480 caches en entier). La marge
   reserve la hauteur de la barre, encoche de l'ecran comprise. */
@media(max-width:900px){html{scroll-padding-bottom:calc(var(--degagement-barre) + env(safe-area-inset-bottom,0px))}}

/* ---------- bandeau flottant : en-tete au-dessus de 900 px ----------
   Centre, a la largeur du conteneur, bords arrondis, pose sur le premier ecran.
   Il est FIXE : il reste lisible en descendant la page. Il ne prend donc aucune
   place dans le flux, et chaque premier bloc de page lui reserve sa hauteur
   (--degagement-entete) ; la page au balisage d'origine s'ouvre sur un bandeau
   photo, qu'il survole comme un premier ecran. Son fond translucide est celui
   de l'en-tete collant, plus haut (--opacite-entete) : la navigation tient son
   contraste meme quand une page claire defile dessous.
   Ces regles sont en fin de feuille : elles corrigent les marges des premiers
   blocs, definies plus haut. */
@media(min-width:901px){
  .sj-entete{position:fixed;top:var(--e2);left:50%;transform:translateX(-50%);
    width:min(1120px,100% - 2*var(--e3));border-radius:var(--rayon-bouton);
    backdrop-filter:blur(12px);
    border:1px solid rgba(212,162,76,.28);box-shadow:0 10px 30px rgba(0,0,0,.3)}
  .sj-entete .sj-wrap{width:100%;padding:0 var(--e3) 0 var(--e2)}
  .sj-chapeau{padding-top:calc(var(--degagement-entete) + var(--e4))}
  .sj-heropic .sj-dedans,.sj-hero-contenu{padding-top:calc(var(--degagement-entete) + var(--e2))}
}

/* ---------- lien d'evitement ----------
   Il apparait au focus, fixe en haut a gauche. L'en-tete pleine largeur etait
   derriere lui ; avec le bandeau flottant c'est la page qui l'est, et son
   anneau tombait a 2,16 sur une page claire. Un filet sombre l'entoure : son
   contraste ne depend plus de ce qui se trouve dessous. */
.lien-evitement:focus,.lien-evitement:focus-visible{outline:3px solid var(--accent-or);outline-offset:0;
  box-shadow:0 0 0 8px var(--fond-sombre)}

/* ---------- mouvement reduit ---------- */
@media(prefers-reduced-motion:reduce){
  .sj-zone .sj-btn,.sj-facade .sj-lire{transition:none}
  .sj-zone .sj-btn:active,.sj-facade:hover .sj-lire{transform:none}
}