/* Page vitrine de modull.fr. Statique, sans script ni ressource extérieure : les couleurs
   reprennent les jetons de src/styles.css (mêmes noms, mêmes valeurs) et les post-its ceux du
   tableau de l'application (src/socle/socle.css). */
@font-face{font-family:'Barlow Semi Condensed';font-weight:400;font-display:swap;src:url(polices/barlow-semi-condensed-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-weight:500;font-display:swap;src:url(polices/barlow-semi-condensed-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(polices/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(polices/barlow-condensed-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-display:swap;src:url(polices/barlow-condensed-latin-800-normal.woff2) format('woff2')}

:root{
  --encre:#182236;--texte-2:#3f4a5c;--texte-3:#56627a;--bordure:#e0e6ee;--fond:#f3f6fa;
  --modull-graphite:#1f2427;--modull-graphite-texte:#c9cfc8;--modull-graphite-discret:#8d968f;--modull-graphite-trait:#3a4246;
  --modull-jaune:#f2b705;--modull-blanc:#fff;
  --postit-jaune:#ffe774;--postit-bleu:#a9d6ef;--postit-vert:#bfe3a6;--postit-rose:#f6bccd;--postit-orange:#ffc68c;--postit-lilas:#d8c8f0;--postit-turquoise:#a3dfd5;--postit-sable:#ecd9b0;
  --postit-encre:#1f2427;--postit-encre-2:#3d4440;
  --aimant-gris:#4b5451;--aimant-gris-clair:#8a9390;--aimant-gris-sombre:#323a37;
  --ombre-postit:rgba(0,0,0,.22);--ombre-postit-forte:rgba(0,0,0,.28);--ombre-legere:rgba(0,0,0,.08);--ombre-coin:rgba(0,0,0,.07);
  --tableau-surface:#fbfcfb;--tableau-quadrillage:#eef1ef;--tableau-reflet:rgba(255,255,255,.7);
  --tableau-cadre-clair:#e9ecea;--tableau-cadre-sombre:#b9bfbc;--tableau-cadre-trait:#9aa19d;--tableau-mur:#cdd1cb;--tableau-mur-trait:rgba(0,0,0,.035);
  --surligneur:rgba(242,183,5,.55);--feutre-bleu:#1557a8;
  --voile-zoom:rgba(31,36,39,.88);
  --largeur:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Barlow Semi Condensed','Segoe UI',Arial,sans-serif;font-size:17px;line-height:1.5;color:var(--postit-encre);background:var(--tableau-mur);background-image:linear-gradient(var(--tableau-mur-trait) 1px,transparent 1px);background-size:100% 6px}
a{color:inherit}
h1,h2,h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;line-height:1.05;color:var(--postit-encre);margin:0}
h2{font-size:40px}
/* Titre au feutre surligné, comme les titres des écrans de l'application (src/socle/atelier.css). */
.titre-feutre{display:inline;background:linear-gradient(transparent 78%,var(--surligneur) 78%,var(--surligneur) 92%,transparent 92%)}
h3{font-size:24px}
.centre{max-width:var(--largeur);margin:0 auto;padding:0 24px}
.intro{max-width:680px;color:var(--texte-2);font-size:18px;margin:10px 0 0}
.lien-evitement{position:absolute;left:-999px}
.lien-evitement:focus{left:16px;top:12px;z-index:10;background:var(--modull-jaune);color:var(--postit-encre);padding:6px 10px}

/* Logo : « Modu » puis deux barres jaunes, comme dans l'application (src/socle/Logo.jsx). */
.logo{color:var(--modull-blanc);display:inline-flex;align-items:flex-end;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:30px;line-height:1;letter-spacing:.3px;text-decoration:none}
.logo-ll{display:inline-flex;gap:4px;margin-left:3px;padding-bottom:3px}
.logo-ll i{display:block;width:6px;height:.75em;background:var(--modull-jaune)}

.bouton{display:inline-block;font-weight:700;text-decoration:none;border-radius:6px;padding:12px 20px;font-size:16px}
.bouton-jaune{background:var(--modull-jaune);color:var(--postit-encre)}
.bouton-jaune:hover{filter:brightness(1.06)}
.bouton-trait{border:2px solid var(--postit-encre);color:var(--postit-encre);padding:10px 18px}
.bouton:focus-visible,.navigation a:focus-visible{outline:3px solid var(--modull-jaune);outline-offset:2px}

/* En-tête graphite */
.entete{background:var(--modull-graphite);position:sticky;top:0;z-index:5}
.entete .centre{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px}
.navigation{display:flex;align-items:center;gap:22px;font-size:15px}
.navigation a{color:var(--modull-graphite-texte);text-decoration:none}
.navigation a:hover{color:var(--modull-blanc)}
.navigation .bouton{color:var(--postit-encre);padding:8px 14px;font-size:15px}

/* Accroche */
.accroche{padding:64px 0 28px}
.accroche h1{font-size:60px;max-width:760px}
.accroche .intro{font-size:20px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* Le tableau d'atelier et ses post-its */
.section-tableau{padding:28px 0 64px}
.tableau-cadre{padding:12px;border-radius:4px;background:linear-gradient(var(--tableau-cadre-clair),var(--tableau-cadre-sombre));box-shadow:inset 0 0 0 1px var(--tableau-cadre-trait),0 18px 30px -18px var(--ombre-postit-forte)}
.tableau-surface{padding:34px 30px 30px;border-radius:2px;background-color:var(--tableau-surface);background-image:linear-gradient(115deg,transparent 40%,var(--tableau-reflet) 48%,transparent 56%),linear-gradient(var(--tableau-quadrillage) 1px,transparent 1px),linear-gradient(90deg,var(--tableau-quadrillage) 1px,transparent 1px);background-size:100% 100%,48px 48px,48px 48px;box-shadow:inset 0 1px 3px var(--ombre-postit)}
.postits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:34px 26px}
.postit{position:relative;min-height:150px;padding:28px 16px 16px;color:var(--postit-encre);box-shadow:0 1px 1px var(--ombre-legere),0 6px 10px -4px var(--ombre-postit);transition:transform .18s ease,box-shadow .18s ease}
.postit::after{content:"";position:absolute;right:0;bottom:0;width:26px;height:26px;background:linear-gradient(135deg,transparent 50%,var(--ombre-coin) 50%)}
.postit:nth-child(4n+1){transform:rotate(-1.4deg)}.postit:nth-child(4n+2){transform:rotate(1deg)}
.postit:nth-child(4n+3){transform:rotate(-.6deg)}.postit:nth-child(4n){transform:rotate(1.6deg)}
.postit:hover{transform:rotate(0) translateY(-3px);box-shadow:0 2px 2px var(--ombre-legere),0 14px 18px -6px var(--ombre-postit-forte)}
.postit h3{font-size:26px}
.postit p{margin:6px 0 0;font-size:15px;line-height:1.35;color:var(--postit-encre-2)}
.aimant{position:absolute;top:-11px;left:50%;margin-left:-15px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--aimant-gris-clair),var(--aimant-gris) 60%,var(--aimant-gris-sombre));box-shadow:0 3px 4px var(--ombre-postit-forte)}
.postit-jaune{background:var(--postit-jaune)}.postit-bleu{background:var(--postit-bleu)}.postit-orange{background:var(--postit-orange)}.postit-lilas{background:var(--postit-lilas)}
.postit-turquoise{background:var(--postit-turquoise)}.postit-sable{background:var(--postit-sable)}.postit-rose{background:var(--postit-rose)}.postit-vert{background:var(--postit-vert)}
.a-la-carte{margin:22px 0 0;color:var(--texte-2);font-size:17px}
.a-la-carte strong{color:var(--postit-encre)}

/* Le socle */
.socle{background:var(--modull-blanc);border-top:1px solid var(--bordure);border-bottom:1px solid var(--bordure);padding:56px 0}
.socle-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 28px;margin-top:28px;padding:0;list-style:none}
.socle-grille li{border-left:4px solid var(--modull-jaune);padding:2px 0 2px 14px}
.socle-grille strong{display:block;font-family:'Barlow Condensed',sans-serif;font-size:22px;color:var(--postit-encre)}
.socle-grille span{color:var(--texte-3);font-size:15px}

/* Captures de l'application */
.ecrans{padding:64px 0}
.ecran-large{margin-top:30px}
.ecrans-grille{display:grid;grid-template-columns:1fr 1fr;gap:30px 28px;margin-top:30px;align-items:start}
.ecran{margin:0}
.ecran-cadre{background:var(--modull-blanc);border:1px solid var(--tableau-mur);border-radius:8px;overflow:hidden;box-shadow:0 16px 30px -16px var(--ombre-postit-forte)}
.ecran-cadre img{display:block;width:100%;height:auto}
.ecran figcaption{margin-top:10px;color:var(--texte-2);font-size:15px}
.ecran figcaption strong{color:var(--postit-encre)}

/* Deux formules d'hébergement */
.formules{background:var(--modull-graphite);color:var(--modull-graphite-texte);padding:64px 0}
.formules h2{color:var(--modull-blanc)}
.formules .intro{color:var(--modull-graphite-texte)}
.formules-grille{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.formule{border:1px solid var(--modull-graphite-trait);border-radius:8px;padding:24px}
.formule h3{color:var(--modull-blanc)}
.formule .etiquette{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.6px;text-transform:uppercase;color:var(--postit-encre);background:var(--modull-jaune);padding:2px 8px;border-radius:3px;margin-bottom:10px}
.formule ul{margin:12px 0 0;padding-left:20px}
.formule li{margin:4px 0}

/* Sécurité et données personnelles */
.securite{padding:64px 0}
.securite-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.carte{background:var(--modull-blanc);border:1px solid var(--bordure);border-radius:8px;padding:20px}
.carte h3{font-size:22px}
.carte p{margin:8px 0 0;color:var(--texte-2);font-size:15px}

/* Contact */
.contact{padding:8px 0 72px}
.contact-bloc{background:var(--postit-jaune);color:var(--postit-encre);padding:36px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;box-shadow:0 1px 1px var(--ombre-legere),0 10px 18px -8px var(--ombre-postit);transform:rotate(-.4deg)}
.contact-bloc p{margin:8px 0 0;color:var(--postit-encre-2);max-width:620px}
.contact-boutons{display:flex;flex-direction:column;gap:10px;text-align:center}
.bouton-graphite{background:var(--modull-graphite);color:var(--modull-blanc)}

/* Pied de page */
.pied{background:var(--modull-graphite);color:var(--modull-graphite-discret);font-size:14px;padding:28px 0}
.pied .centre{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.pied a{color:var(--modull-graphite-texte)}
.pied .logo{font-size:22px}

/* Page « Mentions légales » */
.document{max-width:760px;margin:0 auto;padding:48px 24px 72px}
.document h1{font-size:48px}
.document h2{font-size:28px;margin-top:32px}
.document p{color:var(--texte-2)}

@media (max-width:900px){
  .postits{grid-template-columns:repeat(2,1fr)}
  .socle-grille,.securite-grille{grid-template-columns:1fr 1fr}
  .ecrans-grille,.formules-grille{grid-template-columns:1fr}
  .navigation a:not(.bouton){display:none}
}
@media (max-width:560px){
  h2{font-size:32px}
  .accroche{padding:40px 0 20px}
  .accroche h1{font-size:42px}
  .tableau-cadre{padding:7px}
  .tableau-surface{padding:26px 14px 18px;background-size:100% 100%,36px 36px,36px 36px}
  .postits{gap:28px 14px}
  .postit{min-height:118px;padding:24px 11px 10px}
  .postit h3{font-size:21px}
  .postit p{font-size:14px}
  .aimant{width:26px;height:26px;margin-left:-13px;top:-10px}
  .socle-grille,.securite-grille{grid-template-columns:1fr}
  .contact-bloc{padding:26px 20px;transform:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.postit{transition:none}}

/* Capture agrandie au clic (vitrine.js) */
.zoom{display:block;cursor:zoom-in}
.zoom:focus-visible{outline:3px solid var(--modull-jaune);outline-offset:2px}
.zoom-fenetre{max-width:none;max-height:none;width:100vw;height:100vh;margin:0;padding:56px 16px 16px;border:0;background:transparent;cursor:zoom-out;overflow:auto}
.zoom-fenetre[open]{display:grid;place-items:center}
.zoom-fenetre::backdrop{background:var(--voile-zoom)}
.zoom-fenetre img{display:block;margin:auto;max-width:100%;max-height:calc(100vh - 72px);width:auto;height:auto;box-shadow:0 20px 40px -10px var(--ombre-postit-forte)}
.zoom-fermer{position:fixed;top:12px;right:16px;font:inherit;font-weight:700;background:var(--modull-jaune);color:var(--postit-encre);border:0;border-radius:6px;padding:8px 14px;cursor:pointer}
.zoom-fermer:focus-visible{outline:3px solid var(--modull-blanc);outline-offset:2px}