/*
Theme Name: SPD-13
Description: Thème sur-mesure pour SPD-13, lettrage adhésif personnalisé.
Author: Louis
Version: 1.7
*/

/* Tout le CSS ci-dessous vient directement de la maquette validée
   (maquette-accueil-robbie.html) : le design n'a pas été modifié,
   seulement transféré ici pour qu'il s'applique à tout le site WordPress. */

:root {
  --ink: #14161a;
  --anthracite: #2b2e33;
  --anthracite-soft: #4a4e56;
  --fluo: #d7ff3a;
  --fluo-ink: #1a2000;
  /* Nouvelles couleurs fluo (demande de Louis) : utilisées pour varier les
     badges d'icônes "cartoon" déjà en place, en plus du vert-jaune fluo
     d'origine (--fluo). */
  --fluo-green: #39ff6a;
  --fluo-pink: #ff3df0;
  --fluo-blue: #19c2ff;
  --bg: #f5f6ff;
  --surface: #ffffff;
  --border: rgba(20, 22, 26, 0.10);
  --text-secondary: #63666d;

  /* --fg/--fg-secondary : couleur de texte "par défaut" sur tout le site, utilisée
     par la plupart des titres/paragraphes. De retour à du texte foncé partout
     (le fond du site est redevenu clair) — sauf le header, qui reste en blanc
     avec ses propres couleurs explicites, indépendantes de --fg. Chaque "card"
     (.info-card, .control-panel, .modal-box...) redéfinit aussi --fg en local,
     ce qui ne change plus rien maintenant que la valeur par défaut est la même,
     mais reste en place pour pouvoir refoncer le fond plus tard sans tout ré-écrire. */
  --fg: var(--ink);
  --fg-secondary: var(--text-secondary);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: var(--fg);
  background-color: var(--bg);
  /* Quadrillage "papier millimétré" retiré (demande de Louis) : fond uni --bg. */
  min-height: 100vh;
  position: relative;
  /* "clip" et non "hidden" : les deux bloquent le débordement horizontal, mais
     "hidden" (testé un temps ici) a un effet de bord qui casse le "position: sticky"
     du menu ET de la prévisualisation du configurateur (le menu ne restait plus
     collé à l'écran en scrollant) — "clip" évite spécifiquement ce problème,
     d'où son choix d'origine ; on le restaure ici. */
  overflow-x: clip;
}

/* Les deux taches dégradées (haut-gauche / bas-droite) qui faisaient ressortir
   le glassmorphism ont été retirées à la demande de Louis — seul le
   quadrillage défini sur "body" plus haut reste visible en arrière-plan,
   sur le nouveau fond uni --bg. */

a { color: inherit; text-decoration: none; }

/* Bandeau opaque derrière le header flottant (voir le commentaire dans
   header.php) : couvre toute la largeur de l'écran, du tout en haut jusqu'au
   bas du header, pour que le contenu qui défile disparaisse avant d'atteindre
   cette zone plutôt que de rester visible dans les 20px d'espace qui entourent
   le header (à gauche, à droite, au-dessus).
   Hauteur = même formule que "top" du header ci-dessous (son décalage depuis le
   haut de l'écran) + sa propre hauteur (--header-h, calculée dans footer.php) :
   le bandeau se termine donc TOUJOURRS exactement là où finit le header, ni
   plus haut (on verrait le bas du header dépasser dessous) ni plus bas (on
   verrait une bande de couleur visible sous le header). Fond identique à celui
   de la page (--bg) : invisible tant qu'aucun contenu ne défile derrière.
   z-index 40 : sous le header (50) pour qu'il reste bien visible par-dessus,
   mais au-dessus du contenu normal de la page (z-index 1, voir "main") pour
   le masquer. "pointer-events: none" : jamais d'interception de clic, ce
   bandeau est purement visuel. */
.site-top-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h, 58px) + 20px);
  background: var(--bg);
  z-index: 40;
  pointer-events: none;
}
/* Sur configurateur/vérificateur, mobile uniquement (demande de Louis) :
   bandeau allongé de 20px pile — juste assez pour couvrir aussi le petit
   espace entre le bas du header et le haut de la carte de prévisualisation
   (.preview-panel, qui commence exactly là où ce bandeau s'arrête maintenant
   — pas un pixel de chevauchement entre les deux). Avant ce réglage, ce
   petit espace de 20px n'était couvert ni par le bandeau (qui s'arrêtait
   avant), ni par la carte (qui commence juste après) : le contenu y était
   brièvement visible en défilant, avant de redisparaître derrière la carte —
   un "clignotement" disparaît/réapparaît/disparaît, plutôt qu'une seule
   disparition nette au niveau de la carte, comme demandé.
   Important : contrairement à un essai précédent, on ne descend PAS plus bas
   que le haut de la carte — "main" a son propre contexte d'empilement
   (z-index) plus bas que ce bandeau, donc si le bandeau couvrait aussi la
   carte elle-même, rien à l'intérieur de "main" ne pourrait jamais repasser
   par-dessus lui, carte comprise : elle redeviendrait invisible (ce qui
   s'est produit). Le bandeau s'arrête donc pile au bord de la carte, qui
   prend seule le relais pour la masquer, elle étant sticky et opaque. */
@media (max-width: 859.98px) {
  .site-top-mask--simulator {
    height: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h, 58px) + 40px);
  }
}

/* ---------- HEADER ---------- */
header {
  position: sticky;
  /* Quand Louis est connecté à l'administration WordPress, la barre noire
     d'administration ("Bonjour, louis-compere@outlook.fr...") reste fixée tout en
     haut de l'écran par-dessus tout le site, à la même position "top: 0" que ce
     header. Au chargement, WordPress pousse simplement le contenu de la page sous
     cette barre (les deux sont donc bien visibles, l'un sous l'autre) — mais un
     élément "position: sticky; top: 0" se recolle à l'ABSOLU haut de l'écran dès
     qu'on scroll, exactement là où se trouve déjà la barre d'admin : le header se
     retrouvait donc cocher entièrement derrière elle en scrollant. C'est ce que
     montraient les deux captures de Louis. Ce n'est PAS un bug visible par un vrai
     client (qui n'est jamais connecté à l'administration), seulement par Louis
     lui-même en étant connecté. La variable ci-dessous est fournie par WordPress
     depuis la version 5.9 : elle vaut la hauteur réelle de la barre d'admin (32px
     sur ordinateur, 46px sur mobile) quand on est connecté, et 0px sinon (visiteur
     normal) - le header se colle donc toujours juste en dessous, jamais derrière.
  */
  /* +20px : le header ne colle plus tout à fait au bord de l'écran (ni à la barre
     d'admin quand elle est visible), pour laisser voir exactement 20px d'espace
     en haut, à gauche et à droite, et donner l'effet "barre flottante" plutôt que
     "bandeau plein bord". */
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 20px);
  z-index: 50;
  /* "width: auto" + une marge gauche/droite fixe (au lieu d'un pourcentage) donne
     exactement 20px de marge de chaque côté, quelle que soit la largeur de l'écran
     — un pourcentage donnerait un espace qui grandit avec l'écran, jamais 20px pile. */
  width: auto;
  margin: 20px 20px 0; /* même espace dès le chargement de la page, pas seulement une fois qu'on a scrollé */
  /* Barre opaque noire (demande de Louis) : la transparence/le flou vitré
     d'origine ont été retirés, le header ne laisse plus deviner le fond du
     site au travers. */
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  overflow: hidden; /* pour que le menu mobile déroulant (voir .mobile-nav) reste dans les coins arrondis */
  /* "transform: translateZ(0)" force ce header sur sa propre couche graphique
     (accélération matérielle) : réglait à l'origine un bug de rendu mobile
     spécifique à "position: sticky" + "backdrop-filter" (retiré ci-dessus),
     mais reste inoffensif et utile en général pour un élément sticky — donc
     conservé. */
  transform: translateZ(0);
  will-change: transform;
}
.header-inner {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 14px 20px;
}
.burger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  justify-self: start;
  width: 32px;
}
.burger span {
  display: block;
  height: 2px;
  background: #ffffff;
  border-radius: 8px;
  transition: transform 0.22s ease, opacity 0.22s ease, width 0.22s ease, background 0.22s ease;
}
.burger span:nth-child(1) { width: 22px; }
.burger span:nth-child(2) { width: 16px; }
.burger span:nth-child(3) { width: 10px; }
.burger:hover span { background: var(--fluo); }
.burger[aria-expanded="true"] span { width: 22px; background: #ffffff; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* "display: flex" : .logo est maintenant un lien (balise <a>, cliquable vers l'accueil)
   et non plus un simple <div> — un <a> est "inline" par défaut, ce qui décalait
   légèrement le SVG ; flex restaure le même alignement qu'avant. */
.logo { display: flex; align-items: center; justify-self: center; }
.logo svg { height: 22px; display: block; }
/* Deux versions du logo dans header.php (texte centré / texte aligné à gauche
   dans leur viewBox) : une seule affichée à la fois selon la taille d'écran.
   Sur mobile, le logo est centré dans le header (.logo { justify-self: center }
   ci-dessus) mais le texte "SPD-13" ne remplissait pas toute la largeur du
   viewBox du SVG — il restait collé à gauche —, ce qui le faisait paraître
   décalé à gauche même une fois la boîte du SVG bien centrée. La version
   "--mobile" a son texte centré dans le viewBox (text-anchor="middle"), pour
   qu'il soit visuellement centré lui aussi. */
/* ".logo .logo-svg--desktop" et non ".logo-svg--desktop" seul : il faut une
   spécificité CSS au moins égale à ".logo svg" (display:block, juste au-dessus)
   pour que "display:none" l'emporte bel et bien — sinon les deux SVG restaient
   affichés en même temps, côte à côte (bug repéré en testant ce correctif). */
.logo .logo-svg--desktop { display: none; }

.header-actions {
  justify-self: end;
  display: none;
  align-items: center;
  gap: 16px;
  color: #ffffff;
}
.header-actions a { position: relative; display: flex; align-items: center; justify-content: center; }
.header-actions svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute;
  top: -6px; right: -8px;
  background: var(--fluo);
  color: var(--fluo-ink);
  font-size: 10px;
  font-weight: 600;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Menu mobile (glass) — même verre sombre que le header, texte et icônes en blanc */
.mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
  background: rgba(10, 24, 14, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--bg);
}
.mobile-nav.open { max-height: 420px; }
.mobile-nav-inner { width: 100%; margin: 0; padding: 8px 20px 20px; }
.mobile-nav-section { margin-bottom: 6px; }
.mobile-nav-section-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(245, 246, 255, 0.65); margin: 14px 4px 4px;
}
.mobile-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 6px;
  font-size: 15px; font-weight: 500;
  color: var(--bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 2px solid transparent;
  transition: border-color 0.15s ease, padding-left 0.15s ease;
}
.mobile-nav a:hover { border-left-color: var(--fluo); padding-left: 12px; }
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a.highlight { color: var(--fluo); }
.mobile-nav-icon-link { justify-content: flex-start !important; gap: 10px; }
.mobile-nav-icon-link svg { width: 18px; height: 18px; flex-shrink: 0; color: #ffffff; }
.mobile-nav-icon-link span:not(.cart-count) { flex: 1; }
.mobile-nav-icon-link .cart-count {
  position: static;
  width: 18px; height: 18px; font-size: 11px;
}

/* Navigation desktop (mega menu simplifié) */
.desktop-nav {
  display: none;
  align-items: center;
  gap: 26px;
  justify-self: start;
}
.desktop-nav a { font-size: 13.5px; font-weight: 500; color: var(--bg); }
.desktop-nav a:hover { color: var(--fluo); }
.desktop-nav a.highlight { color: var(--fluo-ink); background: var(--fluo); padding: 7px 14px; border-radius: 100px; font-weight: 600; }

/* Mega menu "Lettrage adhésif" (demande de Louis) — voir le balisage commenté
   dans header.php pour le mécanisme d'ouverture (survol + clic, JS dans
   footer.php) et le choix des visuels provisoires. */
/* Pas de "position: relative" ici volontairement : le mega menu doit faire
   exactement la même largeur que le header (demande de Louis), pas celle de
   ce petit lien "Lettrage adhésif". En le laissant "static", ".mega-menu"
   (position: absolute) remonte chercher son ancêtre positionné suivant, qui
   est "header" lui-même (position: sticky) — et se positionne donc par
   rapport au header entier, bord à bord, plutôt que par rapport à ce lien. */
.nav-item-megamenu { position: static; }
.mega-menu {
  position: absolute;
  /* "+ 28px" et non "100%" tout court : le mega menu ne doit pas être collé
     au header (demande de Louis) — un vrai espace visible en dessous, pas
     seulement le padding du header. Calculé ici par rapport à "header" en
     entier (voir commentaire ci-dessus), donc "100%" = juste sous le header. */
  top: calc(100% + 28px);
  left: 0;
  right: 0;
  width: auto;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  /* Caché par défaut via opacité/visibilité (et non "display: none") pour
     pouvoir animer son apparition en fondu + léger glissement vers le bas. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
  z-index: 10;
}
/* ".is-open" : posée en JS au survol/clic du déclencheur (voir footer.php).
   ":focus-within" en plus : reste ouvert au clavier (Tab) sans dépendre du JS. */
.nav-item-megamenu.is-open .mega-menu,
.nav-item-megamenu:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.mega-menu-links { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.mega-menu-link {
  display: block;
  padding: 22px 24px;
  border-radius: 12px;
  transition: background-color 0.15s ease;
}
.mega-menu-link:hover,
.mega-menu-link:focus-visible { background: rgba(255, 255, 255, 0.08); }
.mega-menu-link-title { display: block; font-size: 17px; font-weight: 600; color: var(--bg); margin-bottom: 6px; }
.mega-menu-link-sub { display: block; font-size: 13px; line-height: 1.5; color: rgba(245, 246, 255, 0.6); }
/* Entrée "Bientôt disponible" dans le mega menu "Nos produits" (ex. Stop
   trottoir) : un <div>, pas un <a> — rien à cliquer, pas de fond au survol
   (voir le balisage dans header.php). Le badge reprend le même style que
   ".product-card-badge" (cards produits), en plus petit. */
.mega-menu-link.is-soon { cursor: default; }
.mega-menu-link.is-soon .mega-menu-link-title { display: inline-flex; align-items: center; gap: 8px; }
.mega-menu-link-badge {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink); background: var(--fluo); padding: 3px 9px; border-radius: 100px;
}
/* Visuel de droite : les 3 images (1 par défaut + 1 par lien) sont empilées au
   même endroit ("position: absolute", toutes superposées) ; seule leur
   opacité change selon "data-active-preview" posé en JS sur ".mega-menu-visual"
   au survol d'un lien — un fondu plutôt qu'un remplacement brut. */
.mega-menu-visual {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  /* "+ 28px" en haut correspond maintenant à la pleine largeur du header
     (voir ".mega-menu" plus haut) : le visuel est agrandi en conséquence
     pour garder des proportions correctes plutôt qu'une bande trop plate. */
  min-height: 340px;
}
.mega-menu-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mega-menu-visual-img--default { opacity: 1; }
.mega-menu-visual[data-active-preview="configurateur"] .mega-menu-visual-img--default,
.mega-menu-visual[data-active-preview="verificateur"] .mega-menu-visual-img--default {
  opacity: 0;
}
.mega-menu-visual[data-active-preview="configurateur"] .mega-menu-visual-img[data-preview-image="configurateur"],
.mega-menu-visual[data-active-preview="verificateur"] .mega-menu-visual-img[data-preview-image="verificateur"] {
  opacity: 1;
}

@media (min-width: 768px) {
  .burger, .mobile-nav { display: none; }
  .header-actions { display: flex; }
  .desktop-nav { display: flex; }
  .header-inner { grid-template-columns: 1fr auto 1fr; }
  /* "overflow: hidden" sur "header" (voir plus haut) sert à garder le menu
     mobile déroulant dans les coins arrondis — inutile ici (mobile-nav est
     masqué dès 768px, juste au-dessus) et ça rognerait le mega menu, qui
     dépasse sous le header. Remis à "visible" à partir de cette largeur. */
  header { overflow: visible; }
  /* Sur ordinateur : logo à gauche (au lieu de centré comme sur mobile), menu
     centré (au lieu de collé à gauche) — l'ordre dans le code ci-dessus (logo
     avant nav) place déjà logo en 1ère colonne et nav en 2e colonne. */
  .logo { justify-self: start; }
  .desktop-nav { justify-self: center; }
  /* Sur ordinateur : version du logo avec le texte aligné à gauche dans son
     viewBox (inchangée par rapport à avant), pas la version centrée du
     mobile. */
  .logo .logo-svg--mobile { display: none; }
  .logo .logo-svg--desktop { display: block; }
}

/* ---------- LAYOUT ---------- */
/* Sur ordinateur, "main" reste volontairement un peu plus étroit que le
   header (marge de 40px au lieu de 20px) — demande de Louis de réduire
   légèrement la largeur de la page, sans toucher au header. Les sections à
   lecture plus étroite (texte centré avec un "max-width", ex.
   .content-section, .howworks) gardent leur propre largeur réduite par-dessus
   celle-ci.
   Sur mobile : même marge que le header (20px), demande de Louis pour que
   tout le contenu fasse la même largeur que lui — la différence de 40px
   n'était pensée que pour l'ordinateur. */
main { position: relative; z-index: 1; width: auto; margin: 0 20px; padding: 0 0 80px; }
@media (min-width: 768px) {
  main { margin: 0 40px; }
  /* Retour à la largeur de "main" (demande de Louis : avec un max-width de
     1100px, le footer devenait plus étroit que le reste du contenu sur les
     grands écrans, où "main" dépasse largement 1100px). La carte reprend
     donc la même marge latérale que "main" (40px), comme les autres cards
     pleine largeur du site (ex. .graphic-service). Inchangé sur mobile : la
     carte garde la largeur du header (voir plus haut, ".site-footer-card"
     de base). */
  .site-footer-card { margin: 96px 40px 20px; }
  .footer-inner { padding: 0 40px; }
}

/* Choix créer / importer */
.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 36px 0 8px;
}
.choice-card {
  background: var(--surface);
  color: var(--fg);
  --fg: var(--ink);
  --fg-secondary: var(--text-secondary);
  border-radius: 16px;
  padding: 26px 18px;
  text-align: center;
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.choice-card:hover { transform: translateY(-2px); }
.choice-card.primary { border-color: var(--fluo); box-shadow: 0 0 0 3px rgba(215, 255, 58, 0.25); }
.choice-card svg { width: 30px; height: 30px; margin-bottom: 14px; }
.choice-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.choice-card p { font-size: 12.5px; color: var(--fg-secondary); margin: 0; }

/* ---------- HERO (page d'accueil) ---------- */
.hero-animated {
  position: relative;
  /* Remplit tout l'écran au premier chargement, pour qu'on ne voie que cette
     1ère section (demande de Louis) : la 2e section ("Service graphique",
     déjà en 100vh) ne devient visible qu'en scrollant. "100svh" (small
     viewport height) plutôt que "100vh" sur mobile : certains navigateurs
     mobiles comptent "100vh" en incluant la zone sous la barre d'adresse,
     qui disparaît au scroll — avec "100vh" seul, le bas de cette section
     laisserait alors deviner un bout de la section suivante dès le premier
     chargement. Le repli "78vh" reste pour les (rares) navigateurs qui ne
     connaissent pas encore "100svh".
  */
  min-height: 78vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 40px 0;
}

.hero-content { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 0 20px; }

/* Texte centré sur la page, y compris sur ordinateur (demande de Louis) : plus
   d'alignement à gauche au-delà de 768px — .hero-animated et .hero-content
   restent dans leur état par défaut (centré, voir plus haut) à toutes les
   tailles d'écran. */
.hero-eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fluo-ink); background: var(--fluo); display: inline-block;
  padding: 6px 14px; border-radius: 100px; margin: 0 0 18px; font-weight: 600;
}
.hero-title {
  font-family: 'Anton', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.hero-subtitle {
  font-family: 'Noto Serif', serif; font-style: italic;
  font-size: 15.5px; color: var(--fg-secondary); margin: 0 0 32px;
}

/* Bouton de la 1ère section réduit d'environ moitié par rapport à sa taille
   d'origine (padding 12px 24px / 15px de texte, hérités de
   .btn-primary.btn-compact) — demande de Louis. Padding divisé par deux pile ;
   le texte n'est réduit "que" d'un tiers (15px → 10px) plutôt que de moitié
   (7,5px serait illisible à l'écran) — en dessous de 10-11px, un texte de
   bouton devient difficile à lire, y compris pour une personne sans problème
   de vue. Une règle dédiée plutôt que de toucher .btn-primary ou
   .btn-compact : ces deux classes sont réutilisées ailleurs (panier...) à
   leur taille normale. */
/* ".btn-primary.hero-cta-button" (et non juste ".hero-cta-button") : .btn-primary
   est défini plus bas dans ce fichier avec "width: 100%", et à spécificité CSS égale
   (une seule classe) c'est la règle la plus basse dans le fichier qui l'emportait,
   donc le bouton restait pleine largeur malgré "width: auto" ici. Doubler la classe
   rend cette règle plus spécifique, pour qu'elle gagne à coup sûr. */
.btn-primary.hero-cta-button {
  width: auto;
  margin: 0 auto;
  /* Hauteur augmentée (plus de padding vertical) : demande de Louis, la
     dernière réduction était restée trop plate. */
  padding: 18px 26px;
  font-size: 14px;
}

.hero-cta-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.hero-cta-card {
  display: block;
  text-align: left;
  background: var(--surface);
  color: var(--fg);
  --fg: var(--ink);
  --fg-secondary: var(--text-secondary);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 24px 22px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.hero-cta-card:hover { transform: translateY(-2px); }
.hero-cta-card.primary { border-color: var(--fluo); box-shadow: 0 0 0 3px rgba(215, 255, 58, 0.22); }
/* Style "cartoon" (demande de Louis) : badge rempli d'une couleur pleine au
   lieu d'un fond translucide, icône épaisse et bien contrastée à l'intérieur
   — même principe appliqué à tous les badges d'icônes du site (sauf panier
   et compte, laissés tels quels). */
.hero-cta-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--fluo);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.hero-cta-icon svg { width: 20px; height: 20px; color: var(--ink); stroke-width: 2.1; }
/* Couleurs fluo alternées sur les 3 cards du pop-up "Comment souhaitez-vous
   commencer ?" (demande de Louis). */
.outils-grid a:nth-child(1) .hero-cta-icon { background: var(--fluo-blue); }
.outils-grid a:nth-child(2) .hero-cta-icon { background: var(--fluo-pink); }
.outils-grid a:nth-child(3) .hero-cta-icon { background: var(--fluo-green); }
.hero-cta-card h2 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.hero-cta-card p { font-size: 12.5px; color: var(--fg-secondary); margin: 0; }

@media (min-width: 640px) {
  .hero-cta-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- SERVICE GRAPHIQUE (card glassmorphism, largeur du site) ---------- */
/*
 * Section "Service graphique" — 2e section de la page d'accueil (voir
 * front-page.php, déplacée juste après le hero à la demande de Louis).
 * Fond noir plein, hauteur 100vh, texte et visuel bien plus larges qu'avant
 * (c'était auparavant une petite carte claire, discrète, sur fond --surface).
 */
.graphic-service {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  /* Marge réduite sur mobile (demande de Louis, "réduit l'écart entre chaque
     section") — 72px gardé sur ordinateur (media query plus bas), où
     l'espacement plus généreux d'origine reste inchangé. */
  margin: 28px 0;
  /* Pas de "min-height: 100vh" sur mobile (demande de Louis, "mieux adapter
     le service graphique") : sans le visuel "avant/après" (masqué sur mobile,
     voir .graphic-service-visual plus bas), ce bloc n'avait que le texte à
     montrer et se retrouvait avec un immense espace noir vide autour, pour
     occuper quand même toute la hauteur de l'écran. Repris en 100vh à partir
     de l'ordinateur seulement (media query plus bas), où le visuel équilibre
     la section. */
  display: flex;
  align-items: center;
  padding: 56px 28px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--bg);
  --fg: var(--bg);
  --fg-secondary: rgba(245, 246, 255, 0.68);
}
/* Grain */
.graphic-service::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.graphic-service-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
/* .graphic-service-icon : règle conservée mais plus utilisée, l'icône a été
   retirée du balisage (demande de Louis) — gardée au cas où elle serait
   réutilisée ailleurs. */
.graphic-service-icon {
  width: 56px; height: 56px; border-radius: 10px;
  background: rgba(215, 255, 58, 0.18);
  color: var(--fluo);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.graphic-service-icon svg { width: 28px; height: 28px; }
.graphic-service-eyebrow {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-secondary); font-weight: 700; margin: 0 0 14px;
}
.graphic-service-text h2 {
  font-family: 'Anton', sans-serif; font-weight: 700;
  font-size: clamp(30px, 5vw, 48px); line-height: 1.06; margin: 0 0 18px;
  max-width: 560px;
}
.graphic-service-text p {
  font-family: 'Noto Serif', serif; font-style: italic;
  /* Réduit de 16px à 13px (demande de Louis : "il y en a trop" / texte trop
     imposant par rapport au reste du bloc). */
  font-size: 13px; line-height: 1.6; color: var(--fg-secondary); margin: 0 0 32px; max-width: 480px;
}
.graphic-service-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--fluo); color: var(--ink); font-weight: 600; font-size: 14.5px;
  padding: 16px 30px; border-radius: 100px; white-space: nowrap;
  transition: transform 0.15s ease;
}
.graphic-service-cta:hover { transform: translateY(-2px); }
.graphic-service-cta svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Visuel : grande carte illustrative "avant/après" (voir le SVG dans
   front-page.php) — prend toute la colonne qui lui est réservée, pour
   équilibrer visuellement le texte, bien plus large lui aussi désormais. */
.graphic-service-visual {
  /* Masqué sur mobile (demande de Louis) : ce visuel "avant/après" n'est
     montré qu'à partir de l'ordinateur (voir media query plus bas qui le
     réaffiche en "flex"). */
  display: none;
  align-items: center;
  justify-content: center;
}
.gs-mockup {
  position: relative;
  width: 100%;
  min-height: 320px;
  border-radius: 16px;
  background:
    linear-gradient(rgba(247, 246, 235, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 246, 235, 0.05) 1px, transparent 1px),
    rgba(247, 246, 235, 0.03);
  background-size: 24px 24px, 24px 24px, auto;
  border: 1px solid rgba(247, 246, 235, 0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  box-sizing: border-box;
}
.gs-mockup-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fluo);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 100px;
}
.gs-mockup-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
.gs-mockup-shape { width: 100%; max-width: 320px; height: auto; }
.gs-mockup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.gs-mockup-tags span {
  font-size: 12px;
  color: var(--fg-secondary);
  border: 1px solid rgba(247, 246, 235, 0.2);
  border-radius: 100px;
  padding: 6px 14px;
}

@media (min-width: 768px) {
  .graphic-service { min-height: 100vh; margin: 72px 0; padding: 72px 28px; }
  .graphic-service-inner { grid-template-columns: 1.05fr 1fr; gap: 64px; }
  .gs-mockup { min-height: 420px; }
  .graphic-service-visual { display: flex; }
}

/* ---------- COMMENT ÇA MARCHE ----------
   Piste animée (ligne qui se trace + point lumineux + icônes en cascade)
   retirée (demande de Louis) : remplacée par 3 cards simples, sans couleur
   de fond, juste un contour ("stroke"). Le data-animate-track resté dans le
   HTML (et son IntersectionObserver dans footer.php) ne fait plus rien ici
   puisqu'il n'y a plus de classe "is-visible" utilisée par ce bloc. */
/* Padding réduit sur mobile (demande de Louis, "réduit l'écart entre chaque
   section") — 96px gardé sur ordinateur (voir media query plus bas). */
.howworks { width: 90%; max-width: 1000px; margin: 0 auto; padding: 48px 0; }
.howworks-title {
  font-family: 'Anton', sans-serif; font-size: 38px; font-weight: 700;
  text-align: center; margin: 0 0 8px;
}
.howworks-intro { font-size: 13.5px; color: var(--fg-secondary); text-align: center; margin: 0 0 56px; }

/* Sur mobile : défilement horizontal (demande de Louis) au lieu des cards
   empilées verticalement — "display: flex" + "overflow-x: auto" plutôt que
   la grille (reprise seulement à partir de 760px, voir media query plus bas).
   "scroll-snap" : chaque étape se cale proprement à l'écran plutôt que de
   s'arrêter à moitié visible. */
.howworks-track {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  /* "mandatory" (et non "proximity") : le cran s'applique à chaque fois,
     même après un petit mouvement — plus net et prévisible au doigt. */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Un peu de marge en bas pour ne pas coller la barre de défilement (sur les
     navigateurs qui l'affichent) directement sous les cards. */
  padding-bottom: 6px;
}

.howworks-step {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  /* Cards agrandies (demande de Louis, deux fois : d'abord le padding, puis
     la largeur/hauteur ci-dessous une fois le défilement horizontal ajouté). */
  padding: 44px 32px;
  display: grid;
  /* Pictogramme au-dessus du titre (demande de Louis) et non plus à côté :
     une seule colonne, comme déjà sur ordinateur (voir media query plus
     bas) — texte centré en dessous. */
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 18px;
  align-items: start;
  text-align: center;
  /* Largeur fixe + "flex-shrink: 0" : chaque étape garde une largeur lisible
     au lieu de s'écraser pour tenir toutes sur une seule ligne — c'est tout
     l'intérêt du défilement horizontal ajouté ci-dessus. Agrandie (92% au
     lieu de 82%, 380px au lieu de 320px) à la demande de Louis. */
  flex: 0 0 auto;
  width: 92%;
  max-width: 380px;
  scroll-snap-align: start;
}
.howworks-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--fluo);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.howworks-icon svg { width: 24px; height: 24px; stroke-width: 2.1; }
/* Une couleur fluo différente par étape (demande de Louis : vert / rose / bleu fluo en plus du vert-jaune d'origine). */
.howworks-step:nth-child(1) .howworks-icon { background: var(--fluo-green); }
.howworks-step:nth-child(2) .howworks-icon { background: var(--fluo-pink); }
.howworks-step:nth-child(3) .howworks-icon { background: var(--fluo-blue); }

.howworks-step-body { padding-top: 20px; }

.howworks-step-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fluo-ink); font-weight: 700; margin: 0 0 4px; }
.howworks-step h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.howworks-step p { font-size: 13px; color: var(--fg-secondary); margin: 0; max-width: 320px; }

@media (min-width: 760px) {
  .howworks { padding: 96px 0; }
  /* Retour à la grille fixe (3 colonnes) à partir de l'ordinateur : le
     défilement horizontal ci-dessus ne concerne que le mobile. */
  .howworks-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; overflow-x: visible; scroll-snap-type: none; padding-bottom: 0; }
  .howworks-step { grid-template-columns: 1fr; text-align: center; justify-items: center; width: auto; max-width: none; flex: initial; }
  .howworks-step-body { padding-top: 20px; }
  .howworks-step p { margin: 0 auto; }
}

/* ---------- BLOCS DE CONTENU RÉUTILISABLES (accueil + nouvelles pages) ---------- */
.content-section { width: 90%; max-width: 1100px; margin: 0 auto; padding: 48px 0; }
.section-eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-secondary); font-weight: 700; margin: 0 0 10px; text-align: center;
}
.section-title {
  font-family: 'Anton', sans-serif; font-weight: 700;
  font-size: clamp(22px, 4vw, 32px); text-align: center; margin: 0 0 12px;
}
.section-intro {
  font-family: 'Noto Serif', serif; font-style: italic;
  font-size: 14.5px; color: var(--fg-secondary); text-align: center; max-width: 560px; margin: 0 auto 36px; line-height: 1.6;
}

.info-card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.info-card {
  background: var(--surface);
  color: var(--fg);
  --fg: var(--ink);
  --fg-secondary: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.info-card-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: rgba(215, 255, 58, 0.18);
  color: var(--anthracite);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.info-card-icon svg { width: 20px; height: 20px; }
.info-card h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.info-card p { font-size: 12.5px; color: var(--fg-secondary); margin: 0 0 12px; line-height: 1.6; flex: 1; }
.info-card a.info-card-link { font-size: 12.5px; font-weight: 600; color: var(--fluo-ink); text-decoration: underline; }

@media (min-width: 768px) {
  .info-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Section "Nos produits" (page catalogue + aperçu sur l'accueil) : même
   largeur que "le reste des visuels" (demande de Louis), c'est-à-dire les
   autres cards pleine largeur du site comme ".graphic-service" — pas la
   largeur réduite et centrée de ".content-section" (utilisée ailleurs pour
   du texte). Même principe que ".graphic-service"/".site-footer-card" :
   uniquement une marge verticale ici, la largeur vient de celle de "main"
   (son propre "margin", voir plus haut dans ce fichier). */
.products-section { width: auto; margin: 96px 0; }
/* Plus d'espace entre le titre "Nos produits" et la grille de cards juste en
   dessous (demande de Louis) que l'écart par défaut de ".section-title"
   (12px, partagé avec d'autres sections du site — pas touché directement
   pour ne pas les affecter aussi). */
.products-section .section-title { margin-bottom: 40px; }
@media (min-width: 768px) {
  .products-section { margin: 128px 0; }
}

/* ---------- CARDS PRODUITS (page "Nos produits" + aperçu sur l'accueil,
   demande de Louis) — un seul balisage/style réutilisé aux deux endroits.
   Triées par ordre alphabétique directement dans le PHP (front-page.php et
   page-nos-produits.php), pas en CSS. */
.products-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
/* Carte en deux parties (demande de Louis) : le carré visuel en haut (avec
   ses badges), le titre + prix en dessous — plus de texte superposé sur
   l'image, plus de description. */
.product-card {
  position: relative;
  display: block;
  background: transparent;
  color: var(--fg);
  --fg: var(--ink);
  --fg-secondary: var(--text-secondary);
  text-align: left;
}
/* Card cliquable (produit disponible) : tout le bloc est un <a>, donc on
   retire le soulignement/la couleur de lien par défaut pour qu'elle ait
   l'air d'une card, pas d'un lien de texte. */
a.product-card { text-decoration: none; }
a.product-card:hover .product-card-visual { border-color: var(--fluo); }
/* Produit "Bientôt disponible" (pas encore de page à ouvrir) : <div>, pas
   <a> — rien à cliquer, curseur par défaut, légèrement estompée pour que
   l'œil aille d'abord vers les produits disponibles. */
.product-card.is-soon { opacity: 0.72; }
/* Simple carré gris en attendant de vraies photos (demande de Louis) : plus
   de visuel SVG provisoire à l'intérieur (voir front-page.php et
   page-nos-produits.php). */
.product-card-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #d9d9dd;
  border: 1px solid var(--border);
  /* Coins arrondis (demande de Louis, retour en arrière après un essai en
     coins carrés), comme la plupart des autres cards du site
     (.info-card, .choice-card...). */
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.product-card-visual svg { width: 100%; height: 100%; }
/* Badge statut, en haut à gauche (ex. "Bientôt disponible"). */
.product-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 100px;
}
/* Délai de production, en haut à droite (demande de Louis) — absent pour un
   produit "Bientôt disponible" sans délai encore défini. */
.product-card-delay {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 100px;
}
/* Titre + prix sous le carré visuel (demande de Louis), plus de description.
   Valeur réelle passée depuis le PHP (robbie_get_reglages(), voir
   front-page.php / page-nos-produits.php) — jamais en dur ici, pour rester
   synchronisée avec les réglages du back-office. */
.product-card-body { padding: 14px 2px 0; }
.product-card-name { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--fg); }
.product-card-price { font-size: 13.5px; color: var(--fg-secondary); margin: 0; }
.product-card-price-soon { font-size: 13.5px; color: var(--fg-secondary); font-style: italic; margin: 0; }

@media (min-width: 640px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  /* 3 colonnes (demande de Louis, passé de 4 à 3) sur ordinateur — repris à
     2 colonnes juste au-dessus entre 640px et 1024px, 1 seule sur mobile
     (règle de base de ".products-grid" plus haut). Avec seulement 2 produits
     pour l'instant, la grille laisse 1 emplacement vide plutôt que d'étirer
     les cards existantes sur 3 colonnes — elle se remplit au fur et à mesure
     que de nouveaux produits sont ajoutés. */
  .products-grid.cols-3-desktop { grid-template-columns: repeat(3, 1fr); }
}
/* Lien "Voir tous nos produits" sous l'aperçu de l'accueil (page complète
   /nos-produits/, voir front-page.php). */
.products-see-all { text-align: center; margin: 28px 0 0; }
.products-see-all a { font-size: 13px; font-weight: 600; color: var(--fluo-ink); text-decoration: underline; }

/* Bandeau délais — reprend les 3 vrais délais du configurateur (voir .delay-card dans
   page-configurateur.php), jamais de prix fixe affiché ici puisque le prix dépend du
   visuel : seuls les délais eux-mêmes sont des valeurs stables à afficher hors
   configurateur. */
.delays-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.delay-highlight {
  background: var(--surface);
  color: var(--fg);
  --fg: var(--ink);
  --fg-secondary: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  text-align: center;
}
.delay-highlight.is-fast { border-color: var(--fluo); box-shadow: 0 0 0 3px rgba(215, 255, 58, 0.18); }
.delay-highlight .delay-highlight-name { font-size: 13px; font-weight: 700; margin: 0 0 4px; }
.delay-highlight .delay-highlight-time { font-family: 'Anton', sans-serif; font-weight: 700; font-size: 22px; margin: 0 0 4px; }
.delay-highlight .delay-highlight-desc { font-size: 11.5px; color: var(--fg-secondary); margin: 0; }

@media (min-width: 640px) {
  .delays-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Bandeau de confiance (petits points factuels, pas de superlatifs vagues) */
.trust-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 28px; }
.trust-point { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-secondary); font-weight: 500; }
.trust-point svg { width: 16px; height: 16px; color: var(--fluo-ink); flex-shrink: 0; }

/* FAQ (accordéon natif <details>/<summary>, sans JavaScript) — le contenu affiché ici
   doit rester identique aux questions/réponses du script JSON-LD FAQPage en haut de
   front-page.php : Google déconseille des données structurées qui ne reflètent pas de
   contenu réellement visible sur la page. */
.faq-section { width: 90%; max-width: 760px; margin: 0 auto; padding: 48px 0; }
.faq-item { border-bottom: 1px solid var(--border); padding: 16px 2px; }
.faq-item summary {
  cursor: pointer; font-weight: 600; font-size: 14.5px; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 20px; font-weight: 400; color: var(--fg-secondary);
  flex-shrink: 0; width: 20px; text-align: center;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { font-size: 13px; color: var(--fg-secondary); margin: 10px 0 0; line-height: 1.65; }

/* ---------- CARD UNIQUE "CTA + FOOTER", fond #d7ff3a (demande de Louis) ----------
   Avant : une card dégradée (CTA) flottant séparément au-dessus d'un footer sans
   fond propre. Maintenant : un seul bloc, un seul fond plein #d7ff3a, qui regroupe
   les deux (voir footer.php) — même largeur et mêmes marges que les autres cards
   pleine largeur du site (ex. .graphic-service), sur mobile comme sur
   ordinateur (voir media query plus bas). Texte en --ink (foncé) partout à
   l'intérieur : nécessaire pour rester lisible sur ce fond clair/vif. */
.site-footer-card {
  position: relative;
  z-index: 1;
  /* Même largeur que les autres cards pleine largeur du site (ex.
     .graphic-service, demande de Louis) — mais PAS de la même façon : ces
     cards sont DANS <main> et héritent simplement de sa marge. Le footer,
     lui, est EN DEHORS de <main> (voir footer.php, inclus après sa
     fermeture) : il ne profite d'aucune marge héritée, donc la même marge
     latérale que "main" doit être répétée ici "en dur" (20px sur mobile,
     40px à partir de l'ordinateur — voir media query plus bas, même valeurs
     que "main"). La retirer (comme dans un essai précédent) fait au
     contraire disparaître toute marge ; lui donner une largeur fixe plus
     étroite (comme dans un autre essai) la fait au contraire paraître plus
     petite que le reste du contenu sur les grands écrans.
     Le bas (20px) reste le même espace qu'en haut de l'écran avant le
     header, pour que le footer "flotte" de la même façon en bas de page. */
  width: auto;
  margin: 96px 20px 20px;
  background: var(--fluo);
  border-radius: 16px;
  overflow: hidden; /* le contenu (footer-bottom compris) reste dans les coins arrondis */
  color: var(--ink);
}
footer {
  position: relative; z-index: 1;
  color: var(--ink);
  /* Padding augmenté (haut et bas) pour donner plus de hauteur au footer.
     Le padding gauche/droite est maintenant porté par .footer-inner
     ci-dessous (et non plus ici) pour pouvoir l'augmenter séparément. */
  padding: 96px 0 56px;
}
/* .footer-inner occupe toute la largeur de .site-footer-card (100%, pas 90% :
   un 90% recréerait un retrait en plus du padding ci-dessous, et le contenu
   serait plus étroit que prévu) — que cette carte soit pleine largeur
   (mobile) ou réduite et centrée (ordinateur, voir media query plus bas) ne
   change rien ici : .footer-inner suit simplement la largeur de son parent. */
/* Padding gauche/droite augmenté (demande de Louis) : 40px au lieu des 20px
   portés avant par <footer> directement (voir ci-dessus). Ramené à 20px sur
   mobile (même raison que .site-footer-card plus haut) — repris à 40px à
   partir de l'ordinateur (media query plus bas). */
.footer-inner { width: 100%; margin: 0; padding: 0 20px; box-sizing: border-box; }

.footer-cta {
  position: relative;
  /* CTA agrandi (demande de Louis) : plus de padding, titre/sous-titre/bouton
     plus grands (voir plus bas). */
  padding: 96px 24px 0;
  text-align: center;
}
.footer-cta-title {
  position: relative;
  font-family: 'Anton', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 5.5vw, 54px);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 16px;
}
.footer-cta-sub {
  position: relative;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(20, 22, 26, 0.72);
  max-width: 560px;
  margin: 0 auto 36px;
}
.footer-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Noir/ink plutôt que blanc : sur un fond déjà clair (#d7ff3a), un bouton blanc
     se distinguait à peine — le noir ressort nettement, et reprend la couleur du
     header. */
  background: var(--ink);
  color: var(--bg);
  border: none;
  /* "text-decoration: none" : ce bouton est parfois un <a> (CTA du
     vérificateur/configurateur qui renvoie vers l'autre outil) et non un
     <button> (CTA de l'accueil, qui ouvre le pop-up) — sans ça, un lien
     serait souligné. */
  text-decoration: none;
  border-radius: 100px;
  padding: 18px 34px;
  font-size: 16.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.footer-cta-btn:hover { transform: translateY(-1px); }
.footer-cta-btn svg { width: 18px; height: 18px; }

/* Séparation entre le CTA et le footer : un simple trait plein (Louis ne
   voulait pas de pointillé). */
.footer-cta-separator {
  height: 0;
  margin: 56px 40px 0;
  border-top: 1.5px solid rgba(20, 22, 26, 0.3);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(20, 22, 26, 0.14);
}
/* Pas de max-width : le texte remplit toute la colonne du logo, comme les
   liens des colonnes voisines (demande de Louis, le texte était plus
   étroit que sa colonne et retombait à la ligne trop tôt). */
.footer-logo p { font-size: 12.5px; color: rgba(20, 22, 26, 0.68); margin: 10px 0 0; max-width: none; }
.footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); margin: 0 0 12px; }
.footer-col a { display: block; font-size: 13.5px; color: var(--ink); opacity: 0.75; margin-bottom: 9px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding-top: 24px; font-size: 11.5px; color: rgba(20, 22, 26, 0.68);
}
@media (min-width: 768px) {
  /* 1 colonne logo + 3 colonnes de liens (retour à 4 colonnes au total après
     le retrait de "Idées & guides", demande de Louis). */
  .footer-top { grid-template-columns: 1.1fr 0.85fr 0.85fr 0.85fr; }
}

/* ==========================================================================
   Ce qui suit vient de maquette-configurateur-robbie.html : styles propres
   à la page Configurateur (simulateur, panneau de contrôle, onglets produit).
   ========================================================================== */

/* ---------- SIMULATEUR ---------- */
.simulator { margin-top: 0; }

/* Hauteur ramenée de 48px (40+8) à 20px (6+14) : sur configurateur/vérificateur,
   ce bandeau est vide (voir commentaire dans page-configurateur.php) et ne sert
   qu'à l'espacement au-dessus du simulateur. 20px, c'est exactement l'écart déjà
   prévu entre le header et .preview-panel une fois collée ("top" de .preview-panel
   plus bas = hauteur du header + 20px) : avec 48px, la carte d'aperçu démarrait
   28px plus bas que sa position collée, donc elle "sautait" visiblement vers le
   haut dès le début du scroll avant de se bloquer. À 20px pile, elle est déjà à sa
   position collée au chargement : plus aucun mouvement avant que le scroll du
   formulaire soit terminé (demande de Louis). */
.hero { display: none; padding: 6px 0 14px; }
@media (min-width: 1024px) {
  .hero { display: block; }
}
.hero h1 {
  font-family: 'Anton', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}

/* La carte d'aperçu (.preview-panel) est collée ("sticky") sous le header, MOBILE ET
   ORDINATEUR. "display: contents" ici retire cette zone de la génération de boîte : la
   carte devient un enfant direct de .simulator-grid, ce qui lui permet de rester collée
   pendant tout le défilement du panneau de configuration (à côté/en dessous), au lieu de
   n'avoir presque aucune marge de défilement propre (ce qui se produirait si elle restait
   sticky à l'intérieur de cette zone, qui ne fait quasiment que l'envelopper). C'est
   exactement la même technique déjà utilisée sur ordinateur (voir media query plus bas) ;
   elle s'applique maintenant aussi sur mobile, à la demande de Louis, avec une carte
   réduite en hauteur pour ne pas occuper une trop grande partie de l'écran. */
.preview-sticky-zone {
  display: contents;
}

/* La carte d'aperçu elle-même reste opaque : le texte affiché dessus est toujours net */
.preview-panel {
  position: sticky;
  /* Sans z-index explicite, la carte (repositionnée juste au-dessus dans le code) se
     retrouvait recouverte par .control-panel pendant le défilement sur mobile : ce
     dernier a un fond flouté ("backdrop-filter"), qui crée lui aussi un contexte
     d'empilement, et gagnait par défaut car il arrive après dans le code. Un z-index
     garantit que la carte d'aperçu reste toujours au-dessus. */
  z-index: 5;
  /* On ajoute la hauteur de la barre d'admin WordPress (si connecté) pour que la carte
     d'aperçu se colle bien sous le header réel, jamais derrière la barre d'admin ni
     derrière le header — même calcul que sur ordinateur. Le premier "+20px" est la
     marge du header lui-même avec le haut de l'écran (voir "header" plus haut :
     "top: calc(admin-bar + 20px)") — sans lui, la carte se collait 20px trop haut et
     finissait recouverte par le bas du header en scrollant. Le second "+20px" est
     l'espace visible voulu entre le bas du header et la carte, une fois collée. */
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 20px + var(--header-h, 58px) + 20px);
  border-radius: 16px;
  padding: 40px 20px;
  text-align: center;
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
  border: 1px solid var(--border);
  box-sizing: border-box;
  /* Hauteur mobile réduite une première fois de 20% (demande de Louis) par rapport à la
     hauteur d'origine de 390px, puis réduite à nouveau de 40% (nouvelle demande) : 312px
     × 0,6 ≈ 187px. Ne concerne que le mobile : la media query plus bas redéfinit une
     hauteur propre à l'ordinateur et n'est pas modifiée ici. */
  height: 187px;
  max-height: 187px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Espace ajouté sous la carte (demande de Louis, "la prévisualisation se
     superpose un peu sur le formulaire") : sur mobile, .preview-panel et
     .control-panel sont simplement l'un sous l'autre (pas de grille avec
     "gap", réservée à l'ordinateur ci-dessous) — sans cette marge, le champ
     "Texte" du formulaire démarrait immédiatement sous la carte, trop collé.
     Remise à 0 à partir de 860px (media query plus bas) : l'écart y est déjà
     géré par le "gap" de la grille, ça doublerait l'espace sinon. */
  margin-bottom: 28px;
}
/* Regroupe le texte de l'aperçu (et son éventuel tracé de pochoir) dans un bloc qui se
   réduit toujours à la taille de son contenu ("width: fit-content, height: fit-content"),
   pour que .preview-panel puisse le centrer parfaitement — horizontalement ET
   verticalement — quelle que soit la quantité de texte qu'il contient. Toute réduction
   automatique d'échelle (voir ajusterEchelleApercu en JS) s'applique ici, sur ce bloc en
   entier, donc le texte ET le tracé du pochoir sont toujours mis à l'échelle ensemble. */
.preview-stage {
  position: relative;
  display: inline-block;
  transition: transform 0.1s ease;
}

@media (min-width: 860px) {
  .preview-sticky-zone {
    display: contents;
  }
  .preview-panel {
    position: sticky;
    /* Même raison que pour "header" plus haut : on ajoute la hauteur de la barre
       d'admin WordPress (si connecté) pour que la carte d'aperçu se colle bien sous
       le header réel, jamais derrière la barre d'admin ni derrière le header. Premier
       "+20px" : marge du header avec le haut de l'écran (sans lui la carte se collait
       20px trop haut et finissait recouverte par le bas du header). Second "+20px" :
       espace visible voulu entre le header et la carte, une fois collée. */
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 20px + var(--header-h, 58px) + 20px);
    /* Hauteur réduite de 10% (demande de Louis, ordinateur uniquement) pour laisser
       plus de marge visible sous le header une fois la carte d'aperçu collée. Le
       "-40px" supplémentaire compense les 40px ajoutés à "top" juste au-dessus (les
       deux "+20px"), pour que la carte ne déborde pas en bas de l'écran. La réduction
       de 40% demandée ensuite ne concerne QUE le mobile (voir .preview-panel plus
       haut, hors media query) : Louis veut garder cette hauteur-ci inchangée sur
       ordinateur. */
    height: calc((100vh - var(--wp-admin--admin-bar--height, 0px) - var(--header-h, 58px) - 56px - 40px) * 0.9);
    max-height: 558px;
    min-height: 288px;
    /* Pas de marge ici : l'écart avec .control-panel vient déjà du "gap" de
       .simulator-grid (voir plus bas) — la marge ajoutée sur mobile plus haut
       ne concerne que le mobile, où il n'y a pas de grille. */
    margin-bottom: 0;
  }
}
.preview-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 6vw, 52px);
  color: var(--anthracite);
  /* Sans ça, les retours à la ligne tapés dans le champ texte étaient ignorés
     visuellement dans l'aperçu (comportement par défaut d'un <span>). */
  white-space: pre-wrap;
}
.preview-controls {
  position: absolute; top: 14px; right: 14px;
  display: flex; gap: 6px;
}
.preview-controls button {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.preview-caption {
  position: absolute; bottom: 14px; left: 0; right: 0;
  font-size: 12px; color: var(--fg-secondary);
}

/* Navigation "‹ Page 1/3 ›" de l'aperçu PDF (voir afficherApercuPdf dans
   page-verificateur.php) : affichée uniquement pour un PDF de plusieurs pages,
   en haut à gauche du panneau (les boutons zoomer/dézoomer de l'aperçu SVG,
   eux, restent en haut à droite — voir .preview-controls ci-dessus). */
.preview-page-nav {
  position: absolute; top: 14px; left: 14px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 6px;
  font-size: 12.5px;
  color: var(--fg);
}
.preview-page-nav button {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.preview-page-nav button:hover:not(:disabled) { background: var(--fluo); }
.preview-page-nav button:disabled { opacity: 0.35; cursor: default; }
.preview-page-nav span { white-space: nowrap; padding: 0 2px; }

.control-panel {
  background: rgba(255, 255, 255, 0.55);
  color: var(--fg);
  --fg: var(--ink);
  --fg-secondary: var(--text-secondary);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  padding: 22px;
}

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 12.5px; color: var(--fg-secondary);
  margin-bottom: 6px; font-weight: 500;
}
.field input[type="text"],
.field input[type="number"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select:not(.toolbar-select) {
  width: 100%;
  padding: 10px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  font-family: inherit;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Par défaut, une colonne de grille ne peut jamais devenir plus étroite que le contenu
   qu'elle contient ("min-width: auto" implicite) : un <input> vide a une largeur
   minimale intrinsèque assez large (liée à sa taille par défaut), ce qui le faisait
   déborder hors de la carte sur un écran étroit (repéré dans le pop-up devis sur
   mobile, sur le champ "Téléphone"). Cette ligne autorise les colonnes à se réduire
   normalement, comme les autres champs pleine largeur du site. */
.field-row > .field { min-width: 0; }

input[type="range"] {
  width: 100%;
  accent-color: var(--fluo);
}
.range-value { font-size: 12px; color: var(--fg-secondary); margin-top: 4px; }

.field-group-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--anthracite);
  margin: 22px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.field-group-label:first-child { margin-top: 0; }

label.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 18px; height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--fluo);
}
.checkbox-label span { line-height: 18px; }
.installation-fields {
  display: none;
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--fluo);
  flex-direction: column;
  gap: 12px;
}
.installation-fields.is-open { display: flex; }
.installation-fields input {
  width: 100%;
  padding: 9px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13.5px;
  font-family: inherit;
}
.installation-fields input[type="file"] {
  border-radius: 8px;
  padding: 9px 12px;
}
.required { color: #b3261e; }

.delay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.delay-card {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
}
.delay-card.selected {
  border-color: var(--fluo);
  background: rgba(215, 255, 58, 0.14);
}
.delay-card .delay-name { font-size: 12.5px; font-weight: 600; margin: 0 0 2px; }
.delay-card .delay-time { font-size: 10.5px; color: var(--fg-secondary); margin: 0; }

.delay-price {
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 0;
  color: var(--fg);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Liste déroulante avec recherche clavier (finition) */
.combobox { position: relative; }
.combobox-control { position: relative; }
.combobox-control input {
  width: 100%;
  padding: 10px 40px 10px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  font-family: inherit;
}
.combobox-control input:focus { outline: none; border-color: var(--fluo); }
.combobox-chevron {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--fg-secondary);
  pointer-events: none;
}
.combobox-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(20, 22, 26, 0.14);
  z-index: 30;
  list-style: none;
  margin: 0;
  padding: 6px;
}
.combobox-list li {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  cursor: pointer;
}
.combobox-list li:hover,
.combobox-list li.active {
  background: rgba(215, 255, 58, 0.2);
}
.combobox-list li.no-results {
  color: var(--fg-secondary);
  cursor: default;
}
.combobox-list li.no-results:hover { background: none; }

/* Visuels : croix de suppression + modal de confirmation */
.visuel-tab { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 14px; border-radius: 100px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.visuel-tab.active { border-color: var(--fluo); background: rgba(215, 255, 58, 0.18); font-weight: 600; }
.visuel-tab-remove {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(20,22,26,0.08);
  color: var(--fg-secondary);
  font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.visuel-tab-remove:hover { background: #b3261e; color: var(--bg); }

/* Récapitulatif global des visuels (un onglet par page de PDF importé) : liste des
   problèmes/prix par page + prix total, affiché sous les onglets dès qu'il y a au
   moins 2 visuels (voir rafraichirRecapGlobal() dans page-verificateur.php). */
.visuels-recap {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.visuels-recap-titre { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.visuels-recap-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.visuels-recap-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.visuels-recap-item:hover { background: rgba(20,22,26,0.05); }
.visuels-recap-item.is-active { background: rgba(215, 255, 58, 0.18); }
.visuels-recap-label { font-size: 12.5px; font-weight: 500; flex-shrink: 0; }
.visuels-recap-statut { font-size: 12px; color: var(--fg-secondary); flex: 1; }
.visuels-recap-prix { font-size: 12.5px; font-weight: 600; }
.visuels-recap-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
}
.visuels-recap-total strong { font-size: 16px; }

.modal-overlay {
  /* Toujours dans le flux (display:flex en permanence) : c'est l'opacité et la
     visibilité qui font apparaître/disparaître le pop-up en fondu, plutôt que
     le "display:none" d'origine qui le faisait surgir d'un coup, sans transition
     possible. "visibility" est retardée de la durée du fondu à la fermeture
     (transition-delay ci-dessous) pour que le pop-up masqué ne reste pas
     cliquable ni lisible par les lecteurs d'écran une fois invisible. */
  display: flex;
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 22, 26, 0.45);
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.modal-box {
  background: var(--surface);
  color: var(--fg);
  --fg: var(--ink);
  --fg-secondary: var(--text-secondary);
  border-radius: 16px;
  padding: 22px;
  max-width: 320px;
  width: 100%;
  /* Léger effet d'entrée (translation + zoom discret) en même temps que le
     fondu de l'overlay ci-dessus, plutôt qu'un pop-up figé qui se contente
     d'apparaître/disparaître avec le fond. */
  transform: translateY(14px) scale(0.97);
  transition: transform 0.25s ease;
}
.modal-overlay.is-open .modal-box {
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal-box { transition: none; }
}
.modal-title { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
/* Titre du pop-up ouvert par le bouton du hero ("Comment souhaitez-vous
   commencer ?") centré et agrandi (demande de Louis) — scopé à cette seule
   modale pour ne pas toucher les autres (devis, suppression...). */
.modal-box--outils .modal-title {
  text-align: center;
  font-size: 22px;
  margin: 0 0 20px;
}
.modal-text { font-size: 13px; color: var(--fg-secondary); margin: 0 0 18px; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions button {
  flex: 1; padding: 10px; border-radius: 100px; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--border); cursor: pointer; font-family: inherit;
}
.btn-modal-cancel { background: var(--surface); color: var(--fg); }
.btn-modal-confirm { background: #b3261e; color: var(--bg); border-color: #b3261e; }

/* Barre d'outils de mise en forme du texte */
.text-toolbar {
  display: flex; align-items: center; gap: 4px;
  margin-top: 8px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  width: fit-content;
}
.toolbar-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--anthracite);
  font-family: inherit;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.toolbar-btn svg { width: 16px; height: 12px; }
.toolbar-btn:hover { background: var(--surface-hover, rgba(20,22,26,0.06)); }
.toolbar-btn.active { background: rgba(215, 255, 58, 0.3); }
.toolbar-btn--bold { font-weight: 700; }
.toolbar-btn--italic { font-style: italic; }
.toolbar-btn--underline { text-decoration: underline; }
.toolbar-divider { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.toolbar-select {
  height: 30px;
  padding: 0 6px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--anthracite);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.toolbar-select:hover { background: var(--surface-hover, rgba(20,22,26,0.06)); }

/* Couleurs rectangulaires multi-sélectionnables */
.field-group-note { font-size: 11px; font-weight: 400; text-transform: none; color: var(--fg-secondary); letter-spacing: 0; }
.swatches-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 8px;
  overflow: hidden;
  max-height: 148px;
}
.swatches-grid.expanded { max-height: none; }
.swatch-item.more-colors { display: none; }
.swatches-grid.expanded .swatch-item.more-colors { display: flex; }
.swatch-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.swatch-rect {
  width: 100%;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid rgba(20,22,26,0.08);
  cursor: pointer;
  position: relative;
  padding: 0;
}
.swatch-rect--light { border-color: #d8d8d5; }
.swatch-rect .swatch-check {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  color: var(--bg); font-size: 14px; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.swatch-rect.selected { border-color: var(--fluo); border-width: 2px; }
.swatch-rect.selected .swatch-check { display: flex; }
.swatch-name { font-size: 10px; color: var(--fg-secondary); }
.btn-voir-plus {
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--anthracite);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

/* Attribution des couleurs directement dans l'aperçu (page configurateur) : chaque mot
   est cliquable, et une petite palette flottante propose les couleurs sélectionnées. */
.mot-colorable {
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}
.mot-colorable:hover {
  background-color: rgba(0,0,0,0.08);
}
/* Ancrée dans le panneau d'aperçu (qui est en position:relative), en haut à gauche, en
   colonne verticale — plutôt que positionnée au clic près du mot (ce qui la faisait
   "flotter" n'importe où sur l'écran dès que la page défilait). Elle reste donc toujours
   au même endroit, quel que soit le mot cliqué. */
.palette-mot-couleur {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
/* "display: flex" ci-dessus (une règle de la feuille de style de l'auteur) l'emportait
   sur la règle par défaut du navigateur "[hidden] { display: none }" (une règle de la
   feuille de style "user agent"), qui compte toujours moins qu'une règle d'auteur, même
   à spécificité égale : résultat, la palette restait visible en permanence — un petit
   cercle blanc vide en haut à gauche de l'aperçu — au lieu d'être masquée par l'attribut
   "hidden" tant qu'aucun mot n'est cliqué. Cette règle rend la priorité à "hidden".
   */
.palette-mot-couleur[hidden] { display: none; }
.palette-mot-couleur-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  padding: 0;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.palette-mot-couleur-btn:hover {
  transform: scale(1.08);
}
.palette-mot-couleur-btn.selected {
  outline: 3px solid var(--fluo);
  outline-offset: 2px;
}

/* Tracé du pochoir autour du visuel, dans l'aperçu (page configurateur). Rempli en plein
   (couleur du vinyle sélectionné, posée par mettreAJourRemplissagePochoir() en JS) plutôt
   qu'un simple tracé, pour mieux représenter la matière découpée autour du texte. */
.pochoir-outline {
  position: absolute;
  z-index: 0;
  background-color: var(--anthracite);
  /* Coins bien droits (90°) par défaut : un pochoir rectangulaire réel a des coins
     vifs, indispensables pour un pochoir de peinture (un coin arrondi de 14px, comme
     avant cette correction, n'existe pas sur la plaque découpée réellement produite). */
  border-radius: 0;
  box-sizing: border-box;
  pointer-events: none;
  /* Sans ces 4 propriétés, la valeur par défaut de "mask-size" ("auto", c'est-à-dire la
     taille "intrinsèque" du masque SVG référencé) ne correspondait pas forcément à la
     taille réelle de cet élément une fois le pochoir agrandi (marge, forme cercle) : le
     masque ne couvrait alors qu'une partie de la plaque, et tout ce qui dépassait cette
     zone devenait entièrement transparent — pas "non découpé", carrément invisible. Vu à
     l'écran, ça donnait exactement le bug remonté par Louis : un cercle "coupé" net d'un
     côté, comme rogné par une fenêtre trop petite, alors qu'il ne l'était pas vraiment.
     En forçant le masque à toujours couvrir exactement 100% de la boîte de l'élément
     (quelle que soit sa taille), sans répétition ni décalage, il reste plaqué sur toute
     la plaque, quelle que soit la marge ou la forme choisies (0 à 50 cm). */
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center;
  mask-origin: border-box;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  -webkit-mask-origin: border-box;
}
.pochoir-outline--cercle {
  border-radius: 50%;
}
.pochoir-fields {
  margin-top: 4px;
}
/* En pochoir, le texte reste transparent (on voit à travers, comme une découpe dans la
   matière), quelle que soit la couleur attribuée à chaque mot. */
.preview-text.pochoir-texte-transparent,
.preview-text.pochoir-texte-transparent .mot-colorable {
  color: transparent !important;
  position: relative;
  z-index: 1;
}

/* Onglets Description / FAQ / Informations techniques */
.product-tabs { margin-top: 64px; }
.product-tabs-nav { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 32px; border-bottom: 1px solid var(--border); }
.product-tab-btn {
  padding: 12px 4px; margin-right: 20px;
  background: none; border: none;
  font-size: 14px; font-weight: 500; color: var(--fg-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.product-tab-btn.active { color: var(--fg); border-bottom-color: var(--fluo); font-weight: 600; }
.product-tab-panel { font-size: 14px; line-height: 1.6; color: var(--fg-secondary); }
.product-tab-text { max-width: 720px; }
.product-tab-title { font-family: 'Anton', sans-serif; font-size: 26px; font-weight: 700; color: var(--fg); margin: 0 0 18px; }
.product-tab-panel p { margin: 0 0 18px; }

/* Bloc "Comment poser votre lettrage adhésif ?" dans une card noire (demande
   de Louis), le titre passe en clair (--fg redéfini ici, lu par .howto-title
   juste en dessous) pour rester lisible dessus. */
.howto-block {
  margin-top: 88px;
  background: #000000;
  color: var(--bg);
  --fg: var(--bg);
  border-radius: 16px;
  /* Card encore agrandie (demande de Louis). */
  padding: 88px 48px 80px;
}
.howto-title { font-size: 17px; font-weight: 600; color: var(--fg); margin: 0 0 24px; }
/* Titre centré, scopé à cette card noire pour ne pas toucher les autres
   usages de ".howto-title" (ex. guides). Taille réduite (demande de Louis,
   42px devenu trop imposant) ; "clamp" pour qu'il reste proportionné sur les
   petits écrans aussi, plutôt qu'une taille fixe trop grande partout. */
.howto-block .howto-title { text-align: center; font-size: clamp(22px, 4vw, 30px); margin: 0 0 36px; }
/* Sur mobile : carrousel défilable à l'horizontal (une carte à la fois, avec un
   aperçu de la suivante) au lieu d'un empilement vertical. Redevient une grille
   classique à partir de 640px (voir les media queries plus bas), où il y a la
   place d'afficher plusieurs cartes côte à côte sans avoir besoin de scroller.
   "mandatory" (au lieu de "proximity") + un padding latéral égal à la marge de
   la carte : le carrousel se cale TOUJOURS sur une carte entière et la centre
   automatiquement à la fin du geste de défilement, au lieu de pouvoir s'arrêter
   à mi-chemin entre deux cartes (demande de Louis : "quand je change de card
   celle-ci se centre toute seule"). */
.howto-grid {
  display: flex;
  gap: 14px;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.howto-grid::-webkit-scrollbar { height: 5px; }
.howto-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; }
.howto-card {
  /* Chaque card dans une couleur fluo différente (demande de Louis), au lieu
     du fond blanc uniforme d'avant : voir les 4 couleurs ci-dessous. Plus de
     bordure (inutile sur un fond déjà coloré, bien visible sur la card noire
     qui l'entoure). */
  background: var(--fluo);
  color: var(--fg);
  /* Repassé en noir (demande de Louis, retour en arrière sur le blanc). */
  --fg: var(--ink);
  --fg-secondary: rgba(20, 22, 26, 0.68);
  border: none;
  border-radius: 16px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  /* Largeur de carte en mobile (carrousel) : une carte pleine + un aperçu de la
     suivante qui dépasse légèrement, pour signaler qu'on peut scroller. Neutralisé
     à partir de 640px, où .howto-grid redevient une grille (voir plus bas). */
  flex: 0 0 82%;
  max-width: 300px;
  scroll-snap-align: center;
}
/* Badge d'icône en rond noir/clair (plutôt que fluo) : c'est maintenant la
   card entière qui porte la couleur (voir ci-dessous), le badge reste neutre
   pour rester lisible quelle que soit la couleur de la card. */
.howto-icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.howto-icon svg { width: 22px; height: 22px; stroke-width: 2.1; }
/* Couleurs fluo alternées sur les 4 étapes de pose (demande de Louis). */
.howto-card:nth-child(4n+1) { background: var(--fluo); }
.howto-card:nth-child(4n+2) { background: var(--fluo-pink); }
.howto-card:nth-child(4n+3) { background: var(--fluo-blue); }
.howto-card:nth-child(4n+4) { background: var(--fluo-green); }
.howto-step { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-secondary); margin: 0 0 6px; }
.howto-card-title { font-size: 16px; font-weight: 600; color: var(--fg); margin: 0 0 10px; }
.howto-card-text { font-size: 13px; line-height: 1.55; color: var(--fg-secondary); margin: 0 0 16px; flex: 1; }
.howto-link { font-size: 13px; font-weight: 600; color: var(--fg); }
.howto-link:hover { text-decoration: underline; }

/* 2 colonnes dès 640px (mobile large / tablette en portrait) : les 4 colonnes,
   avant cette correction, s'y déclenchaient déjà et écrasaient chaque carte sur
   une largeur minuscule — inconfortable à lire, et proche du point où le
   contenu peut déborder. Les 4 colonnes complètes n'arrivent qu'à partir de
   1024px, quand il y a vraiment la place. */
@media (min-width: 640px) {
  /* Retour à une grille classique (plus de carrousel) : la place ne manque plus
     pour afficher les cartes côte à côte sans scroller. */
  .howto-grid { display: grid; grid-template-columns: repeat(2, 1fr); overflow-x: visible; }
  .howto-card { flex: initial; max-width: none; scroll-snap-align: none; }
}
@media (min-width: 1024px) {
  .howto-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Page Guide configurateur (article) ---------- */
.article-page { padding-top: 40px; }
.article-hero {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 48px;
}
.article-hero-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 18px;
}
.article-hero-top h1 {
  font-family: 'Anton', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 560px;
}
.article-hero-intro {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0;
  max-width: 400px;
}
@media (min-width: 860px) {
  .article-hero-top { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 40px; }
}

/* ---------- Page Guide configurateur : étapes image + texte en alternance ---------- */
.guide-steps { display: flex; flex-direction: column; gap: 56px; }
.guide-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
.guide-step-media {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px;
  overflow: hidden;
}
.guide-step-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
/* Les captures plus petites (ex. bloc prix) n'ont pas besoin d'autant de place :
   on les laisse respirer dans leur cadre plutôt que de les étirer en pleine largeur. */
.guide-step-media--compact { display: flex; align-items: center; justify-content: center; padding: 28px 10px; }
.guide-step-media--compact img { width: auto; max-width: 100%; }
.guide-step-content p.howto-step { margin: 0 0 8px; }
.guide-step-content h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.1;
  color: var(--fg);
  margin: 0 0 14px;
}
.guide-step-content p { font-size: 14px; line-height: 1.6; color: var(--fg-secondary); margin: 0 0 14px; }
.guide-step-content p:last-child { margin-bottom: 0; }

@media (min-width: 860px) {
  .guide-step { grid-template-columns: 1fr 1fr; gap: 56px; }
  .guide-step--reverse .guide-step-media { order: 2; }
  .guide-step--reverse .guide-step-content { order: 1; }
}

.article-cta-block { margin-top: 64px; text-align: left; }
.article-cta-block .howto-title { margin-bottom: 10px; }
.article-cta {
  display: inline-block;
  margin-top: 18px;
  background: var(--fluo);
  color: var(--fluo-ink);
  border-radius: 100px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.article-cta:hover { opacity: 0.9; }

/* ---------- Résumé bref du guide, sur la page Configurateur ---------- */
.guide-teaser {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--surface);
  color: var(--fg);
  --fg: var(--ink);
  --fg-secondary: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  margin-top: 64px;
}
.guide-teaser-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--fluo);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.guide-teaser-icon svg { width: 20px; height: 20px; stroke-width: 2.1; }
.guide-teaser-icon { background: var(--fluo-blue); }
.guide-teaser h2 { font-size: 16px; font-weight: 600; color: var(--fg); margin: 0 0 6px; }
.guide-teaser p { font-size: 13.5px; line-height: 1.55; color: var(--fg-secondary); margin: 0 0 10px; }
.guide-teaser a { font-size: 13px; font-weight: 600; color: var(--fg); }
.guide-teaser a:hover { text-decoration: underline; }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%; text-align: left;
  background: none; border: none;
  padding: 16px 4px;
  font-size: 14px; font-weight: 600; color: var(--fg);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; font-family: inherit;
}
.faq-toggle { font-size: 18px; color: var(--fg-secondary); flex-shrink: 0; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-item.open .faq-answer { max-height: 260px; }
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-answer p { padding: 0 4px 16px; margin: 0; font-size: 13.5px; }

.technique-intro { font-size: 13.5px; }
.technique-list { padding-left: 18px; margin: 0; }
.technique-list li { margin-bottom: 10px; font-size: 13.5px; }

.swatches { display: flex; gap: 10px; }
.swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.swatch.selected { border-color: var(--fluo); }

/* Dimensions : champs texte avec unité correctement alignée */
.input-with-unit { position: relative; }
.input-with-unit input[type="number"] {
  width: 100%;
  padding: 10px 40px 10px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  font-family: inherit;
}
.input-with-unit .unit {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px;
  color: var(--fg-secondary);
  pointer-events: none;
}
.dimension-max { font-size: 11px; color: var(--fg-secondary); margin: 8px 2px 0; }

/* Visuels multiples */
.visuels-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.visuel-tab-add {
  padding: 7px 14px;
  border-radius: 100px;
  border: 1.5px dashed var(--border-strong, var(--anthracite-soft));
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--fg-secondary);
}
.field-help { font-size: 11px; color: var(--fg-secondary); margin: 6px 2px 0; }

textarea#text-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 64px;
}

/* Dropzone photo installation */
.photo-dropzone {
  position: relative;
  border: 1.5px dashed var(--anthracite-soft);
  border-radius: 8px;
  padding: 24px 14px;
  text-align: center;
  background: rgba(255,255,255,0.4);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.photo-dropzone:hover, .photo-dropzone.has-file { border-color: var(--fluo); background: rgba(215, 255, 58, 0.08); }
.photo-dropzone input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
/* Badge rond rempli (style cartoon, demande de Louis) autour de l'icône des
   zones de dépôt de fichier — remplace l'icône seule, sans fond. */
/* Couleur du badge retirée (demande de Louis) : icône seule, sans fond. */
.dropzone-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: none; color: var(--fg-secondary);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
}
.dropzone-icon svg { width: 22px; height: 22px; stroke-width: 2.1; }
.photo-dropzone-title { font-size: 13px; font-weight: 600; margin: 0 0 3px; }
.photo-dropzone-sub { font-size: 11px; color: var(--fg-secondary); margin: 0; }

/* Interrupteurs sens / type de fichier */
.toggle-group { display: flex; gap: 8px; }
.toggle-btn {
  flex: 1;
  text-align: center;
  padding: 9px 6px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.toggle-btn.active {
  border-color: var(--fluo);
  background: rgba(215, 255, 58, 0.18);
  font-weight: 600;
}

/* Tableau quantité × délai */
.pricing-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 12px; }
.pricing-table { width: 100%; border-collapse: collapse; min-width: 320px; }
.pricing-table th, .pricing-table td {
  text-align: center;
  padding: 8px 4px;
  font-size: 11.5px;
  border: 1px solid var(--border);
}
.pricing-table thead th {
  font-weight: 600;
  color: var(--anthracite);
  background: rgba(255,255,255,0.5);
}
.pricing-table thead th span { display: block; font-weight: 400; color: var(--fg-secondary); font-size: 10px; }
.pricing-table tbody th {
  font-weight: 500;
  font-size: 12px;
  background: rgba(255,255,255,0.35);
}
.pricing-table td {
  font-weight: 600;
  cursor: pointer;
  background: var(--surface);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pricing-table td:hover { background: rgba(215, 255, 58, 0.12); }
.pricing-table td.selected {
  background: rgba(215, 255, 58, 0.28);
  border-color: var(--fluo);
}

.delivery-info {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--fg-secondary);
}
.delivery-info strong { color: var(--fg); font-weight: 600; }

/* Barre de prix : même comportement sur tous les formats (largeur du formulaire, coins arrondis, légère marge en bas) */
.sticky-price-bar {
  position: sticky;
  bottom: 12px;
  z-index: 60;
  margin-top: 24px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.sticky-price-inner {
  width: 100%;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sticky-price-label { display: block; font-size: 11.5px; color: var(--fg-secondary); }
.sticky-price-amount { display: block; font-size: 21px; font-weight: 600; }
.sticky-delivery-date { display: block; font-size: 10.5px; color: var(--fg-secondary); margin-top: 2px; }
.sticky-delivery-date strong { color: var(--fg); font-weight: 600; }
.btn-compact { width: auto; padding: 12px 24px; white-space: nowrap; }

.price-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 0 16px;
}
.price-row .amount { font-size: 26px; font-weight: 600; }

.btn-primary {
  width: 100%;
  background: var(--fluo);
  color: var(--fluo-ink);
  border: none;
  border-radius: 100px;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

@media (min-width: 860px) {
  .simulator-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
}

/* ==========================================================================
   Ce qui suit vient de maquette-import-fichier-robbie.html : styles propres
   à la page Vérificateur (zone de dépôt du fichier, rapport de vérification).
   ========================================================================== */

/* Dropzone principale d'import du fichier lettrage */
.upload-dropzone {
  position: relative;
  border: 1.5px dashed var(--anthracite-soft);
  border-radius: 8px;
  padding: 36px 16px;
  text-align: center;
  background: rgba(255,255,255,0.5);
  color: var(--fg);
  --fg: var(--ink);
  --fg-secondary: var(--text-secondary);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.upload-dropzone:hover, .upload-dropzone.has-file { border-color: var(--fluo); background: rgba(215, 255, 58, 0.08); }
.upload-dropzone input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.upload-dropzone svg { width: 30px; height: 30px; color: var(--fg-secondary); margin-bottom: 10px; }
.upload-dropzone-title { font-size: 14px; font-weight: 600; margin: 0 0 4px; word-break: break-word; }
.upload-dropzone-sub { font-size: 11.5px; color: var(--fg-secondary); margin: 0; }

/* Rapport de vérification automatique */
.verif-report { margin-top: 14px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); color: var(--ink); --fg: var(--ink); --fg-secondary: var(--text-secondary); }
.verif-report-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  font-size: 13px; font-weight: 600;
  background: rgba(20,22,26,0.04);
}
.verif-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--anthracite-soft); flex-shrink: 0; }
.verif-status-dot.conforme { background: #2f9e44; }
.verif-status-dot.non-conforme { background: #b3261e; }
.verif-status-dot.a-verifier { background: #e8590c; }
.verif-report-list { list-style: none; margin: 0; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.verif-report-list li { font-size: 12.5px; color: var(--fg-secondary); display: flex; gap: 6px; }
.verif-report-list li .verif-icon { flex-shrink: 0; }

/* ==========================================================================
   TIROIR PANIER — mini-panier qui s'ouvre au clic sur l'icône panier du
   header (voir header.php, class="js-open-cart", et le script de footer.php).
   Uniquement visible sur les largeurs où l'icône panier du header existe
   (≥768px) ; sur mobile, le lien "Panier" du menu burger va directement à
   la page /panier/ plutôt que d'ouvrir ce tiroir.
   ========================================================================== */
.cart-overlay {
  /* Sert uniquement à intercepter un clic EN DEHORS du panier pour le refermer
     (voir cartOverlay.addEventListener('click', ...) dans footer.php) : plus
     aucun fond visible ni flouté pour le moment (ni assombrissement, ni
     backdrop-filter) — seul le petit panneau .cart-drawer ci-dessous est
     visible. "pointer-events: none" quand fermé pour ne jamais bloquer de
     clics ailleurs sur la page tant que le panier n'est pas ouvert.
     "top" s'arrête à la même hauteur que le HEADER (pas "inset:0" jusqu'en haut
     de l'écran) : sinon, une fois ouvert, cet overlay passe PAR-DESSUS l'icône
     panier elle-même (son z-index est plus élevé que celui du header) — la
     souris, restée physiquement au même endroit à l'écran, se retrouve donc à
     survoler l'overlay au lieu de l'icône, ce qui referme aussitôt le panier
     (survol perdu), qui réaffiche l'icône en dessous, qui rouvre aussitôt le
     panier (survol retrouvé) : une boucle ouverture/fermeture en continu. En
     laissant le header en dehors de cet overlay, l'icône reste hors de son
     emprise et garde le survol de bout en bout. */
  display: block;
  position: fixed;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 20px + var(--header-h, 58px));
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: transparent;
  pointer-events: none;
}
.cart-overlay.is-open { pointer-events: auto; }
.cart-drawer {
  /* Détachée de tous les bords de l'écran (comme le header lui-même, voir
     "header { margin: 20px 20px 0; }" plus haut) : 20px d'espace à droite et
     en bas, coins arrondis sur les 4 côtés, ombre portée tout autour — un
     vrai panneau flottant, pas un tiroir plein bord qui touche l'écran.
     "top" reprend EXACTEMENT la même formule que .panier-recap plus bas dans
     ce fichier (barre d'admin WordPress + les 20px au-dessus du header + la
     hauteur réelle du header + encore 20px d'espace) : le panier commence
     ainsi vraiment sous le header, jamais par-dessus, quelle que soit la
     hauteur de celui-ci (mesurée en JavaScript dans footer.php). */
  position: fixed;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 20px + var(--header-h, 58px) + 20px);
  right: 20px;
  bottom: 20px;
  width: 100%;
  max-width: 380px;
  /* Blanc fixe (pas "var(--bg)") : le fond de la page est passé au beige
     #f7f6eb (demande de Louis), mais ce panneau flottant doit rester blanc,
     comme avant — "var(--bg)" aurait suivi ce changement malgré lui. */
  background: #ffffff;
  color: var(--fg);
  --fg: var(--ink);
  --fg-secondary: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(20, 22, 26, 0.25);
  overflow: hidden; /* le contenu (en-tête/pied blancs) reste dans les coins arrondis */
  display: flex;
  flex-direction: column;
  /* Glissement d'entrée depuis la droite + fondu, plutôt qu'un pur glissement :
     la carte "détachée" apparaît vraiment en douceur, pas juste poussée depuis
     le bord de l'écran. */
  transform: translateX(calc(100% + 20px));
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.cart-overlay.is-open .cart-drawer {
  transform: translateX(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cart-drawer { transition: none; }
}
.cart-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-drawer-header h2 { font-size: 16px; font-weight: 600; margin: 0; }
.cart-drawer-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  color: var(--anthracite);
}
.cart-drawer-close:hover { background: var(--fluo); color: var(--fluo-ink); }
.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cart-empty {
  margin: 40px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--fg-secondary);
  line-height: 1.6;
}
.cart-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: none; padding-bottom: 0; }
.cart-item-swatch {
  width: 44px; height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title { font-size: 13.5px; font-weight: 600; margin: 0 0 3px; word-break: break-word; }
.cart-item-meta { font-size: 11.5px; color: var(--fg-secondary); margin: 0 0 8px; line-height: 1.5; }
.cart-item-qty {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px 4px;
}
.cart-item-qty span { font-size: 12.5px; font-weight: 600; min-width: 12px; text-align: center; }
.qty-btn {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
}
.qty-btn:hover { background: var(--fluo); }
.cart-item-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  flex-shrink: 0;
}
.cart-item-price { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.cart-item-remove {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--fg-secondary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.cart-item-remove:hover { background: rgba(179, 38, 30, 0.1); color: #b3261e; }
.cart-drawer-footer {
  flex-shrink: 0;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.cart-subtotal {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 600;
  margin-bottom: 12px;
}
.cart-subtotal span:first-child { font-weight: 500; color: var(--fg-secondary); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ==========================================================================
   POP-UP "CONNEXION" — même traitement que le tiroir panier ci-dessus (carte
   détachée des bords, sous le header, sans fond flouté ni assombri, fondu +
   glissement à l'ouverture) : présent uniquement pour un visiteur non connecté
   (voir la condition PHP dans footer.php), ouvert par l'icône "Mon compte" du
   header (class="js-open-compte").
   Contrairement au panier, ce pop-up n'a pas besoin de remplir toute la
   hauteur disponible (un formulaire de connexion est court) : sa hauteur suit
   son contenu, jusqu'à une limite (max-height) au-delà de laquelle il devient
   défilant — utile surtout si l'inscription est activée dans les réglages
   WooCommerce (formulaire de connexion + inscription empilés, plus long).
   ========================================================================== */
.compte-overlay {
  /* "top" s'arrête sous le header, comme .cart-overlay ci-dessus — voir son
     commentaire pour la raison (sinon boucle ouverture/fermeture en continu
     au survol, l'icône compte se retrouvant couverte par cet overlay une fois
     ouvert). */
  display: block;
  position: fixed;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 20px + var(--header-h, 58px));
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: transparent;
  pointer-events: none;
}
.compte-overlay.is-open { pointer-events: auto; }
.compte-drawer {
  position: fixed;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 20px + var(--header-h, 58px) + 20px);
  right: 20px;
  width: 100%;
  max-width: 380px;
  max-height: calc(100vh - (var(--wp-admin--admin-bar--height, 0px) + 20px + var(--header-h, 58px) + 20px) - 20px);
  overflow-y: auto;
  /* Blanc fixe (pas "var(--bg)") : le fond de la page est passé au beige
     #f7f6eb (demande de Louis), mais ce panneau flottant doit rester blanc,
     comme avant — "var(--bg)" aurait suivi ce changement malgré lui. */
  background: #ffffff;
  color: var(--fg);
  --fg: var(--ink);
  --fg-secondary: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(20, 22, 26, 0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(calc(100% + 20px));
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.compte-overlay.is-open .compte-drawer {
  transform: translateX(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .compte-drawer { transition: none; }
}
.compte-drawer-body {
  padding: 20px;
}

/* Restylage du formulaire natif WooCommerce (myaccount/form-login.php), pour
   qu'il reprenne l'apparence des autres champs du site (voir .field plus haut
   dans ce fichier) au lieu de son apparence WooCommerce par défaut. On ne
   touche à aucun fichier PHP de WooCommerce : uniquement du CSS, ce qui reste
   valable même si WooCommerce ajoute d'autres champs plus tard (ex. un champ
   "Entreprise" activé dans les réglages). */
.compte-drawer-body .woocommerce-notices-wrapper { display: block; margin-bottom: 14px; }
.compte-drawer-body .u-columns { display: block; }
.compte-drawer-body .u-column1,
.compte-drawer-body .u-column2 {
  width: 100%;
  float: none;
  margin: 0;
}
.compte-drawer-body .u-column2 {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.compte-drawer-body h2 { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.compte-drawer-body .form-row { margin-bottom: 16px; }
.compte-drawer-body label { display: block; font-size: 12.5px; color: var(--fg-secondary); margin-bottom: 6px; font-weight: 500; }
.compte-drawer-body label .required { color: #b3261e; text-decoration: none; }
.compte-drawer-body input.input-text {
  width: 100%;
  padding: 10px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.compte-drawer-body .woocommerce-form-login__rememberme {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--fg-secondary); font-weight: 400;
  width: auto; margin: 0 0 16px;
}
.compte-drawer-body button[type="submit"] {
  width: 100%;
  background: var(--fluo);
  color: var(--fluo-ink);
  border: none;
  border-radius: 100px;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.compte-drawer-body .woocommerce-LostPassword {
  margin: 12px 0 0;
  font-size: 12.5px;
  text-align: center;
}

/* Mini-menu "Mon compte" pour un client déjà connecté (voir footer.php, bloc
   "else" du pop-up #compteOverlay) : même carte détachée que le formulaire de
   connexion ci-dessus, mais un contenu différent — bonjour, accès rapides,
   déconnexion — donc son propre padding plutôt que .compte-drawer-body. */
.compte-drawer--menu .compte-menu-entete {
  position: relative;
  padding: 20px 44px 16px 20px;
  border-bottom: 1px solid var(--border);
}
.compte-menu-fermer {
  position: absolute;
  top: 14px;
  right: 14px;
}
.compte-menu-bonjour { margin: 0; font-size: 15px; font-weight: 600; }
.compte-menu-liste { list-style: none; margin: 0; padding: 8px; }
.compte-menu-liste li + li { margin-top: 2px; }
.compte-menu-liste a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--fg);
  text-decoration: none;
  transition: background 0.15s ease;
}
.compte-menu-liste a svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--fg-secondary); }
.compte-menu-liste a:hover { background: var(--surface); }
.compte-menu-deconnexion {
  padding: 8px;
  border-top: 1px solid var(--border);
}
.compte-menu-deconnexion a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #b3261e;
  text-decoration: none;
  transition: background 0.15s ease;
}
.compte-menu-deconnexion a svg { width: 18px; height: 18px; flex-shrink: 0; }
.compte-menu-deconnexion a:hover { background: rgba(179, 38, 30, 0.08); }
.compte-drawer-body .woocommerce-LostPassword a { text-decoration: underline; color: var(--fg-secondary); }

/* ==========================================================================
   POP-UP DEVIS SUR MESURE — formulaire, déclenché par les liens
   class="js-open-devis" (header desktop/mobile + pied de page).
   ========================================================================== */
.modal-box--form {
  /* Encore agrandi (640px → 860px, demande de Louis) : avec le formulaire
     maintenant réparti sur 2 colonnes (voir .devis-form-split ci-dessous) et
     des marges resserrées, tout tient sans avoir à scroller sur un écran
     d'ordinateur classique. max-height/overflow restent en sécurité pour les
     petits écrans où ça ne suffirait pas. */
  max-width: 860px;
  max-height: 92vh;
  overflow-y: auto;
  text-align: left;
  position: relative;
  padding: 22px 32px;
}
/* Formulaire encore resserré verticalement (demande de Louis, ça scrollait
   toujours) : titre, textes, labels et champs tous rapprochés. */
#devisFormWrap .modal-title { margin-bottom: 2px; }
#devisFormWrap .modal-text { margin-bottom: 10px; }
#devisFormWrap .field { margin-bottom: 8px; }
#devisFormWrap .field label { margin-bottom: 3px; font-size: 12px; }
#devisFormWrap .field-row { gap: 10px; }
#devisFormWrap .field input[type="text"],
#devisFormWrap .field input[type="email"],
#devisFormWrap .field input[type="tel"],
#devisFormWrap .field select:not(.toolbar-select) {
  padding: 7px 12px;
}
.devis-form-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* "align-items: start" : sans ça, la colonne de droite (textarea) s'étirait
     pour matcher la hauteur de la colonne de gauche, et avec le
     "resize: vertical" du textarea ça faisait déborder/chevaucher le bouton
     "Envoyer ma demande" juste en dessous (demande de Louis : "ça se
     superpose"). Plus de marge en dessous pour bien séparer les deux. */
  align-items: start;
  gap: 18px;
  margin-bottom: 20px;
}
.devis-form-split .photo-dropzone { padding: 6px 14px; }
.devis-form-split .photo-dropzone svg { width: 18px; height: 18px; margin-bottom: 4px !important; }
#devisForm .btn-primary { padding: 11px; font-size: 14px; }
@media (max-width: 640px) {
  .devis-form-split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   POP-UP "COMMENCER MON LETTRAGE" — 3 cards, déclenché par le bouton
   class="js-open-outils" sous le titre de l'accueil. Réutilise le style des
   cards déjà défini pour .hero-cta-card / .hero-cta-icon (ex-grille du hero).
   ========================================================================== */
.modal-box--outils {
  max-width: 760px;
  max-height: 88vh;
  overflow-y: auto;
  text-align: left;
  position: relative;
}
.outils-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
@media (min-width: 640px) {
  .outils-grid { grid-template-columns: repeat(3, 1fr); }
}
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  color: var(--anthracite);
}
.modal-close:hover { background: var(--fluo); color: var(--fluo-ink); }
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 64px;
}
.devis-success {
  text-align: center;
  padding: 30px 10px 10px;
}
.devis-success-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--fluo);
  color: var(--fluo-ink);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 22px;
}
.devis-success p { font-size: 14px; color: var(--fg-secondary); margin: 0; line-height: 1.6; }

/* ==========================================================================
   PAGE PANIER (/panier/) — voir page-panier.php. Le contenu de la liste est
   rempli en JavaScript à partir du panier enregistré (voir footer.php),
   pour rester synchronisé avec le tiroir panier et le configurateur.
   ========================================================================== */
.panier-page { padding: 32px 0 60px; }
.panier-page h1 { font-family: 'Anton', sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 38px); margin: 0 0 4px; }
.panier-page-sub { font-family: 'Noto Serif', serif; font-style: italic; font-size: 14.5px; color: var(--fg-secondary); margin: 0 0 28px; }
.panier-grid { display: flex; flex-direction: column; gap: 24px; }
/* Comme pour .palette-mot-couleur plus haut : "display: flex" (et "display: grid" dans la
   media query ordinateur ci-dessous) l'emporte toujours sur la règle par défaut du
   navigateur "[hidden] { display: none }", même à spécificité égale, car une règle
   d'auteur l'emporte toujours sur une règle "user agent". Sans cette ligne, la liste
   d'articles restait affichée (avec son ancien contenu) par-dessus le message "panier
   vide" dès qu'on retirait le dernier article. Cette règle rend la priorité à "hidden". */
.panier-grid[hidden] { display: none; }
.panier-liste {
  background: var(--surface);
  color: var(--fg);
  --fg: var(--ink);
  --fg-secondary: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px 20px;
}
.panier-ligne {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.panier-ligne:last-child { border-bottom: none; }
.panier-ligne-swatch {
  width: 64px; height: 64px;
  border-radius: 8px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.panier-ligne-info { flex: 1; min-width: 0; }
.panier-ligne-titre { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.panier-ligne-meta { font-size: 12.5px; color: var(--fg-secondary); margin: 0 0 12px; line-height: 1.6; }
.panier-ligne-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.panier-ligne-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  flex-shrink: 0;
}
.panier-ligne-prix { font-size: 16px; font-weight: 600; white-space: nowrap; }
.panier-ligne-remove {
  font-size: 12px; color: var(--fg-secondary);
  background: none; border: none; cursor: pointer; font-family: inherit;
  text-decoration: underline;
}
.panier-ligne-remove:hover { color: #b3261e; }
.panier-recap {
  background: var(--surface);
  color: var(--fg);
  --fg: var(--ink);
  --fg-secondary: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  align-self: flex-start;
}
.panier-recap h2 { font-size: 15px; font-weight: 600; margin: 0 0 16px; }
.panier-recap-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--fg-secondary); margin-bottom: 10px; }
.panier-recap-row.total { font-size: 17px; font-weight: 600; color: var(--fg); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.panier-vide {
  text-align: center;
  padding: 60px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.panier-vide svg { width: 40px; height: 40px; color: var(--fg-secondary); margin-bottom: 14px; }
.panier-vide p { font-size: 14px; color: var(--fg-secondary); margin: 0 0 20px; }
.panier-vide .btn-primary { width: auto; display: inline-block; padding: 12px 26px; text-decoration: none; }

@media (min-width: 860px) {
  .panier-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
  /* Même correction que .preview-panel plus haut : le premier "+20px" est la marge du
     header avec le haut de l'écran (sans lui la carte se collait 20px trop haut et
     finissait recouverte par le bas du header), le second "+20px" est l'espace visible
     voulu entre le header et la carte. */
  .panier-recap { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 20px + var(--header-h, 58px) + 20px); }
}

/* ==========================================================================
   PAGE GUIDE — POSE DE LETTRAGE (/guide-pose/) — voir page-guide-pose.php.
   Réutilise .article-hero / .guide-steps / .article-cta déjà définis pour le
   guide du configurateur, avec ici de petites icônes vectorielles dessinées
   pour chaque étape (pas de captures d'écran possibles pour une pose
   manuelle) plutôt que des photos.
   ========================================================================== */
.step-icon-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-icon-frame svg { width: 46%; height: 46%; }
.guide-step-media--compact .step-icon-frame { aspect-ratio: 16 / 9; }

/* ==========================================================================
   TABLEAUX WOOCOMMERCE PAR DÉFAUT DANS "MON COMPTE" — demande de Louis : le
   détail d'une commande (et d'autres tableaux WooCommerce non personnalisés,
   ex. téléchargements) n'avaient aucun fond, juste les traits des bordures,
   car ces tableaux viennent du gabarit WooCommerce d'origine (pas d'un
   fichier à nous), donc le thème ne leur donnait encore aucun style. Ciblé
   uniquement à l'intérieur de la zone de contenu du compte, pour ne pas
   toucher d'autres tableaux éventuels ailleurs sur le site.
   ========================================================================== */
.woocommerce-MyAccount-content table.shop_table,
.woocommerce-MyAccount-content table.woocommerce-table,
.woocommerce-MyAccount-content table.woocommerce-orders-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 24px;
  font-size: 13.5px;
}
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td,
.woocommerce-MyAccount-content table.woocommerce-table th,
.woocommerce-MyAccount-content table.woocommerce-table td,
.woocommerce-MyAccount-content table.woocommerce-orders-table th,
.woocommerce-MyAccount-content table.woocommerce-orders-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.woocommerce-MyAccount-content table.shop_table th {
  background: var(--bg);
  font-weight: 700;
}
.woocommerce-MyAccount-content table.shop_table tfoot th,
.woocommerce-MyAccount-content table.shop_table tfoot td {
  background: var(--bg);
  font-weight: 700;
}
.woocommerce-MyAccount-content table.shop_table tr:last-child td { border-bottom: none; }

/* Autres zones "Mon compte" repérées sans fond par Louis : adresses de la
   page de détail commande (sortie par défaut de WooCommerce, address),
   tableau "Mes factures" (robbie-woocommerce-compte-menu.php, en inline
   style sans fond), et l'état vide de l'onglet "Devis". */
.woocommerce-MyAccount-content address {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  font-style: normal;
  line-height: 1.6;
}
.robbie-table-factures {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.robbie-table-factures th { background: var(--bg); }
.robbie-table-factures td, .robbie-table-factures th { padding: 12px 16px !important; }
.robbie-compte-vide {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  color: var(--fg-secondary);
}

/* Formulaires WooCommerce par défaut non stylés dans "Mon compte"
   (Informations personnelles, Adresse de facturation/livraison en édition,
   connexion/inscription, réinitialisation du mot de passe) — même logique
   que les tableaux et adresses ci-dessus : fond blanc en carte au lieu
   d'aucun fond. */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-MyAccount-content .woocommerce-address-fields,
.woocommerce-MyAccount-content .woocommerce-ResetPassword,
.woocommerce-MyAccount-content .woocommerce-form-login,
.woocommerce-MyAccount-content .woocommerce-form-register {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 24px;
  max-width: 480px;
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row {
  margin-bottom: 14px;
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm label,
.woocommerce-MyAccount-content .woocommerce-address-fields label {
  display: block;
  font-size: 12.5px;
  color: var(--fg-secondary);
  margin-bottom: 6px;
  font-weight: 500;
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm input,
.woocommerce-MyAccount-content .woocommerce-address-fields input,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm select,
.woocommerce-MyAccount-content .woocommerce-address-fields select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
/* Liste des moyens de paiement enregistrés (table.shop_table déjà stylée
   plus haut) + son bouton "Ajouter un moyen de paiement". */
.woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods + a.button,
.woocommerce-MyAccount-content a.button {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  border-radius: 100px;
  padding: 11px 22px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

/* Messages/notices WooCommerce par défaut dans "Mon compte" (ex. "Aucun
   moyen de paiement enregistré trouvé." sous l'onglet Moyens de paiement) :
   sortie native WooCommerce (classe .woocommerce-info / .woocommerce-message /
   .woocommerce-error), jamais stylée jusqu'ici — juste le trait de couleur
   par défaut, sans fond. */
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-NoticeGroup .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-NoticeGroup .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-NoticeGroup .woocommerce-error {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--fluo-blue);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.5;
  list-style: none;
}
.woocommerce-MyAccount-content .woocommerce-message { border-left-color: var(--fluo-green); }
.woocommerce-MyAccount-content .woocommerce-error { border-left-color: var(--fluo-pink); }
.woocommerce-MyAccount-content .woocommerce-info a.button,
.woocommerce-MyAccount-content .woocommerce-message a.button,
.woocommerce-MyAccount-content .woocommerce-error a.button {
  margin-left: 12px;
}