/* =====================================================================
   Menuiserie Erwan Dagorn — Cap-Sizun
   Habillage refait pour la lisibilité et l'ergonomie (2026).
   Identité artisan : noyer, sienne, papier chaud. Typo Bitter + Inter.
   Tout est piloté depuis ce seul fichier (plus d'@import layout/autumn).
   ===================================================================== */

:root{
  --encre:#251d14;
  --encre-doux:#5c4e3f;
  --papier:#f6f0e7;
  --surface:#ffffff;
  --surface-2:#fbf7f0;
  --noyer:#33251a;
  --noyer-2:#432f20;
  --bois:#8a5a30;
  --accent:#b4682a;
  --accent-fonce:#8f4f1d;
  /* fond des boutons à texte blanc : un peu plus foncé que --accent pour que
     le texte reste lisible (contraste 4,6, seuil d’accessibilité 4,5) */
  --accent-bouton:#ac6226;
  --trait:#e7dccb;
  --trait-2:#d8c9b2;
  --ombre:0 1px 2px rgba(51,37,26,.06), 0 8px 24px rgba(51,37,26,.07);
  --ombre-carte:0 1px 2px rgba(51,37,26,.05), 0 10px 30px rgba(51,37,26,.06);
  --large:1180px;
  --rayon:12px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--accent-fonce);text-decoration:none}
a:hover{color:var(--accent);text-decoration:underline}
h1,h2,h3,h4{font-family:'Bitter',Georgia,serif;line-height:1.2;color:var(--noyer);text-wrap:balance}
p{margin:0 0 1em}
hr{border:0;border-top:1px solid var(--trait);margin:1.6em 0}

/* ---- Accessibilité : liens d'évitement ---- */
#prelude{position:absolute;left:-9999px}
#prelude a:focus{position:static;left:auto}

/* =====================================================================
   EN-TÊTE
   ===================================================================== */
#page{overflow:hidden}
#top{
  /* Les planches de bois sont derrière le nom de l'entreprise : un seul bandeau
     foncé en haut, au lieu de deux empilés (en-tête + bandeau photo). Voile
     sombre pour que le texte reste lisible. Adresse absolue : la feuille est
     servie par ?tf=, un chemin relatif partirait de la racine du site. */
  background:
    linear-gradient(100deg,rgba(38,26,16,.88) 0%,rgba(38,26,16,.7) 50%,rgba(38,26,16,.45) 100%),
    url(/themes/fallseason/images/bandeau-planches.jpg) center/cover no-repeat,
    var(--noyer);
  color:#f3e9db;
}
.top-bar{
  max-width:var(--large);margin:0 auto;padding:20px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px 30px;flex-wrap:wrap;
}
#topcontent{flex:1 1 auto;min-width:0}
.eyebrow{
  margin:0 0 4px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--accent);
}
/* le nom de l’entreprise est le plus gros texte de l’en-tête ; l’accroche du
   bandeau reste en dessous (demande de Loïc) */
#topcontent .nom-site{margin:0;font-family:'Bitter',Georgia,serif;line-height:1.2;font-size:2.1rem;font-weight:700;letter-spacing:.2px}
#topcontent .nom-site a{color:#fff;text-decoration:none}
/* le nom de l’artisan légèrement mis en valeur, dans le doré du téléphone */
#topcontent .nom-artisan{color:#f0c08f}
.tagline{margin:.35em 0 0;font-size:.98rem;color:#d9c9b4;font-weight:400}
.tagline p{margin:0}

#topright{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cta-phone{
  display:inline-flex;align-items:center;gap:.4em;color:#fff;font-weight:700;
  font-size:1.2rem;letter-spacing:.3px;text-decoration:none;font-family:'Bitter',serif;
}
.cta-phone span{color:#e6b98a;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
.cta-phone:hover{color:#fff;text-decoration:none}
.cta-devis{
  display:inline-block;background:var(--accent-bouton);color:#fff;font-weight:600;
  padding:.6em 1.25em;border-radius:999px;text-decoration:none;font-size:.95rem;
  box-shadow:0 4px 14px rgba(180,104,42,.35);transition:background .15s,transform .15s;
}
.cta-devis:hover{background:var(--accent-fonce);color:#fff;text-decoration:none;transform:translateY(-1px)}

#topsearch form{display:flex;align-items:center;gap:6px}
#topsearch label{position:absolute;left:-9999px}
#topsearch input.text{
  background:#fbf5ec;border:1px solid #6b4d33;border-radius:999px;
  padding:.42em .9em;width:170px;color:var(--encre);font:inherit;font-size:.9rem;
}
#topsearch input.text:focus{outline:2px solid var(--accent);outline-offset:1px}
#topsearch .submit{
  background:#6b4d33;color:#fff5e6;border:0;border-radius:999px;
  padding:.46em 1em;cursor:pointer;font-weight:600;font-size:.85rem;
}
#topsearch .submit:hover{background:var(--bois)}

/* =====================================================================
   NAVIGATION (barre collante)
   ===================================================================== */
#menu{
  position:sticky;top:0;z-index:50;
  /* foncé, dans la continuité de l’en-tête (un menu clair entre l’en-tête
     et la photo du bandeau faisait une bande étrangère) */
  background:#2b1f15;border-top:1px solid rgba(255,255,255,.08);
  border-bottom:3px solid var(--accent);
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.menu-inner{max-width:var(--large);margin:0 auto;padding:0 14px}
#menu ul,#menu .simple-menu{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:stretch;
}
#menu li{margin:0}
#menu a{
  display:block;padding:15px 18px;color:#eadbc6;font-weight:600;font-size:.96rem;
  text-decoration:none;transition:color .15s,border-color .15s,background .15s;
}
#menu a:hover{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
/* page en cours : fond éclairci (un soulignement se confondrait avec le trait orangé du menu) */
#menu li.active a,#menu a.active{color:#f0c08f;background:rgba(255,255,255,.08)}
#menubottom{display:none}

/* =====================================================================
   HERO (bandeau bois)
   ===================================================================== */
#headerpic{
  /* l'accroche, sur fond clair dans la continuité du contenu */
  height:auto;margin:0;background:var(--surface-2);border-bottom:1px solid var(--trait);
}
.hero-inner{max-width:var(--large);margin:0 auto;padding:28px 22px}
.hero-kicker{
  margin:0 0 6px;color:var(--accent-fonce);font-weight:600;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;
}
.hero-title{
  margin:0;color:var(--noyer);font-family:'Bitter',serif;font-weight:600;
  font-size:clamp(1.15rem,2.6vw,1.6rem);line-height:1.2;
}
.hero-title span{display:block;text-wrap:balance
}

/* =====================================================================
   MISE EN PAGE PRINCIPALE
   ===================================================================== */
#wrapper{
  max-width:var(--large);margin:0 auto;padding:38px 22px 10px;
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:40px;
}
#introcontent{flex:1 1 100%}
#main{flex:3 1 560px;min-width:0}
#sidebar{flex:1 1 260px;min-width:230px;max-width:330px}

/* Intro d'accueil (le gadget saisonnier est retiré) */
#introcontent:empty{display:none}
#introcontent .post-content{background:transparent;padding:0}

/* =====================================================================
   CONTENU : présentation + billets
   ===================================================================== */
#content>.post-title:first-child,
#content>h2.post-title{
  font-size:1.9rem;margin:0 0 .5em;
  padding-bottom:.35em;border-bottom:2px solid var(--trait);
}
/* texte de présentation de l’accueil (hors carte) : un peu d’air avant les billets */
/* largeur de lecture limitée (70 à 75 caractères par ligne) : sur toute la colonne,
   les lignes étaient trop longues pour être lues confortablement */
#content>.post-content{margin-bottom:1.3em;max-width:38em}
#content>.post-content>p:last-child{margin-bottom:0}
.post{
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);
  box-shadow:var(--ombre-carte);padding:26px 28px;margin:0 0 26px;
}

/* Cartes de l’accueil avec vignette (première photo du billet) :
   photo à gauche, texte à droite ; sur téléphone la photo passe au-dessus. */
.post:has(> .vignette img){display:grid;grid-template-columns:230px minmax(0,1fr);gap:0 26px;align-items:start}
.vignette{display:block;border-radius:10px;overflow:hidden}
.vignette:not(:has(img)){display:none}
.vignette img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--trait);border-radius:10px;transition:transform .25s;
}
.vignette:hover img{transform:scale(1.03)}
.post-texte{min-width:0}
.post-title{margin:0 0 .35em;font-size:1.45rem;line-height:1.2}
.post-title a{color:var(--noyer);text-decoration:none}
.post-title a:hover{color:var(--accent-fonce)}
.post-info,.post-info-co{
  color:var(--encre-doux);font-size:.82rem;margin:0 0 1em;
}
.post-info a{color:var(--encre-doux)}
/* Dates masquées (demande de Loïc) : des dates de 2016-2019 affichées sur
   chaque billet ne faisaient « pas très sérieux ». La date reste dans le code de la page, elle
   n’est seulement plus affichée ; supprimer cette règle suffit à la rétablir. */
.day-date,.post-info,.page-info{display:none}
.day-date{color:var(--accent-fonce);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 .3em}
.post-content{color:var(--encre);line-height:1.7}
.post-content h2{font-size:1.5rem;margin:1.4em 0 .5em}
.post-content h3{font-size:1.25rem;color:var(--noyer);margin:1.6em 0 .4em}
/* Chaque intertitre repart sous les photos flottées de la rubrique précédente,
   et la carte englobe toujours ses photos (sinon elles débordent en bas). */
.post-content h2,.post-content h3,.post-content h4,.post-content h5{clear:both}
/* intertitres des pages (Prestations…) : de l’air avant chaque rubrique */
/* padding et non margin : après une photo flottante, la marge du haut d’un
   intertitre (qui passe sous la photo) est ignorée par le navigateur */
.post-content h4{font-size:1.28rem;color:var(--noyer);font-weight:700;line-height:1.25;margin:0 0 .4em;padding-top:1.9em}
.post-content > h4:first-child{padding-top:.4em}
.post-content::after{content:"";display:table;clear:both}
.post-content ul,.post-content ol{padding-left:1.3em}
.post-content li{margin:.25em 0}
.post-content img{
  border-radius:10px;border:1px solid var(--trait);box-shadow:var(--ombre);
  margin:.6em 0;max-height:520px;width:auto;
}
.post-content blockquote{
  margin:1.2em 0;padding:.6em 1.2em;border-left:4px solid var(--accent);
  background:var(--surface-2);border-radius:0 8px 8px 0;color:var(--encre-doux);font-style:italic;
}
/* Pages (Prestations, Savoir-faire…) : toutes les photos de chantier dans le
   même cadre 4:3, recadré au centre, au lieu de tailles et de côtés différents
   selon la façon dont chaque photo avait été insérée. Les photos isolées flottent
   toutes à gauche du texte ; les galeries s'alignent sur une ligne. Un clic ouvre
   toujours la photo entière. (!important : les flottements sont écrits dans le
   texte même, style="float:…".) */
.dc-page .post-content img:is([src*="/Chantiers/"],[src*="/Savoir-faire/"]){
  width:210px;height:auto;aspect-ratio:4/3;object-fit:cover;max-height:none;
  display:inline-block;vertical-align:top;margin:.3em .9em .9em 0;
}
/* seulement les photos seules dans leur paragraphe : plusieurs photos
   ensemble forment une galerie, alignée sur une ligne */
/* photos entourées d’un lien : alignées en haut comme les autres */
.dc-page .post-content p a:has(> img){display:inline-block;vertical-align:top}
.dc-page .post-content p:not(:has(img ~ img)) img:is([src*="/Chantiers/"],[src*="/Savoir-faire/"]):is([style*=float],.media-left,.media-right){
  float:left!important;clear:left;margin:.3em 1.3em .8em 0!important;
}
/* Page Produits : une fiche par gamme (image cliquable à gauche, titre,
   description, lien vers le catalogue du fabricant), séparées par un fin trait. */
.produits-note{color:var(--encre-doux);font-style:italic;font-size:.92rem}
.produits{margin:0 0 1.6em}
.produit{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 22px;align-items:start;padding:18px 0;border-top:1px solid var(--trait)}
.produit:first-child{border-top:0;padding-top:4px}
.produit.sans-image > div{grid-column:2}
.post-content .produit img{display:block;width:200px;height:auto;aspect-ratio:4/3;object-fit:cover;max-height:none;margin:0;border-radius:8px;border:1px solid var(--trait);box-shadow:none}
.post-content .produit .logo img{object-fit:contain;background:#fff;padding:14px}
.produit-images{display:flex;flex-direction:column;gap:10px}
.post-content .produit h3{margin:0 0 .35em;font-size:1.15rem}
.produit p{margin:0 0 .5em}
.produit .fabricant{font-size:.88rem;margin:0}
.produit .fabricant a::after{content:"\00a0→"}
/* Carte Leaflet de la page Coordonnées, et ses repères aux couleurs du site */
.carte{height:360px;margin:1.2em 0;border-radius:12px;border:1px solid var(--trait);z-index:0}
/* les tuiles et repères de la carte ne doivent pas hériter du style des photos
   du texte (bordure, arrondi, ombre, largeur maximale) : sinon, lignes entre tuiles */
.post-content .carte img{border:0;border-radius:0;box-shadow:none;margin:0;max-width:none;max-height:none}
.repere{background:var(--noyer);border:4px solid var(--accent);border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.carte .leaflet-popup-content{font-family:'Inter',sans-serif;font-size:.92rem;line-height:1.45}
/* Pages de mots-clés : titre de liste, et liste de tous les mots-clés en pastilles */
.titre-liste{font-size:1.9rem;margin:0 0 .7em}
.dc-tags #content ul.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.dc-tags #content ul.tags a{display:inline-block;background:var(--surface);border:1px solid var(--trait-2);border-radius:999px;padding:.4em .95em;color:var(--encre);text-decoration:none}
.dc-tags #content ul.tags a:hover{border-color:var(--accent);color:var(--accent-fonce)}
/* Page Contact : une colonne, un bloc par information (téléphone, adresses,
   localisation, formulaire), séparés par un fin trait */
.page-contact{max-width:760px}
.contact-bloc{padding:20px 0;border-top:1px solid var(--trait)}
.contact-bloc:first-of-type{border-top:0;padding-top:6px}
.post-content .contact-bloc h2,.contact-bloc h2{margin:0 0 .7em;font-size:.8rem;font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-fonce)}
.contact-tel{margin:0;font-family:'Bitter',serif;font-size:1.7rem;font-weight:700}
.contact-tel a{color:var(--noyer);text-decoration:none}
.contact-adresses{display:flex;flex-wrap:wrap;gap:6px 48px}
.contact-adresses p{margin:0 0 1em;line-height:1.55}
.contact-photo{display:block;width:100%;max-width:420px;height:auto;border-radius:10px;border:1px solid var(--trait);margin:.4em 0 0}
.contact-bloc .carte{margin:0 0 .6em}
.contact-osm{margin:0;font-size:.9rem}
.page-contact form#comment-form{box-shadow:none;border:0;padding:0;max-width:none;background:transparent}
/* paragraphe qui doit commencer sous la photo flottante qui le précède */
.post-content .sous-photo{clear:both}
.left{float:left;margin:.3em 1.4em 1em 0;max-width:46%}
.right{float:right;margin:.3em 0 1em 1.4em;max-width:46%}
.read-it{margin:.9em 0 0}
.read-it a{
  display:inline-block;background:var(--surface-2);border:1px solid var(--trait-2);
  color:var(--accent-fonce);font-weight:600;padding:.5em 1.1em;border-radius:999px;
  font-size:.9rem;text-decoration:none;
}
.read-it a:hover{background:var(--accent-bouton);color:#fff;border-color:var(--accent-bouton);text-decoration:none}

.post-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:.4em 0 1em}
.post-tags li a{
  display:inline-block;background:var(--surface-2);border:1px solid var(--trait);
  color:var(--encre-doux);font-size:.78rem;padding:.28em .7em;border-radius:999px;text-decoration:none;
}
.post-tags li a:hover{border-color:var(--accent);color:var(--accent-fonce)}
/* accueil : mots-clés en pied de carte, séparés du « Lire la suite » par un fin trait */
.post-texte .post-tags{margin:1.1em 0 0;padding-top:.9em;border-top:1px solid var(--trait)}

/* liens compteurs / commentaires */
.post-info-co a{margin-right:14px;color:var(--encre-doux);font-size:.85rem}

.pagination{
  clear:both;margin:10px 0 30px;padding:16px;text-align:center;
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);color:var(--encre-doux);
}
.pagination a{font-weight:600}

/* Liens discrets vers les sites voisins (cap-sizun.com, cleden-cap-sizun.com) :
   couleur du texte, fin soulignement pointillé, l'accent n'apparaît qu'au survol. */
a.lien-discret{color:inherit;text-decoration:underline dotted;text-decoration-color:var(--trait-2);text-underline-offset:3px}
a.lien-discret:hover{color:var(--accent-fonce);text-decoration-color:currentColor}
#footer a.lien-discret{color:inherit;text-decoration-color:rgba(255,255,255,.35)}
#footer a.lien-discret:hover{color:#fff;text-decoration-color:#fff}

/* =====================================================================
   BARRE LATÉRALE
   ===================================================================== */
#sidebar .widget{
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);
  box-shadow:var(--ombre);padding:18px 20px;margin:0 0 22px;
}
#sidebar h2,#sidebar h3{
  margin:0 0 .7em;font-size:1.05rem;color:var(--noyer);
  padding-bottom:.45em;border-bottom:2px solid var(--accent);display:inline-block;
}
/* ul.simple-menu et non .simple-menu : le cadre du bloc « Pages » porte aussi
   cette classe, et perdait ses marges intérieures */
#sidebar ul.simple-menu,#sidebar ul{list-style:none;margin:0;padding:0;display:block}
#sidebar ul.simple-menu li,#blognav li{margin:0;border-bottom:1px solid var(--trait)}
#sidebar ul.simple-menu li:last-child,#blognav li:last-child{border-bottom:0}
#sidebar ul.simple-menu a,#blognav a{
  display:block;padding:.55em .2em;color:var(--encre);font-weight:500;text-decoration:none;
}
#sidebar ul.simple-menu a:hover,#blognav a:hover{color:var(--accent-fonce);padding-left:.5em;transition:padding .15s}
/* nuage de mots-clés */
#sidebar .widget.tags ul{display:flex;flex-wrap:wrap;gap:8px}
#sidebar .widget.tags li{border:0!important}
#sidebar .widget.tags li a{
  display:inline-block;background:var(--surface-2);border:1px solid var(--trait);
  color:var(--encre-doux);padding:.3em .7em;border-radius:999px;font-size:.85rem;text-decoration:none;
}
#sidebar .widget.tags li a:hover{border-color:var(--accent);color:var(--accent-fonce);padding-left:.7em}
.alltags,#sidebar .widget.tags p{margin:.9em 0 0;font-size:.85rem}
/* page en cours dans le widget « Pages » des pages intérieures */
/* page en cours dans le menu de la barre latérale (même menu que l’horizontal) */
#sidebar li.active a{color:var(--accent-fonce);font-weight:600}
#sidebar .widget p:last-child{margin-bottom:0}

/* =====================================================================
   FORMULAIRE DE CONTACT (plugin contactMe)
   ===================================================================== */
form.contactme,#comment-form{
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);
  box-shadow:var(--ombre-carte);padding:24px 26px;max-width:640px;
}
form.contactme fieldset{border:0;margin:0;padding:0}
form.contactme p{margin:0 0 1em}
form.contactme label{display:block;font-weight:600;color:var(--noyer);margin:0 0 .3em;font-size:.95rem}
form.contactme input[type=text],
form.contactme input[type=email],
form.contactme input[type=url],
form.contactme input,
form.contactme textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--encre);
  background:var(--surface-2);border:1px solid var(--trait-2);border-radius:8px;padding:.6em .8em;
}
form.contactme input:focus,form.contactme textarea:focus{outline:2px solid var(--accent);outline-offset:1px;background:#fff}
form.contactme textarea{min-height:170px;resize:vertical}
form.contactme .field.f_mail{display:none}
form.contactme input[type=submit],
form.contactme button[type=submit]{
  width:auto;background:var(--accent-bouton);color:#fff;border:0;border-radius:999px;
  padding:.7em 1.6em;font-weight:600;font-size:1rem;cursor:pointer;box-shadow:0 4px 14px rgba(180,104,42,.35);
}
form.contactme input[type=submit]:hover{background:var(--accent-fonce)}

/* =====================================================================
   PIED DE PAGE
   ===================================================================== */
#footer{
  clear:both;margin-top:20px;
  background:var(--noyer);color:#d8c9b4;border-top:3px solid var(--accent);
}
.footer-inner{
  max-width:var(--large);margin:0 auto;padding:34px 22px;
  display:flex;flex-wrap:wrap;gap:26px 50px;
}
.footer-inner h4{color:#fff;margin:0 0 .5em;font-size:1.05rem}
.footer-col{flex:1 1 240px;min-width:0}
.footer-col a{color:#e9b98a}
.footer-col a:hover{color:#fff}
.footer-note{
  border-top:1px solid rgba(255,255,255,.12);margin-top:6px;
  padding:14px 22px;font-size:.8rem;color:#a8967f;text-align:center;
}
.footer-note a{color:#c4a882;text-decoration:underline}
/* liens repérables autrement que par la couleur (accessibilité) */
#breadcrumb a{text-decoration:underline;text-underline-offset:2px}
/* navigation entre billets : le tiret séparateur est masqué quand il n’y a
   pas de billet précédent (il restait seul en début de ligne) */
#navlinks > span:first-child{display:none}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:820px){
  #main,#sidebar{flex:1 1 100%;max-width:none}
  #wrapper{gap:24px}

  /* --- Téléphone : l'en-tête se réduit au nom de l'entreprise --- */
  .top-bar{padding:14px 12px}
  .eyebrow,.tagline{display:none}
  #topcontent .nom-site{font-size:clamp(1.7rem,7.6vw,2.3rem);line-height:1.14;text-align:center}

  /* Les deux actions (appeler, devis) deviennent une barre fixée en bas de
     l'écran : toujours à portée du pouce, quelle que soit la page lue. */
  #topright{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    flex-direction:row;align-items:stretch;gap:8px;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:var(--noyer);border-top:2px solid var(--accent);
    box-shadow:0 -4px 16px rgba(0,0,0,.18);
  }
  #topright a{
    flex:1 1 50%;display:flex;align-items:center;justify-content:center;
    min-height:48px;border-radius:10px;font-family:'Inter',sans-serif;
    font-size:1rem;font-weight:700;letter-spacing:0;text-align:center;white-space:nowrap;
  }
  .cta-phone{background:#fff;color:var(--noyer)}
  .cta-phone:hover{color:var(--noyer)}
  .cta-phone span{display:none}
  .cta-phone::before{content:"\260E";margin-right:.4em;color:var(--accent)}
  .cta-devis{padding:0 .6em;box-shadow:none}
  /* place réservée sous le pied de page pour que la barre ne le masque pas */
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}

  /* Menu : grille régulière de 3 colonnes au lieu de lignes irrégulières,
     et il ne colle plus en haut (il mangeait l'écran en lisant). */
  #menu{position:static}
  .menu-inner{padding:0}
  #menu ul,#menu .simple-menu{display:grid;grid-template-columns:repeat(3,1fr)}
  #menu a{padding:12px 4px;text-align:center;font-size:.92rem}

  /* Bandeau : une seule ligne d'accroche, moins haut */
  .hero-inner{padding:18px 20px}
  .hero-kicker{display:none}
  .hero-title{font-size:1.05rem}

  /* Barre latérale sur téléphone : le menu (qui répète le menu du haut) est
     retiré ; restent les mots-clés, utiles pour explorer. */
  #sidebar .widget.simple-menu,#sidebar .widget.menusimple{display:none}
}
/* très petits écrans (360 px) : les deux boutons tiennent chacun sur une ligne */
@media (max-width:380px){
  #topright a{font-size:.9rem;padding:0 .4em}
}
@media (max-width:560px){
  body{font-size:16px}
  /* 20 px de marge sur les côtés : à 12 px, le texte hors carte (présentation
     de l’accueil) touchait presque le bord de l’écran */
  #wrapper{padding:22px 20px 6px}
  /* cartes bien séparées : sinon la vignette d’un billet semblait collée
     au « Lire la suite » du billet précédent */
  .post{padding:16px 16px 20px;border-radius:12px;margin:0 0 36px;border-color:var(--trait-2);box-shadow:0 2px 4px rgba(51,37,26,.06),0 10px 24px rgba(51,37,26,.08)}
  .post:has(> .vignette img){grid-template-columns:1fr}
  .vignette{margin:0 0 14px}
  .vignette img{aspect-ratio:16/9}
  #content>.post-title:first-child,#content>h2.post-title{font-size:1.5rem}
  .post-title{font-size:1.3rem}
  .left,.right{float:none;display:block;margin:1em 0;max-width:100%}
  /* Les photos du contenu sont flottées par un style écrit dans le billet
     (style="float:left") : seul !important peut les remettre en pleine largeur. */
  .post-content img[style*=float]{float:none!important;display:block;margin:1em auto!important;max-width:100%}
  .dc-page .post-content img:is([src*="/Chantiers/"],[src*="/Savoir-faire/"]){width:100%;float:none!important;display:block;margin:1em 0!important}
  form.contactme{padding:18px 16px}
  .carte{height:280px}
  .produit{grid-template-columns:110px minmax(0,1fr);gap:0 14px}
  .post-content .produit img{width:110px}
  .post-content .produit .logo img{padding:8px}
  .footer-inner{padding:26px 16px;gap:18px}
}


/* Visionneuse des photos (Colorbox) : sous la photo, les flèches à gauche, la
   légende au milieu, le compteur « 1 de 3 » à droite avant la croix. Dans le
   thème d'origine, légende et compteur se superposaient. (#colorbox en tête :
   la feuille de Colorbox est chargée après celle-ci.) */
#colorbox #cboxLoadedContent{margin-bottom:34px}
#colorbox #cboxTitle{left:62px;right:96px;width:auto;bottom:5px;text-align:left;font-size:.85rem;line-height:1.3;color:var(--encre-doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#colorbox #cboxCurrent{left:auto;right:34px;bottom:5px;font-size:.8rem;line-height:1.3;color:var(--encre-doux)}

/* Impression : masquer la navigation et la recherche */
@media print{
  #menu,#topright,#headerpic,#sidebar,#footer{display:none}
  .post{box-shadow:none;border:0}
}

/* Billet « Info produit » (p612) : sa photo est une capture d'écran déjà posée
   en grand dans le texte. La vignette automatique en affichait une version
   réduite (texte minuscule, effet « sous-encart »). On la masque pour ce seul
   billet et on repasse la carte sur une colonne (sinon colonne vide de 230px).
   Pour une autre annonce du même genre, dupliquer ce bloc avec son numéro #pXXX. */
#p612{display:block}
#p612 .vignette{display:none}

/* Galerie de réalisations : vignettes de même hauteur, cliquables, qui
   s'alignent en rangées et passent à la ligne. Ajouté le 18/10/2026 pour ranger
   le billet « Réalisations » (les photos avaient des tailles disparates). */
.galerie{display:flex;flex-wrap:wrap;gap:8px;margin:.2em 0 1.4em}
.galerie a{display:block;line-height:0}
.galerie img{height:220px;width:auto;border-radius:6px;display:block;transition:transform .15s}
.galerie a:hover img{transform:scale(1.04)}
@media (max-width:600px){.galerie img{height:160px}}

/* Dernières réalisations (accueil) : grille de vignettes-cartes, une par
   chantier (photo + titre), cliquables vers le billet. Ajouté le 18/10/2026. */
.rea-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin:.6em 0 1.6em}
.rea-carte{display:block;text-decoration:none;color:var(--noyer);line-height:1.25}
.rea-carte img{width:100%;height:150px;object-fit:cover;border-radius:10px;display:block;transition:transform .15s}
.rea-carte:hover img{transform:scale(1.03)}
.rea-nom{display:block;margin-top:.4em;font-weight:600;font-size:.98rem}
.rea-carte:hover .rea-nom{color:var(--accent-fonce)}
@media (max-width:600px){.rea-grille{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.rea-carte img{height:120px}}

/* Espace au-dessus du bouton « Voir toutes les réalisations » : la grille
   le collait de trop sous la dernière rangée de vignettes. */
.rea-voir-tout{margin-top:1.6em;margin-bottom:2.6em}

/* Pages (Prestations…) : les photos regroupées en galerie gardent la présentation
   uniforme des réalisations (même hauteur, alignées, non recadrées, cliquables),
   au lieu des vignettes 4:3 des photos isolées. Ajouté le 18/10/2026. */
.dc-page .post-content .galerie img{width:auto;height:200px;aspect-ratio:auto;object-fit:fill;max-height:none;margin:0;border:0;box-shadow:none;border-radius:6px}
.dc-page .post-content .galerie a{display:inline-block;line-height:0}
@media (max-width:600px){.dc-page .post-content .galerie img{height:210px;width:auto!important;float:none!important;margin:0!important}}

/* --- Menu responsive : barre horizontale sur ordinateur, bouton « burger » sur
   téléphone (sous 820px, là où les 7 entrées débordaient). Ajouté le 20/10/2026. --- */
.menu-toggle{display:none}
.menu-liste{display:block}
@media (max-width:820px){
  .menu-toggle{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;cursor:pointer;color:#eadbc6;font:inherit;font-weight:600;font-size:1.15rem;padding:16px 4px 16px 20px}
  .menu-toggle .burger-barres{position:relative;display:inline-block;width:28px;height:3px;background:#eadbc6;transition:background .15s}
  .menu-toggle .burger-barres::before,.menu-toggle .burger-barres::after{content:"";position:absolute;left:0;width:28px;height:3px;background:#eadbc6;transition:transform .2s}
  .menu-toggle .burger-barres::before{top:-8px}
  .menu-toggle .burger-barres::after{top:8px}
  #menu.open .menu-toggle .burger-barres{background:transparent}
  #menu.open .menu-toggle .burger-barres::before{transform:translateY(8px) rotate(45deg)}
  #menu.open .menu-toggle .burger-barres::after{transform:translateY(-8px) rotate(-45deg)}
  .menu-liste{display:none}
  #menu.open .menu-liste{display:block;padding-bottom:6px}
  #menu .menu-liste ul,#menu .menu-liste .simple-menu{display:block;grid-template-columns:none}
  #menu .menu-liste li{display:block;border-top:1px solid rgba(255,255,255,.08)}
  #menu .menu-liste a{display:block;text-align:left;padding:13px 6px}
}

/* Page Partenaires : logos des fournisseurs en grille uniforme (cartes blanches,
   même hauteur), chacun cliquable vers le site du partenaire. Ajouté le 20/10/2026. */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:1em 0 1.4em}
.logo-cell{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--trait);border-radius:10px;padding:16px;min-height:96px;transition:box-shadow .15s,transform .15s}
.logo-cell:hover{box-shadow:var(--ombre);transform:translateY(-2px)}
.logo-cell img{max-width:100%;max-height:60px;width:auto;height:auto;object-fit:contain;border:0;box-shadow:none;margin:0;border-radius:0}
.partenaires-videos{font-size:.95rem;color:var(--encre-doux)}

/* Pages : photos HORIZONTALES en pleine largeur (elles grandissent pour remplir
   la ligne ; à plusieurs, elles se partagent la largeur), photos VERTICALES à
   hauteur modérée. Demande de Loïc, 20/10/2026. */
.post-content .galerie{align-items:flex-start}
.post-content .galerie a.paysage{flex:0 0 100%;width:100%}
.post-content .galerie a.paysage img{width:100%!important;height:auto!important;max-height:none}
.post-content .galerie a.portrait{flex:0 0 auto}
.post-content .galerie a.portrait img{width:auto!important;height:320px!important;max-height:none}
@media (max-width:600px){ .post-content .galerie a.portrait img{height:260px!important} }