/* ==========================================================================
   atelier.css — refonte « Édition atelier » d'authorlib.com (piste 2, session 61, validée le 02/11/2026)
   Rôle : ajoute, par-dessus styles.css, les vraies photos d'atelier d'autrice,
   les fiches bristol tenues par un trombone (l'objet de l'auteur, comme l'étiquette
   kraft est celui du créateur sur creatorlib.fr), la photo de fond du bloc
   « Conçue avec une autrice » et le pied de page relié à la maison Opus.Lib.
   Rien ici ne touche au fil d'encre ni au grand livre des univers.
   ========================================================================== */

/* ---------- Grain de papier (partagé par les fiches) ---------- */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .9 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Trombone en acier : deux boucles imbriquées, reflet métallique, ombre portée */
  --trombone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 66'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23767d86'/%3E%3Cstop offset='.35' stop-color='%23eef1f4'/%3E%3Cstop offset='.6' stop-color='%239aa1aa'/%3E%3Cstop offset='1' stop-color='%23d5dade'/%3E%3C/linearGradient%3E%3Cfilter id='o' x='-50%25' y='-20%25' width='200%25' height='140%25'%3E%3CfeDropShadow dx='1.3' dy='2' stdDeviation='1' flood-color='%23000' flood-opacity='.35'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23m)' stroke-width='2.2' stroke-linecap='round' filter='url(%23o)'%3E%3Cpath d='M11 26 V46 a4.5 4.5 0 0 0 9 0 V10 a8 8 0 0 0 -16 0 V53 a9 9 0 0 0 18 0 V38'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Fiche bristol (carte lignée, marge rouge, trombone) ---------- */
.fiche,
.chaos-carte {
  position: relative;
  background:
    linear-gradient(90deg, transparent 2.1rem, rgba(214, 72, 72, .55) 2.1rem, rgba(214, 72, 72, .55) calc(2.1rem + 1.2px), transparent calc(2.1rem + 1.2px)),
    repeating-linear-gradient(180deg, transparent 0 1.55rem, rgba(70, 120, 190, .22) 1.55rem calc(1.55rem + 1px)),
    linear-gradient(165deg, rgba(255, 255, 255, .6), transparent 45%, rgba(120, 100, 70, .07)),
    var(--grain),
    #FBF8F1;
  background-position: 0 0, 0 .55rem, 0 0, 0 0, 0 0;
  border: 0;
  border-radius: 2px;
  color: #23272F;
  box-shadow:
    0 .6px .8px rgba(60, 50, 30, .35),
    0 8px 12px -4px rgba(30, 25, 15, .2),
    0 22px 30px -14px rgba(30, 25, 15, .22);
}
.fiche::before, .chaos-carte::before,
.fiche .trombone {
  content: "";
  position: absolute;
  top: -20px;
  left: 1.1rem;
  width: 15px;
  height: 36px;
  background: var(--trombone) no-repeat center / contain;
  transform: rotate(-6deg);
}
.fiche::before { content: none; }
.chaos-carte { padding: 1.15rem 1.3rem 1rem 2.7rem; line-height: 1.55rem; color: #2B3240; background-position: 0 0, 0 .85rem, 0 0, 0 0, 0 0; }
.chaos-carte strong { color: #0A6B4A; }
html[data-theme="sombre"] .chaos-carte { color: #2B3240; }

/* ---------- Héros : photos derrière les téléphones + deux fiches ---------- */
.pile-livres { display: none; }
.hero-photos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-mockups { z-index: 1; }
.hp {
  position: absolute;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  border: 6px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 24px 40px -16px rgba(15, 23, 42, .35);
}
.hp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp1 { width: 58%; aspect-ratio: 4 / 5; left: -42%; top: 4%; rotate: -5deg; }
.hp2 { width: 48%; aspect-ratio: 4 / 5; right: -14%; top: 40%; rotate: 4deg; }
.fiche {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: .85rem 1.1rem .75rem 2.6rem;
  min-width: 11.5rem;
  line-height: 1.55rem;
  font-size: .82rem;
  background-position: 0 0, 0 .45rem, 0 0, 0 0, 0 0;
}
.fiche b { display: block; font-family: var(--police-titre); font-style: italic; font-weight: 600; font-size: 1.02rem; }
.fiche span { display: block; color: #4C5563; }
.fiche-a { left: -30%; bottom: 8%; rotate: -4deg; }
.fiche-b { right: -12%; top: 6%; rotate: 3.5deg; }
@media (max-width: 1100px) {
  .hp1 { left: -26%; } .hp2 { right: -8%; }
  .fiche-a { left: -14%; } .fiche-b { right: -10%; }
}
@media (max-width: 900px) {
  .hp1 { left: -12%; width: 50%; } .hp2 { right: -10%; width: 46%; }
  .fiche-a { left: -4%; bottom: 4%; } .fiche-b { right: -2%; top: 2%; }
}

/* ---------- Vitrines : une photo derrière chaque téléphone ---------- */
.vitrine { isolation: isolate; padding-top: 2.2rem; }
.vitrine-photo {
  position: absolute;
  z-index: -1;
  left: 6%;
  right: 6%;
  top: 0;
  height: 72%;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 24px 40px -22px rgba(15, 23, 42, .4);
}
.vitrine-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vitrine-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 30, 51, 0) 40%, rgba(15, 30, 51, .28));
}
.vitrine-mockup { position: relative; }

/* ---------- « Conçue avec une autrice » : photo d'atelier en fond ---------- */
.terrain-photo { position: relative; overflow: hidden; padding-block: clamp(7rem, 14vw, 12rem); }
.terrain-fond { position: absolute; inset: 0; z-index: 0; }
.terrain-fond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.terrain-fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 30, 51, .1), rgba(15, 30, 51, .35));
}
.terrain-photo .terrain-carte {
  background: rgba(15, 30, 51, .64);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.terrain-citation {
  margin: 2rem auto 0;
  padding-top: 1.6rem;
  max-width: 38rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.terrain-citation blockquote {
  margin: 0;
  font-family: var(--police-titre);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.45;
  color: #fff;
}
.terrain-citation figcaption { margin-top: .8rem; font-size: .88rem; color: #C9D6E8; }
.terrain-citation a { color: #A7F3D0; }

/* ---------- Pied : la maison Opus.Lib et les réseaux ---------- */
.pied-maison { display: flex; align-items: center; gap: .9rem; max-width: 24rem; }
.pied-maison img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.pied-maison p { margin: 0; font-size: .9rem; color: var(--encre-2); }
.pied-maison a { color: var(--encre); font-weight: 600; }
.pied-reseaux { display: flex; gap: .6rem; align-items: center; }
.pied-reseaux a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--bordure);
  color: var(--encre);
}
.pied-reseaux svg { width: 20px; height: 20px; }

/* ---------- Haut de page aéré (retour Yacine) : un téléphone, une photo, une fiche,
   l'offre en une ligne sans encadré, les badges stores gardés pour l'épilogue ---------- */
.hero-mockup-face { margin-top: 6%; width: 74%; margin-left: 13%; }
.hp1 { width: 74%; left: -30%; top: 10%; rotate: -4deg; }
.fiche-a { left: auto; right: -6%; bottom: 14%; rotate: 3deg; }
.offre-legere { margin: .9rem 0 .2rem; font-size: .9rem; color: var(--vert); font-weight: 500; }
.form-consentement { opacity: .8; }
.hero-texte .form-attente { margin-top: 2rem; }
@media (max-width: 1100px) { .hp1 { left: -18%; } .fiche-a { right: -2%; } }
@media (max-width: 900px) { .hp1 { left: -6%; width: 60%; } .fiche-a { right: 0; } }

/* Le cachet abstrait est remplacé par l'emblème Author.Lib (le A et la plume) : il parle tout de suite. */
.terrain-embleme { display: block; width: 84px; height: auto; margin: 0 auto 1.2rem; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }

/* ---------- Grand livre : retour en arrière (univers plus à gauche sur l'étagère).
   La page de GAUCHE se soulève autour de la reliure et vient se poser sur la page de droite.
   Mesures identiques au sens normal (rendus HD 2400 × 1800, mêmes proportions que les 800 × 600). ---------- */
.page-flip.sens-retour { left: 8.7%; transform-origin: right center; }
.page-flip.sens-retour.est-tournee { transform: rotateY(180deg); }
.page-flip.sens-retour .page-flip-avant { left: -21.07%; }
.page-flip.sens-retour .page-flip-arriere { left: -121.07%; transform-origin: 70.65% 50%; }
.page-cache.sens-retour { left: 8.7%; }
.page-cache.sens-retour img { left: -21.07%; }
.ombre-balayage.sens-retour { left: 50%; background: linear-gradient(to left, transparent 28%, rgba(15, 23, 42, .12) 74%, rgba(15, 23, 42, .22)); }

/* ---------- Écrans haute définition (S61, retour Yacine) : ombres intégrées aux images (Safari dessinait un
   rectangle gris avec « filter: drop-shadow » sur les grandes images) ; rien ne cache jamais un téléphone. ---------- */
.hero-mockup-face, .vitrine-mockup, .telephone-mini img { filter: none !important; height: auto; }
html[data-theme="sombre"] .hero-mockup-face, html[data-theme="sombre"] .vitrine-mockup { filter: none !important; }
/* Haut de page : une grande photo à gauche du téléphone, entièrement visible ; la fiche bristol est accrochée par
   son trombone sur la BORDURE haute gauche de la photo (comme une vraie fiche agrafée au tirage). */
.hero-telephone { justify-self: stretch; }
.hero-mockups { transform: none; width: min(620px, 112%); margin-left: auto; margin-right: -6%; }
.hero-mockup-face { margin-top: 0; width: 56%; margin-left: 46%; }
.hp1 { width: 62%; aspect-ratio: 4 / 5; left: 0; top: 7%; rotate: -3deg; border-width: 8px; }
.fiche-a { left: -3%; right: auto; top: 4%; bottom: auto; rotate: -6deg; background-color: #FFFFFF;
  min-width: 0; width: 11rem; padding: .7rem .8rem .6rem 2.2rem; font-size: .76rem; line-height: 1.4rem;
  box-shadow: 0 .6px .8px rgba(60,50,30,.35), 0 10px 16px -4px rgba(30,25,15,.28), 0 26px 34px -14px rgba(30,25,15,.3); }
.fiche-a b { font-size: .95rem; }
.fiche-a .trombone { left: 1.2rem; top: -22px; }
@media (max-width: 900px) {
  .hero-mockups { width: min(420px, 100%); margin-inline: auto; }
  .hero-mockup-face { width: 62%; margin-left: 40%; }
  .hp1 { left: 0; width: 56%; top: 10%; }
  .fiche-a { left: -2%; top: 5%; width: 8.6rem; padding: .5rem .6rem .45rem 1.9rem; font-size: .68rem; line-height: 1.25rem; }
  .fiche-a b { font-size: .82rem; }
}

/* Vitrines : la photo reste fixe et bien visible ; le téléphone, plus petit, monte depuis le bas pour se poser. */
.vitrine-photo { left: 0; right: 0; height: 64%; }
.vitrine-mockup, .vitrine-telephone { width: min(250px, 76%); }
.vitrine-telephone .vitrine-mockup { width: 100%; }
.vitrine { padding-top: 4.6rem; }
.vitrine .vitrine-mockup, .vitrine .vitrine-telephone { margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: no-preference) {
  .js-monte .vitrine-mockup { opacity: 0; transform: translateY(90px); transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity .7s ease; }
  .js-monte .vitrine.est-posee .vitrine-mockup { opacity: 1; transform: none; }
  .js-monte .vitrine:nth-child(2) .vitrine-mockup { transition-delay: .12s; }
  .js-monte .vitrine:nth-child(3) .vitrine-mockup { transition-delay: .24s; }
}
@media (max-width: 880px) { .vitrine-mockup, .vitrine-telephone { width: min(230px, 66%); } }

/* Espace web : le petit téléphone se pose À CÔTÉ du navigateur, sans en cacher une partie */
.bureau-visuel .navigateur { width: 80%; }
.telephone-mini { right: -8%; bottom: -10%; width: min(200px, 30%); }
@media (max-width: 880px) { .bureau-visuel .navigateur { width: 76%; } .telephone-mini { right: 0; bottom: -6%; width: 30%; } }

/* Haut de page (retour 02/11, 17 h 58) : plus de fiche ; une seconde photo, plus petite, posée en bas à gauche
   sur la première (elle cache la table vide), sans jamais toucher le téléphone. */
.hp2 { width: 40%; aspect-ratio: 1 / 1; left: -8%; right: auto; top: auto; bottom: -2%; rotate: 4deg; z-index: 1; border-width: 7px; }
@media (max-width: 900px) { .hp2 { width: 34%; left: -2%; bottom: 0; } }

/* ---------- Fil d'encre : plus de coupure nette (retour Yacine, 02/11 18 h).
   Avant, les blocs de texte que le fil traverse portaient un fond OPAQUE rectangulaire : le trait s'arrêtait
   net sur un bord invisible. Désormais ce fond est un halo doux : le fil reste visible (atténué) derrière le
   texte et retrouve son trait normal dès qu'il sort dans un espace vide. Pour revenir en arrière : supprimer
   ce bloc (les fonds opaques d'origine de styles.css reprennent la main). ---------- */
.fonctionnalites .chapitre-tete,
.histoire .chapitre-tete,
.vitrine figcaption {
  background: transparent !important;
  position: relative;
  isolation: isolate;
}
.fonctionnalites .chapitre-tete::before,
.histoire .chapitre-tete::before,
.vitrine figcaption::before {
  content: "";
  position: absolute;
  inset: -36px -56px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--halo, var(--fond)) 86%, transparent) 0%,
    color-mix(in srgb, var(--halo, var(--fond)) 78%, transparent) 55%, transparent 100%);
}
.histoire .chapitre-tete { --halo: var(--surface); }
.vitrine figcaption::before { inset: -24px -40px; }

/* Plus de coupure nette entre le haut de page, le chapitre 1 et le chapitre 2 : le fond blanc du chapitre 1
   apparaît et disparaît en fondu au lieu d'un filet gris (retour Yacine, 02/11). */
.histoire {
  border-block: 0 !important;
  background: linear-gradient(to bottom, var(--fond) 0, var(--surface) 140px, var(--surface) calc(100% - 140px), var(--fond) 100%) !important;
}

/* Téléphone : les halos du fil d'encre ne débordent jamais de l'écran (pas de défilement horizontal). */
@media (max-width: 760px) {
  .fonctionnalites .chapitre-tete::before, .histoire .chapitre-tete::before, .vitrine figcaption::before,
  .faq .chapitre-tete::before { inset: -28px -8px; }
}

/* Garde-fou : aucun halo ni ombre décorative ne crée de défilement horizontal, quelle que soit la largeur
   (« clip » ne crée pas de zone de défilement : l'en-tête collant continue de fonctionner). */
html, body { overflow-x: clip; }

/* ---------- Questions fréquentes (référencement : répond mot pour mot aux questions posées à Google et aux IA) ---------- */
.faq { padding-block: clamp(4rem, 8vw, 6.5rem) clamp(3rem, 6vw, 4.5rem); }
.faq .chapitre-tete { --halo: var(--fond); }
.faq-liste { position: relative; z-index: 2; max-width: 50rem; margin: 2.2rem auto 0; border-top: 1px solid var(--bordure);
  background: color-mix(in srgb, var(--fond) 92%, transparent); }
.faq details { border-bottom: 1px solid var(--bordure); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.2rem .25rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-family: var(--police-titre); font-weight: 600; font-size: 1.14rem; line-height: 1.35; color: var(--encre); }
.faq summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 2px solid var(--vert); border-bottom: 2px solid var(--vert);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq details p { margin: 0; padding: 0 .25rem 1.3rem; color: var(--encre-2); max-width: 44rem; }
.faq .chapitre-tete::before { content: ""; position: absolute; inset: -36px -56px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--fond) 86%, transparent) 0%, color-mix(in srgb, var(--fond) 78%, transparent) 55%, transparent 100%); }
.faq .chapitre-tete { position: relative; isolation: isolate; }
@media (max-width: 760px) { .faq .chapitre-tete::before { inset: -28px -8px; } }