/* ==========================================================================
   Nineteen Fifty Stars — pages intérieures (refonte)
   Dépend de socle.css, composants.css et pages.css : on n'y redéfinit rien,
   on n'y ajoute que ce qui n'existe pas sur l'accueil (en-tête de page, menu
   déroulant, cartes de cas, fiches de cas, bande d'appel).
   ========================================================================== */

/* --- Navigation : menu déroulant « Prestations » et menu mobile ------------- */
.menu__groupe { position: relative; }

.menu__bouton {
  font: inherit;
  font-size: var(--t-petit);
  color: var(--texte-doux);
  background: none;
  border: 0;
  padding: var(--e-1) 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.menu__bouton::after {
  content: "";
  width: 0.42em; height: 0.42em;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform var(--duree-courte) var(--sortie);
}
.menu__bouton[aria-expanded="true"]::after { transform: translateY(0.05em) rotate(-135deg); }
.menu__bouton:hover, .menu__bouton[aria-expanded="true"], .menu__bouton[aria-current] { color: var(--blanc-neon); }

.menu__sous {
  position: absolute;
  top: calc(100% + var(--e-3));
  left: calc(var(--e-4) * -1);
  min-width: 15rem;
  margin: 0;
  padding: var(--e-2);
  list-style: none;
  background: color-mix(in srgb, var(--nuit-2) 96%, transparent);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.45), 0 0 0 1px color-mix(in srgb, var(--bleu-lueur) 12%, transparent);
  backdrop-filter: blur(14px);
}
.menu__sous[hidden] { display: none; }
.menu__sous a {
  display: block;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--rayon-sm);
  white-space: nowrap;
}
.menu__sous a::before, .menu__sous a::after { display: none; }
.menu__sous a:hover, .menu__sous a:focus-visible { background: var(--voile); }
.entete__nav a[aria-current="page"] { color: var(--blanc-neon); }

.menu__burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  margin-left: var(--e-2);
  padding: 0;
  background: transparent;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-sm);
  color: var(--blanc-neon);
  cursor: pointer;
  place-items: center;
}
.menu__barres, .menu__barres::before, .menu__barres::after {
  display: block;
  width: 1.15rem; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--duree-courte) var(--sortie), opacity var(--duree-courte);
}
.menu__barres { position: relative; }
.menu__barres::before, .menu__barres::after { content: ""; position: absolute; left: 0; }
.menu__barres::before { top: -6px; }
.menu__barres::after  { top: 6px; }
.menu__burger[aria-expanded="true"] .menu__barres { background: transparent; }
.menu__burger[aria-expanded="true"] .menu__barres::before { transform: translateY(6px) rotate(45deg); }
.menu__burger[aria-expanded="true"] .menu__barres::after  { transform: translateY(-6px) rotate(-45deg); }

.menu-mobile {
  position: fixed;
  inset: 0;
  top: 0;
  z-index: 90;
  padding: 6rem var(--gouttiere) var(--e-7);
  background: color-mix(in srgb, var(--nuit) 97%, transparent);
  backdrop-filter: blur(16px);
  overflow-y: auto;
}
.menu-mobile[hidden] { display: none; }
.menu-mobile ul { list-style: none; margin: 0 auto; padding: 0; max-width: 32rem; display: grid; gap: var(--e-1); }
.menu-mobile li a:not(.bouton) {
  display: block;
  padding: var(--e-4) 0;
  font-family: var(--titre);
  font-size: var(--t-moyen);
  color: var(--blanc-neon);
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
}
.menu-mobile li:last-child { margin-top: var(--e-5); }
.menu-mobile .bouton { width: 100%; justify-content: center; }
html.menu-ouvert { overflow: hidden; }
html.menu-ouvert .entete { z-index: 100; }

@media (max-width: 899px) {
  .menu__burger { display: inline-grid; }
}
@media (min-width: 900px) {
  .menu-mobile { display: none !important; }
}

/* --- En-tête de page ---------------------------------------------------------- */
/* Le haut de chaque page intérieure porte un fond flou (deux halos, bleu et
   rose), sous un voile dense : il donne de la profondeur sans disputer le
   titre. Choisi par Guillaume le 05/10/2026 parmi trois essais ; l'image
   dormait dans 3-Identite visuelle/Logo/Fond sans servir nulle part. */
.page-tete {
  position: relative;
  padding-block: calc(var(--e-9) + 1rem) var(--e-8);
  background-image:
    radial-gradient(ellipse 60% 70% at 85% 0%, color-mix(in srgb, var(--bleu-lueur) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 60% at 8% 100%, color-mix(in srgb, var(--rose-lueur) 12%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--nuit) 55%, transparent), color-mix(in srgb, var(--nuit) 86%, transparent)),
    url("../img/fond-flou.webp");
  background-color: var(--nuit);
  background-position: center, center, center, center bottom;
  background-size: auto, auto, auto, cover;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--trait);
}
.page-tete__titre {
  font-size: clamp(2rem, 1.45rem + 2.7vw, 3.5rem);
  line-height: 1.1;
  max-width: 24ch;
  margin-block: var(--e-3) var(--e-5);
}
.page-tete__intro {
  font-size: var(--t-moyen);
  color: var(--texte-doux);
  max-width: var(--largeur-texte);
  margin: 0;
}
.page-tete__actions { display: flex; flex-wrap: wrap; gap: var(--e-4); margin-top: var(--e-6); }

.fil { margin-bottom: var(--e-5); font-size: var(--t-petit); }
.fil ol { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; margin: 0; padding: 0; }
.fil li { margin: 0; color: var(--texte-faible); }
.fil li + li::before { content: "›"; margin-right: var(--e-2); color: var(--texte-faible); }
.fil a { color: var(--texte-doux); text-decoration: none; }
.fil a:hover, .fil a:focus-visible { color: var(--blanc-neon); text-decoration: underline; }
.fil [aria-current] { color: var(--texte); }

/* --- Sections de texte -------------------------------------------------------- */
.section__intro { font-size: var(--t-moyen); max-width: var(--largeur-texte); }
.prose .contenant > * { max-width: var(--largeur-texte); }
.prose h2 { margin-bottom: var(--e-5); }
.prose p + p { margin-top: var(--e-4); }
.prose__liste, .apropos__faits { list-style: none; margin: 0 0 var(--e-5); padding: 0; display: grid; gap: var(--e-3); }
.prose__liste li, .apropos__faits li { position: relative; padding-left: 1.7rem; margin: 0; }
.prose__liste li::before, .apropos__faits li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 6px; height: 10px;
  border: solid var(--bleu);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}
.tarifs__grille--une { grid-template-columns: 1fr; max-width: 46rem; }
.tarifs__grille--deux { grid-template-columns: 1fr; }
/* Trois cartes (page Affiches et flyers) : sur deux colonnes, la troisième prend toute la largeur au lieu de laisser un trou ;
   dès 1200 px les trois tiennent sur une rangée. */
@media (min-width: 620px) and (max-width: 1199px) { .tarifs__grille--trois > .offre:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .tarifs__grille--deux { grid-template-columns: 1fr 1fr; }
}
.tarifs__exemple { max-width: var(--largeur-texte); }
.tarifs__exemple + .tarifs__exemple { margin-top: var(--e-4); }
.realisations__note { margin-top: var(--e-6); font-size: var(--t-petit); color: var(--texte-faible); max-width: none; }
.offre .etape__lien { margin-top: var(--e-4); align-self: flex-start; }
.section__action { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; }

/* --- Cartes de cas ------------------------------------------------------------- */
/* Une section qui ne porte qu'une image : le souffle d'une vraie section
   (110 px en haut et en bas) y creusait un trou au-dessus du visuel. */
.section--visuel { padding-block: var(--e-6); }

.cas-cartes { display: grid; gap: var(--e-5); grid-template-columns: 1fr; margin-top: var(--e-6); }
/* Grille de six, pour que les deux formats cohabitent : une carte au format
   téléphone prend deux colonnes, une carte au format écran large en prend
   trois. Trois téléphones remplissent une ligne, deux écrans larges aussi. */
@media (min-width: 700px) {
  .cas-cartes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cas-carte { grid-column: span 2; }
  .cas-carte--large { grid-column: span 3; }
  /* seule de son format, elle prend la ligne entière plutôt que d'en laisser
     la moitié vide ; son visuel est alors bridé en hauteur. */
  .cas-carte--seule { grid-column: span 6; }
  .cas-carte--seule .appareil--large { max-width: 760px; margin-inline: auto; }
}
.cas-carte { display: flex; flex-direction: column; gap: var(--e-3); }
/* .appareil est en position:relative (composants.css) : sans ceci, le halo de sa
   reflet (.appareil::after, sous le cadre) passe devant le texte qui suit, quel que
   soit l'ordre dans le HTML — un élément positionné peint toujours au-dessus d'un
   élément statique dans le même contexte d'empilement. */
.cas-carte h3, .cas-carte p, .cas-carte__liens { position: relative; z-index: 1; }
.cas-carte h3 { font-size: var(--t-moyen); margin: 0; }
.cas-carte p { margin: 0; color: var(--texte-doux); }
.cas-carte__liens { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); margin-top: auto; padding-top: var(--e-3); }
.cas-carte .appareil { margin-bottom: var(--e-2); }

/* --- Fiche d'un cas ------------------------------------------------------------ */
.cas-fiche__interieur { display: grid; gap: var(--e-8); }
@media (min-width: 900px) { .cas-fiche__interieur { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.cas-fiche__texte h2 { font-size: var(--t-h3); margin: var(--e-7) 0 var(--e-3); }
.cas-fiche__texte h2:first-child { margin-top: 0; }
.cas-fiche__texte p { max-width: var(--largeur-texte); }
.cas-fiche__cote { display: grid; gap: var(--e-6); align-content: start; }
@media (min-width: 900px) { .cas-fiche__cote { position: sticky; top: 6rem; } }
.cas-fiche__duo { display: flex; gap: var(--e-4); justify-content: center; }
.cas-fiche__duo .appareil { flex: 1 1 0; max-width: 220px; margin-inline: 0; }
.cas-fiche__liens { display: grid; gap: var(--e-3); margin: 0; }
.cas-fiche__liens a { color: var(--bleu); }

.faits { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--trait); }
.faits__ligne { display: grid; gap: var(--e-1); padding: var(--e-4) 0; border-bottom: 1px solid var(--trait); }
.faits dt { font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-faible); }
.faits dd { margin: 0; color: var(--blanc-neon); }

/* --- Bandes d'appel -------------------------------------------------------------- */
.cta-bande {
  border-top: 1px solid var(--trait);
  background: linear-gradient(120deg, color-mix(in srgb, var(--bleu-lueur) 10%, var(--nuit-2)), var(--nuit-2) 60%);
}
.cta-bande__interieur { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 800px) { .cta-bande__interieur { grid-template-columns: 1fr auto; } }
.cta-bande h2 { font-size: var(--t-h3); margin-bottom: var(--e-3); }
.cta-bande p { margin: 0; color: var(--texte-doux); max-width: var(--largeur-texte); }
.cta-bande__actions { display: flex; flex-wrap: wrap; gap: var(--e-4); }

.audit-bloc { border-top: 1px solid var(--trait); }
.audit-bloc__interieur {
  display: grid; gap: var(--e-6); align-items: center;
  padding: var(--e-7);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon);
  background: radial-gradient(ellipse 60% 100% at 100% 0%, color-mix(in srgb, var(--rose-lueur) 12%, transparent), transparent 70%), var(--nuit-2);
}
@media (min-width: 800px) { .audit-bloc__interieur { grid-template-columns: 1fr auto; } }
.audit-bloc h2 { margin-bottom: var(--e-3); }
.audit-bloc p { max-width: var(--largeur-texte); }

.contact__interieur--seul { grid-template-columns: 1fr; max-width: 46rem; }
.legal { padding-top: calc(var(--e-9) + 1rem); }

/* --- Marges ajoutées après relecture visuelle ---------------------------------- */
.chemin__etapes + .chemin__intro { margin-top: var(--e-7); }
.tarifs__grille + .tarifs__exemple { margin-top: var(--e-7); }
.section__action { margin-top: var(--e-6); }
.realisations__note { margin-top: var(--e-6); }
.contact__interieur--intro { grid-template-columns: 1fr; }
.contact__interieur--intro .contact__intro { max-width: 46rem; }

/* Le sous-menu est un <ul> dans .entete__nav : il ne doit pas hériter de la rangée horizontale. */
.entete__nav .menu__sous { display: grid; gap: 2px; }
.entete__nav .menu__sous[hidden] { display: none; }

/* Sous un titre sans introduction, la grille ne colle pas au titre. */
.section h2 + .tarifs__grille, .section h2 + .cas-cartes, .section h2 + .methode__liste { margin-top: var(--e-6); }

/* Safari donne à une image sa taille naturelle comme largeur minimale d'une colonne « 1fr » :
   les colonnes doivent pouvoir rétrécir (minmax(0, …)), sinon la page déborde en paysage. */
@media (min-width: 700px) {
  .cas-cartes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cas-carte { grid-column: span 2; }
  .cas-carte--large { grid-column: span 3; }
  /* seule de son format, elle prend la ligne entière plutôt que d'en laisser
     la moitié vide ; son visuel est alors bridé en hauteur. */
  .cas-carte--seule { grid-column: span 6; }
  .cas-carte--seule .appareil--large { max-width: 760px; margin-inline: auto; }
}
@media (min-width: 900px) { .cas-fiche__interieur { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.cas-carte, .cas-fiche__texte, .cas-fiche__cote { min-width: 0; }
.cas-carte__appareil img, .cas-carte__appareil video, .cas-fiche__cote img { max-width: 100%; }

/* --- Sécurité : deux blocs côte à côte --------------------------------------------- */
.securite { display: grid; gap: var(--e-5); grid-template-columns: 1fr; margin-top: var(--e-6); }
@media (min-width: 800px) { .securite { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.securite__bloc h3 { font-size: var(--t-moyen); margin-bottom: var(--e-4); }