/* Riallan-Sidaner : monde « Le Catalogue » (direction B retenue le 7 aout 2026, seed riallan2).
   Le site est le catalogue general imprime d'un constructeur : blanc papier, un seul bleu
   d'impression, filets gris, Archivo en une seule famille (etendue 125 % pour les titres),
   chiffres tabulaires. La v1 sombre est archivee dans _v1-atelier-sombre/. */

@import url('../fonts/fonts.css');

:root {
   --blanc: #ffffff;
   --papier: #fbfbf8;
   --bleu: #0d4c9c;
   --bleu-fonce: #093a78;
   --bleu-pale: #e9f0f9;
   --encre: #171b21;
   --gris: #5a6472;
   --filet: #c8d0da;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
   font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
   font-size: 17px; line-height: 1.6;
   color: var(--encre); background: var(--papier);
   font-variant-numeric: tabular-nums;
}
::selection { background: var(--bleu); color: var(--blanc); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
img { max-width: 100%; display: block; }
.conteneur { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---- Bandeau + en-tete ---- */
.bandeau { background: var(--bleu-fonce); color: var(--blanc); font-size: 13.5px; }
.bandeau .conteneur { display: flex; justify-content: space-between; padding-top: 7px; padding-bottom: 7px; }
.bandeau a { color: var(--blanc); text-decoration: none; white-space: nowrap; }
.bandeau a:hover { text-decoration: underline; }

.entete { background: var(--blanc); border-bottom: 1px solid var(--filet); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.logo-lien { text-decoration: none; }
.logo-lien img { height: 58px; width: auto; }
.nav { display: flex; gap: 28px; }
.nav a {
   font-weight: 600; font-size: 15.5px; text-decoration: none;
   padding: 4px 0; border-bottom: 3px solid transparent; letter-spacing: .01em;
}
.nav a:hover { color: var(--bleu); }
.nav a[aria-current="page"] { color: var(--bleu); border-bottom-color: var(--bleu); }

/* ---- Couverture (accueil) ---- */
.couverture { background: var(--bleu); color: var(--blanc); position: relative; overflow: hidden; }
.couverture::after {
   content: ""; position: absolute; inset: 0;
   background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 7px);
   pointer-events: none;
}
.couverture .conteneur { position: relative; z-index: 1; padding-top: 64px; padding-bottom: 72px; }
.surligne { border-top: 3px solid var(--blanc); width: 72px; margin-bottom: 30px; }
h1 {
   font-stretch: 125%; font-weight: 800;
   font-size: clamp(30px, 8vw, 74px); line-height: 1.02;
   text-transform: uppercase; letter-spacing: .005em; max-width: 12em;
   margin-bottom: 22px;
}
.couverture .sous-h1 { font-size: 21px; font-weight: 400; max-width: 30em; margin-bottom: 34px; color: #dbe6f5; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-block; text-decoration: none; font-weight: 600; font-size: 17px; padding: 14px 26px; border: 2px solid var(--blanc); }
.couverture .btn-plein { background: var(--blanc); color: var(--bleu-fonce); }
.couverture .btn-plein:hover { background: var(--bleu-pale); }
.couverture .btn-ligne { color: var(--blanc); }
.couverture .btn-ligne:hover { background: rgba(255,255,255,.12); }

/* Boutons sur fond clair (pages interieures) */
.btn-bleu { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }
.btn-bleu:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }

/* ---- Tete de page interieure ---- */
.page-tete { background: var(--blanc); border-bottom: 1px solid var(--filet); }
.page-tete .conteneur { padding-top: 52px; padding-bottom: 46px; }
.page-tete h1 { color: var(--encre); font-size: clamp(28px, 7vw, 56px); }
.page-tete .surligne { border-top-color: var(--bleu); }
.chapo { font-size: 19px; color: var(--gris); max-width: 38em; }

/* ---- Sections generiques ---- */
.section { padding: 64px 0; }
h2 { font-stretch: 125%; font-weight: 800; font-size: clamp(22px, 6vw, 40px); line-height: 1.1; text-transform: uppercase; margin-bottom: 14px; }
.section-intro { color: var(--gris); max-width: 37em; margin-bottom: 34px; }

/* ---- Fiche signaletique (accueil) ---- */
.fiche { background: var(--blanc); border-bottom: 1px solid var(--filet); }
.fiche .conteneur { padding-top: 56px; padding-bottom: 64px; }
.fiche-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
/* « ELECTROMECANIQUE » (40px etendu ~545px) debordait de sa colonne (518px) dans la gouttiere :
   le titre de la fiche est dimensionne pour que le mot tienne a toutes les largeurs. */
.fiche-grille h2 { font-size: clamp(24px, 3.1vw, 36px); }
.fiche-grille > *, .zinga-grille > *, .apropos-grille > *, .planche-corps > * { min-width: 0; }
.fiche p { max-width: 34em; margin-bottom: 14px; }
.note-metier { color: var(--gris); }
table.specs { width: 100%; border-collapse: collapse; background: var(--blanc); table-layout: fixed; }
table.specs caption {
   text-align: left; background: var(--bleu); color: var(--blanc);
   font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
   padding: 10px 16px;
}
table.specs td { border: 1px solid var(--filet); padding: 11px 16px; font-size: 16px; }
table.specs td:first-child { color: var(--gris); width: 38%; background: var(--papier); }
table.specs td:last-child { font-weight: 600; }

/* ---- Agrements (accueil) ---- */
.agrements { border-bottom: 1px solid var(--filet); }
.planches-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--filet); background: var(--blanc); }
.marque-typo { font-stretch: 125%; font-weight: 800; font-size: 27px; text-transform: uppercase; letter-spacing: .02em; line-height: 44px; height: 44px; margin-bottom: 18px; color: var(--bleu-fonce); }
.planche-logo { border-right: 1px solid var(--filet); padding: 34px 26px 22px; }
.planche-logo:last-child { border-right: none; }
.planche-logo img { height: 44px; width: auto; object-fit: contain; margin-bottom: 18px; }
.planche-logo figcaption { font-size: 14.5px; color: var(--gris); border-top: 1px solid var(--filet); padding-top: 10px; }
.planche-logo figcaption b { color: var(--encre); font-weight: 600; display: block; }

/* ---- Index des marques (accueil) : nomenclature en pastilles compactes ---- */
.index-marques { border-bottom: 1px solid var(--filet); }
.marques-pastilles {
   list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
   border-top: 2px solid var(--encre); padding-top: 16px;
}
.marques-pastilles li {
   background: var(--blanc); border: 1px solid var(--filet);
   padding: 7px 14px; font-size: 14px; font-weight: 600; letter-spacing: .04em;
}
.compteur { margin-top: 18px; color: var(--gris); }
.compteur b { color: var(--bleu-fonce); }

/* ---- Contact ---- */
.contact { background: var(--blanc); }
.contact-grille { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0; border: 1px solid var(--filet); margin-top: 30px; }
.contact-bloc { padding: 26px 28px; border-right: 1px solid var(--filet); }
.contact-bloc:last-child { border-right: none; }
.contact-bloc h3 {
   font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
   color: var(--bleu-fonce); margin-bottom: 14px;
}
.grand-tel { font-stretch: 125%; font-weight: 800; font-size: 36px; text-decoration: none; color: var(--bleu-fonce); display: inline-block; line-height: 1.1; }
.grand-tel:hover { color: var(--bleu); }
.detail { font-size: 15.5px; margin-top: 8px; }
.detail a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.detail a:hover { color: var(--bleu); }
address { font-style: normal; }
.horaires { list-style: none; font-size: 15.5px; }
.horaires li { padding: 8px 0; border-bottom: 1px solid var(--filet); }
.horaires li:last-child { border-bottom: none; }
.horaires .jours { display: block; font-weight: 600; }
.horaires .heures { font-size: 14.5px; color: var(--gris); }

/* ---- Gammes produits : grandes sections immersives ---- */
.gamme { padding: 64px 0; border-bottom: 1px solid var(--filet); }
.gamme:nth-of-type(odd) { background: var(--blanc); }
.gamme-grille { display: grid; grid-template-columns: .85fr 1.15fr; gap: 52px; align-items: center; }
.gamme-grille > * { min-width: 0; }
.gamme.inverse .gamme-texte { order: 2; }
.gamme.inverse .gamme-visuels { order: 1; }
.gamme-marque { margin-bottom: 20px; }
.gamme-marque img { height: 44px; width: auto; object-fit: contain; }
.gamme h2 { font-size: clamp(24px, 3.6vw, 44px); margin-bottom: 16px; }
.gamme-texte p { margin-bottom: 12px; max-width: 34em; }
.slogan { color: var(--gris); border-left: 1px solid var(--filet); padding-left: 14px; font-size: 16px; }
.galerie-principale {
   background: var(--blanc); border: 1px solid var(--filet); height: 420px; width: 100%;
   display: flex; align-items: center; justify-content: center; padding: 18px;
   cursor: zoom-in; position: relative; font: inherit; color: inherit;
}
.galerie-principale img { max-height: 100%; max-width: 100%; object-fit: contain; transition: opacity .22s ease, transform .3s ease; }
.galerie-principale:hover img { transform: scale(1.025); }
.galerie-principale img.fondu { opacity: 0; }
.galerie-principale .loupe {
   position: absolute; right: 12px; bottom: 12px; font-size: 12.5px; font-weight: 600;
   letter-spacing: .05em; text-transform: uppercase; color: var(--gris);
   background: var(--papier); border: 1px solid var(--filet); padding: 4px 10px;
   pointer-events: none;
}
.galerie-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-top: 10px; }
.galerie-vignettes button {
   background: var(--blanc); border: 1px solid var(--filet); padding: 6px;
   cursor: pointer; aspect-ratio: 1; display: grid; place-content: center;
   transition: border-color .15s ease, transform .15s ease;
}
.galerie-vignettes button img { max-height: 52px; object-fit: contain; }
.galerie-vignettes button:hover { border-color: var(--bleu); transform: translateY(-2px); }
.galerie-vignettes button[aria-pressed="true"] { border: 2px solid var(--bleu); padding: 5px; }

/* Loupe plein ecran */
.zoom-plein {
   position: fixed; inset: 0; z-index: 60; background: rgba(9, 20, 36, .93);
   display: none; align-items: center; justify-content: center; padding: 40px;
   cursor: zoom-out;
}
.zoom-plein.ouvert { display: flex; }
.zoom-plein img { max-width: 92vw; max-height: 86vh; object-fit: contain; background: var(--blanc); padding: 20px; }
.zoom-plein .fermer {
   position: absolute; top: 18px; right: 22px; background: var(--blanc); color: var(--encre);
   border: none; font: inherit; font-weight: 600; font-size: 15px; padding: 9px 16px; cursor: pointer;
}
.zoom-plein .fermer:hover { background: var(--bleu-pale); }

/* ---- Zinga ---- */
.zinga-grille { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; }
.zinga-grille p { margin-bottom: 14px; max-width: 34em; }
.zinga-points { list-style: none; margin: 4px 0 18px; border: 1px solid var(--filet); background: var(--blanc); }
.zinga-points li { padding: 12px 18px; border-bottom: 1px solid var(--filet); }
.zinga-points li:last-child { border-bottom: none; }
.figures { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.figure-carte { background: var(--blanc); border: 1px solid var(--filet); }
.figure-carte .visuel { padding: 16px; display: grid; place-content: center; aspect-ratio: 4 / 3; }
.figure-carte .visuel img { max-height: 100%; margin: 0 auto; object-fit: contain; }
.figure-carte .visuel-libre { aspect-ratio: auto; }
.figure-carte .visuel-libre img { max-height: 120px; }
.figure-carte figcaption { border-top: 1px solid var(--filet); padding: 10px 16px; font-size: 14.5px; color: var(--gris); }
.figure-carte figcaption a { color: var(--bleu-fonce); }
/* Caracteristiques Zinga : deux tableaux techniques cote a cote (decision client, round 4) */
.carac-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start; }
.carac-tables > * { min-width: 0; }
table.liste-technique.carac td { font-size: 13.5px; padding: 8px 12px; line-height: 1.45; }

/* ---- A propos ---- */
.apropos-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
table.liste-technique { width: 100%; border-collapse: collapse; background: var(--blanc); table-layout: fixed; }
table.liste-technique caption {
   text-align: left; background: var(--bleu); color: var(--blanc);
   font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
   padding: 10px 16px;
}
table.liste-technique td { border: 1px solid var(--filet); padding: 11px 16px; font-size: 16px; }
/* Lignes a survol (A propos) : la couleur suit la souris, le clic ne fait rien (decision client, round 4) */
table.liste-technique.survol td { transition: background .18s ease; }
table.liste-technique.survol td > span { display: inline-block; transition: transform .18s ease; }
table.liste-technique.survol tr:hover td { background: var(--bleu-pale); }
table.liste-technique.survol tr:hover td > span { transform: translateX(8px); }
.visuel-pleine-page { background: var(--blanc); border: 1px solid var(--filet); margin-top: 44px; overflow: hidden; }
.visuel-pleine-page .visuel { padding: 30px; display: grid; place-content: center; }
.visuel-pleine-page img { max-height: 320px; object-fit: contain; margin: 0 auto; transition: transform .5s ease; }
.visuel-pleine-page:hover img { transform: scale(1.03); }
.visuel-pleine-page figcaption { border-top: 1px solid var(--filet); padding: 12px 20px; font-size: 14.5px; color: var(--gris); }

/* ---- Pied ---- */
.pied { background: var(--bleu-fonce); color: var(--blanc); }
.pied .conteneur { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 22px; padding-bottom: 22px; flex-wrap: wrap; }
.pied a { color: var(--blanc); text-decoration: none; margin-left: 18px; font-size: 15px; }
.pied a:hover { text-decoration: underline; }
.signature { font-size: 14.5px; }

/* ---- Apparitions au defilement (progressif : tout est visible sans JS) ---- */
html.js .rev { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; transition-delay: var(--d, 0ms); }
html.js .rev.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
   html.js .rev { opacity: 1; transform: none; transition: none; }
   * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---- Responsive ---- */
@media (max-width: 920px) {
   .fiche-grille, .zinga-grille, .apropos-grille { grid-template-columns: 1fr; gap: 40px; }
   .planches-logos { grid-template-columns: repeat(2, 1fr); }
   .planche-logo { border-bottom: 1px solid var(--filet); }
   .planche-logo:nth-child(even) { border-right: none; }
   .contact-grille { grid-template-columns: 1fr; }
   .contact-bloc { border-right: none; border-bottom: 1px solid var(--filet); }
   .contact-bloc:last-child { border-bottom: none; }
   .gamme-grille { grid-template-columns: 1fr; gap: 26px; }
   .gamme.inverse .gamme-texte { order: 1; }
   .gamme.inverse .gamme-visuels { order: 2; }
   .galerie-principale { height: 320px; }
   .section, .gamme { padding: 52px 0; }
   .logo-lien img { height: 46px; }
}

/* Telephone : reduction franche de toute l'echelle (decision client, round 4).
   Titres ~30 % plus petits, sections resserrees, tableaux et photos compacts. */
@media (max-width: 560px) {
   body { font-size: 16px; }
   .bandeau { font-size: 12px; }
   .bandeau .conteneur { flex-wrap: wrap; gap: 2px; }
   .entete .conteneur { padding-top: 12px; padding-bottom: 12px; gap: 10px 16px; }
   .logo-lien img { height: 40px; }
   .nav { gap: 14px; }
   .nav a { font-size: 13.5px; border-bottom-width: 2px; }

   .couverture .conteneur { padding-top: 36px; padding-bottom: 40px; }
   .surligne { margin-bottom: 20px; width: 56px; }
   h1 { font-size: 26px; margin-bottom: 14px; }
   .couverture .sous-h1 { font-size: 16.5px; margin-bottom: 24px; }
   .btn { font-size: 15px; padding: 11px 18px; }

   .page-tete .conteneur { padding-top: 28px; padding-bottom: 26px; }
   .page-tete h1 { font-size: 24px; }
   .chapo { font-size: 16px; }
   h2, .fiche-grille h2 { font-size: 20px; margin-bottom: 10px; }
   .section, .gamme { padding: 38px 0; }
   .section-intro { font-size: 15px; margin-bottom: 22px; }

   .fiche .conteneur { padding-top: 36px; padding-bottom: 40px; }
   .fiche-grille { gap: 28px; }
   table.specs caption, table.liste-technique caption { font-size: 13.5px; padding: 8px 12px; }
   table.specs td, table.liste-technique td { font-size: 14px; padding: 9px 12px; }
   .planche-logo { padding: 20px 14px 12px; }
   .planche-logo img { height: 32px; margin-bottom: 12px; }
   .marque-typo { font-size: 19px; line-height: 32px; height: 32px; margin-bottom: 12px; }
   .planche-logo figcaption { font-size: 13px; padding-top: 8px; }
   .marques-pastilles { gap: 6px; padding-top: 12px; }
   .marques-pastilles li { font-size: 12.5px; padding: 5px 10px; }
   .compteur { font-size: 14.5px; margin-top: 14px; }

   .contact-grille { margin-top: 20px; }
   .contact-bloc { padding: 18px 16px; }
   .grand-tel { font-size: 26px; }
   .detail { font-size: 14px; }
   .horaires { font-size: 14px; }
   .horaires .heures { font-size: 13px; }

   .gamme h2 { font-size: 20px; }
   .gamme-marque img { height: 34px; }
   .galerie-principale { height: 220px; padding: 12px; }
   .galerie-vignettes { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
   .galerie-vignettes button img { max-height: 42px; }
   .slogan { font-size: 14.5px; }
   .zoom-plein { padding: 16px; }

   .zinga-points li { padding: 10px 14px; font-size: 15px; }
   .figures { grid-template-columns: 1fr; }
   .figure-carte figcaption { font-size: 13px; padding: 8px 12px; }
   .carac-tables { grid-template-columns: 1fr; gap: 14px; }
   table.liste-technique.carac td { font-size: 13px; padding: 7px 10px; }

   .visuel-pleine-page { margin-top: 28px; }
   .visuel-pleine-page .visuel { padding: 16px; }
   .visuel-pleine-page img { max-height: 200px; }
   .visuel-pleine-page figcaption { font-size: 13px; padding: 9px 14px; }

   .pied .conteneur { padding-top: 16px; padding-bottom: 16px; }
   .signature { font-size: 13px; }
   .pied a { font-size: 13.5px; margin-left: 12px; }
}