/* ============================================================================
   WEBENA V8 · DISCIPLINE DE MISE EN PAGE
   ----------------------------------------------------------------------------
   Règle unique, appliquée partout, prise sur Céline & Adrien :

       section complète → respiration → dégradé → nouvelle section complète

   Concrètement :
   · le dégradé est court et se termine franchement AVANT le contenu ;
   · entre la fin du dégradé et le premier élément, il reste un aplat de
     couleur pure (--section-clear) : aucun titre ne peut être à cheval ;
   · une section = une couleur, sans gros bloc gris posé par-dessus ;
   · un titre n'est jamais collé au bloc qui le suit ;
   · les grands titres ont le droit de passer à la ligne.

   Cette couche ne change aucune direction artistique. Elle corrige l'exécution.
   ============================================================================ */

/* ================================================== 1. ÉCHELLE DE RYTHME */
:root{
  /* Le pont de couleur : court, franc, terminé tôt. */
  --bridge:clamp(38px,4.2vw,66px);
  --v5-bridge:var(--bridge);
  --road-bridge:var(--bridge);

  /* L'aplat de couleur pure qui suit le dégradé, avant tout contenu. */
  --section-clear:clamp(30px,3.4vw,48px);

  /* Respiration d'une section, et amorce d'une section qui change de couleur. */
  --section-y:clamp(66px,7.2vw,112px);
  --section-lead:calc(var(--bridge) + var(--section-clear));
  --section-y-tight:clamp(46px,5vw,78px);

  --gutter:clamp(20px,4.4vw,56px);

  /* Écarts internes. */
  --gap-title:clamp(18px,2vw,28px);   /* titre → contenu */
  --gap-block:clamp(26px,3vw,42px);   /* bloc → bloc */
  --gap-group:clamp(40px,4.6vw,66px); /* groupe → groupe */
}
@media(max-width:720px){
  :root{ --section-y:66px; --section-y-tight:48px; --bridge:38px; --section-clear:30px; }
}

/* ================================== 3. DÉMOS · MÊME DISCIPLINE */
body.demo-v4 main>section,
body.demo-v4 main>article{
  min-height:0;
  padding-block:var(--section-y);
}
body.demo-v4 main>section+section,
body.demo-v4 main>article+article,
body.demo-v4 main>section+article,
body.demo-v4 main>article+section{
  padding-top:var(--section-lead);
}
body.demo-v4 main>footer,body.demo-v4 .foot{
  padding-block:var(--section-lead) calc(var(--section-y) + 46px);
}

/* Botanical : ses sections sont des plein-cadres, la respiration vit dans
   les colonnes de texte. Le dégradé y est traité de la même façon. */
body.demo-theme-botanical main>section,
body.demo-theme-botanical main>section+section,
body.demo-theme-botanical main>section:first-child{
  padding-top:0;padding-bottom:0;min-height:0;
}
body.demo-theme-botanical .bot-copy,
body.demo-theme-botanical .bot-intro,
body.demo-theme-botanical .bot-rsvp-copy,
body.demo-theme-botanical .bot-rsvp-form{padding-block:var(--section-lead) var(--section-y)}
body.demo-theme-botanical .bot-hero .bot-intro{padding-block:var(--section-y)}
body.demo-theme-botanical .bot-faq{
  display:block;padding:var(--section-lead) var(--gutter) var(--section-y);
}
body.demo-theme-botanical .bot-gallery{padding-block:var(--section-lead) var(--gap-block)}

/* ========================= 4. AUCUN GROS APLAT PAR-DESSUS LA SECTION */
/* Plannings, adresses, encarts RSVP et cases à cocher se fondent dans la
   couleur de leur section. La hiérarchie passe par des traits, pas par des
   blocs gris. Road Too Asiamah 26 est exclu : sa DA reste intacte. */
body.demo-v4 .t-prog,
body.demo-v4 .t-place,
body.demo-v4 .t-item,
body.demo-v4 .blk,
body.demo-v4 .rsvpbox,
body.demo-v4 .t-check,
body.demo-v4 .palbtn,
body.demo-v4 .music-card{
  background:transparent;
  border-radius:0;
  box-shadow:none;
}
body.demo-v4 .t-prog{
  border-top:1px solid var(--sec-line,var(--t-line));
  border-bottom:1px solid var(--sec-line,var(--t-line));
  padding:var(--gap-title) 0;
}
body.demo-v4 .t-prog>*+*{border-top:1px solid var(--sec-line-soft,var(--t-line))}
body.demo-v4 .t-place{
  border:0;border-top:1px solid var(--sec-line,var(--t-line));
  padding:var(--gap-title) 0 var(--gap-block);
}
body.demo-v4 .t-item{
  border:0;border-bottom:1px solid var(--sec-line-soft,var(--t-line));
  padding:14px 0;
}
body.demo-v4 .rsvpbox{
  border:0;border-top:1px solid var(--sec-line,var(--t-line));
  padding:var(--gap-block) 0 0;
}
body.demo-v4 .t-check{
  border:0;border-bottom:1px solid var(--sec-line-soft,var(--t-line));
  padding:14px 0;
}
body.demo-v4 .palbtn{border:1px solid var(--sec-line,var(--t-line))}

/* Les champs de saisie : un trait, pas une boîte posée sur la couleur. */
body.demo-v4 .t-input,
body.demo-v4 .t-select,
body.demo-v4 .t-textarea{
  background:transparent;
  border:0;border-bottom:1px solid var(--sec-line,var(--t-line));
  border-radius:0;padding-inline:0;
}
body.demo-v4 .t-input:focus,
body.demo-v4 .t-select:focus,
body.demo-v4 .t-textarea:focus{
  border-bottom-color:var(--sec-accent,var(--t-accent));
  outline:none;box-shadow:0 1px 0 0 var(--sec-accent,var(--t-accent));
}
body.demo-v4 .t-select{background-image:none}

/* ================================ 5. RESPIRATION DES TEXTES */
/* Un titre n'est jamais collé au bloc qui le suit.
   Ces règles vivaient dans le même bloc que d'anciens sélecteurs de scènes ;
   elles sont réécrites ici sans aucune dépendance au framework supprimé. */
body.demo-v4 h1 + p,body.demo-v4 h2 + p,body.demo-v4 h3 + p,
body.demo-v4 .st + p,body.demo-v4 .st + div,body.demo-v4 .st + ul,
body.demo-v4 .st + form,body.demo-v4 .st + table,
body.demo-v4 h2 + div,body.demo-v4 h2 + ul,body.demo-v4 h2 + form,
body.demo-v4 h2 + .cols,body.demo-v4 h2 + .pull,
body.demo-v4 h3 + div,body.demo-v4 h3 + ul,
body.wb-page .page-title + p,
body.wb-page h1 + p,body.wb-page h2 + p,
body.wb-page h3 + p,body.wb-page h4 + p,
body.w-body .w-h3 + .w-p,body.w-body h1 + p,
.v3-features .feature-family-header h2 + p{
  margin-top:var(--gap-title);
}
body.demo-v4 .body p + p,
body.wb-page .page-copy + .page-copy{margin-top:var(--gap-title)}

/* Les grands titres ont le droit de passer à la ligne : mieux vaut deux
   lignes bien composées qu'un titre tassé. */
h1,h2,h3,.page-title,.st,.hero__n,.cover__n,.head__n,.edit-name,
.bot-copy h2,.bot-intro h1,.hero-names,.foot h3{
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  max-width:100%;
}
h1,h2,.page-title,.st,.hero__n,.cover__n,.head__n{line-height:1.06}
h3,h4{line-height:1.2}
.page-copy,.body p,.t-p{max-width:64ch}

/* ==================================== 6. CORRECTIONS CIBLÉES */

/* Céline & Adrien : le compte à rebours débordait de l'accroche en mobile. */
@media(max-width:560px){
  body.demo-theme-minimal .hero .t-cd{flex-wrap:wrap;row-gap:14px;justify-content:flex-start}
  body.demo-theme-minimal .hero{padding-bottom:var(--section-y-tight)}
  body.demo-theme-minimal .hero .t-cd__l{white-space:nowrap}
}

/* Botanical : la barre de navigation ne tient pas sur trois colonnes en
   petit écran, ses onglets sortaient de l'en-tête. */
@media(max-width:880px){
  .bot-head{
    height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand lang" "nav nav";
    gap:6px 14px;padding-block:12px;align-items:center;
  }
  .bot-brand{grid-area:brand}
  .bot-lang{grid-area:lang;justify-self:end}
  /* La barre d'onglets était posée en absolu sous l'en-tête : elle masquait
     le début de la première section. Elle reprend sa place dans le flux. */
  .bot-nav{
    grid-area:nav;position:static;top:auto;left:auto;right:auto;
    justify-content:flex-start;gap:22px;padding:0;
    background:none;border-bottom:0;
    overflow-x:auto;scrollbar-width:none;
  }
  .bot-nav::-webkit-scrollbar{display:none}
  .bot-nav button{flex:0 0 auto;white-space:nowrap}
}

/* Céline & Adrien : sous 700 px, le compte à rebours redevient un bloc à
   l'intérieur du cadre photo, qui a une hauteur fixe et rogne le contenu.
   Le cadre reprend une hauteur libre, la photo garde la sienne. */
@media(max-width:700px){
  body.demo-theme-minimal .hero__img{height:auto;overflow:visible}
  body.demo-theme-minimal .hero__img img{
    display:block;width:100%;height:min(52svh,440px);object-fit:cover;
  }
  body.demo-theme-minimal .hero__cd{
    position:static;background:none;padding:var(--gap-title) 0 0;
  }
  body.demo-theme-minimal .hero{overflow:visible}
}

/* Fara & Élie : le niveau 799 € ne tolère ni titre tassé ni texte collé. */
body.demo-theme-afro .hero__n,
body.demo-theme-afro .sec h2{line-height:1.04;letter-spacing:-.01em}
body.demo-theme-afro .sec__in{gap:var(--gap-group) clamp(28px,4vw,58px)}
body.demo-theme-afro .sec h2 + *{margin-top:var(--gap-title)}

/* Back-offices : en-tête et panneaux qui respirent. */
body.w-body header.bo{padding-block:var(--gap-block)}
body.w-body .pane{padding-block:var(--gap-block) var(--gap-group)}
body.w-body .w-h3{margin-bottom:var(--gap-title)}
body.w-body .bo h1 + p{margin-top:var(--gap-title)}

/* Fonctionnalités : le prix reste sur la même ligne que le titre, mais le
   texte de l'option respire, et l'en-tête de famille aussi. */
.v3-features .opt__h{align-items:baseline;gap:6px var(--gap-title)}
.v3-features .opt>p{margin-top:var(--gap-title)}
.v3-features .feature-family-header{padding-bottom:var(--gap-title)}

/* Événements courts : Events, Business, Care, Contact. */
.pending-page,.care-page{padding-block:var(--section-y);min-height:0;align-content:start}
.care-intro{min-height:0;align-items:start}

/* Photographies de mise en page : elles remplissent leur cadre, elles ne
   le débordent pas de 600 px en attendant d'être rognées. */
.home-hero-visual,.home-creation-photo,.page-photo,.wed-work-main,.case-photo{
  overflow:hidden;position:relative;
}
.home-hero-visual img,.home-creation-photo img,.page-photo img,
.wed-work-main img,.case-photo img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;
}
.home-hero-visual,.home-creation-photo,.page-photo{aspect-ratio:4/3}
@media(min-width:981px){
  .home-hero-visual{aspect-ratio:4/5}
  .home-creation-photo,.page-photo{aspect-ratio:3/4}
}

/* Pages en préparation : les deux colonnes démarrent en haut. */
.pending-grid{align-items:start}
.pending-grid h1{margin-top:0}
.pending-status{margin-top:0}

/* ============= 6bis. EMPLACEMENTS PHOTO ET COLONNES DÉSÉQUILIBRÉES */
/* Le portrait manquant occupait 540 px d'aplat beige : il devient un
   emplacement franchement identifié, à l'échelle de sa colonne. */
.founder-photo{
  aspect-ratio:16/11;height:auto;max-height:min(440px,46svh);
  background:transparent;
  border:1px dashed var(--wb-gold);
  display:grid;place-items:center;text-align:center;
}
.founder-photo span{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#6B6259;padding:var(--gap-title);max-width:22ch;line-height:1.7;
}
@media(max-width:980px){ .founder-photo{aspect-ratio:16/10;max-height:300px} }

/* Care : la liste ne démarre plus 90 px sous une colonne déjà terminée. */
.care-list{margin-top:var(--gap-group)}
.care-intro>*{align-self:start}

/* Botanical : les deux colonnes du RSVP démarrent en haut, pas au centre. */
/* Colonnes en flex vertical : le contenu démarre en haut, il ne flotte pas
   au milieu d'une colonne dimensionnée par sa voisine. */
body.demo-theme-botanical .bot-rsvp-copy,
body.demo-theme-botanical .bot-rsvp-form,
body.demo-theme-botanical .bot-copy{
  align-content:start;justify-content:flex-start;
}

/* Contact : chaque étape sépare franchement sa question de ses champs. */
.project-step h2 + .form-grid,
.project-step h2 + .choice-grid,
.project-step h2 + p,
.project-step p + .form-grid,
.project-step p + .choice-grid{margin-top:var(--gap-title)}

/* ================== 6ter. CONFIRMATION RSVP · FORMAT UNIQUE */
/* Même structure et même parcours que Road Too Asiamah 26 sur toutes les
   démos. Aucune couleur en dur : la carte emprunte les variables du site
   hôte, donc elle reste dans la direction artistique de chaque univers. */
.t-conf{
  max-width:760px;margin-inline:auto;
  color:var(--sec-ink,var(--t-ink));
}
.t-conf__head{
  text-align:center;
  padding-bottom:var(--gap-block);
  border-bottom:1px solid var(--sec-line,var(--t-line));
}
.t-conf__couple{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sec-accent-text,var(--sec-accent,var(--t-accent)));
  margin-top:var(--gap-title);
}
.t-conf__name{
  font-family:var(--t-serif,var(--wb-serif));font-weight:400;
  font-size:clamp(28px,3.4vw,44px);line-height:1.1;margin:10px 0 0;
}
.t-conf__meta{
  font-size:12px;margin-top:10px;
  color:var(--sec-soft,var(--t-ink-soft));
}
.t-conf__sec{
  padding-block:var(--gap-block);
  border-bottom:1px solid var(--sec-line-soft,var(--t-line));
}
.t-conf__sec:last-of-type{border-bottom:0}
.t-conf__lab{
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--sec-accent-text,var(--sec-accent,var(--t-accent)));
  margin-bottom:var(--gap-title);
}
.t-conf__lab--sub{margin-top:var(--gap-title)}
.t-conf__badges{display:flex;flex-wrap:wrap;gap:8px}
.t-conf__badge{
  display:inline-flex;align-items:center;min-height:32px;padding:0 14px;
  border:1px solid var(--sec-accent,var(--t-accent));
  color:var(--sec-ink,var(--t-ink));
  font-size:12px;line-height:1.3;
}
.t-conf__badge.is-off{
  border-color:var(--sec-line,var(--t-line));
  color:var(--sec-soft,var(--t-ink-soft));
}
.t-conf__absent{font-size:14.5px;line-height:1.75}
.t-conf__quote{
  font-size:14.5px;line-height:1.75;padding-left:var(--gap-title);
  border-left:1px solid var(--sec-accent,var(--t-accent));
  color:var(--sec-soft,var(--t-ink-soft));
}
.t-conf__comp + .t-conf__comp{margin-top:var(--gap-title)}
.t-conf__comp-name{font-size:14.5px;margin-bottom:10px}
.t-conf__event{
  padding-top:var(--gap-title);margin-top:var(--gap-title);
  border-top:1px solid var(--sec-line-soft,var(--t-line));
}
.t-conf__event:first-of-type{border-top:0;margin-top:0;padding-top:0}
.t-conf__ev-title{
  font-family:var(--t-serif,var(--wb-serif));font-weight:400;
  font-size:clamp(19px,2.2vw,25px);margin:0;
}
.t-conf__ev-line{font-size:13px;line-height:1.7;margin-top:6px;color:var(--sec-soft,var(--t-ink-soft))}
.t-conf__ev-who{font-size:13.5px;line-height:1.7;margin-top:10px}
.t-conf__ev-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:var(--gap-title);
}
.t-conf__mini{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sec-soft,var(--t-ink-soft));width:100%;
}
.t-conf__btn{
  display:inline-flex;align-items:center;min-height:38px;padding:0 15px;
  border:1px solid var(--sec-line,var(--t-line));
  color:var(--sec-ink,var(--t-ink));
  background:transparent;font-size:11.5px;letter-spacing:.05em;cursor:pointer;
}
.t-conf__btn:hover,.t-conf__btn:focus-visible{
  border-color:var(--sec-accent,var(--t-accent));
}
.t-conf__link{
  border-top:1px solid var(--sec-line,var(--t-line));
  border-bottom:1px solid var(--sec-line,var(--t-line));
  padding:14px 0;font-size:12.5px;word-break:break-all;
  color:var(--sec-soft,var(--t-ink-soft));
}
.t-conf__hint{font-size:12.5px;line-height:1.7;margin-top:10px;color:var(--sec-soft,var(--t-ink-soft))}
.t-conf__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--gap-block)}
@media(max-width:560px){
  .t-conf__actions .t-btn{width:100%;justify-content:center}
}
@media print{
  .t-conf__actions,.t-conf__ev-actions,.wb-demobar,.t-nav,.nav2,.mast{display:none!important}
}

/* L'onglet actif de la navigation collante est du micro-texte : il utilise
   l'accent renforcé, pas l'accent décoratif. */
body.demo-theme-minimal .t-nav__links a.is-v4-active,
body.demo-theme-minimal .t-nav__links a:hover{
  color:var(--t-accent-text-bg,var(--t-accent-bg));
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}