/* ==========================================================================
   Single actualité (CPT) — single-actualite.php.
   Loaded only on that single view (see functions.php), after main.css.
   --ac is the category accent, set per-article on .art-hero and per-card
   on .art-rel.
   ========================================================================== */

/* ---- Hero --------------------------------------------------------------- */
.art-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* `clip` (not `hidden`) so the hero is not a scroll container: it keeps the
     580/300 ratio when the content fits and grows when it does not (many
     category badges on a phone), instead of clipping the top rows. Old
     browsers fall back to `hidden`. */
  overflow: hidden;
  overflow: clip;
  /* Full screen width with the same banner ratio on every device. */
  width: 100%;
  aspect-ratio: 580 / 300;
  background: #111;
}

.art-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.art-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    76deg,
    rgba(17, 17, 17, 0.95) 0%,
    rgba(17, 17, 17, 0.8) 46%,
    rgba(17, 17, 17, 0.3) 100%
  );
}

.art-back {
  position: absolute;
  top: clamp(16px, 2.4vw, 30px);
  left: clamp(20px, 4vw, 30px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: color 0.25s ease;
}

.art-back:hover {
  color: #c3ff74;
}

.art-hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
  max-width: 980px;
  padding: clamp(44px, 5.5vw, 92px) clamp(20px, 4vw, 30px)
    clamp(30px, 3.6vw, 56px);
}

.art-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

.art-hero-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.art-hero-badge {
  padding: 6px 12px;
  background: var(--ac, #c3ff74);
  color: #111;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.art-hero-badge:hover {
  opacity: 0.8;
}

.art-hero-date {
  color: #c9c9c9;
}

.art-hero-title {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-weight: 500;
  font-size: clamp(27px, 4.2vw, 58px);
  line-height: 0.98;
  letter-spacing: -2px;
  overflow-wrap: anywhere;
  color: #fff;
}

.art-hero-rule {
  display: block;
  width: 100%;
  max-width: 180px;
  height: 8px;
  background: var(--ac, #c3ff74);
}

/* ---- Layout ------------------------------------------------------------- */
.art-main {
  padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 30px);
  background: #161616;
}

.art-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.32fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
}

/* ---- Article body ------------------------------------------------------- */
/* Styles the editor output, so the selectors target bare tags. */
.art-body {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  max-width: 820px;
}

.art-body p {
  margin: 0;
  font-size: 19px;
  line-height: 170%;
  color: #c9c9c9;
}

.art-body strong {
  font-weight: 500;
  color: #fff;
}

/* Editor links only — the CTA button lives in this column too and keeps its
   own colours, so it must stay out of this rule. */
.art-body a:not(.art-send) {
  color: var(--ac, #c3ff74);
  text-decoration: underline;
}

/* h4–h6 too: the migrated articles use them as section titles (main.css sizes
   them 16–20px, next to 19px body text they read as plain text). h4 — the old
   site's usual section title — takes the h3 size. */
.art-body h2,
.art-body h3,
.art-body h4,
.art-body h5,
.art-body h6 {
  margin: clamp(14px, 1.8vw, 24px) 0 0;
  font-family: 'Syne', sans-serif;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -1px;
  color: #fff;
}

.art-body h2 {
  font-size: clamp(22px, 2.4vw, 32px);
}

.art-body h3,
.art-body h4 {
  font-size: clamp(19px, 1.9vw, 25px);
}

.art-body h5,
.art-body h6 {
  font-size: clamp(18px, 1.7vw, 23px);
}

.art-body ul,
.art-body ol {
  margin: 0;
  padding-left: 22px;
  font-size: 19px;
  font-weight: 400;
  line-height: 170%;
  color: #c9c9c9;
}

.art-body ul {
  list-style: disc;
}

.art-body ol {
  list-style: decimal;
}

.art-body blockquote {
  margin: clamp(10px, 1.4vw, 20px) 0;
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 34px);
  background: var(--ac, #c3ff74);
  color: #111;
  font-family: 'Syne', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.14;
  letter-spacing: -1px;
}

.art-body blockquote p {
  font: inherit;
  color: inherit;
}

/* Embedded media (editor images, iframes, video) — boxed like the mockup. */
.art-body img,
.art-body iframe,
.art-body video,
.art-body .wp-caption {
  display: block;
  max-width: 100%;
  height: auto;
  margin: clamp(8px, 1vw, 16px) 0;
  background: #111;
  border: 1px solid #575757;
}

.art-body iframe,
.art-body video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

.art-body figcaption,
.art-body .wp-caption-text {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #8a8a8a;
}

/* Alignment kept from the old site — and set by the editor's alignment
   buttons: images are blocks here, so they are centred by their margins
   (text by the text-align the editor writes inline). */
.art-body .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

.art-body .alignright {
  margin-left: auto;
}

/* A dark logo on a transparent background (black text, mostly): the old
   site's white page showed it, this dark body would swallow it. The migration
   marks those (art-img--plate) and they sit on a light plate, as they were. */
.art-body img.art-img--plate {
  background: #fff;
  padding: clamp(8px, 1vw, 14px);
}

/* ---- Images side by side ------------------------------------------------ */
/* The old site's image rows (columns holding one image each, galleries),
   carried over by the migration as <div class="art-gallery art-gallery--N">.
   --2 / --3 / --4 are equal columns, like the old ones; --auto (images that
   sat inline in a paragraph, logos mostly) keeps each image's own size and
   wraps. Stacked under 768px, where the old site's columns stacked too. */
.art-body .art-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  align-items: start;
  margin: clamp(8px, 1vw, 16px) 0;
}

.art-body .art-gallery--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.art-body .art-gallery--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.art-body .art-gallery > *,
.art-body .art-gallery img {
  margin: 0;
}

.art-body .art-gallery img {
  width: 100%;
}

.art-body .art-gallery--auto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.art-body .art-gallery--auto > * {
  min-width: 0;
  max-width: 100%;
}

.art-body .art-gallery--auto img {
  width: auto;
}

.art-body .art-gallery--center {
  justify-content: center;
}

/* ---- Columns ------------------------------------------------------------ */
/* The old site's other multi-column sections (cards of image + text, text
   side by side), carried over as <div class="art-cols art-cols--N"> of
   <div class="art-col">: equal columns, or a third / two thirds (--1-2,
   --2-1) as sized on the old site. Each column stacks its blocks like the
   body does, centred (--center) when the old column's text was. Stacked
   under 768px, like the image rows. */
.art-body .art-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
}

.art-body .art-cols--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.art-body .art-cols--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.art-body .art-cols--1-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.art-body .art-cols--2-1 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.art-body .art-col {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  min-width: 0;
}

/* Columns start level: no heading margin or image gap above the first block. */
.art-body .art-col > :first-child {
  margin-top: 0;
}

.art-body .art-col--center {
  text-align: center;
}

.art-body .art-col--center img {
  margin-left: auto;
  margin-right: auto;
}

/* ---- Inline CTA --------------------------------------------------------- */
/* Button first, note underneath it. */
/* The muted line beside the CTA button (Formats > "Note CTA"). It is a <p>
   inside .art-body, so it has to out-weigh ".art-body p" (0,1,1) — the bare
   class alone (0,1,0) loses and the note would render as ordinary body text. */
.art-cta-note,
.art-body p.art-cta-note {
  font-size: 16px;
  font-weight: 500;
  color: #8a8a8a;
}

/* shared button — green by default, inverted in the closing CTA band */
.art-send {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: #c3ff74;
  color: #111;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.art-send svg {
  flex: none;
}

/* A button written inline in the editor (Formats > "Bouton CTA") is a bare
   <a class="art-send"> inside a paragraph: it has no SVG child, and as a
   block-level flex box it would stretch the whole column instead of hugging its
   label. Both are corrected here; the closing CTA band keeps its own inline
   SVG and is left alone by the :has() guard. */
.art-body a.art-send {
  display: inline-flex;
}

.art-send:not(:has(svg))::after {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M12.5003 4.26753V15H15L15 2.23573e-06L0 0L1.77755e-06 2.49971L10.7325 2.49971L2.17093e-06 13.2322L1.76783 15L12.5003 4.26753Z'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M12.5003 4.26753V15H15L15 2.23573e-06L0 0L1.77755e-06 2.49971L10.7325 2.49971L2.17093e-06 13.2322L1.76783 15L12.5003 4.26753Z'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.art-send--dark {
  background: #111;
  color: #c3ff74;
}

/* Both variants share the mockup's blue hover. */
.art-send:hover,
.art-send--dark:hover {
  background: #0082fe;
  color: #fff;
}

/* The shared rich-text rules in main.css (:is(.art-body, …) a / strong —
   class + element) outrank the bare .art-send class: inside the article body
   the label and its arrow would take the link green of the button's own
   background and vanish, and a bold label would turn white. Restated here at
   .art-body a.art-send weight. */
.art-body a.art-send {
  color: #111;
  text-decoration: none;
}

.art-body a.art-send:hover {
  color: #fff;
}

.art-body a.art-send :is(strong, b, em, i, u) {
  color: inherit;
}

/* ---- Aside -------------------------------------------------------------- */
.art-aside {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  padding-top: 20px;
  border-top: 1px solid #575757;
}

.art-aside-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.art-aside-label {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8a8a8a;
}

.art-share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.art-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border: 1px solid #575757;
  color: #c9c9c9;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.art-share-btn:hover {
  background: #c3ff74;
  border-color: #c3ff74;
  color: #111;
}

/* related article card */
.art-rel {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid #333;
  text-decoration: none;
}

.art-rel-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}

.art-rel-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.art-rel:hover .art-rel-media img {
  transform: scale(1.06);
}

.art-rel-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 135%;
  color: #c9c9c9;
  transition: color 0.3s ease;
}

.art-rel:hover .art-rel-title {
  color: var(--ac, #c3ff74);
}

.art-rel-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid #333;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  color: #c3ff74;
  text-decoration: none;
  transition: color 0.3s ease;
}

.art-rel-all:hover {
  color: #fff;
}

/* ---- Closing CTA band --------------------------------------------------- */
.art-cta-section {
  padding: 0 clamp(20px, 4vw, 30px) clamp(48px, 6vw, 90px);
  background: #111;
}

.art-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 40px);
  background: #c3ff74;
}

.art-cta-text {
  max-width: 760px;
  font-family: 'Syne', sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.6px;
  text-transform: uppercase;
  color: #111;
}

/* ---- Scroll reveal ------------------------------------------------------ */
.art-reveal.js-armed {
  opacity: 0;
  transform: translateY(28px);
}

.art-reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1000px) {
  .art-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .art-aside {
    position: static;
  }
}

/* The old site's (Elementor) mobile breakpoint: its columns stacked here. */
@media (max-width: 767px) {
  .art-body .art-gallery:not(.art-gallery--auto),
  .art-body .art-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 580px) {
  .art-hero-title {
    letter-spacing: -1px;
  }

  .art-cta {
    justify-content: flex-start;
  }
}