/* Modèle « Arcade » — typographie géante, pastilles, bandeau défilant, cartes à faire glisser. */

/* Couleurs du logo et de la charte : rouge, bordeaux, moutarde (le labyrinthe du « D »), encre, papier */
 .v-arcade2 { --creme: #FBF7F3; --encre: #1A1412; --rouge: #A83622; --moutarde: #E8A613; --menthe: #7C1520; --ar-titre: "Montserrat", "Montserrat Repli", "Segoe UI", sans-serif; --ar-titre-poids: 700; --ar-titre-espace: .01em; background: var(--creme); color: var(--encre); }
/* Variante 2 : titres en Montserrat très gras (police de texte de la charte) */
/* Jura retirée le 07/10 (msg 6727, Montserrat plus lisible sur téléphone). Avant : titres en Jura, plus doux et moins gros (Rachida, 30/09 soir) ; textes en Montserrat.
   L'ancienne version (Montserrat 900, capitales) reste visible avec ?titres=montserrat */
.v-arcade2 { --ar-titre: "Montserrat", "Montserrat Repli", "Segoe UI", sans-serif; --ar-titre-poids: 700; --ar-titre-espace: 0; --ar-casse: none; --ar-echelle: .8; }

 .v-arcade2 .entete { background: var(--creme); color: var(--encre); border-bottom: 2px solid var(--encre); }
 .v-arcade2 .logo, .v-arcade2 .menu-large a { color: var(--encre); }
 .v-arcade2 .logo small { color: var(--rouge); }
 .v-arcade2 .menu-tel summary span { background: var(--encre); }
 .v-arcade2 .menu-tel ul { background: var(--creme); border-color: var(--encre); }
 .v-arcade2 .menu-tel li a { border-color: rgba(26,20,18,.15); }
 .v-arcade2 .btn-reserver { background: var(--encre); border-color: var(--encre); border-radius: 999px; }
 .v-arcade2 .barre-tel { background: var(--creme); border-top: 2px solid var(--encre); }
 .v-arcade2 .barre-tel a { color: var(--encre); border-color: var(--encre); border-radius: 999px; }
 .v-arcade2 .barre-tel .plein { background: var(--rouge); border-color: var(--rouge); color: #fff; }

.ar-w { max-width: 1180px; margin: 0 auto; padding-inline: 18px; }
.ar-oeil { display: inline-block; font-weight: 800; font-size: clamp(16px, 2.2vw, 20px); letter-spacing: .12em; text-transform: uppercase; background: var(--encre); color: var(--moutarde); padding: 8px 18px; border-radius: 999px; margin: 0 0 18px; }
 .v-arcade2 h2 { font-family: var(--ar-titre); font-weight: var(--ar-titre-poids); letter-spacing: var(--ar-titre-espace); font-size: calc(clamp(30px, 8vw, 62px) * var(--ar-echelle, 1)); line-height: 1.08; text-transform: var(--ar-casse, uppercase); margin: 0 0 14px; }
.ar-intro { font-size: 17px; max-width: 640px; margin: 0 0 26px; }
.ar-intro p { margin: 0; }

.ar-btn { display: inline-block; background: var(--rouge); color: #fff; text-decoration: none; font-weight: 800; font-size: 16px; padding: 16px 24px; border-radius: 999px; border: 2px solid var(--encre); box-shadow: 4px 4px 0 var(--encre); transition: transform .15s, box-shadow .15s; }
.ar-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--encre); }
.ar-btn-2 { background: #fff; color: var(--encre); }
.ar-btn-noir { background: var(--encre); color: #fff; }
.ar-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Ouverture */
.ar-hero { padding: 28px 0 40px; }
.ar-hero-grille { display: grid; gap: 30px; }
.ar-hero h1 { margin: 0; }
.ar-geant { display: block; font-family: var(--ar-titre); font-weight: var(--ar-titre-poids); letter-spacing: var(--ar-titre-espace); font-size: calc(clamp(40px, 11.5vw, 96px) * var(--ar-echelle, 1)); line-height: 1.04; text-transform: var(--ar-casse, uppercase); }
.ar-kw { display: inline-block; margin-top: 18px; font-size: clamp(21px, 3vw, 30px); font-weight: 800; background: var(--moutarde); padding: 4px 10px; border-radius: 6px; }
.ar-sous { font-size: 18px; margin-top: 16px; max-width: 560px; }
.ar-sous p { margin: 0; }
.ar-hero-photo { position: relative; }
.ar-hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; border-radius: 28px; border: 3px solid var(--encre); }






/* Bandeau défilant */

.ar-defile-piste { display: flex; gap: 22px; width: max-content; font-family: var(--ar-titre); font-weight: var(--ar-titre-poids); font-size: 26px; text-transform: uppercase; white-space: nowrap; animation: ar-defile 26s linear infinite; }

@keyframes ar-defile { to { transform: translateX(-50%); } }


/* Sections */
.ar-bloc { padding: 64px 0; }

/* Carrousel à faire glisser */
.ar-carrousel { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 18px 18px; scrollbar-width: none; }
.ar-carrousel::-webkit-scrollbar { display: none; }
.ar-occ { position: relative; scroll-snap-align: start; border-radius: 24px; overflow: hidden; border: 3px solid var(--encre); aspect-ratio: 3 / 4; text-decoration: none; color: #fff; background: var(--encre); }
.ar-occ img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-occ::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,20,18,.92) 28%, rgba(26,20,18,0) 70%); }
.ar-occ-texte { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px; display: grid; gap: 6px; }
.ar-occ-texte .ar-occ-titre { font-family: var(--ar-titre); font-weight: var(--ar-titre-poids); font-size: 30px; line-height: 1; text-transform: var(--ar-casse, uppercase); }
.ar-occ-texte span { font-size: 14.5px; line-height: 1.45; }
.ar-occ-texte em { font-style: normal; font-weight: 800; color: var(--moutarde); }

/* Familles d'épreuves en blocs de couleur */
.ar-fam-grille { display: grid; gap: 16px; }
.ar-fam-carte { border: 3px solid var(--encre); border-radius: 24px; padding: 18px; box-shadow: 6px 6px 0 var(--encre); }
.ar-fam-carte img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; border: 2px solid var(--encre); margin-bottom: 14px; }
.ar-fam-carte h3 { font-family: var(--ar-titre); font-weight: var(--ar-titre-poids); font-size: 34px; text-transform: var(--ar-casse, uppercase); margin: 0 0 6px; }
.ar-fam-carte p { margin: 0; }
.ar-c1 { background: var(--rouge); color: #fff; }
.ar-c2 { background: var(--moutarde); }
.ar-c3 { background: var(--menthe); color: #fff; }

/* Étapes */
.ar-etapes { background: var(--encre); color: #fff; }
.ar-etapes .ar-oeil { background: var(--moutarde); color: var(--encre); }
.ar-etapes ol { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: n; }
.ar-etapes li { counter-increment: n; display: grid; grid-template-columns: 64px 1fr; gap: 4px 16px; align-items: center; padding: 16px; border: 2px solid #3b302b; border-radius: 20px; }
.ar-etapes li::before { content: counter(n); grid-row: span 2; font-family: var(--ar-titre); font-weight: var(--ar-titre-poids); font-size: 52px; color: var(--moutarde); line-height: 1; text-align: center; }
.ar-etapes li b { font-size: 20px; }
.ar-etapes li span { color: #E5D9CF; font-size: 15px; }

/* Avis */
.ar-note { color: var(--rouge); }
.ar-avis-carte { scroll-snap-align: start; margin: 0; background: #fff; border: 3px solid var(--encre); border-radius: 24px; padding: 22px; box-shadow: 5px 5px 0 var(--encre); }
.ar-avis-carte .etoiles svg { width: 18px; height: 18px; fill: var(--moutarde); stroke: var(--encre); stroke-width: 1; }
.ar-avis-carte blockquote { margin: 12px 0; font-size: 18px; font-weight: 600; line-height: 1.45; }
.ar-avis-carte figcaption { font-weight: 800; }

/* Questions */
.ar-faq details { background: #fff; border: 2px solid var(--encre); border-radius: 18px; margin-bottom: 10px; padding: 0 18px; }
.ar-faq summary { list-style: none; cursor: pointer; padding: 16px 30px 16px 0; position: relative; }
.ar-faq summary::-webkit-details-marker { display: none; }
.ar-faq summary::after { content: "+"; position: absolute; right: 0; top: 8px; font-family: var(--ar-titre); font-weight: var(--ar-titre-poids); font-size: 30px; color: var(--rouge); }
.ar-faq details[open] summary::after { content: "–"; }
.ar-faq summary h3 { font-family: inherit; font-size: 17px; font-weight: 800; }
.ar-faq details > div { padding-bottom: 16px; }

/* Appel final */
.ar-final { background: var(--moutarde); border-top: 3px solid var(--encre); padding: 70px 0 80px; }
.ar-final p { font-size: 17px; max-width: 560px; }

 .v-arcade2 .pied { border-top: 3px solid var(--encre); }
 .v-arcade2 .barre-haut { background: var(--encre); }
 .v-arcade2 .barre-haut a { color: var(--moutarde); }
 .v-arcade2 .sous-menu::before { background: var(--creme); border: 2px solid var(--encre); box-shadow: 5px 5px 0 var(--encre); }
 .v-arcade2 .sous-menu a { color: var(--encre); }
 .v-arcade2 .sous-menu a:hover { color: var(--rouge); }

@media (min-width: 720px) {
  .ar-carrousel { grid-auto-columns: 42%; }
  .ar-fam-grille { grid-template-columns: repeat(3, 1fr); }
  .ar-etapes ol { grid-template-columns: repeat(3, 1fr); }
  .ar-etapes li { grid-template-columns: 1fr; text-align: left; }
  .ar-etapes li::before { grid-row: auto; text-align: left; }
}
@media (min-width: 900px) {
  .ar-hero { padding: 56px 0 64px; }
  .ar-hero-grille { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 48px; }
  .ar-w { padding-inline: 32px; }
  .ar-carrousel { grid-auto-columns: calc((100% - 64px - 42px) / 4); padding-inline: max(32px, calc((100vw - 1180px) / 2 + 32px)); }
}

/* Sections ajoutées pour l'accueil complet */
.ar-prose { font-size: 17px; line-height: 1.6; max-width: 620px; }
.ar-prose p { margin: 0 0 14px; }
.ar-duo { display: grid; gap: 34px; align-items: center; }
.ar-cadre { margin: 0; }
.ar-cadre img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; border: 3px solid var(--encre); box-shadow: 8px 8px 0 var(--encre); }
.ar-cadre-penche { transform: rotate(1.5deg); }
.ar-cadre-penche-2 { transform: rotate(-1.5deg); }
.ar-chiffres { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ar-chiffres li { background: #fff; border: 2px solid var(--encre); border-radius: 20px; padding: 16px 18px; display: grid; gap: 2px; }
.ar-chiffres li:nth-child(odd) { background: var(--moutarde); }
.ar-chiffres b { font-family: var(--ar-titre); font-weight: var(--ar-titre-poids); letter-spacing: var(--ar-titre-espace); font-size: clamp(20px, 5.6vw, 30px); line-height: 1.05; text-transform: var(--ar-casse, uppercase); overflow-wrap: anywhere; }
.ar-chiffres span { font-weight: 600; font-size: 15px; }
.ar-chiffres li:last-child:nth-child(odd) { grid-column: span 2; }

.ar-video { display: grid; gap: 20px; margin-top: 44px; align-items: center; }
.ar-video h3 { font-family: var(--ar-titre); font-weight: var(--ar-titre-poids); font-size: 30px; text-transform: var(--ar-casse, uppercase); margin: 0 0 8px; color: var(--moutarde); }
.ar-video p { margin: 0; color: #E5D9CF; }
.ar-video .cadre-video { border-radius: 24px; border: 3px solid var(--moutarde); }

.ar-coches { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.ar-coches li { position: relative; padding-left: 34px; font-weight: 600; }
.ar-coches li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--rouge); border: 2px solid var(--encre); }
.ar-coches li::after { content: ""; position: absolute; left: 7px; top: 6px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

.ar-pluie { background: var(--menthe); color: #fff; padding: 64px 0; border-block: 3px solid var(--encre); }
.ar-pluie .ar-oeil { background: var(--moutarde); color: var(--encre); }
.ar-pluie-grille { display: grid; gap: 20px; }
.ar-pluie .ar-prose { color: #F5E9E4; }
.ar-pluie h2 { margin: 0; }

.ar-faq-tete p:last-child { font-size: 16px; }
.ar-faq-tete a { color: var(--rouge); font-weight: 800; }

.ar-venir-grille { display: grid; gap: 28px; margin-top: 10px; }
.ar-venir .ar-cadre img { aspect-ratio: 16 / 10; }
.ar-adresse address { font-style: normal; display: grid; gap: 4px; background: #fff; border: 3px solid var(--encre); border-radius: 24px; padding: 22px; box-shadow: 6px 6px 0 var(--rouge); font-size: 17px; margin-top: 8px; }
.ar-adresse address b { font-size: 19px; }
.ar-adresse address a { color: var(--encre); font-weight: 800; }
.ar-acces { font-weight: 700; margin: 18px 0 0; }

@media (min-width: 720px) {
  .ar-chiffres { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ar-chiffres b { font-size: 26px; }
  .ar-chiffres li:last-child:nth-child(odd) { grid-column: auto; }
  .ar-chiffres:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .ar-duo { grid-template-columns: 1.05fr .95fr; gap: 64px; }
  .ar-duo-inverse { grid-template-columns: .95fr 1.05fr; }
  .ar-video { grid-template-columns: .7fr 1.3fr; gap: 40px; }
  .ar-pluie-grille { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .ar-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
  .ar-faq-tete { position: sticky; top: 110px; }
  .ar-venir-grille { grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
  .ar-tel-seul { display: none; }
  /* Sur ordinateur, les cartes à faire glisser deviennent une grille : personne ne fait glisser à la souris */
  .ar-carrousel.ar-grille-occ, .ar-carrousel.ar-grille-avis { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; max-width: 1180px; margin: 0 auto; padding: 4px 32px 8px; }
  .ar-grille-occ { grid-template-columns: repeat(4, 1fr); }
  .ar-grille-occ .ar-occ:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .ar-grille-occ .ar-occ:first-child .ar-occ-texte .ar-occ-titre { font-size: 44px; }
  .ar-grille-occ .ar-occ:first-child .ar-occ-texte span { font-size: 17px; max-width: 420px; }
  /* Sept cartes : la première en grand (2 × 2), la dernière sur trois colonnes, la grille tombe juste */
  .ar-grille-occ .ar-occ:last-child:nth-child(7) { grid-column: span 3; aspect-ratio: auto; }
  .ar-grille-occ .ar-occ:last-child:nth-child(8) { grid-column: span 2; aspect-ratio: auto; }
  .ar-grille-avis { grid-template-columns: repeat(3, 1fr); }
  .ar-occ-texte .ar-occ-titre { font-size: 26px; }
  .ar-occ img { object-position: center 65%; }
  /* Ouverture : la photo prend la hauteur du texte */
  .ar-hero-grille { grid-template-columns: 1.1fr .9fr; align-items: stretch; }
  .ar-hero-photo img { height: 100%; min-height: 560px; aspect-ratio: auto; }
  .ar-geant { font-size: clamp(56px, 6.4vw, 92px); }
}

@media (prefers-reduced-motion: reduce) { .ar-defile-piste { animation-duration: 70s; } .ar-btn { transition: none; } .ar-cadre-penche, .ar-cadre-penche-2 { transform: none; } }

/* Pages intérieures (modèle arcade-page) */
.ar-page-hero .ar-geant { font-size: calc(clamp(34px, 9vw, 76px) * var(--ar-echelle, 1)); }
.ar-page-hero .ar-hero-photo img { aspect-ratio: 4 / 3; }
.ar-texte-long { max-width: 640px; }
.ar-texte-long p { margin: 0 0 14px; }
.ar-sombre { background: var(--encre); color: #fff; }
.ar-sombre .ar-oeil { background: var(--moutarde); color: var(--encre); }
.ar-intro-clair { color: #E5D9CF; }
.ar-chiffres-seuls { padding-block: 8px 24px; }
.ar-chiffres-seuls .ar-chiffres { margin-top: 0; }
.ar-liens-grille { display: grid; gap: 14px; }
.ar-lien-carte { display: grid; gap: 6px; text-decoration: none; color: var(--encre); background: #fff; border: 2px solid var(--encre); border-radius: 22px; padding: 14px; box-shadow: 4px 4px 0 var(--encre); }
.ar-lien-carte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.ar-lien-carte b { font-family: var(--ar-titre); font-weight: var(--ar-titre-poids); font-size: 24px; line-height: 1.1; text-transform: var(--ar-casse, uppercase); }
.ar-lien-carte em { font-style: normal; font-weight: 800; color: var(--rouge); }
.ar-demande { background: #fff; border-block: 2px solid var(--encre); }
.ar-contact-direct { font-weight: 700; }
.ar-contact-direct a { color: var(--rouge); }
.ar-form { display: grid; gap: 6px; background: var(--creme); border: 2px solid var(--encre); border-radius: 22px; padding: 20px; box-shadow: 5px 5px 0 var(--encre); }
.ar-form label { font-weight: 700; font-size: 14px; margin-top: 8px; }
.ar-form input, .ar-form select, .ar-form textarea { font: inherit; font-size: 16px; padding: 12px 14px; border: 2px solid var(--encre); border-radius: 12px; background: #fff; width: 100%; box-sizing: border-box; }
.ar-form .ar-btn { margin-top: 16px; justify-self: start; }
.ar-form .ar-btn:disabled { opacity: .55; cursor: not-allowed; }
.ar-form-note { font-size: 13px; color: #6b5a52; margin: 6px 0 0; }
@media (min-width: 720px) { .ar-liens-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ar-liens-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ar-etapes ol.ar-etapes-4 { grid-template-columns: repeat(4, 1fr); } .ar-etapes ol.ar-etapes-5 { grid-template-columns: repeat(5, 1fr); } }
.ar-horaires { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 10px 0; }
.ar-horaires dt { font-weight: 700; }
.ar-horaires dd { margin: 0; }
.ar-galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ar-galerie figure { margin: 0; }
.ar-galerie img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; border: 2px solid var(--encre); }
.ar-galerie figcaption { font-size: 13px; margin-top: 4px; color: #5b4a42; }
@media (min-width: 900px) { .ar-galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ar-article { max-width: 720px; }
.ar-article h2 { font-size: calc(clamp(26px, 6vw, 40px) * var(--ar-echelle, 1)); margin-top: 36px; }
.ar-article p, .ar-article li { font-size: 17px; }
.ar-date { font-weight: 700; color: var(--rouge); }

/* Blog : date, liste des articles, photo d'article */
.ar-date { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .75; margin: 8px 0 0; }
.ar-liste-articles { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ar-carte-article { display: flex; flex-direction: column; color: inherit; text-decoration: none; border: 3px solid var(--encre); background: #fff; }
.ar-carte-article img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ar-carte-article-texte { display: flex; flex-direction: column; gap: 8px; padding: 18px; font-size: 16px; }
.ar-carte-article .h3 { font-family: var(--ar-titre, inherit); font-weight: 700; font-size: 22px; line-height: 1.2; }
.ar-carte-article .lien { font-weight: 700; color: var(--rouge); }
.ar-article-photo { margin: 0 0 28px; }
.ar-article-photo img { width: 100%; max-width: 100%; height: auto; display: block; border: 3px solid var(--encre); }
 .ar-article p a, .ar-article li a { color: var(--rouge); font-weight: 600; }
.ar-article .ar-carte-article { color: var(--encre); font-weight: 400; }

/* Accueil : H1 seul (l'accroche est un paragraphe), bloc « Bon à savoir » */
.ar-hero h1.ar-kw { line-height: 1.3; }
.ar-occ-titre { margin: 0; color: inherit; }
.ar-savoir-liste { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px 32px; max-width: 980px; }
@media (min-width: 1100px) {
  .ar-chiffres:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ar-chiffres:has(> li:nth-child(6):last-child) b { font-size: 23px; }
}

/* Carrousels sur téléphone et tablette : flèches et points sous les cartes (posés par js/carrousel.js) */
.ar-carrousel-cadre { position: relative; }
.ar-carrousel-nav { display: none; }
.ar-carrousel-cadre.glissable .ar-carrousel-nav { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 18px 8px; }
.ar-fleche { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--moutarde); color: var(--encre); border: 3px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); cursor: pointer; padding: 0; }
.ar-fleche svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ar-fleche:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
.ar-points { display: flex; justify-content: center; gap: 8px; }
.ar-points i { width: 9px; height: 9px; border-radius: 50%; background: var(--clair-n, #D9CCC3); border: 1.5px solid var(--encre); transition: width .3s, background .3s; }
.ar-points i.ici { width: 26px; border-radius: 6px; background: var(--rouge); }

/* Vidéo en haut de l'accueil (champ « Vidéo YouTube » du haut de page) : à la place de la photo,
   dans le même cadre, en plus grand. Elle passe sans le son, en boucle ; la photo reste tant qu'elle ne tourne pas. */
.ar-hero-video { position: relative; overflow: hidden; border-radius: 28px; border: 3px solid var(--encre); background: var(--encre); aspect-ratio: 1 / 1; box-shadow: 8px 8px 0 var(--encre); }
.ar-hero-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: opacity 1s; }
.ar-hero-video iframe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.ar-hero-video.joue img { opacity: 0; }
.ar-son { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--moutarde); color: var(--encre); border: 3px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); font: 800 12px/1 var(--ar-texte, inherit); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.ar-son svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ar-son svg path:first-child { fill: currentColor; }
.ar-fermer-son { display: none; top: 14px; bottom: auto; }
.ar-hero-avec-video.son-actif .ar-fermer-son { display: inline-flex; }
.ar-hero-avec-video.son-actif .ar-son:not(.ar-fermer-son) { display: none; }
.ar-hero-avec-video.son-actif .ar-hero-video iframe { pointer-events: auto; }
@media (min-width: 900px) {
  /* La vidéo prend plus de place que l'ancienne photo, sans couvrir le texte */
  .ar-hero-avec-video .ar-hero-grille { grid-template-columns: .92fr 1.08fr; align-items: center; }
  .ar-hero-avec-video .ar-geant { font-size: clamp(48px, 5vw, 76px); }
  .ar-hero-avec-video .ar-hero-video { aspect-ratio: 5 / 4; }
}
/* La carte du milieu est mise en avant, ses voisines restent visibles de chaque côté, plus petites */
.ar-carrousel-cadre.glissable .ar-carrousel { grid-auto-columns: 100%; padding-inline: 15%; gap: 0; scroll-snap-type: x mandatory; }
.ar-carrousel-cadre.glissable .ar-carrousel > * { scroll-snap-align: center; transform: scale(.84); opacity: .6; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s; }
.ar-carrousel-cadre.glissable .ar-carrousel > .au-centre { transform: scale(1); opacity: 1; z-index: 1; }
.ar-carrousel-cadre.glissable .ar-carrousel > .vu { transition-delay: 0s; transition-duration: .45s; }
@media (min-width: 720px) { .ar-carrousel-cadre.glissable .ar-carrousel { padding-inline: 27%; } }
/* Étapes illustrées : une photo et un pictogramme par étape */
.ar-etapes li:has(.ar-etape-visuel) { grid-template-columns: 64px 1fr; align-items: start; }
.ar-etape-visuel { grid-column: 1 / -1; order: -1; position: relative; margin: 0 0 6px; border-radius: 16px; overflow: hidden; border: 2px solid #4a3b35; aspect-ratio: 4 / 3; }
.ar-etape-visuel img { width: 100%; height: 100%; object-fit: cover; }
.ar-picto { position: absolute; left: 12px; bottom: 12px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--moutarde); border: 3px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); }
.ar-picto svg { width: 30px; height: 30px; fill: none; stroke: var(--encre); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 720px) {
  .ar-etapes li:has(.ar-etape-visuel) { grid-template-columns: 1fr; }
}

/* ---------- Propositions de fond (aperçu : ?fond=1, ?fond=2 ou ?fond=3) ---------- */
/* 1. Sable : la crème alterne avec un sable chaud, tiré du jaune de la charte */
body.fond-1 .ar-fam, body.fond-1 .ar-tous, body.fond-1 .ar-savoir, body.fond-1 .ar-venir { background: #F3E3C3; }
body.fond-1 .ar-exp, body.fond-1 .ar-occ-bloc, body.fond-1 .ar-avis { background: var(--creme); }
body.fond-1 .ar-hero { background: linear-gradient(180deg, var(--creme), #F7ECD8); }

/* 2. Couleurs de la charte : de vrais aplats qui rythment la page */
body.fond-2 .ar-fam { background: var(--encre); color: #fff; }
body.fond-2 .ar-fam .ar-oeil { background: var(--moutarde); color: var(--encre); }
body.fond-2 .ar-fam .ar-intro, body.fond-2 .ar-fam .ar-prose { color: #EADBCD; }
body.fond-2 .ar-fam-carte { border-color: #fff; box-shadow: 6px 6px 0 var(--moutarde); }
body.fond-2 .ar-occ-bloc { background: var(--moutarde); }
body.fond-2 .ar-tous { background: #F3E3C3; }
body.fond-2 .ar-avis { background: var(--rouge); color: #fff; }
body.fond-2 .ar-avis .ar-oeil { background: var(--encre); color: var(--moutarde); }
body.fond-2 .ar-avis .ar-intro, body.fond-2 .ar-avis .ar-note { color: #FBE9DD; }
body.fond-2 .ar-savoir { background: #F3E3C3; }
body.fond-2 .ar-venir { background: var(--encre); color: #fff; }
body.fond-2 .ar-venir .ar-oeil { background: var(--moutarde); color: var(--encre); }
body.fond-2 .ar-venir .ar-prose { color: #EADBCD; }

/* 3. Parchemin et bois : un grain de papier ancien sur les sections claires, des planches de bois sombre ailleurs */
body.fond-3 { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --bois: repeating-linear-gradient(180deg, #2B1E18 0 46px, #241912 46px 48px, #31221B 48px 94px, #241912 94px 96px); }
body.fond-3, body.fond-3 .ar-bloc { background: var(--grain), #F6EEDF; }
body.fond-3 .ar-hero { background: var(--grain), radial-gradient(ellipse at 70% 30%, #F8EFDD, #EBDCBE); }
body.fond-3 .ar-fam, body.fond-3 .ar-tous, body.fond-3 .ar-savoir { background: var(--grain), #E9D7B4; }
body.fond-3 .ar-etapes, body.fond-3 .ar-venir { background: var(--bois); color: #fff; }
body.fond-3 .ar-venir .ar-oeil { background: var(--moutarde); color: var(--encre); }
body.fond-3 .ar-venir .ar-prose { color: #EADBCD; }
 body.fond-3 .rebours { background: var(--bois); }
/* Les encarts blancs gardent un texte foncé, même posés sur un fond sombre */
.ar-avis-carte, .ar-adresse address, .ar-faq details { color: var(--encre); }

/* ---------- Trois directions vraiment différentes (aperçu : ?fond=4, 5 ou 6) ---------- */
/* 4. Nuit et lanternes : tout le site dans la pénombre du parc, réchauffé par des halos de lanterne */
body.fond-4 { background: #14100F; color: #F3E7DA; }
body.fond-4 main { background:
  radial-gradient(600px 420px at 85% 6%, rgba(232,166,19,.22), transparent 70%),
  radial-gradient(520px 380px at 8% 22%, rgba(168,54,34,.25), transparent 70%),
  radial-gradient(640px 460px at 92% 44%, rgba(232,166,19,.16), transparent 70%),
  radial-gradient(560px 420px at 6% 63%, rgba(232,166,19,.14), transparent 70%),
  radial-gradient(600px 420px at 88% 84%, rgba(168,54,34,.22), transparent 70%), #14100F; }
body.fond-4 .entete, body.fond-4 .menu-tel ul { background: #14100F; color: #F3E7DA; border-color: #3a2c26; }
body.fond-4 .logo, body.fond-4 .menu-large a { color: #F3E7DA; }
body.fond-4 .menu-tel summary span { background: #F3E7DA; }
body.fond-4 .ar-bloc, body.fond-4 .ar-hero { background: transparent; }
body.fond-4 .ar-oeil { background: var(--moutarde); color: var(--encre); }
body.fond-4 .ar-etapes { background: rgba(0,0,0,.35); }
body.fond-4 .ar-fam-carte { box-shadow: 0 0 0 1px rgba(232,166,19,.4), 0 10px 40px rgba(232,166,19,.18); }
body.fond-4 .ar-chiffres li, body.fond-4 .ar-avis-carte, body.fond-4 .ar-faq details { box-shadow: 0 8px 30px rgba(0,0,0,.4); }
body.fond-4 .ar-chiffres li { color: var(--encre); }
body.fond-4 .ar-note { color: var(--moutarde); }
body.fond-4 .barre-tel { background: #14100F; }

/* 5. Le parc en fond : certaines sections se posent sur une photo des couloirs, assombrie, qui reste fixe quand on défile */
body.fond-5 .ar-fam, body.fond-5 .ar-tous, body.fond-5 .ar-savoir, body.fond-5 .ar-venir { color: #fff; background-size: cover; background-position: center; background-attachment: fixed; }
body.fond-5 .ar-fam { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/couloir-rouge-1600.webp); }
body.fond-5 .ar-tous { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/galerie-portraits-1600.webp); }
body.fond-5 .ar-savoir { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/pieuvre-1600.webp); }
body.fond-5 .ar-venir { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/couloir-chaine-1600.webp); }
body.fond-5 .ar-fam .ar-oeil, body.fond-5 .ar-tous .ar-oeil, body.fond-5 .ar-savoir .ar-oeil, body.fond-5 .ar-venir .ar-oeil { background: var(--moutarde); color: var(--encre); }
body.fond-5 .ar-occ-bloc, body.fond-5 .ar-avis { background: #F3E3C3; }

/* 6. Rouge Défis Pirate : le rouge de la charte domine, avec l'emblème en motif discret, et le blanc ne sert plus qu'aux encarts */
body.fond-6 main { background: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/marque/embleme-512.png) 0 0 / 110px repeat; color: #fff; }
body.fond-6 .ar-bloc, body.fond-6 .ar-hero { background: transparent; }
body.fond-6 .ar-fam, body.fond-6 .ar-avis, body.fond-6 .ar-savoir { background: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/marque/embleme-512.png) 55px 55px / 110px repeat; }
body.fond-6 .ar-oeil { background: var(--encre); color: var(--moutarde); }
body.fond-6 .ar-kw { color: var(--encre); }
body.fond-6 .ar-btn { background: var(--encre); }
body.fond-6 .ar-btn-2 { background: #fff; }
body.fond-6 .ar-c1 { background: var(--encre); }
body.fond-6 .ar-chiffres li { color: var(--encre); }
body.fond-6 .ar-note { color: var(--moutarde); }
body.fond-6 .ar-coches li::before { background: var(--moutarde); }
@media (max-width: 899px) { body.fond-5 .ar-fam, body.fond-5 .ar-tous, body.fond-5 .ar-savoir, body.fond-5 .ar-venir { background-attachment: scroll; } }
body.fond-4 .btn-reserver { background: var(--rouge); color: #fff; }
body.fond-4 .ar-final, body.fond-6 .ar-final { color: var(--encre); }

/* 5 (complété le 02/10) : le parc derrière TOUTES les sections, pas seulement quatre */
body.fond-5 .ar-hero, body.fond-5 .ar-bloc, body.fond-5 .ar-pluie { color: #fff; background-color: #14100F; background-size: cover; background-position: center; background-attachment: fixed; }
body.fond-5 .ar-oeil { background: var(--moutarde); color: var(--encre); }
body.fond-5 .ar-hero { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/couloir-ancre-1600.webp); }
body.fond-5 .ar-exp { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/couloir-bois-1600.webp); }
body.fond-5 .ar-occ-bloc { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/crane-porte-1600.webp); }
body.fond-5 .ar-etapes { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/boutons-lumineux-1600.webp); }
body.fond-5 .ar-avis { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/reflexion-torche-1600.webp); }
body.fond-5 .ar-pluie { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/adresse-planches-1600.webp); }
@media (max-width: 899px) { body.fond-5 .ar-hero, body.fond-5 .ar-bloc, body.fond-5 .ar-pluie { background-attachment: scroll; } }
body.fond-5 .ar-chiffres li { color: var(--encre); }
body.fond-5 .ar-note, body.fond-5 .ar-faq-tete a { color: var(--moutarde); }

/* Fond « parc » validé par Rachida le 02/10 (msg 4104) : appliqué par défaut à tout le site (classe fond-5 posée sur body).
   Les sections sans photo dédiée prennent une photo du parc à tour de rôle. :where() garde une spécificité basse,
   pour que les photos choisies section par section (accueil) l'emportent. */
body.fond-5 :where(main > section.ar-bloc:nth-of-type(6n+1)) { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/couloir-bois-1600.webp); }
body.fond-5 :where(main > section.ar-bloc:nth-of-type(6n+2)) { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/couloir-rouge-1600.webp); }
body.fond-5 :where(main > section.ar-bloc:nth-of-type(6n+3)) { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/galerie-portraits-1600.webp); }
body.fond-5 :where(main > section.ar-bloc:nth-of-type(6n+4)) { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/pieuvre-1600.webp); }
body.fond-5 :where(main > section.ar-bloc:nth-of-type(6n+5)) { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/crane-chapeau-1600.webp); }
body.fond-5 :where(main > section.ar-bloc:nth-of-type(6n)) { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/couloir-chaine-1600.webp); }
body.fond-5 :where(.ar-page-hero) { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/couloir-ancre-1600.webp); }
body.fond-5 .ar-form { color: var(--encre); }
/* Liens dans le texte sur photo sombre : moutarde (le rouge ne se lit pas), mais pas dans les encarts clairs */
body.fond-5 main a:not([class]) { color: var(--moutarde); }
body.fond-5 :is(.ar-form, .ar-avis-carte, .ar-adresse address, .ar-faq details, .ar-chiffres li, [class*="carte"]) a:not([class]) { color: var(--rouge); }

/* ---------- Occasions : titre en couleur, texte d'une autre couleur (02/10, msg 4171) ---------- */
.ar-occ-texte .ar-occ-titre { color: var(--moutarde); }
.ar-occ-texte span { color: #F3E7DA; }
.ar-occ-texte em { color: #fff; text-decoration: underline; text-decoration-color: var(--moutarde); text-underline-offset: 4px; }
.ar-occ-texte .ar-occ-titre, .ar-occ-texte span { text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.55); }



/* ---------- Chiffres : trois présentations à comparer (aperçu ?chiffres=1, 2 ou 3) ---------- */
.ar-ch-picto { display: none; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* 1 · Bandeau : pas de cases, de grands chiffres séparés par un filet */






/* 2 · Pictogrammes : un rond doré par chiffre, sans case */






/* 3 · Fiche : tous les chiffres dans un seul panneau, une ligne chacun */








/* Entre deux sections photo, le fond reste sombre (les chiffres seuls des pages intérieures s'y posent) */
body.fond-5 main { background: #14100F; }
body.fond-5 .ar-chiffres-seuls { padding-block: 36px; }

/* ---------- Deuxième série de propositions (02/10, msg 4187 « autre chose ») ---------- */
/* Chiffres 4 · Billets d'embarquement : talon rouge perforé, carte crème */








/* Chiffres 5 · Panneau rouge, grands chiffres blancs */





/* Chiffres 6 · Une photo du parc derrière chaque chiffre */





@media (min-width: 900px) { body.chiffres-6 .ar-chiffres:not(:has(> li:nth-child(6))) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; } }

@media (min-width: 900px) { body.chiffres-4 .ar-chiffres:not(:has(> li:nth-child(6))) { display: flex; flex-wrap: wrap; justify-content: center; } body.chiffres-4 .ar-chiffres:not(:has(> li:nth-child(6))) li { flex: 0 1 calc((100% - 36px) / 3); } }

/* ---------- Bande défilante : les points forts du parc, chacun avec son pictogramme (03/10, msg 4236) ---------- */


.ar-defile:has(.ar-ch-picto) .ar-defile-piste { gap: 34px; align-items: center; }


/* Titres d'étiquette : fond jaune, police blanche, partout (msg 4277) */
body .ar-oeil, body .ar-kw { background: var(--moutarde) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
@media (max-width: 480px) { .ar-oeil { font-size: 15px; letter-spacing: .05em; padding: 8px 14px; } }

/* Tous les fonds jaunes : texte blanc (msg 4282) */
body .evitement, body .ar-son, body .ar-son *, body .ar-final h2, body .ar-final p:not([class*="btn"]), body .ar-chiffres li:nth-child(odd), body .ar-chiffres li:nth-child(odd) *, body .ar-c2, body .ar-c2 * { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
body .ar-son svg { fill: #fff; }

/* Titre H1 de l'accueil : étiquette penchée, centrée (choix du 03/10, msg 4299) */
body .ar-hero .ar-kw { display: block; text-align: center; background: var(--moutarde) !important; color: #fff !important; padding: 10px 18px; border-radius: 10px; transform: rotate(-2deg); box-shadow: 6px 6px 0 var(--encre); border: 3px solid var(--encre); font-size: clamp(23px, 3.1vw, 32px); margin: 22px 10px 10px 4px; }

/* Horaires dans un encadré (msg 4300) ; option 2 = menu déroulant, fermé au départ */
.ar-horaires-bloc { background: #fff; color: var(--encre); border: 3px solid var(--encre); border-radius: 22px; box-shadow: 6px 6px 0 var(--rouge); padding: 18px 20px; margin-top: 22px; }
.ar-horaires-bloc summary { font-family: var(--ar-titre); font-weight: 700; font-size: 20px; list-style: none; pointer-events: none; }
.ar-horaires-bloc summary::-webkit-details-marker { display: none; }
.ar-horaires-bloc .ar-horaires-titre { color: var(--rouge); }
.ar-horaires-bloc dd { white-space: nowrap; }




/* Textes et sous-textes agrandis (msg 4301) : environ +2 px partout */
body main p, body main li, body main dt, body main dd { font-size: 18px; }
body .ar-prose p, body .ar-intro, body .ar-intro p, body main address span, body main address a { font-size: 19px; }
body .ar-sous, body .ar-sous p { font-size: 20px; }
body .ar-occ-texte span, body .ar-grille-occ .ar-occ:first-child .ar-occ-texte span { font-size: 17.5px; }
body .ar-chiffres span, body[class*="chiffres-"] .ar-chiffres span { font-size: 17px; }
body .ar-faq-tete p:last-child, body .ar-faq p { font-size: 18px; }
body main summary h3 { font-size: 19px; }
body .ar-avis-carte blockquote { font-size: 20px; }
body .ar-avis-carte figcaption { font-size: 17px; }
body .rebours-texte { font-size: 16px; }
body .rebours-titre small { font-size: 14px; }
@media (min-width: 900px) {
  body main p, body main li, body main dt, body main dd { font-size: 19px; }
  body .ar-prose p, body .ar-intro, body .ar-intro p { font-size: 20px; }
  body .ar-sous, body .ar-sous p { font-size: 21px; }
}
/* Les boutons et étiquettes gardent leur taille */
body main .ar-oeil { font-size: clamp(16px, 2.2vw, 20px); }
@media (max-width: 480px) { body main .ar-oeil { font-size: 15px; } }
body main .ar-btn, body main .ar-son span { font-size: 16px; }
body .ar-etapes ol li span { font-size: 17.5px; }
body .ar-faq summary h3 { font-size: 19px; }
body .ar-occ-texte em { font-size: 17.5px; }
body .ar-final p { font-size: 19px; }
body .rebours .rebours-texte { font-size: 16px; }
body .rebours-cases li span { font-size: 12px; }

/* Haut de l'accueil : accroche + titre centrés au-dessus, vidéo plus grande (msg 4302-4304) */
.ar-hero-tete { text-align: center; margin-bottom: 26px; }
.ar-hero-tete .ar-geant { margin: 0 auto; max-width: 16ch; }
body .ar-hero-tete .ar-kw { display: inline-block; margin: 22px auto 0; }
@media (min-width: 900px) {
  .ar-hero-tete { margin-bottom: 40px; }
  .ar-hero-tete .ar-geant { max-width: none; }
  .ar-hero-avec-video .ar-hero-grille { grid-template-columns: .7fr 1.3fr; gap: 40px; }
  .ar-hero-avec-video .ar-hero-video { aspect-ratio: 16 / 10; }
}
/* Bandeau qui défile : fond bordeaux (msg 4305) */

body .ar-horaires-bloc .ar-horaires-titre { font-weight: 800; }
body .ar-horaires-bloc .ar-horaires { grid-template-columns: minmax(0, 1fr) auto; }




/* Toutes les étiquettes de section penchées, comme le titre (msg 4307) */
body .ar-oeil { transform: rotate(-2deg); border: 3px solid var(--encre); box-shadow: 4px 4px 0 var(--encre); border-radius: 10px; }
/* Titres des cartes Agilité, Adresse, Réflexion centrés (msg 4306) */
body .ar-fam-carte h3 { text-align: center; }

/* Horaires : deux menus déroulants (msg 4312) */
.ar-horaires-groupe { display: grid; gap: 14px; margin-top: 22px; }
body .ar-horaires-groupe .ar-horaires-bloc { margin-top: 0; padding: 14px 18px; }
body .ar-horaires-groupe .ar-horaires-bloc summary { pointer-events: auto; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 18px; line-height: 1.3; }
body .ar-horaires-groupe .ar-horaires-bloc summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 3px solid var(--rouge); border-bottom: 3px solid var(--rouge); transform: rotate(45deg); margin: -6px 4px 0 0; }
body .ar-horaires-groupe .ar-horaires-bloc[open] summary::after { transform: rotate(-135deg); margin-top: 6px; }
body .ar-horaires-groupe .ar-horaires { margin-top: 12px; }
/* Bandeau bordeaux : textes en blanc (msg 4316) */

/* Accroche sur une seule ligne sur ordinateur (msg 4321) */
@media (min-width: 900px) { body .ar-hero-tete .ar-geant { white-space: nowrap; font-size: clamp(30px, 3.2vw, 46px); } }

/* Ordinateur : Agilité à gauche, Réflexion au centre, Adresse à droite (msg 4325) */
@media (min-width: 900px) { body .ar-fam-grille .ar-c3 { order: 2; } body .ar-fam-grille .ar-c2 { order: 3; } }

/* Carte Agilité en bleu lagon (choix du 03/10, msg 4338) */
body .ar-fam-carte.ar-c1 { background: #1E7F86; color: #fff; }

/* Haut de l'accueil : plus d'air entre l'étiquette, l'accroche et le titre (msg 4341) */
body .ar-hero-tete .ar-oeil { margin-bottom: 30px; }
body .ar-hero-tete .ar-kw { margin-top: 34px; }
@media (min-width: 900px) { body .ar-hero-tete .ar-oeil { margin-bottom: 36px; } body .ar-hero-tete .ar-kw { margin-top: 40px; } }

/* Phrase d'intro des occasions sur une seule ligne sur ordinateur, sans coupure après « et » (msg 4343) */
@media (min-width: 900px) { body .ar-occ-bloc .ar-intro { max-width: none; } }

/* Avis : des étiquettes penchées qui défilent en bandeau, une étiquette par avis (msgs 4327, 4344) */
.ar-avis-defile { overflow: hidden; padding: 18px 0 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ar-avis-piste { display: flex; gap: 26px; width: max-content; align-items: center; animation: avis-defile var(--duree, 60s) linear infinite; }
.ar-avis-defile:hover .ar-avis-piste { animation-play-state: paused; }
@keyframes avis-defile { to { transform: translateX(calc(-50% - 13px)); } }
@media (prefers-reduced-motion: reduce) { .ar-avis-piste { animation-duration: calc(var(--duree, 60s) * 2); } }
body .ar-avis-piste .ar-avis-carte { flex: none; width: auto; max-width: min(330px, 76vw); padding: 12px 16px 12px; border-radius: 12px; border: 3px solid var(--encre); box-shadow: 4px 4px 0 var(--encre); background: #fff; color: var(--encre); transform: rotate(-2deg); }
body .ar-avis-piste .ar-avis-carte:nth-child(even) { transform: rotate(1.5deg); }
body .ar-avis-piste .ar-avis-carte:nth-child(3n+2) { background: var(--moutarde); }
body .ar-avis-piste .ar-avis-carte:nth-child(3n) { background: #7C1520; }
body .ar-avis-piste .ar-avis-carte:is(:nth-child(3n+2), :nth-child(3n)) :is(blockquote, figcaption) { color: #fff; }
body .ar-avis-piste .ar-avis-carte:nth-child(3n+2) .etoiles svg { fill: #fff; }
body .ar-avis-piste .ar-avis-carte .etoiles svg { width: 14px; height: 14px; }
body .ar-avis-piste .ar-avis-carte blockquote { margin: 6px 0 6px; font-size: 16.5px; line-height: 1.35; font-weight: 700; }
body .ar-avis-piste .ar-avis-carte figcaption { font-size: 14.5px; font-weight: 800; }
/* Action game : trois photos en cadres penchés (msg 4362) */








/* Les défis : texte centré sous chaque étiquette (msg 4363) */
body .ar-fam-carte, body .ar-fam-carte p { text-align: center; }




/* ---------- Les 5 repères du parc en billet d'embarquement (choix du 03/10, msg 4392 : option 7) ---------- */
.ar-atouts { padding: 40px var(--gouttiere, 16px); background: #14100F; }
.ar-atouts-liste { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; grid-template-columns: 1fr; background: #F7EEDD; color: var(--encre); border-radius: 18px; border: 3px solid var(--encre); box-shadow: 6px 6px 0 var(--moutarde); overflow: hidden; }
.ar-atouts li { color: var(--encre); display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 18px; border-top: 2px dashed rgba(20,16,15,.35); }
.ar-atouts li:first-child { border-top: 0; }
.ar-atouts .ar-ch-picto { display: block; grid-row: span 2; width: 34px; height: 34px; color: #7C1520; stroke-width: 1.6; fill: none; stroke: currentColor; }
.ar-atouts b { display: block; font-family: var(--ar-titre); font-weight: 700; font-size: 24px; }
.ar-atouts span { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: #5A4A40; }
@media (min-width: 900px) {
  .ar-atouts-liste { grid-template-columns: repeat(5, 1fr); }
  .ar-atouts li { grid-template-columns: 1fr; text-align: center; border-top: 0; border-left: 2px dashed rgba(20,16,15,.35); padding: 22px 12px; }
  .ar-atouts li:first-child { border-left: 0; }
  .ar-atouts .ar-ch-picto { grid-row: auto; margin: 0 auto 8px; }
}

/* Action game : photos en grand, en carrousel sous le texte (msg 4381) */
.ar-exp-texte { max-width: 820px; }
.ar-exp .ar-carrousel.ar-exp-photos { margin-top: 26px; }
.ar-exp-photos .ar-cadre img { aspect-ratio: 4 / 3; border-radius: 18px; box-shadow: 6px 6px 0 var(--encre); }
@media (min-width: 900px) {
  .ar-exp .ar-carrousel.ar-exp-photos { grid-auto-columns: 46%; }
  .ar-carrousel-cadre.glissable .ar-carrousel.ar-exp-photos { grid-auto-columns: 56%; padding-inline: 22%; }
}

/* Carrousel Action game : la photo du centre passe devant et grandit, ses voisines reculent, légèrement floutées (msg 4415) */
.ar-carrousel-cadre.glissable .ar-carrousel.ar-exp-photos { gap: 0; padding-block: 26px 30px; }
.ar-carrousel-cadre.glissable .ar-carrousel.ar-exp-photos > * { position: relative; z-index: 1; transform: scale(.8); opacity: .85; filter: blur(2px) brightness(.75); transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s, opacity .6s; }
.ar-carrousel-cadre.glissable .ar-carrousel.ar-exp-photos > .au-centre { z-index: 3; transform: scale(1.08); opacity: 1; filter: none; }
.ar-carrousel-cadre.glissable .ar-carrousel.ar-exp-photos > .au-centre img { box-shadow: 8px 8px 0 var(--encre), 0 18px 40px rgba(0,0,0,.55); }
@media (prefers-reduced-motion: reduce) { .ar-carrousel-cadre.glissable .ar-carrousel.ar-exp-photos > * { transition: none; } }
@media (max-width: 899px) { .ar-carrousel-cadre.glissable .ar-carrousel.ar-exp-photos { grid-auto-columns: 72%; padding-inline: 14%; } }

/* ---------- Version téléphone redimensionnée (msg 4424) : tout un cran plus petit, plus serré ---------- */
@media (max-width: 599px) {
  body .ar-bloc { padding: 42px 0; }
   body.v-arcade2 h2 { font-size: 25px; line-height: 1.12; }
  body .ar-hero-tete .ar-geant { font-size: 30px; }
  body .ar-page-hero .ar-geant { font-size: 28px; }
  body .ar-hero .ar-kw { font-size: 19px; padding: 8px 12px; margin: 18px 6px 6px; box-shadow: 4px 4px 0 var(--encre); }
  body .ar-hero-tete { margin-bottom: 18px; }
  body .ar-hero-tete .ar-oeil { margin-bottom: 20px; }
  body .ar-hero-tete .ar-kw { margin-top: 22px; }
  body main .ar-oeil { font-size: 13px; padding: 6px 12px; margin-bottom: 14px; box-shadow: 3px 3px 0 var(--encre); }
  body main p, body main li, body main dt, body main dd { font-size: 16px; }
  body .ar-prose p, body .ar-intro, body .ar-intro p, body main address span, body main address a { font-size: 16.5px; }
  body .ar-sous, body .ar-sous p { font-size: 17px; }
  body .ar-occ-texte span, body .ar-grille-occ .ar-occ:first-child .ar-occ-texte span, body .ar-occ-texte em { font-size: 15.5px; }
  body .ar-chiffres span, body[class*="chiffres-"] .ar-chiffres span { font-size: 15px; }
  body .ar-faq-tete p:last-child, body .ar-faq p { font-size: 16px; }
  body main summary h3, body .ar-faq summary h3 { font-size: 17px; }
  body .ar-etapes ol li span { font-size: 15.5px; }
  body .ar-final p { font-size: 17px; }
  body main .ar-btn, body main .ar-son span { font-size: 15px; }
  /* Cartes Agilité / Adresse / Réflexion et étapes : photos moins hautes */
  body .ar-fam-carte { padding: 14px; border-radius: 20px; }
  body .ar-fam-carte img { aspect-ratio: 2 / 1; margin-bottom: 10px; }
  body .ar-fam-carte h3 { font-size: 26px; }
  body .ar-etapes li { padding: 12px; }
  body .ar-etape-visuel img { aspect-ratio: 2 / 1; }
  body .ar-picto { width: 46px; height: 46px; left: 10px; bottom: 10px; }
  body .ar-picto svg { width: 24px; height: 24px; }
  /* Billet d'embarquement plus compact */
  body .ar-atouts { padding: 28px 16px; }
  body .ar-atouts li { grid-template-columns: 30px 1fr; padding: 9px 14px; column-gap: 10px; }
  body .ar-atouts .ar-ch-picto { width: 26px; height: 26px; }
  body .ar-atouts b { font-size: 18px; }
  body .ar-atouts span { font-size: 11px; }
  /* Avis en étiquettes : plus petites */
  body .ar-avis-piste .ar-avis-carte { max-width: 72vw; padding: 10px 13px; }
  body .ar-avis-piste .ar-avis-carte blockquote { font-size: 15px; }
  body .ar-avis-piste .ar-avis-carte figcaption { font-size: 13px; }
}

/* ---------- Version tablette (msg 4425) : entre le téléphone et l'ordinateur ---------- */
@media (min-width: 600px) and (max-width: 899px) {
  body .ar-bloc { padding: 54px 0; }
   body.v-arcade2 h2 { font-size: 36px; }
  body .ar-hero-tete .ar-geant { font-size: 46px; max-width: 18ch; }
  body .ar-page-hero .ar-geant { font-size: 42px; }
  body .ar-hero .ar-kw { font-size: 24px; }
  body main p, body main li, body main dt, body main dd { font-size: 17px; }
  body .ar-prose p, body .ar-intro, body .ar-intro p { font-size: 18px; }
  body .ar-sous, body .ar-sous p { font-size: 19px; }
  body .ar-fam-carte h3 { font-size: 28px; }
  /* Billet : les 5 talons côte à côte, comme sur ordinateur */
  body .ar-atouts-liste { grid-template-columns: repeat(5, 1fr); }
  body .ar-atouts li { grid-template-columns: 1fr; text-align: center; border-top: 0; border-left: 2px dashed rgba(20,16,15,.35); padding: 18px 8px; }
  body .ar-atouts li:first-child { border-left: 0; }
  body .ar-atouts .ar-ch-picto { grid-row: auto; margin: 0 auto 6px; width: 30px; height: 30px; }
  body .ar-atouts b { font-size: 19px; }
  body .ar-atouts span { font-size: 11px; letter-spacing: .08em; }
}

/* Bon à savoir : texte sans gras (msg 4437) */
body .ar-savoir-liste li, body .ar-savoir-liste li strong { font-weight: 400; }

/* ---------- Formules en billets (msgs 4438, 4439) : un billet par formule, bouton Réserver en pied ---------- */
.ar-formules { display: grid; gap: 26px; margin-top: 30px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: stretch; }
.ar-formule { display: flex; flex-direction: column; background: #F7EEDD; color: var(--encre); border: 3px solid var(--encre); border-radius: 18px; box-shadow: 6px 6px 0 var(--encre); overflow: hidden; }
.ar-formule-tete { position: relative; padding: 26px 20px 22px; text-align: center; color: #fff; background: var(--rouge); border-bottom: 3px solid var(--encre); }
.ar-formule-moutarde .ar-formule-tete { background: var(--moutarde); }
.ar-formule-bordeaux .ar-formule-tete { background: #7C1520; }
body main .ar-formule-tete h3 { margin: 0; color: #fff; font-family: "Montserrat", "Montserrat Repli", sans-serif; font-weight: 700; font-size: 27px; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; text-wrap: balance; text-shadow: 2px 2px 0 rgba(20,16,15,.35); }
.ar-formule-etiquette { display: inline-block; margin-bottom: 12px; padding: 5px 12px; background: var(--encre); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border-radius: 6px; transform: rotate(-2deg); }
.ar-formule-corps { flex: 1; padding: 20px 22px 6px; }
body main .ar-formule-texte { margin: 0 0 14px; font-size: 17px; line-height: 1.5; color: var(--encre); }
body main .ar-formule-titre { margin: 14px 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #7C1520; }
.ar-formule-choix { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body main .ar-formule-choix li { padding: 6px 12px; border: 2px solid var(--encre); border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 700; color: var(--encre); }
body main .ar-formule-choix li.ar-ou { padding: 0; border: 0; background: none; font-weight: 600; color: #5A4A40; }
.ar-formule-inclus { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
body main .ar-formule-inclus li { position: relative; padding-left: 26px; font-size: 15.5px; font-weight: 500; color: var(--encre); }
.ar-formule-inclus li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--rouge); }
.ar-formule-inclus li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ar-formule-pied { margin-top: 16px; padding: 16px 22px 22px; border-top: 2px dashed rgba(20,16,15,.4); display: grid; gap: 14px; justify-items: center; text-align: center; }
.ar-formule-conditions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
body main .ar-formule-conditions li { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5A4A40; }
.ar-formule-pied .ar-btn { width: 100%; text-align: center; }
@media (max-width: 599px) {
  body main .ar-formule-tete h3 { font-size: 23px; }
  .ar-formule-tete { padding: 20px 16px 18px; }
  .ar-formule-corps { padding: 16px 18px 4px; }
  body main .ar-formule-texte { font-size: 16px; }
}

/* Formules : présentation d'origine retenue (msgs 4457, 4464-4465 : réponse sur la capture du premier envoi), photo non affichée */
.ar-formule-photo { display: none; }
/* Couleurs supplémentaires pour le haut des billets (msg 4457) */
.ar-formule-canard .ar-formule-tete { background: #1E7F86; }
.ar-formule-noir .ar-formule-tete { background: #1A1412; }
.ar-formule-nuit .ar-formule-tete { background: #243B5E; }
.ar-formule-lagon .ar-formule-tete { background: #1593A0; }
.ar-formule-ocean .ar-formule-tete { background: #1F5FA8; }
.ar-formule-noir .ar-formule-etiquette { background: #fff; color: var(--encre); }

/* ---------- Barre noire au-dessus du menu, à la hauteur du menu (msgs 4480, 4485) ---------- */
/* 1 280 px : la barre n'existe qu'à partir de là (site.css) ; à 900 px le menu se décalait de 67 px dans le vide */
@media (min-width: 1280px) {
  body .barre-haut { min-height: 67px; padding-block: 0; font-size: 16.5px; }
  body .barre-haut ul { gap: 34px; }
  body .barre-haut a { font-size: 16.5px; }
  /* Fixe au défilement, comme le menu (msg 4486) */
  body .barre-haut { position: sticky; top: 0; z-index: 21; }
  body .barre-haut ~ .entete { top: 67px; }
}

/* Arrière-plan du haut des pages : couloir recadré vers le haut, voile allégé (msgs 4484, 4490) */
body.fond-5 .ar-hero { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/couloir-ancre-1600.webp); background-position: center 22%; }
/* Arrière-plans au crâne recadrés sur le crâne, voile allégé (msg 4492) */
body.fond-5 .ar-occ-bloc { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/crane-porte-1600.webp); background-position: center 6%; }
body.fond-5 main > section.ar-bloc:nth-of-type(6n+5):not([class*="ar-occ"]) { background-position: center 40%; }
body.fond-5 :where(main > section.ar-bloc:nth-of-type(6n+5)) { background-image: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/crane-chapeau-1600.webp); }
/* Billet d'embarquement : plus de fond noir, la photo du haut continue derrière (msg 4493) */
body.fond-5 .ar-atouts { background: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/couloir-ancre-1600.webp) center 22% / cover fixed; }
@media (max-width: 899px) { body.fond-5 .ar-atouts { background: linear-gradient(var(--voile-haut), var(--voile-bas)), url(/images/couloir-ancre-1600.webp) center bottom / cover scroll; } }

/* Trophée de la note Google, en haut de chaque page (msg 4494) */
.ar-trophee-place { position: relative; z-index: 3; display: flex; justify-content: flex-end; margin-top: -62px; margin-bottom: 22px; }
.ar-trophee { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 8px; padding: 12px 20px 14px 14px; background: #F7EEDD; color: var(--encre); border: 3px solid var(--encre); border-radius: 18px; box-shadow: 6px 6px 0 var(--moutarde); transform: rotate(-1.5deg); }
body main .ar-trophee-mention { grid-column: 1 / -1; margin: 0; font-size: 15px; font-weight: 800; line-height: 1.25; color: #7C1520; white-space: pre-line; text-align: center; }





.ar-trophee-etoiles { display: flex; gap: 2px; }
.ar-trophee-etoiles svg { width: 17px; height: 17px; fill: var(--moutarde); stroke: var(--encre); stroke-width: 1.6; stroke-linejoin: round; }
@media (max-width: 599px) {
  .ar-trophee-place { justify-content: center; margin-top: -22px; }
  .ar-trophee { padding: 10px 14px 12px 10px; column-gap: 10px; }
  body main .ar-trophee-mention { text-align: center; font-size: 14px; }
  
  
  .ar-trophee-etoiles svg { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ar-trophee { transform: none; } }
/* Compte à rebours resserré pour que le trophée se voie dès l'ouverture (msg 4501) */
body .rebours .rebours-texte { display: none; }
@media (max-width: 899px) {
  body .rebours .rebours-w { grid-template-columns: 1fr; padding-block: 12px 30px; gap: 8px; }
  body .rebours .rebours-titre { font-size: 16px; }
  body .rebours .rebours-titre small { display: none; }
  body .rebours .rebours-cases { gap: 6px; }
  body .rebours .rebours-cases b { font-size: 24px; }
  body .rebours .ar-btn { justify-self: stretch; text-align: center; padding: 9px 14px; font-size: 14px; }
}
@media (min-width: 900px) { body .rebours .rebours-w { padding-block: 10px 20px; } }

/* Billet à 6 talons, une seule police pour tout le texte (msgs 4495, 4499) */
body .ar-atouts li { grid-template-rows: auto; }
body .ar-atouts .ar-ch-picto { grid-row: auto; }
body .ar-atouts .ar-atouts-txt { display: block; font-family: var(--ar-titre); font-weight: 700; font-size: 18px; line-height: 1.25; text-transform: none; letter-spacing: 0; color: var(--encre); }
@media (max-width: 599px) { body .ar-atouts .ar-atouts-txt { font-size: 16px; } }
@media (min-width: 600px) and (max-width: 1099px) {
  body .ar-atouts-liste { grid-template-columns: repeat(3, 1fr); }
  body .ar-atouts li:nth-child(3n+1) { border-left: 0; }
  body .ar-atouts li:nth-child(n+4) { border-top: 2px dashed rgba(20,16,15,.35); }
}
@media (min-width: 1100px) {
  body .ar-atouts-liste { grid-template-columns: repeat(6, 1fr); }
  body .ar-atouts li { padding: 22px 12px; }
}

/* Un seul voile pour toutes les photos de fond, celui du haut de page (msg 4502) */
:root { --voile-haut: rgba(20,16,15,.58); --voile-bas: rgba(20,16,15,.74); }

/* Note Google dans la bande du compte à rebours, à l'accueil (msg 4503) */
body .rebours-avec-trophee .rebours-w { grid-template-columns: 1fr; padding-block: 14px 18px; gap: 16px; }
.rebours-avec-trophee .rebours-bloc { display: grid; gap: 8px; }
.rebours-avec-trophee .ar-trophee { justify-self: center; order: 2; }
@media (min-width: 600px) and (max-width: 1199px) {
  .rebours-avec-trophee .rebours-bloc { grid-template-columns: 1fr auto; grid-template-areas: "titre titre" "cases btn"; align-items: center; column-gap: 14px; }
  .rebours-avec-trophee .rebours-bloc > div { grid-area: titre; }
  .rebours-avec-trophee .rebours-cases { grid-area: cases; }
  body .rebours-avec-trophee .ar-btn { grid-area: btn; justify-self: end; }
}
@media (min-width: 1200px) {
  body .rebours-avec-trophee .rebours-w { grid-template-columns: max-content 1fr; align-items: center; gap: 36px; padding-block: 14px; }
  .rebours-avec-trophee .ar-trophee { order: 0; justify-self: start; }
  .rebours-avec-trophee .rebours-bloc { grid-template-columns: auto auto; grid-template-areas: "titre titre" "cases btn"; justify-content: end; align-items: center; gap: 8px 18px; }
  .rebours-avec-trophee .rebours-bloc > div { grid-area: titre; }
  body .rebours-avec-trophee .rebours-titre { font-size: 16px; }
  body .rebours-avec-trophee .rebours-titre small { display: inline; margin-right: 10px; }
  .rebours-avec-trophee .rebours-cases { grid-area: cases; grid-template-columns: repeat(4, 76px); }
  body .rebours-avec-trophee .rebours-cases b { font-size: 30px; }
  body .rebours-avec-trophee .ar-btn { grid-area: btn; white-space: nowrap; }
  .rebours-avec-trophee .rebours-cases { grid-template-columns: repeat(4, 70px); }
}

/* Note collée à gauche (msg 4508), compte à rebours qui démarre au niveau de l'étiquette « Découvrez notre action game » (msg 4511) */
@media (min-width: 1200px) {
  body .rebours-avec-trophee .rebours-w { max-width: none; padding-inline: 32px; grid-template-columns: 1fr 1fr; justify-content: stretch; }
  .rebours-avec-trophee .rebours-bloc { justify-self: start; justify-content: start; grid-template-columns: max-content 1fr; margin-left: max(-258px, calc(451px - 50vw)); }
  body .rebours-avec-trophee .ar-btn { justify-self: start; }
}

/* Fond de page : calque fixe noir derrière toute la page (le crâne validé le 03/10, msgs 4524-4541,
   a été remplacé le soir même par les couleurs de la charte, version 5, msg 4587 : voir plus bas). */
html:has(body.fond-5) { background: #14100F; }
body.fond-5 { background: transparent; }
body.fond-5::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #14100F; }
body.fond-5 main { background: transparent; }
:root body.fond-5 main > section:is(.ar-hero, .ar-bloc, .ar-pluie, .ar-atouts):not(.ar-final):not(.ar-sans-fond) { background: transparent; }

/* Bande compte à rebours + note fixe sous le menu, comme le menu (msg 4549).
   Dès qu'on descend, elle se resserre en une fine bande pour ne pas manger l'écran. */
:root { --haut-fixe: 66px; }
@media (min-width: 1280px) { :root { --haut-fixe: 134px; } }
body .rebours { position: sticky; top: var(--haut-fixe); z-index: 19; }
body .rebours.compact .rebours-w { padding-block: 6px; gap: 6px 18px; }
body .rebours.compact .ar-trophee-mention, body .rebours.compact .rebours-titre small { display: none; }
body .rebours.compact .ar-trophee { transform: none; padding: 5px 14px; box-shadow: 3px 3px 0 var(--moutarde); grid-template-columns: 1fr; border-width: 2px; }


body .rebours.compact .ar-trophee-etoiles svg { width: 12px; height: 12px; }
body .rebours.compact .rebours-titre { font-size: 13px; }
body .rebours.compact .rebours-cases li { padding: 2px 4px 1px; border-radius: 8px; }
body .rebours.compact .rebours-cases b { font-size: 20px; }
body .rebours.compact .rebours-cases span { font-size: 8.5px; }
body .rebours.compact .ar-btn { padding: 7px 14px; font-size: 13px; }
@media (max-width: 899px) {
  body .rebours.compact .rebours-w { padding-block: 6px 8px; }
  body .rebours.compact .rebours-titre, body .rebours.compact .ar-btn { display: none; }
  body .rebours.compact .rebours-cases { grid-template-columns: repeat(4, 1fr); }
  body .rebours.compact .ar-trophee { justify-self: stretch; text-align: center; }
  
}
@media (min-width: 900px) {
  body .rebours-avec-trophee.compact .rebours-w { grid-template-columns: auto auto; justify-content: space-between; align-items: center; }
  body .rebours-avec-trophee.compact .rebours-bloc { margin-left: 0; grid-template-columns: auto auto auto; grid-template-areas: "titre cases btn"; align-items: center; gap: 0 16px; justify-self: end; }
  body .rebours-avec-trophee.compact .ar-trophee { order: 0; justify-self: start; }
}

/* Vidéo du haut de page en tirage photo penché, version 2 choisie le 03/10 (msg 4566) */
.ar-video-cadre { margin: 0; width: 100%; background: #F7EEDD; padding: 14px 14px 0; border: 3px solid var(--encre); border-radius: 6px; transform: rotate(-2deg); box-shadow: 12px 14px 0 rgba(0,0,0,.45); }
.ar-video-cadre .ar-hero-video { border: 2px solid var(--encre); border-radius: 3px; box-shadow: none; }
.ar-video-cadre figcaption { display: block; text-align: center; font-family: var(--ar-titre); font-weight: 700; font-size: 22px; letter-spacing: .04em; color: var(--encre); padding: 12px 0 14px; }
@media (max-width: 599px) { .ar-video-cadre { padding: 8px 8px 0; box-shadow: 7px 8px 0 rgba(0,0,0,.45); } .ar-video-cadre figcaption { font-size: 16px; padding: 8px 0 10px; } }
@media (prefers-reduced-motion: reduce) { .ar-video-cadre { transform: none; } }

/* Réseaux sociaux en pied de page (msg 4551) */
body .pied ul.pied-reseaux { list-style: none; display: flex; flex-direction: row; grid-template-columns: none; columns: auto; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; }
body .pied .pied-reseaux li { margin: 0; padding: 0; }
body .pied .pied-reseaux a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--moutarde); color: #fff; background: transparent; transition: background .2s, color .2s; }
body .pied .pied-reseaux a:hover, body .pied .pied-reseaux a:focus-visible { background: var(--moutarde); color: var(--encre); }
.pied-reseaux svg { width: 19px; height: 19px; fill: currentColor; }

/* Étiquette des notes en « billet », version 3 choisie le 03/10 (msg 4565) :
   bandeau bordeaux texte blanc, deux talons séparés par un pointillé, encoches sur les côtés. */
body .ar-trophee.ar-billet { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; width: 400px; max-width: 100%; background: #F7EEDD; border: 3px solid var(--encre); border-radius: 14px; box-shadow: 6px 6px 0 var(--moutarde); transform: rotate(-1deg); }
body .ar-billet.ar-billet-seul { grid-template-columns: 1fr; width: 220px; }
body main .ar-billet .ar-trophee-mention { grid-column: 1 / -1; margin: 0; padding: 8px 10px; background: #7C1520; color: #fff; font-family: var(--ar-titre); font-weight: 700; font-size: 14px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; text-align: center; white-space: pre-line; border-radius: 10px 10px 0 0; border-bottom: 3px solid var(--encre); }
.ar-billet-talon { display: grid; justify-items: center; align-content: center; gap: 4px; padding: 10px 8px 12px; color: var(--encre); text-decoration: none; text-align: center; }
.ar-billet-talon + .ar-billet-talon { border-left: 2px dashed rgba(20,16,15,.45); }
body main .ar-billet-talon b { font-family: var(--ar-titre); font-weight: 700; font-size: 30px; line-height: 1; color: var(--encre); }
.ar-billet-site { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5A4A40; }
.ar-billet-talon:hover .ar-billet-site, .ar-billet-talon:focus-visible .ar-billet-site { text-decoration: underline; }
.ar-billet .ar-trophee-etoiles svg { width: 15px; height: 15px; }
.ar-billet::before, .ar-billet::after { content: ""; position: absolute; top: 62%; width: 16px; height: 16px; background: #14100F; border: 3px solid var(--encre); border-radius: 50%; }
.ar-billet::before { left: -10px; } .ar-billet::after { right: -10px; }
@media (max-width: 599px) {
  body .ar-trophee.ar-billet { width: 330px; }
  body main .ar-billet .ar-trophee-mention { font-size: 12px; padding: 7px 8px; }
  body main .ar-billet-talon b { font-size: 25px; }
  .ar-billet-site { font-size: 10px; }
  .ar-billet .ar-trophee-etoiles svg { width: 13px; height: 13px; }
}
@media (prefers-reduced-motion: reduce) { body .ar-trophee.ar-billet { transform: none; } }
/* Billet resserré quand la bande se resserre au défilement : talons côte à côte, sans bandeau */
body .rebours.compact .ar-trophee.ar-billet { width: auto; transform: none; padding: 0; border-width: 2px; border-radius: 10px; box-shadow: 3px 3px 0 var(--moutarde); grid-template-columns: auto auto; }
body .rebours.compact .ar-billet::before, body .rebours.compact .ar-billet::after { display: none; }
body .rebours.compact .ar-billet-talon { grid-auto-flow: column; align-items: center; gap: 6px; padding: 4px 12px; }
body main .rebours.compact .ar-billet-talon b { font-size: 16px; }
body .rebours.compact .ar-billet .ar-trophee-etoiles svg { width: 11px; height: 11px; }
body .rebours.compact .ar-billet-site { font-size: 9.5px; }
@media (max-width: 899px) { body .rebours.compact .ar-trophee.ar-billet { justify-self: center; } }
@media (max-width: 599px) {
  body .rebours.compact .ar-billet .ar-trophee-etoiles { display: none; }
  body .rebours.compact .ar-billet-talon { padding: 4px 10px; gap: 5px; }
  body .rebours.compact .ar-billet-site { white-space: nowrap; }
}

/* Fonds aux couleurs de la charte, version 5 choisie le 03/10 (msg 4587) : noir, bordeaux, noir, bordeaux.
   Trois changements par page seulement (msg 4579) : les sections sont réparties en 4 zones égales selon
   leur nombre sur chaque page (script dans base.njk, attribut data-zone). */
:root { --zone-0: #14100F; --zone-1: #7C1520; --zone-2: #14100F; --zone-3: #7C1520; }
:root body.fond-5 main > section[data-zone="0"]:not(.ar-final):not(.ar-sans-fond) { background: var(--zone-0); }
:root body.fond-5 main > section[data-zone="1"]:not(.ar-final):not(.ar-sans-fond) { background: var(--zone-1); }
:root body.fond-5 main > section[data-zone="2"]:not(.ar-final):not(.ar-sans-fond) { background: var(--zone-2); }
:root body.fond-5 main > section[data-zone="3"]:not(.ar-final):not(.ar-sans-fond) { background: var(--zone-3); }

/* « Le concept » : photos à droite du texte sur ordinateur (msg 4573), en grand, sur toute la hauteur du texte (msg 4580).
   Une photo à la fois, qui change toutes les 3 s ; sous le texte sur téléphone. */
@media (min-width: 900px) {
  .ar-exp-duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; gap: 44px; max-width: 1240px; margin: 0 auto; padding-inline: 32px; }
  .ar-exp-duo > .ar-w { max-width: none; margin: 0; padding: 0; align-self: center; }
  .ar-exp-duo .ar-carrousel-cadre { min-width: 0; display: flex; flex-direction: column; }
  body .ar-exp-duo .ar-carrousel.ar-exp-photos, body .ar-exp-duo .ar-carrousel-cadre.glissable .ar-carrousel.ar-exp-photos { flex: 1; margin-top: 0; grid-auto-columns: 100%; grid-auto-rows: 100%; gap: 0; padding: 0; border-radius: 18px; border: 3px solid var(--encre); box-shadow: 8px 8px 0 var(--encre); }
  body .ar-exp-duo .ar-exp-photos .ar-cadre img { border-radius: 0; box-shadow: none; }
  body .ar-exp-duo .ar-carrousel-cadre.glissable .ar-carrousel.ar-exp-photos > * { transform: none; filter: none; opacity: 1; }
  .ar-exp-duo .ar-exp-photos .ar-cadre { height: 100%; margin: 0; }
  body .ar-exp-duo .ar-exp-photos .ar-cadre img { width: 100%; height: 100%; min-height: 440px; aspect-ratio: auto; object-fit: cover; display: block; }
  .ar-exp-duo .ar-carrousel-nav { padding-top: 14px; }
}

/* Tous les boutons d'action dans le bordeaux de l'étiquette « Le Repos du Quartier-Maître » (#7C1520), msg 4595.
   Les boutons blancs secondaires (téléphone, liens « Découvrir ») restent blancs. */
:root { --bouton: #7C1520; }
body .ar-btn:not(.ar-btn-2), body .ar-btn.ar-btn-noir, body main .ar-formule-pied .ar-btn { background: var(--bouton); color: #fff; }
 .v-arcade2 .btn-reserver { background: var(--bouton); border-color: var(--bouton); color: #fff; }
 .v-arcade2 .barre-tel .plein { background: var(--bouton); border-color: var(--bouton); color: #fff; }
/* Sur les sections bordeaux, le bouton bordeaux garde un contour blanc pour rester visible */
:root body.fond-5 main > section:is([data-zone="1"], [data-zone="3"]) .ar-btn:not(.ar-btn-2) { border-color: #fff; }

/* Étapes en parcours en arc autour du pirate (msgs 4590, 4596). Téléphone : pirate en haut, bulles l'une sous l'autre.
   Classe propre (pas .ar-etapes) pour échapper à l'animation des étapes en liste. */
.ar-etapes-arc { background: var(--encre); color: #fff; }
.ar-arc { position: relative; margin-top: 22px; }
.ar-arc-chemin { display: none; }
.ar-arc-pirate { width: 150px; height: 150px; margin: 0 auto 26px; border-radius: 50%; background: #F7EEDD; border: 4px solid var(--encre); box-shadow: 0 0 0 6px var(--moutarde); display: grid; place-items: center; }
.ar-arc-pirate img { width: 80%; height: auto; }
body .ar-etapes-arc ol.ar-arc-bulles { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: none; grid-template-columns: 1fr; }
body .ar-etapes-arc ol.ar-arc-bulles::before { content: ""; position: absolute; left: 37px; top: 10px; bottom: 10px; border-left: 3px dashed var(--moutarde); }
body .ar-etapes-arc .ar-arc-bulles li { position: relative; display: block; padding: 16px 18px 16px 74px; background: #F7EEDD; color: var(--encre); border: 3px solid var(--encre); border-radius: 22px; box-shadow: 6px 6px 0 var(--moutarde); }
body .ar-etapes-arc .ar-arc-bulles li::before { content: none; }
.ar-arc-bulles i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: #7C1520; border: 3px solid var(--encre); color: #fff; font-style: normal; font-family: var(--ar-titre); font-weight: 700; font-size: 26px; display: grid; place-items: center; }
body main .ar-etapes-arc .ar-arc-bulles b { display: block; font-family: var(--ar-titre); font-weight: 700; font-size: 20px; line-height: 1.15; color: var(--encre); }
body main .ar-etapes-arc .ar-arc-bulles span { display: block; margin-top: 5px; font-size: 15px; line-height: 1.4; color: #4A3C34; }
@media (min-width: 900px) {
  .ar-arc { height: 560px; max-width: 1128px; margin-inline: auto; }
  .ar-arc-chemin { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .ar-arc-chemin path { fill: none; stroke: var(--moutarde); stroke-width: 4; }
  .ar-arc-chemin path:first-child { stroke-dasharray: 10 10; }
  .ar-arc-pirate { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 240px; height: 240px; margin: 0; }
  body .ar-etapes-arc ol.ar-arc-bulles { position: absolute; inset: 0; display: block; }
  body .ar-etapes-arc ol.ar-arc-bulles::before { content: none; }
  body .ar-etapes-arc .ar-arc-bulles li { position: absolute; width: 250px; padding: 58px 16px 16px; text-align: center; }
  .ar-arc-bulles i { left: 50%; top: -24px; transform: translateX(-50%); }
  .ar-arc-b1 { left: 2.5%; top: 250px; } .ar-arc-b2 { left: 21.5%; top: 20px; } .ar-arc-b3 { right: 21.5%; top: 20px; } .ar-arc-b4 { right: 2.5%; top: 250px; }
}

/* Formules : bandeau du titre de la même hauteur sur toutes les cartes, titre centré, public (« 8 à 12 ans »,
   « Dès 13 ans ») en bas du bandeau, un peu plus gros (msg 4597). Les cartes d'une même rangée alignent aussi
   leur corps et leur pied (grille partagée). */
.ar-formules { grid-auto-rows: auto; }
.ar-formule { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
.ar-formule-tete { display: flex; flex-direction: column; align-items: center; justify-content: center; }
body main .ar-formule-tete h3 { order: 1; }
body .ar-formule-etiquette { order: 2; margin: 14px 0 0; font-size: 15px; padding: 6px 14px; }
@media (max-width: 599px) { body .ar-formule-etiquette { font-size: 14px; } }
/* Sur téléphone les cartes sont l'une sous l'autre : même hauteur de bandeau par une hauteur minimale */
@media (max-width: 899px) { .ar-formule-tete { min-height: 120px; } }
/* Titre centré dans l'espace libre, public collé en bas du bandeau ; bouton à hauteur normale en bas du pied */
body main .ar-formule-tete h3 { margin-block: auto; }
.ar-formule-tete { justify-content: flex-start; }
.ar-formule-pied { align-content: space-between; }
body main .ar-formule-pied .ar-btn { align-self: end; }

/* ---------- Liste à pictogrammes (salle de séminaire, msg 4678) ---------- */
.ar-pictos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.ar-pictos li { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.ar-picto-point { flex: none; width: 44px; height: 44px; padding: 9px; border-radius: 50%; background: var(--moutarde); border: 2px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Petit carrousel de photos dans une liste (restauration, msg 4681) : même taille que la photo seule ---------- */
.ar-liste-photos { min-width: 0; }
.ar-liste-photos .ar-carrousel-cadre { border-radius: 24px; overflow: hidden; border: 3px solid var(--encre); box-shadow: 8px 8px 0 var(--encre); }
body .ar-liste-photos .ar-carrousel.ar-liste-car, body .ar-liste-photos .ar-carrousel-cadre.glissable .ar-carrousel.ar-liste-car { grid-auto-columns: 100%; gap: 0; padding: 0; }
body .ar-liste-photos .ar-carrousel-cadre.glissable .ar-carrousel.ar-liste-car > * { transform: none; opacity: 1; filter: none; }
.ar-liste-car figure { margin: 0; scroll-snap-align: center; }
.ar-liste-car img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ar-liste-photos .ar-carrousel-cadre.glissable .ar-carrousel-nav { position: absolute; left: 0; right: 0; bottom: 8px; padding: 0; z-index: 2; }

/* Récupérer sa photo et sa vidéo + pop-up d'avis (msg 4686) */
.ar-medias-etapes { margin: 18px 0 24px; padding: 0; list-style: none; counter-reset: m; display: grid; gap: 12px; }
.ar-medias-etapes li { counter-increment: m; display: flex; align-items: center; gap: 14px; font-weight: 600; }
.ar-medias-etapes li::before { content: counter(m); flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--moutarde); color: #fff; border: 2px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); font-family: var(--ar-titre); font-weight: var(--ar-titre-poids); }
.ar-avis-pop { max-width: min(460px, calc(100vw - 32px)); width: 100%; border: 3px solid var(--encre); border-radius: 24px; box-shadow: 8px 8px 0 var(--encre); padding: 28px 24px 22px; background: #fff; color: var(--encre); text-align: center; }
.ar-avis-pop::backdrop { background: rgba(20, 12, 10, .72); }
.ar-avis-pop-titre { margin: 6px 0 10px; font-family: var(--ar-titre); font-weight: var(--ar-titre-poids); letter-spacing: var(--ar-titre-espace); font-size: clamp(24px, 6vw, 30px); line-height: 1.15; text-wrap: balance; }
.ar-avis-pop .ar-oeil { margin: 0 auto; }
.ar-avis-pop-liens { display: grid; gap: 12px; margin: 20px 0 16px; }
.ar-avis-pop-liens .ar-btn { justify-content: center; text-align: center; }
.ar-avis-pop-suite { display: inline-flex; justify-content: center; font-size: 13px; font-weight: 500; color: #6b5f5a; text-decoration: underline; text-underline-offset: 3px; }
.ar-avis-pop-suite.ar-btn { font-size: 16px; color: #fff; }
.ar-avis-pop-suite.ar-btn { text-decoration: none; }
.ar-avis-pop-x { position: absolute; top: 10px; right: 14px; font-size: 20px; line-height: 1; color: #6b5f5a; text-decoration: none; padding: 4px; }