/* EUREKA — Orléans (45)
   Direction : un seul accent, un rouge saturé, verrouillé sur toute la page.
   Il vient de son fonds : c'est la couleur de Kartell, qu'il vend au Blue
   Square, et celle des Lego, qu'il vend au sous-sol. Un accent qui relie ses
   deux mondes au lieu de choisir un camp.
   Un seul thème clair, variations de ton seulement. Une seule police, Outfit :
   c'est l'écart de tailles qui porte la hiérarchie, pas une deuxième fonte.
   Mobile d'abord. Aucune librairie. */

/* ═══════════════════════════════════════════════════════════════
   JETONS — trois couches (skill `design-system`).
   1. PRIMITIVE : la valeur brute. Jamais appelée par un composant.
   2. SÉMANTIQUE : le rôle. C'est ce que lit la mise en page.
   3. COMPOSANT : déclarée dans le composant lui-même (voir .btn).
   Sans ces couches, changer le rouge oblige à chercher #C8281A partout.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ── 1. primitives ── */
  --blanc-50:#FAF9F7; --blanc-100:#F0EEE9; --blanc-200:#E6E3DC;
  --noir-900:#141414;
  --rouge-600:#C8281A;

  /* ── 2. sémantique ── */
  --papier:var(--blanc-50);
  --papier-2:var(--blanc-100);
  --papier-3:var(--blanc-200);
  --encre:var(--noir-900);
  /* texte secondaire — mesuré 5,07:1 sur --papier, WCAG AA */
  --encre-2:color-mix(in srgb, var(--noir-900) 62%, transparent);
  /* --encre-3 a été SUPPRIMÉ comme couleur de texte : mesuré 2,18:1, il
     échouait WCAG AA sur une vraie phrase. La hiérarchie passe désormais
     par la TAILLE, ce que la direction de la page annonçait déjà. Ce qui
     reste de lui est un filet, son seul usage légitime. */
  --filet:var(--blanc-200);
  --accent:var(--rouge-600);

  --police:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --e:cubic-bezier(.23,1,.32,1);       /* sortie, valeur exacte du skill animate */
  --e-mvt:cubic-bezier(.77,0,.175,1);  /* mouvement a l'ecran */
  --t-survol:.2s;                      /* survol : 150 a 250 ms */
  --t-appui:.16s;                      /* retour au clic : 160 ms (emil-design-eng) */
  --rayon:0px;                         /* UN seul rayon pour toute la page */
  --g:22px; --barre:60px; --top:62px;
}

*{box-sizing:border-box}

/* Base mobile du skill `mobile-native`. Chaque ligne corrige un defaut qui
   ne se reproduit PAS dans un navigateur de bureau, et qui trahit
   immediatement un site web sur un telephone. */
html{
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;   /* pas de gonflement du texte en paysage */
  -webkit-tap-highlight-color:transparent; /* pas de flash gris a l'appui */
  overscroll-behavior:none;        /* le « tirer pour rafraichir » ne vole plus le defilement */
  scroll-behavior:smooth;
  color-scheme:light;
}
body{margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--police);font-size:16px;line-height:1.55;overflow-x:clip;
  -webkit-font-smoothing:antialiased;font-weight:400;
  padding-bottom:calc(var(--barre) + env(safe-area-inset-bottom,0px))}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* `balance` repartit les mots des titres sur des lignes de longueur egale :
   plus de mot orphelin seul en fin de titre. `pretty` fait le meme travail
   sur la derniere ligne d'un paragraphe. */
h1,h2,h3{margin:0;font-weight:700;line-height:.94;letter-spacing:-.052em;
  text-wrap:balance}
p{margin:0 0 1rem;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
[id]{scroll-margin-top:calc(var(--top) + 14px)}
.w{padding:0 var(--g);max-width:1280px;margin:0 auto}

/* Tout ce qui se touche : pas de delai de 300 ms, pas de selection du
   libelle a l'appui long. Jamais sur le corps du texte, qui doit rester
   copiable (une adresse, un numero). */
a,.btn,button,[role=button]{touch-action:manipulation}
.btn,.top__t,.top__m,.barre a,.pied__l a{
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

.evite{position:absolute;left:-9999px;top:0;background:var(--encre);
  color:var(--papier);padding:.8rem 1.1rem;z-index:200}
.evite:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ══ LE GRAIN ══
   Le skill `redesign-skill` le dit sans detour : « flat design with zero
   texture feels sterile ». Une seule couche de bruit fixe, sous toute la
   chrome, au-dessus du contenu. Le motif est genere par le navigateur une
   fois et recycle : aucun fichier image, aucun telechargement. */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E")}

/* ══ TYPOGRAPHIE — l'ecart de tailles fait tout le travail ══ */
.t2{font-size:clamp(2.35rem,8.6vw,5rem)}
.grp{font-size:.82rem;color:var(--accent);font-weight:500;margin:0 0 1.1rem;
  letter-spacing:.01em}
.lead{font-size:clamp(1.05rem,4vw,1.3rem);line-height:1.55;max-width:34ch;
  color:var(--encre-2);margin:1.6rem 0 0;font-weight:400}

/* ══ BARRE DU HAUT — une seule ligne, 62 px ══ */
.top{position:sticky;top:0;z-index:70;height:var(--top);
  display:flex;align-items:center;gap:1rem;padding:0 var(--g);
  background:rgba(250,249,247,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--papier-3)}
.top__m{font-size:1.32rem;font-weight:700;letter-spacing:-.04em;margin-right:auto;
  display:inline-flex;align-items:center;min-height:44px}
.top__n{display:none;gap:1.6rem;font-size:.92rem;color:var(--encre-2)}
/* 44 px de haut : la cible tactile minimale du skill `ui-styling`.
   Le filet reste visuellement pres du texte, c'est la zone qui grandit. */
.top__n a{display:inline-flex;align-items:center;min-height:44px;position:relative}
.top__n a::after{content:"";position:absolute;left:0;right:0;bottom:11px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-survol) var(--e)}
.top__t{font-size:.92rem;font-weight:500;white-space:nowrap;
  border:1px solid var(--encre);padding:.52rem .9rem;min-height:44px;
  display:inline-flex;align-items:center;
  transition:background var(--t-survol) var(--e),color var(--t-survol) var(--e),
             transform var(--t-appui) var(--e)}

/* ══ JAUGE DE LECTURE ══ */
.jauge{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);
  z-index:90;pointer-events:none}

/* ══ BOUTONS ══
   Couche 3 des jetons : chaque variante fixe ses trois couleurs chez elle.
   Le remplissage et le filet ne suivent JAMAIS `currentColor` : au survol la
   couleur du texte change, et le bouton disparaitrait (incident 2026-09-24). */
.act{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2.1rem}
.btn{--btn-fond:var(--encre); --btn-filet:var(--encre); --btn-survol:var(--papier);
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 1.5rem;border-radius:var(--rayon);
  font-size:.92rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap;
  border:1px solid var(--btn-filet);
  transition:color var(--t-survol) var(--e),transform var(--t-appui) var(--e)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--btn-fond);transform:translateX(-101%);
  transition:transform var(--t-survol) var(--e)}
.btn--plein{--btn-fond:var(--encre); --btn-filet:var(--accent); --btn-survol:var(--papier);
  background:var(--accent);color:var(--papier)}

/* ══ LE RETOUR AU CLIC ══
   « Buttons must feel responsive » (skill `emil-design-eng`). Sans ca, un
   bouton ne repond qu'au RELACHEMENT du doigt : l'interface semble sourde,
   meme quand elle est instantanee. Le retour part a l'APPUI, et il marche
   au doigt comme a la souris — `:active` n'est pas `:hover`. */
.btn:active,.top__t:active,.tel:active{transform:scale(.97)}
.tel{transition:transform var(--t-appui) var(--e)}

@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);color:var(--btn-survol)}
  .btn:hover::before{transform:none}
  .btn:active{transform:translateY(0) scale(.97)}
  .top__n a:hover::after{transform:scaleX(1)}
  .top__t:hover{background:var(--encre);color:var(--papier)}
  .marques li:hover{color:var(--accent)}
  .pied__l a:hover{color:var(--accent)}
  .bt:hover{border-color:color-mix(in srgb, var(--noir-900) 14%, transparent)}
}


/* ═══════════════════════════════════════════════════════════════
   L'ENTREE AU CHARGEMENT — le premier ecran, une seule fois.
   Portillon `animate` : vu une fois par visiteur, tier « rare », le
   budget plaisir est autorise. Intention : expliquer l'ordre de
   lecture, le nom d'abord, l'action en dernier.
   Outil : animation CSS. `animation-timeline: view()` ne marche PAS
   ici : un element deja visible au chargement est au-dela de sa plage
   `entry` et s'affiche directement a son etat final.
   Courbe : cubic-bezier(.23,1,.32,1). Cascade : 80 ms.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
  .coupe .mot > i{transform:translateY(106%);
    animation:monte-in .9s var(--e) both;
    animation-delay:calc(.06s + var(--i) * .08s)}
  @keyframes monte-in{to{transform:translateY(0)}}

  .ouv .lead{animation:surgit .8s var(--e) .34s both}
  .ouv .act{animation:surgit .8s var(--e) .44s both}
  @keyframes surgit{from{opacity:0;transform:translateY(16px)}
                    to  {opacity:1;transform:none}}

  /* la photo s'ouvre en volet par le bas, apres le titre */
  .ouv__p{animation:volet 1.05s var(--e) .22s both}
  @keyframes volet{from{clip-path:inset(0 0 100% 0)}
                   to  {clip-path:inset(0 0 0 0)}}

  /* la barre du haut descend en premier */
  .top{animation:descend .55s var(--e) both}
  @keyframes descend{from{transform:translateY(-100%)}to{transform:none}}
}

/* ══ SECTIONS ══
   Bas plus genereux que le haut : une section se termine sur du vide, elle
   ne commence pas dessus. Le titre suivant tombe alors plus pres de son
   propre contenu qu'il ne l'est du precedent. */
.sec{padding:76px 0 94px}
.sec + .sec{padding-top:0}

/* 1. ACCUEIL — entree orchestree AU CHARGEMENT, puis derive au defilement.
   La photo doit etre DANS le premier ecran : un ecran de texte seul ne fait
   pas decrocher le telephone. */
.ouv{padding:34px 0 0}
.ouv__t{padding:0 var(--g);max-width:1280px;margin:0 auto}
.ouv h1{font-size:clamp(2.9rem,11.5vw,6.6rem);font-weight:700}
.ouv h1 i{font-style:normal}
.ouv__p{margin:34px 0 0;overflow:hidden}
.ouv__p img{width:100%;aspect-ratio:3/2;object-fit:cover}

.mot{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.1em;margin-bottom:-.1em}
.mot > i{display:inline-block}
.no-js .mot > i{transform:none}

/* 2. LES DEUX ETAGES — bento asymetrique, 2 cellules de tailles differentes */
.etages .w{margin-bottom:34px}
.bento{display:grid;gap:14px;padding:0 var(--g);max-width:1280px;margin:0 auto}
.bt{position:relative;background:var(--papier-2);
  border:1px solid var(--filet);
  transition:border-color var(--t-survol) var(--e)}
.ph{margin:0;overflow:hidden;background:var(--papier-3)}
.ph img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 62%}
.bt__x{padding:1.4rem 1.3rem 1.6rem}
.bt__x h3{font-size:1.5rem;font-weight:500;letter-spacing:-.03em;margin:0 0 .5rem}
.bt__x p{margin:0;color:var(--encre-2);max-width:40ch}

/* 3. BLUE SQUARE — bande pleine largeur, puis le texte dessous */
.bande{margin:0;overflow:hidden}
.bande img{width:100%;aspect-ratio:16/10;object-fit:cover}
.design__x{padding-top:38px}
.marques{display:flex;flex-wrap:wrap;gap:.5rem 1.7rem;margin:2rem 0 0;
  font-size:clamp(1.15rem,5vw,1.7rem);font-weight:500;letter-spacing:-.03em}
.marques li{color:var(--encre-2);transition:color var(--t-survol) var(--e)}

/* 4. LA NOTE — typographie seule, aucun visuel.
   C'etait la section la plus plate de la page : du texte pose sur un aplat.
   Une tache de lumiere radiale tres faible (skill `minimalist-skill` : « les
   sections ne doivent pas etre vides et plates ») lui donne un centre, sans
   ajouter le moindre element a lire. */
.note{background:var(--papier-2);padding:82px 0 94px;text-align:center;
  position:relative;isolation:isolate;overflow:hidden}
.note::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(62% 68% at 50% 40%,
    color-mix(in srgb, var(--rouge-600) 7%, transparent), transparent 72%)}
.note__n{font-size:clamp(5.4rem,27vw,14rem);line-height:.82;font-weight:700;
  letter-spacing:-.06em;margin:0;color:var(--accent)}
.note__e{margin:.7rem 0 0;font-size:1.25rem;letter-spacing:.34em;color:var(--accent)}
.note__e span{display:inline-block;opacity:0;transform:translateY(7px);
  transition:opacity .45s var(--e),transform .45s var(--e)}
.note__d{margin:1rem 0 0;font-size:1.04rem;color:var(--encre-2)}
.note__d b{font-weight:500;color:var(--encre)}
/* Hierarchie par la TAILLE, plus par un gris trop clair : cette phrase est
   du contenu reel, elle doit rester lisible. */
.note__s{margin:.5rem 0 0;font-size:.92rem;color:var(--encre-2)}

/* 5. NOUS TROUVER — deux colonnes de donnees, puis le plan */
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:34px var(--g)}
.c12{grid-column:span 12}
.adr{margin:1.8rem 0 0;color:var(--encre-2);font-size:1.04rem}
.tel{display:inline-block;margin:1.1rem 0 0;font-size:clamp(1.6rem,7.4vw,2.5rem);
  font-weight:700;letter-spacing:-.045em}
.heures__b + .heures__b{margin-top:2.2rem}
.heures h3{font-size:1.18rem;font-weight:500;letter-spacing:-.02em;margin:0 0 .7rem;
  color:var(--accent)}
.fl li{display:flex;justify-content:space-between;gap:1.4rem;
  padding:.72rem 0;border-bottom:1px solid var(--papier-3);
  font-size:1rem;align-items:baseline}
.fl li span{color:var(--encre-2)}
.fl li b{font-weight:500;text-align:right}

/* ══ PLAN, PIED, BARRE ══ */
.plan{line-height:0;margin-top:56px}
.plan iframe{width:100%;height:320px;border:0;display:block;
  filter:saturate(.6) contrast(.97)}
.pied{background:var(--encre);color:var(--papier);padding:56px 0 40px;margin-top:0;
  position:relative;isolation:isolate;overflow:hidden}
/* meme geste que la note, inverse : une lueur chaude tres faible empeche le
   pied d'etre un rectangle noir mort. */
.pied::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 120% at 12% 0%,
    color-mix(in srgb, var(--rouge-600) 13%, transparent), transparent 62%)}
.pied__n{font-size:1.9rem;font-weight:700;letter-spacing:-.04em;margin:0 0 1rem}
.pied p{color:rgba(250,249,247,.68);margin:0 0 1.5rem;line-height:1.75}
.pied a{color:rgba(250,249,247,.92)}
.pied__l{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.95rem;
  padding-top:1.4rem;border-top:1px solid rgba(250,249,247,.16)}
.pied__l a{color:rgba(250,249,247,.68);
  display:inline-flex;align-items:center;min-height:44px;
  transition:color var(--t-survol) var(--e)}

.barre{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;
  height:calc(var(--barre) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  border-top:1px solid var(--papier-3);background:var(--papier)}
.barre a{flex:1;display:flex;align-items:center;justify-content:center;
  font-size:.96rem;font-weight:500;
  transition:transform var(--t-appui) var(--e),opacity var(--t-appui) var(--e)}
.barre a:first-child{background:var(--accent);color:var(--papier)}
.barre a:active{opacity:.82;transform:scale(.97)}

/* ══ APPARITIONS ══ */
.r{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--e),transform .8s var(--e)}
.r.vu{opacity:1;transform:none}
.no-js .r{opacity:1;transform:none}
.fl li.r{transform:translateX(-16px)}
.fl li.r.vu{transform:none}
.note__e.vu span{opacity:1;transform:none}
.note__e.vu span:nth-child(2){transition-delay:.07s}
.note__e.vu span:nth-child(3){transition-delay:.14s}
.note__e.vu span:nth-child(4){transition-delay:.21s}
.note__e.vu span:nth-child(5){transition-delay:.28s}

/* ══ LA PAGE 404 ══
   Elle reprend la grille de l'accueil. Un visiteur qui se trompe d'adresse
   ne doit pas atterrir sur la page blanche de Cloudflare : il doit trouver
   le numero de telephone. */
.perdu{min-height:calc(100dvh - var(--top) - var(--barre));
  display:flex;flex-direction:column;justify-content:center;padding:64px 0 84px}
.perdu__n{font-size:clamp(5rem,26vw,13rem);line-height:.8;font-weight:700;
  letter-spacing:-.06em;margin:0 0 1.4rem;color:var(--accent)}

/* ══ GRAND ECRAN ══ */
@media (min-width:760px){
  :root{--g:40px}
  body{padding-bottom:0}
  .barre{display:none}
  .top__n{display:flex}
  .sec{padding:110px 0 132px}
  .ouv{padding:80px 0 0}
  .ouv__p{margin-top:66px}
  .ouv__p img{aspect-ratio:21/9}
  .bento{grid-template-columns:7fr 5fr;gap:18px}
  .bt--haut .ph img{aspect-ratio:4/3}
  .bt--bas .ph img{aspect-ratio:1/1}
  .bt__x{padding:1.7rem 1.6rem 1.9rem}
  .design__x{padding-top:56px}
  .c5{grid-column:span 5}
  .c7{grid-column:span 7}
  .heures{display:grid;grid-template-columns:1fr 1fr;gap:var(--g)}
  .heures__b + .heures__b{margin-top:0}
  .plan iframe{height:420px}
  .note{padding:120px 0 138px}
  .perdu{min-height:calc(100dvh - var(--top))}
}

@media (min-width:1080px){
  /* l'accueil tient dans UN ecran, photo comprise */
  .ouv{display:grid;grid-template-columns:1fr 46vw;align-items:center;
    gap:clamp(2rem,4vw,4.5rem);padding:0;
    min-height:calc(100dvh - var(--top));max-width:none;margin:0}
  .ouv__t{padding:0 0 0 max(var(--g), calc((100vw - 1380px) / 2));
    margin:0;max-width:none}
  .ouv h1{font-size:clamp(3.4rem,5.6vw,5.5rem)}
  .ouv .lead{margin-top:1.9rem;max-width:30ch}
  .ouv__p{margin:0;height:calc(100dvh - var(--top))}
  .ouv__p img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
}

/* ══ SURVOL SUR ECRAN TACTILE ══
   Un appui declenche un faux survol qui reste colle. On neutralise ce qui
   se declenche au survol — et SEULEMENT ca : `:active`, lui, doit continuer
   a repondre au doigt, c'est tout l'interet du retour au clic. */
@media (hover:none),(pointer:coarse){
  .marques li,.pied__l a{color:inherit}
  .bt{border-color:var(--filet)}
}

/* ═══════════════════════════════════════════════════════════════
   LE MOUVEMENT — un geste par section, jamais deux fois le meme.
   Outil : `animation-timeline: view()`, natif, hors du fil principal.
   Le JavaScript ne sert que de repli.
   ═══════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {

  /* accueil : la photo derive pendant qu'on descend.
     Plage `cover` et non `entry` : l'element est deja a l'ecran au
     chargement, une plage `entry` serait deja terminee. */
  .ouv__p img{animation:decadre linear both;animation-timeline:view();
    animation-range:cover 0% cover 100%}
  @keyframes decadre{
    from{transform:scale(1.09) translateY(-1.5%)}
    to  {transform:scale(1.02) translateY(1.5%)}}

  /* etages : chaque image derive dans son cadre, a sa propre vitesse */
  .bt--haut .ph img{animation:derive-a linear both;animation-timeline:view();
    animation-range:entry 0% exit 100%}
  .bt--bas .ph img{animation:derive-b linear both;animation-timeline:view();
    animation-range:entry 0% exit 100%}
  @keyframes derive-a{from{transform:translateY(-2.5%) scale(1.14)}
                      to  {transform:translateY(2.5%) scale(1.14)}}
  @keyframes derive-b{from{transform:translateY(3%) scale(1.14)}
                      to  {transform:translateY(-3%) scale(1.14)}}

  /* blue square : la bande se devoile par le bas */
  .bande{animation:devoile linear both;animation-timeline:view();
    animation-range:entry 6% entry 62%}
  @keyframes devoile{from{clip-path:inset(0 0 46% 0)}to{clip-path:inset(0 0 0 0)}}

  /* la note : le chiffre grandit legerement */
  .note__n{animation:grandit linear both;animation-timeline:view();
    animation-range:entry 12% entry 78%}
  @keyframes grandit{from{transform:scale(.94);opacity:.5}
                     to  {transform:scale(1);opacity:1}}

  /* la jauge de lecture suit le defilement de la page */
  .jauge{animation:jauger linear both;animation-timeline:scroll(root)}
  @keyframes jauger{from{width:0}to{width:100%}}
}

/* ══ MOUVEMENT REDUIT — tout redevient plat, la page reste lisible ══
   « Gentler, not zero » : le grain et les taches de lumiere restent, ce
   sont des couleurs, pas du mouvement. Seuls les deplacements tombent. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .r,.mot > i,.note__e span,.ouv .lead,.ouv .act,.top{opacity:1!important;transform:none!important}
  .ouv__p{clip-path:none!important}
  .bande{clip-path:none!important}
  .ouv__p img,.ph img{transform:none!important}
  body::after{opacity:.5}
  .note::before,.pied::before{opacity:1}
}