/*
   SOURIONS — la feuille de style, refaite le 07/10/2026

   CE QUI A ÉTÉ JETÉ, ET POURQUOI. La première version posait un dégradé
   jaune-rose en FOND de page, des cartes penchées, un trait noir épais de
   dessin animé et des boutons en gélule. Emmanuel : « je n'aime pas
   l'interface, je trouve que ça fait kitsch ». Il avait raison, et la
   recherche dit précisément pourquoi.

   CE QUI EST DOCUMENTÉ, et ce qu'on en tire :

     Valdez & Mehrabian (1994) — sur le plaisir ressenti, la CLARTÉ pèse plus
     que la teinte, et la saturation gouverne surtout l'excitation. Les
     teintes les plus plaisantes sont les bleus, verts et violets ; le JAUNE
     figure parmi les MOINS plaisantes. D'où un fond très clair, légèrement
     bleuté, et un jaune réduit à l'accent.

     Bar & Neta (2006) — on préfère les contours COURBES, et les angles vifs
     activent l'amygdale, le détecteur de menace. D'où des coins franchement
     arrondis partout. C'est le seul point sur lequel les trois sources
     s'accordent sans réserve.

     Ingrid Fetell Lee, « Joyful » (2018) — la joie visuelle tient à la
     couleur vive, l'ABONDANCE, les formes rondes et la LÉGÈRETÉ. D'où la
     lueur chaude en haut de page et les cartes qui flottent sur une ombre
     douce, plutôt qu'un aplat de couleur.

   LA CONTRADICTION ÉTAIT UTILE : Fetell Lee voit de la joie dans le jaune,
   Valdez et Mehrabian le notent peu plaisant. Les deux se concilient si l'on
   admet que le jaune EXCITE sans apaiser — bon accent, mauvais fond. La
   version précédente en avait fait son fond.

   ET DEUX CHOSES VENAIENT DE MOI, sans aucun appui : les cartes penchées et
   le trait noir épais. C'est surtout le trait qui donnait l'air carnet
   d'écolier. Les deux sont partis.

   ZÉRO COULEUR EN DUR HORS DE `:root` — la règle de la galaxie.
*/

:root {
    /* Le fond : très clair, à peine bleuté. La clarté fait le plaisir. */
    --fond:        #F6F7FB;
    --lueur:       #FFF4D9;
    --carte:       #FFFFFF;

    /* Le jaune : accent et lumière, JAMAIS fond. */
    --accent:      #FFC94D;
    --accent-fort: #FFB31F;
    --accent-ombre: rgba(255, 172, 43, .42);

    --encre:       #1C1B2A;
    --encre-douce: #58566E;
    --filet:       #E6E7F0;

    /* Les ombres portent la légèreté : les cartes flottent. */
    --flottement:      0 .55rem 1.4rem rgba(36, 34, 70, .13);
    --flottement-haut: 0 .9rem 2rem rgba(36, 34, 70, .19);

    --rayon:   1.2rem;
    --respir:  1.25rem;
    --lecture: 42rem;

    --police: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

body {
    margin: 0;
    font-family: var(--police);
    color: var(--encre);
    /* La lueur en haut, et rien d'autre : la couleur est dans la lumière,
       pas sous les pieds. */
    background:
        radial-gradient(42rem 26rem at 50% -12%, var(--lueur), transparent 72%),
        var(--fond);
    background-attachment: fixed;
    line-height: 1.55;
}

.saut {
    position: absolute;
    left: -100vw;
    background: var(--encre);
    color: var(--carte);
    padding: .7rem 1.1rem;
    border-radius: 0 0 var(--rayon) 0;
    z-index: 10;
}
.saut:focus { left: 0; top: 0; }

:focus-visible {
    outline: .2rem solid var(--accent-fort);
    outline-offset: .2rem;
    border-radius: .4rem;
}

/* ---- l'en-tête ------------------------------------------------------- */

.entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--respir);
    padding: var(--respir) clamp(1rem, 4vw, 2.5rem);
    max-width: 72rem;
    margin: 0 auto;
}

.marque { text-decoration: none; color: inherit; }

.marque__mot {
    font-size: clamp(1.6rem, 4.6vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.025em;
}

.entete__liens a {
    color: var(--encre-douce);
    text-decoration: none;
    font-weight: 600;
    padding-bottom: .15rem;
    border-bottom: .15rem solid transparent;
}
.entete__liens a:hover { color: var(--encre); border-bottom-color: var(--accent); }

main { padding: 0 clamp(1rem, 4vw, 2.5rem) 4rem; max-width: 72rem; margin: 0 auto; }

/* ---- l'accroche ------------------------------------------------------ */

.accroche { text-align: center; margin: .5rem 0 2.6rem; }

.accroche h1 {
    font-size: clamp(2.3rem, 8vw, 4.2rem);
    margin: 0 0 .4rem;
    letter-spacing: -.035em;
    line-height: 1.02;
}

.accroche p {
    font-size: clamp(1.02rem, 3.2vw, 1.3rem);
    color: var(--encre-douce);
    margin: 0 auto 1.8rem;
    max-width: 32rem;
}

/* ---- les boutons ----------------------------------------------------- */

.bouton {
    display: inline-block;
    font: inherit;
    font-weight: 700;
    font-size: clamp(1rem, 3.4vw, 1.15rem);
    color: var(--encre);
    background: var(--carte);
    border: .1rem solid var(--filet);
    border-radius: 2.5rem;
    padding: .8rem 1.7rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--flottement);
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.bouton:hover { transform: translateY(-.15rem); box-shadow: var(--flottement-haut); }
.bouton:active { transform: translateY(.05rem); }

/* Le seul endroit jaune de la page, et il appelle. */
.bouton--fort {
    background: var(--accent);
    border-color: transparent;
    box-shadow: 0 .45rem 1.2rem var(--accent-ombre);
}
.bouton--fort:hover { background: var(--accent-fort); box-shadow: 0 .7rem 1.6rem var(--accent-ombre); }

.bouton--discret {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    font-weight: 600;
    font-size: .98rem;
    color: var(--encre-douce);
    text-decoration: underline;
    padding: .4rem .6rem;
}
.bouton--discret:hover { background: transparent; color: var(--encre); transform: none; box-shadow: none; }

/* ---- LE MUR : une mosaïque de sourires, les phrases se découvrent ----- */

/*
   LA PHRASE EST PASSÉE SOUS LA PHOTO À PAR-DESSUS — 07/10/2026.
   Emmanuel : « si on veut que les gens jouent, il faut qu'il apparaisse en
   cliquant sur un sourire sinon y'a pas de découverte ». Deux effets, et le
   second ne se voyait pas d'avance : la phrase devient une récompense, et le
   mur tient PLUS de sourires par rangée puisqu'aucun ne porte de texte —
   c'est l'abondance de Fetell Lee, obtenue en retirant quelque chose.
*/
.mur {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(.6rem, 2vw, 1rem);
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.tuile {
    position: relative;
    display: block;
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--carte);
    box-shadow: var(--flottement);
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, box-shadow .16s ease;
}
.tuile:hover, .tuile:focus-visible { transform: translateY(-.2rem); box-shadow: var(--flottement-haut); }

.tuile picture, .tuile img { display: block; width: 100%; height: auto; }

.tuile__phrase {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: .6rem;
    background: rgba(28, 27, 42, .9);
    color: #FFFDF8;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    transition: opacity .18s ease;
}
/* Révélée au clic (le script pose l'attribut), et au focus clavier : sans
   cela, la phrase serait inatteignable sans souris. */
.tuile[aria-expanded="true"] .tuile__phrase,
.tuile:focus-visible .tuile__phrase { opacity: 1; }

/* ---- la grande carte, sur la page d'un sourire ----------------------- */

.grande {
    max-width: 30rem;
    margin: 0 auto 2rem;
    background: var(--carte);
    border-radius: var(--rayon);
    box-shadow: var(--flottement-haut);
    overflow: hidden;
}
.grande img { display: block; width: 100%; height: auto; }
.grande__phrase { margin: 0; padding: 1.3rem 1.3rem .4rem; font-size: 1.3rem; font-weight: 700; text-align: center; }
.grande__adresse { margin: 0; padding: 0 1.3rem 1.3rem; text-align: center; color: var(--encre-douce); font-weight: 600; }

.actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin: 0 0 2.5rem; }

/* ---- la capture ------------------------------------------------------ */

.scene {
    position: relative;
    max-width: 34rem;
    margin: 0 auto 1.2rem;
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--encre);
    box-shadow: var(--flottement);
    aspect-ratio: 4 / 3;
}
.scene video, .scene canvas, .scene img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cadre { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; }
.cadre__trou {
    width: 68%;
    aspect-ratio: 16 / 7;
    border: .2rem dashed var(--accent);
    border-radius: .8rem;
    box-shadow: 0 0 0 100vmax rgba(28, 27, 42, .62);
}
.cadre__mot {
    position: absolute;
    bottom: .8rem; left: 0; right: 0;
    text-align: center;
    color: #FFFDF8;
    font-weight: 600;
    text-shadow: 0 .1rem .3rem rgba(0,0,0,.6);
    padding: 0 1rem;
}

.decompte {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 7rem; font-weight: 800;
    color: #FFFDF8;
    text-shadow: 0 .2rem .6rem rgba(0,0,0,.5);
}

/* ---- les champs ------------------------------------------------------ */

.champ { max-width: var(--lecture); margin: 0 auto 1.2rem; }
.champ label { display: block; font-weight: 700; margin-bottom: .4rem; }

.champ textarea {
    width: 100%;
    font: inherit;
    padding: .85rem .95rem;
    border: .1rem solid var(--filet);
    border-radius: var(--rayon);
    background: var(--carte);
    box-shadow: var(--flottement);
    resize: vertical;
    min-height: 5.5rem;
}

.compte { text-align: right; color: var(--encre-douce); font-weight: 600; }
.compte--plein { color: var(--accent-fort); }

/* ---- les messages ---------------------------------------------------- */

.mot {
    max-width: var(--lecture);
    margin: 0 auto 1.5rem;
    padding: 1rem 1.2rem;
    background: var(--carte);
    border-radius: var(--rayon);
    box-shadow: var(--flottement);
    font-weight: 600;
}
.mot--souci { box-shadow: var(--flottement), inset .3rem 0 0 var(--accent-fort); }
.mot p { margin: .2rem 0; }

.vide { text-align: center; color: var(--encre-douce); font-size: 1.1rem; padding: 3rem 1rem; }

/* La consigne au-dessus du mur : elle doit se lire sans peser. Un style en
   ligne aurait fait l'affaire — la regle de la galaxie l'interdit, et elle a
   raison : une valeur posee la ne se retrouve jamais. */
.indice {
    text-align: center;
    color: var(--encre-douce);
    font-size: .98rem;
    margin: 0 0 1.2rem;
}

/* ---- textes de lecture ----------------------------------------------- */

.texte { max-width: var(--lecture); margin: 0 auto; }
.texte h1 { font-size: clamp(1.9rem, 6vw, 2.8rem); letter-spacing: -.025em; }
.texte h2 { margin-top: 2.2rem; }
.texte a { color: var(--encre); }

/* ---- le pied --------------------------------------------------------- */

.pied {
    margin-top: 3rem;
    padding: 1.8rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
    max-width: 72rem;
    margin-inline: auto;
    color: var(--encre-douce);
    text-align: center;
    border-top: .1rem solid var(--filet);
}
.pied a { color: var(--encre); font-weight: 600; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; }

/* ---- l'administration ------------------------------------------------ */

.adm {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--carte);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--flottement);
}
.adm th, .adm td { border-bottom: .1rem solid var(--filet); padding: .6rem .7rem; text-align: left; vertical-align: top; }
.adm img { width: 8rem; height: auto; display: block; border-radius: .5rem; }
.adm form { display: inline; }

/* ---- le mouvement se coupe ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}