/*
Theme Name: Tom Lionne
Theme URI: https://tomlionne.com
Author: Tom Lionne
Description: Theme sur mesure pour tomlionne.com — conseil SEO et blog. Sans page builder, sans dependance.
Version: 1.5.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: tomlionne
*/

/* ============================================================
   La direction artistique est tiree de la photo du portrait :
   olive profond des palmes, brun du bois, gris chauds du lin.
   ============================================================ */

@font-face{font-family:'Newsreader';src:url('assets/fonts/newsreader-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('assets/fonts/newsreader-400i.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Newsreader';src:url('assets/fonts/newsreader-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Familjen';src:url('assets/fonts/familjen-grotesk-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}

:root{
  --olive:#2e361d;        /* palmes : fond signature */
  --olive-2:#3d4a28;
  --olive-clair:#5f7240;
  --bois:#76533a;         /* table basse : accent */
  --bois-clair:#9a6e4a;
  --bois-pale:#cbab8c;
  --encre:#1a1713;        /* la chemise */
  --gris:#6b675e;
  --gris-clair:#9a968c;
  --papier:#f2f1ec;       /* le lin, cote clair */
  --papier-2:#e8e6de;
  --trait:#d9d6cc;
  --blanc:#fff;

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Familjen',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --wrap:1180px;
  --lecture:700px;
  --marge:clamp(20px,5vw,48px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

body{margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--serif);font-size:18px;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:600;line-height:1.12;
  letter-spacing:-.015em;text-wrap:balance}
p{margin:0 0 1.15em}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--bois);color:var(--papier)}

.tl-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge)}
.tl-sr{position:absolute;left:-9999px;top:0}
.tl-sr:focus{left:12px;top:12px;z-index:99;background:var(--encre);color:var(--papier);
  padding:12px 18px;font-family:var(--sans);font-size:14px}

/* --- libelle de section : petite capitale + filet bois -------------------- */
.tl-lab{display:block;font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bois);margin:0 0 14px}
.tl-lab--clair{color:var(--bois-pale)}
.tl-lab::after{content:"";display:block;width:38px;height:2px;background:currentColor;margin-top:10px}

/* ============================ en-tete ==================================== */

.tl-tete{position:sticky;top:0;z-index:40;background:rgba(242,241,236,.92);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--trait)}
.tl-tete__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge);
  display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px}
.tl-logo{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.02em;
  text-decoration:none;color:var(--encre);white-space:nowrap}
.tl-logo em{font-style:italic;font-weight:400;color:var(--bois)}

.tl-nav{display:flex;align-items:center;gap:28px}
.tl-nav a{font-family:var(--sans);font-size:14px;letter-spacing:.02em;text-decoration:none;
  color:var(--encre);padding:6px 0;position:relative}
.tl-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--bois);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.tl-nav a:hover::after,.tl-nav a[aria-current]::after{transform:scaleX(1)}
.tl-nav a.tl-nav__lang{display:inline-flex;align-items:center}
.tl-drapeau{display:block;width:22px;height:15px;border-radius:2px;box-shadow:0 0 0 1px var(--trait)}

.tl-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14px;
  letter-spacing:.03em;text-decoration:none;padding:12px 24px;border:1.5px solid var(--olive);
  background:var(--olive);color:var(--papier);
  transition:background .24s ease,color .24s ease,border-color .24s ease}
.tl-btn:hover{background:var(--bois);border-color:var(--bois);color:var(--blanc)}
/* la fleche avance au survol, meme geste que les rangs « guides » */
.tl-btn__fl{display:inline-block;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.tl-btn:hover .tl-btn__fl{transform:translateX(4px)}
.tl-btn--vide{background:transparent;color:var(--encre)}
.tl-btn--vide:hover{background:var(--encre);border-color:var(--encre);color:var(--papier)}
.tl-btn--clair{background:var(--papier);border-color:var(--papier);color:var(--olive)}
.tl-btn--clair:hover{background:var(--bois-pale);border-color:var(--bois-pale);color:var(--encre)}
.tl-nav a.tl-btn::after{display:none}
.tl-nav a.tl-btn{color:var(--papier);padding:12px 22px}
.tl-nav a.tl-btn:hover{color:var(--blanc)}

.tl-burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--encre)}
.tl-burger span{display:block;width:22px;height:1.5px;background:currentColor;margin:5px 0}

/* menu Outils : deroulant au survol (souris), focus-within (clavier), data-ouvert (tactile) */
.tl-nav__grp{position:relative}
.tl-nav__dec{font-family:var(--sans);font-size:14px;letter-spacing:.02em;color:var(--encre);
  background:none;border:0;padding:6px 0;cursor:pointer;position:relative}
.tl-nav__dec::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--bois);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.tl-nav__grp:hover .tl-nav__dec::after,.tl-nav__grp:focus-within .tl-nav__dec::after,
.tl-nav__dec.actif::after{transform:scaleX(1)}
.tl-nav__pointe{font-size:10px;color:var(--bois)}
/* intitule cliquable (lien vers le hub) + fleche qui ouvre le panneau */
.tl-nav__tete{display:flex;align-items:center;gap:3px}
.tl-nav__bascule{background:none;border:0;padding:6px 2px;cursor:pointer;line-height:1;color:var(--bois)}
.tl-ssmenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  padding-top:14px;display:none;z-index:50}
.tl-nav__grp:hover .tl-ssmenu,.tl-nav__grp:focus-within .tl-ssmenu,
.tl-nav__grp[data-ouvert] .tl-ssmenu{display:block}
.tl-ssmenu__in{background:var(--papier);border:1px solid var(--trait);
  box-shadow:0 18px 40px rgba(26,23,19,.12);padding:10px 0;min-width:250px}
.tl-nav .tl-ssmenu__in a{display:block;padding:9px 24px;white-space:nowrap}
.tl-nav .tl-ssmenu__in a::after{display:none}
.tl-nav .tl-ssmenu__in a:hover{background:var(--papier-2)}
.tl-nav .tl-ssmenu__in a[aria-current]{color:var(--bois)}
/* deroulant large : les specialites, groupees par famille sur trois colonnes.
   Le panneau est centre sous son bouton, on le borne pour ne pas deborder. */
.tl-ssmenu--large{width:min(880px,calc(100vw - 32px));max-width:none}
.tl-ssmenu--large .tl-ssmenu__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:2px 24px;padding:18px 22px;align-items:start}
.tl-ssmenu__t{display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris-clair);padding:0 8px;margin:0 0 7px}
.tl-nav .tl-ssmenu--large .tl-ssmenu__in a{padding:7px 8px;white-space:normal}
/* Outils gratuits et Avis outils : a droite du menu, le panneau s'aligne sur
   le bord droit de son bouton au lieu d'etre centre, sinon il deborde. */
.tl-ssmenu--droite{left:auto;right:-24px;transform:none;
  width:min(calc(var(--tl-cols,3) * 210px + 44px),calc(100vw - 32px))}
.tl-ssmenu--droite .tl-ssmenu__in{grid-template-columns:repeat(var(--tl-cols,3),minmax(0,1fr))}
.tl-nav .tl-ssmenu--large .tl-ssmenu__in a.tl-ssmenu__tous{grid-column:1/-1;margin-top:10px;
  padding:12px 8px 2px;border-top:1px solid var(--trait);color:var(--bois)}

/* ============================ heros ====================================== */
/* Le panneau olive et la photo se chevauchent : le titre mord sur l'image,
   c'est le geste editorial qui porte la page. */

.tl-heros{background:var(--olive);color:var(--papier);position:relative;overflow:hidden}
.tl-heros__in{display:grid;grid-template-columns:1fr minmax(300px,44vw);
  align-items:stretch;gap:0;min-height:min(88vh,760px)}
.tl-heros__txt{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,8vw,96px) clamp(28px,4vw,56px) clamp(56px,8vw,96px)
          max(var(--marge),calc((100vw - var(--wrap))/2 + var(--marge)))}
.tl-heros h1{font-size:clamp(40px,6.4vw,76px);line-height:1.03;letter-spacing:-.028em;
  margin:0 0 22px;max-width:12ch}
.tl-heros h1 em{font-style:italic;font-weight:400;color:var(--bois-pale)}
.tl-heros__chapo{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:#d9d8cf;
  max-width:44ch;margin:0 0 32px}
.tl-heros__actions{display:flex;flex-wrap:wrap;gap:14px}

.tl-heros__photo{position:relative;overflow:hidden}
.tl-heros__photo img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:52% 16%}
/* voile olive en bas de l'image : la photo se fond dans le panneau */
.tl-heros__photo::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;
  background:linear-gradient(to top,var(--olive),transparent);pointer-events:none}

/* ---- bandeau de preuve ---- */
.tl-preuve{background:var(--olive-2);color:var(--papier);border-top:1px solid rgba(203,171,140,.22)}
.tl-preuve__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge);
  display:grid;grid-template-columns:repeat(3,1fr)}
.tl-preuve__c{padding:24px 0;display:flex;flex-direction:column;gap:6px;justify-content:center}
.tl-preuve__c+.tl-preuve__c{border-left:1px solid rgba(203,171,140,.22);padding-left:32px}
.tl-preuve__n{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.25;
  font-variant-numeric:tabular-nums;color:var(--bois-pale);text-wrap:balance}
.tl-preuve__l{font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:#c2c0b6}

/* ============================ sections ================================== */

.tl-sect{padding:clamp(64px,9vw,112px) 0}
[id]{scroll-margin-top:92px}
.tl-sect--olive{background:var(--olive);color:var(--papier)}
.tl-sect--papier2{background:var(--papier-2)}
.tl-sect__tete{max-width:var(--wrap);margin:0 auto clamp(36px,5vw,56px);padding:0 var(--marge)}
.tl-sect__tete h2{font-size:clamp(30px,4vw,46px);max-width:20ch}
.tl-sect__tete p{margin:16px 0 0;max-width:56ch;color:var(--gris);font-size:17px}
.tl-sect--olive .tl-sect__tete p{color:#c2c0b6}

/* --- prestations : une sequence, donc numerotee ------------------------- */
.tl-presta{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge)}
.tl-presta__i:first-child{border-top:1px solid var(--trait)}
.tl-presta__i{display:grid;grid-template-columns:80px 1fr 1.15fr;gap:clamp(16px,3vw,40px);
  padding:34px 0;border-bottom:1px solid var(--trait);align-items:start}
.tl-presta__n{font-family:var(--sans);font-size:13px;letter-spacing:.1em;color:var(--bois);
  font-variant-numeric:tabular-nums;padding-top:8px}
.tl-presta__i h3{font-size:clamp(21px,2.4vw,27px)}
.tl-presta__i p{margin:0;color:var(--gris);font-size:17px}

/* --- guides : rangs larges, distincts des cartes du blog ---------------- */
.tl-guides{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge)}
.tl-guide{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
  padding:30px 0;border-top:1px solid rgba(203,171,140,.28);text-decoration:none;color:inherit}
.tl-guide:last-child{border-bottom:1px solid rgba(203,171,140,.28)}
.tl-guide h3{font-size:clamp(24px,3vw,34px);transition:color .22s ease}
.tl-guide p{margin:10px 0 0;max-width:62ch;color:#c2c0b6;font-size:16.5px}
.tl-guide__fl{font-family:var(--sans);font-size:22px;color:var(--bois-pale);
  transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.tl-guide:hover h3{color:var(--bois-pale)}
.tl-guide:hover .tl-guide__fl{transform:translateX(8px)}

/* --- a propos ----------------------------------------------------------- */
.tl-apropos{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge);
  display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:clamp(28px,5vw,68px);
  align-items:start}
.tl-apropos__ph{position:relative;z-index:0;isolation:isolate}
.tl-apropos__ph img{width:100%;border-radius:2px}
/* filet bois decale, comme un passe-partout */
.tl-apropos__ph::before{content:"";position:absolute;inset:18px -18px -18px 18px;
  border:1.5px solid var(--bois);z-index:-1}
.tl-apropos h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:20px}
.tl-apropos p{color:var(--gris);max-width:60ch}
.tl-apropos p strong{color:var(--encre);font-weight:600}

.tl-apropos--seul{grid-template-columns:1fr;max-width:calc(var(--lecture) + 2 * var(--marge))}

/* --- page a propos : parcours date et expertises ------------------------- */
.tl-parcours{list-style:none;max-width:var(--wrap);margin:0 auto;padding:0 var(--marge)}
.tl-parcours__i{display:grid;grid-template-columns:190px 1fr;gap:clamp(16px,3vw,40px);
  padding:30px 0;border-top:1px solid var(--trait)}
.tl-parcours__i:last-child{border-bottom:1px solid var(--trait)}
.tl-parcours__q{font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bois);padding-top:6px}
.tl-parcours h3{font-size:clamp(22px,2.4vw,27px);margin:0}
.tl-parcours__ou{display:block;font-family:var(--sans);font-size:14px;color:var(--gris-clair);margin:4px 0 12px}
.tl-parcours p{margin:0;color:var(--gris);max-width:64ch}
.tl-expertises{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3.5vw,44px)}
.tl-expertise{padding:26px 0 30px;border-top:1px solid rgba(203,171,140,.28)}
.tl-expertise h3{font-size:22px;margin:0 0 10px;color:var(--papier)}
.tl-expertise p{margin:0;color:#c2c0b6;font-size:16px;line-height:1.6}
.tl-expertises__liens{max-width:var(--wrap);margin:34px auto 0;padding:0 var(--marge);
  display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--sans);font-size:14px;color:#c2c0b6}
.tl-expertises__liens a{color:var(--bois-pale)}
@media(max-width:760px){
  .tl-parcours__i{grid-template-columns:1fr;gap:6px}
  .tl-parcours__q{padding-top:0}
  .tl-expertises{grid-template-columns:1fr}
  .tl-expertise{padding:22px 0}
}

/* --- blog --------------------------------------------------------------- */
.tl-liste{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge)}
.tl-art{display:grid;grid-template-columns:150px 1fr auto;gap:clamp(16px,3vw,36px);
  align-items:baseline;padding:26px 0;border-top:1px solid var(--trait);
  text-decoration:none;color:inherit}
.tl-art:last-child{border-bottom:1px solid var(--trait)}
.tl-art__meta{font-family:var(--sans);font-size:13px;letter-spacing:.05em;color:var(--gris-clair);
  font-variant-numeric:tabular-nums}
.tl-art h3{font-size:clamp(19px,2.1vw,24px);font-weight:600;transition:color .2s ease}
.tl-art p{margin:8px 0 0;color:var(--gris);font-size:16.5px;max-width:64ch}
.tl-art__cat{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bois);white-space:nowrap}
.tl-art:hover h3{color:var(--bois)}
.tl-art--img{grid-template-columns:220px 1fr auto;align-items:center}
.tl-art__img{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:var(--olive)}
.tl-art__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.tl-art--img:hover .tl-art__img img{transform:scale(1.03)}

/* --- formulaire de contact ---------------------------------------------- */
.tl-form{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge)}
.tl-champs,.tl-form__pied,.tl-msg{max-width:760px}
.tl-champs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tl-champ{display:flex;flex-direction:column;gap:7px}
.tl-champ--large{grid-column:1/-1}
.tl-champ label{font-family:var(--sans);font-size:13px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--bois-pale)}
.tl-champ input,.tl-champ textarea,.tl-champ select{
  font-family:var(--serif);font-size:17px;color:var(--papier);
  background:transparent;border:0;border-bottom:1.5px solid rgba(203,171,140,.4);
  padding:10px 2px;transition:border-color .2s ease}
.tl-champ textarea{resize:vertical;min-height:120px;line-height:1.6}
.tl-champ input:focus,.tl-champ textarea:focus,.tl-champ select:focus{
  outline:none;border-bottom-color:var(--bois-pale)}
.tl-champ input::placeholder,.tl-champ textarea::placeholder{color:rgba(242,241,236,.38)}
.tl-champ select option{background:var(--olive);color:var(--papier)}
/* piege a robots : invisible pour l'humain, tentant pour le script */
.tl-pot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.tl-form__pied{display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:30px;flex-wrap:wrap}
.tl-form__note{font-family:var(--sans);font-size:12.5px;color:#a9a79d;max-width:42ch;line-height:1.5}
.tl-form button{font-family:var(--sans);font-size:14px;letter-spacing:.03em;cursor:pointer;
  padding:13px 30px;border:1.5px solid var(--papier);background:var(--papier);color:var(--olive);
  transition:background .22s ease,color .22s ease,border-color .22s ease}
.tl-form button:hover:not(:disabled){background:var(--bois-pale);border-color:var(--bois-pale);color:var(--encre)}
.tl-form button:disabled{opacity:.55;cursor:progress}
.tl-msg{margin-top:20px;font-family:var(--sans);font-size:14.5px;padding:14px 18px;
  border-left:2.5px solid var(--bois-pale);background:rgba(203,171,140,.12)}
.tl-msg[hidden]{display:none}
.tl-msg--ko{border-left-color:#e0a08c;background:rgba(224,160,140,.13)}

/* ============================ article =================================== */

.tl-post{max-width:var(--lecture);margin:0 auto;padding:clamp(44px,6vw,76px) var(--marge)}
.tl-post__meta{font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:var(--gris);
  margin:0 0 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.tl-post__meta a{color:var(--bois);text-decoration:none}
.tl-post__meta a:hover{text-decoration:underline}
/* auteur dans la ligne de signature, avant la rubrique */
.tl-post__meta .tl-post__aut{display:inline-flex;align-items:center;gap:10px;color:var(--encre);
  font-weight:500;letter-spacing:.02em}
.tl-post__meta .tl-post__aut img{width:34px;height:34px;border-radius:50%;flex:0 0 auto}
.tl-post h1{font-size:clamp(32px,4.6vw,50px);line-height:1.08;margin:0 0 22px}
.tl-post__chapo{font-size:20px;line-height:1.62;color:var(--gris);margin:0 0 34px}
.tl-post__cover{margin:0 0 38px}
.tl-post__cover img{width:100%;border-radius:2px}

.tl-corps{font-size:18.5px;line-height:1.78}
.tl-corps h2{font-size:clamp(25px,3vw,32px);margin:2em 0 .55em}
.tl-corps h3{font-size:clamp(20px,2.3vw,24px);margin:1.7em 0 .5em}
.tl-corps a{color:var(--bois);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.tl-corps a:hover{color:var(--encre)}
.tl-corps ul,.tl-corps ol{margin:0 0 1.3em;padding-left:1.3em}
.tl-corps li{margin-bottom:.5em}
.tl-corps li::marker{color:var(--bois)}
.tl-corps blockquote{margin:1.9em 0;padding:2px 0 2px 24px;border-left:3px solid var(--bois);
  font-style:italic;color:var(--gris)}
.tl-corps blockquote p:last-child{margin-bottom:0}
.tl-corps img,.tl-corps figure{margin:1.9em 0}
.tl-corps figcaption{margin-top:.6em;font-family:var(--sans);font-size:13px;color:var(--gris-clair)}
.tl-corps table{width:100%;border-collapse:collapse;margin:1.9em 0;font-size:16px}
.tl-corps th,.tl-corps td{padding:11px 14px;border-bottom:1px solid var(--trait);text-align:left;
  vertical-align:top}
.tl-corps th{font-family:var(--sans);font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--bois);border-bottom-color:var(--bois)}
.tl-corps figure.wp-block-table{overflow-x:auto}
.tl-corps hr,.tl-corps .wp-block-separator{max-width:110px;margin:2.6em auto;border:0;
  border-top:1px solid var(--trait)}
.tl-corps code{font-size:.9em;background:var(--papier-2);padding:2px 6px;border-radius:2px}
.tl-corps pre{background:var(--encre);color:var(--papier);padding:18px 20px;overflow-x:auto;
  font-size:14.5px;line-height:1.6}
.tl-corps pre code{background:none;padding:0;color:inherit}


/* --- Blocs d'appel des articles DigiWrite ---------------------------------
   DigiWrite insere des encadres « À retenir » / « Info importante » dans le
   corps. La couleur reprend a l'identique l'accentColor declaree cote
   tableau de bord (#76533A) : sans cela l'encadre jure avec le reste.
   Le prefixe court `tl-` sert de classe, comme sur le reste du parc. */
.tl-corps .tl-callout{margin:2em 0;padding:20px 24px;background:var(--papier-2);
  border-left:3px solid var(--bois)}
.tl-corps .tl-callout strong:first-child{display:block;font-family:var(--sans);
  font-size:12.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bois);margin-bottom:6px}
.tl-corps .tl-callout p:last-child{margin-bottom:0}
.tl-corps .tl-callout a{color:var(--bois)}
/* variante sur fond sombre, si un encadre atterrit dans une section olive */
.tl-sect--olive .tl-callout{background:rgba(203,171,140,.1);border-left-color:var(--bois-pale)}

/* --- Blocs des pages riches (avis outils, guides) ---------------------------- */
.tl-corps .tl-callout--alerte{background:#f5ebe4;border-left-color:#9b3b2a}
.tl-corps .tl-callout--alerte strong:first-child{color:#9b3b2a}
.tl-corps .tl-callout--ok{background:#eef0e6;border-left-color:var(--olive-clair)}
.tl-corps .tl-callout--ok strong:first-child{color:var(--olive-clair)}
.tl-corps .tl-tableau{overflow-x:auto;margin:1.9em 0;-webkit-overflow-scrolling:touch}
.tl-corps .tl-tableau table{margin:0;min-width:560px}
.tl-corps .tl-tableau td.num,.tl-corps .tl-tableau th.num{text-align:right;white-space:nowrap}
.tl-corps .tl-schema{margin:2.2em 0;background:var(--blanc);border:1.5px solid var(--papier-2);padding:22px 18px 14px}
.tl-corps .tl-schema svg{display:block;width:100%;height:auto;max-width:560px;margin:0 auto}
.tl-corps .tl-schema figcaption{text-align:center}
.tl-corps .tl-capture img{display:block;width:100%;height:auto;margin:0;border:1.5px solid var(--papier-2)}
.tl-corps .tl-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.9em 0}
.tl-corps .tl-duo > div{background:var(--blanc);border:1.5px solid var(--papier-2);padding:18px 22px 6px}
.tl-corps .tl-duo h3{margin:0 0 .5em;font-size:19px}
.tl-corps .tl-cta{margin:2.6em 0;padding:30px 32px;background:var(--olive);color:var(--papier)}
.tl-corps .tl-cta p{margin:0 0 16px;color:#c9c7bd;font-size:17px}
.tl-corps .tl-cta .tl-cta__t{font-family:var(--serif);font-size:25px;font-weight:600;line-height:1.2;color:var(--papier);margin-bottom:10px}
.tl-corps .tl-cta a.tl-btn{background:var(--papier);color:var(--encre);border-color:var(--papier);text-decoration:none}
.tl-corps .tl-cta a.tl-btn:hover{background:var(--bois-pale);border-color:var(--bois-pale);color:var(--encre)}
.tl-corps .tl-tableau tr:has(td.tl-jus) td{vertical-align:middle}
.tl-corps .tl-tableau td.tl-jus{white-space:nowrap;padding-right:22px}
.tl-corps .tl-tableau td.tl-jus img{display:inline-block;vertical-align:middle;width:40px;height:auto;margin:0 12px 0 0}
.tl-corps .tl-tableau td.tl-jus span{display:inline-block;vertical-align:middle;line-height:1.25}
.tl-corps .tl-tableau td.tl-jus small{display:block;font-family:var(--sans);font-size:12px;color:var(--gris)}
/* Listes numérotées en étapes : même dessin que le déroulé des pages de
   prestation (.tl-lp-etape) : pastille ronde cerclée de bois, filets fins. */
.tl-corps ol.tl-etapes{list-style:none;padding:0;margin:1.9em 0;counter-reset:etape}
.tl-corps ol.tl-etapes > li{counter-increment:etape;display:grid;grid-template-columns:34px 1fr;gap:16px;
  align-items:start;padding:20px 0;margin:0;border-top:1px solid var(--trait)}
.tl-corps ol.tl-etapes > li:last-child{border-bottom:1px solid var(--trait)}
.tl-corps ol.tl-etapes > li::before{content:counter(etape);display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1.5px solid var(--bois);border-radius:50%;
  font-family:var(--sans);font-size:14px;line-height:1;color:var(--bois)}
.tl-corps ol.tl-etapes > li > span{line-height:1.6;padding-top:4px}
.tl-corps ol.tl-etapes > li strong{color:var(--encre)}
@media(max-width:640px){.tl-corps .tl-duo{grid-template-columns:1fr}.tl-corps .tl-cta{padding:24px 20px}}

/* signature de l'auteur en fin d'article */
.tl-auteur{max-width:var(--lecture);margin:0 auto;padding:0 var(--marge) clamp(44px,6vw,72px)}
.tl-auteur__in{display:flex;gap:20px;align-items:center;padding:24px 0;
  border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.tl-auteur img{width:64px;height:64px;border-radius:50%;flex:0 0 auto}
.tl-auteur__n{font-weight:600;display:block;margin-bottom:2px}
.tl-auteur a.tl-auteur__n{color:var(--encre);text-decoration:none}
.tl-auteur a.tl-auteur__n:hover{color:var(--bois)}
.tl-auteur__t{font-family:var(--sans);font-size:13.5px;color:var(--gris);line-height:1.5}

/* ============================ archives ================================== */

.tl-hautpage{background:var(--olive);color:var(--papier);padding:clamp(48px,7vw,86px) 0 clamp(40px,6vw,66px)}
.tl-hautpage__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge)}
.tl-hautpage h1{font-size:clamp(32px,4.6vw,52px);max-width:18ch}
.tl-hautpage p{margin:16px 0 0;color:#c2c0b6;max-width:56ch}

.tl-pagination{max-width:var(--wrap);margin:0 auto;padding:44px var(--marge) 0;
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.tl-pagination a,.tl-pagination span{font-family:var(--sans);font-size:14px;
  padding:9px 15px;border:1px solid var(--trait);text-decoration:none;color:var(--encre)}
.tl-pagination a:hover{border-color:var(--bois);color:var(--bois)}
.tl-pagination .current{background:var(--encre);border-color:var(--encre);color:var(--papier)}

/* ============================ pied ====================================== */

.tl-pied{background:var(--encre);color:#b6b2a8;padding:clamp(48px,6vw,72px) 0 28px;
  font-family:var(--sans);font-size:14px}
.tl-pied__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge)}
/* etage 1 : signature a gauche, contact a droite */
.tl-pied__tete{display:flex;justify-content:space-between;align-items:flex-end;gap:28px 48px;
  flex-wrap:wrap;padding-bottom:clamp(30px,4vw,42px);border-bottom:1px solid #2e2a24}
.tl-pied__mot{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--papier);
  display:block;margin-bottom:10px;letter-spacing:-.01em}
.tl-pied__mot em{font-style:italic;font-weight:400;color:var(--bois-pale)}
.tl-pied__desc{margin:0;max-width:46ch;line-height:1.6}
.tl-pied__cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.tl-pied a.tl-btn{color:var(--olive);text-decoration:none}
.tl-pied a.tl-btn:hover{color:var(--encre)}
.tl-pied a.tl-pied__mail{color:var(--bois-pale)}
/* etages 2 et 3 : meme grille de quatre colonnes, les colonnes s'alignent */
.tl-pied__etage{display:grid;grid-template-columns:130px 1fr;gap:20px 36px;
  padding:clamp(30px,4vw,40px) 0;border-bottom:1px solid #2e2a24}
.tl-pied__rub{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--papier);
  padding-top:1px}
.tl-pied__grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 32px}
.tl-pied h4{font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bois-pale);margin:0 0 14px}
.tl-pied a{color:#d3cfc5;text-decoration:none}
.tl-pied a:hover{color:var(--bois-pale);text-decoration:underline}
.tl-pied ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;line-height:1.4}
.tl-pied a.tl-pied__tous{color:var(--bois-pale)}
.tl-pied a.tl-pied__rub{color:var(--papier)}
.tl-pied a.tl-pied__rub:hover{color:var(--bois-pale)}
.tl-pied__bas{max-width:var(--wrap);margin:0 auto;padding:20px var(--marge) 0;
  display:flex;justify-content:space-between;gap:18px;
  flex-wrap:wrap;font-size:13px;color:#8d897f}
@media(max-width:960px){
  .tl-pied__etage{grid-template-columns:1fr;gap:18px}
  .tl-pied__grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:340px){
  .tl-pied__grille{grid-template-columns:1fr}
}
@media(max-width:480px){
  .tl-pied__grille{gap:26px 18px}
  .tl-pied__cta{gap:14px 22px}
}

/* ============================ adaptatif ================================= */

@media(max-width:960px){
  .tl-heros__in{grid-template-columns:1fr;min-height:0}
  .tl-heros__txt{padding:56px 0 40px}
  .tl-heros h1{max-width:none}
  .tl-heros__photo{margin:0 calc(var(--marge)*-1) 0;max-height:56vh;overflow:hidden}
  .tl-heros__photo img{max-width:none;width:100%;object-fit:cover;object-position:50% 22%}
  .tl-apropos{grid-template-columns:1fr}
  .tl-apropos__ph{max-width:340px}
}
@media(max-width:760px){
  body{font-size:17px}
  .tl-nav{position:fixed;inset:70px 0 auto;background:var(--papier);
    border-bottom:1px solid var(--trait);flex-direction:column;align-items:stretch;
    gap:0;padding:8px var(--marge) 18px;display:none}
  .tl-nav[data-ouvert]{display:flex}
  .tl-nav a{padding:13px 0;border-bottom:1px solid var(--trait);font-size:16px}
  .tl-nav a.tl-btn{border:1.5px solid var(--encre);text-align:center;margin-top:14px}
  .tl-burger{display:block}
  /* dans le menu mobile, les outils sont deplies sous un intertitre */
  .tl-nav__grp{position:static}
  .tl-ssmenu{display:block;position:static;transform:none;padding:0}
  .tl-ssmenu::before{content:attr(data-titre);display:block;font-family:var(--sans);font-size:12px;
    font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--bois);
    padding:16px 0 6px}
  .tl-ssmenu__in{background:none;border:0;box-shadow:none;padding:0;min-width:0}
  .tl-nav .tl-ssmenu__in a{padding:13px 0 13px 14px;white-space:normal}
  .tl-nav .tl-ssmenu__in a:hover{background:none}
  /* les specialites sont trop nombreuses pour etre depliees d'office : sur mobile
     le bouton reste visible et le panneau s'ouvre au toucher. */
  .tl-nav__tete{justify-content:space-between;border-bottom:1px solid var(--trait)}
  .tl-nav .tl-nav__tete a.tl-nav__dec{flex:1;border-bottom:0}
  .tl-nav__bascule{padding:13px 4px 13px 20px;font-size:15px}
  .tl-nav__grp[data-ouvert] .tl-nav__pointe{display:inline-block;transform:rotate(180deg)}
  .tl-ssmenu--large{display:none;width:auto;max-width:none}
  .tl-nav__grp--large[data-ouvert] .tl-ssmenu--large{display:block}
  .tl-ssmenu--large::before{display:none}
  .tl-ssmenu--large .tl-ssmenu__in{grid-template-columns:1fr;gap:0;padding:0}
  .tl-ssmenu--large .tl-ssmenu__t{padding:15px 0 3px;margin:0}
  .tl-nav .tl-ssmenu--large .tl-ssmenu__in a{padding:13px 0 13px 14px}
  .tl-ssmenu--droite{right:auto}
  .tl-ssmenu--droite .tl-ssmenu__in{grid-template-columns:1fr}
  .tl-nav .tl-ssmenu--large .tl-ssmenu__in a.tl-ssmenu__tous{margin-top:0;padding:13px 0 13px 14px;border-top:0}
  .tl-presta__i{grid-template-columns:1fr;gap:10px}
  .tl-presta__n{padding-top:0}
  .tl-preuve__in{grid-template-columns:1fr}
  .tl-preuve__c+.tl-preuve__c{border-left:0;border-top:1px solid rgba(203,171,140,.22);
    padding-left:0;padding-top:18px}
  .tl-art{grid-template-columns:1fr;gap:6px}
  .tl-art--img{grid-template-columns:1fr;gap:10px}
  .tl-art--img .tl-art__img{max-width:420px}
  .tl-art--img .tl-art__cat{grid-row:auto}
  .tl-art__cat{grid-row:1}
  .tl-champs{grid-template-columns:1fr}
  .tl-form__pied{flex-direction:column;align-items:stretch}
  .tl-form button{width:100%}
}

/* ==========================================================================
   Pages « consultant SEO freelance <techno> »
   Structure identique pour toutes les declinaisons ; seul le contenu change.
   ========================================================================== */

/* --- accroche : l'appel a l'action doit tenir au-dessus de la ligne de
       flottaison, le heros reste donc volontairement court -------------- */
.tl-lp-heros{background:var(--olive);color:var(--papier)}
.tl-lp-heros__in{max-width:var(--wrap);margin:0 auto;padding:clamp(44px,6vw,72px) var(--marge) clamp(40px,5vw,64px);
  display:grid;grid-template-columns:1fr minmax(260px,400px);gap:clamp(32px,5vw,64px);align-items:center}
.tl-lp-heros h1{font-size:clamp(31px,4.6vw,54px);line-height:1.07;letter-spacing:-.025em;
  margin:0 0 18px;max-width:17ch}
.tl-lp-heros__chapo{font-size:clamp(17px,1.5vw,19.5px);line-height:1.6;color:#d9d8cf;
  max-width:52ch;margin:0 0 28px}
.tl-lp-heros__actions{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:30px}
.tl-btn--fantome{background:transparent;color:var(--papier);border-color:rgba(203,171,140,.45)}
.tl-btn--fantome:hover{background:rgba(203,171,140,.14);border-color:var(--bois-pale);color:var(--papier)}

.tl-lp-gages{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid rgba(203,171,140,.24);
  display:flex;flex-wrap:wrap;gap:10px 34px;font-family:var(--sans);font-size:13.5px;color:#c2c0b6}
.tl-lp-gages strong{color:var(--bois-pale);font-weight:500}

.tl-lp-heros__ph{margin:0}
.tl-lp-heros__ph img{width:100%;border-radius:2px}
.tl-lp-heros__ph figcaption{margin-top:10px;font-family:var(--sans);font-size:12.5px;
  letter-spacing:.05em;color:#a9a79d}

/* --- le constat : trois colonnes numerotees par un filet ---------------- */
.tl-lp-constats{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px)}
.tl-lp-constat{padding-top:22px;border-top:2px solid var(--bois)}
.tl-lp-constat h3{font-size:clamp(19px,2.1vw,22px);margin-bottom:10px}
.tl-lp-constat p{margin:0;color:var(--gris);font-size:16.5px}

/* --- les trois audits : lignes larges, numero en marge ------------------ */
.tl-lp-audits{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge)}
.tl-lp-audit{display:grid;grid-template-columns:72px 1fr;gap:clamp(14px,2.5vw,32px);
  padding:34px 0;border-top:1px solid rgba(203,171,140,.26)}
.tl-lp-audit:last-child{border-bottom:1px solid rgba(203,171,140,.26)}
.tl-lp-audit__n{font-family:var(--sans);font-size:13px;letter-spacing:.1em;color:var(--bois-pale);
  padding-top:9px;font-variant-numeric:tabular-nums}
.tl-lp-audit h3{font-size:clamp(23px,2.8vw,30px)}
.tl-lp-audit__acc{font-style:italic;color:var(--bois-pale);font-size:18px;margin:6px 0 12px}
.tl-lp-audit p{color:#c8c6bc;max-width:62ch}
.tl-lp-audit ul{margin:16px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:7px 28px}
.tl-lp-audit li{position:relative;padding-left:18px;font-size:16px;color:#c8c6bc}
.tl-lp-audit li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;
  background:var(--bois-pale)}

/* --- bloc specialise : grille de fiches courtes ------------------------- */
.tl-lp-specs{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.tl-lp-spec{background:var(--papier);border:1px solid var(--trait);padding:24px 24px}
.tl-lp-spec h3{font-size:18.5px;margin-bottom:8px}
.tl-lp-spec h3::before{content:"";display:inline-block;width:6px;height:6px;margin-right:9px;
  vertical-align:middle;background:var(--bois);border-radius:50%}
.tl-lp-spec p{margin:0;color:var(--gris);font-size:16px}

/* --- deroulement : une vraie sequence, donc une liste ordonnee ---------- */
.tl-lp-deroule{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge);
  display:grid;grid-template-columns:1fr minmax(280px,42%);gap:clamp(28px,4vw,56px);
  align-items:start}
.tl-lp-etapes{margin:0;padding:0;list-style:none}
.tl-lp-etape{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:20px 0;
  border-top:1px solid var(--trait);align-items:start}
.tl-lp-etape:last-child{border-bottom:1px solid var(--trait)}
.tl-lp-deroule__ph{margin:0;position:sticky;top:92px}
.tl-lp-deroule__ph img{width:100%;border-radius:2px;
  aspect-ratio:4/5;object-fit:cover;object-position:50% 62%}
.tl-lp-etape__n{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1.5px solid var(--bois);border-radius:50%;
  font-family:var(--sans);font-size:14px;color:var(--bois);flex:0 0 auto}
.tl-lp-etape h3{font-size:19px}
.tl-lp-etape__d{display:block;font-family:var(--sans);font-size:12.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--bois);margin-top:5px}
.tl-lp-etape p{margin:8px 0 0;color:var(--gris);font-size:16px}

/* --- tarifs : lignes tabulaires, le prix aligne a droite ---------------- */
.tl-lp-tarifs{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge)}
.tl-lp-tarif{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:22px 0;border-top:1px solid rgba(203,171,140,.26);flex-wrap:wrap}
.tl-lp-tarif:last-child{border-bottom:1px solid rgba(203,171,140,.26)}
.tl-lp-tarif__h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.tl-lp-tarif h3{font-size:clamp(19px,2.2vw,23px)}
.tl-lp-tarif__d{font-family:var(--sans);font-size:13px;letter-spacing:.05em;color:#a9a79d}
.tl-lp-tarif__p{font-family:var(--serif);font-size:clamp(19px,2.2vw,23px);font-weight:600;
  color:var(--bois-pale);font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-lp-tarifs__notes{max-width:var(--wrap);margin:26px auto 0;padding:0 var(--marge)}
.tl-lp-tarifs__notes p{color:#c2c0b6;font-size:16px;max-width:74ch}
.tl-lp-tarifs__notes strong{color:var(--papier);font-weight:600}
.tl-lp-mention{font-family:var(--sans);font-size:13px;color:#a9a79d}

/* --- questions : depliants natifs, aucun JavaScript --------------------- */
.tl-lp-faq{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge)}
.tl-lp-q{max-width:840px}
.tl-lp-q{border-top:1px solid var(--trait)}
.tl-lp-q:last-child{border-bottom:1px solid var(--trait)}
.tl-lp-q summary{list-style:none;cursor:pointer;padding:20px 34px 20px 0;position:relative;
  font-family:var(--serif);font-size:clamp(17px,1.9vw,20px);font-weight:600;color:var(--titre,var(--encre))}
.tl-lp-q summary::-webkit-details-marker{display:none}
.tl-lp-q summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:20px;color:var(--bois);transition:transform .22s ease}
.tl-lp-q[open] summary::after{content:"–"}
.tl-lp-q summary:hover{color:var(--bois)}
.tl-lp-q p{margin:0 0 22px;color:var(--gris);max-width:66ch}

@media(max-width:1000px){
  .tl-lp-heros__in{grid-template-columns:1fr}
  .tl-lp-heros__ph{max-width:280px;order:-1}
  .tl-lp-constats{grid-template-columns:1fr}
}
@media(max-width:900px){
  .tl-lp-deroule{grid-template-columns:1fr}
  .tl-lp-deroule__ph{position:static;max-width:420px}
  .tl-lp-deroule__ph img{aspect-ratio:16/9}
}
@media(max-width:760px){
  .tl-lp-audit{grid-template-columns:1fr;gap:8px}
  .tl-lp-audit__n{padding-top:0}
  .tl-lp-heros__actions{flex-direction:column;align-items:stretch}
  .tl-lp-heros__actions .tl-btn{justify-content:center}
  .tl-lp-gages{flex-direction:column;gap:8px}
  .tl-lp-tarif{flex-direction:column;gap:6px}
}

/* --- bandeau visuel : une respiration entre deux blocs denses ------------ */
.tl-lp-bande{margin:0;position:relative;background:var(--olive);isolation:isolate}
.tl-lp-bande img{width:100%;height:clamp(260px,38vh,420px);object-fit:cover;
  object-position:50% 56%;display:block}
/* voile sombre cote gauche : le texte reste lisible quelle que soit la photo */
.tl-lp-bande::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(26,23,19,.82) 0%,rgba(26,23,19,.55) 42%,rgba(26,23,19,.06) 78%)}
.tl-lp-bande__mot{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.tl-lp-bande__mot p{max-width:var(--wrap);width:100%;margin:0 auto;padding:0 var(--marge);
  font-family:var(--serif);font-size:clamp(25px,3.4vw,42px);line-height:1.16;
  font-weight:600;color:var(--papier)}
.tl-lp-bande__mot span,.tl-lp-bande__mot em{display:block;max-width:18ch}
.tl-lp-bande__mot em{font-style:italic;font-weight:400;color:var(--bois-pale)}

/* ------------------------------------------------------------------ *
 * La lettre du lundi (mu-plugin nl-newsletter, double opt-in).
 * Parti pris : un entrefilet, pas une banniere. Deux colonnes sur fond
 * papier-2, et un champ reduit a une ligne soulignee facon bulletin
 * d'abonnement papier, pour ne pas refaire la boite du formulaire de
 * contact qui est juste au-dessus sur la page d'accueil.
 * ------------------------------------------------------------------ */
.tl-lettre{background:var(--papier-2);border-top:1px solid var(--trait);
  padding:clamp(52px,7vw,88px) 0}
.tl-lettre__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.tl-lettre__mot h2{font-size:clamp(26px,3.2vw,38px);max-width:16ch;margin:0}
.tl-lettre__mot h2 em{font-style:italic;font-weight:400;color:var(--bois)}
.tl-lettre__mot p{margin:14px 0 0;max-width:44ch;color:var(--gris);font-size:16px;line-height:1.65}

.tl-lettre__form label{display:block;font-family:var(--sans);font-size:13px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--bois);margin-bottom:12px}
.tl-lettre__ligne{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.tl-lettre__ligne input{flex:1 1 220px;min-width:0;font-family:var(--serif);font-size:18px;
  color:var(--encre);background:transparent;border:0;border-bottom:1.5px solid var(--gris-clair);
  padding:8px 2px;border-radius:0;transition:border-color .2s}
.tl-lettre__ligne input::placeholder{color:var(--gris-clair)}
.tl-lettre__ligne input:focus{outline:0;border-bottom-color:var(--bois)}
.tl-lettre__ligne button{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--sans);font-size:14px;letter-spacing:.03em;
  padding:12px 24px;border:1.5px solid var(--olive);background:var(--olive);color:var(--papier);
  transition:background .2s,border-color .2s,color .2s}
.tl-lettre__ligne button:hover:not(:disabled){background:var(--bois);border-color:var(--bois);color:var(--blanc)}
.tl-lettre__ligne button:hover:not(:disabled) .tl-btn__fl{transform:translateX(4px)}
.tl-lettre__ligne button:disabled{opacity:.55;cursor:progress}
.tl-lettre__note{margin:16px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;
  color:var(--gris);max-width:46ch}

/* Message de retour injecte par le mu-plugin a la place du formulaire. */
.tl-lettre .nl-msg{font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--encre);
  border-left:3px solid var(--bois);padding:4px 0 4px 16px}

@media (max-width:860px){
  .tl-lettre__in{grid-template-columns:1fr}
}

/* ====================== rail de contact des articles ===================== */
/* Un seul bloc de balisage, trois etats. Sous 1100px c'est une carte posee
   apres le texte, doublee d'un rappel en bas d'ecran ; au-dela, le corps de
   l'article et le rail partagent une grille et le rail suit la lecture. */

.tl-rail{max-width:var(--lecture);margin:0 auto;
  padding:0 var(--marge) clamp(34px,5vw,52px);scroll-margin-top:92px}
.tl-rail__in{background:var(--olive);color:var(--papier);padding:clamp(22px,3vw,27px)}
.tl-rail__photo{width:48px;height:48px;border-radius:50%;margin:0 0 15px}
.tl-rail .tl-lab{margin-bottom:10px}
.tl-rail__t{font-size:23px;line-height:1.14;margin:0 0 10px}
.tl-rail__p{font-family:var(--sans);font-size:14.5px;line-height:1.62;
  color:#c2c0b6;margin:0 0 20px}

.tl-rail .tl-champs{display:grid;grid-template-columns:1fr;gap:12px;max-width:none}
.tl-rail .tl-champ label{font-size:11.5px;letter-spacing:.08em}
.tl-rail .tl-champ input,.tl-rail .tl-champ textarea{font-size:16.5px;padding:8px 2px}
.tl-rail .tl-champ textarea{min-height:56px;line-height:1.5}

.tl-rail__pied{margin-top:20px}
.tl-rail button{display:block;width:100%;font-family:var(--sans);font-size:14px;
  letter-spacing:.03em;cursor:pointer;padding:13px 22px;
  border:1.5px solid var(--papier);background:var(--papier);color:var(--olive);
  transition:background .22s ease,color .22s ease,border-color .22s ease}
.tl-rail button:hover:not(:disabled){background:var(--bois-pale);
  border-color:var(--bois-pale);color:var(--encre)}
.tl-rail button:disabled{opacity:.55;cursor:progress}
.tl-rail__note{margin:12px 0 0;font-family:var(--sans);font-size:11.5px;
  line-height:1.45;color:#9a968c}
.tl-rail .tl-msg{max-width:none;margin-top:16px;font-size:13.5px;padding:12px 15px}

/* --- rappel en bas d'ecran, petit ecran seulement ------------------------ */
.tl-barre{position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;align-items:center;gap:14px;
  background:var(--olive);color:var(--papier);
  border-top:1px solid rgba(203,171,140,.3);
  box-shadow:0 -10px 28px rgba(26,23,19,.16);
  padding:10px var(--marge);padding-bottom:calc(10px + env(safe-area-inset-bottom));
  transform:translateY(102%);visibility:hidden;
  transition:transform .34s cubic-bezier(.2,.7,.3,1),visibility 0s linear .34s}
.tl-barre--on{transform:none;visibility:visible;transition-delay:0s}
.tl-barre[hidden]{display:none}
.tl-barre__t{flex:1 1 auto;margin:0;font-family:var(--sans);font-size:13px;line-height:1.35}
.tl-barre__b{flex:0 0 auto;font-family:var(--sans);font-size:13.5px;letter-spacing:.02em;
  white-space:nowrap;cursor:pointer;padding:11px 20px;border:0;
  background:var(--papier);color:var(--olive)}
.tl-barre__b:hover{background:var(--bois-pale);color:var(--encre)}
.tl-barre__x{flex:0 0 auto;background:none;border:0;cursor:pointer;
  color:var(--bois-pale);font-size:21px;line-height:1;padding:4px 2px}

/* --- grande largeur : deux colonnes, le rail suit la lecture ------------- */
@media (min-width:1100px){
  .tl-lecture{max-width:1120px;margin:0 auto;padding:0 var(--marge);
    display:grid;grid-template-columns:minmax(0,1fr) 304px;
    grid-template-areas:"post rail" "auteur rail";
    column-gap:clamp(40px,4.4vw,60px);align-items:start}
  .tl-lecture > .tl-post{grid-area:post;max-width:none;margin:0;
    padding:clamp(44px,6vw,76px) 0}
  .tl-lecture > .tl-auteur{grid-area:auteur;max-width:none;margin:0;
    padding:0 0 clamp(44px,6vw,72px)}
  .tl-lecture > .tl-rail{grid-area:rail;max-width:none;padding:0;
    margin:clamp(44px,6vw,76px) 0 0;
    position:sticky;top:92px;align-self:start}
  /* « top » est recalcule en JavaScript : une carte plus haute que la fenetre
     recoit un decalage negatif, si bien qu'elle se cale une fois son BAS
     atteint, et que le bouton reste visible plutot que le titre. */
  .tl-barre{display:none}
}

@media (prefers-reduced-motion:reduce){
  .tl-barre{transition:none}
}

/* landing : section definition (SXO...) */
.tl-lp-def{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge)}
.tl-lp-def > p{max-width:68ch}
.tl-lp-def .tl-tableau{max-width:900px}
.tl-lp-def .tl-tableau th[scope=row]{font-family:inherit;font-size:16px;letter-spacing:0;text-transform:none;font-weight:600}

/* landing : cartes des audits specialises (reprend les cartes du hub) */
.tl-lp-sous{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge)}
.tl-lp-sous.tl-hub__grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.tl-lp-sous .tl-hub__carte{display:flex;flex-direction:column;background:var(--blanc);border:1.5px solid var(--papier-2);padding:0 24px 20px;text-decoration:none;color:var(--encre);transition:border-color .15s}
.tl-lp-sous .tl-hub__carte:hover,.tl-lp-sous .tl-hub__carte:focus-visible{border-color:var(--bois)}
.tl-lp-sous .tl-hub__carte h3{font-size:21px;margin:0 0 8px}
.tl-lp-sous .tl-hub__img{display:block;margin:0 -24px 18px;aspect-ratio:16/9;overflow:hidden;background:var(--olive)}
.tl-lp-sous .tl-hub__img img{display:block;width:100%;height:100%;object-fit:cover}
.tl-lp-sous .tl-hub__carte p{margin:0 0 16px;font-size:16px;line-height:1.55;color:var(--gris)}
.tl-lp-sous .tl-hub__go{margin-top:auto;font-family:var(--sans);font-size:13.5px;letter-spacing:.02em;color:var(--bois)}
.tl-lp-sous .tl-hub__carte:hover .tl-hub__go{text-decoration:underline}
.tl-lp-audit__lien{margin:14px 0 0}
.tl-lp-audit__lien a{color:var(--bois-pale);font-family:var(--sans);font-size:14.5px}

/* pied allege (30/09) : liens du site et pages legales sur la ligne du bas */
.tl-pied__liens{display:flex;flex-wrap:wrap;gap:6px 22px}
.tl-pied__bas a{color:#b6b2a8}
.tl-pied__bas a:hover{color:var(--bois-pale)}