/* ═══════════════════════════════════════════════════════════════════════
   EUREKA — Orléans. Direction artistique.
   ═══════════════════════════════════════════════════════════════════════
   L'idée, écrite avant la première ligne de code :
   « Trois univers qui n'ont rien à faire ensemble sous un même toit depuis
     1976 : les jeux en haut, les maquettes en bas, le design à part. »

   Le geste : trois bandes pleine largeur, une par univers. Jaune qui crie,
   bleu nuit qui crie plus fort, puis le SILENCE pour l'espace design. On
   descend la page comme on descend l'escalier du magasin. Le contraste
   entre les deux bandes bruyantes et la troisième est tout le propos :
   c'est pour ça que la troisième n'a pas de couleur.

   Le reste (lisibilité, zones tactiles, courbes, mobile) vient de
   socle.css et n'est jamais recopié ici.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --fond:#F2F3F5;          /* blanc froid, surtout pas le crème des pages IA */
  --fond-2:#E6E8EC;
  --encre:#14161A;
  --encre-2:#5B616B;       /* 5,6:1 sur le fond */
  --filet:rgba(20,22,26,.14);
  --accent:#14161A;
  --accent-sur:#FFFFFF;

  /* Les trois univers */
  --jaune:#FFC400;         /* encre dessus : 11,6:1 */
  --nuit:#0F2557;          /* blanc dessus : 14,8:1 */

  --texte:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --affiche:"Archivo Black", var(--texte);
}

/* ═══ EN-TÊTE ═══ */
.tete{position:sticky;top:0;z-index:50;background:var(--fond);
  border-bottom:1px solid var(--filet);
  padding-top:env(safe-area-inset-top, 0px)}
.tete__w{display:flex;align-items:center;gap:.6rem;min-height:66px}
.marque{margin-right:auto;display:inline-flex;align-items:center;
  min-height:var(--tactile);
  font-family:var(--affiche);font-size:1.3rem;letter-spacing:-.03em;
  color:var(--encre);text-decoration:none}
.nav{display:none;gap:.1rem;margin-right:.4rem}
.nav a{display:inline-flex;align-items:center;min-height:var(--tactile);
  padding:0 .8rem;border-radius:999px;font-size:.93rem;font-weight:600;
  color:var(--encre-2);text-decoration:none;
  transition:background var(--t-survol) var(--sortie),
             color var(--t-survol) var(--sortie)}

/* 🔴 Les réseaux sont visibles dans la barre du haut, pas enterrés dans le
   pied. Règle d'Adrien : quand le commerçant en a, on les affiche en gros. */
.rs{display:flex;gap:.2rem;margin-right:.3rem}
.rs__l{display:inline-flex;align-items:center;justify-content:center;
  width:var(--tactile);height:var(--tactile);border-radius:999px;
  color:var(--encre);text-decoration:none;
  transition:background var(--t-survol) var(--sortie)}
.rs__l svg{width:23px;height:23px;fill:currentColor}
.tete .btn{min-height:var(--tactile);padding:0 1.05rem;font-size:.9rem}
@media (min-width:960px){ .nav{display:flex} }

/* ═══ 1. OUVERTURE ═══
   Le nom prend toute la largeur, comme l'enseigne au-dessus de la vitrine. */
.ouv{padding:44px 0 var(--section)}
.enseigne{font-family:var(--affiche);
  font-size:clamp(3.6rem,23.5vw,21rem);line-height:.8;
  letter-spacing:-.055em;color:var(--encre);margin:0 0 2.2rem}
.ouv__g{display:grid;gap:36px;align-items:center}
.ouv__p{font-size:clamp(1.1rem,2.4vw,1.45rem);line-height:1.42;
  font-weight:500;max-width:24ch;margin:0 0 1.6rem}

/* La note : le chiffre et le nombre d'avis, rien d'autre. Pas cinq étoiles
   pleines à côté d'un 4,2, ce serait mentir en images. */
.note{display:inline-flex;align-items:baseline;gap:.5rem;
  background:var(--fond-2);border:1px solid var(--filet);
  border-radius:999px;padding:.45rem 1rem;margin:0 0 1.7rem}
.note__n{font-family:var(--affiche);font-size:1.3rem;color:var(--encre)}
.note__d{font-size:.9rem;color:var(--encre-2)}
.act{display:flex;flex-wrap:wrap;gap:.7rem}
.ouv__ph{margin:0;border-radius:18px;overflow:hidden;background:var(--fond-2);
  aspect-ratio:16/10}
.ouv__ph img{width:100%;height:100%;object-fit:cover}

/* ═══ 2 ET 3. LES DEUX BANDES ═══
   Pleine largeur, bord à bord. C'est le changement de couleur qui fait
   passer d'un univers à l'autre, pas un titre de section. */
.monde{padding:var(--section) 0}
.monde--jaune{background:var(--jaune);color:var(--encre)}
.monde--nuit{background:var(--nuit);color:#FFFFFF}
.monde__g{display:grid;gap:34px;align-items:center}
.etage{font-size:.88rem;font-weight:700;margin:0 0 .9rem;opacity:.72}
.t-monde{font-family:var(--affiche);
  font-size:clamp(2.6rem,8.5vw,5.2rem);line-height:.88;
  letter-spacing:-.045em;margin:0 0 1.2rem}
.monde__p{max-width:34ch;font-size:1.04rem;line-height:1.55;margin:0}
.monde--jaune .monde__p{color:#2B2308}
.monde--nuit .monde__p{color:#C3CFE8}
.monde__ph{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:1/1}
.monde__ph img{width:100%;height:100%;object-fit:cover}

/* ═══ 4. BLUE SQUARE ═══
   Après deux bandes qui crient, on se tait. Fond clair, caractères fins,
   beaucoup de vide. Le silence est la mise en page. */
.design{padding:calc(var(--section) * 1.2) 0;background:#FAFBFC}
.etage--d{opacity:.6}
.t-design{font-family:var(--texte);font-weight:400;
  font-size:clamp(2.8rem,9vw,6rem);line-height:.98;letter-spacing:-.045em;
  margin:0 0 1.3rem}
.design__p{max-width:36ch;font-size:1.1rem;line-height:1.5;
  color:var(--encre-2);margin:0 0 2.4rem}
.marques{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 2.6rem;
  margin:0;padding:0;
  font-family:var(--affiche);
  font-size:clamp(1.9rem,6vw,3.6rem);line-height:1.08;letter-spacing:-.04em}
/* 🔴 PAS DE PHOTO ICI, ET C'EST VOULU. La seule image disponible pour cet
   espace était un gros plan illisible : une mauvaise photo se premiumise ou
   se SUPPRIME, jamais ne se masque. Après deux bandes qui crient, une page
   blanche avec quatre noms de marques en grand dit « design » bien mieux
   qu'un visuel moyen. Le vide est la mise en page. */
.marques li{position:relative}

/* ═══ 5. LES CINQUANTE ANS ═══
   Le seul argument que personne ne peut copier. Donc rien d'autre à
   l'écran que le chiffre. */
.ans{background:var(--encre);color:#FFFFFF;padding:var(--section) 0;
  text-align:center}
.ans__n{font-family:var(--affiche);font-size:clamp(7rem,32vw,21rem);
  line-height:.78;letter-spacing:-.07em;margin:0;color:var(--jaune)}
.ans__d{margin:1.4rem 0 0;font-size:1.08rem;line-height:1.5;color:#C9CDD4}

/* ═══ 6. LES HORAIRES ═══
   Deux espaces, deux horaires. C'est l'information la plus utile du site. */
.heures{padding:var(--section) 0}
.bloc-h{border-top:4px solid var(--encre);padding-top:1.2rem}
.bloc-h .t3{margin-bottom:.9rem;font-size:1.5rem;
  font-family:var(--affiche);letter-spacing:-.03em}
.fl{list-style:none;margin:0;padding:0}
.fl li{display:flex;justify-content:space-between;gap:1.2rem;
  padding:.95rem 0;border-bottom:1px solid var(--filet);
  font-size:1.08rem;color:var(--encre-2)}
.fl li b{color:var(--encre);text-align:right;font-weight:700}

/* ═══ 7. NOUS TROUVER ═══ */
.venir{padding:0 0 var(--section)}
.adr{font-size:1.06rem;line-height:1.6;margin:0 0 1.5rem;color:var(--encre-2)}
.adr--2{margin-top:.2rem}
.plan{line-height:0;background:var(--fond-2)}
.plan iframe{width:100%;height:380px;border:0;display:block;filter:saturate(.9)}

/* ═══ PIED ═══ */
.pied{background:var(--encre);color:#9BA1AA;padding:44px 0 56px;
  font-size:.94rem}
.pied p{margin:0 0 .5rem;line-height:1.6}
.pied__n{font-family:var(--affiche);font-size:1.25rem;color:#FFFFFF;
  letter-spacing:-.03em;margin-bottom:.6rem}
.pied__l{display:flex;flex-wrap:wrap;gap:1.3rem;margin-top:.7rem}
.pied__l a{display:inline-flex;align-items:center;min-height:var(--tactile);
  color:#9BA1AA;text-decoration:none}

/* ═══ LA BARRE DU BAS, TÉLÉPHONE UNIQUEMENT ═══
   Appeler et y aller sont les deux seules actions qui comptent pour un
   commerce. Elles restent sous le pouce, toujours. */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  border-top:1px solid var(--filet);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:var(--fond)}
.barre a{flex:1;display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;font-size:1rem;font-weight:700;text-decoration:none;
  transition:background var(--t-appui) var(--sortie)}
.barre__a{background:var(--encre);color:#FFFFFF}
.barre__b{background:var(--jaune);color:var(--encre)}
.barre a:active{opacity:.9}
body{padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px))}
@media (min-width:860px){
  .barre{display:none}
  body{padding-bottom:0}
}

/* ═══ GRAND ÉCRAN ═══
   🔴 Après les classes de colonne du socle, jamais avant. */
@media (min-width:900px){
  .ouv{padding:64px 0 var(--section)}
  .ouv__g{grid-template-columns:1fr 1fr;gap:56px}
  .monde__g{grid-template-columns:1fr 1fr;gap:56px}
  /* La deuxième bande inverse texte et image : on ne lit pas deux fois la
     même mise en page à la suite. */
  .monde__g--inv .monde__t{order:2}
  .monde__g--inv .monde__ph{order:1}
  .plan iframe{height:460px}
}

/* ═══ SURVOLS ═══
   🔴 Tout ici, rien ailleurs : un appui sur téléphone laisse sinon un faux
   survol collé au doigt. */
@media (hover:hover) and (pointer:fine){
  .nav a:hover{background:var(--fond-2);color:var(--encre)}
  .rs__l:hover{background:var(--fond-2)}
  .pied__l a:hover{color:#FFFFFF}
}
@media (hover:none),(pointer:coarse){
  .nav a{background:transparent;color:var(--encre-2)}
  .rs__l{background:transparent}
}

/* ═══ LA PAGE DES MENTIONS ═══
   Même habillage, mais une colonne étroite : c'est un document, pas une
   vitrine. On le lit, on ne le regarde pas. */
.legal{padding:48px 0 var(--section)}
.legal .w{max-width:720px}
.legal .t2{margin-bottom:1.6rem}
.legal .t3{margin:2.2rem 0 .6rem}
.legal p{margin:0 0 1rem;color:var(--encre-2);line-height:1.65}
.legal p b{color:var(--encre)}
.enc{background:var(--fond-2);border:1px solid var(--filet);
  border-radius:18px;padding:1.2rem 1.3rem;margin:0 0 1.6rem}
.enc p:last-child{margin:0}


/* ═══ LES PHOTOS QUI SORTENT DU CADRE ═══
   Deux rectangles bien alignés, c'est sage. Ici chaque photo de bande va
   mordre le bord de l'écran, à droite pour la bande jaune, à gauche pour
   la bande bleue. Le calcul ne dépasse JAMAIS : au-dessous de 1180 px il
   retombe simplement sur la gouttière.
   (Et `overflow-x:hidden` du socle reste le filet de sécurité.) */
@media (min-width:900px){
  .monde--jaune .monde__ph{
    margin-right:calc(-1 * max(0px, (100vw - 1180px) / 2) - var(--gouttiere));
    border-top-right-radius:0;border-bottom-right-radius:0}
  .monde--nuit .monde__ph{
    margin-left:calc(-1 * max(0px, (100vw - 1180px) / 2) - var(--gouttiere));
    border-top-left-radius:0;border-bottom-left-radius:0}
  .monde__ph{aspect-ratio:4/3}
}


/* ═══ L'ARRIVÉE DANS CHAQUE UNIVERS ═══
   Le seul mouvement de la page, et il a une raison : il marque le passage
   d'un univers à l'autre. Le titre monte, la photo le suit de 90 ms. Rien
   d'autre ne bouge au défilement : un fondu sur chaque paragraphe serait le
   geste générique d'une page générée.
   La mécanique (hors du fil principal, repli si non supporté, arrêt sous
   « mouvement réduit ») vient du socle. */
.monde__ph.rv{animation-delay:70ms}