/*
Theme Name:   On part quand ?
Theme URI:    https://ourbusyfamilydays.org
Description:  Carnet de vacances en famille classé par formule de séjour et par logistique (parcs, villages vacances, train, road trip, campings, budget, vacances scolaires, préparatifs). Thème enfant GeneratePress. Prototype « Bracelet & Planning » : bracelets d'accès, tableau de planning familial, toile de transat. Gabarito + Atkinson Hyperlegible ; menthe, encre pétrole, une touche de grenadine.
Author:       On part quand ?
Template:     generatepress
Version:      1.0.0
Text Domain:  ourbusyfamilydays-fr
*/

/* ============================================================
   ON PART QUAND ? - SYSTÈME DE DESIGN
   Prototype « Bracelet & Planning ». Trois signatures en CSS pur :
   1. Bracelet d'accès (parc, village vacances, piscine) : bande à bouts
      arrondis, deux pressions à gauche, bande adhésive à droite.
      Sert aux rubriques, au menu actif, à la fiche de séjour, au contact.
   2. Tableau de planning : grille à filets, chaque case coiffée d'un
      bandeau « jour » = la vraie date de publication de l'article.
   3. Toile de transat : rayures verticales irrégulières menthe / blanc /
      grenadine, utilisées en séparateur et en carreau d'auteur.
   Règle de formes : images 6px ; bracelets 8px ; boutons en gélule ;
   cartes du planning à angle droit (filets).
   Accent : menthe (une seule famille) ; grenadine réservée aux détails
   (pressions, filet de transat, survol). MOTION≈1.
   ============================================================ */

:root{
  --fond:#F3F6F2;          /* fond de page, blanc menthe très pâle */
  --carte:#FCFDFB;         /* surfaces claires */
  --menthe-pale:#DDF0E4;   /* bandes teintées, bandeaux jour */
  --menthe:#12A86A;        /* accent (aplats, bracelets) */
  --menthe-fonce:#0A7D50;  /* liens / texte accent sur clair (AA) */
  --grenadine:#EF3E55;     /* détails seulement */
  --grenadine-pale:#FCDDE1;
  --encre:#14262B;         /* texte + bandes sombres (pétrole nuit) */
  --encre-2:#1D3338;
  --doux:#4C5D5A;          /* texte secondaire (AA sur fond) */
  --filet:#C8D6CD;
  --sur-encre:#E9F1EC;
  --sur-encre-doux:#A9BEB6;

  --font-titre:'Gabarito', 'Trebuchet MS', sans-serif;
  --font-texte:'Atkinson Hyperlegible', 'Verdana', sans-serif;

  --r-img:6px;
  --r-bracelet:8px;
  --gelule:999px;
  --wrap:1200px;

  --transat:repeating-linear-gradient(90deg,
     var(--menthe) 0 22px, var(--carte) 22px 30px,
     var(--menthe-fonce) 30px 36px, var(--carte) 36px 44px,
     var(--grenadine) 44px 48px, var(--carte) 48px 56px);
}

/* ============================================================ BASE */
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:var(--font-texte); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--menthe-fonce); text-underline-offset:3px; }
a:hover{ color:var(--encre); }
h1,h2,h3,h4,h5{ font-family:var(--font-titre); color:var(--encre); line-height:1.12; letter-spacing:-.01em; margin:0 0 .5em; font-weight:700; }
p{ margin:0 0 1em; }
.screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
:focus-visible{ outline:3px solid var(--menthe); outline-offset:2px; }

.opq-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; box-sizing:border-box; }
.opq-main{ display:block; }

/* barre de lecture : CSS scroll-driven, invisible sans support */
.opq-progress{ position:fixed; top:0; left:0; right:0; height:4px; z-index:1000; pointer-events:none; background:var(--menthe); transform-origin:0 50%; transform:scaleX(0); }
@supports (animation-timeline: scroll()){
  .opq-progress{ animation:opq-lire linear both; animation-timeline:scroll(root); }
  @keyframes opq-lire{ to{ transform:scaleX(1); } }
}
@supports not (animation-timeline: scroll()){ .opq-progress{ display:none; } }

/* toile de transat : séparateur */
.opq-transat{ height:16px; background:var(--transat); }
.opq-transat.fin{ height:10px; }

/* boutons (gélules) */
.opq-btn{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  background:var(--encre); color:var(--carte); text-decoration:none;
  font-family:var(--font-titre); font-weight:700; font-size:1rem;
  padding:13px 26px; border-radius:var(--gelule); border:0; cursor:pointer;
  transition:background-color .2s ease, transform .2s ease;
}
.opq-btn:hover{ background:var(--menthe-fonce); color:#FFFFFF; }
.opq-btn:active{ transform:translateY(1px); }
.opq-btn.menthe{ background:var(--menthe); color:var(--encre); }
.opq-btn.menthe:hover{ background:var(--carte); color:var(--encre); }
.opq-btn.ligne{ background:transparent; color:var(--encre); box-shadow:inset 0 0 0 2px var(--encre); }
.opq-btn.ligne:hover{ background:var(--encre); color:var(--carte); }

/* méta des cartes : données réelles uniquement */
.opq-meta{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:.82rem; color:var(--doux); line-height:1.4; }
.opq-meta b{ color:var(--menthe-fonce); font-weight:700; }
.opq-meta.sur-sombre{ color:var(--sur-encre-doux); }
.opq-meta.sur-sombre b{ color:var(--menthe); }

/* emplacement d'image vide : rayures de transat adoucies */
.opq-ph{ display:block; width:100%; height:100%; min-height:120px; background:var(--transat); opacity:.35; }

/* ============================================================ BRACELET (signature 1) */
.opq-bracelet{
  position:relative; display:flex; align-items:center; gap:12px;
  background:var(--menthe); color:var(--encre);
  border-radius:var(--r-bracelet); padding:10px 34px 10px 40px; min-height:44px; box-sizing:border-box;
}
/* deux pressions à gauche */
.opq-bracelet::before{
  content:""; position:absolute; left:12px; top:50%; width:18px; height:8px; transform:translateY(-50%);
  background:
    radial-gradient(circle at 4px 4px, var(--carte) 0 2px, var(--grenadine) 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at 14px 4px, var(--carte) 0 2px, var(--grenadine) 2.5px 4px, transparent 4.5px);
}
/* bande adhésive à droite */
.opq-bracelet::after{
  content:""; position:absolute; right:10px; top:6px; bottom:6px; width:12px; border-radius:3px;
  background:repeating-linear-gradient(180deg, rgba(20,38,43,.22) 0 2px, transparent 2px 5px);
}
.opq-bracelet.pale{ background:var(--menthe-pale); }
.opq-bracelet.nuit{ background:var(--encre); color:var(--sur-encre); }
.opq-bracelet.nuit::after{ background:repeating-linear-gradient(180deg, rgba(233,241,236,.28) 0 2px, transparent 2px 5px); }
.opq-bracelet.grenadine{ background:var(--grenadine-pale); }

/* ============================================================ EN-TÊTE */
.opq-mast{ background:var(--carte); border-bottom:1px solid var(--filet); }
.opq-mast-in{ max-width:var(--wrap); margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; box-sizing:border-box; }
.opq-np{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--encre); font-family:var(--font-titre); font-weight:800; font-size:1.7rem; letter-spacing:-.02em; line-height:1; }
.opq-np:hover{ color:var(--encre); }
.opq-np-marque{ position:relative; width:46px; height:20px; border-radius:6px; background:var(--menthe); flex:0 0 auto; }
.opq-np-marque::before{ content:""; position:absolute; left:7px; top:6px; width:8px; height:8px; border-radius:50%; background:var(--carte); box-shadow:0 0 0 2px var(--grenadine); }
.opq-np-marque::after{ content:""; position:absolute; right:6px; top:4px; bottom:4px; width:7px; background:repeating-linear-gradient(180deg, rgba(20,38,43,.3) 0 2px, transparent 2px 4px); }
.opq-np-tag{ margin:6px 0 0 58px; font-size:.86rem; color:var(--doux); line-height:1.3; }
.opq-mast-lien{ font-family:var(--font-titre); font-weight:600; font-size:.98rem; color:var(--encre); text-decoration:none; padding:9px 18px; border-radius:var(--gelule); box-shadow:inset 0 0 0 2px var(--menthe); white-space:nowrap; }
.opq-mast-lien:hover{ background:var(--menthe); color:var(--encre); }

.opq-nav{ background:var(--carte); border-bottom:1px solid var(--filet); position:sticky; top:0; z-index:50; }
.opq-nav-in{ max-width:var(--wrap); margin:0 auto; padding:0 16px; box-sizing:border-box; }
.opq-nav-menu{ list-style:none; margin:0; padding:8px 0; display:flex; flex-wrap:nowrap; gap:2px; justify-content:space-between; overflow-x:auto; scrollbar-width:none; }
.opq-nav-menu::-webkit-scrollbar{ display:none; }
.opq-nav-menu li{ margin:0; flex:0 0 auto; }
.opq-nav-menu a{ display:block; padding:8px 12px; border-radius:var(--r-bracelet); font-family:var(--font-titre); font-weight:600; font-size:.98rem; color:var(--encre); text-decoration:none; white-space:nowrap; transition:background-color .2s ease; }
.opq-nav-menu a:hover{ background:var(--menthe-pale); color:var(--encre); }
.opq-nav-menu .current-menu-item > a,
.opq-nav-menu .current-cat > a{ background:var(--menthe); color:var(--encre); }

/* ============================================================ ACCUEIL */
.opq-sec{ padding:72px 0; }
.opq-sec-tete{ max-width:680px; margin:0 0 32px; }
.opq-sec-tete h2{ font-size:clamp(1.8rem, 3.2vw, 2.5rem); }
.opq-sec-tete p{ color:var(--doux); margin:0; }

/* 1. Bandeau */
.opq-hero{ padding:48px 0 56px; }
.opq-hero-in{ display:grid; grid-template-columns:6fr 6fr; gap:48px; align-items:center; }
.opq-hero h1{ font-size:clamp(2.2rem, 4vw, 3.3rem); font-weight:800; line-height:1.05; letter-spacing:-.025em; margin:0 0 20px; }
.opq-hero h1 em{ font-style:normal; background:linear-gradient(transparent 62%, var(--menthe-pale) 62%); }
.opq-hero-txt p{ font-size:1.15rem; color:var(--doux); max-width:30em; margin:0 0 28px; }
.opq-hero-photos{ position:relative; padding:0 0 56px 64px; }
.opq-hero-p1{ display:block; border-radius:var(--r-img); overflow:hidden; aspect-ratio:4/3; }
.opq-hero-p1 img, .opq-hero-p2 img{ width:100%; height:100%; object-fit:cover; }
.opq-hero-p2{ position:absolute; left:0; bottom:0; width:42%; aspect-ratio:1/1; border-radius:var(--r-img); overflow:hidden; border:6px solid var(--fond); }
.opq-hero-bracelet{ position:absolute; right:-10px; top:22px; font-family:var(--font-titre); font-weight:700; font-size:.92rem; box-shadow:0 10px 24px -14px rgba(20,38,43,.6); }

/* 2. Formules en bracelets */
.opq-formules{ background:var(--menthe-pale); padding:72px 0; }
.opq-fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; }
.opq-fc{ display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:center; text-decoration:none; color:var(--encre); }
.opq-fc-img{ width:96px; height:96px; border-radius:var(--r-img); overflow:hidden; background:var(--carte); }
.opq-fc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.opq-fc:hover .opq-fc-img img{ transform:scale(1.05); }
.opq-fc .opq-bracelet{ flex-direction:column; align-items:flex-start; gap:2px; padding-top:12px; padding-bottom:12px; transition:transform .2s ease; }
.opq-fc:nth-child(4n+2) .opq-bracelet, .opq-fc:nth-child(4n+3) .opq-bracelet{ background:var(--carte); }
.opq-fc:hover .opq-bracelet{ transform:translateX(4px); }
.opq-fc strong{ font-family:var(--font-titre); font-size:1.12rem; line-height:1.2; }
.opq-fc em{ font-style:normal; font-size:.9rem; color:var(--encre); opacity:.82; line-height:1.35; }
.opq-fc span.n{ font-size:.78rem; font-weight:700; color:var(--menthe-fonce); }
.opq-fc .opq-bracelet:not(.pale) span.n{ color:var(--encre); }

/* 3. Planning (signature 2) : mosaïque à filets */
.opq-plan{ display:grid; grid-template-columns:repeat(4, 1fr); border-top:2px solid var(--encre); border-left:1px solid var(--filet); background:var(--carte); }
.opq-pc{ display:flex; flex-direction:column; border-right:1px solid var(--filet); border-bottom:1px solid var(--filet); text-decoration:none; color:var(--encre); min-width:0; transition:background-color .2s ease; }
.opq-pc:hover{ background:var(--fond); color:var(--encre); }
.opq-jour{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:8px 14px; background:var(--menthe-pale); font-family:var(--font-titre); font-weight:700; font-size:.88rem; text-transform:capitalize; }
.opq-jour small{ font-family:var(--font-texte); font-weight:400; text-transform:none; color:var(--doux); font-size:.78rem; }
.opq-pc-img{ aspect-ratio:4/3; overflow:hidden; margin:14px 14px 0; border-radius:var(--r-img); }
.opq-pc-img img{ width:100%; height:100%; object-fit:cover; }
.opq-pc-b{ padding:12px 14px 18px; }
.opq-pc h3{ font-size:1.08rem; line-height:1.25; margin:0 0 8px; }
.opq-pc p{ font-size:.95rem; color:var(--doux); margin:0 0 10px; }
.opq-pc.grand{ grid-column:span 2; grid-row:span 2; }
.opq-pc.grand .opq-pc-img{ aspect-ratio:auto; flex:1 1 auto; min-height:300px; }
.opq-pc.grand h3{ font-size:1.6rem; }
.opq-pc.haut{ grid-row:span 2; }
.opq-pc.haut .opq-pc-img{ aspect-ratio:auto; flex:1 1 auto; min-height:260px; }
.opq-plus{ margin-top:28px; }

/* 4. À la une (bande sombre 1) */
.opq-une{ background:var(--encre); color:var(--sur-encre); padding:80px 0; }
.opq-une-in{ display:grid; grid-template-columns:7fr 5fr; gap:48px; align-items:center; }
.opq-une-img{ display:block; border-radius:var(--r-img); overflow:hidden; aspect-ratio:3/2; }
.opq-une-img img{ width:100%; height:100%; object-fit:cover; }
.opq-une h2{ color:var(--menthe); font-size:1rem; font-weight:700; margin:0 0 14px; }
.opq-une h3{ font-size:clamp(1.6rem, 2.8vw, 2.2rem); margin:0 0 14px; }
.opq-une h3 a{ color:var(--carte); text-decoration:none; }
.opq-une h3 a:hover{ color:var(--menthe); }
.opq-une p{ color:var(--sur-encre-doux); }
.opq-une blockquote{ margin:28px 0 0; padding:20px 0 0; border-top:1px solid rgba(233,241,236,.18); font-family:var(--font-titre); font-weight:500; font-size:1.2rem; line-height:1.4; color:var(--sur-encre); }
.opq-une .opq-lire{ color:var(--menthe); font-weight:700; }

/* 5. Auteur */
.opq-auteur-in{ display:grid; grid-template-columns:4fr 6fr; gap:56px; align-items:center; }
.opq-auteur figure{ margin:0; max-width:400px; }
.opq-auteur figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-img); }
.opq-carreau{ position:relative; aspect-ratio:4/5; border-radius:var(--r-img); overflow:hidden; background:var(--transat); display:flex; align-items:flex-end; }
.opq-carreau span{ display:block; margin:0 0 28px 24px; background:var(--carte); color:var(--encre); font-family:var(--font-titre); font-weight:800; font-size:clamp(2.4rem, 5vw, 3.6rem); line-height:1; padding:18px 22px; border-radius:var(--r-bracelet); }
.opq-auteur figcaption{ margin-top:10px; font-size:.88rem; color:var(--doux); }
.opq-auteur h2{ font-size:clamp(1.8rem, 3vw, 2.4rem); }
.opq-auteur p{ max-width:36em; }

/* 6. Par formule (bande sombre 2) */
.opq-bande{ background:var(--encre-2); color:var(--sur-encre); padding:80px 0; }
.opq-bande h2{ color:var(--carte); font-size:clamp(1.8rem, 3vw, 2.4rem); margin-bottom:28px; }
.opq-bgrid{ display:grid; grid-template-columns:6fr 5fr; gap:36px; }
.opq-bc{ display:block; text-decoration:none; color:var(--sur-encre); }
.opq-bc:hover h4{ color:var(--menthe); }
.opq-bc-img{ border-radius:var(--r-img); overflow:hidden; aspect-ratio:16/10; margin-bottom:16px; }
.opq-bc-img img{ width:100%; height:100%; object-fit:cover; }
.opq-bc .opq-bracelet{ display:inline-flex; font-family:var(--font-titre); font-weight:700; font-size:.88rem; min-height:34px; padding:6px 30px 6px 38px; margin-bottom:10px; }
.opq-bc h4{ color:var(--carte); font-size:1.5rem; margin:0 0 8px; transition:color .2s ease; }
.opq-bliste{ display:flex; flex-direction:column; gap:22px; }
.opq-bliste .opq-bc{ display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:start; }
.opq-bliste .opq-bc-img{ aspect-ratio:1/1; margin:0; }
.opq-bliste .opq-bc h4{ font-size:1.12rem; }

/* 7. Engagements : tête à gauche, trois lignes à droite */
.opq-eng-in{ display:grid; grid-template-columns:4fr 8fr; gap:48px; }
.opq-eng-in h2{ font-size:clamp(1.8rem, 3vw, 2.4rem); }
.opq-eng-liste{ list-style:none; margin:0; padding:0; border-top:2px solid var(--encre); }
.opq-eng-liste li{ display:grid; grid-template-columns:1fr 2fr auto; gap:24px; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--filet); }
.opq-eng-liste strong{ font-family:var(--font-titre); font-size:1.1rem; }
.opq-eng-liste p{ margin:0; color:var(--doux); font-size:.98rem; }
.opq-eng-liste a{ font-weight:700; white-space:nowrap; font-size:.95rem; }

/* 8. Lettre */
.opq-lettre{ display:grid; grid-template-columns:1fr 1fr; background:var(--carte); border-top:1px solid var(--filet); }
.opq-lettre-img{ min-height:380px; }
.opq-lettre-img img{ width:100%; height:100%; object-fit:cover; }
.opq-lettre-corps{ padding:64px 56px; align-self:center; max-width:560px; }
.opq-lettre h2{ font-size:clamp(1.8rem, 3vw, 2.3rem); }
.opq-form{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 12px; }
.opq-form label{ width:100%; font-weight:700; font-size:.92rem; }
.opq-form input[type=email]{ flex:1 1 220px; min-width:0; padding:13px 18px; font:inherit; font-size:1rem; color:var(--encre); background:var(--fond); border:2px solid var(--encre); border-radius:var(--gelule); box-sizing:border-box; }
.opq-form input[type=email]::placeholder{ color:#5E6E6A; }
.opq-note{ font-size:.86rem; color:var(--doux); }

/* ============================================================ ARTICLE */
.opq-article{ max-width:780px; margin:0 auto; padding:48px 24px 24px; box-sizing:border-box; }
.opq-ariane{ font-size:.88rem; color:var(--doux); margin-bottom:18px; }
.opq-ariane a{ color:var(--doux); }
.opq-article-cat{ display:inline-flex; font-family:var(--font-titre); font-weight:700; font-size:.9rem; text-decoration:none; min-height:36px; padding:6px 32px 6px 40px; margin-bottom:16px; }
.opq-article-cat:hover{ color:var(--encre); }
.opq-article h1{ font-size:clamp(2rem, 4.2vw, 3rem); font-weight:800; letter-spacing:-.02em; margin:0 0 18px; }
.opq-article-meta{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.92rem; color:var(--doux); margin-bottom:24px; }
.opq-article-meta strong{ color:var(--encre); }
.opq-fiche{ margin:0 0 28px; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:0; background:var(--carte); border:1px solid var(--filet); border-top:4px solid var(--menthe); border-radius:0 0 var(--r-bracelet) var(--r-bracelet); }
.opq-fiche div{ padding:12px 16px; border-right:1px solid var(--filet); }
.opq-fiche div:last-child{ border-right:0; }
.opq-fiche dt{ font-family:var(--font-titre); font-weight:700; font-size:.8rem; color:var(--menthe-fonce); margin:0 0 2px; }
.opq-fiche dd{ margin:0; font-size:.98rem; line-height:1.35; }
.opq-couv{ max-width:1100px; margin:0 auto 36px; padding:0 24px; box-sizing:border-box; }
.opq-couv img{ width:100%; border-radius:var(--r-img); }
.opq-corps{ max-width:700px; margin:0 auto; padding:0 24px; box-sizing:border-box; font-size:1.1rem; line-height:1.75; }
.opq-corps h2{ font-size:1.7rem; margin:1.8em 0 .6em; }
.opq-corps h3{ font-size:1.3rem; margin:1.5em 0 .5em; }
.opq-corps ul, .opq-corps ol{ padding-left:1.3em; }
.opq-corps li{ margin-bottom:.4em; }
.opq-corps blockquote{ margin:1.6em 0; padding:4px 0 4px 22px; border-left:6px solid var(--menthe); font-family:var(--font-titre); font-size:1.25rem; line-height:1.4; }
.opq-corps table{ width:100%; border-collapse:collapse; font-size:.95rem; margin:1.4em 0; }
.opq-corps th{ text-align:left; background:var(--menthe-pale); padding:10px 12px; font-family:var(--font-titre); }
.opq-corps td{ padding:10px 12px; border-bottom:1px solid var(--filet); }
.opq-corps img{ border-radius:var(--r-img); }
.ftc-disclosure{ background:var(--grenadine-pale); border-radius:var(--r-bracelet); padding:12px 18px; margin:0 0 28px; font-size:.92rem; line-height:1.5; }
.ftc-disclosure p{ margin:0; }
.ftc-disclosure a{ color:var(--encre); font-weight:700; }

.opq-bio{ max-width:700px; margin:48px auto 0; padding:24px; box-sizing:border-box; display:grid; grid-template-columns:72px 1fr; gap:20px; background:var(--carte); border:1px solid var(--filet); border-radius:var(--r-bracelet); }
.opq-bio-init{ width:72px; height:72px; border-radius:var(--r-bracelet); background:var(--transat); display:flex; align-items:center; justify-content:center; }
.opq-bio-init span{ background:var(--carte); font-family:var(--font-titre); font-weight:800; font-size:1.2rem; padding:6px 8px; border-radius:6px; }
.opq-bio h4{ font-size:1.2rem; margin:0 0 6px; }
.opq-bio p{ font-size:.96rem; color:var(--doux); margin:0 0 8px; }
.opq-bio a{ font-weight:700; font-size:.95rem; }

.opq-lies{ max-width:1100px; margin:64px auto 0; padding:0 24px; box-sizing:border-box; }
.opq-lies h3{ font-size:1.5rem; margin-bottom:20px; }
.opq-lies-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; }
.opq-lie{ text-decoration:none; color:var(--encre); }
.opq-lie-img{ aspect-ratio:4/3; border-radius:var(--r-img); overflow:hidden; margin-bottom:10px; background:var(--menthe-pale); }
.opq-lie:first-child .opq-lie-img{ aspect-ratio:16/10; }
.opq-lie-img img{ width:100%; height:100%; object-fit:cover; }
.opq-lie h4{ font-size:1.1rem; margin:0; }
.opq-lie:hover h4{ color:var(--menthe-fonce); }

.opq-post-lettre{ margin:72px 0 0; background:var(--menthe-pale); padding:56px 24px; }
.opq-post-lettre-in{ max-width:640px; margin:0 auto; }
.opq-post-lettre h3{ font-size:1.7rem; }

/* ============================================================ ARCHIVE */
.opq-arch-tete{ background:var(--carte); border-bottom:1px solid var(--filet); }
.opq-arch-tete-in{ max-width:var(--wrap); margin:0 auto; padding:48px 24px 40px; box-sizing:border-box; }
.opq-arch-tete .opq-bracelet{ display:inline-flex; font-family:var(--font-titre); font-weight:700; font-size:.9rem; min-height:34px; padding:6px 30px 6px 38px; margin-bottom:16px; }
.opq-arch-tete h1{ font-size:clamp(2rem, 4.4vw, 3.2rem); font-weight:800; margin:0 0 10px; }
.opq-arch-tete p{ color:var(--doux); max-width:40em; margin:0; }
.opq-arch-une{ max-width:var(--wrap); margin:48px auto 0; padding:0 24px; box-sizing:border-box; display:grid; grid-template-columns:7fr 5fr; gap:40px; align-items:center; }
.opq-arch-une-img{ display:block; aspect-ratio:3/2; border-radius:var(--r-img); overflow:hidden; background:var(--menthe-pale); }
.opq-arch-une-img img{ width:100%; height:100%; object-fit:cover; }
.opq-arch-une h2{ font-size:clamp(1.6rem, 2.6vw, 2.1rem); }
.opq-arch-une h2 a{ color:var(--encre); text-decoration:none; }
.opq-arch-une h2 a:hover{ color:var(--menthe-fonce); }
.opq-arch-grid{ max-width:var(--wrap); margin:48px auto 0; padding:0 24px; box-sizing:border-box; display:grid; grid-template-columns:repeat(3, 1fr); border-top:2px solid var(--encre); }
.opq-arch-grid .opq-pc{ border-left:0; }
.opq-arch-grid .opq-pc:nth-child(3n){ border-right:0; }
.opq-arch-vide{ max-width:var(--wrap); margin:48px auto; padding:0 24px; color:var(--doux); }
.opq-pagination{ max-width:var(--wrap); margin:40px auto 72px; padding:0 24px; box-sizing:border-box; }
.opq-pagination .nav-links{ display:flex; flex-wrap:wrap; gap:8px; }
.opq-pagination .page-numbers{ display:inline-block; min-width:44px; text-align:center; padding:10px 14px; border-radius:var(--r-bracelet); background:var(--carte); border:1px solid var(--filet); color:var(--encre); text-decoration:none; font-family:var(--font-titre); font-weight:700; box-sizing:border-box; }
.opq-pagination .page-numbers.current{ background:var(--menthe); border-color:var(--menthe); }

/* ============================================================ PAGES FIXES : « Règlement du séjour »
   Page en deux colonnes : sommaire collant à gauche (desktop), corps à droite.
   Contact en bracelet large, renvois en bracelets alignés. Aucun numéro de chapitre. */
.opq-reg{ max-width:var(--wrap); margin:0 auto; padding:0 24px 72px; box-sizing:border-box; }
.opq-reg-tete{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; padding:48px 0 28px; border-bottom:2px solid var(--encre); }
.opq-reg-tete h1{ font-size:clamp(2rem, 4.4vw, 3.1rem); font-weight:800; margin:0; }
.opq-reg-maj{ display:inline-flex; font-size:.9rem; font-weight:700; min-height:38px; white-space:nowrap; }
.opq-reg-transat{ height:10px; background:var(--transat); margin:0 0 40px; }
.opq-reg-in{ display:grid; grid-template-columns:260px minmax(0, 1fr); gap:56px; align-items:start; }
.opq-reg-in.sans-sommaire{ grid-template-columns:minmax(0, 1fr); }
.opq-reg-sommaire{ position:sticky; top:80px; background:var(--carte); border:1px solid var(--filet); border-radius:var(--r-bracelet); padding:18px 18px 12px; }
.opq-reg-sommaire h2{ font-size:1rem; margin:0 0 10px; }
.opq-reg-sommaire ol{ list-style:none; margin:0; padding:0; }
.opq-reg-sommaire li{ margin:0; }
.opq-reg-sommaire a{ display:block; padding:7px 10px 7px 14px; margin:0 0 4px; border-left:4px solid var(--menthe-pale); color:var(--encre); text-decoration:none; font-size:.93rem; line-height:1.35; }
.opq-reg-sommaire a:hover{ border-left-color:var(--menthe); background:var(--fond); }
.opq-reg-corps{ max-width:720px; font-size:1.05rem; line-height:1.75; }
.opq-reg-corps h2{ font-size:1.5rem; margin:1.8em 0 .6em; padding-top:6px; scroll-margin-top:80px; }
.opq-reg-corps h2:first-child{ margin-top:0; }
.opq-reg-corps h3{ font-size:1.2rem; margin:1.4em 0 .4em; }
.opq-reg-corps table{ width:100%; border-collapse:collapse; margin:1.2em 0; font-size:.96rem; }
.opq-reg-corps th, .opq-reg-corps td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--filet); vertical-align:top; }
.opq-reg-corps th{ background:var(--menthe-pale); font-family:var(--font-titre); }
.opq-reg-contact{ margin:48px 0 0; max-width:720px; }
.opq-reg-contact .opq-bracelet{ flex-wrap:wrap; padding-top:16px; padding-bottom:16px; gap:4px 14px; }
.opq-reg-contact strong{ font-family:var(--font-titre); font-size:1.05rem; }
.opq-reg-contact a{ color:var(--encre); font-weight:700; word-break:break-all; }
.opq-reg-renvois{ margin:56px 0 0; padding-top:28px; border-top:1px solid var(--filet); }
.opq-reg-renvois h2{ font-size:1.3rem; margin:0 0 16px; }
.opq-reg-renvois ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.opq-reg-renvois a{ text-decoration:none; font-family:var(--font-titre); font-weight:600; font-size:.98rem; min-height:40px; transition:background-color .2s ease; }
.opq-reg-renvois a:hover{ background:var(--menthe); color:var(--encre); }

/* ============================================================ PIED DE PAGE */
.opq-pied{ background:var(--encre); color:var(--sur-encre); margin-top:0; }
.opq-pied-in{ max-width:var(--wrap); margin:0 auto; padding:56px 24px 32px; box-sizing:border-box; display:grid; grid-template-columns:4fr 3fr 3fr; gap:40px; }
.opq-pied-nom{ display:flex; align-items:center; gap:10px; font-family:var(--font-titre); font-weight:800; font-size:1.5rem; color:var(--carte); margin:0 0 12px; }
.opq-pied p{ color:var(--sur-encre-doux); font-size:.95rem; }
.opq-pied-h{ font-size:1rem; color:var(--menthe); margin:0 0 12px; }
.opq-pied ul{ list-style:none; margin:0; padding:0; }
.opq-pied li{ margin:0 0 7px; }
.opq-pied a{ color:var(--sur-encre); text-decoration:none; font-size:.95rem; }
.opq-pied a:hover{ color:var(--menthe); text-decoration:underline; }
.opq-pied-rgpd{ max-width:var(--wrap); margin:0 auto; padding:18px 24px 28px; box-sizing:border-box; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; border-top:1px solid rgba(233,241,236,.14); font-size:.86rem; color:var(--sur-encre-doux); }
.opq-pied-rgpd a{ color:var(--sur-encre); text-decoration:underline; font-size:.86rem; }

/* éléments d'image en <span> : toujours en bloc */
.opq-fc-img, .opq-pc-img, .opq-bc-img, .opq-lie-img, .opq-arch-une-img, .opq-hero-p1, .opq-hero-p2{ display:block; }
.opq-pc-b{ display:block; }

/* GeneratePress : neutraliser les marges de conteneur héritées */
.site-content, .site-main{ margin:0; padding:0; }

/* ============================================================ RESPONSIVE */
@media (max-width:1024px){
  .opq-plan{ grid-template-columns:repeat(2, 1fr); }
  .opq-pc.grand{ grid-column:span 2; grid-row:auto; }
  .opq-pc.haut{ grid-row:auto; }
  .opq-pc.haut .opq-pc-img{ aspect-ratio:4/3; min-height:0; }
  .opq-arch-grid{ grid-template-columns:repeat(2, 1fr); }
  .opq-arch-grid .opq-pc:nth-child(3n){ border-right:1px solid var(--filet); }
  .opq-pied-in{ grid-template-columns:1fr 1fr; }
  .opq-reg-in{ grid-template-columns:220px minmax(0, 1fr); gap:36px; }
}
@media (max-width:860px){
  .opq-hero-in, .opq-une-in, .opq-auteur-in, .opq-bgrid, .opq-eng-in, .opq-arch-une{ grid-template-columns:1fr; gap:28px; }
  .opq-fgrid{ grid-template-columns:1fr; }
  .opq-lettre{ grid-template-columns:1fr; }
  .opq-lettre-img{ min-height:240px; }
  .opq-lettre-corps{ padding:40px 24px; }
  .opq-eng-liste li{ grid-template-columns:1fr; gap:6px; }
  .opq-lies-grid{ grid-template-columns:1fr 1fr; }
  .opq-lie:first-child{ grid-column:span 2; }
  .opq-reg-in{ grid-template-columns:1fr; gap:28px; }
  .opq-reg-sommaire{ position:static; }
  .opq-auteur figure{ max-width:360px; }
}
@media (max-width:640px){
  body{ font-size:17px; }
  .opq-wrap, .opq-mast-in{ padding-left:16px; padding-right:16px; }
  .opq-mast-in{ flex-wrap:wrap; gap:10px; }
  .opq-np{ font-size:1.4rem; }
  .opq-np-marque{ width:38px; height:17px; }
  .opq-np-tag{ margin-left:50px; font-size:.8rem; }
  .opq-mast-lien{ padding:7px 14px; font-size:.9rem; }
  .opq-nav-menu{ justify-content:flex-start; }
  .opq-sec, .opq-formules{ padding:52px 0; }
  .opq-une, .opq-bande{ padding:56px 0; }
  .opq-hero{ padding:28px 0 40px; }
  .opq-hero-photos{ padding:0 0 40px 36px; }
  .opq-hero-bracelet{ right:-4px; top:12px; font-size:.82rem; }
  .opq-fc{ grid-template-columns:76px 1fr; gap:12px; }
  .opq-fc-img{ width:76px; height:76px; }
  .opq-plan{ grid-template-columns:1fr; }
  .opq-pc.grand{ grid-column:auto; }
  .opq-pc.grand .opq-pc-img{ min-height:220px; }
  .opq-bliste .opq-bc{ grid-template-columns:96px 1fr; }
  .opq-arch-grid{ grid-template-columns:1fr; padding:0; margin-left:16px; margin-right:16px; }
  .opq-arch-grid .opq-pc{ border-right:0; }
  .opq-lies-grid{ grid-template-columns:1fr; }
  .opq-lie:first-child{ grid-column:auto; }
  .opq-pied-in{ grid-template-columns:1fr; }
  .opq-reg{ padding-left:16px; padding-right:16px; }
  .opq-reg-tete{ grid-template-columns:1fr; }
  .opq-bio{ grid-template-columns:1fr; }
  .opq-article, .opq-corps, .opq-couv{ padding-left:16px; padding-right:16px; }
}

/* ============================================================
   BANDEAU COOKIES : volet vertical au bord droit
   Panneau sombre étroit et haut, centré verticalement, coins arrondis
   côté page uniquement, coiffé d'une bande de transat ; boutons empilés.
   (tarteaucitron injecte son CSS après le nôtre -> !important)
   On ne force JAMAIS display sur #tarteaucitronAlertBig : la lib l'affiche / le masque.
   ============================================================ */
#tarteaucitronRoot #tarteaucitronAlertBig{
  position:fixed !important; right:0 !important; left:auto !important; top:50% !important; bottom:auto !important;
  transform:translateY(-50%) !important; margin:0 !important;
  width:280px !important; max-width:calc(100vw - 40px) !important; min-width:0 !important; box-sizing:border-box !important;
  max-height:calc(100vh - 32px) !important; overflow-y:auto !important;
  background-color:var(--encre) !important;
  background-image:repeating-linear-gradient(90deg, var(--menthe) 0 22px, var(--carte) 22px 30px, var(--menthe-fonce) 30px 36px, var(--carte) 36px 44px, var(--grenadine) 44px 48px, var(--carte) 48px 56px) !important;
  background-size:100% 14px !important; background-repeat:no-repeat !important; background-position:0 0 !important;
  color:var(--sur-encre) !important;
  border:0 !important; border-radius:18px 0 0 18px !important;
  box-shadow:-18px 0 44px -22px rgba(20,38,43,.7) !important;
  padding:34px 20px 18px 22px !important; text-align:left !important;
  font-family:var(--font-texte) !important; line-height:1.45 !important; z-index:2147483640 !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig::before{
  content:"Avant de continuer"; display:block; margin:0 0 8px;
  font-family:var(--font-titre); font-weight:800; font-size:1.15rem; color:var(--carte); line-height:1.2;
}
#tarteaucitronRoot #tarteaucitronDisclaimerAlert,
#tarteaucitronRoot #tarteaucitronDisclaimerAlert *{
  color:var(--sur-encre) !important; font-size:.92rem !important; line-height:1.45 !important;
  text-align:left !important; font-family:var(--font-texte) !important;
}
#tarteaucitronRoot #tarteaucitronDisclaimerAlert{ display:block !important; margin:0 0 16px !important; padding:0 !important; }
#tarteaucitronRoot #tarteaucitronAlertBig br{ display:none !important; }
#tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCheck,
#tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCross{ display:none !important; }
#tarteaucitronRoot #tarteaucitronAlertBig button{
  display:block !important; width:100% !important; box-sizing:border-box !important;
  margin:0 0 8px !important; padding:11px 16px !important; border-radius:var(--gelule) !important;
  font-family:var(--font-titre) !important; font-size:.95rem !important; font-weight:700 !important; line-height:1.2 !important;
  letter-spacing:0 !important; text-transform:none !important; cursor:pointer !important; text-align:center !important; white-space:normal !important;
  border:0 !important; background:transparent !important; color:var(--sur-encre) !important; box-shadow:inset 0 0 0 2px rgba(233,241,236,.45) !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2{ background:var(--menthe) !important; color:var(--encre) !important; box-shadow:none !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2:hover{ background:var(--carte) !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2:hover{ background:rgba(233,241,236,.12) !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert{ box-shadow:none !important; text-decoration:underline !important; text-underline-offset:3px !important; font-weight:600 !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl{
  box-shadow:none !important; padding:4px 0 0 !important; margin:4px 0 0 !important; color:var(--sur-encre-doux) !important;
  font-family:var(--font-texte) !important; font-size:.82rem !important; font-weight:400 !important; text-align:left !important;
  text-decoration:underline !important; text-underline-offset:3px !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl:hover{ color:var(--menthe) !important; }

/* bouton de réouverture : languette verticale menthe collée au bord droit */
#tarteaucitronRoot #tarteaucitronIcon, #tarteaucitronIcon{
  right:0 !important; left:auto !important; bottom:22vh !important; top:auto !important;
  transform:none !important; width:auto !important; height:auto !important; background:transparent !important; padding:0 !important; margin:0 !important;
}
#tarteaucitronManager img{display:none !important;}
#tarteaucitronRoot #tarteaucitronManager img{display:none !important;}
#tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager, #tarteaucitronIcon #tarteaucitronManager{
  display:flex !important; align-items:center !important; gap:8px !important;
  writing-mode:vertical-rl !important; width:auto !important; height:auto !important;
  padding:14px 9px !important; line-height:1 !important;
  background:var(--menthe) !important; border:0 !important; border-radius:12px 0 0 12px !important;
  box-shadow:-6px 6px 18px -10px rgba(20,38,43,.6) !important;
}
#tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager::before, #tarteaucitronIcon #tarteaucitronManager::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--carte); box-shadow:0 0 0 2px var(--grenadine);
}
#tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager::after, #tarteaucitronIcon #tarteaucitronManager::after{
  content:"Volet cookies"; font-family:var(--font-titre); font-size:.86rem; font-weight:700; color:var(--encre);
}

@media (max-width:640px){
  #tarteaucitronRoot #tarteaucitronAlertBig{ top:auto !important; bottom:12px !important; transform:none !important; width:min(290px, calc(100vw - 36px)) !important; max-height:calc(100vh - 80px) !important; padding:30px 16px 14px 18px !important; }
  #tarteaucitronRoot #tarteaucitronDisclaimerAlert, #tarteaucitronRoot #tarteaucitronDisclaimerAlert *{ font-size:.86rem !important; }
  #tarteaucitronRoot #tarteaucitronAlertBig button{ padding:10px 14px !important; font-size:.9rem !important; }
  #tarteaucitronRoot #tarteaucitronIcon, #tarteaucitronIcon{ bottom:16vh !important; }
}

/* ============================================================ MOUVEMENT RÉDUIT */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition:none !important; animation:none !important; }
  .opq-progress{ display:none; }
}