:root{
  --gray-dark:#2B2D30; --gray:#6E7075; --gray-light:#E4E4E1;
  --yellow:#F4C623; --white:#FAFAF8; --ease:cubic-bezier(.19,1,.22,1); --radius:12px;
  /* Polices par défaut — remplacées par celles choisies dans Réglages > Typographie */
  --font-heading:'Space Grotesk',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--white); color:var(--gray-dark); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden;
  user-select:none; -webkit-user-select:none;}
input, textarea, [contenteditable]{user-select:text; -webkit-user-select:text;}
img{-webkit-user-drag:none; user-drag:none; pointer-events:auto;}
h1,h2,h3{font-family:var(--font-heading);}
.mono{font-family:var(--font-mono); letter-spacing:.04em;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--yellow); color:var(--gray-dark);}
a:focus-visible, button:focus-visible{outline:2px solid var(--yellow); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

/* Grands écrans : le site s'affiche comme une feuille centrée, et tout ce qui
   dépasse prend la couleur de fond. Changer --page-bg suffit pour passer du gris
   neutre au jaune (var(--yellow)). */
:root{ --page-bg:#DEDEDA; }
html{background:var(--page-bg);}
body{background:var(--page-bg);}
.page-shell{
  max-width:1200px; margin:0 auto; background:var(--white); min-height:100vh;
  box-shadow:0 0 40px rgba(0,0,0,.10);
  display:flex; flex-direction:column;
}
/* Dans un conteneur flex en colonne, un "margin:0 auto" latéral empêche l'élément
   de s'étirer : les sections se réduisaient à leur contenu et la galerie tombait
   sur une seule colonne. On leur rend donc leur pleine largeur. */
.page-shell > *{width:100%;}
/* Page plus courte que la fenêtre : le footer est poussé tout en bas au lieu de
   laisser une zone blanche vide en dessous. */
.page-shell > footer{margin-top:auto;}

/* Barre visible seulement quand l'administrateur est connecté */
.admin-bar{background:var(--gray-dark); color:var(--white); font-size:.78rem; position:sticky; top:0; z-index:60;}
.admin-bar-inner{
  max-width:1200px; margin:0 auto; padding:8px 28px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  font-family:var(--font-mono);
}
.admin-bar-tag{
  background:var(--yellow); color:var(--gray-dark); font-weight:600;
  padding:2px 8px; border-radius:3px; font-size:.7rem;
}
.admin-bar a{color:#d7d7d4; transition:color .2s var(--ease);}
.admin-bar a:hover{color:var(--yellow);}
.admin-bar-edit{font-weight:600; color:var(--white);}
.admin-bar-out{margin-left:auto;}
@media (max-width:720px){
  .admin-bar-inner{padding:8px 20px; gap:12px;}
  .admin-bar-out{margin-left:0;}
}

header{position:sticky; top:0; z-index:50; background:rgba(250,250,248,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--gray-light);}
.header-inner{max-width:1200px; margin:0 auto; padding:5px 28px; display:flex; align-items:center; justify-content:space-between;}
.logo{display:flex; align-items:center; gap:20px; font-size:1.5rem; font-weight:700; letter-spacing:-.02em;}
.logo a{display:flex; align-items:center; gap:10px;}
.site-logo{height:60px; width:auto; display:block;}
.logo-mark{width:14px; height:14px; background:var(--yellow); position:relative; flex-shrink:0;}
.logo-mark::before,.logo-mark::after{content:''; position:absolute; background:var(--gray-dark);}
.logo-mark::before{width:1px; height:22px; left:6.5px; top:-4px;}
.logo-mark::after{width:22px; height:1px; top:6.5px; left:-4px;}
nav{display:flex; font-size:.85rem;}
#nav a{font-family:var(--font-mono); color:var(--gray); position:relative; padding:0 10px 0px 0px; transition:color .25s var(--ease); font-weight:bold; text-transform:uppercase; font-size:1rem; letter-spacing:.05em;}
#nav a+a{margin-left:18px;}
#nav a+a::before{content:'|'; position:absolute; left:-18px; top:50%; transform:translateY(-58%); color:var(--gray-light); font-weight:200; pointer-events:none; font-size:2rem;}
#nav a:hover{color:var(--gray-dark);}
#nav a::after{content:''; position:absolute; left:0; right:10px; bottom:0; height:2px; background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);}
#nav a:hover::after{transform:scaleX(1);}
.nav-backdrop{position:fixed; inset:0; z-index:55; background:rgba(43,45,48,.85);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease);}
body.menu-open .nav-backdrop{opacity:1; visibility:visible;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:4px;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--gray-dark); margin:5px 0; transition:.3s;}

.hero{max-width:1200px; margin:0 auto; padding:15px 28px 15px; position:relative;}
.hero-eyebrow{font-size:.78rem; color:var(--gray);  display:flex; align-items:center; gap:10px;}
.hero-eyebrow .dot{width:6px; height:6px; background:var(--yellow); border-radius:50%;}
.hero h1{font-size:clamp(2.6rem, 6vw, 5rem); line-height:1.02; font-weight:700; letter-spacing:-.03em; max-width:15ch;}
.hero > h3{font-size:clamp(1.6rem, 2vw, 2rem); line-height:1.02; font-weight:500; letter-spacing:-.03em; max-width:30ch; margin:10px 0;}
.hero-underline{display:block; height:6px; margin-top:6px; background:var(--yellow); width:0; animation:draw 1.1s .3s var(--ease) forwards; transform-origin:left;}
@keyframes draw{ to{ width:min(420px, 70%); } }
.hero p{margin-top:26px; max-width:44ch; color:var(--gray); font-size:1.05rem; line-height:1.6;}
.hero-cats{margin-top:44px; display:flex; flex-wrap:wrap; gap:10px;}
.hero-cat{font-family:var(--font-mono); font-size:.72rem; padding:7px 14px; border:1px solid var(--gray-light); color:var(--gray); background:var(--white);}

.filter-bar{position:sticky; top:30px; z-index:40; background:var(--white); border-bottom:1px solid var(--gray-light);}
.filter-inner{max-width:1200px; margin:0 auto; padding:16px 28px; display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.filter-scroll{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0;}
.filter-scroll::-webkit-scrollbar{display:none;}
.filter-btn{font-family:var(--font-mono); font-size:.78rem; white-space:nowrap; padding:9px 16px; background:var(--gray-light); color:var(--gray-dark); border:none; cursor:pointer; position:relative; transition:background .25s var(--ease), color .25s var(--ease);font-weight:bold;text-transform:uppercase;}
.filter-btn:hover{background:#dcdcd9;}
.filter-btn.active{background:var(--gray-dark); color:var(--white);}
.filter-btn.active::after{content:''; position:absolute; left:8px; right:8px; bottom:-6px; height:3px; background:var(--yellow);}
.sort-select{flex:0 0 auto; padding:9px 12px; border:1px solid var(--gray-light); background:var(--white); font-family:var(--font-mono); font-size:.78rem; color:var(--gray-dark); cursor:pointer;}
.sort-select:focus{outline:none; border-color:var(--yellow);}
.search-box{flex:0 0 auto; width:100%; max-width:220px;}
.search-box input{
  width:100%; padding:9px 14px; border:1px solid var(--gray-light); background:var(--white);
  font-size:.82rem; font-family:var(--font-body);
}
.search-box input:focus{outline:none; border-color:var(--yellow);}

/* Écran étroit (mais pas encore mobile) : la recherche passe sous les catégories
   au lieu de les écraser */
@media (max-width:920px){
  .filter-inner{flex-wrap:wrap;}
  .filter-scroll{flex:1 1 100%; order:1;}
  .search-box{order:2; width:100%; max-width:100%;}
}

.gallery-section{max-width:1200px; margin:0 auto; padding:15px 28px;}
.latest-section{padding-top:56px; padding-bottom:0;}
.latest-section-first{padding-top:0; margin-top:10px;}
/* Trait discret pour séparer visuellement les blocs de l'accueil entre eux */
.latest-section:not(.latest-section-first)::before,
.home-journal::before{
  content:''; display:block; max-width:1200px; margin:20px auto 20px; height:1px; background:var(--gray-light);
}
.latest-section:not(.latest-section-first){padding-top:0;}
.latest-header{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:28px;}
/* Vrai titre de section, bien plus lisible que la petite étiquette discrète
   d'avant — pensé pour des visiteurs peu à l'aise avec les sites web. */
.latest-eyebrow{
  font-family:var(--font-heading); font-size:clamp(1.3rem, 2.4vw, 1.7rem); font-weight:700; line-height:1;
  color:var(--gray-dark); letter-spacing:-.01em; display:flex; align-items:center; gap:12px;
}
.latest-eyebrow .dot{width:9px; height:9px; background:var(--yellow); border-radius:50%; display:inline-block; flex-shrink:0;}
.latest-link{
  font-family:var(--font-mono); font-size:.82rem; font-weight:600; line-height:1; color:var(--gray-dark);
  background:var(--yellow); padding:9px 18px; border-radius:22px; white-space:nowrap; display:inline-block;
  transition:background .2s var(--ease), translate .2s var(--ease);
}
.latest-link:hover{background:#ffd23f; translate:3px 0;}

/* Liens d'accueil vers les sections clés : tuiles bien visibles plutôt que de
   simples liens texte, pour guider immédiatement le visiteur */
.home-links{max-width:1200px; margin:0 auto; padding:15px 28px 0; display:grid; grid-template-columns:repeat(var(--tile-count,4),1fr); gap:16px;}
.home-link-tile{
  display:flex; align-items:center; gap:14px; padding:18px 20px; background:var(--gray-light);
  border-radius:var(--radius); text-decoration:none; color:var(--gray-dark);
  transition:background .25s var(--ease), translate .25s var(--ease), box-shadow .25s var(--ease);
}
.home-link-tile:hover{background:var(--yellow); translate:0 -3px; box-shadow:0 12px 26px rgba(43,45,48,.18);}
.home-link-icon{font-size:1.6rem; line-height:1;}
.home-link-text{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;}
.home-link-title{font-weight:700; font-size:.98rem;}
.home-link-sub{font-family:var(--font-mono); font-size:.72rem; color:var(--gray); opacity:.85;}
.home-link-tile:hover .home-link-sub{color:var(--gray-dark);}
.home-link-arrow{font-size:1.1rem; opacity:.5; transition:opacity .2s, translate .2s;}
.home-link-tile:hover .home-link-arrow{opacity:1; translate:4px 0;}
@media (max-width:900px){ .home-links{grid-template-columns:repeat(min(var(--tile-count,4),2),1fr);} }
@media (max-width:560px){ .home-links{grid-template-columns:repeat(min(var(--tile-count,4),1),1fr);} }

/* Aperçu du journal sur l'accueil : cartes aussi grandes/imposantes que les
   cartes de créations (.card), avec la même hauteur de visuel en haut */
.home-journal{padding-top:0;}
.home-journal-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px;}
@media (min-width:1200px){ .home-journal-grid{grid-template-columns:repeat(4, 1fr);} }
.home-journal-grid .article-card{display:flex; flex-direction:column; height:100%; background:var(--gray-light); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 3px rgba(43,45,48,.10); transition:translate .4s var(--ease), box-shadow .4s var(--ease);}
.home-journal-grid .article-card:hover{translate:0 -6px; box-shadow:0 16px 34px rgba(43,45,48,.22);}
.home-journal-grid .article-card-media{aspect-ratio:4/3;}
.home-journal-grid .article-card-body{padding:20px 22px 24px; flex:1; display:flex; flex-direction:column;}
.home-journal-grid .article-card-body h2{font-size:1.15rem; margin-top:6px;}
.home-journal-grid .article-excerpt{margin-top:8px; flex:1;}
.latest-grid{grid-template-columns:repeat(4,1fr) !important; justify-content:unset !important;}
.gallery-count{font-family:var(--font-mono); font-size:.75rem; color:var(--gray); margin-bottom:24px;}
/* 4 vignettes par ligne sur grand écran, et bloc centré quand la rangée est
   incomplète : auto-fit réduit à néant les colonnes vides (ce que ne fait pas
   auto-fill), et une largeur maximale — au lieu de 1fr — laisse justify-content
   centrer ce qui reste. */
.grid{
  display:grid; gap:22px; justify-content:center;
  grid-template-columns:repeat(auto-fit, minmax(240px, 280px));
}
@media (min-width:1200px){
  .grid{grid-template-columns:repeat(4, 1fr); justify-content:unset;}
}
/* Le survol utilise "translate" (et non "transform") : l'animation d'entrée anime
   déjà transform et, en mode forwards, elle écraserait tout effet de survol. */
.card{
  background:var(--gray-light); position:relative; cursor:pointer; aspect-ratio:4/5;
  overflow:hidden; opacity:0; transform:translateY(16px); animation:rise .6s var(--ease) forwards;
  border-radius:var(--radius); box-shadow:0 1px 3px rgba(43,45,48,.10);
  transition:translate .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{translate:0 -6px; box-shadow:0 16px 34px rgba(43,45,48,.22);}
@keyframes rise{ to{opacity:1; transform:translateY(0);} }
.card-media{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(155deg, var(--gray-light) 0%, #d7d7d4 100%); transition:transform .5s var(--ease);}
.card-media img{width:100%; height:100%; object-fit:cover; display:block;}
.card-media::after{display:none;}
.card:hover .card-media{transform:scale(1.1);}
.card-icon{width:38%; max-width:80px; color:var(--gray); opacity:.55;}
.card-icon svg{width:100%; height:100%; display:block;}

.pagination{display:flex; justify-content:center; gap:6px; margin-top:50px; flex-wrap:wrap;}
.page-btn{
  min-width:36px; height:36px; padding:0 8px; background:var(--gray-light); border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:.82rem; color:var(--gray-dark); transition:background .2s var(--ease);
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
.page-btn:hover:not(:disabled){background:#dcdcd9;}
.page-btn.active{background:var(--gray-dark); color:var(--white);}
.page-btn:disabled{opacity:.35; cursor:default;}
.page-btn.disabled{opacity:.35; cursor:default; pointer-events:none;}
.page-dots{font-family:var(--font-mono); font-size:.82rem; color:var(--gray); padding:0 4px; display:inline-flex; align-items:center; height:36px;}

/* Page dédiée à une création */
.project-page{max-width:1100px; margin:0 auto; padding:28px 28px 60px;}
/* Photo flottée à gauche : le texte commence à côté d'elle puis reprend toute la
   largeur en dessous — pas de colonne étroite ni de vide sous la photo. */
.project-layout{display:block;}
.project-layout::after{content:''; display:block; clear:both;}
.project-gallery{float:left; width:min(52%, 600px); margin:0 34px 26px 0;}
.project-main-image{
  background:var(--gray-light); display:flex; align-items:center; justify-content:center;
  min-height:260px; max-height:75vh; overflow:hidden; position:relative; border-radius:var(--radius);
}
.project-main-image img{width:100%; height:auto; max-height:75vh; object-fit:contain; display:block; cursor:zoom-in;}
.zoom-btn{
  position:absolute; bottom:12px; right:12px; width:38px; height:38px; border:none;
  background:rgba(43,45,48,.7); color:var(--white); font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s var(--ease);
}
.zoom-btn:hover{background:var(--gray-dark);}

.img-zoom{
  position:fixed; inset:0; background:rgba(20,20,20,.95); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:40px 20px;
  opacity:0; pointer-events:none; visibility:hidden; overflow:hidden;
  transition:opacity .25s var(--ease), visibility .25s var(--ease);
}
.img-zoom.open{opacity:1; pointer-events:auto; visibility:visible;}
.img-zoom img{max-width:100%; max-height:100%; object-fit:contain; display:block;}
.img-zoom-close{
  position:absolute; top:18px; right:22px; background:none; border:none; color:var(--white);
  font-size:2rem; cursor:pointer; line-height:1;
}
/* Pastilles rondes à la couleur d'accent : bien visibles par-dessus une photo,
   et assez grandes pour être touchées au doigt. */
.zoom-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%; border:none;
  background:var(--yellow); color:var(--gray-dark);
  cursor:pointer; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  transition:background .2s var(--ease), scale .2s var(--ease);
  /* Le caractère ‹ / › est masqué : sa position dans la ligne varie d'une police à
     l'autre et le chevron n'était jamais vraiment centré. On le dessine donc. */
  font-size:0;
}
.zoom-arrow::before{
  content:''; width:12px; height:12px;
  border-top:3px solid currentColor; border-right:3px solid currentColor;
}
/* Décalage d'un pixel : le centre optique d'un chevron n'est pas celui de sa boîte */
.zoom-arrow-prev::before{rotate:-135deg; margin-left:4px;}
.zoom-arrow-next::before{rotate:45deg; margin-right:4px;}
.zoom-arrow:hover{background:#ffd23f;}
.zoom-arrow:active{scale:.92;}
.zoom-arrow-prev{left:10px;}
.zoom-arrow-next{right:10px;}
@media (min-width:640px){ .zoom-arrow-prev{left:26px;} .zoom-arrow-next{right:26px;} }
.img-zoom-counter{
  position:absolute; bottom:18px; left:0; right:0; text-align:center;
  color:rgba(255,255,255,.75); font-family:var(--font-mono); font-size:.78rem;
}
.project-noimage{color:var(--gray); font-size:.85rem; padding:80px 20px;}
.project-thumbs{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.project-thumb{
  width:64px; height:64px; padding:0; border:2px solid transparent; background:var(--gray-light);
  cursor:pointer; overflow:hidden; opacity:.6; transition:opacity .2s var(--ease), border-color .2s var(--ease);
  border-radius:8px;
}
.project-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.project-thumb:hover{opacity:.85;}
.project-thumb.active{opacity:1; border-color:var(--yellow);}

.project-info .tag{font-family:var(--font-mono); font-size:.72rem; color:var(--gray);}
.project-info .tag + .tag::before{content:'/ '; margin:0 0 0 5px; opacity:.55;}
.project-info h1{font-size:clamp(1.8rem,3.4vw,2.4rem); margin-top:10px; letter-spacing:-.02em;}
.project-info .page-content{margin-top:24px;}
.project-share-row{display:flex; align-items:center; justify-content:space-between; margin-top:24px;}
.project-share-row .back-link{font-family:var(--font-mono); font-weight:600; font-size:.82rem; color:var(--gray-dark); background:var(--yellow); padding:9px 18px; border-radius:24px; display:inline-flex; align-items:center; gap:6px; transition:opacity .2s; margin-bottom:0;}
.project-share-row .back-link:hover{opacity:.8;}
.share-btn{display:inline-flex; align-items:center; gap:7px; padding:9px 18px; background:var(--yellow); border:none; border-radius:24px; font-family:var(--font-mono); font-size:.82rem; color:var(--gray-dark); font-weight:600; cursor:pointer; transition:opacity .2s; white-space:nowrap;}
.share-btn:hover{opacity:.85;}
.share-btn-float{display:none;}
/* Bouton partager de la page article : en bas à droite, à la fin du texte, dans
   le flux normal de la page (jamais flottant au-dessus du contenu) */
.article-share-end{display:flex; justify-content:flex-end; margin-top:24px;}
.share-btn-article{display:inline-flex; align-items:center; gap:7px; padding:10px 16px; background:var(--yellow); color:var(--gray-dark); border:none; border-radius:24px; font-family:var(--font-mono); font-size:.82rem; font-weight:600; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.15); transition:opacity .2s;}
.share-btn-article:hover{opacity:.85;}
.project-info .page-content p{margin-top:14px; line-height:1.7; color:#3a3c3f;}
/* L'indentation se fait en padding-left (et non margin-left) : c'est le padding qui
   accueille la puce, donc chaque niveau imbriqué se décale bien par rapport au parent. */
/* display:flow-root — une image flottante ne rétrécit pas les blocs, elle ne
   décale que les lignes de texte : sans ça, les niveaux 1 et 2 d'une liste sont
   repoussés au même endroit (le bord de l'image) et l'indentation disparaît.
   Un bloc autonome, lui, se place entièrement à côté du float : l'indentation
   redevient visible. */
.project-info .page-content ul, .project-info .page-content ol{margin:5px 0; padding-left:20px; padding-bottom:14px; line-height:1.7; color:#3a3c3f; display:flow-root;}
.project-info .page-content li {margin:-.7em 0; line-height:1.7; color:#3a3c3f; font-size:.92rem;}
.project-info .page-content li > ul, .project-info .page-content li > ol{margin:0;}
.project-info .page-content ul > ul, .project-info .page-content ul > ol,
.project-info .page-content ol > ul, .project-info .page-content ol > ol{margin-left:20px;}
.project-info .page-content h2{margin-top:26px; font-size:1.3rem;}
.project-info .page-content h3{margin-top:22px; font-size:1.1rem;}
.project-info .page-content blockquote{border-left:3px solid var(--yellow); margin:16px 0; padding:2px 0 2px 14px; color:var(--gray); font-style:italic;}
.project-info .page-content hr{border:none; border-top:1px solid var(--gray-light); margin:22px 0;}
.project-info .page-content a{color:var(--gray-dark); border-bottom:1px solid var(--yellow);}
.project-info .page-content strong{color:var(--gray-dark);}
.project-info .page-content img{max-width:100%; height:auto; display:block; margin:16px 0; border-radius:10px;}

/* Second bloc de texte : passe sous la photo flottée, sur toute la largeur */
.project-extra{clear:both; margin-top:28px; padding-top:24px; border-top:1px solid var(--gray-light);}

/* Vidéo YouTube (optionnelle, rare) */
.project-video{clear:both; margin-top:20px; padding-top:10px; border-top:1px solid var(--gray-light);}
.project-video-frame{position:relative; width:100%; padding-top:56.25%; border-radius:10px; overflow:hidden; background:var(--gray-dark);}
.project-video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:none; display:block;}

/* Galerie "en cours de fabrication" : étapes, prototypes, essais */
.progress-gallery{clear:both; margin-top:16px;}
.progress-gallery h2{font-size:1.3rem; letter-spacing:-.02em;}
.progress-gallery-intro{color:var(--gray); margin-top:6px; font-size:.92rem;}
.progress-grid{
  display:grid; gap:12px; margin-top:20px;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
}
.progress-thumb{
  padding:0; border:none; background:var(--gray-light); cursor:pointer; overflow:hidden;
  border-radius:8px; aspect-ratio:1; transition:opacity .2s var(--ease);
}
.progress-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.progress-thumb:hover{opacity:.82;}
@media (max-width:600px){
  .progress-grid{grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:8px;}
}

.project-pager{display:flex; justify-content:space-between; gap:20px; margin-top:60px; padding-top:26px; border-top:1px solid var(--gray-light); flex-wrap:wrap;}

/* Créations similaires, en bas de la page projet : cartes de taille moyenne,
   à la place de la nav Précédent/Suivant */
.related-header{margin-top:60px; padding-top:26px; border-top:1px solid var(--gray-light); margin-bottom:20px;}
.related-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;}
.related-card{aspect-ratio:1/1;}
@media (max-width:900px){ .related-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .related-grid{grid-template-columns:1fr;} }
.pager-link{display:flex; flex-direction:column; gap:4px; max-width:45%;}
.pager-next{text-align:right; margin-left:auto;}
.pager-label{font-size:.72rem; color:var(--gray);}
.pager-title{font-weight:600; position:relative; display:inline-block; transition:color .2s var(--ease);}
.pager-title::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--yellow); transition:width .3s var(--ease);}
.pager-link:hover .pager-title::after{width:100%;}

@media (max-width:820px){
  /* Trop étroit pour un float : la photo repasse pleine largeur, texte en dessous */
  .project-gallery{float:none; width:auto; margin:0 0 26px;}
  .project-main-image{max-height:60vh;}
  .project-main-image img{max-height:60vh;}
}

/* z-index : les coins sont écrits avant .card-info dans le HTML, le dégradé les
   recouvrirait donc en bas de la vignette. */
.corner{position:absolute; z-index:3; width:16px; height:16px; border:0 solid var(--yellow); opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease);}
.card:hover .corner{opacity:1;}
/* L'angle de chaque équerre est arrondi, en écho aux coins de la vignette */
.c-tl{top:5px; left:5px; border-top-width:2px; border-left-width:2px; border-top-left-radius:8px; transform:translate(4px,4px);}
.c-tr{top:5px; right:5px; border-top-width:2px; border-right-width:2px; border-top-right-radius:8px; transform:translate(-4px,4px);}
.c-bl{bottom:5px; left:5px; border-bottom-width:2px; border-left-width:2px; border-bottom-left-radius:8px; transform:translate(4px,-4px);}
.c-br{bottom:5px; right:5px; border-bottom-width:2px; border-right-width:2px; border-bottom-right-radius:8px; transform:translate(-4px,-4px);}
.card:hover .c-tl{transform:translate(0,0);}
.card:hover .c-tr{transform:translate(0,0);}
.card:hover .c-bl{transform:translate(0,0);}
.card:hover .c-br{transform:translate(0,0);}

/* Toujours lisible, y compris sur mobile où le survol n'existe pas */
.card-info{
  position:absolute; z-index:2; left:0; right:0; bottom:0; padding:18px 16px 15px; color:var(--white);
  background:linear-gradient(to top, rgba(43,45,48,.94) 0%, rgba(43,45,48,.72) 48%, rgba(43,45,48,0) 100%);
  transition:padding-bottom .4s var(--ease);
}
.card:hover .card-info{padding-bottom:19px;}
/* Petit trait jaune qui s'allonge au survol */
.card-info::before{
  content:''; display:block; width:20px; height:3px; background:var(--yellow);
  margin-bottom:10px; transition:width .4s var(--ease);
}
.card:hover .card-info::before{width:44px;}
.card-info .tag{font-family:var(--font-mono); font-size:.65rem; color:var(--yellow);}
.card-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px;}
/* Séparateur entre catégories quand une création en a plusieurs */
.card-tags .tag:not(:last-child)::after{content:' /'; margin-left:5px; opacity:.55;}
.card-info .title{font-family:var(--font-heading); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; line-height:1.25;}

footer{background:var(--gray-dark); color:var(--white); padding:10px 28px 34px; position:relative;}
footer::before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--yellow);}
.footer-cta{max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; align-items:flex-start;}
footer h2{font-size:1.8rem; max-width:16ch;}
footer .contact{font-family:var(--font-mono); font-size:.85rem; color:#c9c9c7; line-height:2;}
footer .contact a:hover{color:var(--yellow);}

/* Colonnes de liens */
.footer-columns{
  max-width:1200px; margin:0 auto 0; padding-top:38px;
  display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:30px;
}
.footer-col{display:flex; flex-direction:column; gap:10px; min-width:0;}
.footer-col-title{font-family:var(--font-mono); font-size:.72rem; color:var(--yellow); text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px;}
.footer-col a{font-size:.88rem; color:#c9c9c7; transition:color .2s var(--ease); overflow-wrap:anywhere;}
.footer-col a:hover{color:var(--yellow);}
.footer-col-brand{gap:14px;}
.footer-logo{display:flex; align-items:center; gap:10px; font-size:1.05rem; font-weight:700; letter-spacing:-.02em; color:var(--white);}
.footer-logo .site-logo{height:28px; width:auto;}
.footer-tagline{font-size:.85rem; color:#9a9b9d; line-height:1.6; max-width:32ch;}

.footer-bottom{max-width:1200px; margin:36px auto 0; padding-top:20px; border-top:1px solid #45474a; font-size:.72rem; color:#8b8c8e; font-family:var(--font-mono);}
.footer-bottom a{text-decoration:underline; text-decoration-color:var(--yellow);}
.footer-bottom a:hover{color:var(--white);}
@media (max-width:820px){
  .footer-columns{grid-template-columns:1fr 1fr; row-gap:30px;}
  .footer-col-brand{grid-column:1/-1;}
}
@media (max-width:480px){
  .footer-columns{grid-template-columns:1fr;}
}
.back-to-top{display:none; position:fixed; bottom:20px; right:20px; z-index:100; width:48px; height:48px; border-radius:50%; background:var(--gray-dark); color:var(--white); border:none; cursor:pointer; opacity:0; transition:opacity .25s var(--ease), background .3s var(--ease), color .3s var(--ease); box-shadow:0 2px 8px rgba(0,0,0,.25); align-items:center; justify-content:center;}
.back-to-top.visible{opacity:1; display:flex;}
.back-to-top.over-footer{background:var(--yellow); color:var(--gray-dark);}
.back-to-top:hover{background:var(--yellow); color:var(--gray-dark);}
/* Wrapper fixe mobile : back-to-top + partager côte à côte */
.project-float-bar{display:none;}
@media(max-width:768px){
  .back-to-top{display:flex; bottom:16px; right:20px; z-index:99; width:40px; height:40px;}
  .project-share-row{display:none;}
  .share-btn-float{display:flex; position:static; align-items:center; gap:7px; padding:10px 16px; background:var(--yellow); color:var(--gray-dark); border:none; border-radius:24px; font-family:var(--font-mono); font-size:.82rem; font-weight:600; cursor:pointer; box-shadow:none; transition:opacity .2s;}
  .share-btn-float:hover{opacity:.85;}
  /* Bouton back-to-top dans la barre projet */
  .back-to-top-project{position:static; opacity:0; pointer-events:none; display:flex; width:40px; height:40px; border-radius:50%; background:var(--yellow); color:var(--gray-dark); border:none; cursor:pointer; box-shadow:none; align-items:center; justify-content:center; transition:opacity .25s; flex-shrink:0;}
  .back-to-top-project.visible{opacity:1; pointer-events:auto;}
  .back-to-top-project:hover{opacity:.8;}
  /* Barre flottante : galerie à gauche, back-to-top + partager à droite */
  .project-float-bar{display:flex; position:fixed; bottom:14px; left:16px; right:16px; z-index:100; align-items:center; justify-content:space-between; gap:8px; pointer-events:none;}
  .project-float-bar > *{pointer-events:auto;}
  .back-link-float{font-family:var(--font-mono); font-weight:600; font-size:.78rem; color:var(--gray-dark); background:var(--yellow); padding:9px 14px; border-radius:24px; display:inline-flex; align-items:center; white-space:nowrap; transition:opacity .2s; box-shadow:0 2px 10px rgba(0,0,0,.2);}
  .back-link-float:hover{opacity:.8;}
  .float-right{display:flex; align-items:center; gap:8px;}
  /* Masquer le back-to-top standalone du footer sur project.php */
  body.page-project .back-to-top:not(.back-to-top-project){display:none !important;}
}

/* Pages simples : blog, article, à propos */
.page-section{ padding:30px 28px 30px;}
.page-section h1{font-size:clamp(2rem,4.5vw,2.8rem); letter-spacing:-.02em; margin-bottom:10px;}
.page-section .page-intro{color:var(--gray); margin-bottom:20px;}

/* Page d'un article */
.article-header{margin-top:22px;}
.article-header h1{font-size:clamp(1.9rem,4vw,2.6rem); letter-spacing:-.02em; margin:10px 0 14px; line-height:1.15;}
.article-page .article-cover{aspect-ratio:16/8; margin:0 0 8px;}
.article-content{margin-top:8px;}

/* Bandeau plein écran quand l'article a une image de couverture */
.article-hero{position:relative; width:100%; height:min(60vh, 480px); min-height:320px; overflow:hidden; background:var(--gray-dark);}
.article-hero-img{width:100%; height:100%; object-fit:cover; display:block;}
.article-hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,15,15,.92) 0%, rgba(15,15,15,.55) 45%, rgba(15,15,15,.15) 78%, rgba(15,15,15,.35) 100%);
}
.article-hero-content{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  max-width:900px; margin:0 auto; padding:0 28px 40px;
  display:flex; flex-direction:column; gap:10px; color:var(--white);
}
.article-hero-content h1{
  font-size:clamp(1.9rem,4.2vw,2.9rem); letter-spacing:-.02em; line-height:1.12; color:var(--white);
}
.article-hero .back-link-light{
  position:absolute; top:24px; left:28px; z-index:3; margin-bottom:0;
  background:var(--yellow); color:var(--gray-dark); padding:9px 16px; border-radius:20px;
  font-weight:600; box-shadow:0 2px 10px rgba(0,0,0,.25); transition:transform .2s var(--ease), background .2s var(--ease);
}
.back-link-light:hover{background:var(--white); transform:translateY(-1px);}
.article-hero-meta{display:flex; align-items:center; gap:10px; font-size:.78rem; color:rgba(255,255,255,.75);}
.article-hero-meta .dot{color:var(--yellow); font-size:.7rem;}
.article-header .article-hero-meta{color:var(--gray); margin-bottom:2px;}
.article-header .article-hero-meta .dot{color:var(--yellow);}
.article-tags-light .tag-pill{background:rgba(255,255,255,.15); color:var(--white); backdrop-filter:blur(2px);}
.article-tags-light .tag-pill:hover{background:var(--yellow); color:var(--gray-dark);}
.article-hero + .article-page{padding-top:44px;}
@media (max-width:640px){
  .article-hero{height:340px; min-height:280px;}
  .article-hero-content{padding:0 20px 28px;}
  .back-link-light{padding-top:18px;}
}
.page-content p{margin-top:16px; line-height:1.7; color:#3a3c3f;}
.page-content ul, .page-content ol{margin:16px 0; padding-left:20px; padding-bottom:20px; line-height:1.7; color:#3a3c3f; display:flow-root;}
.page-content li{margin:-.2em 0; line-height:1.7; color:#3a3c3f; font-size:.92rem;}
/* Une liste imbriquée ne rajoute pas d'espace vertical, seulement le décalage */
.page-content li > ul, .page-content li > ol{margin:0;}
/* Filet de sécurité : sous-liste placée à côté du <li> au lieu d'être dedans
   (ancien contenu enregistré avant la correction automatique) */
.page-content ul > ul, .page-content ul > ol,
.page-content ol > ul, .page-content ol > ol{margin-left:20px;}
/* Puces différentes selon le niveau, pour distinguer les sous-listes d'un coup d'œil */
.page-content ul ul{list-style-type:circle;}
.page-content ul ul ul{list-style-type:square;}
.page-content ol ol{list-style-type:lower-alpha;}
.page-content ol ol ol{list-style-type:lower-roman;}
.page-content h2{margin-top:28px; font-size:1.4rem;}
.page-content h3{margin-top:22px; font-size:1.15rem;}
/* Tableau : conteneur scrollable pour éviter tout débordement sur mobile */
.page-content table{border-collapse:collapse; width:100%; margin:20px 0; display:block; overflow-x:auto;}
.page-content th, .page-content td{border:1px solid var(--gray-light); padding:10px 14px; text-align:left; font-size:.92rem; line-height:1.5;}
.page-content th{background:var(--gray-light); font-weight:700;}
.page-content blockquote{border-left:3px solid var(--yellow); margin:18px 0; padding:2px 0 2px 16px; color:var(--gray); font-style:italic;}
.page-content hr{border:none; border-top:1px solid var(--gray-light); margin:26px 0;}
.page-content a{color:var(--gray-dark); border-bottom:1px solid var(--yellow);}
.page-content strong{color:var(--gray-dark);}
.page-content img{max-width:100%; height:auto; display:block; margin:16px 0; border-radius:10px;}

.page-section-wide{max-width:1100px;}

.blog-search{display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap;}
.blog-search input{flex:1; min-width:180px; padding:11px 16px; border:1px solid var(--gray-light); border-radius:8px; font-size:.9rem;}
.blog-search input:focus{outline:none; border-color:var(--yellow);}
.blog-search button{background:var(--gray-dark); color:var(--white); border:none; padding:11px 20px; border-radius:8px; font-size:.85rem; cursor:pointer; transition:background .2s var(--ease);}
.blog-search button:hover{background:#1c1d1f;}
.clear-search{align-self:center; font-size:.8rem; color:var(--gray); text-decoration:underline;}

.blog-tags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 40px;}
.tag-pill{display:inline-block; padding:5px 13px; background:var(--gray-light); color:var(--gray-dark); border-radius:20px; font-size:.78rem; font-family:var(--font-mono); text-decoration:none; transition:background .2s, color .2s;}
.tag-pill:hover, .tag-pill.active{background:var(--gray-dark); color:var(--white);}
.tag-count{opacity:.6; font-size:.72em;}
.article-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px;}
.wip-badge{position:absolute; top:10px; left:10px; background:var(--yellow); color:var(--gray-dark); font-size:.72rem; font-family:var(--font-mono); font-weight:700; padding:3px 10px; border-radius:4px; text-transform:uppercase; letter-spacing:.04em;}
/* Filtre spécial "En cours" dans la galerie : se démarque des vraies catégories */
.filter-btn-wip{color:var(--gray-dark); border:1px solid var(--yellow); background:#fffdf0;}
.filter-btn-wip.active{background:var(--yellow); color:var(--gray-dark); border-color:var(--yellow);}
.empty-note{color:var(--gray); padding:30px 0;}

.article-date{font-family:var(--font-mono); font-size:.72rem; color:var(--gray); letter-spacing:.02em;}
.article-excerpt{color:var(--gray); font-size:.92rem; line-height:1.6;}
/* Bouton plutôt qu'un simple lien texte : bien plus visible sur les cartes d'articles */
.read-more{
  font-family:var(--font-mono); font-size:.76rem; font-weight:600; color:var(--gray-dark);
  display:inline-flex; align-items:center; gap:6px; width:fit-content;
  padding:9px 16px; background:var(--yellow); border-radius:20px;
  transition:background .2s var(--ease), translate .2s var(--ease);
}
.read-more:hover{background:#ffd23f; translate:3px 0;}

/* Placeholder pour un article sans photo de couverture */
.article-media-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--gray-light) 0%, #d7d7d4 100%); color:var(--gray); opacity:.55;
}
.article-media-placeholder svg{width:34%; max-width:70px;}

/* Article mis en avant : grande carte horizontale, uniquement en tête de liste */
.article-featured{
  display:grid; grid-template-columns:240px 1fr; gap:0; margin-bottom:40px; height:210px;
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 1px 3px rgba(43,45,48,.10); transition:box-shadow .3s var(--ease), translate .3s var(--ease);
}
.article-featured:hover{box-shadow:0 20px 44px rgba(43,45,48,.16); translate:0 -4px;}
.article-featured-media{position:relative; height:100%; overflow:hidden; background:var(--gray-light);}
.article-featured-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease);}
.article-featured:hover .article-featured-media img{transform:scale(1.05);}
.article-featured-body{padding:22px 32px; display:flex; flex-direction:column; gap:6px; justify-content:center; min-width:0; overflow:hidden;}
.article-featured-eyebrow{font-size:.7rem; color:var(--gray); display:flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:.05em;}
.article-featured-eyebrow .dot{width:6px; height:6px; background:var(--yellow); border-radius:50%; flex-shrink:0;}
.article-featured-body h2{font-size:clamp(1.25rem,2vw,1.6rem); letter-spacing:-.02em; line-height:1.2; margin-top:2px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.article-featured-body .article-excerpt{font-size:.9rem; margin-top:2px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.article-featured-body .article-tags{display:none;}
.article-featured-body .read-more{margin-top:4px;}
@media (max-width:640px){
  .article-featured{grid-template-columns:1fr; height:auto;}
  .article-featured-media{height:180px;}
  .article-featured-body{padding:20px;}
}

/* Grille des autres articles */
.article-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:26px;}
.article-card{max-width:520px;
  display:flex; flex-direction:column; background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 1px 3px rgba(43,45,48,.10); transition:box-shadow .3s var(--ease), translate .3s var(--ease);
}
.article-card:hover{box-shadow:0 16px 34px rgba(43,45,48,.16); translate:0 -4px;}
.article-card-media{display:block; position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--gray-light);}
.article-card-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease);}
.article-card:hover .article-card-media img{transform:scale(1.06);}
.article-card-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.article-card-body h2{font-size:1.12rem; letter-spacing:-.01em; line-height:1.3;}
.article-card-body h2 a:hover{color:var(--yellow);}
.article-card-body .article-excerpt{font-size:.88rem; flex:1;}
.article-card-body .read-more{margin-top:auto; padding-top:4px;}

/* Cartes limitées en hauteur (titre/extrait) uniquement dans la grille complète du
   blog — sur l'accueil, l'aperçu garde le texte tel quel. */
.article-grid .article-card-body h2{
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.article-grid .article-card-body .article-excerpt{
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
}

.article-cover{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--gray-light); margin:24px 0; border-radius:var(--radius);}
.back-link{font-family:var(--font-mono); font-size:.78rem; color:var(--gray); display:inline-block; margin-bottom:20px;}
.back-link:hover{color:var(--gray-dark);}
/* Page projet : même taille/poids que le pager Précédent/Suivant, avec la même
   barre jaune qui s'étire au survol */

/* Formulaire de contact */
.contact-form{display:flex; flex-direction:column; gap:6px; margin-top:10px;}
.contact-form label{font-size:.8rem; color:var(--gray); margin-top:14px;}
.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea{
  padding:12px 14px; border:1px solid var(--gray-light); font-size:.95rem; font-family:inherit; background:var(--white);
}
.contact-form textarea{resize:vertical;}
.btn-submit{
  margin-top:22px; align-self:flex-start; background:var(--yellow); color:var(--gray-dark); border:none;
  padding:12px 26px; font-weight:600; font-size:.9rem; cursor:pointer; transition:background .2s var(--ease);
}
.btn-submit:hover{background:#e0b41b;}
.hp-field{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.form-error{color:#b3261e; font-size:.85rem; margin-top:8px;}
.form-success{background:var(--gray-light); padding:16px 18px; font-size:.92rem; margin-top:10px;}

/* Lien "Rechercher" dans la barre de filtres de la galerie */
.filter-search-link{flex:0 0 auto; font-size:.78rem; color:var(--gray); white-space:nowrap; padding:9px 6px; transition:color .2s var(--ease);}
.filter-search-link:hover{color:var(--gray-dark);}

/* Page recherche : grand bandeau + résultats live */
.search-hero{max-width:1200px; margin:0 auto; padding:40px 28px 10px;}
.search-hero-inner{max-width:760px; margin:0 auto;}
.search-field{display:flex; align-items:center; gap:14px; border-bottom:3px solid var(--gray-dark); padding:8px 4px;}
.search-field-icon{font-size:1.8rem; color:var(--gray); line-height:1;}
.search-field input{
  flex:1; min-width:0; border:none; background:none; outline:none;
  font-family:var(--font-heading); font-size:clamp(1.6rem, 5vw, 2.6rem);
  font-weight:500; letter-spacing:-.02em; color:var(--gray-dark);
}
.search-field input::placeholder{color:var(--gray-light);}
.search-field:focus-within{border-bottom-color:var(--yellow);}


@media (max-width:720px){
  /* backdrop-filter fait du header le bloc conteneur des enfants fixed :
     on le retire sur mobile pour que le menu se cale sur la fenêtre entière.
     z-index relevé au-dessus du voile (.nav-backdrop = 55) pour que le menu,
     enfermé dans le contexte d'empilement du header, reste cliquable. */
  header{backdrop-filter:none; z-index:60;}
  /* Menu = tiroir à droite */
  #nav{position:fixed; top:65px; right:0; bottom:0; left:auto; z-index:60;
      width:min(280px, 78%); background:var(--white); flex-direction:column; gap:0;
      padding:8px 0; box-shadow:-8px 0 30px rgba(0,0,0,.12);
      opacity:0; visibility:hidden; transform:translateY(-8px);
      transition:opacity .3s var(--ease), visibility .3s var(--ease), transform .3s var(--ease);}
  #nav.open{opacity:1; visibility:visible; transform:translateY(0);}
  /* Une ligne entre chaque entrée du menu */
  #nav a{width:100%; padding:15px 24px; border-bottom:1px solid var(--gray-light); }
  #nav a:last-child{border-bottom:none;}
  #nav a::after{display:none;}
  #nav a+a{margin-left:0;}
  #nav a+a::before{display:none;}
  .nav-toggle{display:block; position:relative; z-index:61;}
  .header-inner{padding:16px 20px;}

  /* Héro : on réduit les titres pour éviter le débordement */
  .hero{padding:40px 20px 24px;}
  .hero h1{font-size:clamp(2rem, 8vw, 2.8rem);}
  .hero > h3{font-size:clamp(1.5rem, 6vw, 2rem);}
  .hero p{font-size:1rem;}

  /* Filtres : les catégories passent à la ligne au lieu de scroller */
  .filter-bar{top:57px;}
  .filter-inner{padding:14px 20px; gap:12px;}
  .filter-inner h3{width:100%; font-size:.95rem;}
  .filter-scroll{flex-wrap:wrap; overflow-x:visible; width:100%; flex:1 1 100%;}
  .filter-btn{font-size:.72rem; padding:8px 12px;}
  .search-box{max-width:100%; width:100%;}

  /* Marges des sections resserrées */
  .gallery-section{padding:16px 14px 28px;}
  .page-section{padding:50px 20px 70px;}
  .project-page{padding:18px 20px 50px;}
  .grid{grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px;}

  footer{padding:44px 20px 30px;}
}

@media (max-width:420px){
  .grid{grid-template-columns:1fr 1fr; gap:12px;}
  .latest-grid{grid-template-columns:1fr 1fr !important;}
  .hero > h3{font-size:1.4rem;}
}

/* ==========================================================================
   Accueil : pièce mise en avant + bandeau défilant
   ========================================================================== */
/* Hero pleine largeur avec slideshow en fond */
.hero-fullslider{
  position:relative; width:100%; height:435px; overflow:hidden; background:var(--gray-dark);
}
.hero-fullslider .hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1s var(--ease); pointer-events:none; display:block;
}
.hero-fullslider .hero-slide.active{opacity:1; pointer-events:auto;}
.hero-fullslider .hero-slide-media{position:absolute; inset:0;}
.hero-fullslider .hero-slide-media img{width:100%; height:100%; object-fit:cover; display:block; transform:translateZ(0); will-change:transform;}
.hero-fullslider .hero-slide.active .hero-slide-media img{animation:kenburns 7s ease-out forwards;}

/* Dégradé sombre à gauche pour lisibilité du texte */
.hero-fullslider-overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to right, rgba(43,45,48,.82) 0%, rgba(43,45,48,.45) 45%, rgba(43,45,48,0) 75%);
  display:flex; flex-direction:column; justify-content:space-between; padding:36px 52px;
  gap:16px;
}
.hero-fullslider-overlay > *{pointer-events:auto;}
.hero-fullslider-text h3{
  color:var(--white); font-size:clamp(1.1rem, 2vw, 1.6rem); font-weight:700;
  letter-spacing:-.03em; line-height:1.1; max-width:32ch; display:table;
}
.hero-fullslider-text .hero-underline{display:none;}
.hero-fullslider-text h3::after{
  content:''; display:block; height:6px; margin-top:8px;
  background:var(--yellow); width:0;
  animation:draw-slider 1.1s .3s var(--ease) forwards;
}
@keyframes draw-slider{ to{ width:100%; } }

.hero-fullslider-bottom{display:flex; flex-direction:column; gap:8px;}
.hero-fullslider-caption{position:relative; min-height:2.8rem;}
.hero-caption-item{
  position:absolute; bottom:0; left:0; right:0; opacity:0; pointer-events:none; transition:opacity .6s var(--ease);
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
}
.hero-caption-item.active{opacity:1; pointer-events:auto;}
.hero-caption-left{display:flex; flex-direction:column; gap:2px;}
.hero-caption-cat{font-size:.7rem; color:var(--yellow); letter-spacing:.04em;}
.hero-caption-title{color:var(--white); font-family:var(--font-body); font-size:1.1rem; font-weight:600;}
.hero-caption-btn{
  flex-shrink:0; background:var(--yellow); color:var(--gray-dark);
  font-family:var(--font-body); font-size:1.2rem; font-weight:700;
  padding:8px 14px; border-radius:4px; white-space:nowrap;
  transition:background .2s var(--ease);
}
.hero-caption-btn:hover{background:#e0b41b;}

.hero-fullslider .hero-slider-dots{
  position:static; translate:none; display:flex; gap:7px; align-self:flex-start;
}

/* Hero ancien (conservé si utilisé ailleurs) */
.hero-split{display:flex; align-items:flex-end; justify-content:space-between; gap:44px; flex-wrap:wrap;}
.hero-text{flex:1 1 340px; min-width:0;}

/* Slideshow hero — remplace hero-featured */
.hero-slider{
  flex:0 0 auto; width:320px; height:400px; position:relative;
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 8px 28px rgba(43,45,48,.18);
}
.hero-slide{
  position:absolute; inset:0; display:block; opacity:0;
  transition:opacity .8s var(--ease);
  pointer-events:none;
}
.hero-slide.active{opacity:1; pointer-events:auto;}
.hero-slide-media{position:absolute; inset:0;}
.hero-slide-media img{width:100%; height:100%; object-fit:cover; display:block; transform:translateZ(0); will-change:transform;}
.hero-slide.active .hero-slide-media img{animation:kenburns 7s ease-out forwards;}
.hero-slide-info{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px;
  background:linear-gradient(to top, rgba(43,45,48,.92) 0%, rgba(43,45,48,.5) 60%, transparent 100%);
  color:var(--white); display:flex; flex-direction:column; gap:6px;
}
.hero-slide-info .tag{font-size:.65rem; color:var(--yellow); align-self:flex-start; background:none; padding:0;}
.hero-slide-title{font-family:var(--font-heading); font-weight:600; font-size:1.05rem; line-height:1.25;}
.hero-slider-dots{
  position:absolute; bottom:10px; left:50%; translate:-50% 0; z-index:3;
  display:flex; gap:6px;
}
.hero-dot{
  width:7px; height:7px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.45); transition:background .3s, transform .3s;
  padding:0;
}
.hero-dot.active{background:var(--yellow); transform:scale(1.3);}

.hero-featured{
  flex:0 0 auto; width:300px; display:block; position:relative;
  background:var(--gray-light); border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/5; box-shadow:0 1px 3px rgba(43,45,48,.10);
  transition:translate .4s var(--ease), box-shadow .4s var(--ease);
}
.hero-featured:hover{translate:0 -6px; box-shadow:0 16px 34px rgba(43,45,48,.22);}
.hero-featured-tag{
  position:absolute; top:14px; left:14px; z-index:2; background:var(--yellow); color:var(--gray-dark);
  font-size:.65rem; padding:5px 10px; border-radius:20px; font-weight:600;
}
.hero-featured-media{position:absolute; inset:0;}
.hero-featured-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease);}
.hero-featured:hover .hero-featured-media img{transform:scale(1.06);}
.hero-featured-info{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px;
  background:linear-gradient(to top, rgba(43,45,48,.92) 0%, rgba(43,45,48,.5) 55%, rgba(43,45,48,0) 100%);
  color:var(--white); display:flex; flex-direction:column; gap:6px;
}
.hero-featured-info .tag{font-size:.65rem; color:var(--yellow); align-self:flex-start;}
.hero-featured-title{font-family:var(--font-heading); font-weight:600; font-size:1.05rem; line-height:1.25;}

/* Bandeau défilant : deux copies du contenu mises bout à bout, on en fait glisser
   la moitié pour boucler sans coupure visible. Le séparateur porte sa propre marge
   (et non un padding partagé avec le texte) pour un espacement net et symétrique. */
.marquee{
  background:var(--gray-dark); color:var(--white); overflow:hidden;
  padding:15px 0; border-top:1px solid #45474a; border-bottom:1px solid #45474a;
}
.marquee-track{display:flex; align-items:center; width:max-content; animation:marquee-scroll 45s linear infinite;}
.marquee-item{
  font-family:var(--font-heading); font-weight:600; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
.marquee-dot{color:var(--yellow); font-size:.6rem; margin:0 22px;}
@keyframes marquee-scroll{ to{ transform:translateX(-50%); } }

/* Bandeau "Création en cours" : même principe que le marquee, en jaune/noir,
   sur la page d'une création marquée WIP dans l'admin. */
.wip-marquee{background:var(--yellow); color:#000; overflow:hidden; padding:10px 0;}
.wip-marquee-track{display:flex; align-items:center; width:max-content; animation:marquee-scroll 18s linear infinite;}
.wip-marquee-item{font-family:var(--font-heading); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; color:#000;}
.wip-marquee-dot{color:#000; font-size:.72rem; font-weight:700; margin:0 18px; opacity:.6; letter-spacing:.1em;}
@keyframes kenburns{ from{ transform:scale(1) translateZ(0); } to{ transform:scale(1.07) translateZ(0); } }

/* ==========================================================================
   Avis clients
   ========================================================================== */
/* Deux colonnes fixes (plutôt qu'auto-fill) : un avis long peut ainsi s'étendre sur
   toute la largeur (.review-wide) sans laisser un trou à côté de lui. */
.review-list{columns:2; column-gap:20px; margin:24px 0 50px;}
.review-card{break-inside:avoid; margin-bottom:20px;}
.review-list .review-wide{column-span:all;}
.review-wide .review-text{max-width:70ch;}

/* Carte témoignage : grand guillemet décoratif en fond, avatar en initiale,
   légère élévation au survol — le même langage visuel que les cartes de la galerie. */
.review-card{
  position:relative; background:var(--white); border-radius:var(--radius); padding:20px 20px 16px;
  display:flex; flex-direction:column; gap:10px; overflow:hidden;
  box-shadow:0 1px 3px rgba(43,45,48,.08); border:1px solid var(--gray-light);
  transition:translate .3s var(--ease), box-shadow .3s var(--ease);
}
.review-card:hover{translate:0 -4px; box-shadow:0 14px 30px rgba(43,45,48,.12);}
.review-card::before{
  content:'“'; position:absolute; top:-18px; right:14px; font-family:var(--font-heading);
  font-size:5.5rem; font-weight:700; color:var(--gray-light); line-height:1; z-index:0;
}
.review-stars{color:var(--yellow); letter-spacing:3px; font-size:1.3rem; position:relative; z-index:1;}
.review-text{color:#3a3c3f; line-height:1.6; font-size:.95rem; position:relative; z-index:1;}
.review-footer{display:flex; align-items:center; gap:10px; position:relative; z-index:1;}
.review-avatar{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--gray-dark); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-heading);
  font-weight:600; font-size:.85rem;
}
.review-meta{font-size:.78rem; color:var(--gray-dark); font-weight:600;}
.review-date{font-size:.9em; color:var(--gray); font-weight:400;}

/* Popup de confirmation après l'envoi d'un avis : bien visible, pour rassurer
   sans ambiguïté les personnes peu à l'aise avec les formulaires. */
.confirm-modal{
  position:fixed; inset:0; z-index:300; background:rgba(20,20,20,.72);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.confirm-modal.open{opacity:1; pointer-events:auto;}
.confirm-modal-box{
  background:var(--white); border-radius:var(--radius); padding:38px 34px 32px;
  max-width:380px; width:100%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.confirm-modal-icon{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%; background:var(--yellow);
  color:var(--gray-dark); font-size:1.6rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.confirm-modal-icon-warn{background:#fdecea; color:#b3261e;}
.confirm-modal-box h2{font-size:1.3rem; margin-bottom:10px;}
.confirm-modal-box p{color:var(--gray); font-size:.92rem; line-height:1.6; margin-bottom:22px;}
.confirm-modal-box .btn-submit{width:100%; text-align:center;}

.review-form-wrap{max-width:700px; margin:50px auto 0; background:#F0F0ED; border-radius:var(--radius); padding:36px 40px 44px;}
.review-form-title{font-size:1.3rem; margin-bottom:16px;}

/* Étoiles cliquables : radios cachés + labels en ordre inversé pour que "survoler
   une étoile" allume aussi toutes celles avant elle via un simple sélecteur CSS. */
.star-picker{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:6px; font-size:2.6rem; margin-top:-18px;}
.star-picker input{position:absolute; opacity:0; pointer-events:none;}
/* .contact-form label impose .8rem à tous les <label> du formulaire, étoiles
   comprises : on doit donc reprendre explicitement la taille ici pour la faire
   gagner (même spécificité, mais cette règle vient après dans la feuille). */
.star-picker label{font-size:inherit; color:white; cursor:pointer; transition:color .15s var(--ease); line-height:1; -webkit-text-stroke:0.5px #676d75;}
.star-picker input:checked ~ label,
.star-picker label:hover,
.star-picker label:hover ~ label{color:var(--yellow); -webkit-text-stroke:1.5px var(--yellow);}

/* Aperçu sur l'accueil : bandeau au fond légèrement teinté (comme les vignettes de
   la galerie) pour détacher visuellement les cartes blanches posées dessus. */
.reviews-strip{background:var(--gray-light);}
.reviews-strip-inner{max-width:1200px; margin:0 auto; padding:40px 28px;}
.reviews-strip-eyebrow{
  font-size:.78rem; color:var(--gray); display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.reviews-strip-eyebrow .dot{width:6px; height:6px; background:var(--yellow); border-radius:50%;}
.reviews-strip-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:28px;}
.reviews-strip-head h2{font-size:1.9rem; letter-spacing:-.01em;}
.reviews-strip-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px;}

@media (max-width:720px){
  .hero-split{align-items:stretch;}
  .hero-featured{width:100%; max-width:340px; margin:0 auto;}
  .hero-slider{width:100%; max-width:360px; height:300px; margin:0 auto;}
  .hero-fullslider{height:380px;}
  .hero-fullslider-overlay{padding:32px 28px; background:linear-gradient(to top, rgba(43,45,48,.85) 0%, rgba(43,45,48,.4) 60%, transparent 100%);}
  .hero-fullslider-text h3{font-size:clamp(1.5rem,6vw,2rem);}
  .reviews-strip-inner{padding:44px 20px 50px;}
}

/* ==========================================================================
   Page Machines & matières — layout alterné image / texte
   ========================================================================== */
.machines-hero{
  max-width:900px; margin:0 auto; padding:70px 28px 0;
}
.machines-hero h1{font-size:clamp(2rem,4.5vw,2.8rem); letter-spacing:-.02em; margin-bottom:10px;}
.machines-intro{color:var(--gray); margin-bottom:0; line-height:1.6;}

.machines-list{max-width:1200px; margin:0 auto; padding:60px 28px 100px;}
.machines-empty{color:var(--gray); text-align:center; padding:60px 0; font-size:1.1rem;}

.machine-row{
  display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;
  border-top:1px solid var(--gray-light); min-height:420px;
}
.machine-row:last-child{border-bottom:1px solid var(--gray-light);}

.machine-media{
  position:relative; overflow:hidden; background:var(--gray-light);
  min-height:360px;
}
.machine-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease);
}
.machine-row:hover .machine-media img{transform:scale(1.04);}
.machine-placeholder{
  width:100%; height:100%; min-height:360px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--gray-light) 0%, #d7d7d4 100%);
  color:var(--gray); opacity:.5;
}
.machine-placeholder svg{width:80px; height:80px;}

.machine-text{
  padding:52px 60px;
  display:flex; flex-direction:column; justify-content:center; gap:16px;
  background:var(--white);
}
.machine-index{
  font-size:.7rem; color:var(--gray); letter-spacing:.08em;
  display:inline-block; margin-bottom:4px;
}
.machine-text h2{
  font-size:clamp(1.5rem, 2.5vw, 2rem); letter-spacing:-.02em; line-height:1.15;
  position:relative; padding-bottom:16px;
}
.machine-text h2::after{
  content:''; position:absolute; left:0; bottom:0;
  width:40px; height:4px; background:var(--yellow);
  transition:width .4s var(--ease);
}
.machine-row:hover .machine-text h2::after{width:80px;}
.machine-desc p{margin-top:14px; line-height:1.7; color:#3a3c3f;}
.machine-desc p:first-child{margin-top:0;}

/* Rangées paires : image à droite, texte à gauche */
.machine-row--reverse .machine-media{order:2;}
.machine-row--reverse .machine-text{order:1;}

@media (max-width:860px){
  .machine-row, .machine-row--reverse{grid-template-columns:1fr; min-height:unset;}
  .machine-row--reverse .machine-media{order:0;}
  .machine-row--reverse .machine-text{order:1;}
  .machine-media, .machine-placeholder{min-height:260px;}
  .machine-text{padding:36px 28px;}
}
@media (max-width:600px){
  .machines-hero{padding:50px 20px 0;}
  .machines-list{padding:40px 0 70px;}
  .machine-media, .machine-placeholder{min-height:220px;}
  .machine-text{padding:28px 20px;}
}

/* ==========================================================================
   Bandeau marques (page machines)
   ========================================================================== */
.brands-strip{
  border-top:1px solid var(--gray-light);
  padding:48px 28px 60px;
  max-width:1200px; margin:0 auto;
}
.brands-label{
  font-size:.7rem; color:var(--gray); letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:28px; display:block; text-align:center;
}
.brands-track{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:32px 48px;
}
.brand-logo{
  display:flex; align-items:center; justify-content:center;
}
.brand-logo img{width:100%; width:auto; max-height:100px; object-fit:contain; display:block;}
.brand-name-text{
  font-family:var(--font-heading); font-weight:700; font-size:1.15rem;
  color:var(--gray-dark); letter-spacing:-.02em;
}
@media (max-width:600px){
  .brands-strip{padding:36px 20px 50px;}
  .brands-track{gap:24px 32px;}
  .brand-logo{height:38px;}
}

/* Deux groupes dans le bandeau marques */
.brands-group{margin-bottom:32px;}
.brands-group:last-child{margin-bottom:0;}

/* ==========================================================================
   Mobile homepage — ajustements spécifiques ≤ 560px
   ========================================================================== */
@media (max-width:560px){
  /* Logo réduit de moitié */
  .site-logo{height:44px;}
  .logo{font-size:1rem; gap:10px;}
  .logo a{gap:6px;}

  /* Slider : -50px de hauteur, titre et bouton réduits d'un tiers */
  .hero-fullslider{height:330px;}
  .hero-fullslider-text h3{font-size:clamp(.85rem,4vw,1.1rem);}
  .hero-fullslider-text h3::after{height:3px; margin-top:5px;}
  .hero-caption-title{font-size:.82rem;}
  .hero-caption-cat{font-size:.6rem;}
  .hero-caption-btn{font-size:.78rem; padding:5px 10px;}

  /* Double dégradé slider : sombre en haut ET en bas pour lisibilité du titre */
  .hero-fullslider-overlay{
    background:
      linear-gradient(to bottom, rgba(43,45,48,.75) 0%, transparent 32%),
      linear-gradient(to top,    rgba(43,45,48,.88) 0%, transparent 55%);
  }

  /* Tuiles 4 en ligne, portrait, sans description */
  .home-links{grid-template-columns:repeat(var(--tile-count,4),1fr); gap:8px; padding:12px 12px 0;}
  .home-link-tile{flex-direction:column; align-items:center; justify-content:center; padding:10px 4px; gap:5px; text-align:center;}
  .home-link-icon{font-size:1.4rem;}
  .home-link-title{font-size:.72rem; line-height:1.2;}
  .home-link-sub{display:none;}
  .home-link-arrow{display:none;}

  /* Galerie : grille 2 colonnes, marges resserrées */
  .gallery-section{padding:10px 10px 20px;}
  .grid{grid-template-columns:1fr 1fr; gap:10px;}
  .pagination{margin-top:16px;}

  /* Hero galerie/blog : titre compact, description masquée */
  .page-section{padding:12px 14px 8px !important;}
  .page-section h1{font-size:1.1rem; margin:0;}
  .page-intro{display:none;}

  /* Barre de filtres : une seule ligne scrollable, "Catégories :" masqué,
     dégradé sur la droite pour signaler qu'on peut swiper */
  .filter-bar{position:sticky; top:0;}
  .filter-inner{padding:8px 14px; gap:8px; flex-wrap:wrap; align-items:center;}
  .filter-inner h3{display:none;}
  .filter-scroll{flex:1 1 100%; order:1; gap:6px; flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(to right, black 80%, transparent 100%);
    -webkit-mask-image:linear-gradient(to right, black 80%, transparent 100%);
    padding-right:24px; padding-bottom:8px; overflow-y:visible;}
  .filter-btn{padding:6px 12px; font-size:.72rem;}
  .search-box{order:2; width:100%; max-width:100%;}
  .search-box input{padding:6px 10px; font-size:.78rem;}

  /* Espace après les tuiles de nav : réduit + trait de séparation */
  .home-links{margin-bottom:0; padding-bottom:12px; border-bottom:1px solid var(--gray-light);}
  .latest-section{padding-top:22px;}
  .latest-section:not(.latest-section-first)::before{display:none;}

  /* Moins d'espace entre créations et journal */
  .home-journal{padding-top:0;}
  .home-journal::before{margin:10px auto !important;}

  /* Journal compact sur mobile */
  .home-journal-grid{grid-template-columns:1fr; gap:10px;}
  .home-journal-grid .article-card{flex-direction:row; height:80px; border-radius:6px;}
  .home-journal-grid .article-card-media{flex:0 0 80px; aspect-ratio:unset; height:80px;}
  .home-journal-grid .article-card-body{padding:8px 12px; justify-content:center;}
  .home-journal-grid .article-card-body h2{font-size:.82rem; margin-top:0; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;}
  .home-journal-grid .article-excerpt{display:none;}
  .home-journal-grid .article-tags{display:none;}
  .home-journal-grid .read-more{display:none;}
  .home-journal-grid .article-date{font-size:.65rem;}

  /* Journal blog.php : tuiles uniformes 2 colonnes, images réduites */
  .article-featured{grid-template-columns:1fr; height:auto; margin-bottom:16px;}
  .article-featured-media{height:120px;}
  .article-featured-body{padding:12px 14px;}
  .article-featured-body h2{font-size:1rem;}
  .article-featured-body .article-excerpt{display:none;}
  .article-featured-body .read-more{font-size:.78rem;}

  .article-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .article-card{max-width:none;}
  .article-card-media{aspect-ratio:4/3;}
  .article-card-body{padding:10px 12px 12px; gap:5px;}
  .article-card-body h2{font-size:.82rem; line-height:1.25;}
  .article-card-body .article-excerpt{display:none;}
  .article-card-body .article-tags{display:none;}
  .article-card-body .read-more{font-size:.72rem; padding-top:2px;}
  .article-card-body .article-date{font-size:.65rem;}

  /* Footer compact */
  footer{padding:4px 16px 18px;}
  .footer-columns{padding-top:12px; grid-template-columns:1fr 1fr; column-gap:12px; row-gap:16px; align-items:start;}
  .footer-col:nth-child(odd):not(.footer-col-brand){text-align:right; align-items:flex-end;}
  .footer-col:nth-child(even){text-align:left; align-items:flex-start;}
  .footer-col-brand{grid-column:1/-1;}
  .footer-logo{display:none;}
  .footer-tagline{font-size:.78rem; max-width:none;}
  .footer-col{gap:6px;}
  .footer-col-title{font-size:.65rem; margin-bottom:0;}
  .footer-col a{font-size:.78rem;}
  .footer-bottom{margin-top:14px; padding-top:10px; font-size:.65rem;}

  /* Témoignages */
  .review-list{columns:1;}
  .review-text{font-size:.82rem;}
  .review-card{padding:14px 14px;}
  .reviews-strip-head h2{font-size:1.2rem;}
  .reviews-strip-inner{padding:24px 16px;}
  .reviews-strip-grid{gap:12px;}
  .review-card::before{font-size:4rem; top:-12px;}
  .review-stars{font-size:1rem; letter-spacing:2px;}
  .review-meta{font-size:.72rem;}
}