/* LES PAGES PUBLIQUES DE GIA, l’accueil et « À propos », au gabarit du site Hodologic
   (v1.6.2, étape 4 de design/CHARTE-HODOLOGIC.md ; textes validés par e0 le 25/10).

   Cette feuille ne déclare ni police ni couleur : elle lit les jetons --gia-* de css/marque.css
   (09) et les familles « GIA Titre » et « GIA Texte » (css/marque-police.css, 6e). L’en-tête
   .gia-entete et le pied .gia-pied sont ceux de la marque : rien ici ne les restyle.
   Un seul jeton propre : le rythme des sections. */
:root {
    /* Un seul jeton propre aux pages publiques : tout le reste vient de css/marque.css (PR 1). */
    /* UN OUTIL DE TRAVAIL, PAS UN MAGAZINE (Vhiny, relayé par e0, 25/10) : le gabarit du Kiosque,
       resserré. Le rythme des sections passe de 64–120 px à 36–64 px. */
    --pp-section: clamp(36px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--gia-papier); color: var(--gia-encre);
    font: 400 15.5px/1.7 var(--gia-texte);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    font-variant-numeric: tabular-nums;
}
/* Portée : le corps de la page et la fenêtre de contact, jamais l’en-tête ni le pied de la marque. */
main p, .modal-overlay p { margin: 0; }
/* Comme le Kiosque (base.css) : h1 à h4 en 400, -0,005em ; les nombres en chiffres tabulaires. */
main :is(h1, h2, h3, h4), .modal-overlay :is(h1, h2, h3, h4) { font-family: var(--gia-titre); font-weight: 400; margin: 0; letter-spacing: -.005em; text-wrap: balance; }
main a { color: inherit; }
main :focus-visible, .modal-overlay :focus-visible { outline: 2px solid var(--gia-bordeaux); outline-offset: 3px; border-radius: var(--gia-coin-focus); }

.wrap { max-width: var(--gia-largeur); margin-inline: auto; padding-inline: var(--gia-marge); }
.section { padding-block: var(--pp-section); border-top: 1px solid var(--gia-filet); }
.alt { background: var(--gia-brume); }


.surtitre { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem;
    font: 600 .7rem/1.2 var(--gia-texte); letter-spacing: .2em; text-transform: uppercase; color: var(--gia-secondaire); }
.surtitre::before { content: ""; width: 24px; height: 2px; background: var(--gia-bordeaux); flex: none; }
/* Le titre en question garde le serif, à 2,4 rem au plus sur ordinateur (e0 : 2,25 à 2,5). */
.d1 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); line-height: 1.12; max-width: 22em; hyphens: none; }
.d2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; }
/* Le chapeau à 16 px, pour ne pas concurrencer le titre ; ces pages se lisent : la prose est à 15,5 sur 1,7 (e0, 25/10). */
.chapeau { font-size: 1rem; line-height: 1.6; color: var(--gia-encre-douce); max-width: 40em; margin-top: .9rem; }
.corps { color: var(--gia-encre-douce); max-width: 36em; }
.corps + .corps { margin-top: 1rem; }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }
.btn { display: inline-flex; align-items: center; gap: .65rem; min-height: var(--gia-cible); padding: .75rem 1.1rem;
    border-radius: var(--gia-coin-bouton); border: 1px solid transparent; font: 500 .9rem/1 var(--gia-texte);
    text-decoration: none; cursor: pointer; background: none; }
.btn-primaire { background: var(--gia-bordeaux); color: var(--gia-sur-bordeaux); }
.btn-primaire:hover { background: var(--gia-bordeaux-survol); }
.btn-contour { border-color: var(--gia-filet-fort); color: var(--gia-encre); }
.btn-contour:hover { border-color: var(--gia-encre); }

.ouverture { padding-block: clamp(24px, 4vw, 48px) clamp(32px, 4vw, 56px); }

/* La grille à filets du site : 1 px de --trait entre les cases. */
.grille { display: grid; gap: 1px; background: var(--gia-filet); border-block: 1px solid var(--gia-filet); margin-top: clamp(16px, 2vw, 24px); }
.grille > * { background: var(--gia-papier); }
.alt .grille > * { background: var(--gia-brume); }
.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trois  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Des cases compactes, lisibles d'un coup d'œil : l'étiquette, la question, le lien. */
.case { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: .35rem; }
.case .etiquette { font: 600 .7rem/1.3 var(--gia-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--gia-secondaire); }
.case h3 { font-size: 1.08rem; line-height: 1.3; }
.case p { color: var(--gia-encre-douce); font-size: .93rem; }
a.case { text-decoration: none; }
a.case:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.case .vers { margin-top: auto; padding-top: .35rem; font-size: .84rem; font-weight: 500; color: var(--gia-bordeaux); }

.tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 72px); align-items: end; }
.regles { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--gia-filet); border-block: 1px solid var(--gia-filet); }
.regles li { background: var(--gia-papier); padding: 12px 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; }
.regles b { font-weight: 600; }
.regles span { color: var(--gia-encre-douce); }
.sources { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.sources li { border: 1px solid var(--gia-filet-fort); border-radius: var(--gia-coin-petit); padding: 4px 10px; font-size: .85rem; }


@media (max-width: 980px) { .quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
    .tete, .trois { grid-template-columns: minmax(0, 1fr); }
    .regles li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* Sous 360 px, « manquent-elles » tient entier (c0, 25/10) : pas de coupure au trait d'union. */
.insecable { white-space: nowrap; }
@media (max-width: 359px) { .d1 { font-size: 1.6rem; } }
/* Deux cases par rangée jusqu'au téléphone ; une seule sous 360 px. */
@media (max-width: 359px) { .quatre { grid-template-columns: minmax(0, 1fr); } }

/* La fenêtre « Contact GIA » : mêmes identifiants et mêmes fonctions qu'aujourd'hui (api/contact.php). */
.modal-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
    padding: 16px; background: rgba(15, 42, 58, .45); z-index: 50; }
.modal-overlay.active { display: flex; }
.modal-content { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
    background: var(--gia-papier); border-radius: var(--gia-coin); border: 1px solid var(--gia-filet-fort); padding: 28px clamp(18px, 4vw, 32px) 28px; }
.modal-close-btn { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center;
    border: 0; background: none; color: var(--gia-encre); cursor: pointer; border-radius: var(--gia-coin-petit); }
.modal-content h2 { font-size: 1.6rem; line-height: 1.2; padding-right: 40px; }
.modal-content .chapeau { font-size: 1rem; margin-top: .5rem; }
.form-group { display: grid; gap: 6px; margin-top: 16px; }
.form-group label { font-size: .85rem; font-weight: 500; }
.form-group input, .form-group textarea { font: inherit; font-size: 1rem; color: var(--gia-encre); background: var(--gia-papier);
    border: 1px solid var(--gia-filet-fort); border-radius: var(--gia-coin-champ); padding: .8rem 1rem; min-height: 48px; width: 100%; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--gia-bordeaux); box-shadow: 0 0 0 3px var(--gia-bordeaux-voile); }
.form-group textarea { min-height: 120px; resize: vertical; }
.auth-message { display: none; margin-top: 12px; font-size: .9rem; }
.auth-message.success { color: var(--gia-encre); }
.auth-message.error { color: var(--gia-negatif); }
.modal-content .btn-primaire { margin-top: 20px; width: 100%; justify-content: center; }

/* À propos : le paragraphe des trois noms, d'un seul tenant. */
.trois-noms { margin-top: 1.5rem; display: grid; gap: 1rem; }
.trois-noms strong { font-weight: 600; color: var(--gia-encre); }
.trois-noms em { font-style: normal; color: var(--gia-encre); }

/* Une ligne à part, en fin de section (la mesure d'audience, dans « À propos »). */
.mention { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--gia-filet); font-size: .85rem; color: var(--gia-secondaire); max-width: 40em; }

/* « À propos » : la ligne qui dit à quelle adresse on répondra, quand on est connecté. */
.contact-info { margin-top: 12px; padding: 10px 12px; background: var(--gia-brume); border-left: 2px solid var(--gia-bordeaux); font-size: .9rem; }

/* Sur « À propos », le bouton vient sous le titre, avant la prose des trois noms. */
.actions-tete { margin-top: 1rem; margin-bottom: .4rem; }