/* ===================================================================
   gauthier.digital — feuille de style du thème
   -------------------------------------------------------------------
   Toutes les couleurs et les polices viennent de assets/css/tokens.css,
   lui-même copie de identite/tokens.css. Aucune valeur en dur ici :
   si une teinte manque, on l'ajoute aux jetons, pas dans ce fichier.

   Sommaire
   01. Socle
   02. Utilitaires et accessibilité
   03. En-tête, navigation, menu mobile, bascule de thème
   04. Boutons
   05. Héros
   06. Bandeau de repères
   07. Sections
   08. Thématiques
   09. Outils
   10. Bloc d'accès aux supports
   11. Réalisations
   12. Parcours
   13. Pied de page
   14. Contenu éditorial WordPress
   =================================================================== */


/* ------------------------------------------------------------------
   01. Socle
   ------------------------------------------------------------------ */

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  margin:0;
  font-family:var(--display);
  font-weight:var(--display-weight);
  letter-spacing:0;
  text-wrap:balance;
  line-height:1.06;
}

/* Titres posés sur un aplat bleu nuit : une graisse de plus, sinon les
   déliés de Melodrama se referment à l'écran. */
.hero h1,
.promo h2{font-weight:var(--display-weight-block)}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* Fraunces porte les titres. Les intertitres courts restent en Satoshi
   (voir .dom h3, .tool h3…) : sous 20 px, une display n'apporte rien. */


/* ------------------------------------------------------------------
   02. Utilitaires et accessibilité
   ------------------------------------------------------------------ */

.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut)}

.eyebrow{
  font-family:var(--body);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.eyebrow-block{
  color:var(--magenta);
  background:var(--snow);
  display:inline-block;
  padding:5px 12px;
}

.screen-reader-text{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--block);
  color:var(--on-block);
  padding:12px 18px;
  font-size:.86rem;
  font-weight:600;
  text-decoration:none;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}

@media (prefers-reduced-motion:no-preference){
  a,button{transition:color .15s ease,background .15s ease}
}


/* ------------------------------------------------------------------
   03. En-tête, navigation, menu mobile, bascule de thème
   ------------------------------------------------------------------ */

.hdr{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.hdr .wrap{display:flex;align-items:center;gap:18px;height:66px}

.brand{display:flex;align-items:center;gap:0;color:var(--brand);flex:0 0 auto}
.brand svg{height:30px;width:auto;display:block}

.nav{margin-left:auto;font-size:.88rem;font-weight:500}
.nav-liste{
  display:flex;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-liste li{margin:0}
.nav-liste a{
  display:inline-block;
  text-decoration:none;
  color:var(--ink-soft);
  padding:6px 0;
  border-bottom:1.5px solid transparent;
}
.nav-liste a:hover,
.nav-liste .current-menu-item > a,
.nav-liste .current_page_item > a{color:var(--ink);border-bottom-color:var(--accent)}

/* Boutons carrés de l'en-tête : menu et thème */
.iconbtn{
  display:flex;
  width:42px;height:42px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line-2);
  background:var(--surface);
  border-radius:var(--radius);
  flex:0 0 auto;
  color:var(--ink);
}
.iconbtn:hover{border-color:var(--accent)}

.burger{display:none}
.burger i{display:block;width:17px;height:1.6px;background:var(--ink);position:relative}
.burger i::before,
.burger i::after{
  content:"";
  position:absolute;
  left:0;
  width:17px;height:1.6px;
  background:var(--ink);
  transition:transform .18s ease,top .18s ease;
}
.burger i::before{top:-6px}
.burger i::after{top:6px}
.hdr.open .burger i{background:transparent}
.hdr.open .burger i::before{top:0;transform:rotate(45deg)}
.hdr.open .burger i::after{top:0;transform:rotate(-45deg)}

.theme-toggle svg{width:18px;height:18px;display:block;fill:currentColor}
.theme-toggle .ico-nuit{display:none}
:root[data-theme="dark"] .theme-toggle .ico-nuit{display:block}
:root[data-theme="dark"] .theme-toggle .ico-jour{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .ico-nuit{display:block}
  :root:not([data-theme="light"]) .theme-toggle .ico-jour{display:none}
}

.hdr .btn{margin-left:4px}

@media(max-width:860px){
  .nav{display:none}
  .burger{display:flex;margin-left:auto}
  .hdr.open .nav{
    display:block;
    position:absolute;
    top:66px;left:0;right:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:4px var(--gut) 16px;
  }
  .hdr.open .nav-liste{flex-direction:column;gap:0}
  .hdr.open .nav-liste a{
    display:block;
    padding:13px 2px;
    border-bottom:1px solid var(--line);
    font-size:1rem;
    color:var(--ink);
  }
  .hdr.open .nav-liste li:last-child a{border-bottom:0}
}
@media(max-width:560px){
  .hdr .wrap{gap:10px}
  .hdr .btn{padding:10px 13px;font-size:.8rem}
  .iconbtn{width:38px;height:38px}
  .brand svg{height:25px}
}
@media(max-width:400px){
  .hdr .btn{padding:9px 11px;font-size:.76rem}
}


/* ------------------------------------------------------------------
   04. Boutons
   ------------------------------------------------------------------ */

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  font-size:.87rem;
  font-weight:600;
  border-radius:var(--radius);
  text-decoration:none;
  transition:transform .12s ease,background .15s ease;
}
.btn:active{transform:translateY(1px)}

.btn-a{background:var(--magenta);color:var(--snow)}
.btn-a:hover{background:var(--accent-strong)}

.btn-b{background:transparent;color:var(--on-block);box-shadow:inset 0 0 0 1.5px currentColor}
.btn-b:hover{background:color-mix(in srgb,var(--on-block) 12%,transparent)}

.btn-c{background:var(--block);color:var(--on-block)}
.btn-c:hover{background:color-mix(in srgb,var(--block) 86%,var(--magenta))}


/* ------------------------------------------------------------------
   05. Héros
   ------------------------------------------------------------------ */

.hero{background:var(--block);color:var(--on-block);position:relative;overflow:hidden}
.hero .wrap{
  position:relative;
  z-index:2;
  padding-block:clamp(56px,9vw,104px) clamp(48px,7vw,86px);
}

/* Lettres décoratives G · U · M, découpées dans le logotype */
.glyph{
  position:absolute;
  font-family:var(--display);
  font-weight:300;
  line-height:.8;
  color:var(--magenta);
  opacity:.28;
  pointer-events:none;
  user-select:none;
  z-index:1;
}
.g1{font-size:clamp(300px,42vw,620px);left:-.12em;top:-.18em}
.g2{font-size:clamp(300px,42vw,620px);right:-.1em;bottom:-.42em}

/* Fraunces est plus large que ne l'était Melodrama : l'accroche passe
   sur trois lignes. On réduit le corps pour que les deux boutons
   restent visibles sans défiler sur un portable de 768 px de haut. */
.hero h1{font-size:clamp(2.2rem,5.4vw,4.3rem);max-width:16ch}
.hero .kicker{margin-bottom:26px}
.hero .sub{
  margin-top:26px;
  max-width:52ch;
  font-size:clamp(1rem,1.5vw,1.18rem);
  color:var(--on-block-soft);
}
.hero .sig{margin-top:14px;max-width:52ch;font-size:.95rem;color:var(--on-block-soft)}
.hero .sig b{color:var(--snow);font-weight:600}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}


/* ------------------------------------------------------------------
   06. Bandeau de repères
   ------------------------------------------------------------------ */

.facts{background:var(--surface);border-bottom:1px solid var(--line)}
.facts .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.fact{background:var(--surface);padding:22px 22px 20px;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact b{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.6rem,3vw,2.3rem);
  color:var(--brand);
  line-height:1;
}
.fact span{display:block;margin-top:8px;font-size:.82rem;color:var(--ink-soft)}
@media(max-width:700px){.fact{border-right:0;border-bottom:1px solid var(--line)}}


/* ------------------------------------------------------------------
   07. Sections
   ------------------------------------------------------------------ */

.section{padding-block:clamp(52px,7vw,92px)}
.section--flush{padding-bottom:0}

.sechead{margin-bottom:38px;max-width:60ch}
.sechead .eyebrow{color:var(--accent);display:block;margin-bottom:14px}
.sechead h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.sechead p{margin-top:16px;color:var(--ink-soft);font-size:1.02rem;max-width:56ch}

.alt{background:var(--surface);border-block:1px solid var(--line)}


/* ------------------------------------------------------------------
   08. Thématiques
   La grille « .dom » porte les thématiques : elles ont remplacé les
   six domaines et le tableau des écoles de la maquette.
   ------------------------------------------------------------------ */

/* Les filets sont portés par les cellules, pas par un fond de grille :
   avec un nombre d'entrées qui ne remplit pas la dernière rangée, un
   fond de grille laisserait un aplat gris à la place des cases vides. */
.dom{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.dom article{
  background:var(--paper);
  padding:26px 24px 28px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.alt .dom article{background:var(--surface)}
.dom h3{font-family:var(--body);font-weight:600;font-size:1.04rem;letter-spacing:0;line-height:1.3}
.dom p{font-size:.92rem;color:var(--ink-soft);line-height:1.55}
.dom .tag{font-family:var(--mono);font-size:.7rem;color:var(--accent);letter-spacing:.04em}


/* ------------------------------------------------------------------
   09. Outils
   ------------------------------------------------------------------ */

.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px}
.tool{
  background:var(--surface);
  border:1px solid var(--line);
  padding:24px 22px 26px;
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
}
.alt .tool{background:var(--paper)}
.tool .badge{
  position:absolute;
  top:0;right:0;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:5px 9px;
  background:var(--surface-3);
  color:var(--ink-faint);
}
.tool .badge.on{background:var(--magenta);color:var(--snow)}
.tool h3{font-family:var(--body);font-weight:600;font-size:1.06rem;letter-spacing:0}
.tool p{font-size:.9rem;color:var(--ink-soft);line-height:1.52}
.tool .metrics{
  margin-top:auto;
  padding-top:14px;
  border-top:1px dashed var(--line-2);
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--ink-faint);
  list-style:none;
  margin-bottom:0;
  padding-inline:0;
}


/* ------------------------------------------------------------------
   10. Bloc d'accès aux supports
   ------------------------------------------------------------------ */

.promo{background:var(--block);color:var(--on-block);position:relative;overflow:hidden}
.promo .wrap{
  position:relative;
  z-index:2;
  padding-block:clamp(48px,6vw,78px);
  display:grid;
  grid-template-columns:1.25fr .95fr;
  gap:44px;
  align-items:center;
}
.promo .eyebrow-block{margin-bottom:22px}
.promo h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.promo p{margin-top:18px;color:var(--on-block-soft);max-width:44ch;font-size:1rem}

.codebox{background:var(--snow);color:var(--ink-fixed);padding:26px 24px 24px;margin:0}
.codebox label{
  display:block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:10px;
}
.codebox .field{display:flex;gap:8px}
.codebox input{
  flex:1;
  min-width:0;
  font-family:var(--mono);
  font-size:.95rem;
  padding:12px 13px;
  border:1.5px solid var(--line-2);
  background:var(--snow);
  color:var(--ink-fixed);
  border-radius:var(--radius);
}
.codebox input:focus{outline:2px solid var(--magenta);outline-offset:1px;border-color:transparent}
.codebox .hint{margin-top:12px;font-size:.8rem;color:var(--ink-faint)}
@media(max-width:820px){.promo .wrap{grid-template-columns:1fr;gap:30px}}


/* ------------------------------------------------------------------
   11. Réalisations
   ------------------------------------------------------------------ */

.works{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  border-top:1px solid var(--line);
}
.work{
  background:var(--paper);
  padding:24px 22px 26px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.work:last-child{border-right:0}
.alt .work{background:var(--surface)}
.work .role{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}
.work h3{font-family:var(--body);font-weight:600;font-size:1.02rem;letter-spacing:0;margin:9px 0}
.work p{font-size:.89rem;color:var(--ink-soft);line-height:1.5}


/* ------------------------------------------------------------------
   12. Parcours
   ------------------------------------------------------------------ */

/* Deux colonnes : le portrait, puis la chronologie. Sous 760 px la
   photo passe au-dessus et se limite en hauteur pour ne pas repousser
   le texte hors de l'écran. */
.parcours{
  display:grid;
  grid-template-columns:minmax(200px,280px) 1fr;
  gap:clamp(22px,4vw,46px);
  align-items:start;
}

.portrait{
  margin:0;
  background:var(--surface-2);
  border:1px solid var(--line);
  line-height:0;
}
.portrait img{width:100%;height:auto;display:block}

.path{border-top:1px solid var(--line-2)}
.step{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:20px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.step .yr{font-family:var(--mono);font-size:.78rem;color:var(--accent);padding-top:.22em}
.step b{font-weight:600;font-size:.99rem}
.step span{display:block;font-size:.9rem;color:var(--ink-soft);margin-top:2px}
@media(max-width:760px){
  .parcours{grid-template-columns:1fr;gap:26px}
  .portrait{max-width:260px}
}
@media(max-width:620px){.step{grid-template-columns:1fr;gap:2px}}


/* ------------------------------------------------------------------
   13. Pied de page
   ------------------------------------------------------------------ */

.site-footer{
  background:var(--block);
  color:var(--on-block);
  padding-block:54px 34px;
  position:relative;
  overflow:hidden;
}
.site-footer .wrap{position:relative;z-index:2}

.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px 26px}
.fgrid svg{height:44px;width:auto;color:var(--snow);margin-bottom:16px}
.fgrid p{color:var(--on-block-soft);font-size:.9rem;max-width:34ch}
.fgrid h2{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--magenta);
  margin:0 0 14px;
  font-family:var(--body);
  line-height:1.4;
}
.fgrid ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:.9rem;
  color:var(--on-block-soft);
}
.fgrid a{text-decoration:none}
.fgrid a:hover{color:var(--snow)}

.fbot{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid color-mix(in srgb,var(--on-block) 20%,transparent);
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  font-size:.76rem;
  color:var(--on-block-soft);
  list-style:none;
  padding-inline:0;
}
.fbot a{text-decoration:none}
.fbot a:hover{color:var(--snow)}

@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:30px 24px}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr;gap:26px}}


/* ------------------------------------------------------------------
   14. Contenu éditorial WordPress
   Pages, articles, résultats de recherche, 404, commentaires.
   ------------------------------------------------------------------ */

.page-head{padding-block:clamp(44px,6vw,76px) 0}
.page-head h1{font-size:clamp(2rem,4.2vw,3.2rem)}
.page-head .eyebrow{color:var(--accent);display:block;margin-bottom:14px}
.page-head .meta{margin-top:14px;font-family:var(--mono);font-size:.78rem;color:var(--ink-faint)}

.entry{padding-block:clamp(34px,4vw,54px)}
.entry-content{max-width:72ch}
.entry-content > * + *{margin-top:1.15em}
.entry-content h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin-top:1.8em}
.entry-content h3{
  font-family:var(--body);
  font-weight:600;
  font-size:1.12rem;
  letter-spacing:0;
  line-height:1.35;
  margin-top:1.6em;
}
.entry-content a{color:var(--accent);text-underline-offset:.18em}
.entry-content ul,
.entry-content ol{padding-left:1.25em}
.entry-content li + li{margin-top:.4em}
.entry-content blockquote{
  margin-inline:0;
  padding:4px 0 4px 20px;
  border-left:2px solid var(--accent);
  color:var(--ink-soft);
}
.entry-content code,
.entry-content kbd{font-family:var(--mono);font-size:.88em;background:var(--surface-2);padding:2px 5px}
.entry-content pre{
  font-family:var(--mono);
  font-size:.85rem;
  background:var(--surface-2);
  border:1px solid var(--line);
  padding:16px 18px;
  overflow-x:auto;
}
.entry-content pre code{background:none;padding:0}
.entry-content table{width:100%;border-collapse:collapse;font-size:.92rem}
.entry-content th,
.entry-content td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.entry-content th{font-weight:600;color:var(--ink)}
.entry-content figure{margin-inline:0}
.entry-content figcaption{margin-top:8px;font-size:.82rem;color:var(--ink-faint)}
.entry-content hr{border:0;border-top:1px solid var(--line)}

.alignleft{float:left;margin:0 1.4em .8em 0}
.alignright{float:right;margin:0 0 .8em 1.4em}
.aligncenter{display:block;margin-inline:auto}
.alignwide{max-width:min(1180px,100%)}
.alignfull{max-width:100%}

.liste-articles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.liste-articles article{
  background:var(--paper);
  padding:24px 22px 26px;
  display:flex;
  flex-direction:column;
  gap:9px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.liste-articles h2{font-family:var(--body);font-weight:600;font-size:1.05rem;letter-spacing:0;line-height:1.3}
.liste-articles h2 a{text-decoration:none}
.liste-articles h2 a:hover{color:var(--accent)}
.liste-articles .date{font-family:var(--mono);font-size:.72rem;color:var(--ink-faint)}
.liste-articles p{font-size:.92rem;color:var(--ink-soft);line-height:1.55}

.pagination{display:flex;flex-wrap:wrap;gap:6px;padding-block:34px}
.pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;height:38px;
  padding-inline:10px;
  border:1px solid var(--line-2);
  font-size:.86rem;
  text-decoration:none;
  color:var(--ink-soft);
}
.pagination .page-numbers:hover{border-color:var(--accent);color:var(--ink)}
.pagination .page-numbers.current{background:var(--block);color:var(--on-block);border-color:var(--block)}

.recherche{display:flex;gap:8px;max-width:440px}
.recherche input[type="search"]{
  flex:1;
  min-width:0;
  font-family:var(--body);
  font-size:.95rem;
  padding:11px 13px;
  border:1.5px solid var(--line-2);
  background:var(--surface);
  color:var(--ink);
  border-radius:var(--radius);
}
.recherche input[type="search"]:focus{outline:2px solid var(--magenta);outline-offset:1px;border-color:transparent}

.vide{padding-block:clamp(48px,7vw,90px);max-width:60ch}
.vide .eyebrow{color:var(--accent);display:block;margin-bottom:14px}
.vide h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.vide h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
.vide p{margin-top:16px;color:var(--ink-soft)}
.vide .recherche{margin-top:24px}
.vide .vide-cta{margin-top:22px}

.commentaires{padding-block:clamp(34px,4vw,54px);max-width:72ch;border-top:1px solid var(--line)}
.commentaires h2{font-size:1.5rem;margin-bottom:22px}
.commentaires ol{list-style:none;margin:0;padding:0}
.commentaires .comment-body{padding-block:18px;border-bottom:1px solid var(--line)}
.commentaires .comment-meta{font-size:.8rem;color:var(--ink-faint);margin-bottom:8px}
.commentaires .children{list-style:none;margin:0;padding-left:26px}