/* La page « Un contenu, trois sites » (05/11/2026, docs/CREATION.md).
   Les couleurs et les polices sont celles de l'identité, comme Solutions : encre, cap, élan, clarté. */
:root{
  --clarte:#f7f8fc;--blanc:#fff;--encre:#10162a;--texte:#080a12;--gris:#5b6375;--pale:#8a93a6;
  --cap:#5968ff;--cap-doux:rgba(89,104,255,.1);--elan:#46e1c3;--trait:#e4e7ef;--trait-fort:#d3d8e4;
  --display:"Space Grotesk",system-ui,sans-serif;--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--clarte);color:var(--texte);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--cap);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,100% - 48px);margin:0 auto}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pale)}
.kicker{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.kicker::before{content:"";width:32px;height:1px;background:var(--cap)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;margin:0}
h2{font-size:clamp(26px,3.4vw,38px);line-height:1.1}
.skip{position:absolute;left:12px;top:-60px;z-index:80;padding:10px 14px;border-radius:10px;background:var(--encre);color:var(--clarte)}
.skip:focus{top:12px}

.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:12px;font-weight:600;font-size:15px;border:1px solid transparent;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-encre{background:var(--encre);color:var(--clarte)}
.btn-encre:hover{background:#1d2540}
.btn-petit{height:40px;padding:0 16px;font-size:14px;border-radius:10px}
.btn-inactif{background:var(--blanc);color:var(--pale);border-color:var(--trait);cursor:default}
.btn-inactif:hover{transform:none}
.lien{font-weight:600;font-size:15px;display:inline-flex;gap:8px;align-items:center}
.lien:hover{color:var(--cap)}
.actions{display:flex;flex-wrap:wrap;gap:18px 24px;align-items:center}

.section{padding:72px 0}
.section-claire{background:var(--blanc);border-block:1px solid var(--trait)}
.section-tete{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px}
.section-tete>p{color:var(--gris);max-width:44ch;margin:0}

/* 1. L'ouverture */
.ouverture{padding:72px 0 24px;position:relative;overflow:hidden}
.ouverture::before{content:"";position:absolute;inset:-20% -10% auto auto;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(89,104,255,.14),transparent 62%);pointer-events:none}
.ouverture .wrap{position:relative}
.ouverture h1{font-size:clamp(44px,8vw,96px);line-height:.98;letter-spacing:-.04em;margin:0 0 26px}
.ouverture h1 span{color:var(--cap)}
.chapo{font-size:clamp(17px,1.8vw,20px);line-height:1.55;color:var(--gris);max-width:60ch;margin:0 0 30px}

/* 2. Le triptyque, en une seule scène (la mue, intégrée le 05/11/2026) : l'idée des trois choix reste, l'écran est un
   seul site qui se change en l'autre. Sans script, la scène montre la version 1, cadrée comme la mue la montre au cran :
   entière sur ordinateur (bandes d'encre sur les côtés si besoin), le haut de la page sur téléphone. mue.js y dessine. */
.scene{position:relative;width:100%;border-radius:20px;overflow:hidden;border:1px solid var(--trait-fort);background:var(--encre);
  aspect-ratio:1280/800;box-shadow:0 30px 80px -40px rgba(16,22,42,.45);
  max-height:max(340px,calc(100vh - 320px));max-height:max(340px,calc(100svh - 320px))} /* la scène, l'œil et le bouton « Entrer » tiennent ensemble dans l'écran */
.scene picture{display:block;height:100%}
.scene img{display:block;width:100%;height:100%;object-fit:contain}
/* L'œil-curseur (05/11/2026) : l'œil du logo sert de poignée. « Professionnel et Précis » à gauche (la 2), « Simple et Fluide » au milieu (la 1, le logo
   tel quel), « Punk et Rigolo » à droite (la 3) ; ses paupières, sa pupille et sa flèche se transforment en glissant. */
.oeil-curseur{margin-top:14px}
.oeil-piste{position:relative;height:88px;margin:0 36px;cursor:grab;touch-action:pan-y;outline:none;-webkit-tap-highlight-color:transparent}
.oeil-piste.tire{cursor:grabbing}
.oeil-piste:focus-visible{outline:2px solid var(--cap);outline-offset:4px;border-radius:14px}
.oeil-ligne{position:absolute;left:0;right:0;top:43px;height:2px;border-radius:2px;background:var(--trait-fort)}
.oeil-cran{position:absolute;top:38px;width:2px;height:12px;margin-left:-1px;border-radius:2px;background:var(--pale)}
.oeil{position:absolute;top:8px;left:50%;width:72px;height:72px;margin-left:-36px;pointer-events:none;overflow:visible;
  filter:drop-shadow(0 8px 14px rgba(16,22,42,.18))}
.oeil-fond{fill:var(--blanc);stroke:var(--trait-fort);stroke-width:1}
.oeil-tons{display:grid;grid-template-columns:repeat(3,1fr);margin:0 36px}
.oeil-tons [data-ton]{display:flex;flex-direction:column;gap:2px;cursor:pointer}
.oeil-tons [data-ton="0"]{align-items:center;text-align:center}
.oeil-tons [data-ton="1"]{align-items:flex-end;text-align:right}
.oeil-tons strong{font-family:var(--display);font-size:17px;font-weight:600;color:var(--pale);transition:color .3s}
.oeil-tons .actif strong{color:var(--texte)}
.oeil-tons .mono{font-size:10px;letter-spacing:.1em}
.ton-court{display:none}
.nom-court{display:none}
.oeil-entrer{display:flex;justify-content:center;margin:22px 0 0}
.comparaison{margin:0}
.comparaison figcaption{margin-top:12px;font-size:10px}

/* 3. Les trois versions */
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.carte{display:flex;flex-direction:column;align-items:flex-start;padding:16px 16px 22px;border-radius:20px;background:var(--clarte);border:1px solid var(--trait)}
.carte-image{display:block;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--trait);background:var(--blanc);margin-bottom:18px}
.carte-image img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.carte:hover .carte-image img{transform:scale(1.03)}
.carte-vide{display:grid;place-items:center;border-style:dashed;
  background:repeating-linear-gradient(135deg,var(--clarte) 0 10px,var(--blanc) 10px 20px)}
.carte-num{margin:0 6px 6px}
.carte h3{font-size:26px;margin:0 6px 2px}
.carte-dit{margin:0 6px 10px;font-family:var(--display);font-size:18px;color:var(--cap);font-weight:600}
.carte p{margin-inline:6px}
.carte>p:not(.mono):not(.carte-dit){color:var(--gris);font-size:15px;margin-top:0;margin-bottom:20px;flex:1}
.carte .btn{margin-left:6px}
.carte-bientot h3,.carte-bientot .carte-dit{color:var(--pale)}

/* 4. Les coulisses */
.coulisses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.etude{padding:24px;border-radius:20px;background:var(--blanc);border:1px solid var(--trait)}
.etude-num{margin:0 0 18px;color:var(--cap)}
.etude dl{margin:0;display:grid;gap:18px}
.etude dl>div{padding-top:16px;border-top:1px solid var(--trait)}
.etude dt{font:500 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pale);margin-bottom:6px}
.etude dd{margin:0;font-family:var(--display);font-size:17px;line-height:1.4;font-weight:500}
.etude dd.pourquoi{margin-top:8px;font:14px/1.55 var(--sans);color:var(--gris)}
.etude-bientot{background:transparent;border-style:dashed}
.etude-bientot>p:not(.mono){color:var(--gris);margin:0}

/* 5. Ce qui ne change pas */
.section-encre{background:var(--encre);color:var(--clarte)}
.section-encre .mono{color:#a7b0ff}
.faits{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.faits h2{margin-bottom:14px}
.faits>div>p:not(.mono){color:#b7bfd3;margin:0;max-width:46ch}
.faits-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.faits-liste li{padding:18px;border-radius:14px;border:1px solid rgba(247,248,252,.14);background:rgba(247,248,252,.04);color:#b7bfd3;font-size:14px}
.faits-liste strong{display:block;color:var(--clarte);font:600 17px/1.3 var(--display);margin-bottom:4px}

/* 6. Parlons de votre site */
.parlons{text-align:center;display:flex;flex-direction:column;align-items:center}
.parlons .kicker::after{content:"";width:32px;height:1px;background:var(--cap)}
.parlons h2{font-size:clamp(32px,5vw,56px);margin-bottom:14px}
.parlons>p:not(.mono){color:var(--gris);max-width:56ch;margin:0 0 28px}
.parlons .actions{justify-content:center}

.pied{padding:36px 0 60px;color:var(--pale);font-size:14px;border-top:1px solid var(--trait)}
.pied .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pied a:hover{color:var(--cap)}

@media (max-width:980px){
  .cartes,.coulisses{grid-template-columns:1fr}
  .carte{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);column-gap:20px;align-items:start}
  .carte-image{grid-row:span 5;margin:0}
  .carte>p:not(.mono):not(.carte-dit){margin-bottom:16px}
  .faits{grid-template-columns:1fr;gap:28px}
}
@media (max-width:760px){
  .wrap{width:min(1180px,100% - 32px)}
  .section{padding:52px 0}
  .ouverture{padding:44px 0 8px}
  .section-tete{flex-direction:column;align-items:flex-start;gap:12px}
  .carte{display:flex}
  .carte-image{margin-bottom:16px}
  .faits-liste{grid-template-columns:1fr}
}
@media (max-width:640px){
  .scene{aspect-ratio:390/844;max-height:calc(100vh - 300px);max-height:calc(100svh - 300px)}
  .scene img{object-fit:cover;object-position:top}
  .oeil-piste{height:76px;margin:0 30px}
  .oeil-ligne{top:37px}
  .oeil-cran{top:32px}
  .oeil{top:8px;width:60px;height:60px;margin-left:-30px}
  .oeil-tons{margin:0}
  .oeil-tons strong{font-size:15px}
  .nom-long{display:none} /* au téléphone, les noms courts (« Pro », « Cool », « Punk », décidés le 05/11/2026) */
  .nom-court{display:inline}
  .ton-long{display:none}
  .ton-court{display:inline}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}.carte:hover .carte-image img{transform:none}}