:root{
    --clair:#FAFAF7;
    --papier:#F1EEE6;
    --marine:#03254C;
    --nuit:#071230;
    --bordeaux:#6D091A;
    --rouge:#E21426;
    --or:#DDB65B;
    --blanc:#FFFFFF;
    --pente:-18.4deg;          /* angle mesuré sur la bannière du club : 1 pour 3 */
    --contre:18.4deg;
    --f-large:'Archivo', 'Montserrat', sans-serif;
    --f-didone:'Bodoni Moda', 'Didot', serif;
    --f-corps:'Montserrat', system-ui, sans-serif;
    --max:1320px;
    --gout:clamp(20px, 4vw, 56px);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
  body{margin:0; background:var(--clair); color:var(--marine); font-family:var(--f-corps); font-size:17px; line-height:1.6; overflow-x:hidden;}
  img{max-width:100%; height:auto; display:block;}
  a{color:inherit;}
  section[id]{scroll-margin-top:92px;}
  .cadre{max-width:var(--max); margin:0 auto; padding:0 var(--gout);}
  :focus-visible{outline:3px solid var(--rouge); outline-offset:3px;}
  .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

  /* ---------- Motif de marque : les trois bandes inclinées ---------- */
  .ruban{display:inline-flex; gap:5px; height:22px; vertical-align:middle; padding-left:8px;}
  .ruban i{display:block; width:12px; height:100%; transform:skewX(var(--pente)); background:var(--marine);}
  .ruban i:nth-child(2){background:var(--bordeaux);}
  .ruban i:nth-child(3){background:var(--rouge);}
  .sur-marine .ruban i{background:var(--blanc);}
  .sur-marine .ruban i:nth-child(2){background:var(--or);}
  .sur-marine .ruban i:nth-child(3){background:var(--rouge);}
  .ruban.xl{height:64px; gap:12px;} .ruban.xl i{width:30px;}

  .bandes{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
  .bandes i{position:absolute; top:-20%; bottom:-20%; transform:skewX(var(--pente)); transform-origin:50% 50%;}

  /* ---------- Typo ---------- */
  .etiquette{font-family:var(--f-large); font-stretch:125%; font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; display:flex; align-items:center; gap:14px; margin:0 0 18px;}
  .etiquette b{font-family:var(--f-didone); font-weight:600; font-size:1.5rem; letter-spacing:0; line-height:1;}
  .titre{font-family:var(--f-large); font-stretch:118%; font-weight:850; text-transform:uppercase; font-size:clamp(2.3rem, 6.6vw, 5.6rem); line-height:.95; letter-spacing:-.015em; margin:0;}
  .titre em{font-family:var(--f-didone); font-style:italic; font-weight:600; font-stretch:100%; letter-spacing:0; text-transform:none; color:var(--bordeaux); font-variation-settings:"opsz" 20;}
  .sur-marine .titre em{color:var(--or);}
  .chapo{font-size:1.1rem; max-width:46ch; margin:22px 0 0;}

  /* ---------- Boutons en parallélogramme ---------- */
  .btn{display:inline-block; transform:skewX(var(--pente)); background:var(--marine); color:var(--blanc); text-decoration:none; font-family:var(--f-large); font-stretch:115%; font-weight:750; font-size:.86rem; letter-spacing:.08em; text-transform:uppercase; padding:17px 30px; border:2px solid var(--marine); transition:background .2s, color .2s, border-color .2s;}
  .btn span{display:inline-block; transform:skewX(var(--contre));}
  .btn:hover{background:var(--bordeaux); border-color:var(--bordeaux);}
  .btn.ligne{background:transparent; color:var(--marine);}
  .btn.ligne:hover{background:var(--marine); color:var(--blanc); border-color:var(--marine);}
  .sur-marine .btn{background:var(--or); border-color:var(--or); color:var(--nuit);}
  .sur-marine .btn:hover{background:var(--blanc); border-color:var(--blanc);}
  .sur-marine .btn.ligne{background:transparent; color:var(--blanc); border-color:var(--blanc);}
  .sur-marine .btn.ligne:hover{background:var(--blanc); color:var(--nuit);}
  .actions{display:flex; flex-wrap:wrap; gap:18px 26px; margin-top:34px; padding-left:8px;}

  /* ---------- En-tête et menu ---------- */
  .entete{position:sticky; top:0; z-index:50; background:var(--clair); border-bottom:1px solid rgba(3,37,76,.12);}
  .entete .cadre{display:flex; align-items:center; justify-content:space-between; gap:24px; height:76px;}
  .marque{display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0;}
  .marque img{width:52px; height:52px;}
  .marque strong{display:block; font-family:var(--f-large); font-stretch:120%; font-weight:850; font-size:.98rem; letter-spacing:.04em; line-height:1.1;}
  .marque small{display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; opacity:.75;}
  .menu{display:flex; align-items:center; gap:clamp(16px, 2.2vw, 34px);}
  .menu ul{display:flex; gap:clamp(16px, 2.2vw, 34px); list-style:none; margin:0; padding:0;}
  .menu li a{position:relative; white-space:nowrap; text-decoration:none; font-family:var(--f-large); font-stretch:112%; font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; padding:10px 0; display:block;}
  .menu li a::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:4px; background:var(--rouge); transform:skewX(var(--pente)) scaleX(0); transform-origin:left; transition:transform .25s;}
  .menu li a:hover::after, .menu li a:focus-visible::after{transform:skewX(var(--pente)) scaleX(1);}
  .menu .btn{padding:12px 22px; font-size:.76rem; white-space:nowrap;}
  .burger{display:none;}

  @media (max-width:1240px){
    .entete .cadre{height:66px;}
    .marque img{width:44px; height:44px;}
    .js .burger{display:inline-flex; flex-direction:column; justify-content:center; gap:6px; width:50px; height:46px; padding:0 11px; background:var(--marine); border:0; cursor:pointer; transform:skewX(var(--pente)); position:relative; z-index:70;}
    .js .burger i{display:block; height:3px; background:var(--blanc); transition:transform .25s, opacity .2s;}
    .js .burger[aria-expanded="true"] i:nth-of-type(1){transform:translateY(9px) rotate(45deg);}
    .js .burger[aria-expanded="true"] i:nth-of-type(2){opacity:0;}
    .js .burger[aria-expanded="true"] i:nth-of-type(3){transform:translateY(-9px) rotate(-45deg);}
    .js .menu{position:fixed; inset:0; z-index:60; background:var(--marine); color:var(--blanc); flex-direction:column; align-items:flex-start; justify-content:center; gap:34px; padding:96px var(--gout) 40px; overflow:hidden auto; visibility:hidden; opacity:0; transition:opacity .25s, visibility .25s;}
    .js .menu.ouvert{visibility:visible; opacity:1;}
    .js .menu::before{content:""; position:absolute; top:-20%; bottom:-20%; right:-24%; width:36%; background:var(--bordeaux); transform:skewX(var(--pente)); z-index:-1;}
    .js .menu::after{content:""; position:absolute; top:-20%; bottom:-20%; right:14%; width:5%; background:var(--blanc); opacity:.95; transform:skewX(var(--pente)); z-index:-1;}
    .js .menu ul{flex-direction:column; gap:6px;}
    .js .menu li a{font-size:clamp(1.7rem, 7.4vw, 2.6rem); font-weight:850; letter-spacing:-.01em; padding:6px 0;}
    .js .menu .btn{background:var(--or); border-color:var(--or); color:var(--nuit); font-size:.9rem; padding:16px 26px; margin-left:6px;}
    /* sans JavaScript : liens visibles sous la marque */
    .no-js .entete .cadre{height:auto; flex-wrap:wrap; padding-top:10px; padding-bottom:10px;}
    .no-js .menu, .no-js .menu ul{flex-wrap:wrap; gap:6px 16px;}
  }

  /* ---------- Couverture ---------- */
  .couv{position:relative; overflow:hidden; background:var(--clair);}
  .couv .cadre{position:relative; display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr); gap:24px; align-items:center; min-height:min(84vh, 800px); padding-top:48px; padding-bottom:64px;}
  .couv .bandes .b1{right:-10%; width:33%; background:var(--marine);}
  .couv .bandes .b2{right:23%; width:13%; background:var(--bordeaux);}
  .couv .bandes .b3{right:37.2%; width:1.2%; background:var(--rouge);}
  .fiche{display:flex; flex-wrap:wrap; gap:6px 22px; font-family:var(--f-large); font-stretch:120%; font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 30px; padding:0; list-style:none;}
  .fiche li+li::before{content:"/"; margin-right:22px; color:var(--rouge);}
  .couv h1{font-family:var(--f-large); font-stretch:120%; font-weight:900; text-transform:uppercase; font-size:clamp(2.5rem, 5.5vw, 5.3rem); line-height:.92; letter-spacing:-.02em; margin:0;}
  .couv h1 em{display:block; font-family:var(--f-didone); font-style:italic; font-weight:600; font-stretch:100%; text-transform:none; letter-spacing:-.01em; color:var(--rouge); font-size:1.32em; line-height:.95; font-variation-settings:"opsz" 22; margin-top:.04em;}
  .ecu{position:relative; justify-self:end; width:min(100%, 400px);}
  .ecu img{width:100%; filter:drop-shadow(0 18px 30px rgba(7,18,48,.35));}
  .ecu::after{content:""; position:absolute; inset:-3%; border-radius:50%; background:var(--blanc); z-index:-1;}

  /* ---------- Bandeau défilant ---------- */
  .defile{background:var(--or); color:var(--nuit); overflow:hidden; border-block:3px solid var(--marine);}
  .defile div{display:flex; width:max-content; animation:defile 32s linear infinite;}
  .defile p{margin:0; padding:15px 0; white-space:nowrap; font-family:var(--f-large); font-stretch:125%; font-weight:850; font-size:1.02rem; letter-spacing:.06em; text-transform:uppercase;}
  .defile p span{display:inline-block; width:12px; height:1em; margin:0 26px -2px; background:var(--bordeaux); transform:skewX(var(--pente));}
  @keyframes defile{to{transform:translateX(-50%);}}

  /* ---------- Rubriques ---------- */
  .rub{position:relative; padding:clamp(72px, 9vw, 132px) 0;}
  .rub-tete{display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr); gap:24px 48px; align-items:end; margin-bottom:clamp(36px, 5vw, 64px);}
  .rub-tete .chapo{margin:0 0 6px; padding-left:20px; border-left:6px solid var(--rouge);}

  /* 01 Rejoindre : tuiles inégales */
  .tuiles{display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:16px;}
  .tuile{position:relative; overflow:hidden; padding:30px 30px 34px; min-height:250px; display:flex; flex-direction:column; justify-content:flex-end; background:var(--papier);}
  .tuile::before{content:""; position:absolute; top:-20%; bottom:-20%; right:-34px; width:70px; transform:skewX(var(--pente)); background:var(--marine);}
  .tuile::after{content:""; position:absolute; top:-20%; bottom:-20%; right:52px; width:12px; transform:skewX(var(--pente)); background:var(--rouge);}
  .tuile h3{font-family:var(--f-large); font-stretch:118%; font-weight:850; font-size:1.3rem; text-transform:uppercase; line-height:1.05; margin:0 0 8px; letter-spacing:-.005em;}
  .tuile p{margin:0; font-size:.96rem; max-width:34ch; position:relative;}
  .tuile{padding-right:118px;} .t-tous{padding-right:230px;}
  .tuile .badge{align-self:flex-start; margin-bottom:auto; font-family:var(--f-large); font-stretch:120%; font-weight:800; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; background:var(--rouge); color:var(--blanc); padding:6px 14px 6px 12px; transform:skewX(var(--pente));}
  .tuile .badge span{display:inline-block; transform:skewX(var(--contre));}
  .tuile .chiffre{font-family:var(--f-didone); font-weight:600; font-style:italic; font-size:clamp(4.4rem, 10vw, 9rem); line-height:.82; letter-spacing:-.03em; margin:0 0 18px; font-variation-settings:"opsz" 24;}
  .tuile .chiffre small{font-family:var(--f-large); font-style:normal; font-stretch:125%; font-weight:800; font-size:.2em; letter-spacing:.1em; vertical-align:middle; margin:0 .4em;}
  .t-tous{grid-column:span 7; grid-row:span 2; background:var(--marine); color:var(--blanc); min-height:420px;}
  .t-tous::before{background:var(--bordeaux); width:150px; right:-60px;}
  .t-tous::after{background:var(--blanc); right:112px; width:18px;}
  .t-u15{grid-column:span 5; background:var(--bordeaux); color:var(--blanc);}
  .t-u15::before{background:var(--nuit);} .t-u15::after{background:var(--or);}
  .t-u15 .badge{background:var(--or); color:var(--nuit);}
  .t-u18{grid-column:span 5; background:var(--blanc); box-shadow:inset 0 0 0 3px var(--marine);}
  .t-loisir{grid-column:span 12; min-height:0; flex-direction:row; align-items:center; justify-content:space-between; gap:20px 40px; flex-wrap:wrap; padding-right:120px;}
  .t-loisir h3{margin:0;}
  .lien{font-family:var(--f-large); font-stretch:115%; font-weight:800; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; border-bottom:4px solid var(--rouge); padding-bottom:4px; display:inline-block; margin-top:18px; position:relative;}
  .lien:hover{border-color:currentColor;}

  /* 02 École de foot */
  .ecole{background:var(--papier); overflow:hidden;}
  .ecole .bandes .b1{left:-10%; width:22%; background:var(--marine);}
  .ecole .bandes .b2{left:14%; width:3%; background:var(--bordeaux);}
  .ecole .cadre{position:relative; display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:40px 64px; align-items:center;}
  .ecole .texte{grid-column:2;}
  .creneaux{grid-column:1; grid-row:1; display:grid; gap:14px; justify-items:end; padding-right:6%;}
  .creneau{background:var(--blanc); color:var(--marine); transform:skewX(var(--pente)); padding:20px 34px; box-shadow:10px 10px 0 var(--rouge); width:min(100%, 330px);}
  .creneau div{transform:skewX(var(--contre)); display:flex; align-items:baseline; justify-content:space-between; gap:18px;}
  .creneau span{font-family:var(--f-large); font-stretch:122%; font-weight:800; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;}
  .creneau b{font-family:var(--f-didone); font-style:italic; font-weight:600; font-size:2.7rem; line-height:1; font-variation-settings:"opsz" 22;}

  /* 03 Le stade */
  .stade{background:var(--marine); color:var(--blanc); overflow:hidden;}
  .stade .bandes .b1{right:-12%; width:30%; background:var(--nuit);}
  .stade .bandes .b2{right:22%; width:2.2%; background:var(--bordeaux);}
  .stade .cadre{position:relative; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:40px 64px; align-items:center;}
  .terrain{width:100%; height:auto; color:var(--or);}
  .adresse{font-style:normal; font-size:1.15rem; line-height:1.5; margin:24px 0 0; padding-left:20px; border-left:6px solid var(--rouge);}
  .adresse strong{font-family:var(--f-large); font-stretch:118%; font-weight:800; text-transform:uppercase; letter-spacing:.04em; display:block;}

  /* 04 Boutique */
  .boutique{overflow:hidden;}
  .boutique .cadre{position:relative; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:40px 64px; align-items:center;}
  .vitrine{position:relative; min-height:560px; display:grid; place-items:center; overflow:hidden; background:var(--nuit);}
  .vitrine .bandes .b1{left:16%; width:19%; background:var(--blanc);}
  .vitrine .bandes .b2{left:35%; width:40%; background:var(--bordeaux);}
  .vitrine img{position:relative; width:auto; height:520px; filter:drop-shadow(0 22px 28px rgba(0,0,0,.45));}
  .gamme{list-style:none; display:flex; flex-wrap:wrap; gap:10px 14px; padding:0 0 0 8px; margin:28px 0 0;}
  .gamme li{transform:skewX(var(--pente)); border:2px solid var(--marine); padding:7px 16px; font-family:var(--f-large); font-stretch:115%; font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;}
  .gamme li span{display:inline-block; transform:skewX(var(--contre));}

  /* 05 Suivre et contact */
  .suivi{background:var(--papier); overflow:hidden;}
  .suivi .bandes .b1{right:-14%; width:24%; background:var(--bordeaux);}
  .suivi .bandes .b2{right:12%; width:2.4%; background:var(--marine);}
  .suivi .cadre{position:relative;}
  .duo{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px;}
  .carte{position:relative; overflow:hidden; background:var(--blanc); padding:36px 34px 40px; box-shadow:inset 0 0 0 3px var(--marine);}
  .carte.insta{background:var(--marine); color:var(--blanc); box-shadow:none;}
  .carte.insta::before{content:""; position:absolute; top:-20%; bottom:-20%; right:-40px; width:120px; background:var(--rouge); transform:skewX(var(--pente));}
  .carte h3{font-family:var(--f-large); font-stretch:118%; font-weight:850; text-transform:uppercase; font-size:clamp(1.5rem, 3vw, 2.2rem); line-height:1; margin:0 0 14px; position:relative;}
  .carte p{margin:0 0 6px; max-width:36ch; position:relative;}
  .coord{list-style:none; margin:0; padding:0;}
  .coord li{display:grid; grid-template-columns:150px minmax(0, 1fr); gap:12px; padding:14px 0; border-top:2px solid rgba(3,37,76,.14);}
  .coord li:first-child{border-top:0; padding-top:4px;}
  .coord span{font-family:var(--f-large); font-stretch:120%; font-weight:800; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; padding-top:5px;}
  .coord a{font-weight:600; text-decoration-thickness:2px; text-underline-offset:4px; overflow-wrap:anywhere;}

  /* Appel final : la bannière du club */
  .final{position:relative; overflow:hidden; background:var(--nuit); color:var(--blanc);}
  .final .bandes .b1{left:20.8%; width:18.6%; background:var(--clair);}
  .final .bandes .b2{left:39.4%; width:39.5%; background:#4F050A;}
  .final .cadre{position:relative; display:grid; justify-items:center; text-align:center; padding-top:clamp(72px, 9vw, 120px); padding-bottom:clamp(72px, 9vw, 120px);}
  .final img{width:clamp(150px, 20vw, 230px); filter:drop-shadow(0 14px 22px rgba(0,0,0,.5));}
  .final .titre{margin-top:30px; font-size:clamp(1.9rem, 4.6vw, 4rem); background:var(--nuit); padding:.32em .7em .36em; transform:skewX(var(--pente)); box-shadow:12px 12px 0 var(--rouge);}
  .final .titre > span{display:inline-block; transform:skewX(var(--contre));}
  .final .actions{justify-content:center; padding-left:0;}
  .final .btn.ligne{background:var(--nuit); border-color:var(--blanc);}

  /* Pied */
  .pied{background:var(--nuit); color:rgba(255,255,255,.82); font-size:.86rem; border-top:6px solid var(--rouge);}
  .pied .cadre{display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px 40px; padding-top:34px; padding-bottom:34px;}
  .pied strong{color:var(--blanc);}
  .pied p{margin:0 0 4px;}
  .pied a{color:var(--blanc);}

  @media (max-width:980px){
    .couv .cadre{grid-template-columns:1fr; min-height:0; padding-top:40px; padding-bottom:0;}
    .couv .bandes{top:auto; height:340px;}
    .couv .bandes .b1{right:-20%; width:60%;} .couv .bandes .b2{right:36%; width:34%;} .couv .bandes .b3{right:72%; width:2.4%;}
    .ecu{justify-self:center;}
    .ecu{width:min(62vw, 270px); margin:34px auto 38px;}
    .rub-tete{grid-template-columns:1fr;}
    .t-tous, .t-u15, .t-u18, .t-loisir{grid-column:span 12;}
    .t-tous{min-height:340px; padding-right:96px;} .t-tous::before{width:90px; right:-44px;} .t-tous::after{right:62px; width:10px;}
    .tuile{padding-right:26px;} .tuile::before{width:54px; right:-44px; bottom:48%;} .tuile::after{right:20px; width:8px; bottom:48%;}
    .t-tous{padding-right:26px;} .t-tous::before, .t-tous::after{bottom:40%;} .t-loisir{padding-right:26px;}
    .ecole .cadre, .stade .cadre, .boutique .cadre, .duo{grid-template-columns:1fr;}
    .ecole .texte{grid-column:1;} .creneaux{grid-row:auto; justify-items:start; padding:0 0 0 8%;}
    .ecole .bandes{display:none;} .creneaux{padding-right:16px;}
    .vitrine{min-height:440px;} .vitrine img{height:400px;}
    .suivi .bandes{display:none;}
    .final .bandes .b1{left:4%; width:22%;} .final .bandes .b2{left:26%; width:56%;}
  }
  @media (max-width:560px){
    body{font-size:16px;}
    .tuile{padding:26px 22px 28px;}
    
    .coord li{grid-template-columns:1fr; gap:2px;}
    .creneau{padding:16px 24px;} .creneau b{font-size:2.2rem;}
    .btn{padding:15px 22px; font-size:.8rem;}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .defile div{animation:none;}
    *{transition:none !important;}
  }

  /* ---------- Page intérieure ---------- */
  .menu li a[aria-current="page"]::after{transform:skewX(var(--pente)) scaleX(1);}
  .tete-page{position:relative; overflow:hidden; background:var(--marine); color:var(--blanc);}
  .tete-page .bandes .b1{right:-8%; width:26%; background:#4F050A;}
  .tete-page .bandes .b2{right:21%; width:9%; background:var(--clair);}
  .tete-page .bandes .b3{right:33%; width:1.2%; background:var(--rouge);}
  .tete-page .cadre{position:relative; padding-top:clamp(64px, 8vw, 120px); padding-bottom:clamp(64px, 8vw, 120px);}
  .tete-page h1{font-family:var(--f-large); font-stretch:120%; font-weight:900; text-transform:uppercase; font-size:clamp(2.5rem, 6.4vw, 6rem); line-height:.92; letter-spacing:-.02em; margin:0; max-width:11ch;}
  .tete-page h1 em{display:block; font-family:var(--f-didone); font-style:italic; font-weight:600; font-stretch:100%; text-transform:none; color:var(--or); font-size:1.15em; font-variation-settings:"opsz" 22;}
  .tete-page .chapo{max-width:40ch;}
  .identite{display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:40px 72px; align-items:start;}
  .identite .texte p{font-size:1.12rem; max-width:52ch; margin:0 0 18px;}
  .fiche-club{position:relative; overflow:hidden; background:var(--blanc); box-shadow:inset 0 0 0 3px var(--marine); padding:34px 34px 30px;}
  .fiche-club::before{content:""; position:absolute; top:-20%; bottom:86%; right:-30px; width:70px; background:var(--marine); transform:skewX(var(--pente));}
  .fiche-club::after{content:""; position:absolute; top:-20%; bottom:86%; right:54px; width:12px; background:var(--rouge); transform:skewX(var(--pente));}
  .fiche-club h3{font-family:var(--f-large); font-stretch:118%; font-weight:850; text-transform:uppercase; font-size:1.2rem; margin:0 0 10px;}
  .valeurs{background:var(--papier); overflow:hidden;}
  .valeurs .bandes{display:none;}
  .valeurs .bandes .b1{right:-10%; width:22%; background:var(--bordeaux);}
  .valeurs .bandes .b2{right:15%; width:2.2%; background:var(--marine);}
  .valeurs .cadre{position:relative;}
  .grille-valeurs{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px;}
  .valeur{position:relative; overflow:hidden; background:var(--blanc); padding:34px 120px 38px 34px; min-height:230px;}
  .valeur::before{content:""; position:absolute; top:-20%; bottom:-20%; right:-34px; width:70px; background:var(--marine); transform:skewX(var(--pente));}
  .valeur::after{content:""; position:absolute; top:-20%; bottom:-20%; right:52px; width:12px; background:var(--rouge); transform:skewX(var(--pente));}
  .valeur:nth-child(2){background:var(--marine); color:var(--blanc);} .valeur:nth-child(2)::before{background:var(--bordeaux);} .valeur:nth-child(2)::after{background:var(--blanc);}
  .valeur:nth-child(3){background:var(--bordeaux); color:var(--blanc);} .valeur:nth-child(3)::before{background:var(--nuit);} .valeur:nth-child(3)::after{background:var(--or);}
  .valeur b{display:block; font-family:var(--f-didone); font-style:italic; font-weight:600; font-size:3.4rem; line-height:.9; margin-bottom:16px; font-variation-settings:"opsz" 22;}
  .valeur h3{font-family:var(--f-large); font-stretch:118%; font-weight:850; text-transform:uppercase; font-size:clamp(1.4rem, 2.6vw, 2rem); line-height:1; margin:0 0 12px;}
  .valeur p{margin:0; max-width:40ch;}
  .terrain-vie{background:var(--marine); color:var(--blanc); overflow:hidden;}
  .terrain-vie .bandes i{bottom:52%;}
  .terrain-vie .bandes .b1{right:-12%; width:28%; background:var(--nuit);}
  .terrain-vie .bandes .b2{right:20%; width:2.2%; background:var(--rouge);}
  .terrain-vie .cadre{position:relative;}
  .reperes{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px;}
  .reperes li{border-top:6px solid var(--or); padding-top:18px;}
  .reperes strong{display:block; font-family:var(--f-large); font-stretch:118%; font-weight:850; text-transform:uppercase; font-size:1.15rem; line-height:1.1; margin-bottom:8px;}
  .reperes p{margin:0; font-size:.98rem; max-width:34ch;}
  @media (max-width:980px){
    .tete-page .bandes .b1{right:-30%; width:44%;} .tete-page .bandes .b2{right:12%; width:8%;} .tete-page .bandes .b3{display:none;}
    .tete-page h1, .tete-page .chapo{max-width:74%;}
    .identite, .grille-valeurs, .reperes{grid-template-columns:1fr;}
    .valeurs .bandes{display:none;}
    .valeur{padding:28px 26px 30px; min-height:0;} .valeur::before{bottom:55%; right:-44px; width:54px;} .valeur::after{bottom:55%; right:20px; width:8px;}
  }

  /* ---------- Actualités ---------- */
  .fil{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px;}
  .actu{position:relative; overflow:hidden; background:var(--blanc); box-shadow:inset 0 0 0 3px var(--marine); padding:30px 30px 34px; display:flex; flex-direction:column;}
  .actu::before{content:""; position:absolute; top:-20%; bottom:78%; right:-30px; width:64px; background:var(--marine); transform:skewX(var(--pente));}
  .actu::after{content:""; position:absolute; top:-20%; bottom:78%; right:48px; width:10px; background:var(--rouge); transform:skewX(var(--pente));}
  .actu-date{align-self:flex-start; margin:0 0 22px 6px; background:var(--marine); color:var(--blanc); transform:skewX(var(--pente)); padding:6px 14px; font-family:var(--f-large); font-stretch:118%; font-weight:800; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;}
  .actu-date span{display:inline-block; transform:skewX(var(--contre));}
  .actu-cat{margin:0 0 8px; font-family:var(--f-didone); font-style:italic; font-weight:600; font-size:1.25rem; line-height:1; color:var(--bordeaux); font-variation-settings:"opsz" 18;}
  .actu h3{font-family:var(--f-large); font-stretch:116%; font-weight:850; text-transform:uppercase; font-size:1.18rem; line-height:1.08; margin:0 0 12px;}
  .actu p:last-child{margin:0; font-size:.96rem;}
  .actu.une{grid-column:span 2; background:var(--marine); color:var(--blanc); box-shadow:none; padding:38px 150px 42px 38px; justify-content:flex-end; min-height:300px;}
  .actu.une::before{bottom:-20%; background:var(--bordeaux); width:120px; right:-50px;} .actu.une::after{bottom:-20%; background:var(--blanc); right:92px; width:16px;}
  .actu.une .actu-date{background:var(--or); color:var(--nuit); margin-bottom:auto;}
  .actu.une .actu-cat{color:var(--or); font-size:1.5rem; margin-top:26px;}
  .actu.une h3{font-size:clamp(1.6rem, 3vw, 2.5rem); line-height:1;}
  .actu.une p:last-child{font-size:1.05rem; max-width:48ch;}

  /* ---------- Carrousel boutique ---------- */
  .rayon{margin-top:clamp(48px, 6vw, 84px);}
  .boutique .rayon-tete{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px;}
  .rayon-tete .etiquette{margin:0;}
  .rayon-nav{display:flex; gap:12px; padding-right:8px;}
  .fleche{width:58px; height:48px; border:0; background:var(--marine); color:var(--blanc); font-size:1.3rem; font-weight:700; cursor:pointer; transform:skewX(var(--pente)); transition:background .2s;}
  .fleche span{display:inline-block; transform:skewX(var(--contre));}
  .fleche:hover{background:var(--bordeaux);}
  .fleche[disabled]{opacity:.3; cursor:default;}
  .no-js .rayon-nav{display:none;}
  .piste{list-style:none; margin:0; display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px max(var(--gout), calc((100vw - var(--max)) / 2 + var(--gout))) 26px; scroll-padding-inline:max(var(--gout), calc((100vw - var(--max)) / 2 + var(--gout))); scrollbar-width:thin; scrollbar-color:var(--marine) transparent;}
  .piste li{flex:0 0 clamp(230px, 22vw, 290px); scroll-snap-align:start;}
  .piste a, .carte-produit{display:flex; flex-direction:column; height:100%; text-decoration:none;}
  .visuel{position:relative; overflow:hidden; display:grid; place-items:center; height:330px; background:var(--papier); margin-bottom:16px;}
  .visuel::before{content:""; position:absolute; top:-20%; bottom:-20%; left:30%; width:34%; background:var(--blanc); transform:skewX(var(--pente)); transition:background .25s;}
  .visuel::after{content:""; position:absolute; top:-20%; bottom:-20%; left:68%; width:5%; background:var(--rouge); transform:skewX(var(--pente));}
  .visuel img{position:relative; z-index:1; width:auto; max-width:82%; height:auto; max-height:280px; transition:transform .3s; filter:drop-shadow(0 12px 14px rgba(7,18,48,.22));}
  .piste li:hover .visuel::before{background:var(--marine);}
  .piste li:hover img{transform:scale(1.05) rotate(-2deg);}
  .piste strong{font-family:var(--f-large); font-stretch:114%; font-weight:800; font-size:.92rem; text-transform:uppercase; line-height:1.15; letter-spacing:.01em;}
  .piste em{font-style:normal; font-family:var(--f-large); font-stretch:115%; font-weight:700; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bordeaux); margin-top:8px;}
  @media (max-width:980px){
    .fil{grid-template-columns:1fr;}
    .actu.une{grid-column:auto; padding:30px 30px 34px; min-height:0;} .actu.une::before{bottom:70%; width:64px; right:-30px;} .actu.une::after{bottom:70%; right:48px; width:10px;}
    .actu.une .actu-date{margin-bottom:22px;} .actu.une .actu-cat{margin-top:0;}
    .piste li{flex-basis:68vw;} .visuel{height:290px;}
  }
  @media (prefers-reduced-motion:reduce){ .piste{scroll-behavior:auto;} }

  .bientot{display:inline-block; margin:0; transform:skewX(var(--pente)); border:2px dashed var(--marine); padding:15px 26px; font-family:var(--f-large); font-stretch:115%; font-weight:750; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;}
  .bientot span{display:inline-block; transform:skewX(var(--contre));}

  .visuel.plein{background:var(--nuit);} .visuel.plein::before, .visuel.plein::after{display:none;}
  .visuel.plein img{width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; filter:none;}
  .piste li:hover .visuel.plein img{transform:scale(1.04);}

  .piste .visuel{height:auto; aspect-ratio:1 / 1;}
  .piste .visuel img{max-height:84%;}
  .piste .visuel.plein img{max-height:none; object-fit:contain;}

  /* ==========================================================================
     Effets repris des visuels de la collection du club (boutique officielle) :
     coups de pinceau secs, lettres ASR fantômes, halo bleu électrique + brume,
     tampon penché, filet tricolore. CSS pur, aucune image ajoutée.
     ========================================================================== */
  :root{
    --electrique:#1E63FF;
    --pinceau-rouge:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 160%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3Cfilter id=%22f%22 x=%22-5%25%22 y=%22-30%25%22 width=%22110%25%22 height=%22160%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.012 0.55%22 numOctaves=%222%22 seed=%223%22 result=%22n%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 in2=%22n%22 scale=%2246%22 xChannelSelector=%22R%22 yChannelSelector=%22G%22/%3E%3C/filter%3E%3Cfilter id=%22g%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.006 0.9%22 numOctaves=%221%22 seed=%2210%22/%3E%3CfeColorMatrix values=%220 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -9 5.2%22/%3E%3C/filter%3E%3Cmask id=%22m%22%3E%3Crect width=%22640%22 height=%22160%22 fill=%22%23fff%22 filter=%22url%28%23g%29%22/%3E%3C/mask%3E%3C/defs%3E%3Cg filter=%22url%28%23f%29%22 mask=%22url%28%23m%29%22 fill=%22%23E21426%22%3E%3Cpath d=%22M30 52 L600 40 L618 96 L20 112 Z%22/%3E%3Cpath d=%22M0 34 L420 26 L430 40 L6 46 Z%22 opacity=%22.85%22/%3E%3Cpath d=%22M180 118 L640 108 L636 126 L190 132 Z%22 opacity=%22.8%22/%3E%3C/g%3E%3C/svg%3E");
    --pinceau-blanc:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 160%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3Cfilter id=%22f%22 x=%22-5%25%22 y=%22-30%25%22 width=%22110%25%22 height=%22160%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.012 0.55%22 numOctaves=%222%22 seed=%2211%22 result=%22n%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 in2=%22n%22 scale=%2246%22 xChannelSelector=%22R%22 yChannelSelector=%22G%22/%3E%3C/filter%3E%3Cfilter id=%22g%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.006 0.9%22 numOctaves=%221%22 seed=%2218%22/%3E%3CfeColorMatrix values=%220 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -9 5.2%22/%3E%3C/filter%3E%3Cmask id=%22m%22%3E%3Crect width=%22640%22 height=%22160%22 fill=%22%23fff%22 filter=%22url%28%23g%29%22/%3E%3C/mask%3E%3C/defs%3E%3Cg filter=%22url%28%23f%29%22 mask=%22url%28%23m%29%22 fill=%22%23FFFFFF%22%3E%3Cpath d=%22M30 52 L600 40 L618 96 L20 112 Z%22/%3E%3Cpath d=%22M0 34 L420 26 L430 40 L6 46 Z%22 opacity=%22.85%22/%3E%3Cpath d=%22M180 118 L640 108 L636 126 L190 132 Z%22 opacity=%22.8%22/%3E%3C/g%3E%3C/svg%3E");
    --pinceau-bleu:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 160%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3Cfilter id=%22f%22 x=%22-5%25%22 y=%22-30%25%22 width=%22110%25%22 height=%22160%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.012 0.55%22 numOctaves=%222%22 seed=%225%22 result=%22n%22/%3E%3CfeDisplacementMap in=%22SourceGraphic%22 in2=%22n%22 scale=%2246%22 xChannelSelector=%22R%22 yChannelSelector=%22G%22/%3E%3C/filter%3E%3Cfilter id=%22g%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.006 0.9%22 numOctaves=%221%22 seed=%2212%22/%3E%3CfeColorMatrix values=%220 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -9 5.2%22/%3E%3C/filter%3E%3Cmask id=%22m%22%3E%3Crect width=%22640%22 height=%22160%22 fill=%22%23fff%22 filter=%22url%28%23g%29%22/%3E%3C/mask%3E%3C/defs%3E%3Cg filter=%22url%28%23f%29%22 mask=%22url%28%23m%29%22 fill=%22%231E63FF%22%3E%3Cpath d=%22M30 52 L600 40 L618 96 L20 112 Z%22/%3E%3Cpath d=%22M0 34 L420 26 L430 40 L6 46 Z%22 opacity=%22.85%22/%3E%3Cpath d=%22M180 118 L640 108 L636 126 L190 132 Z%22 opacity=%22.8%22/%3E%3C/g%3E%3C/svg%3E");
    --tricolore:linear-gradient(90deg, var(--electrique) 0 33.3%, #FFFFFF 33.3% 66.6%, var(--rouge) 66.6% 100%);
  }

  /* 1. Brume et halo électrique sur les blocs sombres */
  .final, .stade, .tete-page, .terrain-vie, .pied{
    background-image:
      radial-gradient(60% 80% at 50% 110%, rgba(30,99,255,.38), transparent 70%),
      radial-gradient(40% 50% at 12% 20%, rgba(30,99,255,.16), transparent 70%),
      radial-gradient(45% 55% at 90% 70%, rgba(30,99,255,.14), transparent 70%);
  }
  .final{background-color:var(--nuit);}

  /* 2. Lettres ASR fantômes, peintes derrière le contenu */
  .final::before, .tete-page::before, .stade::before, .couv::after{
    content:"ASR"; position:absolute; z-index:0; pointer-events:none; user-select:none;
    font-family:var(--f-large); font-stretch:125%; font-weight:900; font-style:italic; line-height:.8; letter-spacing:-.04em;
    font-size:clamp(11rem, 34vw, 30rem); transform:rotate(-8deg); white-space:nowrap;
    color:transparent; -webkit-text-stroke:0; 
    background:linear-gradient(100deg, rgba(30,99,255,.0) 0%, rgba(30,99,255,.55) 35%, rgba(90,150,255,.35) 60%, rgba(30,99,255,0) 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-mask-image:repeating-linear-gradient(98deg, #000 0 7px, rgba(0,0,0,.55) 7px 9px, #000 9px 17px, transparent 17px 18px);
            mask-image:repeating-linear-gradient(98deg, #000 0 7px, rgba(0,0,0,.55) 7px 9px, #000 9px 17px, transparent 17px 18px);
  }
  .final::before{left:50%; top:46%; translate:-50% -50%; opacity:.9;}
  .tete-page::before{right:-4%; bottom:-18%; opacity:.55;}
  .stade::before{left:-3%; bottom:-16%; opacity:.4;}
  .couv::after{left:-2%; bottom:-10%; opacity:1;
    background:linear-gradient(100deg, rgba(3,37,76,0) 0%, rgba(3,37,76,.075) 30%, rgba(3,37,76,.05) 70%, rgba(3,37,76,0) 100%);
    -webkit-background-clip:text; background-clip:text;}
  .final .cadre, .tete-page .cadre, .stade .cadre, .couv .cadre{z-index:1;}
  .final .bandes, .tete-page .bandes, .stade .bandes{z-index:0;}

  /* 3. Coups de pinceau dans les angles des blocs sombres */
  .final::after, .tete-page::after, .terrain-vie::before, .pied::before{
    content:""; position:absolute; pointer-events:none; z-index:0;
    width:min(62vw, 760px); height:min(30vw, 360px);
    background-image:var(--pinceau-rouge), var(--pinceau-blanc), var(--pinceau-bleu);
    background-repeat:no-repeat;
    background-size:100% 46%, 78% 30%, 88% 36%;
    background-position:0 40%, 30% 4%, 10% 92%;
    transform:rotate(-34deg);
  }
  .final::after{left:-16%; top:-22%;}
  .tete-page::after{left:-26%; bottom:-64%; opacity:.9;}
  .terrain-vie::before{right:-20%; bottom:-40%; transform:rotate(-34deg) scaleX(-1);}
  .pied{position:relative; overflow:hidden;}
  .pied::before{right:-18%; top:-120%; opacity:.5; transform:rotate(-34deg) scale(.7);}
  .pied .cadre{position:relative; z-index:1;}
  /* second coup de pinceau, angle opposé, comme sur les visuels */
  .final .cadre::before{
    content:""; position:absolute; z-index:-1; pointer-events:none; right:-24%; bottom:-30%;
    width:min(58vw, 700px); height:min(28vw, 330px);
    background-image:var(--pinceau-rouge), var(--pinceau-blanc); background-repeat:no-repeat;
    background-size:100% 46%, 70% 28%; background-position:0 60%, 20% 12%; transform:rotate(-34deg);
  }

  /* 4. Halo électrique et reflet au sol derrière l'écusson et le maillot */
  .ecu::before{content:""; position:absolute; inset:-22%; z-index:-2; border-radius:50%;
    background:radial-gradient(closest-side, rgba(30,99,255,.75), rgba(30,99,255,.28) 55%, transparent 72%); filter:blur(6px);}
  .final img{filter:drop-shadow(0 0 34px rgba(30,99,255,.85)) drop-shadow(0 14px 22px rgba(0,0,0,.5));}
  .vitrine{background:
      radial-gradient(46% 40% at 50% 46%, rgba(30,99,255,.85), rgba(30,99,255,.25) 60%, transparent 75%),
      radial-gradient(70% 16% at 50% 93%, rgba(90,150,255,.7), transparent 70%),
      var(--nuit);}
  .vitrine .bandes{opacity:.92; mix-blend-mode:normal;}
  .vitrine .bandes .b1{left:2%; width:9%;}
  .vitrine .bandes .b2{left:80%; width:30%;}
  .vitrine::before{content:"ASR"; position:absolute; left:50%; top:30%; translate:-50% -50%; z-index:0; pointer-events:none;
    font-family:var(--f-large); font-stretch:125%; font-weight:900; font-style:italic; font-size:clamp(9rem, 17vw, 15rem); line-height:.8; letter-spacing:-.04em; transform:rotate(-8deg);
    color:rgba(120,170,255,.34);
    -webkit-mask-image:repeating-linear-gradient(98deg, #000 0 7px, rgba(0,0,0,.5) 7px 9px, #000 9px 17px, transparent 17px 18px);
            mask-image:repeating-linear-gradient(98deg, #000 0 7px, rgba(0,0,0,.5) 7px 9px, #000 9px 17px, transparent 17px 18px);}
  .vitrine::after{content:""; position:absolute; pointer-events:none; left:-14%; top:-10%; width:70%; height:34%;
    background-image:var(--pinceau-rouge), var(--pinceau-blanc); background-repeat:no-repeat; background-size:100% 50%, 74% 30%; background-position:0 30%, 24% 96%; transform:rotate(-34deg);}
  .vitrine img{z-index:1; filter:drop-shadow(0 0 26px rgba(30,99,255,.55)) drop-shadow(0 22px 24px rgba(0,0,0,.55));}

  /* 5. Tampon penché, bords déchirés façon coup de pinceau (badges « Création d'équipe », date de l'actu à la une) */
  .tuile .badge, .actu.une .actu-date{
    background:var(--rouge); color:var(--blanc);
    transform:rotate(-5deg); padding:11px 30px 11px 26px; margin-left:-8px;
    font-style:italic; font-weight:900; font-size:.82rem; letter-spacing:.07em;
    clip-path:polygon(0 38%, 3% 30%, 1% 18%, 6% 12%, 4% 0, 100% 0, 97% 14%, 100% 22%, 96% 34%, 99% 48%, 95% 62%, 98% 76%, 94% 88%, 96% 100%, 0 100%, 3% 86%, 0 74%, 4% 60%, 1% 50%);
    filter:drop-shadow(0 3px 0 rgba(0,0,0,.18));
  }
  .tuile .badge span, .actu.une .actu-date span{transform:none;}
  .t-u15 .badge{background:var(--blanc); color:var(--bordeaux);}
  .actu.une .actu-date{background:var(--rouge); color:var(--blanc);}

  /* 6. Filet tricolore, signature de leurs visuels */
  .marque strong::after{content:""; display:block; height:3px; margin-top:4px; background:var(--tricolore); box-shadow:0 0 0 1px rgba(3,37,76,.12);}
  .final .titre::after{content:""; display:block; height:6px; margin-top:.3em; background:var(--tricolore); transform:skewX(var(--contre));}
  .pied .cadre > div:first-child p:first-child::after{content:""; display:block; width:220px; max-width:100%; height:4px; margin:10px 0 12px; background:var(--tricolore);}
  .js .menu.ouvert{background-image:radial-gradient(70% 50% at 30% 100%, rgba(30,99,255,.45), transparent 70%);}

  @media (max-width:980px){
    .final::before{font-size:52vw;} .couv::after{display:none;}
    .final::after{left:-40%; top:-14%;} .final .cadre::before{right:-50%; bottom:-22%;}
    .tete-page::after{left:-60%; bottom:-46%;}
  }