/*
Theme Name: Art Piramida — Enseignes
Theme URI: https://art-piramida.com
Author: Seobooster LTD
Description: Thème code-pur pour art-piramida.com — enseignes, signalétique, vitrines. Une façade vue de jour et de nuit.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: art-piramida
*/

/* ==========================================================================
   0. POLICES — self-hosted (P-086), Google Fonts css2 (18/09/2026).
   Tilt Warp et Tilt Neon : l'API css2 ne sert QUE l'instance statique (les
   axes maison XROT/YROT ne sont pas exposés hors Google Fonts) → 400 fixe,
   pas de "woff2-variations". Onest reste variable (100-900). Chaque famille
   est coupée en deux fichiers (latin / latin-ext) comme le sert Google, pour
   ne pas fusionner deux binaires à la main.
   ========================================================================== */
@font-face{
  font-family:"Tilt Warp";
  src:url("assets/fonts/TiltWarp-Regular-latinext.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Tilt Warp";
  src:url("assets/fonts/TiltWarp-Regular-latin.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Tilt Neon";
  src:url("assets/fonts/TiltNeon-Regular-latinext.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Tilt Neon";
  src:url("assets/fonts/TiltNeon-Regular-latin.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Onest";
  src:url("assets/fonts/Onest-Variable-latinext.woff2") format("woff2-variations"),
      url("assets/fonts/Onest-Variable-latinext.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Onest";
  src:url("assets/fonts/Onest-Variable-latin.woff2") format("woff2-variations"),
      url("assets/fonts/Onest-Variable-latin.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Palette claire uniquement. */
:root{
  --fond:#F4F0F2;         /* opale */
  --plaque:#FBF9FA;       /* plexi */
  --plaque-haute:#FFFFFF;
  --encre:#17121A;        /* aubergine de nuit */
  --sourde:#5E5560;       /* alu anodisé */
  --accent:#B8290E;       /* vinyle — accent unique de jour, aplat mat */
  --accent-survol:#971F0A;
  --accent-ink:#FFFFFF;   /* texte sur bouton accent, jour = blanc */
  --argon:#1F4FA8;        /* donnée / règlement */
  --filet:#DDD5DA;
  --conforme:#1E7A45;

  /* fixes, identiques dans les deux thèmes */
  --rue:#110C0F;
  --neon-fixe:#FF5B2E;
  --lampe-fixe:#F3ECEF;

  --mot-allume:"Tilt Warp"; /* bascule en Tilt Neon la nuit, cf. règle plus bas */

  --police-boitier:"Tilt Warp", system-ui, sans-serif;
  --police-tube:"Tilt Neon", system-ui, sans-serif;
  --police-lecture:"Onest", system-ui, sans-serif;

  --conteneur:1280px;
  --gouttiere:24px;
  --ombre-halo:none;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:var(--police-lecture);
  font-size:17.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .35s ease,color .35s ease;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}

.ap-conteneur{max-width:var(--conteneur);margin-inline:auto;padding-inline:var(--gouttiere)}
@media (max-width:600px){.ap-conteneur{padding-inline:16px}}

h1,h2,h3{font-family:var(--police-boitier);line-height:1.08;letter-spacing:-.01em;margin:0 0 .4em}
h1{font-size:clamp(2.75rem,5vw + 1rem,4.5rem)}
h2{font-size:clamp(1.875rem,3vw + .5rem,2.5rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.ap-chapo{font-size:21px;font-weight:500;color:var(--sourde)}
.ap-meta,.ap-cote{font-size:13px;color:var(--sourde);letter-spacing:.02em}
.tabular{font-variant-numeric:tabular-nums}

/* le mot allumé : Tilt Warp éteint le jour, Tilt Neon + halo la nuit */
.ap-mot-allume{font-family:var(--police-boitier);color:var(--accent)}



/* ==========================================================================
   3. INTERRUPTEUR JOUR/NUIT — procédé 1
   ========================================================================== */
.ap-interrupteur{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--filet);border-radius:999px;
  padding:6px 14px;background:var(--plaque);cursor:pointer;
  font-size:13px;color:var(--sourde);
}
.ap-interrupteur .piste{
  position:relative;width:34px;height:18px;border-radius:999px;
  background:var(--filet);flex:none;
}
.ap-interrupteur .bille{
  position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:999px;
  background:var(--accent);transition:transform .25s ease;
}


/* Sous 480px, le libellé "Allumer/Éteindre" fait déborder l'en-tête (mesuré le
   18/09 : scrollWidth 461 vs 390) — masqué visuellement (toujours lu au lecteur
   d'écran via aria-label sur le bouton), la piste seule suffit. */
@media (max-width:480px){
  .ap-interrupteur [data-ap-interrupteur-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ==========================================================================
   4. EN-TÊTE, MÉGA-MENU, DRAPEAU DEVIS — procédé 2
   ========================================================================== */
.ap-entete{
  position:sticky;top:0;z-index:40;background:var(--fond);
  border-bottom:1px solid var(--filet);
}
.ap-entete-barre{display:flex;align-items:center;gap:24px;padding-block:14px;position:relative}
.ap-logo{display:flex;align-items:center;gap:10px;flex:none}
.ap-logo svg{width:34px;height:34px}
.ap-logo .tube{fill:none;stroke:var(--sourde);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}


.ap-logo-texte{font-family:var(--police-boitier);font-size:19px;line-height:1}
.ap-logo-texte small{display:block;font-family:var(--police-lecture);font-size:10.5px;font-weight:500;color:var(--sourde);letter-spacing:.03em;white-space:nowrap}
/* Sous 480px, le sous-titre ("Enseignes · Signalétique · Vitrines") est la ligne
   la plus large de l'en-tête et fait déborder à lui seul (mesuré le 18/09 : encore
   408 vs 390 une fois le libellé de l'interrupteur masqué) ; le pictogramme + le
   mot "ART PIRAMIDA" suffisent à l'identification au premier écran. */
@media (max-width:480px){
  .ap-logo-texte small{display:none}
  .ap-entete-barre{gap:12px}
  /* le drapeau devis déborde (mesuré 479 px pour 390) : sur mobile, la barre d'actions du bas le porte déjà */
  .ap-entete-droite .ap-drapeau{display:none}
}

.ap-nav-primaire{display:flex;align-items:center;gap:20px;flex:1;list-style:none}
.ap-nav-primaire > li{position:relative}
.ap-nav-primaire > li > a,.ap-nav-primaire > li > button{font-size:14.5px;font-weight:500;padding:8px 4px;display:inline-flex;align-items:center;gap:4px}

.ap-mega{
  position:absolute;top:100%;left:0;min-width:640px;
  background:var(--plaque);border:1px solid var(--filet);
  box-shadow:0 18px 32px -20px rgba(0,0,0,.35);
  display:none;grid-template-columns:220px 1fr;gap:0;
  padding:20px;z-index:50;
}
li.ap-a-mega:hover .ap-mega,li.ap-a-mega:focus-within .ap-mega{display:grid}
.ap-mega-photo{position:relative}
.ap-mega-sous{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;padding-left:20px;border-left:1px solid var(--filet)}
.ap-mega-sous a{font-size:14px;padding:6px 0;display:block;color:var(--encre)}
.ap-mega-sous a:hover{color:var(--accent)}

.ap-entete-droite{display:flex;align-items:center;gap:14px;margin-left:auto}

.ap-drapeau{
  position:relative;background:var(--accent);color:var(--accent-ink);
  font-family:var(--police-boitier);font-size:14px;
  padding:10px 20px 10px 26px;white-space:nowrap;
}
.ap-drapeau::before{
  content:"";position:absolute;left:0;top:50%;width:16px;height:2px;
  background:var(--sourde);transform:translateY(-50%);
}



.ap-burger{display:none}
@media (max-width:960px){
  .ap-nav-primaire{display:none}
  .ap-burger{display:inline-flex}
  .ap-mega{position:static;min-width:0;display:none;grid-template-columns:1fr;border:0;box-shadow:none}
  .ap-nav-primaire.ap-ouvert{
    display:flex;flex-direction:column;position:fixed;inset:0;top:64px;
    background:var(--fond);padding:20px;overflow:auto;gap:0;z-index:39;
  }
  .ap-nav-primaire.ap-ouvert li.ap-a-mega .ap-mega{display:none}
  .ap-nav-primaire.ap-ouvert li.ap-a-mega.ap-ouvert .ap-mega{display:block}
}

/* barre mobile fixe, 2 entrées — pas le même bloc capture partout, c'est un contrôle de nav */
.ap-barre-mobile{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:41;
  border-top:1px solid var(--filet);background:var(--plaque);
}
.ap-barre-mobile ul{display:grid;grid-template-columns:1fr 1fr;list-style:none}
.ap-barre-mobile a{display:block;text-align:center;padding:12px 8px;font-size:13px;font-weight:500}
.ap-barre-mobile li:first-child a{background:var(--accent);color:var(--accent-ink)}
@media (max-width:640px){.ap-barre-mobile{display:block}body{padding-bottom:52px}}

/* ==========================================================================
   5. TRAITS DE COUPE — procédé 3
   ========================================================================== */
.ap-photo{position:relative;background:var(--plaque);overflow:hidden}
.ap-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ap-photo::before,.ap-photo::after,.ap-photo .coin-b,.ap-photo .coin-g{
  content:"";position:absolute;width:10px;height:10px;pointer-events:none;
}
.ap-repere{position:absolute;width:10px;height:10px;pointer-events:none}
.ap-repere::before,.ap-repere::after{content:"";position:absolute;background:var(--filet)}
.ap-repere::before{width:10px;height:1.5px;top:0;left:0}
.ap-repere::after{width:1.5px;height:10px;top:0;left:0}
.ap-photo:hover .ap-repere::before,.ap-photo:hover .ap-repere::after{background:var(--sourde)}
.ap-repere.cd{top:4px;left:4px}
.ap-repere.ch{top:4px;right:4px;transform:scaleX(-1)}
.ap-repere.bg{bottom:4px;left:4px;transform:scaleY(-1)}
.ap-repere.bd{bottom:4px;right:4px;transform:scale(-1)}
.ap-photo-cote{position:absolute;bottom:6px;left:16px;font-size:12px;color:var(--sourde);background:color-mix(in srgb, var(--plaque) 85%, transparent);padding:1px 6px}

/* replis d'image manquante — jamais de cadre "Photo à poser" visible */
.ap-photo--vide{
  background:
    repeating-linear-gradient(135deg,var(--filet) 0 1px,transparent 1px 14px),
    var(--plaque);
  aspect-ratio:4/3;
}
.ap-photo--vide.paysage{aspect-ratio:16/9}
.ap-photo--vide.carre{aspect-ratio:1/1}
/* D4 (18/09) : plus aucun gabarit n'émet .ap-photo--vide sur une carte ou un
   hero — un sujet sans photo n'affiche RIEN (ap_photo() se tait) plutôt qu'un
   cadre hachuré "photo à poser". La classe reste disponible pour un futur
   composant qui en aurait explicitement besoin, mais n'est plus posée nulle
   part dans les gabarits publics. */
.ap-credit{font-size:12px;color:var(--sourde);margin-top:4px}

/* Photo auteur — remplace le disque hachuré vide (D4). */
.ap-photo-auteur{border-radius:999px;object-fit:cover;display:block;flex:none}

/* ==========================================================================
   6. BANDES ALTERNÉES
   ========================================================================== */
.ap-bande{padding-block:56px}
.ap-bande--opale{background:var(--fond)}
.ap-bande--plaque{background:var(--plaque)}
.ap-bande--rue{background:var(--rue);color:var(--lampe-fixe)}
.ap-bande--rue .ap-sourde{color:#A89DA7}
.ap-bande--accent{background:var(--accent);color:var(--accent-ink)}
.ap-bande-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;flex-wrap:wrap}

/* ==========================================================================
   7. TUILES / CARTES
   ========================================================================== */
.ap-grille{display:grid;gap:var(--gouttiere)}
.ap-grille--3{grid-template-columns:repeat(3,1fr)}
.ap-grille--4{grid-template-columns:repeat(4,1fr)}
.ap-grille--6{grid-template-columns:repeat(6,1fr)}
@media (max-width:960px){.ap-grille--3,.ap-grille--4{grid-template-columns:repeat(2,1fr)}.ap-grille--6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.ap-grille--3,.ap-grille--4,.ap-grille--6{grid-template-columns:1fr 1fr}}

.ap-carte{display:block;background:var(--plaque);border:1px solid var(--filet)}
.ap-carte-corps{padding:14px 16px}
.ap-carte h3{font-size:16px;margin-bottom:4px}
.ap-carte .ap-meta{margin-bottom:0}
.ap-pastille{
  position:absolute;top:10px;right:10px;background:var(--accent);color:var(--accent-ink);
  font-family:var(--police-boitier);font-size:13px;padding:3px 10px;
}

/* tuiles de très gros chiffres (bande rue) — habille [sbs_jauges] */
.ap-bande--rue sbs-jauges{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ap-bande--rue sbs-jauge{display:block;border-left:2px solid var(--filet);padding-left:16px}
.ap-bande--rue .sbs_jauge_libelle{display:block;font-size:14px;color:#A89DA7;margin-bottom:6px}
.ap-bande--rue .sbs_jauge_valeur{font-family:var(--police-boitier);font-size:clamp(2.5rem,4vw,5.5rem);color:var(--neon-fixe);text-shadow:0 0 6px currentColor,0 0 18px rgba(255,91,46,.5)}
.ap-bande--rue .sbs_jauge_unite{font-size:16px;color:#A89DA7;margin-left:2px}
.ap-bande--rue .sbs_source{display:block;margin-top:8px;font-size:12px;color:#7A6F79}
@media (max-width:960px){.ap-bande--rue sbs-jauges{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ap-bande--rue sbs-jauges{grid-template-columns:1fr}}

/* ==========================================================================
   8. HERO ACCUEIL — façade jour/nuit + module devis + colonne actu
   ========================================================================== */
.ap-hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;color:var(--lampe-fixe);background:var(--rue)}
.ap-hero-media{position:absolute;inset:0;z-index:0}
.ap-hero-media picture,.ap-hero-media img{width:100%;height:100%;object-fit:cover}
.ap-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,12,15,.88),rgba(17,12,15,.15) 55%)}
/* D4 : sans photo jour/nuit réglée, le bloc média n'est PAS rendu (front-page.php) — le
   hero se replie sur l'aplat --rue et une hauteur naturelle, plus de 400px de noir mobile. */
.ap-hero--sans-media{min-height:auto;padding-block:64px}
@media (max-width:640px){.ap-hero--sans-media{padding-top:40px}}
.ap-hero-corps{position:relative;z-index:1;width:100%;padding-block:48px}
.ap-hero-grille{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end}
.ap-hero h1{color:var(--lampe-fixe)}
.ap-hero .ap-chapo{color:#D8CFD6}

.ap-devis-module{
  margin-top:22px;background:var(--plaque);color:var(--encre);
  border:1px solid var(--filet);padding:18px;max-width:520px;
}
.ap-devis-module .ap-etape-mini{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ap-devis-module .picto-tuile{
  flex:1 1 30%;border:1px solid var(--filet);padding:10px 6px;text-align:center;
  font-size:12.5px;background:var(--fond);
  display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
}
/* Défaut 3 (verdict v2) : ap_picto() émet des tracés OUVERTS conçus pour être
   CONTOURNÉS (stroke), jamais remplis — sans cette règle, le SVG retombe sur
   son fill noir par défaut du navigateur : aplats noirs illisibles en sombre,
   et invisible pour les tracés sans aire fermée (Totem, Affichage dynamique).
   Même trait 1,5px que page-devis.php / ap_aside_devis(), 40px ici (hero). */
.ap-devis-module .picto-tuile .picto{width:40px;height:40px;stroke:var(--sourde);fill:none;stroke-width:1.5}
.ap-devis-module .picto-tuile.est-choisi{border-color:var(--accent);color:var(--accent)}
.ap-devis-module .picto-tuile.est-choisi .picto{stroke:var(--accent)}
.ap-devis-module .picto-tuile:hover .picto{stroke:var(--accent)}
.ap-devis-module input[type="text"]{width:100%;border:1px solid var(--filet);background:var(--fond);padding:10px 12px;margin-bottom:10px}
.ap-bouton{display:inline-block;background:var(--accent);color:var(--accent-ink);font-family:var(--police-boitier);font-size:15px;padding:12px 22px;border:0}
.ap-bouton:hover{background:var(--accent-survol)}
.ap-bouton--fantome{background:transparent;color:var(--encre);border:1px solid var(--filet)}

.ap-actu-colonne{display:none}
@media (min-width:1100px){
  .ap-actu-colonne{display:block;background:color-mix(in srgb, var(--rue) 88%, transparent);border:1px solid #2A2129;padding:18px}
  .ap-actu-colonne h2{font-size:16px;color:#A89DA7;margin-bottom:12px;font-family:var(--police-lecture);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
  .ap-actu-item{display:flex;gap:10px;padding-block:10px;border-top:1px solid #2A2129}
  .ap-actu-item:first-of-type{border-top:0}
  .ap-actu-item img{width:64px;height:64px;object-fit:cover;flex:none}
  .ap-actu-item time{display:block;font-size:11px;color:#8B808A;margin-bottom:2px}
  .ap-actu-item a{font-size:13.5px;line-height:1.3}
}
@media (max-width:1099px){.ap-hero-grille{grid-template-columns:1fr}}
/* min-height:auto cassait .ap-hero-media (position:absolute;inset:0) : sans
   hauteur définie sur .ap-hero, le calque sombre s'effondrait à ~292px au lieu
   de couvrir tout le hero (mesuré le 18/09 : H1 hors du calque --rue, donc
   texte quasi blanc sur fond opale — illisible). On garde le min-height du
   bureau (78vh) qui donne à l'absolu de quoi se caler ; padding-top:40vh reste
   UNIQUEMENT quand il y a un média à caler dessous (pas .ap-hero--sans-media). */
@media (max-width:640px){.ap-hero:not(.ap-hero--sans-media){padding-top:40vh}}

/* D6 (R-0580) : photo de bandeau des pages famille/ville/produit, plafonnée à
   420px avec la même respiration + relief que l'image d'article. */
.ap-photo.produit-hero{max-height:420px;margin-block:20px 0;box-shadow:0 24px 44px -30px rgba(17,12,15,.4)}
.ap-photo.produit-hero img{height:420px;object-fit:cover}

@media (max-width:640px){.ap-photo.produit-hero{max-height:220px}.ap-photo.produit-hero img{height:220px}}

/* ==========================================================================
   9. BANDEAU COTÉ — procédé 4
   ========================================================================== */
.ap-bandeau-cote{background:var(--plaque);border:1px solid var(--filet);padding:28px 24px 22px;position:relative;margin-block:0}
.ap-bandeau-cote .ref-bat{display:block;font-size:12px;letter-spacing:.05em;color:var(--sourde);text-transform:uppercase;margin-bottom:8px}
.ap-bandeau-cote h1{margin-bottom:6px}
.ap-cote-ligne{position:absolute;font-size:12px;color:var(--sourde);display:flex;align-items:center;gap:4px}
.ap-cote-ligne.haut{top:10px;left:24px}
.ap-cote-ligne.gauche{bottom:16px;left:-6px;transform:rotate(-90deg);transform-origin:left bottom}
@media (max-width:640px){.ap-cote-ligne{display:none}}

/* ==========================================================================
   10. FICHE BAT PRODUIT — procédé 5 (6 cases, jamais un tableau)
   ========================================================================== */
.ap-fiche-bat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filet);border:1px solid var(--filet)}
.ap-fiche-bat > div{background:var(--plaque);padding:16px}
.ap-fiche-bat .picto{width:28px;height:28px;stroke:var(--sourde);fill:none;stroke-width:1.5;margin-bottom:8px}
.ap-fiche-bat .libelle{display:block;font-size:12px;color:var(--sourde);text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
.ap-fiche-bat .valeur{font-family:var(--police-boitier);font-size:17px}
.ap-fiche-bat .reglette{position:relative;height:6px;background:var(--fond);margin-top:6px}
.ap-fiche-bat .reglette span{position:absolute;top:0;bottom:0;left:0;background:var(--accent)}
.ap-fiche-bat-median{display:block;margin-top:4px;font-size:12px;color:var(--sourde)}
@media (max-width:760px){.ap-fiche-bat{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   11. RÉGLETTE TLPE — procédé 6
   ========================================================================== */
.ap-tlpe{background:var(--plaque);border:1px solid var(--filet);padding:24px}
.ap-tlpe-facade{display:flex;justify-content:center;padding:20px 0}
.ap-tlpe-facade svg{width:100%;max-width:680px;height:auto}
.ap-tlpe-facade .facade{fill:none;stroke:var(--sourde);stroke-width:2}
.ap-tlpe-facade .vitrine,.ap-tlpe-facade .porte{fill:none;stroke:var(--sourde);stroke-width:1.5}
.ap-tlpe-facade .bandeau{fill:var(--fond);stroke:var(--filet)}
.ap-tlpe-facade .enseigne{fill:var(--accent);transition:width .15s ease,x .15s ease}

.ap-tlpe-reglette{position:relative;height:34px;background:var(--fond);border:1px solid var(--filet);margin-block:8px}
.ap-tlpe-zone{position:absolute;top:0;bottom:0;border-right:1px solid var(--fond);background:color-mix(in srgb, var(--argon) 18%, transparent);display:flex;align-items:center;justify-content:flex-end;padding-right:4px;font-size:11px;color:var(--argon);overflow:hidden;white-space:nowrap}
.ap-tlpe-zone.actif{background:var(--argon);color:#fff}
.ap-tlpe-curseur{position:absolute;top:-6px;width:2px;height:46px;background:var(--encre)}
.ap-tlpe-echelle{position:relative;height:16px;margin-bottom:16px}
.ap-tlpe-seuil{position:absolute;transform:translateX(-50%);font-size:11px;color:var(--sourde)}
.ap-tlpe-champs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.ap-tlpe-champs label{display:block;font-size:13px;color:var(--sourde);margin-bottom:6px}
.ap-tlpe-champs input,.ap-tlpe-champs select{width:100%;border:1px solid var(--filet);background:var(--fond);padding:10px 12px}
.ap-tlpe-resultat{text-align:center;padding-block:18px}
.ap-tlpe-resultat .montant{font-family:var(--police-tube);font-size:clamp(2.5rem,5vw,4rem);color:var(--accent);text-shadow:var(--ombre-halo)}
.ap-tlpe-note{font-size:13px;color:var(--argon);margin-top:6px}
.ap-tlpe-detail{border-top:1px solid var(--filet);margin-top:16px;padding-top:16px}
.ap-tlpe-non-configure{padding:20px;text-align:center;color:var(--sourde);border:1px dashed var(--filet)}
@media (max-width:640px){.ap-tlpe-champs{grid-template-columns:1fr}.ap-tlpe-zone{font-size:9.5px}}

/* ==========================================================================
   12. TUBE 5 SEGMENTS — procédé 7
   ========================================================================== */
.ap-tube{display:flex;gap:6px;margin-block:20px}
.ap-tube-etape{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.ap-tube-etape .segment{width:100%;height:8px;background:var(--filet);border-radius:999px}
.ap-tube-etape em{font-style:normal;font-size:11px;color:var(--sourde);font-family:var(--police-boitier)}
.ap-tube-etape.fait .segment{background:var(--accent)}
.ap-tube-etape.fait em{color:var(--accent)}


.ap-tube-mini{display:flex;gap:4px;margin-block:10px}
.ap-tube-mini .segment{flex:1;height:4px;background:var(--filet)}
.ap-tube-mini .segment.fait{background:var(--accent)}
.ap-minutes-restantes{font-size:12.5px;color:var(--sourde);margin:0 0 14px}
.ap-minutes-restantes span{font-family:var(--police-boitier);color:var(--encre)}

/* ==========================================================================
   13. PARCOURS DEVIS
   ========================================================================== */
/* D9 : plus de min-height:100vh — c'est lui qui créait ~450px de vide sous le
   formulaire quand le contenu est plus court que l'écran (le pied remonte au
   naturel maintenant). */
.ap-devis-plein{background:var(--fond)}
.ap-devis-entete{display:flex;justify-content:space-between;align-items:center;padding-block:16px;border-bottom:1px solid var(--filet)}
.ap-devis-grille{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start;padding-block:40px}
.ap-etape{display:none}
.ap-etape.est-active{display:block}
.ap-etape h2{margin-bottom:4px}
.ap-etape h3{font-size:15px;margin-top:24px;margin-bottom:0;color:var(--sourde)}
.ap-tuiles-choix{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.ap-tuiles-choix button{min-height:88px;border:1px solid var(--filet);background:var(--plaque);padding:12px;text-align:center;font-size:13.5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.ap-tuiles-choix button .picto{width:26px;height:26px;stroke:var(--sourde);fill:none;stroke-width:1.5}
.ap-tuiles-choix button.est-choisi{border-color:var(--accent);color:var(--accent)}
.ap-tuiles-choix button.est-choisi .picto{stroke:var(--accent)}
.ap-reassurance{background:var(--plaque);border:1px solid var(--filet);padding:20px}
.ap-reassurance li{list-style:none;padding-left:20px;position:relative;margin-bottom:10px;font-size:14px}
.ap-reassurance li::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;background:var(--accent)}
.ap-devis-nav{display:flex;justify-content:space-between;margin-top:24px}
@media (max-width:960px){.ap-devis-grille{grid-template-columns:1fr}.ap-tuiles-choix{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   13b. ASIDE DEVIS — composant unique réutilisé dans les gabarits de contenu
   (D5/R-0581 : jamais une colonne vide, jamais un CTA texte+bouton sans valeur).
   ========================================================================== */
.ap-aside-devis{background:var(--plaque);border:1px solid var(--filet);padding:20px}
.ap-aside-devis h2{font-size:19px;margin-bottom:2px}
.ap-aside-devis form{margin-top:14px}
.ap-aside-devis .ap-etape-mini{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.ap-aside-devis .picto-tuile{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid var(--filet);padding:10px 6px;text-align:center;font-size:12px;background:var(--fond);cursor:pointer}
.ap-aside-devis .picto-tuile .picto{width:20px;height:20px;stroke:var(--sourde);fill:none;stroke-width:1.5}
.ap-aside-devis .picto-tuile.est-choisi{border-color:var(--accent);color:var(--accent)}
.ap-aside-devis .picto-tuile.est-choisi .picto{stroke:var(--accent)}
.ap-aside-devis input[type="text"]{width:100%;border:1px solid var(--filet);background:var(--fond);padding:10px 12px;margin-bottom:10px}

.ap-avec-aside{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
@media (min-width:1100px){
  .ap-avec-aside{grid-template-columns:1fr 320px}
  .ap-avec-aside > .ap-aside-devis{position:sticky;top:90px}
}
/* variante "bande pleine largeur" (archive.php, sous le H1 — D5/D11) */
.ap-aside-devis--bande{max-width:640px}

/* ==========================================================================
   14. INFOGRAPHIES DE CONTENU — checklist, essentiel, sources
   ========================================================================== */
/* R-0605 : une infographie, pas deux cartes pleines de texte — 2 colonnes dès
   la tablette, pastille numérotée plus grande, moins "liste", plus "tableau
   de bord" scannable. */
.sb-checklist{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0;padding:0}
@media (max-width:640px){.sb-checklist{grid-template-columns:1fr}}
.sb-check{display:flex;align-items:flex-start;gap:12px;background:var(--plaque);border:1px solid var(--filet);padding:12px 14px}
.sb-check::before{
  counter-increment:sb-check;content:counter(sb-check);
  flex:none;width:26px;height:26px;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-family:var(--police-boitier);font-size:13px;
}
.sb-checklist{counter-reset:sb-check}

.sb-essentiel{background:var(--plaque);border-left:3px solid var(--accent);padding:16px 18px;margin:24px 0}
.sb-essentiel::before{content:"L'essentiel";display:block;font-family:var(--police-boitier);font-size:13px;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}

.ap-bon-a-savoir{background:var(--plaque);border-left:3px solid var(--argon);padding:16px 18px;margin:20px 0}
.ap-bon-a-savoir::before{content:"Bon à savoir";display:block;font-size:13px;color:var(--argon);font-weight:700;margin-bottom:6px}
.ap-a-eviter{background:var(--plaque);border-left:3px solid var(--accent);padding:16px 18px;margin:20px 0}
.ap-a-eviter::before{content:"À éviter";display:block;font-size:13px;color:var(--accent);font-weight:700;margin-bottom:6px}

.sb-sources{background:var(--plaque);border-left:3px solid var(--argon);padding:18px 20px;margin:32px 0}
.sb-sources > strong{display:block;font-family:var(--police-boitier);font-size:15px;margin-bottom:10px}
.sb-sources ol{list-style:decimal;padding-left:20px;display:grid;gap:8px}
.sb-sources li{font-size:14px}
.sb-sources .organisme{font-weight:500}
.sb-sources .consulte{display:inline-block;font-size:11px;color:var(--sourde);border:1px solid var(--filet);padding:1px 6px;margin-left:6px}

/* étapes en frise verticale — habille [sbs_frise] */
sbs-frise{display:block;margin:24px 0}
.sbs_frise_titre{display:block;font-family:var(--police-boitier);font-size:16px;margin-bottom:10px}
sbs-etape{display:flex;gap:14px;padding-left:4px;border-left:2px solid var(--filet);padding-bottom:16px;padding-left:18px;position:relative}
sbs-etape::before{content:"";position:absolute;left:-6px;top:2px;width:10px;height:10px;border-radius:999px;background:var(--accent)}
.sbs_etape_date{display:block;font-size:12px;color:var(--sourde)}
.sbs_etape_titre{display:block;font-family:var(--police-boitier);font-size:15px;margin-block:2px}
.sbs_etape_desc{color:var(--sourde);font-size:14px}

/* fiche-lieu, tarifs, jauges génériques dans l'article */
sbs-lieu{display:block;background:var(--plaque);border:1px solid var(--filet);padding:16px;margin:20px 0}
.sbs_lieu_nom{display:block;font-family:var(--police-boitier);font-size:16px;margin-bottom:4px}
.sbs_lieu_adresse,.sbs_lieu_acces{display:block;font-size:14px;color:var(--sourde);font-style:normal}
.sbs_lieu_carte{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--argon);font-size:13px}
.sbs_lieu_carte svg{width:16px;height:16px;fill:currentColor}

sbs-tarifs{display:block;background:var(--plaque);border:1px solid var(--filet);padding:16px;margin:20px 0}
.sbs_tarifs_titre{display:block;font-family:var(--police-boitier);font-size:16px;margin-bottom:10px}
sbs-tarif{display:block;margin-bottom:10px}
.sbs_tarif_libelle{display:block;font-size:13.5px;margin-bottom:4px}
/* D14 : le <meter> natif rendrait une piste blanche + un remplissage vert
   quel que soit le mode — c'est lui l'éblouissement en sombre. Restylé
   intégralement ici (le socle n'émet que l'élément neutre, la couleur est
   100% côté thème) : piste = --filet (jamais blanche), remplissage = --argon
   (une donnée, jamais le vert "conforme"). Le texte du <meter> (déjà posé
   par le socle : "18,90 €/m²") reste la valeur affichée au bout de la barre. */
.sbs_tarif_barre{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:100%;height:22px;border:1px solid var(--filet);background:var(--filet);
  color:var(--encre);font-size:12.5px;font-family:var(--police-lecture);
}
.sbs_tarif_barre::-webkit-meter-bar{background:var(--filet);border:none}
.sbs_tarif_barre::-webkit-meter-optimum-value,
.sbs_tarif_barre::-webkit-meter-suboptimum-value,
.sbs_tarif_barre::-webkit-meter-even-less-good-value{background:var(--argon)}
.sbs_tarif_barre::-moz-meter-bar{background:var(--argon)}
.sbs_tarifs_notes{display:block;margin-top:8px;color:var(--sourde)}

sbs-jauges{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
sbs-jauge{background:var(--plaque);border:1px solid var(--filet);padding:14px;text-align:center}
.sbs_jauge_libelle{display:block;font-size:12.5px;color:var(--sourde);margin-bottom:6px}
.sbs_jauge_valeur{font-family:var(--police-boitier);font-size:1.9rem;color:var(--accent)}
.sbs_jauge_unite{font-size:13px;color:var(--sourde);margin-left:2px}
@media (max-width:640px){sbs-jauges{grid-template-columns:1fr 1fr}}

.sbs_source{display:block;margin-top:10px;font-size:12px;color:var(--sourde)}

/* défilement mobile — le socle enveloppe déjà le <table> */
.sbs_tableau{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0}
.sbs_tableau table{border-collapse:collapse;width:100%;min-width:480px}
.sbs_tableau th,.sbs_tableau td{border:1px solid var(--filet);padding:8px 10px;font-size:14px;text-align:left}

/* ==========================================================================
   15. ARTICLE
   ========================================================================== */
.ap-article-entete{padding-block:32px 0}
.ap-article-cat{display:inline-block;font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.ap-auteur-ligne{display:flex;align-items:center;gap:10px;margin-block:16px}
.ap-auteur-ligne .ap-photo-auteur{width:48px;height:48px}
.ap-auteur-ligne a{font-weight:500}
.ap-auteur-ligne .ap-meta{margin:0}

/* D6/D9 (R-0580) : image à la une plafonnée, avec une vraie respiration et un
   léger relief — jamais collée au texte qui suit, jamais plein écran. */
.ap-article-photo{max-height:360px;margin-block:20px 0;box-shadow:0 24px 44px -30px rgba(17,12,15,.4)}
.ap-article-photo img{height:360px;object-fit:cover}

@media (max-width:640px){.ap-article-photo{max-height:220px}.ap-article-photo img{height:220px}}

/* D5/R-0613 : 3 colonnes ≥1100px — sommaire / texte / aside devis collante.
   Sous 1100px, tout empile en 1 colonne (jamais de grille à colonne creuse). */
.ap-article-corps{display:grid;grid-template-columns:1fr;gap:32px;padding-block:32px 60px}
.ap-sommaire{font-size:13.5px}
.ap-sommaire strong{display:block;margin-bottom:8px;font-family:var(--police-boitier);font-size:14px}
.ap-sommaire ol{list-style:none;display:grid;gap:6px}
.ap-sommaire a{color:var(--sourde)}
.ap-sommaire a:hover{color:var(--accent)}
.ap-contenu{max-width:68ch}
.ap-contenu h2{margin-top:2em;padding-top:.6em;border-top:1px solid var(--filet)}
.ap-contenu img{margin-block:8px}
/* R-0608 : liens de corps de texte très visibles, dans les deux modes. */
.ap-contenu a:not(.ap-bouton){color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.ap-contenu a:not(.ap-bouton):hover{text-decoration-thickness:3px}

.ap-boite-auteur{display:flex;gap:16px;background:var(--plaque);border:1px solid var(--filet);padding:18px;margin-top:40px}
.ap-boite-auteur .ap-photo-auteur{width:96px;height:96px}
.ap-boite-auteur h3{margin-bottom:4px}

@media (min-width:1100px){
  .ap-article-corps{grid-template-columns:220px 1fr 300px;align-items:start}
  /* pas de sommaire (article sans H2) : la colonne ne s'ouvre pas dans le PHP,
     la grille se resserre à 2 colonnes — jamais de colonne vide (R-0613) */
  .ap-article-corps.ap-sans-sommaire{grid-template-columns:1fr 300px}
  .ap-article-corps > .ap-sommaire,.ap-article-corps > .ap-aside-devis{position:sticky;top:90px}
}

/* ==========================================================================
   16. PIED DE PAGE
   ========================================================================== */
.ap-pied{background:var(--rue);color:var(--lampe-fixe);padding-block:56px 24px}
.ap-pied a{color:#D8CFD6}
.ap-pied a:hover{color:var(--lampe-fixe)}
.ap-pied-grille{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-bottom:32px}
.ap-pied-grille strong{display:block;font-family:var(--police-boitier);font-size:14px;margin-bottom:12px;color:var(--lampe-fixe)}
.ap-pied-grille ul{list-style:none;display:grid;gap:8px;font-size:13.5px}
.ap-pied-bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid #2A2129;padding-top:20px;font-size:12.5px;color:#8B808A}
@media (max-width:960px){.ap-pied-grille{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.ap-pied-grille{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   17. FORMULAIRES (messages, socle)
   ========================================================================== */
.ap-form{display:grid;gap:14px;max-width:520px}
.ap-form label{display:block;font-size:13px;color:var(--sourde);margin-bottom:6px}
.ap-form input,.ap-form textarea,.ap-form select{width:100%;border:1px solid var(--filet);background:var(--plaque);padding:11px 12px}
.ap-form .honeypot{position:absolute;left:-9999px}
.ap-confirmation{background:var(--plaque);border-left:3px solid var(--conforme);padding:16px 18px;margin-bottom:20px}

/* ==========================================================================
   18. PAGES LÉGALES — aucune image
   ========================================================================== */
.ap-legal .ap-contenu{max-width:72ch;margin-inline:auto}
.ap-legal img{display:none}

/* ==========================================================================
   19. VILLE — carte
   ========================================================================== */
.ap-carte-ville{height:360px;background:var(--plaque);border:1px solid var(--filet)}
.ap-carte-absente{display:flex;align-items:center;justify-content:center;height:360px;background:var(--plaque);border:1px dashed var(--filet);color:var(--sourde);font-size:14px;text-align:center;padding:20px}
.leaflet-container{background:var(--plaque) !important}
/* Défaut 5 : tuiles OSM claires assombries par filtre en mode nuit (aucune
   dépendance à un fournisseur de tuiles sombres tiers). */
.ap-carte-sombre .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.85)}
.ap-carte-sombre .leaflet-marker-icon,.ap-carte-sombre .leaflet-popup{filter:invert(1) hue-rotate(180deg)}

/* ==========================================================================
   20. UTILITAIRES
   ========================================================================== */
.ap-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ap-404{padding-block:100px;text-align:center}
.ap-404 .grand{font-family:var(--police-boitier);font-size:clamp(4rem,10vw,8rem);color:var(--filet);line-height:1}

/* Compatibilité des articles déjà publiés (18/09) : une puce numérotée écrite dans le texte
   (span.sb-check__num) remplace le compteur du thème ; une liste de sources en ul se lit comme l'ol. */
.sb-check:has(.sb-check__num)::before{content:none}
.sb-check__num{flex:none;display:inline-grid;place-items:center;min-width:28px;height:28px;font-family:var(--police-boitier);font-size:14px;color:var(--accent);border:1px solid var(--accent)}
.sb-check__titre{font-weight:600;margin:0 0 4px}
.sb-check__ligne,.sb-check__pourquoi,.sb-check__ou{margin:2px 0;font-size:15px}
.sb-check__ligne > span{color:var(--sourde)}
.sb-sources ul{list-style:decimal;padding-left:20px;display:grid;gap:8px}
.sb-sources:not(:has(> strong))::before{content:"Sources consultées";display:block;font-family:var(--police-boitier);font-size:15px;font-weight:600;margin-bottom:10px}

.ap-mention-editeur{margin:32px 0 0;padding-top:14px;border-top:1px solid var(--filet);font-size:13px;color:var(--sourde)}

/* D21 : les listes dans un encadré (l'essentiel, à éviter, bon à savoir) sortaient
   à gauche du cadre en mobile — le reset global (ul,ol{padding:0}) retire le seul
   espace qui contenait la puce native. */
.sb-essentiel ul,.sb-essentiel ol,.ap-a-eviter ul,.ap-a-eviter ol,.ap-bon-a-savoir ul,.ap-bon-a-savoir ol{
  padding-left:20px;margin:10px 0 0;
}

/* D11 : grille de rubrique — 1ʳᵉ carte en grand (16:9 pleine largeur), puis
   4 colonnes, images à hauteur égale (aspect-ratio, jamais 3 hauteurs différentes). */
.ap-grille--rubrique{grid-template-columns:repeat(4,1fr)}
.ap-grille--rubrique .ap-carte--grande{grid-column:1/-1}
.ap-grille--rubrique .ap-carte--grande .ap-photo{aspect-ratio:21/9}
.ap-grille--rubrique .ap-photo{aspect-ratio:16/9}
@media (max-width:960px){.ap-grille--rubrique{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.ap-grille--rubrique{grid-template-columns:1fr}.ap-grille--rubrique .ap-carte--grande .ap-photo{aspect-ratio:16/9}}
/* « À lire aussi » : nombre de colonnes selon le nombre d'articles, jamais plus large que l'écran (débordement 456 px sur 390, 18/09) */
.ap-grille--lies{grid-template-columns:repeat(var(--ap-n,3),minmax(0,1fr))}
@media (max-width:600px){.ap-grille--lies{grid-template-columns:minmax(0,1fr)}}

/* Revue éditoriale et visuelle — 18/09/2026 */
:root{color-scheme:light;--gouttiere:24px}
h1,h2,h3{font-weight:400;letter-spacing:0}
h1{font-size:clamp(2.2rem,4.3vw,3.65rem);line-height:1.1}
h2{font-size:clamp(1.7rem,2.3vw,2.15rem);line-height:1.18}
h3{line-height:1.3}
.ap-entete{background:#fbf9fa;color:#17121a}
.ap-accueil-hero{padding:64px 0;background:#f4f0f2;border-bottom:1px solid var(--filet)}
.ap-accueil-grille{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ap-kicker{display:block;color:var(--accent);font-size:12px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
.ap-accueil-hero h1{max-width:600px;margin-bottom:22px}
.ap-accueil-hero .ap-chapo{font-size:19px;line-height:1.6}
.ap-accueil-hero .ap-devis-module{background:#fff;color:var(--encre);border:1px solid var(--filet);padding:24px;margin-block:24px 12px;max-width:none}
.ap-accueil-hero label{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.ap-accueil-hero input,.ap-accueil-hero select{width:100%;padding:12px;border:1px solid var(--filet);background:#fbf9fa;margin-bottom:16px}
.ap-accueil-hero .ap-bouton{width:100%;justify-content:center}
.ap-accueil-photo{position:relative;align-self:stretch;min-height:540px;background:#ddd5da;overflow:hidden}
.ap-accueil-photo>img{width:100%;height:100%;position:absolute;object-fit:cover}
.ap-accueil-photo>div{position:absolute;inset:auto 20px 20px;padding:24px;background:rgba(255,255,255,.95)}
.ap-accueil-photo span{font-size:12px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.ap-accueil-photo p{font-size:23px;line-height:1.3;margin:8px 0 0;font-family:var(--police-boitier)}
.ap-carte .ap-photo{margin:0}
.ap-actualites .ap-photo{aspect-ratio:16/10;overflow:hidden}
.ap-actualites .ap-photo img{width:100%;height:100%;object-fit:cover}
.ap-actualites .ap-carte{grid-column:auto!important}
.ap-commerce{min-height:110px;display:flex;flex-direction:column;justify-content:space-between}
.ap-commerce>span{color:var(--accent);font-size:24px}
.ap-bande{padding-block:52px}
.ap-article-entete{display:grid;grid-template-columns:180px minmax(0,1fr) 260px;gap:28px;padding-top:36px}
.ap-article-intro{grid-column:2;min-width:0}
.ap-article-intro h1{font-size:clamp(2.1rem,3.5vw,3.1rem)}
.ap-article-intro .ap-chapo{font-size:19px;line-height:1.55;margin-top:18px}
.ap-article-photo{margin-top:24px;max-height:340px}
.ap-article-photo img{height:340px;object-fit:cover}
.ap-article-corps{grid-template-columns:180px minmax(0,1fr) 260px;gap:28px}
.ap-contenu{min-width:0;width:100%;max-width:none;font-size:17.5px;line-height:1.8}
.ap-contenu h2{margin-top:1.5em;padding-top:1em;font-size:29px}
.ap-contenu h3{font-size:22px;margin:1.4em 0 .5em}
.ap-contenu>p{margin:0 0 1.1em}
.ap-contenu ul:not([class]),.ap-contenu ol:not([class]){padding-left:1.3em;margin:1em 0}
.ap-contenu li{padding-left:.2em;margin:.5em 0}
.ap-contenu figure{margin:28px 0}
.ap-contenu figure img{width:100%;height:auto}
.ap-contenu figcaption{font-size:13px;line-height:1.5;color:var(--sourde);padding-top:6px}
.ap-sommaire{border-top:3px solid var(--accent);padding-top:16px}
.ap-sommaire li{margin-bottom:10px;line-height:1.55}
.ap-sommaire a{display:block}
.ap-contenu h2[id]{scroll-margin-top:95px}
.ap-aside-devis{height:auto;max-height:none;overflow:visible}
.ap-aside-devis .picto-tuile{font-size:11px;min-width:0}
.ap-couts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0}
.ap-couts>div{padding:20px;background:#fff;border:1px solid var(--filet)}
.ap-couts>div:last-child{grid-column:1/-1}
.ap-couts span{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.08em}
.ap-couts h3{font-size:20px;margin:7px 0}
.ap-couts p{font-size:15px;line-height:1.6;margin:0}
.ap-repere-budget{padding:24px;background:#fff;border-left:4px solid var(--accent);margin:26px 0}
.ap-repere-budget strong{font-family:var(--police-boitier);font-size:21px}
.ap-repere-budget p{margin:10px 0 0}
.ap-faq-stockage details{border-bottom:1px solid var(--filet);padding:18px 0}
.ap-faq-stockage summary{font-weight:600;cursor:pointer;line-height:1.5}
.ap-faq-stockage p{margin:14px 0 0}
.ap-partenariat{font-size:12px;color:var(--sourde);border-bottom:1px solid var(--filet);padding-bottom:18px}
.sb-sources,.ap-sources-editoriales{font-size:13px;line-height:1.6;background:#fff;padding:22px;margin-top:30px;border-top:1px solid var(--filet)}
.sb-sources p{margin:8px 0 0}
.ap-sources-editoriales ul,.ap-sources-editoriales ol{display:block!important;list-style:disc!important;padding-left:20px!important}
.ap-sources-editoriales li{display:list-item!important;background:none!important;padding:3px!important;margin:4px 0!important;border:0!important}
.ap-sources-editoriales li::before{display:none!important}
.ap-sources-editoriales h2{font-size:21px;margin:0 0 16px;padding:0;border:0}
.sb-essentiel:has(>h2)::before{display:none}
.sb-essentiel>h2{margin-top:0;padding-top:0;border:0}
.ap-boite-auteur{margin-top:32px}
.ap-boite-auteur .ap-photo-auteur{flex:none;width:64px;height:64px;object-fit:cover;border-radius:50%}
.ap-boite-auteur p{font-size:14px;line-height:1.6;margin:0}
.ap-legal>.ap-conteneur{max-width:850px}
.ap-legal h1{font-size:42px}
.ap-avec-aside>.ap-contenu{max-width:760px}
.ap-avec-aside .ap-aside-devis{position:sticky;top:90px}
.ap-pied{background:#eae3e7;color:var(--encre)}
.ap-pied a,.ap-pied strong,.ap-pied-bas{color:var(--encre)}
.ap-pied-bas{border-color:#c9bec5}
.ap-tlpe-resultat{margin-top:18px}
.ap-tlpe-facade{min-height:0}
@media(min-width:1100px){.ap-article-corps.ap-sans-sommaire{grid-template-columns:180px minmax(0,1fr) 260px}.ap-article-corps.ap-sans-sommaire>.ap-contenu{grid-column:2}}
@media(max-height:760px){.ap-article-corps>.ap-aside-devis,.ap-avec-aside .ap-aside-devis{position:static}}
@media(max-width:1099px){
 .ap-accueil-grille{gap:32px}.ap-accueil-photo{min-height:480px}
 .ap-article-entete{display:block;max-width:800px}.ap-article-corps{display:block;max-width:800px}
 .ap-sommaire{margin-bottom:30px;padding:20px;background:#fff}.ap-article-corps>.ap-aside-devis{margin-top:36px;position:static}
 .ap-avec-aside>.ap-aside-devis{grid-row:1;position:static}
 .ap-avec-aside>.ap-aside-devis .ap-aside-tuiles{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
 .ap-accueil-hero{padding:32px 0}.ap-accueil-grille{grid-template-columns:1fr;gap:24px}
 .ap-accueil-photo{min-height:300px}.ap-accueil-photo>div{inset:auto 14px 14px;padding:18px}.ap-accueil-photo p{font-size:21px}
 .ap-accueil-hero h1{font-size:40px}.ap-accueil-hero .ap-chapo{font-size:17px}
 .ap-accueil-hero .ap-devis-module{padding:18px}.ap-bande{padding-block:36px}
 .ap-article-entete{padding-top:25px}.ap-article-intro h1{font-size:35px}.ap-article-intro .ap-chapo{font-size:17px}
 .ap-contenu{font-size:17px;line-height:1.75}.ap-contenu h2{font-size:27px}
 .ap-article-photo img{height:230px}.ap-article-corps{padding-top:26px}
 .ap-couts{grid-template-columns:1fr}.ap-couts>div:last-child{grid-column:auto}
 .ap-boite-auteur{gap:12px;padding:16px}.ap-boite-auteur .ap-photo-auteur{width:48px;height:48px}
 .ap-boite-auteur h3{font-size:20px;margin-top:0}.ap-legal h1{font-size:34px}
}

.ap-tlpe-reglette{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;height:auto;background:none;margin-top:22px}
.ap-tlpe-reglette .ap-tlpe-zone{position:static;display:block;width:auto;height:auto;padding:12px;background:#eae3e7;color:var(--encre);font-size:13px;line-height:1.4;border:1px solid var(--filet)}
.ap-tlpe-reglette .ap-tlpe-zone.actif{background:var(--accent);color:#fff}
.ap-tlpe-echelle{display:none}.ap-exon{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;margin-top:14px}
.ap-exon input{width:auto;flex:none;margin-top:4px}.ap-contact input,.ap-contact textarea{width:100%;display:block;margin:8px 0 20px;padding:12px;border:1px solid var(--filet);background:#fff}
@media(max-width:600px){.ap-tlpe-reglette{grid-template-columns:1fr}.ap-exon{font-size:13px}}