/* ===========================================================================
   PAGE STYLE — Gabarit « about-entry » (refonte 2026)
   ---------------------------------------------------------------------------
   Chargée UNIQUEMENT sur les pages du gabarit tpl_about_entry
   (cf. candiapro_about_entry_enqueue dans refonte-2026.inc.php), APRÈS
   refonte-2026.css, et ENTIÈREMENT scopée à `.page.about-entry` : elle
   n'impacte aucune autre page du site.

   Reprend le style du design « Chefs Partenaires » (Claude Design), appliqué
   de façon générique — piloté par le contenu de chaque page (titre, image,
   textes) : rien n'est codé en dur.

   Tokens réutilisés (refonte-2026.css :root) : --gold, --ff-cond (Barlow
   Condensed), --ff-body (National Park), --ff-script (Connoisseurs).
   =========================================================================== */

/* -------------------------------------------------------------------------
   Correctif conteneur : le legacy `.page.about-entry { position:relative; top:120px }`
   décale le bloc VISUELLEMENT sans déplacer sa boîte de flux → il déborde de 120px et
   RECOUVRE le footer (position:relative = au-dessus) → liens du footer non cliquables.
   On annule le décalage visuel et on le remplace par un padding-top (dans le flux).
   ------------------------------------------------------------------------- */
.page.about-entry {
  top: 0 !important;
  padding-top: 120px !important;
}

/* -------------------------------------------------------------------------
   Fil d'Ariane (déplacé depuis le <style> inline du template)
   Aligné à gauche sur le premier onglet du menu principal : même boîte que
   .nav (min(1320px, 100% - 48px), centrée) + le retrait ~22px du menu.
   ------------------------------------------------------------------------- */
.page.about-entry .about-breadcrumb-wrap {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding-left: 22px;
  box-sizing: border-box;
}
.page.about-entry .about-breadcrumb {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.page.about-entry .about-breadcrumb a,
.page.about-entry .about-breadcrumb .current {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.page.about-entry .about-breadcrumb a { color: rgba(255, 255, 255, .6); transition: color .2s ease; }
.page.about-entry .about-breadcrumb a:hover { color: var(--gold); }
.page.about-entry .about-breadcrumb .sep { font-family: var(--ff-body); font-size: 13px; line-height: 1; color: rgba(255, 255, 255, .35); }
.page.about-entry .about-breadcrumb .current { color: var(--gold); }
@media (max-width: 768px) {
  .page.about-entry .about-breadcrumb { gap: 8px; }
  /* le titre de page (dernier item) peut être long : on l'autorise à passer à
     la ligne pour éviter tout débordement horizontal sur mobile. */
  .page.about-entry .about-breadcrumb .current { white-space: normal; }
}

/* -------------------------------------------------------------------------
   HERO (bloc .header) — titre + accroche + description + image encadrée
   ------------------------------------------------------------------------- */

/* Mise en page du héros : on neutralise la grille legacy (m2 c10) pour FERRER le
   texte à GAUCHE (aligné sur le fil d'Ariane / 1er onglet du menu), et on ajoute de
   l'espace SOUS le héros. L'image se positionne par rapport à .header (header-text
   en static). */
.page.about-entry .header {
  display: block !important;
  width: 100% !important;
  /* marge au-dessus du héros : il ne doit pas être collé au fil d'Ariane. */
  margin: 56px 0 0 !important;
  position: relative;
  /* le héros doit contenir l'image (haute) ET dégager de l'espace en dessous. */
  min-height: 620px !important;
  padding-bottom: 120px !important;
  box-sizing: border-box;
}
.page.about-entry .header .header-text {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0 22px;   /* retrait gauche 22px = même ferrage que le fil d'Ariane */
  box-sizing: border-box;
  position: static;
  /* texte + titre centrés VERTICALEMENT sur l'image : on donne à la colonne texte
     la même hauteur que l'image (74% de sa largeur) et on centre son contenu. */
  min-height: calc(min(640px, 46vw) * 0.74);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Titre : Barlow Condensed bold, blanc, majuscules. */
.page.about-entry .header .header-text .title {
  color: #fff !important;
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .92;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: 0;
  width: auto;
  max-width: 620px;
}

/* Accroche (subtitle) + description : National Park, blanc, largeur bornée pour
   rester à gauche de l'image. */
.page.about-entry .header .header-text .subtitle,
.page.about-entry .header .header-text .description {
  color: #fff;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.35;
  width: auto;
  max-width: 560px;
}
.page.about-entry .header .header-text .subtitle { margin-bottom: 22px; }
.page.about-entry .header .header-text .subtitle::after { display: none; }
.page.about-entry .header .header-text .description::after {
  content: "";
  display: block;
  width: 23px;
  height: 3px;
  background: var(--gold);
  margin-top: 26px;
}

/* Image à la une : SANS cadre ni arrondi, collée tout à DROITE et débordant
   du bord de l'écran (coupée), comme si elle sortait à droite. */
.page.about-entry .header .header-text .container-img {
  position: absolute;
  top: 0;
  right: -48px;          /* déborde à droite → coupée par le bord du viewport */
  left: auto;
  bottom: auto;
  width: min(640px, 46vw);
  border: none;
  padding: 0;
  border-radius: 0;
  background-size: cover;
  background-position: center center;
  background-clip: border-box;
  overflow: hidden;
}
.page.about-entry .header .header-text .container-img::before {
  content: "";
  display: block;
  padding-top: 74%;
}

/* Mobile / tablette : l'image passe EN FLUX (empilée sous le titre), pleine largeur,
   débordant un peu à droite. Le héros reprend une hauteur naturelle (pas de centrage
   vertical ni de min-height). */
@media (max-width: 1024px) {
  .page.about-entry .header {
    min-height: 0 !important;
    padding-bottom: 40px !important;
  }
  .page.about-entry .header .header-text {
    display: block;
    min-height: 0;
  }
  .page.about-entry .header .header-text .title,
  .page.about-entry .header .header-text .subtitle,
  .page.about-entry .header .header-text .description {
    max-width: none;
  }
  .page.about-entry .header .header-text .container-img {
    position: static;
    width: calc(100% + 24px);
    margin: 24px -24px 4px 0;
    right: auto;
    border-radius: 0;
  }
}

/* -------------------------------------------------------------------------
   PORTRAITS CHEFS (composant master-content)
   --------------------------------------------------------------------------
   Le gabarit about-entry couvre des pages au contenu TRÈS variable (certaines
   n'ont pas de master-content, d'autres du texte seul). On évite donc toute
   mise en page globale « par paires » : on ne cible que ce qui est sûr —
   la PHOTO (`.ct--master-slider`, présente seulement sur les pages chefs) et
   le texte QUI SUIT une photo (sélecteur de fratrie adjacente `+`). Les blocs
   sans photo (ex. « Innovation ») ne sont pas impactés.
   ------------------------------------------------------------------------- */
.page.about-entry .about-entry-master-content {
  width: min(1140px, calc(100% - 48px));
  margin: 20px auto 0;
}

/* Grille photo/texte — appliquée UNIQUEMENT si le master-content contient une
   photo (`:has()`), donc JAMAIS sur les pages sans portrait (ex. « Innovation »,
   texte seul). Les enfants directs alternent strictement [photo, texte, …] : la
   grille 2 colonnes les apparie ligne par ligne, sans float ni hack de marge. */
.page.about-entry .about-entry-master-content:has(.ct.ct--master-slider) {
  display: grid;
  /* colonnes ÉGALES : l'alternance échange photo/texte de colonne ; des colonnes
     symétriques évitent que le texte se retrouve dans une colonne plus étroite
     (et donc décalé verticalement) quand la photo passe à droite. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* alignés EN HAUT : le titre/paragraphe démarre au même niveau que la photo. */
  align-items: start;
  /* dense : indispensable pour que la photo (col. imposée) et son texte (col. imposée)
     restent sur la MÊME ligne — sinon le placement « sparse » laisse une case vide et
     renvoie le texte des chefs à photo-droite à la ligne suivante (décalage vers le bas). */
  grid-auto-flow: dense;
  column-gap: 56px;
  row-gap: 44px;
}
/* Placement + alternance L/R (maquette) : photos des chefs PAIRS (position 4n+3)
   → colonne 2 (droite) ; leur texte → colonne 1 (gauche). L'auto-placement de la
   grille les recale automatiquement sur la bonne ligne. */
.page.about-entry .about-entry-master-content > .ct.ct--master-slider { grid-column: 1; }
.page.about-entry .about-entry-master-content > .ct.ct--master-advanced-content { grid-column: 2; }
.page.about-entry .about-entry-master-content > .ct.ct--master-slider:nth-child(4n+3) { grid-column: 2; }
.page.about-entry .about-entry-master-content > .ct.ct--master-slider:nth-child(4n+3) + .ct.ct--master-advanced-content { grid-column: 1; }

/* Photo : cercle (au lieu du blob organique) + anneau décoratif or.
   NB : le slider legacy centre le `.container-slides` via left:50% + translateX(-50%)
   (conservé — c'est ce qui le centre dans sa colonne en desktop). */
.page.about-entry .about-entry-master-content .ct.ct--master-slider {
  position: relative;
  /* le slider legacy est en overflow:hidden, ce qui rognait l'anneau doré (qui
     dépasse le cercle) en haut et en bas : on le laisse déborder. */
  overflow: visible;
}
.page.about-entry .about-entry-master-content .ct--master-slider .container-slides,
.page.about-entry .about-entry-master-content .ct--master-slider .container-slides .slide-image {
  width: 380px !important;
  height: 380px !important;
  border-radius: 50% !important;
  overflow: hidden;
}
/* anneau or légèrement déformé et incliné (évoque le circle-portrait.svg de la maquette) */
.page.about-entry .about-entry-master-content .ct--master-slider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 408px;
  height: 402px;
  transform: translate(-50%, -50%) rotate(-9deg);
  border: 1.5px solid rgba(196, 160, 74, .55);
  border-radius: 47% 53% 48% 52% / 53% 47% 53% 47%;
  pointer-events: none;
  z-index: 1;
}

/* Texte du chef (colonne de la grille) : display block pleine largeur. */
.page.about-entry .about-entry-master-content .ct.ct--master-advanced-content {
  display: block;
  width: auto !important;
  margin: 0 !important;
}
/* Titre « À la rencontre de … » : Barlow Condensed bold, blanc, majuscules,
   aligné à gauche et sur UNE seule ligne (nowrap). */
.page.about-entry .about-entry-master-content .ct--master-advanced-content .title-content {
  font-family: var(--ff-cond);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.05;
  margin: 0 0 16px;
  text-align: left;
  white-space: nowrap;
}

/* Mobile / tablette : on empile (photo centrée au-dessus du texte). */
@media (max-width: 1000px) {
  .page.about-entry .about-entry-master-content:has(.ct.ct--master-slider) {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  /* photo et texte toujours dans l'ordre naturel (photo au-dessus). */
  .page.about-entry .about-entry-master-content > .ct.ct--master-slider,
  .page.about-entry .about-entry-master-content > .ct.ct--master-slider:nth-child(4n+3),
  .page.about-entry .about-entry-master-content > .ct.ct--master-advanced-content,
  .page.about-entry .about-entry-master-content > .ct.ct--master-slider:nth-child(4n+3) + .ct.ct--master-advanced-content {
    grid-column: 1;
  }
  .page.about-entry .about-entry-master-content .ct--master-slider .container-slides {
    width: 300px !important;
    height: 300px !important;
  }
  .page.about-entry .about-entry-master-content .ct--master-slider::after {
    width: 322px;
    height: 318px;
  }
  /* colonne étroite : le titre peut repasser sur plusieurs lignes (pas de nowrap). */
  .page.about-entry .about-entry-master-content .ct--master-advanced-content .title-content {
    white-space: normal;
  }
}

/* -------------------------------------------------------------------------
   Bloc « Découvrir » (.ct--discover) : 2 liens-images vers d'autres pages.
   Pleine largeur, 2 cartes 50/50 (aucun vide sur les côtés), et COLLÉ au footer
   (aucun espace entre le bloc et le footer). Comme cette feuille n'est chargée
   que sur le gabarit about-entry, on peut agir sur main/.footer-legal-strip.
   ------------------------------------------------------------------------- */
.page.about-entry .ct.ct--discover {
  width: 100%;
  margin-bottom: 0 !important;
}
.page.about-entry .ct.ct--discover .discover {
  flex: 1 1 50%;
  width: 50%;
  max-width: none;
  min-width: 0;
}
/* On supprime l'étirement sticky-footer + les paddings qui créaient un vide entre
   le bloc et le footer, pour que le discover colle au footer. */
main:has(.page.about-entry) { min-height: 0 !important; }
.page.about-entry { padding-bottom: 0 !important; }
.footer-legal-strip { padding-top: 0 !important; }
@media (max-width: 768px) {
  /* mobile : cartes empilées en pleine largeur (toujours aucun vide sur les côtés). */
  .page.about-entry .ct.ct--discover { flex-direction: column; }
  .page.about-entry .ct.ct--discover .discover { width: 100%; flex-basis: auto; }
}