/* ==========================================================================
   BULLE BAZAR — magasin de jouets, Tours
   Gamme Essentiel · monopage
   Système formel 8 — Signalétique : bandes horizontales, aplats, rayon 0,
   aucune ombre, typographie de panneau.
   Toute la palette vit dans :root et n'est appelée que par var().
   ========================================================================== */

/* --- Polices livrées localement, aucune requête distante ----------------- */

@font-face{
  font-family:'Syne';
  font-style:normal;
  font-weight:600 800;
  font-display:swap;
  src:url('../fonts/syne-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:'Syne';
  font-style:normal;
  font-weight:600 800;
  font-display:swap;
  src:url('../fonts/syne-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:'Atkinson Hyperlegible';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/atkinson-400-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:'Atkinson Hyperlegible';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/atkinson-400-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:'Atkinson Hyperlegible';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/atkinson-700-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:'Atkinson Hyperlegible';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/atkinson-700-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;
}

/* --- Palette éditable : un seul endroit à modifier ----------------------- */

:root{
  /* Les cinq couleurs de la marque. */
  --encre:#13213A;
  --indigo:#5650D8;
  --abricot:#FFB36B;
  --menthe:#8DDBC5;
  --papier:#FFF8ED;

  /* Variantes dérivées : elles suivent automatiquement les cinq ci-dessus. */
  --encre-voile:color-mix(in srgb,var(--encre) 74%,transparent);
  --encre-moyen:color-mix(in srgb,var(--encre) 62%,var(--papier));
  --encre-doux:color-mix(in srgb,var(--encre) 12%,var(--papier));
  --encre-nuit:color-mix(in srgb,var(--encre) 86%,var(--indigo));
  --indigo-sombre:color-mix(in srgb,var(--indigo) 52%,var(--encre));
  --indigo-pale:color-mix(in srgb,var(--indigo) 13%,var(--papier));
  --abricot-sombre:color-mix(in srgb,var(--abricot) 58%,var(--encre));
  --abricot-pale:color-mix(in srgb,var(--abricot) 30%,var(--papier));
  --menthe-pale:color-mix(in srgb,var(--menthe) 32%,var(--papier));
  --menthe-sombre:color-mix(in srgb,var(--menthe) 50%,var(--encre));
  --ligne:color-mix(in srgb,var(--encre) 24%,var(--papier));
  --ligne-claire:color-mix(in srgb,var(--papier) 62%,transparent);
  --ombre-photo:color-mix(in srgb,var(--encre) 34%,transparent);

  /* Familles typographiques — livrées en local ci-dessus. */
  --police-titres:'Syne',sans-serif;
  --police-courante:'Atkinson Hyperlegible',sans-serif;

  /* Rythme et mesures du système signalétique. */
  --large:1480px;
  --marge:clamp(1.25rem,5vw,4.5rem);
  --bande-y:clamp(3.5rem,7vw,6.5rem);
  --creux:clamp(1rem,2.4vw,2rem);
  --duree:.45s;
  --duree-longue:.72s;
  --courbe:cubic-bezier(.22,.61,.36,1);
}

/* --- Socle ------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:8.5rem;
}

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--police-courante);
  font-size:1.0625rem;
  line-height:1.65;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;border-radius:0}

a{color:var(--indigo-sombre);text-underline-offset:.22em}

h1,h2,h3,h4{
  font-family:var(--police-titres);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.03em;
  margin:0 0 .5em;
  text-wrap:balance;
}

p{margin:0 0 1.05em;max-width:64ch}
ul{margin:0 0 1.05em;padding-left:1.15em}
li{margin-bottom:.5em}

:focus-visible{
  outline:3px solid var(--indigo);
  outline-offset:3px;
}

/* Il attend au-dessus de l'écran : pleine cible tactile dès qu'il revient,
   et jamais un pixel de largeur en trop sur le document. */
.saut-contenu{
  position:absolute;left:.5rem;top:.5rem;z-index:60;
  display:inline-flex;align-items:center;
  min-height:44px;padding:.9rem 1.4rem;
  white-space:nowrap;
  background:var(--encre);color:var(--papier);
  text-decoration:none;font-weight:700;
  transform:translateY(-220%);
  transition:transform var(--duree) var(--courbe);
}
.saut-contenu:focus{transform:none}

.env{
  width:100%;max-width:var(--large);
  margin-inline:auto;
  padding-inline:var(--marge);
}

/* Toute bande traverse l'écran : c'est le changement d'aplat qui sépare. */
.bande{padding-block:var(--bande-y);position:relative}
.bande--papier{background:var(--papier)}
.bande--creme{background:var(--abricot-pale)}
.bande--menthe{background:var(--menthe-pale)}
.bande--indigo{background:var(--indigo-pale)}
.bande--encre{background:var(--encre);color:var(--papier)}
.bande--encre h2,.bande--encre h3{color:var(--papier)}
.bande--serree{padding-block:clamp(2rem,4vw,3.2rem)}

.surtitre{
  font-family:var(--police-courante);
  font-weight:700;
  font-size:.8125rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--indigo-sombre);
  margin:0 0 1.1rem;
}
.bande--encre .surtitre{color:var(--menthe)}

.titre-bande{
  font-size:clamp(2.1rem,5.2vw,4.2rem);
  max-width:19ch;
}
.chapeau{
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  max-width:56ch;
  color:var(--encre-moyen);
}
.bande--encre .chapeau{color:var(--ligne-claire)}

/* --- Boutons : rectangles pleins, capitales espacées, très larges ------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:56px;padding:.95rem 2rem;
  font-family:var(--police-courante);
  font-weight:700;font-size:1rem;
  letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;border:0;border-radius:0;cursor:pointer;
  background:var(--encre);color:var(--papier);
  transition:background var(--duree) var(--courbe),
             color var(--duree) var(--courbe),
             transform var(--duree) var(--courbe),
             letter-spacing var(--duree) var(--courbe);
}
.btn:hover,.btn:focus-visible{
  background:var(--indigo);
  color:var(--papier);
  transform:translateY(-3px);
  letter-spacing:.145em;
}
.btn--accent{background:var(--abricot);color:var(--encre)}
.btn--accent:hover,.btn--accent:focus-visible{background:var(--encre);color:var(--abricot)}
.btn--clair{background:var(--papier);color:var(--encre)}
.btn--clair:hover,.btn--clair:focus-visible{background:var(--menthe);color:var(--encre);transform:translateY(-3px)}
.btn--fil{
  background:transparent;color:var(--encre);
  box-shadow:inset 0 0 0 2px var(--encre);
}
.btn--fil:hover,.btn--fil:focus-visible{background:var(--encre);color:var(--papier)}

.lien-fleche{
  display:inline-flex;align-items:center;gap:.55rem;
  min-height:44px;
  font-weight:700;text-decoration:none;color:var(--indigo-sombre);
  border-bottom:2px solid var(--indigo);
  transition:gap var(--duree) var(--courbe),
             color var(--duree) var(--courbe),
             border-color var(--duree) var(--courbe);
}
.lien-fleche:hover,.lien-fleche:focus-visible{gap:1.1rem;color:var(--encre);border-color:var(--abricot)}
.bande--encre .lien-fleche{color:var(--menthe);border-color:var(--menthe)}
.bande--encre .lien-fleche:hover{color:var(--papier);border-color:var(--abricot)}

/* --- En-tête à deux niveaux (axe 1 = F) --------------------------------- */

.hd{position:relative;z-index:40;background:var(--papier)}

.hd__info{
  background:var(--encre);
  color:var(--papier);
  font-size:1rem;
}
.hd__info .env{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.6rem;
  padding-block:.55rem;
}
.hd__info p{margin:0;max-width:none}
.hd__info b{color:var(--menthe);font-weight:700}
.hd__tel{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;
  color:var(--papier);font-weight:700;text-decoration:none;
  letter-spacing:.04em;
  transition:color var(--duree) var(--courbe),transform var(--duree) var(--courbe);
}
.hd__tel span{
  background:var(--abricot);color:var(--encre);
  padding:.25rem .6rem;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background var(--duree) var(--courbe);
}
.hd__tel:hover,.hd__tel:focus-visible{color:var(--abricot);transform:translateY(-1px)}
.hd__tel:hover span{background:var(--menthe)}

.hd__barre{
  border-bottom:2px solid var(--encre);
}
.hd__barre .env{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:.9rem;
}

.logo{
  display:inline-flex;align-items:baseline;gap:.42rem;
  min-height:44px;padding-block:.35rem;
  font-family:var(--police-titres);
  text-decoration:none;color:var(--encre);
  font-size:clamp(1.45rem,2.4vw,1.9rem);
  letter-spacing:-.02em;line-height:1;
  transition:color var(--duree) var(--courbe);
}
.logo span{font-weight:600}
.logo strong{
  font-weight:800;
  background:var(--indigo);color:var(--papier);
  padding:.12em .3em;
  transition:background var(--duree) var(--courbe);
}
.logo:hover strong,.logo:focus-visible strong{background:var(--abricot);color:var(--encre)}

.nav-p{display:flex}
.nav-p ul{display:flex;flex-wrap:wrap;gap:.2rem 1.5rem;list-style:none;margin:0;padding:0}
.nav-p a{
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 .15rem;
  font-weight:700;font-size:.9375rem;
  text-decoration:none;color:var(--encre);
  border-bottom:3px solid transparent;
  transition:color var(--duree) var(--courbe),
             border-color var(--duree) var(--courbe),
             transform var(--duree) var(--courbe);
}
.nav-p a:hover,.nav-p a:focus-visible{color:var(--indigo-sombre);border-color:var(--abricot);transform:translateY(-2px)}

.hd__action{display:flex;align-items:center;gap:.8rem}
.hd__action .btn{min-height:48px;padding:.7rem 1.3rem;font-size:.875rem}

.bouton-menu{
  display:none;
  align-items:center;gap:.6rem;
  min-height:48px;padding:.6rem 1.1rem;
  background:var(--encre);color:var(--papier);
  border:0;border-radius:0;cursor:pointer;
  font-family:var(--police-courante);font-weight:700;font-size:.875rem;
  letter-spacing:.12em;text-transform:uppercase;
  transition:background var(--duree) var(--courbe);
}
.bouton-menu:hover{background:var(--indigo)}

/* --- Zone haute : composition scindée avec macro (axe 3) ---------------- */
/* Jamais 100vh ni 100svh : c'est la marque de l'Essentiel. */

.haut{
  background:var(--papier);
  padding-block:clamp(2.5rem,5vw,4.5rem) 0;
  position:relative;
}
.haut__grille{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:end;
}
.haut__texte{padding-bottom:clamp(2rem,4vw,3.5rem)}
.haut__titre{
  font-size:clamp(2.9rem,7.4vw,6.1rem);
  line-height:.9;
  letter-spacing:-.042em;
  margin:0 0 1.15rem;
  max-width:12ch;
}
/* Le surlignage suit chaque ligne au lieu de fabriquer un pavé : les mots
   restent tenus par la couleur, et aucun fragment vide ne traîne dessous. */
.haut__titre em{
  font-style:normal;
  background:var(--abricot);
  padding:.02em .16em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.haut__accroche{
  font-size:clamp(1.0625rem,1.6vw,1.3125rem);
  max-width:44ch;
  color:var(--encre-moyen);
  margin-bottom:0;
}

/* Seconde bande de la zone haute : le socle de prix, sur un aplat menthe. */
.haut-socle{
  background:var(--menthe-pale);
  padding-block:clamp(1.8rem,3.5vw,2.8rem);
}
.haut-socle .env{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(1.5rem,4vw,3.5rem);
}

/* Bandeau de prix, posé sous le titre (axe 4 = d) */
.bandeau-prix{
  display:flex;flex-wrap:wrap;align-items:stretch;
  background:var(--encre);color:var(--papier);
  margin-bottom:1.5rem;
}
.bandeau-prix > div{
  padding:1rem 1.3rem;
  flex:1 1 8rem;
  border-right:1px solid var(--ligne-claire);
}
.bandeau-prix > div:last-child{border-right:0}
.bandeau-prix dt{
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--menthe);font-weight:700;margin-bottom:.3rem;
}
.bandeau-prix dd{
  margin:0;
  font-family:var(--police-titres);font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.85rem);
  letter-spacing:-.02em;line-height:1.05;
}
.haut__boutons{display:flex;flex-wrap:wrap;gap:.8rem}

/* Le macro descend dans la bande menthe, du côté droit resté libre :
   il chevauche l'aplat, jamais une ligne de texte. */
.haut__macro{
  position:relative;
  align-self:end;
  z-index:2;
}
@media (min-width:981px){
  .haut__macro{margin-bottom:clamp(-5.5rem,-4.5vw,-3rem)}
}
.haut__macro img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  filter:saturate(.86) contrast(1.03);
}
.haut__macro figcaption{
  position:absolute;left:0;bottom:0;
  background:var(--indigo);color:var(--papier);
  font-size:1rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  padding:.7rem 1.1rem;
  max-width:88%;
}
.haut__macro::after{
  content:"";position:absolute;top:-.9rem;right:-.9rem;
  width:clamp(3.5rem,7vw,6rem);aspect-ratio:1/1;
  background:var(--menthe);
  animation:derive 14s var(--courbe) infinite alternate;
}

/* --- Bloc l'essentiel (R4) --------------------------------------------- */

.essentiel{background:var(--abricot);color:var(--encre)}
.essentiel .env{padding-block:clamp(1.8rem,3.5vw,2.8rem)}
.essentiel__invisible{
  font-family:var(--police-courante);
  font-size:.8125rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--abricot-sombre);
  margin:0 0 1.1rem;
}
.essentiel__grille{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
}
.essentiel__case{
  padding:.3rem clamp(.9rem,1.8vw,1.6rem);
  border-left:2px solid var(--encre);
}
.essentiel__case:first-child{border-left:0;padding-left:0}
.essentiel__case h2,.essentiel__case h3{
  font-family:var(--police-courante);
  font-size:.75rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;
  margin:0 0 .55rem;
  color:var(--abricot-sombre);
}
.essentiel__case p{margin:0;font-size:1rem;max-width:30ch}
.essentiel__fort{
  font-family:var(--police-titres);font-weight:800;
  font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:-.03em;line-height:1;
  display:block;margin-bottom:.25rem;
}
.essentiel__tel{
  display:inline-flex;align-items:center;
  min-height:48px;
  font-family:var(--police-titres);font-weight:800;
  font-size:clamp(1.45rem,2.7vw,2.15rem);
  letter-spacing:-.02em;
  color:var(--encre);text-decoration:none;
  border-bottom:4px solid var(--encre);
  transition:color var(--duree) var(--courbe),
             border-color var(--duree) var(--courbe),
             transform var(--duree) var(--courbe);
}
.essentiel__tel:hover,.essentiel__tel:focus-visible{
  color:var(--indigo-sombre);border-color:var(--indigo);transform:translateY(-2px);
}

/* --- Les 4 chemins : moment signature statique -------------------------- */

.chemins__liste{
  list-style:none;margin:2.5rem 0 0;padding:0;
  border-top:2px solid var(--encre);
}
.chemin{
  display:grid;
  grid-template-columns:clamp(4.5rem,9vw,8rem) minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1rem,3vw,2.5rem);
  align-items:start;
  padding:clamp(1.5rem,3vw,2.4rem) 0;
  border-bottom:2px solid var(--encre);
  transition:background var(--duree-longue) var(--courbe),
             padding-left var(--duree) var(--courbe);
}
.chemin:hover{background:var(--menthe-pale);padding-left:clamp(.5rem,1.5vw,1.4rem)}
.chemin__num{
  font-family:var(--police-titres);font-weight:800;
  font-size:clamp(2.8rem,6.5vw,5.2rem);
  line-height:.8;letter-spacing:-.05em;
  color:var(--indigo);
}
.chemin h3{
  font-size:clamp(1.35rem,2.6vw,2.05rem);
  margin-bottom:.5rem;
}
.chemin p{margin:0;color:var(--encre-moyen)}
.chemin__reponse{
  background:var(--encre);color:var(--papier);
  padding:1.1rem 1.3rem;
}
.chemin__reponse b{display:block;color:var(--menthe);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.4rem}
.chemin__reponse p{color:var(--papier);font-size:1rem}

/* --- Le grand rayon qui se déplie --------------------------------------- */

.rayon{
  display:grid;
  grid-template-columns:clamp(6.5rem,15vw,15rem) minmax(0,1fr);
  gap:clamp(1.2rem,3.5vw,3rem);
  align-items:start;
  padding-block:clamp(2rem,4vw,3.2rem);
  border-top:2px solid var(--encre);
}
.rayon:first-of-type{border-top:0}
.rayon__age{position:sticky;top:9rem}
.rayon__age b{
  display:block;
  font-family:var(--police-titres);font-weight:800;
  font-size:clamp(2.6rem,7vw,5.4rem);
  line-height:.82;letter-spacing:-.045em;
  color:var(--encre);
}
.rayon__age span{
  display:block;
  font-size:.75rem;letter-spacing:.17em;text-transform:uppercase;font-weight:700;
  color:var(--indigo-sombre);margin-top:.55rem;
}
.rayon__age::after{
  content:"";display:block;height:6px;margin-top:.9rem;
  background:var(--abricot);
  transform-origin:left center;
  animation:regle 1.1s var(--courbe) both;
}
.rayon__corps h3{font-size:clamp(1.4rem,2.8vw,2.2rem);margin-bottom:.55rem}
.rayon__corps > p{color:var(--encre-moyen);max-width:60ch}

.rayon__jeux{
  list-style:none;margin:1.4rem 0 0;padding:0;
  display:grid;gap:0;
  border-top:1px solid var(--ligne);
}
.rayon__jeux li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:.6rem clamp(.8rem,2vw,2rem);
  align-items:baseline;
  padding:.95rem 0;margin:0;
  border-bottom:1px solid var(--ligne);
  transition:background var(--duree) var(--courbe),
             padding-left var(--duree) var(--courbe);
}
.rayon__jeux li:hover{background:var(--papier);padding-left:.7rem}
.rayon__jeux b{font-family:var(--police-titres);font-weight:700;font-size:1.125rem;letter-spacing:-.015em}
.rayon__jeux i{font-style:normal;display:block;font-size:1rem;color:var(--encre-moyen)}
.prix{
  font-family:var(--police-titres);font-weight:800;
  font-size:1.1875rem;letter-spacing:-.02em;white-space:nowrap;
}
.dispo{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.8125rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;
  padding:.35rem .7rem;
  background:var(--menthe);color:var(--encre);
}
.dispo::before{
  content:"";width:.6rem;height:.6rem;border-radius:50%;
  background:var(--encre);
  animation:battement 2.6s ease-in-out infinite;
}
.dispo--commande{background:var(--indigo);color:var(--papier)}
.dispo--commande::before{background:var(--papier)}

.rayon__image{margin:1.6rem 0 0}
.rayon__image img{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  filter:saturate(.84) contrast(1.02);
  transition:filter var(--duree-longue) var(--courbe),transform var(--duree-longue) var(--courbe);
}
.rayon__image:hover img{filter:saturate(1) contrast(1.05);transform:scale(1.015)}
.rayon__image figcaption{
  font-size:1rem;color:var(--encre-moyen);
  padding-top:.6rem;border-top:1px solid var(--ligne);margin-top:.6rem;
}

/* --- Diptyque retrait --------------------------------------------------- */

.diptyque{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.diptyque__image{margin:0;position:relative}
.diptyque__image img{width:100%;height:100%;object-fit:cover;min-height:22rem}
.diptyque__texte{
  background:var(--encre);color:var(--papier);
  padding:clamp(2rem,5vw,4.5rem) clamp(1.5rem,4vw,4rem);
  display:flex;flex-direction:column;justify-content:center;
}
.diptyque__texte h2{color:var(--papier);font-size:clamp(1.9rem,4vw,3.2rem);max-width:15ch}
.diptyque__texte p{color:var(--ligne-claire)}
.etapes{list-style:none;margin:1.2rem 0 1.8rem;padding:0;counter-reset:etape}
.etapes li{
  counter-increment:etape;
  display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.9rem;
  padding:.75rem 0;
  border-top:1px solid var(--ligne-claire);
  color:var(--papier);
}
.etapes li::before{
  content:counter(etape);
  font-family:var(--police-titres);font-weight:800;font-size:1.35rem;
  color:var(--menthe);line-height:1.1;
}

/* --- Bande en négatif : la rupture -------------------------------------- */

.negatif{background:var(--encre-nuit);color:var(--papier);position:relative;overflow:hidden}
.negatif::before{
  content:"";position:absolute;top:-25%;right:-8%;
  width:min(46vw,34rem);aspect-ratio:1/1;
  background:var(--indigo);opacity:.32;
  animation:derive 22s var(--courbe) infinite alternate;
}
.negatif .env{position:relative;z-index:1}
.negatif h2{
  color:var(--papier);
  font-size:clamp(2rem,5.6vw,4.6rem);
  max-width:17ch;
}
.negatif__deux{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:2rem;
}
.negatif__deux h3{font-size:1.25rem;color:var(--menthe);margin-bottom:.7rem}
.negatif p{color:var(--ligne-claire)}
.negatif ul{list-style:none;padding:0}
.negatif li{
  padding:.7rem 0 .7rem 1.7rem;position:relative;
  border-bottom:1px solid var(--ligne-claire);
  color:var(--ligne-claire);
}
.negatif li::before{
  content:"";position:absolute;left:0;top:1.15rem;
  width:.7rem;height:.7rem;background:var(--abricot);
}

/* --- Infos pratiques + image en débord ---------------------------------- */

.pratique{position:relative;overflow:hidden}
.pratique__grille{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
}
.pratique__debord{
  margin-right:calc(var(--marge) * -1 - 6vw);
  position:relative;
}
.pratique__debord img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  filter:saturate(.82) contrast(1.04);
}
.pratique__debord::before{
  content:"";position:absolute;left:-1.2rem;bottom:-1.2rem;
  width:38%;height:42%;background:var(--abricot);z-index:-1;
}
.horaires{
  list-style:none;margin:1.2rem 0 1.8rem;padding:0;
  border-top:2px solid var(--encre);
}
.horaires li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.7rem 0;margin:0;
  border-bottom:1px solid var(--ligne);
}
.horaires b{font-weight:700}
.horaires span{color:var(--encre-moyen);text-align:right}
.adresse-bloc{
  background:var(--menthe);color:var(--encre);
  padding:1.3rem 1.5rem;margin-bottom:1.5rem;
}
.adresse-bloc p{margin:0;font-size:1.0625rem}
.adresse-bloc b{display:block;font-family:var(--police-titres);font-size:1.25rem;margin-bottom:.35rem}

/* --- Contact ------------------------------------------------------------ */

.contact__grille{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
}
.formulaire{display:grid;gap:1.1rem}
.champ{display:grid;gap:.4rem}
.champ label{font-weight:700;font-size:1rem;letter-spacing:.04em}
.champ label{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.champ input,.champ select,.champ textarea{
  font-family:var(--police-courante);font-size:1rem;
  min-height:52px;padding:.8rem 1rem;
  background:var(--papier);color:var(--encre);
  border:2px solid var(--encre);border-radius:0;
  transition:border-color var(--duree) var(--courbe),
             background var(--duree) var(--courbe),
             box-shadow var(--duree) var(--courbe);
}
.champ textarea{min-height:9rem;resize:vertical;line-height:1.55}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:0;border-color:var(--indigo);
  background:var(--indigo-pale);
  box-shadow:inset 0 -4px 0 var(--indigo);
}
.champ--duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.aide{font-size:1rem;color:var(--encre-moyen);margin:0;line-height:1.9}
.aide a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

/* --- Pied de page ------------------------------------------------------- */

.pd{background:var(--encre);color:var(--papier);padding-block:clamp(2.5rem,5vw,4rem) 2rem}
.pd a{color:var(--menthe);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--duree) var(--courbe),border-color var(--duree) var(--courbe)}
.pd a:hover,.pd a:focus-visible{color:var(--abricot);border-color:var(--abricot)}
.pd__grille{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
.pd h2,.pd h3{
  font-family:var(--police-courante);
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--menthe);margin-bottom:.9rem;
}
.pd ul{list-style:none;margin:0;padding:0}
.pd li{margin-bottom:.15rem}
.pd__grille li a{display:inline-flex;align-items:center;min-height:44px}
.pd p{color:var(--ligne-claire);font-size:1rem}
.pd .logo{color:var(--papier);margin-bottom:1rem}
.pd__bas{
  margin-top:2.5rem;padding-top:1.4rem;
  border-top:1px solid var(--ligne-claire);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;
  font-size:1rem;color:var(--ligne-claire);
}
.pd__legaux{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-left:auto;list-style:none;padding:0}
.pd__legaux li{margin:0}
.pd__legaux a{display:inline-flex;align-items:center;min-height:44px}
.pd__legaux a{min-width:44px;justify-content:center}

/* --- Apparition au défilement ------------------------------------------- */

.rv{
  opacity:0;transform:translateY(24px);
  transition:opacity var(--duree-longue) var(--courbe),transform var(--duree-longue) var(--courbe);
}
.rv.vu{opacity:1;transform:none}
.rv--1{transition-delay:.08s}
.rv--2{transition-delay:.16s}
.rv--3{transition-delay:.24s}
.rv--4{transition-delay:.32s}

/* --- Animations --------------------------------------------------------- */

@keyframes apparait{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}
@keyframes regle{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes battement{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.5);opacity:.55}
}
@keyframes derive{
  from{transform:translate3d(0,0,0) rotate(0deg)}
  to{transform:translate3d(-1.4rem,1.1rem,0) rotate(6deg)}
}
@keyframes glisse-bandeau{
  from{opacity:0;transform:translateX(-18px)}
  to{opacity:1;transform:none}
}
@keyframes souligne{
  from{background-size:0 6px}
  to{background-size:100% 6px}
}

/* Le trait qui se trace sous un mot : il souligne, il ne barre jamais le texte. */
.souligne{
  background-image:linear-gradient(var(--abricot),var(--abricot));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 6px;
  padding-bottom:.12em;
}
.vu .souligne,.souligne.vu{animation:souligne .9s .3s var(--courbe) forwards}

.haut__titre{animation:apparait .8s var(--courbe) both}
.haut__accroche{animation:apparait .8s .12s var(--courbe) both}
.bandeau-prix{animation:glisse-bandeau .8s .22s var(--courbe) both}
.haut__boutons{animation:apparait .8s .32s var(--courbe) both}

/* --- Repli visible si une image manque ---------------------------------- */

figure img,.haut__macro img,.pratique__debord img{
  background-color:var(--encre-doux);
  background-image:repeating-linear-gradient(135deg,var(--ligne) 0 8px,transparent 8px 16px);
}

/* --- Adaptations -------------------------------------------------------- */

@media (max-width:1180px){
  .essentiel__grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 0}
  .essentiel__case:nth-child(3){border-left:0;padding-left:0}
  .pd__grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:980px){
  .nav-p{display:none}
  .nav-p.ouvert{
    display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--papier);border-bottom:2px solid var(--encre);
    padding:.5rem var(--marge) 1.2rem;
  }
  .nav-p.ouvert ul{flex-direction:column;gap:0}
  .nav-p.ouvert li{border-bottom:1px solid var(--ligne)}
  .nav-p.ouvert a{width:100%;min-height:52px;font-size:1.0625rem}
  .bouton-menu{display:inline-flex}
  /* Sous 980 px, l'appel à l'action de l'en-tête cède la place au menu :
     le téléphone reste visible juste au-dessus, dans le bandeau d'informations. */
  .hd__action .btn{display:none}
  .hd__barre{position:relative}
  .haut__grille{grid-template-columns:minmax(0,1fr)}
  .haut__macro{max-width:32rem}
  .chemin{grid-template-columns:clamp(3.5rem,10vw,5rem) minmax(0,1fr)}
  .chemin__reponse{grid-column:1 / -1}
  .diptyque{grid-template-columns:minmax(0,1fr)}
  .diptyque__image img{min-height:16rem}
  .negatif__deux{grid-template-columns:minmax(0,1fr)}
  .pratique__grille{grid-template-columns:minmax(0,1fr)}
  .pratique__debord{margin-right:calc(var(--marge) * -1)}
  .contact__grille{grid-template-columns:minmax(0,1fr)}
  .rayon__age{position:static}
}

@media (max-width:760px){
  .hd__info .env{gap:.3rem .9rem}
  .hd__tel{margin-left:0;width:100%}
  .rayon{grid-template-columns:minmax(0,1fr);gap:1rem}
  .rayon__jeux li{grid-template-columns:minmax(0,1fr);gap:.35rem}
  .rayon__jeux .prix{font-size:1.25rem}
  .dispo{justify-self:start}
  .essentiel__grille{grid-template-columns:minmax(0,1fr)}
  .essentiel__case{border-left:0;padding-left:0;padding-block:.9rem;border-top:2px solid var(--encre)}
  .essentiel__case:first-child{border-top:0}
  .bandeau-prix > div{border-right:0;border-bottom:1px solid var(--ligne-claire);flex:1 1 100%}
  .bandeau-prix > div:last-child{border-bottom:0}
  .champ--duo{grid-template-columns:minmax(0,1fr)}
  .pd__grille{grid-template-columns:minmax(0,1fr)}
  .pd__legaux{margin-left:0}
  .horaires li{flex-direction:column;gap:.15rem}
  .horaires span{text-align:left}
}

@media (max-width:380px){
  :root{--marge:1rem}
  .haut__titre{font-size:2.55rem}
  .logo{font-size:1.2rem;gap:.3rem}
  .hd__barre .env{gap:.7rem}
  .bouton-menu{padding:.6rem .85rem;letter-spacing:.07em}
  .chemin__reponse{padding:1rem}
}

/* --- Mouvement réduit ---------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{opacity:1;transform:none}
}