/* Wildies Casino FR — charte officielle Wildies */
:root{
  --bg:#0b0b12;
  --bg-2:#08080e;
  --panel:#15151f;
  --panel-2:#1b1b28;
  --panel-3:#22222f;
  --line:rgba(124,92,255,.20);
  --line-soft:rgba(255,255,255,.07);
  --violet:#7c5cff;
  --violet-2:#6c4dfa;
  --violet-soft:#b3a2ff;
  --green:#27d17c;
  --green-2:#1eb066;
  --orange:#f5871f;
  --text:#ffffff;
  --dim:#9e9eb5;
  /* Wildies utilise Gentona, sous licence commerciale ; Montserrat est
     la police de repli qu'ils declarent eux-memes, libre et tres proche. */
  --font:'Montserrat','Gentona',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --r:16px;
  --shadow:0 26px 60px -30px rgba(0,0,0,.95);
  --glow-v:0 0 0 1px rgba(124,92,255,.25),0 18px 40px -22px rgba(124,92,255,.55);
  --inset:inset 0 1px 0 rgba(255,255,255,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);line-height:1.75;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:
    radial-gradient(1200px 600px at 50% -200px,rgba(124,92,255,.10),transparent 70%);
  background-repeat:no-repeat;
}
h1,h2,h3,h4{margin-top:0;color:#fff;letter-spacing:-.025em;line-height:1.22}
h1{font-size:clamp(1.8rem,4.6vw,2.75rem);margin-bottom:.45em;font-weight:800}
h2{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 .7em;font-weight:800}
h3{font-size:1.14rem;margin:0 0 .55em;font-weight:700}
p{color:var(--dim);margin:0 0 1.05em}
strong{color:#fff;font-weight:700}
em{color:var(--violet-soft);font-style:normal;font-weight:600}
img{max-width:100%;height:auto}
button,input,select,textarea{font-family:inherit}
a{color:var(--violet-soft);text-decoration:none;transition:color .15s}
a:hover{color:#fff;text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.center{text-align:center}
.dim{color:var(--dim)}
.small{font-size:.88rem;line-height:1.6}

/* ---------- panneaux ---------- */
.panel{
  background:linear-gradient(158deg,var(--panel-2) 0%,var(--panel) 100%);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--inset),var(--shadow);
  padding:24px;
  position:relative;
  transition:transform .18s ease,border-color .18s ease;
}
.panel:hover{transform:translateY(-2px);border-color:rgba(124,92,255,.4)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* topbar styles moved to casino.css */

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:12px;font-weight:800;font-size:1rem;
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px);filter:brightness(1.07)}
.btn:active{transform:translateY(0)}
.btn-green{background:linear-gradient(180deg,#2fe089,var(--green-2));color:#04170d;box-shadow:0 16px 34px -16px rgba(39,209,124,.85)}
.btn-green:hover{color:#04170d;box-shadow:0 20px 40px -16px rgba(39,209,124,1)}
.btn-violet{background:linear-gradient(180deg,var(--violet),var(--violet-2));color:#fff;box-shadow:0 16px 34px -16px rgba(124,92,255,.95)}
.btn-violet:hover{color:#fff}
.btn-ghost{background:rgba(124,92,255,.07);color:#fff;border-color:rgba(124,92,255,.5)}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(124,92,255,.75)}
.btn-outline:hover{color:#fff;background:rgba(124,92,255,.14);border-color:var(--violet)}
.btn-ghost:hover{color:#fff;background:rgba(124,92,255,.16)}
.btn-sm{padding:10px 20px;font-size:.92rem;border-radius:10px}

/* ---------- hero ---------- */
.hero{
  position:relative;padding:58px 0 44px;overflow:hidden;
  background:
    radial-gradient(760px 400px at 10% -20%,rgba(124,92,255,.30),transparent 62%),
    radial-gradient(620px 340px at 92% 4%,rgba(39,209,124,.13),transparent 60%);
}
.hero:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,92,255,.45),transparent);
}
.hero .lead{font-size:1.08rem;max-width:66ch;color:#c2c2d4}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 8px}
.badge{
  display:inline-block;background:linear-gradient(180deg,#ff9d3c,var(--orange));color:#1e1000;font-weight:800;
  font-size:.71rem;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:7px;margin-bottom:16px;
  box-shadow:0 10px 24px -14px rgba(245,135,31,.9);
}
.badge-violet{background:rgba(124,92,255,.2);color:var(--violet-soft);box-shadow:none}
.badge-green{background:rgba(39,209,124,.18);color:#7ff0b6;box-shadow:none}

/* ---------- chiffres clés ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.stat{
  padding:18px 14px;text-align:center;border-radius:14px;
  background:linear-gradient(158deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);box-shadow:var(--inset);
  transition:transform .18s ease,border-color .18s ease;
}
.stat:hover{transform:translateY(-3px);border-color:rgba(124,92,255,.45)}
.stat b{display:block;font-size:1.45rem;line-height:1.2;font-weight:800;
  background:linear-gradient(180deg,#fff,var(--violet-soft));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.stat span{font-size:.82rem;color:var(--dim)}

/* ---------- sections ---------- */
section{padding:44px 0;border-top:1px solid var(--line-soft);position:relative}
section:first-of-type{border-top:0}
section > h2{display:flex;align-items:center;gap:12px}
section > h2:before{
  content:"";flex:0 0 4px;height:1.05em;border-radius:3px;
  background:linear-gradient(180deg,var(--violet),var(--green));
}

/* ---------- sommaire ---------- */
.toc{
  background:linear-gradient(158deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;margin:28px 0 4px;
  box-shadow:var(--inset);
}
.toc h2{font-size:.8rem!important;text-transform:uppercase;letter-spacing:.09em;color:var(--violet-soft);margin-bottom:.9em}
.toc h2:before{display:none}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px}
.toc li{padding:4px 0;color:var(--dim);break-inside:avoid}
.toc a{color:var(--dim);font-weight:600;font-size:.94rem}
.toc a:hover{color:#fff}

/* ---------- tableaux ---------- */
.table-wrap{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:540px;background:var(--panel)}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line-soft);font-size:.94rem}
th{background:linear-gradient(180deg,var(--panel-3),var(--panel-2));color:#fff;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
td{color:var(--dim)}
td strong{color:#fff}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(124,92,255,.06)}
tr:last-child td{border-bottom:0}
tbody tr:last-child{background:rgba(124,92,255,.09)}

/* ---------- listes ---------- */
ul.check,ul.cross{list-style:none;padding:0;margin:0}
ul.check li,ul.cross li{padding:8px 0 8px 30px;position:relative;color:var(--dim);border-bottom:1px solid rgba(255,255,255,.04)}
ul.check li:last-child,ul.cross li:last-child{border-bottom:0}
ul.check li:before{
  content:"✓";position:absolute;left:0;top:8px;color:var(--green);font-weight:900;font-size:.85rem;
  width:19px;height:19px;border-radius:50%;background:rgba(39,209,124,.14);
  display:flex;align-items:center;justify-content:center;
}
ul.cross li:before{
  content:"✕";position:absolute;left:0;top:8px;color:var(--orange);font-weight:900;font-size:.78rem;
  width:19px;height:19px;border-radius:50%;background:rgba(245,135,31,.14);
  display:flex;align-items:center;justify-content:center;
}
ul.plain,ol.plain{padding-left:22px}
ul.plain li,ol.plain li{color:var(--dim);padding:6px 0}
ol.plain li::marker{color:var(--violet-soft);font-weight:800}

/* ---------- FAQ ---------- */
details{
  background:linear-gradient(158deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:13px;padding:16px 20px;margin-bottom:11px;
  transition:border-color .18s;
}
details:hover{border-color:rgba(124,92,255,.42)}
details[open]{border-color:rgba(124,92,255,.5);box-shadow:var(--glow-v)}
summary{cursor:pointer;font-weight:700;color:#fff;list-style:none;padding-right:28px;position:relative}
summary::-webkit-details-marker{display:none}
summary:after{
  content:"+";position:absolute;right:0;top:-2px;color:var(--violet-soft);font-weight:800;font-size:1.25rem;
  transition:transform .2s;
}
details[open] summary:after{content:"−"}
details p{margin:13px 0 0}

/* ---------- breadcrumb ---------- */
.crumb{padding:18px 0 0;font-size:.82rem;color:var(--dim)}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.crumb li{display:flex;align-items:center;gap:6px;min-width:0}
.crumb li+li:before{content:"›";color:#5c5c72;font-size:.95rem;line-height:1}
.crumb a{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--dim);font-weight:600;text-decoration:none;
  padding:4px 10px;border-radius:8px;
  border:1px solid transparent;transition:.16s;
}
.crumb a:hover{color:var(--violet-soft);border-color:rgba(124,92,255,.35);background:rgba(124,92,255,.08)}
.crumb a:focus-visible{outline:2px solid var(--violet-soft);outline-offset:2px}
.crumb-home{font-size:.95rem;line-height:1}
.crumb [aria-current="page"]{
  color:#cfcfe2;font-weight:700;
  padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.05);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw;
}

/* ---------- CTA bloc ---------- */
.cta-box{
  text-align:center;padding:40px 24px;border-radius:20px;margin:10px 0 30px;
  background:
    radial-gradient(500px 220px at 50% 0%,rgba(124,92,255,.30),transparent 70%),
    linear-gradient(150deg,rgba(124,92,255,.16),rgba(39,209,124,.09));
  border:1px solid rgba(124,92,255,.34);
  box-shadow:var(--inset),var(--shadow);
}
.cta-box h3{font-size:1.5rem}

/* ---------- footer ---------- */
footer{background:var(--bg-2);border-top:1px solid var(--line-soft);padding:44px 0 30px;margin-top:24px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;margin-bottom:30px}
footer h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;color:var(--violet-soft);margin-bottom:14px}
footer ul{list-style:none;padding:0;margin:0}
footer li{padding:5px 0}
footer a{color:var(--dim);font-size:.92rem}
footer a:hover{color:#fff}
.legal{border-top:1px solid var(--line-soft);padding-top:22px;font-size:.84rem;color:var(--dim)}
.age{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  border:2px solid var(--orange);color:var(--orange);font-weight:900;font-size:.8rem;
  margin-right:10px;vertical-align:middle;
}

/* ---------- responsive ----------
   Points de rupture alignes sur casino.css : 900 puis 720.
   (Les anciennes regles .nav et .topbar de l'en-tete horizontal
   ont ete retirees : elles entraient en conflit avec le header actuel.) */
@media(max-width:900px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr;gap:24px}
  .toc ol{columns:1}
  .hero{padding:36px 0 30px}
  section{padding:32px 0}
  .panel{padding:20px}
  /* boutons pleine largeur uniquement quand ils sont seuls sur leur ligne */
  main > section > p > .btn,.hero-cta .btn{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .panel:hover,.stat:hover,.btn:hover{transform:none}
}



/* ---------- marque Wildies (logo officiel = wordmark 150x32) ---------- */
/* Le SVG contient deja le mot "WILDIES" : on masque le texte en doublon */
.brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brand img{width:122px;height:26px;max-width:none;display:block}
.brand-logo{width:auto!important;height:34px!important;display:block}

/* ---------- barre d'action fixe (mobile) ---------- */
.mobile-cta{display:none}
@media(max-width:720px){
  .mobile-cta{
    display:flex;align-items:center;gap:12px;
    position:fixed;left:0;right:0;bottom:0;z-index:85;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(11,11,18,.96);border-top:1px solid rgba(255,255,255,.09);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    box-shadow:0 -18px 40px -26px #000;
    text-decoration:none;
  }
  .mobile-cta:hover,.mobile-cta:focus{text-decoration:none}
  /* le texte se comprime, jamais le bouton */
  .mobile-cta .mc-txt{
    flex:1 1 auto;min-width:0;display:flex;flex-direction:column;
    justify-content:center;line-height:1.3;
  }
  .mobile-cta .mc-txt b,.mobile-cta .mc-txt span{
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .mobile-cta .mc-txt b{font-size:.82rem;color:#fff;font-weight:800}
  .mobile-cta .mc-txt span{font-size:.72rem;color:var(--dim);font-weight:600}
  .mobile-cta .btn{
    flex:0 0 auto;width:auto;padding:13px 22px;font-size:.88rem;border-radius:12px;
    white-space:nowrap;box-shadow:0 10px 26px -12px rgba(39,209,124,.9);
  }
  .mobile-cta .btn:hover{transform:none}

  /* confort de lecture general */
  .hero{padding:30px 0 24px}
  .hero .lead{font-size:.98rem}
  .hero-cta{gap:10px;margin:20px 0 4px}
  .hero-cta .btn{width:100%;text-align:center}
  .stats{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
  .stat b{font-size:1.2rem}
  h1{font-size:1.62rem;line-height:1.2}
  h2{font-size:1.3rem}
  table{font-size:.85rem}
  .toc{padding:16px 18px}
}
@media(max-width:380px){
  .mobile-cta .mc-txt span{display:none}
  .mobile-cta .btn{padding:13px 18px;font-size:.86rem}
}

/* ---------- bloc de conversion de la page d'accueil ---------- */
.cta-hero{
  position:relative;overflow:hidden;
  padding:46px 0 44px;
  background:
    radial-gradient(900px 480px at 78% 12%,rgba(124,92,255,.26),transparent 64%),
    radial-gradient(680px 420px at 6% -12%,rgba(39,209,124,.10),transparent 60%),
    linear-gradient(180deg,#0c0c15 0%,#0a0a11 100%);
}
.cta-hero:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,92,255,.45),transparent);
}
/* Visuel du coffre de bienvenue, cale a droite, derriere le texte.
   Le masque en degrade evite qu'il passe sous le H1 et le bouton. */
.cta-hero:before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:0;bottom:0;right:0;width:min(80%,1160px);
  background:url("/assets/img/coffre-bonus.webp?v=20260913r") no-repeat right center;
  background-size:cover;
  /* La source fait 972x320 : la remplir en hauteur l'agrandit ~2,5x et la pixellise.
     Le flou leger + le voile absorbent ce manque de definition. Le scale(1.05) evite
     que le flou laisse transparaitre les bords du calque. */
  filter:blur(4.5px) saturate(1.04);
  transform:scale(1.06);
  /* 1er inset = voile sombre ; les suivants fondent les quatre bords dans le bloc. */
  box-shadow:
    inset 0 0 0 2000px rgba(11,11,20,.58),
    inset 120px 0 90px -60px #0b0b13,
    inset -70px 0 60px -50px #0b0b13,
    inset 0 90px 70px -55px #0c0c15,
    inset 0 -90px 70px -55px #0a0a11;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.38) 14%,#000 40%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.38) 14%,#000 40%);
}
.cta-hero > .container{position:relative;z-index:1}
.pill-outline{
  display:inline-block;margin-bottom:20px;
  padding:2px 0 2px 12px;border-radius:0;
  border:0;border-left:3px solid #f5871f;color:#ffb765;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.cta-hero h1{margin:0 0 22px;line-height:1}
.cta-hero h1:before{display:none}
.cta-brand{
  display:block;font-family:var(--font);
  font-size:clamp(2.1rem,5.2vw,3.4rem);font-weight:900;line-height:1;
  letter-spacing:-.01em;text-transform:uppercase;
  color:var(--green);
  text-shadow:0 14px 40px rgba(39,209,124,.28);
}
.cta-claim{
  display:block;margin-top:12px;
  font-size:clamp(1rem,2vw,1.3rem);font-weight:700;letter-spacing:.01em;
  text-transform:none;color:#cfcfe2;
}
.cta-offer{
  font-size:clamp(1.02rem,1.7vw,1.3rem);color:#e8e8f4;
  max-width:60ch;margin:0 0 10px;line-height:1.5;
}
.cta-offer strong{color:#fff;font-weight:800}
.cta-note{font-size:.92rem;color:var(--dim);max-width:60ch;margin:0 0 28px}
.btn-xl{
  padding:19px 42px;font-size:1rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;border-radius:13px;
}
.pay-pills{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  margin:26px 0 18px;padding:0;
}
.pay-pills li{
  background:#fff;color:#12121c;
  font-size:.82rem;font-weight:700;
  padding:8px 16px;border-radius:9px;
  box-shadow:0 10px 24px -16px rgba(0,0,0,.9);
}
.cta-legal{font-size:.79rem;color:#7d7d95;max-width:62ch;margin:0;line-height:1.6}
.cta-hero .stats{margin-top:34px}
/* Grand ecran : le conteneur global (1120px) est centre alors que le visuel du hero est
   ancre a droite. Les deux se contredisent, d'ou une bande vide a gauche et un texte qui
   passe sous l'image. On elargit le conteneur du seul hero et on borne la colonne de
   texte pour qu'elle s'arrete avant le coffre. */
@media (min-width:1400px){
  .cta-hero > .container{max-width:1500px}
  .cta-hero .pill-outline,
  .cta-hero h1,
  .cta-hero .cta-offer,
  .cta-hero .cta-note,
  .cta-hero .cta-legal{max-width:700px}
  .cta-hero .btn-xl{margin-right:auto}
  .cta-hero .stats{max-width:1000px}
}
@media (min-width:1800px){
  .cta-hero > .container{max-width:1680px}
  .cta-hero:before{width:min(62%,1160px)}
}


@media(max-width:720px){
  .cta-hero{padding:34px 0 30px}
  /* Mobile : la colonne est haute et etroite, etirer un visuel 3:1 dessus le detruit.
     On en fait un bandeau en haut, cadre sur le coffre (73%), qui se fond vers le bas
     derriere le H1. Hauteur bornee = beaucoup moins d'agrandissement. */
  .cta-hero:before{
    left:0;right:0;width:auto;top:0;bottom:auto;height:min(52%,300px);
    background-position:73% center;background-size:cover;
    filter:blur(4px) saturate(1.06);transform:scale(1.06);
    box-shadow:
      inset 0 0 0 2000px rgba(11,11,20,.58),
      inset 0 70px 55px -45px #0c0c15,
      inset 60px 0 50px -45px #0c0c15,
      inset -60px 0 50px -45px #0c0c15;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 58%,transparent 96%);
            mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 58%,transparent 96%);}
  /* Le contenu respire sous le bandeau au lieu de demarrer dessus. */
  .cta-hero{padding-top:52px}
  .pill-outline{margin-bottom:14px;padding:2px 0 2px 10px;font-size:.72rem;letter-spacing:.04em}
  .cta-brand{font-size:2.15rem}
  .cta-claim{font-size:1rem;margin-top:9px}
  .cta-hero h1{margin-bottom:16px}
  .cta-offer{font-size:1rem;margin-bottom:8px}
  .cta-note{font-size:.87rem;margin-bottom:22px}
  .btn-xl{width:100%;text-align:center;padding:17px 24px;font-size:.95rem;letter-spacing:.07em}
  .pay-pills{gap:8px;margin:20px 0 14px}
  .pay-pills li{font-size:.76rem;padding:7px 12px}
  .cta-legal{font-size:.75rem}
  .cta-hero .stats{margin-top:24px}
}

/* ===== RESPONSIVE TABLEAUX =====
   `table{min-width:540px}` oblige chaque tableau a defiler horizontalement sous 540px.
   Avec 11 tableaux sur la page, cela cree autant de pieges au doigt et perturbe le
   pinch-zoom. Sous 720px on laisse donc les tableaux se reagencer dans la largeur
   disponible, en cassant les mots longs, plutot que de forcer un defilement. */
@media(max-width:720px){
  .table-wrap{overflow-x:visible;overscroll-behavior-x:auto}
  .table-wrap table{min-width:0;width:100%;table-layout:fixed;font-size:.84rem}
  .table-wrap th,.table-wrap td{
    padding:8px 10px;word-break:break-word;overflow-wrap:anywhere;hyphens:auto;
  }
  .table-wrap td:first-child,.table-wrap th:first-child{width:38%}
}
@media(max-width:400px){
  .table-wrap table{font-size:.79rem}
  .table-wrap th,.table-wrap td{padding:7px 8px}
}

/* Filet de securite : aucun element ne doit elargir la fenetre de mise en page,
   sinon le navigateur mobile dezoome pour faire tenir la page. */
html{overflow-x:hidden}
img,svg,video,table{max-width:100%}