/* L'atelier Coréen — feuille de styles partagée.
   Source unique : toute page du site lie ce fichier.
   Jetons de couleur dérivés du DSFR (voir PRD §11). */

:root{
  /* §11.2 — 1 ink, 1 paper, 2 greys, 1 accent. */
  /* Palette dérivée du Système de design de l’État (DSFR).
     Les valeurs marquées « DSFR » sont les jetons officiels, repris tels quels. */
  --paper:#FDFDFE;
  --paper-2:#F5F5FE;      /* DSFR blue-france-975 — bandeau froid */
  --paper-3:#FEF4F4;      /* DSFR red-marianne-975 — bandeau chaud, bas de page */
  --ink:#22224E;          /* encre : Bleu France désaturé, lisible en corps long */
  --grey-1:#4B4B72;       /* texte secondaire, 8.1:1 */
  --grey-2:#55557C;       /* micro-libellés, 7.0:1 */
  --rule:#E3E3FD;         /* DSFR blue-france-925 */
  --rule-strong:#CACAFB;  /* DSFR blue-france-850 */
  --accent:#000091;       /* DSFR Bleu France — liens, boutons, emphase. 14.7:1 */
  --accent-hover:#1212FF; /* DSFR sun-113 hover */
  --accent-lift:#6A6AF4;  /* DSFR blue-france-main-525 — décor uniquement */
  --accent-on-ink:#CACAFB;/* texte sur l’encre, 9.2:1 */
  --accent-soft:#ECECFE;  /* DSFR blue-france-950 */
  --red:#C9191E;          /* DSFR red-marianne-425 — grands corps uniquement */

  --step-0:1.125rem;  /* 18px body — §11.2 */
  --step-1:1.3125rem;
  --step-2:clamp(1.5rem, 2.4vw, 1.875rem);
  --step-3:clamp(2rem, 4vw, 3rem);
  --step-4:clamp(2.6rem, 6.2vw, 4.6rem);

  --sp:8px;
  --measure:64ch;
  --wrap:1180px;
  --gutter:clamp(20px, 5vw, 56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:var(--step-0);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* hanji-adjacent paper grain — felt, not seen (§11.1) */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

h1,h2,h3{font-family:Newsreader,"Iowan Old Style",Georgia,serif;font-weight:400;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}

.label{
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--grey-2);
}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:12px 18px;z-index:99;
}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--accent-lift);outline-offset:3px;border-radius:2px}

/* ── prototype notice ─────────────────────────────── */
.proto{
  background:var(--ink);color:#C6C6E8;font-size:.75rem;line-height:1.5;
  letter-spacing:.02em;
}
.proto .wrap{display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding-block:9px;flex-wrap:wrap}
.proto b{color:var(--paper);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.6875rem}
.proto button{
  background:none;border:1px solid #3A3A72;color:#C6C6E8;border-radius:2px;
  font:inherit;padding:4px 12px;cursor:pointer;min-height:28px;
}
.proto button:hover{border-color:#8A8AD6;color:var(--paper)}

/* ── header ───────────────────────────────────────── */
.site-head{border-bottom:1px solid var(--rule);position:relative;z-index:10}
.site-head .wrap{
  display:flex;align-items:center;gap:clamp(20px,4vw,56px);
  min-height:84px;padding-block:14px;
}
.brand{
  font-family:Newsreader,Georgia,serif;font-size:1.4375rem;letter-spacing:-.012em;
  text-decoration:none;line-height:1.15;white-space:nowrap;font-weight:400;
}
.brand span{
  display:block;font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:300;
  font-size:.8125rem;letter-spacing:.005em;color:var(--grey-2);margin-top:2px;
}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.site-nav .nav-links{display:flex;gap:clamp(14px,2.2vw,30px)}
/* scoped to the link lists so the CTA button keeps its own colours */
.nav-links a,.menu-panel a{
  text-decoration:none;font-size:.9375rem;color:var(--grey-1);
  padding:10px 0;display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease;
}
.nav-links a:hover,.menu-panel a:hover{color:var(--ink);border-bottom-color:var(--accent-lift)}

/* mobile disclosure menu */
.menu{display:none}
.menu>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 4px;font-size:.9375rem;color:var(--grey-1);
}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary .bars{display:block;width:20px;height:1px;background:currentColor;position:relative}
.menu>summary .bars::before,.menu>summary .bars::after{
  content:"";position:absolute;left:0;width:20px;height:1px;background:currentColor;
}
.menu>summary .bars::before{top:-6px}.menu>summary .bars::after{top:6px}
.menu[open]>summary{color:var(--ink)}
.menu-panel{
  position:absolute;left:0;right:0;top:100%;background:var(--paper);
  border-block:1px solid var(--rule);padding:8px var(--gutter) 20px;z-index:20;
}
.menu-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.menu-panel a{border-bottom:1px solid var(--rule);min-height:52px;width:100%;font-size:1.0625rem}
.menu-panel a:last-child{border-bottom:0}

@media (max-width:900px){
  .site-nav .nav-links{display:none}
  .menu{display:block}
  .site-head .wrap{position:relative}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 24px;border-radius:2px;
  font-size:.9375rem;font-weight:500;letter-spacing:.01em;text-decoration:none;
  border:1px solid var(--accent);background:var(--accent);color:var(--paper);
  transition:background .18s ease,border-color .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--ghost{background:none;color:var(--ink);border-color:var(--rule-strong)}
.btn--ghost:hover{background:none;color:var(--accent);border-color:var(--accent)}
.btn--light{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn--light:hover{background:var(--accent-lift);border-color:var(--accent-lift);color:var(--ink)}
.btn--sm{min-height:44px;padding:10px 18px;font-size:.875rem}
.cta-short{display:none}
@media (max-width:600px){
  .site-nav{gap:6px}
  .site-nav .btn--sm{padding:10px 13px;font-size:.8125rem}
  .cta-long{display:none}
  .cta-short{display:inline}
  .menu>summary .mtext{display:none}   /* icon alone — the label costs the right gutter */
  .menu>summary{padding:0 6px}
  .brand{font-size:1.25rem}
}

/* ── hero ─────────────────────────────────────────── */
.hero{padding-block:clamp(56px,8vw,104px) clamp(48px,6vw,80px)}
.hero .wrap{display:grid;gap:clamp(36px,5vw,72px);align-items:center}
@media (min-width:940px){.hero .wrap{grid-template-columns:1.35fr 1fr}}
.hero h1{
  font-size:var(--step-4);line-height:1.02;letter-spacing:-.022em;
  font-weight:300;max-width:15ch;margin-top:20px;
}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .sub{
  font-size:var(--step-1);line-height:1.55;color:var(--grey-1);
  max-width:46ch;margin-top:26px;font-weight:300;
}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

.portrait{margin:0;position:relative}
.portrait img{
  display:block;width:100%;height:auto;
  background:var(--paper-2);   /* holds the space while the file arrives */
}

/* ── credibility strip ────────────────────────────── */
.cred{background:var(--paper-2);border-block:1px solid var(--rule)}
.cred .wrap{
  padding-block:clamp(28px,4vw,44px);
  display:grid;gap:clamp(20px,3vw,48px);align-items:center;
}
@media (min-width:840px){.cred .wrap{grid-template-columns:1fr auto}}
.cred p{font-size:1.0625rem;line-height:1.6;color:var(--grey-1);max-width:62ch}
.cred strong{color:var(--ink);font-weight:500}
.cred .books{
  display:flex;align-items:baseline;gap:12px;padding-left:clamp(0px,3vw,32px);
  border-left:1px solid var(--rule-strong);
}
@media (max-width:839px){.cred .books{border-left:0;padding-left:0;border-top:1px solid var(--rule-strong);padding-top:20px}}
.cred .books .n{font-family:Newsreader,Georgia,serif;font-size:2.75rem;line-height:1;
  font-weight:300;color:var(--red)}
.cred .books .t{font-size:.9375rem;line-height:1.4;color:var(--grey-1);max-width:14ch}

/* ── section frame ────────────────────────────────── */
section{padding-block:clamp(56px,8vw,110px)}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head h2{font-size:var(--step-3);line-height:1.08;letter-spacing:-.018em;font-weight:300;max-width:20ch}
.sec-head p{color:var(--grey-1);max-width:56ch;font-size:1.0625rem}
.rule-top{border-top:1px solid var(--rule)}

/* ── three doors ──────────────────────────────────── */
.doors{display:grid;gap:20px}
@media (min-width:900px){.doors{grid-template-columns:1.5fr 1fr 1fr}} /* §6.1 — corporate 1.5× */
.door{
  border:1px solid var(--rule);padding:clamp(26px,3vw,38px);
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .18s ease;
}
.door:hover{border-color:var(--rule-strong)}
.door h3{font-size:var(--step-2);line-height:1.15;letter-spacing:-.012em;font-weight:400}
/* :not(.label) est nécessaire : sans lui, cette règle (une classe + un type,
   spécificité 0,1,1) l'emporte sur .label seule (0,1,0) et écrase sa taille
   de police et sa graisse. Pire, elle donne aussi flex:1 à l'étiquette, qui
   se met alors à grandir pour combler l'espace au lieu de la vraie
   description — d'où des étiquettes de hauteur très variable d'une carte
   à l'autre selon la longueur de leur texte. */
.door p:not(.label){color:var(--grey-1);font-size:1rem;line-height:1.6;flex:1}
.door .go{
  text-decoration:none;font-size:.9375rem;font-weight:500;color:var(--accent);
  display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;
}
.door .go svg{transition:transform .18s ease}
.door:hover .go svg{transform:translateX(4px)}
.door--lead{
  background:var(--ink);border-color:var(--ink);color:var(--paper);
}
.door--lead h3{color:var(--paper)}
/* :not(.label) est repris de .door p:not(.label) ci-dessus : à spécificité
   égale (0,2,1) c'est l'ordre du fichier qui tranche, et cette règle gagne.
   Sans lui, .door--lead p (0,1,1) perdait et la description héritait de
   var(--grey-1) — de l'encre sombre sur fond d'encre, illisible. */
.door--lead p:not(.label){color:var(--paper)}
.door--lead .label{color:var(--accent-on-ink)}
.door--lead .go{color:var(--accent-on-ink)}
.door--lead:hover{border-color:var(--ink)}
.door--lead ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 8px}
.door--lead li{
  font-size:.8125rem;color:#BEBEE4;border:1px solid #3A3A72;padding:4px 10px;border-radius:2px;
}

/* ── ouvrages ─────────────────────────────────────── */
.books-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,36px)}
@media (min-width:760px){.books-grid{grid-template-columns:repeat(4,1fr)}}
.book{display:flex;flex-direction:column;gap:14px;text-decoration:none}
.cover{
  aspect-ratio:2/3;position:relative;overflow:hidden;
  border:1px solid var(--rule);background:var(--paper-2);
  transition:transform .18s ease;
}
/* L'image est sortie du flux : ses proportions intrinsèques (de 0,61 à 0,86
   selon les couvertures) ne doivent jamais dicter la hauteur du cadre, sans
   quoi la rangée se désaligne. Le cadre 2:3 impose la régularité demandée
   par le PRD §8.2 ; « contain » garantit qu'aucune couverture n'est rognée. */
.cover img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;
}
.book:hover .cover{transform:translateY(-4px)}
/* Les aplats de couleur servaient de couvertures fictives ; les vraies
   images ont pris leur place, un seul passe-partout neutre suffit. */
.book .meta{font-size:.875rem;color:var(--grey-2);line-height:1.5}
.book .meta .bt{display:block;color:var(--ink);font-size:1rem;margin-bottom:2px}
.book .ext{font-size:.875rem;color:var(--accent);display:inline-flex;gap:6px;align-items:center;
  min-height:32px}

/* ── bio ──────────────────────────────────────────── */
.bio{background:var(--paper-2);border-block:1px solid var(--rule)}
.bio .wrap{display:grid;gap:clamp(30px,4vw,64px);align-items:center}
@media (min-width:880px){.bio .wrap{grid-template-columns:.85fr 1.15fr}}
.bio .shot{
  aspect-ratio:5/4;background:var(--paper);border:1px solid var(--rule);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;padding:24px;
}
.bio .shot .ph-icon{width:30px;height:30px;color:var(--rule-strong)}
.bio .shot .cap{font-size:.8125rem;color:var(--grey-2);max-width:24ch;line-height:1.45}
.bio h2{font-size:var(--step-2);line-height:1.15;font-weight:400;letter-spacing:-.012em;margin-bottom:18px}
.bio p{color:var(--grey-1);line-height:1.7;max-width:56ch;margin-bottom:16px}
.bio .go{text-decoration:none;color:var(--accent);font-weight:500;font-size:.9375rem;
  display:inline-flex;gap:8px;align-items:center;min-height:44px}

/* ── témoignages ──────────────────────────────────── */
.quotes{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:820px){.quotes{grid-template-columns:1fr 1fr}}
.quote{display:flex;flex-direction:column;gap:20px}
.quote blockquote{
  margin:0;font-family:Newsreader,Georgia,serif;font-weight:300;
  font-size:clamp(1.25rem,2.1vw,1.5rem);line-height:1.42;letter-spacing:-.008em;
}
.quote figcaption{
  font-size:.875rem;color:var(--grey-2);line-height:1.5;
  padding-top:16px;border-top:1px solid var(--rule);
}
.quote figcaption b{display:block;color:var(--ink);font-weight:500;font-size:.9375rem;margin-bottom:2px}

/* ── closing CTA ──────────────────────────────────── */
.close{background:var(--paper-3);border-top:1px solid var(--rule);text-align:center}
.close .wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.close h2{font-size:var(--step-3);line-height:1.1;font-weight:300;letter-spacing:-.018em;max-width:18ch}
.close p{color:var(--grey-1);max-width:48ch;margin-top:10px}
.close .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.close .reassure{
  margin-top:22px;font-size:.875rem;color:var(--grey-2);max-width:none;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;
}
.close .reassure span{display:inline-flex;gap:8px;align-items:center}
.dot{width:3px;height:3px;border-radius:50%;background:var(--rule-strong);display:inline-block}

/* ── footer ───────────────────────────────────────── */
.site-foot{border-top:1px solid var(--rule);padding-block:clamp(40px,5vw,64px) 32px}
.foot-grid{display:grid;gap:32px}
@media (min-width:760px){
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr}
  /* Un fr hors repeat() empêche auto-fit/auto-fill de calculer un nombre
     de pistes (testé : ça écrase tout le gabarit sur une seule piste) —
     donc un gabarit à deux colonnes se déclare explicitement ici plutôt
     qu'en essayant de le déduire automatiquement. S'applique quand la
     grille n'a que deux enfants (page coréenne, dont la 3ᵉ colonne du
     pied de page est masquée en 2026-09 pour la même raison que les
     liens légaux du pied de page français). */
  .foot-grid:has(> :nth-child(2):last-child){grid-template-columns:1.4fr 1fr}
}
.site-foot h4{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-2);font-weight:500;margin:0 0 14px}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.site-foot ul a{text-decoration:none;color:var(--grey-1);font-size:.9375rem;
  display:inline-flex;min-height:36px;align-items:center;transition:color .18s ease}
.site-foot ul a:hover{color:var(--accent)}
.site-foot .brand{color:var(--ink);transition:color .18s ease}
.site-foot .brand:hover{color:var(--accent)}
.site-foot .about p{color:var(--grey-1);font-size:.9375rem;line-height:1.6;max-width:38ch;margin-top:10px}
.legal{
  margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.8125rem;color:var(--grey-2);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}
/* single restrained load sequence — §11.2 caps motion at 200ms, transform/opacity only */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(10px);animation:rise .2s ease-out forwards}
  .rise:nth-child(1){animation-delay:.02s}
  .d1{animation-delay:.06s}.d2{animation-delay:.10s}.d3{animation-delay:.14s}.d4{animation-delay:.18s}
  @keyframes rise{to{opacity:1;transform:none}}
}


/* ══ état actif de la navigation ══════════════════════════ */
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.menu-panel a[aria-current="page"]{color:var(--accent)}

/* ══ en-tête de page intérieure ═══════════════════════════ */
.page-head{padding-block:clamp(44px,6vw,76px) clamp(28px,4vw,44px);border-bottom:1px solid var(--rule)}
.page-head .wrap{display:grid;gap:clamp(24px,4vw,60px);align-items:start}
@media (min-width:900px){.page-head .wrap{grid-template-columns:1.25fr .85fr}}
.page-head h1{
  font-family:Newsreader,Georgia,serif;font-weight:300;
  font-size:clamp(2rem,4.4vw,3.15rem);line-height:1.06;letter-spacing:-.02em;
  margin:14px 0 0;max-width:17ch;
}
.page-head h1 em{font-style:italic;color:var(--accent)}
.page-head .lede{
  font-size:clamp(1.0625rem,1.6vw,1.1875rem);line-height:1.6;color:var(--grey-1);
  max-width:52ch;margin:0;font-weight:300;
}
@media (min-width:900px){.page-head .lede{padding-top:52px}}

/* fil d’ariane */
.crumbs{font-size:.8125rem;color:var(--grey-2);margin:0 0 4px}
.crumbs a{color:var(--grey-2);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.crumbs a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.crumbs span{margin:0 7px;opacity:.6}

/* ══ modules / formules numérotés ═════════════════════════ */
.modules{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:5px;overflow:hidden}
.module{background:var(--surface,var(--paper));padding:clamp(22px,3vw,32px)}
.module{background:var(--paper)}
.module .m-top{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.module .m-n{
  font-family:"Libre Franklin",sans-serif;font-size:.6875rem;letter-spacing:.16em;
  color:var(--accent);font-weight:600;
}
.module h3{margin:0;font-family:Newsreader,Georgia,serif;font-weight:400;
  font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.2;letter-spacing:-.01em}
.module .m-meta{
  font-size:.8125rem;color:var(--grey-2);display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-bottom:14px;
}
.module p{color:var(--grey-1);font-size:1rem;line-height:1.62;max-width:64ch;margin:0 0 12px}
.module ul{margin:0;padding-left:1.1em;max-width:62ch}
.module li{color:var(--grey-1);font-size:.9375rem;margin-bottom:5px}
.module li::marker{color:var(--accent)}

/* ══ grille de formules tarifaires ════════════════════════ */
.formulas{display:grid;gap:18px}
@media (min-width:820px){.formulas{grid-template-columns:repeat(3,1fr)}}
.formula{border:1px solid var(--rule);border-radius:5px;padding:clamp(22px,3vw,30px);
  display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.formula.is-lead{border-color:var(--accent);border-width:1px;box-shadow:0 0 0 1px var(--accent)}
.formula h3{margin:0;font-family:Newsreader,Georgia,serif;font-weight:400;font-size:1.375rem;line-height:1.2}
.formula .price{font-family:Newsreader,Georgia,serif;font-size:1.75rem;font-weight:300;color:var(--ink);line-height:1}
.formula .price small{font-family:"Libre Franklin",sans-serif;font-size:.8125rem;color:var(--grey-2);font-weight:400}
.formula p{color:var(--grey-1);font-size:.9375rem;line-height:1.6;margin:0;flex:1}
.formula ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.formula li{font-size:.9375rem;color:var(--grey-1);padding-left:20px;position:relative}
.formula li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:1px;background:var(--accent)}

/* Alignement des puces entre cartes sœurs (cours-de-coreen uniquement,
   sur .formulas--cards) : sans cela, chaque description en flex:1 comble
   l'espace restant de SA propre carte, et la carte au texte le plus long
   (la moins d'espace à combler) affiche ses puces plus haut que les deux
   autres. Le subgrid partage la hauteur de la rangée « description » entre
   les trois cartes, ce qui aligne les listes sur la carte qui en a besoin. */
@media (min-width:820px){
  .formulas--cards{grid-template-rows:auto auto 1fr}
  .formulas--cards .formula{display:grid;grid-template-rows:subgrid;grid-row:span 3}
  .formulas--cards .formula p:not(.price){flex:none;align-self:start}
  .formulas--cards .formula ul{align-self:start}
}

/* ══ FAQ ══════════════════════════════════════════════════ */
.faq{border-top:1px solid var(--rule);max-width:74ch}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
  font-size:1.0625rem;line-height:1.45;font-weight:500;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:26px;width:9px;height:9px;
  border-right:1.5px solid var(--grey-2);border-bottom:1.5px solid var(--grey-2);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open] summary{color:var(--accent)}
.faq .a{padding:0 0 20px;color:var(--grey-1);max-width:66ch}
.faq .a p{margin:0 0 10px}
.faq .a p:last-child{margin:0}

/* ══ bandeau de rappel ════════════════════════════════════ */
.callout{
  border-left:2px solid var(--accent);background:var(--accent-soft);
  padding:20px 24px;border-radius:0 4px 4px 0;max-width:74ch;
}
.callout p{margin:0 0 8px;color:var(--ink)}
.callout p:last-child{margin:0}
.callout .lbl{
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  font-weight:600;display:block;margin-bottom:8px;
}

/* ══ chronologie (profil) ═════════════════════════════════ */
.timeline{list-style:none;margin:0;padding:0;max-width:70ch}
.timeline li{
  display:grid;grid-template-columns:76px 1fr;gap:20px;
  padding:16px 0;border-top:1px solid var(--rule);
}
.timeline li:last-child{border-bottom:1px solid var(--rule)}
.timeline .yr{
  font-family:"Libre Franklin",sans-serif;font-size:.8125rem;color:var(--accent);
  font-weight:600;letter-spacing:.02em;padding-top:2px;
}
.timeline .ev strong{display:block;font-weight:500;margin-bottom:2px}
.timeline .ev span{color:var(--grey-1);font-size:.9375rem}
@media (max-width:560px){
  .timeline li{grid-template-columns:1fr;gap:4px}
}

/* ══ formulaire ═══════════════════════════════════════════ */
.form{max-width:660px}
.fieldset{border:0;margin:0 0 30px;padding:0}
.fieldset legend{
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2);
  font-weight:600;margin-bottom:14px;padding:0;
}
.field{margin-bottom:18px}
.field label{display:block;font-size:.9375rem;font-weight:500;margin-bottom:6px}
.field .hint{display:block;font-size:.8125rem;color:var(--grey-2);margin-bottom:6px;font-weight:400}
.field .req{color:var(--accent);margin-left:2px}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=date],.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-strong);border-radius:3px;
  padding:11px 13px;min-height:48px;transition:border-color .18s ease,box-shadow .18s ease;
}
.field textarea{min-height:120px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.choices{display:grid;gap:10px}
@media (min-width:620px){.choices{grid-template-columns:1fr 1fr}}
.choice{
  display:flex;gap:11px;align-items:flex-start;
  border:1px solid var(--rule-strong);border-radius:4px;padding:13px 15px;cursor:pointer;
  transition:border-color .18s ease,background .18s ease;min-height:48px;
}
.choice:hover{border-color:var(--accent-lift)}
.choice input{margin:2px 0 0;accent-color:var(--accent);width:17px;height:17px;flex:none}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.choice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.choice .c-t{font-weight:500;font-size:.9375rem;display:block}
.choice .c-d{font-size:.8125rem;color:var(--grey-2);display:block;margin-top:1px}
.branch{display:none}
.branch.is-on{display:block}
.consent{display:flex;gap:11px;align-items:flex-start;margin-bottom:22px}
.consent input{margin:3px 0 0;accent-color:var(--accent);width:17px;height:17px;flex:none}
.consent label{font-size:.875rem;color:var(--grey-1);line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ══ blocs d’aide latéraux ════════════════════════════════ */
.aside-card{
  border:1px solid var(--rule);border-radius:5px;padding:24px;background:var(--paper-2);
}
.aside-card h3{margin:0 0 10px;font-family:Newsreader,Georgia,serif;font-weight:400;font-size:1.25rem}
.aside-card p{font-size:.9375rem;color:var(--grey-1);line-height:1.6;margin:0 0 10px}
.aside-card p:last-child{margin:0}
.aside-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.aside-card li{font-size:.9375rem;color:var(--grey-1)}

/* ══ mise en page à deux colonnes ═════════════════════════ */
.split{display:grid;gap:clamp(30px,4vw,60px);align-items:start}
@media (min-width:940px){.split{grid-template-columns:1.6fr .9fr}}

/* ══ page légale ══════════════════════════════════════════ */
.legal-doc{max-width:70ch}
.legal-doc h2{
  font-family:Newsreader,Georgia,serif;font-weight:400;font-size:1.5rem;
  margin:36px 0 12px;letter-spacing:-.01em;
}
.legal-doc h2:first-child{margin-top:0}
.legal-doc p,.legal-doc li{color:var(--grey-1)}
.legal-doc dl{margin:0 0 18px;display:grid;gap:2px}
.legal-doc dt{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2);margin-top:12px}
.legal-doc dd{margin:0;color:var(--ink)}
.todo{
  background:var(--paper-3);border-left:2px solid var(--red);padding:3px 9px;
  border-radius:0 3px 3px 0;font-size:.9375rem;color:var(--ink);display:inline-block;
}


/* ══ galerie photo (emplacements à remplir) ═══════════════ */
/* colonnes fixes plutôt qu'auto-fit : avec quatre photos, auto-fit créait
   une cinquième piste vide et décalait la rangée. */
.gallery{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:620px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery figure{margin:0}
.gallery .ph{
  aspect-ratio:4/3;background:var(--paper-2);border:1px dashed var(--rule-strong);
  border-radius:4px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;padding:18px;
}
.gallery .ph svg{width:26px;height:26px;color:var(--rule-strong)}
.gallery .ph .label{color:var(--grey-2)}
.gallery figcaption{font-size:.8125rem;color:var(--grey-2);margin-top:9px;line-height:1.45}
/* height:auto est indispensable : les attributs width/height du HTML posent
   une hauteur définie, et aspect-ratio est ignoré tant que les deux dimensions
   le sont. Sans cela, chaque photo garde son propre format et la rangée
   devient irrégulière. */
.gallery img{
  width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;object-position:center 35%;
  border-radius:4px;display:block;background:var(--paper-2);
}


/* ══ bandeau photo large (accueil) ════════════════════════ */
.shot-wide{margin:0}
/* height:auto obligatoire : les attributs width/height du HTML posent une
   hauteur définie et figeraient l'image à sa taille de fichier. */
.shot-wide img{width:100%;height:auto;display:block;border-radius:4px;background:var(--paper)}
.shot-wide figcaption{font-size:.8125rem;color:var(--grey-2);margin-top:10px;line-height:1.45}


/* La photo de la remise de prix est verticale : le cadrage par défaut
   (centre 35 %) ne montrerait que l'écran. On descend le point d'ancrage. */
.gallery img.crop-low{object-position:center 62%}


/* ══ sélecteur de langue ══════════════════════════════════ */
.lang{display:flex;align-items:center;gap:2px;font-size:.75rem;letter-spacing:.04em}
.lang a{
  color:var(--grey-2);text-decoration:none;padding:5px 7px;border-radius:3px;
  min-height:auto;transition:color .18s ease,background .18s ease;
}
.lang a:hover{color:var(--accent);background:var(--accent-soft)}
.lang a[aria-current="true"]{color:var(--ink);font-weight:600}
.lang i{font-style:normal;color:var(--rule-strong)}
@media (max-width:900px){.site-nav .lang{display:none}}
.menu-panel .lang{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);gap:6px}
.menu-panel .lang a{font-size:.875rem}

/* la page coréenne : une police qui couvre le hangeul, chargée là seulement */
html[lang="ko"] body{font-family:"Noto Sans KR","Libre Franklin",-apple-system,BlinkMacSystemFont,sans-serif}
html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] h3,html[lang="ko"] .brand{
  font-family:"Noto Serif KR",Newsreader,Georgia,serif;font-weight:400;
}
html[lang="ko"] .page-head h1{letter-spacing:-.01em;line-height:1.25;max-width:20ch}
/* keep-all doit couvrir les titres aussi : sans lui le navigateur coupe
   à l'intérieur d'un mot coréen (« 한 | 국과 »), ce qui le rend illisible. */
html[lang="ko"] p,html[lang="ko"] li,
html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] h3,
html[lang="ko"] .lede,html[lang="ko"] .sub{word-break:keep-all;overflow-wrap:break-word}