/* ============================================================
   SculptLab — À propos
   En-tête (signature + menu + bascule FR/EN), couleurs et footer
   alignés sur index.html. Styles de contenu propres à la page conservés.
   ============================================================ */

/* ---- Jetons de design (alignés sur index) ---- */
:root{
  --turquoise-500:#64eecd;
  --turquoise-550:#64f0e5;
  --pink-hot:#ff007f;
  --ink-900:#1a1a1a;
  --ink-800:#222222;
  --ink-700:#333333;
  --ink-400:#777777;
  --line-300:rgba(0,0,0,.15);
  --gold-500:#ffdd00;
  --gold-600:#ffd700;
  --orange-500:#ff6a00;
  --font-title:'Jost','Futura','Century Gothic',sans-serif;
  --font-body:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --fw-bold:700;
  --fs-16:1rem;
  --fs-18:1.125rem;
  --radius-sm:5px;
  --radius-lg:10px;
  --radius-pill:999px;
  --gutter-page-sm:20px;
  --grad-hero:linear-gradient(135deg,#64eecd 50%,#64f0e5 100%);
  --ease-soft:cubic-bezier(.25,.1,.25,1);
  --dur-base:.3s;
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; scrollbar-width:none; }
*::-webkit-scrollbar{ display:none; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  color:var(--ink-700);
  line-height:1.6;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  overflow-x:hidden;
}
.content{ flex:1; }

/* ============================================================
   EN-TÊTE / HERO (banneau) — aligné sur index
   ============================================================ */
.section{ position:relative; box-sizing:border-box; }

.section-turquoise{
  position:relative;
  background:var(--grad-hero);
  height:5cm;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:0;
  margin-bottom:20px;
}

/* Signature (marque) — blanche, comme index */
.signature{
  position:absolute;
  top:24px;
  left:clamp(20px,4vw,56px);
  z-index:20;
  height:54px;
  width:auto;
  filter:brightness(0) invert(1);
}

/* Navigation desktop */
.header-menu{
  position:absolute;
  top:0; left:0; right:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(16px,2.2vw,34px);
  padding:28px clamp(20px,4vw,56px);
  flex-wrap:wrap;
  color:#fff;
}
.header-menu a{
  color:inherit;
  text-decoration:none;
  font-weight:var(--fw-bold);
  font-size:var(--fs-18);
  cursor:pointer;
  white-space:nowrap;
}
.header-menu a:hover{ text-decoration:underline; }

/* Bouton hamburger (mobile) */
.mobile-menu-toggle{
  display:none;
  position:absolute;
  top:16px;
  right:clamp(16px,4vw,40px);
  z-index:40;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  color:#fff;
  font-size:32px;
  line-height:1;
  cursor:pointer;
  padding:6px;
}

/* Menu mobile déroulant */
.mobile-menu{
  position:absolute;
  top:62px;
  right:clamp(16px,4vw,40px);
  z-index:40;
  display:none;
  flex-direction:column;
  gap:16px;
  background:#fff;
  border-radius:12px;
  padding:20px 22px;
  box-shadow:0 10px 34px rgba(0,0,0,.22);
  min-width:210px;
}
.mobile-menu.active{ display:flex; }
.mobile-menu a{
  color:var(--ink-900);
  text-decoration:none;
  font-weight:var(--fw-bold);
  font-size:var(--fs-18);
}
.mobile-menu a:hover{ color:var(--pink-hot); }

/* Bascule de langue (pilule FR · EN) */
.lang-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--line-300);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.75);
  padding:4px 8px;
  font-family:var(--font-body);
  font-weight:var(--fw-bold);
}
.lang-toggle span{ opacity:.5; }
.lang-toggle button{
  border:none;
  background:transparent;
  font:inherit;
  color:var(--ink-900);
  padding:2px 10px;
  cursor:pointer;
  opacity:.6;
  border-radius:var(--radius-pill);
  transition:opacity var(--dur-base) var(--ease-soft);
}
.lang-toggle button:hover{ opacity:.85; }
.lang-toggle button.active{ opacity:1; background:var(--ink-900); color:#fff; }
.mobile-menu .lang-toggle{ margin-top:2px; }

/* Titre de page (wordmark en bas à gauche, police Jost comme index) */
.main-title{
  position:relative;
  z-index:10;
  margin:0 0 0.3cm clamp(20px,4vw,56px);
  font-family:var(--font-title);
  font-weight:var(--fw-bold);
  color:#fff;
  font-size:2em;
  line-height:1.1;
  letter-spacing:-.01em;
}

/* ============================================================
   CONTENU — récit (propre à la page about)
   ============================================================ */
.story-block{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px;
  max-width:1100px;
  margin:auto auto 20px;
  padding:20px;
  background-color:#f9f9f9;
}
.story-block .image-frame{
  flex:1 1 350px;
  height:350px;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  opacity:0;
  transition:opacity .3s ease, transform .4s ease, box-shadow .4s ease;
}
.story-block .image-frame.visible{ opacity:1; }
.story-block .image-frame:hover{
  transform:scale(1.02);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.story-block .image-frame img{
  width:100%; height:100%; object-fit:cover;
}
.story-block p{
  flex:1 1 350px;
  font-size:1.1em;
  line-height:1.6;
  text-align:justify;
}

/* Curseur de frappe (machine à écrire) */
.typing-animation{ display:inline-block; text-align:justify; position:relative; }
.typing-cursor{
  display:inline-block;
  background-color:var(--ink-700);
  width:20px;
  height:1.2em;
  animation:blink-caret .75s step-end infinite;
  margin-left:1px;
}
@keyframes blink-caret{ from,to{ opacity:1 } 50%{ opacity:0 } }

/* ============================================================
   FOOTER — aligné sur index
   ============================================================ */
footer{
  background:var(--ink-700);
  color:#fff;
  padding:20px var(--gutter-page-sm);
  text-align:center;
  font-family:var(--font-body);
  margin-top:0;
}
footer p{ margin:0; font-size:var(--fs-16); }
footer a{
  color:var(--gold-500);
  text-decoration:none;
  transition:color var(--dur-base) var(--ease-soft);
}
footer a:hover{ color:var(--orange-500); }

/* ============================================================
   BANNIÈRE COOKIES — alignée sur index
   ============================================================ */
#cookie-banner{
  position:fixed; left:0; bottom:0; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:15px 20px;
  background:var(--ink-800); color:#fff;
  font-family:var(--font-body);
  z-index:9999;
  transform:translateY(100%);
  transition:transform .4s ease-in-out;
}
#cookie-banner.show{ transform:translateY(0); }
#cookie-banner p{ margin:0; flex:1; font-size:var(--fs-16); }
#cookie-banner a{ color:var(--gold-600); text-decoration:underline; }
#close-cookie-banner{
  background:var(--gold-600); color:var(--ink-800); border:none;
  padding:8px 18px; cursor:pointer; font-weight:var(--fw-bold);
  border-radius:var(--radius-sm); font-family:inherit;
}

.fr,.en{ display:none; }
body.lang-fr .fr{ display:inline; }
body.lang-en .en{ display:inline; }

/* Accessibilité — focus */
.header-menu a:focus, .header-menu a:focus-visible,
.mobile-menu a:focus, .mobile-menu a:focus-visible,
.lang-toggle button:focus, .lang-toggle button:focus-visible{ outline:none; }
.header-menu a:focus-visible,
.mobile-menu a:focus-visible{ text-decoration:underline; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Chrome mobile (≤640px) — identique à index */
@media (max-width:640px){
  .header-menu{ display:none !important; }
  .mobile-menu-toggle{ display:flex !important; }
  .signature{ height:40px !important; top:18px !important; }
  .main-title{ font-size:1.5em !important; }
}

/* Contenu — récit responsive (propre à about) */
@media (max-width:1024px){
  .story-block{ max-width:900px; padding:18px; gap:18px; }
  .story-block .image-frame{ flex:1 1 300px; height:300px; }
  .story-block p{ flex:1 1 300px; font-size:1.05em; }
}
@media (max-width:768px){
  .section-turquoise{ height:auto; min-height:4cm; padding:20px; }
  .story-block{ flex-direction:column; max-width:100%; padding:20px 15px; }
  .story-block p{ order:1; flex:none; width:100%; font-size:1em; }
  .story-block .image-frame{ order:2; flex:none; width:100%; max-width:500px; height:250px; }
}
@media (max-width:600px){
  .story-block .image-frame{ height:220px; max-width:100%; }
  .story-block p{ font-size:.95em; line-height:1.5; }
}
@media (max-width:480px){
  .section-turquoise{ padding:15px; margin-bottom:15px; }
  .story-block{ padding:12px 8px; gap:12px; }
  .story-block .image-frame{ height:200px; border-radius:6px; }
  .story-block p{ font-size:.9em; line-height:1.4; }
}

/* Accessibilité — mouvement réduit */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .story-block .image-frame{ transition:none; }
  .story-block .image-frame:hover{ transform:none; }
}

#refuse-cookie-banner{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.6); border-radius:5px; padding:8px 18px; cursor:pointer; font-weight:700; }
#refuse-cookie-banner:hover{ background:rgba(255,255,255,.12); }

/* ===== Page À propos — récit (design Claude Design) ===== */
.about-intro{ background:#fff; padding:clamp(56px,8vw,120px) clamp(24px,5vw,80px); }
.about-intro .lead{ max-width:920px; margin:0 auto; text-align:center; }
.lead{ font-family:'Jost','Futura','Century Gothic',sans-serif; font-style:italic; font-size:clamp(20px,2.5vw,34px); line-height:1.4; color:#1a1a1a; }
.about-chapter{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:clamp(420px,46vw,640px); }
.about-chapter .ac-img{ position:relative; height:100%; min-height:100%; overflow:hidden; }
.about-chapter .ac-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.about-chapter .ac-text{ display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,5vw,88px); }
.ac-rev .ac-img{ order:2; }
.ac-rev .ac-text{ order:1; }
.ac-dark{ background:#15131a; color:#fff; }
.ac-light{ background:#fff; color:#1a1a1a; }
.ac-yellow{ background:linear-gradient(135deg,#F4E04D 0%,#F6E27F 100%); color:#333333; }
.ac-pink{ background:linear-gradient(135deg,#ff66a3 0%,#ff4d94 100%); color:#fff; }
.ac-text .prose{ max-width:480px; font-size:18px; line-height:1.72; text-align:justify; margin:0; }
.ac-rev .ac-text .prose{ margin-left:auto; }
.ac-turq .prose{ color:#64eecd; }
.about-closing{ background:linear-gradient(135deg,#64eecd 50%,#64f0e5 100%); padding:clamp(56px,7vw,110px) clamp(24px,5vw,80px); text-align:center; }
.about-closing .lead{ max-width:840px; margin:0 auto 40px; }
.about-closing .closing-sig{ height:60px; width:auto; }
/* Curseur machine à écrire — gros bloc, persistant (fidèle au design) */
.tw-caret{ display:inline-block; width:.5em; height:1.05em; background:currentColor; margin-left:.06em; vertical-align:-.16em; animation:tw-blink .75s step-end infinite; }
@keyframes tw-blink{ from,to{opacity:1} 50%{opacity:0} }
@media (max-width:768px){
  /* Empilé : bloc image et bloc texte de hauteur identique à chaque chapitre */
  .about-chapter{ grid-template-columns:1fr; min-height:0; }
  .about-chapter .ac-img{ order:-1 !important; height:360px; min-height:360px; }
  .about-chapter .ac-text{ order:0 !important; min-height:360px; padding:28px 22px; justify-content:center; }
  .ac-text .prose, .ac-rev .ac-text .prose{ max-width:none; margin:0; font-size:16px; }
}