/* =========================================================================
   OURAYA, le site du collectif (ouraya.org)

   Meme socle qu'ouraya.solutions et social.ouraya.org, pour que les trois
   sites fassent famille : direction « Le faisceau », encre marine, un
   faisceau de lumiere ambre en haut de page, des cartes posees en
   profondeur. Le socle est recopie ici et non partage : chaque site se
   publie seul, avec ses fichiers. Les regles propres au collectif sont en
   fin de fichier.

   Depuis la refonte du 25/10/2026, cette feuille sert l'accueil et la
   charte. ouraya.css (le socle clair d'avant) reste en place pour les
   sections cachees, initiatives et mise-en-lien, qui n'ont pas ete refaites.

   Mobile d'abord : les regles de base visent un telephone, les requetes
   « min-width » ajoutent la mise en page large.

   Polices hebergees ici, dans /fonts. Aucune requete vers un tiers.
   ========================================================================= */

@font-face{font-family:Bricolage;src:url(/fonts/bricolage-grotesque-200-800-normal-latin.woff2) format("woff2");
  font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC}
@font-face{font-family:Bricolage;src:url(/fonts/bricolage-grotesque-200-800-normal-latin-ext.woff2) format("woff2");
  font-weight:200 800;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:Instrument;src:url(/fonts/instrument-serif-400-italic-latin.woff2) format("woff2");
  font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC}
@font-face{font-family:Instrument;src:url(/fonts/instrument-serif-400-italic-latin-ext.woff2) format("woff2");
  font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:JetBrains;src:url(/fonts/jetbrains-mono-400-normal-latin.woff2) format("woff2");
  font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC}
@font-face{font-family:JetBrains;src:url(/fonts/jetbrains-mono-400-normal-latin-ext.woff2) format("woff2");
  font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}

/* ---- Jetons --------------------------------------------------------------- */
:root{
  --ink:#070C17; --ink2:#0B1424; --ink3:#12213A; --ink4:#1B2C48;
  --line:#1E2B42; --line2:#2C3B57;
  --tx:#F3EBDD; --tx2:#A9B3C4; --tx3:#8794A8;
  --peach:#FFB648; --peach-hi:#FFD9A0; --gold:#E8A33D; --on-peach:#0B1424;
  --jade:#6FD8AE; --jade-lo:#123227; --coral:#FF7E6B;
  --disp:Bricolage,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --edit:Instrument,Georgia,serif;
  --mono:JetBrains,ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Le mot arabe du nom. Aucune police chargee pour lui : celle du systeme
     (Geeza Pro, Noto Naskh, Arabic Typesetting) fait l'affaire et ne coute
     aucune requete. */
  --arabe:"Noto Naskh Arabic","Geeza Pro","Arabic Typesetting","Times New Roman",serif;
  --gouttiere:20px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--ink);color:var(--tx);font-family:var(--disp);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
a{color:var(--peach-hi)}
a:hover{color:var(--tx)}
:focus-visible{outline:2px solid var(--peach);outline-offset:3px;border-radius:4px}
.saut{position:absolute;left:12px;top:-60px;z-index:20;padding:10px 16px;border-radius:10px;background:var(--peach);
  color:var(--on-peach);font-weight:700;text-decoration:none}
.saut:focus{top:12px}

/* ---- La lumiere ----------------------------------------------------------- */
.lumiere{position:absolute;top:0;left:0;right:0;height:1100px;pointer-events:none;overflow:hidden;z-index:0;
  -webkit-mask-image:linear-gradient(#000 40%,transparent 95%);mask-image:linear-gradient(#000 40%,transparent 95%)}
.faisceau{position:absolute;top:-240px;left:-30%;width:120%;height:1300px;
  background:linear-gradient(90deg,rgba(255,182,72,0) 0%,rgba(255,170,60,.14) 34%,rgba(255,190,100,.30) 48%,rgba(255,214,150,.36) 50%,rgba(255,170,60,.12) 62%,rgba(255,182,72,0) 100%);
  filter:blur(22px);mix-blend-mode:screen;transform-origin:top left;transform:rotate(-23deg);animation:balayage 14s ease-in-out infinite}
.lumiere-plan{position:absolute;inset:0;transform-origin:15% 0}
.halo{position:absolute;inset:0;background:radial-gradient(900px 600px at 80% 12%,rgba(27,44,72,.7),rgba(7,12,23,0) 70%)}
@keyframes balayage{0%,100%{opacity:.55;transform:rotate(-24deg) translateX(-2%)}50%{opacity:.85;transform:rotate(-21deg) translateX(1%)}}

/* ---- Gabarit -------------------------------------------------------------- */
.page{position:relative}
.page > *:not(.lumiere){position:relative;z-index:1}
/* Le conteneur ne porte que padding-inline, les sections que padding-block :
   les deux sur le meme element, la regle la plus specifique effacerait
   l'autre (piege n° 1 du CLAUDE.md du depot). */
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gouttiere)}
.section{padding-block:72px;position:relative;overflow-x:clip}
.section-pleine{background:var(--ink2);border-block:1px solid var(--line)}
.sur{margin:0 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--peach)}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(40px,10.5vw,84px);line-height:1}
h2{font-size:clamp(30px,7vw,56px);line-height:1.05;margin-bottom:18px;max-width:880px}
h3{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:0;margin-bottom:8px}
.accent{font-family:var(--edit);font-style:italic;font-weight:400;color:var(--peach);letter-spacing:0}
.chapo{margin:0;max-width:620px;font-size:18px;line-height:1.6;color:var(--tx2)}
.texte{margin:0;color:var(--tx2)}
.texte + .texte{margin-top:14px}
.note{margin:16px 0 0;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--tx3)}
.mention{margin:0;font-size:13.5px;line-height:1.55;color:var(--tx3)}

/* ---- Boutons -------------------------------------------------------------- */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn,.btn:visited{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 24px;
  border-radius:999px;background:var(--peach);color:var(--on-peach);font:700 16px/1.2 var(--disp);text-decoration:none;
  border:0;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{color:var(--on-peach);transform:translateY(-1px);box-shadow:0 12px 40px rgba(255,182,72,.28)}
.btn-ghost,.btn-ghost:visited{background:transparent;color:var(--tx);border:1px solid var(--line2);font-weight:500}
.btn-ghost:hover{color:var(--tx);box-shadow:none;border-color:var(--tx3)}

/* ---- Barre ---------------------------------------------------------------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.marque{display:inline-flex;align-items:center;text-decoration:none}
.marque-texte{gap:10px;color:var(--tx);font-size:20px;letter-spacing:.01em}
.marque-texte img{height:32px;width:32px}
.marque-texte b{font-weight:800}
.marque-texte:hover{color:var(--tx)}
.nav-liens{display:none;gap:28px;align-items:center;font-family:var(--mono);font-size:13px}
.nav-liens a{color:var(--tx2);text-decoration:none;padding-block:8px}
.nav-liens a:hover,.nav-liens a[aria-current]{color:var(--tx)}
/* Double classe : un bouton pose dans la barre ne doit pas perdre contre les
   regles de liens de la barre (piege n° 2). */
.nav .btn.btn{min-height:42px;padding:9px 16px;font:500 13px/1.2 var(--mono);white-space:nowrap}

/* ---- Cartes, puces, etats ------------------------------------------------- */
.carte{border-radius:18px;padding:16px 18px;border:1px solid var(--line2);background:rgba(18,33,58,.88);
  box-shadow:0 30px 80px rgba(0,0,0,.45)}
.carte p{margin:0}
.carte-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;color:var(--tx3);text-transform:uppercase}
.carte-dit{margin-top:8px !important;font-size:15px;line-height:1.5;color:var(--tx)}
.puce{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-family:var(--mono);font-size:11.5px;
  background:rgba(243,235,221,.07);color:var(--tx2);white-space:nowrap}
.puce-ambre{background:rgba(255,182,72,.14);color:var(--peach)}
.puce-jade{background:var(--jade-lo);color:var(--jade)}
.point{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* Les etats. Une couleur par etat, jamais l'ambre de la marque pour dire
   « ouvert » : un etat n'est pas une marque. Ce qui n'est qu'annonce a un
   contour en pointilles, pour qu'il ne se lise pas comme une chose faite. */
.etat{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 12px;border-radius:999px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.3}
.etat-ouvert{background:var(--jade-lo);color:var(--jade)}
.etat-pilote{background:rgba(255,182,72,.14);color:var(--peach)}
.etat-chantier{background:rgba(243,235,221,.07);color:var(--tx2)}
.etat-annonce{background:transparent;color:var(--tx3);border:1px dashed var(--line2)}

.bloc{background:rgba(18,33,58,.55);border:1px solid var(--line);border-radius:22px;padding:26px}
.liste{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.liste li{position:relative;padding-left:26px;color:var(--tx);font-size:16px;line-height:1.5}
.liste li::before{content:"";position:absolute;left:0;top:.38em;width:14px;height:8px;border-left:2px solid var(--peach);
  border-bottom:2px solid var(--peach);transform:rotate(-45deg)}

/* ---- Engagements ---------------------------------------------------------- */
.engagements{display:grid;gap:1px;margin-top:40px;background:var(--line);border-radius:22px;overflow:hidden}
.engagement{background:var(--ink2);padding:26px}
.section-pleine .engagement{background:var(--ink)}

.deux-textes{display:grid;gap:18px;margin-top:8px;max-width:1000px}
.deux-textes .texte + .texte{margin-top:0}

/* Filigrane de la flamme, tres pale, qui recule derriere le texte. */
.section-filigrane{overflow:clip}
.filigrane{position:absolute;right:-8%;top:-6%;width:min(560px,80vw);height:auto;opacity:.05;pointer-events:none;z-index:0}
.section-filigrane .wrap{position:relative;z-index:1}

/* ---- Pied ----------------------------------------------------------------- */
.pied{padding-block:40px 48px;border-top:1px solid var(--line);font-size:14px;color:var(--tx3)}
.pied-haut{display:grid;gap:18px}
.marque-pied{font-size:19px}
.marque-pied img{height:26px;width:26px}
.pied-devise{margin:10px 0 0 !important;max-width:44ch;color:var(--tx2)}
.pied nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:12.5px}
.pied nav a{color:var(--tx2);text-decoration:none;padding-block:6px}
.pied nav a:hover{color:var(--tx)}
.pied p{margin:18px 0 0}

@media (min-width:640px){
  :root{--gouttiere:28px}
}
@media (min-width:900px){
  :root{--gouttiere:32px}
  .section{padding-block:112px}
  .nav{padding-block:26px}
  .nav-liens{display:flex}
  .marque-texte{font-size:25px}
  .marque-texte img{height:36px;width:36px}
  .engagements{grid-template-columns:repeat(3,minmax(0,1fr))}
  .deux-textes{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .pied-haut{grid-template-columns:auto 1fr;align-items:center}
  .pied nav{justify-content:flex-end}
}
@keyframes flotte{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* Les plans de profondeur, seulement quand la parallaxe tourne. */
.px-actif [data-px]{will-change:transform}

/* L'entree des blocs au defilement (org.js). La classe qui masque n'est posee
   que par le script, et jamais si le systeme demande moins d'animations : sans
   lui, tout est visible. « translate » et non « transform », pour ne pas
   ecraser le transform que la parallaxe ecrit sur certains de ces blocs. */
.entree-actif [data-entree]{opacity:0;translate:0 26px;
  transition:opacity .8s ease,translate .9s cubic-bezier(.2,.7,.2,1)}
.entree-actif [data-entree].entre{opacity:1;translate:0 0}


/* =========================================================================
   PROPRE A OURAYA.ORG
   ========================================================================= */

/* ---- L'ouverture ---------------------------------------------------------- */
/* A gauche le texte. A droite quatre plans : la flamme au fond, le mot arabe
   du nom, puis les trois outils au premier plan. Chaque plan defile a sa
   vitesse, c'est ce qui donne le relief. */
.hero{display:grid;gap:44px;padding-block:40px 72px}
.hero .chapo{margin-top:22px}
.hero-suite{margin-top:14px;max-width:600px}
.scene{position:relative;display:grid;gap:12px;max-width:440px}
.scene .flamme{position:absolute;pointer-events:none;opacity:.14;filter:drop-shadow(0 0 70px rgba(255,182,72,.45));display:none}
.scene .mot{display:none;margin:0}
.mot-arabe{display:block;font-family:var(--arabe);line-height:1.1;font-weight:400;color:var(--peach);
  text-shadow:0 0 60px rgba(255,182,72,.38),0 0 2px rgba(255,217,160,.6)}
.etats{display:grid;gap:12px}
.carte-tete{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tete-signe{display:inline-flex;align-items:center;gap:8px}
.tete-signe img{width:16px;height:16px}
.carte-qui{margin-top:10px !important;font-size:13px;color:var(--tx2)}
.carte-boutons{display:flex;gap:8px;margin-top:14px !important}
.carte-boutons span{padding:7px 12px;border-radius:10px;font-size:13px;background:rgba(243,235,221,.08)}
.carte-boutons .ok{background:var(--peach);color:var(--on-peach);font-weight:700}
.carte-vive{border-color:rgba(255,182,72,.45);background:var(--ink3);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(255,182,72,.14)}

/* ---- Les outils : le texte d'un cote, l'outil au travail de l'autre ------- */
.produit{display:grid;gap:36px;align-items:center;margin-top:64px;padding-top:64px;border-top:1px solid var(--line)}
.produit:first-of-type{border-top:0;padding-top:0;margin-top:48px}
.produit-nom{display:flex;align-items:center;gap:14px;font-size:clamp(30px,6vw,46px);font-weight:800;letter-spacing:-.015em;line-height:1.05;margin-bottom:16px}
.produit-nom img{width:40px;height:40px;flex:none}
.produit-visuel{position:relative;padding:12px 0 0;min-width:0;margin:0}
.vitre{border-radius:20px;border:1px solid var(--line2);background:var(--ink);padding:16px;box-shadow:0 40px 100px rgba(0,0,0,.5);
  display:grid;gap:8px;max-width:460px}
.vitre p{margin:0}
.vitre-tete{display:flex;justify-content:space-between;gap:12px;margin:0 0 4px !important;padding-bottom:12px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12px;color:var(--tx3)}
.vitre-tete b{font-family:var(--disp);font-size:15px;color:var(--tx);font-weight:700}
.fichier{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:10px;
  background:rgba(243,235,221,.05);font-size:14px;color:var(--tx)}
.fichier span:last-child{font-family:var(--mono);font-size:12px;color:var(--tx3);white-space:nowrap}
.jauge{height:6px;margin-top:8px !important;border-radius:6px;background:rgba(243,235,221,.08);overflow:hidden}
.jauge span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--peach-hi))}
.ligne-com{display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:rgba(243,235,221,.04);font-size:14.5px;line-height:1.45;color:var(--tx)}
.ligne-com b{font-size:12.5px;font-weight:600;color:var(--tx3)}
.ligne-com .puce{justify-self:start;margin-top:4px}
.carte-flotte{position:relative;margin:-34px 0 0 auto;width:min(300px,86%)}
.chantier-ligne{display:grid;gap:4px;margin-top:64px;padding:20px 22px;border-radius:18px;border:1px dashed var(--line2)}
.chantier-ligne .etat{justify-self:start;margin-bottom:8px}

/* La video de ModBot, dans sa ligne. Un seul format a la fois : la regle qui
   masque et celle qui montre ont la meme specificite et vivent dans la meme
   requete. Sinon la plus specifique gagne partout, et les deux videos
   s'affichent (vu sur modbot.ouraya.org). */
.video-cadre{justify-self:center;width:100%;max-width:340px}
.video-cadre::before{content:"";position:absolute;inset:-12% -16%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,182,72,.20),rgba(255,182,72,0))}
.video-cadre video{width:100%;height:auto;border-radius:20px;border:1px solid var(--line2);background:var(--ink);
  box-shadow:0 40px 100px rgba(0,0,0,.55)}
.video-cadre figcaption{text-align:center}
.video-h{display:none}
.video-v{display:block}

/* ---- La mise en lien ------------------------------------------------------ */
/* Le reseau sur deux plans : des points lointains et pales au fond, et le
   reseau lui-meme, ses liens et ses etiquettes, sur un seul plan (sinon les
   etiquettes se decrochent de leurs points). */
.reseau{position:relative;margin:44px 0 0;aspect-ratio:1000/460}
.reseau .plan{position:absolute;inset:0}
.reseau svg{width:100%;height:100%}
.liens-centre{animation:pulse-lien 3.2s linear infinite}
@keyframes pulse-lien{to{stroke-dashoffset:-48}}
.noeuds{display:none;margin:0;padding:0;list-style:none}
.noeuds li{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;margin-top:-30px;padding:6px 12px;border-radius:999px;
  background:rgba(11,20,36,.92);border:1px solid var(--line2);font-family:var(--mono);font-size:12px;color:var(--tx);white-space:nowrap}
.intentions{display:grid;gap:14px;margin-top:40px}
.intention{border-radius:20px;padding:22px 24px;border:1px dashed var(--line2);background:rgba(11,20,36,.6)}
.intention .etat{margin-bottom:12px}
.intention .texte{font-size:15.5px}
.media-carte{margin-top:16px;display:grid;gap:6px;border-radius:20px;padding:22px 24px;border:1px solid var(--line2);background:var(--ink2)}
.media-carte .etat{justify-self:start;margin-bottom:8px}

/* ---- Le nom --------------------------------------------------------------- */
.nom-grille{display:grid;gap:28px;align-items:center}
.nom-mot{position:relative;display:grid;place-items:center;min-height:220px}
.nom-mot .mot-arabe{font-size:clamp(140px,44vw,300px);color:transparent;-webkit-text-stroke:1.5px rgba(255,182,72,.55);
  text-shadow:none}
.nom-mot .mot-plein{position:absolute;inset:0;display:grid;place-items:center}
.nom-mot .mot-plein .mot-arabe{color:var(--peach);-webkit-text-stroke:0;opacity:.9;
  text-shadow:0 0 80px rgba(255,182,72,.35)}
.nom-texte .chapo{margin-top:4px}
.nom-texte .texte{margin-top:16px;max-width:62ch}

/* ---- Le constat et l'autoroute -------------------------------------------- */
.route{position:relative;margin:44px 0 0;border-radius:24px;overflow:hidden;border:1px solid var(--line2);
  background:linear-gradient(180deg,#05090F 0%,#0A1322 46%,#0B1424 100%);aspect-ratio:4/3;
  box-shadow:0 40px 100px rgba(0,0,0,.5)}
/* Les plans debordent un peu en haut et en bas : en se deplacant, ils ne
   doivent jamais laisser voir le bord. */
.route .plan{position:absolute;left:0;right:0;top:-8%;height:116%}
.route svg{width:100%;height:100%}
.route .etiquettes{position:absolute;inset:0;pointer-events:none}
.route .etiquette{position:absolute;padding:6px 11px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  background:rgba(7,12,23,.82);border:1px solid var(--line2);color:var(--tx2);white-space:nowrap}
.route .etiquette b{font-weight:400;color:var(--tx)}
/* Au telephone, l'etiquette se reduit a son nom : le sous-titre ne tient pas. */
.route .etiquette b{display:none}
.route .e-autoroute{left:4%;bottom:8%}
.route .e-sorties{left:4%;top:13%}
.route .e-avenue{right:4%;top:30%;border-color:rgba(255,182,72,.55);color:var(--peach-hi)}
.route .e-avenue b{color:var(--peach)}
.voie{animation:voie 2.6s linear infinite}
@keyframes voie{to{stroke-dashoffset:-60}}
.route-legende{margin:14px 0 0}
.route-texte{display:grid;gap:22px;margin-top:40px}
.citation{margin:0;padding:6px 0 6px 22px;border-left:2px solid var(--peach);font-family:var(--edit);font-style:italic;
  font-size:clamp(24px,5.4vw,34px);line-height:1.25;color:var(--tx);max-width:30ch}
.citation cite{display:block;margin-top:14px;font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx3)}

/* ---- Le levier ------------------------------------------------------------ */
.levier-grille{display:grid;gap:36px;align-items:center}
.levier-grille .citation{font-size:clamp(28px,6.4vw,44px);max-width:22ch}

/* ---- La charte, en resume ------------------------------------------------- */
.charte-grille{display:grid;gap:40px;align-items:center}
/* Deux lignes par refus, et des vitesses de parallaxe voisines : deux refus
   qui defilent a des vitesses trop ecartees finissent par se chevaucher. */
.refus{margin:0;padding:0;list-style:none;display:grid;gap:22px}
.refus li{font-size:clamp(28px,7vw,42px);line-height:1.05;font-weight:800;letter-spacing:-.015em;color:var(--tx)}
.refus li span{display:block;font-family:var(--edit);font-style:italic;font-weight:400;color:var(--peach);letter-spacing:0}

/* ---- Contact -------------------------------------------------------------- */
.contact-grille{display:grid;gap:36px;align-items:start}
.portes{display:grid;gap:12px;margin-top:28px}
.porte{border-radius:18px;padding:20px 22px;border:1px solid var(--line2);background:var(--ink)}
.porte h3{font-size:18px;margin-bottom:6px}
.porte .texte{font-size:15.5px}
.porte-vive{border-color:rgba(255,182,72,.45)}
.formulaire{border-radius:24px;padding:24px;background:var(--ink3);border:1px solid var(--line2);display:grid;gap:18px;
  box-shadow:0 40px 100px rgba(0,0,0,.45)}
.champ{display:grid;gap:7px}
.champ label{font-size:14px;font-weight:600;color:var(--tx)}
.champ .aide{font-weight:400;color:var(--tx3)}
.champ input,.champ textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);
  background:var(--ink2);color:var(--tx);font:16px/1.4 var(--disp)}
.champ textarea{min-height:160px;resize:vertical}
.champ input:focus,.champ textarea:focus{outline:2px solid var(--peach);outline-offset:1px;border-color:transparent}
.aide-bloc{margin:2px 0 0;font-size:13.5px;line-height:1.55;color:var(--tx3)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire .btn[disabled]{opacity:.6;cursor:progress;transform:none}
.retour{margin:0;padding:14px 16px;border-radius:12px;font-size:15px;line-height:1.5}
.retour:empty{display:none}
.retour-ok{background:var(--jade-lo);color:var(--jade)}
.retour-erreur{background:#3A1A17;color:var(--coral)}

@media (min-width:640px){
  .intentions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .route{aspect-ratio:16/9}
  .route .etiquette{font-size:12px}
  .route .etiquette b{display:inline}
  .route .e-autoroute{left:6%;bottom:9%}
  .route .e-sorties{left:6%;top:16%}
  .route .e-avenue{right:5%;top:32%}
  .noeuds{display:block}
  .portes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;padding-block:72px 120px}
  .scene{display:block;height:520px;max-width:none}
  .scene .flamme{display:block;width:460px;height:auto;top:30px;left:50%;margin-left:-230px;opacity:.16}
  .scene .mot{display:block;position:absolute;left:0;right:0;top:150px;text-align:center}
  .scene .mot-arabe{font-size:200px;opacity:.32}
  .etats{display:block;position:absolute;inset:0}
  .etats .carte{position:absolute;width:330px}
  .etats .e-cloud{top:20px;left:0;filter:blur(.5px);opacity:.88}
  .etats .e-modbot{top:205px;left:14%;border-color:rgba(255,182,72,.45);background:var(--ink3);
    box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(255,182,72,.14);animation:flotte 7s ease-in-out infinite}
  .etats .e-social{top:380px;right:0}
  .produit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
  .produit-inverse .produit-texte{order:2}
  .produit-visuel{padding:24px 0 90px}
  .carte-flotte{position:absolute;right:0;bottom:0;margin:0;width:min(300px,82%)}
  .video-cadre{max-width:none;padding:0}
  .video-h{display:block}
  .video-v{display:none}
  .intentions{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nom-grille{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px}
  .nom-mot{min-height:420px}
  .route{aspect-ratio:2.15/1}
  .route-texte{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 64px;align-items:start}
  .route-texte .citation{grid-row:span 2;align-self:center}
  .levier-grille{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:72px}
  .charte-grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
  .contact-grille{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px}
  .formulaire{padding:32px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .faisceau,.etats .e-modbot,.voie,.liens-centre{animation:none}
  .btn{transition:none}
}


/* =========================================================================
   LA CHARTE (/charte/)

   Refaite le 25/10/2026. Les huit regles et les sept refus sont repris mot
   pour mot ; seule la mise en page change. Les regles defilent en deux
   colonnes a deux vitesses, le dessin du point d'arrivee sur trois plans.
   ========================================================================= */
.charte .mesure{max-width:66ch}
.charte .mesure p{margin:0 0 16px;color:var(--tx2)}
.charte .mesure p:last-child{margin-bottom:0}
.charte .mesure strong{color:var(--tx);font-weight:600}
.charte .mesure a{color:var(--peach-hi)}
.charte em.serif{font-family:var(--edit);font-style:italic;color:var(--peach-hi)}
.charte .mono{font-family:var(--mono);font-size:.92em}
.charte h2 + .mesure{margin-top:8px}
.charte blockquote{margin:0;padding:6px 0 6px 22px;border-left:2px solid var(--peach);font-family:var(--edit);font-style:italic;
  font-size:clamp(22px,5vw,30px);line-height:1.3;color:var(--tx)}
.charte blockquote.grande{font-size:clamp(26px,6vw,40px);margin-top:24px}
.charte blockquote cite{display:block;margin-top:14px;font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx3)}

/* L'ouverture : le texte, et le sommaire en quatre cartes posees en
   profondeur, chacune avec son chiffre. */
.charte-hero .chapo{margin-top:22px}
.charte-hero .hero-suite + .texte{margin-top:14px;max-width:600px}
.sommaire{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.sommaire a{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 16px;padding:16px 18px;border-radius:18px;
  border:1px solid var(--line2);background:rgba(18,33,58,.88);box-shadow:0 30px 80px rgba(0,0,0,.45);color:var(--tx);text-decoration:none;
  transition:border-color .2s ease}
.sommaire a:hover{border-color:rgba(255,182,72,.5)}
.sommaire .chiffre{grid-row:span 2;font-size:44px;line-height:1;font-weight:800;color:var(--peach);min-width:1.1em;text-align:center}
.sommaire b{font-size:17px;font-weight:700}
.sommaire span:last-child{font-family:var(--mono);font-size:12px;color:var(--tx3)}

/* Deux colonnes : le titre d'un cote, le texte de l'autre. */
.colonnes{display:grid;gap:24px}
.colonnes-serrees{margin-top:36px;gap:36px}
.colonnes-serrees blockquote + .mesure{margin-top:28px}

.illustration{margin:34px 0 0;padding:20px;border-radius:22px;border:1px solid var(--line2);background:var(--ink2);overflow:hidden}
.illustration .plans{position:relative;aspect-ratio:900/260}
.illustration .plan{position:absolute;inset:0;width:100%;height:100%}
.illustration figcaption{margin-top:14px}

/* Les huit regles : un grand chiffre au trait, puis la regle. */
.regles{margin:44px 0 0;padding:0;list-style:none;display:grid;gap:16px}
.regle{position:relative;border-radius:22px;padding:26px 26px 26px 26px;background:linear-gradient(170deg,var(--ink3),var(--ink2));
  border:1px solid var(--line2);overflow:hidden}
.regle-num{display:block;margin-bottom:6px;font-size:64px;line-height:1;font-weight:800;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,182,72,.6)}
.regle h3{font-size:21px;letter-spacing:-.005em}
.regle p{margin:8px 0 0;color:var(--tx2);font-size:15.5px;line-height:1.6}

/* Les sept refus : le refus en grand, son explication a cote. */
.refus-liste{margin:44px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.refus-ligne{display:grid;gap:10px;padding:26px 0;border-bottom:1px solid var(--line)}
.refus-ligne h3{display:flex;align-items:baseline;gap:14px;font-size:clamp(24px,5.4vw,34px);line-height:1.1;font-weight:800;letter-spacing:-.015em;margin:0}
.refus-num{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:0;color:var(--peach);flex:none}
.refus-ligne p{margin:0;color:var(--tx2);max-width:62ch}

/* S'en reclamer. */
.marqueur-cartes{display:grid;gap:14px}
.carte-charte{border-radius:20px;padding:24px;background:rgba(18,33,58,.7);border:1px solid var(--line2)}
.carte-charte p{margin:0 0 12px;color:var(--tx2);font-size:15.5px}
.carte-charte p:last-child{margin-bottom:0}
.marqueur-charte{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 10px;border:1px solid #E4DED2;
  border-radius:999px;background:#fff;color:#12213A;font:600 13px/1 system-ui,sans-serif;text-decoration:none}
.marqueur-charte svg{width:22px;height:22px}
.a-copier-cadre{margin-top:36px}
.a-copier-tete{display:grid;gap:12px;align-items:center}
.a-copier-tete p{margin:0;color:var(--tx2)}
.copier{justify-self:start}
.a-copier{margin:16px 0 14px;padding:18px 20px;border-radius:16px;border:1px solid var(--line2);background:var(--ink2);
  overflow-x:auto;font:400 12.5px/1.6 var(--mono);color:var(--tx2);white-space:pre}
.a-copier code{font:inherit}

/* Le vocabulaire, en etiquettes. */
.mots{display:grid;gap:14px;margin-top:36px}
.groupe-mots{border-radius:20px;padding:22px 24px;border:1px solid var(--line2);background:var(--ink)}
.groupe-mots h3{font-size:17px;margin-bottom:12px}
.groupe-mots p{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.groupe-mots span{padding:6px 12px;border-radius:999px;background:rgba(255,182,72,.10);color:var(--peach-hi);font-size:14.5px}

@media (min-width:640px){
  .regles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .marqueur-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a-copier-tete{grid-template-columns:minmax(0,1fr) auto}
  .refus-ligne{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:start}
}
@media (min-width:900px){
  .charte-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .sommaire{gap:16px;padding-left:8%}
  .sommaire li:nth-child(2){margin-left:10%}
  .sommaire li:nth-child(3){margin-left:4%}
  .sommaire li:nth-child(4){margin-left:14%}
  .colonnes{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:64px;align-items:start}
  .colonnes-serrees{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .colonne-titre{position:sticky;top:40px}
  .regles{gap:20px 28px}
  .regle:nth-child(even){margin-top:56px}
  .marqueur-cartes{grid-template-columns:1fr}
  .mots{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .sommaire a{transition:none}
}