/* Accueil et pages d'usage : les sections du milieu. Les archives du téléphone (standardistes, fiches, casques)
   tirées en bichromie, comme des affiches imprimées en deux encres : les blancs prennent la couleur de la page,
   les noirs un indigo sombre. Les vraies captures de BetterCall à côté. Chargée après accueil.css et ame.css. */

/* Les archives en bichromie : la photo en gris « multipliée » par la teinte, puis les noirs éclaircis en indigo. */
.exposee { margin: 0; position: relative; isolation: isolate; display: block; background: var(--teinte); overflow: hidden; }
.exposee::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--bc-ombre-photo); mix-blend-mode: lighten; pointer-events: none; }
.exposee img, .exposee video { display: block; width: 100%; height: auto; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.1) brightness(1.06); }
.exposee figcaption, .film figcaption { margin-top: 12px; font-size: var(--step-small); color: var(--bc-encre-douce); }
.film { margin: 0; }

/* Les faits, en grand chiffre ou en mot court, avec une ligne d'explication. */
.faits { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px var(--gouttiere); }
.faits dt { font-family: var(--police-titre); font-weight: 400; font-size: var(--step-lead); line-height: 1.1; letter-spacing: -0.015em; }
.faits dd { margin: 8px 0 0; }
.faits-colonne { grid-template-columns: minmax(0, 1fr); gap: 32px; }

/* ---------- Accueil : la fenêtre de l'app, juste après le premier écran ---------- */
.en-vrai { padding-top: 160px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: center; }
.en-vrai-texte { grid-column: 1 / 7; display: grid; gap: 28px; }
.en-vrai-texte p { margin: 0; font-size: var(--step-lead); line-height: 1.4; max-width: 34ch; }
.en-vrai-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.en-vrai-liens a { font-weight: 500; }
.en-vrai-capture { grid-column: 7 / 13; }

/* ---------- La vraie app : une capture de vraie session, posée sur un pas de ton ---------- */
.capture-app { margin: 0; }
.capture-app img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--bc-papier-3); }
.en-vrai-capture, .vitrine-capture { background: var(--bc-papier-2); border-radius: 24px; padding: clamp(28px, 4.5vw, 72px); }
.en-vrai-capture img, .vitrine-capture img { max-width: 400px; margin: 0 auto; }
.vitrine { padding-top: 160px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: center; }
.vitrine-capture { grid-column: 1 / 7; }
.vitrine-texte { grid-column: 7 / 13; display: grid; gap: 40px; }
.vitrine-inverse .vitrine-texte { grid-column: 1 / 6; grid-row: 1; }
.vitrine-inverse .vitrine-capture { grid-column: 7 / 13; grid-row: 1; }

/* ---------- Les situations vécues : la phrase telle qu'on la vit, sa conséquence à côté ---------- */
.douleurs { padding-top: 160px; }
.douleurs-liste { list-style: none; margin: 64px 0 0; padding: 0; display: grid; gap: 64px; }
.douleurs-liste li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: baseline; }
.douleurs-liste .douleur { grid-column: 1 / 7; margin: 0; font-family: var(--police-titre); font-weight: 400; font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.015em; }
.douleurs-liste .douleur + p { grid-column: 8 / 13; margin: 0; max-width: 44ch; }
/* Chaque situation dans une bulle grise, comme une phrase entendue ; un peu de travers, une sur deux dans l'autre sens. */
.douleurs-liste li { align-items: center; }
.douleurs-liste .douleur { justify-self: start; background: var(--bc-papier-2); padding: 18px 26px 20px; border-radius: 28px 28px 28px 6px; rotate: var(--penche, 0deg); }
.douleurs-liste li:nth-child(odd) .douleur { --penche: -1deg; }
.douleurs-liste li:nth-child(even) .douleur { --penche: 0.8deg; }

/* ---------- Dans tous les cas : les opératrices en fondu enchaîné, une phrase et quatre faits ---------- */
.intro-piece { padding-top: 160px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: start; }
.fondu { grid-column: 1 / 6; position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.fondu img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1600ms var(--ease-in-out); }
.fondu img.actif { opacity: 1; }
.intro-texte { grid-column: 7 / 13; display: grid; gap: 48px; align-content: start; padding-top: 6vh; }
.intro-phrase { margin: 0; font-size: var(--step-lead); line-height: 1.35; max-width: 30ch; }

/* ---------- Le manifeste : le film d'archive à gauche, le texte à côté ---------- */
.archive { padding-top: 160px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: center; }
.archive .film { grid-column: 1 / 8; }
.archive .manifeste { grid-column: 9 / 13; }
.archive .manifeste h2 { font-size: var(--step-head); }

/* ---------- La question du jour : une photo d'archive, la carte à côté ---------- */
.question-jour { padding-top: 160px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: center; }
.qj-photo { grid-column: 1 / 6; }
.qj-photo img { aspect-ratio: 5 / 4; object-fit: cover; }
.question-jour .qj-carte { grid-column: 6 / 13; }

/* ---------- Pourquoi BetterCall : le texte en grand, un casque d'opératrice en lettrine ---------- */
.createur { padding-top: 160px; display: flex; flex-direction: column; }
.createur-texte { max-width: 1120px; }
.createur-texte h2 { margin-bottom: 40px; }
.createur-texte p { font-size: var(--step-lead); line-height: 1.4; margin: 0 0 1.1em; max-width: 44ch; }
.createur-texte .createur-suite { color: var(--bc-encre-douce); }
.createur-texte .signature { color: var(--bc-encre); }
.createur .lettrine { float: left; width: 3.4em; height: 3.4em; margin: 0.15em 0.5em 0 0; border-radius: 50%; }
.createur .lettrine img { height: 100%; object-fit: cover; }
.createur-faits { order: 2; list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--step-small); color: var(--bc-encre-douce); }
.createur-faits a { color: var(--bc-encre); }

/* ---------- Questions : une bulle par question, la réponse se déplie ; le + tourne en × ---------- */
.faq { padding-top: 160px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: start; }
.faq > h2 { grid-column: 1 / 5; position: sticky; top: 120px; }
.faq-lignes { grid-column: 5 / 13; display: grid; gap: 10px; }
.faq-ligne { display: block; border-radius: 22px; background: var(--bc-papier-2); transition: background-color 200ms ease; }
.faq-ligne[open] { background: var(--teinte-pale); }
.faq-ligne summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px 22px 28px; border-radius: 22px; }
.faq-ligne summary::-webkit-details-marker { display: none; }
.faq-ligne summary::after { content: ""; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--bc-encre); background: var(--bc-blanc)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1C19' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: rotate 380ms var(--ressort), background-color 160ms ease; }
.faq-ligne[open] summary::after { rotate: 45deg; background-color: var(--teinte); }
@media (hover: hover) and (pointer: fine) { .faq-ligne:not([open]) summary:hover { background: var(--bc-papier-3); } }
.faq-ligne h3 { margin: 0; font-family: var(--police-titre); font-weight: 400; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem); line-height: 1.2; letter-spacing: -0.012em; }
.faq-ligne p { margin: 0; padding: 0 28px 26px; max-width: 64ch; }
@media (prefers-reduced-motion: no-preference) { .faq-ligne[open] p { animation: arrivee 360ms var(--ease-out); } }

/* ---------- La fin : la question, le choix, sur l'ambre pâle de la bulle du haut ---------- */
.fin { margin-top: 160px; padding-top: 144px; padding-bottom: 144px; background: var(--teinte); display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.fin h2 { font-size: var(--step-display); line-height: 1; letter-spacing: -0.03em; }
.fin-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; }
.fin-actions > span { color: var(--bc-encre-douce); }
.fin-actions .bouton.second, .fin-actions .bouton + span + .bouton { background: var(--bc-blanc); color: var(--bc-encre); }
.fin-note { margin: -12px 0 0; color: var(--bc-encre-douce); }
/* Pas de marge du pied sous la fin : les deux aplats se suivent. */
main:has(> .fin:last-of-type) + .pied { margin-top: 0; }

/* ---------- Crédits des archives : une ligne, la liste à déplier ---------- */
details.credits { padding: 28px var(--bord) 32px; font-size: var(--step-small); color: var(--bc-encre-douce); }
details.credits summary { cursor: pointer; width: fit-content; }
details.credits p { margin: 8px 0 0; max-width: 110ch; }
details.credits a { color: var(--bc-encre); }

/* ---------- Accueil : les quatre faits en autocollants, chacun sa couleur, un peu de travers ---------- */
.intro-piece .faits { gap: 14px; }
.intro-piece .faits > div { padding: 22px 24px 24px; border-radius: 22px; background: var(--teinte-pale); rotate: var(--penche, 0deg);
  transition: rotate 420ms var(--ressort), transform 420ms var(--ressort); }
.intro-piece .faits > div:nth-child(1) { --penche: -1.4deg; }
.intro-piece .faits > div:nth-child(2) { --penche: 1.1deg; }
.intro-piece .faits > div:nth-child(3) { --penche: 0.8deg; }
.intro-piece .faits > div:nth-child(4) { --penche: -0.9deg; }
.intro-piece .faits dt { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); line-height: 1; letter-spacing: -0.025em; color: var(--teinte-encre); }
@media (hover: hover) and (pointer: fine) { .intro-piece .faits > div:hover { rotate: 0deg; transform: translateY(-4px) scale(1.02); } }

/* ---------- La question du jour, écrite sur une fiche bristol : lignes bleues, marge rouge, un bout d'adhésif ---------- */
.question-jour .qj-carte { position: relative; border-radius: 6px; padding: 24px clamp(24px, 4vw, 52px) clamp(28px, 4vw, 48px); gap: 14px;
  background-color: #FFFEFB;
  background-image: linear-gradient(to bottom, transparent 70px, rgba(222, 92, 78, .55) 70px, rgba(222, 92, 78, .55) 72px, transparent 72px),
                    repeating-linear-gradient(to bottom, transparent 0 35px, rgba(70, 110, 200, .16) 35px 36px);
  box-shadow: 0 1px 2px rgba(27, 28, 25, .08), 0 26px 48px -26px rgba(27, 28, 25, .38); rotate: -1deg; }
.question-jour .qj-carte::before { content: ""; position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; translate: -50% 0; rotate: 3deg;
  background: color-mix(in srgb, var(--teinte) 80%, transparent); border-radius: 2px; }
.question-jour .qj-carte h2 { margin-bottom: 18px; }
.qj-question { font-size: clamp(1.5rem, 1.15rem + 1vw, 2.125rem); }
.qj-reponse { background: var(--teinte-pale); }
.qj-actions .qj-autre { font: 500 var(--step-small)/1.2 var(--police-texte); background: none; border: 0; padding: 8px 4px; color: var(--bc-encre); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--bc-ambre); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.qj-autre svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; transition: rotate 500ms var(--ressort); }
.qj-autre:active svg, .qj-autre.tourne svg { rotate: 180deg; }

/* ---------- La fin de l'accueil : trois bulles de couleur, une par usage, qui complètent la phrase ---------- */
.fin.fin-bulles { background: none; padding-top: 0; padding-bottom: 120px; gap: 56px; }
.fin-bulles h2 { font-size: var(--step-head); }
.bulles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; width: 100%; max-width: 1240px; }
.bulle { position: relative; display: grid; align-content: space-between; justify-items: start; gap: 28px; min-height: 230px; padding: 30px 32px 28px;
  border-radius: 32px; background: var(--teinte); color: var(--bc-encre); text-decoration: none; text-align: left; rotate: var(--penche, 0deg);
  transition: rotate 420ms var(--ressort), transform 420ms var(--ressort); }
.bulle::after { content: ""; position: absolute; left: 48px; bottom: -22px; width: 44px; height: 24px; background: inherit; clip-path: polygon(0 0, 100% 0, 8% 100%); }
.bulle:nth-child(1) { --penche: -1.6deg; }
.bulle:nth-child(2) { --penche: 1.2deg; translate: 0 18px; }
.bulle:nth-child(3) { --penche: -0.8deg; }
.bulle strong { font-family: var(--police-titre); font-weight: 400; font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem); line-height: 1; letter-spacing: -0.03em; }
.bulle span { font-weight: 500; text-decoration: underline; text-decoration-color: var(--bc-encre); text-decoration-thickness: 1.5px; text-underline-offset: .25em; }
@media (hover: hover) and (pointer: fine) { .bulle:hover { rotate: 0deg; transform: translateY(-8px); } }
.bulle:active { transform: scale(.97); }

/* ---------- Pourquoi BetterCall : la signature à la main ---------- */
.createur-texte .signature { font-family: var(--police-main); font-size: 1.5em; font-weight: 600; line-height: 1; white-space: nowrap; }

/* ---------- Accueil : la capture de l'appli, annotée à la main dans ses marges ---------- */
.en-vrai-capture { position: relative; background: var(--bc-bleu-pale); }
.en-vrai-capture img { rotate: -1.5deg; box-shadow: 0 34px 60px -34px rgba(27, 28, 25, .4); }
.en-vrai-capture .griffon { position: absolute; width: 6.4em; font-size: 1.375rem; display: none; }
.en-vrai-capture .griffon .fleche { width: 70px; height: 44px; margin-top: 4px; }
.en-vrai-capture .note-fiche { left: 18px; top: 13%; rotate: -5deg; }
.en-vrai-capture .note-ia { right: 18px; top: 44%; text-align: right; color: var(--bc-ambre-encre); rotate: 4deg; }
@media (min-width: 1240px) { .en-vrai-capture img { max-width: 350px; } }
.en-vrai-capture .note-ia .fleche { margin-left: auto; transform: scaleX(-1); }
@media (min-width: 1240px) { .en-vrai-capture .griffon { display: block; } }

@media (max-width: 900px) {
  .en-vrai, .vitrine, .douleurs, .intro-piece, .archive, .question-jour, .createur, .faq { padding-top: 112px; }
  .en-vrai, .vitrine, .intro-piece, .archive, .question-jour { display: block; }
  .douleurs-liste { gap: 40px; margin-top: 36px; }
  .douleurs-liste li { display: block; }
  .douleurs-liste .douleur + p { margin-top: 14px; }
  .douleurs-liste .douleur { padding: 14px 20px 16px; }
  .vitrine-capture, .en-vrai-capture { margin: 0 0 40px; padding: 28px 40px; }
  .en-vrai-capture { margin: 40px 0 0; }
  .vitrine-inverse .vitrine-capture { margin-top: 36px; }
  .fondu { width: 82%; }
  .intro-texte { padding-top: 36px; gap: 32px; }
  .archive .manifeste { padding-top: 32px; }
  .qj-photo { margin-bottom: 20px; }
  .createur-faits { margin-top: 28px; gap: 8px 20px; }
  .createur-texte h2 { margin-bottom: 28px; }
  .faq { display: block; }
  .faq > h2 { position: static; margin-bottom: 28px; }
  .faq-ligne summary { padding: 18px 18px 18px 20px; }
  .faq-ligne p { padding: 0 20px 22px; }
  .bulles { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .bulle { min-height: 0; padding: 26px 26px 24px; gap: 18px; }
  .bulle:nth-child(2) { translate: none; }
  .fin.fin-bulles { padding-bottom: 88px; gap: 40px; }
  .intro-piece .faits > div { padding: 18px 18px 20px; }
  .fin { margin-top: 112px; padding-top: 96px; padding-bottom: 96px; gap: 32px; }
  .fin h2 { font-size: clamp(2.75rem, 12vw, 4rem); }
  .fin-actions { flex-direction: column; width: 100%; }
  .fin-actions .bouton { width: 100%; }
}
@media (max-width: 480px) { .faits { gap: 28px 16px; } }
.qj-question.tiree { animation: arrivee 380ms var(--ease-out); }

/* ==========================================================================
   Nouveau style (aplats clairs, une police) : sans archives ni ornements.
   ========================================================================== */
.journee-tete { display: block; margin-bottom: 48px; }
/* La question du jour : un panneau de la couleur de la page, sur toute la largeur */
.question-jour .qj-carte { grid-column: 1 / -1; rotate: none; box-shadow: none; background: var(--teinte-pale); background-image: none; border-radius: var(--rayon); padding: clamp(28px, 4vw, 56px); }
.question-jour .qj-carte::before { display: none; }
.qj-question { font-weight: 500; letter-spacing: -0.01em; }
.faq > h2 { font-size: clamp(2.25rem, 1rem + 2.6vw, 3.75rem); }
.faq-ligne h3 { font-family: var(--police-texte); font-weight: 500; letter-spacing: -0.01em; }
.pages h2 span, #titre-pages span { color: inherit; }
.createur-texte .signature { font-family: var(--police-texte); font-weight: 900; font-size: 1em; letter-spacing: -0.02em; }
.fin h2 { font-size: var(--step-head); }
details.credits { display: none; }