/* Imprimerie ROS : feuille de style unique, ecrite a la main.
   Direction : « la feuille en cours d'impression ». Voir ../DESIGN.md.
   Le blanc est du papier, la profondeur vient des aplats bleus, et le repere de
   reperage ponctue la page. Une seule famille : IBM Plex Serif.

   1. Tokens · 2. Polices · 3. Base · 4. Mise en page · 5. Le repere
   6. Boutons · 7. En-tete · 8. Hero · 9. Logos clients · 10. Cartes
   11. Calculateur · 12. Realisations · 13. Formulaires · 14. Contact
   15. Pied · 16. Bandeau cookies · 17. Barre mobile · 18. Prose
   19. Motion · 20. Reponses aux tailles d'ecran · 21. Impression */

/* ------------------------------------------------------------- 1. Tokens */
:root{
  --bleu:#254AA5;
  --bleu-fonce:#1B3878;
  --bleu-encre:#16306B;
  --rouge:#ED1C24;
  --noir:#231F20;
  --papier:#FFFFFF;
  --papier-froid:#F2F4F9;
  --lavande:#BBC0E1;
  --filet:#DFE3EE;
  --credit-vojood:#FC6600;

  --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;

  --large:1200px;
  --etroit:740px;
  --gouttiere:clamp(1.25rem,3vw,2.25rem);
  --section:clamp(4rem,8vw,7rem);
  --r:3px;

  /* Hauteurs des deux elements collants. La barre du bas n'existe qu'en
     portrait sous 720 px : ailleurs elle vaut zero (section 20). */
  --entete-h:77px;
  --barre-h:0px;

  --entree:cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------ 2. Polices */
@font-face{
  font-family:"IBM Plex Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ibm-plex-serif-400-latin.woff2) format("woff2");
}
@font-face{
  font-family:"IBM Plex Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ibm-plex-serif-400-italic-latin.woff2) format("woff2");
}
@font-face{
  font-family:"IBM Plex Serif";font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/ibm-plex-serif-600-latin.woff2) format("woff2");
}
@font-face{
  font-family:"IBM Plex Serif";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/ibm-plex-serif-700-latin.woff2) format("woff2");
}

/* --------------------------------------------------------------- 3. Base */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--serif);font-size:1.0625rem;line-height:1.7;
  color:var(--noir);background:var(--papier);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--bleu);text-underline-offset:.16em}
a:hover{color:var(--bleu-fonce)}
:focus-visible{outline:3px solid var(--rouge);outline-offset:3px;border-radius:1px}
.section-bleue :focus-visible,.pied :focus-visible,.bandeau-cookies :focus-visible,
.entete-in :focus-visible{
  outline-color:#fff;
}
h1,h2,h3{font-weight:700;letter-spacing:-.018em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(2.7rem,6.4vw,4.75rem);line-height:1.04;letter-spacing:-.022em}
h2{font-size:clamp(1.95rem,3.6vw,2.9rem)}
h3{font-size:1.16rem;font-weight:600;letter-spacing:-.005em;line-height:1.3}
p+p,p+ul,p+ol,ul+p,ol+p,h1+p,h2+p,h3+p{margin-top:.85em}
b,strong{font-weight:600}
em{font-style:normal;color:var(--rouge)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--bleu);color:#fff;padding:.8rem 1.2rem;font-weight:600;
}
.evitement:focus{left:0}

/* Montants : l'espace fine est faite en CSS et l'ensemble ne se coupe jamais. */
.val{white-space:nowrap}
/* Un mot compose qui ne se coupe pas sur son trait d'union (« rendez-/vous » a
   1280 px dans le pied). Pas de U+2011 : IBM Plex Serif n'a pas ce glyphe. */
.insecable{white-space:nowrap}
.val .u{display:inline-block;width:5px}

/* Curseur annees 90 (Wiam, 23.09.2026) : fleche et main en pixel art, noir et
   blanc, pixels doubles. Dessine par le systeme comme tout curseur : aucun
   script, aucun retard, rien ne change sur ecran tactile. Images produites par
   outils/faire-curseurs.py. La premiere declaration sert de repli aux
   navigateurs sans image-set() ; les points chauds sont en px CSS. */
html{
  cursor:url(/assets/curseur/fleche.png) 0 0,auto;
  cursor:image-set(url(/assets/curseur/fleche.png) 1x,url(/assets/curseur/fleche-2x.png) 2x) 0 0,auto;
}
a[href],button{
  cursor:url(/assets/curseur/main.png) 11 0,pointer;
  cursor:image-set(url(/assets/curseur/main.png) 1x,url(/assets/curseur/main-2x.png) 2x) 11 0,pointer;
}
/* Les champs de saisie gardent le curseur texte du systeme. Les libelles, le
   menu deroulant et les cases a cocher recoivent du navigateur un
   cursor:default (mesure le 2026-09-23), donc la fleche moderne au milieu des
   pixels : ils reprennent la fleche de la page. */
input:not([type=checkbox],[type=radio]),textarea{cursor:text}
label,select,[type=checkbox],[type=radio]{cursor:inherit}

/* -------------------------------------------------------- 4. Mise en page */
.wrap{width:min(100% - 2*var(--gouttiere),var(--large));margin-inline:auto}
.wrap-etroit{width:min(100% - 2*var(--gouttiere),var(--etroit));margin-inline:auto}
.section{padding-block:var(--section);position:relative}
/* L'en-tete est collante et haute de 76 px : sans cette reserve, un saut sur
   #devis pose le premier champ du formulaire DERRIERE l'en-tete, invisible.
   Mesure le 2026-09-22 : le label « Votre nom » arrivait a 8 px du haut. */
[id]{scroll-margin-top:6rem}
/* Une section, elle, s'arrete pile sous l'en-tete : avec 6rem, un saut depuis
   le menu laissait voir une bande de la section precedente sous l'en-tete
   (mesure a 320 et 375 px le 2026-09-23). Son propre padding fait l'air. */
section[id]{scroll-margin-top:var(--entete-h)}
.section-etroite{padding-block:clamp(3rem,6vw,5rem)}
.section-froide{background:var(--papier-froid)}
.section-bleue{background:var(--bleu);color:#fff}
.section-bleue h1,.section-bleue h2,.section-bleue h3{color:#fff}
/* :not(.btn) est porteur : sans lui, cette regle repeint le texte du bouton
   clair en blanc sur fond blanc, et le bouton devient un rectangle vide.
   Defaut vu en capture le 2026-09-22 sur la bande tout-menage. */
.section-bleue a:not(.btn){color:#fff}
.section-bleue .surtitre{color:var(--lavande)}
/* La bande tout-menage de l'accueil : le texte, et a droite les boites aux
   lettres avec un flyer dans chacune (demande de Wiam, 2026-09-23). */
.tm-bande{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.boites{width:100%;max-width:360px;justify-self:end;color:#fff}
.boites .encre{fill:var(--lavande)}
/* Le bandeau de la page tout-menage reprend l'illustration, plus etroite ; la
   colonne du texte prend toute la place restante, le titre garde ses 3 lignes. */
.bandeau-page .tm-bande{grid-template-columns:minmax(0,1fr) auto}
.boites-page{width:220px;max-width:220px}
.centre{text-align:center}
.centre .lead{margin-inline:auto}
/* Des boutons poses dans un paragraphe : sans gap, ils se touchaient une fois
   passes l'un sous l'autre (page 404 a 320 px). */
.boutons{display:flex;flex-wrap:wrap;gap:.75rem}
.centre .boutons{justify-content:center}

.lead{font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.62;max-width:58ch}
.section>.wrap>p:not(.lead):not(.surtitre){max-width:66ch}

.surtitre{
  display:flex;align-items:center;gap:.6rem;
  font-size:.79rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bleu);margin-bottom:.9rem;line-height:1.4;
}
.surtitre+h1,.surtitre+h2{margin-bottom:.6em}

.grille{display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-content:start}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
/* Un enfant de grille a min-width:auto par defaut : sa largeur minimale de
   contenu l'emporte sur 1fr. Un <select> dont la plus longue option fait
   trente caracteres elargit alors toute la colonne. Mesure a 375 px le
   2026-09-22 : scrollWidth 384 pour un ecran de 375, a cause du select du
   formulaire tout-menage. */
.grille>*,.duo>*,.champ>*{min-width:0}

/* ---------------------------------------------------------- 5. Le repere */
/* L'element signature. Il ne sert qu'a cinq choses, voir DESIGN.md. */
.repere{width:1em;height:1em;color:currentColor;flex:none}
/* L'ancre des sur-titres est sa mire en quadrichromie (une <img>, pas un SVG
   en currentColor) : sur une bande bleue, son disque se fond dans l'aplat et
   seuls les quatre arcs restent, c'est voulu. */
.repere-ancre{width:1.05em;height:1.05em;flex:none}
.repere-grand{width:4rem;height:4rem;color:var(--bleu);margin:0 auto 1.5rem}

/* Le filigrane du hero, a cheval sur la limite du blanc et de l'aplat. */
.repere-filigrane{
  position:absolute;right:38%;bottom:-6rem;width:26rem;height:26rem;
  color:var(--lavande);opacity:.35;pointer-events:none;z-index:0;
}

/* Les coins d'une bande bleue, comme les reperes d'une forme avant massicotage. */
.repere-coin{position:absolute;width:3.25rem;height:3.25rem;color:#fff;opacity:.3}
.repere-coin-hg{top:1.4rem;left:1.4rem}
.repere-coin-bd{bottom:1.4rem;right:1.4rem}

.liste-repere{list-style:none;display:grid;gap:.45rem;margin-top:1rem}
.liste-repere li{position:relative;padding-left:1.55rem;font-size:.95rem}
.liste-repere li::before{
  content:"";position:absolute;left:0;top:.52em;width:.72rem;height:.72rem;
  background:var(--bleu);
  -webkit-mask:url(/assets/svg/repere.svg) center/contain no-repeat;
  mask:url(/assets/svg/repere.svg) center/contain no-repeat;
}

/* ------------------------------------------------------------ 6. Boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:.62rem 1.25rem;border:2px solid transparent;border-radius:var(--r);
  font-family:var(--serif);font-size:1rem;font-weight:600;line-height:1.2;
  text-decoration:none;transition:background .18s,color .18s,border-color .18s;
}
.btn-primaire{background:var(--bleu);border-color:var(--bleu);color:#fff}
.btn-contour{background:transparent;border-color:var(--bleu);color:var(--bleu)}
.btn-clair{background:#fff;border-color:#fff;color:var(--bleu)}
.btn-contour-clair{background:transparent;border-color:#fff;color:#fff}
.btn-large{min-height:52px;padding:.8rem 1.65rem;font-size:1.06rem}
.btn-mince{min-height:38px;padding:.35rem .85rem;font-size:.92rem;border-width:1px}
/* Les survols ne valent que pour une vraie souris : sur ecran tactile, le
   navigateur garde l'etat :hover apres un toucher, et un bouton touche restait
   peint comme survole jusqu'au toucher suivant. */
@media (hover:hover){
  .btn-primaire:hover{background:var(--bleu-fonce);border-color:var(--bleu-fonce);color:#fff}
  .btn-contour:hover{background:var(--bleu);color:#fff}
  .btn-clair:hover{background:var(--lavande);border-color:var(--lavande);color:var(--bleu-encre)}
  .btn-contour-clair:hover{background:#fff;color:var(--bleu)}
}

/* ----------------------------------------------------------- 7. En-tete */
/* L'en-tete est une bande bleue, le logo y est en negatif et agrandi
   (retours de Cedric, 24.09.2026, variante B choisie par Wiam le 29.09). */
/* Le filet blanc a 18 % separe l'en-tete des bandes bleues qui passent dessous
   (bandeau de /tout-menage/, bande tout-menage de l'accueil). */
.entete{
  position:sticky;top:0;z-index:60;background:var(--bleu);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.entete-in{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);min-height:76px}
/* min-height : le lien d'accueil faisait 22 px de haut, la hauteur du logo. */
.marque{display:flex;align-items:center;flex:none;min-height:44px}
/* 380 px au plus (208, puis 320 avant ; agrandi encore a la demande de Wiam le
   30.09.2026). Mesurer la marge de la barre a 1024 px apres tout changement. */
.marque img{width:clamp(210px,25vw,380px);height:auto}
.nav{display:flex;align-items:center;gap:clamp(.8rem,1.7vw,1.6rem);margin-left:auto}
.nav a{
  color:#fff;text-decoration:none;font-size:.97rem;font-weight:600;
  white-space:nowrap;padding:.35rem 0;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:#fff}
.btn-entete{flex:none}
.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;margin-left:auto;
  width:48px;height:48px;padding:0 10px;background:none;border:0;
}
.burger span{display:block;height:2px;background:#fff;transition:transform .2s,opacity .2s}
.burger.ouvert span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.ouvert span:nth-child(2){opacity:0}
.burger.ouvert span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Le menu vit dans l'en-tete collant, donc il ne defile pas avec la page : en
   paysage (667 x 375), « Contact » et « Demander un devis » restaient sous le
   bord de l'ecran, hors d'atteinte. Il defile maintenant dans sa propre boite. */
.nav-mobile{
  border-top:1px solid var(--filet);background:var(--papier);padding-block:1rem;
  max-height:calc(100vh - var(--entete-h) - var(--barre-h));
  max-height:calc(100dvh - var(--entete-h) - var(--barre-h));
  overflow-y:auto;overscroll-behavior:contain;
}
.nav-mobile .wrap{display:grid;gap:.25rem}
.nav-mobile a:not(.btn){
  color:var(--noir);text-decoration:none;font-weight:600;padding:.7rem 0;
  border-bottom:1px solid var(--filet);
}
.nav-mobile .btn{margin-top:.8rem}

/* --------------------------------------------------------------- 8. Hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(3rem,6vw,5.5rem)}
/* L'aplat bleu occupe la moitie droite et file jusqu'au bord de la page. */
.hero::after{
  content:"";position:absolute;inset:0 0 0 auto;width:min(46%,760px);
  background:var(--bleu);z-index:0;
}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr .78fr;
  gap:clamp(2rem,4vw,4rem);align-items:center}
.hero-kicker{width:min(100%,330px);height:auto;margin-bottom:1.4rem}
/* La couleur de ses imprimes (retours de Cedric, 24.09.2026) : sa mire en
   quadrichromie posee dans la marge haute du hero, sur le blanc. Elle etait au
   coin de la photo, a moitie mangee par l'aplat bleu ; elle remplace ses trois
   carres (Wiam, 30.09.2026). Decorative, jamais de texte dessus. */
.mire-hero{display:block;width:clamp(3.2rem,5vw,4.5rem);height:auto;margin-bottom:.9rem}
.hero h1{margin-bottom:.55em}
/* La phrase qui situe l'imprimerie n'est pas l'accroche : elle descend d'un
   cran de taille et de graisse pour que « Oui, on imprime encore ! » reste seul
   au premier plan, et pour que les deux boutons tiennent dans le premier ecran. */
.h1-suite{
  display:block;margin-top:.42em;
  font-size:clamp(1.35rem,2.5vw,1.95rem);font-weight:400;line-height:1.24;
  letter-spacing:-.012em;color:var(--noir);
}
.hero .lead{margin-bottom:1.9rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-photo img{width:100%;border-radius:var(--r)}

/* ------------------------------------------------------ 9. Logos clients */
/* Plafond a 180px : cinq des vingt-trois logos sont des bitmaps places a
   265-478 ppi dans la planche Illustrator, au-dela ils se voient. */
/* Les filets sont portes par les cases, pas par un fond de grille : avec un
   fond, la case vide de la derniere rangee (23 logos) sortait en rectangle
   gris, comme un logo manquant, a toutes les largeurs. */
.logos{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  border-top:1px solid var(--filet);border-left:1px solid var(--filet);margin-top:2rem;
}
.logos li{
  display:flex;align-items:center;justify-content:center;
  background:var(--papier);padding:1.5rem 1.1rem;min-height:118px;
  border-right:1px solid var(--filet);border-bottom:1px solid var(--filet);
}
/* min(180px,100%) et pas 180px : un max-width en pixels ECRASE le max-width:100%
   global, et un logo de 400 px deborde une case de 145 px. Mesure a 375 px le
   2026-09-22 : scrollWidth etait a 427 pour un ecran de 375. */
.logos img{max-width:min(180px,100%);max-height:66px;width:auto;height:auto;object-fit:contain}

/* ------------------------------------------------------------- 10. Cartes */
.carte{
  background:var(--papier);border:1px solid var(--filet);border-radius:var(--r);
  padding:clamp(1.4rem,2.4vw,2rem);
}
.section-froide .carte{background:var(--papier)}
.carte h3{margin-bottom:.5em;color:var(--bleu)}
.metiers{margin-top:2rem}
/* Les cartes metiers deviennent des colonnes flex pour que la ligne « Pour : »
   se pose au BAS de chacune : sinon elle suit le contenu et les trois lignes ne
   s'alignent pas, alors que les cartes, elles, ont la meme hauteur. */
.metiers .carte{display:flex;flex-direction:column}
.metiers .carte .pour-qui{margin-top:auto}
/* Les pictos des metiers : bleu pour la machine, lavande pour l'encre. */
.picto{width:4rem;height:4rem;color:var(--bleu);margin-bottom:1.1rem;flex:none}
.picto .encre{fill:var(--lavande)}
.picto .fond{fill:var(--papier)}

/* « Ce qu'on fait, ET POUR QUI » : le titre promettait deux choses, les cartes
   n'en livraient qu'une. C'est le seul endroit ou la cible se reconnait. */
.pour-qui{
  margin-top:1.1rem;padding-top:.85rem;border-top:1px solid var(--filet);
  font-size:.92rem;color:#4a4f5a;
}
.pour-qui b{color:var(--bleu)}

/* Le chapitre « Eco », voulu par Cedric le 24.09.2026 : ses engagements, et
   l'utilitaire electrique qui livre. Photo paysage, recadree a la source. */
.ecologie{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);align-items:center;margin-top:2.5rem;
  padding:clamp(1.25rem,3vw,2rem);background:var(--papier-froid);border-left:3px solid var(--bleu);
}
.section-froide .ecologie{background:var(--papier)}
.ecologie h3{color:var(--bleu);font-size:clamp(1.25rem,2vw,1.5rem);margin-bottom:.35em}
.ecologie .liste-repere li{font-size:1rem}
.ecologie-photo{width:100%;border-radius:var(--r)}
/* Le badge HP Latex, fourni par Wiam le 29.09.2026 : logo tiers, il garde son bleu,
   comme les logos clients gardent leurs couleurs. Les logos UL ne s'affichent pas
   (reserves aux titulaires d'un contrat UL) : la legende le dit en texte, et attribue
   la certification aux ENCRES, pas a l'imprimerie. */
.labels-encres{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1.5rem}
.labels-encres img{width:auto;height:64px}
.labels-encres p{flex:1 1 14rem;font-size:.9rem;color:#4a4f5a}

.histoire{align-items:start}
.histoire-photos{display:grid;gap:1rem}
.histoire-photos img{border-radius:var(--r);width:100%}
/* La seconde photo est un detail de metier, pas un second sujet : elle passe en
   bandeau large et recadre. En demi-colonne, elle laissait un vide a droite qui
   se lisait comme un defaut. Cadrage choisi par Wiam le 2026-09-23 sur deux
   variantes : le texte de la bache, la machine a oeillets et l'oeillet pose. */
.histoire-photos img:last-child{aspect-ratio:2/1;object-fit:cover;object-position:center 84%}
.encart-vacances{
  margin-top:2rem;padding:1.3rem 1.5rem;background:var(--bleu);color:#fff;border-radius:var(--r);
}
.encart-vacances h3{color:#fff;margin-bottom:.4em}
.encart-vacances a:not(.btn){color:#fff;font-weight:600}
.encart-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}

/* -------------------------------------------------------- 11. Calculateur */
.calculateur{margin-top:2.2rem}
/* La phrase qui parle a la cible institutionnelle passe AVANT le tableau : en
   note de bas de bloc, elle etait la seule ligne qui s'adressait a elle, en
   petit et en gris. */
.palier-avant{
  margin-bottom:1.6rem;padding:1rem 1.2rem;background:var(--papier);
  border-left:3px solid var(--bleu);font-size:.97rem;max-width:74ch;
}
.section-froide .palier-avant{background:var(--papier)}
.palier-avant b{color:var(--bleu)}
.palier-onglets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.palier-onglet{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:.55rem 1rem;border:1px solid var(--filet);border-radius:var(--r);
  background:var(--papier);color:var(--noir);
  font-family:var(--serif);font-size:.97rem;font-weight:600;
  transition:border-color .18s,color .18s,background .18s;
}
.palier-onglet .repere{width:.85em;height:.85em;color:transparent;transition:color .18s}
@media (hover:hover){.palier-onglet:hover{border-color:var(--bleu);color:var(--bleu)}}
.palier-onglet.actif{border-color:var(--bleu);background:var(--bleu);color:#fff}
.palier-onglet.actif .repere{color:#fff}

/* Le masquage des tableaux depend de la classe `js` du <html>, posee dans le
   <head>. Sans JavaScript, les cinq tableaux restent affiches et la bande des
   prix tient sa promesse ; avec JavaScript, un seul est montre, sans
   clignotement puisque la regle s'applique avant le premier rendu.
   Defaut trouve en audit le 2026-09-22 : les cinq sortaient en `hidden`, donc
   la section etait VIDE sans JavaScript, et le commentaire du code affirmait
   exactement le contraire. */
.js .palier-table{display:none}
.js .palier-table.visible{display:block}
.palier-table+.palier-table{margin-top:2.4rem}
.js .palier-table+.palier-table{margin-top:0}
.palier-table h3{font-size:1.3rem;color:var(--bleu);margin-bottom:.35em}
.palier-desc{font-size:.97rem;margin-bottom:1.2rem}
.palier-desc .specs{color:#5a5f6b;font-size:.92rem}
.table-prix{width:100%;border-collapse:collapse;background:var(--papier);
  border:1px solid var(--filet)}
.table-prix thead th{
  text-align:left;font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:#5a5f6b;padding:.7rem 1rem;border-bottom:1px solid var(--filet);
}
.table-prix tbody th{text-align:left;font-weight:600;padding:.95rem 1rem}
.table-prix td{padding:.95rem 1rem;border-top:1px solid var(--filet)}
.table-prix tbody th{border-top:1px solid var(--filet)}
.table-prix tbody tr:first-child th,.table-prix tbody tr:first-child td{border-top:0}
.table-prix .prix{font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:700;color:var(--bleu);
  white-space:nowrap}
.table-prix .par{display:block;font-size:.8rem;font-weight:400;color:#5a5f6b;letter-spacing:.02em}
.table-prix .action{text-align:right;white-space:normal}
.palier-note{margin-top:1.3rem;font-size:.95rem;color:#4a4f5a;max-width:72ch}
.annonce:empty{display:none}
.annonce{
  margin-top:1rem;padding:.6rem .9rem;border-left:3px solid var(--bleu);
  background:var(--papier-froid);font-size:.95rem;
}

/* ----------------------------------------------------- 12. Realisations */
.grille-real{
  list-style:none;display:grid;gap:clamp(1rem,2vw,1.6rem);margin-top:2.2rem;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.carte-real{
  display:block;width:100%;padding:0;background:var(--papier);
  border:1px solid var(--filet);border-radius:var(--r);overflow:hidden;
  font-family:var(--serif);color:var(--noir);text-align:left;
  transition:border-color .18s;
}
@media (hover:hover){.carte-real:hover{border-color:var(--bleu)}}
.carte-real img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center top}
.carte-real-texte{display:block;padding:.85rem 1rem 1rem}
.carte-real-texte b{display:block;font-weight:600;font-size:1.02rem}
.carte-real-texte span{display:block;font-size:.88rem;color:#5a5f6b;margin-top:.15rem}

/* margin:auto est porteur : c'est lui qui centre un dialogue modal, et le
   reset *{margin:0} du haut de cette feuille le retirait. Le dialogue sortait
   colle en haut a gauche de l'ecran (mesure le 2026-09-23). */
.loupe{
  margin:auto;border:0;border-radius:var(--r);padding:0;max-width:min(92vw,980px);
  background:var(--papier);box-shadow:0 18px 60px rgba(35,31,32,.32);
}
.loupe::backdrop{background:rgba(22,48,107,.72)}
/* Ouvert, le dialogue est une colonne : la barre et la legende gardent leur
   hauteur, l'image prend ce qui reste. Sans ca, sur telephone, la legende des
   visuels en hauteur passait sous le bord de l'ecran. */
.loupe[open]{display:flex;flex-direction:column}
.loupe-barre{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;flex:none;
  padding:.6rem .75rem;border-bottom:1px solid var(--filet);background:var(--papier);
  position:sticky;top:0;z-index:2;
}
.loupe-rang{font-size:.9rem;color:#5a5f6b;margin-inline:auto}
.loupe-fermer{
  min-height:44px;padding:.35rem 1rem;border:1px solid var(--filet);border-radius:var(--r);
  background:var(--papier);font-family:var(--serif);font-weight:600;
}
@media (hover:hover){.loupe-fermer:hover{border-color:var(--bleu);color:var(--bleu)}}
.vue:not([hidden]){display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.vue img{flex:1 1 auto;min-height:0;width:100%;height:auto;max-height:76vh;object-fit:contain;
  background:var(--papier-froid)}
.vue figcaption{flex:none;padding:1rem 1.2rem;font-size:.95rem;border-top:1px solid var(--filet)}
.vue figcaption b{margin-right:.4rem}

/* -------------------------------------------------------- 13. Formulaires */
.form{margin-top:1.8rem}
.pot{display:none}
.champ{display:grid;gap:.35rem}
.champ+.champ,.duo+.champ,.champ+.duo,.duo+.duo{margin-top:1rem}
/* Deux champs cote a cote s'alignent par le BAS : les cases restent sur une
   meme ligne meme si un libelle passe sur deux lignes. Le second ne prend pas
   la marge de .champ+.champ, qui le decalait de 16 px vers le bas (capture de
   Wiam, 2026-09-23). */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:end}
.duo>.champ{margin-top:0}
.champ label{font-size:.93rem;font-weight:600}
.champ .aide{display:block;font-weight:400;font-size:.86rem;color:#5a5f6b}
.champ input,.champ select,.champ textarea{
  font-family:var(--serif);font-size:1rem;color:var(--noir);
  padding:.7rem .85rem;
  border:1px solid #b9c0cf;border-radius:var(--r);background:var(--papier);width:100%;
}
/* Meme hauteur pour les cases et le menu : le select de Chrome sortait a 49 px
   contre 47 pour les cases, donc 2 px de decalage dans sa rangee. */
.champ input,.champ select{height:48px}
.champ textarea{min-height:120px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--bleu)}
.consentement{display:flex;gap:.6rem;align-items:flex-start;margin-top:1.1rem}
.consentement input{width:22px;height:22px;margin-top:.25rem;flex:none;accent-color:var(--bleu)}
.consentement label{font-size:.9rem;line-height:1.5}

/* ------------------------------------------------------------ 14. Contact */
.contact-grille{grid-template-columns:1.25fr .75fr}
.coordonnees{
  background:var(--papier-froid);border:1px solid var(--filet);border-radius:var(--r);
  padding:clamp(1.4rem,2.4vw,1.9rem);align-self:start;
}
.coordonnees h3{color:var(--bleu);margin-bottom:.5em}
.coordonnees h3+*{margin-top:0}
.coordonnees .adresse{font-size:1.02rem;margin-bottom:1rem}
.coord-liste{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:1.2rem 0 1.8rem}
.coord-liste dt{font-size:.85rem;color:#5a5f6b}
/* overflow-wrap : une adresse e-mail n'a aucun point de coupure naturel et
   touchait le bord de la carte a 375 px. */
.coord-liste dd{font-weight:600;overflow-wrap:anywhere}
.photo-contact{margin-top:1.6rem;border-radius:var(--r)}

.etapes{list-style:none;counter-reset:etape;display:grid;gap:1.1rem;margin-top:1.4rem}
.etapes li{position:relative;padding-left:2.6rem;counter-increment:etape}
.etapes li::before{
  content:counter(etape);position:absolute;left:0;top:.05em;
  width:1.8rem;height:1.8rem;border-radius:50%;background:var(--bleu);color:#fff;
  font-size:.9rem;font-weight:600;display:grid;place-items:center;
}

.carte-tm .tm-prix{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:700;color:var(--bleu);
  margin-top:.6rem}
.carte-tm .tm-prix .par{font-size:.9rem;font-weight:400;color:#5a5f6b}
.carte-tm .tm-exemple{font-size:.9rem;color:#5a5f6b}
.carte-tm .specs{font-size:.9rem;color:#5a5f6b}
.carte-tm h2{font-size:1.5rem;margin-bottom:.2em}
.bandeau-page h1{max-width:20ch}

/* --------------------------------------------------------------- 15. Pied */
.pied{background:var(--bleu);color:#fff;padding-top:clamp(2.6rem,5vw,4rem)}
.pied a{color:#fff}
.pied h2{font-size:.82rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lavande);margin-bottom:.9rem}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(1.6rem,3vw,3rem);
  padding-bottom:2.6rem}
.pied-logo{width:208px;margin-bottom:1.1rem}
.pied-adresse{font-size:1.02rem;margin-bottom:.6rem}
.pied-liens{list-style:none;display:grid;gap:.4rem}
.lien-maps{font-weight:600}
.pied-bas{background:var(--bleu-encre);padding-block:1rem;font-size:.88rem}
.pied-bas-in{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem}
.lien-cookies{
  background:none;border:0;padding:0;color:#fff;font-family:var(--serif);font-size:.88rem;
  text-decoration:underline;
}
.signature{margin-left:auto}
.signature a{color:var(--lavande);font-weight:600;text-decoration:none}
.signature .pt{color:var(--credit-vojood)}

/* ---------------------------------------------------- 16. Bandeau cookies */
.bandeau-cookies{
  position:fixed;inset:auto 0 0 0;z-index:70;background:var(--bleu-encre);color:#fff;
  padding:1rem 0;border-top:3px solid var(--bleu);
}
.bandeau-cookies-in{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  justify-content:space-between}
.bandeau-cookies p{font-size:.95rem;max-width:64ch}
.bandeau-cookies a{color:#fff}
.bandeau-cookies-actions{display:flex;gap:.6rem;flex:none}

/* ------------------------------------------------------- 17. Barre mobile */
.barre-mobile{display:none}

/* -------------------------------------------------------------- 18. Prose */
.prose h1{font-size:clamp(2.1rem,4.4vw,3rem);margin-bottom:.7em}
.prose h2{font-size:1.4rem;margin-top:2.2em;margin-bottom:.5em;color:var(--bleu)}
.prose p,.prose li{max-width:70ch}
.prose ul{margin-left:1.2rem;display:grid;gap:.3rem}
.prose code{
  font-family:ui-monospace,"Cascadia Mono","Segoe UI Mono",monospace;font-size:.92em;
  background:var(--papier-froid);padding:.12em .4em;border-radius:2px;
}

/* ------------------------------------------------------------- 19. Motion */
/* UN seul moment orchestre : l'entree du hero. Le reste du site est immobile. */
@keyframes monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.hero-kicker{animation:monte .52s var(--entree) both}
.hero h1{animation:monte .52s var(--entree) .09s both}
.hero .lead{animation:monte .52s var(--entree) .18s both}
.hero-actions{animation:monte .52s var(--entree) .27s both}
.hero-photo{animation:fondu .64s var(--entree) .12s both}
.repere-filigrane{animation:fondu .64s linear .3s both}

.sans-motion *,.sans-motion *::before,.sans-motion *::after{
  animation:none !important;transition:none !important;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ------------------------------------- 20. Reponses aux tailles d'ecran */

/* Seuil du burger : mesure sur le CSS reel le 2026-09-22, cinq entrees de nav.
   Le temoin qui cede en premier n'est pas la nav (elle est en nowrap) mais le
   mot-symbole comprime a sa gauche. Addition a 1024 px :
   logo 208 + nav 5 entrees 424 + bouton devis 188 + 2 gouttieres de 32 + marges
   du conteneur 72 = 924, plus les ecarts de flex. Casse en dessous de 1024.
   ⚠️ Tout lien ajoute, RETIRE ou RENOMME oblige a refaire cette mesure. */
@media (max-width:1023px){
  .nav{display:none}
  .burger{display:flex;margin-left:0}
  /* Le bouton de devis reste dans l'en-tete, a gauche du burger : sur tablette
     (721 a 1023 px) et en paysage, aucune barre du bas ne le porte, et le
     devis n'etait plus qu'au fond du menu. */
  .btn-entete{margin-left:auto}
}
@media (min-width:1024px){
  .nav-mobile{display:none}
}

@media (max-width:980px){
  .hero-in{grid-template-columns:1fr .9fr}
  .contact-grille{grid-template-columns:1fr}
}

@media (max-width:880px){
  .hero::after{inset:auto 0 0 0;width:auto;height:46%}
  .hero-in{grid-template-columns:1fr}
  .hero-photo{max-width:520px;margin-inline:auto;width:100%}
  .repere-filigrane{right:auto;left:-6rem;bottom:auto;top:2rem;width:18rem;height:18rem}
  .g2,.g3{grid-template-columns:1fr}
  .tm-bande,.bandeau-page .tm-bande{grid-template-columns:1fr}
  .boites{max-width:220px;justify-self:start}
  .boites-page{max-width:150px}
  .ecologie{grid-template-columns:1fr}
  .ecologie-photo{max-width:520px}
  /* Sous 880 px, trois colonnes de pied serraient trop le texte (mesure a
     768 px, du temps des horaires). */
  .pied-grille{grid-template-columns:1fr 1fr}
}

/* Cote a cote, les deux photos de la maison prennent le meme format : en 2/1,
   la seconde finissait pres de 60 px plus haut que la premiere (768 px). */
@media (min-width:621px) and (max-width:880px){
  .histoire-photos{grid-template-columns:1fr 1fr}
  .histoire-photos img:last-child{aspect-ratio:3/2}
}

/* La barre d'action, en portrait sous 720 px. En paysage (moins de 481 px de
   haut), elle prenait 68 px sous un en-tete collant deja haut de 77 : c'est
   alors le bouton de l'en-tete qui porte le devis (mesure a 667 x 375). */
@media (max-width:720px) and (min-height:481px){
  :root{--barre-h:calc(1.2rem + 49px + env(safe-area-inset-bottom, 0px))}
  .btn-entete{display:none}
  .burger{margin-left:auto}
  .barre-mobile{
    display:grid;grid-template-columns:auto 1fr;gap:.6rem;
    position:fixed;inset:auto 0 0 0;z-index:65;
    background:var(--papier);border-top:1px solid var(--filet);
    padding:.6rem var(--gouttiere) calc(.6rem + env(safe-area-inset-bottom, 0px));
    transition:transform .25s var(--entree),visibility .25s;
  }
  /* nowrap et padding resserre : « Demander un devis » passait sur deux lignes
     a 375 px et la barre doublait de hauteur. */
  .barre-mobile .btn{min-height:48px;white-space:nowrap;padding-inline:.9rem;font-size:.98rem}
  /* Tant que les boutons du hero sont a l'ecran, la barre s'efface : sinon le
     premier ecran portait deux fois « Demander un devis » et deux fois le
     telephone. La classe est tenue a jour par un IntersectionObserver
     (layout.js) ; .js la neutralise sans JavaScript, ou la barre reste. */
  .js .cta-visibles:not(.cookies-ouverts) .barre-mobile{transform:translateY(100%);visibility:hidden}
  /* La reserve du bas vaut exactement la barre : avec 78 px pour 68, une bande
     blanche de 10 px separait le pied bleu de la barre. */
  body{padding-bottom:var(--barre-h)}
  /* Le bandeau ne fait plus disparaitre la barre d'action : il se pose
     au-dessus d'elle. Faire disparaitre la CTA principale du mobile pendant
     toute la premiere visite etait le pire moment pour le faire. */
  body.cookies-ouverts{padding-bottom:calc(var(--barre-h) + 10rem)}
  body.cookies-ouverts .bandeau-cookies{bottom:var(--barre-h)}
}

/* Ecran tactile : 44 px de cible partout (DESIGN.md). Les liens du pied
   sortaient a 20-25 px de haut, et les boutons minces a 38 px sur tablette,
   dont les treize « Demander ce tirage », precisement les boutons de
   conversion. */
@media (max-width:720px),(pointer:coarse){
  .btn-mince{min-height:44px}
  .pied p a,.pied-liens a,.pied-bas a,.lien-cookies,.coord-liste a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .pied-liens{gap:0}
  .coord-liste{align-items:center}
}

@media (max-width:720px){
  .grille-real{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .carte-real-texte{padding:.6rem .7rem .7rem}
  .carte-real-texte b{font-size:.92rem}
  .carte-real-texte span{font-size:.8rem}
  .signature{margin-left:0;width:100%}
  /* Reperes de coin plus petits et rentres : a 52 px, sous 64 px de padding,
     celui du haut touchait le sur-titre de la bande (mesure a 320 et 375 px). */
  .repere-coin{width:2.25rem;height:2.25rem}
  .repere-coin-hg{top:.75rem;left:.75rem}
  .repere-coin-bd{bottom:.75rem;right:.75rem}
}

@media (max-width:620px){
  .duo{grid-template-columns:1fr}
  .table-prix thead{display:none}
  .table-prix tbody th,.table-prix td{display:block;padding:.35rem 1rem}
  .table-prix tbody th{padding-top:1rem;font-size:1.02rem}
  .table-prix .action{text-align:left;padding-bottom:1rem}
  .table-prix tbody tr+tr th{border-top:1px solid var(--filet);margin-top:.4rem}
  .table-prix tbody td{border-top:0}
  .histoire-photos{grid-template-columns:1fr}
  .bandeau-cookies-actions{width:100%}
  /* nowrap : « Tout accepter » passait sur deux lignes a 320 px et le bandeau
     gagnait 18 px de haut. */
  .bandeau-cookies-actions .btn{flex:1;white-space:nowrap;padding-inline:.75rem}
}

@media (max-width:480px){
  .logos{grid-template-columns:repeat(2,1fr)}
  .logos li{padding:1rem .7rem;min-height:96px}
  .pied-grille{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
  /* Barre du dialogue sur deux rangees nettes : le rang et « Fermer » en haut,
     Precedente et Suivante dessous. Sans ca, les boutons retombaient sur deux
     lignes dans un ordre different a chaque largeur. */
  .loupe-barre{display:grid;grid-template-columns:1fr 1fr}
  .loupe-rang{grid-area:1/1;margin:0}
  .loupe-fermer{grid-area:1/2;justify-self:end}
}

/* ---------------------------------------------------------- 21. Impression */
@media print{
  .entete,.barre-mobile,.bandeau-cookies,.evitement,.hero::after{display:none !important}
  body{color:#000;background:#fff}
  .section-bleue{background:#fff;color:#000}
  .section-bleue h1,.section-bleue h2,.section-bleue h3,.section-bleue a{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
}
.maj{margin-top:2.5rem;font-size:.88rem;color:#5a5f6b}