/* =========================================================
   Site vitrine DToS — style.css (cœur, commun à toutes les instances)
   Couleurs et polices de l'instance : site/theme.css, chargé après ce fichier,
   redéfinit les variables ci-dessous. Valeurs ci-dessous = repli neutre.
   ========================================================= */

/* === 1. VARIABLES === */
:root {
  --fond:           #F7F9FB;   /* fond de page */
  --fond-2:         #EEF2F6;   /* fonds de section alternés */
  --fond-3:         #DDE4EC;   /* bordures, séparateurs */
  --primaire:       #2E75B6;   /* couleur principale */
  --primaire-fonce: #1F4E79;   /* boutons, titres de bandeau, pied de page */
  --primaire-clair: #BDD7EE;
  --primaire-pale:  #EAF2FA;
  --accent-clair:   #F6D8B8;   /* accent (détails, survols) */
  --accent:         #D9822B;
  --accent-fonce:   #A65E14;
  --texte:          #1B2733;   /* texte courant */
  --texte-doux:     #4A5A6A;
  --texte-pale:     #8A99A8;
  --white:       #FFFFFF;
  --ornement:    '◆';          /* motif du ruban d'articles (séparateurs : site/config.php → ornement) */

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --section-py: 5rem;
  --container-max: 1180px;
  --container-px: 1.5rem;

  --shadow-sm: 0 2px 8px color-mix(in srgb, var(--texte) 7%, transparent);
  --shadow-md: 0 6px 24px color-mix(in srgb, var(--texte) 11%, transparent);
  --shadow-lg: 0 12px 48px color-mix(in srgb, var(--texte) 15%, transparent);

  --ease:      .3s ease;
  --ease-slow: .6s ease;

  --radius:    6px;
  --radius-lg: 14px;

  /* En-tête fixe : 72px, plus le bandeau « Important » s'il est affiché (--important-h, inc/header.php) */
  --entete-h: calc(72px + var(--important-h, 0px));
}

/* === 2. RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--texte-couleur, var(--texte));   /* Paramètres → Apparence, sinon thème */
  background: var(--fond);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--primaire); outline-offset: 3px; }

/* Skip nav */
.skip-nav {
  position: absolute; top: -100%; left: 1rem;
  background: var(--primaire-fonce); color: var(--white);
  padding: .5rem 1rem; border-radius: var(--radius); z-index: 9999;
}
.skip-nav:focus { top: 1rem; }

/* === 3. TYPOGRAPHY === */
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.25; color: var(--titre-couleur, var(--texte)); }   /* Paramètres → Apparence */
/* --taille-titres : Paramètres → Apparence (1 = taille normale) */
h1 { font-size: calc(clamp(2.1rem, 5vw, 3.5rem) * var(--taille-titres, 1)); font-weight: 700; }
h2 { font-size: calc(clamp(1.7rem, 3.5vw, 2.5rem) * var(--taille-titres, 1)); font-weight: 600; }
h3 { font-size: calc(clamp(1.25rem, 2.5vw, 1.7rem) * var(--taille-titres, 1)); font-weight: 600; }
h4 { font-size: 1.15rem; font-weight: 600; }
p  { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 1.1rem; line-height: 1.85; color: var(--texte-doux); }

/* === 4. LAYOUT === */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}
.section { padding: var(--section-py) 0; }
.section--alt  { background: var(--fond-2); }
.section--primaire { background: var(--primaire-pale); }
.section--dark { background: var(--texte); color: var(--fond); }

/* Section header */
.section-header { text-align: center; margin-bottom: 3.5rem; }
/* Surtitres (.eyebrow, .hero-eyebrow) : --surtitre-police, --surtitre-taille (1 = normale), --surtitre-couleur,
   réglables dans site/theme.css ou Paramètres → Apparence ; sinon police du texte, .75rem, --primaire-fonce */
.eyebrow {
  display: inline-block; font-family: var(--surtitre-police, var(--sans));
  font-size: calc(.75rem * var(--surtitre-taille, 1)); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--surtitre-couleur, var(--primaire-fonce)); margin-bottom: .8rem;
}
.section-header h2 { margin-bottom: .9rem; }
.section-intro {
  max-width: 600px; margin: 0 auto;
  color: var(--texte-doux); font-size: 1.05rem;
}
.section-divider {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; margin: .75rem 0 1.5rem;
}
.section-divider::before, .section-divider::after {
  content: ''; height: 1px; width: 50px; background: var(--primaire-clair);
}
.section-divider span { color: var(--primaire); font-size: 1rem; }

/* === 5. NAVIGATION === */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: color-mix(in srgb, var(--fond) 96%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.site-header.scrolled {
  border-color: var(--fond-3);
  box-shadow: var(--shadow-sm);
}
.site-header > .container {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 72px;
}
.site-logo { flex: none; display: flex; align-items: center; transition: opacity var(--ease); }
.site-logo:hover { opacity: .8; }
.site-logo .logo-img { height: 58px; width: auto; }

.nav-list { display: flex; align-items: center; gap: .2rem; }
.nav-link {
  padding: .5rem .9rem; font-size: .875rem; font-weight: 400; white-space: nowrap;
  color: var(--texte-doux); border-radius: var(--radius);
  transition: color var(--ease); position: relative;
}
.nav-link::after {
  content: ''; position: absolute; bottom: 3px;
  left: .9rem; right: .9rem; height: 1px;
  background: var(--primaire); transform: scaleX(0);
  transition: transform var(--ease);
}
.nav-link:hover { color: var(--texte); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--texte); font-weight: 700; }

.btn-nav {
  background: var(--primaire) !important;
  color: var(--white) !important;
  padding: .5rem 1.25rem !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  transition: background var(--ease) !important;
}
.btn-nav::after { display: none !important; }

/* Sous-menus (Admin → Pages) : liste sous le nom, ouverte au survol, au clavier ou au clic (assets/js/app.js) */
.nav-groupe { position: relative; }
.nav-groupe-bouton { display: inline-flex; align-items: center; gap: .45rem; line-height: inherit; }
.nav-groupe-fleche {
  width: .4rem; height: .4rem; margin-top: -.2rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--ease), margin var(--ease);
}
.nav-groupe-bouton[aria-expanded="true"] .nav-groupe-fleche { margin-top: .2rem; transform: rotate(-135deg); }
.nav-sous-menu {
  position: absolute; top: 100%; left: 0; z-index: 10; min-width: 13rem; padding: .4rem;
  background: var(--fond); border: 1px solid var(--fond-3); border-radius: var(--radius); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.nav-groupe:hover .nav-sous-menu, .nav-groupe:has(:focus-visible) .nav-sous-menu,   /* clavier ; pas le focus d'un clic */
.nav-groupe-bouton[aria-expanded="true"] + .nav-sous-menu { opacity: 1; visibility: visible; transform: none; }
.nav-sous-menu .nav-link { display: block; padding: .55rem .8rem; }
.nav-sous-menu .nav-link::after { display: none; }
.nav-sous-menu .nav-link:hover, .nav-sous-menu .nav-link.active { background: var(--fond-2); }
.btn-nav:hover, .btn-nav.active { background: var(--primaire-fonce) !important; }

/* Bouton « Contraste élevé » (Paramètres → Apparence), à droite du menu ; menu poussé à droite */
.site-nav { margin-left: auto; }
.contraste-bouton {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-width: 40px; height: 40px; padding: 0 .8rem;
  border: 1.5px solid var(--fond-3); border-radius: 50px;
  color: var(--texte); font-size: .8rem; font-weight: 700;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.contraste-bouton:not(:has(.contraste-bouton-texte)) { padding: 0; }
.contraste-bouton:hover { border-color: var(--texte); }
.contraste-bouton[aria-pressed="true"] { background: var(--texte); border-color: var(--texte); color: var(--fond); }
.contraste-bouton svg { flex: none; }

/* Hamburger */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  padding: .5rem;
}
.hamburger {
  display: block; width: 22px; height: 2px;
  background: var(--texte); border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease);
}
.nav-toggle.open .hamburger:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open .hamburger:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open .hamburger:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu trop long pour la largeur de l'écran (assets/js/app.js) : d'abord resserré (--serre), puis s'il
   déborde encore, menu repliable comme sur téléphone (--compact : mêmes règles que la section 25, max-width: 768px) */
.site-header--serre > .container { gap: .5rem; }
.site-header--serre .nav-link { padding-left: .55rem; padding-right: .55rem; }
.site-header--serre .nav-link::after { left: .55rem; right: .55rem; }
.site-header--serre .btn-nav { margin-left: .3rem; }
.site-header--compact .nav-toggle { display: flex; }
.site-header--compact .site-nav {
  position: fixed; top: var(--entete-h); left: 0; right: 0;
  background: var(--fond); border-bottom: 1px solid var(--fond-3);
  box-shadow: var(--shadow-md); padding: 1.5rem 1rem;
  transform: translateY(-120%); opacity: 0; visibility: hidden;
  transition: transform var(--ease), opacity var(--ease), visibility var(--ease);
}
.site-header--compact .site-nav.open { transform: translateY(0); opacity: 1; visibility: visible; }
.site-header--compact .nav-list { flex-direction: column; align-items: stretch; gap: .2rem; }
.site-header--compact .nav-link { display: block; padding: .875rem 1rem; font-size: 1rem; }
.site-header--compact .nav-link::after { display: none; }
.site-header--compact .btn-nav { text-align: center; margin-top: .5rem; }
.site-header--compact .contraste-bouton { margin-left: auto; margin-right: .25rem; }
.site-header--compact .nav-groupe-bouton { display: flex; width: 100%; justify-content: space-between; text-align: left; }
.site-header--compact .nav-sous-menu {
  position: static; display: none; min-width: 0; padding: 0 0 0 1rem;
  border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none;
}
.site-header--compact .nav-groupe-bouton[aria-expanded="true"] + .nav-sous-menu { display: block; }

/* === 6. BUTTONS === */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .875rem 2rem;
  font-family: var(--sans); font-size: .875rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 50px; border: 2px solid transparent;
  transition: background var(--ease), color var(--ease), border-color var(--ease),
              transform var(--ease), box-shadow var(--ease);
  white-space: nowrap; line-height: 1;
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn-primary   { background: var(--primaire); color: var(--white); border-color: var(--primaire); }
.btn-primary:hover { background: var(--primaire-fonce); border-color: var(--primaire-fonce); }

.btn-outline   { background: transparent; color: var(--primaire-fonce); border-color: var(--primaire); }
.btn-outline:hover { background: var(--primaire); color: var(--white); }

.btn-white     { background: var(--white); color: var(--texte); border-color: var(--white); }
.btn-white:hover { background: var(--fond-2); }

.btn-outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-outline-white:hover { background: rgba(255,255,255,.15); border-color: var(--white); }

.btn-terracotta { background: var(--accent-fonce); color: var(--white); border-color: var(--accent-fonce); }
.btn-terracotta:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }

.btn-sm { padding: .6rem 1.35rem; font-size: .8rem; }
.btn-lg { padding: 1.1rem 2.5rem; font-size: .95rem; }

/* === 7. PAGE HERO (inner pages) === */
.page-hero {
  position: relative; padding: 6.5rem 0 4rem;
  margin-top: var(--entete-h); background: var(--fond-2); text-align: center;
  overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--primaire) 12%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
}
.page-hero .container { position: relative; }
.page-hero h1 { margin-bottom: 1rem; }
.page-hero .lead { margin: 0 auto; max-width: 600px; }

/* === 7b. RUBAN « ARTICLES » (sous le menu, pages choisies dans Paramètres) ===
   Posé sur le haut de la page (photo de l'accueil, fond crème des autres pages), détaché du menu par un
   filet (--bandeau-ecart) ; le contenu est décalé en dessous (--bandeau-espace-haut), et sur l'accueil
   garde de l'air en bas (--bandeau-espace-bas). Les trois valeurs viennent de Paramètres (blog_bandeau()).
   Couleurs --ruban-* : par défaut tirées du thème, redéfinissables dans site/theme.css, puis dans
   Paramètres → Ruban, « Couleurs personnalisées » (site_style_parametres(), qui prime) */
:root {
  --bandeau-h: 52px; --bandeau-ecart: 10px; --bandeau-espace-haut: 44px; --bandeau-espace-bas: 56px;
  --ruban-fond: var(--primaire-fonce); --ruban-texte: var(--fond);
  --ruban-etiquette: color-mix(in srgb, var(--primaire-fonce) 75%, #000); --ruban-etiquette-survol: var(--texte);
}
.bandeau-blog {
  position: absolute; z-index: 2; top: calc(var(--entete-h) + var(--bandeau-ecart)); left: 0; right: 0;
  display: flex; align-items: stretch; height: var(--bandeau-h); overflow: hidden;
  background: var(--ruban-fond); color: var(--ruban-texte);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--texte) 18%, transparent);
}
/* Avec le ruban, le hero prend la hauteur de son contenu : les écarts réglés sont exactement ceux affichés
   (sans ruban : plein écran, texte centré) */
.bandeau-blog + .hero {
  min-height: 0; align-items: flex-start;
  padding: calc(var(--bandeau-ecart) + var(--bandeau-h) + var(--bandeau-espace-haut)) 0 var(--bandeau-espace-bas);
}
.bandeau-blog + .page-hero, .bandeau-blog + .article > .page-hero:first-child {
  padding-top: calc(var(--bandeau-ecart) + var(--bandeau-h) + var(--bandeau-espace-haut));
}
.bandeau-etiquette {
  flex: none; display: flex; align-items: center; gap: .55rem;
  padding: 0 2.1rem 0 max(1.5rem, calc((100vw - var(--container-max)) / 2 + var(--container-px)));
  background: var(--ruban-etiquette); color: var(--ruban-texte);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  transition: background var(--ease);
}
.bandeau-etiquette:hover, .bandeau-etiquette:focus-visible { background: var(--ruban-etiquette-survol); }
.bandeau-etiquette-fleur { color: var(--accent-clair); font-size: 1rem; letter-spacing: 0; }
.bandeau-fenetre {
  flex: 1; min-width: 0; overflow: hidden; margin-left: -14px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 90%, transparent);
}
.bandeau-piste { display: flex; width: max-content; animation: bandeau-defile var(--bandeau-duree, 40s) linear infinite; }
.bandeau-blog:hover .bandeau-piste, .bandeau-blog:focus-within .bandeau-piste { animation-play-state: paused; }
@keyframes bandeau-defile { to { transform: translateX(-50%); } }
.bandeau-liste { display: flex; margin: 0; padding: 0 0 0 2.25rem; list-style: none; }  /* même retrait sur les deux moitiés : la boucle reste exacte */
.bandeau-liste li { display: flex; align-items: center; }
.bandeau-liste li::after { content: var(--ornement, '◆'); margin: 0 1.75rem; color: var(--accent-clair); opacity: .75; font-size: .8rem; }
.bandeau-item { display: flex; align-items: center; gap: .7rem; height: var(--bandeau-h); color: var(--ruban-texte); }
.bandeau-item img, .bandeau-fleur {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid color-mix(in srgb, var(--fond) 60%, transparent); transition: transform var(--ease), border-color var(--ease);
}
.bandeau-fleur { display: grid; place-items: center; background: var(--ruban-etiquette); color: var(--accent-clair); font-size: .95rem; }
.bandeau-item time { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primaire-clair); white-space: nowrap; }
.bandeau-titre {
  font-family: var(--serif); font-style: italic; font-size: 1.02rem; white-space: nowrap;
  background: linear-gradient(var(--accent-clair), var(--accent-clair)) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px; transition: background-size .35s ease;
}
.bandeau-item:hover .bandeau-titre, .bandeau-item:focus-visible .bandeau-titre { background-size: 100% 1px; }
.bandeau-item:hover img, .bandeau-item:focus-visible img { transform: scale(1.1); border-color: var(--accent-clair); }
.bandeau-item:focus-visible { outline: 2px solid var(--accent-clair); outline-offset: -4px; border-radius: 4px; }

/* === 7c. BANDEAU « IMPORTANT » (en tête de l'en-tête fixe, Paramètres → Bandeau Important) ===
   Une ligne : libellé + titre d'un article, lien vers l'article. Hauteur --important-h (inc/header.php) */
:root { --important-fond: var(--accent-fonce); --important-texte: var(--white); }
.bandeau-important {
  display: block; height: var(--important-h, 36px);
  background: var(--important-fond); color: var(--important-texte); font-size: .875rem;
}
.bandeau-important-ligne { display: flex; align-items: center; justify-content: center; gap: .75rem; height: 100%; }
.bandeau-important-etiquette {
  flex: none; padding: .05rem .55rem; border: 1px solid currentColor; border-radius: var(--radius);
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.bandeau-important-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.bandeau-important:hover .bandeau-important-titre, .bandeau-important:focus-visible .bandeau-important-titre { text-decoration: underline; text-underline-offset: 3px; }
.bandeau-important:focus-visible { outline: 2px solid var(--important-texte); outline-offset: -4px; }

/* === 8. HOMEPAGE HERO === */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  margin-top: var(--entete-h); overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: var(--fond-3) center/cover no-repeat;  /* photo inline : zone hero.photo */
  animation: hero-respire 26s ease-in-out infinite alternate;  /* zoom lent, « Ken Burns » */
  will-change: transform;
}
@keyframes hero-respire {
  from { transform: scale(1)    translate(0, 0); }
  to   { transform: scale(1.09) translate(-1.5%, -1%); }
}
/* Entrée du texte, ligne après ligne */
.hero-content > * { animation: hero-monte .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-content > :nth-child(2) { animation-delay: .12s; }
.hero-content > :nth-child(3) { animation-delay: .26s; }
.hero-content > :nth-child(4) { animation-delay: .4s; }
.hero-content > :nth-child(5) { animation-delay: .54s; }
@keyframes hero-monte {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--fond) 92%, transparent) 0%,
    color-mix(in srgb, var(--fond) 75%, transparent) 50%,
    color-mix(in srgb, var(--fond) 15%, transparent) 100%
  );
}
.hero .container { position: relative; z-index: 1; }
.hero-content { max-width: 600px; }
.hero-eyebrow {
  display: inline-block; font-family: var(--surtitre-police, var(--sans));
  font-size: calc(.75rem * var(--surtitre-taille, 1)); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--surtitre-couleur, var(--primaire-fonce)); margin-bottom: 1.25rem;
}
.hero h1 { margin-bottom: 1.5rem; }
.hero h1 em { font-style: italic; color: var(--primaire-fonce); }
.hero-desc {
  font-size: 1.1rem; color: var(--texte-doux);
  margin-bottom: 2.5rem; max-width: 480px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
/* Pastille ouvert / fermé : sceau rond, anneau de texte qui tourne, point qui pulse.
   Couleur selon l'état : ouvert = sauge foncée, ouvre bientôt = crème, fermé = terracotta */
.hero-badge {
  --badge-fond: var(--primaire-fonce); --badge-texte: var(--fond); --badge-point: #9FE0A6;
  position: absolute; right: 6%; bottom: 9%; z-index: 2;
  width: 190px; height: 190px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--badge-fond); color: var(--badge-texte);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--texte) 28%, transparent), 0 0 0 8px color-mix(in srgb, var(--fond) 35%, transparent);
  animation: badge-arrive .8s .7s cubic-bezier(.3,1.5,.5,1) both;
  transition: scale var(--ease), box-shadow var(--ease);
}
.hero-badge:hover { scale: 1.05; box-shadow: 0 22px 60px color-mix(in srgb, var(--texte) 32%, transparent), 0 0 0 12px color-mix(in srgb, var(--fond) 45%, transparent); }
.hero-badge--bientot { --badge-fond: var(--fond); --badge-texte: var(--primaire-fonce); --badge-point: #E0A33A; }
.hero-badge--ferme   { --badge-fond: var(--accent-fonce); --badge-texte: var(--fond); --badge-point: #F4C9B8; }
.badge-anneau {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: currentColor; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  animation: badge-tourne 28s linear infinite;
}
.hero-badge:hover .badge-anneau { animation-play-state: paused; }
.badge-centre {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  width: 108px; height: 108px; justify-content: center; border-radius: 50%;
  border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 35%, transparent);
}
.badge-mot { font-family: var(--serif); font-style: italic; font-size: 1.55rem; line-height: 1.1; }
/* « dès demain 12h » passe sur deux lignes dans le disque de 108px : centrées */
.badge-heure { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; text-align: center; text-wrap: balance; padding: 0 .4rem; }
.badge-point {
  width: 9px; height: 9px; border-radius: 50%; background: var(--badge-point);
  box-shadow: 0 0 0 0 var(--badge-point); animation: badge-pulse 2s ease-out infinite;
}
@keyframes badge-tourne { to { transform: rotate(360deg); } }
@keyframes badge-pulse {
  0%   { box-shadow: 0 0 0 0 var(--badge-point); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes badge-arrive {
  from { opacity: 0; transform: scale(.5) rotate(-25deg); }
  to   { opacity: 1; transform: none; }
}
/* Téléphone : même information en bandeau sous les boutons (masqué sur écran large) */
.hero-statut { display: none; }

/* Images avec lien sous un bloc (logos, marques : bloc_images_liees_html) ; espace au-dessus si le bloc a du contenu */
.images-liees {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem;
}
* + .images-liees { margin-top: 2.5rem; }
.section-header + .images-liees { margin-top: 0; }   /* l'en-tête de section a déjà sa marge */
.images-liees li {
  display: flex; align-items: center; justify-content: center; height: 100px;
  background: var(--white); border: 1px solid var(--fond-3); border-radius: var(--radius-lg);
}
.images-liees li > img, .images-liees a { padding: 1rem 1.25rem; }
.images-liees a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: inherit; transition: background var(--ease); }
.images-liees a:hover, .images-liees a:focus-visible { background: var(--fond-2); }
.images-liees img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (max-width: 768px) {
  .images-liees { grid-template-columns: repeat(2, 1fr); }
  .images-liees li { height: 80px; }
}

/* === 10. SERVICE CARDS === */
/* 3 colonnes ; 4 colonnes pour 4, 7 ou 8 cartes (4 + 3, 4 + 4) ; 2 sur tablette, 1 sur téléphone */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.services-grid:has(> :nth-child(4):last-child),
.services-grid:has(> :nth-child(7):last-child),
.services-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.service-card {
  background: var(--white); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--ease), box-shadow var(--ease);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.service-card-img  { aspect-ratio: 4/3; }
.service-card-body  { padding: 1.75rem; }
.service-card-icon  { font-size: 1.6rem; margin-bottom: .75rem; }
.service-card-body h3 { margin-bottom: .65rem; font-size: 1.3rem; }
.service-card-body p  { color: var(--texte-doux); font-size: .9rem; margin-bottom: 1.5rem; }

/* === 11. BOUTIQUE INFO === */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.info-photo {
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  background: linear-gradient(140deg, #CDE2CE 0%, var(--fond-2) 100%);
  box-shadow: var(--shadow-md); position: relative;
}
.info-photo::after {
  content: ''; position: absolute; inset: -12px;
  border: 2px solid var(--primaire-clair);
  border-radius: calc(var(--radius-lg) + 12px);
  pointer-events: none;
}
.info-content h2 { margin-bottom: 1.1rem; }
.info-content p  { color: var(--texte-doux); margin-bottom: 1.25rem; }
.hours-list  { margin: 1.5rem 0; }
.hours-exceptions {
  margin: 0 0 1rem; padding: .75rem 1rem; font-size: .88rem; line-height: 1.5;
  background: #FBEDE8; border-left: 3px solid var(--accent-fonce); border-radius: var(--radius);
}
.hours-exceptions strong { display: block; color: var(--accent-fonce); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .25rem; }
.hours-exceptions ul { margin: 0; }
.hours-exceptions li span { font-weight: 700; }
.hours-row   {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--fond-3);
  font-size: .875rem;
}
.hours-row:last-child { border-bottom: none; }
.hours-row .day  { font-weight: 700; color: var(--texte); }
.hours-row .time { color: var(--texte-doux); text-align: right; }
.hours-row .hours-plage { white-space: nowrap; }
.hours-row .hours-note { display: block; font-size: .9em; font-style: italic; }
.hours-row.closed .time { color: var(--texte-pale); font-style: italic; }
.hours-row.today {
  background: var(--primaire-pale); border-radius: var(--radius);
  margin: 0 -.5rem; padding: .55rem .5rem; border-bottom: none;
}

/* === 12. MAP === */
.map-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.map-wrap iframe { width: 100%; height: 380px; border: none; display: block; }
.map-card {
  position: absolute; bottom: 1.25rem; left: 1.25rem;
  background: var(--white); padding: 1.1rem 1.4rem;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  max-width: 260px;
}
.map-card strong { display: block; color: var(--texte); font-size: .9rem; margin-bottom: .3rem; }
.map-card p { font-size: .8rem; color: var(--texte-doux); margin-bottom: .75rem; }

/* === 13. GALLERY & LIGHTBOX === */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .875rem;
}
.gallery-grid--4 { grid-template-columns: repeat(4, 1fr); }
.gallery-item {
  position: relative; overflow: hidden;
  border-radius: var(--radius); cursor: pointer;
  aspect-ratio: 1; background: var(--fond-2);
}
.gallery-item.tall { grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
.gallery-item.wide { grid-column: span 2; aspect-ratio: 2; }

.gallery-item img, .gallery-item .img-ph {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.gallery-item:hover img,
.gallery-item:hover .img-ph { transform: scale(1.07); }

.gallery-overlay {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--texte) 45%, transparent);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--ease);
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay-icon { color: var(--white); font-size: 2rem; line-height: 1; }

/* Image placeholders */
.img-ph { display: block; }
.img-ph--1  { background: linear-gradient(135deg, var(--primaire-clair), var(--accent-clair)); }
.img-ph--2  { background: linear-gradient(135deg, var(--fond-2), var(--primaire-clair)); }
.img-ph--3  { background: linear-gradient(135deg, var(--accent-clair), #C98068 150%); }
.img-ph--4  { background: linear-gradient(135deg, #D4E8D5, var(--fond-2)); }
.img-ph--5  { background: linear-gradient(135deg, var(--accent-clair), var(--fond-2)); }
.img-ph--6  { background: linear-gradient(135deg, var(--primaire-clair), #EBF2EB); }
.img-ph--7  { background: linear-gradient(160deg, var(--fond-2), var(--accent-clair)); }
.img-ph--8  { background: linear-gradient(135deg, #D4E8D5, var(--primaire-clair) 50%, var(--accent-clair)); }
.img-ph--9  { background: linear-gradient(135deg, #CDE2CE, var(--fond-3)); }
.img-ph--10 { background: linear-gradient(135deg, var(--fond-3), var(--accent-clair)); }
.img-ph--11 { background: linear-gradient(135deg, var(--primaire-clair), var(--fond-2) 70%); }
.img-ph--12 { background: linear-gradient(135deg, var(--accent-clair) 0%, var(--primaire-clair) 100%); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(20,14,10,.93);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-inner { position: relative; max-width: 90vw; max-height: 90vh; }
.lightbox-ph {
  width: min(900px, 90vw); height: min(80vh, 900px);
  border-radius: var(--radius); display: block;
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.lightbox-close {
  position: absolute; top: -2.75rem; right: 0;
  color: var(--white); font-size: 2rem; opacity: .8;
  transition: opacity var(--ease); line-height: 1;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(255,255,255,.12); color: var(--white); font-size: 2.2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding-bottom: .2rem;
  transition: background var(--ease);
}
.lightbox-nav:hover, .lightbox-nav:focus-visible { background: rgba(255,255,255,.28); }
.lightbox-nav[hidden] { display: none; }
.lightbox-prec { left: 1.25rem; }
.lightbox-suiv { right: 1.25rem; }
.lightbox-compteur { color: rgba(255,255,255,.65); text-align: center; font-size: .8rem; margin-top: .25rem; }
@media (max-width: 768px) {
  .lightbox-nav { top: auto; bottom: 1.25rem; transform: none; }
}

/* === 14. FORMS === */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-grid .full { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label {
  font-size: .82rem; font-weight: 700;
  color: var(--texte); letter-spacing: .03em;
}
.form-group label .req { color: var(--accent-fonce); margin-left: .15rem; }
.form-control {
  width: 100%; padding: .875rem 1.1rem;
  font-size: 1rem; font-family: var(--sans);
  color: var(--texte); background: var(--white);
  border: 1.5px solid var(--fond-3); border-radius: var(--radius);
  transition: border-color var(--ease), box-shadow var(--ease);
  -webkit-appearance: none; appearance: none;
}
.form-control:focus {
  outline: none; border-color: var(--primaire);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaire) 15%, transparent);
}
.form-control::placeholder { color: var(--texte-pale); }
textarea.form-control { resize: vertical; min-height: 140px; }
select.form-control {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B5248' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form-honeypot { display: none !important; }
.field-error { font-size: .8rem; color: var(--accent-fonce); margin-top: .2rem; }

.form-alert {
  padding: 1rem 1.25rem; border-radius: var(--radius);
  margin-bottom: 1.5rem; font-size: .95rem;
  display: flex; align-items: flex-start; gap: .75rem;
}
.form-alert--success { background: var(--primaire-pale); border: 1px solid var(--primaire-clair); color: var(--primaire-fonce); }
.form-alert--error   { background: #FDF0ED; border: 1px solid #EEBDB0; color: var(--accent-fonce); }
.form-alert .alert-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }

/* Contact layout */
.contact-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 5rem; align-items: start; }
.contact-side-block { margin-bottom: 2rem; }
.contact-side-block h3 { font-size: 1rem; margin-bottom: .75rem; }
.contact-info-row {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .9rem; color: var(--texte-doux); margin-bottom: .6rem;
}
.contact-info-row .ci-icon { color: var(--primaire); flex-shrink: 0; margin-top: .1rem; }
.contact-info-row a:hover { color: var(--primaire-fonce); text-decoration: underline; }

/* === 15. WORKSHOP CARDS === */
.workshop-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 2rem;
}
.workshop-card {
  background: var(--white); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--ease), box-shadow var(--ease);
  display: flex; flex-direction: column;
}
.workshop-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.workshop-photo { aspect-ratio: 16/9; }
.workshop-body { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }
.workshop-level {
  display: inline-block; align-self: flex-start;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: .25rem .7rem;
  border-radius: 50px; margin-bottom: 1rem;
}
.level-debutant     { background: var(--primaire-pale); color: var(--primaire-fonce); }
.level-intermediaire{ background: #FDF0ED; color: var(--accent-fonce); }
.level-tous         { background: var(--fond-2); color: var(--texte-doux); }
.workshop-body h3 { margin-bottom: .65rem; font-size: 1.25rem; }
.workshop-body p  { color: var(--texte-doux); font-size: .9rem; margin-bottom: 1rem; flex: 1; }
.workshop-meta    { display: flex; gap: 1.1rem; font-size: .8rem; color: var(--texte-pale); margin-bottom: 1.25rem; }
.workshop-meta span { display: flex; align-items: center; gap: .3rem; }
.workshop-price   { font-family: var(--serif); font-size: 1.3rem; color: var(--accent-fonce); font-weight: 700; margin-bottom: 1.25rem; }

/* === 16. EVENTS PAGE === */
.event-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.event-card {
  background: var(--white); padding: 2.5rem;
  border-radius: var(--radius-lg); border: 1.5px solid var(--fond-3);
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.event-card:hover { border-color: var(--primaire-clair); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.event-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.event-card h3 { margin-bottom: .65rem; }
.event-card p  { color: var(--texte-doux); font-size: .9rem; }
.event-tags    { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.event-tag     {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--primaire-pale); color: var(--primaire-fonce);
  padding: .2rem .65rem; border-radius: 50px;
}

/* Process steps */
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.step { text-align: center; position: relative; }
.step::after {
  content: ''; position: absolute;
  top: 27px; left: calc(50% + 30px);
  width: calc(100% - 60px); height: 1px;
  background: var(--primaire-clair);
}
.step:last-child::after { display: none; }
.step-num {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--primaire); color: var(--white);
  font-family: var(--serif); font-size: 1.25rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.step h4 { margin-bottom: .4rem; font-size: .95rem; }
.step p  { font-size: .82rem; color: var(--texte-doux); }

/* === 17. TESTIMONIALS === */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.testimonial {
  background: var(--white); padding: 2rem;
  border-radius: var(--radius-lg); position: relative;
  box-shadow: var(--shadow-sm);
}
.testimonial::before {
  content: '\201C'; font-family: var(--serif); font-size: 5rem;
  line-height: .8; color: var(--primaire-clair);
  position: absolute; top: 1rem; left: 1.5rem;
}
.testimonial-text { font-style: italic; color: var(--texte-doux); font-size: .9rem; padding-top: 1.5rem; margin-bottom: 1.1rem; }
.testimonial-author { font-size: .85rem; font-weight: 700; color: var(--texte); }
.testimonial-sub    { font-size: .78rem; color: var(--texte-pale); }
.stars { color: var(--accent); font-size: .9rem; margin-bottom: .65rem; }

/* === 18. ABOUT PAGE === */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.about-img-wrap { position: relative; }
.about-img {
  border-radius: var(--radius-lg); aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--primaire-clair), var(--fond-2));
  box-shadow: var(--shadow-md);
}
.about-img-accent {
  position: absolute; bottom: -20px; right: -20px;
  width: 55%; aspect-ratio: 1; z-index: -1;
  background: linear-gradient(135deg, var(--accent-clair), var(--fond-2));
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.about-text h2  { margin-bottom: 1.1rem; }
.about-text p   { color: var(--texte-doux); margin-bottom: 1rem; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.value-card  { text-align: center; padding: 2.5rem 1.75rem; }
.value-icon  { font-size: 2.5rem; display: block; margin-bottom: 1.1rem; }
.value-card h3 { margin-bottom: .65rem; font-size: 1.2rem; }
.value-card p  { color: var(--texte-doux); font-size: .9rem; }

/* === 19. CTA BANNER === */
.cta-banner {
  background: linear-gradient(135deg, var(--primaire-fonce) 0%, var(--primaire) 100%);
  color: var(--white); text-align: center; padding: 5rem 0;
}
.cta-banner h2 { color: var(--white); margin-bottom: 1rem; }
.cta-banner p  { color: rgba(255,255,255,.82); max-width: 560px; margin: 0 auto 2.5rem; font-size: 1.05rem; }
.btn-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* === 20. FOOTER === */
.site-footer { background: var(--texte); color: color-mix(in srgb, var(--fond) 75%, transparent); padding-top: 5rem; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem; padding-bottom: 3.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--fond) 10%, transparent);
}
.footer-brand .site-logo  { margin-bottom: 1.25rem; }
.footer-brand .logo-img   { height: 110px; }
.footer-brand .tagline    { font-size: .875rem; line-height: 1.75; margin-bottom: 1.5rem; }
.social-links { display: flex; gap: .75rem; }
.social-link {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fond) 20%, transparent);
  color: color-mix(in srgb, var(--fond) 65%, transparent);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.social-link:hover { background: var(--primaire); border-color: var(--primaire); color: var(--white); }
.footer-col h4 {
  font-family: var(--serif); font-size: 1rem; font-weight: 600;
  color: var(--fond); margin-bottom: 1.25rem;
}
.footer-links { display: flex; flex-direction: column; gap: .45rem; }
.footer-links a { font-size: .85rem; color: color-mix(in srgb, var(--fond) 65%, transparent); transition: color var(--ease); }
.footer-links a:hover { color: var(--fond); }
.footer-hours .hours-row {
  border-bottom-color: color-mix(in srgb, var(--fond) 10%, transparent); font-size: .82rem; padding: .4rem 0;
}
.footer-hours .hours-row .day  { color: var(--fond); }
.footer-hours .hours-row .time { color: color-mix(in srgb, var(--fond) 55%, transparent); }
.footer-hours .hours-row.today { background: color-mix(in srgb, var(--primaire) 28%, transparent); padding: .4rem .5rem; }
.footer-hours .hours-row.today .time { color: var(--fond); }
.footer-hours .hours-exceptions { background: color-mix(in srgb, var(--accent-fonce) 18%, transparent); color: var(--fond); }
.footer-hours .hours-exceptions strong { color: var(--accent-clair); }
.footer-contact-item {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .85rem; margin-bottom: .5rem;
}
.footer-contact-item .ci-icon { color: var(--primaire-clair); flex-shrink: 0; margin-top: .15rem; }
.footer-contact-item a:hover  { color: var(--fond); text-decoration: underline; }
.footer-bottom {
  padding: 1.5rem 0;
  font-size: .78rem; color: color-mix(in srgb, var(--fond) 38%, transparent);
}
.footer-bottom a { color: color-mix(in srgb, var(--fond) 45%, transparent); transition: color var(--ease); }
.footer-bottom a:hover { color: var(--fond); }

/* === 21. BACK TO TOP === */
.back-to-top {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 46px; height: 46px;
  background: var(--primaire); color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transition: opacity var(--ease), visibility var(--ease), background var(--ease), transform var(--ease);
  z-index: 500;
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover   { background: var(--primaire-fonce); transform: translateY(-3px); }

/* Bandeau équipe (inc/footer.php) : visible seulement d'un navigateur où l'admin a été ouverte */
.equipe-note {
  position: fixed; bottom: 1rem; left: 1rem; z-index: 500;
  max-width: min(30rem, calc(100% - 6.5rem));
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem;
  padding: .55rem 2.2rem .55rem .9rem;
  background: var(--texte); color: var(--fond);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  font-size: .78rem; line-height: 1.4;
}
.equipe-note[hidden] { display: none; }
.equipe-note a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.equipe-note-fermer {
  position: absolute; top: .2rem; right: .35rem;
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: .25rem; opacity: .7;
}
.equipe-note-fermer:hover { opacity: 1; }

/* === 22. ANIMATIONS === */
.fade-in {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-in.visible  { opacity: 1; transform: translateY(0); }
.fade-in-d1 { transition-delay: .1s; }
.fade-in-d2 { transition-delay: .2s; }
.fade-in-d3 { transition-delay: .3s; }

/* === 23. MISC / UTILITIES === */
.text-center { text-align: center; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.two-col.flip > :first-child { order: 2; }
.two-col.flip > :last-child  { order: 1; }
.legal-content h2 {
  font-size: 1.35rem; margin: 2.5rem 0 1rem;
  padding-top: 2.5rem; border-top: 1px solid var(--fond-3);
}
.legal-content h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal-content p, .legal-content li { color: var(--texte-doux); }
.legal-content ul { margin: .75rem 0 1rem 1.5rem; list-style: disc; }
.legal-content ul li { margin-bottom: .35rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* === 24. BLOG === */
/* Filtres */
.blog-filtres {
  display: flex; flex-direction: column; gap: 1.25rem;
  margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--fond-3);
}
.blog-puces { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-puce {
  display: inline-block; padding: .4rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--primaire-clair); color: var(--primaire-fonce);
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.blog-puce:hover { border-color: var(--primaire); }
.blog-puce.active { background: var(--primaire); border-color: var(--primaire); color: var(--white); }
/* Galerie : une rangée par filtre (Sections, Thèmes), titre devant ; thèmes à cocher */
.galerie-filtres { gap: 1rem; }
.galerie-filtre { display: flex; align-items: baseline; gap: 1rem; }
.galerie-filtre-titre {
  flex: 0 0 6.5rem; margin: 0; font-family: inherit; font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux);
}
/* Thèmes liés aux sections : une ligne par section quand aucune n'est choisie */
.galerie-themes { flex: 1; display: flex; flex-direction: column; gap: .6rem; }
.galerie-themes-groupe { align-items: center; }
.galerie-themes-section {
  flex: 0 0 auto; min-width: 7.5rem; font-family: var(--serif); font-style: italic;
  font-size: .95rem; color: var(--texte);
}
.blog-puce--case { display: inline-flex; align-items: center; gap: .45rem; }
.blog-puce--case::before {
  content: ''; flex: none; width: .85rem; height: .85rem; border: 1.5px solid currentColor; border-radius: 3px;
  background: var(--white); font-size: .7rem; line-height: .75rem; text-align: center; color: var(--primaire);
}
.blog-puce--case.active::before { content: '✓'; border-color: var(--white); }
.blog-champs { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.blog-champ { flex: 0 1 240px; }
.blog-champ--q { flex: 1 1 260px; }
.blog-champ .form-control { padding: .65rem 1rem; font-size: .92rem; }
.blog-resultat { font-size: .9rem; color: var(--texte-doux); margin: -1rem 0 2rem; }
.blog-resultat a { color: var(--primaire-fonce); text-decoration: underline; }
.blog-vide { text-align: center; color: var(--texte-doux); font-style: italic; padding: 3rem 0; }

/* Cartes */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.blog-card {
  display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform var(--ease), box-shadow var(--ease);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.blog-card-img { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--fond-2); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-img--vide { display: flex; align-items: center; justify-content: center; background: var(--primaire-pale); }
.blog-card-img--vide span { font-size: 3rem; color: var(--primaire-clair); }
.blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.6rem 1.75rem; }
.blog-card-meta { font-size: .78rem; color: var(--texte-pale); margin-bottom: .5rem; letter-spacing: .02em; }
.blog-card-section { color: var(--accent-fonce); font-weight: 700; }
.blog-card-body h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.blog-card-body h3 a:hover { color: var(--primaire-fonce); }
.blog-card-body p { color: var(--texte-doux); font-size: .9rem; margin-bottom: 1.25rem; }
.blog-card-lire { margin-top: auto; font-size: .85rem; font-weight: 700; color: var(--primaire-fonce); }
.blog-card-lire:hover { text-decoration: underline; }

/* Bloc « Sur le blog » en fin de page */
.blog-fin { border-top: 1px solid var(--fond-3); }
.blog-fin-tous { text-align: center; margin-top: 2.5rem; }

/* Pagination */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: 1.5rem;
  margin-top: 3rem; font-size: .9rem; color: var(--texte-doux);
}
.pagination a { color: var(--primaire-fonce); font-weight: 700; }
.pagination a:hover { text-decoration: underline; }

/* Article */
.article-hero .eyebrow a { color: inherit; text-decoration: underline; }
.article-container { max-width: 780px; }
.article-couverture { margin: 0 0 2.5rem; }
.article-couverture img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.article-contenu { font-size: 1.05rem; }
.article-contenu p, .article-contenu ul, .article-contenu ol { margin-bottom: 1.25rem; color: var(--texte); }
.article-contenu h3 { font-size: 1.45rem; margin: 2.25rem 0 .9rem; }
.article-contenu ul { list-style: disc; padding-left: 1.5rem; }
.article-contenu ol { list-style: decimal; padding-left: 1.5rem; }
.article-contenu li { margin-bottom: .35rem; }
.article-contenu a { color: var(--primaire-fonce); text-decoration: underline; }
.article-galerie { margin-top: 2.5rem; }
/* Vidéos (inc/videos.php) : grille de miniatures, lecteur par-dessus la page. Couleurs par variables, le contraste élevé les reprend.
   Une vidéo horizontale prend 2 colonnes : à 1 colonne, elle serait trop petite pour être lisible */
.article-videos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); grid-auto-flow: dense;
  gap: 1rem; align-items: start; margin-top: 2.5rem;
}
.video { margin: 0; min-width: 0; }
.video--paysage { grid-column: span 2; }
.video--lien { grid-column: 1 / -1; }
.video-lancer {
  display: block; position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden;
  border-radius: var(--radius); background: var(--fond-3);
}
.video--vertical .video-lancer { aspect-ratio: 9/16; }
.video-lancer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* Short : recadre les bandes de l'image */
.video-bouton {
  display: flex; align-items: center; justify-content: center; flex: none; width: 2.75rem; height: 2.75rem; padding-left: .15rem;
  border-radius: 50%; background: var(--primaire-fonce); color: var(--white); font-size: 1rem; line-height: 1;
}
.video-lancer .video-bouton { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform .2s; }
.video-lancer:hover .video-bouton, .video-lancer:focus-visible .video-bouton { transform: translate(-50%, -50%) scale(1.1); }
.video figcaption { margin-top: .35rem; color: var(--texte); font-size: .88rem; line-height: 1.3; }
.video small { display: block; color: var(--texte-doux); font-size: .78rem; }
.video-carte {
  display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; color: var(--texte);
  border: 1px solid var(--fond-3); border-radius: var(--radius);
}
.video-carte:hover strong { text-decoration: underline; }
.video-carte strong { display: block; }
.video-fenetre { padding: 0; border: 0; background: transparent; overflow: visible; max-width: none; max-height: none; margin: auto; }
.video-fenetre::backdrop { background: rgba(0, 0, 0, .85); }
.video-cadre { width: min(92vw, 1100px, calc(85vh * 16 / 9)); aspect-ratio: 16/9; }
.video-cadre--vertical { width: min(92vw, calc(85vh * 9 / 16)); aspect-ratio: 9/16; }
.video-cadre iframe, .video-cadre video { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--radius); background: #000; }
.video-fermer {
  position: absolute; top: -2.75rem; right: 0; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--primaire-fonce); color: var(--white); font-size: 1.4rem; line-height: 1;
}
.article-pied {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem;
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--fond-3);
}
.article-menus { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .9rem; color: var(--texte-doux); }

/* === 24b. PARTENAIRES === */
.partenaires-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; }
.partenaire-carte {
  display: flex; flex-direction: column; background: var(--white);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.partenaire-logo {
  display: flex; align-items: center; justify-content: center; height: 180px; padding: 1.5rem 2rem;
  background: var(--white); border-bottom: 1px solid var(--fond-2);
}
.partenaire-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.partenaire-logo span { font-family: var(--serif); font-size: 4rem; color: var(--primaire-clair); }
.partenaire-corps { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.6rem 1.75rem; }
.partenaire-corps h2 { font-size: 1.35rem; margin-bottom: .6rem; }
.partenaire-corps p { color: var(--texte-doux); font-size: .92rem; margin-bottom: 1.25rem; }
.partenaire-liens { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; }

/* Fiche d'un partenaire (article du blog) */
.article-partenaire {
  display: flex; align-items: center; gap: 1.25rem; margin-top: 3rem; padding: 1.25rem 1.5rem;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.article-partenaire img { width: 110px; height: 70px; object-fit: contain; flex: none; }
.article-partenaire p { margin: 0; color: var(--texte-doux); font-size: .92rem; }
.article-partenaire strong { color: var(--texte); }
.article-partenaire a { color: var(--primaire-fonce); font-weight: 700; }
.article-partenaire a:hover { text-decoration: underline; }

/* === 25. RESPONSIVE === */
@media (max-width: 1024px) {
  .services-grid, .services-grid:has(> :nth-child(4):last-child), .services-grid:has(> :nth-child(7):last-child),
  .services-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --section-py: 3.5rem; --container-px: 1rem; }

  /* Mobile nav */
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed; top: var(--entete-h); left: 0; right: 0;
    background: var(--fond); border-bottom: 1px solid var(--fond-3);
    box-shadow: var(--shadow-md); padding: 1.5rem 1rem;
    transform: translateY(-120%); opacity: 0; visibility: hidden;
    transition: transform var(--ease), opacity var(--ease), visibility var(--ease);
  }
  .site-nav.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-list { flex-direction: column; align-items: stretch; gap: .2rem; }
  .nav-link { display: block; padding: .875rem 1rem; font-size: 1rem; }
  .nav-link::after { display: none; }
  .btn-nav { text-align: center; margin-top: .5rem; }
  .contraste-bouton { margin-left: auto; margin-right: .25rem; }
  .nav-groupe-bouton { display: flex; width: 100%; justify-content: space-between; text-align: left; }
  .nav-sous-menu {
    position: static; display: none; min-width: 0; padding: 0 0 0 1rem;
    border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none;
  }
  .nav-groupe-bouton[aria-expanded="true"] + .nav-sous-menu { display: block; }

  /* Page layouts */
  .hero-badge { display: none; }
  .hero-statut {
    --badge-point: #3E9B4F;
    display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.75rem;
    padding: .55rem 1.1rem; border-radius: 999px; background: var(--white); box-shadow: var(--shadow-md);
    font-size: .85rem; font-weight: 700; color: var(--primaire-fonce);
  }
  .hero-statut--bientot { --badge-point: #D08A1C; }
  .hero-statut--ferme   { --badge-point: var(--accent-fonce); color: var(--accent-fonce); }

  .services-grid, .services-grid:has(> :nth-child(4):last-child), .services-grid:has(> :nth-child(7):last-child),
  .services-grid:has(> :nth-child(8):last-child) { grid-template-columns: 1fr; }
  .info-grid     { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-intro   { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-img-accent { display: none; }
  .about-img { aspect-ratio: 3/2; }
  .contact-layout { grid-template-columns: 1fr; gap: 3rem; }
  .form-grid  { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: 1; }
  .gallery-grid   { grid-template-columns: 1fr 1fr; }
  .gallery-grid--4 { grid-template-columns: 1fr 1fr; }
  .gallery-item.tall { grid-row: auto; aspect-ratio: 1; }
  .gallery-item.wide { grid-column: auto; aspect-ratio: 1; }
  .event-types    { grid-template-columns: 1fr; }
  .values-grid    { grid-template-columns: 1fr; gap: 1rem; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .two-col, .two-col.flip > :first-child, .two-col.flip > :last-child { order: 0; }
  .two-col { grid-template-columns: 1fr; gap: 2.5rem; }
  .process-steps { grid-template-columns: 1fr; gap: 1.5rem; }
  .map-wrap iframe { height: 300px; }
  .blog-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .galerie-filtre { flex-direction: column; gap: .5rem; }
  .galerie-filtre-titre { flex: none; }
  :root { --bandeau-h: 46px; }
  .bandeau-etiquette { padding: 0 1.4rem 0 1rem; }
  .bandeau-etiquette-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .bandeau-titre { font-size: .95rem; }
  .bandeau-item img, .bandeau-fleur { width: 30px; height: 30px; }
  .bandeau-liste li::after { margin: 0 1.25rem; }
}

@media (max-width: 480px) {
  .contraste-bouton { padding: 0; }
  .contraste-bouton-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  h1 { font-size: 1.95rem; }
  h2 { font-size: 1.55rem; }
  .btn { padding: .8rem 1.6rem; font-size: .82rem; }
  .gallery-grid   { grid-template-columns: 1fr; }
  .gallery-grid--4 { grid-template-columns: 1fr 1fr; }
}

/* Mouvement réduit (réglage du système) : pas d'animation du hero */
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-content > *, .hero-badge, .badge-anneau, .badge-point { animation: none !important; }
  /* Ruban : immobile, défilement à la main, sans les répétitions */
  .bandeau-piste { animation: none; }
  .bandeau-fenetre { overflow-x: auto; scrollbar-width: none; }
  .bandeau-copie, .bandeau-bis { display: none; }
}

/* === Blocs génériques (inc/blocs.php) === */
.liste-puces { margin: 1rem 0 1.5rem 1.5rem; list-style: disc; color: var(--texte-doux); }
.liste-puces li { margin-bottom: .35rem; }
.texte-seul { max-width: 760px; margin: 0 auto; }
.infos { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem; margin: 1rem 0 1.5rem; }
.infos > div { display: contents; }
.infos dt { font-weight: 700; color: var(--texte); }
.infos dd { margin: 0; color: var(--texte-doux); }
.infos dd:only-child { grid-column: 1 / -1; }

/* === 26. CONTRASTE ÉLEVÉ (bouton de l'en-tête, classe html.contraste) ===
   Fond noir, texte blanc, liens et boutons jaunes, pour les malvoyants. html.contraste l'emporte sur :root,
   donc sur site/theme.css et sur les couleurs de Paramètres ; les photos restent. */
html.contraste {
  --fond: #000; --fond-2: #000; --fond-3: #FFF;
  --primaire: #FFD600; --primaire-fonce: #FFD600; --primaire-clair: #FFF; --primaire-pale: #000;
  --accent: #FFD600; --accent-fonce: #FFD600; --accent-clair: #FFD600;
  --texte: #FFF; --texte-doux: #FFF; --texte-pale: #FFF;
  --white: #000;   /* fonds des cartes et texte des boutons jaunes */
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
  --ruban-fond: #000; --ruban-texte: #FFF; --ruban-etiquette: #FFD600; --ruban-etiquette-survol: #FFF;
  --important-fond: #FFD600; --important-texte: #000;
  --surtitre-couleur: #FFD600; --titre-couleur: #FFF; --texte-couleur: #FFF;
}
html.contraste :focus-visible { outline: 3px solid #FFD600; outline-offset: 3px; }
html.contraste .site-header { background: #000; border-bottom: 2px solid #FFF; }
html.contraste .logo-img { background: #FFF; padding: 4px 8px; border-radius: var(--radius); }
html.contraste .page-hero::before { display: none; }
html.contraste .fade-in { opacity: 1; transform: none; transition: none; }   /* texte affiché d'emblée */
html.contraste .hero-bg::after { background: linear-gradient(to right, rgba(0,0,0,.94), rgba(0,0,0,.8)); }
html.contraste .hero-badge { box-shadow: 0 0 0 3px #FFF; }
/* Liens dans le texte : jaunes et soulignés */
html.contraste main p a:not(.btn), html.contraste main li a:not(.btn):not(.bandeau-item), html.contraste .site-footer a:not(.btn):not(.site-logo) {
  color: #FFD600; text-decoration: underline; text-underline-offset: 3px;
}
/* Cartes et encadrés : bordure blanche au lieu de l'ombre */
html.contraste :is(.service-card, .workshop-card, .testimonial, .blog-card, .partenaire-carte, .article-partenaire, .map-card, .hero-statut, .images-liees li) {
  border: 1.5px solid #FFF;
}
html.contraste .hours-row.today { outline: 1px solid #FFF; }
/* Fonds clairs codés en dur */
html.contraste :is(.form-alert--error, .level-intermediaire) { background: #000; border: 1px solid #FFD600; }
html.contraste .hours-exceptions { background: #000; }
html.contraste select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* Ruban : étiquette jaune, texte noir */
html.contraste .bandeau-blog { border-block: 2px solid #FFF; }
html.contraste :is(.bandeau-etiquette, .bandeau-etiquette-fleur, .bandeau-fleur) { color: #000; }
/* Sections sombres et bandeau d'appel : noir, filets blancs */
html.contraste :is(.section--dark, .cta-banner) { background: #000; color: #FFF; border-block: 2px solid #FFF; }
html.contraste .cta-banner :is(h2, p) { color: #FFF; }
html.contraste :is(.btn-white, .btn-outline-white) { background: #000; color: #FFF; border-color: #FFF; }
html.contraste :is(.btn-white, .btn-outline-white):hover { background: #FFD600; color: #000; border-color: #FFD600; }
/* Pied de page : fond noir, texte blanc */
html.contraste .site-footer { --fond: #FFF; --texte: #000; color: #FFF; border-top: 2px solid #FFF; }
html.contraste .site-footer :is(.footer-bottom, .footer-hours .hours-row .time) { color: #FFF; }
html.contraste .social-link { border-color: #FFF; }
html.contraste .site-footer a.social-link:hover { color: #000; }
html.contraste .lightbox { --white: #FFF; background: rgba(0,0,0,.96); }
html.contraste .equipe-note { background: #000; color: #FFF; border: 1.5px solid #FFF; }
html.contraste .equipe-note a { color: #FFD600; }