/* ==========================================================================
   DISTRI-COM.FR — CALQUE FRANÇAIS
   Se pose PAR-DESSUS socle-us.css, qui est la feuille du site américain
   copiée telle quelle. On ne touche jamais au socle : quand l'équipe fait
   une mise à jour graphique sur exhibiz.us, il suffit de recopier son
   fichier et le site français en hérite.

       cp ../../exhibiz.us/v3/assets/site.css assets/socle-us.css

   Ici, uniquement : la couleur de marque française, et les quelques blocs
   qui n'existent pas sur le site américain (barre des marques, espace
   revendeurs, calculateur, catalogue, questions fréquentes).
   ========================================================================== */

/* ---------- Bleu de la marque française ----------
   Le logo Distri-Com est en #009EE0, un cran plus vif que le bleu du site
   américain. En thème sombre on garde le bleu éclairci du socle, qui passe
   le contraste sur fond noir. */
:root:not([data-theme="dark"]) { --blue: #009EE0; --blue-hi: #33B4E8; }

/* ---------- Bandeau de maquette ---------- */
.demo { background: var(--navy); color: #F6F3EC; font-size: 13px; padding: 9px var(--gut); display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }
[data-theme="dark"] .demo { background: #1B2230; color: var(--ink); }
.demo b { font-weight: 700; }
.demo button { border: 1px solid currentColor; border-radius: 999px; padding: 4px 14px; font-size: 12px; font-weight: 600; opacity: .9; }
.demo button:hover { opacity: 1; }

/* ---------- Les marques du groupe, sous le héros ----------
   Propre au site français : c'est le site général, les huit sociétés doivent
   être lisibles avant le premier défilement. */
.marques { background: var(--panel); border-bottom: 1px solid var(--line); }
.marques-in { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px,3vw,44px); align-items: center;
  /* le raccourci padding efface les marges latérales de .wrap : on les redonne */
  padding: clamp(18px,2vw,26px) var(--gut); }
.marques-t { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); max-width: 15ch; line-height: 1.5; }
.marques-l { display: flex; align-items: center; gap: clamp(16px,2.4vw,38px); flex-wrap: wrap; }
.marques-l a { font: 700 italic clamp(17px,1.7vw,23px)/1 var(--disp); text-transform: uppercase; color: var(--ink); transition: color .2s; display: inline-flex; align-items: baseline; gap: 7px; }
.marques-l a:hover { color: var(--blue); }
.marques-l a small { font: 500 10.5px/1 var(--font); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.marques-l .sep { width: 1px; height: 22px; background: var(--line); }

/* ---------- Compléments aux blocs du socle ---------- */

/* La carte inversée du socle s'appelle .t3 : on l'emploie telle quelle pour
   le polystyrène aussi, avec le média à droite. */
.t3.flip { grid-template-columns: 1fr 1.05fr; }
.t3.flip .t3-media { order: 2; }
@media (max-width: 1240px) { .t3.flip { grid-template-columns: 1fr; } .t3.flip .t3-media { order: 0; } }

/* La marque à laquelle appartient un métier, en haut de la vignette */
.door-sig { position: absolute; top: 15px; right: 15px; z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px); color: #fff; padding: 5px 10px; border-radius: 999px; }

/* Les sociétés du groupe ont une ville, que le site américain n'affiche pas */
.ent .lieu { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); display: block; margin: -4px 0 12px; }
.ent.me .lieu { color: var(--acc); }

/* Fiche métier : des couples intitulé / valeur */
.sheet-li { list-style: none; padding: 0; margin: 22px 0; }
.sheet-li li { padding: 13px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; display: flex; gap: 16px; }
.sheet-li li b { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); min-width: 120px; flex: none; }
@media (max-width: 560px) { .sheet-li li { flex-direction: column; gap: 4px; } }

/* ==========================================================================
   PAGES INTÉRIEURES
   ========================================================================== */

/* Héros de page intérieure, avec photo. Le site américain n'en a pas : sa
   page T3 démarre sur le fond de page. */
.tete-page { position: relative; overflow: hidden; background: var(--ink); }
.tete-page-bg { position: absolute; inset: 0; }
.tete-page-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.tete-page-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(6,9,14,.9) 0%, rgba(6,9,14,.55) 70%, rgba(6,9,14,.35) 100%); }
.tete-page-in { position: relative; z-index: 2; padding: clamp(52px,6vw,96px) var(--gut) clamp(44px,5vw,76px); }
.tete-page .display { color: #fff; max-width: 18ch; }
.tete-page .display em { color: var(--lime); }
.tete-page .sec-tag { color: var(--lime); }
.tete-page .sec-tag::after { background: rgba(255,255,255,.22); }
.tete-page p { color: rgba(255,255,255,.84); font-size: clamp(16px,1.5vw,19px); max-width: 58ch; margin: 18px 0 26px; }

/* ---------- Espace revendeurs : les niveaux ---------- */
.paliers { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.paliers li { background: var(--panel); padding: 15px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.paliers b { font-size: 15px; font-weight: 600; min-width: 130px; }
.paliers em { font-style: normal; font: 700 italic 21px/1 var(--disp); color: var(--blue); }
.paliers span { font-size: 13px; color: var(--muted); margin-left: auto; text-align: right; }
@media (max-width: 640px) { .paliers span { margin-left: 0; text-align: left; width: 100%; } }

.niveaux { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.niveaux button { padding: 10px 20px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: all .18s; }
.niveaux button:hover { border-color: var(--blue); color: var(--blue); }
.niveaux button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ---------- Encart revendeurs de l'accueil ---------- */
.rev { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.rev-in { background: var(--panel); padding: clamp(26px,3vw,46px); }
.rev-side { background: var(--panel-2); padding: clamp(26px,3vw,40px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.rev-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 20px; display: flex; gap: 16px; align-items: flex-start; }
.rev-card img { width: 78px; height: 78px; object-fit: cover; flex: none; border-radius: 10px; background: var(--panel-2); }
.rev-card h4 { font-size: 15.5px; margin: 0 0 3px; }
.rev-card p { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.rev-tar { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--muted); }
.rev-tar b { font: 700 italic 22px/1 var(--disp); color: var(--blue); }
@media (max-width: 1240px) { .rev { grid-template-columns: 1fr; } }

/* ---------- Le chiffrage en direct ----------
   Attention : le socle utilise déjà .calc pour les cartes « calculateur »
   de sa boutique. D'où .chiffrage ici, pour ne pas se marcher dessus. */
.chiffrage { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; align-items: start; }
.chiffrage-f { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px,2.6vw,34px); }
.chiffrage-g { display: grid; grid-template-columns: repeat(3,1fr); gap: 0 16px; margin-top: 22px; }
.chiffrage-g .half { grid-column: span 2; }
@media (max-width: 720px) { .chiffrage-g { grid-template-columns: 1fr 1fr; } .chiffrage-g .half { grid-column: 1 / -1; } }
@media (max-width: 980px) { .chiffrage { grid-template-columns: 1fr; } }

.tick { position: sticky; top: 100px; background: var(--ink); color: var(--bg); border-radius: var(--r); padding: clamp(22px,2.4vw,30px);
  --acc: var(--lime); --acc-on: #101828; }
[data-theme="dark"] .tick { --acc: #0487C0; --acc-on: #FFFFFF; }
.tick h4 { font: 700 italic 20px/1 var(--disp); text-transform: uppercase; color: var(--bg); margin: 0 0 4px; }
.tick .niveau { font-size: 12px; color: color-mix(in srgb, var(--bg) 60%, transparent); margin: 0 0 20px; }
.prix { font: 800 italic clamp(38px,4.6vw,58px)/1 var(--disp); color: var(--acc); letter-spacing: -.01em; }
.prix-u { font-size: 13px; color: color-mix(in srgb, var(--bg) 62%, transparent); margin: 4px 0 0; }
.detail { list-style: none; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid color-mix(in srgb, var(--bg) 20%, transparent); }
.detail li { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; padding: 6px 0; color: color-mix(in srgb, var(--bg) 74%, transparent); }
.detail li b { font-weight: 600; color: var(--bg); white-space: nowrap; }
.detail li.tot { border-top: 1px solid color-mix(in srgb, var(--bg) 20%, transparent); margin-top: 10px; padding-top: 14px; font-size: 15px; color: var(--bg); }
.detail li.rem b { color: var(--acc); }
.tick .btn { width: 100%; margin-top: 20px; }
.tick .btn.p { background: var(--acc); border-color: var(--acc); color: var(--acc-on); }
.tick .btn.p:hover { background: #fff; border-color: #fff; color: #101828; }
.tick .mini { color: color-mix(in srgb, var(--bg) 52%, transparent); margin: 14px 0 0; }
@media (max-width: 980px) { .tick { position: static; } }

/* ---------- Extrait du catalogue T3 ---------- */
.cat-out { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cat-h { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.cat-h input { flex: 1; min-width: 200px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; font-size: 14px; }
.cat-h input:focus { outline: none; border-color: var(--blue); }
.cat-h select { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px; font-size: 14px; }
table.cat { width: 100%; border-collapse: collapse; font-size: 14px; }
table.cat th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 14px 22px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.cat td { padding: 13px 22px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.cat tr:last-child td { border-bottom: 0; }
table.cat tbody tr:hover { background: var(--panel-2); }
table.cat .ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
table.cat .fam { font-size: 12px; color: var(--muted); }
table.cat .pub { text-align: right; color: var(--muted); white-space: nowrap; }
table.cat .vous { text-align: right; font-weight: 700; white-space: nowrap; color: var(--blue); }
.cat-pied { padding: 16px 22px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
@media (max-width: 720px) { table.cat .fam, table.cat thead th:nth-child(2) { display: none; } table.cat th, table.cat td { padding: 12px 14px; } }

/* ---------- Connexion / création de compte ---------- */
.log { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.log > div { background: var(--panel); padding: clamp(26px,3vw,44px); }
.log > div.alt2 { background: var(--panel-2); }
@media (max-width: 860px) { .log { grid-template-columns: 1fr; } }

/* ---------- Questions fréquentes ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-size: 16.5px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 8px; top: 16px; font: 400 26px/1 var(--font); color: var(--blue); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--blue); }
.faq p { margin: 0 0 20px; color: var(--muted); font-size: 15px; max-width: 76ch; }

/* ---------- Bandeau de rappel en bas de page intérieure ---------- */
.rappel { background: var(--ink); color: var(--bg); border-radius: var(--r); padding: clamp(26px,3vw,40px); display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: space-between;
  --acc: var(--lime); --acc-on: #101828; }
[data-theme="dark"] .rappel { --acc: #0487C0; --acc-on: #FFFFFF; }
.rappel h3 { color: var(--bg); margin: 0 0 6px; }
.rappel p { margin: 0; color: color-mix(in srgb, var(--bg) 68%, transparent); max-width: 56ch; font-size: 15px; }
.rappel .btn.p { background: var(--acc); border-color: var(--acc); color: var(--acc-on); }
.rappel .btn.p:hover { background: #fff; border-color: #fff; color: #101828; }
.rappel .btn.g { border-color: color-mix(in srgb, var(--bg) 24%, transparent); color: var(--bg); }
.rappel .btn.g:hover { border-color: var(--bg); }

/* ---------- Ateliers : trois cartes au lieu des deux du socle ---------- */
.ship-cards.trois { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
.zone.fr h4 i { background: var(--blue); }
.zone.us h4 i { background: #E0685C; }
.zone > p { font-size: 14px; color: var(--muted); margin: 6px 0 0; }

/* ---------- Frise de l'histoire ---------- */
.sec-tight { padding-top: 0; }

/* ---------- Adaptatif propre au calque français ---------- */
@media (max-width: 860px) {
  .marques-in { grid-template-columns: 1fr; gap: 12px; }
  .marques-t { max-width: none; }
  .marques-l { gap: 12px 18px; }
  .marques-l .sep { display: none; }
}
@media (max-width: 560px) {
  .sheet-li li b { min-width: 0; }
  .rev-card { flex-direction: column; }
  .rappel { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------------
   Le <picture> des images allégées

   Chaque <img> est désormais enveloppé dans un <picture>, qui propose
   le WebP et garde le fichier d'origine en recours. Mais un conteneur
   de plus dans l'arbre, c'est un conteneur qui s'interpose : les règles
   du socle visent « .door-bg img », « .proj img », « .carnet-p img »…
   en descendance, donc elles tiennent — sauf celles qui comptent les
   enfants, et celles qui attendent l'image comme élément de grille.

   display: contents efface la boîte du <picture> sans toucher au socle :
   la mise en page redevient exactement ce qu'elle était.
   ------------------------------------------------------------------ */
picture { display: contents; }

/* Les trois photos du bandeau d'accueil s'enchaînent par un retard
   d'animation donné au 1er, 2e et 3e enfant. Chaque image étant
   maintenant enfant unique de son <picture>, c'est au <picture> qu'il
   faut compter — l'animation, elle, reste sur l'image. */
.hero-bg picture:nth-child(1) img { animation-delay: 0s; }
.hero-bg picture:nth-child(2) img { animation-delay: 6s; }
.hero-bg picture:nth-child(3) img { animation-delay: 12s; }
@media (prefers-reduced-motion: reduce) {
  .hero-bg picture:first-child img { opacity: 1; }
}

/* ------------------------------------------------------------------
   Pages légales

   Le socle donne déjà la colonne étroite et les titres de section.
   Ne restent que deux choses qui lui sont propres : le tableau des
   traitements de données, et l'avis de traduction.
   ------------------------------------------------------------------ */
.legale-t { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 18px; }
.legale-t th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); padding: 0 14px 10px 0; border-bottom: 1px solid var(--line); }
.legale-t td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.legale-t tr:last-child td { border-bottom: 0; }
@media (max-width: 720px) {
  .legale-t, .legale-t tbody, .legale-t tr, .legale-t td { display: block; width: 100%; }
  .legale-t thead { display: none; }
  .legale-t tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .legale-t td { border: 0; padding: 2px 0; }
  .legale-t td:first-child { font-weight: 600; color: var(--ink); }
}

/* L'avis qui dit que seul le français fait foi, sur les versions traduites. */
.legale-avis { border-left: 3px solid var(--blue); background: var(--panel);
  padding: 14px 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 15px; }

.legale-maj { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------------
   Une réalisation qui devient une demande

   La visionneuse ne montre plus seulement la photo : elle propose de
   demander la même chose. C'est le moment où le visiteur est le plus
   près de se décider.
   ------------------------------------------------------------------ */
.lb-cta { padding: 20px 24px 24px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lb-cta b { font: 700 italic 19px/1.15 var(--disp); text-transform: uppercase; color: #fff; }
.lb-cta span { font-size: 14px; color: rgba(255,255,255,.72); max-width: 54ch; }
.lb-cta .btn { margin-top: 10px; }
@media (max-width: 640px) { .lb-cta { padding: 16px 18px 20px; } .lb-cta b { font-size: 17px; } }

/* Le rappel, en tête du formulaire : le visiteur doit voir que nous savons
   de quelle réalisation il parle, sinon il la réexplique. */
.dv-origine { display: flex; align-items: center; gap: 14px; margin: 0 0 22px;
  padding: 12px 16px; background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--blue); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.dv-origine img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; flex: none; }
.dv-origine span { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.dv-origine b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.dv-x { margin-left: auto; flex: none; background: none; border: 0; cursor: pointer;
  font-size: 12px; color: var(--muted); text-decoration: underline; padding: 6px; }
.dv-x:hover { color: var(--ink); }
@media (max-width: 560px) { .dv-origine { flex-wrap: wrap; } .dv-x { margin-left: 0; } }

/* ------------------------------------------------------------------
   Formulaire de devis : pot de miel et accusés
   ------------------------------------------------------------------ */
/* Le pot de miel : hors écran, hors tabulation, invisible aux lecteurs
   d'écran. Un humain ne le voit jamais ; un robot le remplit et se trahit. */
.hp { position: absolute !important; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden; }

.devis-ok { padding: 8px 0; }
.devis-err { margin: 12px 0 0; color: #c0392b; font-size: 14px; }
:root[data-theme="dark"] .devis-err,
:root:not([data-theme="light"]) .devis-err { color: #ff8a7a; }