/* =========================================================
   La Loutre Digitale — feuille de style du site
   ---------------------------------------------------------
   Direction retenue le 26/08/2026 : sombre et cinématique, dans le
   prolongement du jeu. Le site d'un studio dont le produit est fait de
   décors animés ne peut pas ressembler à une note de service.

   Les couleurs ne sont pas choisies au hasard : ce sont celles des six
   décors de Sudoku Escale, relevées dans le code du jeu.

   Toujours aucune police téléchargée, aucune bibliothèque, aucun script de
   mise en page. Le seul script du site dessine le décor, et il s'arrête
   dès qu'on ne le regarde plus.
   ========================================================= */

:root{
  /* Fonds — repris du décor Nébuleuse */
  --bg:#0B1026;
  --bg2:#141a37;
  --carte:#161d3d;
  --carte-haut:#1d2650;

  /* Textes */
  --fg:#EDEBFF;
  --muted:#a3a9cf;
  --line:#2a3161;

  /* Accents — les six décors du jeu */
  --nebuleuse:#8b6ce0;
  --lagon:#2fd4c8;
  --foret:#7fc45f;
  --neon:#ff56ab;
  --savane:#f2b441;
  --sakura:#f7b7ce;

  --acc:var(--lagon);
  --sur-acc:#04121a;      /* texte posé sur l'accent : sombre, l'accent est clair */
  --focus:#9fd7ff;

  --ombre:0 2px 6px rgba(0,0,0,.35), 0 18px 48px rgba(0,0,0,.45);
  --lueur:0 0 0 1px rgba(47,212,200,.22), 0 12px 40px rgba(47,212,200,.10);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--lagon)}
a:focus-visible,button:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:6px}

.skip{position:absolute; left:-9999px}
.skip:focus{position:fixed; top:10px; left:10px; z-index:60; display:inline-block;
  padding:12px 18px; background:var(--acc); color:var(--sur-acc);
  border-radius:8px; text-decoration:none; font-weight:600}

.contenu{max-width:1060px; margin:0 auto; padding:0 22px}
.etroit{max-width:760px}

/* ---------- en-tête ---------- */
header.site{
  position:sticky; top:0; z-index:20;
  background:rgba(11,16,38,.82);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
header.site .contenu{display:flex; flex-wrap:wrap; gap:8px 22px;
  align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px}
.marque{font-weight:700; font-size:1.05rem; letter-spacing:.005em;
  text-decoration:none; color:var(--fg)}
.marque span{
  background:linear-gradient(92deg,var(--lagon),var(--nebuleuse) 60%,var(--sakura));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
nav.principale{display:flex; flex-wrap:wrap; gap:2px}
nav.principale a{
  text-decoration:none; color:var(--muted); font-size:.95rem;
  padding:9px 14px; border-radius:999px; transition:color .18s, background .18s}
nav.principale a:hover{color:var(--fg); background:var(--bg2)}
nav.principale a[aria-current="page"]{color:var(--fg); background:var(--bg2);
  box-shadow:inset 0 0 0 1px var(--line); font-weight:600}

/* ---------- bandeau avec le décor animé ---------- */
.scene{position:relative; isolation:isolate; overflow:hidden;
  border-bottom:1px solid var(--line)}
.scene canvas{position:absolute; inset:0; width:100%; height:100%; z-index:-2; display:block}
/* Voile dégressif : sans lui, le texte posé sur un ciel étoilé devient
   illisible dès qu'un nuage clair passe dessous. Même problème et même
   solution que dans le jeu. */
.scene::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,16,38,.14) 0%, rgba(11,16,38,.52) 45%,
                                     rgba(11,16,38,.88) 85%, var(--bg) 100%)}
.scene .contenu{padding-top:96px; padding-bottom:80px}

/* Bandeau d'accueil en deux colonnes : le texte à gauche, le produit à
   droite. Une vitrine qui ne montre pas le produit n'est pas une vitrine —
   et sur grand écran, une colonne unique laissait la moitié droite vide. */
.heros{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(24px,4vw,56px);
  align-items:center}
.heros .chapo{margin-bottom:1.5em}
.heros-visuel{display:flex; justify-content:center; align-items:flex-end;
  gap:0; padding-top:8px}
.heros-visuel .tel{width:clamp(148px,17vw,210px)}
/* La grille passe devant : c'est elle le produit, pas le menu. */
.heros-visuel .tel.gauche{transform:rotate(-6deg) translateY(10px); z-index:2}
.heros-visuel .tel.droite{transform:rotate(6deg) translateY(22px) scale(.94);
  margin-left:-14px; z-index:1}
@media (max-width:900px){
  .heros{grid-template-columns:1fr; gap:34px}
  .heros-visuel{padding-top:0}
  .heros-visuel .tel{width:clamp(140px,38vw,190px)}
}

h1{font-size:clamp(2.1rem, 6.2vw, 3.5rem); line-height:1.08; margin:0 0 .3em;
   letter-spacing:-.025em; font-weight:800}
h1 em{font-style:normal;
  background:linear-gradient(92deg,var(--lagon),var(--sakura));
  -webkit-background-clip:text; background-clip:text; color:transparent}
h2{font-size:clamp(1.35rem, 3vw, 1.75rem); line-height:1.25; margin:0 0 .7em;
   letter-spacing:-.015em; font-weight:700}
h3{font-size:1.08rem; margin:0 0 .4em; font-weight:700}
p,li{max-width:66ch}
li{margin:.4em 0}
.chapo{font-size:clamp(1.05rem,2.2vw,1.28rem); color:var(--muted); max-width:56ch; margin:0 0 1.8em}

section{padding:76px 0}
section + section{padding-top:0}
.titre-section{margin-bottom:1.6em}
.titre-section p{color:var(--muted); margin:0}

/* ---------- cartes ---------- */
.grille{display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.carte{
  background:linear-gradient(180deg,var(--carte-haut),var(--carte));
  border:1px solid var(--line); border-radius:18px; padding:26px 26px 28px;
  box-shadow:var(--ombre); position:relative; overflow:hidden;
  transition:transform .25s ease, border-color .25s ease}
.carte::before{content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,var(--lagon),var(--nebuleuse),var(--sakura));
  opacity:.75}
.carte:hover{transform:translateY(-3px); border-color:#3a4384}
@media (prefers-reduced-motion:reduce){ .carte,.carte:hover{transition:none; transform:none} }
.carte p:last-child{margin-bottom:0}
.carte.appli{display:flex; flex-direction:column}
.carte.appli .pousse{margin-top:auto; padding-top:18px}

/* Pastilles : des dessins au trait, pas des émojis. Un émoji change de forme
   d'un téléphone à l'autre et n'est pas toujours affiché — mauvaise idée pour
   une vitrine. Ces icônes sont écrites dans la page, ne pèsent rien et
   suivent la couleur du texte. */
.pastille{display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:14px;
  background:var(--bg2); border:1px solid var(--line); margin-bottom:16px;
  color:var(--lagon)}
.pastille svg{width:25px; height:25px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.carte:nth-child(2) .pastille{color:var(--sakura)}
.carte:nth-child(3) .pastille{color:var(--nebuleuse)}

.etiquette{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:6px 12px; border-radius:999px;
  background:var(--bg2); color:var(--muted); border:1px solid var(--line)}
.etiquette.bientot{background:var(--lagon); color:var(--sur-acc); border-color:var(--lagon)}

/* ---------- boutons ---------- */
.bouton{display:inline-block; text-decoration:none; font-weight:700; font-size:1rem;
  padding:14px 26px; border-radius:12px; background:var(--acc); color:var(--sur-acc);
  border:1px solid var(--acc); box-shadow:var(--lueur);
  transition:transform .18s ease, filter .18s ease}
.bouton:hover{transform:translateY(-2px); filter:brightness(1.08)}
.bouton.discret{background:transparent; color:var(--fg); border-color:var(--line);
  box-shadow:none}
.bouton.discret:hover{border-color:#3a4384; background:var(--bg2)}
@media (prefers-reduced-motion:reduce){ .bouton,.bouton:hover{transition:none; transform:none} }
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:.4em}

/* ---------- téléphones ---------- */
.telephones{display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(-40px,-3vw,0px); padding:24px 0 8px; perspective:1400px}
.tel{
  position:relative; flex:0 0 auto; width:clamp(150px,25vw,232px);
  border-radius:30px; padding:9px; background:#05080f;
  border:1px solid #333c72;
  box-shadow:0 26px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05) inset;
  transition:transform .3s ease}
.tel img{border-radius:22px; display:block; width:100%}
.tel::after{content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%);
  width:34%; height:15px; background:#05080f; border-radius:0 0 12px 12px}
.tel.gauche{transform:rotate(-7deg) translateY(20px) scale(.9); z-index:1}
.tel.droite{transform:rotate(7deg) translateY(20px) scale(.9); z-index:1}
.tel.centre{z-index:2}
.tel:hover{transform:translateY(-8px) rotate(0deg) scale(1); z-index:3}
@media (prefers-reduced-motion:reduce){ .tel,.tel:hover{transition:none} }
.legende{text-align:center; color:var(--muted); font-size:.93rem; margin:26px auto 0; max-width:52ch}

/* ---------- capture face au texte ---------- */
.duo{display:grid; gap:36px; align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.duo .tel{margin:0 auto}

/* ---------- listes de points forts ---------- */
ul.points{list-style:none; padding:0; margin:0; display:grid; gap:.2em 52px}
ul.points li{padding-left:2rem; position:relative; margin:.9em 0; max-width:62ch}
/* Sur grand écran, une seule colonne laissait la moitié droite de la page
   vide : le texte est bridé à 62 caractères pour rester lisible, pas la page. */
@media (min-width:920px){
  ul.points{grid-template-columns:1fr 1fr}
  ul.points li{max-width:none}
}
ul.points li::before{content:""; position:absolute; left:0; top:.62em;
  width:11px; height:11px; border-radius:3px;
  background:linear-gradient(135deg,var(--lagon),var(--nebuleuse))}

/* ---------- encadré ---------- */
.encadre{background:var(--bg2); border:1px solid var(--line);
  border-left:4px solid var(--lagon); border-radius:0 14px 14px 0;
  padding:20px 24px; margin:2em 0}
.encadre :first-child{margin-top:0}
.encadre :last-child{margin-bottom:0}

/* ---------- tableau ---------- */
.tw{overflow-x:auto; margin:1.4em 0}
table{border-collapse:collapse; width:100%; font-size:.96rem}
th,td{border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top}
th{background:var(--bg2); font-weight:700}

/* ---------- apparitions au défilement ---------- */
.reveal{opacity:0; transform:translateY(18px);
  transition:opacity .55s ease, transform .55s ease}
.reveal.vu{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
}
/* Filet de sécurité : si le script d'apparition ne s'exécute pas, tout doit
   rester visible. Une page blanche vaut moins qu'une page sans animation. */
.no-js .reveal{opacity:1; transform:none}

/* ---------- pied de page ---------- */
footer.site{border-top:1px solid var(--line); margin-top:40px; padding:40px 0 60px;
  color:var(--muted); font-size:.94rem; background:var(--bg2)}
footer.site .contenu{display:flex; flex-wrap:wrap; gap:12px 30px; justify-content:space-between}
footer.site nav{display:flex; flex-wrap:wrap; gap:10px 22px}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--fg)}

hr{border:0; border-top:1px solid var(--line); margin:3em 0}

/* ---------- petits écrans ---------- */
@media (max-width:700px){
  body{font-size:16.5px}
  /* En-tête compact : sur un écran de 390 px, un en-tête haut de 155 px
     mangeait un cinquième de la première impression. */
  header.site{position:static}
  header.site .contenu{padding-top:10px; padding-bottom:10px; gap:4px 12px}
  nav.principale{gap:2px; margin-left:-10px}
  nav.principale a{font-size:.85rem; padding:7px 9px}
  .scene .contenu{padding-top:64px; padding-bottom:72px}
  section{padding:56px 0}
  .telephones{gap:0}
  .tel.gauche,.tel.droite{transform:rotate(0) translateY(0) scale(1)}
  .telephones{flex-wrap:wrap; gap:18px}
  .carte{padding:22px 20px 24px}
}

@media print{
  header.site,footer.site nav,.scene canvas{display:none}
  body{background:#fff; color:#000}
}