/* ===========================================================================
   Les guides DigitalCraftery.

   Une feuille, aucun script. La palette est celle de la maison - lime #b0cb1f
   et gris-olive relevés dans le logo - comme les quatre applications.

   LE LIME NE PORTE JAMAIS DE TEXTE. Sur blanc il donne 1,9 pour 1, illisible.
   D'où deux jetons : `--accent` pour ce qui porte du texte, `--accent-plein`
   pour les aplats. Les intervertir rend la page illisible en silence.
   =========================================================================== */

:root {
  --fond:        #f7f8f0;
  --surface:     #ffffff;
  --surface-2:   #edefe0;
  --trait:       #dfe3ce;

  --encre:       #1e2016;
  --encre-2:     #4f5142;
  --encre-3:     #6b6c5c;

  --accent:      #5a6a0c;
  --accent-plein:#b0cb1f;
  --accent-doux: #edf4cb;
  --sur-accent:  #1e2016;

  --alerte:        #855a1c;
  --alerte-fond:   #f8efdd;
  --alerte-trait:  #e0b25f;

  --ombre: 0 1px 2px rgb(40 45 20 / 6%), 0 6px 20px rgb(40 45 20 / 7%);

  --large: 62rem;
  --lue:   40rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond:        #14150f;
    --surface:     #1e2018;
    --surface-2:   #24271b;
    --trait:       #2e3226;

    --encre:       #eef1e2;
    --encre-2:     #a2a695;
    --encre-3:     #868a76;

    --accent:      #c6e22b;
    --accent-plein:#c6e22b;
    --accent-doux: #2a3110;
    --sur-accent:  #14150f;

    --alerte:        #e0b25f;
    --alerte-fond:   #302611;
    --alerte-trait:  #6b5527;

    --ombre: 0 1px 2px rgb(0 0 0 / 45%), 0 6px 20px rgb(0 0 0 / 35%);
  }
}

* { box-sizing: border-box; }

html { font-size: 106.25%; }   /* 17 px : les rem se résolvent sur `html`, jamais sur `body` */

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ barre */
.barre {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: var(--large);
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
}

.marque {
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--encre);
  text-decoration: none;
}

.langues { margin-left: auto; display: flex; gap: .2rem; }

.langues a {
  padding: .3rem .6rem;
  border-radius: 999px;
  font-size: .85rem;
  color: var(--encre-2);
  text-decoration: none;
}

.langues a:hover { background: var(--surface-2); color: var(--encre); }

.langues a[aria-current='true'] {
  background: var(--accent-doux);
  color: var(--accent);
  font-weight: 600;
}

/* ------------------------------------------------------------------- page */
.page {
  max-width: var(--large);
  margin: 0 auto;
  padding: 1rem 1.25rem 4rem;
}

h1 {
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: .6rem 0 .5rem;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 0 .6rem;
  text-wrap: balance;
}

p { margin: 0 0 .85rem; max-width: var(--lue); }
p:last-child { margin-bottom: 0; }

.chapeau { font-size: 1.1rem; color: var(--encre-2); margin-bottom: 2rem; }

.fil { font-size: .9rem; margin-bottom: 1.2rem; }
.fil a { color: var(--encre-2); text-decoration: none; }
.fil a:hover { color: var(--accent); }

/* ------------------------------------------------------------- l'index */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.carte {
  display: block;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 14px;
  box-shadow: var(--ombre);
  color: inherit;
  text-decoration: none;
  /* La bande de couleur dit « application de la maison » sans répéter le logo. */
  border-top: 3px solid var(--accent-plein);
  transition: transform 140ms ease-out, border-color 140ms ease-out;
}

.carte:hover { transform: translateY(-2px); border-color: var(--accent); }
.carte h2 { margin-bottom: .3rem; }
.carte .accroche { color: var(--accent); font-weight: 600; margin-bottom: .6rem; }
.carte .resume { color: var(--encre-2); font-size: .95rem; margin: 0; }

/* --------------------------------------------------------- page d'une app */
.entete-app { margin-bottom: 2.5rem; }
.entete-app .accroche { font-size: 1.15rem; color: var(--accent); font-weight: 600; }
.entete-app .resume { font-size: 1.05rem; color: var(--encre-2); margin-bottom: 1.5rem; }

.bouton {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.3rem;
  border-radius: 10px;
  background: var(--accent-plein);
  color: var(--sur-accent);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 0 0 rgb(40 45 20 / 22%);
}

.bouton:active { transform: translateY(2px); box-shadow: none; }

.bloc {
  padding: 1.5rem;
  margin-bottom: 1rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 14px;
}

/* Le bloc « ce que l'application ne fait pas » se distingue VOLONTAIREMENT.
   C'est celui qu'on veut faire lire en premier, et c'est celui qu'on saute
   quand il ressemble aux autres. */
.bloc.important {
  background: var(--alerte-fond);
  border-color: var(--alerte-trait);
}

.bloc.important h2 { color: var(--alerte); }

strong { font-weight: 700; }
em { font-style: italic; color: var(--encre-2); }

a { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ------------------------------------------------------------------- pied */
.pied {
  max-width: var(--large);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  border-top: 1px solid var(--trait);
  color: var(--encre-3);
  font-size: .88rem;
}

.pied p { max-width: var(--lue); }
.copyright { margin-top: .8rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .carte:hover { transform: none; }
}

/* ------------------------------------------------------ les guides privés */
.tete-carte { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.tete-carte h2 { margin-bottom: 0; }

/* La pastille dit « sur demande » AVANT le clic. Sans elle, la fenêtre de mot
   de passe du navigateur arrive sans prévenir - et une fenêtre nue, sans logo
   ni phrase, se ferme sans qu'on cherche à comprendre. */
.cadenas {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--alerte-fond);
  color: var(--alerte);
  border: 1px solid var(--alerte-trait);
  white-space: nowrap;
}

/* La bande du haut passe à la couleur d'attente : la carte se distingue des
   deux autres d'un coup d'oeil, avant même qu'on lise la pastille. */
.carte.privee { border-top-color: var(--alerte-trait); }

.note-privee {
  margin-top: 1.6rem;
  font-size: .9rem;
  color: var(--encre-3);
}

/* La mention du portfolio : une PRÉCISION, pas un avertissement. Elle se lit
   quand on la cherche et ne saute pas aux yeux — la mettre en évidence
   suggérerait qu'il y a quelque chose à se faire pardonner. */
.portfolio {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--trait);
  font-size: .84rem;
  line-height: 1.55;
}