/* ====== O'Fam – thème contenu (sobre, fin, cohérent site) ====== */
:root{
  --ofam-accent:#0a3a80;       /* bleu O'Fam */
  --ofam-text:#171717;         /* texte principal aligné au site */
  --ofam-muted:#6b7280;        /* texte secondaire */
  --ofam-bg-soft:#fafbfc;      /* fonds très légers */
  --ofam-border:#e7e9ee;       /* traits subtils */

  /* Palette Sportaza (pour CTA + liens) */
  --sportaza-green:#5ECF02;
  --sportaza-green-dark:#4AA202;
}

/* Corps de texte harmonisé avec le site */
.ofam-article,
.ofam-article p,
.ofam-article li{
  font-family:"adobe-garamond-pro", serif;
  color:var(--ofam-text);
  font-size:18px;
  line-height:1.6;
  letter-spacing:0;
}

/* Titres – mêmes propriétés que le thème de base */
.ofam-article h1,
.ofam-article h2{
  font-family:"adobe-garamond-pro", serif;
  color:var(--ofam-text);
  font-weight:400;
  letter-spacing:0;
  line-height:1.25;
  margin:0 0 18px 0;   /* comme “Nous retrouver” */
}
.ofam-article h3 {
  font-size:24px;
  color:var(--ofam-accent);     /* bleu O'Fam */
  letter-spacing:.5px;          /* petite respiration */
  margin-top:1.4em;
  margin-bottom:.6em;
  font-weight:600;              /* un peu plus marqué que le texte */
}
.ofam-article h1{ font-size:34px; }
.ofam-article h2{ font-size:28px; }
.ofam-article h4{ font-size:20px; }
/* Petits éléments */
.ofam-article p{ margin:.9em 0; }
.ofam-article small{ color:var(--ofam-muted); }

/* Gras plus fin et bleu (façon Ratelier, mais discret) */
.ofam-article strong{
  font-weight:600;
  color:var(--ofam-accent);
}

/* Liens – VERT Sportaza */
.ofam-article a{
  color:var(--sportaza-green);
  text-decoration:underline;
  text-underline-offset:2px;
  transition: color .2s ease;
}
.ofam-article a:hover{
  color:var(--sportaza-green-dark);
}

/* Listes aérées */
.ofam-article ul,
.ofam-article ol{
  padding-left:1.25rem;
  margin:1em 0;
}
.ofam-article li{ margin:.35em 0; }

/* Bloc-citation fin */
.ofam-article blockquote{
  margin:1.2em 0;
  padding:.6em 1rem;
  border-left:3px solid var(--ofam-accent);
  background:var(--ofam-bg-soft);
  color:var(--ofam-text);
  font-style:italic;
}

/* Tableaux – léger et élégant */
.ofam-article table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:1.2em 0;
  border:1px solid var(--ofam-border);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.ofam-article thead th{
  background:linear-gradient(#ffffff, #f6f8fb);
  color:#1b2a3a;
  font-weight:600;
  padding:.8rem .9rem;
  text-align:left;
  border-bottom:1px solid var(--ofam-border);
}
.ofam-article tbody td{
  padding:.75rem .9rem;
  border-bottom:1px solid var(--ofam-border);
}
.ofam-article tbody tr:nth-child(even){ background:#fbfcfe; }
.ofam-article tbody tr:last-child td{ border-bottom:0; }

/* Bouton CTA – VERT Sportaza */
.ofam-article .t-button,
.ofam-article .button{
  background:var(--sportaza-green);
  color:#fff;
  border:1px solid var(--sportaza-green);
  border-radius:999px;
  padding:.6rem 1rem;
  font-weight:600;
  letter-spacing:.2px;
  transition: background .2s ease, box-shadow .2s ease, filter .2s ease;
}
.ofam-article .t-button:hover,
.ofam-article .button:hover{
  background:var(--sportaza-green-dark);
  border-color:var(--sportaza-green-dark);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  filter:none; /* pas d’assombrissement bleu */
}

/* Media / iframes (ex: carte) */
.ofam-article iframe,
.ofam-article img{
  max-width:100%;
  height:auto;
  border-radius:10px;
  border:1px solid var(--ofam-border);
}

/* Espacements globaux article */
.ofam-article > *:first-child{ margin-top:0; }
.ofam-article > *:last-child{ margin-bottom:0; }

/* ===== Footer compact O'Fam ===== */
.ofam-footer{background:#0a3a80;color:#fff}
.ofam-footer a{color:#fff;text-decoration:none}
.ofam-footer a:hover{opacity:.85}
.ofam-footer .inner{
  max-width:1200px;margin:0 auto;
  padding:18px 16px; /* compact */
  display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start
}
.ofam-footer .col{flex:1 1 260px;min-width:220px}
.ofam-footer h3{
  margin:0 0 8px;font:600 18px/1.2 "adobe-garamond-pro",serif
}
.ofam-footer p, .ofam-footer .nav a{
  font-family:"adobe-garamond-pro",serif;
  font-size:14px;line-height:1.5;margin:0 0 6px
}
.ofam-footer .nav{display:flex;flex-direction:column;gap:6px}
.ofam-footer small{opacity:.85}

@media (max-width:800px){
  .ofam-footer .inner{flex-direction:column;gap:12px}
  .ofam-footer p, .ofam-footer .nav a{font-size:15px}
}

/* ===== Header O'Fam (détaché & lisible) ===== */
#ofam-header{
  position: sticky; top:0; z-index:1000;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid #dbe3ef;               /* trait fin gris-bleu */
  box-shadow: 0 2px 18px rgba(10,58,128,.06);     /* ombre douce */
}
#ofam-header .inner{
  max-width:1200px; margin:0 auto;
  padding:16px 20px;                               /* un peu plus d’air */
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
/* liseré bleu sous le header */
#ofam-header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:3px; background:var(--ofam-accent); opacity:.9;
}
/* liens du menu */
#ofam-header nav ul{display:flex; gap:28px; margin:0; padding:0; list-style:none;}
#ofam-header nav a{
  color:#0b1a2b; text-decoration:none;
  text-transform:uppercase; letter-spacing:.08em; font-size:15px;
  padding:6px 10px; border-radius:8px; transition:.2s ease;
}
#ofam-header nav a:hover{ background:rgba(10,58,128,.08); }
/* bouton Réserver */
#ofam-header .nav-reserver{
  color:#fff !important; background:var(--ofam-accent);
  padding:8px 14px; border-radius:999px; font-weight:700;
}
#ofam-header .nav-reserver:hover{
  filter:brightness(.95); box-shadow:0 6px 16px rgba(10,58,128,.25);
}
/* état compact au scroll */
#ofam-header.scrolled{ box-shadow:0 10px 28px rgba(0,0,0,.08); }
#ofam-header.scrolled .inner{ padding:10px 20px; }

/* Couleurs marque (tu peux ajuster) */
:root{
  --ofam-navy:#0a3a80;
  --ofam-gold:#b0893b;      /* conservé si besoin ailleurs */
  --row-alt:#f8fafc;        /* zébrage clair */
  --row-hover:#eef5ff;      /* survol */
  --thead-bg:#f4f6f8;       /* bandeau d'en-tête */
  --text:#1f2937;
}

/* Carte contenant le tableau */
.table-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  overflow:hidden;                 
  border-top:4px solid var(--ofam-navy);  /* trait BLEU */
  margin:24px 0;
}

/* Tableau */
.table-card .ofam-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:16px;
  color:var(--text);
}

/* En-tête */
.table-card .ofam-table thead th{
  background:var(--thead-bg);
  font-weight:700;
  text-align:left;
  padding:16px 22px;
  border-bottom:1px solid #e5e7eb;
}

/* Cellules */
.table-card .ofam-table td{
  padding:18px 22px;
  border-bottom:1px solid #eef2f7;
}

/* Zébrage */
.table-card .ofam-table tbody tr:nth-child(odd){ background:#fff; }
.table-card .ofam-table tbody tr:nth-child(even){ background:var(--row-alt); }

/* Survol de ligne (option) */
.table-card .ofam-table tbody tr:hover{ background:var(--row-hover); }

/* Première colonne un peu plus “menu” */
.table-card .ofam-table tbody td:first-child{ font-weight:600; }

/* Coins arrondis visuels sur la première/dernière ligne */
.table-card .ofam-table thead tr:first-child th:first-child{ border-top-left-radius:10px; }
.table-card .ofam-table thead tr:first-child th:last-child{  border-top-right-radius:10px; }

/* Responsive (empile les colonnes sous 700px) */
@media (max-width:700px){
  .table-card .ofam-table thead{ display:none; }
  .table-card .ofam-table,
  .table-card .ofam-table tbody,
  .table-card .ofam-table tr,
  .table-card .ofam-table td{
    display:block; width:100%;
  }
  .table-card .ofam-table tr{ border-bottom:1px solid #e5e7eb; }
  .table-card .ofam-table td{
    border:none;
    position:relative;
    padding:14px 22px 14px 130px;  /* place pour le label */
  }
  .table-card .ofam-table td::before{
    content:attr(data-label);
    position:absolute;
    left:22px; top:14px;
    width:100px;
    font-weight:700;
    color:var(--ofam-navy);
    text-transform:none;
  }
}

/* Ajustements lisibilité texte */
.ofam-article p, .ofam-article li { color:#2b2f34; }
.ofam-article small, .ofam-article em { color:#4b5563; }

/* Sécurise Bootstrap contre les overrides du thème */
.ofam-article .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-right: calc(var(--bs-gutter-x, 1.5rem) / -2);
  margin-left:  calc(var(--bs-gutter-x, 1.5rem) / -2);
}
.ofam-article .row > [class*="col-"] {
  padding-right: calc(var(--bs-gutter-x, 1.5rem) / 2);
  padding-left:  calc(var(--bs-gutter-x, 1.5rem) / 2);
}
/* Mobile: garde le header natif Squarespace, cache le header custom */
@media (max-width: 767.98px){
  #ofam-header{ display:none !important; }
}

/* Desktop: cache la barre mobile Squarespace, garde le header custom */
@media (min-width: 768px){
  .Mobile{ display:none !important; }
}
@media (max-width: 575.98px){
  .ofam-article h1{ font-size: 1.9rem; line-height:1.25; margin-bottom: .75rem; }
  .ofam-article p{ font-size: 16px; line-height:1.6; }
}
/* 1) Ramener le menu mobile (et éviter les doubles headers) */
@media (max-width: 767.98px){
  /* garde le header Squarespace mobile */
  #ofam-header{ display:none !important; }
  .Mobile{ display:block !important; }
}
@media (min-width: 768px){
  /* sur desktop, garde ton header custom et cache la barre mobile */
  .Mobile{ display:none !important; }
}

/* 2) Gros bloc blanc en haut : réduis les marges/paddings de départ */
.ofam-article > h1{ margin-top: 8px !important; }
.Page .Page-content{ padding-top: 16px !important; }

/* 3) H2 harmonisés (même police, taille, casse) */
.ofam-article h2{
  font-family:"adobe-garamond-pro", serif !important;
  font-weight: 700;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.25;
  /* responsive : mini 20px – max 28px */
  font-size: clamp(20px, 5.2vw, 28px);
  margin: 24px 0 12px;
}
/* certains styles de thème forcent une autre police en nested span */
.ofam-article h2 *{
  font-family: inherit !important;
  text-transform: inherit !important;
  letter-spacing: inherit !important;
}

/* 4) Image trop collée : ajoute de l’air dessous + arrondi propre */
.ofam-article img.img-fluid{ display:block; width:100%; height:auto;
  margin: 8px 0 16px; border-radius: 8px;
}

/* 5) Tableau qui “casse” sur mobile → scroll horizontal propre */
.ofam-article .table-card{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
.ofam-article .ofam-table{ min-width: 540px; border-collapse: separate; border-spacing: 0; }
@media (max-width: 575.98px){
  .ofam-article .ofam-table th,
  .ofam-article .ofam-table td{ padding: 12px !important; font-size: 16px; line-height: 1.4; }
}

/* 6) CTAs toujours centrés et mêmes marges */
.ofam-article .cta-block,
.ofam-article .cta-center{ text-align:center !important; }
.t-button.button{ display:inline-block; margin:16px auto 24px !important; }

/* 7) Espace entre colonnes image/texte quand tu es en .row */
.row.no-gutters>*{ padding-left:0 !important; padding-right:0 !important; }
@media (min-width: 768px){
  .col-md-6.pl-md-3{ padding-left: 12px !important; }
  .col-md-6.pr-md-3{ padding-right: 12px !important; }
}

/* 8) Footer trop grand → paddings + tailles texte réduits sur mobile */
.ofam-footer .inner{ max-width:1200px; margin:0 auto; padding: 28px 20px; }
.ofam-footer .col{ margin-bottom: 16px; }
@media (max-width: 767.98px){
  .ofam-footer .inner{ padding: 20px 16px; }
  .ofam-footer h3{ font-size:20px; margin-bottom:8px; }
  .ofam-footer p, .ofam-footer a{ font-size:16px; line-height:1.5; }
}
/* ===== 1) MENU MOBILE (Squarespace) — forcer l’affichage ===== */
@media (max-width: 767.98px){
  /* assure-toi qu’aucune règle précédente ne le masque */
  .Mobile{display:block !important; position:sticky; top:0; z-index:1100;}
  .Mobile-bar--top{display:flex !important; align-items:center; min-height:52px; background:#fff;}
  .Mobile-bar--bottom{display:flex !important; align-items:center; min-height:52px; background:#fff; border-bottom:1px solid #e5e7eb;}
  .Mobile-bar-menu{display:inline-flex !important; align-items:center; padding:10px;}
  /* évite que le contenu passe sous la barre */
  .Site{padding-top:104px !important;} /* 52 + 52 */
}

/* IMPORTANT : sur desktop on garde ton header custom, pas la barre mobile */
@media (min-width: 768px){
  .Mobile{display:none !important;}
}

/* ===== 2) FOOTER COMPACT SUR MOBILE ===== */
@media (max-width: 767.98px){
  .ofam-footer .inner{
    padding:14px 14px !important;
    gap:10px !important;
  }
  .ofam-footer .col{
    flex:1 1 100% !important; /* colonnes empilées */
    min-width:0 !important;
    margin-bottom:8px !important;
  }
  .ofam-footer h3{font-size:18px !important; margin:0 0 6px !important;}
  .ofam-footer p,
  .ofam-footer .nav a{
    font-size:15px !important;
    line-height:1.45 !important;
    margin:0 0 4px !important;
  }
}
/* mini retouche desktop (optionnel) */
@media (min-width: 768px){
  .ofam-footer .inner{padding:18px 16px !important;}
}
/* ===== Menu latéral mobile O'Fam — corrigé ===== */

/* On masque la barre mobile Squarespace pour éviter les conflits */
@media (max-width: 991.98px){
  .Mobile{ display:none !important; }
}

/* Bouton burger : aligne les barres + logo sur une seule ligne */
.ofam-burger{
  position: fixed;
  top: 12px; left: 12px;
  display: inline-flex;              /* << clé : pas de retour à la ligne */
  align-items: center;
  gap: 10px;                         /* espace entre icône et logo */
  padding: 8px 14px;
  background: #0a3a80;               /* fond bleu */
  color: #fff;
  border: 0; border-radius: 14px;
  box-shadow: 0 6px 18px rgba(10,58,128,.25);
  z-index: 1300; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ofam-burger span{
  display: block;
  width: 22px; height: 2px;
  background: #fff; border-radius: 2px;
  margin: 3px 0;
}
.ofam-burger span:nth-of-type(2){ width: 18px; }
.ofam-burger span:nth-of-type(3){ width: 14px; }

/* Logo texte dans le bouton */
.ofam-burger .ofam-logo-text{
  font-family: 'Pinyon Script', serif;
  font-size: 22px; line-height: 1;
  font-weight: 600; color: #fff;
  white-space: nowrap;               /* évite le retour à la ligne */
}

/* Cache le burger sur desktop (ton header desktop reste) */
@media (min-width: 992px){
  .ofam-burger{ display: none !important; }
}


/* Overlay noirci */
.ofam-drawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1200;
}

/* Drawer */
.ofam-drawer{
  position: fixed;
  inset: 0 auto 0 0;
  width: 280px;
  max-width: 86vw;
  background: #ffffff;
  border-right: 1px solid #e7e9ee;
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index: 1250;
  padding: calc(env(safe-area-inset-top, 16px) + 12px) 16px 16px;
  box-shadow: 6px 0 24px rgba(0,0,0,.12);
}

/* Items du menu */
.ofam-drawer-nav{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.ofam-drawer-nav a{
  display: block;
  padding: 12px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #0b1a2b;
  font: 600 17px/1.2 "adobe-garamond-pro", serif;
  background: #f8fafc;
  border: 1px solid #e7e9ee;
}
.ofam-drawer-nav a:hover{ background: #eef5ff; }
.ofam-drawer-nav a.reserve{
  background: #0a3a80;
  color: #fff;
  border-color: #0a3a80;
  text-align: center;
  margin-top: 4px;
}

/* États ouverts (appliqués à <body>) */
.body-drawer-open{ overflow: hidden; }
.body-drawer-open .ofam-drawer{ transform: translateX(0); }
.body-drawer-open .ofam-drawer-overlay{ opacity: 1; pointer-events: auto; }

/* Desktop : on cache le burger et le drawer (header desktop reste) */
@media (min-width: 992px){
  .ofam-burger,
  .ofam-drawer,
  .ofam-drawer-overlay{ display: none !important; }
}
/* ===== Mobile blue bar with centered logo ===== */
@media (max-width: 991.98px){
  /* cache le header desktop */
  #ofam-header{ display:none !important; }

  /* barre bleue plein écran */
  .ofam-mobilebar{
    position: sticky; top: 0; z-index: 1300;
    height: 56px; width: 100%;
    background: #0a3a80; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
  }

  /* logo centré */
  .ofam-mobilebar__logo{
    font-family: 'Pinyon Script', serif;
    font-size: 28px; line-height: 1; color: #fff;
    pointer-events: none;                 /* clics ne prennent pas le focus du logo */
  }

  /* burger à gauche, dans la barre */
  .ofam-burger{
    position: absolute; left: 10px; top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 36px;
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    background: transparent; border: 0; padding: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ofam-burger span{
    height: 2px; background: #fff; border-radius: 2px; width: 22px;
  }
  .ofam-burger span:nth-child(2){ width: 18px; }
  .ofam-burger span:nth-child(3){ width: 14px; }

  /* overlay/drawer (garde tes règles existantes si déjà faites) */
  .ofam-drawer-overlay{
    position: fixed; inset: 0; background: rgba(0,0,0,.35);
    opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1200;
  }
  .ofam-drawer{
    position: fixed; top: 0; left: 0; height: 100vh; width: 84%; max-width: 340px;
    background: #fff; border-right: 1px solid #e7e9ee;
    box-shadow: 6px 0 24px rgba(0,0,0,.12);
    transform: translateX(-100%); transition: transform .25s ease; z-index: 1250;
    padding: 22px 18px;
  }
  .ofam-drawer-nav{ display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
  .ofam-drawer-nav a{
    display: block; padding: 12px 10px; border-radius: 10px; text-decoration: none;
    color: #0b1a2b; font: 600 17px/1.2 "adobe-garamond-pro", serif;
    background: #f8fafc; border: 1px solid #e7e9ee;
  }
  .ofam-drawer-nav a:hover{ background:#eef5ff; }
  .ofam-drawer-nav a.reserve{ background:#0a3a80; color:#fff; border-color:#0a3a80; text-align:center; }

  /* états ouverts (via la classe sur <body>) */
  .body-drawer-open{ overflow: hidden; }
  .body-drawer-open .ofam-drawer{ transform: translateX(0); }
  .body-drawer-open .ofam-drawer-overlay{ opacity: 1; pointer-events: auto; }
}

/* cache le burger sur desktop */
@media (min-width: 992px){
  .ofam-mobilebar, .ofam-burger{ display: none !important; }
}
/* Supprime l'espace blanc au-dessus de la barre mobile */
body, html{
  margin: 0;
  padding: 0;
}

.ofam-mobilebar{
  margin: 0 !important;
}
/* ===== PATCH — en bas du fichier ===== */

/* 0) On masque TOUTE la barre mobile Squarespace et ses overlays */
@media (max-width: 991.98px){
  .Mobile,
  .Mobile-bar,
  .Mobile-overlay{ display:none !important; }
}

/* 1) Enlève le padding fantôme ajouté par l'ancienne barre */
.Site{ padding-top: 0 !important; }

/* 2) Ton topbar bleu : reste collé en haut et au-dessus de tout */
.ofam-topbar{
  position: sticky; top: 0; left: 0; right: 0;
  z-index: 1300; /* au-dessus du contenu */
}

/* 3) Réduit l’espace avant le H1 et le contenu */
.Page .Page-content{ padding-top: 10px !important; }     /* avant le contenu */
.ofam-article > h1{ margin-top: 6px !important; }        /* le H1 lui-même */

/* 4) Drawer : largeur et superposition propres sur mobile */
.ofam-drawer-overlay{ z-index: 1290; }
.ofam-drawer{
  z-index: 1295;
  width: 320px; max-width: 88vw;
}
@media (max-width: 420px){
  .ofam-drawer{ max-width: 92vw; }
}