/* Effebipi Group — theme du site. CSS issue de la maquette UI/UX validee (08/09/2026).
Charte graphique Effebipi Group v1. Realisation H&Y Way. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;
src:url(../fonts/ibmplexsans-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;
src:url(../fonts/ibmplexsans-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
src:url(../fonts/spacegrotesk-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
src:url(../fonts/spacegrotesk-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
/* Couleurs charte — valeurs exactes, aucune invention */
--blu: #1454A6; /* Bleu Effebipi */
--arancio: #F2541D; /* Orange Reactif — ACCENT, ~10% de la surface */
--notte: #0B2545; /* Bleu Nuit */
--ardesia: #5B6472; /* Gris Ardoise */
--chiaro: #F2F4F7; /* Gris Clair */
--bianco: #FFFFFF;
/* Etats derives des memes teintes (assombrissement, pas de nouvelle couleur) */
--blu-scuro: #0F4488;
--arancio-scuro: #D8430F;
--linea: #DDE2EA;
/* Texte sur fond bleu nuit / bleu — contraste verifie */
--su-notte: #DCE6F2;
--su-notte-tenue:#A9BFD8;
--font-titre: "Space Grotesk", "Segoe UI", Arial, sans-serif;
--font-texte: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
--max: 1200px;
--r: 3px;
--tr: 180ms cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
margin:0; background:var(--bianco); color:var(--notte);
font-family:var(--font-texte); font-size:16px; line-height:1.65;
-webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--blu); text-decoration:none}
a:hover{color:var(--blu-scuro); text-decoration:underline}
:focus-visible{outline:3px solid var(--arancio); outline-offset:3px}
/* ==========================================================================
TYPOGRAPHIE — Space Grotesk employe a pleine puissance
========================================================================== */
h1,h2,h3,h4{font-family:var(--font-titre); color:var(--notte); margin:0 0 .5em}
h1{
font-size:clamp(2.375rem,5.4vw,4rem); font-weight:700;
line-height:1.03; letter-spacing:-.032em;
}
h2{
font-size:clamp(1.875rem,3.4vw,2.75rem); font-weight:700;
line-height:1.08; letter-spacing:-.028em; margin-bottom:.45em;
}
h3{font-size:1.25rem; font-weight:700; line-height:1.25; letter-spacing:-.012em}
h4{font-size:1rem; font-weight:600}
p{margin:0 0 1rem; max-width:66ch}
ul{margin:0 0 1rem; padding-left:1.15rem}
li{margin-bottom:.4rem}
strong{font-weight:600}
.intro{font-size:1.1875rem; line-height:1.6; color:var(--ardesia); max-width:60ch}
.sez--notte .intro,.sez--blu .intro{color:var(--su-notte)}
/* Titre a filet — le trait orange du symbole, pose sous le titre de section */
.titolo-filo{position:relative; padding-bottom:22px; margin-bottom:22px}
.titolo-filo::after{
content:""; position:absolute; left:0; bottom:0; width:64px; height:4px;
background:var(--arancio);
}
/* ==========================================================================
STRUCTURE & RYTHME DES SECTIONS
Alternance franche clair / bleu nuit : c'est le rythme, pas la saturation.
========================================================================== */
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.sez{padding:104px 0}
.sez--stretta{padding:64px 0}
.sez--chiara{background:var(--chiaro)}
.sez--notte{background:var(--notte); color:var(--su-notte); position:relative}
.sez--notte h2,.sez--notte h3,.sez--notte h4{color:#fff}
.sez--notte p{color:var(--su-notte)}
.sez--notte a{color:#fff}
.sez--blu{background:var(--blu); color:#EAF1FA; position:relative}
.sez--blu h2,.sez--blu h3{color:#fff}
.sez--blu p{color:#E3EDFA}
.sez--blu a{color:#fff}
/* Jonction bicolore : deux blocs pleins, reprise directe du symbole.
Pas un degrade : arrets nets. */
.giunzione{position:relative}
.giunzione::before{
content:""; position:absolute; top:0; left:0; right:0; height:5px;
background-image:linear-gradient(90deg,var(--blu) 0 64%,var(--arancio) 64% 100%);
}
/* Motif chevron du logo, en filigrane sur les fonds bleu nuit */
.trama{position:relative; overflow:hidden}
.trama::after{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
background-size:160px 92px; opacity:.09;
}
.trama > *{position:relative; z-index:1}
/* ---------- Etiquette de section ---------- */
.etichetta{
font-family:var(--font-titre); font-size:.8125rem; font-weight:700;
letter-spacing:.2em; text-transform:uppercase; color:var(--blu);
display:flex; align-items:center; gap:14px; margin-bottom:18px;
}
.etichetta::before{content:""; width:32px; height:3px; background:var(--arancio); flex:none}
.sez--notte .etichetta,.sez--blu .etichetta{color:#9FC0E8}
/* ==========================================================================
BARRE HAUTE & EN-TETE
========================================================================== */
.topbar{background:var(--notte); color:#BFD0E2; font-size:.8125rem}
.topbar .wrap{display:flex; gap:24px; align-items:center; min-height:40px; flex-wrap:wrap}
.topbar a{color:#BFD0E2}
.topbar .sp{margin-left:auto}
.topbar svg{width:15px;height:15px;stroke:var(--arancio);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:7px}
.header{
position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97);
border-bottom:1px solid var(--linea); backdrop-filter:saturate(160%) blur(6px);
}
.header .wrap{display:flex; align-items:center; gap:28px; min-height:84px}
.logo img{height:48px; width:auto}
.nav{display:flex; gap:28px; margin-left:auto; align-items:center}
.nav a{
font-family:var(--font-titre); font-weight:600; font-size:.9375rem;
color:var(--notte); padding:8px 0; position:relative; text-decoration:none;
}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--arancio); transform:scaleX(0); transition:transform var(--tr)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--blu)}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--linea); border-radius:var(--r); padding:9px; cursor:pointer; min-width:46px; min-height:46px}
.burger svg{width:24px;height:24px;stroke:var(--notte);stroke-width:2.2;fill:none;stroke-linecap:round}
/* ==========================================================================
BOUTONS
========================================================================== */
.btn{
display:inline-flex; align-items:center; gap:11px; justify-content:center;
font-family:var(--font-titre); font-weight:700; font-size:1.0625rem;
line-height:1.2; padding:16px 30px; border-radius:var(--r); border:2px solid transparent;
cursor:pointer; text-decoration:none; transition:background var(--tr),border-color var(--tr),color var(--tr);
min-height:54px;
}
.btn:hover{text-decoration:none}
.btn--primario{background:var(--arancio); color:#fff}
.btn--primario:hover{background:var(--arancio-scuro); color:#fff}
.btn--blu{background:var(--blu); color:#fff}
.btn--blu:hover{background:var(--blu-scuro); color:#fff}
.btn--fantasma{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.btn--fantasma:hover{background:rgba(255,255,255,.14); color:#fff}
.btn--linea{background:transparent; color:var(--blu); border-color:var(--blu)}
.btn--linea:hover{background:var(--blu); color:#fff}
.btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn--compatto{font-size:.9375rem; min-height:46px; padding:12px 22px}
/* ==========================================================================
SECTION D'OUVERTURE — pleine largeur, media plein cadre
Mecanisme video complet ; aujourd'hui rempli par une photographie du client.
========================================================================== */
.apertura{
position:relative; background:var(--notte); color:#fff;
display:flex; flex-direction:column; justify-content:flex-end;
min-height:calc(100svh - 128px); overflow:hidden; isolation:isolate;
}
@supports not (min-height:1svh){ .apertura{min-height:calc(100vh - 128px)} }
.apertura-media{position:absolute; inset:0; z-index:0; background:var(--notte)}
/* L'image de repli est TOUJOURS posee au fond du cadre : elle occupe l'ecran
pendant le chargement, sur connexion lente, si la video est assente ou refusee.
La video, quand le fichier existe, se superpose exactement au meme cadre. */
.apertura-immagine{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.apertura-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:transparent}
/* Voile sombre : lisibilite du texte pose sur le media. Aplat uni, pas de degrade. */
.apertura-velo{position:absolute; inset:0; z-index:1; background:rgba(11,37,69,.76)}
.apertura-velo::after{
content:""; position:absolute; inset:0;
background-image:url("data:image/svg+xml;utf8,");
background-size:200px 115px; opacity:.10;
}
/* Filet bicolore du symbole, en pied de section */
.apertura::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:6px; z-index:3;
background-image:linear-gradient(90deg,var(--blu) 0 64%,var(--arancio) 64% 100%);
}
.apertura-contenuto{position:relative; z-index:2; padding-top:118px; padding-bottom:92px; width:100%}
.apertura h1{color:#fff; max-width:16ch; margin-bottom:.32em}
.apertura .guida{font-size:1.1875rem; color:#DCE6F2; max-width:54ch; margin-bottom:0}
.apertura .occhiello{
font-family:var(--font-titre); font-size:.8125rem; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:#9FC0E8; display:inline-flex; align-items:center; gap:12px; margin-bottom:22px;
}
.apertura .occhiello::before{content:""; width:32px; height:3px; background:var(--arancio)}
.apertura-azioni{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}
/* Commande de pause — clavier et souris */
.apertura-pausa{
position:absolute; z-index:4; right:22px; bottom:104px;
display:none; align-items:center; gap:9px;
font-family:var(--font-titre); font-weight:700; font-size:.8125rem; letter-spacing:.06em;
color:#fff; background:rgba(11,37,69,.86); border:1px solid rgba(255,255,255,.5);
border-radius:var(--r); padding:11px 16px; min-height:46px; cursor:pointer;
}
.apertura-pausa:hover{background:var(--blu)}
.apertura-pausa svg{width:16px;height:16px;fill:currentColor;stroke:none;flex:none}
.apertura-pausa .ic-play{display:none}
.apertura-pausa[aria-pressed="true"] .ic-play{display:block}
.apertura-pausa[aria-pressed="true"] .ic-pausa{display:none}
/* Repere de defilement — chevron du symbole, oriente vers le bas */
.apertura-scorri{
position:relative; z-index:2; align-self:center; margin-bottom:34px;
display:inline-flex; flex-direction:column; align-items:center; gap:8px;
font-family:var(--font-titre); font-size:.75rem; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:#9FC0E8; text-decoration:none; padding:10px 16px;
}
.apertura-scorri:hover{color:#fff; text-decoration:none}
.apertura-scorri svg{width:32px;height:20px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.apertura-scorri svg .tr-ar{stroke:var(--arancio)}
/* ---------- Hero interieur (pages autres que l'accueil) ---------- */
.hero{position:relative; background:var(--notte); color:var(--su-notte); overflow:hidden}
.hero .wrap{position:relative; z-index:2; padding-top:82px; padding-bottom:82px}
.hero--media .wrap{padding-top:96px; padding-bottom:96px}
.hero-griglia{display:grid; grid-template-columns:1.12fr .88fr; gap:56px; align-items:center}
.hero h1{color:#fff; max-width:17ch}
.hero .occhiello{
font-family:var(--font-titre); font-size:.8125rem; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:#9FC0E8; display:inline-flex; align-items:center; gap:12px; margin-bottom:20px;
}
.hero .occhiello::before{content:""; width:32px; height:3px; background:var(--arancio)}
.hero p.guida{font-size:1.125rem; color:#C7D6E8; max-width:56ch}
.hero-azioni{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
.hero-figura{border-radius:var(--r); overflow:hidden; border:1px solid rgba(255,255,255,.16)}
.hero-figura img{width:100%; height:100%; max-height:430px; object-fit:cover}
.hero-figura figcaption{
background:rgba(255,255,255,.07); color:var(--su-notte-tenue);
font-size:.75rem; padding:10px 14px; border-top:1px solid rgba(255,255,255,.14);
}
/* ---------- Bande de reperes ---------- */
.reperi{border-top:1px solid rgba(255,255,255,.16); position:relative; z-index:2; background:var(--notte)}
.reperi .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.reperi div{padding:26px 28px 26px 0; display:flex; gap:15px; align-items:flex-start}
.reperi div+div{padding-left:28px; border-left:1px solid rgba(255,255,255,.16)}
.reperi svg{width:30px;height:30px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:1px;stroke:#8FB4E0}
.reperi svg .tr-ar{stroke:var(--arancio)}
.reperi strong{display:block; font-family:var(--font-titre); color:#fff; font-size:1.0625rem; margin-bottom:3px; font-weight:700}
.reperi span{font-size:.875rem; color:var(--su-notte-tenue)}
/* ==========================================================================
MARQUEURS DE REASSURANCE (fascia delle garanzie)
Demande client n°5 : les habilitations et garanties deviennent visuelles.
========================================================================== */
.marcatori{background:var(--notte); color:var(--su-notte)}
.marcatori .wrap{padding-top:56px; padding-bottom:56px}
.marcatori-griglia{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:8px}
.marcatore{padding:0 30px 0 0}
.marcatore+.marcatore{padding-left:30px; border-left:1px solid rgba(255,255,255,.16)}
.marcatore svg{width:40px;height:40px;fill:none;stroke:#8FB4E0;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.marcatore svg .tr-ar{stroke:var(--arancio)}
.marcatore h3{color:#fff; font-size:1.0625rem; margin-bottom:7px}
.marcatore p{font-size:.875rem; color:var(--su-notte-tenue); margin:0; max-width:none; line-height:1.55}
/* Variante sur fond clair */
.marcatori--chiara{background:var(--chiaro); color:var(--notte)}
.marcatori--chiara .marcatore+.marcatore{border-left-color:var(--linea)}
.marcatori--chiara .marcatore svg{stroke:var(--blu)}
.marcatori--chiara h3{color:var(--notte)}
.marcatori--chiara .marcatore p{color:var(--ardesia)}
.marcatori--chiara .etichetta{color:var(--blu)}
/* ==========================================================================
HABILITATIONS DM 37/2008 — marqueurs visuels, lettre par lettre
========================================================================== */
.lettere{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:38px}
.lettera{
background:#fff; border:1px solid var(--linea); border-top:4px solid var(--blu);
border-radius:var(--r); padding:26px 24px 24px; display:flex; flex-direction:column;
}
.lettera .segno{
font-family:var(--font-titre); font-weight:700; font-size:3.75rem; line-height:.9;
color:var(--blu); letter-spacing:-.05em; margin-bottom:16px;
}
.lettera h3{font-size:1rem; margin-bottom:8px}
.lettera p{font-size:.875rem; color:var(--ardesia); margin:0 0 12px; max-width:none; flex:1}
.lettera .limite{
font-family:var(--font-titre); font-size:.75rem; font-weight:600; letter-spacing:.05em;
color:var(--ardesia); border-top:1px solid var(--linea); padding-top:10px; margin:0;
}
.lettera--limitata{border-top-color:var(--arancio)}
.lettera--limitata .segno{color:var(--arancio)}
/* La grille des lettres vit sur fond bleu nuit mais les cartes sont blanches :
le titre doit reprendre la couleur sombre, sinon il devient invisible. */
.sez--notte .lettera h3{color:var(--notte)}
.sez--notte .lettera p{color:var(--ardesia)}
.sez--notte .lettera .limite{color:var(--ardesia)}
/* ==========================================================================
CARTES
========================================================================== */
.griglia{display:grid; gap:22px}
.griglia--3{grid-template-columns:repeat(3,1fr)}
.griglia--2{grid-template-columns:repeat(2,1fr)}
.carta{
background:#fff; border:1px solid var(--linea); border-radius:var(--r);
padding:32px 30px; display:flex; flex-direction:column; position:relative;
transition:border-color var(--tr),box-shadow var(--tr);
}
.carta::before{
content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px;
background:var(--blu); transform:scaleY(0); transform-origin:top; transition:transform var(--tr);
}
.carta:hover{border-color:#C3CEDD; box-shadow:0 6px 20px rgba(11,37,69,.07)}
.carta:hover::before{transform:scaleY(1)}
.carta .icona{width:52px;height:52px;fill:none;stroke:var(--blu);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:22px}
.carta .icona .tr-ar{stroke:var(--arancio)}
.carta h3{margin-bottom:9px}
.carta p{font-size:.9375rem; color:var(--ardesia); flex:1; margin-bottom:18px; max-width:none}
.carta .vai{font-family:var(--font-titre); font-weight:700; font-size:.9375rem; color:var(--blu); display:inline-flex; align-items:center; gap:9px}
.carta .vai svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.carta--rilievo{border-top:4px solid var(--arancio)}
/* Cartes sur fond bleu nuit */
.sez--notte .carta{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18)}
.sez--notte .carta:hover{border-color:rgba(255,255,255,.4); box-shadow:none}
.sez--notte .carta h3{color:#fff}
.sez--notte .carta p{color:var(--su-notte-tenue)}
.sez--notte .carta .icona{stroke:#8FB4E0}
.sez--notte .carta::before{background:var(--arancio)}
.sez--notte .carta--rilievo{border-top-color:var(--arancio)}
/* ==========================================================================
ETAPES
========================================================================== */
.tappe{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.tappa{position:relative; padding:0 28px 0 0}
.tappa+.tappa{padding-left:28px; border-left:1px solid var(--linea)}
.tappa .n{
font-family:var(--font-titre); font-size:3.5rem; font-weight:700; color:var(--blu);
line-height:.85; display:block; margin-bottom:18px; letter-spacing:-.05em;
}
.tappa .n::after{content:""; display:block; width:34px; height:4px; background:var(--arancio); margin-top:16px}
.tappa h3{font-size:1.125rem; margin-bottom:7px}
.tappa p{font-size:.9375rem; color:var(--ardesia); margin:0; max-width:none}
.sez--notte .tappa+.tappa{border-left-color:rgba(255,255,255,.18)}
.sez--notte .tappa .n{color:#8FB4E0}
.sez--notte .tappa p{color:var(--su-notte-tenue)}
/* ==========================================================================
LISTES
========================================================================== */
.lista{list-style:none; padding:0; margin:0}
.lista li{display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; font-size:.9375rem}
.lista svg{width:22px;height:22px;stroke:var(--blu);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:1px}
.sez--blu .lista svg,.sez--notte .lista svg{stroke:var(--arancio)}
.sez--notte .lista li{color:var(--su-notte)}
/* ==========================================================================
TABLEAU
========================================================================== */
.tabella-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; background:#fff; border:1px solid var(--linea); border-radius:var(--r)}
table{border-collapse:collapse; width:100%; font-size:.9375rem; min-width:540px}
th,td{text-align:left; padding:16px 18px; border-bottom:1px solid var(--linea); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
th{font-family:var(--font-titre); font-weight:700; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--notte); border-bottom:0}
/* ==========================================================================
FORMULAIRE — progression en trois etapes, sans script
Les boutons radio pilotent l'affichage. Ils restent focalisables au clavier.
========================================================================== */
.modulo{background:#fff; border:1px solid var(--linea); border-radius:var(--r); padding:36px}
.sez--chiara .modulo{border-color:#D2D9E4}
.campo{margin-bottom:20px}
.campo label{display:block; font-family:var(--font-titre); font-weight:600; font-size:.9375rem; margin-bottom:7px; color:var(--notte)}
.campo .aiuto{display:block; font-size:.8125rem; color:var(--ardesia); margin-top:6px; font-family:var(--font-texte); font-weight:400}
.campo input,.campo select,.campo textarea{
width:100%; font-family:var(--font-texte); font-size:1rem; color:var(--notte);
padding:14px 15px; border:1px solid #BAC4D2; border-radius:var(--r); background:#fff; min-height:52px;
}
.campo textarea{min-height:140px; resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--blu); outline:3px solid rgba(20,84,166,.24); outline-offset:0}
.campo--doppio{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.consenso{display:flex; gap:12px; align-items:flex-start; font-size:.8125rem; color:var(--ardesia)}
.consenso input{width:22px;height:22px;min-height:22px;flex:none;margin-top:2px}
/* -- Pilotes d'etape : hors ecran mais focalisables (jamais display:none) -- */
.passo-radio{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
/* -- Indicateur de progression -- */
.passi{display:flex; gap:10px; margin-bottom:28px; list-style:none; padding:0}
.passi li{flex:1; margin:0}
.passi label{
display:block; cursor:pointer; padding-top:12px; border-top:4px solid var(--linea);
font-family:var(--font-titre); font-weight:700; font-size:.75rem; letter-spacing:.1em;
text-transform:uppercase; color:var(--ardesia); transition:color var(--tr),border-color var(--tr);
}
.passi label span{display:block; font-size:.8125rem; letter-spacing:0; text-transform:none; font-weight:600; color:var(--ardesia); margin-top:3px}
.passi label:hover{color:var(--notte)}
/* Panneaux d'etape : masques par defaut, reveles par le radio coche */
.pannello{display:none}
.pannello[data-passo="1"]{display:block}
.passo-radio.r1:checked ~ .modulo .pannello[data-passo="1"],
.passo-radio.r2:checked ~ .modulo .pannello[data-passo="2"],
.passo-radio.r3:checked ~ .modulo .pannello[data-passo="3"]{display:block}
.passo-radio.r1:checked ~ .modulo .pannello[data-passo="2"],
.passo-radio.r1:checked ~ .modulo .pannello[data-passo="3"],
.passo-radio.r2:checked ~ .modulo .pannello[data-passo="1"],
.passo-radio.r2:checked ~ .modulo .pannello[data-passo="3"],
.passo-radio.r3:checked ~ .modulo .pannello[data-passo="1"],
.passo-radio.r3:checked ~ .modulo .pannello[data-passo="2"]{display:none}
/* Etat de l'indicateur selon l'etape active */
.passo-radio.r1:checked ~ .modulo .passi .l1,
.passo-radio.r2:checked ~ .modulo .passi .l2,
.passo-radio.r3:checked ~ .modulo .passi .l3{border-top-color:var(--arancio); color:var(--notte)}
.passo-radio.r2:checked ~ .modulo .passi .l1,
.passo-radio.r3:checked ~ .modulo .passi .l1,
.passo-radio.r3:checked ~ .modulo .passi .l2{border-top-color:var(--blu); color:var(--blu)}
/* Anneau de focus reporte du radio hors ecran sur son etiquette visible */
.passo-radio.r1:focus-visible ~ .modulo .passi .l1,
.passo-radio.r2:focus-visible ~ .modulo .passi .l2,
.passo-radio.r3:focus-visible ~ .modulo .passi .l3{outline:3px solid var(--arancio); outline-offset:3px}
/* Navigation entre etapes */
.passo-nav{display:flex; gap:14px; align-items:center; margin-top:26px; flex-wrap:wrap}
.passo-nav .btn{flex:1; min-width:180px}
.passo-conteggio{font-family:var(--font-titre); font-size:.8125rem; font-weight:600; color:var(--ardesia); letter-spacing:.06em}
.modulo fieldset{border:0; margin:0; padding:0}
.modulo legend{
font-family:var(--font-titre); font-weight:700; font-size:1.125rem; color:var(--notte);
padding:0; margin-bottom:20px;
}
/* ==========================================================================
BLOC CONTACT
========================================================================== */
.contatto-blocco{background:var(--notte); color:var(--su-notte); border-radius:var(--r); padding:34px}
.contatto-blocco h3{color:#fff}
.contatto-blocco p{color:var(--su-notte-tenue); max-width:none}
.contatto-voce{display:flex; gap:15px; align-items:flex-start; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.14)}
.contatto-voce:last-child{border-bottom:0}
.contatto-voce svg{width:23px;height:23px;stroke:var(--arancio);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px}
.contatto-voce .et{font-family:var(--font-titre); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8FB4E0; display:block; margin-bottom:4px}
.contatto-voce .val{color:#fff; font-size:1rem}
.contatto-voce .val a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3)}
.contatto-voce .val a:hover{border-bottom-color:var(--arancio)}
/* ==========================================================================
BANDEAU CTA
========================================================================== */
.cta-finale{background:var(--blu); color:#fff; position:relative}
.cta-finale .wrap{display:flex; gap:40px; align-items:center; justify-content:space-between; padding-top:72px; padding-bottom:72px; flex-wrap:wrap}
.cta-finale h2{margin-bottom:8px; max-width:20ch; color:#fff}
.cta-finale p{color:#DCE8F7; margin:0; max-width:50ch}
.cta-finale .azioni{display:flex; gap:14px; flex-wrap:wrap}
/* ==========================================================================
PIED DE PAGE
========================================================================== */
.footer{background:var(--notte); color:#A9BBD1; font-size:.875rem; padding:72px 0 28px}
.footer-griglia{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:40px}
.footer h4{font-family:var(--font-titre); color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.16)}
.footer ul{list-style:none; padding:0; margin:0}
.footer li{margin-bottom:10px}
.footer a{color:#A9BBD1}
.footer a:hover{color:#fff}
.footer .marchio img{height:104px; width:auto; margin-bottom:18px}
.footer .marchio p{max-width:34ch}
.footer .societa{
margin-top:44px; padding-top:26px; border-top:1px solid rgba(255,255,255,.16);
display:grid; grid-template-columns:1fr 1fr; gap:28px; font-size:.8125rem; line-height:1.7;
}
.footer .societa strong{color:#fff; font-family:var(--font-titre); display:block; margin-bottom:4px; font-weight:700}
.footer .societa p{margin:0; max-width:46ch; color:#A9BBD1}
.footer .legale{margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.16); display:flex; gap:20px; flex-wrap:wrap; align-items:center; font-size:.8125rem}
.footer .legale .sp{margin-left:auto}
.footer .legale a{text-decoration:underline}
/* ==========================================================================
FIL D'ARIANE
========================================================================== */
.briciole{background:var(--chiaro); border-bottom:1px solid var(--linea); font-size:.8125rem; color:var(--ardesia)}
.briciole .wrap{padding-top:14px; padding-bottom:14px}
.briciole a{color:var(--ardesia)}
.briciole span{color:var(--notte); font-weight:600}
/* ==========================================================================
FAQ
========================================================================== */
.faq details{border-bottom:1px solid var(--linea); padding:20px 0}
.faq summary{font-family:var(--font-titre); font-weight:700; font-size:1.0625rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:18px; align-items:center; color:var(--notte)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; width:13px; height:13px; border-right:3px solid var(--arancio); border-bottom:3px solid var(--arancio); transform:rotate(45deg); flex:none; transition:transform var(--tr); margin-right:4px}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{margin:14px 0 0; font-size:.9375rem; color:var(--ardesia)}
/* ==========================================================================
MISES EN PAGE
========================================================================== */
.due-colonne{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:start}
.due-colonne--stretta{grid-template-columns:1fr 400px}
/* Figure photographique */
.figura{border-radius:var(--r); overflow:hidden; border:1px solid var(--linea)}
.figura img{width:100%; display:block}
.figura figcaption{background:var(--chiaro); color:var(--ardesia); font-size:.75rem; padding:11px 14px; border-top:1px solid var(--linea)}
.sez--notte .figura,.sez--blu .figura{border-color:rgba(255,255,255,.2)}
.sez--notte .figura figcaption,.sez--blu .figura figcaption{background:rgba(255,255,255,.08); color:var(--su-notte-tenue); border-top-color:rgba(255,255,255,.14)}
/* Encadre d'information (precisation publiee) */
.riquadro{
border:1px solid var(--linea); border-left:4px solid var(--arancio);
background:var(--chiaro); border-radius:var(--r); padding:24px 26px; margin:34px 0 0;
}
.sez--chiara .riquadro{background:#fff}
.riquadro .tag{
display:inline-flex; align-items:center; gap:9px; font-family:var(--font-titre);
font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:#fff; background:var(--arancio); padding:6px 11px; border-radius:2px; margin-bottom:14px;
}
.riquadro .tag svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.riquadro p{font-size:.9375rem; color:var(--notte); margin-bottom:0; max-width:none}
.riquadro p+p{margin-top:.7rem}
.riquadro em{color:var(--ardesia); font-style:normal}
.solo-lettori{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
/* Accueil : en-tete visible des l'arrivee, comme sur les autres pages. */
#contenuto,#servizi{scroll-margin-top:100px}
/* ==========================================================================
RESPONSIVE — tablette
========================================================================== */
@media (max-width:1024px){
/* Sous 1024px le menu horizontal se casse en deux lignes : on passe au menu compact */
.nav{display:none}
.burger{display:block}
.header .wrap{min-height:74px; gap:16px}
.logo img{height:42px}
.sez{padding:80px 0}
.sez--stretta{padding:52px 0}
h1{font-size:clamp(2.125rem,5vw,3rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.25rem)}
.apertura{min-height:calc(100svh - 124px)}
.apertura-contenuto{padding-top:92px; padding-bottom:76px}
.hero-griglia{grid-template-columns:1fr; gap:40px}
.hero-figura img{max-height:320px}
.due-colonne,.due-colonne--stretta{grid-template-columns:1fr; gap:44px}
.griglia--3{grid-template-columns:repeat(2,1fr)}
.tappe{grid-template-columns:repeat(2,1fr); gap:32px 0}
.tappa:nth-child(3){padding-left:0; border-left:0}
.marcatori-griglia{grid-template-columns:repeat(2,1fr); gap:32px 0}
.marcatore:nth-child(3){padding-left:0; border-left:0}
.lettere{grid-template-columns:repeat(2,1fr)}
.footer-griglia{grid-template-columns:1fr 1fr; gap:36px}
.footer .societa{grid-template-columns:1fr; gap:22px}
}
/* ==========================================================================
RESPONSIVE — mobile
========================================================================== */
@media (max-width:768px){
.wrap{padding:0 18px}
.sez{padding:60px 0}
.sez--stretta{padding:44px 0}
h1{font-size:2.125rem; line-height:1.08; letter-spacing:-.025em}
h2{font-size:1.625rem; line-height:1.14}
h3{font-size:1.125rem}
.intro{font-size:1.0625rem}
.topbar{font-size:.75rem}
.topbar .wrap{min-height:36px; gap:14px; justify-content:center}
.topbar .sp{margin-left:0}
.nascondi-mobile{display:none}
.header .wrap{min-height:66px; gap:14px}
.logo img{height:34px}
.nav{display:none}
.burger{display:block}
/* Ouverture : image fixe, jamais la video (poids et autonomie) */
.apertura{min-height:calc(100svh - 106px)}
.apertura-video{display:none !important}
.apertura-pausa{display:none !important}
.apertura-contenuto{padding-top:172px; padding-bottom:52px}
.apertura .guida{font-size:1rem}
.apertura-azioni{flex-direction:column; align-items:stretch; margin-top:28px}
.apertura-azioni .btn{width:100%}
.apertura h1{max-width:none}
.apertura-scorri{margin-bottom:26px}
.hero .wrap{padding-top:52px; padding-bottom:52px}
.hero p.guida{font-size:1rem}
.hero-azioni{flex-direction:column; align-items:stretch}
.hero-azioni .btn{width:100%}
.hero-figura img{max-height:250px}
.reperi .wrap{grid-template-columns:1fr}
.reperi div{padding:18px 0}
.reperi div+div{padding-left:0; border-left:0; border-top:1px solid rgba(255,255,255,.16)}
.marcatori .wrap{padding-top:44px; padding-bottom:44px}
.marcatori-griglia{grid-template-columns:1fr; gap:0}
.marcatore{padding:22px 0}
.marcatore+.marcatore{padding-left:0; border-left:0; border-top:1px solid rgba(255,255,255,.16)}
.marcatori--chiara .marcatore+.marcatore{border-top-color:var(--linea)}
.marcatore svg{width:34px;height:34px;margin-bottom:12px}
.lettere{grid-template-columns:1fr; gap:14px}
.lettera{padding:22px 20px}
.lettera .segno{font-size:3rem; margin-bottom:12px}
.griglia--3,.griglia--2{grid-template-columns:1fr}
.carta{padding:24px 22px}
.carta .icona{width:46px;height:46px;margin-bottom:18px}
.tappe{grid-template-columns:1fr; gap:0}
.tappa{padding:24px 0}
.tappa+.tappa{padding-left:0; border-left:0; border-top:1px solid var(--linea)}
.tappa .n{font-size:2.75rem; margin-bottom:14px}
.tappa .n::after{margin-top:12px}
.campo--doppio{grid-template-columns:1fr; gap:0}
.modulo{padding:24px 20px}
.modulo legend{font-size:1.0625rem}
.passi{gap:7px; margin-bottom:24px}
.passi label{font-size:.6875rem; letter-spacing:.06em}
.passi label span{display:none}
.passo-nav{flex-direction:column; align-items:stretch}
.passo-nav .btn{width:100%; min-width:0}
.passo-conteggio{text-align:center}
.contatto-blocco{padding:26px 22px}
.btn{width:100%; font-size:1.0625rem; padding:15px 22px}
.btn--compatto{width:auto}
.cta-finale .wrap{flex-direction:column; align-items:flex-start; gap:26px; padding-top:52px; padding-bottom:52px}
.cta-finale .azioni{width:100%; flex-direction:column}
.footer{padding:52px 0 24px}
.footer-griglia{grid-template-columns:1fr; gap:32px}
.footer .legale{flex-direction:column; align-items:flex-start; gap:12px}
.footer .legale .sp{margin-left:0}
.riquadro{padding:20px}
th,td{padding:13px 14px}
}
/* ==========================================================================
PREFERENCE : ANIMATION REDUITE
Image fixe imposee, video arretee, transitions neutralisees.
========================================================================== */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{animation:none !important; transition:none !important}
.apertura-video{display:none !important}
.apertura-pausa{display:none !important}
}
@media print{
.topbar,.header,.apertura-pausa,.apertura-scorri{display:none}
body{color:var(--notte)}
}
/* ==========================================================================
INTEGRATION WORDPRESS / ELEMENTOR
Les widgets rendent le balisage exact de la maquette : les conteneurs
Elementor ne doivent ajouter ni marge, ni largeur maximale, ni espacement.
========================================================================== */
.elementor .e-con,.elementor .e-con-full,.elementor .e-con-boxed{
padding:0 !important; margin:0 !important; gap:0 !important;
--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;
--gap:0px;--row-gap:0px;--column-gap:0px;--widgets-spacing:0px;--content-width:100%;
max-width:none !important; min-height:0 !important; border:0 !important;
}
.elementor .e-con > .e-con-inner{max-width:none !important; padding:0 !important; gap:0 !important}
.elementor .elementor-widget{margin:0 !important; width:100%}
.elementor .elementor-widget-container{margin:0; padding:0}
.elementor-kit-default,body.elementor-default{font-family:var(--font-texte)}
/* Les liens de la maquette n'ont pas de soulignement Elementor */
.elementor a{box-shadow:none}
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.salta-contenuto:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;clip-path:none;z-index:100;background:#fff;color:var(--notte);padding:12px 16px;border:2px solid var(--arancio)}
/* Espacements d'enchainement entre deux sections de meme fond */
.sez--attaccata{padding-top:0 !important}
.sez--continua{padding-bottom:0 !important}
/* Galerie de figures */
.griglia--figure{align-items:start}
/* Encadre d'information : variante bleue (precisation, abilitazione) */
.riquadro--blu{border-left-color:var(--blu)}
.riquadro--blu .tag{background:var(--blu)}
/* ==========================================================================
MENU MOBILE ET TABLETTE (< 1025px)
========================================================================== */
.menu-mobile{display:none}
@media (max-width:1024px){
.menu-mobile{
display:block; position:absolute; left:0; right:0; top:100%;
background:#fff; border-bottom:1px solid var(--linea); box-shadow:0 12px 24px rgba(11,37,69,.12);
max-height:calc(100vh - 120px); overflow-y:auto;
}
.menu-mobile[hidden]{display:none}
.header{position:sticky}
.header .wrap{position:static}
.menu-mobile ul{list-style:none; margin:0; padding:8px 24px 24px}
.menu-mobile li{margin:0; border-bottom:1px solid var(--linea)}
.menu-mobile li:last-child{border-bottom:0; padding-top:18px}
.menu-mobile a{
display:flex; align-items:center; min-height:54px; font-family:var(--font-titre); font-weight:600;
font-size:1.0625rem; color:var(--notte); text-decoration:none;
}
.menu-mobile a[aria-current="page"]{color:var(--blu); box-shadow:inset 3px 0 0 var(--arancio); padding-left:12px}
.menu-mobile .btn{width:100%; color:#fff; font-size:1.0625rem; min-height:54px}
.menu-mobile .btn:hover{color:#fff}
.burger .ic-chiudi{display:none}
.burger[aria-expanded="true"] .ic-apri{display:none}
.burger[aria-expanded="true"] .ic-chiudi{display:block}
}
@media (max-width:768px){
.menu-mobile ul{padding:4px 18px 20px}
}
/* ==========================================================================
FORMULAIRE — etats d'envoi
========================================================================== */
.campo-trappola{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}
.modulo-esito{margin-top:18px; font-size:.9375rem}
.modulo-esito:empty{display:none}
.modulo-esito--errore{color:#B3261E; font-weight:600}
.modulo-inviato{
border:1px solid var(--linea); border-left:4px solid var(--blu); background:#fff;
border-radius:var(--r); padding:28px 26px;
}
.modulo-inviato h3{margin-bottom:8px}
.modulo-inviato p{margin:0; color:var(--notte)}
.modulo-inviato a{font-weight:600}
.modulo button[disabled]{opacity:.7; cursor:progress}
/* Champ en erreur seulement apres interaction (sans attribut placeholder, :placeholder-shown ne s'applique jamais : tous les champs requis vides etaient rouges des le chargement) */
.campo input:user-invalid,.campo select:user-invalid,.campo textarea:user-invalid{border-color:#B3261E}
/* Bouton d'appel dans la navigation : la regle .nav a ne doit pas ecraser .btn */
.nav a.btn{color:#fff; padding:12px 22px}
.nav a.btn:hover{color:#fff}
.nav a.btn::after{display:none}
.modulo .consenso a,.campo-check a{text-decoration:underline}
/* Ouverture : la photo couvre tout le cadre (la regle Elementor img{height:auto} la ramenait a sa hauteur naturelle) */
.apertura .apertura-media .apertura-immagine{height:100%; max-width:none}
/* Bandeau de garanties sur fond bleu nuit : titre et etiquette lisibles (le titre heritait du bleu nuit du texte) */
.marcatori:not(.marcatori--chiara) h2{color:#fff}
.marcatori:not(.marcatori--chiara) .etichetta{color:#9FC0E8}
/* Lien « voir la page » d'une carte sur fond bleu nuit (bleu sur bleu nuit, illisible) */
.sez--notte .carta .vai{color:#fff}
/* ==========================================================================
SELECTEUR DE LANGUE (IT / FR / EN)
Bureau : dans la barre superieure. Tablette et telephone : dans l'en-tete, a cote du menu.
========================================================================== */
.lingue ul{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:2px}
.lingue li{margin:0}
.lingue a{
display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:32px; padding:0 6px;
font-family:var(--font-titre); font-weight:600; font-size:.8125rem; letter-spacing:.06em; text-decoration:none; border-radius:var(--r);
}
.lingue a:focus-visible{outline:3px solid var(--arancio); outline-offset:2px}
.lingue--barra{margin-left:18px; padding-left:14px; border-left:1px solid rgba(191,208,226,.35)}
.lingue--barra a{color:#BFD0E2}
.lingue--barra a:hover{color:#fff; background:rgba(255,255,255,.08)}
.lingue--barra a[aria-current="true"]{color:#fff; box-shadow:inset 0 -2px 0 var(--arancio)}
.lingue--testata{display:none}
.lingue--testata a{color:var(--notte)}
.lingue--testata a:hover{background:#EEF2F7}
.lingue--testata a[aria-current="true"]{color:var(--blu); box-shadow:inset 0 -3px 0 var(--arancio)}
@media (max-width:1024px){
.lingue--barra{display:none}
.lingue--testata{display:block; margin-left:auto}
.lingue--testata + .burger{margin-left:6px}
.lingue--testata a{min-width:40px; min-height:44px}
}
@media (max-width:768px){
.lingue--testata a{min-width:36px; padding:0 4px}
}
/* Petits ecrans de bureau (1025-1199 px) : le menu horizontal passait sur deux lignes
(italien compris, textes francais et anglais plus longs) : menu compact comme sur tablette. */
.nav a{white-space:nowrap}
@media (min-width:1025px) and (max-width:1199px){
.nav{display:none}
.burger{display:block; margin-left:auto}
.header .wrap{position:static}
.menu-mobile{
display:block; position:absolute; left:0; right:0; top:100%;
background:#fff; border-bottom:1px solid var(--linea); box-shadow:0 12px 24px rgba(11,37,69,.12);
max-height:calc(100vh - 120px); overflow-y:auto;
}
.menu-mobile[hidden]{display:none}
.menu-mobile ul{list-style:none; margin:0; padding:8px 24px 24px}
.menu-mobile li{margin:0; border-bottom:1px solid var(--linea)}
.menu-mobile li:last-child{border-bottom:0; padding-top:18px}
.menu-mobile a{
display:flex; align-items:center; min-height:54px; font-family:var(--font-titre); font-weight:600;
font-size:1.0625rem; color:var(--notte); text-decoration:none;
}
.menu-mobile a[aria-current="page"]{color:var(--blu); box-shadow:inset 3px 0 0 var(--arancio); padding-left:12px}
.menu-mobile .btn{width:100%; color:#fff; font-size:1.0625rem; min-height:54px}
.menu-mobile .btn:hover{color:#fff}
.burger .ic-chiudi{display:none}
.burger[aria-expanded="true"] .ic-apri{display:none}
.burger[aria-expanded="true"] .ic-chiudi{display:block}
.lingue--barra{display:none}
.lingue--testata{display:block; margin-left:auto}
.lingue--testata + .burger{margin-left:6px}
.lingue--testata a{min-width:40px; min-height:44px}
}
/* ==========================================================================
DOCUMENTS INFORMATIFS (privacy, cookie)
========================================================================== */
.documento{max-width:820px}
.documento h2{font-size:1.5rem; margin:44px 0 14px}
.documento h2:first-child{margin-top:0}
.documento h3{font-size:1.125rem; margin:26px 0 10px}
.documento p,.documento li{color:var(--notte)}
.documento ul{padding-left:22px; margin:0 0 18px}
.documento li{margin-bottom:8px}
.documento a{text-decoration:underline}
.documento .tabella-scorri{overflow-x:auto; margin:10px 0 22px}
.documento table{width:100%; border-collapse:collapse; min-width:560px; font-size:.9375rem}
.documento th,.documento td{border:1px solid var(--linea); padding:10px 12px; text-align:left; vertical-align:top}
.documento th{background:#F2F4F7; color:var(--notte); font-family:var(--font-titre); text-transform:none; letter-spacing:0; font-size:.9375rem}
.documento .aggiornato{margin-top:40px; font-size:.9375rem; color:#5B6B7F}
@media (max-width:768px){ .documento h2{font-size:1.3125rem; margin-top:34px} }