/* ===== Accueil « Magazine » (index.html et en/index.html) — refonte du 20/10/2026 =====
   Choix de la propriétaire : le « Magazine 3 » (maquettes/accueil-magazine.html, voir
   PLAN-REFONTE-MAGAZINE.md). L'accueil se lit comme un magazine qu'on feuillette : des pages
   les unes sous les autres, bord à bord, qu'on fait simplement défiler. Demandes de la
   propriétaire (20/10/2026) : plus de pages collées qui se superposent, pas d'espace entre les
   pages, et chaque page prend TOUT l'écran (largeur et hauteur sous la barre du haut), sur
   téléphone, tablette et ordinateur. Aucun texte sous 12 px.
   Les tailles suivent le plus petit côté de la page (unités cqmin : 1 cqmin = 1 % du plus petit
   côté) : en hauteur sur un ordinateur, en largeur sur un téléphone ; plancher en pixels pour
   rester lisibles. Écran en largeur : mises en page « double page » plus bas. Couleurs et polices : css/jetons.css (« --mag-… »). */

.page-magazine { background: var(--mag-scene); }
.page-magazine .site-footer { position: relative; z-index: 2; }

.mag {
  --entete: 84px;
  --H: max(460px, calc(100svh - var(--entete)));
  font-family: var(--mag-texte);
  color: var(--mag-encre);
}

/* Les pages se suivent bord à bord, sans espace : on les fait défiler normalement. */
.mag-page {
  position: relative;
  width: 100%;
  height: var(--H);
  overflow: hidden;
  container-type: size;
  background: var(--mag-papier);
  color: var(--mag-encre);
}
.mag-page[hidden] { display: none; }

.mag a, .mag p, .mag .mag-titre { color: inherit; }   /* la couleur de la page (charte-ma2m.css force l'encre sur h1-h3) */
.mag a:focus-visible { outline: 3px solid var(--mag-rouge); outline-offset: 3px; }
.mag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mag-cadre { overflow: hidden; background: var(--mag-attente); }
.mag-cadre img { transition: transform 0.6s ease; }
.mag a:hover .mag-cadre img { transform: scale(1.03); }

/* Lettres : titres Big Shoulders Display en capitales, texte Work Sans */
.mag-titre {
  font-family: var(--mag-titre);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0;
  margin: 0;
}
.mag-rubrique {
  display: block;
  font-size: max(12px, 2.4cqmin);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mag-rouge);
}
.mag-texte { font-size: max(14px, 2.9cqmin); line-height: 1.55; margin: 0; }
.mag-folio {
  position: absolute; left: 6cqmin; right: 6cqmin; bottom: 3.4cqmin;
  display: flex; justify-content: space-between;
  font-size: max(12px, 2.3cqmin); letter-spacing: 0.06em; color: var(--mag-gris);
}
.mag-page.pair .mag-folio { flex-direction: row-reverse; }
.mag-lien-suite {
  display: inline-block; margin-top: 3cqmin;
  font-size: max(14px, 2.8cqmin); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--mag-rouge);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}

/* ---- 1 · Couverture ---- */
.p-couv { color: var(--mag-sur-photo); }
.p-couv .mag-cadre { position: absolute; inset: 0; }
.p-couv .mag-cadre img { position: absolute; inset: 0; object-position: 50% 25%; opacity: 0; transition: opacity 1.4s ease; }
/* défilement des photos de couverture (js/accueil.js) : deux images qui se relaient en fondu */
.p-couv .mag-cadre img.visible { opacity: 1; }
.p-couv::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* voile sombre sous les textes (en haut : date ; en bas : titres de couverture) — lisibles même
     sur une photo très claire (test-lisibilite-photos.js) */
  background: linear-gradient(to bottom, var(--mag-voile-fort) 0%, var(--mag-voile-fort) 26%, var(--mag-voile-texte) 33%, var(--mag-voile-nul) 42%, var(--mag-voile-nul) 46%, var(--mag-voile-texte) 60%, var(--mag-voile-fort) 76%, var(--mag-voile-plein) 100%);
}
.p-couv > *:not(.mag-cadre) { position: absolute; z-index: 2; }
.p-couv .tete { top: 3cqmin; left: 5cqmin; right: 5cqmin; text-align: center; }
.p-couv .mag-logo { font-size: 31cqmin; line-height: 0.82; font-weight: 800; color: var(--mag-rouge); }
.p-couv .numero {
  display: flex; justify-content: space-between; margin-top: 1.6cqmin;
  font-size: max(12px, 2.4cqmin); letter-spacing: 0.08em;
}
.p-couv .lignes { left: 5cqmin; right: 38cqmin; bottom: 7cqmin; }
.p-couv .lignes a { display: block; text-decoration: none; }
.p-couv .lignes .une {
  font-family: var(--mag-titre); font-weight: 800; text-transform: uppercase;
  font-size: max(30px, 7.8cqmin); line-height: 0.98;
}
.p-couv .lignes .ligne {
  margin-top: 2.6cqmin; font-size: max(14px, 3cqmin); line-height: 1.35;
  padding-left: 6cqmin; position: relative;
}
.p-couv .lignes .ligne::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 4cqmin; height: 2px; background: var(--mag-rouge);
}
.p-couv .modele { right: 5cqmin; bottom: 7cqmin; max-width: 32cqmin; text-align: right; font-size: max(12px, 2.5cqmin); text-decoration: none; }
@media (max-width: 700px) {
  /* au-dessus du bouton WhatsApp flottant (50 px, à 1 rem du bas) : il recouvrait le titre
     anglais, plus court (21/10/2026, test-lisibilite-photos.js) ; 140 px : la couverture commence
     sous le bandeau défilant, son bas est donc un peu sous le bord de l’écran */
  .p-couv .lignes { right: 5cqmin; bottom: max(7cqmin, 140px); }
  .p-couv .modele { top: 46cqmin; bottom: auto; }
}
.p-couv .modele strong {
  display: block; font-family: var(--mag-titre); font-weight: 700; text-transform: uppercase;
  font-size: max(20px, 4.6cqmin); line-height: 1; margin-top: 0.8cqmin;
}

/* ---- 2 · Sommaire ---- */
.p-sommaire { padding: 8cqmin 6cqmin; }
.p-sommaire .mag-titre { font-size: max(44px, 13cqmin); margin-top: 1cqmin; }
/* Photo du sommaire : un tirage de galerie (marge claire, ombre douce, légèrement incliné, nom du
   mannequin en légende), posé à droite ; les lignes du sommaire s'arrêtent avant lui
   (20/10/2026 : collée dans le coin, elle faisait « photo d'identité ») */
.p-sommaire .vignette { float: right; width: 30cqmin; margin: 0 0 4cqmin 6cqmin; padding: 1.8cqmin 1.8cqmin 0; background: var(--mag-carte); box-shadow: var(--mag-ombre-tirage); transform: rotate(2deg); }
.p-sommaire .vignette .mag-cadre { aspect-ratio: 3 / 4; }
.p-sommaire .vignette figcaption { padding: 1.6cqmin 0 1.8cqmin; text-align: center; font-size: max(10px, 2.1cqmin); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mag-gris); line-height: 1.3; }
.p-sommaire .mag-titre, .p-sommaire li { display: flow-root; }   /* à côté du tirage, sans passer dessous */
.p-sommaire ol { list-style: none; margin: 8cqmin 0 0; padding: 0; }
.p-sommaire li { border-top: 2px solid var(--mag-encre); }
.p-sommaire li a { display: grid; grid-template-columns: 10cqmin 1fr; gap: 2cqmin; padding: 2.4cqmin 0; text-decoration: none; }
.p-sommaire li b { font-family: var(--mag-titre); font-weight: 800; font-size: max(24px, 6cqmin); line-height: 1; color: var(--mag-rouge); }
.p-sommaire li strong { display: block; font-size: max(15px, 3.6cqmin); font-weight: 600; }
.p-sommaire li span { display: block; margin-top: 0.6cqmin; font-size: max(12px, 2.8cqmin); color: var(--mag-gris); line-height: 1.35; }
.p-sommaire li a:hover strong { color: var(--mag-rouge); }
/* sommaire long (pages agenda, film, partenaires, Instagram remplies) : plus serré, sans sous-titres */
.p-sommaire ol:has(li:nth-child(8)) { margin-top: 5cqmin; }
.p-sommaire ol:has(li:nth-child(8)) li a { padding: 1.6cqmin 0; }
.p-sommaire ol:has(li:nth-child(8)) li span { display: none; }
@media (max-width: 700px) {
  .p-sommaire ol { margin-top: 5cqmin; }
  .p-sommaire li a { padding: 1.8cqmin 0; }
  .p-sommaire ol:has(li:nth-child(7)) li span { display: none; }
}

/* ---- 3 · Édito (le mot de Maître Akesse quand il est rempli dans l'Administration) ---- */
.p-edito { display: flex; flex-direction: column; }
.p-edito .mag-cadre { flex: 0 0 46%; }
.p-edito .mag-cadre img { object-position: 50% 20%; }
.p-edito .texte { flex: 1; min-height: 0; padding: 5cqmin 6cqmin 10cqmin; display: grid; grid-template-columns: 1fr 1.15fr; gap: 5cqmin; overflow: hidden; }
.p-edito .mag-titre { font-size: max(26px, 6.6cqmin); margin-top: 1.4cqmin; }
.p-edito .signature { margin-top: 3cqmin; font-size: max(13px, 2.7cqmin); color: var(--mag-gris); }
.p-edito .signature strong { display: block; color: var(--mag-encre); font-weight: 600; }
@media (max-width: 700px) {
  .p-edito .mag-cadre { flex-basis: 34%; }
  .p-edito .texte { display: flex; flex-direction: column; gap: 3cqmin; }
  .p-edito .texte > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4cqmin; }
  .p-edito .texte > div .mag-titre { flex-basis: 100%; }
  .p-edito .signature, .p-edito .texte > div .mag-lien-suite { margin-top: 2cqmin; }
  .p-edito .mag-texte { flex: 1; min-height: 0; }
  .p-edito .mag-titre { font-size: max(24px, 7cqmin); }
}
.p-edito .mag-texte { overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 3em), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 3em), transparent); }
.p-edito .mag-texte::first-letter {
  font-family: var(--mag-titre); font-weight: 800; float: left;
  font-size: 3.4em; line-height: 0.8; padding: 0.08em 0.12em 0 0; color: var(--mag-rouge);
}

/* ---- 4 et 5 · Les visages ---- */
.p-visages { padding: 7cqmin 6cqmin 10cqmin; display: flex; flex-direction: column; }
.p-visages header { display: flex; justify-content: space-between; align-items: end; gap: 3cqmin; margin-bottom: 4cqmin; }
.p-visages .mag-titre { font-size: max(40px, 12cqmin); }
.p-visages header .mag-lien-suite { margin: 0 0 1cqmin; white-space: nowrap; }
.p-visages .grille { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 2.4cqmin 2cqmin; }
.p-visages .grille a { display: flex; flex-direction: column; min-height: 0; text-decoration: none; }
.p-visages .grille .mag-cadre { flex: 1; min-height: 0; }
.p-visages .grille .mag-cadre img { object-position: 50% 20%; }
.p-visages .grille span { margin-top: 1.2cqmin; font-size: max(12px, 2.6cqmin); font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-visages.hommes .grille { grid-template-columns: 1.4fr 1fr; }
.p-visages.hommes .grille a:first-child { grid-row: span 2; }
.p-visages.hommes .grille:has(> a:only-child) { grid-template-columns: 1fr; }
@media (max-width: 700px) {
  .p-visages .grille { grid-template-columns: repeat(2, 1fr); }
  .p-visages .grille a:nth-child(n + 5) { display: none; }
  .p-visages.hommes .grille a { display: flex; }
}

/* ---- 6 · À la une (le « Mannequin à la une » choisi dans l'Administration) ---- */
.p-une { color: var(--mag-sur-photo); }
.p-une > a { position: absolute; inset: 0; text-decoration: none; }
.p-une .mag-cadre { position: absolute; inset: 0; }
.p-une .mag-cadre img { object-position: 50% 20%; }
.p-une > a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--mag-voile-plein) 0%, var(--mag-voile-fort) 30%, var(--mag-voile-texte) 44%, var(--mag-voile-nul) 62%); }
.p-une .bas-une { position: absolute; z-index: 2; left: 6cqmin; right: 6cqmin; bottom: 9cqmin; }
.p-une .mag-rubrique { color: var(--mag-sur-photo); }
.p-une .mag-titre { font-size: max(40px, 13cqmin); margin-top: 1.5cqmin; overflow-wrap: anywhere; }
.p-une .mag-texte { margin-top: 2cqmin; max-width: 64cqmin; }
.p-une .mag-folio { color: var(--mag-sur-photo); z-index: 2; }

/* ---- 7 · L'agence ---- */
.p-agence { padding: 8cqmin 6cqmin 10cqmin; display: flex; flex-direction: column; }
.p-agence .mag-titre { font-size: max(36px, 11cqmin); margin-top: 2cqmin; }
.p-agence ul { list-style: none; margin: 6cqmin 0 0; padding: 0; }
.p-agence li { display: grid; grid-template-columns: 1fr 1.3fr; gap: 4cqmin; padding: 3cqmin 0; border-top: 2px solid var(--mag-encre); }
.p-agence li strong { font-family: var(--mag-titre); font-weight: 800; text-transform: uppercase; font-size: max(20px, 5cqmin); line-height: 1; }
.p-agence li span { font-size: max(13px, 2.9cqmin); line-height: 1.5; color: var(--mag-gris); }
.p-agence .mag-cadre { margin-top: 5cqmin; flex: 1 1 30cqmin; min-height: 18cqmin; }
/* en hauteur, la photo prend toute la place libre sous le texte et reste calée vers le haut, sur le
   visage (20/10/2026 : bandeau bas et centré, on ne voyait que le buste) */
.p-agence .mag-cadre img, .p-dos .mag-cadre img { object-position: 50% 12%; }

/* ---- Pages qui n'apparaissent que si l'Administration les remplit ---- */
/* À venir (agenda : css/agenda.css, rendu de js/agenda.js, resserré pour la page) */
.p-agenda { padding: 8cqmin 6cqmin 10cqmin; display: flex; flex-direction: column; }
.p-agenda .mag-titre { font-size: max(40px, 12cqmin); margin: 1cqmin 0 5cqmin; }
.p-agenda .agenda-liste-publique { flex: 1; min-height: 0; overflow: hidden; display: grid; gap: 3cqmin; align-content: start; }

/* Le film */
.p-film { background: var(--mag-encre); color: var(--mag-sur-photo); }
.p-film video, .p-film .video-accueil-flou { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-film.video-verticale video { object-fit: contain; }
.p-film .video-accueil-flou { filter: blur(24px); transform: scale(1.2); }
.p-film .tete { position: absolute; z-index: 2; left: 6cqmin; top: 6cqmin; }
.p-film .mag-rubrique { color: var(--mag-sur-photo); }
.p-film .mag-titre { font-size: max(40px, 12cqmin); margin-top: 1cqmin; }
.p-film .video-accueil-son { position: absolute; z-index: 2; left: 50%; bottom: 8cqmin; }   /* bouton rouge commun (bouton-ma2m.css) */
/* centré comme dans css/style.css (translateX(-50%)) : posé à gauche, il sortait de moitié de
   l'écran du téléphone (« ctiver le son », visite Android du 20/10/2026) */
.p-film .mag-folio { color: var(--mag-sur-photo); z-index: 2; }

/* Ils nous font confiance */
.p-partenaires { padding: 8cqmin 6cqmin 10cqmin; display: flex; flex-direction: column; }
.p-partenaires .mag-titre { font-size: max(36px, 11cqmin); margin: 1cqmin 0 6cqmin; }
.p-partenaires .logos { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, 22cqmin); gap: 3cqmin; align-content: start; }
.p-partenaires .logos a { display: flex; align-items: center; justify-content: center; padding: 3cqmin; background: var(--mag-sur-photo); }
.p-partenaires .logos img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Instagram */
.p-instagram { padding: 8cqmin 6cqmin 10cqmin; display: flex; flex-direction: column; }
.p-instagram .mag-titre { font-size: max(36px, 11cqmin); margin: 1cqmin 0 5cqmin; }
.p-instagram .grille { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 1.6cqmin; }
.p-instagram .grille a { display: block; min-height: 0; overflow: hidden; background: var(--mag-attente); }

/* ---- Dos de couverture rouge ---- */
.p-dos { background: var(--mag-rouge); color: var(--sur-rouge); padding: 9cqmin 7cqmin; display: flex; flex-direction: column; }
.p-dos .mag-rubrique { color: var(--sur-rouge); }
.p-dos .mag-titre { font-size: max(40px, 13cqmin); margin-top: 3cqmin; }
.p-dos .mag-texte { margin-top: 4cqmin; max-width: 72cqmin; }
.p-dos .bouton {
  display: inline-flex; align-items: center; align-self: flex-start;
  min-height: var(--hauteur-tactile); margin-top: 5cqmin; padding: 0 5cqmin;
  background: var(--sur-rouge); color: var(--mag-rouge);
  font-size: max(15px, 3cqmin); font-weight: 600; text-decoration: none;
}
.p-dos .bouton:focus-visible { outline-color: var(--sur-rouge); }
.p-dos .mag-cadre { margin-top: 5cqmin; flex: 1 1 44cqmin; min-height: 20cqmin; }
.p-dos .contact { margin-top: 3cqmin; font-size: max(12px, 2.6cqmin); }
.p-dos .contact a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Écran en largeur (ordinateur, tablette couchée) : « doubles pages » de magazine ----
   La page prend tout l'écran ; les pages pensées en hauteur passent sur deux colonnes : photo d'un
   côté, texte de l'autre, et le sommaire sur deux colonnes. */
@container (orientation: landscape) {
  .p-sommaire ol { columns: 2; column-gap: 7cqmin; margin-right: 34cqmin; }
  .p-sommaire li { break-inside: avoid; }
  .p-sommaire .vignette { float: none; position: absolute; right: 6cqmin; top: 8cqmin; width: 28cqmin; margin: 0; }

  .p-edito .texte { padding: 7cqmin 6cqmin 12cqmin; align-content: center; }
  .p-agence .mag-cadre, .p-dos .mag-cadre { grid-column: 2; grid-row: 1 / span 6; height: calc(var(--H) - 20cqmin); min-height: 0; margin: 0; }

  .p-visages .grille { grid-template-columns: repeat(6, 1fr); }
  .p-visages.hommes .grille { grid-template-columns: 1.4fr 1fr 1fr; }
  .p-visages.hommes .grille a:first-child { grid-row: span 1; }

  .p-partenaires .logos { grid-template-columns: repeat(5, 1fr); grid-auto-rows: minmax(0, 18cqmin); }
  .p-instagram .grille { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; grid-auto-rows: 0; }
  .p-instagram .grille a:nth-child(n + 13) { display: none; }
}

/* (une page ne peut pas se mettre en page selon sa propre forme : pour la page elle-même, on suit la
   forme de l'écran — la page prend tout l'écran, c'est la même chose) */
@media (orientation: landscape) {
  .p-edito { flex-direction: row; }
  .p-edito .mag-cadre { flex: 0 0 46%; }
  .p-agence, .p-dos { display: grid; grid-template-columns: 1.1fr 0.9fr; column-gap: 7vmin; align-content: start; }
  .p-agence > *, .p-dos > *:not(.mag-cadre) { grid-column: 1; }
  .p-dos .bouton { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .mag-cadre img, .p-couv .mag-cadre img { transition: none; }
}