/* Pages d'ateliers de Phil Darwin (03/10/2026). Chargé APRÈS le style de l'exemple (scene.css ou atelier.css) :
   on réutilise ses polices, ses boutons, ses titres, et on ajoute seulement la mise en page des pages d'ateliers. */
.style-1 { --a: var(--or); --a-clair: var(--or-clair); --texte-2: var(--ivoire-2); --trait: var(--or-trait); --carte: var(--noir-2); --carte-2: var(--noir-3); --sur-a: var(--noir); }
.style-2 { --a: var(--jaune); --a-clair: var(--encre); --texte-2: var(--gris); --trait: rgba(18,18,18,.14); --carte: #ffffff; --carte-2: #f6f4ec; --sur-a: var(--encre); }
.page-atelier { --cote: clamp(16px, 4vw, 40px); }
.page-atelier main { display: block; }

/* La barre du haut */
.at-barre { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 18px; padding: 12px var(--cote); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.style-1 .at-barre { background: rgba(7,6,5,.82); border-bottom: 1px solid var(--or-trait); }
.style-2 .at-barre { background: rgba(255,255,255,.9); border-bottom: 2px solid var(--encre); }
.at-marque { margin-right: auto; font: italic 500 22px/1 var(--f-titre); text-decoration: none; color: inherit; }
.style-2 .at-marque { font-style: normal; text-transform: uppercase; letter-spacing: .02em; }
.at-barre nav { display: flex; gap: 22px; }
.at-barre nav a { font-size: 14.5px; text-decoration: none; color: inherit; opacity: .85; }
.at-barre nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.at-essai { padding: 12px 18px; font-size: 14px; }
@media (max-width: 760px) { .at-barre nav { display: none; } }

/* L'ouverture : titre SEO, chapo, photo */
.at-ouverture { padding: clamp(28px, 6vw, 80px) 0 clamp(30px, 5vw, 60px); }
.at-ouverture-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(26px, 5vw, 70px); align-items: center; }
.at-ariane { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: 13.5px; color: var(--texte-2); }
.at-ariane a { color: inherit; }
.at-h1 { margin: 0; font: 500 clamp(36px, 5.4vw, 70px)/1.02 var(--f-titre); letter-spacing: -.01em; }
.style-2 .at-h1 { font-weight: 400; text-transform: uppercase; line-height: 1.08; }
.at-ouverture .chapo { max-width: 54ch; }
.at-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.at-offert { margin: 16px 0 0; font-size: 14.5px; color: var(--texte-2); }
.at-offert::before { content: "✓ "; color: var(--a); font-weight: 700; }
.style-2 .at-offert::before { color: var(--encre); }
.at-photo { margin: 0; position: relative; }
.at-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.style-1 .at-photo img { border-radius: 6px; box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px var(--or-trait); }
.style-1 .at-photo::after { content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1; border: 1px solid var(--or); border-radius: 6px; }
.style-2 .at-photo img { border-radius: 24px; border: 3px solid var(--encre); box-shadow: 10px 10px 0 var(--jaune); }
@media (max-width: 760px) {
  .at-ouverture-grille { grid-template-columns: 1fr; }
  .at-photo { order: -1; }
  .at-photo img { aspect-ratio: 4 / 3; }
}

/* La fiche pratique */
.at-fiche { padding: 0 0 clamp(30px, 5vw, 60px); }
.at-fiche-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; }
.at-fiche-liste div { padding: 20px 22px; }
.style-1 .at-fiche-liste { border-block: 1px solid var(--or-trait); }
.style-1 .at-fiche-liste div + div { border-left: 1px solid var(--or-trait); }
.style-2 .at-fiche-liste { gap: 12px; }
.style-2 .at-fiche-liste div { border: 2px solid var(--encre); border-radius: 18px; background: var(--carte-2); }
.at-fiche-liste dt { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--a); }
.style-2 .at-fiche-liste dt { color: var(--encre); }
.at-fiche-liste dd { margin: 6px 0 0; font-size: 16px; line-height: 1.45; }
@media (max-width: 900px) { .at-fiche-liste { grid-template-columns: 1fr 1fr; } .style-1 .at-fiche-liste div:nth-child(3) { border-left: 0; } .style-1 .at-fiche-liste div:nth-child(n+3) { border-top: 1px solid var(--or-trait); } }
@media (max-width: 480px) { .at-fiche-liste { grid-template-columns: 1fr; } .style-1 .at-fiche-liste div + div { border-left: 0; border-top: 1px solid var(--or-trait); } }

/* Les blocs */
.at-bloc { padding: clamp(50px, 8vw, 110px) 0; }
.style-1 .at-bloc:nth-of-type(even) { background: var(--noir-2); }
.style-2 .at-bloc:nth-of-type(even) { background: #fbfaf5; }
.at-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 5vw, 70px); align-items: start; }
@media (max-width: 760px) { .at-deux { grid-template-columns: 1fr; } }
.at-coches { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.at-coches li { position: relative; padding-left: 36px; font-size: 17.5px; line-height: 1.45; }
.at-coches li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 700; background: var(--a); color: var(--sur-a); }
.at-rassure { padding: clamp(22px, 3vw, 34px); border-radius: 18px; background: var(--carte); }
.style-1 .at-rassure { box-shadow: inset 0 0 0 1px var(--or-trait); }
.style-2 .at-rassure { border: 2px solid var(--encre); box-shadow: 7px 7px 0 var(--jaune); }
.at-rassure h3 { margin: 0 0 14px; font: italic 500 26px/1.2 var(--f-titre); }
.style-2 .at-rassure h3 { font-style: normal; text-transform: uppercase; font-weight: 400; }
.at-rassure ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--texte-2); }
.at-rassure li::marker { color: var(--a); }
.style-2 .at-rassure li::marker { color: var(--encre); }

/* Le programme */
.at-mois { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.at-mois li { padding: 26px 24px; border-radius: 18px; background: var(--carte); display: grid; gap: 8px; align-content: start; }
.style-1 .at-mois li { box-shadow: inset 0 0 0 1px var(--or-trait); }
.style-2 .at-mois li { border: 2px solid var(--encre); }
.at-mois li:nth-child(2) { transition-delay: .1s; } .at-mois li:nth-child(3) { transition-delay: .2s; }
.at-mois-n { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--a); }
.style-2 .at-mois-n { justify-self: start; padding: 4px 10px; border-radius: 8px; background: var(--jaune); color: var(--encre); }
.at-mois b { font: 500 25px/1.15 var(--f-titre); }
.style-2 .at-mois b { font-weight: 400; text-transform: uppercase; }
.at-mois li > span:last-child { color: var(--texte-2); }
@media (max-width: 760px) { .at-mois { grid-template-columns: 1fr; } }

/* Le professeur */
.at-phil p { font-size: 17px; color: var(--texte-2); }
.at-video { margin: 0; }
.at-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.style-1 .at-video video { border-radius: 6px; box-shadow: inset 0 0 0 1px var(--or-trait); }
.style-2 .at-video video { border-radius: 18px; border: 3px solid var(--encre); }
.at-video figcaption { margin-top: 10px; font-size: 13.5px; color: var(--texte-2); }

/* Les avis : aucun n'est inventé */
.at-avis-vide { margin-top: 26px; padding: 26px; border-radius: 18px; border: 1.5px dashed var(--a); text-align: center; color: var(--texte-2); }
.style-2 .at-avis-vide { border-color: var(--encre); }
.at-avis-vide p { margin: 0 0 6px; }
.at-avis-vide b { color: inherit; }

/* Les questions */
.at-faq { margin-top: 30px; display: grid; gap: 10px; }
.at-faq details { border-radius: 14px; background: var(--carte); }
.style-1 .at-faq details { box-shadow: inset 0 0 0 1px var(--or-trait); }
.style-2 .at-faq details { border: 2px solid var(--encre); }
.at-faq summary { position: relative; padding: 18px 54px 18px 20px; cursor: pointer; list-style: none; font-weight: 600; font-size: 16.5px; }
.at-faq summary::-webkit-details-marker { display: none; }
.at-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; line-height: 1; background: var(--a); color: var(--sur-a); transition: rotate .3s; }
.at-faq details[open] summary::after { rotate: 45deg; }
.at-faq details p { margin: 0; padding: 0 20px 20px; color: var(--texte-2); line-height: 1.6; }

/* Le dernier appel */
.at-final { padding: clamp(50px, 8vw, 100px) 0; text-align: center; }
.style-1 .at-final { background: radial-gradient(ellipse at 50% 0%, #2a0a0d, var(--noir) 70%); border-block: 1px solid var(--or-trait); }
.style-2 .at-final { background: var(--jaune); border-block: 3px solid var(--encre); }
.at-final .chapo { margin-inline: auto; }
.style-2 .at-final .chapo { color: var(--encre-2); }
.at-final .at-actions { justify-content: center; }

/* Les autres ateliers */
.at-autres ul { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.at-autres a { position: relative; display: block; overflow: hidden; border-radius: 16px; text-decoration: none; color: #fff; aspect-ratio: 3 / 4; }
.style-2 .at-autres a { border: 3px solid var(--encre); }
.at-autres img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ressort); }
.at-autres a:hover img { transform: scale(1.06); }
.at-autres span { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 16px; background: linear-gradient(transparent, rgba(0,0,0,.82)); font: 500 21px/1.15 var(--f-titre); }
.style-2 .at-autres span { text-transform: uppercase; font-weight: 400; }
@media (max-width: 760px) { .at-autres ul { grid-template-columns: 1fr 1fr; } }

/* Le pied de page */
.at-pied { padding: 30px 0 calc(30px + env(safe-area-inset-bottom)); font-size: 13.5px; color: var(--texte-2); }
.at-pied .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.at-pied a { color: inherit; }