/*
Theme Name: Le Labo
Theme URI: https://pierrickvaroquier.fr
Author: Pierrick Varoquier
Description: Theme sur mesure pour Le Labo. Direction "machine a ecrire" : chasse fixe, angles vifs, ombres portees dures, ruban rouge. Remplace Elementor.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: le-labo
*/

/* ================================================================
   LE LABO — SYSTEME DE DESIGN
   Tokens globaux + base typographique. Les composants de page sont
   portes par .ll-page pour eviter les collisions avec les plugins.
   ================================================================ */

:root{
  color-scheme: light dark;

  --paper:    #FCFBF5;
  --paper-2:  #F1EDDF;
  --ink:      #161512;
  --ink-soft: #5A5546;
  --rule:     #C9C3AF;

  --red:    #E23A2E;
  --blue:   #2438C8;
  --yellow: #F4C81B;
  --green:  #12894F;
  --green-bg:#E6F0E4;
  --marker: rgba(244,200,27,.55);

  --edge:  1.6px solid var(--ink);
  --lift:  3px 3px 0 var(--ink);
  --lift-r:3px 3px 0 var(--red);

  --mono: "Space Mono", ui-monospace, "Courier New", monospace;
  --read: "Courier Prime", "Space Mono", ui-monospace, monospace;

  --content: 78ch;
  --wide: 1100px;

  --s0: 1rem;
  --s1: 1.15rem;
  --s2: 1.4rem;
  --s3: 1.8rem;
  --s4: clamp(2.1rem, 5.5vw, 3.4rem);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:    #15151A;
    --paper-2:  #1E1E25;
    --ink:      #ECEADF;
    --ink-soft: #9A9588;
    --rule:     #34343E;
    --red:    #FF5646;
    --blue:   #7C90FF;
    --yellow: #F6D23C;
    --green:  #46CE8E;
    --green-bg:#17251E;
    --marker: rgba(246,210,60,.20);
    --lift: 3px 3px 0 var(--ink);
    --lift-r:3px 3px 0 var(--red);
  }
}
:root[data-theme="dark"]{
  --paper:#15151A; --paper-2:#1E1E25; --ink:#ECEADF; --ink-soft:#9A9588; --rule:#34343E;
  --red:#FF5646; --blue:#7C90FF; --yellow:#F6D23C; --green:#46CE8E; --green-bg:#17251E;
  --marker:rgba(246,210,60,.20);
}

*,*::before,*::after{ box-sizing:border-box; }

/*
 * Garde-fou transitoire : tant qu'Elementor / Header Footer Elementor
 * restent actifs (retour arriere pendant la migration), on masque tout
 * bloc d'en-tete/pied de page global qu'ils injectent en dehors du
 * theme sur les pages en gabarit Canvas (entierement gerees par le
 * theme). A supprimer une fois Elementor desinstalle.
 */
body.page-template-canvas > [data-elementor-type],
body.page-template-canvas > .force-stretched-header,
body.page-template-canvas > .footer-width-fixer{
  display:none !important;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--read);
  font-size:var(--s0);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

h1,h2,h3,h4,h5,h6{
  font-family:var(--mono); font-weight:700; font-style:normal;
  text-transform:uppercase; letter-spacing:.03em; line-height:1.18;
  margin:0; text-wrap:balance;
}
p{ margin:0 0 1rem; }
a{ color:var(--blue); text-underline-offset:.15em; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2.5px solid var(--blue); outline-offset:2px;
}
strong,b{ font-weight:700; }
mark{
  background-color:transparent; color:inherit; padding:.02em .12em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background-image:linear-gradient(var(--marker), var(--marker));
  background-repeat:no-repeat; background-position:0 0; background-size:100% 100%;
}
/* le JS (reveal.js) ajoute .pre-sweep aux surlignages hors ecran au
   chargement, puis la retire quand ils entrent dans le viewport : le
   coup de feutre se pose au scroll. Sans JS ou avec un navigateur trop
   ancien, le surlignage reste visible par defaut (rien ne casse). */
@media (prefers-reduced-motion:no-preference){
  mark{ transition:background-size .5s steps(10); }
  mark.pre-sweep{ background-size:0% 100%; }
}
img{ max-width:100%; height:auto; }
hr{ border:0; border-top:3px double var(--ink); margin:2rem 0; }

/* ---------- gabarit / largeurs (support alignwide / alignfull) ---------- */
.ll-container{ max-width:var(--wide); margin-inline:auto; padding-inline:clamp(1.1rem,5vw,3rem); }

/* ================================================================
   CHROME DU SITE (header / nav / footer)
   ================================================================ */
.site-header{
  border-bottom:var(--edge); background:var(--paper);
}
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:.9rem;
}
.site-brand{
  font-family:var(--mono); font-weight:700; font-size:1.15rem;
  text-transform:uppercase; letter-spacing:.06em; text-decoration:none; color:var(--ink);
  display:inline-flex; align-items:center;
}
.site-brand .b{ background:var(--red); color:#FCFBF5; padding:0 .12em; }
/* Deux sources possibles pour .site-nav :
   - wp_nav_menu() (menu assigne)  -> <nav><ul class="site-nav-list"><li><a></nav>
   - wp_list_pages() (repli, title_li:'')  -> <nav><li><a></nav>, sans <ul>
   On neutralise les puces et on met le flex au bon niveau dans les deux cas. */
.site-nav{
  flex:1; display:flex; justify-content:flex-end; gap:.15rem; flex-wrap:nowrap;
  list-style:none; margin:0; padding:0;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.site-nav::-webkit-scrollbar{ display:none; }
.site-nav-list{
  list-style:none; margin:0; padding:0;
  display:flex; gap:.15rem; flex-wrap:nowrap;
}
.site-nav li{ list-style:none; margin:0; flex:none; }
.site-nav a{
  font-family:var(--mono); font-size:.74rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; text-decoration:none; color:var(--ink); white-space:nowrap;
  padding:.45rem .55rem; border:1.6px solid transparent; display:inline-block;
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav a[aria-current="page"]{ border-color:var(--ink); }
.nav-toggle{ display:none; font-family:var(--mono); font-weight:700; background:var(--yellow);
  border:var(--edge); padding:.4rem .7rem; cursor:pointer; text-transform:uppercase; font-size:.75rem; }

.site-footer{
  border-top:3px double var(--ink); margin-top:4rem;
  font-family:var(--mono); font-size:.76rem; color:var(--ink-soft); line-height:1.9;
}
.site-footer .ll-container{ padding-block:1.6rem 2.4rem; }
.site-footer a{ color:var(--ink-soft); }

@media (max-width:720px){
  .site-header .bar{ flex-wrap:wrap; }
  .nav-toggle{ display:inline-block; }

  .site-nav{
    display:none;
    /* remplace flex:1 / justify-content:flex-end / overflow-x:auto du
       bloc desktop : ici le panneau doit prendre toute la largeur, pas
       s'ajuster au contenu. */
    flex:0 0 100%;
    width:100%;
    max-width:100%;
    justify-content:flex-start;
    overflow-x:visible;
    margin-top:.9rem;
    padding-top:.8rem;
    border-top:var(--edge);
  }
  .site-nav.open{ display:flex; flex-direction:column; }

  .site-nav-list{ flex-direction:column; gap:0; width:100%; }
  .site-nav li{ width:100%; }
  .site-nav a{
    display:block; width:100%; box-sizing:border-box;
    padding:.9rem .3rem; font-size:.85rem;
    border:0; border-bottom:1.6px solid var(--rule);
  }
  .site-nav a:hover,
  .site-nav .current-menu-item > a,
  .site-nav .current_page_item > a,
  .site-nav a[aria-current="page"]{
    border-bottom-color:var(--ink); background:var(--paper-2);
  }
  .site-nav li:last-child a{ border-bottom:0; }
}

/* ================================================================
   CONTENU EDITORIAL GENERIQUE (page.php, articles)
   ================================================================ */
.entry{ padding-block:clamp(2rem,6vw,3.5rem); }
.entry .entry-title{ font-size:var(--s3); margin-bottom:1.4rem; }
.entry > *{ max-width:var(--content); margin-inline:auto; }
.entry > .alignwide{ max-width:var(--wide); }
.entry > .alignfull{ max-width:none; }
.entry h2{ font-size:var(--s2); margin:2rem 0 .8rem; }
.entry h3{ font-size:var(--s1); margin:1.6rem 0 .6rem; }
.entry ul,.entry ol{ padding-left:1.3rem; }
.entry li{ margin:.3rem 0; }
.entry blockquote{ border-left:6px solid var(--red); margin:1.4rem 0; padding:.6rem 0 .6rem 1.2rem;
  font-family:var(--mono); font-weight:700; }

/* ================================================================
   COMPOSANTS DE PAGE  (portee .ll-page)
   Repris du manuel de marque. Utilisables en blocs Gutenberg
   (className) ou dans un bloc HTML personnalise.
   ================================================================ */
.ll-page{ padding-bottom:64px; }
.ll-page .sheet{
  max-width:var(--wide);
  margin:0 auto;
  padding:clamp(1.4rem,5vw,3rem) clamp(1.1rem,5vw,3rem) 3rem;
  position:relative;
}
.ll-page .sheet::before{
  content:""; position:absolute; top:0; bottom:0;
  left:clamp(.5rem,3vw,1.9rem); width:2px; background:var(--red); opacity:.8;
}

.ll-page h1,.ll-page h2,.ll-page h3,.ll-page h4{ font-style:normal; }
.ll-page p{ margin:0; max-width:var(--content); }
.ll-page u{ text-decoration-thickness:1.5px; text-underline-offset:.2em; }

.ll-page .kicker{ font-family:var(--mono); font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; color:var(--red); }
.ll-page .mono{ font-family:var(--mono); }
.ll-page .sm{ font-size:.82rem; color:var(--ink-soft); }
.ll-page .cur{ display:inline-block; width:.55em; height:1em; background:var(--red);
  vertical-align:-.12em; margin-left:.12em; animation:ll-blink 1.05s steps(1) infinite; }
@keyframes ll-blink{ 50%{ opacity:0; } }

.ll-page .rule{ border:0; border-top:3px double var(--ink); margin:0; }

.ll-page main{ display:flex; flex-direction:column; gap:clamp(2.6rem,6vw,4rem); }
.ll-page section{ scroll-margin-top:1rem; }
.ll-page .sec-tab{ font-family:var(--mono); font-weight:700; font-size:.72rem;
  border:var(--edge); padding:.2rem .55rem; background:var(--yellow); color:#161512;
  display:inline-block; text-transform:uppercase; letter-spacing:.12em; }
.ll-page .sec h2{ font-size:var(--s3); margin:.7rem 0 .5rem; }
.ll-page .sec h2.long{ font-size:var(--s2); }
.ll-page .sec > .rule{ margin:.3rem 0 1.5rem; }
.ll-page .lede{ font-size:var(--s1); max-width:70ch; }
.ll-page .stack{ display:flex; flex-direction:column; gap:1.1rem; margin-top:1.2rem; }
.ll-page .stack.tight{ gap:.7rem; }

.ll-page .cols{ display:grid; gap:1.1rem; }
.ll-page .cols.c2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.ll-page .cols.c4{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }

.ll-page .value{ border:var(--edge); background:var(--paper-2); padding:1.1rem 1.2rem; }
.ll-page .value h3{ font-size:.95rem; margin-bottom:.5rem; }
.ll-page .value p{ font-size:.88rem; color:var(--ink-soft); margin:0; }

.ll-page .brandline{ font-family:var(--mono); font-weight:700; font-size:1.2rem;
  text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; }
.ll-page .brandline .b{ background:var(--red); color:#FCFBF5; padding:0 .12em; }

.ll-page .meta-row{ display:flex; flex-wrap:wrap; gap:.45rem; margin:1.3rem 0 1.4rem; }
.ll-page .chip{ font-family:var(--mono); font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; border:var(--edge); padding:.28rem .6rem; background:var(--paper); }
.ll-page .chip.red{ background:var(--red); color:#FCFBF5; border-color:var(--red); }
.ll-page .chip.green{ background:var(--green); color:#FCFBF5; border-color:var(--green); }

.ll-page h1.hero{ font-size:var(--s4); letter-spacing:.02em; display:flex; flex-wrap:wrap;
  align-items:center; gap:.5rem .6rem; }
/* le titre s'imprime a l'arrivee sur la page, comme un chariot qui
   avance ligne par ligne (revele par a-coups, pas un fondu). */
@keyframes ll-typein{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0% 0 0); } }
@media (prefers-reduced-motion:no-preference){
  .ll-page h1.hero{ animation:ll-typein .8s steps(16) both; }
}
.ll-page .stamp{ display:inline-block; border:2.5px solid var(--red); color:var(--red);
  font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  padding:.2rem .55rem; font-size:.7rem; transform:rotate(-3.5deg); }
.ll-page .stamp.blue{ border-color:var(--blue); color:var(--blue); transform:rotate(2.5deg); }
.ll-page .stamp.green{ border-color:var(--green); color:var(--green); transform:rotate(-2deg); }

.ll-page .hero-q{ font-size:var(--s1); margin-top:1.2rem; max-width:64ch; }
.ll-page .cta-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin:1.6rem 0 .8rem; }

.ll-page .key{ font-family:var(--mono); font-weight:700; font-size:.9rem;
  text-transform:uppercase; letter-spacing:.06em;
  background:var(--yellow); color:#161512; border:var(--edge);
  padding:.75rem 1.15rem; box-shadow:var(--lift); cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  transition:transform .04s steps(1), box-shadow .04s steps(1); }
.ll-page .key:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.ll-page .key:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
.ll-page .key--red{ background:var(--red); color:#FCFBF5; }
.ll-page .key--ghost{ background:transparent; box-shadow:none; }
.ll-page .key--ghost:hover{ box-shadow:none; background:var(--paper-2); }
.ll-page .key--white{ background:#FCFBF5; color:#161512; box-shadow:3px 3px 0 rgba(0,0,0,.35); }

.ll-page .tw{ list-style:none; margin:.7rem 0 0; padding:0; display:flex; flex-direction:column;
  gap:.45rem; max-width:var(--content); }
.ll-page .tw li{ padding-left:1.5rem; position:relative; }
.ll-page .tw li::before{ content:"-"; position:absolute; left:0; color:var(--red); font-weight:700; font-family:var(--mono); }
.ll-page .tw.arrow li::before{ content:"\203A"; color:var(--blue); font-size:1.1em; top:-.05em; }
.ll-page .tw.check li::before{ content:"[\2713]"; color:var(--green); font-size:.72em; top:.28em; letter-spacing:-.05em; }

.ll-page .punch{ border:var(--edge); border-left:6px solid var(--red); background:var(--paper-2);
  padding:1.1rem 1.3rem; font-family:var(--mono); font-weight:700; font-size:1.12rem;
  line-height:1.45; box-shadow:var(--lift); }
.ll-page .punch.blue{ border-left-color:var(--blue); }

.ll-page .band{ border:var(--edge); background:var(--red); color:#FCFBF5;
  padding:1.3rem 1.4rem; display:flex; justify-content:space-between; align-items:center;
  gap:1rem 1.4rem; flex-wrap:wrap; box-shadow:var(--lift); }
.ll-page .band.green{ background:var(--green); border-color:var(--green); }
.ll-page .band .t{ font-family:var(--mono); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:1.25rem; }
.ll-page .band .s{ font-family:var(--mono); font-size:.78rem; opacity:.9; display:block;
  margin-top:.2rem; text-transform:none; letter-spacing:0; }

.ll-page .steps{ display:flex; flex-direction:column; gap:1.1rem; }
.ll-page .step{ border:var(--edge); background:var(--paper-2); box-shadow:var(--lift); padding:1.3rem 1.4rem; }
.ll-page .step .head{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; }
.ll-page .step .no{ font-family:var(--mono); font-weight:700; font-size:1.6rem; color:var(--red); line-height:1; }
.ll-page .step h3{ font-size:1.2rem; }
.ll-page .step .oneline{ font-family:var(--mono); font-weight:700; color:var(--ink); margin-top:.5rem;
  text-transform:none; letter-spacing:0; font-size:.98rem; }
.ll-page .step p{ margin-top:.7rem; font-size:.95rem; }
.ll-page .step .kicker{ display:block; margin-top:1rem; }
.ll-page .result{ border:var(--edge); border-left:6px solid var(--green); background:var(--green-bg);
  padding:.85rem 1.05rem; margin-top:1rem; font-family:var(--mono); font-weight:700; font-size:.95rem;
  text-transform:none; letter-spacing:0; }
.ll-page .result b{ display:block; color:var(--green); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:.3rem; }

.ll-page .compare{ display:grid; grid-template-columns:1fr 1fr; border:var(--edge); box-shadow:var(--lift); }
.ll-page .compare > div{ padding:1.2rem 1.3rem; }
.ll-page .compare .old{ background:var(--paper); border-right:var(--edge); }
.ll-page .compare .new{ background:var(--paper-2); }
.ll-page .compare h3{ font-size:.95rem; margin-bottom:.8rem; }
.ll-page .compare .old h3{ color:var(--ink-soft); }
.ll-page .compare .new h3{ color:var(--green); }
.ll-page .compare ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; font-size:.9rem; }
.ll-page .compare li{ padding-left:1.5rem; position:relative; }
.ll-page .compare .old li{ color:var(--ink-soft); }
.ll-page .compare .old li::before{ content:"\2717"; position:absolute; left:0; color:var(--ink-soft); font-family:var(--mono); }
.ll-page .compare .new li::before{ content:"\2713"; position:absolute; left:0; color:var(--green); font-weight:700; font-family:var(--mono); }
@media (max-width:600px){
  .ll-page .compare{ grid-template-columns:1fr; }
  .ll-page .compare .old{ border-right:0; border-bottom:var(--edge); }
}

.ll-page .book-card{ border:var(--edge); background:var(--paper-2); box-shadow:var(--lift);
  padding:clamp(1.3rem,4vw,2rem); display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
.ll-page .book-card .key{ font-size:1rem; padding:.85rem 1.3rem; }
.ll-page .form-note{ font-family:var(--mono); font-size:.74rem; color:var(--ink-soft); }

/* ---------- formulaires (connexion, inscription, salons, messagerie, notes) ---------- */
.ll-page .field{ display:flex; flex-direction:column; gap:.4rem; width:100%; }
.ll-page .field label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.ll-page .field input,
.ll-page .field textarea,
.ll-page .field select{
  font-family:var(--mono); font-size:.9rem; color:var(--ink);
  background:var(--paper); border:var(--edge); padding:.6rem .75rem; width:100%;
}
.ll-page .field textarea{ min-height:110px; resize:vertical; font-family:var(--read); font-size:1rem; }
.ll-page .field input:focus,
.ll-page .field textarea:focus,
.ll-page .field select:focus{ outline:2.5px solid var(--blue); outline-offset:1px; }
.ll-page .field .sm{ margin-top:-.15rem; }

/* meme geste que les boutons : la carte s'enfonce comme une touche
   quand on passe dessus, plutot qu'un fondu ou un agrandissement. */
.ll-page .step,
.ll-page .value,
.ll-page .book-card{
  transition:transform .04s steps(1), box-shadow .04s steps(1);
}
.ll-page .step:hover,
.ll-page .value:hover,
.ll-page .book-card:hover{
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 var(--ink);
}

/* ---------- animations au scroll (reveal.js ajoute/retire .is-in) ----------
   Trois familles distinctes, chacune associee a un geste physique :
   - reveal-up   : la carte se pose (elle monte et se cale d'un coup sec)
   - reveal-stamp: le tampon/bandeau s'imprime (echelle + leger angle qui se redresse)
   - reveal-rule : le filet se trace comme une regle qu'on tire
   Etat replie uniquement si JS actif et prefers-reduced-motion l'autorise :
   sans JS ou en cas de defaillance, tout reste visible par defaut. */
@media (prefers-reduced-motion:no-preference){
  .ll-reveal-up{ opacity:0; transform:translateY(16px); transition:opacity .35s steps(6), transform .35s steps(6); }
  .ll-reveal-up.is-in{ opacity:1; transform:translateY(0); }

  .ll-reveal-stamp{ opacity:0; transform:scale(.9) rotate(-2.5deg); transition:opacity .25s steps(5), transform .25s steps(5); }
  .ll-reveal-stamp.is-in{ opacity:1; transform:scale(1) rotate(0deg); }

  .ll-reveal-rule{ transform:scaleX(0); transform-origin:left center; transition:transform .5s steps(10); }
  .ll-reveal-rule.is-in{ transform:scaleX(1); }
}

.ll-page .calendly-inline-widget{ width:100%; min-height:680px; border:var(--edge); background:var(--paper); }

.ll-page .sheet > footer{
  margin-top:3rem; border-top:3px double var(--ink); padding-top:1.3rem;
  font-family:var(--mono); font-size:.74rem; color:var(--ink-soft); line-height:1.8;
}

/* barre collante */
.ll-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--ink); color:var(--paper); border-top:2px solid var(--red);
  padding:.6rem clamp(.9rem,4vw,2rem);
  display:flex; gap:1rem; align-items:center; justify-content:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:.78rem;
  transform:translateY(102%); transition:transform .2s ease; }
.ll-sticky.show{ transform:translateY(0); }
.ll-sticky b{ color:var(--yellow); }
.ll-sticky .key{ padding:.5rem .9rem; font-size:.76rem; }

@media (prefers-reduced-motion:reduce){
  .ll-page .cur{ animation:none; }
  .ll-page .key,
  .ll-page .step,
  .ll-page .value,
  .ll-page .book-card{ transition:none; }
  .ll-sticky{ transition:none; }
}