/* ==========================================================================
   MMW Fiscal & Business Consulting — foglio di stile unico
   Nero e oro · francese (ltr), arabo (rtl), inglese (ltr)
   Nessuna libreria, nessun CDN. Proprietà logiche per l'RTL.
   Ordine: token · reset · tipografia · layout · componenti · moduli · utilità · RTL · motion · print
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKEN */
:root{
  /* fondi */
  /* I gradini dei fondi sono distanziati di proposito: con i valori precedenti
     (090910 → 101019 → 16161F → 1D1D28) la differenza di luminanza fra una
     superficie e la successiva era di 0,13 punti percentuali, invisibile su uno
     schermo non calibrato, e le sezioni sembravano tutte lo stesso nero.
     Ora il passo cresce: 0,16 · 0,32 · 0,45 · 0,68 punti. */
  --noir:#05050A;
  --noir-2:#0A0A12;
  --surface:#12121C;
  --surface-2:#1A1A26;
  --surface-3:#232331;

  /* oro */
  --or:#D4AF37;
  --or-clair:#F3E3B0;
  --or-champagne:#E9D6A4;
  --or-profond:#8A6410;
  --or-cuivre:#B98B2E;
  --degrade-or:linear-gradient(135deg,#8A6410 0%,#D4AF37 22%,#F7EBC4 48%,#D4AF37 74%,#8A6410 100%);
  --degrade-or-doux:linear-gradient(120deg,#C69B2C,#F3E3B0 55%,#C69B2C);
  --degrade-or-vertical:linear-gradient(180deg,#F7EBC4 0%,#D4AF37 45%,#8A6410 100%);

  /* testo */
  --texte:#EFE8D8;
  --texte-2:#A8A091;    /* 5,97:1 sul fondo più chiaro: passa */
  /* --texte-3 era #6F6961: da 3,07 a 3,75:1, sotto il minimo di 4,5 preteso per
     il testo normale, ed era il colore delle note più piccole (fonti, note dei
     grafici, note del simulatore). Questo valore dà 4,55:1 sulla superficie più
     chiara e 5,97:1 sul nero. */
  --texte-3:#928A80;
  /* solo per ciò che NON è informazione (il suggerimento «défiler», i decori):
     se sparisce, non si perde niente. */
  --texte-4:#6F6961;
  --texte-or:#F3E3B0;

  /* linee, ombre, aloni */
  --filet:rgba(212,175,55,.20);
  --filet-fort:rgba(212,175,55,.42);
  --filet-faible:rgba(212,175,55,.10);
  --halo-or:0 0 48px rgba(212,175,55,.14);
  --halo-or-fort:0 0 64px rgba(212,175,55,.26);
  --ombre:0 24px 60px rgba(0,0,0,.55);
  --ombre-carte:0 18px 44px rgba(0,0,0,.45);

  /* misure */
  --conteneur:1240px;
  --conteneur-etroit:820px;
  --rayon:14px;
  --rayon-s:9px;
  --rayon-l:22px;
  --entete-h:78px;

  /* ritmo verticale, passo 4px */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;
  --e7:48px; --e8:64px; --e9:96px; --e10:128px;

  /* MOVIMENTO — tre famiglie, e una sola regola per ciascuna.
     · comandi   (passaggio del mouse, fuoco, apertura di un pannello): rapidi,
                 perché rispondono a un gesto e non devono farsi aspettare;
     · ingressi  (sezioni e schede che appaiono scorrendo): morbidi, una volta
                 sola, mai ripetuti;
     · ambiente  (la mappa della pagina d'ingresso): lentissimi, e solo lì: è
                 l'unico elemento a cui è concesso muoversi da solo.
     Chi aggiunge un'animazione usa uno di questi tre tempi. Se nessuno va bene,
     probabilmente l'animazione non serve. */
  --t-comando:.16s;
  --t-comando-lento:.28s;
  --t-ingresso:.7s;
  --t-ambiente:24s;
  --courbe-comando:cubic-bezier(.2,.8,.3,1);
  --courbe:cubic-bezier(.22,1,.36,1);
  /* nomi storici, mantenuti perché usati in cinquanta regole */
  --t-court:var(--t-comando); --t-moyen:var(--t-comando-lento); --t-long:var(--t-ingresso);

  /* tipografia */
  --f-titre:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-marque:"Cinzel","Cormorant Garamond",Georgia,serif;
  --f-texte:"Jost","Helvetica Neue",Arial,sans-serif;
  /* misure del testo minore: una sola per le note che portano informazione
     (fonti, note dei grafici, avvertenze) e una per le micro-etichette in
     maiuscoletto, che sono segnali e non lettura. */
  --taille-note:.88rem;
  --taille-micro:.76rem;
  --echelle-ar:1;      /* moltiplicatore per l'arabo, sovrascritto in [lang="ar"] */
}

[lang="ar"]{
  --f-titre:"Amiri","Cormorant Garamond",serif;
  --f-marque:"Amiri",serif;
  --f-texte:"IBM Plex Sans Arabic","Jost",sans-serif;
  --echelle-ar:1.08;
}

/* ---------------------------------------------------------------- 2. RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--entete-h) + var(--e5))}
body{
  margin:0;
  background:var(--noir);
  color:var(--texte);
  font-family:var(--f-texte);
  /* Jost 300 su fondo nero si assottiglia: il testo lungo si legge male. Il 400
     resta moderno e regge il nero. Il 300 rimane dove il corpo è grande
     (i chapò, i titoli), dove la leggerezza è un tratto voluto. */
  font-weight:400;
  font-size:calc(1.0625rem * var(--echelle-ar));
  line-height:calc(1.7 + (var(--echelle-ar) - 1) * 1.5);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--or-champagne);text-decoration:none;transition:color var(--t-court) var(--courbe)}
a:hover{color:var(--or-clair)}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
hr{border:0;height:1px;background:var(--filet);margin:var(--e7) 0}
table{border-collapse:collapse;width:100%}
::selection{background:rgba(212,175,55,.28);color:#fff}

:focus-visible{
  outline:2px solid var(--or-clair);
  outline-offset:3px;
  border-radius:2px;
}
:focus:not(:focus-visible){outline:none}

/* grana e vignettatura: danno profondità al nero senza immagini */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.035;mix-blend-mode:screen;
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,transparent 40%,rgba(0,0,0,.55) 100%);
}
body>*{position:relative;z-index:1}

/* ----------------------------------------------------------- 3. TIPOGRAFIA */
h1,h2,h3,h4{
  font-family:var(--f-titre);
  font-weight:400;
  line-height:1.12;
  margin:0 0 var(--e4);
  letter-spacing:-.01em;
  color:var(--texte);
}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4{letter-spacing:0;line-height:1.35}

h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2{font-size:clamp(2rem,4.2vw,3.2rem)}
h3{font-size:clamp(1.35rem,2.2vw,1.75rem)}
h4{font-size:clamp(1.1rem,1.6vw,1.3rem)}
p{margin:0 0 var(--e5)}
p:last-child{margin-bottom:0}
strong{color:var(--texte);font-weight:500}
em{font-style:italic}
small{font-size:.875em;color:var(--texte-2)}

/* occhiello: la firma tipografica del sito */
.chapeau{
  display:flex;align-items:center;gap:var(--e3);
  font-family:var(--f-marque);
  font-size:.72rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--or);
  margin:0 0 var(--e4);
}
.chapeau::before{
  content:"";inline-size:34px;block-size:1px;flex:none;
  background:linear-gradient(to right,transparent,var(--or));
}
[dir="rtl"] .chapeau::before{background:linear-gradient(to left,transparent,var(--or))}
[lang="ar"] .chapeau{letter-spacing:0;text-transform:none;font-size:.9rem}

/* testo inciso in oro: gradiente ritagliato dal testo + riflesso lento */
.titre--or{
  background:var(--degrade-or);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* nessun riflesso qui: il ciclo continuo su ogni titolo in oro della pagina
     faceva concorrenza a se stesso. Si muove solo quello della hero. */
  padding-inline-end:.06em; /* evita il taglio delle lettere in corsivo */
}
.hero .titre--or{animation:reflet-or var(--t-ambiente) linear infinite}
@keyframes reflet-or{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
.titre--italique{font-style:italic;font-weight:300}

.plomb{
  font-size:calc(1.18rem * var(--echelle-ar));
  line-height:1.65;
  color:var(--texte-2);
  font-weight:300;
  max-width:62ch;
}
.citation{
  font-family:var(--f-titre);
  font-size:clamp(1.4rem,2.6vw,2.05rem);
  font-style:italic;font-weight:300;line-height:1.35;
  color:var(--or-clair);
  border-inline-start:2px solid var(--or);
  padding-inline-start:var(--e6);
  margin:var(--e7) 0;
}
[lang="ar"] .citation{font-style:normal}
.citation cite{
  display:block;margin-top:var(--e4);
  font:500 .78rem/1.5 var(--f-texte);
  letter-spacing:.16em;text-transform:uppercase;font-style:normal;
  color:var(--texte-3);
}
[lang="ar"] .citation cite{letter-spacing:0;text-transform:none}

/* ------------------------------------------------------------- 4. LAYOUT */
.conteneur{
  width:100%;max-width:var(--conteneur);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}
.conteneur--etroit{max-width:var(--conteneur-etroit)}
.section{padding-block:clamp(72px,10vw,140px);position:relative}
.section--compacte{padding-block:clamp(48px,6vw,88px)}
/* la fascia delle cifre appartiene alla sezione che segue: fra le due c'erano
   228 px di nulla (88 sotto + 140 sopra). */
.section--serre-bas{padding-block-end:clamp(24px,2.6vw,40px)}
.section--filet{border-top:1px solid var(--filet-faible)}
.section--surface{background:linear-gradient(180deg,var(--noir) 0%,var(--noir-2) 50%,var(--noir) 100%)}

/* SEZIONE AVORIO — una sola per pagina, per far respirare il nero.
   Non è una sezione «chiara» disegnata a parte: ridefinisce i token del tema
   dentro di sé, e i componenti che stanno dentro (schede, elenchi, bottoni,
   filetti) si adattano da soli. Tutti i valori sono verificati sul contrasto:
   testo 14,9:1 · secondario 7,8:1 · nota 4,9:1 · oro 4,6:1 su avorio.
   L'oro chiaro qui non esiste: su avorio sparirebbe. */
.section--ivoire{
  /* anche i due neri: le schede hanno un gradiente da --surface a --noir-2, e
     senza ridefinirli restavano scure in mezzo all'avorio. */
  --noir:#F2EDE1;
  --noir-2:#E8E1D0;
  --texte:#191922;
  --texte-2:#4C483F;
  --texte-3:#6B665B;
  --texte-4:#8A8578;
  --texte-or:#6B4E0C;
  --or:#8A6410;
  --or-clair:#6B4E0C;
  --or-champagne:#7A5A0E;
  --or-cuivre:#9A7418;
  --degrade-or:linear-gradient(135deg,#6B4E0C 0%,#8A6410 40%,#B98B2E 70%,#6B4E0C 100%);
  --degrade-or-doux:linear-gradient(120deg,#8A6410,#B98B2E 55%,#8A6410);
  --surface:#EAE3D3;
  --surface-2:#E2DAC7;
  --surface-3:#D9CFB8;
  --filet:rgba(30,26,14,.18);
  --filet-fort:rgba(30,26,14,.38);
  --filet-faible:rgba(30,26,14,.09);
  --ombre-carte:0 14px 34px rgba(60,50,20,.13);
  --ombre:0 18px 44px rgba(60,50,20,.16);
  --halo-or:0 0 40px rgba(138,100,16,.10);
  background:#F2EDE1;
  color:var(--texte);
  /* la grana e la vignettatura del nero non c'entrano qui */
  isolation:isolate;
}
.section--ivoire::selection,.section--ivoire ::selection{background:rgba(138,100,16,.22);color:#14141A}
/* i bordi dell'avorio sfumano nel nero, così non c'è uno scalino netto */
.section--ivoire{
  box-shadow:0 -1px 0 rgba(212,175,55,.22), 0 1px 0 rgba(212,175,55,.22);
}

/* alone dorato decorativo dietro una sezione */
.section--halo::before{
  content:"";position:absolute;inset-block-start:-10%;inset-inline-start:50%;
  transform:translateX(-50%);
  inline-size:min(1100px,100%);block-size:520px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(212,175,55,.10) 0%,transparent 70%);
  pointer-events:none;z-index:-1;
}

.grille{display:grid;gap:clamp(20px,2.4vw,34px)}
/* senza questo, un'immagine con width= dichiarata impone la sua larghezza alla colonna
   e schiaccia il testo accanto (misurato: colonna 880px contro 211px) */
.grille>*{min-inline-size:0}
picture{display:block}
.grille--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grille--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grille--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.grille--asym{grid-template-columns:1fr}
@media (min-width:900px){
  .grille--asym{grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(34px,4vw,72px)}
  .grille--asym-inverse{grid-template-columns:.95fr 1.05fr}
}
.entete-section{max-width:70ch;margin-bottom:clamp(36px,4vw,64px)}
.entete-section--centree{margin-inline:auto;text-align:center}
.entete-section--centree .chapeau{justify-content:center}

/* filetto decorativo */
.filet{block-size:1px;background:var(--filet);border:0;margin-block:var(--e7)}
.filet--or{background:linear-gradient(to right,transparent,var(--or),transparent)}
.filet--court{inline-size:72px;margin-inline:0;background:var(--degrade-or-doux)}

/* --------------------------------------------------------- 5. COMPONENTI */

/* 5.1 bottoni */
.bouton{
  --b-fond:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e3);
  min-block-size:52px;padding-inline:var(--e6);padding-block:var(--e3);
  font-family:var(--f-texte);font-size:.82rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--rayon-s);
  border:1px solid var(--filet-fort);
  color:var(--or-clair);background:var(--b-fond);
  position:relative;overflow:hidden;isolation:isolate;
  transition:color var(--t-court) var(--courbe),border-color var(--t-court) var(--courbe),
             transform var(--t-court) var(--courbe),box-shadow var(--t-moyen) var(--courbe);
}
[lang="ar"] .bouton{letter-spacing:0;text-transform:none;font-size:.98rem}
.bouton:hover{transform:translateY(-2px);border-color:var(--or);box-shadow:var(--halo-or)}
.bouton:active{transform:translateY(0)}

.bouton--or{
  background:var(--degrade-or);
  background-size:200% 100%;
  color:#150F02;border-color:transparent;font-weight:500;
  transition:background-position var(--t-long) var(--courbe),transform var(--t-court) var(--courbe),box-shadow var(--t-moyen) var(--courbe);
}
.bouton--or:hover{background-position:100% 50%;color:#150F02;box-shadow:var(--halo-or-fort)}

.bouton--fantome{border-color:var(--filet);color:var(--texte)}
.bouton--fantome:hover{color:var(--or-clair)}

.bouton--texte{
  /* più riconoscibile come azione: il filetto è pieno (non al 42%), la freccia
     accompagna il testo e l'area toccabile è alta abbastanza per un dito. */
  min-block-size:0;padding:0;border:0;border-radius:0;
  color:var(--or-champagne);
  border-bottom:1px solid var(--or-cuivre);
  padding-block:var(--e2) 4px;
  gap:var(--e2);
}
.bouton--texte:hover{transform:none;box-shadow:none;border-color:var(--or);color:var(--or-clair)}
.bouton .fleche{transition:transform var(--t-court) var(--courbe)}
.bouton:hover .fleche{transform:translateX(3px)}
[dir="rtl"] .bouton .fleche{transform:scaleX(-1)}
[dir="rtl"] .bouton:hover .fleche{transform:scaleX(-1) translateX(3px)}

.groupe-boutons{display:flex;flex-wrap:wrap;gap:var(--e4);align-items:center}

/* il pulsante che porta l'indirizzo di posta: l'indirizzo è lungo, quindi qui
   niente maiuscole né spaziatura fra le lettere (in maiuscoletto spaziato
   sarebbero 407 px su uno schermo da 375).
   «break-word» e non «anywhere»: «anywhere» cambia anche la larghezza minima
   intrinseca, e dentro un contenitore flessibile fa collassare il pulsante
   spezzando l'indirizzo su quattro righe (misurato: 113 px di largo, 64 di
   alto). Con «break-word» l'indirizzo va a capo solo se non ci sta davvero. */
.bouton--courriel{
  text-transform:none;letter-spacing:.01em;font-size:.78rem;
  white-space:normal;overflow-wrap:break-word;max-inline-size:100%;
}

/* 5.2 intestazione e navigazione */
.entete{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  block-size:var(--entete-h);
  display:flex;align-items:center;
  background:transparent;
  transition:background var(--t-moyen) var(--courbe),border-color var(--t-moyen) var(--courbe),
             backdrop-filter var(--t-moyen) var(--courbe);
  border-bottom:1px solid transparent;
}
.entete.est-collee{
  background:rgba(5,5,10,.86);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--filet-faible);
}
.entete__interieur{
  width:100%;max-width:var(--conteneur);margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
  display:flex;align-items:center;gap:var(--e6);
}
.marque{display:inline-flex;align-items:center;gap:var(--e3);flex:none}
.marque__sigle{
  font-family:"Cinzel",var(--f-titre);
  font-size:1.62rem;font-weight:700;letter-spacing:.06em;line-height:1;
  background:var(--degrade-or);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.marque__baseline{
  display:none;
  font-family:"Cinzel",var(--f-titre);
  font-size:.56rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--texte-3);
  border-inline-start:1px solid var(--filet);
  padding-inline-start:var(--e3);
  max-inline-size:14ch;line-height:1.4;
}
@media (min-width:1080px){.marque__baseline{display:block}}
[lang="ar"] .marque__baseline{letter-spacing:0;text-transform:none;font-size:.7rem;max-inline-size:18ch}

.nav{display:none;margin-inline-start:auto}
.nav__liste{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px)}
.nav__lien{
  position:relative;
  font-size:.76rem;font-weight:400;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texte-2);padding-block:var(--e2);
  transition:color var(--t-court) var(--courbe);
}
[lang="ar"] .nav__lien{letter-spacing:0;text-transform:none;font-size:.95rem}
.nav__lien::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  inline-size:0;block-size:1px;background:var(--degrade-or-doux);
  transition:inline-size var(--t-moyen) var(--courbe);
}
.nav__lien:hover,.nav__lien[aria-current="page"]{color:var(--or-clair)}
.nav__lien:hover::after,.nav__lien[aria-current="page"]::after{inline-size:100%}
@media (min-width:1000px){.nav{display:block}}

.langues{display:flex;align-items:center;gap:var(--e1);margin-inline-start:auto;flex:none}
@media (min-width:1000px){.langues{margin-inline-start:var(--e5)}}
.langues__lien{
  display:inline-flex;align-items:center;justify-content:center;
  min-inline-size:34px;min-block-size:34px;padding-inline:var(--e2);
  font-family:var(--f-texte);
  font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-3);border-radius:var(--rayon-s);
  transition:color var(--t-court) var(--courbe),background var(--t-court) var(--courbe);
}
/* Il collegamento alla versione araba porta lang="ar" (ed e giusto: e la lingua
   del suo contenuto), ma questo elemento dichiara font-family:var(--f-texte),
   che la regola [lang="ar"] ridefinisce sul carattere arabo. Risultato
   misurato: per disegnare la sola lettera «ع» il browser scaricava 49,4 KB di
   IBM Plex Sans Arabic su OGNI pagina francese e inglese, cioe il 15% del peso
   di una pagina come /contact/. Solo fuori dalle pagine arabe si usa la pila di
   sistema: la ع la disegna il carattere del dispositivo, che c'e sempre. Sulle
   pagine arabe il carattere serve comunque a tutto il resto, quindi la regola
   non si applica e la barra resta coerente. */
html:not([lang="ar"]) .langues__lien[lang="ar"]{font-family:"Helvetica Neue",Arial,sans-serif}
.langues__lien:hover{color:var(--or-clair);background:rgba(212,175,55,.08)}
.langues__lien[aria-current="true"]{color:var(--or);background:rgba(212,175,55,.12)}
.langues__sep{color:var(--texte-3);opacity:.4;font-size:.7rem}

/* bottone menu mobile */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  inline-size:44px;block-size:44px;padding-inline:10px;flex:none;
  margin-inline-start:var(--e2);
}
@media (min-width:1000px){.burger{display:none}}
.burger span{
  display:block;block-size:1px;background:var(--or-champagne);
  transition:transform var(--t-moyen) var(--courbe),opacity var(--t-court) var(--courbe);
}
.burger span:nth-child(1){inline-size:24px}
.burger span:nth-child(2){inline-size:18px}
.burger span:nth-child(3){inline-size:22px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);inline-size:24px}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);inline-size:24px}

/* Telefoni stretti: marchio, lingue e burger devono stare in 360px.
   Misurato a 375px senza questa regola: l'intestazione chiedeva 413px. */
@media (max-width:520px){
  .entete__interieur{gap:var(--e3)}
  .marque__sigle{font-size:1.34rem}
  .langues__sep{display:none}
  .langues__lien{min-inline-size:29px;padding-inline:3px;font-size:.66rem}
  .burger{margin-inline-start:0;inline-size:40px}
}

/* pannello mobile */
.menu-mobile{
  position:fixed;inset:0;z-index:99;
  background:rgba(5,5,10,.97);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  padding:calc(var(--entete-h) + var(--e7)) clamp(24px,7vw,56px) var(--e7);
  display:flex;flex-direction:column;gap:var(--e2);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t-moyen) var(--courbe),transform var(--t-moyen) var(--courbe),visibility var(--t-moyen);
  overflow-y:auto;
}
.menu-mobile.est-ouvert{opacity:1;visibility:visible;transform:none}
.menu-mobile a{
  font-family:var(--f-titre);font-size:1.7rem;font-weight:300;
  color:var(--texte);padding-block:var(--e3);
  border-bottom:1px solid var(--filet-faible);
}
.menu-mobile a:hover,.menu-mobile a[aria-current="page"]{color:var(--or-clair)}
body.menu-ouvert{overflow:hidden}

/* 5.3 carte */
.carte{
  position:relative;
  background:linear-gradient(160deg,var(--surface) 0%,var(--noir-2) 100%);
  border:1px solid var(--filet-faible);
  border-radius:var(--rayon);
  padding:clamp(24px,2.6vw,38px);
  transition:border-color var(--t-moyen) var(--courbe),transform var(--t-moyen) var(--courbe),
             box-shadow var(--t-moyen) var(--courbe);
  block-size:100%;
}
.carte:hover{border-color:var(--filet-fort);transform:translateY(-4px);box-shadow:var(--ombre-carte),var(--halo-or)}

/* angoli dorati: dettaglio di pregio */
.carte--angles::before,.carte--angles::after{
  content:"";position:absolute;inline-size:16px;block-size:16px;pointer-events:none;
  opacity:0;transition:opacity var(--t-moyen) var(--courbe);
}
.carte--angles::before{
  inset-block-start:10px;inset-inline-start:10px;
  border-top:1px solid var(--or);border-inline-start:1px solid var(--or);
}
.carte--angles::after{
  inset-block-end:10px;inset-inline-end:10px;
  border-bottom:1px solid var(--or);border-inline-end:1px solid var(--or);
}
.carte--angles:hover::before,.carte--angles:hover::after{opacity:.75}

.carte__numero{
  font-family:var(--f-titre);font-size:2.6rem;font-weight:300;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--filet-fort);
  margin-bottom:var(--e4);
}
.carte__icone{
  inline-size:44px;block-size:44px;margin-bottom:var(--e5);
  color:var(--or);
}
.carte__icone svg{inline-size:100%;block-size:100%;stroke:currentColor;fill:none;stroke-width:1.25}
.carte h3{margin-bottom:var(--e3)}
.carte p{color:var(--texte-2);font-size:.98rem;margin-bottom:var(--e4)}
.carte__liste{display:flex;flex-direction:column;gap:var(--e2);margin-block:var(--e4) 0}
.carte__liste li{
  position:relative;padding-inline-start:var(--e5);
  font-size:.94rem;color:var(--texte-2);
}
.carte__liste li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;
  inline-size:7px;block-size:1px;background:var(--or-cuivre);
}

/* 5.4 KPI */
/* La scheda di una cifra ha tre livelli e prima se ne distinguevano due: la
   cifra, poi due righe in maiuscoletto centrato che si somigliavano. Ora:
   la cifra (protagonista), che cosa è (una riga piena, allineata a sinistra),
   e sotto un filetto la CONDIZIONE, che per uno studio fiscale è la parte che
   evita l'equivoco e non deve sembrare una postilla. */
.carte--kpi{text-align:start;padding-block:clamp(28px,3vw,44px)}
.kpi__valeur{
  display:block;
  font-family:var(--f-titre);
  font-size:clamp(2.6rem,5vw,3.9rem);font-weight:400;line-height:1;
  background:var(--degrade-or);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums;
  margin-bottom:var(--e3);
}
.kpi__libelle{
  display:block;font-size:.92rem;font-weight:400;
  letter-spacing:.02em;color:var(--texte);
  line-height:1.45;margin-top:var(--e3);
}
[lang="ar"] .kpi__libelle{letter-spacing:0;text-transform:none;font-size:.95rem}
.kpi__note{
  display:block;margin-top:var(--e4);padding-top:var(--e3);
  border-top:1px solid var(--filet-faible);
  font-size:var(--taille-note);line-height:1.55;color:var(--texte-2);
}

/* 5.5 persone */
.carte--personne{padding:0;overflow:hidden;background:var(--surface)}
.carte--personne img{
  inline-size:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;
  filter:grayscale(.22) contrast(1.04);
  transition:filter var(--t-long) var(--courbe),transform var(--t-long) var(--courbe);
}
.carte--personne:hover img{filter:grayscale(0) contrast(1.06);transform:scale(1.02)}
.carte--personne__texte{padding:var(--e5) clamp(20px,2vw,28px) clamp(24px,2.4vw,32px)}
.carte--personne__nom{
  font-family:"Cinzel",var(--f-titre);
  font-size:.96rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--or-clair);margin:0 0 var(--e2);line-height:1.4;
}
[lang="ar"] .carte--personne__nom{letter-spacing:0;text-transform:none;font-size:1.15rem}
.carte--personne__role{font-size:.84rem;color:var(--texte-2);margin:0}
.carte--personne__detail{margin-top:var(--e4);font-size:.88rem;color:var(--texte-3);line-height:1.6}

/* 5.6 badge, puces */
.badge{
  display:inline-flex;align-items:center;gap:var(--e2);
  padding:6px 14px;border-radius:999px;
  border:1px solid var(--filet);
  background:rgba(212,175,55,.06);
  font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--or-champagne);
}
[lang="ar"] .badge{letter-spacing:0;text-transform:none;font-size:.88rem}
.badge--point::before{content:"";inline-size:6px;block-size:6px;border-radius:50%;background:var(--or);flex:none}
.liste-puces{display:flex;flex-direction:column;gap:var(--e4)}
.liste-puces li{position:relative;padding-inline-start:var(--e6);color:var(--texte-2)}
.liste-puces li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.55em;
  inline-size:14px;block-size:1px;background:var(--degrade-or-doux);
}

/* 5.7 cronologia */
.chronologie{position:relative;padding-inline-start:var(--e7)}
.chronologie::before{
  content:"";position:absolute;inset-inline-start:7px;inset-block:6px 0;
  inline-size:1px;background:linear-gradient(180deg,var(--or),var(--filet-faible));
}
.chronologie__etape{position:relative;padding-bottom:var(--e7)}
.chronologie__etape:last-child{padding-bottom:0}
.chronologie__etape::before{
  content:"";position:absolute;inset-inline-start:calc(-1 * var(--e7) + 3px);inset-block-start:.45em;
  inline-size:9px;block-size:9px;border-radius:50%;
  background:var(--noir);border:1px solid var(--or);
  box-shadow:0 0 0 4px var(--noir),0 0 14px rgba(212,175,55,.5);
}
.chronologie__phase{
  font-family:var(--f-marque);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--or);
  display:block;margin-bottom:var(--e2);
}
[lang="ar"] .chronologie__phase{letter-spacing:0;text-transform:none;font-size:.9rem}

/* 5.8 accordéon */
.accordeon{border-top:1px solid var(--filet-faible)}
.accordeon__element{border-bottom:1px solid var(--filet-faible)}
.accordeon__tete{
  inline-size:100%;display:flex;align-items:flex-start;gap:var(--e4);
  padding-block:var(--e5);text-align:start;
  font-family:var(--f-titre);font-size:clamp(1.05rem,1.6vw,1.28rem);font-weight:400;
  color:var(--texte);
  transition:color var(--t-court) var(--courbe);
}
.accordeon__tete:hover{color:var(--or-clair)}
.accordeon__tete::after{
  content:"";flex:none;margin-inline-start:auto;
  inline-size:12px;block-size:12px;margin-block-start:.35em;
  border-inline-end:1px solid var(--or);border-block-end:1px solid var(--or);
  transform:rotate(45deg);
  transition:transform var(--t-moyen) var(--courbe);
}
.accordeon__tete[aria-expanded="true"]::after{transform:rotate(225deg)}
.accordeon__corps{
  overflow:hidden;
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t-moyen) var(--courbe);
}
.accordeon__corps[data-ouvert="true"]{grid-template-rows:1fr}
.accordeon__corps>div{overflow:hidden;padding-bottom:var(--e5);color:var(--texte-2);max-width:74ch}

/* 5.9 formulaire */
/* Esito dell'invio senza JavaScript: invisibile finché il frammento
   dell'indirizzo non lo indica. `display:none` e non `visibility`, perché non
   deve occupare spazio né essere letto dai lettori di schermo quando non è il
   suo turno. Con JavaScript attivo non si vede mai: l'invio passa per fetch e
   la pagina non cambia indirizzo. */
.esito-invio{display:none}
.esito-invio:target{
  display:block;margin:0 0 var(--e5);padding:var(--e4) var(--e5);
  border-radius:var(--rayon-petit);border-inline-start:3px solid;
  font-size:var(--taille-note);line-height:1.6;
}
.esito-invio--ok:target{border-color:var(--or);background:rgba(212,175,55,.08);color:var(--texte)}
.esito-invio--ko:target{border-color:#C8553D;background:rgba(200,85,61,.1);color:var(--texte)}
.esito-invio:target:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px}

.formulaire{display:grid;gap:var(--e5);grid-template-columns:minmax(0,1fr)}
.champ{display:flex;flex-direction:column;gap:var(--e2);min-inline-size:0}
.champ label{
  font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texte-2);
}
[lang="ar"] .champ label{letter-spacing:0;text-transform:none;font-size:.92rem}
.champ label .requis{color:var(--or)}
.champ input,.champ textarea,.champ select{
  max-inline-size:100%;
  background:var(--surface);
  border:1px solid var(--filet-faible);
  border-radius:var(--rayon-s);
  padding:14px 16px;
  color:var(--texte);font-size:1rem;font-weight:300;
  transition:border-color var(--t-court) var(--courbe),background var(--t-court) var(--courbe),
             box-shadow var(--t-court) var(--courbe);
}
.champ textarea{min-block-size:150px;resize:vertical}
.champ input:hover,.champ textarea:hover,.champ select:hover{border-color:var(--filet)}
.champ input:focus,.champ textarea:focus,.champ select:focus{
  outline:none;border-color:var(--or);background:var(--surface-2);
  box-shadow:0 0 0 3px rgba(212,175,55,.12);
}
.champ input::placeholder,.champ textarea::placeholder{color:var(--texte-3)}
.champ--erreur input,.champ--erreur textarea{border-color:#C8553D}
.champ__erreur{font-size:.8rem;color:#E4826A;min-block-size:1.2em}
.champ--consentement{flex-direction:row;align-items:flex-start;gap:var(--e3)}
.champ--consentement input{inline-size:20px;block-size:20px;margin-block-start:2px;flex:none;accent-color:var(--or)}
.champ--consentement label{
  font-size:.86rem;letter-spacing:0;text-transform:none;font-weight:300;
  color:var(--texte-2);line-height:1.55;
}
.champ--miel{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.formulaire__etat{
  padding:var(--e4) var(--e5);border-radius:var(--rayon-s);
  border:1px solid var(--filet);background:rgba(212,175,55,.07);
  font-size:.94rem;color:var(--or-clair);
}
.formulaire__etat[data-type="erreur"]{border-color:rgba(200,85,61,.5);background:rgba(200,85,61,.1);color:#E8A392}
@media (min-width:720px){
  .formulaire--duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .formulaire--duo .champ--large,.formulaire--duo .champ--consentement,
  .formulaire--duo .formulaire__pied,.formulaire--duo .formulaire__etat{grid-column:1/-1}
}

/* 5.10 coordonnées */
.coordonnees{display:flex;flex-direction:column;gap:var(--e5)}
.coordonnees__ligne{display:flex;gap:var(--e4);align-items:flex-start}
/* La riga è flessibile e l'indirizzo di posta è una parola sola di 39
   caratteri: senza `min-inline-size:0` il contenitore non si restringe sotto la
   sua larghezza minima e la pagina dei contatti sbordava — di 3 px in inglese a
   375, di 8 px a sinistra in arabo (dove l'eccesso esce dall'altro lato), e di
   36 px a 320. `break-word` e non `anywhere`: quest'ultimo cambia anche la
   larghezza minima intrinseca e altrove ha fatto collassare un pulsante. */
.coordonnees__ligne > span{min-inline-size:0}
.coordonnees__icone{
  inline-size:34px;block-size:34px;flex:none;color:var(--or);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--filet);border-radius:50%;
}
.coordonnees__icone svg{inline-size:16px;block-size:16px;stroke:currentColor;fill:none;stroke-width:1.4}
.coordonnees__etiquette{
  display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-3);margin-bottom:2px;
}
[lang="ar"] .coordonnees__etiquette{letter-spacing:0;text-transform:none;font-size:.86rem}
.coordonnees__valeur{color:var(--texte);font-size:1.02rem;line-height:1.5;overflow-wrap:break-word}
.coordonnees__valeur a{color:var(--texte)}
.coordonnees__valeur a:hover{color:var(--or-clair)}

/* 5.11 ruban défilant (ticker) */
.ruban-defilant{
  overflow:hidden;border-block:1px solid var(--filet-faible);
  padding-block:var(--e4);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
}
.ruban-defilant__piste{display:flex;gap:var(--e8);width:max-content;animation:defile 42s linear infinite}
.ruban-defilant:hover .ruban-defilant__piste{animation-play-state:paused}
.ruban-defilant__item{
  display:inline-flex;align-items:center;gap:var(--e3);
  font-family:var(--f-marque);font-size:.78rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--texte-3);
  white-space:nowrap;
}
[lang="ar"] .ruban-defilant__item{letter-spacing:0;text-transform:none;font-size:.96rem}
.ruban-defilant__item::before{content:"◆";color:var(--or);font-size:.6rem;opacity:.7}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .ruban-defilant__piste{animation-name:defile-rtl}
@keyframes defile-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* 5.12 bande d'appel */
.bande{
  position:relative;overflow:hidden;
  border:1px solid var(--filet);border-radius:var(--rayon-l);
  padding:clamp(34px,5vw,72px);
  background:
    radial-gradient(90% 140% at 8% 0%,rgba(212,175,55,.14) 0%,transparent 55%),
    linear-gradient(150deg,var(--surface-2) 0%,var(--noir) 100%);
  text-align:center;
}
.bande h2{margin-bottom:var(--e4)}
.bande .plomb{margin-inline:auto;text-align:center}
.bande .groupe-boutons{justify-content:center;margin-top:var(--e6)}

/* 5.13 pied de page */
.pied{
  border-top:1px solid var(--filet-faible);
  padding-block:clamp(48px,6vw,80px) var(--e6);
  background:linear-gradient(180deg,var(--noir) 0%,#030307 100%);
}
.pied__haut{
  display:grid;gap:clamp(32px,4vw,56px);
  grid-template-columns:1fr;
  padding-bottom:var(--e8);
}
@media (min-width:760px){.pied__haut{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:1100px){.pied__haut{grid-template-columns:1.6fr 1fr 1fr 1.1fr}}
.pied__titre{
  font-family:var(--f-marque);font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--or);
  margin-bottom:var(--e5);
}
[lang="ar"] .pied__titre{letter-spacing:0;text-transform:none;font-size:.92rem}
.pied__liste{display:flex;flex-direction:column;gap:var(--e3)}
.pied__liste a{color:var(--texte-2);font-size:.94rem}
.pied__liste a:hover{color:var(--or-clair)}
.pied__bas{
  border-top:1px solid var(--filet-faible);padding-top:var(--e5);
  display:flex;flex-wrap:wrap;gap:var(--e4) var(--e6);
  align-items:center;justify-content:space-between;
  font-size:var(--taille-note);color:var(--texte-3);
}
.pied__legal{display:flex;flex-wrap:wrap;gap:var(--e5)}
.pied__legal a{color:var(--texte-3)}
.pied__legal a:hover{color:var(--or-champagne)}
.pied__avis{
  margin-top:var(--e5);font-size:var(--taille-note);line-height:1.6;color:var(--texte-3);
  max-width:100ch;
}

/* ------------------------------------------------------- 6. HERO */
.hero{
  position:relative;
  min-block-size:min(100svh,940px);
  display:flex;align-items:center;
  /* in fondo serve una fascia libera per l'indicatore «défiler»: senza,
     finisce sopra le cifre della riga in basso (misurato: 2px di sovrapposizione) */
  padding-block:calc(var(--entete-h) + var(--e8)) calc(var(--e9) + var(--e5));
  overflow:hidden;
}
.hero__fond{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 78% 22%,rgba(212,175,55,.16) 0%,transparent 60%),
    radial-gradient(60% 50% at 12% 78%,rgba(138,100,16,.14) 0%,transparent 62%);
}
.hero__fond svg{position:absolute;inset:0;inline-size:100%;block-size:100%}
.hero__interieur{position:relative;z-index:1;width:100%}
.hero__contenu{max-width:min(46rem,100%)}
.hero h1{margin-bottom:var(--e5)}
.hero .plomb{margin-bottom:var(--e7);font-size:calc(1.24rem * var(--echelle-ar))}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:var(--e5) var(--e7);
  margin-top:var(--e9);padding-top:var(--e5);
  border-top:1px solid var(--filet-faible);
}
@media (max-width:760px){
  .hero__meta{margin-top:var(--e7);gap:var(--e4) var(--e6)}
}
.hero__meta-item{display:flex;flex-direction:column;gap:2px}
.hero__meta-valeur{
  font-family:var(--f-titre);font-size:1.7rem;line-height:1;
  color:var(--or-clair);font-variant-numeric:tabular-nums;
}
.hero__meta-libelle{font-size:var(--taille-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-3)}
[lang="ar"] .hero__meta-libelle{letter-spacing:0;text-transform:none;font-size:.88rem}
.hero__defilement{
  position:absolute;inset-block-end:var(--e6);inset-inline-start:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:var(--e2);
  font-size:var(--taille-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--texte-4);
}
[lang="ar"] .hero__defilement{letter-spacing:0;text-transform:none;font-size:.82rem}
.hero__defilement::after{
  content:"";inline-size:1px;block-size:40px;
  background:linear-gradient(180deg,var(--or),transparent);
  /* tre volte e basta: era un ciclo continuo veloce, e un ciclo veloce in fondo
     allo schermo si porta via l'attenzione dal titolo. */
  animation:descend 2.4s ease-in-out 3;
}
@keyframes descend{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ------------------------------------------- 7. MODULI INTERATTIVI */

/* 7.1 grafici */
.graphique{
  background:linear-gradient(160deg,var(--surface) 0%,var(--noir-2) 100%);
  border:1px solid var(--filet-faible);
  border-radius:var(--rayon);
  padding:clamp(22px,2.4vw,34px);
}
.graphique__titre{
  font-family:var(--f-titre);font-size:clamp(1.15rem,1.8vw,1.45rem);
  margin:0 0 var(--e2);color:var(--texte);
}
.graphique__corps{display:grid;gap:clamp(20px,2.4vw,34px);align-items:start}
@media (min-width:920px){
  /* il disegno prende due terzi, le condizioni e le fonti stanno di fianco,
     separate da un filetto: si leggono guardando i dati, non dopo. */
  .graphique__corps{grid-template-columns:minmax(0,1.9fr) minmax(210px,.82fr)}
  .graphique__lato{
    border-inline-start:1px solid var(--filet-faible);
    padding-inline-start:clamp(18px,1.8vw,26px);
    align-self:stretch;
  }
}
.graphique__disegno{min-inline-size:0}
.graphique__sous-titre{font-size:.95rem;line-height:1.6;color:var(--texte);margin:0}
.graphique__lato .graphique__sources{margin-top:var(--e5)}
.graphique__zone{position:relative;inline-size:100%}
.graphique svg{inline-size:100%;block-size:auto;overflow:visible}
.graphique .grille-fond line{stroke:rgba(255,255,255,.05);stroke-width:1}
.graphique .axe text{fill:var(--texte-3);font:400 13px var(--f-texte);font-variant-numeric:tabular-nums}
.graphique .barre{transition:opacity var(--t-court) var(--courbe)}
.graphique .barre__forme{fill:rgba(212,175,55,.26);stroke:rgba(212,175,55,.45);stroke-width:1}
.graphique .barre--accent .barre__forme{fill:url(#degradeOr);stroke:var(--or-clair);stroke-width:1.2;filter:url(#lueurOr)}
.graphique .barre__valeur{fill:var(--texte);font:500 14px var(--f-texte);font-variant-numeric:tabular-nums}
.graphique .barre--accent .barre__valeur{fill:var(--or-clair);font-weight:500}
.graphique .barre__libelle{fill:var(--texte-2);font:400 12.5px var(--f-texte)}
.graphique .barre--accent .barre__libelle{fill:var(--or-champagne)}
.graphique .barre:hover{opacity:.88}
.graphique .barre:focus-visible{outline:none}
.graphique .barre:focus-visible .barre__forme{stroke:var(--or-clair);stroke-width:2}
.graphique .ligne__trace{fill:none;stroke:url(#degradeOrLigne);stroke-width:2;stroke-linecap:round}
.graphique .ligne__point{fill:var(--noir);stroke:var(--or);stroke-width:1.5}
.graphique .ligne__aire{fill:url(#degradeAire)}
.graphique .donut__piste{fill:none;stroke:rgba(255,255,255,.06);stroke-width:14}
.graphique .donut__arc{fill:none;stroke-width:14;stroke-linecap:round;transition:stroke-width var(--t-court)}
.graphique .donut__arc:hover{stroke-width:17}
.graphique .donut__centre-valeur{
  fill:var(--or-clair);font:400 2rem/1 var(--f-titre);
  font-variant-numeric:tabular-nums;text-anchor:middle;
}
.graphique .donut__centre-libelle{fill:var(--texte-3);font:400 12px var(--f-texte);text-anchor:middle;letter-spacing:.1em}
.graphique__legende{
  display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);
  margin-top:var(--e5);font-size:.84rem;color:var(--texte-2);
}
.graphique__legende li{display:inline-flex;align-items:center;gap:var(--e2)}
.graphique__legende .pastille{inline-size:10px;block-size:10px;border-radius:2px;flex:none}
.graphique__sources{
  margin-top:var(--e5);padding-top:var(--e4);
  border-top:1px solid var(--filet-faible);
  font-size:var(--taille-note);line-height:1.6;color:var(--texte-3);
}
.graphique__sources a{color:var(--texte-3);border-bottom:1px dotted var(--filet)}
.graphique__sources a:hover{color:var(--or-champagne)}
.graphique__infobulle{
  position:absolute;z-index:5;pointer-events:none;
  background:rgba(9,9,16,.97);border:1px solid var(--filet);
  border-radius:var(--rayon-s);padding:10px 14px;
  font-size:.84rem;color:var(--texte);
  box-shadow:var(--ombre);
  opacity:0;transform:translateY(4px);
  transition:opacity var(--t-court) var(--courbe),transform var(--t-court) var(--courbe);
  max-inline-size:250px;
}
.graphique__infobulle.est-visible{opacity:1;transform:none}
.graphique__infobulle strong{display:block;color:var(--or-clair);margin-bottom:2px}
.graphique__tableau{margin-top:var(--e5);font-size:.86rem}
.graphique__tableau th,.graphique__tableau td{
  padding:8px 12px;text-align:start;border-bottom:1px solid var(--filet-faible);
}
.graphique__tableau th{color:var(--texte-2);font-weight:500;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.graphique__tableau td{color:var(--texte);font-variant-numeric:tabular-nums}

/* 7.2 simulatore */
.simulateur{
  background:
    radial-gradient(80% 120% at 100% 0%,rgba(212,175,55,.10) 0%,transparent 55%),
    linear-gradient(160deg,var(--surface-2) 0%,var(--noir) 100%);
  border:1px solid var(--filet);
  border-radius:var(--rayon-l);
  padding:clamp(24px,3vw,46px);
}
.simulateur__commande{margin-bottom:var(--e7)}
.simulateur__etiquette{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e3);
  margin-bottom:var(--e4);
}
.simulateur__etiquette-texte{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2);
}
[lang="ar"] .simulateur__etiquette-texte{letter-spacing:0;text-transform:none;font-size:.9rem}
.simulateur__montant{
  font-family:var(--f-titre);font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1;
  color:var(--or-clair);font-variant-numeric:tabular-nums;
  margin-inline-start:auto;
}
.simulateur input[type="range"]{
  inline-size:100%;appearance:none;-webkit-appearance:none;
  background:transparent;block-size:32px;margin:0;cursor:grab;
}
.simulateur input[type="range"]:active{cursor:grabbing}
.simulateur input[type="range"]::-webkit-slider-runnable-track{
  block-size:3px;border-radius:3px;
  background:linear-gradient(to right,var(--or) 0%,var(--or) var(--progression,40%),rgba(255,255,255,.1) var(--progression,40%),rgba(255,255,255,.1) 100%);
}
.simulateur input[type="range"]::-moz-range-track{block-size:3px;border-radius:3px;background:rgba(255,255,255,.1)}
.simulateur input[type="range"]::-moz-range-progress{block-size:3px;border-radius:3px;background:var(--or)}
.simulateur input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  inline-size:22px;block-size:22px;border-radius:50%;margin-block-start:-10px;
  background:var(--degrade-or-vertical);
  border:1px solid var(--or-clair);
  box-shadow:0 0 0 6px rgba(212,175,55,.12),0 2px 10px rgba(0,0,0,.6);
  transition:box-shadow var(--t-court) var(--courbe);
}
.simulateur input[type="range"]:hover::-webkit-slider-thumb{box-shadow:0 0 0 9px rgba(212,175,55,.18),0 2px 12px rgba(0,0,0,.7)}
.simulateur input[type="range"]::-moz-range-thumb{
  inline-size:20px;block-size:20px;border-radius:50%;border:1px solid var(--or-clair);
  background:var(--degrade-or-vertical);
}
.simulateur__bornes{display:flex;justify-content:space-between;font-size:var(--taille-micro);color:var(--texte-3);margin-top:var(--e1)}
.simulateur__resultats{display:flex;flex-direction:column;gap:var(--e4)}
.simulateur__regime{display:grid;grid-template-columns:1fr;gap:var(--e2)}
.simulateur__regime-tete{display:flex;align-items:baseline;gap:var(--e3);font-size:.92rem}
.simulateur__regime-nom{color:var(--texte-2)}
.simulateur__regime--accent .simulateur__regime-nom{color:var(--or-clair);font-weight:500}
.simulateur__regime-taux{font-size:var(--taille-note);color:var(--texte-3);font-variant-numeric:tabular-nums}
.simulateur__regime-impot{
  margin-inline-start:auto;font-family:var(--f-titre);font-size:1.28rem;
  color:var(--texte);font-variant-numeric:tabular-nums;
}
.simulateur__regime--accent .simulateur__regime-impot{color:var(--or-clair)}
.simulateur__jauge{block-size:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.simulateur__jauge span{
  display:block;block-size:100%;inline-size:0;border-radius:99px;
  background:rgba(212,175,55,.34);
  transition:inline-size var(--t-moyen) var(--courbe);
}
.simulateur__regime--accent .simulateur__jauge span{background:var(--degrade-or-doux);box-shadow:0 0 18px rgba(212,175,55,.45)}
.simulateur__economie{
  margin-top:var(--e7);padding-top:var(--e5);
  border-top:1px solid var(--filet);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e3);
}
.simulateur__economie-libelle{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2)}
[lang="ar"] .simulateur__economie-libelle{letter-spacing:0;text-transform:none;font-size:.94rem}
.simulateur__economie-valeur{
  font-family:var(--f-titre);font-size:clamp(2rem,4vw,3rem);line-height:1;
  background:var(--degrade-or);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums;margin-inline-start:auto;
}
.simulateur__note{margin-top:var(--e5);font-size:var(--taille-note);color:var(--texte-3);line-height:1.6}

/* 7.3 carta geografica */
.carte-geo{
  position:relative;
  border:1px solid var(--filet-faible);border-radius:var(--rayon);
  background:radial-gradient(70% 70% at 30% 20%,#0B0B14 0%,#05050A 100%);
  overflow:hidden;
}
.carte-geo svg{inline-size:100%;block-size:auto;display:block}
.carte-geo .terre{fill:#14141E;stroke:rgba(255,255,255,.05);stroke-width:.6}
.carte-geo .pays{fill:#14141E;stroke:rgba(255,255,255,.055);stroke-width:.6;transition:fill var(--t-moyen) var(--courbe)}
.carte-geo .pays--sujet{fill:url(#degradeTerreOr);stroke:rgba(212,175,55,.5);stroke-width:.9}
.carte-geo .pays--sujet:hover{fill:url(#degradeTerreOrFort)}
.carte-geo .graticule{stroke:rgba(212,175,55,.06);stroke-width:.5;fill:none}
.carte-geo .liaison{
  fill:none;stroke:url(#degradeArc);stroke-width:1.4;stroke-linecap:round;
  filter:url(#lueurArc);
}
.carte-geo .liaison--mer{stroke-dasharray:5 5;stroke-width:1.2;opacity:.85}
.carte-geo .liaison--masquee{opacity:0;pointer-events:none;transition:opacity var(--t-moyen)}
.carte-geo .avion{fill:var(--or-clair);filter:drop-shadow(0 0 6px rgba(243,227,176,.8))}
.carte-geo .navire{fill:var(--or-champagne)}
.carte-geo .noeud{cursor:pointer}
.carte-geo .noeud__halo{fill:rgba(212,175,55,.18)}
.carte-geo .noeud__point{fill:var(--or);stroke:var(--noir);stroke-width:.8}
.carte-geo .noeud--siege .noeud__point{fill:var(--or-clair);stroke:var(--or-profond)}
.carte-geo .noeud__etiquette{
  fill:var(--texte);font:400 11px var(--f-texte);
  paint-order:stroke;stroke:rgba(5,5,10,.85);stroke-width:3px;stroke-linejoin:round;
}
.carte-geo .noeud--siege .noeud__etiquette{fill:var(--or-clair);font-weight:500}
.carte-geo .noeud:hover .noeud__halo,.carte-geo .noeud:focus-visible .noeud__halo{fill:rgba(212,175,55,.34)}
.carte-geo .mesure{stroke:rgba(243,227,176,.55);stroke-width:.8;stroke-dasharray:3 3;fill:none}
.carte-geo .mesure__texte{fill:var(--or-champagne);font:500 10.5px var(--f-texte);font-variant-numeric:tabular-nums}
.carte-geo__commandes{
  position:absolute;inset-block-start:var(--e4);inset-inline-start:var(--e4);
  display:flex;gap:var(--e2);flex-wrap:wrap;
}
.carte-geo__bouton{
  padding:7px 14px;border-radius:999px;
  border:1px solid var(--filet);background:rgba(9,9,16,.8);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-2);
  transition:color var(--t-court),border-color var(--t-court),background var(--t-court);
}
[lang="ar"] .carte-geo__bouton{letter-spacing:0;text-transform:none;font-size:.86rem}
.carte-geo__bouton[aria-pressed="true"]{color:var(--or-clair);border-color:var(--or);background:rgba(212,175,55,.12)}
.carte-geo__fiche{
  position:absolute;inset-block-end:var(--e4);inset-inline-start:var(--e4);
  max-inline-size:min(280px,calc(100% - 2 * var(--e4)));
  background:rgba(9,9,16,.95);border:1px solid var(--filet);
  border-radius:var(--rayon-s);padding:var(--e4) var(--e5);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity var(--t-moyen) var(--courbe),transform var(--t-moyen) var(--courbe);
  box-shadow:var(--ombre);
}
.carte-geo__fiche.est-visible{opacity:1;transform:none}
.carte-geo__fiche-nom{
  font-family:var(--f-marque);font-size:.86rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--or-clair);margin:0 0 var(--e2);
}
[lang="ar"] .carte-geo__fiche-nom{letter-spacing:0;text-transform:none;font-size:1.05rem}
.carte-geo__fiche-texte{font-size:.85rem;color:var(--texte-2);margin:0;line-height:1.55}

/* IL PANNELLO DEL NODO — si apre solo quando il luogo è SCELTO (clic, tocco,
   Invio). Al passaggio del mouse la scheda resta l'etichetta di prima: un
   pannello che si apre a ogni movimento coprirebbe la mappa. */
.carte-geo__fiche:not(.est-fissata) .carte-geo__fiche-titre,
.carte-geo__fiche:not(.est-fissata) .carte-geo__fiche-panneau,
.carte-geo__fiche:not(.est-fissata) .carte-geo__fiche-services,
.carte-geo__fiche:not(.est-fissata) .carte-geo__fiche-avis{display:none}
.carte-geo__fiche.est-fissata{
  max-inline-size:min(368px,calc(100% - 2 * var(--e4)));
  /* tetto d'altezza con scorrimento interno: senza, in arabo il pannello
     arrivava a 643 px e copriva la mappa che dovrebbe spiegare. */
  max-block-size:min(76%,440px);overflow-y:auto;overscroll-behavior:contain;
  padding:var(--e5) var(--e5) var(--e4);
  border-color:var(--filet-fort);
}
/* fissato, il testo breve del nodo lascia il posto al pannello: diceva la
   stessa cosa in meno parole. Il ruolo e la distanza restano nell'etichetta
   al passaggio del mouse e sugli archi. */
.carte-geo__fiche.est-fissata .carte-geo__fiche-texte{display:none}
.carte-geo__fiche.est-fissata .carte-geo__fiche-panneau{border-top:0;padding-top:0;margin-top:0}
.carte-geo__fiche-titre{
  font-family:var(--f-titre);font-size:1.12rem;font-weight:400;line-height:1.3;
  color:var(--texte);margin:0 0 var(--e3);
}
.carte-geo__fiche-panneau{
  font-size:.9rem;line-height:1.6;color:var(--texte-2);
  margin:var(--e3) 0 0;padding-top:var(--e3);
  border-top:1px solid var(--filet-faible);
}
.carte-geo__fiche-services{margin-top:var(--e4)}
.carte-geo__fiche-services-titre{
  font-family:var(--f-marque);font-size:var(--taille-micro);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--or);
  margin:0 0 var(--e2);
}
[lang="ar"] .carte-geo__fiche-services-titre{letter-spacing:0;text-transform:none;font-size:.9rem}
.carte-geo__fiche-services ul{display:flex;flex-direction:column;gap:var(--e2);margin:0}
.carte-geo__fiche-services a{
  display:inline-block;font-size:.88rem;line-height:1.45;
  color:var(--or-champagne);border-bottom:1px solid transparent;
  transition:color var(--t-comando) var(--courbe-comando),
             border-color var(--t-comando) var(--courbe-comando);
}
.carte-geo__fiche-services a:hover{color:var(--or-clair);border-bottom-color:var(--or-cuivre)}
.carte-geo__fiche-avis{
  font-size:var(--taille-note);line-height:1.5;color:var(--texte-3);
  margin:var(--e4) 0 0;padding-top:var(--e3);
  border-top:1px solid var(--filet-faible);
}
/* la riga fissa sotto la mappa: accompagna i pannelli mauritani ed è visibile
   anche senza JavaScript, dove i pannelli non si aprono */
.carte-geo__avis{
  margin:0;padding:var(--e3) var(--e5) var(--e4);
  font-size:var(--taille-note);line-height:1.5;
  border-top:1px solid var(--filet-faible);
}
.carte-geo__legende{
  display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);
  padding:var(--e4) var(--e5);border-top:1px solid var(--filet-faible);
  font-size:var(--taille-note);color:var(--texte-3);
}
.carte-geo__legende li{display:inline-flex;align-items:center;gap:var(--e2)}
/* I due pallini della legenda erano i caratteri ● e ○, che non esistono ne in
   Amiri ne in IBM Plex Sans Arabic: per disegnarli il browser scaricava Jost
   (26 KB) sulle pagine arabe che hanno la mappa. Disegnati, non scritti.

   IL SELETTORE DEVE ESSERE COSI LUNGO. La legenda sta dentro `.carte-geo`, e
   piu su c'e `.carte-geo svg{inline-size:100%;block-size:auto}` per la mappa:
   specificita 0-1-1, piu alta di un solo nome di classe. Con
   `.legende-pastiglia` da sola il pallino prendeva il 100% della colonna
   (misurato in linea: 41 e 68 px invece di 10, e a piena larghezza ~290 px:
   due dischi giganti al posto di due puntini). Qui la specificita e 0-2-0, e
   inoltre l'SVG porta width/height come attributi, cosi e giusto anche senza
   CSS. */
.carte-geo__legende .legende-pastiglia{
  inline-size:10px;block-size:10px;flex:none;color:inherit;
}

/* 7.4 rivelazione allo scroll */
[data-mmw="reveal"],.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity var(--t-long) var(--courbe),transform var(--t-long) var(--courbe);
}
[data-mmw="reveal"].est-visible,.reveal.est-visible{opacity:1;transform:none}
[data-mmw="reveal"][data-retard="1"]{transition-delay:.08s}
[data-mmw="reveal"][data-retard="2"]{transition-delay:.16s}
[data-mmw="reveal"][data-retard="3"]{transition-delay:.24s}
[data-mmw="reveal"][data-retard="4"]{transition-delay:.32s}
[data-mmw="reveal"][data-sens="cote"]{transform:translateX(28px)}
[dir="rtl"] [data-mmw="reveal"][data-sens="cote"]{transform:translateX(-28px)}
/* Su schermi stretti lo scostamento laterale creerebbe una barra orizzontale
   prima che l'animazione parta: li l'elemento sale invece di scorrere. */
@media (max-width:820px){
  [data-mmw="reveal"][data-sens="cote"],
  [dir="rtl"] [data-mmw="reveal"][data-sens="cote"]{transform:translateY(22px)}
}

/* 7.5 alone del cursore (solo puntatore fine) */
.lueur-curseur{
  position:fixed;inset-block-start:0;inset-inline-start:0;z-index:2;
  inline-size:420px;block-size:420px;
  /* proprietà logiche: con margin:-210px 0 0 -210px in arabo l'alone
     partirebbe dal lato sbagliato */
  margin-block-start:-210px;margin-inline-start:-210px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(212,175,55,.055) 0%,transparent 65%);
  opacity:0;transition:opacity .6s var(--courbe);
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){.lueur-curseur.est-active{opacity:1}}

/* 7.6 tilt */
[data-mmw="tilt"]{transform-style:preserve-3d;will-change:transform}

/* 7.7 mosaico di immagini */
.mosaique{display:grid;gap:var(--e4);grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.mosaique{grid-template-columns:repeat(4,1fr);gap:var(--e5)}}
.mosaique figure{position:relative;overflow:hidden;border-radius:var(--rayon-s);border:1px solid var(--filet-faible)}
.mosaique img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform 1.2s var(--courbe)}
.mosaique figure:hover img{transform:scale(1.04)}
.mosaique--haute figure:first-child{grid-row:span 2}

/* 7.8 onglets */
.onglets{display:flex;flex-wrap:wrap;gap:var(--e2);border-bottom:1px solid var(--filet-faible);margin-bottom:var(--e7)}
.onglets__bouton{
  padding:var(--e3) var(--e5);
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-3);
  border-bottom:1px solid transparent;margin-bottom:-1px;
  transition:color var(--t-court),border-color var(--t-court);
}
[lang="ar"] .onglets__bouton{letter-spacing:0;text-transform:none;font-size:.94rem}
.onglets__bouton:hover{color:var(--texte)}
.onglets__bouton[aria-selected="true"]{color:var(--or-clair);border-bottom-color:var(--or)}
.onglets__panneau[hidden]{display:none}

/* ------------------------------------------------------- 8. UTILITÀ */
.defs-svg{position:absolute;inline-size:0;block-size:0;overflow:hidden}
.visuellement-cachee{
  position:absolute!important;inline-size:1px;block-size:1px;
  padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Su un <table> la ricetta qui sopra NON basta: l'algoritmo di tabella
   automatica ignora una larghezza di 1 px e la tabella si allarga fino al
   contenuto. Le tabelle dei dati dei grafici (che il JavaScript nasconde dopo
   aver disegnato l'SVG) restavano larghe 535 px fuori dallo schermo: a 375 px
   cinque pagine su ventisette chiedevano fino a 666 px di larghezza.
   `table-layout:fixed` fa rispettare la misura dichiarata, e la tabella
   conserva il proprio display — cioè le sue righe e le sue colonne per chi
   legge con uno screen reader, che è il motivo per cui quella tabella esiste. */
table.visuellement-cachee{table-layout:fixed;max-inline-size:1px}
.lien-evitement{
  position:absolute;z-index:200;
  inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);
  padding:0;border:0;white-space:nowrap;
  background:var(--or);color:#0B0B12;border-radius:0 0 var(--rayon-s) 0;
  font-size:.86rem;font-weight:500;
}
.lien-evitement:focus{
  inline-size:auto;block-size:auto;overflow:visible;clip-path:none;
  padding:var(--e3) var(--e5);
  inset-inline-start:0;inset-block-start:0;color:#0B0B12;
}
.centre{text-align:center}
.centre .plomb{margin-inline:auto}
.nowrap{white-space:nowrap}
.tabulaire{font-variant-numeric:tabular-nums}
.or{color:var(--or-clair)}
.secondaire{color:var(--texte-2)}
.tertiaire{color:var(--texte-3)}
.marge-0{margin:0}
.pleine-largeur{grid-column:1/-1}
.avis-legal{
  margin-top:var(--e7);padding:var(--e4) var(--e5);
  border-inline-start:2px solid var(--filet);
  background:rgba(255,255,255,.015);
  font-size:var(--taille-note);line-height:1.65;color:var(--texte-3);
}


/* ------------------------------------------ 8bis. DECORO DELLA HERO */
/* Lo sfondo della hero è la mappa vera (geo.py): Canarie, Mauritania e le rotte
   reali Las Palmas–Nouakchott e Las Palmas–Nouadhibou. Si muove, ma piano: le
   durate sono lunghe (15-46 s) perché deve sembrare vivo, non irrequieto.
   I percorsi e le lunghezze degli archi arrivano da deco.css, generato. */
.deco-hero{position:absolute;inset:0;inline-size:100%;block-size:100%}

/* deriva lentissima di tutta la mappa: da sola non si nota, ma toglie
   quell'aria di immagine incollata */
.deco-hero__derive{animation:derive-deco 46s ease-in-out infinite alternate}
@keyframes derive-deco{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-9px,6px,0)}
}

.deco-hero__graticule path{fill:none;stroke:rgba(212,175,55,.055);stroke-width:.6}
.deco-hero__terres path{fill:url(#decoTerre);stroke:rgba(212,175,55,.10);stroke-width:.5}
.deco-hero__sujet{fill:url(#decoTerre);stroke:rgba(212,175,55,.34);stroke-width:.9}
.deco-hero__iles{fill:rgba(212,175,55,.13);stroke:rgba(243,227,176,.85);stroke-width:1.6}
.deco-hero__cables line{stroke:rgba(212,175,55,.16);stroke-width:.7}

/* l'alone sulle isole respira */
.deco-hero__halo{animation:respire-halo 9s ease-in-out infinite alternate}
@keyframes respire-halo{from{opacity:.55}to{opacity:1}}

/* gli archi si disegnano all'arrivo sulla pagina */
.deco-hero__arc{
  fill:none;stroke:url(#decoArc);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:var(--arc-long,1200);stroke-dashoffset:var(--arc-long,1200);
  animation:trace-arc 2.8s var(--courbe) .35s forwards;
}
.deco-hero__arc--mer{stroke-width:1.3;opacity:.6;stroke-dasharray:6 7;animation:none}
@keyframes trace-arc{to{stroke-dashoffset:0}}

/* scia: il tratto luminoso che corre dietro al mezzo. La dasharray e i
   fotogrammi stanno in deco.css, calcolati sulla lunghezza vera dell'arco. */
.deco-hero__scia{
  fill:none;stroke:var(--or-clair);stroke-width:2.6;stroke-linecap:round;
  opacity:0;filter:drop-shadow(0 0 4px rgba(243,227,176,.6));
  animation:scia-aria 15s linear 1.6s infinite;
}
.deco-hero__scia--mer{
  stroke:var(--or-champagne);stroke-width:1.8;filter:none;
  animation:scia-mare 27s linear 3s infinite;
}

/* pulsazioni dai porti */
.deco-hero__pouls{
  fill:none;stroke:var(--or-clair);stroke-width:1.1;
  transform-box:fill-box;transform-origin:center;
  animation:pouls-deco 5s ease-out infinite;
}
.deco-hero__pouls--1{animation-delay:.4s}
.deco-hero__pouls--2{animation-delay:2.1s}
.deco-hero__pouls--3{animation-delay:3.6s}
@keyframes pouls-deco{
  0%{transform:scale(.4);opacity:0}
  12%{opacity:.7}
  100%{transform:scale(4.4);opacity:0}
}

/* i nomi delle tre città: partenza, scalo marittimo, arrivo. Stanno dentro il
   gruppo trasformato, quindi si spostano con la mappa. In arabo la spaziatura
   fra le lettere va azzerata: spezzerebbe le legature della scrittura. */
.deco-hero__etiquette{
  font-family:var(--f-texte);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  fill:var(--or-champagne);opacity:.6;
}
.deco-hero__etiquette--siege{fill:var(--or-clair);opacity:.8}
[lang="ar"] .deco-hero__etiquette{letter-spacing:0;text-transform:none;font-size:12.5px}

.deco-hero__noeud{fill:var(--or-champagne);opacity:.85}
.deco-hero__noeud--siege{fill:var(--or-clair);opacity:1}

.deco-hero__avion path{fill:var(--or-clair);opacity:.95}
.deco-hero__navire path{fill:var(--or-champagne);opacity:.9}

@supports (offset-path:path("M 0 0 L 1 1")){
  .deco-hero__avion{
    offset-path:var(--deco-arc);offset-rotate:auto;offset-distance:52%;
    animation:vol-deco 15s linear 1.6s infinite;
  }
  .deco-hero__navire{
    offset-path:var(--deco-arc-mer);offset-rotate:auto;offset-distance:45%;
    animation:nav-deco 27s linear 3s infinite;
  }
  .deco-hero__avion-pose,.deco-hero__navire-pose{transform:none}
  @keyframes vol-deco{
    0%{offset-distance:0%;opacity:0}
    7%{opacity:1}
    90%{opacity:1}
    100%{offset-distance:100%;opacity:0}
  }
  @keyframes nav-deco{
    0%{offset-distance:0%;opacity:0}
    9%{opacity:.9}
    88%{opacity:.9}
    100%{offset-distance:100%;opacity:0}
  }
}

/* In arabo la geografia sta a sinistra (deco.css). Lì il riquadro dei dati
   finisce dentro lo schermo e i confini rettilinei del Sahara sembrerebbero
   un pannello: teniamo la sola Mauritania, che ha una sagoma riconoscibile. */
[dir="rtl"] .deco-hero__terres,
[dir="rtl"] .deco-hero__graticule{display:none}

@media (max-width:1000px){
  .deco-hero{opacity:.5}
  /* su schermo piccolo basta l'aereo: meno cose che si muovono */
  .deco-hero__navire,.deco-hero__scia--mer,.deco-hero__pouls{display:none}
  .deco-hero__etiquette{display:none}
  .deco-hero__derive{animation:none}
}

/* Chi ha chiesto meno animazioni vede la scena ferma e completa: aereo e nave
   parcheggiati a metà rotta, non spariti. (La regola generale del punto 10
   azzererebbe le durate e l'ultimo fotogramma li porta a opacità 0.) */
@media (prefers-reduced-motion:reduce){
  .deco-hero__derive,.deco-hero__halo,.deco-hero__pouls{animation:none!important}
  .deco-hero__pouls{display:none}
  .deco-hero__scia{display:none}
  .deco-hero__avion,.deco-hero__navire{animation:none!important;opacity:1}
  .deco-hero__avion{offset-distance:52%}
  .deco-hero__navire{offset-distance:45%}
}

/* --------------------------- 8septies. SETTORI: SCELTA + DISEGNO */
/* Un solo componente, due disposizioni. Su telefono: titolo, pannello, titolo,
   pannello — una fila di pannelli espandibili, che è l'ordine naturale del
   documento. Su schermo largo: `display:contents` scioglie il contenitore di
   ogni voce, i titoli finiscono nella prima colonna e i pannelli si
   sovrappongono nella seconda (ne è visibile uno solo, gli altri hanno
   l'attributo hidden). Nessun markup duplicato, nessuna riscrittura in JS. */
.secteurs{display:grid;gap:var(--e2)}
.secteurs__titolo{margin:0;font-size:1rem}
.secteurs__tete{
  display:flex;align-items:center;gap:var(--e3);
  inline-size:100%;min-block-size:56px;
  padding:var(--e3) var(--e4);text-align:start;
  font-family:var(--f-titre);font-size:1.12rem;font-weight:400;
  color:var(--texte-2);
  border:1px solid transparent;border-radius:var(--rayon-s);
  border-inline-start:2px solid var(--filet-faible);
  transition:color var(--t-comando) var(--courbe-comando),
             background var(--t-comando) var(--courbe-comando),
             border-color var(--t-comando) var(--courbe-comando);
}
.secteurs__tete:hover{color:var(--texte);background:var(--surface)}
.secteurs__tete[aria-expanded="true"]{
  color:var(--or-clair);background:var(--surface);
  border-inline-start-color:var(--or);
}
.secteurs__icona{flex:none;inline-size:22px;block-size:22px;color:var(--or)}
.secteurs__icona svg{inline-size:100%;block-size:100%;stroke-width:1.3}
.secteurs__corpo{padding:var(--e4) var(--e4) var(--e6)}
.secteurs__corpo[hidden]{display:none}
.secteurs__testo .mini-kpi{margin-block-start:var(--e5)}

@media (min-width:900px){
  .secteurs{
    grid-template-columns:minmax(240px,.78fr) minmax(0,1.7fr);
    column-gap:clamp(30px,3.4vw,56px);
    align-items:start;
  }
  .secteurs__voce{display:contents}
  .secteurs__titolo{grid-column:1}
  /* tutti i pannelli nella stessa cella: ne si vede uno solo per volta */
  .secteurs__corpo{grid-column:2;grid-row:1 / span 8;padding:0}
  .secteurs__corpo .illu-cadre{margin-block-end:var(--e5)}
}
@media (min-width:1180px){
  /* il disegno a fianco del testo quando c'è spazio davvero */
  .secteurs__corpo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(22px,2.4vw,38px);align-items:start}
  .secteurs__corpo .illu-cadre{margin-block-end:0}
}

/* ------------------------------- 8sexies. TAPPE DEL CORRIDOIO */
/* Sei tappe su una riga verticale: si accendono una dopo l'altra mentre la
   pagina scorre e restano accese, così si vede il percorso riempirsi.
   Lo scorrimento resta quello del browser: nessun blocco, nessun salto. */
.tappe{
  position:relative;display:grid;gap:clamp(26px,3.2vw,46px);
  margin-block-start:clamp(30px,3.6vw,52px);
  padding-inline-start:clamp(34px,4vw,56px);
}
/* la riga del percorso: pallida, e la parte percorsa si accende con le tappe */
.tappe::before{
  content:"";position:absolute;inset-block:6px 6px;
  inset-inline-start:clamp(9px,1.1vw,15px);
  inline-size:1px;background:var(--filet-faible);
}
.tappa{position:relative}
.tappa::before{
  content:"";position:absolute;inset-block-start:9px;
  inset-inline-start:calc(-1 * clamp(28px,3.4vw,46px));
  inline-size:9px;block-size:9px;border-radius:50%;
  border:1px solid var(--filet);background:var(--noir);
  transition:background var(--t-comando-lento) var(--courbe),
             border-color var(--t-comando-lento) var(--courbe),
             box-shadow var(--t-comando-lento) var(--courbe);
}
.tappa__numero{
  font-family:var(--f-titre);font-size:1.02rem;line-height:1;
  color:var(--texte-3);margin:0 0 var(--e2);
  font-variant-numeric:tabular-nums;
  transition:color var(--t-comando-lento) var(--courbe);
}
.tappa__titre{font-size:1.2rem;margin:0 0 var(--e2);color:var(--texte-2);
  transition:color var(--t-comando-lento) var(--courbe)}
.tappa__texte{margin:0;color:var(--texte-3);max-inline-size:62ch;
  transition:color var(--t-comando-lento) var(--courbe)}
/* raggiunta: il pallino si accende e il testo passa in primo piano */
.tappa.est-raggiunta::before{
  background:var(--or);border-color:var(--or);box-shadow:0 0 0 4px rgba(212,175,55,.12);
}
.tappa.est-raggiunta .tappa__numero{color:var(--or)}
.tappa.est-raggiunta .tappa__titre{color:var(--texte)}
.tappa.est-raggiunta .tappa__texte{color:var(--texte-2)}

/* ------------------- 8quinquies. «DE QUOI AVEZ-VOUS BESOIN ?» */
/* Sei opzioni sopra le schede: la scelta evidenzia la famiglia pertinente e
   apre le due azioni. Sono bottoni veri, quindi tastiera e tocco funzionano
   senza codice in più; lo stato è `aria-pressed`, non una classe sola. */
.besoin{
  margin-block:clamp(26px,3vw,44px) clamp(34px,4vw,56px);
  text-align:center;
}
.besoin__domanda{
  font-family:var(--f-titre);font-size:clamp(1.18rem,2vw,1.5rem);
  font-weight:400;color:var(--texte);margin:0 0 var(--e5);
}
.besoin__opzioni{
  display:flex;flex-wrap:wrap;gap:var(--e3);justify-content:center;
}
.besoin__opzione{
  min-block-size:44px;padding:var(--e2) var(--e5);
  font-family:var(--f-texte);font-size:.88rem;font-weight:400;
  color:var(--texte-2);
  border:1px solid var(--filet-faible);border-radius:999px;
  background:var(--surface);
  transition:color var(--t-comando) var(--courbe-comando),
             border-color var(--t-comando) var(--courbe-comando),
             background var(--t-comando) var(--courbe-comando);
}
.besoin__opzione:hover{color:var(--texte);border-color:var(--filet)}
.besoin__opzione[aria-pressed="true"]{
  color:var(--noir);border-color:transparent;
  background:var(--degrade-or-doux);font-weight:500;
}
.besoin__azioni{
  display:flex;flex-wrap:wrap;gap:var(--e4);justify-content:center;
  margin:var(--e5) 0 0;
}
.besoin__avviso{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* la scheda scelta si stacca; le altre restano leggibili ma cedono il passo */
[data-mmw-griglia="famiglie"].est-in-scelta .carte--service{
  transition:opacity var(--t-comando-lento) var(--courbe),
             border-color var(--t-comando-lento) var(--courbe);
  opacity:.52;
}
[data-mmw-griglia="famiglie"].est-in-scelta .carte--service.est-scelta{
  opacity:1;border-color:var(--filet-fort);box-shadow:var(--ombre-carte),var(--halo-or);
}
@media (prefers-reduced-motion:reduce){
  [data-mmw-griglia="famiglie"].est-in-scelta .carte--service{opacity:.72}
}

/* ------------------------------ 8quater. ILLUSTRAZIONI DELLE FAMIGLIE */
/* Sei disegni a tratto, uno per famiglia di servizi (_src/illustrazioni.py).
   Tre spessori, un solo alone, nessuna ombra: la profondità viene dal tratto.
   L'ingresso disegna i tracciati una volta sola, in sei tempi; la risposta
   all'interazione tocca solo gli «accenti», cioè ciò che completa il disegno.
   Il tocco e la tastiera passano per :focus-within, quindi hanno la stessa
   risposta del mouse senza rendere focalizzabile un disegno decorativo. */
.illu{inline-size:100%;block-size:auto;display:block;overflow:visible}
.illu__alone{fill:rgba(212,175,55,.045);stroke:none}
.illu__s1{stroke:var(--or-clair);stroke-width:1.9}
.illu__s2{stroke:var(--or);stroke-width:1.25;opacity:.88}
.illu__s3{stroke:var(--or-cuivre);stroke-width:.8;opacity:.6}
.illu__pieno{fill:rgba(212,175,55,.05)}

/* ingresso: ogni tracciato si disegna. pathLength="1" nell'SVG permette di
   animare senza conoscere la lunghezza vera di ciascun tracciato. */
.illu__t{stroke-dasharray:1;stroke-dashoffset:1}
.est-visible .illu__t{animation:illu-traccia .6s var(--courbe) forwards}
.illu__t--b1{animation-delay:0s}
.illu__t--b2{animation-delay:.07s}
.illu__t--b3{animation-delay:.14s}
.illu__t--b4{animation-delay:.21s}
.illu__t--b5{animation-delay:.28s}
.illu__t--b6{animation-delay:.35s}
@keyframes illu-traccia{to{stroke-dashoffset:0}}

/* il segno che percorre la rotta (accompagnamento internazionale) */
.illu__viaggio{color:var(--or-clair);opacity:0}
.illu__viaggio path{stroke:var(--or-clair);stroke-width:1.9;fill:none}
@supports (offset-path:path("M 0 0 L 1 1")){
  .illu__viaggio{
    offset-path:path("M 176 206 Q 326 84 488 268");
    offset-rotate:auto;offset-distance:50%;opacity:1;
  }
}
/* i luoghi che pulsano (attività digitali) */
.illu__pulsa{fill:none;stroke:var(--or-clair);stroke-width:1.2;opacity:0;
  transform-box:fill-box;transform-origin:center}

/* il collegamento di ogni famiglia: è anche l'elemento che porta il fuoco
   dentro la zona sensibile, così la tastiera ottiene la stessa risposta
   del passaggio del mouse */
.illu-zona__azione{margin-block-start:var(--e5)}

/* risposta all'interazione: mouse, tastiera (focus-within) e tocco */
.illu-zona:hover .illu__accento,
.illu-zona:focus-within .illu__accento,
.illu-zona:active .illu__accento{
  animation:illu-accento .8s var(--courbe);
}
@keyframes illu-accento{
  from{stroke-dashoffset:1}
  to{stroke-dashoffset:0}
}
.illu-zona:hover .illu__viaggio,
.illu-zona:focus-within .illu__viaggio,
.illu-zona:active .illu__viaggio{animation:illu-viaggio 1.6s var(--courbe)}
@keyframes illu-viaggio{
  0%{offset-distance:2%;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{offset-distance:98%;opacity:0}
}
.illu-zona:hover .illu__pulsa,
.illu-zona:focus-within .illu__pulsa,
.illu-zona:active .illu__pulsa{animation:illu-pulsa 1.1s ease-out}
.illu__pulsa--2{animation-delay:.16s!important}
.illu__pulsa--3{animation-delay:.32s!important}
@keyframes illu-pulsa{
  0%{opacity:.9;transform:scale(1)}
  100%{opacity:0;transform:scale(3.4)}
}

/* la colonna che ospita il disegno nelle sezioni delle famiglie */
.illu-cadre{
  position:relative;padding:clamp(8px,1.6vw,22px);
  border-radius:var(--rayon-l);
  background:radial-gradient(120% 100% at 50% 40%,rgba(212,175,55,.05),transparent 70%);
}

/* -------------------------------------- 8ter. COMPONENTI DELLE PAGINE */

/* spaziature ricorrenti (niente stili in linea: la CSP resta severa) */
.section--sans-haut{padding-block-start:0}
.section--hero-page{padding-block:calc(var(--entete-h) + var(--e9)) var(--e8)}
.conteneur--nu{padding-inline:0}
.bloc-bouton{margin-top:var(--e6);margin-bottom:0}
.bloc-kpi{margin-bottom:clamp(30px,4vw,54px)}
.bloc-graphique{margin-top:clamp(24px,3vw,40px)}
.bloc-tableau{margin-top:clamp(20px,2.5vw,34px)}
.bloc-role{margin:calc(-1 * var(--e2)) 0 var(--e5);font-size:.9rem;letter-spacing:.06em}
[lang="ar"] .bloc-role{letter-spacing:0}
.carte__pied{margin-top:var(--e5);margin-bottom:0}
.accordeon__titre{margin:0}

/* piede */
.pied__marque{margin-bottom:var(--e4)}
.pied__signature{font-size:.92rem;max-width:34ch}
.pied__raison{font-size:.84rem;margin-top:var(--e4)}
.pied__liste--menu{font-size:.9rem}
.pied__adresse{font-size:.9rem;line-height:1.65}

/* immagini */
.image-encadree{
  inline-size:100%;block-size:auto;
  border-radius:var(--rayon);
  border:1px solid var(--filet-faible);
  box-shadow:var(--ombre);
}
.carte__icone--grande{inline-size:56px;block-size:56px;margin-bottom:var(--e5)}

/* colonne di prestazioni nella pagina servizi */
.bloc-colonnes{align-content:start;margin-block-start:clamp(28px,3.4vw,56px)}
/* il disegno della famiglia non scende sotto una certa misura, altrimenti
   il tratto sottile diventa una macchia */
.illu-cadre .illu{min-inline-size:0}
.colonne-liste h3{
  font-family:var(--f-marque);font-size:.74rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--or);
  margin:0 0 var(--e4);padding-bottom:var(--e3);
  border-bottom:1px solid var(--filet-faible);
}
[lang="ar"] .colonne-liste h3{letter-spacing:0;text-transform:none;font-size:.95rem}

/* elenco con icona */
.liste-icones{display:flex;flex-direction:column;gap:var(--e5)}
.liste-icones li{display:flex;gap:var(--e4);align-items:flex-start}
.liste-icones strong{color:var(--texte);font-weight:500}
.liste-icones span:last-child{font-size:.96rem;color:var(--texte-2);line-height:1.6}
.puce-icone{
  inline-size:38px;block-size:38px;flex:none;color:var(--or);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--filet);border-radius:var(--rayon-s);
  background:rgba(212,175,55,.05);
}
.puce-icone svg{inline-size:19px;block-size:19px;stroke:currentColor;fill:none;stroke-width:1.3}

/* distanze reali */
.liste-distances{display:flex;flex-direction:column;gap:0;margin-top:var(--e6)}
.liste-distances li{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"villes km" "note note";
  gap:var(--e1) var(--e4);align-items:baseline;
  padding-block:var(--e4);border-bottom:1px solid var(--filet-faible);
}
.distance__villes{grid-area:villes;color:var(--texte);font-size:.98rem}
.distance__km{
  grid-area:km;font-family:var(--f-titre);font-size:1.34rem;line-height:1;
  color:var(--or-clair);white-space:nowrap;
}
.distance__note{grid-area:note;font-size:.78rem}
.liste-distances__note{margin-top:var(--e4);font-size:.78rem}

/* mini KPI dentro una carta settore */
.mini-kpi{
  display:flex;flex-wrap:wrap;gap:var(--e3) var(--e6);
  margin:var(--e5) 0 0;padding-top:var(--e4);
  border-top:1px solid var(--filet-faible);
}
.mini-kpi li{display:flex;flex-direction:column;gap:2px}
.mini-kpi__valeur{
  font-family:var(--f-titre);font-size:1.5rem;line-height:1;color:var(--or-clair);
  font-variant-numeric:tabular-nums;
}
.mini-kpi__libelle{font-size:var(--taille-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--texte-3)}
[lang="ar"] .mini-kpi__libelle{letter-spacing:0;text-transform:none;font-size:.86rem}

/* carte tematiche */
.carte--secteur h3{font-size:1.24rem}
.carte--direction{background:
  radial-gradient(120% 100% at 100% 0%,rgba(212,175,55,.09) 0%,transparent 60%),
  linear-gradient(160deg,var(--surface) 0%,var(--noir-2) 100%)}
.carte--direction .chapeau{margin-bottom:var(--e3)}

/* tabelle di confronto */
.tableau-comparatif{
  overflow-x:auto;
  border:1px solid var(--filet-faible);border-radius:var(--rayon);
  background:linear-gradient(160deg,var(--surface) 0%,var(--noir-2) 100%);
  -webkit-overflow-scrolling:touch;
}
.tableau-comparatif table{min-inline-size:520px;font-size:.94rem}
/* Sotto i 420 px la tabella non si trascina più di lato: sta nella pagina e le
   celle vanno a capo. Una tabella da scorrere su uno schermo da 320 px è una
   tabella che non si legge, e in arabo l'eccesso uscendo dall'altro lato
   spostava tutta la pagina di 17 px. */
@media (max-width:420px){
  .tableau-comparatif table{min-inline-size:100%}
  /* Qui `anywhere` e non `break-word`: nelle celle di una tabella la larghezza
     minima è la somma delle colonne, e `break-word` non la riduce (spezza solo
     quando la riga è già stretta). Con `anywhere` la tabella scende sotto i
     320 px invece di restare a 441. È lo stesso comportamento che altrove
     aveva fatto collassare un pulsante: qui è esattamente ciò che serve. */
  .tableau-comparatif th,.tableau-comparatif td{overflow-wrap:anywhere}
}
.tableau-comparatif caption{text-align:start;padding:var(--e4) var(--e5) 0;color:var(--texte-2)}
.tableau-comparatif th,.tableau-comparatif td{
  padding:var(--e4) var(--e5);text-align:start;vertical-align:top;
  border-bottom:1px solid var(--filet-faible);
}
.tableau-comparatif thead th{
  font-family:var(--f-marque);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--or);
  border-bottom-color:var(--filet);
}
[lang="ar"] .tableau-comparatif thead th{letter-spacing:0;text-transform:none;font-size:.92rem}
.tableau-comparatif tbody th{color:var(--texte);font-weight:400;font-size:.94rem}
.tableau-comparatif tbody tr:last-child th,.tableau-comparatif tbody tr:last-child td{border-bottom:0}
.tableau-comparatif tbody tr:hover{background:rgba(212,175,55,.03)}

/* modulo di contatto */
.formulaire__pied{display:flex;flex-wrap:wrap;gap:var(--e4);align-items:center}
.formulaire__note{font-size:.8rem;margin:0}
.lien-carte{margin-top:var(--e2);display:inline-block}

/* pagine legali e testi lunghi */
.texte-long{font-size:1.02rem}
.texte-long h2{
  font-size:clamp(1.3rem,2.2vw,1.7rem);
  margin-top:var(--e8);margin-bottom:var(--e4);
  padding-bottom:var(--e3);border-bottom:1px solid var(--filet-faible);
}
.texte-long .bloc-legal:first-child h2{margin-top:0}
.texte-long p{color:var(--texte-2);max-width:74ch}
.texte-long .liste-puces{margin-block:var(--e5)}
.texte-long a{border-bottom:1px solid var(--filet)}
.date-maj{margin-top:var(--e8);font-size:.82rem}

/* --------------------------------------------------------------- 9. RTL */
/* Regola: il resto del foglio usa solo proprietà logiche. Qui stanno le
   eccezioni che le proprietà logiche non coprono. */
[dir="rtl"] .hero__defilement{transform:translateX(50%)}
[dir="rtl"] .section--halo::before{transform:translateX(50%)}
[dir="rtl"] .fleche,[dir="rtl"] .icone-fleche{transform:scaleX(-1)}
[dir="rtl"] .simulateur input[type="range"]{direction:rtl}
/* La pista dice l'avanzamento con un gradiente, e un gradiente ha una direzione
   FISICA: `to right` parte sempre dal bordo sinistro, anche quando l'asse
   dell'input corre da destra a sinistra. Senza questa riga in arabo l'oro
   cresceva dal capo opposto alla maniglia (misurato: 868 px di distanza su
   1072). Firefox non ne ha bisogno: usa ::-moz-range-progress, che segue la
   direzione da sola. */
[dir="rtl"] .simulateur input[type="range"]::-webkit-slider-runnable-track{
  background:linear-gradient(to left,var(--or) 0%,var(--or) var(--progression,40%),rgba(255,255,255,.1) var(--progression,40%),rgba(255,255,255,.1) 100%);
}
[dir="rtl"] .ruban-defilant{
  -webkit-mask-image:linear-gradient(to left,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to left,transparent,#000 12%,#000 88%,transparent);
}
[dir="rtl"] .carte--personne img{object-position:center 18%}
[dir="rtl"] .accordeon__tete::after{transform:rotate(135deg)}
[dir="rtl"] .accordeon__tete[aria-expanded="true"]::after{transform:rotate(-45deg)}
/* la mappa geografica non si specchia mai: la geografia non è specchiabile */
[dir="rtl"] .carte-geo svg{direction:ltr}

/* --------------------------------- 9bis. SENZA JAVASCRIPT
   Gli elementi con rivelazione allo scroll partono trasparenti e sono il JS a
   mostrarli. Con JavaScript spento resterebbero invisibili: quasi tutta la
   pagina sparirebbe. `scripting: none` copre esattamente quel caso, in CSS
   puro (la Content-Security-Policy del sito vieta gli script in linea, quindi
   il vecchio trucco della classe «no-js» non si può usare).
   I contatori dei numeri sono già scritti nell'HTML col valore finale, e sotto
   ogni grafico c'è la tabella dei dati: senza JS il contenuto resta leggibile. */
@media (scripting: none){
  [data-mmw="reveal"],.reveal{opacity:1!important;transform:none!important}
  /* i disegni delle famiglie: stato finale, non stato iniziale. Senza questa
     riga il tracciato resterebbe con stroke-dashoffset:1, cioè invisibile. */
  .illu__t{stroke-dashoffset:0!important}
  .illu__viaggio{animation:none!important;opacity:1}
  .illu__pulsa{display:none}
  .deco-hero__arc{stroke-dashoffset:0;animation:none}
  .hero__defilement{display:none}
}

/* ------------------------------------------- 10. MOVIMENTO RIDOTTO */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  [data-mmw="reveal"],.reveal{opacity:1!important;transform:none!important}
  /* I disegni: stato finale, non stato iniziale. La regola generale qui sopra
     azzera le durate, e con `forwards` il tracciato arriverebbe comunque a
     destinazione — ma solo se l'animazione parte. Qui lo stato completo è
     dichiarato, e non dipende da nessun se. */
  .illu__t{stroke-dashoffset:0!important}
  .illu__viaggio{animation:none!important;opacity:1}
  .illu__pulsa{display:none}
  /* le tappe del corridoio le accende il JavaScript (vedi initTappe), che in
     questa modalità le marca tutte subito: qui si dichiara anche in CSS, per
     il caso in cui il modulo non si monti. */
  .tappa::before{background:var(--or);border-color:var(--or)}
  .tappa__numero{color:var(--or)}
  .tappa__titre{color:var(--texte)}
  .tappa__texte{color:var(--texte-2)}
  .titre--or{animation:none;background-position:30% 50%}
  .ruban-defilant__piste{animation:none}
  .hero__defilement::after{animation:none;opacity:.6}
  .lueur-curseur{display:none}
}

/* ------------------------------------------------------------ 11. PRINT */
@media print{
  body{background:#fff;color:#111}
  body::before,body::after,.entete,.menu-mobile,.hero__defilement,.lueur-curseur,
  .carte-geo__commandes,.ruban-defilant{display:none!important}
  .titre--or,.kpi__valeur,.marque__sigle,.simulateur__economie-valeur{
    -webkit-text-fill-color:#8A6410;color:#8A6410;background:none;animation:none;
  }
  .carte,.graphique,.simulateur,.bande{border:1px solid #ccc;background:none;box-shadow:none}
  a{color:#111;text-decoration:underline}
  .section{padding-block:18px}
  .graphique__tableau{display:table!important}
}