/* ==========================================================================
   Codexe, sections.css
   Séquence de démarrage, hero et jeu, promesse, ce qu'on fait, réalisations,
   méthode (carte de niveaux), sous le capot, contact, pages secondaires, 404.
   ========================================================================== */

/* ==========================================================================
   Séquence de démarrage
   Affichée seulement si html.boot (posé par le script inline du <head> : une
   fois par visite, jamais en mouvement réduit). Chaîne CSS lancée par .go.
   ========================================================================== */
html.boot { overflow: hidden; }
.boot-ecran {
  display: none; position: fixed; inset: 0; z-index: var(--z-boot);
  background: var(--noir); flex-direction: column; align-items: center; justify-content: center;
  gap: var(--espace-4); padding: var(--gouttiere);
  /* Filet de sécurité : si le script ne prend pas la main, l'écran disparaît seul. */
  animation: boot-securite 1ms linear 4s forwards;
}
html.boot .boot-ecran { display: flex; }
@keyframes boot-securite { to { visibility: hidden; opacity: 0; } }
.boot-term { min-height: 4.2em; width: min(90vw, 360px); text-align: left; }
.boot-logo { width: min(60vw, 300px); height: auto; overflow: visible; transform-origin: 0 0; will-change: transform, opacity; }
.boot-logo .lettre { opacity: 0; }
.boot-logo .dino rect { opacity: 0; }
.boot-skip { position: absolute; right: var(--gouttiere); bottom: var(--gouttiere); }
.boot-ecran.go .lettre { animation: boot-lettre 1ms steps(1, end) both; }
.boot-ecran.go .l-c { animation-delay: 0ms; }
.boot-ecran.go .l-o { animation-delay: 90ms; }
.boot-ecran.go .l-d { animation-delay: 180ms; }
.boot-ecran.go .l-e1 { animation: boot-e 320ms steps(4, end) 270ms both; }
.boot-ecran.go .l-x { animation: boot-descend 160ms steps(4, end) 400ms both; }
.boot-ecran.go .l-e2 { animation: boot-descend 160ms steps(4, end) 490ms both; }
.boot-ecran.go .dino rect { animation: boot-lettre 1ms steps(1, end) both; animation-delay: calc(600ms + var(--i) * 10ms); }
@keyframes boot-lettre { to { opacity: 1; } }
@keyframes boot-e { 0% { opacity: 1; fill: #12101A; } 74% { fill: #12101A; } 100% { opacity: 1; fill: #7B3DFF; } }
@keyframes boot-descend { from { opacity: 1; transform: translateY(-48px); } to { opacity: 1; transform: translateY(0); } }
.boot-ecran.go .l-e1.allume { filter: drop-shadow(0 0 10px rgba(123, 61, 255, 0.9)); }
.boot-ecran.range .boot-logo { transition: transform 520ms var(--courbe), opacity 160ms var(--courbe) 440ms; opacity: 0; }
.boot-ecran.range .boot-term, .boot-ecran.range .boot-skip { opacity: 0; transition: opacity 200ms var(--courbe); }
.boot-ecran.termine { opacity: 0; pointer-events: none; transition: opacity 240ms var(--courbe); }

/* ==========================================================================
   Hero et jeu
   ========================================================================== */
.hero {
  position: relative; overflow: hidden; background: var(--noir); border-bottom: var(--bordure);
  min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column;
}
.hero-champ { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.hero.sans-webgl .hero-champ {
  background-image: linear-gradient(var(--gris-ligne) 1px, transparent 1px), linear-gradient(90deg, var(--gris-ligne) 1px, transparent 1px);
  background-size: 28px 28px; opacity: 0.55;
}
.hero-inner {
  position: relative; z-index: 1; width: 100%; flex: 1;
  padding-top: clamp(2.6rem, 8vh, 6rem); padding-bottom: clamp(1.6rem, 4vh, 3rem);
  display: flex; flex-direction: column; justify-content: center;
}
.hero-inner > * { max-width: 960px; }
.hero-sur { display: block; margin-bottom: var(--espace-3); }
.hero h1 { font-size: clamp(2.5rem, 4.8vw + 0.8rem, 5rem); line-height: 1.02; margin-bottom: 0.4em; }
.hero h1 .violet { color: var(--violet); }
.hero-sous { font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.25rem); color: var(--gris-texte); max-width: 58ch; margin-bottom: var(--espace-4); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--espace-2); margin-bottom: var(--espace-3); }
.hero-hint { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0; font-family: var(--font-pixel); font-size: var(--fs-pixel); color: var(--gris-texte); text-transform: uppercase; letter-spacing: 0.06em; }
.hero-hint .tactile { display: none; }
@media (pointer: coarse) { .hero-hint .clavier { display: none; } .hero-hint .tactile { display: inline; } }
@media (max-width: 700px) { .hero h1 { font-size: clamp(2.1rem, 1.3rem + 4.5vw, 2.8rem); } .hero-sous { font-size: 1rem; } }

/* Bande du jeu, en bas du hero */
.jeu { position: relative; z-index: 1; width: 100%; }
.jeu-cadre { position: relative; height: 240px; }
.jeu-cadre canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.jeu-invite {
  position: absolute; left: 0; top: 10px; display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center;
  color: var(--gris-texte); pointer-events: none; transition: opacity var(--duree) var(--courbe);
}
.jeu-invite.cache { opacity: 0; }
.jeu-invite .kbd { margin-right: 0.3rem; }
@media (pointer: coarse) { .jeu-invite { display: none; } }
.jeu-fin { position: absolute; right: 8px; bottom: 26px; z-index: 2; }
.jeu-barre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
  padding: 0.7rem 0 0.9rem; border-top: var(--bordure);
}
.jeu-barre .pixel { color: var(--gris-texte); margin: 0; }
.jeu-barre .boutons { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.jeu-barre .lien-fleche { margin-left: 0.4rem; }
@media (max-width: 700px) { .jeu-cadre { height: 200px; } }

/* ==========================================================================
   La promesse : en grand, juste après le jeu
   ========================================================================== */
.promesse { border-bottom: var(--bordure); }
.promesse .pixel { display: block; margin-bottom: var(--espace-3); }
.promesse-texte {
  font-family: var(--font-titre); font-weight: 600;
  font-size: clamp(1.45rem, 1rem + 1.8vw, 2.6rem); line-height: 1.28; letter-spacing: 0;
  max-width: 1000px; margin: 0; color: var(--blanc);
}
.promesse-texte .violet { color: var(--violet-clair); }
.promesse-intro { margin-top: var(--espace-3); max-width: 64ch; }
.promesse-actions { margin: var(--espace-3) 0 0; }

/* ==========================================================================
   Ce qu'on fait : cartes avec icône pixel animée au survol
   ========================================================================== */
.services { background: var(--surface-1); border-bottom: var(--bordure); }
.services .carte { padding-top: var(--espace-4); }
.service-num { position: absolute; top: var(--espace-3); right: var(--espace-3); color: var(--gris-texte); }
.service-icone { width: 48px; height: 48px; margin-bottom: 0.4rem; }
.service-icone svg { width: 48px; height: 48px; display: block; shape-rendering: crispEdges; }
.service-icone .f2 { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .carte:hover .service-icone .f1 { animation: frame-a 640ms steps(1, end) infinite; }
  .carte:hover .service-icone .f2 { animation: frame-b 640ms steps(1, end) infinite; }
}
.carte.anime .service-icone .f1 { animation: frame-a 640ms steps(1, end) 3; }
.carte.anime .service-icone .f2 { animation: frame-b 640ms steps(1, end) 3; }
@keyframes frame-a { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes frame-b { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }

/* ==========================================================================
   Réalisations : aperçu qui se révèle en mosaïque, glitch léger au survol
   ========================================================================== */
.realisations { border-bottom: var(--bordure); }
.projets { display: grid; gap: var(--gouttiere); }
@media (min-width: 640px) { .projets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .projets { grid-template-columns: repeat(3, 1fr); } .projets.projets-2x2 { grid-template-columns: repeat(2, 1fr); } }
/* Réalisations plus petites (Loïck, 14 octobre 2026) : les quatre cartes sur une rangée à l'ordinateur */
@media (min-width: 1100px) { .projets.projets-2x2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Quatre cartes : deux lignes de deux, jamais trois plus une orpheline */
.projet {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--surface-2); border: var(--bordure); text-decoration: none; color: inherit;
  transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.projet:hover { color: inherit; }
.projet-media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-1); overflow: hidden; border-bottom: var(--bordure); }
.projet-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.projet-attente { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: var(--espace-2); pointer-events: none; }
.projet-corps { padding: var(--espace-3); display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.projet h3 { margin: 0; font-size: 1.2rem; }
.projet p { margin: 0; color: var(--gris-texte); font-size: var(--fs-petit); }
.projet-technos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.5rem; }
@media (hover: hover) and (pointer: fine) {
  .projet:hover { border-color: var(--violet); box-shadow: var(--glow-violet); }
  .projet:hover .projet-media canvas { animation: glitch 620ms steps(7, end) 1; }
}
@keyframes glitch {
  0% { transform: translate(0); filter: none; clip-path: inset(0); }
  15% { transform: translate(-3px, 1px); filter: drop-shadow(3px 0 rgba(123, 61, 255, 0.9)) drop-shadow(-3px 0 rgba(18, 16, 26, 0.35)); }
  30% { transform: translate(2px, -1px); clip-path: inset(12% 0 55% 0); }
  45% { transform: translate(-1px, 2px); clip-path: inset(48% 0 18% 0); filter: drop-shadow(-2px 0 rgba(123, 61, 255, 0.9)); }
  60% { transform: translate(3px, 0); clip-path: inset(0 0 0 0); filter: drop-shadow(2px 0 rgba(18, 16, 26, 0.3)); }
  80% { transform: translate(-1px, 0); filter: none; }
  100% { transform: none; filter: none; clip-path: inset(0); }
}

/* ==========================================================================
   Méthode : carte de niveaux, le dino avance au fil du défilement
   ========================================================================== */
.methode { background: var(--surface-1); border-bottom: var(--bordure); }
.niveaux { position: relative; padding-top: 64px; }
.piste { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.piste path { fill: none; stroke-width: 4; stroke-linejoin: miter; stroke-linecap: butt; }
.piste .piste-fond { stroke: #D5CCF2; }
.piste .piste-faite { stroke: var(--violet); }
.niveaux-grille { display: grid; gap: var(--gouttiere); position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .niveaux-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .niveaux-grille { grid-template-columns: repeat(4, 1fr); } }
.niveau {
  position: relative; min-width: 0; background: var(--surface-2); border: var(--bordure);
  padding: var(--espace-4) var(--espace-3) var(--espace-3);
  transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.niveau-noeud { position: absolute; top: -13px; left: var(--espace-3); width: 24px; height: 24px; background: var(--surface-1); border: 4px solid var(--gris-ligne); transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe); }
.niveau.atteint { border-color: var(--violet); }
.niveau.atteint .niveau-noeud { background: var(--violet); border-color: var(--violet); box-shadow: var(--glow-violet); }
.niveau-num { font-family: var(--font-pixel); color: var(--violet-clair); font-size: 1.3rem; display: block; margin-bottom: 0.5rem; }
.niveau h3 { margin-bottom: 0.4rem; }
.niveau p { margin: 0; color: var(--gris-texte); font-size: var(--fs-petit); }
.dino-piste { position: absolute; left: 0; top: 0; width: 52px; height: 40px; pointer-events: none; z-index: 2; image-rendering: pixelated; }

/* ==========================================================================
   Sous le capot : compteurs mécaniques, boîte « voir le code »
   ========================================================================== */
.capot { border-bottom: var(--bordure); }
.compteurs { display: grid; gap: var(--gouttiere); }
@media (min-width: 560px) { .compteurs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .compteurs { grid-template-columns: repeat(4, 1fr); } }
.compteur { background: var(--surface-2); border: var(--bordure); padding: var(--espace-3); min-width: 0; }
.compteur-val { font-family: var(--font-pixel); font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); color: var(--blanc); line-height: 1; display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 0.7rem; white-space: nowrap; }
.compteur-val .unite { font-size: 0.85rem; color: var(--violet-clair); }
.odo { display: inline-flex; height: 1em; overflow: hidden; line-height: 1; }
.odo .chiffre { display: block; width: 0.64em; text-align: center; height: 1em; overflow: hidden; }
.odo .sep { display: block; width: 0.4em; text-align: center; }
.odo .roue { display: block; transition: transform 1100ms var(--courbe); will-change: transform; }
.odo .roue span { display: block; height: 1em; line-height: 1; }
.compteur-lib { font-size: var(--fs-petit); color: var(--gris-texte); margin: 0; }
.capot-note { margin: var(--espace-3) 0 var(--espace-4); color: var(--gris-texte); font-size: var(--fs-petit); max-width: 70ch; }
.capot-actions { display: flex; flex-wrap: wrap; gap: var(--espace-2); }

.code-dialog {
  background: var(--surface-1); color: var(--blanc); border: 1px solid var(--violet); padding: 0;
  width: min(94vw, 960px); max-height: 86vh; box-shadow: var(--glow-violet-fort); margin: auto;
}
.code-dialog::backdrop { background: rgba(0, 0, 0, 0.78); }
.code-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem var(--espace-3); border-bottom: var(--bordure); flex-wrap: wrap; }
.code-tete .pixel { margin: 0; }
.code-corps { margin: 0; padding: var(--espace-3); font-size: 0.78rem; line-height: 1.55; overflow: auto; max-height: 66vh; color: var(--gris-texte); white-space: pre; tab-size: 2; }
.code-corps .t { color: var(--violet-clair); }
.code-corps .a { color: #5A22D6; }
.code-corps .c { color: #6E6A85; }
.code-corps .x { color: var(--blanc); }

/* ==========================================================================
   Contact : terminal puis module Cal.com
   ========================================================================== */
.contact { background: var(--surface-1); }
.contact-grille { display: grid; gap: var(--espace-5); align-items: start; }
@media (min-width: 900px) { .contact-grille { grid-template-columns: 1fr 1.15fr; } }
.contact-grille > * { min-width: 0; }
.contact .pixel-tete { display: block; margin-bottom: var(--espace-2); }
.contact .terminal { margin: var(--espace-2) 0 var(--espace-3); min-height: 6em; }
.contact .intro { margin-bottom: var(--espace-3); }
.contact-email { font-family: var(--font-titre); font-weight: 700; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); color: var(--blanc); text-decoration: none; display: inline-block; overflow-wrap: anywhere; }
.contact-email:hover { color: var(--violet-clair); }
.contact-note { margin: var(--espace-2) 0 0; color: var(--gris-texte); font-size: var(--fs-petit); max-width: 48ch; }
.cal-cadre { position: relative; min-height: 440px; background: var(--noir); border: var(--bordure); transition: border-color var(--duree) var(--courbe); }
.cal-cadre.charge { border-color: var(--violet); }
.cal-cadre.charge .cal-attente { display: none; }
.cal-attente { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--espace-2); padding: var(--espace-4); }
.cal-attente .grand { font-family: var(--font-titre); font-weight: 700; font-size: 1.4rem; margin: 0; }
.cal-attente p { margin: 0; color: var(--gris-texte); font-size: var(--fs-petit); max-width: 42ch; }
.cal-attente .grille-fantome { width: 100%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: var(--espace-2); }
.cal-attente .grille-fantome span { display: block; height: 22px; background: var(--surface-2); border: 1px solid var(--gris-ligne); }
.cal-attente .grille-fantome span.on { background: var(--violet-sombre); border-color: var(--violet); }
.cal-inline { min-height: 440px; }

/* ==========================================================================
   Pages secondaires
   ========================================================================== */
.page-jouer .jouer-cadre { position: relative; height: min(68vh, 560px); min-height: 320px; background: var(--noir); border: var(--bordure); }
.jouer-cadre canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.jouer-barre { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; align-items: center; justify-content: space-between; padding: var(--espace-3) 0; }
.jouer-barre .boutons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.jouer-tactile { display: none; gap: var(--espace-2); margin-top: var(--espace-2); }
@media (pointer: coarse) { .jouer-tactile { display: flex; } .jouer-tactile .btn { flex: 1; min-height: 56px; } }
.jouer-regles { margin-top: var(--espace-5); }
.jouer-regles dl { display: grid; gap: 0.8rem 1.4rem; grid-template-columns: max-content 1fr; margin: 0; align-items: baseline; }
.jouer-regles dt { font-family: var(--font-pixel); font-size: var(--fs-pixel); text-transform: uppercase; color: var(--violet-clair); letter-spacing: 0.06em; }
.jouer-regles dd { margin: 0; color: var(--gris-texte); font-size: var(--fs-petit); }
.jouer-regles .kbd { margin-right: 0.3rem; }
@media (max-width: 560px) { .jouer-regles dl { grid-template-columns: 1fr; gap: 0.3rem; } .jouer-regles dd { margin-bottom: 0.6rem; } }

.fiche-media { aspect-ratio: 16 / 9; background: var(--surface-1); border: var(--bordure); display: grid; place-items: center; margin-bottom: var(--espace-5); text-align: center; padding: var(--espace-3); }
.fiche-media p { margin: 0; color: var(--gris-texte); max-width: 40ch; }
.fiche-grille { display: grid; gap: var(--espace-5); align-items: start; }
@media (min-width: 900px) { .fiche-grille { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } }
.fiche-aside { background: var(--surface-2); border: var(--bordure); padding: var(--espace-3); position: sticky; top: calc(var(--header-h) + 16px); }
.fiche-aside dl { margin: 0; display: grid; gap: 0.9rem; }
.fiche-aside dt { font-family: var(--font-pixel); font-size: var(--fs-pixel); text-transform: uppercase; color: var(--violet-clair); letter-spacing: 0.06em; }
.fiche-aside dd { margin: 0.25rem 0 0; color: var(--gris-texte); font-size: var(--fs-petit); }
.fiche-aside .projet-technos { margin: 0.4rem 0 0; padding: 0; }
.fiche-suivant { margin-top: var(--espace-5); padding-top: var(--espace-4); border-top: var(--bordure); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

.page-404 .p404 { min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding-block: var(--espace-5); }
.page-404 .p404 .container { width: 100%; }   /* margin auto dans un flex : sinon le conteneur se rétrécit à son contenu */
.p404 .code { font-family: var(--font-pixel); font-size: clamp(4rem, 12vw, 8.5rem); color: var(--violet); line-height: 1; margin: 0 0 var(--espace-2); }
.p404 h1 { margin-bottom: 0.3em; }
.p404 .intro { margin-bottom: var(--espace-3); }
.chute-cadre { position: relative; height: 220px; margin: var(--espace-3) 0 var(--espace-4); border-bottom: var(--bordure); }
.chute-cadre canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.p404 .hero-ctas { margin: 0; }

/* Pendant la séquence de démarrage, le logo du header attend que le logo animé se range */
html.boot .header-logo svg, html.boot .header-logo img { opacity: 0; transition: opacity 200ms var(--courbe) 380ms; }
html.boot .boot-ecran.range ~ .header .header-logo svg, html.boot .boot-ecran.range ~ .header .header-logo img { opacity: 1; }

/* ==========================================================================
   Version multi-pages : bandeau d'appel à l'action, cartes cliquables, page
   services (un bloc par prestation), méthode en bref, atouts.
   ========================================================================== */
.cta-bandeau { position: relative; background: var(--surface-2); border: var(--bordure); padding: var(--espace-4) var(--espace-3); display: grid; gap: var(--espace-3); align-items: center; }
@media (min-width: 900px) { .cta-bandeau { grid-template-columns: minmax(0, 1.6fr) auto; padding: var(--espace-5) var(--espace-4); } }
.cta-bandeau::before, .cta-bandeau::after { content: ""; position: absolute; width: 10px; height: 10px; background: var(--violet); }
.cta-bandeau::before { left: -1px; top: -1px; }
.cta-bandeau::after { right: -1px; bottom: -1px; }
.cta-bandeau h2 { margin-bottom: 0.3em; }
.cta-bandeau p { margin: 0; color: var(--gris-texte); max-width: 58ch; }
.cta-actions { display: flex; flex-direction: column; gap: var(--espace-2); align-items: flex-start; min-width: 0; }
.cta-actions .contact-email { font-size: 1.15rem; }

a.carte { text-decoration: none; color: inherit; }
a.carte:hover { color: inherit; }
.carte .lien-fleche { margin-top: auto; padding-top: 0.5rem; }

.service-bloc { display: grid; gap: var(--espace-3); padding-block: var(--espace-5); border-top: var(--bordure); scroll-margin-top: calc(var(--header-h) + 16px); }
.service-bloc:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .service-bloc { grid-template-columns: 200px minmax(0, 1fr); gap: var(--espace-5); } }
.service-bloc .service-icone { width: 96px; height: 96px; }
.service-bloc .service-icone svg { width: 96px; height: 96px; }
.service-bloc h2 { margin-bottom: 0.4em; }
.en-clair { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: baseline; margin: 0 0 var(--espace-3); font-family: var(--font-titre); font-weight: 600; font-size: 1.15rem; color: var(--blanc); }
.en-clair .pixel { flex: none; }
.service-bloc p { color: var(--gris-texte); max-width: 64ch; }
.service-bloc ul { list-style: none; margin: 0 0 var(--espace-3); padding: 0; display: grid; gap: 0.45rem; color: var(--gris-texte); }
.service-bloc li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--violet); margin-right: 0.6rem; vertical-align: 0.1em; }
@media (hover: hover) and (pointer: fine) {
  .service-bloc:hover .service-icone .f1 { animation: frame-a 640ms steps(1, end) infinite; }
  .service-bloc:hover .service-icone .f2 { animation: frame-b 640ms steps(1, end) infinite; }
}

.methode-bref { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 var(--espace-4); padding: 0; list-style: none; }
.methode-bref .tag { font-size: 0.8rem; padding: 0.55em 0.85em; }
.methode-bref .tag b { color: var(--violet-clair); font-weight: 400; margin-right: 0.5em; }

.atouts { display: grid; gap: var(--gouttiere); }
@media (min-width: 640px) { .atouts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .atouts { grid-template-columns: repeat(4, 1fr); } }
.atout { border: var(--bordure); background: var(--surface-2); padding: var(--espace-3); min-width: 0; }
.atout .pixel { display: block; margin-bottom: 0.5rem; }
.atout h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.atout p { margin: 0; color: var(--gris-texte); font-size: var(--fs-petit); }

/* ==========================================================================
   Local (Caen, Normandie, le groupe), FAQ, cartes de projet à image directe
   ========================================================================== */
.local { border-top: var(--bordure); border-bottom: var(--bordure); }
.duo-local { display: grid; gap: var(--espace-5); align-items: start; }
@media (min-width: 900px) { .duo-local { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); } }
.duo-local > * { min-width: 0; }
.duo-local .pixel { display: block; margin-bottom: var(--espace-2); }
.duo-local h2 { margin-bottom: 0.45em; }
.duo-local .intro { margin-bottom: var(--espace-2); }
.duo-local .intro a { color: var(--blanc); }
.liste-zones { list-style: none; margin: var(--espace-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.liste-zones li { border: 1px solid var(--gris-ligne); background: var(--surface-2); padding: 0.4em 0.8em; font-family: var(--font-pixel); font-size: var(--fs-pixel); text-transform: uppercase; letter-spacing: 0.05em; color: var(--gris-texte); }
.liste-zones li:first-child { border-color: var(--violet); color: var(--violet-clair); }
.carte-groupe { position: relative; background: var(--surface-2); border: 1px solid var(--violet); padding: var(--espace-4) var(--espace-3); box-shadow: var(--glow-violet); }
.carte-groupe .pixel { display: block; margin-bottom: var(--espace-2); }
.carte-groupe h3 { font-size: 1.4rem; margin-bottom: 0.4em; }
.carte-groupe p { color: var(--gris-texte); margin-bottom: var(--espace-3); }

.faq { max-width: 860px; display: grid; gap: 0.6rem; }
.faq-item { border: var(--bordure); background: var(--surface-2); }
.faq-item summary { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem var(--espace-3); font-family: var(--font-titre); font-weight: 600; font-size: 1.05rem; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: var(--espace-3); top: 50%; transform: translateY(-50%); font-family: var(--font-pixel); color: var(--violet); font-size: 1.1rem; }
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { border-bottom: var(--bordure); color: var(--violet-clair); }
.faq-item p { margin: 0; padding: 1rem var(--espace-3) 1.2rem; color: var(--gris-texte); }
.faq-item summary:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }

.projet-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 320ms var(--courbe); }
div.projet { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .projet:hover .projet-media img { transform: scale(1.03); }
}

/* Bulle de question (accueil, « WordPress ou sur mesure ») : Exe pose la question, queue en escalier de pixels */
.bulle { position: relative; margin: var(--espace-4) 0 calc(var(--espace-4) + 60px); border: 1px solid var(--violet); background: var(--surface-2); padding: var(--espace-3); max-width: 900px; box-shadow: 0 var(--px) 0 var(--violet-sombre); }
.bulle .pixel { display: block; margin-bottom: 0.6rem; }
.bulle p:last-child { margin: 0; color: var(--gris-texte); }
.bulle a { color: var(--blanc); }
.bulle::before { content: ""; position: absolute; left: 56px; top: 100%; width: 16px; height: 16px; background: var(--violet); clip-path: polygon(0 0, 100% 0, 100% 25%, 75% 25%, 75% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 100%, 0 100%); }
.bulle::after { content: ""; position: absolute; left: 16px; top: calc(100% + 20px); width: 4px; height: 4px; background: transparent; box-shadow: 36px 0px 0 0 var(--violet), 40px 0px 0 0 var(--violet), 44px 0px 0 0 var(--violet), 36px 4px 0 0 var(--violet), 40px 4px 0 0 var(--blanc), 44px 4px 0 0 var(--violet), 48px 4px 0 0 var(--violet), 36px 8px 0 0 var(--violet), 40px 8px 0 0 var(--violet), 32px 12px 0 0 var(--violet), 36px 12px 0 0 var(--violet), 32px 16px 0 0 var(--violet), 36px 16px 0 0 var(--violet), 16px 20px 0 0 var(--violet), 20px 20px 0 0 var(--violet), 24px 20px 0 0 var(--violet), 28px 20px 0 0 var(--violet), 32px 20px 0 0 var(--violet), 36px 20px 0 0 var(--violet), 8px 24px 0 0 var(--violet), 12px 24px 0 0 var(--violet), 16px 24px 0 0 var(--violet), 20px 24px 0 0 var(--violet), 24px 24px 0 0 var(--violet), 28px 24px 0 0 var(--violet), 32px 24px 0 0 var(--violet), 36px 24px 0 0 var(--violet), 40px 24px 0 0 var(--violet), 0px 28px 0 0 var(--violet), 4px 28px 0 0 var(--violet), 8px 28px 0 0 var(--violet), 12px 28px 0 0 var(--violet), 16px 28px 0 0 var(--violet), 20px 28px 0 0 var(--violet), 24px 28px 0 0 var(--violet), 28px 28px 0 0 var(--violet), 32px 28px 0 0 var(--violet), 36px 28px 0 0 var(--violet), 12px 32px 0 0 var(--violet), 16px 32px 0 0 var(--violet), 32px 32px 0 0 var(--violet), 36px 32px 0 0 var(--violet), 12px 36px 0 0 var(--violet), 16px 36px 0 0 var(--violet), 32px 36px 0 0 var(--violet), 36px 36px 0 0 var(--violet); }
@media (max-width: 560px) { .bulle { margin-bottom: calc(var(--espace-3) + 60px); } }
.liste-promesses { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; color: var(--gris-texte); font-size: var(--fs-petit); }
.liste-promesses li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--violet); margin-right: 0.6rem; vertical-align: 0.1em; }
.liste-promesses b { color: var(--blanc); font-weight: 600; }
.compteur-lib b { color: var(--blanc); font-weight: 600; display: block; margin-bottom: 0.2rem; }
@media (min-width: 1000px) { .compteurs { grid-template-columns: repeat(5, 1fr); } }
/* Chiffres d'une fiche projet : trois par ligne dans la colonne de texte ; six chiffres, deux par ligne sur téléphone */
@media (min-width: 700px) { .compteurs.fiche-scores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .compteurs.fiche-scores-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Quatre chiffres mesurés : deux lignes de deux à toutes les largeurs */
.compteurs.fiche-scores.fiche-scores-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) and (max-width: 999px) { .compteurs { grid-template-columns: repeat(2, 1fr); } .compteur:last-child { grid-column: 1 / -1; } }

/* Pied de page : adresse ; pages légales longues (CGV) */
.footer-adresse { margin: 0.6rem 0 0; color: var(--gris-texte); }
.page-cgv .prose h2 { font-size: 1.25rem; margin-top: var(--espace-4); }
.page-cgv .prose h3 { font-size: 1.05rem; }
.page-cgv .prose p, .page-cgv .prose li { font-size: var(--fs-petit); }
.page-cgv .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-petit); margin: var(--espace-2) 0; }
.page-cgv .prose th, .page-cgv .prose td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: var(--bordure); vertical-align: top; color: var(--gris-texte); }
.page-cgv .prose th { color: var(--blanc); }

/* ==========================================================================
   Réalisations publiées, fiches avec chiffres, page « Le studio »
   ========================================================================== */
.fiche-media { padding: 0; display: block; text-decoration: none; }
.fiche-media img { display: block; width: 100%; height: auto; }
.fiche-scores { margin: var(--espace-2) 0 var(--espace-2); }
.fiche-scores .compteur-val { font-family: var(--font-pixel); }
.page-fiche .prose ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.page-fiche .prose li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--violet); margin-right: 0.6rem; vertical-align: 0.1em; }
.projet-appel { border-style: dashed; }
.projet-appel .projet-media { display: flex; align-items: center; justify-content: center; background: var(--surface-2); }
.projet-appel-texte { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; text-align: center; padding: var(--espace-3); }
.projet-appel-texte strong { font-family: var(--font-titre); font-size: 1.6rem; color: var(--blanc); }
.projet-appel-texte > span:last-child { color: var(--gris-texte); font-size: var(--fs-petit); }
.equipe { display: grid; gap: var(--gouttiere); }
@media (min-width: 640px) { .equipe { grid-template-columns: repeat(2, 1fr); } }
.portrait { background: var(--surface-2); border: var(--bordure); display: flex; flex-direction: column; min-width: 0; }
.portrait img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-bottom: var(--bordure); filter: saturate(0.9); }
.portrait-corps { padding: var(--espace-3); display: flex; flex-direction: column; gap: 0.6rem; }
.portrait-corps .pixel { margin: 0; }
.portrait-corps h3 { margin: 0; font-size: 1.4rem; }
.portrait-corps p { margin: 0; color: var(--gris-texte); }
/* Portraits plus petits (Loïck, 14 octobre 2026) : photo carrée de 200 px, à côté du texte à partir de 640 px */
.portrait img { width: 200px; max-width: 100%; }
@media (min-width: 640px) {
  .portrait { flex-direction: row; align-items: flex-start; }
  .portrait img { flex: none; border-bottom: 0; border-right: var(--bordure); }
}
@media (max-width: 639px) { .portrait img { margin: var(--espace-3) var(--espace-3) 0; border: var(--bordure); } }
.chiffres-groupe { margin-top: var(--espace-4); }
.chiffres-groupe .compteur-val { font-family: var(--font-pixel); }
a.carte .lien-fleche { color: var(--violet-clair); }
.histoire .tag { font-size: 0.85rem; padding: 0.6em 0.9em; white-space: normal; }
@media (min-width: 1000px) { .chiffres-groupe { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   Soutiens du groupe : logos sur tuiles blanches (les logos sont sombres),
   même mur que sur le site du groupe. Aide de la Région : ligne « bon à savoir ».
   ========================================================================== */
.soutiens { margin-top: var(--espace-4); }
.soutiens .pixel { display: block; margin-bottom: var(--espace-2); }
.soutiens-liste { display: flex; flex-wrap: wrap; gap: var(--espace-3) var(--espace-4); align-items: center; list-style: none; margin: 0; padding: 0; }
.soutiens-liste li { display: flex; align-items: center; }
.soutiens-liste img { height: 40px; width: auto; display: block; opacity: 0.72; filter: brightness(0); }   /* logos blancs, foncés sur le site clair */
@media (hover: hover) and (pointer: fine) { .soutiens-liste img { transition: opacity 200ms var(--courbe); } .soutiens-liste li:hover img { opacity: 1; } }
@media (max-width: 560px) { .soutiens-liste { gap: var(--espace-2) var(--espace-3); } .soutiens-liste img { height: 28px; } }
.aide-ligne { margin: var(--espace-2) 0 0; color: var(--gris-texte); max-width: 64ch; }
.aide-ligne a { color: var(--blanc); }

/* ==========================================================================
   Hero : les fondateurs à droite du premier bandeau, deux portraits en
   éventail (cadres blancs qui se chevauchent, légèrement de travers) ;
   sur mobile, l'éventail passe en petit sous le texte.
   ========================================================================== */
.hero-texte { min-width: 0; }
.hero-texte > * { max-width: 960px; }
.hero-equipe { margin-top: var(--espace-4); }
.hero-duo { position: relative; width: 220px; aspect-ratio: 1 / 1; }
.duo-carte { position: absolute; width: 66%; display: block; background: #FFFFFF; padding: 5px; box-shadow: 0 var(--px) 0 var(--violet-sombre), 0 18px 40px rgba(18, 16, 26, 0.22); transition: transform 240ms var(--courbe); }
.duo-carte img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.duo-carte-a { left: 0; top: 0; transform: rotate(-6deg); z-index: 1; }
.duo-carte-b { right: 0; bottom: 0; transform: rotate(4.5deg); z-index: 2; }
.duo-carte:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .hero-duo:hover .duo-carte-a { transform: rotate(-8deg) translate(-4px, -4px); }
  .hero-duo:hover .duo-carte-b { transform: rotate(3deg) translate(4px, -4px); }
}
.hero-duo-legende { margin: var(--espace-2) 0 0; display: flex; flex-direction: column; gap: 0.2rem; font-family: var(--font-titre); font-weight: 700; }
.hero-duo-legende a { color: var(--blanc); text-decoration: none; }
.hero-duo-legende a:hover { color: var(--violet-clair); }
.hero-duo-legende .pixel { color: var(--violet-clair); font-weight: 400; }
@media (min-width: 960px) {
  .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--espace-5); }
  .hero-inner > * { max-width: none; }
  .hero-equipe { margin-top: 0; padding: 12px; }
  .hero-duo { width: clamp(240px, 24vw, 330px); }
  .hero-duo-legende { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .duo-carte { transition: none; } }

/* ==========================================================================
   Podium du jeu (page Jouer) : trois marches en pixels, bandeau métal
   (or, argent, bronze), coupe dorée sur la première, médailles sur les
   autres ; la première place au milieu, plus haute.
   ========================================================================== */
.podium { margin-top: var(--espace-4); }
.podium .pixel { display: block; margin-bottom: var(--espace-2); }
.podium h2 { font-size: 1.5rem; margin-bottom: var(--espace-3); }
.podium-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espace-2); align-items: end; }
.podium-place { --metal: #9AA0AA; --metal-sombre: #5C6270; --metal-clair: #D5D9E0; position: relative; background: var(--surface-2); border: 1px solid var(--gris-ligne); border-top: 0; padding: calc(var(--espace-3) + 12px) var(--espace-2) var(--espace-3); text-align: center; min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3rem; }
.podium-place::before { content: ""; position: absolute; left: -1px; right: -1px; top: 0; height: 12px; background: repeating-linear-gradient(90deg, var(--metal) 0 8px, var(--metal-clair) 8px 12px); box-shadow: inset 0 -4px 0 var(--metal-sombre); }
.podium-place[data-rang="1"] { --metal: #F5C542; --metal-sombre: #B8891A; --metal-clair: #FFE08A; order: 2; min-height: 250px; border-color: var(--violet); box-shadow: 0 var(--px) 0 var(--violet-sombre), var(--glow-violet); }
.podium-place[data-rang="2"] { --metal: #C9CFD8; --metal-sombre: #8A93A1; --metal-clair: #F4F6F8; order: 1; min-height: 220px; }
.podium-place[data-rang="3"] { --metal: #C67B3B; --metal-sombre: #8A5426; --metal-clair: #EDB27A; order: 3; }
.podium-icone { display: block; width: 56px; height: 44px; margin: 0 auto 0.5rem; }
.podium-place[data-rang="1"] .podium-icone { width: 72px; height: 54px; }
.podium-icone svg { display: block; width: 100%; height: 100%; }
.podium-place.libre .podium-icone { opacity: 0.35; }
.podium-rang { color: var(--metal); }
.podium-pseudo { font-family: var(--font-titre); font-weight: 700; font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); line-height: 1; letter-spacing: 0.06em; }
.podium-score { color: var(--blanc); }
.podium-date { color: var(--gris-texte); font-size: var(--fs-petit); }
.podium-place.libre .podium-pseudo { color: var(--gris-texte); font-size: 1.1rem; letter-spacing: 0; }
@media (max-width: 560px) { .podium-liste { grid-template-columns: 1fr; } .podium-place, .podium-place[data-rang] { min-height: 0; order: initial; } }

/* ==========================================================================
   Aperçus des sites réalisés : fenêtre de navigateur et téléphone en pixels.
   La page défile dans l'écran : en boucle sur les fiches, au survol de la
   souris sur les cartes. Distance de défilement (--defile) calculée par main.js.
   ========================================================================== */
.fenetre { position: relative; display: block; background: var(--surface-2); border: 1px solid var(--gris-ligne); box-shadow: 0 var(--px) 0 var(--violet-sombre), 0 28px 70px rgba(18, 16, 26, 0.2); text-decoration: none; color: inherit; }
.fenetre-barre { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; background: #EDE8FD; border-bottom: 1px solid var(--gris-ligne); }
.fenetre-points { display: flex; gap: 6px; flex: none; }
.fenetre-points i { display: block; width: 8px; height: 8px; background: var(--gris-ligne); }
.fenetre-points i:first-child { background: var(--violet); }
.fenetre-url { flex: 1; min-width: 0; height: 20px; display: flex; align-items: center; gap: 7px; padding: 0 10px; background: var(--noir); border: 1px solid var(--gris-ligne); color: var(--gris-texte); font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fenetre-url::before { content: ""; flex: none; width: 7px; height: 8px; background: var(--violet-clair); clip-path: polygon(1px 3px, 1px 1px, 2px 1px, 2px 0, 5px 0, 5px 1px, 6px 1px, 6px 3px, 7px 3px, 7px 8px, 0 8px, 0 3px, 2px 3px, 2px 2px, 5px 2px, 5px 3px); }
.fenetre-ecran { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: #FFFFFF; }
.fenetre-ecran img, .telephone-ecran img { display: block; width: 100%; height: auto; transform: translateY(0); }
@media (hover: hover) and (pointer: fine) { a.fenetre:hover { border-color: var(--violet); } }
a.fenetre:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; }

/* Fiche : la fenêtre et le téléphone qui la chevauche en bas à droite */
.apercu { position: relative; padding: 0 9% 7% 0; margin-bottom: var(--espace-5); }
.telephone { position: absolute; right: 0; bottom: 0; width: 21%; z-index: 2; filter: drop-shadow(0 var(--px) 0 var(--violet-sombre)) drop-shadow(0 24px 40px rgba(18, 16, 26, 0.25)); }
.telephone-corps { position: relative; background: #12101A; padding: 14px 7px 16px; clip-path: polygon(8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px), 0 8px, 4px 8px, 4px 4px, 8px 4px); box-shadow: inset 0 0 0 1px var(--gris-ligne); }
.telephone-corps::before { content: ""; position: absolute; top: 5px; left: 50%; width: 22%; height: 4px; transform: translateX(-50%); background: var(--gris-ligne); }
.telephone-ecran { display: block; overflow: hidden; aspect-ratio: 9 / 19; background: #FFFFFF; }
@media (max-width: 700px) { .apercu { padding: 0 13% 12% 0; } .telephone { width: 31%; } .telephone-corps { padding: 10px 5px 12px; } .fenetre-barre { height: 26px; gap: 8px; padding: 0 8px; } .fenetre-url { height: 16px; font-size: 8px; } }

/* Défilement en boucle sur les fiches : piloté par main.js (animation construite avec la distance mesurée en pixels) */

/* Cartes : petite fenêtre, la page défile au survol de la souris et remonte ensuite */
.projet-media.projet-apercu { aspect-ratio: auto; display: flex; flex-direction: column; background: var(--surface-2); }
.projet-apercu .fenetre-ecran { flex: none; }
.projet-apercu .fenetre-ecran img { position: static; inset: auto; height: auto; object-fit: fill; transition: transform 1.2s cubic-bezier(0.45, 0, 0.25, 1); }
.projet-apercu .projet-attente { top: 34px; }
@media (hover: hover) and (pointer: fine) { .projet:hover .projet-apercu .fenetre-ecran img { transform: translateY(var(--defile, 0px)); transition-duration: 6s; } }

@media (prefers-reduced-motion: reduce) { .apercu img { animation: none !important; } .projet-apercu .fenetre-ecran img { transition: none !important; transform: none !important; } }
html.a11y-sans-animation .apercu img { animation: none !important; }
html.a11y-sans-animation .projet-apercu .fenetre-ecran img { transition: none !important; transform: none !important; }