/* ============================================================
   REPTHOCI.NET — Finition visuelle
   Fichier : css/design.css
   À charger APRÈS les styles de page, AVANT css/responsive.css.

   INTENTION
   ---------
   Le site a deja une identite : brique et terre cuite, or, rouge du
   logo. On ne la remplace pas — on la resserre. Cette feuille ne
   touche a AUCUNE structure : elle n'ajuste que le rythme
   typographique, la matiere des cartes, les etats interactifs et
   l'accessibilite.

   Trois partis pris :

   1. UNE ECHELLE, PAS DES TAILLES AU CAS PAR CAS. Les pages fixaient
      des tailles isolees (18px ici, 21px la) ; les titres ne se
      repondaient pas d'une page a l'autre. On pose une echelle fluide,
      calculee sur la largeur d'ecran, et tout s'y aligne.

   2. LA COULEUR SIGNALE, ELLE NE DECORE PAS. L'or est reserve aux
      elements actifs et aux reperes de section ; le rouge de marque
      aux actions. Une carte au repos reste neutre.

   3. LE MOUVEMENT ACCOMPAGNE, IL N'ANNONCE PAS. Elevations courtes,
      jamais de rebond, et tout se coupe si le systeme demande un
      mouvement reduit.
   ============================================================ */

:root {
    /* Rythme vertical : une seule suite, utilisee partout. */
    --pas-1: 4px;
    --pas-2: 8px;
    --pas-3: 12px;
    --pas-4: 18px;
    --pas-5: 26px;
    --pas-6: 40px;
    --pas-7: 64px;

    /* Elevations. Trois seulement : au repos, au survol, en avant-plan.
       Au-dela, l'oeil ne distingue plus les niveaux. */
    --elev-1: 0 1px 2px rgba(36, 26, 18, .06), 0 1px 3px rgba(36, 26, 18, .05);
    --elev-2: 0 4px 12px rgba(36, 26, 18, .09), 0 2px 4px rgba(36, 26, 18, .05);
    --elev-3: 0 18px 44px rgba(36, 26, 18, .18);

    --duree: .22s;
    --courbe: cubic-bezier(.22, .61, .36, 1);
}


/* ============================================================
   1. TYPOGRAPHIE
   ============================================================ */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Echelle fluide : plus de rupture brutale entre bureau et mobile,
   et plus besoin d'une regle par palier. */
h1 { font-size: clamp(28px, 1.4rem + 2.2vw, 46px); line-height: 1.12; letter-spacing: -.02em; }
h2 { font-size: clamp(21px, 1.1rem + 1.1vw, 30px); line-height: 1.2;  letter-spacing: -.015em; }
h3 { font-size: clamp(17px, 1rem + .5vw, 21px);    line-height: 1.3;  letter-spacing: -.01em; }
h4 { font-size: clamp(15px, .95rem + .2vw, 17px);  line-height: 1.35; }

/* Les paragraphes longs se lisent mal au-dela de ~75 caracteres.
   On ne borne QUE le texte courant, jamais les blocs de mise en page. */
.fiche-corps p,
.article-body p,
.page-body > .container > p { max-width: 68ch; }

/* Les chiffres des tableaux et compteurs s'alignent en colonne. */
.stat-num, .org-cat, td, th, time,
[data-visiteurs-mois], [data-ann-total-cta] { font-variant-numeric: tabular-nums; }


/* ============================================================
   2. LIENS ET ACTIONS
   ============================================================ */

/* Soulignement qui n'ecrase pas les jambages. */
a { text-underline-offset: .18em; text-decoration-thickness: from-font; }

/* Etat de focus VISIBLE. Il etait absent : une personne naviguant au
   clavier ne savait pas ou elle se trouvait. :focus-visible ne
   l'affiche qu'au clavier, jamais au clic souris. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid #EF9F27;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Pas de halo bleu du navigateur au toucher. */
a, button, .cat-chip, .org-card, .event-card { -webkit-tap-highlight-color: transparent; }

button, .btn, .btn-primary, .btn-search-main, .btn-referencer, .cat-chip {
    transition: background-color var(--duree) var(--courbe),
                border-color var(--duree) var(--courbe),
                color var(--duree) var(--courbe),
                transform var(--duree) var(--courbe),
                box-shadow var(--duree) var(--courbe);
}
button:active, .btn:active, .btn-primary:active, .cat-chip:active {
    transform: translateY(1px);
}

/* Un bouton desactive doit se voir comme tel avant d'etre clique. */
button[disabled], .btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
}


/* ============================================================
   3. CARTES
   ============================================================ */

/* Une seule matiere pour toutes les familles de cartes du site. */
.org-card, .event-card, .article-card, .dest-card, .hotel-card,
.member-card, .pres-card, .faq-card, .listing-card, .gal-item {
    border-radius: 14px;
    box-shadow: var(--elev-1);
    transition: transform var(--duree) var(--courbe),
                box-shadow var(--duree) var(--courbe),
                border-color var(--duree) var(--courbe);
}

/* L'elevation au survol reste courte : 3 px suffisent a signaler
   qu'un bloc est cliquable. Au-dela, la page « saute ». */
@media (hover: hover) and (pointer: fine) {
    .org-card:hover, .event-card:hover, .article-card:hover,
    .dest-card:hover, .hotel-card:hover, .member-card:hover,
    .pres-card:hover, .listing-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--elev-2);
    }
}

/* Les visuels de carte gardent un format constant : sans cela, la
   grille se decale a chaque image chargee. */
.event-card img, .article-card img, .dest-card img,
.hotel-card img, .listing-card img {
    display: block;
    width: 100%;
    object-fit: cover;
    background: linear-gradient(110deg, #f2ece5 30%, #f8f4ef 50%, #f2ece5 70%);
}


/* ============================================================
   4. REPERES DE SECTION
   ------------------------------------------------------------
   La signature du site existait deja : un filet or devant les
   titres de section, sous le nom .section-title. J'avais commence
   par en ecrire un second, sur .section-title-bar > h2 — un
   doublon qui ne s'appliquait nulle part, le balisage reel etant
   different. Constate au navigateur, retire.

   Ce qui manquait vraiment : ce repere n'existait QUE sur les
   pages a listes. Les titres de section des autres pages n'en
   avaient aucun, et le rythme visuel se perdait d'une page a
   l'autre. On l'etend, en reprenant exactement la mise en forme
   d'origine pour ne pas creer deux dialectes.
   ============================================================ */

.section-title { align-items: center; }

/* Meme repere sur les titres de section des pages editoriales. */
.section-header > h2,
.page-body > .container > h2 {
    position: relative;
    padding-left: 15px;
}
.section-header > h2::before,
.page-body > .container > h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: .16em;
    bottom: .16em;
    width: 4px;
    border-radius: 2px;
    background: #EF9F27;
}

/* Le lien « Voir tout » se lit comme une action, pas comme un titre. */
.see-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    white-space: nowrap;
}
.see-all:hover { color: #B8451F; }

/* ============================================================
   4 bis. BARRE SUPERIEURE SUR PETIT ECRAN
   ------------------------------------------------------------
   Relevee au navigateur en 390 px : la barre s'etalait sur TROIS
   lignes — ville, date complete, compteur de visiteurs, contact,
   connexion — soit une centaine de pixels manges avant meme le
   logo. Le visiteur mobile voyait une barre de service avant de
   voir le site.

   On garde ce qui sert a l'usage (langue, connexion) et on retire
   ce qui releve de l'affichage institutionnel : la date du jour et
   le compteur de visiteurs restent sur grand ecran, ou la place
   ne manque pas.
   ============================================================ */
@media (max-width: 768px) {
    .topbar { font-size: 12px; }
    .topbar-inner { flex-wrap: nowrap; gap: 10px; }
    .topbar-left { min-width: 0; overflow: hidden; }
    /* Date et compteur : masques, pas supprimes — ils restent lus
       par les lecteurs d'ecran et reapparaissent des 769 px. */
    .topbar-left > span:not(:first-child),
    .topbar-left > .sep { display: none; }
    .topbar-right { flex: 0 0 auto; gap: 8px; }
    .topbar-right > a:not(.lang-switch):not(:last-child) { display: none; }
}

/* ============================================================
   5. FORMULAIRES
   ============================================================ */

input, select, textarea {
    border-radius: 9px;
    transition: border-color var(--duree) var(--courbe),
                box-shadow var(--duree) var(--courbe);
}
input:hover, select:hover, textarea:hover { border-color: #c9beb2; }
input:focus, select:focus, textarea:focus {
    border-color: #B8451F;
    box-shadow: 0 0 0 3px rgba(184, 69, 31, .13);
}

/* Le texte d'invite doit rester lisible sans se confondre avec une
   valeur saisie. */
::placeholder { color: #9b9086; opacity: 1; }

/* Un champ en erreur se signale par la couleur ET par le texte : la
   couleur seule exclut les personnes daltoniennes. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
    border-color: #CC1F1F;
    box-shadow: 0 0 0 3px rgba(204, 31, 31, .12);
}


/* ============================================================
   6. ETATS VIDES ET CHARGEMENT
   ------------------------------------------------------------
   Un ecran vide est une invitation a agir, pas une panne. On lui
   donne la meme attention qu'au reste.
   ============================================================ */

.org-empty, .gal-empty, .evt-empty, .ann-empty, .page-placeholder {
    padding: var(--pas-7) var(--pas-4);
    text-align: center;
    border: 1px dashed #e0d7cc;
    border-radius: 14px;
    background: linear-gradient(180deg, #fffdfa, #fbf7f2);
}
.org-empty i, .gal-empty i, .evt-empty i, .ann-empty i, .page-placeholder i {
    font-size: 34px;
    color: #c9a06a;
    display: block;
    margin-bottom: var(--pas-3);
}

/* Squelette de chargement : le lecteur voit que quelque chose arrive
   au lieu de fixer un blanc. */
.est-en-chargement {
    background: linear-gradient(110deg, #f2ece5 30%, #f8f4ef 50%, #f2ece5 70%);
    background-size: 220% 100%;
    animation: rh-scintille 1.4s ease-in-out infinite;
    border-radius: 10px;
    color: transparent !important;
}
@keyframes rh-scintille {
    from { background-position: 180% 0; }
    to   { background-position: -40% 0; }
}


/* ============================================================
   7. DETAILS
   ============================================================ */

/* Selection aux couleurs de la marque. */
::selection { background: rgba(239, 159, 39, .3); color: #241a12; }

/* Ancrage : un lien interne ne fait plus disparaitre son titre sous
   la barre de navigation collante. */
html { scroll-behavior: smooth; scroll-padding-top: 92px; }

/* Barre de defilement discrete, sur les navigateurs qui l'autorisent. */
* { scrollbar-width: thin; scrollbar-color: #d6ccc1 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #d6ccc1; border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #bfb2a4; background-clip: content-box; }

/* Lien d'evitement : la premiere tabulation mene au contenu, sans
   traverser les 8 entrees du menu. Invisible a la souris. */
.rh-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: #241a12;
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 10px 0;
    font-weight: 600;
}
.rh-evitement:focus { left: 0; }


/* ============================================================
   8. MOUVEMENT REDUIT
   ------------------------------------------------------------
   Reglage systeme des personnes que les animations genent ou
   rendent malades. On le respecte sans discuter.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   9. IMPRESSION
   ------------------------------------------------------------
   Les fiches d'organisme et les articles sont imprimes par les
   professionnels du reseau. On leur epargne le menu et les encarts.
   ============================================================ */
@media print {
    .topbar, .navbar, nav, footer, .ticker, .cat-chips,
    [data-pub-espace], .rh-hab, .fiche-aside, .sidebar-filtres { display: none !important; }
    body { background: #fff; color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
    .fiche-section { page-break-inside: avoid; }
}