/*
Theme Name: Lianeo
Theme URI: https://lianeo.fr
Author: Lianeo
Description: Thème sur-mesure Lianeo - site complet (le HTML/CSS/JS de l'atelier), contenus saisis via 8 types de contenu dédiés (l'équipe ne touche jamais à la mise en page).
Version: 1.0.2
Requires PHP: 7.4
Text Domain: lianeo
*/

/* Le CSS des gabarits est chargé par fichier (assets/css/home.css pour la home) —
   ce fichier ne sert que d'en-tête de thème WordPress. */

/* ---- chrome commun (partials template-parts/chrome-*) ---- */
/* AUCUN débordement horizontal de la page, sur aucune page : les panneaux fermés (translate hors
   écran) élargissaient le document → iOS laissait « décaler » l'écran vers le fond quadrillé
   (retour interlocuteur, iPhone). clip (pas hidden) : le header sticky continue de fonctionner. */
html,body{overflow-x:clip}
/* Android Chrome agrandit parfois le texte de sa propre initiative (« font boosting ») dans les
   colonnes étroites : la mise en page saute. Neutralisé ici ; sans effet sur iOS et desktop. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.mark-round{border-radius:50%}
/* footer unifié sans .wrap : centrage garanti quel que soit le CSS de la page */
footer.site .fcols{max-width:1080px;margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px}
footer.site .fline{max-width:1080px;margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px}
/* toast (le partial footer l'émet sans styles inline — rse.css n'en avait pas) */
#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:var(--navy);color:var(--paper);font-family:var(--mono);font-size:12px;padding:11px 18px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:95;box-shadow:none}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* peau commune des feuilles latérales : quadrillage + voile papier (référence : feuilles
   histoire/secteurs). S'applique à TOUTES les .sheet ; la candidature s'en exclut (offre.css). */
aside.sheet{background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:9px 9px}
aside.sheet::before{content:"";position:absolute;inset:0;background:var(--paper);opacity:.9;pointer-events:none}
aside.sheet>*{position:relative}
/* (spécificité aside.sheet : gagne sur les raccourcis background:var(--paper) des CSS de page) */
/* indication discrète dans un label de formulaire (ex. formats/poids du CV) */
.fhint{font-weight:400;color:var(--ink-soft,#48617A);font-size:11px;letter-spacing:.02em}
/* info-bulles maison : les title natifs mettent ~1 s à apparaître (délai navigateur,
   incompressible) → data-tip, apparition en ~0,15 s, style blueprint. .tip-l = alignée à
   droite de l'élément (pour les éléments au bord droit de l'écran : arbre RSE, console). */
/* (en ::before : le ::after des liens de menu est déjà pris par le soulignage doré) */
[data-tip]{position:relative}
[data-tip]::before{content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);background:var(--navy,#003B5D);color:#fff;font-family:var(--sans,-apple-system,sans-serif);font-size:10px;font-weight:600;letter-spacing:.08em;line-height:1;padding:6px 9px 4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease .15s;z-index:96}
[data-tip].tip-l::before{left:auto;right:0;transform:none}
[data-tip].tip-b::before{bottom:auto;top:calc(100% + 9px)}   /* sous l'élément (icônes du menu, bord haut de l'écran) */
[data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1}
/* bouton d'envoi en attente du serveur : feedback IMMÉDIAT au clic — grisé, figé (plus de
   survol/clic possible) jusqu'à l'explosion ou l'erreur (retour interlocuteur 03.08) */
.btn.btn-wait{opacity:.55;pointer-events:none;cursor:default;transform:none;box-shadow:0 0 0 1.5px var(--navy,#003B5D)}
/* logo du footer : +25 % (50 → 62 px, demande interlocuteur 03.08) ; object-fit = jamais déformé */
footer.site .fcols .mark{width:62px;height:62px;object-fit:contain}
/* iOS crée parfois des liens (tél/SIREN détectés) : jamais de bleu système dans le footer navy */
footer.site .fline a{color:inherit;text-decoration:none}
/* Invite de la console : un VRAI <input> invisible superposé — sans lui, iOS n'ouvre pas son
   clavier (l'invite était une simple <div>). Ni display:none ni visibility:hidden : le champ doit
   rester focusable. Texte transparent : c'est le <span class="typed"> qui affiche la frappe. */
.term-end{position:relative}
.term-kbd{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px;-webkit-appearance:none;appearance:none}
.term-kbd:focus{outline:none}
.term-locked .term-kbd{pointer-events:none}
/* Logotype officiel dans le header (extrait de la charte LIANEO_CMJN.png, vraies lettres Acumin) :
   remplace le texte en police mono, qui ne correspondait pas au logo. Hauteur calée sur l'ancien
   rendu ; le <b> reste pour la structure et le repli. */
.brand b .wordmark{display:block;height:19px;width:auto;image-rendering:auto}
header.site.scrolled .brand b .wordmark{height:17px;transition:height .25s}
/* .li-row : rang des icônes du menu (LinkedIn + arbre RSE) — neutre sur desktop */
.li-row{display:contents}
/* ---- menu MOBILE (retours interlocuteur, iPhone) : collé au header quel que soit son état
   (top:100 %, fin du « trou » au scroll), items centrés et resserrés, icônes sur un rang ---- */
@media (max-width:980px){
  /* Panneau pleine largeur PAR CONTRAINTE (left/right:0 + margin:0), pas par largeur calculée :
     le margin-right:18px du menu desktop (espace avant le burger) restait appliqué au panneau
     ouvert → bande de 18 px de fond quadrillé à droite, à TOUTES les tailles d'écran. */
  header.site nav.menu.open{top:100%;left:0;right:0;margin:0;align-items:center;text-align:center;gap:10px;padding:18px 28px 24px}
  header.site nav.menu.open>a.btn{margin-left:0;margin-top:8px}
  header.site nav.menu.open .li-row{display:flex;gap:26px;justify-content:center;align-items:center;margin-top:10px}
  header.site nav.menu.open .li-row .li-ic{margin:0}
}
/* mobile : la barre tail-f flottante disparaît, remplacée par le bouton LOGS du header
   (retour interlocuteur : la barre mangeait l'écran et gênait les interactions) */
.logs-btn{display:none;margin-left:auto;margin-right:2px;background:none;border:none;font-family:var(--mono,monospace);font-size:11px;letter-spacing:.06em;word-spacing:-4px;color:var(--ink-soft,#48617A);padding:8px 6px;cursor:pointer} /* discret, façon invite - le MENU garde la primauté visuelle */
.logs-btn:active{color:var(--navy,#003B5D)}
.logs-btn+.burger{margin-left:0}
@media (max-width:980px){
  .logs-btn{display:block}
  #term:not(.open){display:none}
  /* header uniforme mobile : $ logs ouvre la console MÊME sur les pages qui la masquent
     sur desktop (déc. n°35 - amendée côté mobile, retour interlocuteur 04.08) */
  #term.open{display:block!important}
}
/* Turnstile : le widget (300 px, apparaît seulement si Cloudflare doute) occupe SA ligne -
   il ne pousse plus le bouton ENVOYER ni les champs (retour interlocuteur mobile). */
form .actions:has(.cf-turnstile),form .cand-foot:has(.cf-turnstile){flex-wrap:wrap}   /* le rang du bouton accepte le retour à la ligne quand le widget est là */
.cf-turnstile{flex-basis:100%;grid-column:1/-1;min-width:0}
.cf-turnstile iframe{max-width:100%;margin-bottom:4px}
@media (max-width:430px){.cf-turnstile{transform:scale(.85);transform-origin:0 50%}}
/* barre du haut OPAQUE sur mobile : la transparence (voulue sur PC) laissait voir le texte
   défiler derrière LIANEO + MENU quand le menu est ouvert (retour interlocuteur) */
@media (max-width:980px){
  header#hd.site{background:var(--paper,#F7F4ED);backdrop-filter:none}   /* #hd : gagne sur le rgba(.92) des CSS de page */
}
/* tap mobile sur le logo : pas de cadre fugace (iOS déclenche le contour focus au toucher) */
@media (pointer:coarse){
  .brand{-webkit-tap-highlight-color:transparent}
  .brand:focus-visible{outline:none}
}
/* Filigrane du hero : réservé aux écrans LARGES (≥ 1024 px). Sous ce seuil il n'a pas la place
   d'exister - mesuré à 760 px, il recouvrait le schéma FIG.1 (retour interlocuteur prod 05.08,
   fenêtre PC non maximisée ; seuil précédent : 720). Masqué aussi en paysage bas (téléphones). */
@media (max-width:1023px), (max-height:520px) and (orientation:landscape){
  .watermark{display:none}
}
/* Console tail-f : profondeur réglable (60 lignes par défaut) → le scroll interne devient LE geste
   de lecture de l'historique. Sans contain, arrivé en haut du feed, le défilement « chaînait » vers
   la page derrière la console (molette et tactile) - la page bougeait sous le terminal. */
.term-actus{overscroll-behavior:contain}
/* reduced-motion : feed instantané sur TOUTES les pages (l'override .line n'existait que dans
   home.css → sur les 9 autres, la cascade de révélation JS s'étirait jusqu'à 2,6 s). En atelier,
   les effets restent forcés ON côté JS ; ce filet CSS est celui sur lequel la prod s'appuiera. */
@media (prefers-reduced-motion:reduce){
  .term .line{opacity:1;transform:none}
}
/* ---- footer MOBILE : une colonne, tout centré (il reste long, mais droit) ---- */
@media (max-width:720px){
  footer.site .fcols{grid-template-columns:1fr;text-align:center;gap:26px}
  footer.site .fcols a{width:auto}
  footer.site .fcols .mark{margin:0 auto}
  footer.site .fline{text-align:center}
}