@charset "ISO-8859-15";
/* ==========================================================================
   SPORT 2000 VOIRON  -  feuille de style du site
   --------------------------------------------------------------------------
   FICHIER GÉNÉRÉ  -  ne pas modifier à la main.
   Source    : public/maquette/sport2000-voiron/assets/style.css (maquette
               validée par le client) + le bloc « INTÉGRATION CMS » ci-dessous,
               tenu dans cms-src/gen_css.py.
   Regénérer : python3 /var/www/sites/gozzisport/cms-src/gen_css.py
               puis python3 deploy.py css

   Retiré de la maquette : le bandeau « Maquette », les encadrés de travail et
   le sélecteur de typographie  -  outils de présentation, sans objet ici.
   ========================================================================== */
/* ==========================================================================
   SPORT 2000 VOIRON  -  maquette de présentation · WMC Solutions
   --------------------------------------------------------------------------
   Charte : relevée sur les logos officiels des deux enseignes.
     Sport 2000 -> #E60005 / #000000 / #FFFFFF
     Mondovélo  -> #D3001B / #1B343D / #FFFFFF
   Forme signature : la PASTILLE. Les deux logos sont des disques bicolores ;
   le rond et la coupe horizontale rouge/noir structurent toute la page.
   Typographie : Signika (titres) + Open Sans (texte), charte de Sport 2000
   national, retenue par le client le 07/08/2026 et hébergée en local.
   ========================================================================== */

/* 1. FONTES ----------------------------------------------------------------
   Charte typographique retenue par le client : celle de Sport 2000 national.
   Signika (titres) + Open Sans (texte), relevées sur sport2000.fr.
   Hébergées en local : aucun appel à fonts.googleapis.com, donc aucune adresse
   IP de visiteur transmise à Google (position CNIL).
   Signika n'a pas d'italique et plafonne à 700 : les titres sont en romain 700.
   -------------------------------------------------------------------------- */
@font-face { font-family: Signika; src: url("s2000/fonts/signika-400.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Signika; src: url("s2000/fonts/signika-500.woff2") format("woff2");
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Signika; src: url("s2000/fonts/signika-600.woff2") format("woff2");
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Signika; src: url("s2000/fonts/signika-700.woff2") format("woff2");
             font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "Open Sans"; src: url("s2000/fonts/opensans-400.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("s2000/fonts/opensans-600.woff2") format("woff2");
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("s2000/fonts/opensans-700.woff2") format("woff2");
             font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("s2000/fonts/opensans-800.woff2") format("woff2");
             font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("s2000/fonts/opensans-400i.woff2") format("woff2");
             font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("s2000/fonts/opensans-700i.woff2") format("woff2");
             font-weight: 700; font-style: italic; font-display: swap; }

/* 2. JETONS ---------------------------------------------------------------- */
:root {
  --rouge:       #e60005;   /* rouge Sport 2000, relevé sur le logo */
  --rouge-vif:   #ff1a20;   /* survols sur fond sombre */
  --rouge-texte: #c40004;   /* rouge lisible sur blanc (AA) */
  --noir:        #000000;   /* le noir du logo Sport 2000 */
  --encre:       #101619;   /* noir de travail, légèrement bleuté */
  --ardoise:     #1b343d;   /* anthracite Mondovélo */
  --blanc:       #ffffff;
  --brume:       #f3f4f5;   /* gris froid très clair */
  --trait:       #e2e4e6;
  --fumee:       #6d757a;   /* texte secondaire */
  --fumee-clair: #98a3a9;   /* texte secondaire sur fond sombre */

  --f-titre: Signika, "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  --f-texte: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f: var(--f-texte);

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-md:   1.0625rem;
  --t-lg:   1.375rem;
  --t-xl:   2rem;
  --t-2xl:  2.875rem;
  --t-3xl:  4.25rem;

  --page: 1280px;
  --gout: 28px;

  --ombre: 0 18px 48px rgba(0, 0, 0, .16);
}

/* 3. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-texte);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

/* tout ce qui relève du titrage suit --f-titre ; le reste hérite de --f-texte */
h1, h2, h3, h4,
.display, .btn, .oeil, .logo__lieu, .section__titre, .marques__titre,
.newsletter__titre, .enseigne__nom, .enseigne__type, .univers__nom,
.article__titre, .article__rubrique, .vignette__suite, .navigation-univers__nom,
.nav-principale a, .nav-principale .nav-apercu, .pastille, .champ label,
.encadre h3, .pied h4, .catalogue__nom, .rayon {
  font-family: var(--f-titre);
}

h1, h2, h3, h4 { margin: 0; line-height: 1; text-wrap: balance; }
p { margin: 0; }
img, svg { max-width: 100%; }
a { color: var(--rouge-texte); text-underline-offset: 3px; }

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

.conteneur { width: min(100% - (var(--gout) * 2), var(--page)); margin-inline: auto; }

.saut-contenu {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--rouge); color: #fff; padding: 12px 20px; font-weight: 700;
}
.saut-contenu:focus { left: 12px; top: 12px; }

/*  -  display : le geste typographique de la maquette  -  */
.display {
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: .94;
}

.oeil {                              /* surtitre */
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--rouge-texte);
}
.oeil::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.oeil--clair { color: #fff; }
.oeil--rouge-sur-sombre { color: var(--rouge-vif); }

.chapeau { font-size: var(--t-md); color: var(--fumee); max-width: 88ch; }
/* dans un bandeau ou une colonne, on garde une ligne de lecture courte */
.titre-page .chapeau, .hero .chapeau, .colonnes .chapeau { max-width: 62ch; }
.chapeau--clair { color: var(--fumee-clair); }
.mention { font-size: var(--t-sm); color: var(--fumee); }
.mention--clair { color: var(--fumee-clair); }

/*  -  boutons : pastille, comme les logos  -  */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border: 2px solid transparent; border-radius: 999px;
  font-family: var(--f); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--rouge  { background: var(--rouge); color: #fff; }
.btn--rouge:hover  { background: var(--noir); }
.btn--noir   { background: var(--encre); color: #fff; }
.btn--noir:hover   { background: var(--rouge); }
.btn--blanc  { background: #fff; color: var(--encre); }
.btn--blanc:hover  { background: var(--rouge); color: #fff; }
.btn--ligne  { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn--ligne:hover  { background: var(--encre); color: #fff; }
.btn--ligne-claire { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ligne-claire:hover { background: #fff; color: var(--encre); }

/* 3 bis. BARRE D'ESSAI TYPOGRAPHIQUE ---------------------------------------
   Outil de validation client, pas un élément du site : la mettre hors service
   via SELECTEUR_POLICE dans build.py une fois la police arrêtée.            */




/* Repliée, la barre laisse une languette pleine largeur : elle reste là où
   l'utilisateur vient de cliquer, et non dans un coin de l'écran. */

.barre-service .conteneur {
  display: flex; align-items: center; gap: 30px; min-height: 40px; flex-wrap: wrap;
}
.barre-service span { display: inline-flex; align-items: center; gap: 8px; }
.barre-service svg { width: 14px; height: 14px; flex: none; fill: var(--rouge-vif); }
.barre-service .fin { margin-left: auto; color: #b9c1c5; }

.entete { background: #fff; }
.entete .conteneur {
  display: flex; align-items: center; gap: 30px; padding: 20px 0; flex-wrap: wrap;
}

.logo { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; }
.logo img { width: 62px; height: 62px; display: block; }
.logo__lieu {
  font-family: var(--f); font-size: 1.5rem; font-weight: 700; font-style: italic;
  letter-spacing: -0.03em; text-transform: uppercase; color: var(--encre); line-height: 1;
}
.logo__sous { display: block; font-size: var(--t-xs); font-weight: 700; font-style: normal;
  letter-spacing: .24em; color: var(--fumee); margin-top: 5px; }

/* les enseignes, en pastilles */
.enseignes-entete { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pastille {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 18px 7px 7px; border: 1px solid var(--trait); border-radius: 999px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; color: var(--encre); background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pastille img { width: 30px; height: 30px; display: block; border-radius: 999px; }
.pastille__rond {
  width: 30px; height: 30px; border-radius: 999px; display: block; flex: none;
  background: var(--rouge);
}
/* pastille portant un logo d'enseigne en largeur (Team Sport 2000), sans libellé */
.pastille--logo { padding: 4px 18px 4px 4px; }   /* même hauteur que les autres */
.pastille .pastille__logo { width: auto; height: 36px; border-radius: 0; }
.pastille:hover { border-color: var(--encre); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.pastille[aria-current="true"] { border-color: var(--encre); }

/* 6. NAVIGATION ------------------------------------------------------------ */
.nav-principale { background: var(--encre); position: sticky; top: 0; z-index: 40; }
.nav-principale .conteneur { display: flex; align-items: stretch; flex-wrap: wrap; }
.nav-principale ul { display: flex; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav-principale a,
.nav-principale .nav-apercu {
  display: flex; align-items: center; height: 100%; padding: 17px 14px;
  font-size: var(--t-sm); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 3px solid transparent;
}
.nav-principale a { color: #fff; transition: color .18s ease, border-color .18s ease; }
.nav-principale a:hover { color: var(--rouge-vif); }
.nav-principale a[aria-current="page"] { border-bottom-color: var(--rouge); }
.nav-principale .nav-apercu { color: #59646a; cursor: default; }

/* Recherche repliée en icône : le menu compte neuf entrées, le champ ouvert
   en permanence les faisait passer à la ligne. */
.nav-recherche { display: flex; align-items: center; margin-left: auto; padding: 10px 0 10px 10px; }
.nav-recherche input {
  width: 0; padding: 9px 0; border: 1px solid transparent; border-right: none;
  border-radius: 999px 0 0 999px; background: #1a2226; color: #fff;
  font: inherit; font-size: var(--t-sm);
  transition: width .25s ease, padding .25s ease;
}
.nav-recherche[data-ouverte] input {
  width: 170px; padding: 9px 16px; border-color: #2c3539;
}
.nav-recherche input::placeholder { color: #6d787e; }
.nav-recherche button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 38px; padding: 0; border: none; flex: none;
  border-radius: 999px; background: transparent; cursor: pointer;
  transition: background-color .18s ease;
}
.nav-recherche[data-ouverte] button { border-radius: 0 999px 999px 0; background: var(--rouge); }
.nav-recherche button svg { width: 17px; height: 17px; fill: #fff; }
.nav-recherche button:hover { background: var(--rouge); }
.nav-recherche[data-ouverte] button:hover { background: #fff; }
.nav-recherche[data-ouverte] button:hover svg { fill: var(--encre); }

/* bouton menu  -  n'apparaît qu'en dessous de 940 px */
.nav-burger {
  display: none; align-items: center; gap: 12px;
  padding: 16px 0; border: none; background: none; color: #fff;
  font-family: var(--f); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.nav-burger__traits { position: relative; width: 22px; height: 2px; background: var(--rouge); }
.nav-burger__traits::before, .nav-burger__traits::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--rouge);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-burger__traits::before { top: -7px; }
.nav-burger__traits::after  { top: 7px; }
.nav-burger[aria-expanded="true"] .nav-burger__traits { background: transparent; }
.nav-burger[aria-expanded="true"] .nav-burger__traits::before { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger__traits::after  { transform: translateY(-7px) rotate(-45deg); }

/* 7. HERO ------------------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  color: #fff; padding: 104px 0 96px;
  background-color: var(--encre);
  background-image:
    linear-gradient(96deg, rgba(16,22,25,.96) 0%, rgba(16,22,25,.86) 40%,
                    rgba(16,22,25,.5) 70%, rgba(16,22,25,.34) 100%),
    url("s2000/hero.jpg");
  background-size: cover;
  background-position: center 62%;
}
.hero::before {                       /* la pastille : quart de disque, coupé par le bord */
  content: ""; position: absolute; top: -235px; right: -105px;
  width: 440px; height: 440px; border-radius: 999px;
  background: var(--rouge); opacity: .93;
  pointer-events: none;
}
.hero::after {                        /* anneau concentrique, rappel du logo Mondovélo */
  content: ""; position: absolute; top: -300px; right: -170px;
  width: 620px; height: 620px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  pointer-events: none;
}
.hero .conteneur { position: relative; z-index: 1; }
.hero__intro { max-width: 60%; }
.hero h1 { font-size: var(--t-3xl); margin: 20px 0 22px; }
.hero h1 em { font-style: italic; color: var(--rouge-vif); }

/* triptyque des trois enseignes */
.enseignes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.enseigne {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 0 30px 28px; text-decoration: none; color: #fff; overflow: hidden;
  background: #191f23;                /* opaque : les cartes passent devant le disque */
  border: 1px solid #2b3439;
  transition: background-color .22s ease, border-color .22s ease, transform .22s ease;
}
.enseigne__photo {
  display: block; width: 100%; height: 172px;
  object-fit: cover; filter: saturate(.94);
  transition: transform .5s ease;
}
.enseigne:hover .enseigne__photo { transform: scale(1.05); }
.enseigne__media {
  position: relative; overflow: hidden;
  width: calc(100% + 60px); margin: 0 -30px -30px;   /* pleine largeur de carte */
}
.enseigne__media::after {             /* fondu vers le fond de la carte */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(25,31,35,0) 46%, #191f23 100%);
}
.enseigne::after {                    /* filet rouge qui se déploie en pied de carte */
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--rouge); transition: width .3s ease;
}
.enseigne:hover {
  background: #1f272c; border-color: #465257;
  transform: translateY(-4px);
}
.enseigne:hover::after { width: 100%; }
.enseigne__logo {
  position: relative; z-index: 2;
  width: 68px; height: 68px; border-radius: 999px; display: block; margin-bottom: 6px;
  box-shadow: 0 0 0 4px #191f23;      /* détache le logo de la photo */
}
.enseigne__logo--large {              /* logo en largeur, posé sur une pastille blanche */
  align-self: flex-start; width: auto; height: 68px; padding: 12px 20px; background: #fff;
}
.enseigne__logo--vide {
  display: flex; align-items: center; justify-content: center;
  background: var(--rouge); color: #fff;
  font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-align: center;
  line-height: 1.1; padding: 8px;
}
.enseigne__type {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--rouge-vif);
}
.enseigne__nom { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.02em;
  text-transform: uppercase; }
.enseigne__desc { font-size: var(--t-sm); color: var(--fumee-clair); }
.enseigne__lien {
  margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.enseigne__lien svg { width: 15px; height: 15px; fill: var(--rouge-vif); transition: transform .22s ease; }
.enseigne:hover .enseigne__lien svg { transform: translateX(5px); }

/* 7 bis. À LA UNE  -  promos, opérations flash, nouveautés ------------------- */
.section-alaune { padding: 66px 0 56px; }   /* le bandeau rouge suit sans marge */
.section-alaune__entete {
  display: grid; grid-template-columns: auto 1fr; gap: 40px;
  align-items: end; margin-bottom: 30px;
}
.section-alaune .oeil svg {
  width: 15px; height: 15px; fill: currentColor; stroke: none;
}

.alaunes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.alaune {
  display: flex; flex-direction: column;
  border: 1px solid var(--trait); background: #fff; overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.alaune:hover { border-color: var(--encre); transform: translateY(-3px); box-shadow: var(--ombre); }
.alaune__media { position: relative; display: block; overflow: hidden; }
.alaune__media img {
  display: block; width: 100%; height: 172px; object-fit: cover;
  transition: transform .5s ease;
}
.alaune:hover .alaune__media img { transform: scale(1.06); }
.alaune__badge {
  position: absolute; top: 12px; left: 12px;
  padding: 6px 13px; border-radius: 999px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; background: var(--encre);
}
.alaune__badge--flash { background: var(--rouge); }
.alaune__badge--promo { background: var(--rouge); }
.alaune__badge--nouveauté, .alaune__badge--nouveaute { background: var(--ardoise); }
.alaune__badge--bon-plan { background: var(--encre); }
.alaune__remise {
  position: absolute; right: 12px; bottom: 12px;
  padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--rouge-texte);
  font-size: var(--t-sm); font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.alaune__corps { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; }
.alaune__titre { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.01em; }
.alaune__texte { font-size: var(--t-sm); color: var(--fumee); }
.alaune__periode {
  margin-top: auto; padding-top: 12px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rouge-texte);
}

/* 7 ter. POURQUOI VENIR CHEZ NOUS ------------------------------------------ */
.section-engagements {
  position: relative; margin-top: 72px; padding: 72px 0 76px;
  background: var(--encre); color: #fff; overflow: hidden;
}
.section-engagements::after {
  content: ""; position: absolute; top: -160px; right: -140px;
  width: 420px; height: 420px; border-radius: 999px;
  border: 42px solid var(--rouge); opacity: .5; pointer-events: none;
}
.section-engagements .conteneur { position: relative; z-index: 1; }
.section-engagements__entete { max-width: 60ch; margin-bottom: 46px; }
.section-engagements__titre { font-size: var(--t-2xl); margin: 14px 0 16px; }

.engagements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 34px; }
.engagement { display: grid; gap: 12px; align-content: start; }
.engagement__medaillon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--rouge);
}
.engagement__medaillon svg {
  width: 26px; height: 26px; stroke: #fff; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.engagement__titre { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.01em; }
.engagement__texte { font-size: var(--t-sm); color: var(--fumee-clair); }

/* 7 quater. PREUVE SOCIALE ------------------------------------------------- */
.section-preuve { padding: 18px 0 4px; }   /* le bandeau de marques précède */
.chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--trait); border: 1px solid var(--trait); margin-bottom: 62px;
}
.chiffre {
  display: grid; gap: 6px; padding: 30px 26px; background: #fff; text-align: center;
}
.chiffre__valeur {
  font-family: var(--f-titre); font-size: 2.75rem; font-weight: 700;
  font-style: italic; letter-spacing: -0.04em; line-height: 1; color: var(--rouge);
}
.chiffre__unite {
  font-size: 1.125rem; font-style: normal; letter-spacing: 0;
  color: var(--encre); margin-left: 5px;
}
.chiffre__libelle { font-size: var(--t-sm); color: var(--fumee); }

.section-preuve__entete { margin-bottom: 28px; }
.avis-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.avis {
  display: grid; gap: 14px; align-content: start; margin: 0;
  padding: 30px 28px; background: var(--brume); border-top: 4px solid var(--rouge);
}
.avis__etoiles { display: flex; gap: 3px; }
.avis__etoiles svg { width: 17px; height: 17px; fill: var(--rouge); stroke: none; }
.avis__texte { font-size: var(--t-sm); color: var(--encre); line-height: 1.7; }
.avis__auteur {
  display: grid; gap: 3px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.avis__contexte {
  font-weight: 700; letter-spacing: .06em; color: var(--fumee); text-transform: none;
}

/* 8. BANDEAU DE SECTION ---------------------------------------------------- */
.bandeau { position: relative; background: var(--rouge); color: #fff; padding: 30px 0; overflow: hidden; }
.bandeau .conteneur { position: relative; z-index: 1; display: flex; align-items: baseline;
  gap: 20px; flex-wrap: wrap; }
.bandeau h2 { font-size: var(--t-xl); }
.bandeau p { font-size: var(--t-sm); color: rgba(255,255,255,.82); }
.bandeau::after {                     /* trois disques évidés, à droite */
  content: ""; position: absolute; top: 50%; right: -60px; width: 300px; height: 300px;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 20% 50%, transparent 44px, rgba(255,255,255,.16) 45px, transparent 47px),
    radial-gradient(circle at 50% 50%, transparent 44px, rgba(255,255,255,.16) 45px, transparent 47px),
    radial-gradient(circle at 80% 50%, transparent 44px, rgba(255,255,255,.16) 45px, transparent 47px);
  pointer-events: none;
}
.bandeau--noir { background: var(--encre); }

/* 9. GRILLE DES UNIVERS ---------------------------------------------------- */
.zone-sombre { background: var(--encre); color: #fff; padding: 52px 0 64px; }
.zone-sombre .mention { color: var(--fumee-clair); }

.grille-univers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.univers {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 232px; padding: 22px; text-decoration: none; color: #fff; overflow: hidden;
  background: #171f23;
}
.univers__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .55s ease;
}
.univers::before {                    /* voile de lisibilité */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(178deg, rgba(11,15,17,.15) 0%,
              rgba(11,15,17,.62) 52%, rgba(11,15,17,.94) 100%);
}
.univers::after {                     /* filet rouge, révélé au survol */
  content: ""; position: absolute; left: 0; bottom: 0; z-index: 2;
  height: 4px; width: 0; background: var(--rouge); transition: width .32s ease;
}
.univers:hover .univers__photo { transform: scale(1.07); }
.univers:hover::after { width: 100%; }
.univers__nom {
  position: relative; z-index: 2;
  font-size: var(--t-md); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15;
}
.univers__compte {
  position: relative; z-index: 2; margin-top: 7px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #b8c0c5;
}
/* la tuile de synthèse reste un aplat rouge, sans photo */
.univers--tous { background: var(--rouge); justify-content: space-between; }
.univers--tous::before, .univers--tous::after { content: none; }
.univers--tous .univers__compte { color: #ffffffcc; }
.univers__medaillon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 54px; height: 54px; border-radius: 999px;
  background: #ffffff26; border: 1px solid #ffffff4d;
  transition: background-color .22s ease;
}
.univers__medaillon svg {
  width: 25px; height: 25px; stroke: #fff; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.univers--tous:hover .univers__medaillon { background: #fff; }
.univers--tous:hover .univers__medaillon svg { stroke: var(--rouge); }

/* 10. BANDEAU DE MARQUES --------------------------------------------------- */
.marques { padding: 62px 0 58px; background: var(--blanc); }
.marques__entete { margin-bottom: 34px; }
.marques__titre {
  margin-top: 12px;
  font-size: var(--t-xl); font-weight: 700; font-style: italic;
  letter-spacing: -0.025em; text-transform: uppercase;
}
.marques__logos {
  display: grid; grid-template-columns: repeat(8, 1fr);
  align-items: center; gap: 1px;
  background: var(--trait); border: 1px solid var(--trait);
}
.marque {
  display: flex; align-items: center; justify-content: center;
  height: 116px; padding: 0 16px; background: #fff;
}
.marque svg {
  width: 100%; max-width: 118px; max-height: 46px;
  fill: #868e93;                      /* gris neutre : un seul niveau pour tous */
  transition: fill .2s ease, transform .2s ease;
}
.marque:hover svg { fill: var(--encre); transform: scale(1.07); }

/* 11. NEWSLETTER ----------------------------------------------------------- */
.newsletter {
  position: relative; display: flex; align-items: center; gap: 34px;
  padding: 38px 40px; background: var(--ardoise); color: #fff;
  flex-wrap: wrap; overflow: hidden;
}
.newsletter::after {
  content: ""; position: absolute; right: -70px; top: -70px;
  width: 260px; height: 260px; border-radius: 999px;
  border: 40px solid rgba(255, 255, 255, .04); pointer-events: none;
}
.newsletter > * { position: relative; z-index: 1; }
.newsletter__titre { font-size: var(--t-xl); font-weight: 700; font-style: italic;
  text-transform: uppercase; letter-spacing: -0.025em; margin: 8px 0 6px; }
.newsletter form { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; }
.newsletter input {
  width: 290px; padding: 15px 22px; border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px; background: rgba(255,255,255,.07); color: #fff; font: inherit;
}
.newsletter input::placeholder { color: #9aa8ae; }

/* 12. PAIRE DE CARTES ------------------------------------------------------ */
.paire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.carte {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 40px; overflow: hidden;
}
.carte h3 { font-size: var(--t-xl); font-weight: 700; font-style: italic;
  text-transform: uppercase; letter-spacing: -0.025em; }
.carte .btn { align-self: flex-start; margin-top: 6px; }
.carte::after {                        /* pastille en filigrane */
  content: ""; position: absolute; right: -80px; bottom: -90px;
  width: 240px; height: 240px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); pointer-events: none;
}
.carte--rouge { background: var(--rouge); color: #fff; }
.carte--rouge p { color: rgba(255,255,255,.88); }
.carte--noire { background: var(--encre); color: #fff; }
.carte--noire p { color: var(--fumee-clair); }

/* 13. PAGES INTÉRIEURES ---------------------------------------------------- */
.fil { padding: 15px 0; font-size: var(--t-xs); color: var(--fumee); letter-spacing: .04em; }
.fil a { color: var(--fumee); text-decoration: none; }
.fil a:hover { color: var(--rouge-texte); }
.fil span { margin: 0 9px; opacity: .45; }

.titre-page {
  position: relative; padding: 62px 0 58px; background: var(--encre);
  color: #fff; overflow: hidden;
}
.titre-page::after {          /* anneau  -  variante allégée du disque du hero */
  content: ""; position: absolute; top: 50%; right: -110px; transform: translateY(-50%);
  width: 400px; height: 400px; border-radius: 999px;
  border: 46px solid var(--rouge); pointer-events: none;
}
.titre-page::before {         /* second anneau, plus discret */
  content: ""; position: absolute; top: 50%; right: -210px; transform: translateY(-50%);
  width: 600px; height: 600px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14); pointer-events: none;
}
.titre-page .conteneur { position: relative; z-index: 1; }
.titre-page h1 { font-size: var(--t-2xl); margin: 16px 0 16px; }

/* bandeau de titre avec photo  -  pages de rubrique */
.titre-page--photo { background: var(--noir); }
.titre-page--photo::before { content: none; }
.titre-page__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.titre-page--photo::after {               /* voile de lisibilité, pleine largeur */
  content: ""; position: absolute; inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  width: auto; height: auto; transform: none;
  border: none; border-radius: 0;
  background: linear-gradient(92deg, rgba(9,12,14,.93) 0%, rgba(9,12,14,.78) 44%,
              rgba(9,12,14,.42) 78%, rgba(9,12,14,.3) 100%);
  pointer-events: none;
}

/* liste des rayons d'un univers */
.rayons {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 1px; margin-top: 26px; background: #fff;   /* pas de case grise en fin de ligne */
  border: 1px solid var(--trait);
}
.rayon {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 19px 22px; background: #fff; color: var(--encre);
  text-decoration: none; font-weight: 700; font-size: var(--t-sm);
  box-shadow: 0 0 0 1px var(--trait);             /* filet sans occuper d'espace */
  transition: background-color .18s ease, color .18s ease;
}
.rayon::after { content: "\2192"; color: var(--rouge); font-weight: 700; transition: transform .18s ease; }
.rayon:hover { background: var(--encre); color: #fff; }
.rayon:hover::after { color: var(--rouge-vif); transform: translateX(4px); }

/* navigation entre univers */
.navigation-univers {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px;
  margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--trait);
  align-items: center;
}
.navigation-univers__lien {
  display: grid; gap: 5px; padding: 16px 20px; text-decoration: none;
  color: var(--encre); border: 1px solid var(--trait);
  transition: border-color .18s ease, background-color .18s ease;
}
.navigation-univers__lien:hover { border-color: var(--encre); background: var(--brume); }
.navigation-univers__sens {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rouge-texte);
}
.navigation-univers__nom { font-weight: 700; font-size: var(--t-md); }
.navigation-univers__lien--fin { text-align: right; }
.navigation-univers__lien--tous {
  border: none; font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fumee); text-align: center;
}
.navigation-univers__lien--tous:hover { background: none; color: var(--encre); }

/* cartes d'article */
.articles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px;
}
.article {
  display: flex; flex-direction: column; gap: 10px; padding: 28px;
  background: #fff; border: 1px solid var(--trait); border-top: 4px solid var(--rouge);
  text-decoration: none; color: var(--encre);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.article:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.article__rubrique {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rouge-texte);
}
.article__date {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fumee);
}
.article__titre { font-size: var(--t-md); font-weight: 700; line-height: 1.2; }
.article__chapeau { font-size: var(--t-sm); color: var(--fumee); }
.article__suite {
  margin-top: auto; padding-top: 14px; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rouge-texte);
}
.article__meta {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fumee); margin-bottom: 4px;
}

.prose__btn { margin-top: 26px; }
.encadre__btn { margin-top: 22px; }

.section { margin-top: 72px; }
.section__titre { font-size: var(--t-xl); font-weight: 700; font-style: italic;
  text-transform: uppercase; letter-spacing: -0.025em; margin-bottom: 10px; }
.section-premiere { margin-top: 56px; }

.colonnes { display: grid; grid-template-columns: 1.65fr 1fr; gap: 60px;
  margin-top: 52px; align-items: start; }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: var(--t-lg); font-weight: 700; margin-top: 34px; }

/* Le corps de texte garde une seule couleur : le chapô se distingue par sa
   taille, pas par un gris plus clair, et les listes ne sont pas plus pâles
   que les paragraphes qui les entourent. */
.prose .chapeau { color: var(--encre); max-width: none; }
.prose ul {
  margin: 18px 0 0;          /* « margin:0 » annulait l'espacement du bloc */
  padding-left: 22px;
  color: inherit;
}
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--rouge); }

/* 14. VIGNETTES ------------------------------------------------------------ */
.vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.vignette {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 30px 28px; background: #fff; border: 1px solid var(--trait);
  text-decoration: none; color: var(--encre); overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.vignette__medaillon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 52px; height: 52px; border-radius: 999px; background: var(--brume);
  transition: background-color .2s ease;
}
.vignette__medaillon svg {
  width: 24px; height: 24px; stroke: var(--rouge); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.vignette h3 { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.01em; }
.vignette p { font-size: var(--t-sm); color: var(--fumee); }
.vignette__suite {
  margin-top: auto; padding-top: 14px; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rouge-texte);
}
.vignette:hover { border-color: var(--encre); transform: translateY(-3px); box-shadow: var(--ombre); }
.vignette:hover .vignette__medaillon { background: var(--rouge); }
.vignette:hover .vignette__medaillon svg { stroke: #fff; }


/* 14 bis. GABARITS COMPLEMENTAIRES ----------------------------------------- */

/* lien sous le bandeau de marques */
.marques__lien { margin-top: 20px; font-size: var(--t-sm); font-weight: 700; }
.marques__lien a { text-decoration: none; letter-spacing: .04em; text-transform: uppercase; }
.marques__lien a:hover { text-decoration: underline; }

/* la grille de marques en page dediee respire davantage */
.marques__logos--page { grid-template-columns: repeat(4, 1fr); margin-top: 26px; }
.marques__logos--page .marque { height: 168px; padding: 0 26px; }
.marques__logos--page .marque svg { max-width: 210px; max-height: 82px; }

/* prose pleine largeur : mentions legales */
.prose--large { max-width: none; margin-top: 0; }

/* puce de la branche Team Sport dans les listes */
.puce-team { width: 26px; height: 26px; display: inline-block; }

/* plan du site */
.plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 52px; }
.plan--duo { grid-template-columns: 1fr 1fr; margin-top: 44px; }
.plan section { border-top: 4px solid var(--rouge); padding-top: 20px; }
.plan h2 {
  font-size: var(--t-base); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 14px;
}
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: var(--t-sm); }
.plan ul ul { margin-top: 9px; padding-left: 16px; border-left: 1px solid var(--trait); }
.plan a { color: var(--encre); text-decoration: none; }
.plan a:hover { color: var(--rouge-texte); text-decoration: underline; }
.plan .mention { margin-top: 14px; }

/* formulaire integre a la colonne de texte (pages Team Sport) */
.bloc-formulaire { margin-top: 40px; }
.bloc-formulaire h2 {
  font-size: var(--t-lg); font-weight: 700; margin-bottom: 6px;
}
.bloc-formulaire .formulaire { max-width: none; }

/* sommaire d'ancres dans l'encadré latéral */
.sommaire { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
            font-size: var(--t-sm); }
.sommaire a { color: var(--encre); text-decoration: none; }
.sommaire a:hover { color: var(--rouge-texte); text-decoration: underline; }

/* 15. BLOCS DIVERS --------------------------------------------------------- */
.renvoi {
  display: flex; align-items: center; gap: 30px; margin-top: 40px;
  padding: 34px 38px; background: var(--brume); flex-wrap: wrap;
  border-left: 4px solid var(--rouge);
}
.renvoi__texte { flex: 1 1 340px; }
.renvoi h3 { font-size: var(--t-lg); font-weight: 700; margin-bottom: 8px; }
.renvoi p { color: var(--fumee); font-size: var(--t-sm); }
.renvoi--sombre { background: var(--encre); color: #fff; border-left-color: var(--rouge); }
.renvoi--sombre p { color: var(--fumee-clair); }

.encadre { padding: 30px; background: var(--brume); border-top: 4px solid var(--rouge); }
.encadre h3 { font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 16px; }
.encadre dl { margin: 0; display: grid; gap: 13px; font-size: var(--t-sm); }
.encadre dt { font-weight: 700; }
.encadre dd { margin: 0; color: var(--fumee); }
.encadre__note { margin-top: 20px; }
.encadre__separateur { height: 1px; background: var(--trait); margin: 26px 0 24px; }

.liste-enseignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  font-size: var(--t-sm); color: var(--fumee); }
.liste-enseignes li { display: flex; align-items: center; gap: 12px; }
.liste-enseignes img { width: 26px; height: 26px; border-radius: 999px; flex: none; }
.liste-enseignes__marque { display: inline-flex; flex: none; }
.liste-enseignes .liste-enseignes__marque img { width: auto; border-radius: 0; }

/* formulaire */
.formulaire { display: grid; gap: 20px; margin-top: 28px; max-width: 700px; }
.champ { display: grid; gap: 8px; }
.champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.champ label { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; }
.champ input, .champ select, .champ textarea {
  padding: 14px 18px; border: 1px solid var(--trait); border-radius: 4px;
  background: #fff; font: inherit; color: var(--encre);
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--encre); }

/* catalogues */
.catalogues { display: grid; gap: 1px; margin-top: 28px; background: var(--trait);
  border: 1px solid var(--trait); }
.catalogue { display: flex; align-items: center; gap: 20px; padding: 22px 26px; background: #fff; }
.catalogue__medaillon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 999px; background: var(--brume);
}
.catalogue__medaillon svg { width: 20px; height: 20px; stroke: var(--rouge); fill: none;
  stroke-width: 1.7; stroke-linejoin: round; }
.catalogue__nom { font-weight: 700; }
.catalogue__meta { margin-left: auto; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fumee); }

/* 16. PIED DE PAGE --------------------------------------------------------- */
.pied { background: var(--encre); color: #98a3a9; margin-top: 90px; }
.pied a { color: #c6cdd1; text-decoration: none; }
.pied a:hover { color: #fff; }
.pied__haut { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 44px;
  padding: 62px 0 48px; }
.pied h4 { font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #fff; margin-bottom: 20px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  font-size: var(--t-sm); }
.pied__logos { display: flex; align-items: center; gap: 12px; }
.pied__logos img { width: 46px; height: 46px; border-radius: 999px; }
.pied__logos .pied__logo-large { width: auto; border-radius: 0; }   /* Team Sport 2000, en largeur */
.pied__avis { margin: 18px 0 0; font-size: var(--t-sm); }
.pied__avis a { color: inherit; }
.pied__coord { margin-top: 20px; font-size: var(--t-sm); line-height: 1.8; }
.pied__plan li { color: #6f797f; }

.reseaux { display: flex; gap: 10px; margin-top: 22px; }
.reseaux a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid #2b3438;
  transition: background-color .18s ease, border-color .18s ease;
}
.reseaux svg { width: 24px; height: 24px; fill: #98a3a9; }
.reseaux a:hover { background: var(--rouge); border-color: var(--rouge); }
.reseaux a:hover svg { fill: #fff; }

.pied__bas { border-top: 1px solid #1e262a; padding: 22px 0 30px;
  display: flex; gap: 22px; flex-wrap: wrap; font-size: var(--t-xs); }
.pied__bas .fin { margin-left: auto; color: #5f696e; }

/* 19. RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 1180px) {
  :root { --t-3xl: 3.25rem; }
  .grille-univers { grid-template-columns: repeat(3, 1fr); }
  .pied__haut { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 940px) {
  :root { --t-2xl: 2.25rem; --t-3xl: 2.625rem; --t-xl: 1.625rem; }
  .enseignes { grid-template-columns: 1fr; }
  .vignettes, .articles, .alaunes { grid-template-columns: 1fr 1fr; }
  .plan { grid-template-columns: 1fr 1fr; }
  .marques__logos--page { grid-template-columns: repeat(3, 1fr); }
  .engagements { grid-template-columns: 1fr 1fr; gap: 26px; }
  .avis-liste { grid-template-columns: 1fr; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .section-alaune__entete { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .colonnes { grid-template-columns: 1fr; gap: 40px; }
  .navigation-univers { grid-template-columns: 1fr; }
  .navigation-univers__lien--fin { text-align: left; }
  .paire { grid-template-columns: 1fr; }

  /* En-tête compact sur mobile : la barre de service se réduit au téléphone
     (cliquable), le logo rétrécit, et les trois enseignes tiennent sur une
     seule ligne de pastilles. Sinon l'en-tête occupe la moitié de l'écran
     avant le contenu. */
  .barre-service { font-size: 12px; }
  .barre-service .conteneur { gap: 0; min-height: 0; padding: 6px 0; justify-content: center; }
  .barre-service span:first-child, .barre-service .fin { display: none; }
  .entete .conteneur { gap: 12px 14px; padding: 12px 0; justify-content: space-between; }
  .logo img { width: 46px; height: 46px; }
  .logo__lieu { font-size: 1.2rem; }
  .enseignes-entete { margin-left: 0; width: 100%; gap: 6px; flex-wrap: nowrap; }
  .pastille { flex: 1 1 0; min-width: 0; justify-content: center; gap: 6px;
    padding: 6px 8px; font-size: 10px; letter-spacing: .03em; }
  .pastille img, .pastille__rond { width: 22px; height: 22px; }
  .pastille--logo { padding: 3px 8px; }
  .pastille .pastille__logo { width: auto; height: 28px; min-width: 0; max-width: 100%; object-fit: contain; }

  /* menu replié derrière le bouton */
  .nav-principale .conteneur { flex-wrap: wrap; }
  .nav-burger { display: inline-flex; }
  .nav-principale ul { display: none; width: 100%; flex-direction: column;
    border-top: 1px solid #262f33; padding-bottom: 8px; }
  .nav-principale[data-ouvert] ul { display: flex; }
  .nav-principale ul li { border-bottom: 1px solid #1b2226; }
  .nav-principale a, .nav-principale .nav-apercu { padding: 14px 0; border-bottom: none; }
  .nav-principale a[aria-current="page"] { color: var(--rouge-vif); }
  .nav-recherche { margin-left: auto; padding-left: 0; }

  /* le disque du hero passerait sous le titre : on garde un anneau, plus discret */
  .hero { padding: 66px 0 60px; }
  /* l'anneau passe derrière le titre : on le recule en intensité pour garder
     le surtitre rouge lisible par-dessus. */
  .hero::before {
    width: 290px; height: 290px; top: -195px; right: -120px;
    background: transparent; border: 40px solid var(--rouge); opacity: .34;
  }
  .hero::after { width: 420px; height: 420px; top: -250px; right: -170px; }
  .hero__intro { max-width: none; }

  .titre-page { padding: 46px 0 42px; }
  .titre-page::after { width: 240px; height: 240px; right: -90px; border-width: 30px; }
  .titre-page::before { width: 340px; height: 340px; right: -140px; }
}

@media (max-width: 940px) {
  .marques__logos { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
  :root { --gout: 18px; --t-3xl: 2.25rem; }
  .marques { padding: 44px 0 40px; }
  .marques__logos { grid-template-columns: repeat(2, 1fr); }
  .marque { height: 78px; }
  .grille-univers { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .univers { padding: 18px 16px; gap: 10px; }
  .univers__medaillon { width: 46px; height: 46px; }
  .univers__medaillon svg { width: 22px; height: 22px; }
  .vignettes, .articles, .alaunes, .pied__haut { grid-template-columns: 1fr; }
  .plan, .plan--duo { grid-template-columns: 1fr; }
  .marques__logos--page { grid-template-columns: 1fr 1fr; }
  .engagements { grid-template-columns: 1fr; }
  .section-engagements { padding: 46px 0 50px; }
  .section-alaune, .section-preuve { padding-top: 44px; }
  .chiffre__valeur { font-size: 2.125rem; }
  .rayons { grid-template-columns: 1fr; }
  .champ--duo { grid-template-columns: 1fr; }
  .newsletter, .carte { padding: 28px 22px; }
  .newsletter form { margin-left: 0; width: 100%; }
  .newsletter input { width: 100%; }
  .barre-service .fin { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .enseigne:hover, .vignette:hover { transform: none; }
}

@media print {
  .nav-principale { position: static; }
}

/* 18bis. LARGEURS CONTRAINTES ----------------------------------------------
   Dans une grille ou un flex, un enfant garde min-width:auto : il ne descend
   pas sous la largeur de son contenu le plus large. Un bouton nowrap ou un
   champ de saisie suffit alors a faire deborder la page sur un petit ecran.
   Debordements mesures avant correction : page de rayon a 360 px, contact a
   420 px, catalogues a 320 px.
   -------------------------------------------------------------------------- */
.colonnes > *, .champ, .champ--duo > *, .catalogue,
.vignette, .article, .univers, .enseigne, .carte, .rayon { min-width: 0; }

/* Un champ prend la largeur de sa colonne, pas sa largeur intrinseque. */
.champ input, .champ select, .champ textarea { width: 100%; }

@media (max-width: 460px) {
  /* Sous cette largeur, un libelle de bouton doit pouvoir passer a la ligne
     plutot que d'elargir la page. */
  .btn { white-space: normal; text-align: center; }
  /* La ligne de catalogue se replie : la mention passe sous le titre. */
  .catalogue { flex-wrap: wrap; gap: 14px; padding: 20px; }
  .catalogue__meta { margin-left: 0; width: 100%; }
}


/* ==========================================================================
   INTÉGRATION CMS
   Ce que le gabarit de maquette n'avait pas à gérer : l'enrobage des
   paragraphes par le CMS, le formulaire du module MDL_FORMULAIRE, et les
   quelques éléments qui n'existent que parce que le contenu vient désormais
   de la base (photo d'article, logo de marque téléversé...).
   ========================================================================== */

/* 20. ENROBAGE DES PARAGRAPHES ---------------------------------------------
   retourner_paragraphe() enveloppe chaque module dans un <div class="paragraphe">
   suivi d'un <br class="clr">.

   Par défaut ce bloc se comporte comme une colonne de texte à la largeur du
   site : c'est ce qu'attend un paragraphe rédactionnel, le seul type que le
   client crée lui-même. Un paragraphe de module est déclaré « Bloc pleine
   largeur » (style par_s2k_bloc) et s'efface alors complètement, laissant le
   module poser ses propres sections. L'ordre est volontaire : ce que le client
   crée marche sans réglage, ce que nous créons porte le réglage.
   -------------------------------------------------------------------------- */
/* Bloc pleine largeur : l'enrobage disparaît, le module prend la main. */
.paragraphe.par_s2k_bloc { display: contents; }

/* Colonne de texte : la mise en forme du rédactionnel.
   Le :not() est indispensable  -  sans lui, ces règles s'appliqueraient aussi au
   HTML produit par les modules, et par exemple la couleur des liens repeindrait
   en rouge le nom des tuiles d'univers, qui sont des liens blancs. */
.paragraphe:not(.par_s2k_bloc) {
  width: min(100% - (var(--gout) * 2), var(--page));
  margin-inline: auto;
  padding-block: 34px;
}
.paragraphe:not(.par_s2k_bloc) > * + * { margin-top: 18px; }
.paragraphe:not(.par_s2k_bloc) h2 { font-size: var(--t-lg); font-weight: 700;
  margin-top: 34px; }
.paragraphe:not(.par_s2k_bloc) h3 { font-size: var(--t-md); font-weight: 700;
  margin-top: 26px; }
.paragraphe:not(.par_s2k_bloc) ul,
.paragraphe:not(.par_s2k_bloc) ol { margin: 18px 0 0; padding-left: 22px; }
.paragraphe:not(.par_s2k_bloc) li + li { margin-top: 8px; }
.paragraphe:not(.par_s2k_bloc) li::marker { color: var(--rouge); }
.paragraphe:not(.par_s2k_bloc) a { color: var(--rouge-texte); }
.paragraphe:not(.par_s2k_bloc) img { max-width: 100%; height: auto; }
.paragraphe:not(.par_s2k_bloc) table { width: 100%; border-collapse: collapse; }
.paragraphe:not(.par_s2k_bloc) td,
.paragraphe:not(.par_s2k_bloc) th { padding: 10px 12px;
  border: 1px solid var(--trait); text-align: left; vertical-align: top; }

br.clr { display: none; }
/* Barres d'édition du back-office incrusté.
   Un bloc de module s'efface (display:contents) : sa barre d'édition devient
   alors fille directe de <main> et occuperait toute la largeur. On la ramène
   dans la colonne du site, au-dessus du bloc qu'elle commande. */
.bo_paragraphe {
  position: relative; z-index: 5;
  width: min(100% - (var(--gout) * 2), var(--page));
  margin: 12px auto 0;
}
.bo_paragraphe .bo_barre_boutons { margin: 0; padding: 4px 8px; background: #fff8d8;
  border: 1px solid #e3d9a0; font-size: 12px; }
.bo_paragraphe img { vertical-align: middle; }

/* 21. FORMULAIRES DU CMS ---------------------------------------------------
   MDL_FORMULAIRE produit un balisage Bootstrap (.row / .col-sm-12 /
   .form-group / .form-control). On lui donne l'apparence des champs de la
   maquette sans toucher au module, qui sert aussi à Espace Montagne.
   -------------------------------------------------------------------------- */
.mdl_formulaire .row { display: block; }
.mdl_formulaire [class^="col-sm-"] { width: 100%; }
.mdl_formulaire .form-group { margin: 0 0 18px; }
.mdl_formulaire label { display: block; margin-bottom: 6px;
  font-size: var(--t-sm); font-weight: 700; color: var(--encre); }
.mdl_formulaire label .obl { color: var(--rouge-texte); }
.mdl_formulaire .form-control,
.mdl_formulaire input[type="text"],
.mdl_formulaire input[type="email"],
.mdl_formulaire select,
.mdl_formulaire textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--encre);
  background: #fff; border: 1px solid var(--trait); border-radius: 4px;
}
.mdl_formulaire textarea { min-height: 160px; resize: vertical; }
.mdl_formulaire .form-control:focus,
.mdl_formulaire select:focus,
.mdl_formulaire textarea:focus {
  outline: 2px solid var(--rouge); outline-offset: 1px; border-color: var(--rouge);
}
.mdl_formulaire .btn-maincolor {
  display: inline-block; padding: 14px 26px; border: 0; border-radius: 999px;
  background: var(--rouge); color: #fff; font-family: var(--f-titre);
  font-weight: 700; font-size: var(--t-sm); letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer;
}
.mdl_formulaire .btn-maincolor:hover { background: var(--encre); }
.mdl_formulaire .blocAlerte { padding: 12px 16px; margin: 0 0 18px;
  background: #fdecec; border-left: 3px solid var(--rouge); font-size: var(--t-sm); }
.mdl_formulaire .case { width: auto; margin: 0 6px 0 0; }
/* mkHelp() rend l'aide sous forme d'infobulle au survol : <a href="#"> avec le
   texte dans un <span>. Sans regle dediee, la phrase s'affiche en lien souligne
   au milieu du formulaire  -  et le survol n'existe pas sur telephone. On la
   presente donc simplement comme une note. */
.mdl_formulaire .infobulle { display: block; margin: 0 0 6px; text-decoration: none;
  font-size: var(--t-sm); color: var(--fumee); cursor: default; }
.mdl_formulaire .infobulle img { display: none; }
.mdl_formulaire .infobulle span { color: inherit; }
.bloc-formulaire { margin-top: 18px; }
.colonnes--contact { align-items: start; }

/* Le hero est alimenté en TinyMCE : le client y met un titre et un
   paragraphe, sans connaître les classes du thème. On leur donne ici
   l'apparence de .display et de .chapeau--clair. */
.hero__intro h1, .hero__intro h2 {
  font-weight: 700; font-style: italic; text-transform: uppercase;
  letter-spacing: -0.025em; line-height: .94;
  font-size: var(--t-3xl); margin: 20px 0 22px;
}
.hero__intro h1 em, .hero__intro h2 em { font-style: italic; color: var(--rouge-vif); }
.hero__intro p { font-size: var(--t-md); color: var(--fumee-clair); max-width: 62ch; }
.hero__intro > *:first-child { margin-top: 0; }

/* Même principe pour le chapeau d'un bandeau de titre. */
.titre-page .chapeau > *:first-child { margin-top: 0; }
.titre-page .chapeau p + p { margin-top: 12px; }

/* 22. CONTENUS VENUS DE LA BASE --------------------------------------------
   Éléments que la maquette n'avait pas : ils apparaissent dès que le client
   charge une photo ou un logo depuis le back-office.
   -------------------------------------------------------------------------- */
.article__media { display: block; overflow: hidden; border-radius: 6px;
  margin: 0 0 14px; aspect-ratio: 16 / 9; background: var(--brume); }
.article__photo { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease; }
.article:hover .article__photo { transform: scale(1.04); }

/* Vidéo Youtube d'une actualité (saisie au back-office). Cadre 16:9 responsive ;
   un short vertical s'y lit en étant centré, sans déborder. */
.article__video { position: relative; width: 100%; aspect-ratio: 16 / 9;
  margin: 0 0 24px; border-radius: 10px; overflow: hidden; background: #000; }
.article__video iframe { position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; }
/* Lecteur posé par le bandeau de consentement (tarteaucitron) : le bloc
   .youtube_player reçoit l'iframe après accord, ou le message « Autoriser »
   avant ; dans les deux cas il remplit le cadre 16:9. */
.article__video .youtube_player { position: absolute; inset: 0; width: 100%; height: 100%; }
.article__video .youtube_player .tac_activate { width: 100%; height: 100%; box-sizing: border-box; }
.article__video noscript a { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #fff; }

/* Les logos de marque étaient des SVG en ligne dans la maquette ; ce sont
   maintenant des fichiers téléversés par le client. Mêmes gabarits. */
.marque__logo { width: 100%; max-width: 118px; max-height: 46px;
  object-fit: contain; display: block; }
.marques__logos--page .marque__logo { max-width: 210px; max-height: 82px; }
.marque:hover .marque__logo { transform: scale(1.07); transition: transform .2s ease; }
.marque__nom { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .02em; }

/* Photo insérée dans une page éditoriale (ex. Notre groupe). Bornée à sa
   largeur native pour ne pas agrandir une image basse résolution. */
.paragraphe .figure-magasin { margin: 0 0 22px; }
.paragraphe .figure-magasin img { max-width: 390px; width: 100%; height: auto;
  border-radius: 6px; display: block; }

.catalogue__desc { display: block; margin: 4px 0 0; font-size: var(--t-sm);
  color: var(--fumee); }

.enseigne__rond, .liste-enseignes__rond { width: 26px; height: 26px; flex: 0 0 auto; }
.enseigne__rond { width: 66px; height: 66px; }

.titre-page__date { display: block; margin-bottom: 8px; font-family: var(--f-titre);
  font-weight: 700; font-size: var(--t-sm); letter-spacing: .06em;
  text-transform: uppercase; color: var(--rouge-vif); }

.newsletter__retour { margin: 10px 0 0; font-size: var(--t-sm); color: #fff; }
.newsletter__retour--erreur { color: #ffd2d3; }

/* Rayon non cliquable : sert à lister des marques sans lien de destination. */
.rayon--statique { cursor: default; }
.rayon--statique:hover { background: var(--brume); color: inherit; }

/* Lien de retour placé sous une grille. */
.decalee { margin-top: 16px; }
.decalee a { color: var(--rouge-texte); font-weight: 600; }

/* 23. RÉFÉRENCEMENT ET ACCESSIBILITÉ ---------------------------------------
   Le fil d'ariane et le titre de page sont désormais rendus par le gabarit,
   hors des paragraphes : ils ne doivent pas hériter des marges de section.
   -------------------------------------------------------------------------- */
#contenu > .fil:first-child { margin-top: 0; }
#contenu > .titre-page + .conteneur > .section-premiere { padding-top: 44px; }

/* Très petits écrans : les trois pastilles d'enseigne tiennent sur une ligne
   sans couper « Sport 2000 » en deux. */
@media (max-width: 380px) {
  .pastille { gap: 4px; padding: 6px 5px; letter-spacing: 0; white-space: nowrap; }
  .pastille--logo { padding: 3px 5px; }
}