/*
 * Direction A - Terre et memoire (retenue, D51)
 * Jetons de design : LE seul fichier ou vivent couleurs, espacements,
 * rayons et tailles (CLAUDE.md par. 5, D36). Aucune valeur en dur ailleurs.
 * Promu depuis site/maquettes/direction-a/css/tokens.css en phase 2 ;
 * le site public de la phase 3 s'appuie sur ce meme fichier.
 */

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/fraunces-600.woff2") format("woff2");
}

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/fraunces-900.woff2") format("woff2");
}

@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/source-sans-3-400.woff2") format("woff2");
}

@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/source-sans-3-700.woff2") format("woff2");
}

:root {
    /* ---- Couleurs ---- */
    /* Fonds */
    --couleur-papier: #FAF6EE;          /* fond principal, creme papier */
    --couleur-papier-doux: #F1EADB;     /* fond de section alternee */
    --couleur-carte: #FFFFFF;           /* fond des cartes posees sur le papier */

    /* Encres */
    --couleur-encre: #2A2119;           /* texte principal */
    --couleur-encre-douce: #5C5044;     /* texte secondaire, legendes */

    /* Verts des vallees */
    --couleur-vert: #2F4A38;            /* primaire : bandeaux, titres inverses */
    --couleur-vert-profond: #22362A;    /* pied de page, survols du vert */
    --couleur-creme-sur-vert: #F7EFE2;  /* texte pose sur les fonds verts */

    /* Terres du couchant */
    --couleur-terre: #9C3D1E;           /* actions, liens, accents forts */
    --couleur-terre-sombre: #7C2F15;    /* survol des actions */
    --couleur-ocre: #C07A2B;            /* filets, ornements, grandes initiales */
    --couleur-or: #E8A13D;              /* accents poses sur fonds sombres */

    /* Voiles et filets translucides : les seules couleurs non opaques du projet,
       definies ici pour que la palette entiere vive dans ce fichier */
    --couleur-voile-leger: rgba(24, 30, 22, 0.35);      /* haut du heros */
    --couleur-voile-moyen: rgba(24, 30, 22, 0.62);      /* zone du titre du heros */
    --couleur-voile-fonce: rgba(24, 30, 22, 0.88);      /* bas du heros */
    --couleur-filet-sur-vert: rgba(247, 239, 226, 0.25);
    --couleur-attenue-sur-vert: rgba(247, 239, 226, 0.75);

    /* Etats */
    --couleur-focus: #B25226;           /* anneau de focus clavier, double d'un halo papier */

    /* ---- Typographie ---- */
    --police-titre: "Fraunces", Georgia, "Times New Roman", serif;
    --police-texte: "Source Sans 3", "Segoe UI", Arial, sans-serif;

    /* Echelle typographique, ratio 1,25, base 16 px */
    --texte-petit: 0.8rem;              /* 12,8 px : mentions, filets */
    --texte-corps: 1rem;                /* 16 px */
    --texte-grand: 1.25rem;             /* 20 px : chapos */
    --titre-4: 1.25rem;
    --titre-3: 1.563rem;
    --titre-2: 2.441rem;
    --titre-1: clamp(2.441rem, 1.5rem + 3.5vw, 3.815rem);
    --titre-heros: clamp(2rem, 1rem + 4.5vw, 4.5rem);
    --chiffre-cle: clamp(3rem, 2rem + 5vw, 5.5rem);

    --interlignage-texte: 1.65;
    --interlignage-titre: 1.15;

    /* ---- Espacements ---- */
    --espace-1: 0.25rem;   /*  4 px */
    --espace-2: 0.5rem;    /*  8 px */
    --espace-3: 0.75rem;   /* 12 px */
    --espace-4: 1rem;      /* 16 px */
    --espace-5: 1.5rem;    /* 24 px */
    --espace-6: 2rem;      /* 32 px */
    --espace-7: 3rem;      /* 48 px */
    --espace-8: 4.5rem;    /* 72 px */

    /* ---- Mise en page ---- */
    --largeur-contenu: 71rem;           /* 1136 px */
    --largeur-texte: 46rem;             /* 736 px, confort de lecture */
    --hauteur-nav: 4rem;

    /* ---- Rayons ---- */
    --rayon-petit: 3px;
    --rayon-moyen: 8px;
    --rayon-rond: 999px;

    /* ---- Ombres et filets ---- */
    --ombre-carte: 0 2px 10px rgba(42, 33, 25, 0.08);
    --ombre-carte-survol: 0 6px 22px rgba(42, 33, 25, 0.14);
    --filet: 1px solid rgba(42, 33, 25, 0.18);
    --filet-ocre: 2px solid var(--couleur-ocre);

    /* ---- Interactions ---- */
    --transition-douce: 180ms ease;
    --cible-tactile: 44px;
}

/* ---- Utilitaires partagés par l'administration et le site public ----
   L'attribut hidden doit gagner sur toute règle d'auteur (un « display: grid »
   sur un formulaire porteur de hidden l'afficherait) : c'est la règle qui
   garantit le repli sans JavaScript des formulaires publics (D61). */
[hidden] {
    display: none !important;
}

/* Hors écran mais dans le flux d'accessibilité et dans le DOM : intitulés
   de colonnes lus par les lecteurs d'écran, piège invisible des formulaires. */
.visually-hidden,
.champ-piege {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}