/* SOMATHES — système de design (refonte de l'accueil, nov. 2026).
   Chargé après la feuille de page par inc/assets.php sur les pages refaites (liste : sm_uses_system()), pas sur l'Accueil 2. Ne touche pas au héros (#hero).
   Identité d'origine conservée : Plus Jakarta Sans, vert #0E2A1C, or #C9A24A, fonds porcelaine, angles arrondis (20 px).
   Ajouts : liens soulignés sans pictogramme, boutons sans pictogramme, mises en page inspirées des références du dossier Insperation. */

:root{--x-green:#0E2A1C;--x-green-2:#1F4A33;--x-gold:#C9A24A;--x-gold-ink:#876418;--x-ink:#16211B;--x-muted:#5B665F;--x-line:#D9DDD5;--x-paper:#F3F4EF}
/* Toutes les autres couleurs du système (aucune valeur en dur dans les règles) : blanc, verts et gris d'appoint, ombre, palette Dahmiss.
   Les jetons *-rgb servent aux transparences : rgba(var(--x-white-rgb),.8). */
:root{--x-white:#FFFFFF;--x-white-rgb:255,255,255;--x-green-rgb:14,42,28;--x-on-gold:#13241A;--x-photo-bg:#13241A;--x-placeholder:#DDE2DA;--x-mint:#E3ECE4;--x-dot:#C3CBC2;--x-dot-on:#D3D9D1;--x-shadow:rgba(0,0,0,.35);--x-menu-veil:7,20,13;--x-gold-rgb:201,162,74;--x-gold-2:#B08A2E;--x-sheet:#FCFBF7}
:root{--x-amber:#EDA730;--x-amber-rgb:237,167,48;--x-amber-deep:#C98A1E;--x-rust:#9A5A16;--x-brown:#3B1D0E;--x-brown-rgb:59,29,14;--x-brown-hover:#5A2E17;--x-cream:#FBF3E4;--x-cream-rgb:251,243,228;--x-dah-shade-rgb:42,20,10;--x-dah-glow:rgba(255,246,226,.34)}
/* Fonds sombres « de marque » : boutons foncés, bloc CTA, pied de page, barre du haut, bouton vidéo du héros, visuel vert des actualités sans image.
   --x-deep (fond), --x-on-deep* (textes, filets, accent sur ce fond). Valeurs par défaut = couleurs d'origine. Les titres et textes verts gardent --x-green. */
:root{--x-deep:#0E2A1C;--x-deep-hover:#1F4A33;--x-on-deep:#FFFFFF;--x-on-deep-2:rgba(255,255,255,.76);--x-on-deep-3:rgba(255,255,255,.6);--x-on-deep-line:rgba(255,255,255,.12);--x-on-deep-ghost:rgba(255,255,255,.42);--x-on-deep-accent:#C9A24A;--x-deep-veil:8,24,15}
/* ESSAI TEMPORAIRE (accueil, sélecteur de la barre du haut) : « Moyen » = milieu exact entre #0E2A1C et #086633 ; « Clair » = #086633 (demande cliente). Fonds toujours foncés : textes blancs et accent or inchangés. */
html[data-deep="b"]{--x-deep:#0B4828;--x-deep-hover:#135A35;--x-deep-veil:5,32,18;--x-photo-bg:#052012;--x-menu-veil:4,27,16}
html[data-deep="c"]{--x-deep:#086633;--x-deep-hover:#0B7A3E;--x-deep-veil:4,44,22;--x-photo-bg:#042C16;--x-menu-veil:4,37,19}
/* Largeur du contenu (comme « Content width » d'Elementor) : la boîte .wrap va jusqu'à 1920 px (écran de 24 pouces).
   Marges intérieures fluides : 40 px à 1366 px d'écran, puis elles grandissent jusqu'à 80 px à 1920 px (jamais moins de 40, jamais plus de 80) ; 20 px sur téléphone. */
/* --x-inner : largeur du contenu du héros de l'accueil (1248 px). Le bloc « Notre marque phare » et le texte du CTA s'alignent sur le même bord gauche que le texte du héros. */
:root{--x-max:1920px;--x-gutter:clamp(40px,calc(7.22vw - 58.6px),80px);--x-inner:1248px}
.wrap{max-width:var(--x-max);padding-left:var(--x-gutter);padding-right:var(--x-gutter)}
@media(max-width:767px){:root{--x-gutter:20px}}
/* Héros de l'accueil : le texte et la barre du bas (Production, Logistique… vidéo) utilisent toute la largeur du contenu, comme les autres sections
   (bord gauche aligné sur le logo). L'Accueil 2 ne charge pas cette feuille : son héros reste d'origine. */
#hero .hero-in{max-width:var(--x-max);padding-left:var(--x-gutter);padding-right:var(--x-gutter)}
#hero .chain{width:calc(100% - 2 * var(--x-gutter));max-width:calc(var(--x-max) - 2 * var(--x-gutter))}
/* Plus de rotation automatique (assets/js/pages/accueil.js) : sur téléphone, le trait doré de la carte ouverte est un simple repère, pas un compte à rebours */
@media(max-width:640px){#hero .chain-step.is-active::after{animation:none}}
/* Héros sur écrans d'ordinateur peu hauts (portables) : le héros (environ 925 px) dépasse l'écran. L'en-tête y est aussi un peu plus bas (106 px). Dès 1 024 px de large et sous 930 px de haut,
   il prend exactement la hauteur de l'écran et son contenu se resserre avec elle (titres, textes, marges en vh), la barre du bas s'aplatit
   (icône à côté du texte). Hauteurs utiles visées : 600 px (1280×720) à 930 px ; 1366×768 ≈ 640 px, 1536×864 ≈ 730 px, 1440×900 ≈ 800 px.
   Au-delà (écrans de 24 pouces), le héros garde sa hauteur d'origine et le blanc dessous. Tablettes et téléphones : inchangés. */
@media (min-width:1024px) and (max-height:930px){
  /* En-tête plus bas sur ces écrans : 34 + 72 = 106 px au lieu de 40 + 88 = 128 px ; tout ce qui se cale sous l'en-tête suit (méga-menus, menu mobile, barre des liens, fil épinglé, ancres) */
  .hdr-top,.hdr-top>.wrap{height:34px}
  .hdr-main>.wrap,.ni{height:72px}
  .mega,.mnav{top:106px}
  .mnav{max-height:calc(100vh - 106px)}
  html.scrolled .mega,html.scrolled .mnav{top:72px}
  html.scrolled .mnav{max-height:calc(100vh - 72px)}
  :root.scrolled .x-subnav,:root.scrolled .series{top:72px}
  :root:has(.x-subnav){scroll-padding-top:77px}
  body .x-fil{--top:133px}
  /* --hv : 1 % de la hauteur réellement disponible pour le héros. Connecté, la barre d'administration de WordPress (32 px) pousse la page vers le bas :
     le héros la retire de sa hauteur et toutes les tailles suivent, pour voir exactement ce que voit un visiteur. */
  /* Hauteur : au moins l'écran (moins la barre d'administration), jamais une hauteur fixe : si le contenu ne tient pas, le héros grandit au lieu de couper la barre du bas.
     Ordre de priorité : contenu et barre entiers > espace sous la barre (le pseudo-élément ::after, 40 px au plus, qui disparaît en premier) > marge au-dessus du contenu. */
  #hero{--adm:0px;--hv:calc((100vh - var(--adm)) / 100);height:auto;min-height:calc(100vh - var(--adm));min-height:calc(100svh - var(--adm));padding-top:106px}
  #hero::after{content:"";flex:1 1 0;max-height:40px;min-height:0}
  #hero .hero-in{margin-top:auto}
  #hero .hero-in,#hero .chain{flex-shrink:0}
  .admin-bar #hero{--adm:32px}
  #hero .hero-in{padding-top:clamp(10px,4 * var(--hv) - 14px,40px)}
  #hero .hero-slides{min-height:0}
  #hero .hero-kicker::after{margin-top:clamp(10px,1.8 * var(--hv),18px)}
  #hero .hero-title{margin-top:clamp(12px,2.2 * var(--hv),24px);font-size:clamp(28px,min(4.6vw,6.4 * var(--hv)),62px)}
  #hero .hero-lede{margin-top:clamp(12px,2 * var(--hv),22px);max-width:640px;font-size:clamp(14px,2.3 * var(--hv),18px);line-height:1.55}
  #hero .hero-actions{margin-top:clamp(12px,3 * var(--hv),32px)}
  #hero .hero-dots{margin-top:clamp(8px,2.6 * var(--hv),34px)}
  #hero .chain{margin-top:clamp(10px,3 * var(--hv),32px);margin-bottom:0}
  #hero .chain-step{flex-direction:row;align-items:center;gap:16px;padding:clamp(8px,2.4 * var(--hv),24px) 24px}
  #hero .chain-step svg{flex:none;width:clamp(26px,4 * var(--hv),36px);height:clamp(26px,4 * var(--hv),36px)}
  #hero .chain-video{gap:16px;padding:clamp(4px,1.6 * var(--hv),18px) 28px}
  #hero .play{width:clamp(46px,8.4 * var(--hv),76px);height:clamp(46px,8.4 * var(--hv),76px)}
  #hero .play::before{width:78%;height:78%}
}
/* Héros sur téléphone (demande du 10 nov. 2026) : le texte d'introduction (.hero-lede) est masqué sur toutes les diapositives, pour que le titre, les boutons,
   les points et la barre du bas tiennent dans la hauteur de l'écran sans défiler. Même principe que les portables ci-dessus : au moins l'écran (jamais une hauteur fixe,
   le héros grandit plutôt que de couper la barre), tailles et marges en --hv (1 % de la hauteur visible, barre d'administration déduite), barre du bas resserrée. */
@media(max-width:640px){
  #hero{--adm:0px;--hv:calc((100vh - var(--adm)) / 100);min-height:calc(100vh - var(--adm));min-height:calc(100svh - var(--adm));--hv:calc((100svh - var(--adm)) / 100)}
  .admin-bar #hero{--adm:46px}
  #hero::after{content:"";flex:1 1 0;max-height:20px;min-height:8px}
  #hero .hero-in{margin-top:auto;padding-top:clamp(12px,2.4 * var(--hv),24px)}
  #hero .hero-in,#hero .chain{flex-shrink:0}
  #hero .hero-lede{display:none}
  #hero .hero-kicker{font-size:11.5px}
  #hero .hero-kicker::after{margin-top:clamp(10px,1.6 * var(--hv),18px)}
  #hero .hero-title{margin-top:clamp(12px,2.2 * var(--hv),24px);font-size:clamp(28px,4.6 * var(--hv),40px)}
  #hero .hero-actions{margin-top:clamp(16px,2.8 * var(--hv),32px);gap:10px}
  #hero .hero-actions .btn,#hero .hero-brands{height:clamp(46px,6 * var(--hv),54px)}
  #hero .hero-brands img{height:clamp(30px,4 * var(--hv),36px)}
  #hero .hero-dots{margin-top:clamp(10px,2.2 * var(--hv),28px)}
  #hero .chain{margin-top:clamp(12px,2.2 * var(--hv),28px);margin-bottom:0}
  #hero .chain-step{gap:14px;padding:clamp(9px,1.6 * var(--hv),16px) 20px}
  #hero .chain-step svg{width:26px;height:26px}
  #hero .chain-txt{gap:3px}
  #hero .chain-txt b{font-size:13px}
  #hero .chain-txt small{font-size:10.5px}
  #hero .chain-video{gap:16px;padding:clamp(6px,1.2 * var(--hv),14px) 20px}
  #hero .play{width:clamp(44px,6.4 * var(--hv),56px);height:clamp(44px,6.4 * var(--hv),56px)}
  #hero .play::before{width:78%;height:78%}
  #hero .chain-video-txt{font-size:13px}
}
/* Téléphones peu hauts (moins de 800 px visibles, ex. Safari avec ses barres) : la barre du bas reprend la disposition des tablettes (3 colonnes, icône au-dessus du nom),
   sous-titres masqués, la vidéo sur une ligne dessous ; elle passe d'environ 250 px à 150 px de haut. */
@media(max-width:640px) and (max-height:799px){
  #hero .chain{grid-template-columns:repeat(3,minmax(0,1fr))}
  #hero .chain-step{flex-direction:column;align-items:flex-start;gap:8px;padding:clamp(10px,1.8 * var(--hv),14px) 12px;border-bottom:0;border-inline-end:1px solid rgba(var(--x-green-rgb),.1)}
  #hero .chain-step:nth-child(3){border-inline-end:0}
  #hero .chain-step svg{width:24px;height:24px}
  #hero .chain-txt b{font-size:10.5px;letter-spacing:.08em}
  #hero .chain-txt small{display:none}
  #hero .chain-video{grid-column:1/-1;border-top:1px solid rgba(var(--x-green-rgb),.1)}
}

/* ───── Méga-menus : sous-liens soulignés au survol (au lieu du fond arrondi) ───── */
.mega-links a:hover,.mega-links a.on{background:none;box-shadow:none}
.mega-links b,.mega-links span{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:5px;transition:text-decoration-color .2s}
.mega-links span{text-decoration-thickness:1px;text-underline-offset:4px}
.mega-links a:hover b,.mega-links a:hover span{text-decoration-color:var(--x-gold)}
.mega-links a.on b{color:var(--x-gold-ink);text-decoration-color:var(--x-gold)}
.mega-links a.on span{text-decoration-color:var(--x-gold)}
/* Au survol d'un sous-lien, les autres s'estompent */
.mega-links a{transition:opacity .2s}
.mega-links:has(a:hover) a:not(:hover){opacity:.4}
/* Cartes « Nos thés » et « Distribution » : photo assombrie, comme la carte « La Somathes » (balisage : site-header.php) */
.mcard--photo>i{background:linear-gradient(0deg,rgba(var(--x-menu-veil),.94) 0%,rgba(var(--x-menu-veil),.7) 55%,rgba(var(--x-menu-veil),.25) 100%)}
.mcard--photo b.mcard-fig{margin-top:6px;font-size:30px;line-height:1.05;letter-spacing:-.03em}
/* Carte avec produit (Nos thés) : la boîte Dahmiss en fond, assombrie ; le texte par-dessus */
.mcard--product>img{filter:brightness(.55);transform:scale(1.15)}
.mcard--product:hover>img{transform:scale(1.2)}
.mcard--product>i{background:linear-gradient(0deg,rgba(var(--x-menu-veil),.9) 0%,rgba(var(--x-menu-veil),.55) 32%,rgba(var(--x-menu-veil),0) 60%)}
.mcard-txt{position:relative;display:block;margin-top:8px;font-size:14px;line-height:1.45;color:rgba(var(--x-white-rgb),.8)}

/* ───── Éléments communs des sections ───── */
/* Espacement, le même sur toutes les pages refaites :
   - une section (.x-sec) : 112 px en haut et en bas (72 px sur téléphone) ;
   - deux sections de même fond qui se suivent ne doublent pas l'espace : la seconde n'a pas d'espace en haut (112 px entre les deux contenus) ;
   - titre de section (.x-head) → contenu : 56 px (40 px sur petit écran), sans trait au-dessus du titre. */
.x-sec{padding-top:112px;padding-bottom:112px}
.x-sec--flush{padding-top:0}
.x-sec--paper{background:var(--x-paper)}
.x-sec:not(.x-sec--paper)+.x-sec:not(.x-sec--paper),.x-sec--paper+.x-sec--paper{padding-top:0}
.x-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:start;margin-bottom:56px}
.x-head-r{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.x-h2{font-size:clamp(32px,3.6vw,52px);line-height:1.05;letter-spacing:-.032em;font-weight:600;color:var(--x-green);text-wrap:balance}
.x-lead{font-size:17px;line-height:1.65;color:var(--x-muted);max-width:520px;text-wrap:pretty}
.x-h3{font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:600;color:var(--x-green)}
.x-p{font-size:15.5px;line-height:1.65;color:var(--x-muted);max-width:520px;text-wrap:pretty}
.x-link,.x-more,.mlink{display:inline-block;font-weight:600;color:var(--x-green);text-decoration:underline;text-decoration-color:var(--x-gold);text-decoration-thickness:1px;text-underline-offset:7px;transition:color .2s}
.x-link{font-size:15px}
.x-more{font-size:14px}
.x-link:hover,.mlink:hover{color:var(--x-gold-ink)}
/* Liens secondaires : une flèche (non soulignée) montre qu'ils mènent à une autre page */
.x-link::after,.x-more::after,.mlink::after{content:"";display:inline-block;width:14px;height:14px;margin-inline-start:8px;vertical-align:-2px;background:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:14px 14px;mask-size:14px 14px;-webkit-mask-position:0 0,-21px 0;mask-position:0 0,-21px 0}
/* Au survol, la flèche sort vers l'avant et une seconde flèche (second calque du masque) la remplace par l'arrière */
@keyframes x-arrow-swap{0%{-webkit-mask-position:0 0,-21px 0;mask-position:0 0,-21px 0}25%{-webkit-mask-position:7px 0,-21px 0;mask-position:7px 0,-21px 0}75%{-webkit-mask-position:21px 0,-7px 0;mask-position:21px 0,-7px 0}100%{-webkit-mask-position:21px 0,0 0;mask-position:21px 0,0 0}}
.x-link:hover::after,.mlink:hover::after,.x-duo-item:hover .x-more::after,.x-news-item:hover .x-more::after{animation:x-arrow-swap .2s linear forwards}
[dir="rtl"] .mlink::after,[dir="rtl"] .x-link::after,[dir="rtl"] .x-more::after{transform:scaleX(-1)}
.x-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.x-media{position:relative;overflow:hidden;background:var(--x-placeholder)}
.x-media img{width:100%;height:100%;object-fit:cover}

/* Boutons : forme arrondie du héros (.btn d'origine), sans pictogramme (le héros garde les siens) */
.x-sec .btn svg,.x-cta .btn svg{display:none}

/* ───── Deux expertises ───── */
.x-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.x-duo-item{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.x-duo-item:nth-child(2){margin-top:96px}
.x-media--duo{width:100%;aspect-ratio:4/3;margin-bottom:12px;border-radius:20px}
.x-duo-item:hover .x-more{color:var(--x-gold-ink)}

/* ───── Nos marques : mosaïque (une grande tuile, trois petites, la gamme en vert) ───── */
.x-bento{display:grid;grid-template-columns:minmax(0,1.15fr) repeat(2,minmax(0,1fr));gap:20px}
.x-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:300px;padding:28px;border-radius:20px;background:var(--tint,var(--x-paper));color:var(--x-ink);overflow:hidden}
.x-tile--big{grid-row:1/span 2;padding:40px}
.x-tile-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.x-tile-fam{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--x-gold-ink)}
.x-chip{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;background:var(--x-white);font-size:12px;font-weight:600;color:var(--x-green)}
.x-tile-t{margin-top:14px;font-size:24px;line-height:1.15;letter-spacing:-.02em;font-weight:600;color:var(--x-green)}
.x-tile--big .x-tile-t{margin-top:18px;font-size:clamp(30px,3vw,42px);line-height:1.05}
.x-tile-ar{margin-top:4px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:17px;font-weight:500;color:var(--x-muted)}
.x-tile--big .x-tile-ar{font-size:20px}
.x-tile-d{font-size:14.5px;line-height:1.55;color:var(--x-muted)}
.x-tile--big .x-tile-d{margin-top:18px;font-size:16px;max-width:380px}
.x-tile-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.x-tile-foot .x-tile-d{flex:1;min-width:0}
.x-tile-media{display:flex;align-items:flex-end;justify-content:center}
.x-tile-foot .x-tile-media{flex:none;width:118px;height:140px}
.x-tile--big .x-tile-media{height:330px}
.x-tile-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.x-tile:hover .x-tile-media img{transform:translateY(-6px)}
.x-tile--range{background:var(--x-mint);color:var(--x-ink)}
.x-tile-k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--x-gold-ink)}
.x-tile--range .x-tile-t{margin-top:0;font-size:22px;line-height:1.25;color:var(--x-green)}
.x-tile--range .x-tile-d{margin-top:10px;color:var(--x-muted)}
.x-tile--range .btn{align-self:flex-start}
/* Photos assombries derrière les marques ; la tuile de la gamme, vert très clair, sans photo */
.x-bento--photo .x-tile:not(.x-tile--range){isolation:isolate;background:var(--x-photo-bg);color:var(--x-white)}
.x-tile-bg{position:absolute;top:0;left:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.x-bento--photo .x-tile:not(.x-tile--range)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--x-deep-veil),.88) 0%,rgba(var(--x-deep-veil),.7) 50%,rgba(var(--x-deep-veil),.8) 100%)} /* voile des cartes « Nos marques » : suit le sélecteur de couleur (Moyen/Clair = leur couleur assombrie à ~44 %, proche de la profondeur du voile d’origine) */
.x-bento--photo .x-tile:hover .x-tile-bg{transform:scale(1.04)}
.x-bento--photo .x-tile:not(.x-tile--range) .x-tile-fam{color:var(--x-gold)}
.x-bento--photo .x-tile:not(.x-tile--range) .x-tile-t{color:var(--x-white)}
.x-bento--photo .x-tile:not(.x-tile--range) .x-tile-ar{color:rgba(var(--x-white-rgb),.74)}
.x-bento--photo .x-tile:not(.x-tile--range) .x-tile-d{color:rgba(var(--x-white-rgb),.84)}
.x-bento--photo .x-tile-media img{filter:drop-shadow(0 18px 24px var(--x-shadow))}

/* ───── Dahmiss, marque phare : aux couleurs de la marque (ambre et brun du site Dahmiss), logo arabe en filigrane ───── */
.x-dah{max-width:var(--x-inner);margin-inline:auto;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:40px;padding:56px 64px;border-radius:28px;overflow:hidden;background:var(--x-amber);color:var(--x-brown)}
.x-dah-mark{position:absolute;z-index:-1;inset-inline-start:-48px;bottom:-72px;width:min(80%,780px);height:auto;opacity:.18;pointer-events:none}
.x-dah-body{display:flex;flex-direction:column;align-items:flex-start}
.x-dah-k{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.x-dah-k::before{content:"";width:40px;height:1.5px;background:currentColor}
.x-dah-t{margin-top:18px;font-size:clamp(28px,2.6vw,38px);line-height:1.12;letter-spacing:-.025em;font-weight:700;text-wrap:balance}
.x-dah-d{margin-top:16px;max-width:560px;font-size:17px;line-height:1.65;color:rgba(var(--x-brown-rgb),.84)}
.x-btn-brown{margin-top:28px;background:var(--x-brown);color:var(--x-cream)}
.x-btn-brown:hover{background:var(--x-brown-hover)}
.x-dah-note{margin-top:28px;padding-top:18px;max-width:440px;border-top:1px solid rgba(var(--x-brown-rgb),.28);font-size:14px;line-height:1.5;color:rgba(var(--x-brown-rgb),.8)}
.x-dah-media{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:360px;aspect-ratio:1;justify-self:center}
.x-dah-media::before{content:"";position:absolute;inset:4%;border-radius:50%;background:var(--x-dah-glow)}
.x-dah-pack{position:relative;width:84%;height:auto;filter:drop-shadow(0 30px 40px rgba(var(--x-brown-rgb),.3))}
.x-dah-label{position:absolute;top:9%;inset-inline-end:7%;width:min(25%,118px);height:auto;border-radius:10px;transform:rotate(8deg);box-shadow:0 14px 26px rgba(var(--x-brown-rgb),.32)}

/* ───── De la feuille au rayon : quatre photos, l'étape écrite sur la photo ───── */
.x-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start}
.x-flow-item:nth-child(even){margin-top:64px}
.x-flow-item{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:460px;padding:24px;border-radius:20px;overflow:hidden;background:var(--x-deep);color:var(--x-white)}
.x-flow-item>img{position:absolute;top:0;left:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.x-flow-item::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--x-deep-veil),0) 34%,rgba(var(--x-deep-veil),.9) 100%)}
.x-flow-n{position:absolute;top:20px;inset-inline-start:20px;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:var(--x-white);font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--x-green);font-variant-numeric:tabular-nums}
/* Petit trait doré avant le numéro, qui s'allonge de quelques pixels au survol de la carte */
.x-flow-n::before{content:"";width:8px;height:1.5px;background:var(--x-gold);transition:width .35s cubic-bezier(.2,.7,.2,1)}
.x-flow-item:hover .x-flow-n::before{width:18px}
.x-flow-t{font-size:22px;line-height:1.2;letter-spacing:-.015em;font-weight:600}
.x-flow-d{margin-top:10px;font-size:14.5px;line-height:1.55;color:rgba(var(--x-white-rgb),.86)}

/* ───── Actualités : une à la une, les suivantes en liste ───── */
.x-news{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 56px;align-items:start}
.x-news-item{display:grid;gap:20px}
.x-news .nmedia{height:auto;background:var(--x-placeholder);overflow:hidden;border-radius:20px}
.x-news .nmedia img{width:100%;height:100%;object-fit:cover;transition:none}
.x-news-item--main .nmedia{aspect-ratio:16/10}
.x-news-side{border-top:1px solid var(--x-line)}
.x-news-item:not(.x-news-item--main){grid-template-columns:168px minmax(0,1fr);gap:24px;align-items:start;padding:24px 0;border-bottom:1px solid var(--x-line)}
.x-news-item:not(.x-news-item--main) .nmedia{aspect-ratio:4/3;border-radius:12px}
.x-news-item:not(.x-news-item--main) .nmedia p{padding:10px;font-size:14px!important;line-height:1.3;text-align:center}
.x-news-body{display:flex;flex-direction:column;gap:10px}
.x-news-t{font-size:19px;line-height:1.35;font-weight:600;letter-spacing:-.01em;color:var(--x-green);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .2s}
.x-news-item--main .x-news-t{font-size:clamp(22px,2.2vw,28px);line-height:1.25;letter-spacing:-.018em}
.x-news-item:hover .x-news-t{text-decoration-color:var(--x-gold)}
/* Même hauteur : l'article à la une s'étire sur la hauteur des trois suivants (sa photo prend la place libre) */
.x-news{align-items:stretch}
.x-news-item--main{display:flex;flex-direction:column}
.x-news-item--main .nmedia{position:relative;flex:1 1 auto;min-height:280px;aspect-ratio:auto}
.x-news-item--main .nmedia img{position:absolute;top:0;left:0}
.x-news-item--main .btn{align-self:flex-start;margin-top:8px}
.x-news-body .x-more{align-self:flex-start;margin-top:2px}
.x-news-side{display:flex;flex-direction:column}
.x-news-side .x-news-item{flex:1 1 auto;align-content:center}

/* ───── Appel à l'action final : texte et photo bord à bord ───── */
.x-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--x-deep);color:var(--x-white)}
/* Le texte commence sur le même bord gauche que le texte du héros et le bloc « Notre marque phare » (largeur --x-inner).
   100 % = la moitié de la section (la colonne du texte), donc 100 % − 1248/2 = (largeur de la section − 1248) / 2, sans la barre de défilement. */
.x-cta-txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-block:104px;padding-inline-start:max(var(--x-gutter),calc(100% - var(--x-inner) / 2));padding-inline-end:64px}
.x-cta-t{font-size:clamp(32px,3.6vw,52px);line-height:1.06;letter-spacing:-.03em;font-weight:600;max-width:560px;text-wrap:balance}
.x-cta-d{margin-top:20px;font-size:17px;line-height:1.65;color:rgba(var(--x-white-rgb),.8);max-width:520px}
.x-cta .x-actions{margin-top:36px;gap:12px}
.x-cta-media{position:relative;min-height:520px;background:var(--x-photo-bg)}
.x-cta-media img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}

/* ───── Appel à l'action de l'accueil : bloc vert arrondi + image détourée qui sort du bloc ─────
   Inspiration : Insperation/cta.jpg. Même gabarit que le bloc « Notre marque phare » (largeur --x-inner, arrondi 28px,
   colonnes 1.3fr / .7fr) ; ombre de l'image = celle des packshots de l'accueil. Pas d'overflow:hidden : l'image déborde par le haut.
   .x-cta (texte + photo bord à bord) reste utilisé par La Somathes. */
.x-ctab-card{max-width:var(--x-inner);margin-inline:auto;position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:40px;padding:64px;border-radius:28px;background:var(--x-deep);color:var(--x-white)}
.x-ctab-body{display:flex;flex-direction:column;align-items:flex-start}
.x-ctab-t{font-size:clamp(30px,2.9vw,44px);line-height:1.08;letter-spacing:-.03em;font-weight:600;max-width:600px;text-wrap:balance}
.x-ctab-d{margin-top:18px;max-width:540px;font-size:17px;line-height:1.65;color:rgba(var(--x-white-rgb),.8)}
.x-ctab .x-actions{margin-top:32px;gap:12px}
.x-ctab .btn svg{display:none}
/* Après une section blanche, l'image qui dépasse (64px) entre dans l'espace de 112px : on le redonne pour qu'elle ne touche pas la section précédente */
.x-sec:not(.x-sec--paper)+.x-sec.x-ctab:not(.x-sec--paper){padding-top:64px}
.x-ctab-media{position:relative;align-self:stretch}
/* Pile de boîtes (image verticale) posée près du bas du bloc et qui dépasse de 64px en haut, légèrement penchée (-1°), comme le téléphone de l'inspiration (Insperation/cta.jpg).
   Taille fixée par la hauteur : colonne + 180px = 64px (marge du haut) + 52px (sous la colonne) + 64px (dépassement) ; ombre courte pour ne pas déborder sous le bloc */
.x-ctab-pack{position:absolute;bottom:-52px;inset-inline-end:6%;height:calc(100% + 180px);width:auto;max-width:none;transform:rotate(-1deg);filter:drop-shadow(0 8px 12px var(--x-shadow))}
/* Écrans moyens : le bloc est plus haut (plus de lignes), donc la pile aussi ; on la pousse à droite pour ne jamais couvrir le texte */
@media(min-width:901px) and (max-width:1280px){.x-ctab-pack{inset-inline-end:0}}
[dir="rtl"] .x-ctab-pack{transform:rotate(1deg)}
@media(max-width:900px){
  .x-ctab-card{grid-template-columns:1fr;gap:28px;padding:0 40px 48px}
  .x-ctab-media{order:-1;align-self:auto;margin-top:-80px}
  .x-ctab-pack{position:static;display:block;width:180px;height:auto;margin-inline:auto}
}
@media(max-width:767px){
  .x-sec:not(.x-sec--paper)+.x-sec.x-ctab:not(.x-sec--paper){padding-top:80px}
  .x-ctab-card{padding:0 24px 40px}
}
/* Animation au défilement (demande de l'utilisateur, 2026-11-09). Le script de assets/js/site.js donne au bloc deux avancements de 0 à 1 pendant qu'il traverse l'écran
   (0 = le haut du bloc entre par le bas, 1 = le bas du bloc sort par le haut), lissés pour que tout glisse : --ctab-p (bloc et texte) et --ctab-s (pile de boîtes,
   lissée plus lentement : elle suit avec un léger retard, d'où l'effet « flottant »). Sans script ou avec « réduire les animations », rien ne bouge (classe is-anim absente).
   Bloc : monte de 48px comme les blocs .rv des anciennes pages (de l'entrée à 26% de la traversée) et grandit de 94% à 100% ; son opacité n'est animée qu'au tout début
   (8%) : un grand bloc vert à moitié transparent devient gris terne. Texte : titre, phrase puis boutons montent l'un après l'autre (24px).
   Pile : elle sort du bord bas du bloc (coupée à ce bord par clip-path, écrans larges), se redresse de -6° à -1° et finit de se poser vers 42% ; elle continue ensuite de monter
   doucement (--ctab-drift), sans jamais redescendre sous le bord du bloc : la pose exacte de la maquette (-1°, 0px) est atteinte quand le bloc est au milieu de l'écran (50%). */
@media (prefers-reduced-motion:no-preference){
  .x-ctab.is-anim{--ctab-a:clamp(0,calc(var(--ctab-p) / .26),1);--ctab-e:clamp(0,calc((var(--ctab-s) - .06) / .36),1);--ctab-rise:240px;--ctab-drift:120px;--ctab-dir:1}
  [dir="rtl"] .x-ctab.is-anim{--ctab-dir:-1}
  .x-ctab.is-anim .x-ctab-card{opacity:clamp(0,calc(var(--ctab-p) / .08),1);transform:translateY(calc((1 - var(--ctab-a)) * 48px)) scale(calc(.94 + var(--ctab-a) * .06))}
  .x-ctab.is-anim .x-ctab-body>*{--ctab-t:clamp(0,calc((var(--ctab-p) - var(--ctab-d,.06)) * 5),1);opacity:var(--ctab-t);transform:translateY(calc((1 - var(--ctab-t)) * 24px))}
  .x-ctab.is-anim .x-ctab-body>:nth-child(2){--ctab-d:.1}
  .x-ctab.is-anim .x-ctab-body>:nth-child(n+3){--ctab-d:.14}
  /* --ctab-o = arrivée adoucie en fin de course (1 - (1 - e)²) */
  .x-ctab.is-anim .x-ctab-pack{--ctab-o:calc(var(--ctab-e) * (2 - var(--ctab-e)));opacity:clamp(0,calc((var(--ctab-s) - .06) / .12),1);transform:translateY(calc((1 - var(--ctab-o)) * var(--ctab-rise) + (.5 - var(--ctab-s)) * var(--ctab-drift))) rotate(calc(var(--ctab-dir) * (-1deg - (1 - var(--ctab-o)) * 5deg + (var(--ctab-s) - .5) * 4deg)));will-change:transform,opacity}
  @media(min-width:901px){.x-ctab.is-anim .x-ctab-card{clip-path:inset(-240px -40px 0 -40px)}}
  /* Mobile : la pile est au-dessus du texte, elle ne sort pas du bas : petite montée, sans coupe */
  @media(max-width:900px){.x-ctab.is-anim{--ctab-rise:40px;--ctab-drift:32px}}
}

/* ═════ La Somathes ═════ */
.x-head-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;width:100%}

/* Liens de la page : barre blanche sous le héros, qui reste collée sous l'en-tête pendant le défilement ;
   le lien de la section lue (le premier par défaut) est souligné d'or (assets/js/pages/la-somathes.js) */
.x-subnav{position:sticky;top:0;z-index:15;background:var(--x-white);border-bottom:1px solid var(--x-line)}
html.scrolled .x-subnav{top:88px}
/* Ancres : le titre de la section arrive 56 px sous la barre (en-tête 88 px + barre 61 px) */
html:has(.x-subnav){scroll-padding-top:93px}
.x-sec:not(.x-sec--paper)+.x-sec[id]:not(.x-sec--paper),.x-sec--paper+.x-sec--paper[id]{scroll-margin-top:112px}
.x-subnav-in{display:flex;align-items:center;gap:36px;height:60px}
.x-subnav-t,.x-subnav-in--flat>b{flex:none;padding-inline-end:36px;border-inline-end:1px solid var(--x-line);font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--x-green)}
.x-subnav-links{display:flex;gap:32px;height:100%;overflow-x:auto;scrollbar-width:none}
.x-subnav-links::-webkit-scrollbar{display:none}
/* Barre des pages de la rubrique (Notre histoire…) : le champ donne le nom de la rubrique (b) puis les liens, sans conteneur */
.x-subnav-in--flat{gap:32px;overflow-x:auto;scrollbar-width:none}
.x-subnav-in--flat::-webkit-scrollbar{display:none}
.x-subnav-in--flat>b{margin-inline-end:4px}
.x-subnav-links a,.x-subnav-in--flat>a{position:relative;flex:none;display:flex;align-items:center;height:100%;font-size:14.5px;font-weight:600;color:var(--x-muted);transition:color .2s}
.x-subnav-links a::after,.x-subnav-in--flat>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--x-gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.x-subnav-links a:hover,.x-subnav-links a.is-on,.x-subnav-in--flat>a:hover,.x-subnav-in--flat>a.on{color:var(--x-green)}
.x-subnav-links a:hover::after,.x-subnav-in--flat>a:hover::after{transform:scaleX(.4)}
.x-subnav-links a.is-on::after,.x-subnav-in--flat>a.on::after{transform:scaleX(1)}
@media(max-width:767px){
  .x-subnav-t,.x-subnav-in--flat>b{display:none}
  .x-subnav-links,.x-subnav-in--flat{gap:24px}
}

/* Histoire : flèches à côté du lien ; la date choisie s'affiche sans carte (grande année, texte bordé d'un trait doré) */
.x-hist-nav{display:flex;gap:10px}
.x-hist .tl{margin-top:48px;padding:0;min-height:0;gap:56px;align-items:start;background:none;border-radius:0}
.x-hist .tl>div:last-child{padding-inline-start:32px;border-inline-start:2px solid var(--x-gold)}

/* Valeurs : cinq panneaux côte à côte ; le panneau actif (survol, clic ; le premier par défaut) s'élargit et passe en vert */
.x-vals{display:flex;gap:14px;height:380px}
.x-val{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:26px 22px;border-radius:20px;background:var(--x-paper);color:var(--x-green);overflow:hidden;outline:none;transition:flex-grow .55s cubic-bezier(.2,.7,.2,1),background-color .4s,color .4s}
.x-val-n{font-size:20px;line-height:1.15;letter-spacing:-.02em;font-weight:600;transition:font-size .4s cubic-bezier(.2,.7,.2,1)}
.x-val-b{max-width:380px;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .4s}
/* Largeur fixe du texte = sa largeur dans le panneau ouvert (comme le texte des cartes « Trois temps » de Notre vision) : il ne se recompose pas pendant que le panneau
   s'élargit ou se resserre, il apparaît et disparaît en fondu. Panneau ouvert = (largeur du bloc − 4 espaces de 14px) × 2,6 / 6,6, moins 2 × 32px de marge. */
.x-vals{container-type:inline-size}
.x-val-b{width:min(380px,calc((100cqw - 56px) * 2.6 / 6.6 - 64px))}
.x-val-s{font-size:15px;line-height:1.45;font-weight:600;color:var(--x-gold)}
.x-val-t{margin-top:10px;font-size:15.5px;line-height:1.6;color:rgba(var(--x-white-rgb),.8)}
/* Panneau ouvert : celui que survole la souris ; sinon celui qu'on a cliqué, touché ou atteint au clavier (.is-on, le premier par défaut : gabarit + assets/js/pages/la-somathes.js).
   Écran tactile (.is-touch, posé par le script au premier toucher) : le survol est ignoré, un toucher ouvre le panneau et il reste ouvert. Durées et courbes inchangées. */
.x-vals:not(.is-touch) .x-val:hover,.x-vals:is(.is-touch,:not(:hover)) .x-val.is-on{flex-grow:2.6;padding:30px 32px;background:var(--x-deep);color:var(--x-white)}
.x-vals:not(.is-touch) .x-val:hover .x-val-n,.x-vals:is(.is-touch,:not(:hover)) .x-val.is-on .x-val-n{font-size:clamp(30px,3vw,44px)}
.x-vals:not(.is-touch) .x-val:hover .x-val-b,.x-vals:is(.is-touch,:not(:hover)) .x-val.is-on .x-val-b{opacity:1;transform:none;transition-delay:.18s}
.x-val:focus-visible{box-shadow:0 0 0 2px var(--x-gold)}
/* Photos de fond des valeurs (demande du manager, photos d'attente à remplacer par celles des équipes). Les transitions des panneaux ne changent pas :
   la photo reste visible, un léger voile en haut garde le titre lisible, et le voile vert des cartes photo de l'accueil apparaît à l'ouverture
   en .4s, la durée du fond qui passait du papier au vert. */
.x-vals--photo .x-val{isolation:isolate;color:var(--x-white)}
.x-val-bg{position:absolute;top:0;left:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.x-vals--photo .x-val::before,.x-vals--photo .x-val::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.x-vals--photo .x-val::before{background:linear-gradient(180deg,rgba(var(--x-deep-veil),.7) 0%,rgba(var(--x-deep-veil),.2) 45%,rgba(var(--x-deep-veil),.3) 100%)}
.x-vals--photo .x-val::after{background:linear-gradient(180deg,rgba(var(--x-deep-veil),.88) 0%,rgba(var(--x-deep-veil),.7) 50%,rgba(var(--x-deep-veil),.8) 100%);opacity:0;transition:opacity .4s}
.x-vals--photo:not(.is-touch) .x-val:hover::after,.x-vals--photo:is(.is-touch,:not(:hover)) .x-val.is-on::after{opacity:1}

/* Qualité : la distinction en bandeau (photo de la remise, label, texte), puis trois colonnes sans cartes */
.x-award-band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:420px;border-radius:28px;overflow:hidden;background:var(--x-deep);color:var(--x-white)}
.x-award-media{position:relative;min-height:300px;background:var(--x-photo-bg)}
.x-award-media img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.x-award-body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:56px}
.x-award-label{width:112px;height:auto;border-radius:12px;box-shadow:0 16px 30px var(--x-shadow);transform:rotate(-4deg)}
.x-award-t{margin-top:32px;font-size:clamp(32px,3.4vw,48px);line-height:1.05;letter-spacing:-.03em;font-weight:600;text-wrap:balance}
.x-award-d{margin-top:16px;max-width:420px;font-size:17px;line-height:1.6;color:rgba(var(--x-white-rgb),.8)}
.x-qcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px}
.x-qcols li{padding:4px 32px;border-inline-start:1px solid var(--x-line)}
.x-qcols li:first-child{padding-inline-start:0;border-inline-start:0}
.x-qcol-k{font-size:26px;line-height:1.15;letter-spacing:-.02em;font-weight:600;color:var(--x-green)}
.x-qcol-s{margin-top:10px;font-size:14px;line-height:1.45;font-weight:600;color:var(--x-gold-ink)}
.x-qcol-t{margin-top:10px;max-width:340px;font-size:15px;line-height:1.6;color:var(--x-muted)}

@media(max-width:900px){
  .x-hist .tl{gap:24px;margin-top:32px}
  .x-hist .tl>div:last-child{padding-inline-start:20px}
  .x-vals{flex-direction:column;height:auto}
  .x-vals .x-val,.x-vals:not(.is-touch) .x-val:hover,.x-vals:is(.is-touch,:not(:hover)) .x-val.is-on{flex:none;gap:14px;padding:24px;background:var(--x-deep);color:var(--x-white)}
  .x-vals .x-val .x-val-n,.x-vals:not(.is-touch) .x-val:hover .x-val-n,.x-vals:is(.is-touch,:not(:hover)) .x-val.is-on .x-val-n{font-size:26px}
  .x-val .x-val-b{width:auto;opacity:1;transform:none}
  .x-vals--photo .x-val::after{opacity:1}
  .x-award-band{grid-template-columns:1fr}
  .x-award-body{padding:36px 28px}
  .x-qcols{grid-template-columns:1fr;gap:24px;margin-top:40px}
  .x-qcols li,.x-qcols li:first-child{padding:24px 0 0;border-inline-start:0;border-top:1px solid var(--x-line)}
}

/* ═════ Notre histoire ═════ */
/* Le fil (essai inspiré du bloc Feature 322) : chaque chapitre a la même mise en page (texte en haut et date en bas le long d'un trait, visuel à droite).
   --top : en-tête fixe (88 px une fois la page défilée) + barre des liens (61 px).
   Avec .is-live (assets/js/pages/notre-histoire.js, grands écrans) le titre et le fil restent épinglés sous la barre des liens jusqu'au dernier chapitre ; le défilement passe au chapitre suivant en fondu.
   Sans script ou sur petit écran : les chapitres se suivent. */
.x-fil{--step:55vh;--top:149px}
.x-fil-stage{position:relative}
.x-fil-stage::before{content:"";position:absolute;top:0;bottom:0;inset-inline-start:0;width:1px;background:var(--x-line)}
.x-fil-step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto;grid-template-areas:"txt m" "d m";column-gap:72px;row-gap:32px}
.x-fil-step+.x-fil-step{margin-top:96px}
.x-fil-txt{grid-area:txt;padding-inline-start:40px}
.x-fil-txt h3{font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.02em;font-weight:600;color:var(--x-green);max-width:460px;text-wrap:balance}
.x-fil-txt p{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--x-muted);max-width:460px;text-wrap:pretty}
.x-fil-d{grid-area:d;align-self:end;padding-inline-start:40px}
.x-fil-d--w .ev-y{font-size:clamp(36px,3.4vw,46px);line-height:1;letter-spacing:-.035em}
/* Cartes du fil : une seule structure pour les sept chapitres, avec le voile des cartes « De la feuille au rayon » de l'accueil (.x-flow-item) :
   la photo reste bien visible, seul le bas s'assombrit pour le contraste du texte (demande du manager). Le contenu est toujours en bas, sur toute
   la largeur de la carte : petit titre doré (.x-fil-k), titre clair (.x-fil-t), texte (.x-fil-p), puis une rangée de mots sous un trait doré (.x-fil-row). */
.x-fil-m{grid-area:m;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:28px;min-height:460px;padding:40px;border-radius:20px;overflow:hidden;background:var(--x-photo-bg);color:var(--x-white)}
.x-fil-bg{position:absolute;top:0;left:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.x-fil-bg--low{transform:scale(1.3);transform-origin:50% 90%}
.x-fil-m::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--x-deep-veil),0) 34%,rgba(var(--x-deep-veil),.9) 100%)}
.x-fil-body,.x-fil-kt,.x-fil-tp{display:flex;flex-direction:column;gap:14px}
.x-fil-body{width:100%}
.x-fil-k,.x-fil-kt b{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--x-gold)}
.x-fil-t,.x-fil-kt span,.x-fil-tp b{display:block;font-size:clamp(30px,3vw,42px);line-height:1.05;letter-spacing:-.025em;font-weight:600;color:var(--x-white);text-wrap:balance}
.x-fil-t span{display:block;color:var(--x-gold)}
.x-fil-tp b{font-size:clamp(56px,5vw,72px);line-height:.95;letter-spacing:-.04em;font-weight:700}
.x-fil-p,.x-fil-tp span{display:block;font-size:16px;line-height:1.6;color:rgba(var(--x-white-rgb),.84)}
.x-fil-row{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:20px;width:100%}
.x-fil-row li{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:2px solid var(--x-gold);font-size:15px;font-weight:600;line-height:1.35;color:var(--x-white)}
.x-fil-row b{font-weight:600}
.x-fil-row span{font-size:13.5px;font-weight:400;line-height:1.45;color:rgba(var(--x-white-rgb),.66)}
/* Marques sans visuel : la mention « Visuel à fournir » n'a plus de sens sans packshot, seul le nom reste */
.x-fil-row .port-ph{display:none}
/* Points de progression : passés en vert, l'actuel s'allonge et se remplit d'or au fil du défilement (--p) */
.x-fil-dots{display:none}
.x-fil-dots button{display:flex;align-items:center;height:28px;padding:0 5px}
.x-fil-dots i{position:relative;display:block;width:7px;height:7px;border-radius:999px;background:var(--x-dot);overflow:hidden;transition:width .35s ease,background-color .35s ease}
.x-fil-dots button:hover i{background:var(--x-green-2)}
.x-fil-dots .is-done i{background:var(--x-green)}
.x-fil-dots .is-on i,.x-fil-dots .is-on:hover i{width:36px;background:var(--x-dot-on)}
.x-fil-dots .is-on i::after{content:"";position:absolute;inset:0;background:var(--x-gold);transform:scaleX(var(--p,0));transform-origin:0 50%}
[dir="rtl"] .x-fil-dots .is-on i::after{transform-origin:100% 50%}
.x-fil-dots button:focus-visible{outline:2px solid var(--x-gold);outline-offset:2px;border-radius:999px}
/* Mode épinglé */
/* La marge négative compense l'espace (28 px) gardé sous la barre des liens quand le bloc est épinglé : l'écart avec la section d'avant reste de 112 px. */
.x-fil.is-live{height:calc(100vh - var(--top) + var(--n) * var(--step));margin-top:-28px}
.x-fil.is-live .x-fil-stick{position:sticky;top:var(--top);height:calc(100vh - var(--top));display:flex;flex-direction:column}
.x-fil.is-live .x-fil-wrap{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding-top:28px;padding-bottom:28px}
.x-fil.is-live .x-fil-stage{display:grid;grid-template-rows:minmax(0,1fr);flex:1;min-height:0;max-height:600px}
.x-fil.is-live .x-fil-dots{position:absolute;top:0;inset-inline-start:40px;z-index:2;display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:var(--x-paper)}
.x-fil.is-live .x-fil-step{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.x-fil.is-live .x-fil-step.is-on{opacity:1;visibility:visible;transition:opacity .45s ease}
.x-fil.is-live .x-fil-txt{padding-top:68px}
.x-fil.is-live .x-fil-m{min-height:0}
.x-fil.is-live .x-fil-txt,.x-fil.is-live .x-fil-d{transform:translateY(10px);transition:transform .5s ease}
.x-fil.is-live .is-on .x-fil-txt,.x-fil.is-live .is-on .x-fil-d{transform:none}
.x-fil.is-live .is-on .x-fil-d{transition-delay:.08s}
/* Écrans peu hauts : titre et textes plus compacts pour que le titre et le fil tiennent ensemble */
@media (max-height:820px){
  .x-fil.is-live .x-fil-wrap{padding-top:20px;padding-bottom:20px}
  .x-fil.is-live .x-fil-txt{padding-top:50px}
  .x-fil.is-live .x-fil-txt h3{font-size:22px}
  .x-fil.is-live .x-fil-txt p{margin-top:10px;font-size:14.5px;line-height:1.6}
  .x-fil.is-live .x-fil-d .ev-y{font-size:64px}
  .x-fil.is-live .x-fil-d--w .ev-y{font-size:36px}
  .x-fil.is-live .x-fil-d .ev-l{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  .x-fil.is-live .x-fil-step,.x-fil.is-live .x-fil-step.is-on,.x-fil.is-live .x-fil-txt,.x-fil.is-live .x-fil-d,.x-fil-dots i{transition:none}
}
@media(max-width:900px){
  .x-fil-step{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"d" "txt" "m";row-gap:20px}
  .x-fil-step+.x-fil-step{margin-top:64px}
  .x-fil-txt,.x-fil-d{padding-inline-start:24px}
  .x-fil-m{margin-inline-start:24px;min-height:400px;padding:28px 24px}
  .x-fil-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ═════ Nos métiers ═════ */
/* Onglets des expertises : comme les liens de la barre La Somathes (gris, trait doré court au survol, entier sur l'onglet ouvert, posé sur un filet).
   Les numéros (01–04) du champ ne sont pas affichés : ils n'apportent rien. */
.mtabs{border-bottom:1px solid var(--x-line)}
.mtabs .mtab{position:relative;padding-bottom:22px;border-bottom:0;color:var(--x-muted);transition:color .2s}
.mtabs .mtab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--x-gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
[dir="rtl"] .mtabs .mtab::after{transform-origin:100% 50%}
.mtabs .mtab:hover,.mtabs .mtab[aria-selected="true"]{color:var(--x-green)}
.mtabs .mtab:hover::after{transform:scaleX(.4)}
.mtabs .mtab[aria-selected="true"]::after{transform:scaleX(1)}
.mtabs .mtab i{display:none}
/* « Ce que nous évaluons » : des mots simples séparés par un filet vertical (le même que dans la barre des liens, entre « La Somathes » et les liens), au lieu de pastilles.
   Le filet est devant chaque mot ; celui du premier mot de chaque ligne sort du cadre et reste caché. */
#explorer .mp-chips{overflow:hidden}
#explorer .mp-chips ul{gap:12px 0;margin-inline-start:-21px}
#explorer .mp-chips li{padding:0 20px;border-radius:0;border-inline-start:1px solid rgba(var(--x-green-rgb),.28);background:none;font-size:15px;font-weight:600;line-height:1.3;color:var(--x-green)}

/* ═════ Notre vision ═════ */
/* Trois temps : le texte du panneau ouvert apparaît en douceur, comme les panneaux « Nos valeurs » de La Somathes :
   la place du texte s'ouvre progressivement (le titre remonte au lieu de sauter), puis le texte arrive en fondu avec un léger glissement.
   Largeur fixe du texte : il ne se recompose pas pendant que le panneau s'élargit. */
.tp .tp-p{display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;transform:translateY(10px);transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1),margin-top .55s cubic-bezier(.2,.7,.2,1),opacity .25s,transform .4s}
.tp .tp-p>span{min-height:0;overflow:hidden;width:min(420px,calc(100vw - 120px))}
.tp[aria-selected="true"] .tp-p{grid-template-rows:1fr;margin-top:16px;opacity:1;transform:none;transition-delay:0s,0s,.18s,.18s}
@media (prefers-reduced-motion:reduce){.tp .tp-p{transition:none}}
/* Titres des cartes : plus petits dans les cartes fermées, en grand dans la carte ouverte (.is-big, posé par assets/js/pages/notre-vision.js),
   comme « Nos valeurs ». Le changement de taille et de lignes est animé mot par mot (.tp-w) par le script. Sur petit écran : tous en grand. */
.tp .tp-t{font-size:22px}
.tp.is-big .tp-t{font-size:clamp(24px,2.6vw,36px)}
.tp-w{display:inline-block;transform-origin:0 0}
/* Ouverture des cartes : même durée et même courbe que les panneaux « Nos valeurs » de La Somathes (0,55 s) */
.tri .tp{transition:flex-grow .55s cubic-bezier(.2,.7,.2,1)}
@media(max-width:900px){.tp .tp-t{font-size:clamp(24px,2.6vw,36px)}}
/* Cinq axes : carrousel (modèle « Consulting services » de ScaleForge, dossier Insperation) : cartes blanches aux angles du système (20 px),
   petite icône dorée en haut (icônes IBM Carbon choisies sur SVGRepo), titre et texte en bas ; pas d'effet au survol. */
#axes .axe{min-height:360px;border-radius:20px}
.axe-ic{width:44px;height:44px;fill:var(--x-gold-ink)}
/* Commandes du carrousel sous les cartes : la barre de progression puis les flèches, sur une seule ligne (le titre de section reste le titre standard) */
.x-car-ctl{display:flex;align-items:center;gap:24px;margin-top:28px}
.x-car-ctl .cprog{flex:1;margin-top:0}
/* Notre ambition : la flèche entre « ce que nous sommes » et « ce que nous construisons » : une flèche dessinée à la main, qui boucle, en or, sans cercle (pas un bouton) */
#ambition .amb{margin-top:0}
#ambition .amb-arr{width:120px;height:auto;border-radius:0;background:none;color:var(--x-gold)}
#ambition .amb-arr svg{width:120px;height:69px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ≤900px : la flèche est tournée de 90° ; une boîte carrée garde sa hauteur réelle (120px) dans la grille, sinon elle déborde sur les deux cartes */
@media(max-width:900px){#ambition .amb-arr{height:120px}}

/* ───── Fonds sombres de marque (jetons --x-deep) ───── */
.hdr-top{background:var(--x-deep)}
.btn-dark{background:var(--x-deep);color:var(--x-on-deep)}
.btn-dark:hover{background:var(--x-deep-hover)}
#hero .play::before{background:var(--x-deep)}
.x-ctab-card{background:var(--x-deep);color:var(--x-on-deep)}
.ftr{background:var(--x-deep)}
/* Sélecteur d'essai (même style que Accueil 1 / Accueil 2) */
.x-deepsw button{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--x-on-deep-2);white-space:nowrap;transition:color .2s}
.x-deepsw button:hover{color:var(--x-on-deep)}
.x-deepsw button.on,.x-deepsw button.on:hover{background:var(--x-gold);color:var(--x-on-gold)}

/* ───── Pied de page ───── */
.ftr{border-top:1px solid rgba(var(--x-white-rgb),.12)}
.ftr-soc a{transition:color .2s}
.ftr-soc a:hover{color:var(--x-gold)}

/* ───── Écrans moyens et petits ───── */
@media(max-width:1100px){
  .x-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-tile--big{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:minmax(0,1fr) 240px;align-items:end}
  .x-tile--big .x-tile-media{height:250px}
  .x-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-flow-item{min-height:400px}
}
@media(max-width:900px){
  .x-head{grid-template-columns:1fr;margin-bottom:40px}
  .x-duo{grid-template-columns:1fr;gap:56px}
  .x-duo-item:nth-child(2){margin-top:0}
  .x-dah{grid-template-columns:1fr;gap:8px;padding:48px 28px}
  .x-dah-media{order:-1;max-width:340px}
  .x-news{grid-template-columns:1fr}
  .x-news-item--main{margin-bottom:32px}
  .x-news-item--main .nmedia{flex:none;min-height:0;aspect-ratio:16/10}
  .x-cta{grid-template-columns:1fr}
  .x-cta-media{min-height:280px;order:-1}
  .x-cta-txt{padding:56px 40px}
}
@media(max-width:767px){
  .x-sec{padding-top:72px;padding-bottom:72px}
  .x-sec--flush{padding-top:0}
  .x-news-item:not(.x-news-item--main){grid-template-columns:112px minmax(0,1fr);gap:16px}
  .x-cta-txt{padding:48px 20px 56px}
}
@media(max-width:640px){
  .x-bento{grid-template-columns:1fr;gap:14px}
  .x-tile{min-height:0;padding:24px}
  .x-tile--big{grid-template-columns:1fr;padding:28px}
  .x-tile--big .x-tile-media{height:220px}
  .x-tile-foot .x-tile-media{width:96px;height:116px}
  .x-flow{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:0 20px 8px;scroll-padding-inline:20px}
  .x-flow-item{min-height:400px;scroll-snap-align:start}
  .x-flow-item:nth-child(even){margin-top:0}
}

/* ═════ Dahmiss 41022 (page de marque : couleurs ambre / brun propres, chargée avec system.css depuis le 9 nov. 2026) ═════ */
/* Largeur : celle du site (.wrap 1920px, marges 40 → 80px), comme les autres pages refaites. */

/* ───── Héros sur écrans d'ordinateur portable (règle du client : le héros tient dans la hauteur de l'écran dès 1024px de large) ─────
   Même principe que le héros de l'accueil : en dessous de 930px de haut, en-tête raccourci (80px, comme une fois défilé), hauteur = écran,
   tailles en --hv (1 % de la hauteur disponible, barre d'administration WordPress déduite). Au-dessus de 930px : héros d'origine. */
@media (min-width:1024px) and (max-height:930px){
  .sm-dahmiss .dh-in{height:80px}
  .dhero{--adm:0px;--hv:calc((100vh - var(--adm)) / 100);display:flex;flex-direction:column;min-height:calc(100vh - var(--adm));min-height:calc(100svh - var(--adm))}
  .admin-bar .dhero{--adm:32px}
  .dhero-in{flex:1 1 auto;min-height:0;padding-top:calc(80px + clamp(8px,5 * var(--hv) - 20px,48px));padding-bottom:clamp(10px,3 * var(--hv) - 6px,40px)}
  .dkick{font-size:clamp(12px,1.8 * var(--hv),14px)}
  .dtitle{margin-top:clamp(8px,2 * var(--hv) - 4px,22px);font-size:clamp(32px,min(5.4vw,8 * var(--hv)),74px)}
  .dlede{margin-top:clamp(8px,2.4 * var(--hv) - 4px,26px);font-size:clamp(14px,2.3 * var(--hv),18px);line-height:1.55}
  .dact{margin-top:clamp(12px,3.6 * var(--hv) - 6px,38px)}
  .dact .btn{height:clamp(44px,6.4 * var(--hv),56px)}
  /* Bloc du paquet réduit à la taille du disque : le label « Saveur » reste collé au coin du paquet */
  .dpack{min-height:0;width:min(100%,62 * var(--hv));justify-self:center}
  .dpack-disc{width:min(560px,90%,60 * var(--hv))}
  .dpack img.p{width:auto;max-width:min(100%,540px);max-height:calc(56 * var(--hv))}
  .dseal{width:clamp(70px,11 * var(--hv),108px)}
  .dfacts div{padding:clamp(8px,2 * var(--hv) - 2px,22px) 0 clamp(10px,3 * var(--hv) - 4px,34px)}
  .dfacts dt{font-size:clamp(16px,2.4 * var(--hv),22px)}
  .dfacts dd{font-size:clamp(12px,1.6 * var(--hv),14px)}
}

/* ───── Légendes sur photo (Le goût, galerie Saveur de l'Année) : texte clair sur un dégradé brun en bas, sans pastille ─────
   Même règle que la légende de « Du Maroc au monde » et les cartes photo de l'accueil. */
.sm-dahmiss .taste-img::after,.sm-dahmiss .gal figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--x-dah-shade-rgb),0) 55%,rgba(var(--x-dah-shade-rgb),.78) 100%);pointer-events:none}
.sm-dahmiss .taste-img p,.sm-dahmiss .gal figcaption{z-index:1;padding:0;border-radius:0;background:none;color:var(--x-cream);font-size:15px;font-weight:600}
.sm-dahmiss .taste-img p{left:28px;bottom:24px}
.sm-dahmiss .gal figcaption{left:20px;bottom:18px}

/* ───── Nos engagements : liste comme les onglets de Nos métiers (pas de rond fléché) ─────
   Trait de 2px sous la ligne : 40 % au survol, pleine largeur pour l'élément actif (même minutage que .mtabs). */
.sm-dahmiss .evb{position:relative}
.sm-dahmiss .evb i{display:none}
.sm-dahmiss .evb::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--x-rust);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
[dir="rtl"] .sm-dahmiss .evb::after{transform-origin:100% 50%}
.sm-dahmiss .evb:hover::after{transform:scaleX(.4)}
.sm-dahmiss .evb[aria-selected="true"]::after{transform:scaleX(1)}
/* Même comportement que « Ce qui nous rassemble » (.x-vx) : le survol ne change pas l'événement ouvert (clic seulement),
   il fonce seulement le texte (.2s) et trace le trait à 40 %. */
.sm-dahmiss .evb{color:rgba(var(--x-brown-rgb),.5)}
.sm-dahmiss .evb:hover,.sm-dahmiss .evb[aria-selected="true"]{color:var(--x-brown)}

/* ───── Partenariat RS Berkane : photo du maillot sur la moitié droite, fondue dans l'ambre ─────
   Le grand titre et les textes restent sur l'ambre à gauche ; le filigrane du logo est masqué (il tomberait sur la photo). */
.sport--ph .sport-wm{display:none}
.sport-ph{position:absolute;top:0;bottom:0;inset-inline-end:0;width:44%;background:var(--x-amber-deep)}
.sport-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
/* Fondu : l'ambre de la section recouvre le bord gauche de la photo, sans arête visible */
.sport-ph::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--x-amber) 0%,rgba(var(--x-amber-rgb),.55) 22%,rgba(var(--x-amber-rgb),0) 48%)}
[dir="rtl"] .sport-ph::before{background:linear-gradient(270deg,var(--x-amber) 0%,rgba(var(--x-amber-rgb),.55) 22%,rgba(var(--x-amber-rgb),0) 48%)}
/* Colonne du texte inchangée (7fr) pour que « × RS Berkane » tienne sur une ligne ; la photo commence après */
.sport--ph .sport-in{padding-top:112px;padding-bottom:112px}
.sport-s{margin-top:40px;max-width:460px;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
@media(max-width:960px){
  .sport-ph{position:relative;width:100%;height:320px}
  .sport-ph::before{background:linear-gradient(0deg,var(--x-amber) 0%,rgba(var(--x-amber-rgb),0) 40%)}
  .sport--ph .sport-in{grid-template-columns:1fr;padding-top:8px;padding-bottom:72px}
}

/* ───── Du Maroc au monde : texte posé sur la photo (dégradé brun en bas, sans encadré) ─────
   Même principe que les cartes photo de l'accueil et la légende de la vidéo de cette page (.vcap) : dégradé sur l'image, texte clair directement dessus. */
.sm-dahmiss .intl-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--x-dah-shade-rgb),0) 40%,rgba(var(--x-dah-shade-rgb),.55) 65%,rgba(var(--x-dah-shade-rgb),.9) 100%)}
.sm-dahmiss .intl-q{z-index:1;left:40px;right:40px;bottom:40px;padding:0;border-radius:0;background:none;max-width:460px;font-size:22px;line-height:1.35;letter-spacing:-.015em}
@media(max-width:767px){.sm-dahmiss .intl-q{left:24px;right:24px;bottom:24px;font-size:19px}}

/* ───── Pied de page Dahmiss (inspiration Insperation/screencapture-greeniq-…png) ─────
   Carte ambre : phrase de marque + boutons à gauche, les deux colonnes de liens (ancres · réseaux) poussées contre le bord droit ;
   puis grand logo crème et barre du bas identique à celle du pied de page du site (.ftr-bot).
   Liens de la carte : soulignés au survol, les autres s'estompent à .4 (comme les liens des méga-menus).
   Rejetés : boutons côte à côte au bout de la ligne, liens en lignes, boutons empilés en colonne, version « Medara » (phrase en grand + bandeau des réseaux). */
.dfb .wrap{padding-top:96px}
.dfb-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:40px 96px;padding:56px 64px;border-radius:28px;background:var(--x-amber);color:var(--x-brown)}
.dfb-desc{max-width:560px;font-size:clamp(20px,1.6vw,24px);line-height:1.4;letter-spacing:-.015em;font-weight:600}
.dfb-act{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.dfb-col{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-top:4px}
.dfb-col a{font-size:16px;font-weight:600;color:var(--x-brown);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;transition:opacity .2s,text-decoration-color .2s}
.dfb-col:hover a{opacity:.4}
.dfoot .dfb-col a:hover{opacity:1;color:var(--x-brown);text-decoration-color:currentColor}
/* 110px de haut max (≈ 227px de large) : le logo est servi en variante 400px (sizes="133px" de sm_logo_attrs) ; plus grand, il devenait flou */
.dfb-logo{display:block;margin:72px 0 48px;height:clamp(72px,6vw,110px);width:auto}
.dfb-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding:26px 0 32px;border-top:1px solid rgba(var(--x-cream-rgb),.12);font-size:13px;color:rgba(var(--x-cream-rgb),.6)}
.dfb-legal{display:flex;flex-wrap:wrap;gap:8px 24px}
@media(max-width:960px){
  .dfb-card{grid-template-columns:1fr 1fr;padding:48px 40px}
  .dfb-card>div:first-child{grid-column:1/-1}
}
@media(max-width:560px){
  .dfb .wrap{padding-top:72px}
  .dfb-card{grid-template-columns:1fr;padding:36px 24px}
  .dfb-logo{margin:56px 0 36px}
}

/* ═════ Nos valeurs (page) ═════ */
/* ───── Les cinq valeurs : liste à gauche, photo de la valeur ouverte à droite ─────
   Inspiration : Insperation/541b75….jpg (« Discover the treatment » : photo + liste dont un seul élément est ouvert) et 0e04f6….jpg (« Our simple process »).
   Motifs repris : lignes des onglets de Nos métiers (filet gris, trait doré de 2px : 40 % au survol, entier sur la valeur ouverte, .35s) ;
   ouverture comme les cartes « Trois temps » de Notre vision (.55s cubic-bezier(.2,.7,.2,1), texte en fondu .25s / glissement .4s après .18s) ;
   carte photo comme Notre histoire (.x-fil-m : photo bien visible, voile en bas seulement, petit titre doré, texte clair).
   Grand écran : la carte de chaque valeur est posée en absolu sur la colonne droite du bloc (.x-vx), toutes au même endroit, en fondu .4s.
   Aucun ancêtre de la carte entre elle et .x-vx ne doit être positionné ni transformé (sinon elle se calerait sur lui). */
.x-vx{position:relative;min-height:560px}
.x-vx-i{width:calc((100% - 72px) * 5 / 12);border-bottom:1px solid var(--x-line);background:linear-gradient(var(--x-gold),var(--x-gold)) 0 100%/0 2px no-repeat;transition:background-size .35s cubic-bezier(.2,.7,.2,1)}
[dir="rtl"] .x-vx-i{background-position:100% 100%}
.x-vx-i:hover{background-size:40% 2px}
.x-vx-i.is-on{background-size:100% 2px}
.x-vx-b{display:block;width:100%;padding:24px 0;text-align:start;font-size:clamp(22px,1.9vw,28px);line-height:1.2;letter-spacing:-.02em;font-weight:600;color:var(--x-muted);cursor:pointer;transition:color .2s}
.x-vx-i:first-child .x-vx-b{padding-top:0}
.x-vx-i:hover .x-vx-b,.x-vx-i.is-on .x-vx-b{color:var(--x-green)}
.x-vx-b:focus-visible{outline:2px solid var(--x-gold);outline-offset:4px;border-radius:4px}
.x-vx-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.x-vx-i.is-on .x-vx-p{grid-template-rows:1fr}
.x-vx-in{min-height:0;overflow:hidden}
.x-vx-txt{padding-bottom:28px;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .4s}
.x-vx-i.is-on .x-vx-txt{opacity:1;transform:none;transition-delay:.18s}
.x-vx-s{font-size:15px;line-height:1.45;font-weight:600;color:var(--x-gold-ink)}
.x-vx-t{margin-top:12px;max-width:560px;font-size:15.5px;line-height:1.65;color:var(--x-muted);text-wrap:pretty}
.x-vx-m{position:absolute;top:0;bottom:0;inset-inline-end:0;width:calc((100% - 72px) * 7 / 12);isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:14px;margin:0;padding:40px;border-radius:20px;overflow:hidden;background:var(--x-photo-bg);color:var(--x-white);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s linear .4s}
.x-vx-i.is-on .x-vx-m{opacity:1;visibility:visible;transition:opacity .4s}
.x-vx-m>img{position:absolute;top:0;left:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.x-vx-m::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--x-deep-veil),0) 34%,rgba(var(--x-deep-veil),.9) 100%)}
.x-vx-k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--x-gold)}
.x-vx-q{max-width:680px;margin:0;font-size:clamp(24px,2.2vw,32px);line-height:1.2;letter-spacing:-.02em;font-weight:600;color:var(--x-white);text-wrap:balance}
.x-vx-k,.x-vx-q{transform:translateY(10px);transition:transform .4s}
.x-vx-i.is-on .x-vx-k,.x-vx-i.is-on .x-vx-q{transform:none;transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
  .x-vx-i,.x-vx-p,.x-vx-txt,.x-vx-m,.x-vx-k,.x-vx-q{transition:none}
}
/* Petit écran : une colonne ; la photo et sa phrase passent sous le texte de la valeur ouverte */
@media(max-width:900px){
  .x-vx{min-height:0}
  .x-vx-i{width:auto}
  .x-vx-m{position:relative;inset:auto;width:auto;min-height:340px;margin-bottom:28px;padding:24px;opacity:1;visibility:visible;transition:none}
  .x-vx-txt{padding-bottom:24px}
}

/* ───── Au quotidien : une grande photo, les quatre relations en bas ─────
   Même voile que les cartes « De la feuille au rayon » et Notre histoire (bas seulement) ; chaque relation sous un trait doré de 2px,
   comme les rangées des cartes de Notre histoire (.x-fil-row). Arrondi des grands blocs : 28px. */
.x-vq{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:600px;padding:48px;border-radius:28px;overflow:hidden;background:var(--x-photo-bg);color:var(--x-white)}
.x-vq>img{position:absolute;top:0;left:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.x-vq::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--x-deep-veil),0) 34%,rgba(var(--x-deep-veil),.9) 100%)}
.x-vq-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.x-vq-row li{padding-top:18px;border-top:2px solid var(--x-gold)}
.x-vq-row h3{font-size:20px;line-height:1.25;letter-spacing:-.015em;font-weight:600;color:var(--x-white)}
.x-vq-row p{margin-top:10px;max-width:340px;font-size:15px;line-height:1.55;color:rgba(var(--x-white-rgb),.84)}
@media(max-width:1100px){
  .x-vq-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
}
@media(max-width:640px){
  .x-vq{min-height:0;padding:240px 24px 28px}
  .x-vq::after{background:linear-gradient(180deg,rgba(var(--x-deep-veil),0) 8%,rgba(var(--x-deep-veil),.92) 42%)}
  .x-vq-row{grid-template-columns:1fr;gap:24px}
}

/* ═════ Qualité et certifications ═════ */
/* ───── Notre démarche : les trois piliers sous un trait doré de 2px (comme les rangées de Notre histoire .x-fil-row et de Nos valeurs .x-vq-row) ───── */
.x-qeq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.x-qeq-i{padding-top:18px;border-top:2px solid var(--x-gold);font-size:clamp(20px,1.6vw,24px);line-height:1.25;letter-spacing:-.02em;font-weight:600;color:var(--x-green)}
.x-qeq-i small{display:block;margin-top:10px;font-size:15px;line-height:1.5;letter-spacing:0;font-weight:500;color:var(--x-muted)}
/* Phrase de conclusion d'une section (le résultat de la démarche, la devise du laboratoire) : une ligne de texte précédée du trait doré de 40px
   (le trait du petit titre du bloc Dahmiss .x-dah-k), au lieu d'un bloc vert ou d'un texte isolé dans une colonne */
.x-qend{position:relative;margin-top:56px;padding-inline-start:58px;font-size:clamp(22px,2vw,30px);line-height:1.2;letter-spacing:-.02em;font-weight:600;color:var(--x-green)}
.x-qend::before{content:"";position:absolute;top:.6em;inset-inline-start:0;width:40px;height:2px;background:var(--x-gold)}
.x-qend span+span{margin-inline-start:.3em}

/* Mots simples séparés par un filet vertical, au lieu de cartes ou de pastilles (même règle que « Ce que nous évaluons » de Nos métiers) */
.x-words{overflow:hidden;margin-top:32px}
.x-words ul{display:flex;flex-wrap:wrap;gap:12px 0;margin-inline-start:-21px}
.x-words li{padding:0 20px;border-inline-start:1px solid rgba(var(--x-green-rgb),.28);font-size:15px;font-weight:600;line-height:1.3;color:var(--x-green)}

/* ───── ISO 9001 : le texte dans un bloc vert (cadre du bloc Dahmiss et du CTA, arrondi 28px), le certificat dessiné comme un vrai document à droite ─────
   Le certificat, penché de -1°, sort de 64px par le haut du bloc, comme la pile de produits du CTA de l'accueil ; il est centré dans la colonne de droite. */
.x-iso{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center;min-height:600px;padding:72px 64px;border-radius:28px;background:var(--x-deep);color:var(--x-on-deep)}
.x-iso-big{font-size:clamp(72px,9vw,136px);line-height:.85;letter-spacing:-.06em;font-weight:800;color:var(--x-on-deep)}
.x-iso-big span{display:block;color:var(--x-on-deep-accent)}
.x-iso-s{margin-top:24px;font-size:20px;font-weight:600;color:var(--x-on-deep)}
.x-iso-d{margin-top:16px;max-width:600px;font-size:17px;line-height:1.65;color:var(--x-on-deep-2);text-wrap:pretty}
.x-iso .x-words li{border-color:rgba(var(--x-white-rgb),.28);color:var(--x-on-deep)}
.x-iso-dl{margin-top:32px;background:var(--x-gold);color:var(--x-on-gold)}
.x-iso-media{position:relative;align-self:stretch}
/* Le certificat : feuille A4 (1 / 1,414), angles presque droits comme du papier, double filet doré à l'intérieur, logo en tête,
   l'emblème de SOMATHES (symbole officiel du client, assets/images/somathes-symbole.webp) en sceau doré, les mentions en bas sur des lignes de signature. */
.x-cert{position:absolute;top:-136px;left:0;right:0;display:flex;flex-direction:column;align-items:center;width:min(100%,440px);aspect-ratio:1/1.414;margin-inline:auto;padding:52px 44px 44px;border-radius:4px;background:var(--x-sheet);color:var(--x-green);text-align:center;box-shadow:0 30px 60px var(--x-shadow);transform:rotate(-1deg)}
[dir="rtl"] .x-cert{transform:rotate(1deg)}
.x-cert::before{content:"";position:absolute;inset:14px;border:1px solid var(--x-gold);box-shadow:inset 0 0 0 4px var(--x-sheet),inset 0 0 0 5px rgba(var(--x-gold-rgb),.5);pointer-events:none}
.x-cert-logo{position:relative;width:128px;height:auto}
.x-cert-k{margin-top:36px;font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--x-gold-ink)}
.x-cert-t{margin-top:14px;font-size:clamp(34px,2.6vw,44px);line-height:1;letter-spacing:-.04em;font-weight:800}
.x-cert-s{margin-top:10px;font-size:15px;font-weight:600;color:var(--x-muted)}
.x-cert-to{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:26px;padding-top:24px}
.x-cert-to::before{content:"";position:absolute;top:0;left:50%;width:40px;height:2px;margin-left:-20px;background:var(--x-gold)}
.x-cert-to span{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--x-muted)}
.x-cert-to b{font-size:22px;font-weight:700;letter-spacing:.06em}
.x-cert-seal{flex:none;width:104px;height:104px;margin:auto 0;background:var(--x-gold);-webkit-mask:url("../images/somathes-symbole.webp") center/contain no-repeat;mask:url("../images/somathes-symbole.webp") center/contain no-repeat}
.x-cert-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;text-align:start}
.x-cert-dl div{display:flex;flex-direction:column;justify-content:space-between;padding-top:10px;border-top:1px solid rgba(var(--x-green-rgb),.25)}
.x-cert-dl dt{font-size:10px;line-height:1.35;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--x-muted)}
.x-cert-dl dd{margin-top:4px;font-size:12.5px;font-weight:600}

/* ───── Contrôler à chaque étape : le bloc « Ce qui nous rassemble » de Nos valeurs (.x-vx) ; la devise (.x-qend) ferme la liste des étapes,
   en bas de la colonne de gauche, alignée sur le bas de la photo (au moins 40px sous la dernière étape) ───── */
.x-qvx{display:flex;flex-direction:column}
.x-qvx>.x-vx-i:nth-last-child(2){margin-bottom:40px}
.x-qvx .x-qend{width:calc((100% - 72px) * 5 / 12);margin-top:auto}

/* ───── Distinctions : les boîtes sortent de 64px par le haut de leur tuile, penchées de -1° avec l'ombre courte de la pile du CTA de l'accueil ;
   le label « Saveur de l'Année » posé en sceau à cheval sur les deux tuiles (les deux thés sont primés), comme le label collé au paquet du bloc Dahmiss
   (taille, arrondi, ombre et inclinaison du label de La Somathes .x-award-label) ───── */
.x-qaw-link{margin-top:32px}
.x-qped{position:relative}
.x-qped .pk{height:300px;margin-top:-104px}
.x-qped .pk img{transform:rotate(-1deg);filter:drop-shadow(0 8px 12px var(--x-shadow))}
[dir="rtl"] .x-qped .pk img{transform:rotate(1deg)}
.x-qped-label{position:absolute;left:50%;bottom:0;width:112px;height:auto;margin-left:-56px;border-radius:12px;box-shadow:0 16px 30px var(--x-shadow);transform:translateY(50%) rotate(-4deg)}

@media(max-width:960px){
  .x-qped{margin-top:64px}
  .x-qped .pk{height:200px;margin-top:-88px}
}
@media(max-width:900px){
  .x-iso{grid-template-columns:minmax(0,1fr);gap:32px;min-height:0;margin-top:64px;padding:0 28px 48px}
  .x-iso-media{order:-1;margin-top:-64px}
  .x-qvx .x-qend{width:auto;margin-top:0}
  .x-cert{position:relative;top:auto}
}
@media(max-width:640px){
  .x-qeq{grid-template-columns:1fr}
  .x-cert{padding:40px 30px 34px}
  .x-cert-k{margin-top:26px}
  .x-cert-t{font-size:32px}
  .x-cert-seal{width:76px;height:76px;margin:24px 0}
  /* Mentions du certificat : une ligne chacune (libellé à gauche, valeur à droite), trois colonnes seraient trop étroites */
  .x-cert-dl{grid-template-columns:1fr;gap:0}
  .x-cert-dl div{flex-direction:row;align-items:baseline;gap:12px;padding:8px 0}
  .x-cert-dl dd{margin-top:0;text-align:end;white-space:nowrap}
  .x-qend{padding-inline-start:42px}
  .x-qend::before{width:28px}
}
@media(max-width:480px){
  .x-qped .pk{height:170px;margin-top:-68px}
  .x-qped-label{width:84px;margin-left:-42px;border-radius:10px}
  .x-qped figure{padding-bottom:52px}
}

/* ═════ Nos thés ═════ */
.sm-nos-thes .kick{font-size:15px;font-weight:600;color:var(--x-gold-ink)}
/* ───── Onglets des familles : ceux de Nos métiers (.mtabs) ─────
   Gris, trait doré de 2px (40 % au survol, entier sur l'onglet ouvert, .35s), posés sur un filet. Les nombres du champ (7, 2) ne sont pas affichés, comme les numéros des onglets de Nos métiers. */
.x-tabs{display:flex;gap:40px;margin-bottom:40px;border-bottom:1px solid var(--x-line)}
.x-tab{position:relative;padding-bottom:22px;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--x-muted);transition:color .2s}
.x-tab small{display:none}
.x-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--x-gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
[dir="rtl"] .x-tab::after{transform-origin:100% 50%}
.x-tab:hover,.x-tab[aria-selected="true"]{color:var(--x-green)}
.x-tab:hover::after{transform:scaleX(.4)}
.x-tab[aria-selected="true"]::after{transform:scaleX(1)}
.x-tab:focus-visible{outline:2px solid var(--x-gold);outline-offset:4px;border-radius:4px}
/* ───── Une famille : carte verte + photo (paire carte / photo, inspiration Insperation/403debe….jpg) ─────
   Textes de la carte = cartes de Notre histoire (.x-fil-t, .x-fil-p) ; caractéristiques = rangée sous un trait doré (.x-fil-row). */
.x-fam-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px}
.x-fam-card{display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:440px;padding:48px;border-radius:20px;background:var(--x-deep);color:var(--x-white)}
.x-fam-t{font-size:clamp(30px,3vw,42px);line-height:1.05;letter-spacing:-.025em;font-weight:600;color:var(--x-white);text-wrap:balance}
.x-fam-p{margin-top:16px;max-width:640px;font-size:16px;line-height:1.6;color:rgba(var(--x-white-rgb),.84);text-wrap:pretty}
.x-fam-specs>div{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:2px solid var(--x-gold)}
.x-fam-specs dt{font-size:13.5px;line-height:1.45;color:rgba(var(--x-white-rgb),.66)}
.x-fam-specs dd{font-size:15px;font-weight:600;line-height:1.35;color:var(--x-white)}
.x-fam-ph{position:relative;min-height:300px;border-radius:20px;overflow:hidden;background:var(--x-placeholder)}
.x-fam-ph img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
/* ───── Les boîtes : tuiles claires de Nos marques (.x-tile, sans photo), fond porcelaine, pastille « Saveur de l'Année » de l'accueil (.x-chip) ─────
   Boîtes à 220px de haut au plus (fichiers de 239 à 628px : nettes). Pas d'effet au survol : les tuiles ne sont pas des liens. */
.x-range{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.x-range .x-tile{min-height:0;gap:32px;background:var(--x-paper)}
.x-range .x-tile-media{height:220px}
.x-range .x-tile:hover .x-tile-media img{transform:none}
.x-range-n{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.x-range .x-tile-t,.x-range .x-tile-ar{margin-top:0}
.x-range .x-tile-d{margin-top:10px;max-width:380px}
/* Références sans visuel : les colonnes de la section Qualité de La Somathes (.x-qcols, filets verticaux, sans cartes) */
.x-range-more{grid-template-columns:repeat(var(--c,3),minmax(0,1fr));margin-top:56px}
/* Famille avec une seule boîte (Gunpowder) : la référence sans visuel prend les deux colonnes libres à côté de la tuile, en bas, à la hauteur du texte de la tuile */
.x-range--one .x-range-more{grid-column:span 2;align-self:end;margin-top:0;padding-bottom:28px}
/* ───── Notre marque phare : le bloc .x-dah de l'accueil, sans changement ─────
   Culture, Sport, Export : à la place de la note de l'accueil (.x-dah-note : marge 28px, filet brun .28 au-dessus), une ligne par sujet. */
.x-dah-facts{width:100%;max-width:560px;margin-top:28px}
.x-dah-facts>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid rgba(var(--x-brown-rgb),.28)}
.x-dah-facts dt{font-size:12px;font-weight:700;line-height:1.9;letter-spacing:.14em;text-transform:uppercase}
.x-dah-facts dd{font-size:15px;line-height:1.55;color:rgba(var(--x-brown-rgb),.84)}
/* ───── Thé MDD : le bloc « Ce qui nous rassemble » de Nos valeurs (.x-vx), sans changement ; seuls les critères (mots) s'ajoutent sous le texte ───── */
/* Lien « Lancer mon projet MDD » sous la liste, sur la largeur de la liste (5/12, comme .x-vx-i) */
.x-vx-cta{width:calc((100% - 72px) * 5 / 12);margin-top:40px}
@media(max-width:900px){.x-vx-cta{width:auto;margin-top:32px}}
/* Critères : mots simples séparés par un filet vertical (« Ce que nous évaluons » de Nos métiers) ; le filet du premier mot de chaque ligne sort du cadre */
.x-words{margin-top:20px;overflow:hidden}
.x-words ul{display:flex;flex-wrap:wrap;gap:12px 0;margin-inline-start:-21px}
.x-words li{padding:0 20px;border-inline-start:1px solid rgba(var(--x-green-rgb),.28);font-size:15px;font-weight:600;line-height:1.3;color:var(--x-green)}
@media (prefers-reduced-motion:reduce){.x-tab,.x-tab::after{transition:none}}
@media(max-width:900px){
  .x-fam-top{grid-template-columns:1fr}
  .x-fam-ph{order:-1;min-height:0;aspect-ratio:16/10}
  .x-fam-card{min-height:0;padding:36px 28px}
  .x-range{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-range-more{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin-top:40px}
  .x-range--one .x-range-more{grid-column:auto;padding-bottom:0}
}
@media(max-width:640px){
  .x-tabs{gap:28px;margin-bottom:28px}
  .x-fam-specs{grid-template-columns:1fr}
  .x-range{grid-template-columns:1fr;gap:14px}
  .x-range .x-tile{padding:24px}
  .x-range .x-tile-media{height:200px}
  .x-range-more{grid-template-columns:1fr}
}

/* ═════ Distribution ═════ */
/* ───── Logistique : un grand bloc carte, le texte dans ses coins (vidéo Insperation/Map, 10 nov. 2026) ─────
   Carte : le Maroc en points, routes animées depuis Casablanca (composant « Route Globe » de 21st.dev, thème papier), dessinée par assets/js/pages/distribution.js.
   Bloc : carte blanche sur fond porcelaine (cartes de Notre vision), arrondi des grands blocs (28px). Coins : titre et texte en haut à gauche ;
   chiffres du réseau en haut à droite (statistiques de l'accueil : filet, chiffre, libellé) ; flèches du carrousel de Notre vision (.ibtn) et compteur en bas à gauche ;
   carte de l'agence en bas à droite (petit titre doré, nom, chiffres en colonnes à filets verticaux comme Qualité .x-qcols), qui change en fondu .25s / glissement .4s.
   Noms sur la carte : vert, trait doré de la barre des liens (40 % au survol, entier pour l'agence choisie, qui grossit ×1,2). */
.x-net{position:relative;height:clamp(600px,48vw,880px);border-radius:28px;background:var(--x-white);overflow:hidden}
/* Règle des portables (comme le héros de l'accueil) : la carte tient entière sous l'en-tête fixe, quelle que soit la hauteur d'écran.
   Hauteur = largeur (48vw) mais jamais plus que l'écran moins l'en-tête (88 px, 72 px en mode compact) et 24 px de marge en haut et en bas ;
   la barre d'administration WordPress (32 px) est déduite. Plancher 520 px (textes des coins). */
.x-net{--net-off:136px;height:clamp(520px,min(48vw,calc(100svh - var(--net-off) - var(--adm,0px))),880px)}
.admin-bar .x-net{--adm:32px}
@media (min-width:1024px) and (max-height:930px){.x-net{--net-off:120px}}
/* Écrans très bas : coins resserrés pour que les chiffres et la carte de l'agence ne se touchent pas */
@media (min-width:901px) and (max-height:760px){.x-net .x-net-top,.x-net .x-net-sum{top:28px}.x-net .x-net-top{inset-inline-start:28px}.x-net .x-net-sum{inset-inline-end:28px;gap:14px}.x-net .x-net-nav{bottom:28px;inset-inline-start:28px}.x-net .x-net-card{bottom:28px;inset-inline-end:28px;padding:24px 28px}}
.x-net-map{position:absolute;inset:0}
.x-net-cv{position:absolute;top:0;left:0;width:100%;height:100%}
.x-net-top,.x-net-sum,.x-net-nav,.x-net-card{position:absolute;z-index:2}
.x-net-top{top:40px;inset-inline-start:40px;max-width:min(400px,32%)}
.x-net-t{font-size:clamp(28px,2.6vw,40px);line-height:1.08;letter-spacing:-.03em;font-weight:600;color:var(--x-green);text-wrap:balance}
.x-net-d{margin-top:16px;font-size:16px;line-height:1.6;color:var(--x-muted);text-wrap:pretty}
.x-net-sum{top:40px;inset-inline-end:40px;display:flex;flex-direction:column;gap:20px;width:200px}
.x-net-sum>div{display:flex;flex-direction:column-reverse;padding-top:14px;border-top:1px solid var(--x-line)}
.x-net-sum dd{white-space:nowrap;font-size:clamp(26px,2.1vw,36px);font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--x-green)}
.x-net-sum dt{margin-top:8px;font-size:14px;color:var(--x-muted)}
.x-net-nav{bottom:40px;inset-inline-start:40px;display:flex;align-items:center;gap:10px}
/* Navigation : « précédent » secondaire (rond, contour) ; « suivant » = action principale qui annonce la ville suivante (contour vert, vert plein au survol, flèche qui avance) */
.x-net-nav{gap:16px}
.x-net-nav .ibtn:hover{border-color:var(--x-deep);background:var(--x-deep);color:var(--x-on-deep)}
.x-net-next{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 22px 0 24px;border-radius:999px;border:1.5px solid var(--x-deep);background:var(--x-deep);font-size:15px;font-weight:600;color:var(--x-on-deep);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.x-net-next svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .2s}
/* Bouton principal du bloc : vert plein par défaut, comme .btn-dark (demande du 10 nov. 2026) ; au survol, le vert de survol de .btn-dark */
.x-net-next:hover{border-color:var(--x-deep-hover);background:var(--x-deep-hover)}
.x-net-next:hover svg{transform:translateX(4px)}
[dir="rtl"] .x-net-next svg{transform:scaleX(-1)}
.x-net-next:focus-visible,.x-net-nav .ibtn:focus-visible{outline:2px solid var(--x-gold);outline-offset:3px}
.x-net-count{margin-inline-start:14px;font-size:14px;font-weight:600;color:var(--x-muted);font-variant-numeric:tabular-nums}
[dir="rtl"] .x-net-nav .ibtn svg{transform:scaleX(-1)}
.x-net-card{bottom:40px;inset-inline-end:40px;width:min(420px,40%);padding:28px 32px;border-radius:20px;background:var(--x-paper)}
.x-net-c{animation:x-net-in .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes x-net-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.x-net-k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--x-gold-ink)}
.x-net-n{margin-top:10px;font-size:clamp(26px,2.2vw,34px);line-height:1.1;letter-spacing:-.025em;font-weight:600;color:var(--x-green)}
.x-net-row{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;margin-top:20px}
.x-net-row>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:2px 20px;border-inline-start:1px solid var(--x-line)}
.x-net-row>div:first-child{padding-inline-start:0;border-inline-start:0}
.x-net-row>div:last-child{padding-inline-end:0}
.x-net-row dd{white-space:nowrap;font-size:18px;line-height:1.2;letter-spacing:-.015em;font-weight:600;color:var(--x-green)}
.x-net-row dt{font-size:13px;line-height:1.4;color:var(--x-muted)}
/* Noms sur la carte : invisibles tant que le script ne les a pas placés ; l'agence choisie : gras, ×1,2 depuis le point, trait doré entier */
.x-net-pin{position:absolute;top:0;left:0;padding:3px 0;font-size:14.5px;font-weight:600;line-height:1.2;color:var(--x-green);white-space:nowrap;cursor:pointer;text-shadow:0 0 3px var(--x-white),0 0 6px var(--x-white),0 0 10px var(--x-white);transform-origin:0 50%;transform:translateY(-50%);opacity:0;transition:opacity .4s,transform .35s cubic-bezier(.2,.7,.2,1)}
.x-net-map.is-ready .x-net-pin{opacity:1}
.x-net-pin--l{transform:translate(-100%,-50%);transform-origin:100% 50%}
.x-net-pin.is-on{z-index:1;font-weight:700;transform:translateY(-50%) scale(1.2)}
.x-net-pin--l.is-on{transform:translate(-100%,-50%) scale(1.2)}
.x-net-pin::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--x-gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.x-net-pin--l::after{transform-origin:100% 50%}
.x-net-pin:hover::after{transform:scaleX(.4)}
.x-net-pin.is-on::after{transform:scaleX(1)}
/* Pendant le zoom les noms suivent la caméra sans transition ; s'ils se chevauchent, seul celui de l'agence choisie reste */
.x-net-map.is-moving .x-net-pin{transition:opacity .4s}
.x-net-map.is-tight .x-net-pin:not(.is-on){visibility:hidden}
@media (prefers-reduced-motion:reduce){
  .x-net-pin,.x-net-pin::after{transition:none}
  .x-net-c{animation:none}
}
/* Écrans moyens : chiffres et carte d'agence plus serrés */
@media(max-width:1280px){
  .x-net-top{top:32px;inset-inline-start:32px}
  .x-net-sum{top:32px;inset-inline-end:32px;width:170px;gap:16px}
  .x-net-nav{bottom:32px;inset-inline-start:32px}
  .x-net-card{bottom:32px;inset-inline-end:32px;padding:24px}
  .x-net-row>div{padding:2px 14px}
  .x-net-row dd{font-size:16px}
}
/* Petit écran : plus de texte sur la carte ; titre, carte, agence, flèches, chiffres les uns sous les autres */
@media(max-width:900px){
  .x-net{display:flex;flex-direction:column;height:auto;padding:28px 24px;gap:24px}
  .x-net-top,.x-net-sum,.x-net-nav,.x-net-card{position:static;width:auto;max-width:none}
  .x-net-map{position:relative;inset:auto;order:1;aspect-ratio:1/1;margin:0 -24px}
  .x-net-top{order:0}
  .x-net-card{order:2;padding:24px}
  .x-net-nav{order:3}
  .x-net-sum{order:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}
@media(max-width:640px){
  .x-net-sum{grid-template-columns:1fr}
  .x-net-card{padding:20px}
  .x-net-row>div{padding:2px 10px}
  .x-net-row dd{font-size:15px}
}
/* Partie à manipuler (.x-net-play : carte, flèches, carte de l'agence ; balisage distribution.php). Sur ordinateur elle n'existe pas pour la mise en page (display:contents) :
   ses éléments restent posés dans les coins du bloc comme avant. */
.x-net-play{display:contents}
/* Tablettes et téléphones (demande du 10 nov. 2026) : titre, texte et chiffres du réseau d'abord (introduction, ils peuvent sortir de l'écran),
   puis la partie à manipuler, qui prend exactement la hauteur visible moins l'en-tête réduit (88 px) et 12 px de marge en haut et en bas (barre d'administration déduite) :
   la carte prend la place restante (au moins 180 px, sinon la partie grandit plutôt que de couper), la carte de l'agence et les flèches dessous. */
@media(max-width:900px){
  .x-net{padding:24px 20px 20px;gap:20px}
  .x-net-sum{order:1}
  .x-net-play{--net-off:112px;order:2;display:flex;flex-direction:column;gap:14px;height:calc(100vh - var(--net-off) - var(--adm,0px));height:calc(100svh - var(--net-off) - var(--adm,0px));min-height:min-content}
  .admin-bar .x-net-play{--adm:46px}
  .x-net-map{flex:1 1 0;min-height:180px;aspect-ratio:auto;margin:0 -20px}
  .x-net-t{font-size:clamp(24px,6.4vw,32px)}
  .x-net-d{margin-top:10px;font-size:15px;line-height:1.55}
  .x-net-sum,.x-net-sum[class]{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .x-net-sum>div{padding-top:10px}
  .x-net-sum dd{font-size:22px}
  .x-net-sum dt{margin-top:6px;font-size:12.5px;line-height:1.35}
  .x-net-card{padding:16px 18px}
  .x-net-k{font-size:11px}
  .x-net-n{margin-top:4px;font-size:22px}
  .x-net-row{margin-top:10px}
  .x-net-row dd{font-size:15px}
  .x-net-row dt{font-size:12px}
}

/* ═════ Distribution (refonte du 10 nov. 2026, hors section Logistique ci-dessus) ═════ */
/* ───── Un partenaire stratégique : copie exacte du carrousel « Cinq axes » de Notre vision (modèle de tous les carrousels du site) ─────
   Deux cartes visibles + un bord de la suivante, écart 24px, cartes blanches 20px sur fond papier, icône dorée en haut, titre et texte en bas, flèches de 52px. */
#offre .track{--g:24px;--peek:72px;--w:calc((100% - 2 * var(--g) - var(--peek)) / 2)}
@media(max-width:800px){#offre .track{--w:88%}}
#offre .axe{height:100%;min-height:360px;padding:44px;border-radius:20px;background:var(--x-white);display:flex;flex-direction:column}
#offre .axe h3{margin-top:auto;padding-top:40px;font-size:clamp(24px,2.3vw,30px);line-height:1.15;letter-spacing:-.025em;font-weight:600;color:var(--x-green)}
#offre .axe p{margin-top:14px;max-width:520px;font-size:16px;line-height:1.7;color:var(--x-muted)}
#offre .ibtn{width:52px;height:52px}
@media(max-width:640px){#offre .axe{min-height:320px;padding:32px 28px}}

/* ───── Couverture nationale ─────
   Haut : titre + texte à gauche, les quatre chiffres à droite en 2 × 2 (section Distribution de l'accueil, sans filet : demande du 10 nov. 2026, « trop de lignes »).
   Bas : les trois points forts (titre + texte gris, une seule couleur) à gauche, l'organisation commerciale à droite dans un bloc papier à onglets soulignés (.x-tabs). */
.x-cov-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.x-cov-top .x-lead{margin-top:20px}
.x-cov-n{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}
.x-cov-n dt{font-size:clamp(40px,4.2vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--x-green)}
.x-cov-n dd{margin-top:10px;font-size:14.5px;color:var(--x-muted)}
.x-cov{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center;margin-top:96px}
.x-cov-l{display:grid;gap:36px}
.x-cov-l h3{font-size:clamp(20px,1.6vw,24px);line-height:1.25;letter-spacing:-.02em;font-weight:600;color:var(--x-green)}
.x-cov-l p{margin-top:10px;max-width:480px;font-size:15.5px;line-height:1.65;color:var(--x-muted)}
.x-team{padding:44px;border-radius:20px;background:var(--x-paper)}
.x-team-t{margin-bottom:28px;font-size:clamp(22px,1.9vw,28px);line-height:1.2;letter-spacing:-.02em;font-weight:600;color:var(--x-green)}
.x-team .x-tabs{margin-bottom:8px}
.x-team .trow{padding:14px 0;border-bottom:0}
.x-team .trow:last-child{padding-bottom:0}
.x-team .trow b{color:var(--x-green)}
.x-team .trow small{color:var(--x-muted)}
.x-team .trow span{color:var(--x-gold-ink)}

/* ───── Au-delà de la distribution / Pilotage et outils : les cartes photo sombres de « Nos marques » (accueil), deux côte à côte ─────
   Même voile, mêmes couleurs de texte ; les mots en bas de carte en blanc, séparés par des filets blancs transparents (.x-words). */
.x-svcs{grid-template-columns:repeat(2,minmax(0,1fr))}
.x-svc{min-height:520px;padding:48px}
.x-svc .x-tile-t{margin-top:0;font-size:clamp(28px,2.6vw,40px);line-height:1.1}
.x-svc .x-tile-d{margin-top:18px;max-width:460px;font-size:16px;line-height:1.65}
.x-svc .x-words{margin-top:0}
.x-bento--photo .x-svc:hover .x-tile-bg{transform:none} /* carte sans lien : pas d'effet au survol */
.x-svc .x-words li{border-color:rgba(var(--x-white-rgb),.3);color:var(--x-white)}

/* ───── Pourquoi choisir SOMATHES : cinq raisons en colonnes, chacune sous le petit trait doré de 40px (.x-dah-k, .x-qend) ───── */
.x-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 48px}
.x-why li{position:relative;padding-top:26px}
.x-why li::before{content:"";position:absolute;top:0;inset-inline-start:0;width:40px;height:2px;background:var(--x-gold)}
.x-why h3{font-size:clamp(20px,1.6vw,24px);line-height:1.25;letter-spacing:-.02em;font-weight:600;color:var(--x-green)}
.x-why p{margin-top:12px;max-width:420px;font-size:15.5px;line-height:1.65;color:var(--x-muted)}

/* ───── Vous avez une marque à développer ? : bloc vert de 28px (cadre du CTA et de l'ISO), étapes sous un trait doré de 2px, formulaire à droite ───── */
.x-pt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px 80px;padding:72px 64px;border-radius:28px;background:var(--x-deep);color:var(--x-on-deep)}
.x-pt .x-h2{color:var(--x-on-deep)}
.x-pt .x-lead{margin-top:20px;color:var(--x-on-deep-2)}
.x-pt-s{display:grid;gap:28px;margin-top:40px;max-width:460px}
.x-pt-s b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--x-on-deep)}
.x-pt-s span{display:block;margin-top:6px;font-size:15px;line-height:1.55;color:var(--x-on-deep-2)}
.x-pt-mail{margin-top:40px;font-size:15px;color:var(--x-on-deep-2)}
.x-pt-mail a{color:var(--x-on-deep);text-decoration:underline;text-decoration-color:var(--x-gold);text-underline-offset:4px}
.x-pt .form{align-content:start}
.x-pt-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:8px}
.x-pt-end p{max-width:340px;font-size:13px;color:var(--x-on-deep-3)}

@media(max-width:1100px){
  .x-cov{grid-template-columns:1fr;gap:56px}
  .x-why{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-pt{grid-template-columns:1fr;padding:56px 40px}
}
@media(max-width:900px){
  .x-cov-top{grid-template-columns:1fr;gap:48px}
  .x-cov{margin-top:72px}
  .x-svcs{grid-template-columns:1fr}
  .x-svc{min-height:440px;padding:32px}
}
@media(max-width:640px){
  .x-why{grid-template-columns:1fr;gap:40px}
  .x-svc{padding:28px 24px}
  .x-team{padding:28px 20px}
  .x-team .x-tabs{gap:24px;overflow-x:auto}
  .x-team .x-tab{flex:none;font-size:16px}
  .x-pt{padding:40px 20px;border-radius:20px}
}

/* ═════ Actualités (refonte du 10 nov. 2026) ═════ */
/* ───── À la une : le bloc papier d'origine (28px), le mot « À la une » en petit titre doré au lieu de la pastille sur la photo ───── */
.x-feat .feat{border-radius:28px;background:var(--x-paper)}
.x-feat .feat-m{min-height:560px}
.x-feat .feat-b{padding:64px}
.x-feat-k{margin-bottom:14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--x-gold-ink)}
.x-feat .feat-k{color:var(--x-muted)}
.x-feat .feat-k b{color:var(--x-green)}
.x-feat .feat h2{color:var(--x-green)}
.x-feat .feat-x{color:var(--x-muted)}
.x-feat .feat-lab{padding-top:0;border-top:0}
.x-feat .feat-lab p{color:var(--x-muted)}
.x-feat .btn{align-self:flex-start;margin-top:32px}
.x-feat .feat:hover .feat-m img{transform:scale(1.03)}

/* ───── Toutes les actualités : onglets soulignés (.x-tabs, compteurs cachés), cartes sobres ───── */
.x-news-all .x-head{margin-bottom:32px}
.x-news-all .x-tabs{flex-wrap:wrap;gap:12px 40px;margin-bottom:48px}
.x-tab[aria-pressed="true"]{color:var(--x-green)}
.x-tab[aria-pressed="true"]::after{transform:scaleX(1)}
.x-news-all .ngrid{gap:56px 24px}
.x-news-all .nw-m{border-radius:20px;background:var(--x-placeholder)}
/* Carte sans photo : un seul visuel provisoire, le vert des fonds sombres (suit le sélecteur de couleur), titre blanc en bas */
.x-news-all .nw-ph{justify-content:flex-end;padding:32px;background:var(--x-deep);color:var(--x-on-deep)}
.x-news-all .nw-ph b{font-size:clamp(24px,2vw,30px);line-height:1.15;letter-spacing:-.025em;font-weight:600}
.x-news-all .nw-k{color:var(--x-muted)}
.x-news-all .nw-k b{color:var(--x-gold-ink)}
/* Titre : souligné d'or au survol (comme .x-news-t de l'accueil), sans changement de couleur */
.x-news-all .nw h3{color:var(--x-green);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .2s}
.x-news-all .nw:hover h3{color:var(--x-green);text-decoration-color:var(--x-gold)}
.x-news-all .nw-x{color:var(--x-muted)}
.x-news-all .x-more{align-self:flex-start;margin-top:18px}
.nw:hover .x-more::after{animation:x-arrow-swap .2s linear forwards}
.x-news-more{display:flex;justify-content:center;margin-top:64px}

/* ───── Suivez-nous : bloc vert de 28px (cadre du CTA et du formulaire Distribution) ; réseaux en liste à deux colonnes, sans cases ───── */
.x-fol{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px 80px;align-items:center;padding:80px 64px;border-radius:28px;background:var(--x-deep);color:var(--x-on-deep)}
.x-fol-k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--x-on-deep-accent)}
.x-fol .x-h2{margin-top:16px;color:var(--x-on-deep)}
.x-fol .x-lead{margin-top:20px;color:var(--x-on-deep-2)}
.x-fol .nl{background:rgba(var(--x-white-rgb),.08);border-color:rgba(var(--x-white-rgb),.16)}
.x-fol-mail{margin-top:24px;font-size:14px;color:var(--x-on-deep-3)}
.x-fol-mail a{font-weight:600;color:var(--x-on-deep);text-decoration:underline;text-decoration-color:var(--x-gold);text-underline-offset:4px}
.x-soc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}
.x-soc a{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.x-soc b{display:block;font-size:22px;line-height:1.2;letter-spacing:-.015em;font-weight:600;color:var(--x-on-deep);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:6px;transition:text-decoration-color .2s}
.x-soc a:hover b{text-decoration-color:var(--x-gold)}
.x-soc span span{display:block;margin-top:6px;font-size:14px;color:var(--x-on-deep-3)}
.x-soc svg{flex:none;width:16px;height:16px;margin-top:6px;fill:none;stroke:var(--x-on-deep-accent);stroke-width:1.8;transition:transform .2s}
.x-soc a:hover svg{transform:translate(2px,-2px)}
[dir="rtl"] .x-soc svg{transform:scaleX(-1)}
[dir="rtl"] .x-soc a:hover svg{transform:scaleX(-1) translate(2px,-2px)}

@media(max-width:1000px){
  .x-feat .feat-m{min-height:360px}
  .x-feat .feat-b{padding:40px 32px}
  .x-fol{grid-template-columns:1fr;padding:56px 40px}
}
@media(max-width:640px){
  .x-feat .feat{border-radius:20px}
  .x-feat .feat-b{padding:28px 20px}
  .x-news-all .x-tabs{flex-wrap:nowrap;overflow-x:auto;gap:28px}
  .x-news-all .x-tab{flex:none;font-size:16px}
  .x-fol{padding:40px 20px;border-radius:20px}
  .x-soc{grid-template-columns:1fr;gap:28px}
}
@media (prefers-reduced-motion:reduce){.x-soc svg{transition:none}}
/* Filigrane de l'emblème SOMATHES sur les visuels provisoires (même idée que le logo en filigrane du bloc Dahmiss), pour qu'un bloc vert vide reste habillé */
.x-news-all .nw-ph{position:relative;isolation:isolate;overflow:hidden}
.x-news-all .nw-ph::before{content:"";position:absolute;top:-12%;inset-inline-end:-10%;z-index:-1;width:62%;aspect-ratio:1;background:var(--x-on-deep-accent);opacity:.14;-webkit-mask:url("../images/somathes-symbole.webp") center/contain no-repeat;mask:url("../images/somathes-symbole.webp") center/contain no-repeat}

/* ═════ Carrière (refonte du 10 nov. 2026) ═════ */
/* ───── Grandir avec nous : textes dans la colonne droite du titre ; trois photos, légende blanche sur le voile bas des cartes « De la feuille au rayon » ───── */
.x-gr .x-head .kick{margin-bottom:14px}
.x-gr .x-head-r .x-lead+.x-lead{margin-top:16px}
.x-gr-strip{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:20px}
.x-gr-strip figure{position:relative;isolation:isolate;display:flex;align-items:flex-end;height:400px;margin:0;padding:28px;border-radius:20px;overflow:hidden;background:var(--x-photo-bg)}
.x-gr-strip img{position:absolute;top:0;left:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.x-gr-strip figure::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--x-deep-veil),0) 34%,rgba(var(--x-deep-veil),.9) 100%)}
.x-gr-strip figcaption{font-size:20px;line-height:1.25;letter-spacing:-.015em;font-weight:600;color:var(--x-white)}

/* ───── Pourquoi rejoindre SOMATHES : raisons sans numéros ni filets, sous le trait doré de 40px (.x-why de Distribution) ───── */
#pourquoi.x-sec .why-media{border-radius:20px}
/* La photo d'équipe suit les cartes photo du site (« De la feuille au rayon », Nos valeurs) : photo entière, voile vert seulement en bas,
   « 60+ » et sa phrase posés directement sur la photo (plus de pavé vert dans la carte) */
#pourquoi.x-sec .why-media{isolation:isolate;background:var(--x-photo-bg)}
#pourquoi.x-sec .why-media img{z-index:-2}
#pourquoi.x-sec .why-media::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--x-deep-veil),0) 34%,rgba(var(--x-deep-veil),.9) 100%)}
#pourquoi.x-sec .why-badge{left:40px;right:40px;bottom:40px;flex-direction:column;align-items:flex-start;gap:12px;padding:0;border-radius:0;background:none}
#pourquoi.x-sec .why-badge b{font-size:clamp(56px,5vw,72px);color:var(--x-on-deep-accent)}
#pourquoi.x-sec .why-badge span{max-width:340px;font-size:16px;line-height:1.5;color:rgba(var(--x-white-rgb),.84)}
@media(max-width:640px){#pourquoi.x-sec .why-badge{left:24px;right:24px;bottom:24px}}
#pourquoi.x-sec .why-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px;margin-top:48px;border-top:0}
#pourquoi.x-sec .why-l li{position:relative;display:block;padding:26px 0 0;border-bottom:0}
#pourquoi.x-sec .why-l li::before{content:"";position:absolute;top:0;inset-inline-start:0;width:40px;height:2px;background:var(--x-gold)}
#pourquoi.x-sec .why-l h3{font-size:clamp(20px,1.6vw,24px);line-height:1.25;letter-spacing:-.02em;color:var(--x-green)}
#pourquoi.x-sec .why-l p{margin-top:10px;font-size:15.5px;line-height:1.65;color:var(--x-muted)}
#pourquoi.x-sec .why{align-items:center}

/* ───── Nos opportunités : onglets soulignés (.x-tabs, compteurs cachés) ; famille en petit texte doré au lieu d'une pastille ───── */
.x-jobs-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:8px}
.x-jobs-bar .x-tabs{flex:1;flex-wrap:wrap;gap:12px 40px;margin-bottom:0}
.x-jobs-n{padding-bottom:22px;font-size:14px;font-weight:600;color:var(--x-muted)}
/* Nombre d'offres sur sa propre ligne, au-dessus des onglets (demande du 10 nov. 2026) : les onglets et leur filet prennent toute la largeur */
.x-jobs-bar{flex-direction:column;align-items:stretch;gap:24px;min-width:0}
.x-jobs-bar .x-tabs{flex:none;min-width:0;max-width:100%}
.x-jobs-n{order:-1;padding-bottom:0}
.x-jobs .jobs{border-top:0}
.x-jobs .job{border-bottom-color:var(--x-line)}
.x-jobs .job-t{color:var(--x-green);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:6px;transition:text-decoration-color .2s}
.x-jobs .job-h:hover .job-t{color:var(--x-green);text-decoration-color:var(--x-gold)}
.x-jobs-f{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--x-gold-ink)}
.x-jobs .job-b h3{color:var(--x-gold-ink)}
.x-jobs .job-b ul li::before{top:11px;width:8px;height:2px;border-radius:0;background:var(--x-gold)}
.x-jobs .spont{margin-top:48px;padding:32px 40px;background:var(--x-paper)}
.x-jobs .spont p{font-size:20px;letter-spacing:-.015em;color:var(--x-green)}

/* ───── Candidature : bloc vert de 28px ; étapes sous le trait doré de 40px, sans pastille numérotée ni filets ───── */
.x-app{padding:80px 64px;border-radius:28px;background:var(--x-deep);color:var(--x-on-deep)}
.x-app-k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--x-on-deep-accent)}
.x-app .x-h2{margin-top:16px;color:var(--x-on-deep)}
.x-app .x-lead{margin-top:20px;color:var(--x-on-deep-2)}
.x-app .steps{display:grid;gap:28px;margin-top:48px}
.x-app .steps li{position:relative;display:block;padding:24px 0 0;border:0}
.x-app .steps li::before{content:"";position:absolute;top:0;inset-inline-start:0;width:40px;height:2px;background:var(--x-gold)}
.x-app .steps i{display:none}
.x-app .steps b{font-size:18px;color:var(--x-on-deep)}
.x-app .steps span{color:var(--x-on-deep-2)}
.x-app .form{border-radius:20px}
.x-app .pos{padding:0;border-radius:0;background:none;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--x-gold-ink)}
.x-app .pos[style]{padding-right:0!important}
.x-app .pos button{background:var(--x-paper)}
.x-app-send{width:100%;margin-top:28px}

@media(max-width:1000px){
  .x-gr-strip{grid-template-columns:1fr 1fr}
  .x-gr-strip figure:first-child{grid-column:1/-1}
  .x-app{padding:56px 40px}
}
@media(max-width:640px){
  .x-gr-strip{grid-template-columns:1fr}
  .x-gr-strip figure{height:280px;padding:22px}
  #pourquoi.x-sec .why-l{grid-template-columns:1fr;gap:32px}
  .x-jobs-bar .x-tabs{flex-wrap:nowrap;overflow-x:auto;gap:28px}
  .x-jobs-bar .x-tab{flex:none;font-size:16px}
  .x-jobs .spont{padding:24px 20px}
  .x-app{padding:40px 20px;border-radius:20px}
}

/* ═════ Contact (refonte du 10 nov. 2026) ═════ */
/* Formulaire : bloc papier aux angles des cartes (20px) ; objets de la demande en onglets soulignés (.x-tabs) au lieu de pastilles */
.x-contact .cgrid{gap:24px}
.x-contact .fcard{padding:56px;border-radius:20px;background:var(--x-paper)}
.x-contact .fcard h2{font-size:clamp(24px,2vw,30px);color:var(--x-green)}
.x-contact .x-tabs.topics{flex-wrap:wrap;gap:12px 32px;margin:28px 0 0}
.x-contact .x-tab{font-size:16px}
.x-tab[aria-pressed="true"]{color:var(--x-green)}
.x-tab[aria-pressed="true"]::after{transform:scaleX(1)}
.x-contact .hint{margin-top:16px;color:var(--x-muted)}
.x-contact-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:32px}
.x-contact-end p{font-size:14px;color:var(--x-muted)}
.x-contact-end span{font-weight:600;color:var(--x-green)}
/* Coordonnées : bloc vert de 28px, informations en grille 2 × 2 sans filets ; liens du système (.x-link) en blanc */
.x-contact .ccard{padding:48px;border-radius:28px;background:var(--x-deep);color:var(--x-on-deep)}
.x-contact-t{font-size:clamp(22px,1.9vw,28px);line-height:1.2;letter-spacing:-.02em;font-weight:600}
.x-contact .ccard .x-contact-t{color:var(--x-on-deep)}
.x-contact-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 32px;margin-top:36px}
.x-contact .crow{padding:0;border:0}
.x-contact .crow dt{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--x-on-deep-accent)}
.x-contact .crow dd{margin-top:10px;font-size:16px;line-height:1.55;color:var(--x-on-deep)}
.x-contact .crow a{color:var(--x-on-deep);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s}
.x-contact .crow a:hover{color:var(--x-on-deep);text-decoration-color:var(--x-gold)}
.x-contact-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:40px}
.x-contact .ccard .x-link{color:var(--x-on-deep)}
.x-contact-soc{display:flex;gap:20px;font-size:14px;font-weight:600}
.x-contact-soc a{color:var(--x-on-deep-2);transition:color .2s}
.x-contact-soc a:hover{color:var(--x-on-deep)}
/* Agences : sans cadre, sous les coordonnées ; noms séparés par des filets (.x-words), lien flèche */
.x-contact .acard{margin-top:0;padding:40px 48px 8px;border:0;border-radius:0}
.x-contact .acard .x-contact-t{color:var(--x-green)}
.x-contact .acard ul{display:flex;margin-top:0}
.x-contact .acard li{padding:0 20px;border-radius:0;background:none}
.x-contact .acard .x-link{margin-top:28px}
@media(max-width:640px){
  .x-contact .fcard,.x-contact .ccard{padding:28px 20px}
  .x-contact .ccard{border-radius:20px}
  .x-contact-dl{grid-template-columns:1fr;gap:24px}
  .x-contact .acard{padding:32px 0 0}
  .x-contact .x-tabs.topics{flex-wrap:nowrap;overflow-x:auto;gap:24px}
  .x-contact .x-tab{flex:none}
}
/* Les boutons gardent la classe .topic (logique de la page) : on retire son ancien habillage de pastille */
.x-contact .x-tab.topic{height:auto;padding:0 0 18px;border:0;border-radius:0;background:none}
/* Petit écran : la ligne d'onglets défile seule, sans élargir la page (un fieldset prend par défaut la largeur de son contenu) */
.x-contact .fcard,.x-contact aside,.x-contact fieldset{min-width:0}
/* Objet de la demande : liste déroulante, même trait bas que les autres champs ; chevron dessiné en CSS (comme la flèche des liens, masque) */
.x-contact .fld select{width:100%;height:44px;padding:0 28px 0 0;border:0;border-bottom:1px solid var(--x-line);border-radius:0;background:transparent;font-size:17px;font-weight:600;color:var(--x-green);outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;transition:border-color .2s}
.x-contact .fld select:focus{border-bottom-color:var(--x-green)}
.x-contact .fld:has(select){position:relative}
.x-contact .fld:has(select)::after{content:"";position:absolute;inset-inline-end:2px;bottom:18px;width:8px;height:8px;border-right:1.5px solid var(--x-green);border-bottom:1.5px solid var(--x-green);transform:rotate(45deg);pointer-events:none}
.x-contact .fields{margin-top:0}
.x-contact-end{justify-content:flex-end}
/* Icônes IBM Carbon des réseaux et de l'itinéraire (demande du 10 nov. 2026) : réseaux en icônes seules (nom en aria-label), or au survol ; épingle dorée devant « Itinéraire » */
.x-ic{display:block;width:22px;height:22px;fill:currentColor}
.x-contact-soc{gap:18px}
.x-contact-soc a{display:inline-flex;padding:2px}
.x-contact-soc a:hover{color:var(--x-on-deep-accent)}
.x-contact-map .x-ic{display:inline-block;width:18px;height:18px;margin-inline-end:8px;vertical-align:-3px;fill:var(--x-on-deep-accent)}

/* ═════ Mentions légales (10 nov. 2026) ═════ */
/* Informations manquantes : simple texte gris, sans pastille ni cadre gris (pastilles et cadres refusés sur tout le site) */
.prose .sm-missing{padding:0;border-radius:0;background:none;font-size:inherit;color:var(--x-muted)}
.prose p.sm-missing{margin-top:12px}
/* Colonne de lecture (règle des textes longs) : 70 à 75 caractères par ligne au plus (720px ; « 68ch » donnait 846px avec cette police), centrée dans la page au lieu d'être collée à gauche
   avec un grand vide à droite ; même largeur pour les titres, le tableau de l'éditeur et les paragraphes. Espacement de section du système (.x-sec). */
.prose{max-width:720px;margin-inline:auto}
.prose>h2:first-child{margin-top:0}

/* ═════ Cohérence du site (audit du 10 nov. 2026, audit-coherence-2026-11-10.md) ═════
   Un même élément = un même style sur toutes les pages. Chaque bloc ci-dessous cite le numéro de l'audit. */
/* ───── A2 : liens fléchés plus visibles (16px, trait or de 2px comme tous les traits or du site, flèche or) ───── */
.x-link,.mlink{font-size:16px}
.x-link,.x-more,.mlink{text-decoration-thickness:2px}
.x-link::after,.x-more::after,.mlink::after{background:var(--x-gold)}
/* ───── A4 : boutons ronds fléchés : 52px partout (taille des carrousels) ───── */
.ibtn{width:52px;height:52px}
/* ───── A5 : adresses e-mail dans le texte : un seul style (souligné or, 15px) ───── */
.x-pt-mail,.x-fol-mail{font-size:15px}
.x-pt-mail a,.x-fol-mail a,.x-contact .crow a{font-weight:600;color:var(--x-on-deep);text-decoration:underline;text-decoration-color:var(--x-gold);text-underline-offset:4px}
/* ───── A1 : action principale d'un bloc = bouton ; espacements repris des boutons existants (Nos métiers : 36px sous le contenu) ───── */
.x-vx-cta .btn{margin-top:0}
.x-jobs .spont .btn{flex:none}
/* ───── B1 : La Somathes, Nos métiers = bloc .x-vx de Nos valeurs ; le bouton du métier « Marketing » sous son texte (36px, comme Nos métiers) ───── */
.x-vx-act{margin-top:36px}
/* ───── B2 : onglets de Nos métiers = onglets du site (.x-tabs) : largeur du texte, 40px entre les onglets (au lieu de 4 colonnes égales) ───── */
#explorer .mtabs{display:flex;gap:40px;overflow-x:auto;scrollbar-width:none}
#explorer .mtabs::-webkit-scrollbar{display:none}
#explorer .mtabs .mtab{flex:none;gap:0}
@media(max-width:960px){#explorer .mtabs{gap:28px}}
/* ───── C4 : petits libellés en majuscules : 12px / .14em partout (comme .x-vx-k, .x-tile-fam) ───── */
body .ev-l,body .tp-k,body .x-dah-k{font-size:12px;letter-spacing:.14em}
/* ───── C5 : titre de section → contenu : 56px aussi sur Actualités (onglets sous le titre, comme Nos thés et Carrière) ───── */
.x-news-all .x-head{margin-bottom:56px}
/* ───── D1 / D2 : listes « titre + court texte » sur fond uni : toutes sous le trait doré de 40px (modèle .x-why de Distribution et Carrière).
   Le trait doré de 2px sur toute la largeur reste réservé aux textes posés sur une photo (Notre histoire, Nos valeurs « Au quotidien »). ───── */
.x-qeq-i,.x-qcols li,.x-cov-l>li,.x-pt-s>li,#explorer .mp-blocks>div{position:relative;padding-top:26px}
.x-qeq-i::before,.x-qcols li::before,.x-cov-l>li::before,.x-pt-s>li::before,#explorer .mp-blocks>div::before{content:"";position:absolute;top:0;inset-inline-start:0;width:40px;height:2px;background:var(--x-gold)}
.x-qeq{gap:48px}
.x-qeq-i{border-top:0}
.x-qcols{gap:48px}
.x-qcols li,.x-qcols li:first-child{padding-inline:0;border-inline-start:0}
#explorer .mp-blocks>div{border-top:0}
@media(max-width:900px){.x-qcols li,.x-qcols li:first-child{padding:26px 0 0;border-top:0}}
/* Les petits titres dorés au-dessus des titres ont été retirés (C2) : le titre du bloc Candidature remonte en haut */
.x-app .x-h2{margin-top:0}
/* ───── E4 : un seul formulaire type : carte claire (papier sur fond blanc, blanche dans un bloc vert, 20px), champs soulignés,
   envoi = bouton vert foncé à droite (le formulaire de Contact). Carrière et Distribution suivent. ───── */
.x-pt .form{padding:44px;border-radius:20px;background:var(--x-white);color:var(--x-ink)}
.x-pt .fld label{color:var(--x-muted)}
.x-pt .fld input,.x-pt .fld textarea{border-bottom-color:var(--x-line);color:var(--x-ink)}
.x-pt .fld input:focus,.x-pt .fld textarea:focus{border-bottom-color:var(--x-green)}
.x-pt .fld input::placeholder{color:rgba(var(--x-green-rgb),.4)}
.x-pt-end p{color:var(--x-muted)}
.x-app-send{display:flex;width:auto;margin-inline-start:auto}
.x-app .fld:has(select){position:relative}
.x-app .fld select{width:100%;padding:0 28px 0 0;color:var(--x-green);font-weight:600;cursor:pointer;-webkit-appearance:none;appearance:none}
.x-app .fld:has(select)::after{content:"";position:absolute;inset-inline-end:2px;bottom:16px;width:8px;height:8px;border-right:1.5px solid var(--x-green);border-bottom:1.5px solid var(--x-green);transform:rotate(45deg);pointer-events:none}
@media(max-width:640px){.x-pt .form{padding:28px 20px}}
/* ───── E1 : photos 20px (cartes), 28px réservé aux grands blocs ───── */
body .tp,body .mp-img,body .hum2-img,body .conf-img{border-radius:20px}
/* ───── E2 / E3 : cartes d'actualités : mêmes titres que la page Actualités (20px) et même zoom de la photo au survol (1,04) ; toute carte photo cliquable zoome ───── */
.x-news-side .x-news-t{font-size:20px}
.x-news-item img,.x-feat .feat-m img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.x-news-item:hover img,.x-feat .feat:hover .feat-m img{transform:scale(1.04)}
.x-news-item .nmedia,.x-news-item .x-media{overflow:hidden}
@media (prefers-reduced-motion:reduce){.x-news-item img,.x-feat .feat-m img{transition:none}}
/* ───── D3 : titres des colonnes Qualité (La Somathes) : 24px comme les autres listes ───── */
.x-qcol-k{font-size:24px}
/* ───── F4 : Distribution, dernière section : 112px en bas comme toutes les sections (l'ancien CSS de la page mettait 72px) ───── */
@media(min-width:768px){.x-sec#partenariat{padding-bottom:112px}}
/* ───── F5 : boutons des sections : même transition partout (l'ancien CSS de Nos métiers n'animait pas la bordure) ───── */
.x-sec .btn{transition:background-color .2s,color .2s,border-color .2s}
#explorer .mtabs{flex-wrap:wrap;row-gap:16px;overflow:visible}
.x-pt-end{flex-wrap:nowrap}
.x-pt-end p{flex:1 1 auto;max-width:300px}
.x-pt-end .btn{flex:none}
@media(max-width:640px){.x-pt-end{flex-wrap:wrap}}
@media(max-width:1600px){#explorer .mtabs{column-gap:28px}}
@media(max-width:767px){#explorer .mtabs{flex-wrap:nowrap;overflow-x:auto}.x-jobs .spont .btn{flex:0 1 auto;max-width:100%}}
/* ───── Liens du site entier (passe du 10 nov. 2026, 2ᵉ tour) ───── */
/* Lien « Toute la gamme… » des méga-menus : le lien du système (.x-link), plus le trait fin et la flèche de l'ancien style */
.mlink{display:inline-block;padding:0;border:0}
.mlink svg{display:none}
.mlink.on{color:var(--x-gold-ink)}
/* Flèche ↗ des liens vers une autre marque ou un autre site (Dahmiss 41022 ↗, Groupe Holmarcom ↗, Somathes ↗, Une marque Somathes, barre du haut) :
   la flèche d'origine est gardée telle quelle (caractère ou tracé) ; au survol du lien elle monte de 2px vers la droite (mouvement des réseaux sociaux d'Actualités) */
/* Flèches ↗ : même effet que l'échange de flèche des .x-link (0.2s), en diagonale : la flèche sort en haut à droite, une copie entre par le bas à gauche (zone rognée). */
@keyframes x-ext-swap{0%{transform:translate(0,0)}50%{transform:translate(1em,-1em)}50.01%{transform:translate(-1em,1em)}100%{transform:translate(0,0)}}
@keyframes x-ext-swap-rtl{0%{transform:translate(0,0)}50%{transform:translate(-1em,-1em)}50.01%{transform:translate(1em,1em)}100%{transform:translate(0,0)}}
body a .x-ext{display:inline-block;overflow:hidden;vertical-align:bottom;font-size:inherit;font-weight:inherit;color:inherit;text-decoration:none}
body a .x-ext i{display:inline-block;font-style:normal}
.ut-dah svg path,.dsom svg path{font-size:16px}
body a:hover .x-ext i,.ut-dah:hover svg path,.dsom:hover svg path{animation:x-ext-swap .2s linear}
[dir="rtl"] body a:hover .x-ext i,[dir="rtl"] .ut-dah:hover svg path,[dir="rtl"] .dsom:hover svg path{animation-name:x-ext-swap-rtl}
@media (prefers-reduced-motion:reduce){body a:hover .x-ext i,.ut-dah:hover svg path,.dsom:hover svg path{animation:none}}
/* Pied de page : liens du bas (mentions, Holmarcom, signature Velix) soulignés d'or au survol, comme les liens du site ; réseaux = mêmes icônes et même taille que Contact */
.ftr-bot a,.ftr a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.ftr-bot a:hover,.ftr a:hover{text-decoration-color:var(--x-gold)}
.ftr-soc{gap:18px!important}
.ftr-soc a{display:inline-flex!important;width:auto!important;height:auto!important;padding:2px;border-radius:0!important}
.ftr-soc a:hover{text-decoration-color:transparent}
.ftr-soc .x-ic{display:block;width:22px;height:22px;fill:currentColor}
.dfb-bot a,.dfoot a{text-decoration-thickness:1px}

/* ═════ Article d'actualité (single.php) ═════ */
/* Héros : titre d'article plus court de ligne (lisible à 1920), surtitre = petites capitales du système (12px / .14em) : rubrique en or, date en blanc */
.single-post .phero .ptitle{max-width:1100px;font-size:clamp(34px,3.4vw,54px);line-height:1.1;text-wrap:balance}
.single-post .art-meta{gap:6px 20px;margin-top:24px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.single-post .art-meta b{font-weight:600;color:var(--x-gold)}
.single-post .art-meta time{color:var(--x-on-deep-2)}
/* Article sans photo : fond vert des surfaces sombres + emblème en filigrane, comme les cartes sans photo des Actualités (.nw-ph) ; jamais la photo générique */
.phero--plain{overflow:hidden;isolation:isolate;background:var(--x-deep)}
.phero--plain .phero-scrim{display:none}
.phero--plain::before{content:"";position:absolute;top:-18%;inset-inline-end:-6%;z-index:-1;width:min(46%,720px);aspect-ratio:1;background:var(--x-on-deep-accent);opacity:.14;-webkit-mask:url("../images/somathes-symbole.webp") center/contain no-repeat;mask:url("../images/somathes-symbole.webp") center/contain no-repeat}
/* Corps : chapeau puis texte dans la colonne de lecture de 720px (règle des pages de texte long) */
.x-art .x-art-lede{max-width:720px;margin-inline:auto;font-size:clamp(20px,1.5vw,23px);line-height:1.55;letter-spacing:-.01em;font-weight:500;color:var(--x-ink);text-wrap:pretty}
.x-art .x-art-lede+.prose{margin-top:40px}
.x-art .prose{color:var(--x-ink)}
.x-art .prose h2{color:var(--x-green)}
/* Mise en page : photo nette + chapeau + texte sur le même bord ; grands écrans (≥1280px) : colonne de gauche collante = table des matières puis autres actualités. Ailleurs : une colonne, actualités sous le texte, table des matières supprimée */
.x-art-main{max-width:820px}
.x-art-fig{margin:0 0 56px;border-radius:20px;overflow:hidden}
.x-art-fig img{display:block;width:100%;height:auto}
.x-art .x-art-lede,.x-art .prose{max-width:none;margin-inline:0}
.x-art-k{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--x-gold-ink)}
.x-toc{display:none}
.x-art-more{margin-top:96px}
.x-art-more-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
.x-art-more .nmeta{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:13px;font-weight:600;color:var(--x-muted);white-space:nowrap}
.x-art-more .nmeta b{color:var(--x-gold-ink)}
.x-art-more .nmedia{display:block;position:relative;aspect-ratio:4/3;height:auto}
.x-art-more .nmedia img{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.x-art-more .x-news-item:hover .nmedia img{transform:scale(1.04)}
.x-art-more .x-news-side .x-news-item{flex:none;align-content:start}
.x-art .prose h2{scroll-margin-top:120px}
@media(min-width:1280px){
  .x-art-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:64px;align-items:start}
  .x-art-side{grid-column:1;grid-row:1}
  .x-art-main{grid-column:2;grid-row:1;justify-self:center;width:100%}
  .x-art-side{position:sticky;top:120px}
  .x-art-more{margin-top:0}
  .x-toc+.x-art-more{margin-top:56px}
  .x-art-more .x-news-item:not(.x-news-item--main){grid-template-columns:96px minmax(0,1fr);gap:16px;padding:18px 0}
  .x-art-more .x-news-t{font-size:15px;line-height:1.35}
  .x-art-more .nmeta{font-size:12px}
  /* Table des matières : liens gris sur une ligne fine ; partie lue = vert + trait or (onglets du site) */
  .x-toc{display:block}
  .x-toc .x-art-k{margin-bottom:16px}
  .x-toc ol{margin:0;padding:0;list-style:none;border-inline-start:1px solid var(--x-line)}
  .x-toc a{position:relative;display:block;padding:8px 0 8px 18px;font-size:14px;line-height:1.4;color:var(--x-muted);transition:color .2s}
  .x-toc a::before{content:"";position:absolute;top:0;bottom:0;inset-inline-start:-1px;width:2px;background:var(--x-gold);transform:scaleY(0);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .x-toc a:hover{color:var(--x-green)}
  .x-toc a.on{color:var(--x-green);font-weight:600}
  .x-toc a.on::before{transform:scaleY(1)}
  [dir=rtl] .x-toc a{padding:8px 18px 8px 0}
}
/* Panneau repliable (grands écrans, comme les barres latérales des sites de lecture) : la colonne passe de 300px à la largeur du bouton, l'article se recentre ; même durée et courbe que les panneaux Nos valeurs (.55s) */
.x-side-btn{display:none}
/* Sous 1280px : une colonne de 820px centrée (article puis autres actualités) ; sur téléphone elle prend toute la largeur */
@media(max-width:1279px){.x-art-main,.x-art-side{max-width:820px;margin-inline:auto}}
@media(min-width:1280px){
  .x-art-grid{transition:grid-template-columns .55s cubic-bezier(.2,.7,.2,1),gap .55s cubic-bezier(.2,.7,.2,1)}
  .x-art-grid.is-folded{grid-template-columns:52px minmax(0,1fr)}
  /* Bouton = flèche ronde des carrousels (.ibtn de Notre vision, 52px) : survol = fond vert comme les flèches de la carte Distribution ; replié = flèche retournée */
  .x-side-btn{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:32px;border-radius:999px;border:1px solid rgba(var(--x-green-rgb),.22);background:var(--x-white);color:var(--x-green);transition:border-color .2s,background-color .2s,color .2s}
  .x-side-btn:hover{border-color:var(--x-deep);background:var(--x-deep);color:var(--x-on-deep)}
  .x-side-btn:focus-visible{outline:2px solid var(--x-gold);outline-offset:3px}
  .x-side-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
  .is-folded .x-side-btn svg{transform:rotate(180deg)}
  .x-art-side{overflow:visible}
  .x-art-side-in{width:300px;transition:opacity .25s,visibility .25s}
  .is-folded .x-art-side-in{opacity:0;visibility:hidden;pointer-events:none}
  [dir=rtl] .x-side-btn svg{transform:scaleX(-1)}
  [dir=rtl] .is-folded .x-side-btn svg{transform:scaleX(-1) rotate(180deg)}
}
@media(prefers-reduced-motion:reduce){.x-art-grid,.x-art-side-in{transition:none!important}}
@media(min-width:1024px) and (max-height:930px){.x-art-side{top:100px}.x-art .prose h2{scroll-margin-top:100px}}
@media(max-width:640px){.x-art-more .x-news-item{grid-template-columns:112px minmax(0,1fr)!important;gap:16px!important}.x-art-fig{margin-bottom:40px}}
@media(prefers-reduced-motion:reduce){.x-toc a::before{transition:none}}

/* ═════ Tablettes et téléphones (passe responsive du 10 nov. 2026) ═════ */
/* ───── En-tête : menu déroulant dès 1220px (Dahmiss : 1200px) au lieu de 1180px ; le bouton du menu n'a plus le mot « Menu » : pictogramme seul, rond
   (hauteur et filet de l'ancien bouton ; son nom reste dans aria-label) ───── */
@media(max-width:1220px){.nav,.hcta,.ut-x{display:none}.burger{display:inline-flex}}
@media(max-width:1200px){.dnav,.dlang,.dsom{display:none}.dburger{display:inline-flex}}
.burger,.dburger{width:46px;padding:0;gap:0;justify-content:center}
/* Le menu s'aligne sur les marges du site (le logo) ; dès 768px, il s'ouvre sous le bouton comme une carte de 20px (420px de large) au lieu de couvrir toute la largeur */
.mnav,.dmnav{padding-inline:var(--x-gutter)}
@media(min-width:768px){
  .mnav{left:auto;right:var(--x-gutter);width:min(420px,calc(100% - 2 * var(--x-gutter)));margin-top:8px;max-height:calc(100vh - 144px);padding:8px 28px 24px;border-top:0;border-radius:20px}
  html.scrolled .mnav{max-height:calc(100vh - 104px)}
  .dmnav{position:absolute;top:100%;right:var(--x-gutter);width:min(420px,calc(100% - 2 * var(--x-gutter)));max-height:calc(100vh - 120px);overflow:auto;margin-top:8px;padding:8px 28px 20px;border-radius:20px;box-shadow:0 40px 80px rgba(var(--x-dah-shade-rgb),.3)}
  .dmnav a:last-child{border-bottom:0}
}
@media(min-width:1024px) and (max-height:930px){
  .mnav{max-height:calc(100vh - 122px)}
  html.scrolled .mnav{max-height:calc(100vh - 88px)}
}
/* ───── Menu déroulant : Somathes, Nos thés et Distribution se déplient (une rubrique à la fois, celle de la page ouverte au départ ; assets/js/site.js).
   Titre de rubrique = mêmes taille et filet que les autres entrées, chevron de la navigation du haut (retourné quand la rubrique est ouverte) ;
   dépliage : durée et courbe des panneaux « Nos valeurs » (0,55 s). ───── */
.mnav .mgrp{border-bottom:1px solid rgba(var(--x-green-rgb),.1)}
.mnav .mg{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin:0;padding:14px 0;font-size:19px;font-weight:600;letter-spacing:normal;line-height:inherit;text-transform:none;text-align:start;color:var(--x-green)}
.mnav .mg svg{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.mnav .mgrp.is-open .mg svg{transform:rotate(180deg)}
.mnav .msub{display:grid;grid-template-rows:0fr;padding:0;border-bottom:0;visibility:hidden;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1),visibility 0s .55s}
.mnav .mgrp.is-open .msub{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.mnav .msub-in{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.mnav .msub-in a:last-child{margin-bottom:14px}
@media (prefers-reduced-motion:reduce){.mnav .msub,.mnav .mg svg{transition:none}}
/* ───── Onglets qui défilent sur téléphone (Distribution, Actualités, Carrière, Nos métiers, Nos thés) : défilement de gauche à droite seulement
   (le trait doré, posé 1px sous l'onglet, faisait aussi défiler en hauteur) ; filet gris en ombre intérieure pour rester sous les onglets ;
   14px sous le texte au lieu de 22px. ───── */
@media(max-width:767px){
  .x-tabs,#explorer .mtabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;border-bottom:0;box-shadow:inset 0 -1px 0 var(--x-line)}
  .x-tabs::-webkit-scrollbar,#explorer .mtabs::-webkit-scrollbar{display:none}
  .x-tab,#explorer .mtabs .mtab{flex:none;padding-bottom:14px;font-size:16px}
  .x-tab::after,#explorer .mtabs .mtab::after{bottom:0}
  .x-tab:focus-visible{outline-offset:-2px}
}
/* ───── Nos métiers, « Toute la chaîne de valeur » : sur tablette et téléphone, la ligne continue reste et la chaîne défile de gauche à droite
   (au lieu de deux colonnes sans ligne) ; défilement des cartes « De la feuille au rayon » de l'accueil (bord à bord, arrêt sur chaque étape) ───── */
@media(max-width:960px){
  .vc-scroll{margin-inline:calc(-1 * var(--x-gutter));padding:8px var(--x-gutter) 4px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--x-gutter);scrollbar-width:none;view-timeline-name:--vc}
  .vc-scroll::-webkit-scrollbar{display:none}
  .vc{width:max-content;margin-top:28px;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(150px,40vw,200px);gap:0;view-timeline-name:none}
  .vc::before{display:block}
  .vc li{scroll-snap-align:start}
}
/* Notre histoire, la frise des dates (1958 → Aujourd'hui) : même composant, même traitement dès 900px (sa ligne reste, elle défile de gauche à droite) */
@media(max-width:900px){
  .frise-scroll{margin-inline:calc(-1 * var(--x-gutter));padding:0 var(--x-gutter) 4px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--x-gutter);scrollbar-width:none;view-timeline-name:--fr}
  .frise-scroll::-webkit-scrollbar{display:none}
  .frise{width:max-content;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(150px,40vw,200px);gap:0;view-timeline-name:none}
  .frise::before{display:block}
  .frise a{scroll-snap-align:start}
}
/* ───── Distribution, les quatre chiffres : un par ligne sur les très petits écrans (300px et moins) ───── */
@media(max-width:300px){.x-cov-n{grid-template-columns:1fr}}
/* ───── Listes déroulantes des formulaires (Contact « Votre demande concerne », Carrière « Domaine ») : liste du site (assets/js/site.js) au lieu de la liste native.
   Champ = celui d'avant (trait bas, texte vert en gras, chevron retourné à l'ouverture) ; liste = carte blanche de 20px, choix survolé sur fond papier. ───── */
.x-sel{position:relative}
.x-sel-b{display:block;width:100%;height:38px;padding:0 28px 0 0;border-bottom:1px solid var(--x-dot);font-size:16px;font-weight:600;line-height:37px;color:var(--x-green);text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:none;transition:border-color .2s}
.x-contact .x-sel-b{height:44px;line-height:43px;font-size:17px;border-bottom-color:var(--x-line)}
[dir="rtl"] .x-sel-b{padding:0 0 0 28px}
.x-sel-b:focus-visible,.x-sel-b[aria-expanded="true"]{border-bottom-color:var(--x-green)}
.fld:has(.x-sel)::after{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fld:has(.x-sel-b[aria-expanded="true"])::after{transform:translateY(5px) rotate(225deg)}
.x-sel-list{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;max-height:340px;margin:0;padding:8px;overflow-y:auto;list-style:none;border-radius:20px;background:var(--x-white);box-shadow:0 24px 48px rgba(var(--x-green-rgb),.14),0 0 0 1px rgba(var(--x-green-rgb),.06);outline:none;animation:x-sel-in .2s cubic-bezier(.2,.7,.2,1)}
.x-sel-list li{padding:12px 16px;border-radius:12px;font-size:16px;line-height:1.4;color:var(--x-muted);cursor:pointer;transition:background-color .2s,color .2s}
.x-sel-list li.is-act{background:var(--x-paper);color:var(--x-green)}
.x-sel-list li[aria-selected="true"]{font-weight:600;color:var(--x-green)}
@keyframes x-sel-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.x-sel-list{animation:none}.x-contact .fld:has(select)::after{transition:none}}
/* ───── Pied de page, tablette et téléphone ─────
   Haut : 1000px et moins : présentation + Contact sur la 1re ligne, Somathes / Nos thés / Distribution sur la 2e (au lieu d'une colonne Contact seule) ;
   560px et moins : présentation pleine largeur, puis les listes deux par deux.
   Bas : 1re ligne = liens (Mentions légales, Holmarcom, ISO), plus clairs ; 2e ligne = © à gauche, signature Velix à droite
   (l'une sous l'autre sur téléphone), au lieu d'éléments renvoyés à la ligne au hasard. */
@media(max-width:1000px){
  .ftr-top{grid-template-columns:repeat(6,minmax(0,1fr));gap:48px 24px}
  .ftr-top>div{grid-column:span 2}
  .ftr-top>div:first-child{grid-column:1/4}
  .ftr-top>div:last-child{grid-column:4/7;grid-row:1}
  .ftr-bot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:8px 24px}
  .ftr-bot>div{display:contents!important}
  .ftr-bot>div>*{order:1;color:rgba(var(--x-white-rgb),.76)}
  .ftr-bot::after{content:"";order:2;flex-basis:100%;height:4px}
  .ftr-bot>p{order:3;margin-inline-end:auto}
  .ftr-bot>div>.ftr-by{order:4;color:inherit}
}
/* Téléphone : listes deux par deux ; la 2e colonne (Nos thés, Contact) garde au moins la largeur de l'adresse e-mail, qui ne se coupe jamais au milieu */
@media(max-width:560px){
  .ftr-top{grid-template-columns:minmax(0,1fr) minmax(min-content,1.1fr);gap:40px 16px}
  .ftr-top>div,.ftr-top>div:last-child{grid-column:auto;grid-row:auto}
  .ftr-top>div:first-child{grid-column:1/-1}
  .ftr-bot>p{flex-basis:100%}
}
/* ───── Système d'espacement des téléphones (767px et moins) : une seule échelle pour toutes les pages, comme 112 / 56 sur grand écran ─────
   --m-sec   64px  haut et bas de chaque section (deux sections de même fond ne doublent toujours pas l'espace)
   --m-block 48px  entre deux grandes parties d'une même section (texte puis chiffres, liste puis photo…)
   --m-head  32px  titre de section → contenu ; entre deux éléments d'une liste ; photo d'une section → son texte
   --m-act   24px  texte → lien ou bouton ; marge des cartes ; onglets → contenu
   --m-text  16px  titre → texte ; paragraphe → paragraphe ; photo d'une carte → son texte
   --m-stack 12px  entre deux cartes empilées ; petit libellé doré → titre ; deux boutons empilés
   --m-tight  8px  titre d'un élément → son texte
   Grands blocs (vert, ambre, papier) : 40px 24px, arrondi 20px. Cartes : 24px. Photos seules : 4:3. Cartes à texte sur photo : 400px de haut.
   En-tête de page (.phero) : 520px sur toutes les pages, texte à 48px du bas. */
@media(max-width:767px){
  :root{--m-sec:64px;--m-block:48px;--m-head:32px;--m-act:24px;--m-text:16px;--m-stack:12px;--m-tight:8px}

  /* Sections, titres de section, textes d'introduction */
  body .x-sec,body .sec{padding-top:var(--m-sec);padding-bottom:var(--m-sec)}
  body .x-sec--flush{padding-top:0}
  body .x-head,body .x-news-all .x-head{gap:var(--m-text);margin-bottom:var(--m-head)}
  body .x-head-r{gap:var(--m-act)}
  body .x-head-r .x-lead+.x-lead{margin-top:calc(var(--m-text) - var(--m-act))}
  body .x-head .kick{margin-bottom:var(--m-stack)}
  body .hook{gap:var(--m-text)}
  body .hook-p+.hook-p{margin-top:var(--m-text)}
  body .x-tabs{margin-bottom:var(--m-act)}

  /* En-têtes de page : même hauteur partout */
  body .phero{min-height:520px}
  body .phero-in{padding-top:150px;padding-bottom:48px}

  /* Grands blocs et cartes */
  body .x-dah,body .x-pt,body .x-fol,body .x-app,body .x-contact .ccard,body .x-iso,body .x-award-band,body .x-vq,body .x-feat .feat,body .x-ctab-card,body .amb-col,body .dfb-card{border-radius:20px}
  body .x-dah,body .x-pt,body .x-fol,body .x-app{padding:40px 24px}
  body .x-contact .fcard,body .x-contact .ccard,body .x-pt .form,body .x-team,body .x-tile,body .x-tile--big,body .x-range .x-tile,body .x-svc,body .x-jobs .spont,body .amb-col,body .x-fam-card,body .x-feat .feat-b{padding:24px}
  body .x-award-body{padding:32px 24px 40px}

  /* Accueil */
  body .x-duo{gap:var(--m-block)}
  body .x-duo-item{gap:var(--m-tight)}
  body .x-media--duo{margin-bottom:var(--m-tight)}
  body .x-duo-item .x-more{margin-top:var(--m-text)}
  body .x-bento{gap:var(--m-stack)}
  body .dist{gap:var(--m-block)}
  body .dist .lead{margin-top:var(--m-text)!important}
  body .dist .x-actions{margin-top:var(--m-act)!important;gap:var(--m-text) 28px}
  body .dist+div{margin-top:var(--m-block)!important}
  body .dist+div>p{margin-bottom:var(--m-text)!important}
  body .x-dah-t{margin-top:var(--m-stack)}
  body .x-btn-brown,body .x-dah-note{margin-top:var(--m-act)}
  body .x-news-item{gap:var(--m-text)}
  body .x-news-body{gap:var(--m-tight)}
  body .x-news-item--main .btn{margin-top:var(--m-text)}

  /* La Somathes */
  body .x-hist .tl{margin-top:var(--m-head)}
  body .tl-t{margin-top:var(--m-stack)}
  body .tl-p+.tl-p{margin-top:var(--m-text)}
  body .x-vals{gap:var(--m-stack)}
  body .vis{gap:var(--m-head)}
  body .vis .quote{margin-top:var(--m-text)}
  body .vis .lead{margin-top:var(--m-text)!important}
  body .vis .x-link{margin-top:var(--m-act)!important}
  body .x-award-media{min-height:0;aspect-ratio:4/3}
  body .x-award-t{margin-top:var(--m-act)}
  body .x-qcols{gap:var(--m-head);margin-top:var(--m-block)}

  /* Notre histoire */
  body .frise{margin-top:var(--m-block)}
  body .x-fil-step{row-gap:var(--m-text)}
  body .x-fil-step+.x-fil-step{margin-top:var(--m-block)}
  body .x-fil-m{min-height:400px;padding:24px}
  body .close-q{margin-top:var(--m-stack)}
  body .close-s{margin-top:var(--m-act)}

  /* Nos métiers */
  body .vc-t{margin-top:var(--m-block);padding-top:var(--m-head)}
  body .vc{margin-top:var(--m-act)}
  body .mp{margin-top:var(--m-act);gap:var(--m-head)}
  body .mp-img{min-height:0;aspect-ratio:4/3}
  body .mp-intro{margin-top:var(--m-text)}
  body .mp-blocks{margin-top:var(--m-head);gap:var(--m-head)}
  body .mp-chips{margin-top:var(--m-head)}
  body .hum2{gap:var(--m-head)}
  body .hum2-img{height:auto;aspect-ratio:4/3}
  body .hum2-q{margin-top:var(--m-act)}
  body .hum2 .btn{margin-top:var(--m-act)}

  /* Nos valeurs, Qualité, Nos thés, La Somathes : liste à une valeur ouverte (.x-vx) */
  body .x-vx-m{min-height:400px;margin-bottom:var(--m-act);padding:24px}
  body .x-vx-txt{padding-bottom:var(--m-act)}
  body .x-vx-cta{margin-top:var(--m-head)}
  body .x-vq{padding:240px 24px 24px}
  body .x-vq-row{gap:var(--m-act)}

  /* Notre vision */
  body .tri{margin-top:var(--m-head);gap:var(--m-stack)}
  body .tp{min-height:400px}
  body .amb{gap:var(--m-text)}

  /* Qualité et certifications */
  body .x-qeq{gap:var(--m-head)}
  body .x-qend{margin-top:var(--m-head)}
  body .x-iso{margin-top:64px;padding:0 24px 40px}
  body .conf{gap:var(--m-head)}
  body .conf-img{height:auto;aspect-ratio:4/3}
  body .aw{gap:var(--m-block)}

  /* Nos thés */
  body .x-fam-card{padding:32px 24px}
  body .x-range{gap:var(--m-stack)}
  body .x-range-more{gap:var(--m-head);margin-top:var(--m-block)}

  /* Distribution */
  body .x-cov-top{gap:var(--m-block)}
  body .x-cov{margin-top:var(--m-block);gap:var(--m-block)}
  body .x-cov-n{gap:var(--m-head) 24px}
  body .x-cov-l{gap:var(--m-head)}
  body .x-svcs{gap:var(--m-stack)}
  body .x-svc{min-height:400px}
  body .x-why{gap:var(--m-head)}
  body .x-pt-s{gap:var(--m-head)}

  /* Actualités */
  body .x-news-all .ngrid{gap:var(--m-block)}
  body .x-news-more{margin-top:var(--m-block)}
  body .x-feat .feat-m{min-height:0;aspect-ratio:4/3}

  /* Carrière */
  body .x-gr-strip{gap:var(--m-stack)}
  body .x-gr-strip figure{height:auto;aspect-ratio:4/3;padding:24px}
  body #pourquoi.x-sec .why-l{gap:var(--m-head)}

  /* Compléments (styles en ligne de la maquette : !important obligatoire pour les remplacer) */
  body .x-hist .tl{gap:var(--m-text)}
  body .x-fil-txt p{margin-top:var(--m-tight)}
  body .x-fil-txt p+p{margin-top:var(--m-text)}
  body .hum2 .hook-p{margin-top:var(--m-text)!important}
  body .hum2 .btn{margin-top:var(--m-act)!important}
  body .x-car-ctl{margin-top:var(--m-act)}
  body .conf .x-lead{margin-top:var(--m-text)!important}
  body .aw .x-lead{margin-top:var(--m-text)}
  body .x-qaw-link{margin-top:var(--m-act)}
  body .x-fam-top{gap:var(--m-stack)}
  body .x-fam-card{gap:var(--m-head)}
  body .x-range{margin-top:var(--m-act)}
  body .x-dah-facts{margin-top:var(--m-act)}
  body .x-cov-top .x-lead,body .x-pt .x-lead,body .x-fol .x-lead,body .x-app .x-lead{margin-top:var(--m-text)}
  body .x-team-t{margin-bottom:var(--m-act)}
  body .x-net{padding:24px}
  body .x-pt-s{margin-top:var(--m-head)}
  body .x-sec#partenariat{padding-bottom:var(--m-sec)}
  body .x-news-all .x-tabs{margin-bottom:var(--m-act)}
  body .x-news-all .nw-b{padding-top:var(--m-text)}
  body .x-news-all .nw h3,body .x-news-all .nw-x{margin-top:var(--m-tight)}
  body .x-news-all .x-more{margin-top:var(--m-text)}
  body .x-feat-k{margin-bottom:var(--m-stack)}
  body .x-feat .feat h2{margin-top:var(--m-stack)}
  body .x-feat .feat-x{margin-top:var(--m-text)}
  body .x-feat .btn{margin-top:var(--m-act)}
  body .x-gr .x-head-r .x-lead+.x-lead{margin-top:calc(var(--m-text) - var(--m-act))}
  body #pourquoi.x-sec .why-media{min-height:400px}
  body #pourquoi.x-sec .why-l{margin-top:var(--m-head)}
  body .x-jobs .spont{margin-top:var(--m-block);gap:var(--m-act)}
  body .why{gap:var(--m-head)}
  body .x-fol .nl{margin-top:var(--m-head)}
  body .x-fol-mail{margin-top:var(--m-act)}
  body .x-app .steps{gap:var(--m-head);margin-top:var(--m-head)}
  body .x-contact-dl{margin-top:var(--m-act)}
  body .x-contact-links{margin-top:var(--m-act)}
  body .x-contact .acard ul{margin-top:var(--m-text)}
  body .x-contact .acard .x-link{margin-top:var(--m-act)}
  /* Dahmiss (les écarts de la maquette sont en ligne : !important) */
  body.sm-dahmiss .h2+.lead{margin-top:var(--m-text)!important}
  body .sav-top .h2{margin-top:var(--m-act)!important}
  body .taste,body .sav-top,body .intl{gap:var(--m-head)}
  body .taste-img{min-height:0;aspect-ratio:4/3}
  body .notes{margin-top:var(--m-head)}
  body .crit-k,body .gal{margin-top:var(--m-block)}
  body .gal{gap:var(--m-stack)}
  body .gal figure{height:auto;aspect-ratio:4/3}
  body .ev{margin-top:var(--m-head)}
  body .evp{border-radius:20px}
  body .evp-b{padding:24px}
  body .evp-b p{margin-top:var(--m-tight)}
  body .notes+p{margin-top:var(--m-act)!important}
  body .sport--ph .sport-in{padding-bottom:var(--m-sec)}
  body .sport-t{margin-top:var(--m-stack)}
  body .sport-s,body .sport-p{margin-top:var(--m-text)}
  body .intl-img{height:400px}
  body .dfb .wrap{padding-top:var(--m-sec)}
  body .dfb-card{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--m-head) 24px;padding:40px 24px}
  body .dfb-card>div:first-child{grid-column:1/-1}
  body .dfb-act{margin-top:var(--m-act)}
  body .dfb-logo{margin:var(--m-block) 0 var(--m-head)}

  /* Pied de page */
  body .ftr-top{padding:var(--m-sec) 0 var(--m-block)}
  body .ftr-h,body .ftr h4{margin-bottom:var(--m-text)}
  body .ftr-bot,body .dfb-bot{padding:var(--m-act) 0 32px}
}
/* Barre du bas du pied de page Dahmiss : même construction que celle du site (liens sur la 1re ligne, © puis signature sur la 2e) */
@media(max-width:1000px){
  .dfb-bot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:8px 24px}
  .dfb-bot .dfb-legal{display:contents}
  .dfb-bot .dfb-legal>*{order:1;color:rgba(var(--x-cream-rgb),.76)}
  .dfb-bot::after{content:"";order:2;flex-basis:100%;height:4px}
  .dfb-bot>p{order:3;margin-inline-end:auto}
  .dfb-bot .dfb-legal>a:last-child{order:4;color:inherit}
}
@media(max-width:560px){.dfb-bot>p{flex-basis:100%}}
/* Très petits écrans (300 à 360px) : rien ne dépasse de la page (couverture de Distribution, dates des actualités de l'accueil, devise de Qualité) */
@media(max-width:1100px){.x-cov{grid-template-columns:minmax(0,1fr)}}
@media(max-width:360px){.x-news-item:not(.x-news-item--main){grid-template-columns:88px minmax(0,1fr)}.x-news .nmeta{flex-wrap:wrap}.x-qvx .x-qend{min-width:0;max-width:100%}}
@media(max-width:400px){body .x-qend{display:flex;flex-wrap:wrap;column-gap:.3em;max-width:100%}body .x-qend span+span{margin-inline-start:0}body .x-pt-end .btn{max-width:100%;height:auto;min-height:54px;padding-block:14px;white-space:normal;text-align:center}}

/* ───── Accueil, Nos marques : lien « Voir la gamme » sous le nom arabe des cartes photo ─────
   Écrans tactiles : toujours visible (sinon rien n'indique que la carte est cliquable).
   Souris : place réservée (aucun saut de mise en page), le lien apparaît au survol avec le fondu du texte de Nos valeurs (.25s / .4s) et la flèche qui s'échange (.2s). */
.x-tile-more{align-self:flex-start;margin-top:16px;color:var(--x-white)}
.x-bento--photo .x-tile:hover .x-tile-more::after,.x-bento--photo .x-tile:focus-visible .x-tile-more::after{animation:x-arrow-swap .2s linear forwards}
@media(hover:hover) and (pointer:fine){
  .x-tile-more{opacity:0;transform:translateY(6px);transition:opacity .25s,transform .4s cubic-bezier(.2,.7,.2,1)}
  .x-bento--photo .x-tile:hover .x-tile-more,.x-bento--photo .x-tile:focus-visible .x-tile-more{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.x-tile-more{transition:none;transform:none}}

/* ───── Dahmiss, galerie « Saveur de l'Année » ─────
   Téléphones : une photo par ligne (les 2e et 3e photos côte à côte étaient trop petites).
   Clic sur une photo = la photo en grand, dans la fenêtre de la vidéo du héros de l'accueil (.vmodal : fond flouté .35s, boîte qui monte .5s, croix ronde 40px,
   petit titre en capitales au-dessus), aux couleurs brunes de Dahmiss ; dessous, la ligne des carrousels : « 1 / 3 » + flèches rondes 52px.
   Photo cliquable = zoom 1.04 au survol (règle des cartes cliquables). */
.gal-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal-open img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gal figure:hover .gal-open img{transform:scale(1.04)}
.gal-open:focus-visible{outline:2px solid var(--x-gold);outline-offset:-4px;border-radius:20px}
.glb{--glb-p:clamp(20px,3.5vw,48px);position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--glb-p)}
.glb[hidden]{display:none}
.glb-bg{position:absolute;inset:0;background:rgba(var(--x-dah-shade-rgb),.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s}
.glb-box{position:relative;display:flex;flex-direction:column;opacity:0;transform:translateY(18px) scale(.98);transition:opacity .4s cubic-bezier(.19,1,.22,1),transform .5s cubic-bezier(.19,1,.22,1)}
.glb.open .glb-bg,.glb.open .glb-box{opacity:1}
.glb.open .glb-box{transform:none}
.glb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.glb-cap{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--x-amber)}
.glb-img{display:block;width:auto;height:auto;max-width:min(1600px,calc(100vw - 2 * var(--glb-p)));max-height:calc(100svh - 2 * var(--glb-p) - 130px);border-radius:20px;box-shadow:0 40px 80px -30px rgba(var(--x-dah-shade-rgb),.8)}
.glb-ctl{display:flex;align-items:center;gap:12px;margin-top:24px}
.glb-n{margin-inline-end:auto;font-size:14px;font-weight:600;color:rgba(var(--x-cream-rgb),.76);font-variant-numeric:tabular-nums}
.glb-close,.glb-btn{flex:none;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(var(--x-cream-rgb),.35);background:none;color:var(--x-cream);display:grid;place-items:center;cursor:pointer;transition:background-color .3s,color .3s}
.glb-btn{width:52px;height:52px}
.glb-close svg,.glb-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.glb-close:hover,.glb-btn:hover{background:var(--x-cream);color:var(--x-brown)}
.glb-close:focus-visible,.glb-btn:focus-visible{outline:2px solid var(--x-gold);outline-offset:3px}
[dir="rtl"] .glb-btn svg{transform:scaleX(-1)}
@media(max-width:767px){body .gal{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.gal-open img,.glb-bg,.glb-box{transition:none}.glb-box{transform:none}}

/* ═════ Notre histoire · voile des cartes sur téléphone ═════ */
/* Sur téléphone, le texte occupe la moitié (ou plus) de la carte : le voile « bas seulement » (.x-flow-item) ne couvre plus le texte.
   On reprend le voile pleine carte des cartes photo « Nos marques » de l'accueil (.88 / .7 / .8), comme les panneaux Nos valeurs sur téléphone.
   1993 et 2006 gardent le voile du bureau : leur contraste est déjà bon. */
@media(max-width:767px){
  .x-fil-step:not(#t1993):not(#t2006) .x-fil-m::after{background:linear-gradient(180deg,rgba(var(--x-deep-veil),.88) 0%,rgba(var(--x-deep-veil),.7) 50%,rgba(var(--x-deep-veil),.8) 100%)}
}

/* ───── Accueil : petit label doré en haut des diapositives du héros, sur téléphone ─────
   11,5px avec .24em d'espacement occupait toute la largeur (trop présent, demande de l'utilisateur 2026-11-10) :
   plus petit et même espacement que les petits labels du site (.14em). */
@media(max-width:767px){
  #hero .hero-kicker{font-size:10px;letter-spacing:.14em}
  #hero .hero-kicker::after{width:40px;margin-top:14px}
}

/* ───── Repères « + / − » des listes qui se déplient (utilisateur, 2026-11-10) ─────
   Sur téléphone et tablette (≤900px), la liste .x-vx (La Somathes Métiers, Nos valeurs, Qualité, Nos thés MDD) devient un accordéon :
   sans repère, rien ne dit que les titres s'ouvrent. On reprend le rond des offres de Carrière (44px, filet clair, vert plein une fois ouvert)
   et on y met un « + » qui devient « − » à l'ouverture (le trait vertical se replie). Carrière passe au même « − » (au lieu de la croix tournée de 45°). */
.x-vx-b::after,.x-jobs .job-ic::before{background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);background-position:50% 50%,50% 50%;background-size:14px 2px,2px 14px;background-repeat:no-repeat;transition:background-size .3s cubic-bezier(.2,.7,.2,1),background-color .3s,border-color .3s,color .3s}
.x-jobs .job-ic{transform:none!important}
.x-jobs .job-ic svg{display:none}
.x-jobs .job-ic::before{content:"";width:14px;height:14px}
.x-jobs .job-h[aria-expanded="true"] .job-ic::before{background-size:14px 2px,2px 0}
@media(max-width:900px){
  .x-vx-b{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .x-vx-b::after{content:"";flex:none;width:44px;height:44px;border:1px solid var(--x-line);border-radius:999px;color:var(--x-green)}
  .x-vx-i.is-on .x-vx-b::after{background-color:var(--x-deep);border-color:var(--x-deep);color:var(--x-on-deep);background-size:14px 2px,2px 0}
}
@media (prefers-reduced-motion:reduce){.x-vx-b::after,.x-jobs .job-ic::before{transition:none}}
/* ═════ Recherche et page introuvable (nov. 2026) ═════ */
/* Héros = photo réelle service-the-marocain (repli : .phero--plain). Colonne de 820px centrée (colonne des articles).
   Formulaire = carte claire des formulaires du site (papier, 20px, champ souligné, envoi btn-dark à droite).
   Résultats = lignes des actualités de l'accueil (.x-news-side), comme la liste « Actualités » des articles. */
.x-find-in{max-width:820px;margin-inline:auto}
.x-find-f{display:flex;align-items:flex-end;gap:24px 32px;padding:40px;border-radius:20px;background:var(--x-paper)}
.x-find-f .fld{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.x-find-f label{font-size:13px;font-weight:500;color:var(--x-muted)}
.x-find-f input{width:100%;height:44px;padding:0;border:0;border-bottom:1px solid var(--x-line);border-radius:0;background:transparent;font:inherit;font-size:17px;font-weight:600;color:var(--x-green);outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s}
.x-find-f input:focus{border-bottom-color:var(--x-green)}
.x-find-f .btn{flex:none}
.x-find-list{margin-top:56px}
.x-find .x-news-side .x-news-item{flex:none;align-content:start}
.x-find .nmeta{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:13px;font-weight:600;color:var(--x-muted)}
.x-find .nmeta b{color:var(--x-gold-ink)}
.x-find .nmedia{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--x-placeholder)}
.x-find .nmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.x-find .x-news-item:hover .nmedia img{transform:scale(1.04)}
.x-find-x{font-size:15px;line-height:1.6;color:var(--x-muted)}
.x-find-none{margin-top:56px;font-size:17px;color:var(--x-muted)}
.x-find-pager{display:flex;justify-content:space-between;gap:16px;margin-top:40px}
@media(max-width:767px){
  .x-find-f{flex-direction:column;align-items:stretch;padding:var(--m-act)}
  .x-find-f .btn{align-self:flex-start}
  .x-find-list,.x-find-none{margin-top:var(--m-head)}
  .x-find .nmeta{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.x-find .nmedia img{transition:none}}