/* LES PAGES D'OCCASION (eventPage dans scripts/pages.mjs) : Mariages, Fiançailles, Naissance, Anniversaires et
   Réceptions. Le héros et le gâteau signature en trois photos, le sommaire du groupe, une section par occasion,
   notre façon de faire, la demande, d'autres créations. Les trios, la signature et les repères sont dans
   complements.css (l'accueil s'en sert aussi). LES PAGES DE GÂTEAU (/creations/<id>.html) reprennent le héros et
   d'autres créations ; leurs propres règles sont à la fin. */

/* LE HÉROS : le texte à gauche, le gâteau signature à droite ; à la tablette, l'un sous l'autre ; au téléphone, le
   gâteau d'abord et les deux boutons empilés. */
.event-hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
  padding-top: 56px;
  padding-bottom: 64px;
}

.event-hero-copy h1 {
  margin: 18px 0 23px;
}

.event-hero-copy > p:not(.eyebrow) {
  max-width: 530px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.78;
}

.event-hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 500px;
  margin-top: 29px;
}

.event-hero-actions .button {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding-inline: 12px;
  font-size: .875rem;
  line-height: 1.3;
}

/* Le gâteau signature : ses trois photos, puis « Un gâteau signé Créations Adélice ». */
.event-hero-photo {
  width: 100%;
  max-width: 560px;
  margin: 0 0 0 auto;
}

.event-hero-photo figcaption.signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 14px;
  text-align: center;
}

@media (max-width: 1099.98px) {
  .event-hero {
    grid-template-columns: 1fr;
    max-width: 760px;
    gap: 40px;
  }

  .event-hero-photo {
    max-width: 560px;
    margin-inline: auto;
  }
}

@media (max-width: 759.98px) {
  .event-hero {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .event-hero-photo {
    order: -1;
  }

  .event-hero-photo figcaption.signature {
    padding-top: 10px;
  }

  .event-hero-copy h1 {
    margin-top: 14px;
  }

  .event-hero-copy > p:not(.eyebrow) {
    font-size: .96rem;
    line-height: 1.68;
  }

  .event-hero-actions {
    grid-template-columns: 1fr;
    max-width: none;
    gap: 10px;
    margin-top: 24px;
  }

  .event-hero-actions .button {
    font-size: .9375rem;
  }
}

/* LA BARRE DES OCCASIONS DU GROUPE (demande d'Hakim) : juste sous le menu, avant le héros ; les occasions en liens
   centrés, celle de la page soulignée. Au téléphone, elles passent sur deux lignes au besoin. À partir de la
   tablette, elle reste collée sous l'en-tête (72 px à la tablette, l'en-tête compact de 64 px à l'ordinateur). Le
   sommaire des créations d'Anniversaires garde ses pastilles (plus bas). */
.sous-occasions {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.sous-occasions ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 0;
  padding: 12px 0;
  list-style: none;
}

.sous-occasions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  color: #000;
  font-size: .875rem;
  line-height: 1.3;
  transition: border-color .15s ease;
}

.sous-occasions a:hover,
.sous-occasions a:focus-visible {
  border-color: #000;
}

.sous-occasions a[aria-current] {
  background: #000;
  border-color: #000;
  color: #fff;
}

.sous-occasions:not(.sommaire-creations) {
  border-top: 0;
}

.sous-occasions:not(.sommaire-creations) ul {
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
  overflow-x: auto;
  padding: 0;
  scrollbar-width: none;
}

.sous-occasions:not(.sommaire-creations) a {
  position: relative;
  min-height: 48px;
  padding: 0;
  border: 0;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* La page en cours : un léger fond ivoire derrière le lien, comme dans le menu ; les autres liens en gris, en noir au
   survol. */
.sous-occasions:not(.sommaire-creations) a {
  color: var(--muted);
  transition: color .15s ease;
}

.sous-occasions:not(.sommaire-creations) a:hover,
.sous-occasions:not(.sommaire-creations) a:focus-visible {
  color: #000;
}

.sous-occasions:not(.sommaire-creations) a {
  isolation: isolate;
}

.sous-occasions:not(.sommaire-creations) a::after {
  content: "";
  position: absolute;
  inset: 8px -14px;
  z-index: -1;
  background: var(--ivory);
  opacity: 0;
  transition: opacity .2s ease;
}

.sous-occasions:not(.sommaire-creations) a[aria-current]::after {
  opacity: 1;
}

.sous-occasions:not(.sommaire-creations) a[aria-current] {
  background: none;
  color: #000;
}

@media (max-width: 759.98px) {
  .sous-occasions:not(.sommaire-creations) ul {
    flex-wrap: wrap;
    gap: 0 22px;
    overflow: visible;
    padding-block: 4px;
  }

  .sous-occasions:not(.sommaire-creations) a {
    min-height: 44px;
    font-size: .75rem;
  }
}

@media (min-width: 760px) {
  .sous-occasions:not(.sommaire-creations) {
    position: sticky;
    top: 72px;
    z-index: 10;
  }
}

/* À partir de 1280 px, l'en-tête de l'ordinateur, compact en descendant (entete.css). */
@media (min-width: 1280px) {
  .sous-occasions:not(.sommaire-creations) {
    top: var(--entete-compacte);
  }
}

/* Le sommaire des créations (Anniversaires) : dans sa section, sans bande, et il ne colle pas. */
.sous-occasions.sommaire-creations {
  margin: 18px 0 0;
  background: none;
  border: 0;
}

.sommaire-creations ul {
  padding: 0;
}

@media (max-width: 759.98px) {
  .sommaire-creations ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .sommaire-creations a {
    width: 100%;
    min-height: 44px;
    padding: 6px 10px;
    font-size: .875rem;
  }
}

/* LES SECTIONS : une par occasion, à son ancre. Le sommaire collant et l'en-tête ne les cachent pas : la marge
   s'ajoute au scroll-padding-top de la page (entete.css). */
.event-hero,
.trio,
.occasion-texte {
  scroll-margin-top: 24px;
}

.event-hero + .trio,
.event-hero + .occasion-texte {
  padding-top: 56px;
}

.event-hero + .event-features {
  border-top: 0;
}

/* Une occasion sans gâteau à montrer : son titre, sa phrase, son bouton. Le lien du menu qui y mène souligne son
   titre, sans rien décaler. À partir de 1000 px, le titre à gauche, la phrase et le bouton à droite : la largeur de
   la page n'est pas laissée vide. */
section.occasion-texte {
  padding-bottom: 90px;
}

.occasion-texte h2 {
  margin-bottom: 14px;
}

.occasion-texte p {
  max-width: 620px;
  margin-bottom: 18px;
  color: var(--muted);
  line-height: 1.75;
}

.occasion-texte:target :is(h2, h3) {
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 1px;
}

@media (min-width: 1000px) {
  section.occasion-texte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: start;
    padding-bottom: 56px;
  }

  section.occasion-texte > h2 {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  section.occasion-texte > p,
  section.occasion-texte > .button {
    grid-column: 2;
  }

  section.occasion-texte > .button {
    justify-self: start;
  }
}

/* Des occasions côte à côte sous un même titre (Mariages : avant le grand jour). */
.occasions-groupe {
  padding: 20px 0 80px;
}

.occasions-groupe > h2 {
  margin-bottom: 28px;
}

.occasions-groupe > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  border-top: 1px solid var(--line);
}

.occasions-groupe article {
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--line);
}

.occasions-groupe h3 {
  margin-bottom: 10px;
}

.occasions-groupe p {
  font-size: .95rem;
  line-height: 1.7;
  margin-bottom: 16px;
}

.occasions-groupe .button {
  margin-top: 4px;
}

@media (max-width: 759.98px) {
  .occasions-groupe > div {
    grid-template-columns: 1fr;
  }

  /* Au téléphone, le filet du bas de la dernière occasion suffit : pas de second filet juste dessous. */
  .occasions-groupe + .event-features {
    border-top: 0;
  }
}

/* Des gâteaux sous un même titre (Mariages, Anniversaires). */
.trios-groupe {
  padding-top: 64px;
}

.event-hero + .trios-groupe {
  padding-top: 56px;
}

/* Les gâteaux d'un groupe en carrousel (Mariages) : le titre, puis les cartes. */
.cartes-groupe > h2 {
  margin: 0 0 28px;
}

/* Anniversaires : chaque gâteau, ses trois photos puis son titre ; deux par rangée à partir de la tablette. */
.trios-compacts {
  display: grid;
  gap: 32px;
  padding: 28px 0 72px;
}

@media (min-width: 760px) {
  .trios-compacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px 48px;
  }
}

/* LES RANGÉES ALIGNÉES (Anniversaires à partir de 760 px, D'autres créations dès le téléphone) : chaque gâteau occupe
   deux rangées de la grille, ses photos puis son texte, qu'il partage avec ses voisins (subgrid). Dans une rangée, les
   photos — chacune dans sa forme, jamais rognée — se posent sur une même ligne, les titres partent de la même hauteur
   et les petits boutons noirs s'alignent en bas. Entre les photos et leur texte, aucun écart : celui de la grille ne
   sépare que les rangées. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 760px) {
    .trios-compacts > .trio {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-row: span 2;
      grid-template-rows: subgrid;
      gap: 0;
    }

    .trios-compacts .trio-photos {
      align-self: end;
    }

    .trios-compacts .trio-texte {
      display: flex;
      flex-direction: column;
      align-self: stretch;
    }

    .trios-compacts .trio-texte .button-petit {
      margin-top: auto;
      align-self: flex-start;
    }
  }
}

/* NOTRE FAÇON DE FAIRE : trois blocs, numérotés pour l'œil seulement. */
.event-features {
  padding: 0 0 72px;
  border-top: 1px solid var(--line);
}

.event-features > h2:not(.sr-only) {
  padding-top: 56px;
}

.event-features-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.event-features article {
  padding: 28px 28px 0 0;
}

.event-features article + article {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.event-features span {
  color: var(--muted);
  font: italic 1.25rem var(--serif);
}

.event-features h3 {
  margin: 13px 0 10px;
  font-size: clamp(1.6rem, 1vw + 1.15rem, 2.1rem);
  line-height: 1.1;
}

.event-features p {
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.68;
}

/* Au téléphone, le numéro passe devant le titre. */
@media (max-width: 759.98px) {
  .event-features {
    padding-bottom: 28px;
  }

  .event-features > h2:not(.sr-only) {
    padding-top: 44px;
  }

  .event-features-liste {
    display: block;
  }

  .event-features article,
  .event-features article + article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    align-items: baseline;
    padding: 18px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .event-features article:last-child {
    border-bottom: 0;
  }

  .event-features h3 {
    margin: 0 0 6px;
  }

  .event-features p {
    grid-column: 1 / -1;
  }
}

/* PRÉPARER VOTRE DEMANDE : l'invitation à gauche, la liste à droite, à la largeur des sections voisines (son filet
   aussi). */
.event-details {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(48px, 8vw, 112px);
  align-items: start;
  padding: 68px 0 76px;
  border-top: 1px solid var(--line);
}

.event-details h2 {
  margin: 16px 0 20px;
}

.event-details > div > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.75;
}

.event-details ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.event-details li {
  position: relative;
  padding: 17px 8px 17px 33px;
  border-bottom: 1px solid var(--line);
  font-size: .94rem;
}

.event-details li::before {
  position: absolute;
  top: 18px;
  left: 3px;
  content: '✓';
  color: var(--muted);
  font-size: .8rem;
}

@media (max-width: 1099.98px) {
  .event-details {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 759.98px) {
  .event-details {
    gap: 24px;
    padding: 44px 0 48px;
  }

  .event-details li {
    padding-block: 11px;
  }

  .event-details li::before {
    top: 12px;
  }
}

/* D'AUTRES CRÉATIONS : le titre et « Découvrir nos créations », puis le carrousel de cartes (complements.css). */
.autres-creations {
  padding: 64px 0 90px;
  border-top: 1px solid var(--line);
}

.autres-creations-tete {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

@media (max-width: 759.98px) {
  .autres-creations {
    padding: 44px 0 56px;
  }

  .autres-creations-tete {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
  }
}

/* LA PAGE D'UN GÂTEAU (pageGateau dans scripts/pages.mjs) : le retour vers la page du groupe, puis le héros des pages
   d'occasion — le texte du gâteau, ses deux boutons et ses trois photos entières, signées —, comment se passe une
   commande en bref et d'autres créations. */
.creation-retour {
  padding-top: 20px;
}

.creation-retour a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #000;
  font-size: .875rem;
  letter-spacing: .04em;
}

.creation-retour a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.creation-heros {
  padding-top: 12px;
}

/* Avant 1100 px, le héros tient en une colonne de 760 px au plus, centrée : le retour s'aligne sur elle. */
@media (max-width: 1099.98px) {
  .creation-retour {
    max-width: 760px;
  }
}

/* Comment se passe une commande, en bref (les titres des cinq temps) : le titre et sa phrase, puis la liste ; côte à
   côte à partir de 1000 px. */
.creation-commande {
  display: grid;
  gap: 28px;
  padding: 60px 0 68px;
  border-top: 1px solid var(--line);
}

.creation-commande h2 {
  margin: 16px 0 18px;
}

.creation-commande > div > p:not(.eyebrow) {
  max-width: 460px;
  color: var(--muted);
  line-height: 1.75;
}

@media (min-width: 1000px) {
  .creation-commande {
    grid-template-columns: .95fr 1.05fr;
    gap: clamp(48px, 8vw, 112px);
    align-items: center;
  }
}

@media (max-width: 759.98px) {
  .creation-retour {
    padding-top: 8px;
  }

  .creation-heros {
    padding-top: 4px;
  }

  .creation-commande {
    gap: 20px;
    padding: 44px 0 48px;
  }
}

/* L'INVITATION FINALE : son titre reste sous le h1 de la page. */
.event-closing h2 {
  font-size: clamp(1.9rem, 2.4vw + .9rem, 3rem);
}

.event-closing > p:not(.eyebrow) {
  max-width: 650px;
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .sous-occasions a,
  .sous-occasions a::after {
    transition: none;
  }
}

/* LES PAGES D'OCCASION ET DE THÈME, À LA MANIÈRE DE L'ACCUEIL (demandes d'Hakim, 10 et 11 oct.) : les six
   occasions et les neuf thèmes. Pas de filet sous le menu et le héros collé à l'en-tête ; le grand titre à la taille
   de celui de l'accueil ; le petit gâteau entre chaque section, 24 px de part et d'autre (identite.css), les sections
   n'ajoutant pas leur propre espace ; le titre du carrousel centré ; pas d'invitation finale : Mariages se termine sur
   la feuille « Préparer votre demande », 48 px sous le carrousel (sans séparateur, le petit gâteau est dans la feuille)
   et 36 px avant le bandeau des secteurs ; les autres, sur « Demander une soumission » sous le carrousel. */
body:is([data-page=mariage],[data-page=babyshower],[data-page=anniversaire],[data-page=evenements],[data-page=corporatif],[data-page=fetes],[data-page^=theme-]) .entete:not(.entete--compacte){border-bottom-color:transparent}
body:is([data-page=mariage],[data-page=babyshower],[data-page=anniversaire],[data-page=evenements],[data-page=corporatif],[data-page=fetes],[data-page^=theme-]) .event-hero{padding-top:0;padding-bottom:0}
body:is([data-page=mariage],[data-page=babyshower],[data-page=anniversaire],[data-page=evenements],[data-page=corporatif],[data-page=fetes],[data-page^=theme-]) .event-hero h1{font-size:clamp(2.6rem,3.4vw + 1rem,4.6rem);line-height:1.04}
body:is([data-page=mariage],[data-page=babyshower],[data-page=anniversaire],[data-page=evenements],[data-page=corporatif],[data-page=fetes],[data-page^=theme-]) .trios-groupe{padding-top:0;padding-bottom:0}
body:is([data-page=mariage],[data-page=babyshower],[data-page=anniversaire],[data-page=evenements],[data-page=corporatif],[data-page=fetes],[data-page^=theme-]) .cartes-groupe>h2{text-align:center}
body:is([data-page=mariage],[data-page=babyshower],[data-page=anniversaire],[data-page=evenements],[data-page=corporatif],[data-page=fetes],[data-page^=theme-]) .feuille-demande{padding-top:48px;padding-bottom:36px}
/* Une catégorie sans gâteau encore (Événements corporatifs, Voyages et véhicules) : le héros n'a
   que son texte et ses deux boutons, sur une colonne, un peu d'air sous le menu ; plus bas, un mot centré dit que les
   créations arrivent. */
body .event-hero.event-hero--texte{grid-template-columns:minmax(0,760px);padding-top:32px}
.creations-bientot{text-align:center}
.creations-bientot>p{max-width:560px;margin:14px auto 0;color:var(--muted);line-height:1.75}
@media(max-width:759.98px){body .event-hero.event-hero--texte{padding-top:24px}}
/* « Découvrir nos créations » descend vers le carrousel de la page (#creations, demande d'Hakim, 11 oct.), en douceur,
   sans le cacher sous l'en-tête collant. */
#creations{scroll-margin-top:88px}
@media(prefers-reduced-motion:no-preference){html:has(#creations){scroll-behavior:smooth}}
/* SOUS LE CARROUSEL, seulement « Demander une soumission » (toutes ces pages sauf Mariages et fiançailles), centré,
   32 px sous les cartes et 36 px avant le bandeau des secteurs (demandes d'Hakim, 10 et 11 oct.). */
.carrousel-demande{display:flex;justify-content:center;padding:32px 0 36px}
.carrousel-demande .button{min-width:min(100%,300px)}
@media(max-width:759.98px){.carrousel-demande .button{width:100%}}
/* AVANT LE GRAND JOUR, PRÉPARER VOTRE DEMANDE (Mariages, demandes d'Hakim, 10 oct.) : une feuille posée sur la page, en
   une seule colonne, comme une liste à cocher — le petit gâteau, le titre et l'invitation au centre ; les cinq
   renseignements sans filets entre eux, chacun avec sa coche blanche dans un rond noir, la liste centrée dans la
   feuille ; « (voir nos saveurs) » en gris, sans soulignement, un fond ivoire au survol ; puis les deux phrases (leur
   début en noir) et « Demander une soumission » au centre. */
.feuille{max-width:720px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(20px,5vw,64px);background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.06)}
.feuille-tete{text-align:center}
.feuille-gateau{display:block;width:30px;height:30px;margin:0 auto 14px}
.feuille-tete h2{margin:14px 0 16px}
.feuille-tete>p:not(.eyebrow){max-width:540px;margin:0 auto;color:var(--muted);line-height:1.75}
.feuille-liste{display:grid;gap:16px;width:fit-content;max-width:100%;margin:28px auto 0;padding:0;list-style:none}
.feuille-liste li{display:flex;align-items:flex-start;gap:14px;color:#000;font-size:1.0625rem;line-height:1.6}
.feuille-renvoi{color:var(--muted)}
.feuille-renvoi a{margin:0 -3px;padding:1px 3px;color:inherit;text-decoration:none;transition:background-color .2s,color .2s}
.feuille-renvoi a:hover,.feuille-renvoi a:focus-visible{background:var(--ivory);color:#000}
.feuille-coche{display:grid;place-items:center;flex:none;width:27px;height:27px;border-radius:50%;background:#000;color:#fff}
.feuille-pied{margin-top:32px;text-align:center}
.feuille-pied p{margin:0;color:var(--muted);line-height:1.7}
.feuille-pied p+p{margin-top:10px}
.feuille-pied strong{color:#000;font-weight:500}
.feuille-bouton{min-width:min(100%,300px);margin-top:28px}
@media(max-width:759.98px){
 .feuille-liste{gap:14px}
 .feuille-liste li{font-size:1rem}
 .feuille-coche{width:26px;height:26px}
 .feuille-bouton{width:100%}
}