/*
Theme Name: SoOnde
Theme URI: https://soonde.fr
Author: SoOnde
Description: Thème sur mesure pour SoOnde, agence de voyage intérieur. Trois portes — Danser, Recevoir, Écouter — un agenda d'événements et une boutique de capsules sonores.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: soonde
Tags: dark, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   1. Jetons de style
   Un monde unique, assumé : la salle au moment du voyage.
   ========================================================================== */
:root{
  --nuit:#0F1512;
  --voile:#151D18;
  --relief:#1C2620;
  --ligne:#293429;
  --ligne-fine:#212B25;

  --os:#EAE5D9;
  --sable:#B0AB9C;
  --cendre:#7B8178;

  --laiton:#C79B57;
  --laiton-clair:#E0BC82;

  --danser:#C79B57;
  --recevoir:#82A07C;
  --ecouter:#7A96A6;
  --alerte:#C97A62;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  --mesure:1180px;
  --gouttiere:28px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--nuit);
  color:var(--os);
  font-family:Karla,"Helvetica Neue",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:var(--grain);opacity:.035;mix-blend-mode:overlay;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 18px}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--laiton);outline-offset:3px;border-radius:2px}

.contenu{
  max-width:var(--mesure);margin:0 auto;
  padding-left:var(--gouttiere);padding-right:var(--gouttiere);
  position:relative;z-index:1;
}
.ecran-lecteur{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.saut-contenu{
  position:absolute;left:-9999px;top:0;background:var(--laiton);color:var(--nuit);
  padding:10px 18px;font-weight:700;z-index:100;
}
.saut-contenu:focus{left:var(--gouttiere);top:10px}

/* ==========================================================================
   3. Typographie
   ========================================================================== */
h1,h2,h3,h4{font-family:Eczar,Georgia,serif;font-weight:500;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(34px,5.4vw,60px);line-height:1.06;text-wrap:balance}
h2{font-size:clamp(26px,3.2vw,34px);line-height:1.1}
h3{font-size:21px;line-height:1.2}
.sur-titre{
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cendre);font-weight:600;
}
.accent{color:var(--laiton)}

/* ==========================================================================
   4. En-tête
   ========================================================================== */
.barre{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:32px;padding:26px 0 0;flex-wrap:wrap;
}
.marque{
  font-family:Eczar,Georgia,serif;font-weight:600;font-size:27px;
  letter-spacing:.02em;line-height:1;color:var(--os);
}
.marque span{color:var(--laiton)}
.marque img{max-height:44px;width:auto;display:block}
.marque.pied img{max-height:34px}

.menu-principal{display:flex;gap:26px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.menu-principal a{
  font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--sable);
  font-weight:500;padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;display:inline-block;
}
.menu-principal a:hover{color:var(--os);border-color:var(--laiton)}
.menu-principal .current-menu-item > a,
.menu-principal .current_page_item > a,
.menu-principal .current-menu-ancestor > a{color:var(--os);border-color:var(--laiton)}

.bascule-menu{display:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sable);font-weight:600;border:1px solid var(--ligne);padding:9px 14px}

.onde{display:block;width:100%;height:66px;margin:22px 0 0;opacity:.85}

/* ==========================================================================
   5. Blocs communs
   ========================================================================== */
.section{padding-top:72px}
.chapeau{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--ligne);
}
.chapeau .lien{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton);
  font-weight:600;border-bottom:1px solid transparent;transition:border-color .25s;
}
.chapeau .lien:hover{border-color:var(--laiton)}
.mention{
  margin:16px 0 0;font-size:13px;color:var(--cendre);line-height:1.55;
  border-left:2px solid var(--ligne);padding-left:12px;max-width:64ch;
}

.bouton{
  display:inline-block;padding:12px 22px;font-size:12.5px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:700;white-space:nowrap;
  background:var(--laiton);color:#12180F;border:1px solid var(--laiton);
  transition:background .28s,color .28s,border-color .28s;
}
.bouton:hover{background:var(--laiton-clair);border-color:var(--laiton-clair);color:#12180F}
.bouton.creux{background:transparent;color:var(--laiton);border-color:var(--ligne)}
.bouton.creux:hover{background:transparent;color:var(--laiton-clair);border-color:var(--laiton)}
.bouton[disabled],.bouton.inactif{opacity:.35;cursor:not-allowed;pointer-events:none}

/* ==========================================================================
   6. Énoncé d'accueil et têtes de page
   ========================================================================== */
.enonce{padding:38px 0 54px;border-bottom:1px solid var(--ligne-fine)}
.enonce h1{margin:14px 0 0;max-width:15ch}
.enonce h1 em{font-style:normal;color:var(--laiton)}
.enonce .accroche{margin:20px 0 0;max-width:46ch;color:var(--sable);font-size:19px;line-height:1.55}

.page-tete{padding:40px 0 44px;border-bottom:1px solid var(--ligne-fine)}
.page-tete h1{max-width:18ch;font-size:clamp(38px,6vw,66px);margin:14px 0 0}
.page-tete .accroche{margin:22px 0 0;max-width:52ch;color:var(--sable);font-size:19px;line-height:1.55}

/* ==========================================================================
   7. Les trois portes
   ========================================================================== */
.portes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  margin:2px 0 0;background:var(--ligne-fine);
}
.porte{
  position:relative;display:block;background:var(--voile);padding:0 0 30px;
  overflow:hidden;isolation:isolate;transition:background .4s ease;
}
.porte:hover{background:var(--relief)}
.porte .visuel{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:
    radial-gradient(115% 85% at 50% 14%, color-mix(in srgb, var(--ton,var(--laiton)) 34%, transparent) 0%, transparent 64%),
    linear-gradient(168deg,#1B2621 0%,#121A16 58%,#0F1512 100%);
}
.porte .visuel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.porte:hover .visuel img{transform:scale(1.03)}
.porte .visuel::after{
  content:"";position:absolute;inset:0;background-image:var(--grain);
  opacity:.06;mix-blend-mode:overlay;pointer-events:none;
}
.porte .trait{
  position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--ton,var(--laiton)) 42%,transparent);opacity:.7;
}
.porte .a-faire{
  position:absolute;left:22px;right:22px;bottom:22px;z-index:2;
  font-size:11px;line-height:1.55;letter-spacing:.05em;color:var(--cendre);
  border-left:2px solid color-mix(in srgb, var(--ton,var(--laiton)) 55%, transparent);padding-left:11px;
}
.porte .a-faire b{
  display:block;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb, var(--ton,var(--laiton)) 78%, var(--os));
  font-weight:600;font-size:10px;margin-bottom:3px;
}
.porte .verbe{
  font-family:Eczar,Georgia,serif;font-weight:600;
  font-size:clamp(30px,3.6vw,42px);line-height:1;letter-spacing:.03em;
  color:var(--os);margin:26px 26px 0;
  transition:letter-spacing .45s cubic-bezier(.22,.61,.36,1),color .3s;
}
.porte:hover .verbe{letter-spacing:.09em;color:var(--ton,var(--laiton))}
.porte .dit{margin:12px 26px 0;color:var(--sable);font-size:15.5px;line-height:1.55;max-width:34ch}
.porte .detail{
  margin:16px 26px 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ton,var(--laiton));font-weight:600;display:flex;align-items:center;gap:9px;
}
.porte .detail::after{
  content:"";width:16px;height:1px;background:currentColor;
  transition:width .35s cubic-bezier(.22,.61,.36,1);
}
.porte:hover .detail::after{width:32px}

/* ==========================================================================
   8. Agenda
   ========================================================================== */
.dates{display:grid;gap:1px;background:var(--ligne-fine);margin-top:26px}
.date{
  background:var(--voile);display:grid;
  grid-template-columns:96px 168px 1fr auto;gap:28px;align-items:center;
  padding:22px 26px;transition:background .3s;
}
.date:hover{background:var(--relief)}
.date.passe{opacity:.45}
.quand .jour{
  font-family:Eczar,Georgia,serif;font-size:31px;font-weight:600;line-height:1;
  color:var(--os);font-variant-numeric:tabular-nums;display:block;
}
.quand .mois{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--laiton);font-weight:600;margin-top:6px;display:block;
}
.vignette{
  aspect-ratio:16/10;position:relative;overflow:hidden;border:1px solid var(--ligne-fine);
  background:
    radial-gradient(100% 80% at 30% 20%, rgba(199,155,87,.18) 0%, transparent 60%),
    linear-gradient(150deg,#1B2520,#111814);
}
.vignette img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vignette::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.07;mix-blend-mode:overlay}
.vignette .attente{
  position:absolute;inset:auto 10px 9px 10px;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cendre);font-weight:600;
}
.quoi h3 a:hover{color:var(--laiton)}
.quoi .ou{
  margin:7px 0 0;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sable);font-weight:500;display:flex;flex-wrap:wrap;gap:6px 14px;
}
.quoi .ou b{color:var(--os);font-weight:600}
.quoi .extrait{margin:10px 0 0;color:var(--sable);font-size:15px;max-width:46ch;line-height:1.55}
.quoi .extrait p{margin:0}

.vide{
  margin-top:26px;background:var(--voile);border:1px solid var(--ligne-fine);
  padding:36px 30px;color:var(--sable);
}
.vide p{margin:0;max-width:52ch}

/* ==========================================================================
   9. Fiche d'un événement
   ========================================================================== */
.evenement-tete{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;padding-top:44px}
.evenement-photo{
  position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--ligne-fine);
  background:linear-gradient(160deg,#1B2621,#101714);
}
.evenement-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.faits{display:grid;gap:1px;background:var(--ligne-fine);border:1px solid var(--ligne-fine);margin-top:24px}
.fait{background:var(--voile);display:grid;grid-template-columns:130px 1fr;gap:20px;padding:15px 20px;align-items:baseline}
.fait dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cendre);font-weight:600}
.fait dd{margin:0;font-size:16px;color:var(--os)}

/* ==========================================================================
   10. Corps de page (éditeur de blocs)
   ========================================================================== */
.corps{max-width:66ch;padding-top:44px}
.corps.large{max-width:none}
.corps p,.corps li{color:var(--sable);font-size:17px}
.corps h2{margin:44px 0 16px}
.corps h3{margin:34px 0 12px}
.corps a{color:var(--laiton);text-underline-offset:3px;text-decoration:underline}
.corps ul,.corps ol{padding-left:0;list-style:none;display:grid;gap:12px;margin:0 0 20px}
.corps ul li{padding-left:20px;position:relative}
.corps ul li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--laiton)}
.corps ol{counter-reset:c}
.corps ol li{counter-increment:c;padding-left:32px;position:relative}
.corps ol li::before{
  content:counter(c,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:Karla,sans-serif;font-size:12px;letter-spacing:.1em;color:var(--laiton);font-weight:700;
}
.corps blockquote{
  margin:30px 0;padding-left:22px;border-left:2px solid var(--laiton);
  font-family:Eczar,Georgia,serif;font-size:22px;line-height:1.45;color:var(--os);
}
.corps figure{margin:30px 0}
.corps figcaption{margin-top:10px;font-size:13px;color:var(--cendre)}
.corps hr{border:none;border-top:1px solid var(--ligne);margin:44px 0}

/* ==========================================================================
   11. Fil WhatsApp
   ========================================================================== */
.fil{
  margin-top:72px;background:var(--relief);border:1px solid var(--ligne);
  padding:34px 36px;display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.fil > div{flex:1 1 480px}
.fil h2{font-size:clamp(22px,2.6vw,28px);max-width:28ch}
.fil p{margin:10px 0 0;color:var(--sable);font-size:15px;max-width:52ch}

/* ==========================================================================
   12. Boutique
   ========================================================================== */
.capsules{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ligne-fine);margin-top:28px}
.capsule{background:var(--voile);padding:0 0 26px;display:flex;flex-direction:column}
.capsule .pochette{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:
    radial-gradient(100% 90% at 50% 20%, rgba(122,150,166,.22) 0%, transparent 62%),
    linear-gradient(170deg,#18211D,#101614);
}
.capsule .pochette img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.capsule .pochette::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.07;mix-blend-mode:overlay}
.capsule .etiq{
  position:absolute;top:16px;left:16px;z-index:2;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;padding:5px 10px;color:var(--nuit);background:var(--ecouter);
}
.capsule .etiq.discret{background:transparent;color:var(--cendre);border:1px solid var(--ligne)}
.capsule h3{margin:22px 24px 0;font-size:20px}
.capsule .duree{margin:9px 24px 0;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--cendre);font-weight:600}
.capsule .resume{margin:12px 24px 0;color:var(--sable);font-size:15px;line-height:1.55}
.capsule .resume p{margin:0}
.capsule .bas{margin:auto 24px 0;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.capsule .prix{font-family:Eczar,Georgia,serif;font-size:24px;color:var(--os);font-variant-numeric:tabular-nums}
.capsule .prix del{color:var(--cendre);font-size:16px;margin-right:8px}
.capsule .prix ins{text-decoration:none}

/* ==========================================================================
   12 bis. Emplacements photo, bandeau large, bloc À propos
   ========================================================================== */
.a-faire{
  display:block;font-size:11.5px;line-height:1.55;letter-spacing:.05em;color:var(--cendre);
  border-left:2px solid color-mix(in srgb, var(--ton,var(--laiton)) 55%, transparent);
  padding-left:12px;max-width:46ch;z-index:2;
}
.a-faire b{
  display:block;letter-spacing:.2em;text-transform:uppercase;font-size:10px;font-weight:600;
  margin-bottom:3px;color:color-mix(in srgb, var(--ton,var(--laiton)) 78%, var(--os));
}

.bandeau{
  position:relative;aspect-ratio:21/9;overflow:hidden;margin-top:32px;
  border:1px solid var(--ligne-fine);
  background:
    radial-gradient(90% 120% at 30% 10%, color-mix(in srgb, var(--ton,var(--laiton)) 26%, transparent) 0%, transparent 62%),
    linear-gradient(160deg,#1B2621,#101714);
}
.bandeau img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bandeau::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.07;mix-blend-mode:overlay}
.bandeau .a-faire{position:absolute;left:26px;bottom:24px;right:26px}

.propos{display:grid;grid-template-columns:.85fr 1fr;gap:56px;align-items:center}
.propos .portrait{
  position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--ligne-fine);
  background:
    radial-gradient(90% 70% at 70% 25%, color-mix(in srgb, var(--recevoir) 20%, transparent) 0%, transparent 62%),
    linear-gradient(200deg,#1A231E,#101613);
}
.propos .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.propos .portrait::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.07;mix-blend-mode:overlay}
.propos .portrait .a-faire{
  position:absolute;left:20px;right:20px;bottom:20px;
  border-left-color:color-mix(in srgb, var(--recevoir) 55%, transparent);
}
.propos .portrait .a-faire b{color:color-mix(in srgb, var(--recevoir) 78%, var(--os))}
.propos .accroche{color:var(--os);font-size:19px;line-height:1.55;max-width:44ch}
.propos .bouton{margin-top:10px}

/* Teinte de page selon la porte ouverte */
body.porte-danser{--ton:var(--danser)}
body.porte-recevoir{--ton:var(--recevoir)}
body.porte-ecouter{--ton:var(--ecouter)}
body.porte-recevoir .quand .mois,
body.porte-recevoir .chapeau .lien{color:var(--recevoir)}
body.porte-ecouter .quand .mois,
body.porte-ecouter .chapeau .lien{color:var(--ecouter)}

/* ==========================================================================
   12 ter. Pagination, recherche, commentaires
   ========================================================================== */
.pagination{margin-top:40px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  padding:0 12px;border:1px solid var(--ligne);color:var(--sable);font-size:14px;
  font-variant-numeric:tabular-nums;transition:border-color .25s,color .25s;
}
.pagination .page-numbers:hover{border-color:var(--laiton);color:var(--laiton)}
.pagination .page-numbers.current{background:var(--laiton);border-color:var(--laiton);color:#12180F;font-weight:700}
.pagination .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

.search-form{display:flex;gap:10px}
.search-form label{flex:1}
.search-form .search-field,
input[type="text"],input[type="email"],input[type="url"],input[type="search"],
input[type="tel"],input[type="number"],textarea,select{
  width:100%;background:var(--nuit);border:1px solid var(--ligne);color:var(--os);
  font:inherit;font-size:16px;padding:12px 14px;border-radius:0;
}
textarea{min-height:130px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--laiton)}
input[type="submit"],button[type="submit"],.wp-block-search__button{
  padding:12px 22px;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  background:var(--laiton);color:#12180F;border:1px solid var(--laiton);cursor:pointer;
  transition:background .28s,border-color .28s;
}
input[type="submit"]:hover,button[type="submit"]:hover{background:var(--laiton-clair);border-color:var(--laiton-clair)}
::placeholder{color:var(--cendre);opacity:1}

.pages-liees{margin-top:30px;font-size:14px;color:var(--cendre);display:flex;gap:10px}
.pages-liees a{color:var(--laiton)}

/* ==========================================================================
   12 sexies. Blocs de l'éditeur, habillés aux couleurs du site
   ========================================================================== */
.corps .wp-block-columns{gap:1px;margin:28px 0 0;background:var(--ligne-fine)}
.corps .wp-block-columns.etapes{gap:1px}
.corps .wp-block-columns.etapes .wp-block-column{background:var(--voile);padding:26px 24px 28px}
.corps .etape .no{
  font-size:11px;letter-spacing:.2em;color:var(--laiton);font-weight:700;
  margin:0 0 14px;
}
.corps .etape h3{font-size:19px;margin:0}
.corps .etape p{margin:10px 0 0;font-size:15px;line-height:1.55}
.corps .etape .duree{
  margin-top:14px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cendre);font-weight:600;
}
.corps .wp-block-columns:not(.etapes){background:transparent;gap:52px;margin-top:40px}
.corps .wp-block-columns:not(.etapes) .wp-block-column{background:transparent;padding:0}
.corps p.intro{color:var(--os);font-size:19px;line-height:1.55}

.corps .wp-block-table.faits-table table{width:100%;border-collapse:collapse;border:1px solid var(--ligne-fine)}
.corps .wp-block-table.faits-table td{
  border:none;border-bottom:1px solid var(--ligne-fine);padding:14px 18px;
  background:var(--voile);vertical-align:baseline;
}
.corps .wp-block-table.faits-table tr td:first-child{
  width:34%;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cendre);font-weight:600;
}
.corps .wp-block-table.faits-table tr td:last-child{color:var(--os);font-size:16px}
.corps .wp-block-table.faits-table tr:last-child td{border-bottom:none}

.corps .wp-block-details{
  border-bottom:1px solid var(--ligne-fine);padding:0;margin:0;
}
.corps .wp-block-details summary{
  cursor:pointer;padding:20px 0;font-family:Eczar,Georgia,serif;font-size:19px;
  color:var(--os);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.corps .wp-block-details summary::-webkit-details-marker{display:none}
.corps .wp-block-details summary::after{
  content:"+";color:var(--laiton);font-family:Karla,sans-serif;font-size:20px;line-height:1;
}
.corps .wp-block-details[open] summary::after{content:"–"}
.corps .wp-block-details summary:hover{color:var(--laiton)}
.corps .wp-block-details p{margin:0 0 20px;max-width:62ch}

.corps .wp-block-button__link{
  background:var(--laiton);color:#12180F;border-radius:0;text-decoration:none;
  padding:12px 22px;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
}
.corps .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;color:var(--laiton);border:1px solid var(--ligne);
}

@media (max-width:940px){
  .corps .wp-block-columns{flex-wrap:wrap!important;gap:1px}
  .corps .wp-block-columns:not(.etapes){gap:32px}
}

/* ==========================================================================
   12 quinquies. Réservation d'un voyage individuel
   ========================================================================== */
.reserv{
  display:grid;grid-template-columns:1fr 380px;gap:2px;
  background:var(--ligne-fine);border:1px solid var(--ligne-fine);margin-top:28px;
}
.reserv > div{background:var(--voile);padding:28px}
.mois-tete{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.mois-tete h3{font-size:22px}
.mois-nav{display:flex;gap:6px}
.mois-nav button{
  width:34px;height:34px;border:1px solid var(--ligne);color:var(--sable);
  transition:border-color .25s,color .25s;
}
.mois-nav button:hover:not([disabled]){border-color:var(--recevoir);color:var(--recevoir)}

.grille-j{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.grille-j[aria-busy="true"]{opacity:.4}
.grille-j .nomj{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cendre);
  text-align:center;font-weight:600;padding-bottom:8px;
}
.jour{
  min-height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;border:1px solid transparent;font-size:15px;color:var(--cendre);
  font-variant-numeric:tabular-nums;transition:border-color .2s,color .2s,background .2s;
}
.jour .pt{width:4px;height:4px;border-radius:50%;background:transparent}
.jour.libre{color:var(--os);border-color:var(--ligne);cursor:pointer}
.jour.libre .pt{background:var(--recevoir)}
.jour.libre:hover{border-color:var(--recevoir)}
.jour.complet{color:var(--cendre)}
.jour.complet .pt{background:var(--ligne)}
.jour.actif{background:var(--recevoir);color:#101613;border-color:var(--recevoir);font-weight:700}
.jour.actif .pt{background:#101613}
.legende-j{display:flex;gap:20px;margin-top:20px;font-size:12px;color:var(--cendre);flex-wrap:wrap}
.legende-j i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;vertical-align:middle}

.creneaux h3{font-size:19px;margin-bottom:4px}
.creneaux .sousTitre{
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cendre);font-weight:600;margin-bottom:20px;
}
.creneaux .liste{display:grid;gap:8px}
.vide-texte{color:var(--cendre);font-size:15px;line-height:1.6;margin:0}
.creneau{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px;border:1px solid var(--ligne);text-align:left;width:100%;
  transition:border-color .22s,background .22s;
}
.creneau .h{font-size:16px;color:var(--os);font-variant-numeric:tabular-nums}
.creneau .e{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--recevoir)}
.creneau[disabled]{opacity:.4;cursor:not-allowed}
.creneau[disabled] .e{color:var(--cendre)}
.creneau:hover:not([disabled]){border-color:var(--recevoir)}
.creneau[aria-pressed="true"]{background:var(--recevoir);border-color:var(--recevoir)}
.creneau[aria-pressed="true"] .h,.creneau[aria-pressed="true"] .e{color:#101613}

.form-resa[hidden]{display:none}
.form-resa{display:grid;gap:14px;margin-top:22px;padding-top:20px;border-top:1px solid var(--ligne)}
.form-resa .champ{display:grid;gap:6px}
.form-resa label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cendre);font-weight:600}
.form-resa label span{text-transform:none;letter-spacing:0;opacity:.7;font-weight:400}
.form-resa .bouton{justify-self:start;border:1px solid var(--recevoir);background:var(--recevoir);color:#101613}
.form-resa .bouton:hover{background:#9BB795;border-color:#9BB795}
.form-resa .bouton[disabled]{opacity:.5}
.recap{font-size:15px;color:var(--sable);line-height:1.5}
.recap b{color:var(--os);font-weight:600}
.piege{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.reponse{margin:0;font-size:14.5px;line-height:1.55;padding-left:12px;border-left:2px solid var(--ligne)}
.reponse.succes{color:var(--recevoir);border-color:var(--recevoir)}
.reponse.erreur{color:var(--alerte);border-color:var(--alerte)}

@media (max-width:1000px){
  .reserv{grid-template-columns:1fr}
}

/* ==========================================================================
   12 quater. Boutique — WooCommerce
   ========================================================================== */
.boutique .woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,p.no-comments{
  background:var(--relief);border:1px solid var(--ligne);border-left:3px solid var(--laiton);
  padding:16px 20px;margin:26px 0;color:var(--sable);font-size:15px;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.woocommerce-error{border-left-color:var(--alerte)}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto}

/* Vitrine */
.woocommerce ul.products{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--ligne-fine);margin:28px 0 0;padding:0;list-style:none;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none}
li.capsule{
  background:var(--voile);padding:0 0 26px;display:flex;flex-direction:column;
  margin:0;width:auto;float:none;transition:background .35s;
}
li.capsule:hover{background:var(--relief)}
li.capsule .pochette{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  background:
    radial-gradient(100% 90% at 50% 20%, color-mix(in srgb, var(--ecouter) 22%, transparent) 0%, transparent 62%),
    linear-gradient(170deg,#18211D,#101614);
}
li.capsule .pochette img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
li.capsule:hover .pochette img{transform:scale(1.03)}
li.capsule .pochette::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.07;mix-blend-mode:overlay}
li.capsule .etiq{
  position:absolute;top:16px;left:16px;z-index:2;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;padding:5px 10px;color:var(--nuit);background:var(--ecouter);
}
li.capsule h3{margin:22px 24px 0;font-size:20px}
li.capsule h3 a:hover{color:var(--ecouter)}
li.capsule .duree{margin:9px 24px 0;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--cendre);font-weight:600}
li.capsule .resume{margin:12px 24px 0;color:var(--sable);font-size:15px;line-height:1.55}
li.capsule .resume p{margin:0}
li.capsule .bas{margin:auto 24px 0;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.prix,li.capsule .price{font-family:Eczar,Georgia,serif;font-size:24px;color:var(--os);font-variant-numeric:tabular-nums}
.prix del,.price del{color:var(--cendre);font-size:.68em;margin-right:8px;opacity:1}
.prix ins,.price ins{text-decoration:none;background:transparent;color:var(--os)}
.offert{color:var(--recevoir)}

/* Fiche d'une capsule */
.boutique div.product{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding-top:44px}
/* Tout ce que WooCommerce ou une extension ajoute occupe la largeur entière ;
   seuls la galerie et le résumé sont explicitement placés côte à côte. */
.boutique div.product > *{grid-column:1/-1;min-width:0}
.boutique div.product > .woocommerce-product-gallery{grid-column:1/2;grid-row:1}
.boutique div.product > .summary{grid-column:2/3;grid-row:1}
.boutique div.product .woocommerce-product-gallery{margin:0;position:relative}
.boutique div.product .woocommerce-product-gallery img{border:1px solid var(--ligne-fine)}
.boutique div.product .summary{margin:0}
.boutique div.product .product_title{font-family:Eczar,Georgia,serif;font-weight:500;font-size:clamp(28px,3.6vw,40px);line-height:1.1;margin:0 0 18px}
.boutique div.product .summary .price{display:block;font-size:30px;margin:0 0 22px}
.boutique div.product .woocommerce-product-details__short-description{color:var(--sable);font-size:16.5px;max-width:46ch}
.boutique div.product .woocommerce-product-details__short-description p{margin:0 0 14px}
.boutique form.cart{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 0 0}
.boutique form.cart .quantity input{width:76px;text-align:center;padding:12px 8px}
.boutique .product_meta{margin-top:28px;padding-top:18px;border-top:1px solid var(--ligne);font-size:13px;color:var(--cendre)}
.boutique .product_meta a{color:var(--sable)}

.extrait-audio{margin:26px 0 0;padding:20px 22px;background:var(--relief);border:1px solid var(--ligne)}
.extrait-audio .sur-titre{margin:0 0 12px}
.extrait-audio audio{width:100%;display:block}
.extrait-audio .note{margin:12px 0 0;font-size:13px;color:var(--cendre)}
.note-livraison{margin:18px 0 0;font-size:14px;color:var(--cendre);border-left:2px solid var(--ecouter);padding-left:12px;max-width:44ch}

/* Onglets et avis */
.woocommerce-tabs{grid-column:1/-1;margin-top:64px;border-top:1px solid var(--ligne);padding-top:32px}
.woocommerce-tabs ul.tabs{list-style:none;margin:0 0 28px;padding:0;display:flex;gap:26px;flex-wrap:wrap}
.woocommerce-tabs ul.tabs::before{content:none}
.woocommerce-tabs ul.tabs li{margin:0;padding:0;background:none;border:none}
.woocommerce-tabs ul.tabs li a{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--cendre);
  padding-bottom:6px;border-bottom:1px solid transparent;display:inline-block;
}
.woocommerce-tabs ul.tabs li.active a,.woocommerce-tabs ul.tabs li a:hover{color:var(--os);border-color:var(--laiton)}
.woocommerce-tabs .panel > h2{margin-bottom:18px}
.woocommerce-tabs .panel p,.woocommerce-tabs .panel li{color:var(--sable)}
.woocommerce-Reviews .comment_container{display:grid;grid-template-columns:auto 1fr;gap:18px;
  background:var(--voile);border:1px solid var(--ligne-fine);padding:20px 22px;margin-bottom:1px}
.woocommerce-Reviews .commentlist{list-style:none;margin:0;padding:0}
.woocommerce-Reviews .star-rating span{color:var(--laiton)}
.woocommerce .star-rating{color:var(--laiton)}

.related.products,.upsells.products{grid-column:1/-1;margin-top:64px}
.related.products > h2,.upsells.products > h2{
  font-family:Eczar,Georgia,serif;font-weight:500;font-size:clamp(24px,3vw,30px);
  padding-bottom:22px;border-bottom:1px solid var(--ligne);margin:0;
}

/* Panier et commande */
.woocommerce table.shop_table{
  border:1px solid var(--ligne-fine);border-collapse:collapse;width:100%;
  border-radius:0;margin-top:26px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  border:none;border-bottom:1px solid var(--ligne-fine);padding:16px 18px;color:var(--sable);
}
.woocommerce table.shop_table th{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cendre);
  font-weight:600;background:var(--relief);
}
.woocommerce table.shop_table td.product-name a{color:var(--os);font-weight:500}
.woocommerce table.shop_table .order-total .amount,
.woocommerce table.shop_table td .amount{color:var(--os);font-variant-numeric:tabular-nums}
.woocommerce .cart_totals h2,.woocommerce-checkout h3,.woocommerce-billing-fields h3{
  font-family:Eczar,Georgia,serif;font-weight:500;font-size:24px;margin:0 0 16px;
}
.woocommerce-checkout .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.woocommerce-checkout .col2-set .col-1,.woocommerce-checkout .col2-set .col-2{width:auto;float:none}
.woocommerce form .form-row{display:grid;gap:7px;margin:0 0 16px;padding:0}
.woocommerce form .form-row label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cendre);font-weight:600}
.woocommerce form .form-row .required{color:var(--alerte);text-decoration:none}
.woocommerce #payment{background:var(--relief);border:1px solid var(--ligne);padding:24px;border-radius:0;margin-top:24px}
.woocommerce #payment ul.payment_methods{list-style:none;margin:0 0 20px;padding:0;border:none}
.woocommerce #payment div.payment_box{background:var(--voile);border:1px solid var(--ligne-fine);color:var(--sable);font-size:14px}
.woocommerce #payment div.payment_box::before{display:none}
.woocommerce .cart_totals{background:var(--voile);border:1px solid var(--ligne-fine);padding:24px}

/* Tous les boutons WooCommerce prennent l'allure du site */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce #respond input#submit,.wc-block-components-button{
  background:var(--laiton);color:#12180F;border:1px solid var(--laiton);border-radius:0;
  padding:12px 22px;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  line-height:1.2;transition:background .28s,border-color .28s;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover{
  background:var(--laiton-clair);border-color:var(--laiton-clair);color:#12180F;
}
.woocommerce a.button.creux{background:transparent;color:var(--laiton);border-color:var(--ligne)}
.woocommerce a.button.creux:hover{background:transparent;color:var(--laiton-clair);border-color:var(--laiton)}
.woocommerce a.added_to_cart{display:none}
.woocommerce .quantity input.qty{background:var(--nuit);border:1px solid var(--ligne);color:var(--os)}

@media (max-width:1000px){
  .woocommerce ul.products{grid-template-columns:1fr 1fr}
  .boutique div.product{grid-template-columns:1fr;gap:32px}
  .woocommerce-checkout .col2-set{grid-template-columns:1fr;gap:32px}
}
@media (max-width:620px){
  .woocommerce ul.products{grid-template-columns:1fr}
}

/* ==========================================================================
   13. Pied de page
   ========================================================================== */
.pied-page{margin-top:88px;border-top:1px solid var(--ligne);padding:40px 0 64px}
.pied{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.pied h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cendre);font-weight:600;margin:0 0 14px;font-family:Karla,sans-serif}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px;color:var(--sable)}
.pied a:hover{color:var(--laiton)}
.pied .marque{font-size:23px;margin-bottom:12px;display:inline-block}
.pied .intro{color:var(--sable);font-size:15px;max-width:32ch;margin:0}
.fin{
  margin-top:44px;padding-top:20px;border-top:1px solid var(--ligne-fine);
  font-size:12.5px;color:var(--cendre);display:flex;gap:8px 24px;flex-wrap:wrap;
}

/* ==========================================================================
   14. Adaptations
   ========================================================================== */
@media (max-width:1000px){
  .capsules{grid-template-columns:1fr 1fr}
}
@media (max-width:940px){
  .portes{grid-template-columns:1fr}
  .porte .visuel{aspect-ratio:16/9}
  .date{grid-template-columns:76px 1fr;gap:20px}
  .vignette{display:none}
  .date .action{grid-column:2;justify-self:start}
  .evenement-tete{grid-template-columns:1fr;gap:32px}
  .pied{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .bascule-menu{display:block}
  .menu-principal{display:none;width:100%;gap:0}
  .menu-principal.ouvert{display:grid;margin-top:18px;border-top:1px solid var(--ligne)}
  .menu-principal.ouvert li{border-bottom:1px solid var(--ligne-fine)}
  .menu-principal.ouvert a{display:block;padding:14px 0;border:none;font-size:14px}
}
@media (max-width:620px){
  :root{--gouttiere:20px}
  .capsules{grid-template-columns:1fr}
  .pied{grid-template-columns:1fr}
  .fait{grid-template-columns:1fr;gap:4px}
  .fil{padding:26px 24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}