@font-face { font-family: "Archivo"; src: url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 400 800; font-stretch: 100% 116%; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/fonts/literata-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/fonts/literata-latin-wght-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("/fonts/martian-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

/* Fond clair uniquement : pas de bascule automatique en sombre. */
:root {
  color-scheme: light;
  --fond: #faf8f3;
  --papier: #ffffff;
  --encre: #16181d;
  --encre-2: #4c5059;
  --encre-3: #646872;
  --filet: #e6e1d6;
  --filet-2: #d4cdbd;
  /* Jaune du logo Atipaq. Toujours en aplat sous un texte foncé, jamais en texte sur fond clair. */
  --jaune: #fcc010;
  --jaune-doux: #ffe9a6;
  --jaune-pale: #fff5d6;
  --vert: #17714a;
  --vert-pale: #e2f1e8;
  --titre: "Archivo", "Arial Narrow", "Helvetica Neue", sans-serif;
  --texte: "Literata", "Iowan Old Style", Georgia, serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --marge: clamp(1rem, 4.5vw, 3.25rem);
  --large: 78rem;
  --pente: -26deg; /* l'inclinaison du A du logo */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 1.0625rem/1.65 var(--texte);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; border-radius: 3px; }
.cadre { max-width: var(--large); margin: 0 auto; padding: 0 var(--marge); }
.etiquette { font-family: var(--mono); font-size: .72rem; font-weight: 450; letter-spacing: .02em; line-height: 1.4; }
.evitement { position: absolute; left: -999px; top: 0; }
.evitement:focus { left: var(--marge); top: .75rem; background: var(--papier); padding: .5rem .8rem; z-index: 5; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ——— En-tête ——— */
.tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.marque { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-family: var(--titre); font-weight: 750; font-stretch: 112%; font-size: 1.12rem; letter-spacing: -.01em; }
.marque svg { width: 1.9rem; height: auto; flex: none; }
.marque span { font-weight: 450; color: var(--encre-2); }
.tete nav { display: flex; gap: clamp(.9rem, 2.6vw, 2rem); font-family: var(--titre); font-size: .95rem; font-weight: 520; white-space: nowrap; }
.tete nav a { text-decoration: none; color: var(--encre-2); }
.tete nav a:hover { color: var(--encre); text-decoration: underline; }
@media (max-width: 34rem) { .tete nav .optionnel { display: none; } }
@media (max-width: 23rem) { .tete nav { gap: .8rem; font-size: .88rem; } .marque { font-size: 1rem; } .marque svg { width: 1.6rem; } }

/* ——— Ouverture ——— */
.ouverture { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2rem, 5vw, 3.5rem); position: relative; overflow-x: clip; }
.ouverture .surtitre { display: inline-flex; align-items: center; gap: .6rem; color: var(--encre-2); margin: 0 0 1.4rem; }
.ouverture .surtitre::before { content: ""; width: .7rem; height: 1rem; background: var(--jaune); transform: skewX(var(--pente)); }
h1 {
  font-family: var(--titre); font-weight: 800; font-stretch: 116%;
  font-size: clamp(2.6rem, 7.4vw, 6.2rem); line-height: .95; letter-spacing: -.035em;
  margin: 0; max-width: 12ch; text-wrap: balance;
}
.surligne { position: relative; z-index: 0; white-space: nowrap; }
.surligne::before {
  content: ""; position: absolute; z-index: -1; left: -.12em; right: -.18em; top: .1em; bottom: .02em;
  background: var(--jaune); transform: skewX(var(--pente)); transform-origin: bottom left;
}
.chapo { font-size: clamp(1.12rem, 1.8vw, 1.32rem); line-height: 1.6; max-width: 37rem; margin: clamp(1.5rem, 3.5vw, 2.4rem) 0 0; }
.chapo + .chapo { margin-top: .8rem; }

.compteurs { display: flex; flex-wrap: wrap; gap: .6rem; margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; padding: 0; list-style: none; }
.compteurs li { display: flex; align-items: baseline; gap: .5rem; background: var(--papier); border: 1px solid var(--filet); border-radius: 999px; padding: .45rem .95rem .45rem .8rem; font-size: .95rem; }
.compteurs b { font-family: var(--titre); font-stretch: 112%; font-weight: 800; font-size: 1.15rem; }

/* Collage des sites en ligne, à droite de l'ouverture (grand écran seulement) */
.collage { display: none; }
@media (min-width: 66rem) {
  .ouverture { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); column-gap: clamp(2rem, 4vw, 4rem); }
  .ouverture > :not(.collage) { grid-column: 1; }
  h1 { font-size: clamp(3rem, 5.4vw, 5.4rem); }
  .collage { display: block; grid-column: 2; grid-row: 1 / span 6; position: relative; align-self: center; height: 31rem; }
  .collage::before { content: ""; position: absolute; left: 30%; right: 4%; top: 8%; bottom: 4%; background: var(--jaune); transform: skewX(var(--pente)); transform-origin: top; }
  .vignette { position: absolute; width: 74%; display: block; background: var(--papier); border: 1.5px solid var(--encre); border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px -24px rgba(22,24,29,.45); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .vignette .barre { padding: .4rem .6rem; }
  .vignette .barre i { width: .45rem; height: .45rem; }
  .vignette img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
  .vignette.v1 { left: 0; top: 0; transform: rotate(-3deg); z-index: 3; }
  .vignette.v2 { right: 2%; top: 32%; transform: rotate(2.5deg); z-index: 2; }
  .vignette.v3 { left: 8%; bottom: 0; transform: rotate(-1deg); z-index: 1; }
  .vignette:hover { transform: rotate(0) scale(1.03); z-index: 4; }
}

/* ——— Frise ——— */
.frise-bloc { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 8vw, 5.5rem); }
.frise-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 1rem; }
.frise-tete h2 { font-family: var(--titre); font-stretch: 108%; font-weight: 700; font-size: 1.05rem; margin: 0; letter-spacing: -.005em; }
.legende { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; padding: 0; list-style: none; color: var(--encre-2); }
.legende li { display: inline-flex; align-items: center; gap: .45rem; }
.legende i { display: inline-block; width: .55rem; height: .95rem; transform: skewX(var(--pente)); }

.frise { position: relative; height: 10.5rem; border-bottom: 2px solid var(--encre); margin-top: 2.2rem; }
.frise .mois { position: absolute; bottom: -1.9rem; transform: translateX(-50%); color: var(--encre-3); white-space: nowrap; }
.frise .mois::before { content: ""; position: absolute; left: 50%; top: -.55rem; width: 1px; height: .45rem; background: var(--encre); }
.essai-trait {
  position: absolute; bottom: calc(var(--rang, 0) * 1.55rem + 2px); left: var(--x);
  width: clamp(.5rem, 1.1vw, .8rem); height: 1.3rem; margin-left: -.35rem;
  transform: skewX(var(--pente)); transform-origin: bottom left;
  border: 1.5px solid var(--encre); background: var(--papier);
  transition: transform .2s ease, background-color .2s ease;
}
.essai-trait.en-ligne { background: var(--jaune); border-color: var(--encre); height: 2.4rem; }
.essai-trait.arrete { border-color: var(--filet-2); background: var(--filet); }
.essai-trait.interne { background: var(--encre); }
.essai-trait:hover, .essai-trait:focus-visible { transform: skewX(var(--pente)) translateY(-4px); background: var(--jaune); }
.essai-trait::after {
  content: attr(data-nom); position: absolute; left: 50%; bottom: calc(100% + .5rem);
  transform: skewX(calc(var(--pente) * -1)) translateX(-50%);
  background: var(--encre); color: var(--papier); font: 450 .7rem/1.3 var(--mono); padding: .35rem .5rem; border-radius: 4px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.essai-trait:hover::after, .essai-trait:focus-visible::after { opacity: 1; }
.essai-trait.a-droite::after { left: auto; right: -.4rem; transform: skewX(calc(var(--pente) * -1)); }
.essai-trait.a-gauche::after { left: -.4rem; transform: skewX(calc(var(--pente) * -1)); }
.frise .nom-fixe {
  position: absolute; left: var(--x); bottom: calc(var(--rang, 0) * 1.55rem + 2.9rem);
  font: 700 .82rem/1.15 var(--titre); font-stretch: 108%; white-space: nowrap; transform: translateX(-30%);
  pointer-events: none;
}
.frise .nom-fixe::after { content: ""; display: block; width: 1px; height: .5rem; background: var(--encre); margin: .2rem 0 0 30%; }
.frise .nom-fixe.a-droite { transform: translateX(-85%); text-align: right; }
.frise .nom-fixe.a-droite::after { margin-left: 85%; }
@media (max-width: 40rem) {
  .frise { height: 12rem; }
  .frise .nom-fixe { font-size: .72rem; }
  .frise .mois { font-size: .62rem; }
}

/* ——— Titres de section ——— */
.section { padding-block: clamp(3rem, 8vw, 6rem); }
.section-tete { display: grid; gap: .8rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); max-width: 46rem; }
.section-tete .etiquette { color: var(--encre-2); display: inline-flex; align-items: center; gap: .55rem; }
.section-tete .etiquette::before { content: ""; width: .55rem; height: .9rem; background: var(--jaune); transform: skewX(var(--pente)); }
h2 { font-family: var(--titre); font-weight: 780; font-stretch: 112%; font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.section-tete p { margin: 0; color: var(--encre-2); font-size: 1.08rem; }

/* ——— Projets en ligne ——— */
.en-ligne { display: grid; gap: clamp(3.5rem, 9vw, 7rem); }
.projet { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.2rem); align-items: center; scroll-margin-top: 1.5rem; }
.projet > * { min-width: 0; }
@media (min-width: 60rem) {
  .projet { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .projet:nth-child(even) .fenetre-lien { order: 2; }
}
.fenetre {
  margin: 0; background: var(--papier); border: 1.5px solid var(--encre); border-radius: 12px; overflow: hidden;
  box-shadow: 10px 10px 0 var(--jaune);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s cubic-bezier(.2,.7,.2,1);
}
.fenetre-lien { display: block; text-decoration: none; margin-right: 10px; }
.fenetre-lien:hover .fenetre { transform: translate(-3px, -3px); box-shadow: 14px 14px 0 var(--jaune); }
.barre { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem; border-bottom: 1px solid var(--filet); background: #f4f1ea; }
.barre i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--filet-2); }
.barre span { min-width: 0; margin-left: .6rem; color: var(--encre-2); background: var(--papier); border: 1px solid var(--filet); border-radius: 999px; padding: .12rem .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fenetre img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }

.projet-texte { display: grid; gap: 1rem; justify-items: start; }
.statut { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; padding: .28rem .7rem .28rem .6rem; font: 500 .7rem/1.2 var(--mono); }
.statut::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.statut.en-ligne { background: var(--vert-pale); color: var(--vert); }
.statut.travaux { background: var(--jaune-pale); color: #6d4f00; box-shadow: inset 0 0 0 1px var(--jaune-doux); }
.statut.prototype { background: #eef0f4; color: #3d4350; }
.statut.arrete { background: #f0eeea; color: #5c5a55; }
.statut.arrete::before { border-radius: 1px; }
.projet h3 { font-family: var(--titre); font-weight: 800; font-stretch: 114%; font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1; letter-spacing: -.03em; margin: 0; }
.question { font-family: var(--texte); font-style: italic; font-size: clamp(1.18rem, 2vw, 1.38rem); line-height: 1.4; margin: 0; }
.projet-texte p { margin: 0; max-width: 34rem; }
.reperes { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; margin: .2rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--filet); width: 100%; list-style: none; color: var(--encre-2); }
.bouton {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: .4rem;
  font: 650 1rem/1 var(--titre); font-stretch: 108%; text-decoration: none;
  background: var(--jaune); color: var(--encre); padding: .85rem 1.15rem; border-radius: 8px;
  box-shadow: inset 0 0 0 1.5px var(--encre), 3px 3px 0 var(--encre);
  transition: transform .15s ease, box-shadow .15s ease;
}
.bouton:hover { transform: translate(-1px, -1px); box-shadow: inset 0 0 0 1.5px var(--encre), 4px 4px 0 var(--encre); text-decoration: none; }
.bouton:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 1.5px var(--encre), 1px 1px 0 var(--encre); }
.bouton svg { width: 1rem; height: 1rem; }
.note { background: var(--jaune-pale); border-left: 4px solid var(--jaune); padding: .8rem 1rem; border-radius: 0 6px 6px 0; font-size: .98rem; }
.note b { font-family: var(--titre); font-stretch: 108%; }

/* ——— L'atelier : tous les essais ——— */
.atelier { background: var(--papier); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.6rem; }
.filtres[hidden] { display: none; }
.filtres button {
  font: 550 .92rem/1 var(--titre); font-stretch: 106%; color: var(--encre);
  background: var(--fond); border: 1px solid var(--filet-2); border-radius: 999px; padding: .6rem .95rem; cursor: pointer;
}
.filtres button span { color: var(--encre-3); font-weight: 450; margin-left: .2rem; }
.filtres button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.filtres button[aria-pressed="true"] span { color: #c9ccd3; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.carte {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: .55rem;
  background: var(--fond); border: 1px solid var(--filet); border-radius: 10px; padding: 1.1rem 1.15rem 1rem;
  scroll-margin-top: 1.5rem; transition: border-color .2s ease, transform .2s ease;
}
.carte:hover { border-color: var(--encre); }
.carte:target { border-color: var(--encre); box-shadow: 0 0 0 3px var(--jaune); }
.carte-haut { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.carte-haut .num { color: var(--encre-3); }
.carte h3 { font-family: var(--titre); font-weight: 750; font-stretch: 110%; font-size: 1.3rem; line-height: 1.1; letter-spacing: -.015em; margin: .2rem 0 0; }
.carte p { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--encre-2); }
.carte .appris { color: var(--encre); }
.carte-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .8rem; color: var(--encre-3); padding-top: .7rem; border-top: 1px dashed var(--filet-2); margin-top: .3rem; }
.carte a.voir { font-family: var(--titre); font-weight: 650; color: var(--encre); }
.carte.en-ligne { background: var(--jaune-pale); border-color: var(--jaune-doux); }
.carte[hidden] { display: none; }

/* ——— Façon de faire ——— */
.regles { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: regle; }
@media (min-width: 52rem) { .regles { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); } }
.regles li { counter-increment: regle; padding: 1.5rem 0 1.6rem; border-top: 1.5px solid var(--encre); display: grid; gap: .5rem; }
.regles h3 { font-family: var(--titre); font-stretch: 110%; font-weight: 750; font-size: 1.35rem; line-height: 1.15; letter-spacing: -.015em; margin: 0; display: flex; gap: .8rem; align-items: baseline; }
.regles h3::before { content: counter(regle, decimal-leading-zero); font: 450 .75rem/1 var(--mono); color: var(--encre-3); }
.regles p { margin: 0; color: var(--encre-2); max-width: 32rem; }

/* ——— Atipaq ——— */
.atipaq { display: grid; gap: 2rem; align-items: center; background: var(--jaune); color: var(--encre); border-radius: 16px; padding: clamp(1.8rem, 5vw, 3.5rem); position: relative; overflow: hidden; isolation: isolate; }
@media (min-width: 52rem) { .atipaq { grid-template-columns: 1.5fr 1fr; } }
.atipaq .section-tete { margin-bottom: 1.2rem; }
.atipaq .section-tete .etiquette { color: var(--encre); }
.atipaq .section-tete .etiquette::before { background: var(--encre); }
.atipaq p { margin: 0; max-width: 36rem; font-size: 1.08rem; }
.atipaq p + p { margin-top: .9rem; }
.atipaq .bouton { background: var(--papier); margin-top: 1.4rem; }
.atipaq-marque { justify-self: center; width: min(13rem, 55%); }
.atipaq-marque path { fill: var(--papier); stroke: var(--papier); }

/* ——— Pied de page ——— */
.pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; padding-top: 2rem; padding-bottom: 2.5rem; color: var(--encre-2); font-size: .95rem; }
.pied p { margin: 0; }

/* ——— Mouvement ——— */
@media (prefers-reduced-motion: no-preference) {
  .surligne::before { animation: surligne .7s cubic-bezier(.6,0,.2,1) .35s both; }
  .monte { animation: monte .7s cubic-bezier(.2,.7,.2,1) both; }
  .m1 { animation-delay: .05s; } .m2 { animation-delay: .15s; } .m3 { animation-delay: .25s; } .m4 { animation-delay: .35s; }
  .essai-trait { animation: pousse .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.5s + var(--i, 0) * 35ms); }
}
@keyframes surligne { from { transform: skewX(var(--pente)) scaleX(0); } to { transform: skewX(var(--pente)) scaleX(1); } }
@keyframes monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pousse { from { opacity: 0; transform: skewX(var(--pente)) scaleY(0); } to { opacity: 1; transform: skewX(var(--pente)) scaleY(1); } }