/*
Theme Name: Espace Enfance
Description: Thème du distributeur B2B Espace Enfance. Généré depuis les maquettes validées le 29/08/2026 par tools/build-theme.js — ne pas modifier à la main, les corrections se font dans prototype/assets/pe.css.
Author: SAS Driving Custom
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: espace-enfance
*/

/* =========================================================================
   ESPACE ENFANCE — système de design
   « Des espaces pensés pour grandir. »

   Passe « lumière » du 29/08/2026. Principe : le blanc n'est plus un fond,
   c'est le matériau. La structure vient de la grille, des filets de 1 px et
   du vide — plus de l'empilement de bandes beiges.

   Trois règles qui commandent tout le reste :
   1. Jamais deux fonds teintés consécutifs.
   2. Un seul aplat beige dans toute une page : le bloc devis.
   3. Aucun neutre du thème clair n'est neutre : chaque gris y a R > B d'au moins
      5 points. Remplacer #E4E0D7 par #E5E5E5 suffirait à rendre le site froid.
      (En thème sombre l'écart se resserre à 2-4 points, la teinte suffit.)

   Maquettes de validation : aucune donnée n'est un engagement commercial.
   ====================================================================== */

:root{
  /* ---- fonds : un blanc chaud, un beige, et le blanc pur des cartes -----
     Le fond de page est #FBFAF8, les bandes de section #F4F0E9 (ΔL* 3,4 :
     l'écart se voit sans peser), et les cartes se posent en blanc pur
     par-dessus. C'est ce qui donne au catalogue son relief. */
  --surface:#FFFFFF;        /* cartes, panneaux, en-tete : le blanc se pose
                               DESSUS le fond de page, il ne l'est pas      */
  --paper:#FBFAF8;          /* fond de page : blanc chaud, jamais blanc pur */
  --surface-2:#F4F0E9;      /* bandes de section, footer, fonds de slot     */
  --beige:#F0EADE;          /* panneau devis : le beige le plus soutenu     */
  --beige-soft:#FAF6EF;
  --wood-light:#D2A468;     /* bois eclairci, RESERVE au bandeau charbon :
                               le bois normal n'y tient que 3,0:1          */

  /* ---- filets ---------------------------------------------------------
     --line (1,32:1) et --line-soft (1,18:1) sont décoratifs : ils n'ont le droit de
     porter aucune information. Toute limite qui EN PORTE une — bordure de
     champ, bouton fantôme, état actif — utilise --field-line (3,5:1). */
  --line:#E4E0D7;
  --line-soft:#EFECE5;
  --field-line:#8F887C;
  --rule:#22211D;           /* le seul trait charbon : haut de footer      */

  /* ---- encre : brune, jamais noire ni grise ---------------------------- */
  --ink:#22211D;            /* 16,1:1 sur blanc                            */
  --ink-2:#575349;          /*  7,7:1 sur blanc                            */
  --ink-3:#6E6960;          /*  5,5:1 sur blanc — remplace l'ancien
                                #8B8177 qui ne tenait que 3,7:1            */

  /* ---- accent : vert sauge profond ------------------------------------ */
  --accent:#35513F;         /* 8,8:1 sur blanc, blanc dessus 8,8:1         */
  --accent-2:#293F31;       /* survol : plus SOMBRE, le contraste monte    */
  --accent-wash:#EFF3EF;
  --accent-line:#C7D5CC;
  --on-accent:#FFFFFF;

  /* ---- bois : la matière du catalogue, en trait et en très petite dose - */
  --wood:#8F6231;           /* 5,3:1 sur blanc, 4,9:1 sur --surface-2 : lisible en
                               texte et en trait. INTERDIT en texte sur --beige (4,4:1). */
  --wood-wash:#FAF6EF;

  /* ---- statuts commerciaux -------------------------------------------- */
  --ok:#35613F;      --ok-wash:#EFF4F0;
  --wait:#7A5C12;    --wait-wash:#F8F4E8;
  --quote:#3F5875;   --quote-wash:#EFF2F6;
  --stop:#8C4033;    --stop-wash:#F9EFEC;

  /* ---- formes : discrètes et durables --------------------------------- */
  --radius:4px;             /* boutons, champs, puces                      */
  --radius-card:6px;        /* cartes, panneaux                            */
  --shadow:none;            /* aucune ombre dans le flux de la page        */
  --shadow-pop:0 1px 1px rgba(34,33,29,.04), 0 16px 40px -28px rgba(34,33,29,.28);

  /* ---- espacement : échelle de 4, aucune valeur hors échelle ----------- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:40px; --s8:56px; --s9:72px; --s10:96px; --s11:128px;

  --maxw:1280px;
  --gutter:24px;
  --pad-x:clamp(20px,5vw,64px);
  --sec-pad:clamp(56px,6.5vw,104px);
  --sec-pad-sm:clamp(36px,4vw,64px);
  --head-h:74px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface:#1A1A17; --paper:#141412; --surface-2:#201F1C;
    --beige:#262420; --beige-soft:#221F1A;
    --line:#302E29; --line-soft:#26241F; --field-line:#767065; --rule:#4A4740;
    --ink:#F2F0EA; --ink-2:#BEB9AF; --ink-3:#948E83;
    --accent:#92B39D; --accent-2:#ADC8B6; --accent-wash:#1C241E;
    --accent-line:#33453A; --on-accent:#141412;
    --wood:#D2A468; --wood-wash:#241D14;
    --ok:#84B490;   --ok-wash:#182219;
    --wait:#D2AE5E; --wait-wash:#241F12;
    --quote:#8FA9C8;--quote-wash:#1A212B;
    --stop:#D68B7D; --stop-wash:#271A17;
    --shadow-pop:0 1px 1px rgba(0,0,0,.4), 0 16px 40px -28px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --surface:#1A1A17; --paper:#141412; --surface-2:#201F1C;
  --beige:#262420; --beige-soft:#221F1A;
  --line:#302E29; --line-soft:#26241F; --field-line:#767065; --rule:#4A4740;
  --ink:#F2F0EA; --ink-2:#BEB9AF; --ink-3:#948E83;
  --accent:#92B39D; --accent-2:#ADC8B6; --accent-wash:#1C241E;
  --accent-line:#33453A; --on-accent:#141412;
  --wood:#D2A468; --wood-wash:#241D14;
  --ok:#84B490;   --ok-wash:#182219;
  --wait:#D2AE5E; --wait-wash:#241F12;
  --quote:#8FA9C8;--quote-wash:#1A212B;
  --stop:#D68B7D; --stop-wash:#271A17;
  --shadow-pop:0 1px 1px rgba(0,0,0,.4), 0 16px 40px -28px rgba(0,0,0,.85);
}

/* =========================================================================
   BASE
   ====================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Familjen Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad-x)}

/* Le mono est réservé à quatre emplois : sur-titres de section, références
   et cotes, numéros de séquence, légendes de slot. Il a été retiré des
   en-têtes de tableau, des titres de footer et des prix : c'est le retrait
   qui allège le plus la page à surface égale. */
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:normal}

.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s4);
}
.lede{font-size:clamp(16.5px,1.3vw,18.5px); line-height:1.55; color:var(--ink-2); max-width:56ch}
p{margin:0 0 var(--s3)}
.muted{color:var(--ink-2)}
.small{font-size:13.5px; line-height:1.5; color:var(--ink-3)}

/* =========================================================================
   BANDEAU DE MAQUETTE — n'existe pas en production
   Charbon plein sur toute la largeur : il pose la note grave du haut de page
   et fait ressortir le blanc chaud qui suit. Le bois y passe en --wood-light,
   le bois normal n'y tenant que 3,0:1.
   ====================================================================== */
.protobar{
  background:var(--ink); color:var(--paper);
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.04em;
  padding:9px 0;
}
.protobar .wrap{display:flex; gap:var(--s4); flex-wrap:wrap; align-items:center; justify-content:space-between}
.protobar b{color:var(--wood-light); font-weight:500}

/* =========================================================================
   EN-TÊTE
   ====================================================================== */
header.site{
  position:sticky; top:0; z-index:50;
  background:var(--surface);          /* opaque : ni transparence ni flou   */
  border-bottom:1px solid var(--line-soft);
}
.headrow{display:flex; align-items:center; gap:var(--s6); height:var(--head-h)}

.logo{
  font-family:Newsreader,Georgia,serif; font-size:21px; font-weight:500;
  letter-spacing:.02em; line-height:1.05; white-space:nowrap; text-transform:uppercase;
}
.logo small{
  display:block; font-family:"Familjen Grotesk",sans-serif; font-size:11px;
  letter-spacing:.01em; text-transform:none; color:var(--ink-3);
  font-weight:400; margin-top:3px;
}

nav.main{display:flex; gap:2px; margin-left:auto}
nav.main > .item{position:relative}
nav.main > .item > a{
  display:flex; align-items:center; height:var(--head-h); padding-inline:11px;
  font-size:14.5px; color:var(--ink-2); border-bottom:2px solid transparent;
  white-space:nowrap;
}
nav.main > .item:hover > a,
nav.main > .item > a[aria-current]{color:var(--ink); border-bottom-color:var(--accent)}

.drop{
  position:absolute; top:100%; left:0; min-width:252px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:var(--shadow-pop); padding:var(--s2); display:none; z-index:60;
}
nav.main > .item:hover .drop{display:block}
.drop a{display:block; padding:9px 12px; font-size:14px; color:var(--ink-2); border-radius:var(--radius)}
.drop a:hover{background:var(--accent-wash); color:var(--ink)}

.actions{display:flex; gap:var(--s1); align-items:center; margin-left:var(--s4)}
.iconbtn{
  width:44px; height:44px; display:grid; place-items:center; border:0; background:none;
  color:var(--ink-2); cursor:pointer; border-radius:var(--radius); position:relative;
}
.iconbtn:hover{background:var(--surface-2); color:var(--ink)}
.iconbtn svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round}
.iconbtn .cnt{
  position:absolute; top:6px; right:5px; font-family:"IBM Plex Mono",monospace;
  font-size:10px; color:var(--wood); font-weight:500;
}
.iconbtn .lbl{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}

.burger{display:none}

/* menu mobile : plein écran sous l'en-tête, un seul niveau déplié */
.mobnav{display:none}
.mobnav[data-open]{
  /* le bord haut est pose par le script sur le bas reel de l en-tete :
     le bandeau de maquette change de hauteur selon la largeur d ecran. */
  display:block; position:fixed; top:0; left:0; right:0; bottom:0; z-index:49;
  background:var(--surface); overflow-y:auto; padding:var(--s5) var(--pad-x) var(--s10);
}
.mobnav a{display:block; padding:14px 0; font-size:17px; border-bottom:1px solid var(--line-soft)}
.mobnav .sub{padding-left:var(--s4); font-size:15px; color:var(--ink-2)}
.mobnav .btn{margin-top:var(--s5); width:100%; justify-content:center}

/* =========================================================================
   BOUTONS
   ====================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:44px; padding:11px 20px; border-radius:var(--radius);
  font-size:14.5px; font-weight:500; border:1px solid transparent; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s; text-align:center; white-space:nowrap;
}
.btn-primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--field-line)}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--ink)}
.btn-quiet{background:transparent; color:var(--accent); border-color:transparent; padding-inline:0}
.btn-quiet:hover{color:var(--accent-2); text-decoration:underline; text-underline-offset:4px}
.btn-sm{min-height:38px; padding:8px 14px; font-size:13.5px}
.btn-lg{min-height:50px; padding:14px 26px; font-size:15.5px}

/* lien fléché : remplace la plupart des boutons secondaires des cartes */
.arrow{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; color:var(--accent)}
.arrow::after{content:"→"; transition:transform .15s}
a:hover .arrow::after,.arrow:hover::after{transform:translateX(3px)}

/* =========================================================================
   PUCES DE STATUT — sans fond coloré par défaut : un point et un mot.
   La variante à fond (.badge.solid) est tenue en réserve pour l'administration
   WooCommerce, où le statut est l'information principale. Aucune maquette ne
   l'utilise aujourd'hui : c'est volontaire, pas un oubli.
   ====================================================================== */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500;
  letter-spacing:.01em; color:var(--ink-2); white-space:nowrap;
}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.b-ok::before{background:var(--ok)}
.b-wait::before{background:var(--wait)}
.b-quote::before{background:var(--quote)}
.b-stop::before{background:var(--stop)}
.b-neutral::before{background:var(--ink-3)}
.badge.solid{
  padding:4px 9px; border-radius:var(--radius); font-size:11.5px;
  background:var(--surface-2); color:var(--ink-2);
}
.badge.solid::before{width:5px; height:5px}
.b-ok.solid{background:var(--ok-wash); color:var(--ok)}
.b-wait.solid{background:var(--wait-wash); color:var(--wait)}
.b-quote.solid{background:var(--quote-wash); color:var(--quote)}
.b-stop.solid{background:var(--stop-wash); color:var(--stop)}

/* =========================================================================
   SECTIONS ET TITRES
   Règle de séparation, à appliquer sans exception :
   deux fonds identiques qui se suivent -> filet 1 px ;
   deux fonds différents -> bord franc, jamais de filet en plus.
   ====================================================================== */
section{padding-block:var(--sec-pad)}
section.tight{padding-block:var(--sec-pad-sm)}
section.tinted{background:var(--surface-2)}
section.ruled{border-top:1px solid var(--line)}

.sechead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s6); margin-bottom:var(--s7); flex-wrap:wrap;
}
.sechead .lede{max-width:36ch; margin:0}

h1.page{
  font-family:Newsreader,Georgia,serif; font-weight:400;
  font-size:clamp(31px,3.6vw,48px); line-height:1.06; letter-spacing:-.02em;
  margin:0 0 var(--s4); max-width:19ch; text-wrap:balance;
}
h2.sec{
  font-family:Newsreader,Georgia,serif; font-weight:400;
  font-size:clamp(25px,2.4vw,34px); line-height:1.14; letter-spacing:-.016em;
  margin:0; max-width:22ch; text-wrap:balance;
}
h3{font-size:17px; font-weight:600; margin:0 0 var(--s2); letter-spacing:-.006em; line-height:1.34}
/* titre de colonne de pied de page et de groupe de filtres : meme role,
   donc meme aspect, quel que soit le niveau exige par la hierarchie de la page */
h4,.fttl{font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink-3); margin:0 0 var(--s3)}

/* =========================================================================
   SLOTS — emplacements photo
   Il n'existe aucune photographie : le slot accueille un dessin au trait,
   à la bonne proportion. Le jour où une photo arrive, on remplace le <svg>
   par un <img> et la règle :has(img) retire le fond. Aucun CSS à refaire.
   La légende décrit le dessin ; elle ne dit jamais « photo à venir ».
   ====================================================================== */
.slot{
  position:relative; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-card);
  overflow:hidden; display:grid; place-items:center; color:var(--ink-3);
}
.slot:has(img){background:var(--surface)}
.slot img{width:100%; height:100%; object-fit:cover}
.slot > svg{width:88%; height:88%}
.slot-4x3{aspect-ratio:4/3}
.slot-3x2{aspect-ratio:3/2}
.slot-16x9{aspect-ratio:16/9}
.slot-1x1{aspect-ratio:1/1}
.slotcap{
  margin-top:var(--s2); font-family:"IBM Plex Mono",monospace; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
figure{margin:0}

/* =========================================================================
   GRILLES MAILLÉES
   Les cellules sont des cartes blanches posées sur le fond de page, séparées
   par un maillage de 1 px. C'est ce maillage qui donne au catalogue sa tenue
   de tableau — un parti pris, pas un accident.
   ====================================================================== */
.grid{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden;
}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cell{
  display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s5); background:var(--surface);
  transition:background .15s;
}
a.cell:hover{background:var(--surface-2)}
a.cell:hover .t{color:var(--accent)}
.cell .k{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3)}
.cell .t{font-size:18px; font-weight:600; letter-spacing:-.008em; transition:color .15s}
.cell .d{font-size:14px; color:var(--ink-2); line-height:1.5; max-width:34ch}

/* =========================================================================
   CARTES CATÉGORIE ET ESPACE — grande image, titre, une phrase
   ====================================================================== */
.clist{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--s8) var(--s5)}
.clist-2{grid-template-columns:repeat(auto-fill,minmax(318px,1fr))}
.ccard{display:flex; flex-direction:column; gap:var(--s3)}
.ccard .slot{transition:background .2s}
.ccard:hover .slot{background:var(--beige-soft)}
.ccard h3{margin:0; font-size:19px}
.ccard p{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.5; max-width:38ch}
.ccard .arrow{margin-top:var(--s1)}

/* =========================================================================
   CARTES PRODUIT
   Fond blanc, un filet à peine visible, six pixels de rayon, aucune ombre,
   quatre informations au maximum. C'est le point 6 du brief, à la lettre.
   ====================================================================== */
.plist{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(256px,1fr));
  column-gap:var(--s5); row-gap:var(--s7);
}
.pcard{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-card); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .15s;
}
.pcard:hover{border-color:var(--field-line)}
.pmedia{aspect-ratio:4/3; background:var(--surface-2); display:grid; place-items:center;
  border-bottom:1px solid var(--line); color:var(--ink-3)}
.pmedia:has(img){background:var(--surface)}
.pmedia img{width:100%; height:100%; object-fit:cover}
.pmedia > svg{width:84%; height:84%}
.pbody{padding:var(--s4) var(--s4) var(--s5); display:flex; flex-direction:column; gap:var(--s2); flex:1}
.pcat{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3)}
.pname{font-size:16px; font-weight:600; line-height:1.32; letter-spacing:-.008em}
.pmeta{font-size:13.5px; color:var(--ink-2); line-height:1.45}
.pprice{margin-top:auto; padding-top:var(--s3); font-size:14px; color:var(--ink-2)}
.pprice strong{font-size:19px; color:var(--ink); font-weight:600; letter-spacing:-.01em}
.pprice .ttc{font-size:12.5px; color:var(--ink-3)}

/* =========================================================================
   CARTES PACK — le format le plus valorisé de la page
   ====================================================================== */
.packlist{display:grid; gap:var(--s7)}
.packcard{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--s8); align-items:center;
}
.packcard h3{font-family:Newsreader,Georgia,serif; font-weight:400; font-size:clamp(23px,2vw,29px);
  letter-spacing:-.015em; line-height:1.16; margin:0 0 var(--s3)}
.packcard p{font-size:15px; color:var(--ink-2); max-width:46ch; margin:0 0 var(--s5)}
.packdata{
  display:flex; gap:var(--s7); flex-wrap:wrap; padding-block:var(--s4);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:var(--s5);
}
.packdata div{font-size:13.5px; color:var(--ink-2)}
.packdata b{display:block; font-family:Newsreader,serif; font-size:22px; font-weight:400;
  color:var(--ink); letter-spacing:-.01em; margin-bottom:2px}
.packcta{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center}

/* =========================================================================
   BANDE DE REPÈRES
   ====================================================================== */
.proof{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.proof div{padding:var(--s5) var(--s5) var(--s5) 0}
.proof div + div{border-left:1px solid var(--line-soft); padding-left:var(--s5)}
.proof b{display:block; font-family:Newsreader,serif; font-size:26px; font-weight:400;
  letter-spacing:-.012em; margin-bottom:var(--s1)}
.proof span{font-size:13.5px; color:var(--ink-2); line-height:1.5; display:block; max-width:26ch}

/* =========================================================================
   TABLEAUX — aucune maquette n'en contient encore. Conservé parce que la fiche
   produit finale et l'écran d'administration en auront besoin. À supprimer si
   ce besoin disparaît.
   ====================================================================== */
.tw{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:14px}
th{text-align:left; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-3);
  padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:13px var(--s4); border-bottom:1px solid var(--line-soft); color:var(--ink-2); vertical-align:top}
tr:last-child td{border-bottom:0}
td strong{color:var(--ink); font-weight:600}

/* =========================================================================
   ENCARTS
   ====================================================================== */
.note{
  border-left:2px solid var(--accent); background:var(--accent-wash);
  padding:var(--s5) var(--s6); border-radius:0 var(--radius-card) var(--radius-card) 0;
  font-size:14.5px; color:var(--ink);
}
.note.warn{border-left-color:var(--wait); background:var(--wait-wash)}
.note.stop{border-left-color:var(--stop); background:var(--stop-wash)}
.note p:last-child{margin:0}
.note strong{font-weight:600}

/* Ligne de livraison, posee juste sous le prix. Le client doit savoir avant
   de s'engager que la livraison est distincte du prix du mobilier. */
.shipline{margin:var(--s3) 0 var(--s4)}

/* =========================================================================
   QUESTIONS FREQUENTES
   ====================================================================== */
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  min-height:44px; padding:var(--s4) 0; cursor:pointer; list-style:none;
  font-size:16px; font-weight:500; letter-spacing:-.006em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--ink-3); font-size:19px; line-height:1; flex:none}
.faq details[open] summary::after{content:"3"}
.faq details p{margin:0; padding:0 0 var(--s5); font-size:15px; color:var(--ink-2); max-width:76ch}

/* panneau beige : le SEUL aplat teinté d'une page, jamais pleine largeur.
   Sur ce fond, deux couleurs perdent leur conformité et sont donc corrigées ici :
   --wood tombe à 4,43:1 (interdit en texte) et --field-line à 2,93:1 (sous le seuil
   de 3:1 des limites de composant). Les champs y prennent --ink-3, qui tient 4,55:1. */
.panel{
  background:var(--beige); border-radius:var(--radius-card);
  padding:clamp(32px,4.5vw,64px);
}
.panel .field input,.panel .field select,.panel .field textarea{border-color:var(--ink-3)}
.panel .btn-ghost{border-color:var(--ink-3)}
.panel .mono{color:var(--ink-2)}
.panel-quiet{background:var(--surface-2)}
.panel-outline{background:none; border:1px dashed var(--line); text-align:center}

/* bloc devis : texte a gauche, appels a l action a droite */
.devis{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s8); align-items:center}
.devis h2{margin-bottom:var(--s3)}
@media (max-width:900px){
  .devis{grid-template-columns:1fr; gap:var(--s6)}
  .devis .dcta{flex-direction:row!important; flex-wrap:wrap}
}

/* champs */
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; font-family:inherit; font-size:15px; padding:12px 13px; min-height:46px;
  border:1px solid var(--field-line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink);
}
.field input::placeholder{color:var(--ink-3)}

/* =========================================================================
   PIED DE PAGE — blanc cassé, fermé par un unique filet charbon
   ====================================================================== */
footer.site{
  border-top:1px solid var(--rule); background:var(--surface-2);
  padding:var(--s9) 0 var(--s6); margin-top:var(--s8);
}
.fgrid{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:var(--s7)}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
footer a{display:inline-flex; align-items:center; min-height:44px; font-size:14px; color:var(--ink-2)}
footer a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.fbottom{
  margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-3); display:flex; justify-content:space-between;
  gap:var(--s4); flex-wrap:wrap;
}
.fbrand .small{margin-top:var(--s4); max-width:36ch}

/* Coordonnees de la societe. Elles n'existent pas encore : la structure est
   posee, les valeurs sont marquees, rien n'est invente. */
.fcoord{
  display:grid; grid-template-columns:auto 1fr; gap:7px var(--s5);
  margin:var(--s5) 0 var(--s4); font-size:13.5px;
}
.fcoord dt{color:var(--ink-3)}
.fcoord dd{margin:0; color:var(--ink-2)}
.fcoord .todo{color:var(--wood); font-style:italic}

.flegal{display:flex; gap:var(--s5); flex-wrap:wrap}
.flegal a{display:inline-flex; align-items:center; min-height:44px; font-size:12.5px; color:var(--ink-3)}
.flegal a:hover{color:var(--ink)}

/* =========================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width:1400px){
  .actions .iconbtn:not(.burger):not(.keep){display:none}
  nav.main > .item > a{padding-inline:9px; font-size:14px}
}
@media (max-width:1080px){
  nav.main{display:none}
  .burger{display:grid}
  .actions{margin-left:auto}
  .packcard{grid-template-columns:1fr; gap:var(--s5)}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  /* un paragraphe de sept lignes centre ne se lit pas sur telephone */
  .panel-outline{text-align:left}
  .panel-outline .lede{margin-inline:0}
  :root{--head-h:64px}
  .sechead{margin-bottom:var(--s6)}
  .proof div,.proof div + div{border-left:0; padding:var(--s4) 0}
  .proof div + div{border-top:1px solid var(--line-soft)}
  .packdata{gap:var(--s5)}
}
@media (max-width:640px){

  /* a 375 px, logo + icone + bouton + burger ne tiennent pas : le bouton de
     devis sort de l en-tete. Il reste accessible dans le menu et dans le hero. */
  .headrow .actions > .btn{display:none}
  .logo{font-size:18px}
  .logo small{font-size:10.5px}

  /* le bandeau de maquette ne doit pas manger 100 px de haut de page */
  .protobar{font-size:10px; padding:7px 0}
  .protobar span + span,.protobar .long{display:none}
  /* les boutons d appel a l action passent pleine largeur */
  .cta .btn,.packcta .btn,.dcta .btn{flex:1 1 100%}
  .btn-lg{min-height:52px}

  .fgrid{grid-template-columns:1fr; gap:var(--s6)}
  /* deux colonnes de produits dès 348 px de large : minmax(256px) n'en donnerait
     qu'une seule sur un téléphone de 390 px. En dessous de 348 px, une colonne. */
  .plist{grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); column-gap:var(--s3); row-gap:var(--s5)}
  .pbody{padding:var(--s3) var(--s3) var(--s4)}
  .pname{font-size:14.5px}
  .clist{grid-template-columns:1fr; gap:var(--s6)}
  .actions .iconbtn:not(.burger):not(.keep){display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}
@media print{
  header.site,.protobar,.mobnav,footer.site{display:none}
  body{background:#fff}
}


/* =========================================================================
   Style des illustrations — repris tel quel des maquettes, où il est
   identique sur les six pages. Il accompagne le sprite injecté dans
   footer.php : sans lui, les dessins perdent leurs traits et leurs aplats.
   ====================================================================== */

.ill-sprite g{fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
    .ill-sprite .w{stroke:var(--wood)}
    .ill-sprite .f{fill:var(--wood-wash);stroke:none}
    .ill-sprite .a{fill:var(--accent-wash);stroke:none}
    .ill-sprite .light{stroke:var(--wood);opacity:.5}
    .ill-sprite .dash{stroke-dasharray:2.5 4.5;opacity:.55}
    .ill-sprite .pic{stroke-width:1.7}
    .ill-sprite .lbl{font-family:"IBM Plex Mono",monospace;font-size:6.5px;fill:currentColor;stroke:none;opacity:.7;letter-spacing:.08em}