/* ═══════════════════════════════════════════════════════════════
   Aikadamai — feuille de style unique
   Palette sombre, accent violet → cyan, typographie Space Grotesk.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --fond:        #07080d;
  --fond-2:      #0c0e16;
  --carte:       rgba(255, 255, 255, .028);
  --bord:        rgba(255, 255, 255, .085);
  --bord-fort:   rgba(255, 255, 255, .16);

  --texte:       #eef0f6;
  --texte-doux:  #a2a8bd;
  --texte-faible:#6d7489;

  --violet:      #8b6cff;
  --cyan:        #2ee6d6;
  --accent-flou: rgba(139, 108, 255, .32);

  --large:       1180px;
  --rayon:       18px;
  --rayon-s:     11px;

  --display: "Space Grotesk", system-ui, sans-serif;
  --texte-f: "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--texte-f);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* LA REMISE À ZÉRO VA JUSQU'AU h6, ET ELLE S'ARRÊTAIT AU h3. Le site n'était jamais descendu
   plus bas ; le jour où les fiches de réalisation sont passées en h4 — parce qu'un titre de
   famille avait pris le h3 —, elles ont récupéré d'un coup la marge ET la police par défaut du
   navigateur : un titre en Inter, décalé d'un tiers de ligne, au milieu d'une page en Space
   Grotesk. Une remise à zéro qui ne couvre pas tous les niveaux est une remise à zéro qui
   attend le premier niveau qu'on n'avait pas prévu. */
h1, h2, h3, h4, h5, h6 { font-family: var(--display); line-height: 1.12; letter-spacing: -.022em; margin: 0; }
p { margin: 0 0 1em; }
a { color: inherit; }

.conteneur { width: min(100% - 2.5rem, var(--large)); margin-inline: auto; }

/* Lien d'évitement, visible seulement au clavier */
.saut {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--violet); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--rayon-s) 0; font-weight: 600;
}
.saut:focus { left: 0; }

/* ── Fond : taches lumineuses + grille ────────────────────────── */
.aurore { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.tache { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .5; }
.t1 { width: 620px; height: 620px; top: -230px; left: -140px;
      background: radial-gradient(circle, #7a53ff 0%, transparent 68%); }
.t2 { width: 540px; height: 540px; top: 12%; right: -180px;
      background: radial-gradient(circle, #1ea8c9 0%, transparent 68%); opacity: .38; }
.t3 { width: 700px; height: 700px; bottom: -280px; left: 32%;
      background: radial-gradient(circle, #5b3fd6 0%, transparent 70%); opacity: .3; }

body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 78%);
}

/* ── En-tête ──────────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(1.4);
  background: rgba(7, 8, 13, .62);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.entete.collee { border-bottom-color: var(--bord); background: rgba(7, 8, 13, .86); }
.entete-int { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 1rem; }

.marque {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 700; font-size: 1.06rem;
  letter-spacing: -.02em; text-decoration: none;
}
.sigle { width: 25px; height: 25px; display: block; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  padding: .5rem .85rem; border-radius: 9px; text-decoration: none;
  color: var(--texte-doux); font-size: .935rem; font-weight: 500;
  transition: color .18s, background .18s;
}
.nav a:hover { color: var(--texte); background: rgba(255,255,255,.055); }
.nav .nav-cta {
  color: var(--texte);
  border: 1px solid var(--bord-fort);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}
.nav .nav-cta:hover { border-color: var(--violet); box-shadow: 0 0 0 3px var(--accent-flou); }

/* ── Boutons ──────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.5rem; border-radius: 11px; border: 1px solid transparent;
  font-family: var(--texte-f); font-size: .97rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform .16s, box-shadow .22s, border-color .22s, background .22s;
}
.bouton:active { transform: translateY(1px); }
.bouton.primaire {
  color: #0a0713;
  background: linear-gradient(105deg, var(--violet), var(--cyan));
  box-shadow: 0 8px 26px -10px var(--violet);
}
.bouton.primaire:hover { box-shadow: 0 12px 34px -10px var(--violet); transform: translateY(-1px); }
.bouton.primaire span { transition: transform .2s; }
.bouton.primaire:hover span { transform: translateX(3px); }
.bouton.secondaire {
  color: var(--texte); border-color: var(--bord-fort);
  background: rgba(255,255,255,.035);
}
.bouton.secondaire:hover { border-color: var(--violet); background: rgba(139,108,255,.1); }
.bouton.large { width: 100%; padding-block: .95rem; }
.bouton[disabled] { opacity: .55; pointer-events: none; }

/* ── Étiquette mono ───────────────────────────────────────────── */
.etiquette {
  font-family: var(--mono); font-size: .765rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan); margin: 0 0 1.1rem;
  display: inline-flex; align-items: center; gap: .6rem;
}
.etiquette::before {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan));
}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero { padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(3.5rem, 7vw, 6rem); }
.titre {
  font-size: clamp(2.4rem, 5.8vw, 4.35rem);
  font-weight: 700; margin-bottom: 1.6rem; max-width: 22ch;
}
.titre em { font-style: normal; color: var(--texte); position: relative; }
.titre em::after {
  content: ""; position: absolute; left: 0; right: .06em; bottom: .01em; height: .07em;
  background: linear-gradient(90deg, var(--violet), var(--cyan)); opacity: .7; border-radius: 99px;
}
.degrade {
  background: linear-gradient(105deg, var(--violet) 10%, var(--cyan) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chapo { max-width: 62ch; font-size: 1.09rem; color: var(--texte-doux); margin-bottom: 2.3rem; }
.actions { display: flex; flex-wrap: wrap; gap: .85rem; }

.chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; margin: clamp(3rem, 7vw, 5rem) 0 0;
  background: var(--bord); border: 1px solid var(--bord);
  border-radius: var(--rayon); overflow: hidden;
}
.chiffres > div { background: var(--fond-2); padding: 1.5rem 1.4rem; }
.chiffres dt {
  font-family: var(--display); font-size: 2.05rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1;
  background: linear-gradient(120deg, var(--texte), var(--texte-doux));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chiffres dd {
  margin: .55rem 0 0; font-size: .875rem; color: var(--texte-faible);
  font-family: var(--mono); letter-spacing: .01em;
}

/* ── Sections ─────────────────────────────────────────────────── */
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section-tete { max-width: 68ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-tete h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 1rem; }
.section-chapo { color: var(--texte-doux); font-size: 1.045rem; margin: 0; }

/* ── Projets ──────────────────────────────────────────────────── */

/* TROIS FAMILLES, ET LE TITRE DE GROUPE FAIT LE TRI. Sept fiches à la suite se lisaient comme une
   liste, et il fallait ouvrir chacune pour savoir si l'on regardait un logiciel de gestion ou un
   jeu. Le titre sépare ; l'étiquette (.tag) reste sur la fiche, pour celui qui arrive dessus par
   un lien ou qui n'en lit qu'une au milieu des autres. */
.famille-projets + .famille-projets { margin-top: clamp(2.6rem, 5.5vw, 4rem); }
.famille-tete {
  display: flex; align-items: baseline; gap: .5rem 1.1rem; flex-wrap: wrap;
  margin-bottom: 1.3rem; padding-bottom: .9rem; border-bottom: 1px solid var(--bord);
}
.famille-tete h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
.famille-tete p { margin: 0; color: var(--texte-faible); font-size: .93rem; }

.projets { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }

.projet {
  position: relative;
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  padding: clamp(1.6rem, 3.2vw, 2.6rem);
  transition: border-color .28s, transform .28s, box-shadow .28s;
}
.projet::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, var(--violet), transparent 42%, transparent 62%, var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.projet:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -34px rgba(0,0,0,.95); }
.projet:hover::before { opacity: .85; }

.projet-tete {
  display: flex; align-items: flex-start; gap: 1.1rem;
  flex-wrap: wrap; padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--bord); margin-bottom: 1.6rem;
}
.numero {
  font-family: var(--mono); font-size: .8rem; font-weight: 500; color: var(--violet);
  border: 1px solid rgba(139,108,255,.35); background: rgba(139,108,255,.09);
  border-radius: 7px; padding: .3rem .55rem; line-height: 1; margin-top: .35rem;
  flex: none;
}
.projet-tete h4 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.projet-sous { margin: .3rem 0 0; color: var(--texte-doux); font-size: .96rem; }
/* L'ÉTIQUETTE DE FAMILLE — cyan, comme les autres repères de lecture du site, et non violette
   comme le numéro : ce sont deux informations différentes posées côte à côte, et deux pastilles de
   la même couleur se seraient lues comme une seule. */
.tag {
  margin: .7rem 0 0; display: inline-block;
  font-family: var(--mono); font-size: .715rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  color: var(--cyan);
  border: 1px solid rgba(46,230,214,.28); background: rgba(46,230,214,.07);
  border-radius: 99px; padding: .32rem .62rem;
}
.lien-ext {
  margin-left: auto; align-self: center;
  font-family: var(--mono); font-size: .8rem; text-decoration: none;
  color: var(--texte-doux); border: 1px solid var(--bord);
  border-radius: 99px; padding: .42rem .85rem; white-space: nowrap;
  display: inline-flex; gap: .4rem; align-items: center;
  transition: color .2s, border-color .2s, background .2s;
}
.lien-ext:hover { color: var(--cyan); border-color: rgba(46,230,214,.4); background: rgba(46,230,214,.07); }

/* NI LIEN, NI ADRESSE. Ces deux applications-là servent des données de clients : la pastille
   disait « depot-mv.aikadamai.com — accès privé », c'est-à-dire qu'elle publiait le nom de
   l'hôte d'un dépôt privé sur une page d'accueil que tout le monde lit. On garde la mention du
   régime — accès privé —, on retire l'adresse. Même pastille, mais inerte : sans quoi le survol
   promettrait un lien qui n'existe pas. */
.lien-ext.prive { cursor: default; }
.lien-ext.prive:hover { color: var(--texte-doux); border-color: var(--bord); background: none; }

.projet-corps { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: clamp(1.5rem, 3vw, 2.8rem); }
.projet-texte > p:first-child { color: var(--texte-doux); font-size: 1.03rem; }

.faits { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .8rem; }
.faits li { position: relative; padding-left: 1.5rem; color: var(--texte-doux); font-size: .96rem; }
.faits li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 2px;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
}
.faits strong { color: var(--texte); font-weight: 600; }

.projet-cote { display: grid; gap: 1.4rem; align-content: start; }
.mesures { margin: 0; display: grid; gap: 1px; background: var(--bord);
  border: 1px solid var(--bord); border-radius: var(--rayon-s); overflow: hidden; }
.mesures > div { background: var(--fond-2); padding: .85rem 1rem; }
.mesures dt {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-faible);
}
.mesures dd { margin: .3rem 0 0; font-family: var(--display); font-weight: 600; font-size: .99rem; }

/* LA CAPTURE, SUR LES FICHES DE JEUX SEULEMENT. Un jeu se montre ; un logiciel métier montrerait
   les données d'un client. Elle vit dans la COLONNE DE DROITE, au-dessus des mesures : à 268 px
   elle donne le ton d'un écran sans prendre la place du texte, qui est ce qu'on vient lire. En
   pleine largeur elle écrasait la fiche et repoussait les faits sous la ligne de flottaison.
   `loading="lazy"` parce qu'elle ne doit rien coûter à qui n'ouvre pas la page des jeux, et le
   rapport 1200 × 750 est écrit ici : sans `aspect-ratio`, la page saute quand l'image arrive.
   L'espacement vient de la grille de `.projet-cote`. Refaite chaque semaine, voir
   tools/captures.mjs. */
.capture {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 750;
  margin: 0; border: 1px solid var(--bord); border-radius: var(--rayon-s);
  background: var(--fond-2); object-fit: cover; object-position: top center;
}

/* Le lien qui porte la capture : la pastille dit qu'il y a plus grand à voir, sans écrire dessus.
   Elle n'apparaît qu'au survol et au clavier — sur une vignette de 268 px, un cartouche permanent
   mangerait ce qu'on est venu regarder. */
.capture-lien { display: block; position: relative; border-radius: var(--rayon-s); }
.capture-lien::after {
  content: "⤢"; position: absolute; right: .5rem; bottom: .5rem;
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border-radius: 8px; background: rgba(4, 6, 10, .72); color: #fff;
  font-size: .82rem; opacity: 0; transition: opacity .2s;
}
.capture-lien:hover::after, .capture-lien:focus-visible::after { opacity: 1; }
.capture-lien:hover .capture { border-color: var(--bord-fort); }

/* LA VISIONNEUSE. Le lien vers l'image marche sans elle : ce qui suit ne fait que l'ouvrir
   par-dessus la page. `[hidden]` doit l'emporter sur la grille, d'où la règle explicite. */
.visionneuse {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3, 4, 8, .88); backdrop-filter: blur(7px);
}
.visionneuse[hidden] { display: none; }
.visionneuse figure { margin: 0; display: grid; gap: .75rem; max-width: min(1200px, 92vw); }
.visionneuse img {
  display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain;
  border: 1px solid var(--bord-fort); border-radius: var(--rayon); background: var(--fond-2);
}
.visionneuse figcaption {
  margin: 0; font-family: var(--mono); font-size: .8rem; letter-spacing: .01em;
  color: var(--texte-faible); text-align: center;
}
.visionneuse-fermer {
  position: absolute; top: clamp(.8rem, 3vw, 1.6rem); right: clamp(.8rem, 3vw, 1.6rem);
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border: 1px solid var(--bord-fort); border-radius: 50%;
  background: var(--fond-2); color: var(--texte); font-size: 1rem; cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.visionneuse-fermer:hover { border-color: var(--texte-doux); transform: scale(1.06); }

/* Le fond ne défile pas derrière la visionneuse : on y revient au même endroit. */
body.fige { overflow: hidden; }

.puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.puces li {
  font-family: var(--mono); font-size: .745rem; color: var(--texte-doux);
  border: 1px solid var(--bord); border-radius: 6px; padding: .3rem .55rem;
  background: rgba(255,255,255,.025);
}

/* ── Méthode ──────────────────────────────────────────────────── */
.methode { border-top: 1px solid var(--bord); background: rgba(255,255,255,.012); }
.etapes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 1.2rem;
  counter-reset: etape;
}
.etapes li {
  border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 1.7rem 1.5rem; background: var(--carte);
  transition: border-color .25s, background .25s;
}
.etapes li:hover { border-color: var(--bord-fort); background: rgba(255,255,255,.05); }
.etapes .numero { display: inline-block; margin: 0 0 1rem; }
.etapes h3 { font-size: 1.12rem; margin-bottom: .65rem; }
.etapes p { margin: 0; color: var(--texte-doux); font-size: .945rem; }
.etapes code {
  font-family: var(--mono); font-size: .87em; color: var(--cyan);
  background: rgba(46,230,214,.09); border-radius: 4px; padding: .08em .35em;
}

/* ── Contact ──────────────────────────────────────────────────── */
.contact { border-top: 1px solid var(--bord); }
.contact-int { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact-texte h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 1rem; }
.contact-texte p { color: var(--texte-doux); }
.contact-liste { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .7rem; }
.contact-liste li {
  position: relative; padding-left: 1.7rem; color: var(--texte-doux); font-size: .95rem;
}
.contact-liste li::before {
  content: "→"; position: absolute; left: 0; color: var(--violet); font-family: var(--mono);
}

.formulaire {
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014));
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: grid; gap: 1.05rem;
}
.champ { display: grid; gap: .45rem; }
.champ label {
  font-family: var(--mono); font-size: .73rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--texte-doux);
}
.champ .option { text-transform: none; letter-spacing: 0; color: var(--texte-faible); }
.champ input, .champ textarea {
  width: 100%; font-family: inherit; font-size: .97rem; color: var(--texte);
  background: rgba(0,0,0,.32); border: 1px solid var(--bord);
  border-radius: var(--rayon-s); padding: .78rem .95rem; resize: vertical;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--texte-faible); }
.champ input:focus, .champ textarea:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--accent-flou); background: rgba(0,0,0,.45);
}
.champ.erreur input, .champ.erreur textarea { border-color: #ff6b7f; }

.leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.retour { margin: 0; font-size: .92rem; min-height: 1.4em; }
.retour.ok { color: var(--cyan); }
.retour.ko { color: #ff8a99; }

/* Focus clavier homogène */
:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px;
}

/* ── Pied de page ─────────────────────────────────────────────── */
.pied { border-top: 1px solid var(--bord); padding: clamp(2.5rem, 5vw, 3.8rem) 0 2rem; }
.pied-haut {
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.pied-marque p { margin: 1rem 0 0; color: var(--texte-faible); font-size: .9rem; max-width: 34ch; }

.pied-colonnes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.6rem 2rem;
}
.pied-colonnes h2 {
  font-family: var(--mono); font-size: .73rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--texte-faible);
  margin: 0 0 .9rem;
}
.pied-colonnes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pied-colonnes a {
  font-size: .9rem; color: var(--texte-doux); text-decoration: none; transition: color .2s;
}
.pied-colonnes a:hover { color: var(--cyan); }

.pied-bas {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  align-items: center; justify-content: space-between;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem;
  border-top: 1px solid var(--bord);
}
.pied-bas p { margin: 0; font-family: var(--mono); font-size: .8rem; color: var(--texte-faible); }
.pied-bas a { color: var(--texte-doux); text-decoration: none; }
.pied-bas a:hover { color: var(--cyan); }

@media (max-width: 760px) {
  .pied-haut { grid-template-columns: 1fr; }
}

/* ── Apparition au défilement ─────────────────────────────────── */
.anim { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.anim.vu { opacity: 1; transform: none; }

/* ── Adaptations ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .projet-corps { grid-template-columns: 1fr; }
  .contact-int { grid-template-columns: 1fr; }
  .projet-cote { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .nav a:not(.nav-cta) { display: none; }
  .lien-ext { margin-left: 0; width: 100%; justify-content: center; }
  .actions .bouton { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .anim { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Expertise, appels à projet et demandes de devis
   ═══════════════════════════════════════════════════════════════ */

/* ── Cartes d'expertise ───────────────────────────────────────── */
/* Deux colonnes plutôt qu'un remplissage automatique : quatre domaines font
   alors un carré, là où « auto-fit » en laisserait un seul sur la dernière
   ligne — et le texte des cartes respire. */
.expertises {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem;
}
.expertise {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  padding: 1.8rem 1.6rem;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.expertise:hover { border-color: var(--bord-fort); transform: translateY(-3px); box-shadow: 0 24px 54px -34px rgba(0,0,0,.95); }
.expertise h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.expertise > p { color: var(--texte-doux); font-size: .96rem; }
.expertise .faits { margin-top: 0; }
.expertise .lien-fleche { margin-top: auto; padding-top: 1.3rem; }

/* Le titre porte le lien, mais toute la carte est cliquable : la pastille
   couvre la carte entière sans emboîter deux zones cliquables l'une dans l'autre. */
.expertise h3 a { text-decoration: none; }
.expertise h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.expertise h3 a:hover { color: var(--cyan); }

.picto {
  width: 42px; height: 42px; margin-bottom: 1.1rem;
  display: grid; place-content: center;
  border: 1px solid rgba(139,108,255,.32); border-radius: 12px;
  background: rgba(139,108,255,.1); color: var(--violet);
}
.picto svg { width: 21px; height: 21px; display: block; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .04em;
  color: var(--cyan); text-decoration: none;
}
.lien-fleche span { transition: transform .2s; }
.lien-fleche:hover span { transform: translateX(4px); }

/* ── Les deux voies : appel à projet / demande de devis ───────── */
.voies {
  list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 1.2rem;
}
.voie {
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--fond-2); padding: 1.9rem 1.7rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.voie.mise-en-avant {
  border-color: rgba(139,108,255,.42);
  background: linear-gradient(160deg, rgba(139,108,255,.13), rgba(46,230,214,.05) 62%, rgba(255,255,255,.02));
}
.voie h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.voie p { color: var(--texte-doux); font-size: .96rem; }
.voie .bouton { margin-top: auto; align-self: flex-start; }
.voie .delai {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texte-faible); margin: 1.1rem 0 1.4rem;
}

/* ── Pages intérieures : fil d'Ariane et en-tête ──────────────── */
.fil { padding-top: 2.2rem; }
.fil ol {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem;
  font-family: var(--mono); font-size: .78rem; color: var(--texte-faible);
}
.fil li + li::before { content: "/"; margin-right: .5rem; color: var(--texte-faible); }
.fil a { color: var(--texte-doux); text-decoration: none; }
.fil a:hover { color: var(--cyan); }
.fil [aria-current] { color: var(--texte-doux); }

.page-tete { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); }
.page-tete h1 { font-size: clamp(2.05rem, 4.6vw, 3.3rem); margin-bottom: 1.2rem; max-width: 20ch; }
.page-tete .chapo { margin-bottom: 2rem; }

/* ── Blocs de contenu des pages d'expertise ───────────────────── */
.colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.bloc {
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--carte); padding: 1.7rem 1.5rem;
}
.bloc h3 { font-size: 1.08rem; margin-bottom: .8rem; }
.bloc p:last-child, .bloc ul:last-child { margin-bottom: 0; }
.bloc p { color: var(--texte-doux); font-size: .95rem; }

.preuve {
  border: 1px solid var(--bord); border-left: 2px solid var(--violet);
  border-radius: var(--rayon-s); background: rgba(139,108,255,.055);
  padding: 1.3rem 1.5rem; margin: 1.4rem 0 0;
}
.preuve p { margin: 0; color: var(--texte-doux); font-size: .95rem; }
.preuve strong { color: var(--texte); }

/* ── Questions fréquentes (et données structurées FAQ) ────────── */
.faq { display: grid; gap: .8rem; }
.faq details {
  border: 1px solid var(--bord); border-radius: var(--rayon-s);
  background: var(--carte); padding: 1.05rem 1.3rem;
}
.faq details[open] { border-color: var(--bord-fort); }
.faq summary {
  cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 1.01rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cyan); font-family: var(--mono); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: .85rem 0 0; color: var(--texte-doux); font-size: .95rem; }

/* ── Formulaire : natures, listes déroulantes, champs jumelés ─── */
.formulaire-large { max-width: 780px; }

.choix { border: 0; margin: 0; padding: 0; display: grid; gap: .55rem; }
.choix legend {
  font-family: var(--mono); font-size: .73rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--texte-doux); padding: 0; margin-bottom: .1rem;
}
.choix-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; }
.choix-options label {
  display: grid; gap: .2rem; cursor: pointer;
  border: 1px solid var(--bord); border-radius: var(--rayon-s);
  background: rgba(0,0,0,.28); padding: .8rem .95rem;
  transition: border-color .2s, background .2s;
}
.choix-options input { position: absolute; opacity: 0; width: 0; height: 0; }
.choix-options .titre-choix { font-weight: 600; font-size: .95rem; }
.choix-options .aide { font-size: .82rem; color: var(--texte-faible); }
.choix-options label:hover { border-color: var(--bord-fort); }
.choix-options label:has(input:checked) {
  border-color: var(--violet); background: rgba(139,108,255,.12);
  box-shadow: 0 0 0 1px rgba(139,108,255,.35);
}
.choix-options label:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 3px; }

.champ select {
  width: 100%; font-family: inherit; font-size: .97rem; color: var(--texte);
  background: rgba(0,0,0,.32); border: 1px solid var(--bord);
  border-radius: var(--rayon-s); padding: .78rem .95rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texte-doux) 50%),
                    linear-gradient(135deg, var(--texte-doux) 50%, transparent 50%);
  background-position: calc(100% - 20px) 1.28rem, calc(100% - 14px) 1.28rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color .2s, box-shadow .2s;
}
.champ select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--accent-flou); }
.champ select option { background: var(--fond-2); color: var(--texte); }
.champ.erreur select { border-color: #ff6b7f; }

.champ-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }

.mention { margin: 0; font-size: .82rem; color: var(--texte-faible); }
.mention a { color: var(--texte-doux); }

/* Les trois familles de « Réalisations » tiennent sur une ligne quand la place existe : elles sont
   trois, et deux colonnes en laisseraient une seule au second rang, ce qui la ferait passer pour un
   ajout plutôt que pour l'égale des deux autres. En dessous de 1040 px on retombe sur la grille à
   deux colonnes des expertises, puis sur une seule colonne à 860 px. */
@media (min-width: 1040px) {
  .familles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .expertises, .colonnes { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .champ-duo { grid-template-columns: 1fr; }
}

/* Titre présent pour la structure du document et les moteurs, pas à l'écran. */
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Pages d'information (mentions légales, confidentialité, plan) ─ */
.legal { max-width: 76ch; }
.legal h2 { font-size: 1.3rem; margin: 2.6rem 0 .9rem; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.03rem; margin: 1.6rem 0 .6rem; }
.legal p, .legal li { color: var(--texte-doux); font-size: .98rem; }
.legal ul { margin: 0 0 1em; padding-left: 1.2rem; display: grid; gap: .45rem; }
.legal a { color: var(--cyan); }
.legal dl { display: grid; gap: .8rem; margin: 0 0 1.4rem; }
.legal dt { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
            text-transform: uppercase; color: var(--texte-faible); }
.legal dd { margin: .2rem 0 0; color: var(--texte-doux); }

/* Ce qui reste à renseigner par l'éditeur : visible, et impossible à oublier. */
.a-completer {
  background: rgba(255, 196, 84, .14); color: #ffc454;
  border: 1px dashed rgba(255, 196, 84, .45); border-radius: 5px;
  font-family: var(--mono); font-size: .82em; padding: .1em .45em;
}

.plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.6rem 2rem; }
.plan h2 { margin-top: 0; }
.plan ul { list-style: none; padding: 0; }
.plan a { color: var(--texte-doux); text-decoration: none; }
.plan a:hover { color: var(--cyan); }