/* ==========================================================================
   LienSerein — pages.css
   Styles spécifiques aux pages et grandes sections : hero, bandeau de
   confiance, en-tête de page, espace pro, blog, contact.
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(circle at 85% -10%, var(--sauge-wash) 0%, transparent 45%),
        linear-gradient(160deg,var(--canard-wash) 0%,var(--creme) 60%);
}

.hero__inner{

    position:relative;

    width:100%;

    min-height:620px;

}

/* Dégradé entre texte et photo */

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    left:46%;

    width:280px;

    pointer-events:none;

    background:linear-gradient(
        to right,
        rgba(248,245,238,1) 0%,
        rgba(248,245,238,.92) 18%,
        rgba(248,245,238,.65) 38%,
        rgba(248,245,238,.20) 62%,
        rgba(248,245,238,0) 100%
    );

    z-index:2;

}


/* ==========================================================================
   TEXTE
   ========================================================================== */

.hero__content{

    position:absolute;

    top:70px;

    left:11%;

    width:610px;

    z-index:20;

}

.hero .eyebrow{

    display:block;

    margin:0 0 42px;

}

.hero h1{

    font-size:clamp(2rem,2vw,1.8rem);

    line-height:1.05;

    margin:0 0 22px;

    max-width:620px;

}
.hero h1 em{
    color: var(--primary);
    font-style: italic;
    font-weight: inherit;
}

.hero__sub{

    max-width:560px;

    font-size:1.15rem;

    line-height:1.75;

    color:var(--taupe-fonce);

    margin-bottom:30px;

}

.hero .btn-row{

    margin-bottom:45px;
}
/* ==========================================================================
   PHOTO
   ========================================================================== */

.hero__visual{

    position:absolute;

    top:0;

    bottom:0;

    left:48%;

    right:0;

    z-index:1;

}

.hero__photo{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:20% center;

    display:block;
}
/* ==========================================================================
   TABLETTE + MOBILE
   ========================================================================== */

@media (max-width:1100px){

    .hero::after{
        display:none;
    }


    .hero__inner{

        min-height:auto;

        display:flex;

        flex-direction:column;

    }


    .hero__content{

        position:relative;

        top:auto;

        left:auto;

        width:100%;

        padding:30px 22px 40px;

        display:contents;

    }


    /*
       Ordre visuel :
       eyebrow
       photo
       titre
       texte
       boutons
    */

    .hero .eyebrow{

        order:1;

        padding:30px 22px 0;

        margin:0;

    }


    .hero__visual{

        order:2;

        position:relative;

        top:auto;

        left:auto;

        right:auto;

        width:100%;

        height:auto;

        margin:25px 0 35px;

    }


    .hero__photo{

        width:100%;

        height:auto;

        display:block;

        object-fit:contain;

        object-position:center;

    }


    .hero h1{

        order:3;

        padding:0 22px;

        margin:0 0 22px;

    }


    .hero__sub{

        order:4;

        padding:0 22px;

    }


    .hero .btn-row{

        order:5;

        padding:0 22px;

    }

}



/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (min-width:768px) and (max-width:1100px){

    .hero__visual{

        margin:30px 0 40px;

    }


    .hero__photo{

        object-fit:contain;

    }

}



/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width:767px){

    .hero__visual{

        margin:20px 0 30px;

    }

}
/* ==========================================================================
   BANDEAU DE CONFIANCE (chiffres-clés)
   ========================================================================== */
.trust-bar { background: var(--canard); color: #fff; }
.trust-bar__inner {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(var(--s5), 6vw, var(--s9));
  padding-block: var(--s6);
  text-align: center;
}
.trust-stat__num { font-family: var(--f-disp); font-size: 1.7rem; color: #fff; line-height: 1.1; }
.trust-stat__label { font-size: .82rem; color: rgba(255,255,255,.82); margin-top: 4px; }
.trust-bar__sep { width: 1px; align-self: stretch; background: rgba(255,255,255,.18); }
@media (max-width: 640px) { .trust-bar__sep { display: none; } }

/* Phrase / slogan en bandeau */
.quote-band { background: var(--sauge-wash); min-height: 210px; display: flex; align-items: center; }
.quote-band .quote { margin-inline: auto; text-align: center; border: none; padding: 0; }

/* ==========================================================================
   EN-TÊTE DE PAGE (pages intérieures)
   ========================================================================== */
.page-header {
  background:
    radial-gradient(circle at 90% 0%, var(--sauge-wash) 0%, transparent 40%),
    linear-gradient(160deg, var(--canard-wash) 0%, var(--creme) 65%);
  padding-block: clamp(var(--s6), 5vw, var(--s7)) clamp(var(--s6), 5vw, var(--s8));
}
.page-header__inner { max-width: 760px; }
.page-header--center .page-header__inner { max-width: var(--read); margin-inline: auto; text-align: center; }
.page-header--center .lead { margin-inline: auto; }
.page-header h1 { font-size: var(--fs-h1); margin-bottom: var(--s4); }
.page-header h1 em { font-style: italic; color: var(--canard); }

/* Image à la une intégrée à l'en-tête (article standard) — compacte, cf. single.php */
.page-header__media {
  margin: var(--s6) 0 0;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-md); background: var(--sauge-wash);
  aspect-ratio: 16 / 9; max-height: 340px;
}
.page-header__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* En-tête de page d'offre (avec pictogramme) */

/* ==========================================================================
   SÉPARATEURS COURBÉS (divwave)
   ========================================================================== */
.divwave {
  display: block;
  line-height: 0;
  overflow: hidden;
  margin-top: -1px;
  margin-bottom: -1px;
}
.divwave svg { display: block; width: 100%; height: 48px; }

/* hero (gradient, finit en creme) → trust-bar (canard) */
.divwave--hero-to-trust { background: var(--creme); }
.divwave--hero-to-trust path { fill: var(--canard); }

/* trust-bar (canard) → quote-band (sauge-wash) */
.divwave--trust-to-quote { background: var(--canard); }
.divwave--trust-to-quote path { fill: var(--sauge-wash); }

/* quote-band (sauge-wash) → section--white (blanc) */
.divwave--quote-to-white { background: var(--sauge-wash); }
.divwave--quote-to-white path { fill: var(--blanc); }

/* section--white (blanc) → section--cream (creme) */
.divwave--white-to-cream { background: var(--blanc); }
.divwave--white-to-cream path { fill: var(--creme); }

/* section--cream (creme) → section--white (blanc) */
.divwave--cream-to-white { background: var(--creme); }
.divwave--cream-to-white path { fill: var(--blanc); }

/* section--cream (creme) → section--sauge (sauge-wash) */
.divwave--cream-to-sauge { background: var(--creme); }
.divwave--cream-to-sauge path { fill: var(--sauge-wash); }

/* temoignages (sauge-wash) → pro (canard-deep) */
.divwave--temo-to-pro { background: var(--sauge-wash); }
.divwave--temo-to-pro path { fill: var(--canard-deep); }

/* pro (canard-deep) → cta (canard) */
.divwave--pro-to-cta { background: var(--canard-deep); }
.divwave--pro-to-cta path { fill: var(--canard); }

/* cta (canard) → footer (canard-deep) */
.divwave--cta-to-footer { background: var(--canard); }
.divwave--cta-to-footer path { fill: var(--canard-deep); }

/* ==========================================================================
   CABINET — grille map + photo (Leaflet)
   ========================================================================== */
.cabinet-grid { align-items: stretch; }
.cabinet-grid .map-embed { min-height: 300px; }
#cabinet-map { height: 100%; min-height: 300px; }

/* Marqueur Leaflet custom */
.map-pin {
  background: var(--canard);
  color: #fff;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
  white-space: nowrap;
  position: relative;
  display: inline-block;
}
.map-pin::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--canard);
}

/* ==========================================================================
   POURQUOI LIENSEREIN — carte pull-quote
   ========================================================================== */
.pourquoi-card {
  background: var(--blanc);
  border-radius: var(--r-xl);
  padding: var(--s7) var(--s6);
  box-shadow: var(--sh-md);
  border: 1px solid var(--bd-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pourquoi-card__deco {
  font-family: var(--f-disp);
  font-size: 5rem;
  line-height: 0.5;
  color: var(--rose);
  margin-bottom: var(--s5);
  font-style: italic;
  opacity: .5;
  user-select: none;
}
.pourquoi-card__quote {
  font-family: var(--f-disp);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.55;
  color: var(--canard-deep);
  margin-bottom: var(--s6);
}
.pourquoi-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  border-top: 1px solid var(--bd-soft);
  padding-top: var(--s5);
}
.pourquoi-stat__n {
  display: block;
  font-family: var(--f-disp);
  font-size: 1.6rem;
  color: var(--canard);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 3px;
}
.pourquoi-card__stats span:not(.pourquoi-stat__n) {
  font-size: .82rem;
  color: var(--taupe-fonce);
}

/* ==========================================================================
   STICKY CONTACT BAR
   ========================================================================== */
.sticky-contact {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--blanc);
  border-top: 1px solid var(--bd-soft);
  box-shadow: 0 -4px 20px rgba(42,39,35,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  padding: var(--s3) var(--gutter);
  transition: opacity var(--transition), visibility var(--transition);
}
/* Tiroir de navigation mobile ouvert : la barre s'efface, sinon son z-index 200
   (> header 100) recouvre le bas du tiroir et masque son bouton Contact. */
@media (max-width: 1040px) {
  .nav-backdrop[data-open="true"] ~ .sticky-contact { opacity: 0; visibility: hidden; }
}
.sticky-contact__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 600;
  color: var(--canard-deep);
  text-decoration: none;
  font-size: .95rem;
  white-space: nowrap;
}
.sticky-contact__phone:hover { color: var(--canard); }
.sticky-contact__cta { white-space: nowrap; }

@media (min-width: 720px) {
  .sticky-contact {
    left: auto;
    bottom: var(--s6);
    right: var(--s6);
    flex-direction: column;
    align-items: stretch;
    gap: var(--s3);
    border: 1px solid var(--bd-soft);
    border-top: 1px solid var(--bd-soft);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    padding: var(--s4);
    min-width: 196px;
    background: var(--blanc);
  }
  .sticky-contact__phone {
    justify-content: center;
    padding: 10px var(--s4);
    background: var(--canard-wash);
    border-radius: var(--r-sm);
    font-size: .9rem;
  }
}

/* Bandeau d'appel à l'action pleine largeur */
.cta-band { background: var(--canard); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: rgba(255,255,255,.88); margin-inline: auto; }
.cta-band .btn--accent { box-shadow: var(--sh-md); }

/* ==========================================================================
   BLOG
   ========================================================================== */
.post-card {
  display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid var(--bd-soft);
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--sh-sm); text-decoration: none; color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
/* Miniatures uniformisées : cadre 16/10 fixe, l'image remplit et se recadre
   quelles que soient ses dimensions d'origine. */
.post-card__media { aspect-ratio: 16 / 10; background: var(--sauge-wash); overflow: hidden; }
.post-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.post-card__meta { display: flex; gap: var(--s3); align-items: center; font-family: var(--f-mono);
  font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--taupe-fonce); }
.post-card__title { font-family: var(--f-disp); font-size: 1.2rem; color: var(--encre); line-height: 1.25; }
.post-card__excerpt { color: var(--taupe-fonce); font-size: .95rem; flex: 1; }

/* Format média (catégorie) */
.post-card__type { display: inline-flex; align-items: center; gap: 5px; }

/* Bouton lecture sur les cartes vidéo / audio */
.post-card__media--playable { position: relative; }
.post-card__play {
  position: absolute; inset: 0; margin: auto;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(42, 39, 35, .55);
  color: #fff; font-size: 1.05rem; padding-left: 3px;
  pointer-events: none;
  transition: transform var(--transition), background var(--transition);
}
.post-card:hover .post-card__play { transform: scale(1.08); background: var(--accent); }

/* ==========================================================================
   MÉDIA EN AVANT (article vidéo / podcast) — cf. single.php + lienserein_post_media()
   ========================================================================== */

/* Le média mis en avant se colle sous l'en-tête (rythme vertical resserré) */
.section--media-lead { padding-top: clamp(var(--s5), 4vw, var(--s7)); padding-bottom: clamp(var(--s6), 5vw, var(--s7)); }
body.has-media-lead .page-header { padding-bottom: clamp(var(--s6), 5vw, var(--s7)); }

/* Vidéo : cadre 16/9 net et cinématographique */
.post-media__video {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-md); background: var(--encre);
}
.post-media__video iframe,
.post-media__video video {
  display: block; width: 100%; height: 100%; border: 0; object-fit: cover;
}

/* Podcast : carte pochette + lecteur */
.post-media__podcast {
  display: flex; align-items: center; gap: var(--s6);
  padding: var(--s6);
  background: linear-gradient(150deg, var(--sauge-wash) 0%, var(--creme) 70%);
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-md);
}
.post-media__cover {
  flex: 0 0 auto; width: 132px; height: 132px;
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--sh-sm); background: var(--sauge-wash);
  display: grid; place-items: center;
}
.post-media__cover img { width: 100%; height: 100%; object-fit: cover; }
.post-media__cover-ph { font-size: 3rem; line-height: 1; }
.post-media__player { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.post-media__kicker {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sauge-deep);
  display: inline-flex; align-items: center; gap: 6px;
}
.post-media__player audio { width: 100%; accent-color: var(--sauge); }
.post-media__dl {
  align-self: flex-start;
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .02em;
  color: var(--taupe-fonce); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--transition);
}
.post-media__dl:hover { color: var(--sauge-deep); }

/* Podcast intégré (Spotify, Ausha…) : le lecteur du fournisseur pilote sa hauteur */
.post-media__podcast--embed { flex-direction: column; align-items: stretch; gap: var(--s4); }
.post-media__podcast--embed iframe { width: 100%; max-width: 100%; border: 0; border-radius: var(--r-md); }

@media (max-width: 560px) {
  .post-media__podcast { flex-direction: column; text-align: center; padding: var(--s5); gap: var(--s5); }
  .post-media__cover { width: 160px; height: 160px; }
  .post-media__player { align-items: center; }
  .post-media__dl { align-self: center; }
}

/* Filtres par catégorie — posés juste au-dessus de la grille d'articles */
.blog-filters {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s2);
  margin-bottom: var(--s7);
}
.blog-filters .badge {
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.blog-filters .badge--out:hover {
  background: var(--canard-wash); border-color: var(--canard); color: var(--canard-deep);
}

@media (max-width: 640px) {
  /* Une seule ligne défilable (swipe) plutôt qu'un empilement de pastilles */
  .blog-filters {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  }
  .blog-filters::-webkit-scrollbar { display: none; }
  .blog-filters .badge { flex: 0 0 auto; scroll-snap-align: start; }
}

/* Pagination (the_posts_pagination) */
.pagination { margin-top: var(--s8); }
.pagination .nav-links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--s2);
}
.pagination .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 42px; height: 42px; padding: 0 var(--s3);
  border: 1.5px solid var(--bd-soft); border-radius: var(--r-sm);
  font-family: var(--f-mono); font-size: .85rem; color: var(--canard-deep);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pagination a.page-numbers:hover { background: var(--canard-wash); border-color: var(--canard); }
.pagination .page-numbers.current { background: var(--canard); color: #fff; border-color: var(--canard); }
.pagination .page-numbers.dots { border-color: transparent; }

/* Texte réservé aux lecteurs d'écran (classe WordPress) */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Article (single) */
.article { max-width: var(--read); margin-inline: auto; }
.article__meta { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--taupe-fonce); margin-bottom: var(--s4); }
.prose { font-size: 1.05rem; line-height: 1.75; color: var(--encre); }
.prose > * + * { margin-top: var(--s5); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--s7); }
.prose h3 { margin-top: var(--s6); }
.prose p { max-width: none; color: var(--encre); }
.prose ul { display: grid; gap: var(--s2); padding-left: var(--s5); list-style: disc; }
.prose ul li { color: var(--encre); }
.prose blockquote { border-left: 3px solid var(--rose); padding-left: var(--s5);
  font-family: var(--f-disp); font-style: italic; font-size: 1.2rem; color: var(--canard-deep); }
.prose a { color: var(--canard); }
/* Embeds oEmbed collés dans le corps de l'article (Classic Editor sort des
   iframes nus avec width/height fixes — 500px déborde sous 520px de large). */
.prose iframe { max-width: 100%; }
.prose iframe[src*="youtube"], .prose iframe[src*="youtu.be"],
.prose iframe[src*="vimeo"], .prose iframe[src*="dailymotion"] {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
}

/* Lecteur podcast factice */
.podcast-player {
  display: flex; align-items: center; gap: var(--s4);
  background: var(--canard-wash); border: 1px solid var(--bd-soft);
  border-radius: var(--r-md); padding: var(--s4) var(--s5);
}
.podcast-player__play {
  flex: none; width: 48px; height: 48px; border-radius: var(--r-pill);
  background: var(--canard); color: #fff; display: grid; place-items: center;
}
.podcast-player__play svg { width: 20px; height: 20px; fill: #fff; }
.podcast-player__bar { flex: 1; height: 4px; background: var(--bd-strong); border-radius: 2px; position: relative; }
.podcast-player__bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 35%; background: var(--canard); border-radius: 2px; }
.podcast-player time { font-family: var(--f-mono); font-size: .78rem; color: var(--taupe-fonce); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(var(--s6), 5vw, var(--s8));
  align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info { display: grid; gap: var(--s5); }
.contact-line { display: flex; gap: var(--s4); align-items: flex-start; }
.contact-line__ico {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--canard-wash); display: grid; place-items: center;
}
.contact-line__ico svg { width: 22px; height: 22px; stroke: var(--canard-deep); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.contact-line__label { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--taupe-fonce); }
.contact-line__value { font-weight: 600; color: var(--encre); }
.contact-line__value a { color: var(--canard-deep); text-decoration: none; }
.contact-line__value a:hover { text-decoration: underline; }

.map-embed { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); border: 1px solid var(--bd-soft); }
.map-embed iframe { display: block; width: 100%; height: 320px; border: 0; }
#contact-map { height: 320px; }

/* ==========================================================================
   PAGES LÉGALES (contenu long)
   ========================================================================== */
.legal { max-width: var(--read); margin-inline: auto; }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--s7); margin-bottom: var(--s3);
  padding-top: var(--s5); border-top: 1px solid var(--bd-soft); }
.legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal h3 { font-size: 1.1rem; margin-top: var(--s5); margin-bottom: var(--s2); }
.legal p, .legal li { color: var(--taupe-fonce); }
.legal p { margin-top: var(--s3); }
.legal ul { list-style: disc; padding-left: var(--s5); margin-top: var(--s3); display: grid; gap: var(--s2); }
.legal a { color: var(--canard); }

/* ==========================================================================
   FROISE / RUBAN « PREMIÈRE SÉANCE OFFERTE »
   ========================================================================== */
.highlight-inline {
  background: var(--rose-wash);
  color: var(--rose-deep);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-xs);
}
/* ==========================================================================
   SECTION "ÇA VOUS PARLE"
   ========================================================================== */

#ca-vous-parle{

    padding:60px 0;

}

#ca-vous-parle .section-head{

    margin-bottom:55px;

}

#ca-vous-parle .quote{

    margin-top:18px;

}
/* ==========================================================================
   Arbre plus présent dans la section "Ça vous parle ?"
   ========================================================================== */

#ca-vous-parle .tree-deco{

    width:570px;
    height:518px;

    top:60px;
    bottom:auto;

}

#ca-vous-parle .tree-deco--left{

    left:-250px;

}


/* ==========================================================================
   SLIDER
   ========================================================================== */

.emotion-slider{

    max-width:980px;

    margin:0 auto;

    text-align:center;

}

.emotion-slide{

    display:none;

    animation:fadeEmotion .45s ease;

}

.emotion-slide.active{

    display:block;

}

@keyframes fadeEmotion{

    from{

        opacity:0;
        transform:translateY(8px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}
.emotion-slide p{

    max-width:1000px;

    margin:0 auto;

    font-family:var(--f-disp);

    font-size:clamp(1.55rem,2.5vw,2rem);

    line-height:1.25;

    color:var(--taupe-fonce);

}
.emotion-slide p::before{

    content:"“";

    color:#C9BA6B;

    font-size:2.8rem;

    margin-right:6px;

    vertical-align:-10px;

}

.emotion-slide p::after{

    content:"”";

    color:#C9BA6B;

    font-size:2.8rem;

    margin-left:6px;

    vertical-align:-10px;

}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.emotion-nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:34px;

}


/* Flèches */

.emotion-prev,
.emotion-next{

    width:42px;

    height:42px;

    border:none;

    background:none;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#C9BA6B;

    transition:.25s;

}

.emotion-prev:hover,
.emotion-next:hover{

    color:var(--canard);

    transform:scale(1.15);

}

.emotion-prev svg,
.emotion-next svg{

    width:22px;

    height:22px;

}


/* Dots */

.emotion-dots{

    display:flex;

    gap:10px;

}

.emotion-dots span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#d8d2c7;

    transition:.3s;

    cursor:pointer;

}

.emotion-dots span.active{

    background:#C9BA6B;

    transform:scale(1.35);

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media(max-width:768px){

    .emotion-slide p{

        font-size:1.5rem;

    }

    .emotion-nav{

        margin-top:24px;

        gap:14px;

    }

}
/* ==========================================================================
   MES ACCOMPAGNEMENTS
========================================================================== */

#accompagnements h2 em {
    color: var(--primary);
    font-style: italic;
    font-weight: inherit;
}
#accompagnements .accomp-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2rem;
    margin-top:4rem;

}

#accompagnements .accomp-card{

    position:relative;

    display:flex;
    flex-direction:column;

    text-decoration:none;

    background:var(--blanc);

    border-radius:28px;

    overflow:visible;

    box-shadow:0 12px 35px rgba(42,39,35,.08);

    transition:.35s ease;

}

#accompagnements .accomp-card:hover{

    transform:translateY(-8px);

    box-shadow:0 24px 45px rgba(42,39,35,.12);

}

#accompagnements .accomp-card__image{

    height:360px;

    overflow:hidden;

    border-radius:28px 28px 0 0;

}

#accompagnements .accomp-card__image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}

#accompagnements .accomp-card:hover img{

    transform:scale(1.05);

}

/* Rond avec l'icône */

#accompagnements .accomp-card__icon{

    position:absolute;

    top:325px;

    left:50%;

    transform:translateX(-50%);

    width:78px;

    height:78px;

    border-radius:50%;

    background:var(--creme);

    border:3px solid var(--blanc);

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 8px 18px rgba(0,0,0,.10);

    z-index:20;

}

#accompagnements .accomp-card__icon svg{

    width:34px;

    height:34px;

    stroke:var(--or);

    fill:none;

    stroke-width:1.7;

}

/* Contenu */

#accompagnements .accomp-card__content{

    padding:3.6rem 2rem 2rem;

    text-align:center;

}

#accompagnements .accomp-card__content h3{

    font-family:var(--f-disp);

    font-size:1.45rem;

    color:var(--sauge-deep);

    margin-bottom:1rem;

}

#accompagnements .accomp-card__content p{

    color:var(--taupe-fonce);

    line-height:1.65;

    margin:0;

}

#accompagnements .accomp-card__link{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    margin-top:1.8rem;

    color:var(--or-deep);

    font-weight:600;

    transition:.3s;

}

#accompagnements .accomp-card:hover .accomp-card__link{

    gap:.9rem;

    color:var(--or);

}

/* Effet marque-page */

#accompagnements .accomp-card::after{

    content:"";

    position:absolute;

    bottom:-16px;

    left:50%;

    transform:translateX(-50%);

    width:42px;

    height:22px;

    background:var(--blanc);

    clip-path:polygon(0 0,100% 0,50% 100%);

}

/* Responsive */

@media(max-width:1100px){

    #accompagnements .accomp-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:700px){

    #accompagnements .accomp-grid{

        grid-template-columns:1fr;

    }

}