/*
Theme Name: Equip'Food
Theme URI: https://equip-food.local
Description: Thème enfant Storefront pour Equip'Food — équipement et CHR. Direction « Plan de cuisine » : registre de la fiche technique, dégradé orange du logo réservé à deux usages par page.
Author: Equip'Food
Template: storefront
Version: 6.3.0
Text Domain: equipfood
*/

/* ==========================================================================
   1. Charte
   --------------------------------------------------------------------------
   Anthracite et papier tiède relevés sur le logo. L'orange est un signal
   d'action, jamais une décoration.

   RÈGLE DU DÉGRADÉ — il n'apparaît que deux fois par page :
     1. le bouton « Demander un devis » de l'en-tête, présent partout ;
     2. un unique bloc éditorial (l'appel à l'action métiers de bouche).
   Partout ailleurs, l'orange est plat (--ef-orange). Ne pas ajouter
   d'occurrence sans en retirer une.
   ========================================================================== */

:root {
  /* Blanc, gris, orange. Les gris gardent une pointe de chaleur pour ne pas
     tomber dans le clinique, mais restent des gris. */
  --ef-nuit:        #1f1d1b;
  --ef-nuit-clair:  #35322f;
  --ef-nuit-profond:#141210;

  --ef-blanc:       #ffffff;
  --ef-papier:      #f5f4f2;
  --ef-papier-fonce:#ebe9e6;
  --ef-creme:       #faf9f8;

  --ef-gris-fonce:  #4a4644;
  --ef-cote:        #6f6a68;
  --ef-trait:       #d5d1cd;
  --ef-trait-clair: #e9e6e2;

  /* Orange assombri le 2026-09-14 à la demande de Wanis. L'ancien #ee7623
     n'affichait que 2,90:1 sur blanc et obligeait à poser de l'anthracite sur
     les boutons ; le nouveau monte à 4,60:1 et porte du blanc.

     ATTENTION AU MARRON. Un premier essai à #b23c0a a été rejeté d'un « ça
     vire au marron », et à raison : sa teinte était tombée à 18° avec un reste
     de bleu, ce qui EST la définition d'un marron. Assombrir un orange sans le
     salir demande donc trois choses ensemble — garder la teinte au-dessus de
     25°, mettre le bleu à zéro, et tenir la saturation à 100 %. On ne descend
     alors que la clarté : 54 % pour l'ancien, 38 % ici. */
  --ef-jaune:       #e8861a;   /* accent sur fonds sombres : 6,18:1 sur l'anthracite */
  --ef-orange:      #c25400;   /* teinte 26°, saturation 100 %, clarté 38 % — 4,60:1 */
  --ef-orange-vif:  #d25c00;
  --ef-orange-clair:#e8861a;
  --ef-rouge:       #9c4200;   /* survol : 6,58:1 avec du blanc */

  /* LE DÉGRADÉ NE SERT QUE DEUX FOIS : le voile du hero, et le lettrage du
     logo qui est la marque elle-même. Partout ailleurs, orange plat. */
  --ef-degrade: linear-gradient(135deg, #e8861a 0%, #c25400 46%, #9c4200 100%);
  --ef-voile:   linear-gradient(150deg, rgba(156, 66, 0, 0.88) 0%, rgba(31, 29, 27, 0.88) 68%);

  /* Registre CHR : Bricolage Grotesque porte le caractère, Instrument Sans
     assure la lecture courante, DM Mono la donnée technique. */
  --ef-titre: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --ef-texte: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --ef-mono:  "DM Mono", ui-monospace, Menlo, monospace;

  --ef-largeur: 1280px;

  /* Largeur de la colonne de lecture des pages éditoriales, gouttières
     comprises. Elle vaut 68 signes d'Instrument Sans au corps du texte, mais
     elle est fixée en pixels plutôt qu'en « ch » : l'unité ch se calcule dans
     la police de l'élément qui l'emploie, si bien que le fil d'Ariane, composé
     en DM Mono, obtenait 518 px là où le texte en obtenait 772 — et démarrait
     cent pixels plus à droite que le titre. */
  --ef-mesure: 772px;
  --ef-transition: 0.18s ease;

  /* Échelle des titres de section.
     Les quatre sections de l'accueil tenaient entre 29 et 38 px, soit un
     écart de 1,3× : à ce point de compression, aucune ne domine et la page se
     lit comme une suite de blocs interchangeables. L'échelle est rouverte —
     du simple au double entre la section discrète et la section dominante —
     pour que la hiérarchie se voie sans avoir à la lire. */
  /* Contraste.
     Tant que l'orange de la marque était clair (#ee7623, 2,90:1 sur blanc), il
     fallait une seconde teinte pour tout texte à lire. L'assombrissement du
     2026-09-14 a supprimé ce besoin : --ef-orange tient les 4,5:1 dans les deux
     sens. Reste la seule variante encore utile :

       texte secondaire  #6f6a68  5,33:1 sur blanc, 4,85:1 sur papier */
  /* --ef-orange-texte n'a plus de raison d'être distincte : l'orange de la
     charte est désormais lisible tel quel sur blanc. L'alias reste pour ne pas
     avoir à reprendre dix-neuf déclarations. */
  --ef-orange-texte: var(--ef-orange);
  --ef-cote-lisible: #6f6a68;

  --ef-titre-xl: clamp(2.2rem, 4.6vw, 3.25rem);  /* entrée dans le catalogue */
  --ef-titre-l:  clamp(1.7rem, 3.4vw, 2.4rem);   /* appel à l'action */
  --ef-titre-m:  clamp(1.35rem, 2.2vw, 1.5rem);  /* section courante */
  --ef-titre-s:  clamp(1.2rem, 1.9vw, 1.35rem);  /* section d'appoint */
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body {
  background: var(--ef-blanc);
  color: var(--ef-nuit);
  font-family: var(--ef-texte);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* RÈGLE DE CASSE — les capitales ne servent qu'aux étiquettes courtes :
   navigation, surtitres, boutons, intitulés de caractéristiques. Tout titre
   et tout nom de produit reste en casse mixte : « Bac gastronorme
   polycarbonate GN1/3 — 150 mm » en capitales est un mur, et aucun catalogue
   technique ne compose ainsi. */
h1, h2, h3, h4,
.woocommerce-loop-product__title,
.entry-title,
.woocommerce-products-header__title {
  font-family: var(--ef-titre);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.018em;
  line-height: 1.12;
  color: var(--ef-nuit);
}

/* Tous les liens du site. L'orange de marque n'atteint que 2,90:1 sur blanc :
   il est illisible en petit corps pour une partie des lecteurs, et ce sont
   précisément les liens qu'il faut voir. */
a { color: var(--ef-orange-texte); text-decoration: none; }
a:hover { color: #9c3210; }

/* Aucun arrondi : la direction repose sur l'angle vif. */
input, select, textarea, button,
.button, .ef-bouton, .ef-devis,
.woocommerce ul.products li.product,
.woocommerce .button { border-radius: 0 !important; }

/* Les contrôles de formulaire n'héritent pas de la police du document : sans
   cette règle, ils retombaient sur Source Sans Pro, que Storefront allait
   chercher chez Google pour eux seuls. */
button,
input,
select,
textarea,
.button {
  font-family: var(--ef-texte);
}

.ef-conteneur {
  max-width: var(--ef-largeur);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Étiquette de rubrique : monospace, comme un repère de cartouche. */
.ef-surtitre {
  display: block;
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ef-orange-texte);
}

/* ---- Boutons -------------------------------------------------------------
   Orange plat par défaut. Le dégradé est réservé (voir la règle en tête). */

.ef-bouton {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background: var(--ef-orange);
  /* Blanc depuis que l'orange a été assombri : 4,60:1, contre 2,84:1 pour
     l'anthracite qu'il portait tant que le fond était clair. Le survol
     descend encore le fond et monte le rapport à 6,58:1. */
  color: var(--ef-blanc);
  font-family: var(--ef-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  transition: background var(--ef-transition), color var(--ef-transition);
}
.ef-bouton:hover { background: #b73a10; color: var(--ef-blanc); }

.ef-bouton--fantome {
  background: transparent;
  border: 1px solid var(--ef-cote);
  color: var(--ef-papier);
  font-family: var(--ef-texte);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
}
.ef-bouton--fantome:hover { background: transparent; border-color: var(--ef-blanc); color: var(--ef-blanc); }

/* ==========================================================================
   3. Bandeau supérieur
   --------------------------------------------------------------------------
   Une seule ligne : ce que fait la maison à gauche, le téléphone à droite.
   Le contenu est centré verticalement, ce qui n'était pas le cas.
   ========================================================================== */

/* Dégradé de braise.
   Il court du ton de charte à sa variante de survol, jamais plus clair : le
   texte posé dessus est blanc, et c'est le point le plus clair de la rampe qui
   commande — 4,60:1 pour #c25400, 6,58:1 pour #9c4200 au cœur. Remonter d'un
   ton la ferait passer sous le seuil. */
.ef-bandeau {
  background: linear-gradient(96deg,
    #c25400 0%, #ae4a00 22%,
    #9c4200 50%,
    #ae4a00 78%, #c25400 100%);
  color: var(--ef-blanc);
  font-family: var(--ef-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

/* Trois colonnes plutôt qu'une rangée souple : en flex, l'afficheur se
   centrait dans l'espace laissé par le téléphone, donc à gauche du milieu de
   la page. Les deux colonnes latérales valent « 1fr » chacune, donc la colonne
   du centre tombe exactement au milieu, quelle que soit la largeur des
   actions. */
.ef-bandeau__inner {
  max-width: var(--ef-largeur);
  margin: 0 auto;
  padding: 0 1.5rem;
  min-height: 2.9rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

/* ---- L'afficheur : un champ à la fois ------------------------------------
   Le ruban continu d'avant était le marquee de n'importe quel gabarit : trois
   informations glissaient de front, aucune n'était jamais posée, et il fallait
   les attraper au vol.

   Ici la colonne s'indexe d'un cran toutes les cinq secondes. « steps() » est
   ce qui donne la commutation nette : pas de fondu, pas de glissement adouci.
   Un afficheur de régulateur change de ligne, il ne fait pas de transition.

   Le cycle vaut 2,8 s par champ ; « --ef-champs » porte leur nombre, donc en
   ajouter un allonge le cycle au lieu d'accélérer la lecture. */

.ef-bandeau__defile {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  /* La fenêtre fait exactement une ligne : c'est elle qui masque les huit
     autres, et sa hauteur doit rester identique à celle des <li>. */
  height: 1.6rem;
}

.ef-bandeau__piste {
  --ef-temps: 2.8s;
  animation: ef-afficheur calc(var(--ef-temps) * var(--ef-champs, 9))
             steps(var(--ef-champs, 9)) infinite;
}

/* Au survol on s'arrête : une information qu'on veut relire ne doit pas
   s'échapper. Idem au clavier, quand le focus entre dans le bandeau. */
.ef-bandeau__defile:hover .ef-bandeau__piste,
.ef-bandeau__defile:focus-within .ef-bandeau__piste { animation-play-state: paused; }

/* La translation va jusqu'à -100 % de la colonne entière : le dernier cran
   de « steps » s'arrête donc sur la dernière ligne, et le cycle reboucle. */
@keyframes ef-afficheur {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

.ef-bandeau__engagements {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ef-bandeau__engagements li {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  height: 1.6rem;
  flex: none;
  white-space: nowrap;
}

/* ---- Chaque ligne : un champ de plaque signalétique ---------------------
   L'intitulé gravé en petit, la valeur frappée par-dessus. Les deux tailles
   et les deux graisses font le relief.

   Contraste sur le fond anthracite : l'intitulé à 6,8:1, la valeur à 15,9:1.
   L'écart entre les deux est ce qui porte la hiérarchie. */

/* Intitulé et valeur portent la même couleur : sur un fond aussi clair, tout
   éclaircissement de l'intitulé le ferait passer sous le seuil de lisibilité.
   La hiérarchie se joue donc sur le corps et la graisse, pas sur la teinte. */
.ef-plaque__champ {
  font-family: var(--ef-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ef-blanc);
  opacity: 0.8;
}

.ef-plaque__valeur {
  font-family: var(--ef-titre);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ef-blanc);
}

/* Sans mouvement demandé, l'afficheur ne commute plus : la colonne se couche
   et les neuf champs se parcourent au doigt ou à la molette. */
@media (prefers-reduced-motion: reduce) {
  .ef-bandeau__piste { animation: none; }
  .ef-bandeau__defile { overflow-x: auto; scrollbar-width: none; }
  .ef-bandeau__defile::-webkit-scrollbar { display: none; }
  .ef-bandeau__engagements { flex-direction: row; align-items: center; }
  .ef-bandeau__engagements li { padding-right: 1.4rem; }
}

.ef-bandeau__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
}

/* Sous 720 px, le défilé garde toute la barre et le numéro reste seul à
   droite : c'est la seule action utile à cette largeur.

   Le fondu se resserre en même temps. À 375 px la fenêtre du défilé tombe à
   210 px : deux fondus de 40 px en effaçaient plus du tiers. Seize suffisent
   à adoucir l'entrée sans manger le texte. */
@media (max-width: 720px) {
  .ef-bandeau__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem;
    padding: 0 1rem;
  }
  .ef-bandeau__defile { grid-column: 1; }
  .ef-bandeau__actions { grid-column: 2; }
  .ef-bandeau__tel span { font-size: 0.68rem; }
  .ef-plaque__valeur { font-size: 0.88rem; }
  .ef-plaque__champ { font-size: 0.58rem; letter-spacing: 0.13em; padding-left: 0.5rem; }
  .ef-bandeau__engagements li { gap: 0.45rem; }
}

.ef-bandeau__baseline { margin: 0; line-height: 1.4; }

.ef-bandeau__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  color: var(--ef-blanc);
  font-weight: 600;
  letter-spacing: 0.09em;
  white-space: nowrap;
}
.ef-bandeau__tel:hover { color: var(--ef-jaune); }

@media (max-width: 620px) {
  .ef-bandeau__baseline { display: none; }
  .ef-bandeau__inner { justify-content: flex-end; }
}

/* ==========================================================================
   4. En-tête et logo
   ========================================================================== */

.site-header {
  background: var(--ef-blanc) !important;
  border-bottom: 1px solid var(--ef-trait);
  padding: 0 !important;
  position: relative;
}
.site-header .ef-conteneur {
  display: flex;
  align-items: stretch;
  gap: 2rem;
  min-height: 4.5rem;
}
/* Le rembourrage vertical est porté par le logo et les actions, jamais par
   le conteneur : les onglets doivent descendre jusqu'au filet du bas pour
   qu'il n'existe aucune zone morte entre l'onglet et le mega-menu. */
.site-header .ef-logo,
.site-header .ef-header__actions { padding: 0.9rem 0; }

.ef-logo { display: inline-flex; align-items: center; line-height: 1; }
.ef-logo img { max-height: 54px; width: auto; flex: none; }
.ef-logo__texte {
  font-family: var(--ef-texte);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ef-nuit);
}
/* Le lettrage du logo garde le dégradé : c'est la marque, pas un ornement. */
.ef-logo__food {
  background: var(--ef-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ef-logo__baseline {
  display: block;
  font-family: var(--ef-mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ef-cote);
  margin-top: 0.3rem;
}

.ef-header__actions { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }

/* DÉGRADÉ 1/2 — action principale, présente sur toutes les pages. */
.ef-devis {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.2rem;
  background: var(--ef-orange);
  color: var(--ef-blanc);
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: filter var(--ef-transition);
}
.ef-devis:hover { color: var(--ef-blanc); filter: brightness(1.07); }
.ef-devis__compte {
  min-width: 1.2rem;
  padding: 0 0.3rem;
  background: rgba(255, 255, 255, 0.28);
  font-size: 0.7rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   5. Navigation et mega-menu
   ========================================================================== */

.storefront-primary-navigation { background: transparent !important; }

.ef-nav { margin-left: auto; align-self: stretch; }
.ef-nav ul { list-style: none; margin: 0; padding: 0; }
.ef-nav > ul { display: flex; align-items: stretch; gap: 0.15rem; height: 100%; }
.ef-nav > ul > li { display: flex; }

.ef-nav > ul > li > a {
  display: flex;
  align-items: center;
  padding: 0 0.8rem;
  font-family: var(--ef-texte);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ef-nuit);
  transition: color var(--ef-transition);
}
.ef-nav > ul > li:hover > a,
.ef-nav > ul > li.current-menu-item > a,
.ef-nav > ul > li.current-menu-ancestor > a { color: var(--ef-orange-texte); }

.ef-nav > ul > li.menu-item-has-children > .sub-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  display: none;
  margin-top: -1px;
  background: var(--ef-blanc);
  border-top: 2px solid var(--ef-orange);
  border-bottom: 1px solid var(--ef-trait);
  box-shadow: 0 20px 40px rgba(33, 31, 30, 0.14);
  padding: 2.25rem 0 2.5rem;
}

.ef-nav > ul > li.menu-item-has-children:hover > .sub-menu,
.ef-nav > ul > li.menu-item-has-children:focus-within > .sub-menu,
.ef-nav > ul > li.menu-item-has-children.est-deploye > .sub-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.75rem 2rem;
  max-width: var(--ef-largeur);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.ef-nav .sub-menu > li > a {
  display: block;
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ef-nuit);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--ef-trait);
  margin-bottom: 0.7rem;
}
.ef-nav .sub-menu > li > a:hover { color: var(--ef-orange); }

.ef-nav .sub-menu .sub-menu {
  position: static;
  display: block !important;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.ef-nav .sub-menu .sub-menu > li > a {
  display: block;
  padding: 0.2rem 0;
  font-family: var(--ef-texte);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #5c5654;
  border: 0;
  margin: 0;
}
.ef-nav .sub-menu .sub-menu > li > a:hover { color: var(--ef-orange); }

.ef-nav__bascule {
  display: none;
  background: none;
  border: 1px solid var(--ef-trait);
  padding: 0.5rem 0.65rem;
  cursor: pointer;
}
.ef-nav__bascule span { display: block; width: 20px; height: 2px; background: var(--ef-nuit); }
.ef-nav__bascule span + span { margin-top: 4px; }

/* L'en-tête après l'arrivée du pôle Sandwicherie.
   Sept entrées de menu au lieu de six, et il demandait 1 462 px pour les 1 256
   disponibles : le bouton de devis sortait entièrement de l'écran. Élargir la
   fenêtre n'y change rien, le conteneur étant plafonné à 1 280 px — le débord
   existait donc sur tous les postes.

   On ne retire aucune entrée : les trois pôles, le catalogue complet, les
   guides, la maison et le contact ont chacun leur raison d'être. Ce sont les
   trois éléments compressibles qui cèdent, dans l'ordre de ce qu'ils coûtent
   à perdre — le champ de recherche, l'interlettrage du menu, puis le logo.

   Budget tenu : 190 + 600 + 150 + 156 + gouttières ≈ 1 150 px. */
@media (min-width: 1025px) {
  .ef-nav > ul > li > a {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
  }
  .site-header .ef-conteneur { gap: 1rem; }
  /* « .site-header » en tête : à spécificité égale, la règle de base déclarée
     plus bas dans le fichier l'emportait et le logo restait à 2,5 rem. */
  .site-header .ef-logo--image img { height: 1.85rem; }
  .site-header .ef-header__actions { gap: 0.5rem; }
}

@media (max-width: 1024px) {
  .ef-nav__bascule { display: block; }
  .ef-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ef-blanc);
    border-top: 1px solid var(--ef-trait);
    box-shadow: 0 20px 40px rgba(33, 31, 30, 0.14);
    max-height: 72vh;
    overflow-y: auto;
    padding: 1rem 1.5rem 2rem;
  }
  .ef-nav.est-ouvert { display: block; }
  .ef-nav > ul { display: block; height: auto; }
  .ef-nav > ul > li { display: block; }
  .ef-nav > ul > li > a { display: block; padding: 0.55rem 0; }
  /* Accordéon replié : 56 liens déroulés d'un bloc sont inexploitables au
     doigt. Chaque niveau ne s'ouvre qu'au toucher de son intitulé. */
  .ef-nav > ul > li.menu-item-has-children > .sub-menu,
  .ef-nav > ul > li.menu-item-has-children:hover > .sub-menu {
    position: static;
    display: none;
    grid-template-columns: none;
    box-shadow: none;
    border: 0;
    margin-top: 0;
    padding: 0 0 0.75rem 1rem;
  }
  .ef-nav .sub-menu .sub-menu { display: none !important; padding-left: 0.9rem; }

  .ef-nav > ul > li.menu-item-has-children.est-deploye > .sub-menu { display: block !important; }
  .ef-nav .sub-menu li.est-deploye > .sub-menu { display: block !important; }

  .ef-nav .sub-menu > li > a { border-bottom: 0; margin-bottom: 0.25rem; }
  .ef-nav > ul > li > a,
  .ef-nav .sub-menu > li > a { border-bottom: 1px solid var(--ef-trait-clair); }

  /* Repère d'ouverture sur les intitulés qui portent un niveau inférieur. */
  .ef-nav li.menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .ef-nav li.menu-item-has-children > a::after {
    content: "+";
    font-family: var(--ef-mono);
    font-size: 1rem;
    line-height: 1;
    color: var(--ef-orange);
  }
  .ef-nav li.menu-item-has-children.est-deploye > a::after { content: "\2212"; }
}

/* ==========================================================================
   6. Page d'accueil
   --------------------------------------------------------------------------
   La page est le sommaire du catalogue. Aucune grille de cartes régulière :
   des filets, de la typographie, et des colonnes de largeurs inégales.
   ========================================================================== */

.ef-pleine-largeur { width: 100%; }

/* Storefront enferme le contenu dans .col-full : les sections doivent
   déborder jusqu'aux bords de la fenêtre. */
.ef-pleine-largeur > section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---- Ouverture : ce que fait la maison, et les trois faits qui comptent --- */

/* ---- Sommaire du catalogue ----------------------------------------------
   Un pôle par bande pleine largeur, ses familles réparties en colonnes.
   Les deux pôles côte à côte laissaient une colonne vide sur toute la
   hauteur : « Le froid » compte cinq familles et vingt-quatre sous-familles,
   « Pizzeria » deux et quatre. */

/* auto-fill plutôt qu'auto-fit : avec auto-fit, les deux familles de
   « Pizzeria » s'étireraient sur toute la largeur et ne s'aligneraient plus
   avec les cinq colonnes du pôle du dessus. */

/* ---- Référence mise en avant -------------------------------------------- */

.ef-avant { background: var(--ef-papier); padding: 4rem 0; }

.ef-avant__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 3.5rem;
  align-items: start;
}

.ef-avant__texte h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0.7rem 0 0; }
.ef-avant__accroche {
  margin: 1rem 0 1.6rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #5c5654;
  max-width: 42ch;
}

.ef-avant__specs { margin: 0; display: grid; }
.ef-avant__specs > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--ef-trait);
}
.ef-avant__specs > div:first-child { border-top: 1px solid var(--ef-nuit); }
.ef-avant__specs dt {
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ef-cote);
}
.ef-avant__specs dd {
  margin: 0;
  font-family: var(--ef-mono);
  font-size: 0.85rem;
  color: var(--ef-nuit);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---- Texte de présentation ---------------------------------------------- */

/* Le pied de section réservait 5 rem sous le dernier mot : la page se
   terminait sur 250 px de vide. */
.ef-propos { padding: 3.5rem 0; }
/* Une colonne centrée plutôt que deux : le titre tenait à gauche sur un tiers
   de largeur pendant que la liste occupait le reste, et l'œil devait traverser
   tout le bloc pour relier l'un à l'autre. */
.ef-propos__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.8rem;
  align-items: start;
  max-width: 48rem;
  margin-inline: auto;
}
.ef-propos__intro { text-align: center; }
.ef-propos h2 { font-size: var(--ef-titre-s); margin: 0; }
.ef-propos__texte { max-width: 72ch; display: grid; gap: 1.1rem; }
.ef-propos__texte p { font-size: 1.02rem; line-height: 1.7; color: #4a4442; margin: 0; }

/* Trois paragraphes d'affilée formaient un pavé sans relief, et le lien
   « Décrire un projet » doublait l'appel à l'action de la section suivante.
   La même grammaire que les tableaux de caractéristiques des fiches produits
   donne au bloc une structure lisible : intitulé en monospace, filet, texte. */
.ef-propos__points { margin: 0; display: grid; }
.ef-propos__points > div {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 0.4rem 2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--ef-trait);
}
.ef-propos__points > div:first-child {
  border-top: 2px solid var(--ef-nuit);
  padding-top: 1.4rem;
}
.ef-propos__points dt {
  font-family: var(--ef-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ef-cote);
  padding-top: 0.2rem;
}
.ef-propos__points dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: #4a4442;
  max-width: 62ch;
}

@media (max-width: 720px) {
  .ef-propos__points > div { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
}

/* ---- Lien fléché, seul ornement de la page ------------------------------- */

.ef-lien-fleche {
  font-weight: 600;
  color: var(--ef-orange-texte);
  border-bottom: 1px solid transparent;
}
.ef-lien-fleche::after { content: " \2192"; }
.ef-lien-fleche:hover { border-bottom-color: var(--ef-orange-texte); color: var(--ef-orange-texte); }

@media (max-width: 900px) {
  .ef-avant__grille,
  .ef-propos__grille { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .ef-avant__specs dd { text-align: left; }
  .ef-avant__specs > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ==========================================================================
   7. Boutique
   ========================================================================== */

.woocommerce ul.products li.product {
  background: var(--ef-blanc);
  border: 1px solid var(--ef-trait-clair);
  padding: 0;
  transition: border-color var(--ef-transition), box-shadow var(--ef-transition);
}
.woocommerce ul.products li.product:hover {
  border-color: var(--ef-trait);
  box-shadow: 0 10px 26px rgba(33, 31, 30, 0.09);
}
.woocommerce ul.products li.product a img { margin: 0; background: var(--ef-papier-fonce); }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .ef-reference,
.woocommerce ul.products li.product .ef-badges,
.woocommerce ul.products li.product .price { padding-left: 1rem; padding-right: 1rem; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ef-titre);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.012em;
  padding-top: 0.15rem;
}

.ef-reference {
  display: block;
  font-family: var(--ef-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ef-cote);
  padding-top: 0.9rem;
}

/* Première caractéristique reprise sous le titre, en monospace. */
.ef-apercu-spec {
  display: block;
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  color: var(--ef-cote);
  padding-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce a.button {
  background: var(--ef-orange);
  color: var(--ef-blanc);
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button:hover { background: #b73a10; color: var(--ef-blanc); }

.woocommerce span.onsale {
  background: var(--ef-orange) !important;
  color: var(--ef-blanc) !important;
  font-family: var(--ef-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1.4 !important;
}

/* Titre et description de catégorie */
.woocommerce-products-header__title,
.woocommerce-products-header h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.term-description { color: #5c5654; max-width: 60ch; }

/* Fil d'Ariane et tri : registre technique */
.woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  color: var(--ef-cote);
}
.woocommerce-breadcrumb a { color: var(--ef-cote); }
.woocommerce-breadcrumb a:hover { color: var(--ef-orange); }

/* ---- Fiche produit ---- */
.woocommerce div.product .product_title { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 1.05rem;
  color: #5c5654;
  border-left: 2px solid var(--ef-orange);
  padding-left: 1rem;
}
.woocommerce div.product .sku_wrapper,
.woocommerce div.product .posted_in {
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ef-cote);
}
.woocommerce div.product .sku { color: var(--ef-nuit); }

.woocommerce table.shop_attributes { border: 1px solid var(--ef-trait-clair); border-collapse: collapse; }
.woocommerce table.shop_attributes th {
  background: var(--ef-papier);
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ef-nuit);
  width: 38%;
  border-bottom: 1px solid var(--ef-trait-clair);
}
.woocommerce table.shop_attributes td {
  font-family: var(--ef-mono);
  font-size: 0.82rem;
  font-style: normal;
  color: var(--ef-nuit);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--ef-trait-clair);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--ef-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   8. Pied de page
   ========================================================================== */

.site-footer {
  background: var(--ef-nuit) !important;
  color: var(--ef-trait) !important;
  padding-top: 3.5rem !important;
}
.site-footer a { color: var(--ef-trait); }
.site-footer a:hover { color: var(--ef-orange-clair); }
.site-footer .widget-title, .site-footer h2, .site-footer h3 {
  color: var(--ef-blanc) !important;
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ef-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--ef-nuit-clair);
  padding-top: 1.5rem;
  font-family: var(--ef-mono);
  font-size: 0.74rem;
}
.ef-credit p { margin: 0; }
.ef-credit nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* ==========================================================================
   9. Correctifs Storefront
   ========================================================================== */

.site-header { margin-bottom: 0 !important; }
.page-template-template-pleine-largeur #content { padding-top: 0; }
.page-template-template-pleine-largeur .site-content .col-full { padding-left: 0; padding-right: 0; }
.page-template-template-pleine-largeur .site { overflow-x: hidden; }
.site-footer .site-info a[href*="woocommerce.com"],
.site-footer .site-info a[href*="wordpress.org"] { display: none; }

/* ==========================================================================
   11. En-tête d'archive
   --------------------------------------------------------------------------
   Storefront centre le titre et la description de catégorie. Le registre de
   la fiche technique demande un alignement à gauche et moins d'air.
   ========================================================================== */

.woocommerce .woocommerce-products-header,
.woocommerce-page .woocommerce-products-header {
  text-align: left;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--ef-trait-clair);
}
.woocommerce .woocommerce-products-header__title { margin-bottom: 0.5rem; }
.woocommerce .term-description p:last-child { margin-bottom: 0; }

.woocommerce .woocommerce-result-count { margin-bottom: 0; }
.woocommerce .woocommerce-ordering select {
  border: 1px solid var(--ef-trait);
  padding: 0.4rem 0.6rem;
  background: var(--ef-blanc);
}

/* Fil d'Ariane : discret, séparateurs monospace. */
.woocommerce-breadcrumb { margin-bottom: 1.75rem !important; }

/* ==========================================================================
   12. Pied de page
   --------------------------------------------------------------------------
   Même logique que le sommaire de l'accueil : colonnes typographiques et
   filets, pas de blocs de widgets.
   ========================================================================== */

.ef-pied { padding-bottom: 2.5rem; }

.ef-pied__grille {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2rem;
  padding-bottom: 2.5rem;
}

.ef-pied__titre {
  display: block;
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ef-blanc);
  padding-bottom: 0.7rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--ef-nuit-clair);
}
a.ef-pied__titre:hover { color: var(--ef-orange-clair); }

.ef-pied__colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ef-pied__colonne a { font-size: 0.875rem; line-height: 1.4; color: var(--ef-trait); }
.ef-pied__colonne a:hover { color: var(--ef-orange-clair); }

.ef-pied__faits {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ef-nuit-clair);
}
.ef-pied__faits > div { display: grid; gap: 0.3rem; }
.ef-pied__faits dt {
  font-family: var(--ef-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ef-cote);
}
.ef-pied__faits dd { margin: 0; font-size: 0.875rem; color: var(--ef-trait); }

@media (max-width: 1024px) {
  .ef-pied__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
}
@media (max-width: 720px) {
  .ef-pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-pied__faits { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* ==========================================================================
   13. Pages de service
   ========================================================================== */

.ef-service { width: 100%; }

/* Seul l'en-tête sort du conteneur : il porte un fond, qui doit filer d'un
   bord à l'autre. Le corps, lui, restait tiré en pleine largeur par la même
   règle : son texte commençait à 24 px du bord de l'écran, désaligné du logo
   comme du fil d'Ariane, et les paragraphes bridés à 68ch laissaient 480 px
   de vide à droite. */
/* L'entête ne sort plus du flux : même fond, même colonne que le texte, et un
   filet orange pour l'y rattacher au lieu d'une couture entre deux aplats. */
.ef-service__entete {
  padding: 0.5rem 0 0;
}
/* Le filet est porté par le titre et non par le conteneur : sur le conteneur
   il courait sur toute la colonne, gouttières comprises, donc vingt-quatre
   pixels plus large que le texte de chaque côté. */
/* La marge haute du titre vient de Storefront et résiste à une simple
   déclaration de même poids : le sélecteur reprend le gabarit pour passer
   devant. */
.page-template-template-service .ef-service__entete h1 {
  margin: 0;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--ef-orange);
  line-height: 1.05;
}
/* Le titre s'aligne sur la colonne de lecture : à la gouttière du conteneur
   large, il partait 250 px à gauche du premier paragraphe. */
.ef-service__entete .ef-conteneur {
  max-width: var(--ef-mesure);
  margin-left: auto;
  margin-right: auto;
}
.ef-service__entete h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0.6rem 0 0; }

/* Colonne de lecture centrée : 68ch plus le rembourrage du conteneur. */
.ef-service__corps {
  max-width: var(--ef-mesure);
  margin-left: auto;
  margin-right: auto;
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}
.ef-service__corps > * { max-width: none; }

/* Le bloc de contact est une mise en page à deux colonnes, pas un texte
   courant : la colonne de lecture de 68ch l'étranglait.
   1000px + 48px de gouttières, soit 1048 : en dessous des 1064 px utiles du
   conteneur de Storefront. Au-delà, le corps est rogné par son parent tandis
   que l'en-tête, lui, est centré sur la fenêtre — et les deux se décalent. */
.ef-service__corps:has(.ef-contact) { max-width: calc(1000px + 48px); }
/* Le titre suit la même largeur, sinon il se décale de 170 px du contenu. */
.ef-service:has(.ef-contact) .ef-service__entete .ef-conteneur {
  max-width: calc(1000px + 48px);
}
.ef-service__corps h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 2.5rem 0 0.9rem; }
.ef-service__corps h2:first-child { margin-top: 0; }
.ef-service__corps h3 {
  font-family: var(--ef-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  color: var(--ef-cote);
  margin: 2rem 0 0.7rem;
}
.ef-service__corps p { font-size: 1.02rem; line-height: 1.7; color: #4a4442; margin: 0 0 1.1rem; }
.ef-service__corps ul:not([class]) { margin: 0 0 1.4rem; padding-left: 0; list-style: none; }
.ef-service__corps ul:not([class]) li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.55rem;
  line-height: 1.6;
  color: #4a4442;
}
.ef-service__corps ul:not([class]) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--ef-orange);
}
.ef-chapo { font-size: 1.1rem !important; line-height: 1.6 !important; color: var(--ef-nuit) !important; }

/* ---- Page de contact : texte et formulaire côte à côte ------------------- */

.ef-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 4rem;
  align-items: start;
}
.ef-service__corps .ef-contact { max-width: none; }

.ef-contact__coordonnees { margin: 2rem 0; display: grid; gap: 0.9rem; }
.ef-contact__coordonnees > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--ef-trait-clair);
}
.ef-contact__coordonnees dt {
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ef-cote);
}
.ef-contact__coordonnees dd { margin: 0; font-size: 0.92rem; color: var(--ef-nuit); }
.ef-contact__note { font-size: 0.92rem !important; color: var(--ef-cote) !important; }

.ef-contact__formulaire {
  background: var(--ef-papier);
  border-top: 2px solid var(--ef-nuit);
  padding: 2rem;
}
.ef-contact__formulaire h2 { margin: 0 0 1.5rem !important; font-size: 1.3rem; }

/* ---- Champs de formulaire ------------------------------------------------ */

.ef-formulaire__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }

.wpcf7 label {
  display: block;
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ef-cote);
}
.wpcf7 label span { color: var(--ef-orange-texte); }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.65rem 0.8rem;
  background: var(--ef-blanc);
  border: 1px solid var(--ef-trait);
  border-radius: 0;
  font-family: var(--ef-texte);
  font-size: 0.95rem;
  color: var(--ef-nuit);
  text-transform: none;
  letter-spacing: 0;
}
.wpcf7 textarea { resize: vertical; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
  outline: 0;
  border-color: var(--ef-orange);
  box-shadow: 0 0 0 2px rgba(221, 95, 22, 0.16);
}
.wpcf7 ::placeholder { color: #a8a09e; text-transform: none; letter-spacing: 0; }

.wpcf7 .wpcf7-acceptance label,
.wpcf7 .wpcf7-list-item-label {
  display: inline;
  font-family: var(--ef-texte);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  color: #4a4442;
}
.wpcf7 .wpcf7-list-item { margin: 0; }

.wpcf7 input[type="submit"] {
  width: auto;
  padding: 0.85rem 1.8rem;
  margin-top: 0.5rem;
  background: var(--ef-orange);
  color: var(--ef-blanc);
  border: 0;
  font-family: var(--ef-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--ef-transition);
}
.wpcf7 input[type="submit"]:hover { background: #b73a10; }

.wpcf7 .wpcf7-not-valid-tip { font-size: 0.78rem; color: #b73a10; text-transform: none; letter-spacing: 0; }
.wpcf7 .wpcf7-response-output {
  border: 0;
  border-left: 2px solid var(--ef-orange);
  margin: 1.5rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--ef-blanc);
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .ef-contact { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .ef-formulaire__ligne { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Storefront impose `.site-footer a:not(.button):not(.components-button)`
   en #333, illisible sur l'anthracite du pied (contraste 1,1:1). Il faut
   égaler sa spécificité pour reprendre la main.
   -------------------------------------------------------------------------- */

.site-footer a:not(.button):not(.components-button) {
  color: var(--ef-trait);
  text-decoration: none;
}
.site-footer a:not(.button):not(.components-button):hover {
  color: var(--ef-orange-clair);
  text-decoration: none;
}
.site-footer a.ef-pied__titre:not(.button):not(.components-button) { color: var(--ef-blanc); }
.site-footer a.ef-pied__titre:not(.button):not(.components-button):hover { color: var(--ef-orange-clair); }

/* Le gabarit de service porte son propre bandeau de titre : le rembourrage
   que Storefront ajoute au-dessus ferait une bande vide. */
.page-template-template-service #content { padding-top: 0; }
.page-template-template-service .site-content .col-full { padding-left: 0; padding-right: 0; }
/* Le fil d'Ariane n'a pas à peser autant qu'un titre : il situe, il n'annonce
   pas. Il se cale sur la colonne du texte plutôt que sur la pleine largeur,
   pour que son « Accueil » parte du même bord que le titre en dessous. */
.page-template-template-service .woocommerce-breadcrumb {
  max-width: var(--ef-mesure);
  margin: 0.5rem auto 0 !important;
  padding: 0 1.5rem;
}
.page-template-template-service:has(.ef-contact) .woocommerce-breadcrumb {
  max-width: calc(1000px + 48px);
}

/* ==========================================================================
   14. Signalement des données de démonstration
   --------------------------------------------------------------------------
   Visible tant que EF_DONNEES_DEMO vaut true. À retirer avec la constante,
   le jour où le vrai catalogue est importé.
   ========================================================================== */

.ef-ruban-demo {
  background: repeating-linear-gradient(
    -45deg,
    #3a2a1c, #3a2a1c 12px,
    #33251a 12px, #33251a 24px
  );
  color: #ffd9bd;
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  padding: 0.6rem 0;
  border-bottom: 2px solid var(--ef-orange);
}
.ef-ruban-demo strong {
  color: var(--ef-orange-clair);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ef-avis-demo {
  border-left: 3px solid var(--ef-orange);
  background: var(--ef-papier);
  padding: 0.8rem 1rem;
  margin: 0 0 1.25rem;
  font-family: var(--ef-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  color: #7a4a24;
}

/* ==========================================================================
   15. Schéma produit
   --------------------------------------------------------------------------
   Substitut de photographie : un tracé au filet sur fond papier, la référence
   en monospace, et la mention d'attente. Disparaît dès qu'une vraie photo est
   attachée au produit.
   ========================================================================== */

.ef-schema {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--ef-papier);
  color: var(--ef-trait);
  /* Trame technique discrète, à la même maille que le papier millimétré. */
  background-image:
    linear-gradient(to right, rgba(33, 31, 30, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(33, 31, 30, 0.035) 1px, transparent 1px);
  background-size: 16px 16px;
  overflow: hidden;
}

.ef-schema svg {
  width: 62%;
  height: auto;
  max-height: 68%;
  transition: color var(--ef-transition);
}

.ef-schema__ref,
.ef-schema__attente {
  position: absolute;
  font-family: var(--ef-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

.ef-schema__ref {
  top: 0.85rem;
  left: 0.9rem;
  font-size: 0.62rem;
  color: var(--ef-cote);
}

.ef-schema__attente {
  bottom: 0.85rem;
  right: 0.9rem;
  font-size: 0.55rem;
  color: #b3aca9;
}

/* Le tracé s'assombrit au survol de la carte : la grille reste vivante
   même sans photographie. */
.woocommerce ul.products li.product:hover .ef-schema svg { color: var(--ef-orange); }

/* Sur la fiche, le schéma occupe la colonne de gauche à pleine largeur. */
.ef-schema--fiche {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--ef-trait-clair);
}
.ef-schema--fiche svg { width: 58%; }
.ef-schema--fiche .ef-schema__ref { font-size: 0.7rem; top: 1.2rem; left: 1.3rem; }
.ef-schema--fiche .ef-schema__attente { font-size: 0.6rem; bottom: 1.2rem; right: 1.3rem; }

.woocommerce div.product div.images .ef-schema--fiche { margin-bottom: 2em; }

/* --------------------------------------------------------------------------
   Storefront centre le contenu des cartes produit. Le registre de la fiche
   technique demande un alignement à gauche, comme dans une nomenclature.
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .ef-reference,
.woocommerce ul.products li.product .ef-apercu-spec { text-align: left; }

.woocommerce ul.products li.product .button {
  display: inline-block;
  margin: 1rem 1rem 1.2rem;
  padding: 0.55rem 1rem;
}

/* Le ruban de démonstration doit avertir sans casser la direction : filet
   orange et monospace, pas de hachures. */
.ef-ruban-demo {
  background: var(--ef-nuit);
  color: var(--ef-trait);
  border-bottom: 0;
  border-top: 2px solid var(--ef-orange);
  padding: 0.55rem 0;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}
.ef-ruban-demo strong { letter-spacing: 0.16em; }

/* --------------------------------------------------------------------------
   Storefront pose une navigation produit précédent/suivant en position
   absolue, hors du conteneur : elle déborde des bords de la fenêtre et
   n'appartient pas au registre du catalogue. Le fil d'Ariane et le lien de
   catégorie assurent déjà le retour.
   -------------------------------------------------------------------------- */

.storefront-product-pagination { display: none; }

/* ==========================================================================
   16. Emplacements de visuels
   --------------------------------------------------------------------------
   Réserves d'images posées avant les photographies. Chacune affiche son brief
   — sujet et cadrage — pour servir de commande au photographe.
   ========================================================================== */

.ef-visuel {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ef-visuel-ratio, 3 / 2);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
}

.ef-visuel__cadre { display: block; width: clamp(34px, 7%, 64px); }
.ef-visuel__cadre svg { width: 100%; height: auto; display: block; }

.ef-visuel__brief {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.95rem;
  font-family: var(--ef-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}
.ef-visuel__format { flex: 0 0 auto; opacity: 0.72; }

/* Réserves d'images : traitement discret et identique partout. Un aplat de
   couleur vive à la place d'une photo attire l'œil sur ce qui manque ; un fond
   neutre avec un filet de marque signale l'attente sans s'imposer. */
.ef-visuel--clair,
.ef-visuel--sombre,
.ef-visuel--braise {
  background: var(--ef-papier);
  border: 1px solid var(--ef-trait-clair);
  color: var(--ef-trait);
}

.ef-visuel--clair .ef-visuel__brief,
.ef-visuel--sombre .ef-visuel__brief,
.ef-visuel--braise .ef-visuel__brief { color: var(--ef-cote); }

/* Filet de marque en tête, seule touche de couleur. */
.ef-visuel--clair::before,
.ef-visuel--sombre::before,
.ef-visuel--braise::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--ef-orange);
  display: block;
}

/* ==========================================================================
   17. Accueil — registre cuisine
   --------------------------------------------------------------------------
   Le dégradé n'est plus un accent posé sur des boutons : il devient une
   matière, en grands aplats et en voile sur les visuels.
   ========================================================================== */

/* ---- Hero : photographie d'ambiance sous voile de braise ----------------- */

.ef-hero-cuisine {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(78vh, 620px);
  background: var(--ef-nuit);
  color: var(--ef-creme);
  overflow: hidden;
}

.ef-hero-cuisine__fond { position: absolute; inset: 0; z-index: -2; }
.ef-hero-cuisine__fond .ef-visuel {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
}
.ef-hero-cuisine__fond .ef-visuel__brief { justify-content: flex-end; }
.ef-hero-cuisine__fond .ef-visuel::before { display: none; }

/* Le voile : c'est lui qui donne la chaleur et rend le texte lisible. */
.ef-hero-cuisine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ef-voile);
}

/* Le conteneur porte « margin: 0 auto », ce qui annule l'étirement du
   parent en grille : sans width 100 %, il se réduit à son contenu. */
.ef-hero-cuisine__texte { width: 100%; padding: 4rem 1.5rem; }
.ef-hero-cuisine__texte .ef-surtitre { color: var(--ef-jaune); }
.ef-hero-cuisine h1 {
  color: var(--ef-blanc);
  font-size: clamp(2.1rem, 5vw, 3.8rem);
  line-height: 1.03;
  margin: 0.8rem 0 0;
  max-width: 20ch;
  text-shadow: 0 2px 24px rgba(22, 15, 12, 0.35);
}
.ef-hero-cuisine p {
  margin: 1.3rem 0 0;
  max-width: 46ch;
  font-size: 1.06rem;
  line-height: 1.6;
  color: rgba(253, 247, 241, 0.9);
}
.ef-hero-cuisine__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem !important; }

/* ---- Bande de chiffres, sous le hero ------------------------------------
   Le procédé — quatre chiffres alignés sous une bannière — est un classique
   du secteur. Ce qui l'empêche de ressembler à tous les autres tient à trois
   écarts : les cellules sont cadrées à gauche comme le reste de la page et
   non centrées, le chiffre est composé dans la police de titre avec son
   unité en mono (le couple qui sert déjà aux cotes produits), et le filet
   orange remplace la pastille sous icône.

   Les deux premiers chiffres sont comptés en base à chaque affichage : ils
   suivent le catalogue sans que personne ait à les mettre à jour.
   ------------------------------------------------------------------------ */

.ef-chiffres { background: var(--ef-nuit-profond); }

.ef-chiffres__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Les filets séparateurs appartiennent à la cellule suivante, pas à la
   précédente : la dernière n'en traîne donc pas un dans le vide. */
.ef-chiffre + .ef-chiffre { border-left: 1px solid rgba(213, 209, 205, 0.14); }

.ef-chiffre__lien {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.15rem 0.9rem;
  padding: 1.5rem 1.8rem 1.45rem;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background var(--ef-transition), border-color var(--ef-transition);
}
.ef-chiffres__liste > .ef-chiffre:first-child .ef-chiffre__lien { padding-left: 0; }

.ef-chiffre__icone {
  grid-row: 1 / 3;
  color: var(--ef-orange);
  margin-top: 0.45rem;
  transition: color var(--ef-transition);
}

.ef-chiffre__valeur {
  font-family: var(--ef-titre);
  font-size: clamp(1.9rem, 3.1vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ef-blanc);
  letter-spacing: -0.02em;
}
.ef-chiffre__unite {
  font-family: var(--ef-mono);
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ef-jaune);
  margin-left: 0.3em;
  vertical-align: 0.55em;
}

.ef-chiffre__libelle {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ef-trait);
  max-width: 22ch;
}

.ef-chiffre__lien:hover,
.ef-chiffre__lien:focus-visible {
  background: rgba(238, 118, 35, 0.07);
  border-left-color: var(--ef-orange);
}
.ef-chiffre__lien:hover .ef-chiffre__icone,
.ef-chiffre__lien:focus-visible .ef-chiffre__icone { color: var(--ef-jaune); }

/* Variante claire : la même bande au fil d'une page de contenu.
   Deux colonnes et non quatre — les requêtes média portent sur la fenêtre, pas
   sur la colonne de texte, qui reste étroite même sur grand écran. */
.ef-chiffres--papier {
  background: var(--ef-papier);
  margin: 2rem 0 2.6rem;
  padding: 0.4rem 1.6rem;
}
.ef-chiffres--papier .ef-chiffres__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ef-chiffres--papier .ef-chiffre + .ef-chiffre { border-left: 0; }
.ef-chiffres--papier .ef-chiffre:nth-child(even) { border-left: 1px solid var(--ef-trait); }
.ef-chiffres--papier .ef-chiffre:nth-child(n + 3) { border-top: 1px solid var(--ef-trait); }
.ef-chiffres--papier .ef-chiffre__lien { padding: 1.7rem 1.4rem; }
.ef-chiffres--papier .ef-chiffre:nth-child(odd) .ef-chiffre__lien { padding-left: 0; }
.ef-chiffres--papier .ef-chiffre__valeur { font-size: clamp(1.7rem, 2.4vw, 2.1rem); }
.ef-chiffres--papier .ef-chiffre + .ef-chiffre { border-left-color: var(--ef-trait); }
.ef-chiffres--papier .ef-chiffre__valeur { color: var(--ef-nuit); }
.ef-chiffres--papier .ef-chiffre__unite { color: var(--ef-orange-texte); }
.ef-chiffres--papier .ef-chiffre__libelle { color: var(--ef-gris-fonce); }
.ef-chiffres--papier .ef-chiffre__lien:hover { background: rgba(238, 118, 35, 0.06); }

@media (max-width: 1000px) {
  .ef-chiffres__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* En deux colonnes, la troisième cellule ouvre une ligne : c'est elle qui
     perd son filet gauche, pas la deuxième. */
  .ef-chiffre + .ef-chiffre { border-left: 0; }
  .ef-chiffre:nth-child(even) { border-left: 1px solid rgba(213, 209, 205, 0.14); }
  .ef-chiffres--papier .ef-chiffre:nth-child(even) { border-left-color: var(--ef-trait); }
  .ef-chiffre:nth-child(n + 3) { border-top: 1px solid rgba(213, 209, 205, 0.14); }
  .ef-chiffres--papier .ef-chiffre:nth-child(n + 3) { border-top-color: var(--ef-trait); }
  .ef-chiffre__lien { padding: 1.3rem 1.4rem; }
  .ef-chiffres__liste > .ef-chiffre:nth-child(odd) .ef-chiffre__lien { padding-left: 0; }
}

@media (max-width: 560px) {
  .ef-chiffres__liste { grid-template-columns: minmax(0, 1fr); }
  .ef-chiffre + .ef-chiffre,
  .ef-chiffre:nth-child(even) { border-left: 0; }
  .ef-chiffre + .ef-chiffre { border-top: 1px solid rgba(213, 209, 205, 0.14); }
  .ef-chiffres--papier .ef-chiffre + .ef-chiffre { border-top-color: var(--ef-trait); }
  .ef-chiffre__lien,
  .ef-chiffres__liste > .ef-chiffre .ef-chiffre__lien { padding: 1.5rem 0; }
  .ef-chiffre__libelle { max-width: none; }

  /* La variante claire passe elle aussi sur une colonne : ses propres règles
     sont plus spécifiques que celles ci-dessus et ne céderaient pas seules. */
  .ef-chiffres--papier { padding: 0.2rem 1.2rem; }
  .ef-chiffres--papier .ef-chiffres__liste { grid-template-columns: minmax(0, 1fr); }
  .ef-chiffres--papier .ef-chiffre:nth-child(even) { border-left: 0; }
  .ef-chiffres--papier .ef-chiffre + .ef-chiffre { border-top: 1px solid var(--ef-trait); }
  .ef-chiffres--papier .ef-chiffre__lien,
  .ef-chiffres--papier .ef-chiffre:nth-child(odd) .ef-chiffre__lien { padding: 1.4rem 0; }
}

/* ---- Référence en avant : visuel, texte, cotes --------------------------- */

.ef-avant { background: var(--ef-blanc); }
.ef-avant__grille {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  grid-template-rows: auto auto;
  gap: 2rem 3rem;
  align-items: start;
}
.ef-avant__visuel { grid-row: 1 / 3; }

/* ---- Bande braise : le dégradé comme matière ---------------------------- */

/* Anciennement en aplat de dégradé : ramenée au gris foncé, l'orange ne
   sert plus que sur l'appel à l'action et le filet de surtitre. */
/* Bande pleine largeur sur photographie de cuisine.
   Le cartouche anthracite avait été introduit parce qu'une bande unie se
   confondait avec le pied de page, lui aussi anthracite. Une photographie
   règle le problème autrement : elle se distingue d'elle-même de l'aplat du
   pied, et donne au bloc la matière qui lui manquait.
   Le bloc est imbriqué dans le conteneur de Storefront, d'où le débordement
   par 100vw pour retrouver toute la largeur de la fenêtre. */
.ef-braise {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 5rem 0 5.25rem;
  /* La photo n'est pas une illustration du propos — le bloc parle d'aller voir
     la cuisine — mais une matière : elle passe sous un voile très couvrant et
     n'apporte que la chaleur et le grain. Recadrée en 16/9 sur la bande
     centrale et compressée à 108 Ko, contre 968 Ko pour l'original carré. */
  background: var(--ef-nuit) url("assets/images/fond-braise.webp") center / cover no-repeat;
  color: var(--ef-blanc);
  border-top: 3px solid var(--ef-orange);
}

/* La photographie est claire — inox et carrelage blanc. Sans voile, le texte
   blanc y serait illisible. Le dégradé reste dense à gauche, sous le texte,
   et s'allège vers la droite pour laisser voir la cuisine. */
.ef-braise::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(20, 18, 17, 0.93) 0%,
    rgba(20, 18, 17, 0.82) 45%,
    rgba(20, 18, 17, 0.55) 100%
  );
}
.ef-braise > .ef-conteneur { position: relative; z-index: 1; }

/* La seconde colonne est dimensionnée par son contenu (« auto ») et l'action
   s'aligne sur le bord droit du cartouche : calée à gauche d'une colonne
   large, elle flottait au milieu, sans rien pour l'ancrer. Le filet posé dans
   la gouttière relie les deux moitiés au lieu de les laisser côte à côte. */
.ef-braise__carte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem);
  gap: 2rem 3.5rem;
  align-items: center;
}

.ef-braise__texte { max-width: 52ch; }

/* Le bouton occupe toute la colonne : à sa largeur de texte, il ne pesait pas
   assez face au titre et laissait la moitié droite flottante. */
.ef-braise__action {
  display: grid;
  justify-items: stretch;
  text-align: right;
  gap: 0.85rem;
  padding-left: 3.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.ef-braise__action .ef-bouton {
  display: block;
  width: 100%;
  text-align: center;
}
.ef-braise__joindre {
  font-family: var(--ef-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--ef-trait);
}
.ef-braise__joindre a { color: var(--ef-blanc); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.ef-braise__joindre a:hover { color: var(--ef-orange-clair); border-bottom-color: var(--ef-orange-clair); }

/* Sous 860 px, la seconde colonne n'a plus la place : le filet vertical
   deviendrait une barre au-dessus du bouton. */
@media (max-width: 860px) {
  .ef-braise { padding: 3.5rem 0 3.75rem; }
  /* Le texte occupe toute la largeur : le voile ne peut plus s'alléger à
     droite sans que la fin des lignes tombe sur la partie claire. */
  .ef-braise::before {
    background: linear-gradient(
      160deg,
      rgba(20, 18, 17, 0.93) 0%,
      rgba(20, 18, 17, 0.86) 100%
    );
  }
  .ef-braise__carte { grid-template-columns: minmax(0, 1fr); }
  .ef-braise__texte { max-width: none; }
  .ef-braise__action {
    justify-items: start;
    text-align: left;
    padding-left: 0;
    border-left: 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
}
.ef-braise .ef-surtitre { color: var(--ef-jaune); }
.ef-braise h2 {
  color: var(--ef-blanc);
  font-size: var(--ef-titre-l);
  margin: 0.7rem 0 0;
  max-width: 18ch;
}
.ef-braise p {
  margin: 1.1rem 0 1.8rem;
  max-width: 48ch;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ef-trait);
}
.ef-braise .ef-visuel--sombre { background: rgba(34, 26, 22, 0.28); }

.ef-bouton--nuit { background: var(--ef-orange); }
.ef-bouton--nuit:hover { background: var(--ef-rouge); }

/* ---- Présentation : texte et visuel vertical ---------------------------- */

.ef-propos { background: var(--ef-papier); }
/* Trois colonnes étaient déclarées pour un visuel qui n'existe plus : la
   troisième restait vide et creusait un tiers de page à droite. */
/* (l'ancienne répartition en deux colonnes est remplacée par la colonne
   centrée déclarée plus haut) */
/* Le lien vers la page « À propos » suit le titre : le bloc résume, la page
   développe. */
.ef-propos__intro h2 { margin-bottom: 1rem; }
.ef-propos__intro p { margin: 0; }
.ef-propos__texte .ef-services { margin-bottom: 0; }
.ef-propos__texte .ef-service-item:first-child { border-top: 2px solid var(--ef-nuit); }

/* ---- Bandeau de catégorie ------------------------------------------------ */

/* Bandeau de catégorie : une bande large et basse. Plafonner par max-height
   ne suffit pas — avec aspect-ratio, la largeur se réduit dans la même
   proportion et l'on obtient un petit bloc au lieu d'une bande. Il faut donc
   neutraliser le ratio et imposer la hauteur. */
/* Photographie en tête de rayon. Le filet orange sous l'image la rattache au
   titre qui suit plutôt que de la laisser flotter, et reprend le trait qui
   souligne déjà les entêtes de section. */
.ef-bandeau-categorie {
  margin: 0 0 2rem;
  border-bottom: 3px solid var(--ef-orange);
  background: var(--ef-papier);
  line-height: 0;
}
.ef-bandeau-categorie img {
  display: block;
  width: 100%;
  height: clamp(180px, 26vw, 300px);
  object-fit: cover;
  /* Les plans de cuisine et les vues de dessus ont leur sujet au centre-bas :
     un cadrage centré couperait les plans de travail. */
  object-position: center 58%;
}
.ef-bandeau-categorie .ef-visuel {
  aspect-ratio: auto;
  width: 100%;
  height: 240px;
}

@media (max-width: 1024px) {
  .ef-propos__visuel { grid-column: 1 / -1; position: static; max-width: 22rem; }
}

@media (max-width: 900px) {
  .ef-hero-cuisine { min-height: 0; }
  .ef-braise__grille,
  .ef-avant__grille,
  .ef-propos__grille { grid-template-columns: minmax(0, 1fr); }
  .ef-avant__visuel { grid-row: auto; }
}

/* Emplacements insérés dans le corps des pages de service. */
.ef-service__corps .ef-visuel { max-width: none; margin: 1.75rem 0 2.25rem; }
.ef-contact__intro .ef-visuel { margin: 2rem 0 1.5rem; }

/* ==========================================================================
   18. Apparitions
   --------------------------------------------------------------------------
   Le masquage est conditionné à « html.ef-anim », posée par un script en tête
   de document. Sans JavaScript — ou si le visiteur a demandé moins
   d'animations — la classe n'existe pas et rien n'est jamais masqué.
   ========================================================================== */

/* Hero : séquence jouée à l'ouverture par une animation CSS autonome.
   Surtout pas de requestAnimationFrame ici — il ne s'exécute pas dans un
   onglet d'arrière-plan, et le titre resterait invisible jusqu'à ce que le
   visiteur revienne sur l'onglet. Une animation se déroule dans tous les cas,
   et « backwards » ne masque qu'une fois l'animation prise en charge. */
@keyframes ef-entree {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.ef-anim .ef-hero-cuisine__texte > * {
  animation: ef-entree 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.ef-anim .ef-hero-cuisine__texte > *:nth-child(1) { animation-delay: 0.10s; }
.ef-anim .ef-hero-cuisine__texte > *:nth-child(2) { animation-delay: 0.20s; }
.ef-anim .ef-hero-cuisine__texte > *:nth-child(3) { animation-delay: 0.32s; }
.ef-anim .ef-hero-cuisine__texte > *:nth-child(4) { animation-delay: 0.44s; }

.ef-anim .ef-hero-cuisine::after {
  animation: ef-voile 1.2s ease backwards;
}
@keyframes ef-voile {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Masquage posé dès l'analyse du document, pas par une classe ajoutée en
   JavaScript : sinon les éléments s'affichent puis disparaissent avant de
   réapparaître. CETTE LISTE DOIT RESTER IDENTIQUE À CELLE DE apparitions.js. */
.ef-anim .ef-chiffre,
.ef-anim .ef-avant__visuel,
.ef-anim .ef-avant__texte,
.ef-anim .ef-avant__specs > div,
.ef-anim .ef-braise__grille > *,
.ef-anim .ef-propos h2,
.ef-anim .ef-propos__texte,
.ef-anim .ef-bandeau-categorie,
.ef-anim .woocommerce-products-header,
.ef-anim .woocommerce ul.products li.product,
.ef-anim .ef-service__corps > *,
.ef-anim .ef-pied__colonne {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Le visuel de présentation est collant : une transformation casserait son
   positionnement. Opacité seule. */
.ef-anim .ef-propos__visuel { opacity: 0; transition: opacity 0.55s ease; }

.ef-anim .est-visible { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ef-anim *,
  .ef-anim .ef-hero-cuisine::after {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Le téléphone du bandeau doit se distinguer des liens de service. */
.ef-bandeau__tel { font-weight: 500; letter-spacing: 0.06em; }
.ef-pied__faits a { text-decoration: none; }

/* ==========================================================================
   19. Grille produits — cartes de hauteur égale
   --------------------------------------------------------------------------
   Storefront dispose les produits en flottants : les rangées ne s'égalisent
   pas, et une désignation sur deux lignes décale tout ce qui suit. On repasse
   en grille, chaque carte occupant toute la hauteur de sa rangée.

   Les photographies fournisseur ont des proportions très différentes — une
   armoire verticale fait 129 × 250, une table bien plus large. On les inscrit
   donc dans un carré fixe en « contain » : jamais de recadrage sur du matériel,
   et une hauteur identique partout.
   ========================================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0 0 2rem;
  padding: 0;
}

/* Storefront pose un clearfix en ::before / ::after sur la liste. Sans effet
   en flottants, mais dans une grille ces pseudo-éléments deviennent des cases
   et consomment la première cellule : la rangée démarrait en colonne 2. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none; display: none; }

/* Storefront pose des largeurs et des marges au pourcentage sur chaque
   colonne : sans cette remise à zéro, la grille est faussée. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  clear: none !important;
  width: 100% !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Zone visuelle : carré, fond papier, image contenue et centrée.
   « scale-down » et non « contain » : les photos viennent des PDF
   fournisseurs et sont petites — 191 des 335 font moins de 250 px de large,
   la plus petite 58 x 143. « contain » les agrandissait jusqu'au bord de la
   case, ce qui les rendait floues. « scale-down » les affiche à leur taille
   réelle tant qu'elles tiennent, et la case garde son gabarit : les cartes
   restent identiques d'un produit à l'autre. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .ef-schema {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: scale-down;
  /* Blanc, comme le fond des photographies fournisseur : un fond gris
     dessinait un rectangle blanc à l'intérieur d'une boîte grise. */
  background: var(--ef-blanc);
  margin: 0;
}
/* Les marges blanches sont désormais rognées à la source : un rembourrage
   généreux recréerait le vide qu'on vient de supprimer. */
.woocommerce ul.products li.product a img { padding: 0.75rem; }

/* Le bouton se cale en pied de carte : les appels à l'action s'alignent
   d'une carte à l'autre quelle que soit la longueur de la désignation. */
.woocommerce ul.products li.product .button {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Hauteur de carte identique d'une page à l'autre.
   Le titre réserve deux lignes, la ligne de marque en réserve une : sans cela
   la hauteur varie selon que la désignation tient sur une ou deux lignes, et
   les grilles n'ont pas le même gabarit d'une catégorie à l'autre.
   Mesuré sur le catalogue : 89 % des désignations tiennent sur une ligne,
   11 % sur deux, aucune sur trois — la limite à deux lignes ne tronque rien.
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* box-sizing est en border-box : la hauteur minimale doit englober le
     rembourrage supérieur du titre, sinon une désignation d'une ligne mesure
     2,4 px de moins qu'une désignation de deux lignes. */
  min-height: calc(2 * 1.22em + 0.15rem);
}

/* ==========================================================================
   20. Hero — diaporama d'ambiance
   --------------------------------------------------------------------------
   La photographie occupe tout le bandeau. Le voile assombrit surtout la
   gauche, là où se pose le titre : un assombrissement uniforme éteindrait
   l'image, et sans voile le texte deviendrait illisible sur les zones claires.
   ========================================================================== */

.ef-diapo { position: absolute; inset: 0; }

.ef-diapo__vue {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.ef-diapo__vue.est-active { opacity: 1; }

/* Une seule photographie : elle reste affichée, sans transition inutile. */
.ef-diapo[data-nombre="1"] .ef-diapo__vue { opacity: 1; transition: none; }

/* Les textes se superposent dans la même case de grille : empilés dans le
   flux, ils décaleraient le titre et les boutons à chaque changement de vue.
   La hauteur du bloc est celle du texte le plus long, donc rien ne bouge. */
.ef-diapo-textes { display: grid; }
.ef-diapo-texte {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms ease, visibility 700ms;
}
.ef-diapo-texte.est-active { opacity: 1; visibility: visible; }

/* Sans JavaScript, aucune vue n'est permutée : la première doit rester
   lisible. Elle porte déjà « est-active » à l'impression du HTML. */
@media (prefers-reduced-motion: reduce) {
  .ef-diapo-texte { transition: none; }
}

/* Voile directionnel : dense à gauche sous le texte, transparent à droite
   pour laisser voir la cuisine. */
.ef-hero-cuisine::after {
  background:
    linear-gradient(100deg,
      rgba(20, 14, 11, 0.92) 0%,
      rgba(20, 14, 11, 0.78) 34%,
      rgba(20, 14, 11, 0.30) 62%,
      rgba(20, 14, 11, 0.12) 100%),
    linear-gradient(0deg, rgba(200, 64, 15, 0.16), rgba(200, 64, 15, 0));
}

@media (max-width: 900px) {
  /* En colonne étroite, le texte couvre toute la largeur : voile uniforme. */
  .ef-hero-cuisine::after {
    background: linear-gradient(180deg, rgba(20, 14, 11, 0.72), rgba(20, 14, 11, 0.9));
  }
}

/* ==========================================================================
   21. Recherche
   ========================================================================== */

/* La loupe est passée à gauche, en repère, et le bouton d'envoi a disparu de
   l'écran : les suggestions s'ouvrent dès la première lettre, il n'y a plus
   rien à cliquer pour chercher. Restait un cadre à angles vifs qui virait à
   l'orange plein au focus — remplacé par un fond neutre et un halo discret. */
.ef-recherche {
  /* Storefront pose « margin-bottom: 1.618em » sur tout formulaire. Le
     centrage portant sur la boîte avec sa marge, le champ remontait de 13 px. */
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.7rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--ef-papier);
  transition: background var(--ef-transition), border-color var(--ef-transition),
              box-shadow var(--ef-transition);
}
.ef-recherche:hover { background: #eceae7; }
.ef-recherche:focus-within {
  background: var(--ef-blanc);
  border-color: var(--ef-orange);
  box-shadow: 0 0 0 3px rgba(238, 118, 35, 0.14);
}

.ef-recherche__loupe {
  flex: none;
  color: var(--ef-cote);
  transition: color var(--ef-transition);
}
.ef-recherche:focus-within .ef-recherche__loupe { color: var(--ef-orange); }

.ef-recherche input[type="search"] {
  /* La largeur n'est qu'un point de départ : « flex » autorise le champ à
     rendre de la place quand l'en-tête en manque, et il reste saisissable. */
  width: clamp(7rem, 14vw, 11rem);
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  font-family: var(--ef-mono);
  font-size: 0.74rem;
  color: var(--ef-nuit);
  -webkit-appearance: none;
  appearance: none;
}
.ef-recherche input[type="search"]:focus { outline: 0; }
.ef-recherche input::placeholder { color: var(--ef-cote); letter-spacing: 0.02em; }
.ef-recherche input::-webkit-search-cancel-button { -webkit-appearance: none; }

.ef-recherche__effacer {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ef-trait);
  color: var(--ef-blanc);
  cursor: pointer;
  transition: background var(--ef-transition);
}
.ef-recherche__effacer:hover { background: var(--ef-nuit); }

/* Le champ existe à deux endroits : dans les actions de l'en-tête pour le
   bureau, en tête du menu déroulant pour l'écran étroit. Un seul est visible
   à la fois — sans cette règle, les deux s'affichaient et la navigation
   passait à la ligne. */
.ef-nav .ef-recherche { display: none; }

@media (max-width: 1260px) {
  .ef-recherche input[type="search"] { width: 8rem; }
}

@media (max-width: 1024px) {
  .ef-header__actions .ef-recherche { display: none; }
  .ef-nav .ef-recherche { display: flex; margin-bottom: 1.25rem; }
  .ef-nav .ef-recherche input[type="search"] { width: 100%; }
}

/* ==========================================================================
   22. Prix
   --------------------------------------------------------------------------
   Le prix est l'information décisive sur un catalogue professionnel : il doit
   se lire d'un coup d'œil. La mention « HT » l'accompagne sans le concurrencer.
   ========================================================================== */

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  display: block;
  margin: 0.5rem 0 0;
  color: var(--ef-nuit);
  font-family: var(--ef-titre);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

/* Suffixe « HT » : présent, mais discret. */
.woocommerce .price .woocommerce-Price-taxLabel,
.woocommerce .price small {
  font-family: var(--ef-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ef-cote);
  margin-left: 0.3rem;
}

.woocommerce .price .woocommerce-Price-currencySymbol { font-weight: 700; }

/* Sur la fiche produit, le prix domine le résumé. */
.woocommerce div.product p.price {
  font-size: 1.9rem;
  margin: 1rem 0 1.25rem;
}

/* Produits sans tarif : la carte garde sa hauteur et annonce le devis. */
.woocommerce ul.products li.product .price:empty::after {
  content: "Prix sur demande";
  font-family: var(--ef-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ef-cote);
}

/* ==========================================================================
   23. Suggestions de recherche
   ========================================================================== */

.ef-recherche { position: relative; }

.ef-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 70;
  min-width: 22rem;
  background: var(--ef-blanc);
  border: 1px solid var(--ef-trait);
  border-top: 2px solid var(--ef-orange);
  box-shadow: 0 18px 40px rgba(31, 29, 27, 0.16);
  max-height: 70vh;
  overflow-y: auto;
}

.ef-suggestions__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--ef-trait-clair);
  color: var(--ef-nuit);
  text-decoration: none;
}
.ef-suggestions__item:hover { background: var(--ef-papier); color: var(--ef-nuit); }

.ef-suggestions__item img,
.ef-suggestions__sans-image {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: var(--ef-papier);
  display: block;
}

.ef-suggestions__texte { display: grid; gap: 0.1rem; min-width: 0; }

.ef-suggestions__ref {
  font-family: var(--ef-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--ef-cote);
}

.ef-suggestions__nom {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  /* Une désignation longue ne doit pas faire grandir la ligne. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ef-suggestions__prix {
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  color: var(--ef-nuit);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ef-suggestions__vide,
.ef-suggestions__tout {
  display: block;
  width: 100%;
  padding: 0.7rem 0.8rem;
  margin: 0;
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-align: left;
  color: var(--ef-cote);
  background: none;
  border: 0;
  cursor: pointer;
}
.ef-suggestions__tout { color: var(--ef-orange-texte); font-weight: 500; }
.ef-suggestions__tout:hover { background: var(--ef-papier); }

@media (max-width: 1024px) {
  .ef-suggestions { min-width: 0; position: static; box-shadow: none; max-height: 40vh; }
}

/* --------------------------------------------------------------------------
   Champ de recherche et bouton de devis : même hauteur, alignés sur la même
   ligne de base. Chacun se dimensionnait sur son propre rembourrage, d'où
   deux blocs de hauteurs différentes côte à côte.
   -------------------------------------------------------------------------- */

/* Les deux éléments ont une hauteur fixe : « stretch » ne les étire donc pas,
   il les colle en haut du bloc, 13 px au-dessus de l'axe du logo et du menu. */
.ef-header__actions { align-items: center; }

.site-header .ef-header__actions .ef-recherche,
.site-header .ef-header__actions .ef-devis {
  height: 2.6rem;
  box-sizing: border-box;
  /* Centrage imposé sur chaque élément : le formulaire de recherche ne suivait
     pas l'alignement du conteneur et restait collé en haut. */
  align-self: center;
}

.site-header .ef-header__actions .ef-devis {
  padding-top: 0;
  padding-bottom: 0;
}

.site-header .ef-header__actions .ef-recherche input[type="search"] {
  padding-top: 0;
  padding-bottom: 0;
}

/* ==========================================================================
   24. Logo
   --------------------------------------------------------------------------
   Le fichier fourni n'existait qu'en texte blanc, prévu pour un fond sombre.
   Une version à texte anthracite a été dérivée pour l'en-tête clair : plus
   besoin du cartouche noir, qui faisait rustine.
   ========================================================================== */

/* « flex: none » et non la valeur par défaut : le logo est un élément flexible
   de l'en-tête, et il se laissait donc comprimer quand le menu s'allongeait.
   L'arrivée du pôle Sandwicherie, une entrée de plus, l'a réduit de 759 px de
   large à 23 — une barre orange illisible. Il ne rétrécit plus ; c'est au menu
   de céder. */
.ef-logo--image {
  display: flex;
  align-items: center;
  align-self: center;
  flex: none;
}

.ef-logo--image img {
  height: 2.5rem;
  width: auto;
  display: block;
}

@media (max-width: 620px) {
  .ef-logo--image img { height: 2.1rem; }
}

/* ==========================================================================
   25. Badges de caractéristiques
   --------------------------------------------------------------------------
   Une grille de catalogue sans repère visuel oblige à ouvrir chaque fiche pour
   comparer. Les badges reprennent des caractéristiques réelles — régime de
   froid, format gastronorme, capacité — pour permettre le tri à l'œil.
   ========================================================================== */

/* Encadrées et remplies d'un aplat, les valeurs formaient un nuage de
   pastilles — le motif générique qu'on trouve sur n'importe quel gabarit. La
   même information tient sur une ligne, dans la typographie technique déjà
   employée par les références et les tableaux de caractéristiques. */
.ef-badges {
  display: block;
  padding-top: 0.5rem;
  font-family: var(--ef-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--ef-cote);
  /* Deux lignes réservées : sans cela une carte à une seule valeur serait
     plus courte et la grille redeviendrait irrégulière. */
  min-height: 2.5rem;
}

.ef-badge { white-space: nowrap; }
.ef-badge + .ef-badge::before {
  content: " · ";
  color: var(--ef-trait);
  white-space: normal;
}

/* La marque reste le premier repère : elle se distingue par la couleur du
   texte, pas par un cartouche. */
.ef-badge--marque { color: var(--ef-nuit); font-weight: 500; }
.woocommerce ul.products li.product:hover .ef-badge--marque { color: var(--ef-orange); }

/* ==========================================================================
   26. Filtres à facettes
   ========================================================================== */

.ef-filtres {
  margin: 0 0 1.75rem;
  border: 1px solid var(--ef-trait-clair);
  background: var(--ef-blanc);
}

.ef-filtres__entete {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
}

.ef-filtres__bascule {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--ef-mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ef-nuit);
}
.ef-filtres__bascule::after {
  content: "+";
  font-size: 1rem;
  line-height: 1;
  color: var(--ef-orange);
}
.ef-filtres__bascule[aria-expanded="true"]::after { content: "\2212"; }

.ef-filtres__compte {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  background: var(--ef-orange);
  color: var(--ef-blanc);
  font-size: 0.65rem;
  border-radius: 999px;
}

.ef-filtres__vider {
  margin-left: auto;
  font-family: var(--ef-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ef-cote);
}
.ef-filtres__vider:hover { color: var(--ef-orange); }

/* align-items: start est indispensable : par défaut chaque facette s'étire à
   la hauteur de la plus haute de sa rangée, ce qui donnait un grand bloc vide
   sous « Régime de froid » (2 valeurs) aligné sur « Format » (6 valeurs). */
.ef-filtres__panneau {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
  gap: 1.9rem 2.25rem;
  padding: 1.5rem 1rem 1.6rem;
  border-top: 1px solid var(--ef-trait-clair);
  background: var(--ef-papier);
}

/* Storefront pose un fond blanc cassé sur tout fieldset. Sur le panneau gris,
   chaque facette devenait un rectangle blanc aux bords flottants. */
.ef-facette {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  background: none;
}

/* Storefront décale tout legend de -0.618em vers la gauche. Dans la colonne
   de filtres, qui masque son débordement, les premières lettres étaient
   rognées : « MARQUE » s'affichait « RQUE ». */
.ef-facette legend {
  display: block;
  width: 100%;
  margin-left: 0;
  padding: 0 0 0.45rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--ef-trait-clair);
  font-family: var(--ef-mono);
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ef-cote);
}

.ef-facette__valeurs { display: grid; gap: 0.28rem; max-height: 11rem; overflow-y: auto; }

.ef-facette__valeur {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  cursor: pointer;
  line-height: 1.3;
}
.ef-facette__valeur input { margin: 0; accent-color: var(--ef-orange); }
.ef-facette__nombre {
  font-family: var(--ef-mono);
  font-size: 0.66rem;
  color: var(--ef-cote);
  font-variant-numeric: tabular-nums;
}

.ef-facette__prix { display: flex; align-items: center; gap: 0.4rem; }
.ef-facette__prix label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; min-width: 0; }
.ef-facette__prix span { color: var(--ef-cote); font-size: 0.78rem; }
.ef-facette__prix input {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--ef-trait);
  background: var(--ef-blanc);
  font-family: var(--ef-mono);
  font-size: 0.78rem;
}
.ef-facette__unite { font-family: var(--ef-mono); color: var(--ef-cote); }

.ef-filtres__actions { display: flex; align-items: flex-end; }
.ef-filtres__actions .ef-bouton { padding: 0.6rem 1.4rem; font-size: 0.72rem; }

/* --- Filtres en colonne (≥ 993 px) ---------------------------------------
   En bandeau horizontal au-dessus de la grille, les huit facettes occupaient
   deux rangées avant le premier produit. En colonne, elles restent visibles
   pendant qu'on parcourt la liste. Sous 993 px la largeur ne permet pas deux
   colonnes : le bandeau repliable reste la mise en page par défaut. */
@media (min-width: 993px) {
  .ef-catalogue {
    display: grid;
    grid-template-columns: 258px minmax(0, 1fr);
    gap: 2.75rem;
    align-items: start;
  }
  .ef-resultats { min-width: 0; }

  /* La colonne suit le défilement : sur 384 références, remonter en haut de
     page pour décocher une marque n'a pas de sens. */
  .ef-outils {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .ef-filtres { margin: 0; border: 0; background: none; }
  .ef-filtres__entete {
    padding: 0 0 0.6rem;
    border-bottom: 2px solid var(--ef-nuit);
  }
  .ef-filtres__panneau {
    display: block;
    padding: 0;
    border-top: 0;
    background: none;
  }

  .ef-facette {
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--ef-trait-clair);
  }
  .ef-facette legend {
    padding: 0;
    margin-bottom: 0.6rem;
    border-bottom: 0;
  }
  /* La colonne défile déjà : une seconde barre de défilement à l'intérieur
     d'une facette de cinq lignes n'apporte rien. */
  .ef-facette__valeurs { max-height: none; overflow: visible; gap: 0.4rem; }

  .ef-filtres__actions { display: block; margin-top: 1.15rem; }
  .ef-filtres__actions .ef-bouton { display: block; width: 100%; text-align: center; }

  /* Le tri revient au-dessus des résultats, à droite du compteur. */
  .ef-resultats .woocommerce-ordering { float: none; margin: 0; }
}

/* ==========================================================================
   27. Vue liste
   ========================================================================== */

/* Tri, compteur et bascule d'affichage sur une seule ligne. */
.ef-barre-resultats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding-bottom: 0.85rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--ef-trait-clair);
}
.ef-barre-resultats .woocommerce-result-count { order: 0; margin: 0 auto 0 0; float: none; }
.ef-barre-resultats .woocommerce-ordering { order: 1; margin: 0; float: none; }
.ef-barre-resultats .ef-vues { order: 2; }

.ef-vues { display: inline-flex; border: 1px solid var(--ef-trait); margin-left: 0; }
.ef-vues__choix {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ef-cote);
}
.ef-vues__choix + .ef-vues__choix { border-left: 1px solid var(--ef-trait); }
.ef-vues__choix.est-actif { background: var(--ef-nuit); color: var(--ef-blanc); }
.ef-vues__choix:hover:not(.est-actif) { color: var(--ef-orange); }

/* --- Disposition en lignes ------------------------------------------------ */

.woocommerce ul.products.ef-vue-liste,
.woocommerce-page ul.products.ef-vue-liste {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--ef-trait-clair);
}

/* Deux rangées explicites, pas une seule.
   Toute la ligne tenait auparavant sur « grid-row: 1 », chaque élément étant
   décalé à la main par une marge ou un « align-self ». Deux éléments d'une
   même colonne se superposaient alors : la case « Comparer » passait sous le
   bouton de devis. Chaque cellule a désormais sa place. */
.woocommerce ul.products.ef-vue-liste li.product {
  display: grid;
  grid-template-columns: 96px minmax(0, 2.2fr) minmax(0, 1.3fr) auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.3rem;
  height: auto;
  border: 0;
  border-bottom: 1px solid var(--ef-trait-clair);
  padding: 0.85rem 1rem;
}
.woocommerce ul.products.ef-vue-liste li.product:hover { box-shadow: none; background: var(--ef-papier); }

.woocommerce ul.products.ef-vue-liste li.product a.woocommerce-LoopProduct-link {
  display: contents;
}

.woocommerce ul.products.ef-vue-liste li.product a img,
.woocommerce ul.products.ef-vue-liste li.product .ef-schema {
  aspect-ratio: 1 / 1;
  object-fit: scale-down;
  width: 96px;
  padding: 0.25rem;
  grid-column: 1;
  grid-row: 1 / 3;
}

.woocommerce ul.products.ef-vue-liste li.product .woocommerce-loop-product__title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
  padding: 0;
  min-height: 0;
  -webkit-line-clamp: 2;
}
.woocommerce ul.products.ef-vue-liste li.product .ef-reference {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  padding: 0;
}
.woocommerce ul.products.ef-vue-liste li.product .ef-badges {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  padding: 0;
  min-height: 0;
}
/* Le cartouche vide n'existe que pour égaliser la hauteur des cartes en
   grille. En liste, il ne fait qu'un trou dans la ligne. */
.woocommerce ul.products.ef-vue-liste li.product .ef-badges--vide { display: none; }
.woocommerce ul.products.ef-vue-liste li.product .price {
  grid-column: 4;
  grid-row: 1 / 3;
  padding: 0;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}
/* La case « Comparer » occupait la seconde rangée sous le bouton : sans elle,
   le bouton se centre sur la hauteur de la ligne au lieu de flotter en haut.
   La classe « add_to_cart_button » est reprise ici parce que sa règle de la
   vue grille a exactement la même spécificité et vient plus loin dans le
   fichier : sans elle, la marge de 1 rem et la largeur pleine l'emportaient,
   et le bouton se décalait de 16 px du bord de la ligne. */
.woocommerce ul.products.ef-vue-liste li.product .button,
.woocommerce ul.products.ef-vue-liste li.product .button.add_to_cart_button,
.woocommerce ul.products.ef-vue-liste li.product .added_to_cart {
  grid-column: 5;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  width: auto;
  margin: 0;
}

/* ==========================================================================
   28. Sélection de devis
   ========================================================================== */

.ef-devis {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.05rem;
  background: var(--ef-orange);
  color: var(--ef-blanc);
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--ef-transition);
}
.ef-devis:hover { background: var(--ef-rouge); color: var(--ef-blanc); }
.ef-devis svg { flex: 0 0 auto; }

.ef-devis__compte {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.28rem;
  background: rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}
/* Une sélection non vide se remarque. */
.ef-devis.est-rempli .ef-devis__compte { background: var(--ef-blanc); color: var(--ef-orange); font-weight: 500; }

@media (max-width: 900px) {
  .ef-devis__libelle { display: none; }
  .ef-devis { padding: 0 0.8rem; }
}

/* --- Bouton d'ajout sur les cartes ---------------------------------------- */

.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart {
  display: block;
  width: calc(100% - 2rem);
  margin: 0.9rem 1rem 1.1rem;
  padding: 0.62rem 0.8rem;
  text-align: center;
}
.woocommerce ul.products li.product .added_to_cart {
  background: var(--ef-nuit);
  color: var(--ef-blanc);
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Retour visuel pendant l'ajout. */
.woocommerce ul.products li.product .button.loading { opacity: 0.75; }
.woocommerce ul.products li.product .button.added { background: var(--ef-nuit); }

/* --- Page de la sélection -------------------------------------------------- */

.ef-bouton--devis { display: inline-block; width: 100%; text-align: center; }

.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td { font-size: 0.9rem; }
.woocommerce-cart table.cart th {
  font-family: var(--ef-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ef-cote);
}

/* ==========================================================================
   29. Comparateur
   ========================================================================== */

.ef-comparer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1rem 1rem;
  font-family: var(--ef-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ef-cote);
  cursor: pointer;
}
.ef-comparer input { margin: 0; accent-color: var(--ef-orange); }
.ef-comparer:hover { color: var(--ef-orange); }
.ef-comparer.est-indisponible { opacity: 0.4; cursor: not-allowed; }

.woocommerce ul.products.ef-vue-liste li.product .ef-comparer {
  grid-column: 5;
  grid-row: 2;
  align-self: start;
  padding: 0;
  justify-content: flex-end;
}

/* --- Barre flottante ------------------------------------------------------ */

.ef-barre-comparaison {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--ef-largeur);
  margin: 0 auto 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--ef-nuit);
  color: var(--ef-trait);
  box-shadow: 0 12px 40px rgba(31, 29, 27, 0.32);
}

.ef-barre-comparaison__compte {
  font-family: var(--ef-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ef-jaune);
  white-space: nowrap;
}
.ef-barre-comparaison__noms {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--ef-trait);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ef-barre-comparaison__vider {
  border: 0;
  background: none;
  color: var(--ef-cote);
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.ef-barre-comparaison__vider:hover { color: var(--ef-blanc); }

@media (max-width: 720px) {
  .ef-barre-comparaison { flex-wrap: wrap; margin-bottom: 0; }
  .ef-barre-comparaison__noms { display: none; }
}

/* --- Tableau -------------------------------------------------------------- */

.ef-comparaison__defilement { overflow-x: auto; }

.ef-comparaison__table { width: 100%; border-collapse: collapse; min-width: 640px; }

.ef-comparaison__table th,
.ef-comparaison__table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--ef-trait-clair);
  text-align: left;
  vertical-align: top;
  font-size: 0.88rem;
}

.ef-comparaison__table thead th {
  border-bottom: 2px solid var(--ef-nuit);
  vertical-align: bottom;
}
.ef-comparaison__table thead img,
.ef-comparaison__sans-image {
  display: block;
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  object-fit: scale-down;
  background: var(--ef-papier);
  margin-bottom: 0.6rem;
}

.ef-comparaison__nom {
  display: block;
  font-family: var(--ef-titre);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--ef-nuit);
}
.ef-comparaison__ref,
.ef-comparaison__prix { display: block; font-family: var(--ef-mono); }
.ef-comparaison__ref { font-size: 0.64rem; letter-spacing: 0.12em; color: var(--ef-cote); margin-top: 0.3rem; }
.ef-comparaison__prix { font-size: 0.85rem; color: var(--ef-nuit); margin-top: 0.4rem; }

.ef-comparaison__table tbody th {
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ef-cote);
  font-weight: 400;
  white-space: nowrap;
}

/* Une ligne où tous les modèles se valent n'aide pas à trancher : on
   l'estompe pour faire ressortir les différences. */
.ef-comparaison__table tr.est-identique th,
.ef-comparaison__table tr.est-identique td { color: var(--ef-cote); background: var(--ef-creme); }

.ef-comparaison__vide { color: var(--ef-cote); }

/* ==========================================================================
   30. Blog
   ========================================================================== */

.blog .site-main,
.single-post .site-main,
.archive.category .site-main { padding-top: 2.5rem; }

/* --- Liste des articles --------------------------------------------------- */

/* La colonne de lecture se centre. Calée à gauche, elle laissait un tiers de
   la page vide à droite sans rien pour l'occuper : il n'y a pas de colonne
   latérale sur ce thème. */
.blog .site-main article,
.archive.category .site-main article {
  border-bottom: 1px solid var(--ef-trait-clair);
  padding-bottom: 2rem;
  margin: 0 auto 2rem;
  max-width: 68ch;
}
.blog .page-header,
.archive.category .page-header { max-width: 68ch; margin: 0 auto 2.5rem; }

.blog .entry-title,
.archive .entry-title { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin: 0 0 0.6rem; }
.blog .entry-title a,
.archive .entry-title a { color: var(--ef-nuit); }
.blog .entry-title a:hover,
.archive .entry-title a:hover { color: var(--ef-orange); }

.blog .entry-content p,
.archive .entry-content p { color: var(--ef-gris-fonce); font-size: 1rem; line-height: 1.65; }

/* --- Article -------------------------------------------------------------- */

/* Idem pour l'article : titre, corps et pied partagent la même colonne
   centrée, sinon le texte flotte contre le bord gauche. */
.single-post .entry-header,
.single-post .entry-content,
.single-post .entry-footer,
.single-post .post-navigation { max-width: 68ch; margin-inline: auto; }

.single-post .entry-header {
  margin-bottom: 2.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--ef-nuit);
}
.single-post .entry-title {
  font-size: clamp(1.8rem, 3.8vw, 2.5rem);
  line-height: 1.14;
  margin: 0.45rem 0 0;
}

.single-post .entry-content p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ef-gris-fonce);
  margin: 0 0 1.35rem;
}
/* Le chapô porte l'article : un cran plus grand, en noir. */
.single-post .entry-content > p:first-of-type {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--ef-nuit);
  margin-bottom: 2rem;
}
/* Un filet au-dessus de chaque titre coupait la colonne tous les deux
   paragraphes. L'espace suffit à séparer les parties. */
.single-post .entry-content h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  line-height: 1.25;
  margin: 3rem 0 1rem;
}
.single-post .entry-content h2 + p { margin-top: 0; }
.single-post .entry-content h3 {
  font-size: 1.1rem;
  margin: 2rem 0 0.7rem;
}
.single-post .entry-content ul:not([class]) { margin: 0 0 1.4rem; padding-left: 0; list-style: none; }
.single-post .entry-content ul:not([class]) li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.6rem;
  line-height: 1.65;
  color: var(--ef-gris-fonce);
}
.single-post .entry-content ul:not([class]) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 1px;
  background: var(--ef-orange);
}
.single-post .entry-content strong { color: var(--ef-nuit); }
.single-post .entry-content a { border-bottom: 1px solid rgba(238, 118, 35, 0.4); }
.single-post .entry-content a:hover { border-bottom-color: var(--ef-orange); }

/* Métadonnées d'article : discrètes, en monospace. */
.entry-meta, .posted-on, .byline {
  font-family: var(--ef-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ef-cote);
}

/* Storefront affiche l'auteur et des liens de navigation peu utiles ici. */
.single-post .author-info,
.single-post .post-navigation .nav-links a::before { display: none; }

/* ==========================================================================
   31. Disponibilité
   ========================================================================== */

.ef-dispo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--ef-mono);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.3;
}

.ef-dispo__point {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.ef-dispo--stock { color: #1f7a44; }
.ef-dispo--stock .ef-dispo__point {
  background: #24a05a;
  /* Halo léger : la pastille se repère sans dominer la carte. */
  box-shadow: 0 0 0 3px rgba(36, 160, 90, 0.16);
}

.ef-dispo--attente { color: #9a6410; }
.ef-dispo--attente .ef-dispo__point { background: #d99413; box-shadow: 0 0 0 3px rgba(217, 148, 19, 0.16); }

.ef-dispo--rupture { color: var(--ef-cote); }
.ef-dispo--rupture .ef-dispo__point { background: var(--ef-trait); }

/* Sur la carte, juste sous le titre. */
.woocommerce ul.products li.product .ef-dispo { padding: 0.5rem 1rem 0; }

/* Sur la fiche, une ligne à part entière. */
.ef-dispo--fiche {
  margin: 0 0 1.25rem;
  font-size: 0.78rem;
  gap: 0.55rem;
}
.ef-dispo--fiche strong { font-weight: 500; }
.ef-dispo__detail {
  color: var(--ef-cote);
  text-transform: none;
  letter-spacing: 0.02em;
}
.ef-dispo__detail::before { content: "— "; }

/* En vue liste, la disponibilité se range sous les badges. */
.woocommerce ul.products.ef-vue-liste li.product .ef-dispo {
  grid-column: 3;
  grid-row: 2;
  padding: 0;
  align-self: start;
}

/* ==========================================================================
   32. Suggestions : rayons
   --------------------------------------------------------------------------
   Une seule lettre ne peut pas désigner un produit précis, mais elle désigne
   souvent un rayon. Les proposer en tête évite de servir sept références
   tirées au hasard d'une famille qui en compte soixante-quatorze.
   ========================================================================== */

.ef-suggestions__titre {
  margin: 0;
  padding: 0.55rem 0.8rem 0.3rem;
  font-family: var(--ef-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ef-cote);
  background: var(--ef-papier);
  border-bottom: 1px solid var(--ef-trait-clair);
}

.ef-suggestions__rayon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--ef-trait-clair);
  color: var(--ef-nuit);
  text-decoration: none;
  font-size: 0.82rem;
}
.ef-suggestions__rayon:hover,
.ef-suggestions__rayon:focus-visible {
  background: var(--ef-papier);
  color: var(--ef-orange-texte);
}
.ef-suggestions__nombre {
  flex: none;
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  color: var(--ef-cote);
}

/* La navigation aux flèches déplace le focus dans le panneau : sans repère
   visible, on ne sait plus où l'on est. */
.ef-suggestions__item:focus-visible {
  background: var(--ef-papier);
  outline: 2px solid var(--ef-orange);
  outline-offset: -2px;
}

/* ==========================================================================
   33. Filtrage à la volée
   --------------------------------------------------------------------------
   Le rechargement est court, mais sans signal la liste semble ne pas réagir
   à la case qu'on vient de cocher. On atténue les résultats le temps de la
   requête, sans les faire disparaître : le repère visuel reste.
   ========================================================================== */

.woocommerce ul.products,
.woocommerce-result-count,
.woocommerce-pagination {
  transition: opacity 180ms ease;
}

.ef-filtrage .woocommerce ul.products,
.ef-filtrage .woocommerce-result-count,
.ef-filtrage .woocommerce-pagination {
  opacity: 0.4;
  pointer-events: none;
}

.ef-filtrage .ef-filtres__bascule { cursor: progress; }

/* « display: grid » sur le panneau l'emportait sur la règle par défaut de
   l'attribut « hidden » : le panneau restait ouvert et le bouton « Filtrer »
   ne faisait rien. */
.ef-filtres__panneau[hidden] { display: none; }

/* Les deux blocs remplacent « .storefront-sorting », qui était un simple
   dégagement de flottants : le tri de WooCommerce flotte à droite. */
.ef-outils::after,
.ef-resultats::after { content: ""; display: table; clear: both; }

.ef-outils { margin-bottom: 0; }

/* Le bouton « Appliquer » n'est retiré que par le script. Sans JavaScript il
   reste en place et le formulaire se soumet comme n'importe quel formulaire. */
.ef-filtres__actions { margin-top: 0.25rem; }

/* ==========================================================================
   34. Vue liste sur écran étroit
   --------------------------------------------------------------------------
   Ce bloc doit rester en fin de feuille.
   La vue liste place chaque élément dans une colonne précise, et plusieurs de
   ces placements sont écrits plus haut, dans les sections « Comparateur » et
   « Disponibilité ». À spécificité égale, c'est la dernière règle qui
   l'emporte : placé à sa position thématique, ce bloc était annulé par
   celles-ci, des colonnes implicites naissaient et le texte se retrouvait
   composé une lettre par ligne.
   ========================================================================== */

@media (max-width: 900px) {
  .woocommerce ul.products.ef-vue-liste li.product {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: none;
    align-items: start;
    row-gap: 0.35rem;
  }
  .woocommerce ul.products.ef-vue-liste li.product a img,
  .woocommerce ul.products.ef-vue-liste li.product .ef-schema {
    width: 72px;
    grid-column: 1;
    grid-row: 1 / 4;
  }
  /* Sous 900 px, la ligne devient une pile : chaque élément prend le rang
     suivant dans la colonne de droite. Les placements explicites de la vue
     large les empileraient les uns sur les autres. */
  /* « add_to_cart_button » et « added_to_cart » sont repris ici pour la même
     raison qu'en vue large : sans eux, le bouton gardait sa colonne 5. La
     grille n'ayant plus que deux colonnes déclarées, trois colonnes
     implicites apparaissaient et le titre tombait à 100 px de large. */
  .woocommerce ul.products.ef-vue-liste li.product .ef-reference,
  .woocommerce ul.products.ef-vue-liste li.product .woocommerce-loop-product__title,
  .woocommerce ul.products.ef-vue-liste li.product .ef-badges,
  .woocommerce ul.products.ef-vue-liste li.product .ef-dispo,
  .woocommerce ul.products.ef-vue-liste li.product .price,
  .woocommerce ul.products.ef-vue-liste li.product .button,
  .woocommerce ul.products.ef-vue-liste li.product .button.add_to_cart_button,
  .woocommerce ul.products.ef-vue-liste li.product .added_to_cart {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
    text-align: left;
    align-self: auto;
    justify-content: flex-start;
    margin-top: 0;
  }
}

/* ==========================================================================
   33. Galerie de la fiche produit
   --------------------------------------------------------------------------
   Les photos des catalogues fournisseurs ne dépassent pas 828 px de large et
   descendent à 58 px. Sans cadre, une photo de 200 x 82 se posait en haut à
   gauche d'une colonne de 416 px, face à une colonne de texte trois fois plus
   haute. Le cadre donne une zone de taille constante d'une fiche à l'autre ;
   l'image y est centrée et jamais agrandie.
   ========================================================================== */

.single-product .woocommerce-product-gallery { position: relative; margin-bottom: 2rem; }

.single-product .woocommerce-product-gallery__wrapper {
  display: grid;
  place-items: center;
  min-height: 360px;
  margin: 0;
  padding: 1.75rem;
  background: var(--ef-blanc);
  border: 1px solid var(--ef-trait-clair);
}

.single-product .woocommerce-product-gallery__image { margin: 0; max-width: 100%; }

.single-product .woocommerce-product-gallery__image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 320px;
  margin: 0 auto;
}

/* La loupe flottait à droite du cadre, détachée de l'image. */
.single-product .woocommerce-product-gallery__trigger {
  top: 0.75rem;
  right: 0.75rem;
  left: auto;
}

/* Repère de désambiguïsation dans les suggestions : « Fours à pizza » nomme
   aussi bien la famille que la sous-famille. */
.ef-suggestions__contexte {
  font-family: var(--ef-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ef-cote);
}
.ef-suggestions__contexte::before { content: " · "; }

/* ==========================================================================
   34. Reprises d'espacement Storefront
   ========================================================================== */

/* Storefront réserve 3,7 em sous le fil d'Ariane, plus 1,4 em de rembourrage
   interne : 77 px entre le fil d'Ariane et le titre de la catégorie, pour une
   ligne de texte de 17 px. */
.storefront-breadcrumb {
  padding: 0.9rem 0;
  margin-bottom: 1.75rem;
}

/* Le champ de prix tenait au pixel près dans la colonne de filtres : le « € »
   touchait le bord. */
@media (min-width: 993px) {
  .ef-facette--prix .ef-facette__prix { gap: 0.3rem; }
  .ef-facette--prix .ef-facette__prix label { flex: 1 1 0; min-width: 0; gap: 0.25rem; }
  .ef-facette--prix .ef-facette__prix input { padding: 0.35rem 0.3rem; }
}

/* ==========================================================================
   35. Rayons de l'accueil
   --------------------------------------------------------------------------
   Deuxième bloc de la page : les deux pôles, et sous chacun ses familles en
   vignettes photo. Une rangée par pôle plutôt qu'une grille unique — « Le
   froid » compte cinq familles contre deux à « Pizzeria », et les mélanger
   laissait des cases vides en fin de ligne.
   ========================================================================== */

/* Rembourrages délibérément inégaux : 64 px partout donnait un métronome.
   La section d'entrée dans le catalogue respire, celle qui l'explique se
   resserre. */
.ef-poles { padding: 6rem 0 6.5rem; background: var(--ef-blanc); }

.ef-poles__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.ef-poles__entete h2 { font-size: var(--ef-titre-xl); line-height: 1.05; margin: 0; }

.ef-poles__pole + .ef-poles__pole { margin-top: 3rem; }

/* Le filet file jusqu'au bord de la fenêtre, alors que le texte reste dans le
   conteneur. Seul écart à la grille de toute la page : au-delà d'un, le
   procédé devient un tic. Le décalage vaut exactement la marge entre le
   conteneur et le bord, donc il n'ajoute aucun défilement horizontal. */
.ef-poles__titre {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-bottom: 0.7rem;
  margin-bottom: 1.75rem;
}
.ef-poles__titre::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(50% - 50vw);
  bottom: 0;
  border-bottom: 2px solid var(--ef-nuit);
}
/* Hors de l'accueil, le filet s'arrête au conteneur : sur une page de
   catégorie, la colonne de résultats n'est pas centrée et le débord
   tomberait de travers. */
.ef-404__pole .ef-poles__titre::after,
.ef-rayons-enfants .ef-poles__titre::after { right: 0; }
.ef-poles__titre a {
  font-family: var(--ef-titre);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ef-nuit);
}
.ef-poles__titre a:hover { color: var(--ef-orange); }
/* Le chiffre est la donnée du catalogue : c'est ce qui distingue ce site d'une
   vitrine. Composé en gris minuscule, il ne disait rien ; posé en gros, en
   monospace, avec son intitulé dessous, il devient un repère graphique — et
   un qui parle du sujet plutôt qu'un ornement. */
.ef-poles__compte {
  display: grid;
  justify-items: end;
  gap: 0.1rem;
  font-family: var(--ef-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ef-cote);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.ef-poles__compte strong {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ef-nuit);
  line-height: 1;
}

/* auto-fill et non auto-fit : avec auto-fit, les deux vignettes de
   « Pizzeria » s'étireraient sur toute la largeur et ne s'aligneraient plus
   avec les cinq du pôle du dessus. */
.ef-poles__rayons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

/* Grille plutôt que pile : la seconde piste absorbe la différence de hauteur
   des bandeaux. « Saladettes & postes de dressage » tient sur trois lignes
   quand « Tables réfrigérées » en occupe une, et les vignettes se terminaient
   à des hauteurs différentes. */
.ef-rayon {
  display: grid;
  grid-template-rows: 190px 1fr;
  min-width: 0;
  color: var(--ef-nuit);
}

/* Zone photo de hauteur fixe : les photos fournisseurs vont de 58 à 828 px de
   large, une hauteur libre donnerait des vignettes de tailles très inégales.
   « scale-down » interdit tout agrandissement, donc tout flou. */
.ef-rayon__photo {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0.75rem;
  background: var(--ef-papier);
  overflow: hidden;
}
.ef-rayon__photo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down;
  transition: transform var(--ef-transition);
}
.ef-rayon:hover .ef-rayon__photo img { transform: scale(1.03); }
.ef-rayon__sans-photo { display: block; width: 100%; height: 100%; }

.ef-rayon__bandeau {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  background: var(--ef-nuit);
  color: var(--ef-blanc);
}
.ef-rayon:hover .ef-rayon__bandeau { background: var(--ef-orange); }

.ef-rayon__nom {
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.35;
}
.ef-rayon__nombre {
  flex: 0 0 auto;
  font-family: var(--ef-mono);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums;
}
.ef-rayon:hover .ef-rayon__nombre { color: rgba(255, 255, 255, 0.8); }

@media (max-width: 620px) {
  .ef-poles__rayons { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
  .ef-rayon { grid-template-rows: 140px 1fr; }
}

/* ==========================================================================
   36. Prestations
   --------------------------------------------------------------------------
   Trois lignes de texte gras d'affilée se lisent mal : rien n'accroche l'œil
   avant le premier mot. L'icône orange sert de point d'entrée à chaque
   entrée, au filet comme les schémas produits — pas d'aplat, pas de pastille.
   ========================================================================== */

.ef-services { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; }

.ef-service-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0.3rem 1.1rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--ef-trait-clair);
}
.ef-service-item:first-child { border-top: 1px solid var(--ef-trait-clair); }

.ef-service-item__icone {
  grid-row: 1 / 3;
  color: var(--ef-orange);
  margin-top: 0.1rem;
}

.ef-service-item strong {
  display: block;
  font-family: var(--ef-titre);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ef-nuit);
  margin-bottom: 0.25rem;
}
.ef-service-item span {
  display: block;
  font-size: 0.97rem;
  line-height: 1.6;
  color: #4a4442;
}

@media (max-width: 560px) {
  .ef-service-item { grid-template-columns: 22px minmax(0, 1fr); gap: 0.3rem 0.8rem; }
  .ef-service-item__icone { width: 22px; height: 22px; }
}

/* ==========================================================================
   37. Demande de devis
   --------------------------------------------------------------------------
   Le récapitulatif reprenait la table par défaut de WooCommerce : hauteurs de
   lignes dictées par le format de chaque photographie, totaux flottant à
   droite d'une moitié de page vide, et un bouton principal souligné comme un
   lien. Tout est repris dans la grammaire du site.
   ========================================================================== */

.woocommerce-cart .woocommerce { max-width: none; }

.woocommerce-cart table.cart {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

.woocommerce-cart table.cart thead th {
  /* L'en-tête portait un aplat gris clair qui formait une bande au-dessus des
     lignes ; le filet du dessous suffit à le poser. */
  background: none;
  padding: 0 0.75rem 0.7rem;
  border-bottom: 2px solid var(--ef-nuit);
  text-align: left;
  vertical-align: bottom;
}

/* WooCommerce alterne le fond une ligne sur deux, et il le pose sur les
   cellules, pas sur la ligne : neutraliser « tr » ne suffisait pas. Un filet
   sépare mieux les lignes et laisse les photographies sur un fond neutre. */
.woocommerce-cart table.cart tbody tr,
.woocommerce-cart table.cart tbody tr:nth-child(2n) { background: none; }
.woocommerce-cart table.cart tbody tr td,
.woocommerce-cart table.cart tbody tr:nth-child(2n) td,
.woocommerce-cart .cart_totals table tr td,
.woocommerce-cart .cart_totals table tr th,
.woocommerce-cart .cart_totals table tr:nth-child(2n) td,
.woocommerce-cart .cart_totals table tr:nth-child(2n) th { background: none; }

/* Le titre de page était centré, seul de tout le site à l'être. */
.woocommerce-cart .entry-header,
.woocommerce-cart .entry-title { text-align: left; }

.woocommerce-cart table.cart tbody td {
  padding: 1rem 0.75rem;
  border-bottom: 1px solid var(--ef-trait-clair);
  vertical-align: middle;
  background: none;
}

/* Colonnes calibrées : sans largeur imposée, la case de suppression prenait
   82 px et la vignette 117. */
.woocommerce-cart table.cart td.product-remove,
.woocommerce-cart table.cart th.product-remove { width: 2.5rem; padding-left: 0; }
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-cart table.cart th.product-thumbnail { width: 5.5rem; }

/* Vignette de taille fixe : c'est elle qui dictait la hauteur des lignes, donc
   une hauteur différente pour chaque produit selon le format de sa photo.
   « scale-down » interdit l'agrandissement des photos les plus petites. */
.woocommerce-cart table.cart td.product-thumbnail img {
  display: block;
  /* « max-width » est posé ailleurs sur la vignette et bridait la largeur à
     53 px, ce qui rendait la case rectangulaire au lieu de carrée. */
  width: 72px;
  max-width: none;
  height: 72px;
  object-fit: scale-down;
  background: var(--ef-papier);
  padding: 0.3rem;
  margin: 0;
}

.woocommerce-cart table.cart td.product-name a {
  font-weight: 500;
  color: var(--ef-nuit);
  text-decoration: none;
}
.woocommerce-cart table.cart td.product-name a:hover { color: var(--ef-orange); }

.ef-devis-reference {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  color: var(--ef-cote);
}

/* Les montants s'alignent sur la droite et sur des chiffres de même chasse :
   c'est ce qui permet de les comparer d'un coup d'œil dans une colonne. */
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal,
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart th.product-subtotal {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.woocommerce-cart table.cart td.product-subtotal { font-weight: 500; color: var(--ef-nuit); }

.woocommerce-cart table.cart td.product-quantity .qty {
  width: 4.5rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--ef-trait);
  background: var(--ef-blanc);
  font-family: var(--ef-mono);
  font-size: 0.85rem;
  text-align: center;
}

.woocommerce-cart table.cart td.actions { border-bottom: 0; padding: 1.25rem 0 0; }
.woocommerce-cart table.cart td.actions .button {
  float: none;
  background: none;
  border: 1px solid var(--ef-trait);
  color: var(--ef-nuit);
}
.woocommerce-cart table.cart td.actions .button:hover:not(:disabled) {
  border-color: var(--ef-nuit);
  background: var(--ef-nuit);
  color: var(--ef-blanc);
}

/* --- Totaux et suite du parcours ------------------------------------------ */

/* Les totaux occupaient la moitié droite, la moitié gauche restait vide. */
.woocommerce-cart .cart-collaterals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  width: 100%;
}
.woocommerce-cart .cart-collaterals::before,
.woocommerce-cart .cart-collaterals::after { content: none; }
.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; }

.ef-devis-note h2 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); margin: 0 0 1.1rem; }
.ef-devis-note ol { margin: 0 0 1.4rem; padding: 0; list-style: none; counter-reset: etape; }
.ef-devis-note ol li {
  position: relative;
  counter-increment: etape;
  padding: 0 0 0 2.2rem;
  margin-bottom: 0.9rem;
  font-size: 0.97rem;
  line-height: 1.6;
  color: #4a4442;
}
.ef-devis-note ol li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0.1rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--ef-orange);
  color: var(--ef-orange);
  font-family: var(--ef-mono);
  font-size: 0.72rem;
}
.ef-devis-note ol li strong { color: var(--ef-nuit); }

.ef-devis-note__precision {
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ef-trait-clair);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ef-cote);
}

.woocommerce-cart .cart_totals h2 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); margin: 0 0 1.1rem; }
.woocommerce-cart .cart_totals table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.4rem;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ef-trait-clair);
  background: none;
  text-align: left;
}
.woocommerce-cart .cart_totals table td { text-align: right; font-variant-numeric: tabular-nums; }
.woocommerce-cart .cart_totals table tr.order-total th,
.woocommerce-cart .cart_totals table tr.order-total td {
  border-bottom: 0;
  border-top: 2px solid var(--ef-nuit);
  font-size: 1.05rem;
  color: var(--ef-nuit);
}

/* Le bouton principal héritait du soulignement des liens : la règle qui le
   posait vise « .wc-proceed-to-checkout a », plus spécifique qu'une simple
   classe. On la reprend au même niveau. */
.ef-bouton { text-decoration: none; }
.woocommerce-cart .wc-proceed-to-checkout a.ef-bouton,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { text-decoration: none; }

@media (max-width: 860px) {
  .woocommerce-cart .cart-collaterals { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
}

/* ==========================================================================
   38. Rayons d'une catégorie
   ========================================================================== */

.ef-rayons-enfants { margin: 0 0 2.75rem; }
.ef-rayons-enfants__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-bottom: 0.6rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--ef-trait-clair);
}
.ef-rayons-enfants__entete h2 {
  font-family: var(--ef-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ef-cote);
  margin: 0;
}
.ef-rayons-enfants__entete .ef-poles__compte strong { font-size: 1.5rem; }

.ef-rayons-enfants__titre {
  font-family: var(--ef-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ef-cote);
  padding-bottom: 0.6rem;
  margin: 0 0 1.4rem;
  border-bottom: 1px solid var(--ef-trait-clair);
}

/* Sur une page de catégorie, la colonne de résultats est plus étroite que la
   page d'accueil : les vignettes s'y adaptent au lieu de tomber à deux. */
.ef-rayons-enfants .ef-poles__rayons {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 1.25rem;
}
.ef-rayons-enfants .ef-rayon { grid-template-rows: 148px 1fr; }

/* ==========================================================================
   39. Guides — accueil et fin d'article
   ========================================================================== */

.ef-guides { padding: 4rem 0 4.5rem; background: var(--ef-blanc); }

.ef-guides__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--ef-nuit);
}
.ef-guides__entete h2 { font-size: var(--ef-titre-m); margin: 0; }

.ef-guides__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem 2.5rem;
}

/* Chaque guide est une colonne de texte, pas une carte : le site n'a pas de
   photographies d'illustration, et une carte vide sonnerait faux. */
.ef-guide {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ef-trait);
  color: var(--ef-nuit);
}
.ef-guide__titre {
  font-family: var(--ef-titre);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
}
.ef-guide:hover .ef-guide__titre { color: var(--ef-orange); }
.ef-guide__extrait { font-size: 0.94rem; line-height: 1.6; color: #4a4442; }
.ef-guide__lire {
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ef-orange-texte);
}
.ef-guide__lire::after { content: " \2192"; }

/* --- Fin d'article -------------------------------------------------------- */

.ef-suite {
  max-width: 68ch;
  margin: 3.5rem auto 0;
  padding-top: 2rem;
  border-top: 2px solid var(--ef-nuit);
}
.ef-suite__titre {
  font-family: var(--ef-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ef-cote);
  margin: 0 0 1.4rem;
}
.ef-suite__liste { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1.4rem; }
.ef-suite__liste li { padding-bottom: 1.4rem; border-bottom: 1px solid var(--ef-trait-clair); }
.ef-suite__liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.ef-suite__liste a {
  font-family: var(--ef-titre);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ef-nuit);
  border-bottom: 0;
}
.ef-suite__liste a:hover { color: var(--ef-orange); }
.ef-suite__liste p { margin: 0.35rem 0 0; font-size: 0.93rem; line-height: 1.55; color: #4a4442; }
.ef-suite__catalogue { margin: 0; }

/* ==========================================================================
   40. Description de rayon
   --------------------------------------------------------------------------
   Les descriptions font 145 mots en moyenne. Sans mise en forme, elles
   formaient un pavé collé au titre — WordPress les affichait d'ailleurs en un
   seul paragraphe tant que le balisage était filtré à l'enregistrement.
   ========================================================================== */

.woocommerce-products-header .term-description {
  max-width: 68ch;
  margin: 1.25rem 0 2.5rem;
}
.woocommerce-products-header .term-description p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #4a4442;
}
.woocommerce-products-header .term-description p:last-child { margin-bottom: 0; }
.woocommerce-products-header .term-description strong { color: var(--ef-nuit); font-weight: 600; }

/* Le premier paragraphe porte le rayon : il se lit un cran plus grand, comme
   le chapô d'un article. */
.woocommerce-products-header .term-description p:first-child {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ef-nuit);
}

/* ==========================================================================
   41. Page introuvable
   ========================================================================== */

.ef-404 { padding-bottom: 4rem; }

.ef-404__entete {
  max-width: 60ch;
  padding-bottom: 1.5rem;
  margin-bottom: 2.75rem;
  border-bottom: 2px solid var(--ef-nuit);
}
.ef-404__entete h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0.5rem 0 0.9rem; }
.ef-404__entete p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: #4a4442; }

.ef-404__recherche {
  max-width: 60ch;
  margin-bottom: 3rem;
}
.ef-404__recherche h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.ef-404__recherche p { margin: 0 0 1.1rem; font-size: 0.97rem; line-height: 1.6; color: #4a4442; }

/* Le champ reprend celui de l'en-tête, mais sur toute la largeur de la
   colonne : c'est l'action principale de la page. */
.ef-404__recherche .ef-recherche { max-width: 30rem; }

.ef-404__pole { margin-bottom: 2.75rem; }

.ef-404__sortie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ef-trait-clair);
}
.ef-404__sortie p { margin: 0; }

/* ==========================================================================
   42. Aucun résultat
   --------------------------------------------------------------------------
   Remplace le bandeau bleu de WooCommerce, hors charte et sans issue.
   ========================================================================== */

.ef-vide {
  max-width: 62ch;
  padding: 2rem 0 1rem;
}
.ef-vide h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  margin: 0 0 0.9rem;
  line-height: 1.25;
}
.ef-vide p { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.65; color: #4a4442; }
.ef-vide ul { margin: 0 0 1.2rem; padding: 0; list-style: none; }
.ef-vide li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.7rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #4a4442;
}
/* Même repère que les listes des pages de service : un filet orange court. */
.ef-vide li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--ef-orange);
}
.ef-vide strong { color: var(--ef-nuit); }

.ef-vide__sorties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ef-trait-clair);
}

/* ==========================================================================
   43. Survols
   --------------------------------------------------------------------------
   Le survol se limitait partout à un changement de couleur. Trois gestes,
   choisis pour rester dans le registre technique du site : la flèche avance,
   le filet d'un guide s'allume, la référence d'un produit ressort. Rien qui
   déplace un élément — sur une grille de catalogue, un décalage au survol
   fatigue vite.
   ========================================================================== */

.ef-lien-fleche::after { display: inline-block; transition: transform var(--ef-transition); }
.ef-lien-fleche:hover::after { transform: translateX(3px); }

.ef-guide { transition: border-color var(--ef-transition); }
.ef-guide:hover { border-top-color: var(--ef-orange); }

/* La référence est ce qu'un acheteur professionnel lit en premier : la faire
   ressortir au survol de la carte est un repère utile, pas un effet. */
.woocommerce ul.products li.product .ef-reference { transition: color var(--ef-transition); }
.woocommerce ul.products li.product:hover .ef-reference { color: var(--ef-orange-texte); }

.ef-rayon__nombre { transition: color var(--ef-transition); }

@media (prefers-reduced-motion: reduce) {
  .ef-lien-fleche::after,
  .ef-guide,
  .woocommerce ul.products li.product .ef-reference,
  .ef-rayon__nombre { transition: none; }
  .ef-lien-fleche:hover::after { transform: none; }
}

/* ==========================================================================
   44. Transitions de page
   --------------------------------------------------------------------------
   Parcourir un catalogue, c'est enchaîner les pages : une catégorie, une
   fiche, retour, une autre fiche. Le rechargement blanc entre chacune casse
   le fil à chaque fois.
   L'API native des navigateurs supprime ce blanc en une déclaration. Les
   navigateurs qui ne la gèrent pas naviguent normalement — aucun repli à
   écrire, aucun JavaScript.
   ========================================================================== */

@view-transition { navigation: auto; }

/* Un fondu court : au-delà de 200 ms, la transition se met à ralentir la
   navigation au lieu de la lier. */
::view-transition-old(root) { animation: ef-sortie 120ms ease-out both; }
::view-transition-new(root) { animation: ef-entree 200ms ease-out both; }

@keyframes ef-sortie { to { opacity: 0; } }
@keyframes ef-entree { from { opacity: 0; transform: translateY(6px); } }

/* L'en-tête et le pied ne bougent pas d'une page à l'autre : les exclure de
   la transition évite qu'ils clignotent à chaque navigation. */
.site-header { view-transition-name: ef-entete; }
.site-footer { view-transition-name: ef-pied; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ==========================================================================
   45. Fond « plan de cuisine »
   --------------------------------------------------------------------------
   Un équipement de cuisine s'implante sur un plan coté : c'est le document
   que le client a sous les yeux quand il nous appelle. Le papier millimétré
   est donc le motif du métier, pas une décoration.
   Il est tracé en dégradés répétés — aucune image, aucun octet de plus, et il
   suit n'importe quelle taille d'écran sans jamais pixeliser.
   ========================================================================== */

.ef-propos {
  position: relative;
  isolation: isolate;
}

.ef-propos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Deux trames : le carreau fin de 12 px, puis le trait fort tous les 5
     carreaux, comme sur une feuille de papier millimétré. */
  background-image:
    linear-gradient(to right, rgba(31, 29, 27, 0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31, 29, 27, 0.14) 1px, transparent 1px),
    linear-gradient(to right, rgba(31, 29, 27, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31, 29, 27, 0.05) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
  /* Le motif s'efface vers le bas : il pose le décor en haut de section sans
     concurrencer le texte. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
  pointer-events: none;
}

/* Le contenu doit rester au-dessus de la trame. */
.ef-propos > .ef-conteneur { position: relative; z-index: 1; }

@media (max-width: 620px) {
  /* Sur un écran étroit, la trame passe devant le texte plus qu'elle ne le
     situe : on la resserre et on l'atténue. */
  .ef-propos::before { background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px; opacity: 0.6; }
}

/* ==========================================================================
   46. Chiffres révélés au défilement
   --------------------------------------------------------------------------
   Le compteur d'un pôle est la donnée qui distingue ce catalogue d'une
   vitrine. Le faire apparaître à l'entrée dans l'écran attire l'œil dessus
   au bon moment.
   Écrit avec « animation-timeline: scroll() » : c'est du CSS pur, sans une
   ligne de JavaScript et sans observateur à brancher. Le repli est le bon par
   construction — un navigateur qui ignore la propriété joue simplement
   l'animation à l'ouverture, et le chiffre reste visible dans tous les cas.
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ef-poles__compte strong,
    .ef-chiffre__valeur {
      animation: ef-chiffre linear both;
      animation-timeline: view();
      /* L'animation se joue pendant que le bloc traverse le tiers bas de
         l'écran, puis se fige : elle accompagne l'arrivée, elle ne rejoue pas
         à chaque micro-défilement. */
      animation-range: entry 10% cover 28%;
    }
  }
}

@keyframes ef-chiffre {
  from {
    opacity: 0;
    /* Le chiffre monte depuis sous son propre filet, comme s'il se posait. */
    transform: translateY(0.35em);
    letter-spacing: 0.08em;
  }
  to {
    opacity: 1;
    transform: none;
    letter-spacing: -0.02em;
  }
}

/* Compteur discret derrière chaque marque au pied de page : il situe le
   volume sans concurrencer le nom. */
.ef-pied__compte {
  margin-left: 0.4rem;
  font-family: var(--ef-mono);
  font-size: 0.66rem;
  color: var(--ef-cote);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   48. Questions fréquentes
   --------------------------------------------------------------------------
   Chaque question est un <details> natif : ouverture au clic sans JavaScript,
   recherche du navigateur (Ctrl+F) fonctionnelle même sur les réponses
   repliées, et accessible au clavier par construction.
   ========================================================================== */

.ef-faq { margin: 0 0 2.5rem; border-top: 2px solid var(--ef-nuit); }

.ef-faq__item { border-bottom: 1px solid var(--ef-trait-clair); }

.ef-faq__item summary {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1.15rem 0;
  cursor: pointer;
  font-family: var(--ef-titre);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ef-nuit);
  list-style: none;
  transition: color var(--ef-transition);
}
.ef-faq__item summary::-webkit-details-marker { display: none; }
.ef-faq__item summary:hover { color: var(--ef-orange); }

/* Le repère est tracé en CSS plutôt qu'avec le triangle par défaut, qui
   varie d'un navigateur à l'autre. */
.ef-faq__item summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 1rem;
  font-family: var(--ef-mono);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ef-orange);
}
.ef-faq__item[open] summary::before { content: "\2212"; }

.ef-faq__reponse { padding: 0 0 1.35rem 1.9rem; }
.ef-faq__reponse p {
  margin: 0;
  font-size: 0.99rem;
  line-height: 1.65;
  color: #4a4442;
}

@media (max-width: 560px) {
  .ef-faq__reponse { padding-left: 1.9rem; }
}

/* ==========================================================================
   49. Blocs éditoriaux
   --------------------------------------------------------------------------
   « À propos », « Livraison » et la page garantie étaient des colonnes de
   texte de quatre cents mots. Personne ne lit ça sur un site de matériel :
   on y cherche une gamme, un délai, une cote. Ces quatre blocs sortent
   l'information du paragraphe pour la rendre parcourable.

   Ils partagent le même vocabulaire que le reste du thème — angles vifs,
   filet orange, chapeau en mono, icône au trait — pour que l'ajout ne se
   lise pas comme une greffe.
   ========================================================================== */

/* ---- Les deux gammes, en deux cartes ------------------------------------ */

.ef-gammes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 1.8rem 0 2.6rem;
}

.ef-gamme {
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  background: var(--ef-blanc);
  border: 1px solid var(--ef-trait);
  transition: border-color var(--ef-transition), transform var(--ef-transition);
}
.ef-gamme:hover,
.ef-gamme:focus-visible { border-color: var(--ef-orange); transform: translateY(-2px); }

.ef-gamme__photo {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: var(--ef-papier);
  overflow: hidden;
}
/* scale-down et non contain : une photo source plus petite que son cadre
   reste à sa taille réelle plutôt que d'être agrandie et floutée. */
.ef-gamme__photo img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  padding: 1.2rem;
}

.ef-gamme__corps { display: grid; align-content: start; gap: 0.4rem; padding: 1.4rem 1.5rem 1.6rem; }

.ef-gamme__compte {
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ef-orange-texte);
}
.ef-gamme__compte strong { font-weight: 500; }

.ef-gamme__nom {
  font-family: var(--ef-titre);
  font-size: var(--ef-titre-m);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ef-nuit);
}
.ef-gamme__rayons { font-size: 0.93rem; line-height: 1.55; color: var(--ef-cote-lisible); }

@media (max-width: 700px) {
  .ef-gammes { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
}

/* ---- Les marques, en pastilles ------------------------------------------
   Elles étaient énumérées en gras au milieu d'un paragraphe, sans lien, alors
   que chacune a son archive. */

.ef-marques {
  list-style: none;
  margin: 1.6rem 0 2.4rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.ef-marque a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.7rem 1.05rem;
  border: 1px solid var(--ef-trait);
  background: var(--ef-blanc);
  text-decoration: none;
  transition: border-color var(--ef-transition), background var(--ef-transition);
}
.ef-marque a:hover,
.ef-marque a:focus-visible { border-color: var(--ef-orange); background: var(--ef-creme); }

.ef-marque__nom {
  font-family: var(--ef-titre);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ef-nuit);
  letter-spacing: 0.01em;
}
.ef-marque__compte {
  font-family: var(--ef-mono);
  font-size: 0.7rem;
  color: var(--ef-cote-lisible);
  font-variant-numeric: tabular-nums;
}

/* ---- Les métiers servis ------------------------------------------------- */

.ef-metiers {
  list-style: none;
  margin: 1.6rem 0 2.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--ef-trait-clair);
}

/* Les filets sont posés sur les côtés « intérieurs » de la grille, sinon ils
   doublent d'épaisseur là où deux cellules se touchent. */
.ef-metier {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-content: start;
  gap: 0.2rem 1rem;
  padding: 1.5rem 1.4rem;
  border-bottom: 1px solid var(--ef-trait-clair);
}
.ef-metier:not(:nth-child(3n + 1)) { border-left: 1px solid var(--ef-trait-clair); }
.ef-metier:nth-child(3n + 1) { padding-left: 0; }

.ef-metier__icone { grid-row: 1 / 3; color: var(--ef-orange); margin-top: 0.15rem; }

.ef-metier strong {
  font-family: var(--ef-titre);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ef-nuit);
  margin-bottom: 0.25rem;
}
.ef-metier span { font-size: 0.93rem; line-height: 1.55; color: var(--ef-gris-fonce); }

@media (max-width: 900px) {
  .ef-metiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-metier:not(:nth-child(3n + 1)) { border-left: 0; }
  .ef-metier:nth-child(3n + 1) { padding-left: 1.4rem; }
  .ef-metier:not(:nth-child(odd)) { border-left: 1px solid var(--ef-trait-clair); }
  .ef-metier:nth-child(odd) { padding-left: 0; }
}
@media (max-width: 560px) {
  .ef-metiers { grid-template-columns: minmax(0, 1fr); }
  .ef-metier,
  .ef-metier:nth-child(3n + 1) { border-left: 0; padding: 1.3rem 0; }
  .ef-metier:not(:nth-child(odd)) { border-left: 0; }
}

/* ---- Les trois cotes ----------------------------------------------------
   Le rang en gros mono tient lieu de repère : c'est une check-list à faire
   avant d'appeler, pas trois arguments de vente. */

.ef-cotes {
  list-style: none;
  margin: 1.6rem 0 2.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3rem;
  counter-reset: none;
}

/* Le rang et l'icône se partagent la première ligne, aux deux bords de la
   carte. Le titre et le texte prennent toute la largeur en dessous : dans une
   colonne de contenu, une icône placée à gauche du texte lui mangeait un
   tiers de sa largeur et le hachait en lignes de quatre mots. */
.ef-cote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: 0.35rem 0.9rem;
  padding: 1.3rem 1.3rem 1.5rem;
  background: var(--ef-creme);
  border-top: 2px solid var(--ef-orange);
}

.ef-cote__rang {
  font-family: var(--ef-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--ef-orange-texte);
  font-variant-numeric: tabular-nums;
  align-self: center;
}
.ef-cote__icone { grid-column: 2; grid-row: 1; color: var(--ef-orange); }
.ef-cote strong,
.ef-cote .ef-cote__texte { grid-column: 1 / -1; }

.ef-cote strong {
  font-family: var(--ef-titre);
  font-size: 1.02rem;
  line-height: 1.2;
  margin-top: 0.35rem;
  font-weight: 700;
  color: var(--ef-nuit);
}
.ef-cote__texte { font-size: 0.93rem; line-height: 1.55; color: var(--ef-gris-fonce); }

@media (max-width: 860px) {
  .ef-cotes { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
}

/* ==========================================================================
   50. Demande de devis par WhatsApp
   --------------------------------------------------------------------------
   Le vert est la seule couleur du site qui ne vienne pas de la charte. Il est
   là pour une raison précise : c'est lui qui fait reconnaître la destination
   avant d'avoir lu le bouton. Il ne sort donc jamais de ce bouton — le reste
   du bloc est du papier et de l'anthracite comme partout ailleurs.

   Teinte retenue : #0b6e4f plutôt que le vert de la marque (#25d366), qui
   n'affiche que 1,9:1 avec du texte blanc. Celle-ci monte à 6,2:1.
   ========================================================================== */

.ef-whatsapp {
  margin: 1.4rem 0 0;
  padding: 1.6rem 1.7rem 1.5rem;
  background: var(--ef-creme);
  border: 1px solid var(--ef-trait);
  border-top: 3px solid #0b6e4f;
}

/* L'icône tient la première ligne avec le titre ; la phrase passe dessous sur
   toute la largeur. Placée dans la colonne du titre, elle créait une marche
   avec les champs, qui partent eux du bord du bloc. */
.ef-whatsapp__entete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 0.7rem;
  align-items: center;
  margin-bottom: 1.3rem;
}
.ef-whatsapp__logo { color: #0b6e4f; }

.ef-whatsapp__entete > div { display: contents; }

.ef-whatsapp__entete h2 {
  grid-column: 2;
  font-size: var(--ef-titre-s);
  line-height: 1.15;
  margin: 0;
  color: var(--ef-nuit);
}
.ef-whatsapp__entete p {
  grid-column: 1 / -1;
  margin: 0.6rem 0 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ef-gris-fonce);
}

.ef-whatsapp__champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.1rem;
}
.ef-whatsapp__champ { margin: 0; display: grid; gap: 0.35rem; }
.ef-whatsapp__champ--large { grid-column: 1 / -1; }

.ef-whatsapp__champ label {
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ef-gris-fonce);
}
.ef-whatsapp__champ label span { color: var(--ef-orange-texte); }

.ef-whatsapp__champ input,
.ef-whatsapp__champ select,
.ef-whatsapp__champ textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font-family: var(--ef-texte);
  font-size: 0.95rem;
  color: var(--ef-nuit);
  background: var(--ef-blanc);
  border: 1px solid var(--ef-trait);
  border-radius: 0;
  transition: border-color var(--ef-transition);
}
.ef-whatsapp__champ textarea { resize: vertical; line-height: 1.5; }
.ef-whatsapp__champ input:focus,
.ef-whatsapp__champ select:focus,
.ef-whatsapp__champ textarea:focus {
  outline: 2px solid var(--ef-orange);
  outline-offset: -2px;
  border-color: var(--ef-orange);
}
.ef-whatsapp__champ ::placeholder { color: var(--ef-cote-lisible); opacity: 1; }

.ef-whatsapp__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.1rem;
  margin: 1.4rem 0 0;
}

.ef-bouton--whatsapp,
.woocommerce a.ef-bouton--whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #0b6e4f;
  color: var(--ef-blanc);
  border-color: #0b6e4f;
}
.ef-bouton--whatsapp:hover,
.ef-bouton--whatsapp:focus-visible,
.woocommerce a.ef-bouton--whatsapp:hover {
  background: #095a41;
  border-color: #095a41;
  color: var(--ef-blanc);
}
.ef-bouton__icone { flex: none; }

.ef-whatsapp__note {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ef-cote-lisible);
  max-width: 34ch;
}

.ef-whatsapp__autre {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--ef-trait-clair);
  font-size: 0.9rem;
  color: var(--ef-gris-fonce);
}

@media (max-width: 600px) {
  .ef-whatsapp { padding: 1.3rem 1.1rem; }
  .ef-whatsapp__champs { grid-template-columns: minmax(0, 1fr); }
  .ef-whatsapp__note { max-width: none; }
  .ef-bouton--whatsapp { width: 100%; justify-content: center; }
}

/* ---- Raccourci depuis une fiche produit ---------------------------------
   Il suit le bouton principal sans lui disputer l'œil : c'est la même action
   en un clic de moins, pas une seconde proposition.

   Il ne reprend pas « ef-bouton--fantome », dont le texte est du papier clair
   parce qu'il est né sur le fond sombre du hero : sur la fiche, fond blanc,
   il tombait à 1,06:1. Ici, anthracite sur blanc — 15,9:1. */

.ef-fiche__raccourci,
.woocommerce a.ef-fiche__raccourci {
  display: inline-block;
  margin-top: 0.7rem;
  background: transparent;
  color: var(--ef-nuit);
  border: 1px solid var(--ef-nuit);
}
.ef-fiche__raccourci:hover,
.ef-fiche__raccourci:focus-visible,
.woocommerce a.ef-fiche__raccourci:hover {
  background: var(--ef-nuit);
  color: var(--ef-blanc);
  border-color: var(--ef-nuit);
}

/* ==========================================================================
   51. Espace client
   --------------------------------------------------------------------------
   La page « Mon compte » sortait de WooCommerce sans une ligne de style :
   champs gris sans bordure, bouton gris qui ne ressemblait pas à un bouton.

   Deux colonnes : connexion à gauche pour qui revient, inscription à droite
   sur fond papier et filet orange, parce que c'est l'action attendue de
   quelqu'un qui arrive. Les champs reprennent exactement ceux du formulaire
   de devis — c'est le même geste, il ne doit pas changer d'aspect d'une page
   à l'autre.
   ========================================================================== */

/* Storefront cale ces deux colonnes en pourcentages flottants, hérités de son
   ancienne grille — et il le fait depuis « .col2-set#customer_login .col-1 ».
   Un sélecteur d'identifiant : aucune accumulation de classes ne le dépasse.
   Nos règles reprennent donc le même identifiant, plus une classe, ce qui les
   place strictement au-dessus. Sans cela les colonnes gardaient 41 % et 48 %
   de largeur à l'intérieur de cellules de grille déjà réparties, et les deux
   cartes s'affichaient étroites et décalées. */
.woocommerce-account .col2-set#customer_login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  margin: 1.5rem 0 0;
  float: none;
  width: auto;
}
.woocommerce-account .col2-set#customer_login .col-1,
.woocommerce-account .col2-set#customer_login .col-2 {
  width: auto;
  float: none;
  margin: 0;
  padding: 1.6rem 1.7rem 1.7rem;
  border: 1px solid var(--ef-trait);
}
.woocommerce-account .col2-set#customer_login .col-1 { background: var(--ef-blanc); }
.woocommerce-account .col2-set#customer_login .col-2 {
  background: var(--ef-creme);
  border-top: 3px solid var(--ef-orange);
}

.woocommerce-account .col2-set h2 {
  font-size: var(--ef-titre-s);
  line-height: 1.15;
  margin: 0 0 1.2rem;
  color: var(--ef-nuit);
}

/* ---- Les champs : les mêmes que sur la demande de devis ------------------ */

.woocommerce-account .woocommerce-form-row,
.woocommerce-account .ef-compte__champ { margin: 0 0 0.9rem; display: grid; gap: 0.35rem; }

.woocommerce-account label,
.woocommerce-account .ef-compte__champ label {
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ef-gris-fonce);
}
.woocommerce-account label .required,
.woocommerce-account .ef-compte__champ label span {
  color: var(--ef-orange-texte);
  text-decoration: none;
  border: 0;
}

.woocommerce-account .woocommerce-form input.input-text,
.woocommerce-account .woocommerce-Input,
.woocommerce-account .ef-compte__champ input,
.woocommerce-account .ef-compte__champ select,
.woocommerce-account form select,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="tel"],
.woocommerce-account form input[type="password"] {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font-family: var(--ef-texte);
  font-size: 0.95rem;
  color: var(--ef-nuit);
  background: var(--ef-blanc);
  border: 1px solid var(--ef-trait);
  border-radius: 0;
  box-shadow: none;
  transition: border-color var(--ef-transition);
}
.woocommerce-account form input:focus,
.woocommerce-account form select:focus {
  outline: 2px solid var(--ef-orange);
  outline-offset: -2px;
  border-color: var(--ef-orange);
}

.woocommerce-account .woocommerce-password-hint,
.woocommerce-account .woocommerce-password-strength {
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--ef-cote-lisible);
  margin-top: 0.3rem;
}

/* L'œil de révélation du mot de passe.
   WooCommerce le pose en absolu dans .password-input ; Storefront lui donne un
   fond gris et un calage qui débordaient du champ une fois celui-ci rebordé.
   On le réinstalle à l'intérieur, sans aplat, et on réserve la place à droite
   du champ pour qu'il ne recouvre jamais la saisie. */
.woocommerce-account .password-input {
  position: relative;
  display: block;
  width: 100%;
}
.woocommerce-account .password-input input { padding-right: 2.9rem; }
.woocommerce-account .show-password-input {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  bottom: auto;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--ef-gris-fonce);
  cursor: pointer;
}
.woocommerce-account .show-password-input::after { color: inherit; }
.woocommerce-account .show-password-input:hover { color: var(--ef-nuit); }

/* Les champs professionnels de l'inscription, sur deux colonnes quand la
   place le permet : quatre champs empilés font fuir. */
.ef-compte__champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 0.9rem;
}
.ef-compte__champ--large { grid-column: 1 / -1; }

/* ---- Boutons ------------------------------------------------------------ */

.woocommerce-account .woocommerce-form button[type="submit"],
.woocommerce-account .woocommerce-Button,
.woocommerce-account button.button {
  margin-top: 0.4rem;
  background: var(--ef-orange);
  color: var(--ef-nuit);
  font-family: var(--ef-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: 0 !important;
  transition: background var(--ef-transition);
}
.woocommerce-account .woocommerce-form button[type="submit"]:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account button.button:hover {
  background: var(--ef-rouge);
  color: var(--ef-blanc);
}

.woocommerce-account .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--ef-texte);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ef-gris-fonce);
  margin: 0.6rem 0 0;
}
.woocommerce-account .woocommerce-form-login__rememberme input { width: auto; }

.woocommerce-account .lost_password { margin: 0.9rem 0 0; font-size: 0.9rem; }

/* ---- Mention RGPD -------------------------------------------------------- */

.woocommerce-account .woocommerce-privacy-policy-text {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ef-trait-clair);
}
.woocommerce-account .woocommerce-privacy-policy-text p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ef-cote-lisible);
}

/* ---- Le compte une fois connecté ---------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
  width: auto;
  float: none;
  margin: 0 0 1.6rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--ef-trait);
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li::before { content: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.8rem 1.1rem;
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ef-gris-fonce);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--ef-transition), border-color var(--ef-transition);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:first-child a { padding-left: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--ef-nuit); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--ef-nuit);
  border-bottom-color: var(--ef-orange);
}

.woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; }

.ef-compte-accueil p { font-size: 1rem; line-height: 1.65; color: var(--ef-gris-fonce); margin: 0 0 0.9rem; }
.ef-compte-accueil__salut { font-size: 1.1rem !important; color: var(--ef-nuit) !important; }
.ef-compte-accueil__reste {
  padding: 0.9rem 1.1rem;
  background: var(--ef-creme);
  border-left: 2px solid var(--ef-orange);
}

/* ---- Accès au compte, dans le bandeau supérieur -------------------------- */

.ef-bandeau__compte {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 1.4rem;
  padding-left: 1.4rem;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ef-blanc);
  opacity: 0.86;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ef-transition);
}
.ef-bandeau__compte:hover,
.ef-bandeau__compte:focus-visible { opacity: 1; }
.ef-bandeau__compte-icone { flex: none; }

/* Le bandeau se réduit déjà au téléphone seul sur petit écran ; la barre
   mobile du bas porte la même icône, inutile de la doubler ici. */
@media (max-width: 860px) {
  .ef-bandeau__compte { display: none; }
}

@media (max-width: 760px) {
  .woocommerce-account .col2-set#customer_login { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .woocommerce-account .col2-set#customer_login .col-1,
  .woocommerce-account .col2-set#customer_login .col-2 { padding: 1.3rem 1.1rem 1.4rem; }
  .ef-compte__champs { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-account .woocommerce-MyAccount-navigation ul { gap: 0; }
  .woocommerce-account .woocommerce-MyAccount-navigation li a { padding: 0.7rem 0.8rem; }
}

/* ==========================================================================
   52. Photographies dans le contenu
   --------------------------------------------------------------------------
   Le fonds photographique du site est de deux natures : trois vues d'ambiance
   livrées avec le thème, et les 335 visuels du catalogue. Les premières
   posent le décor, les secondes montrent la marchandise — ce sont elles qui
   ont leur place sur une page qui parle de ce qu'on vend.
   ========================================================================== */

/* ---- Photographie pleine largeur ---------------------------------------- */

.ef-photo-large {
  margin: 1.8rem 0 2.4rem;
  /* Elle sort du texte pour aller au bord du bloc de contenu : une photo de
     reportage calée sur la colonne de lecture paraît timide. */
  position: relative;
}
.ef-photo-large img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 42%;
  background: var(--ef-papier);
}
.ef-photo-large figcaption {
  margin-top: 0.6rem;
  font-family: var(--ef-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--ef-cote-lisible);
  border-left: 2px solid var(--ef-orange);
  padding-left: 0.7rem;
}

/* ---- Bande de références photographiées --------------------------------- */

.ef-references-photos {
  list-style: none;
  margin: 1.6rem 0 2.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.ef-reference-photo a {
  display: grid;
  gap: 0.5rem;
  text-decoration: none;
  height: 100%;
  align-content: start;
}

.ef-reference-photo__cadre {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--ef-papier);
  border: 1px solid var(--ef-trait);
  overflow: hidden;
  transition: border-color var(--ef-transition);
}
/* scale-down et non cover : ces photos sont des prises de vue sur fond blanc,
   les recadrer couperait un angle de l'appareil. Aucune n'est agrandie
   au-delà de sa définition réelle. */
.ef-reference-photo__cadre img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  padding: 0.6rem;
}
.ef-reference-photo a:hover .ef-reference-photo__cadre,
.ef-reference-photo a:focus-visible .ef-reference-photo__cadre { border-color: var(--ef-orange); }

.ef-reference-photo__nom {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ef-nuit);
  font-weight: 500;
}
.ef-reference-photo a:hover .ef-reference-photo__nom { color: var(--ef-orange-texte); }

.ef-reference-photo__ref {
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ef-cote-lisible);
}

@media (max-width: 760px) {
  .ef-references-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .ef-photo-large img { aspect-ratio: 16 / 9; }
}
@media (max-width: 420px) {
  .ef-references-photos { grid-template-columns: minmax(0, 1fr); }
  .ef-photo-large img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   53. Panneau de discussion
   --------------------------------------------------------------------------
   Six questions dont la réponse s'affiche tout de suite, et un départ vers
   WhatsApp pour le reste. Le vert ne sort pas du bouton de départ : c'est lui
   qui fait reconnaître la destination, le reste du panneau est du papier et de
   l'anthracite comme le reste du site.
   ========================================================================== */

.ef-chat {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7rem;
}

/* ---- Le lanceur ---------------------------------------------------------
   Rond et non rectangulaire : c'est la forme à laquelle on reconnaît un chat
   avant d'avoir lu quoi que ce soit. C'est la seule entorse assumée aux angles
   vifs du site — l'objet est une surcouche flottante, pas un élément de la
   page, et la convention prime ici sur la charte. */

/* Le « !important » est ici la contrepartie d'un autre : la charte pose
   « button { border-radius: 0 !important } » pour tenir les angles vifs sur
   tout le site. Le chat est la seule exception admise, elle est donc déclarée
   avec la même force plutôt que contournée par un empilement de classes. */
.ef-chat__bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.2rem;
  background: #0b6e4f;
  color: var(--ef-blanc);
  border: 0;
  border-radius: 2.5rem !important;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(11, 110, 79, 0.34);
  transition: background var(--ef-transition), transform var(--ef-transition);
}
.ef-chat__bouton:hover,
.ef-chat__bouton:focus-visible { background: #095a41; transform: translateY(-2px); }
.ef-chat__icone { flex: none; }

/* Ouvert, le lanceur se réduit à une croix : deux boutons de fermeture pour un
   même panneau, c'est un de trop. */
.ef-chat--ouvert .ef-chat__texte { display: none; }
.ef-chat--ouvert .ef-chat__bouton { padding: 0.95rem; }
.ef-chat__icone--fermer { display: none; }
.ef-chat--ouvert .ef-chat__icone--fermer { display: block; }
.ef-chat--ouvert .ef-chat__icone--ouvrir { display: none; }

.ef-chat__texte {
  font-family: var(--ef-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
}
.ef-chat__texte strong { font-weight: 500; letter-spacing: 0.06em; }

/* ---- Le panneau --------------------------------------------------------- */

/* « [hidden] » pose display:none avec la même spécificité qu'une classe. À
   égalité, c'est la dernière règle écrite qui l'emporte — donc le display:flex
   ci-dessous, et le panneau restait à l'écran malgré l'attribut. */
.ef-chat__panneau[hidden] { display: none; }

.ef-chat__panneau {
  width: min(22rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 9rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ef-blanc);
  border-radius: 1rem;
  box-shadow: 0 20px 56px rgba(20, 18, 16, 0.26);
}

.ef-chat__entete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--ef-nuit);
  color: var(--ef-blanc);
}

/* Un repère graphique, pas un portrait. Aucune photographie de conseiller
   n'existe : en poser une prise en banque d'images reviendrait à inventer une
   personne que le client ne rencontrera jamais. */
.ef-chat__portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--ef-orange);
  color: var(--ef-blanc);
}

/* Le portrait remplit le disque. overflow: hidden sur le parent plutôt qu'un
   border-radius sur l'image : le conteneur porte aussi la pastille de présence,
   qui doit pouvoir déborder. */
.ef-chat__portrait { overflow: hidden; }
.ef-chat__portrait-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.ef-chat__identite { display: grid; gap: 0.15rem; min-width: 0; }
.ef-chat__identite strong {
  font-family: var(--ef-titre);
  font-size: 0.98rem;
  font-weight: 700;
}
/* La pastille dit le canal, pas une présence : personne n'est annoncé « en
   ligne » alors que la réponse arrive sur WhatsApp, aux heures d'ouverture. */
.ef-chat__canal {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--ef-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ef-trait);
}
.ef-chat__canal::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #25d366;
}

.ef-chat__fil {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--ef-papier);
}

/* Le coin carré du côté de l'interlocuteur tient lieu de pointe : une bulle
   ronde de tous les côtés flotte sans qu'on sache qui parle. */
.ef-chat__bulle {
  margin: 0;
  max-width: 88%;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.5;
  border-radius: 1rem;
}
.ef-chat__bulle--nous {
  align-self: flex-start;
  border-bottom-left-radius: 0.25rem;
  background: var(--ef-blanc);
  color: var(--ef-gris-fonce);
  box-shadow: 0 1px 2px rgba(20, 18, 16, 0.08);
}
.ef-chat__bulle--vous {
  align-self: flex-end;
  border-bottom-right-radius: 0.25rem;
  background: #0b6e4f;
  color: var(--ef-blanc);
}
.ef-chat__bulle strong { font-family: var(--ef-mono); font-size: 0.92em; }
.ef-chat__bulle--nous strong { color: var(--ef-nuit); }

.ef-chat__suggestions {
  list-style: none;
  margin: 0;
  padding: 0.7rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  background: var(--ef-papier);
  border-top: 1px solid var(--ef-trait-clair);
  max-height: 9rem;
  overflow-y: auto;
}
.ef-chat__suggestions li::before { content: none; }

.ef-chat__question {
  padding: 0.42rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--ef-orange-texte);
  background: var(--ef-blanc);
  border: 1px solid var(--ef-trait);
  border-radius: 2rem !important;
  cursor: pointer;
  transition: border-color var(--ef-transition), background var(--ef-transition);
}
.ef-chat__question:hover,
.ef-chat__question:focus-visible { border-color: var(--ef-orange); background: var(--ef-creme); }

/* ---- La zone de saisie --------------------------------------------------
   C'est elle qui fait la différence entre une liste de boutons et un chat : on
   écrit sa question. Le message part sur WhatsApp avec le contexte de la page,
   donc le conseiller sait de quelle référence on parle. */

.ef-chat__composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-top: 1px solid var(--ef-trait-clair);
  background: var(--ef-blanc);
}

.ef-chat__saisie {
  width: 100%;
  padding: 0.6rem 0.9rem;
  font-family: var(--ef-texte);
  font-size: 0.9rem;
  color: var(--ef-nuit);
  background: var(--ef-papier);
  border: 1px solid var(--ef-trait);
  border-radius: 2rem !important;
  resize: none;
  line-height: 1.4;
  max-height: 5rem;
}
.ef-chat__saisie:focus {
  outline: 2px solid var(--ef-orange);
  outline-offset: -2px;
  border-color: var(--ef-orange);
}

.ef-chat__envoyer {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  background: #0b6e4f;
  color: var(--ef-blanc);
  border: 0;
  border-radius: 50% !important;
  cursor: pointer;
  transition: background var(--ef-transition);
}
.ef-chat__envoyer:hover,
.ef-chat__envoyer:focus-visible { background: #095a41; }

.ef-chat__mention {
  padding: 0 1rem 0.75rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--ef-cote-lisible);
  text-align: center;
  background: var(--ef-blanc);
}

@media (max-width: 768px) {
  .ef-chat { right: 1rem; bottom: 4.6rem; }
  .ef-chat__texte { display: none; }
  .ef-chat__bouton { padding: 0.95rem; }
}

/* La référence de demande, dans le formulaire de devis. */
.ef-whatsapp__reference {
  margin: 0.8rem 0 0 !important;
  padding: 0.55rem 0.8rem;
  background: var(--ef-blanc);
  border-left: 2px solid #0b6e4f;
  font-size: 0.86rem !important;
  color: var(--ef-gris-fonce) !important;
}
.ef-whatsapp__reference strong {
  font-family: var(--ef-mono);
  font-size: 0.95em;
  color: var(--ef-nuit);
  letter-spacing: 0.06em;
  margin-left: 0.2rem;
}
.ef-whatsapp__reference span { color: var(--ef-cote-lisible); }

/* ==========================================================================
   54. Mur de logos des marques
   --------------------------------------------------------------------------
   Une case par fabricant, de taille constante. Le logo s'y pose quand il
   existe, le nom composé le remplace sinon — les deux formes cohabitent sans
   que le bloc paraisse à moitié rempli, parce que la case ne change pas.

   Le fond reste blanc et le cadre neutre : un logo posé sur une couleur perd
   sa propre teinte, et beaucoup de chartes fabricant l'interdisent.
   ========================================================================== */

.ef-logos {
  list-style: none;
  margin: 1.6rem 0 2.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.9rem;
}

/* Le « li » hérite d'un display:flex venu d'ailleurs dans la feuille : le lien
   devenait un élément flexible et se rétractait sur son texte, à 77 px dans une
   colonne de 192. On le ramène en bloc pour que le lien reprenne toute la case. */
.ef-logo { display: block; }

.ef-logo a {
  display: grid;
  gap: 0;
  height: 100%;
  text-decoration: none;
  background: var(--ef-blanc);
  border: 1px solid var(--ef-trait);
  transition: border-color var(--ef-transition), transform var(--ef-transition);
}
.ef-logo a:hover,
.ef-logo a:focus-visible { border-color: var(--ef-orange); transform: translateY(-2px); }

.ef-logo__cadre {
  display: grid;
  place-items: center;
  height: 4.6rem;
  padding: 0.9rem 1rem;
}
/* contain et non cover : un logo recadré n'est plus le logo. */
.ef-logo__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* La marque sans logo : son nom occupe le cadre, dans la police de titre. */
.ef-logo__nom {
  font-family: var(--ef-titre);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ef-nuit);
  text-align: center;
  line-height: 1.15;
}

.ef-logo__legende {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem 0.6rem;
  border-top: 1px solid var(--ef-trait-clair);
  font-size: 0.8rem;
  color: var(--ef-gris-fonce);
  text-align: center;
}
.ef-logo__compte {
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  color: var(--ef-cote-lisible);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .ef-logos { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.6rem; }
  .ef-logo__cadre { height: 3.8rem; padding: 0.7rem; }
  .ef-logo__nom { font-size: 0.9rem; }
}

/* ==========================================================================
   55. Sommaire des guides
   --------------------------------------------------------------------------
   Des lignes séparées par des filets, pas une grille de cartes : dix guides
   en cartes régulières, c'est dix blocs interchangeables où plus rien ne se
   distingue. Le rang en mono à gauche et la durée à droite encadrent le titre
   comme les entrées d'un sommaire imprimé.
   ========================================================================== */

.ef-sommaire-guides {
  list-style: none;
  margin: 1.8rem 0 2.4rem;
  padding: 0;
  border-top: 1px solid var(--ef-trait);
}

.ef-sommaire-guides__ligne { border-bottom: 1px solid var(--ef-trait-clair); }
.ef-sommaire-guides__ligne::before { content: none; }

.ef-sommaire-guides__ligne a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 1.1rem;
  padding: 1.15rem 0.6rem 1.2rem 0.2rem;
  text-decoration: none;
  transition: background var(--ef-transition);
}
.ef-sommaire-guides__ligne a:hover,
.ef-sommaire-guides__ligne a:focus-visible { background: var(--ef-creme); }

.ef-sommaire-guides__rang {
  font-family: var(--ef-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--ef-orange-texte);
  font-variant-numeric: tabular-nums;
}

.ef-sommaire-guides__titre {
  display: block;
  font-family: var(--ef-titre);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ef-nuit);
  margin-bottom: 0.3rem;
  transition: color var(--ef-transition);
}
.ef-sommaire-guides__ligne a:hover .ef-sommaire-guides__titre { color: var(--ef-orange-texte); }

.ef-sommaire-guides__extrait {
  display: block;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ef-gris-fonce);
}

.ef-sommaire-guides__duree {
  font-family: var(--ef-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ef-cote-lisible);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .ef-sommaire-guides__ligne a {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.2rem 0.8rem;
  }
  /* La durée passe sous le texte plutôt que de comprimer le titre. */
  .ef-sommaire-guides__duree { grid-column: 2; }
}

/* ==========================================================================
   56. Caractéristiques de la fiche produit
   --------------------------------------------------------------------------
   Un tableau de cotes, pas une liste à puces. L'intitulé en mono à gauche, la
   valeur en face : c'est la disposition d'une plaque signalétique, celle que
   l'acheteur lit déjà sur l'appareil. Les filets séparent les lignes sans
   enfermer le tout dans un cadre.
   ========================================================================== */

.ef-specs {
  margin: 1.2rem 0 1.4rem;
  padding: 0;
  border-top: 1px solid var(--ef-trait);
}

.ef-specs__ligne {
  display: grid;
  grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
  gap: 0.6rem 1.2rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ef-trait-clair);
}

.ef-specs dt {
  margin: 0;
  font-family: var(--ef-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ef-cote-lisible);
  align-self: center;
}

.ef-specs dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ef-nuit);
  font-weight: 500;
}
/* La référence est faite pour être recopiée : elle garde le chasse fixe et se
   sélectionne d'un geste. */
.ef-specs__ligne:first-child dd {
  font-family: var(--ef-mono);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}

@media (max-width: 420px) {
  .ef-specs__ligne { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding: 0.55rem 0; }
}

/* Le séparateur du fil d'Ariane, en caractère plutôt qu'en fonte d'icônes. */
.ef-fil__separateur {
  margin: 0 0.5rem;
  /* --ef-trait le rendait presque invisible (1,52:1) : il sépare deux liens,
     il doit se voir, même s'il est décoratif et masqué aux lecteurs d'écran. */
  color: var(--ef-cote);
}

/* Bande des marques sur l'accueil. Fond papier pour la détacher des sections
   blanches qui l'encadrent, sans ajouter un cadre de plus. */
.ef-marques-bande {
  padding: 3.5rem 0;
  background: var(--ef-papier);
}
.ef-marques-bande .ef-logos { margin-bottom: 0; }
/* Sur l'accueil la bande n'est pas dans une colonne de lecture : les cases
   peuvent respirer davantage que sur « À propos ». */
.ef-marques-bande .ef-logos {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
}
.ef-marques-bande .ef-logo a { background: var(--ef-blanc); }

/* ---- Fiche technique complète, sous la description ----------------------
   Le résumé ne porte que les six caractéristiques décisives ; les treize que
   fournit le tarif constructeur tiennent ici, en deux colonnes quand la place
   le permet. C'est une fiche technique : on la parcourt, on n'y lit pas une
   ligne après l'autre. */

.ef-fiche-technique {
  margin: 2.5rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--ef-trait);
}
.ef-fiche-technique h2 {
  font-size: var(--ef-titre-s);
  margin: 0 0 1.2rem;
}

.ef-specs--complet {
  columns: 2;
  column-gap: 2.5rem;
  margin-top: 0;
  border-top: 0;
}
/* Une ligne coupée entre deux colonnes sépare l'intitulé de sa valeur. */
.ef-specs--complet .ef-specs__ligne {
  break-inside: avoid;
  border-top: 1px solid var(--ef-trait-clair);
  border-bottom: 0;
}

.ef-specs__suite {
  margin: 0.2rem 0 1.2rem;
  font-size: 0.88rem;
}
.ef-specs__suite a { color: var(--ef-orange-texte); }

.ef-fiche-technique__pdf { margin: 1.4rem 0 0; }

@media (max-width: 760px) {
  .ef-specs--complet { columns: 1; }
}

/* ---- Les deux actions du hero -------------------------------------------
   La paire « un bouton plein + un bouton fantôme » est le hero de gabarit par
   excellence, et elle figure dans les motifs bannis de ce projet. Le fantôme
   changeait en plus de police et de casse : les deux avaient l'air de venir de
   deux sites différents.

   Une seule action porte donc un bouton. La seconde est le numéro lui-même —
   pour un professionnel qui cherche une cote un vendredi à 11 h, appeler est
   le chemin le plus court, et c'est déjà le canal principal de la maison. */

.ef-hero-cuisine__tel {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 0.6rem;
  padding: 0.35rem 0;
  color: var(--ef-blanc);
  text-decoration: none;
  transition: color var(--ef-transition);
}
.ef-hero-cuisine__tel .ef-icone {
  grid-row: 1 / 3;
  color: var(--ef-jaune);
  transition: color var(--ef-transition);
}

.ef-hero-cuisine__numero {
  font-family: var(--ef-titre);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.ef-hero-cuisine__mention {
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(253, 247, 241, 0.78);
}

.ef-hero-cuisine__tel:hover,
.ef-hero-cuisine__tel:focus-visible { color: var(--ef-jaune); }
.ef-hero-cuisine__tel:hover .ef-icone { color: var(--ef-blanc); }

/* Les deux actions s'alignent sur leur milieu : le bouton et le numéro n'ont
   pas la même hauteur, et un alignement par le haut les décalerait. */
.ef-hero-cuisine__actions { align-items: center; gap: 0.9rem 1.8rem; }

@media (max-width: 560px) {
  .ef-hero-cuisine__actions { gap: 1.1rem; }
  .ef-hero-cuisine__numero { font-size: 1.2rem; }
}

/* Correction du 16 septembre : le bouton de devis sortait encore de l'écran
   au-delà de 1 400 px. Le resserrement ne s'appliquait qu'en dessous, alors que
   le conteneur est plafonné à 1 280 px quelle que soit la fenêtre — l'en-tête
   demandait 1 494 px pour 1 232 disponibles sur tous les grands écrans. Il vaut
   désormais pour tout l'affichage ordinateur, et chaque élément déclare ce
   qu'il peut céder : le champ de recherche rétrécit, le bouton de devis
   jamais. */
.site-header .ef-logo { flex: none; }
.ef-nav { min-width: 0; }
.ef-header__actions { flex: 0 1 auto; min-width: 0; }
.ef-header__actions .ef-recherche { flex: 0 1 auto; min-width: 2.6rem; }
.ef-devis { flex: none; white-space: nowrap; }

/* ==========================================================================
   Corrections du 16 septembre (fiche Notion)
   ========================================================================== */

/* ---- Logos des marques : plus de cases --------------------------------------
   « Les logos en encadré, ce n'est pas très beau. » Chaque logo était enfermé
   dans une carte blanche à filet, doublée d'une légende sous un second filet :
   seize boîtes identiques, la grille de cartes même que ce projet s'interdit.
   Les logos sont désormais posés à nu, à hauteur optique commune, et le nom
   n'est plus répété sous un logo qui le dit déjà — il reste lu par les
   lecteurs d'écran. */
.ef-logos,
.ef-marques-bande .ef-logos {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 2.2rem 2rem;
  align-items: end;
}
.ef-logo a,
.ef-marques-bande .ef-logo a {
  background: transparent;
  border: 0;
  height: auto;
  gap: 0.55rem;
  justify-items: center;
  transition: transform var(--ef-transition);
}
.ef-logo a:hover,
.ef-logo a:focus-visible { border: 0; transform: translateY(-2px); }
.ef-logo__cadre {
  height: 3.4rem;
  width: 100%;
  padding: 0;
}
.ef-logo__image {
  max-height: 3.4rem;
  max-width: 8.5rem;
  filter: saturate(0.9);
  transition: filter var(--ef-transition);
}
.ef-logo a:hover .ef-logo__image { filter: none; }
.ef-logo__legende {
  padding: 0;
  border: 0;
}
.ef-logo:not(.ef-logo--sans-image) .ef-logo__marque {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ef-logo--sans-image .ef-logo__marque { display: none; }
.ef-logo__compte { transition: color var(--ef-transition); }
.ef-logo a:hover .ef-logo__compte { color: var(--ef-orange-texte); }
@media (max-width: 480px) {
  .ef-logos { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 1.6rem 1.2rem; }
  .ef-logo__cadre { height: 2.8rem; padding: 0; }
  .ef-logo__image { max-height: 2.8rem; max-width: 7rem; }
}

/* ---- Bouton de devis sur la fiche produit -----------------------------------
   Le bouton faisait 33 px de haut à côté d'un champ quantité de 46 px et d'un
   second bouton de 48 px : trois hauteurs sur une même ligne d'action. */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.6rem;
}
.woocommerce div.product form.cart .quantity { margin: 0; }
.woocommerce div.product form.cart .quantity input.qty { height: 3rem; }
.woocommerce div.product form.cart .button {
  float: none;
  min-height: 3rem;
  margin: 0;
  padding: 0 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- Fiches techniques téléchargeables ----------------------------------- */
.ef-fiches-pdf { margin: 1.2rem 0 1.4rem; }
.ef-fiches-pdf__titre {
  margin: 0 0 0.5rem;
  font-family: var(--ef-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ef-cote-lisible);
}
.ef-fiches-pdf ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.ef-fiches-pdf__lien {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ef-trait);
  background: var(--ef-blanc);
  color: var(--ef-nuit);
  text-decoration: none;
  transition: border-color var(--ef-transition), background var(--ef-transition);
}
.ef-fiches-pdf__lien:hover,
.ef-fiches-pdf__lien:focus-visible {
  border-color: var(--ef-orange);
  background: var(--ef-creme);
  color: var(--ef-nuit);
}
.ef-fiches-pdf__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.8rem;
  background: var(--ef-orange);
  color: var(--ef-blanc);
  font-family: var(--ef-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);
}
.ef-fiches-pdf__texte { display: grid; gap: 0.15rem; min-width: 0; }
.ef-fiches-pdf__texte strong {
  font-size: 0.92rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ef-fiches-pdf__texte span {
  font-family: var(--ef-mono);
  font-size: 0.7rem;
  color: var(--ef-orange-texte);
}
.ef-fiche-technique .ef-fiches-pdf { margin-top: 1.8rem; }
.ef-fiche-technique .ef-fiches-pdf ul { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }

/* ---- Bandeau de logos qui défile ----------------------------------------
   La piste contient deux fois la même liste et se translate de sa moitié : à
   la fin du cycle, la copie occupe exactement la place de l'original, la
   boucle est donc invisible. La durée est proportionnelle au nombre de
   marques, sinon seize logos filent deux fois plus vite que huit. */
.ef-defile {
  overflow: hidden;
  /* Les logos ne doivent pas sembler surgir du bord de l'écran. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}
.ef-defile__piste {
  display: flex;
  width: max-content;
  animation: ef-defilement 60s linear infinite;
}
.ef-defile__piste:hover,
.ef-defile__piste:focus-within { animation-play-state: paused; }
.ef-defile .ef-logos {
  display: flex;
  margin: 0;
  padding: 0 1.1rem;
  gap: 3rem;
  align-items: center;
}
.ef-defile .ef-logo { flex: none; width: 9rem; }
@keyframes ef-defilement {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ef-defile__piste { animation: none; }
  .ef-defile { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ---- Produits à prix affiché, sur l'accueil ------------------------------ */
.ef-avec-prix { padding: 3.5rem 0; }
.ef-avec-prix__mention {
  margin: -0.6rem 0 1.6rem;
  font-size: 0.88rem;
  color: var(--ef-cote-lisible);
}
.ef-avec-prix__liste { margin-bottom: 0; }

/* ---- Bandeau de chiffres, resserré (19 septembre) -------------------------
   « Trop de padding » : la bande faisait près de 200 px de haut pour quatre
   chiffres, et un libellé passait sur deux lignes. Rembourrage réduit de
   moitié, icône et libellé sur la même ligne de base que le chiffre. */
.ef-chiffre__lien {
  padding: 0.95rem 1.4rem 0.9rem;
  gap: 0.1rem 0.75rem;
  align-items: center;
}
.ef-chiffre__icone { margin-top: 0; width: 24px; height: 24px; }
.ef-chiffre__valeur { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.ef-chiffre__libelle {
  margin-top: 0.3rem;
  font-size: 0.84rem;
  max-width: none;
}
/* Largeur fixe par chiffre : le nombre qui monte ne fait pas danser le texte. */
.ef-compteur { font-variant-numeric: tabular-nums; }
/* Sur téléphone, 2 × 2 plutôt qu'une colonne de quatre : le bandeau passait
   à 400 px de haut, soit une demi-hauteur d'écran pour quatre chiffres. */
@media (max-width: 640px) {
  .ef-chiffres .ef-chiffres__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-chiffres .ef-chiffre { border-top: 0; }
  .ef-chiffres .ef-chiffre + .ef-chiffre { border-left: 0; }
  .ef-chiffres .ef-chiffre:nth-child(even) { border-left: 1px solid rgba(213, 209, 205, 0.14); }
  .ef-chiffres .ef-chiffre:nth-child(n + 3) { border-top: 1px solid rgba(213, 209, 205, 0.14); }
  /* Même spécificité que la règle à 560 px plus haut (qui remettait 1,5 rem
     sur les cases 2 à 4), déclarée après : c'est celle-ci qui l'emporte. */
  .ef-chiffres .ef-chiffres__liste > .ef-chiffre .ef-chiffre__lien {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    align-content: start;
    height: 100%;
    padding: 0.8rem 0.9rem;
  }
  .ef-chiffres .ef-chiffres__liste > .ef-chiffre:nth-child(odd) .ef-chiffre__lien { padding-left: 0; }
  .ef-chiffres .ef-chiffre__icone { grid-row: auto; width: 20px; height: 20px; margin-bottom: 0.2rem; }
  .ef-chiffres .ef-chiffre__valeur { font-size: 1.6rem; }
  .ef-chiffres .ef-chiffre__libelle { font-size: 0.78rem; }
}