/*
 * Feuille de base du site ARMUNIA : variables, polices, remise à zéro, corps de texte
 * et ossature commune aux huit pages (bandeau de marque, navigation, pied de page).
 *
 * [Tâche 7, tour de correction 1] Scindée en deux fichiers, chargés ensemble par
 * armunia_entete_html() (src/gabarits/ossature.php), quand le fichier unique d'origine
 * (tâche 5) a dépassé les 800 lignes de la contrainte globale. Sœur de sections.css
 * (gabarits de section et composants). Les valeurs (couleurs, typographies,
 * espacements, états) reprennent au pixel près la maquette validée le 7 août 2026 et sa
 * charte graphique (handoff §8, §9, §10) : elles sont contractuelles, pas une
 * proposition.
 *
 * Structure du fichier, dans l'ordre :
 *   1. Polices hébergées en local (@font-face)
 *   2. Couleurs (variables), partagées avec sections.css via :root
 *   3. Remise à zéro minimale
 *   4. Base (corps de texte, liens, focus clavier)
 *   5. Ossature commune : lien d'évitement, bandeau de marque, navigation, pied de page
 *   6. Point de rupture de la navigation — la seule requête média des deux fichiers
 */

/* ---------------------------------------------------------------------------------
   1. Polices — Cormorant Garamond et Lato, sous licence SIL Open Font, hébergées ici.
   Un seul sous-ensemble (latin) : le site est entièrement en français.
   --------------------------------------------------------------------------------- */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('polices/cormorant-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('polices/cormorant-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('polices/lato-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('polices/lato-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------------
   2. Couleurs — deux couleurs, trois neutres, pas une de plus (handoff §9.1).
   Réutilisées partout via ces variables : la seule autre apparition de la valeur
   littérale de la terre cuite dans tout ce fichier est la règle de focus clavier
   ci-dessous, dont le texte exact est imposé par la charte.
   --------------------------------------------------------------------------------- */

:root {
  --olive: #494B2E;
  --olive-fonce: #3A3B24;
  --terre-cuite: #A56036;
  --terre-cuite-foncee: #8A4F2C;
  --blanc: #FFFFFF;
  --creme: #F5EFE7;
  --brun: #1F1D1A;
  --filet-clair: rgba(73, 75, 46, .22);
  /* Filet tireté des photos de carte (§8.4) : .45, valeur répétée deux fois dans la
     maquette (blocs chien et chat) — distincte de celle des grands emplacements photo
     type héros (.55), qui n'appartiennent pas à cette tâche. */
  --filet-tirete-carte: rgba(73, 75, 46, .45);
}

/* ---------------------------------------------------------------------------------
   3. Remise à zéro minimale
   --------------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* [Tâche 14, correction] `height: auto` manquait : les <img> du site portent tous
   les attributs HTML width/height (recadrage réel en pixels, ex. 2400x1050) ET une
   règle `aspect-ratio` en ligne (armunia_image(), ossature.php). Sans `height: auto`
   ici, les deux dimensions issues des attributs restent des longueurs FIXES aux yeux
   du moteur de mise en page ; max-width: 100% ne réduit alors que la largeur, jamais
   la hauteur — aspect-ratio ne peut arbitrer que si l'un des deux axes vaut `auto`.
   Résultat sans ce correctif : SEPT emplacements sur sept rendus étirés en bande
   verticale, à toutes les largeurs testées (320 à 1440px) — pas un cas limite. */
img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------------
   4. Base
   --------------------------------------------------------------------------------- */

body {
  background: var(--blanc);
  color: var(--brun);
  font-family: 'Lato', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* [Tâche 13, tour de correction 1] Variante d'affichage du handoff §7.2 (réglage
   interne `texte_olive`) : le texte courant en olive plutôt qu'en brun profond, un
   choix d'ambiance conforme à la charte dans les deux cas — une seule règle, une seule
   classe sur l'élément racine (voir armunia_entete_html(), src/gabarits/ossature.php). */
html.texte-olive body {
  color: var(--olive);
}

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

a:hover {
  color: var(--terre-cuite);
}

::selection {
  background: var(--creme);
  color: var(--brun);
}

input,
select,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
}

/* Le seul <summary> du site est le déclencheur du menu mobile (navigation) : pas de
   triangle de divulgation par défaut, la maquette n'en montre pas — remplacé par
   l'apparence du bouton MENU, posée par .navigation-bouton-menu. */
summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

/* Focus clavier visible partout, jamais l'anneau bleu par défaut du navigateur — la
   valeur ci-dessous est celle imposée par la charte, au caractère près. */
:focus-visible {
  outline: 2px solid #A56036;
  outline-offset: 3px;
}
/* ---------------------------------------------------------------------------------
   5. Ossature commune aux huit pages
   --------------------------------------------------------------------------------- */

/* Lien d'évitement : hors écran tant qu'il n'a pas le focus clavier. */
.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--olive);
  color: var(--blanc);
  padding: 12px 20px;
  text-decoration: none;
  font: 700 14px/1 Lato, sans-serif;
  letter-spacing: .05em;
}

.lien-evitement:focus {
  left: 12px;
  top: 12px;
}

/* --- Bandeau de marque : non collant, fond blanc (handoff §5.1) --- */

.bandeau-marque {
  background: var(--blanc);
}

.bandeau-marque-interne {
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px clamp(20px, 5vw, 40px) 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

/* padding:12px = zone de protection du logo exigée par la charte : aucun texte, aucune
   image, aucun bord dans cet espace. */
.bandeau-marque-logo {
  display: block;
  padding: 12px;
  text-decoration: none;
}

/* Le fichier servi est recadré (animaux + ARMUNIA), la baseline est en HTML juste
   dessous — voir armunia_bandeau_marque(). height:auto est indispensable et non
   décoratif : sans lui, les attributs width/height du HTML imposeraient 240 px de
   haut à une image affichée sur 200 à 280 px de large, et le logo serait écrasé. */
.bandeau-marque-logo img {
  display: block;
  width: clamp(190px, 24vw, 260px);
  height: auto;
}

/* Les deux lignes reprennent la composition de la baseline dessinée du logo d'origine,
   que le recadrage a retirée de l'image : capitales interlettrées terre cuite, puis
   « animalière » en Cormorant italique entre deux filets. Seule différence assumée —
   la ligne italique n'est pas la même écriture manuscrite que le dessin d'origine :
   cette police-là n'est pas hébergée sur le site, et l'appeler chez un tiers ferait
   entrer un traceur et donc un bandeau de consentement, que tout le reste du site
   évite soigneusement. Cormorant Garamond, déjà là, en est la plus proche. */
.bandeau-marque-baseline {
  display: block;
  margin-top: 6px;
  font: 700 clamp(9.5px, 1.05vw, 11.5px)/1.45 Lato, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terre-cuite);
}

/* Droit, pas italique. Aucune italique de Cormorant Garamond n'est hébergée ici : le
   navigateur en fabriquait une en inclinant le droit, et cette inclinaison décalait
   l'accent grave de « animalière » au point de le détacher de sa lettre — vérifié en
   capture à 4×. Cormorant dessine par ailleurs des accents naturellement hauts et
   fins ; ils tiennent en droit, ils décrochent dès qu'on penche le dessin.
   Les fontes elles-mêmes sont saines : 229 glyphes chacune, aucun accent français
   manquant, empreintes distinctes entre les deux graisses (contrôlé au fontTools). */
.bandeau-marque-signature {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font: 500 clamp(16px, 1.6vw, 19px)/1.3 'Cormorant Garamond', serif;
  letter-spacing: .06em;
  color: var(--brun);
}

/* Les deux filets qui encadrent « animalière » dans le logo d'origine. flex: 1 les
   laisse occuper ce qui reste de la largeur de la ligne au-dessus, sans la dépasser. */
.bandeau-marque-signature::before,
.bandeau-marque-signature::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--filet-clair);
}

/* Quand le téléphone n'est pas renseigné, le bloc de droite n'existe pas et le logo
   restait collé à gauche d'un bandeau vide aux trois quarts. Centré tant qu'il est
   seul ; il repasse à gauche dès que le numéro est saisi, sans autre changement. */
.bandeau-marque-interne:not(:has(.bandeau-marque-droite)) {
  justify-content: center;
}

.bandeau-marque-interne:not(:has(.bandeau-marque-droite)) .bandeau-marque-baseline {
  text-align: center;
}

.bandeau-marque-droite {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bandeau-marque-slogan {
  font: 700 12px/1.4 Lato, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--olive);
}

.bandeau-marque-telephone {
  font: 600 25px/1.2 'Cormorant Garamond', serif;
  letter-spacing: .06em;
  color: var(--olive);
  text-decoration: none;
}

.bandeau-marque-telephone:hover {
  color: var(--terre-cuite);
}

/* --- Navigation : collante, deux variantes rendues en parallèle, le point de rupture
   est en CSS (§6 de ce fichier), pas mesuré en JavaScript comme dans le prototype
   (handoff §5.2 et §7.2). --- */

.navigation {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--blanc);
  border-top: 1px solid rgba(73, 75, 46, .2);
  border-bottom: 1px solid rgba(73, 75, 46, .2);
}

.navigation-interne {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
  display: flex;
  gap: clamp(18px, 3vw, 38px);
  align-items: stretch;
}

.navigation-lien {
  font: 700 14px/1 Lato, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--olive);
  text-decoration: none;
  padding: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.navigation-lien:hover {
  color: var(--terre-cuite);
}

/* Page active : barre pleine de 3 px sous le libellé. */
.navigation-barre {
  display: block;
  height: 3px;
  background: var(--olive);
}

/* Rangée mobile : nom de la page courante + bouton MENU. Masquée par défaut, révélée
   sous 900 px (§6). */
.navigation-etroite {
  display: none;
}

.navigation-etroite-rangee {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}

.navigation-page-courante {
  font: 700 13px/1.3 Lato, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive);
}

/* Portée par un <span> à l'intérieur du <summary>, pas par un bouton : c'est le
   <summary> qui reçoit le clic et le clavier, ce span n'en porte que l'apparence. */
.navigation-bouton-menu {
  display: inline-flex;
  align-items: center;
  background: var(--blanc);
  border: 1px solid rgba(73, 75, 46, .4);
  border-radius: 3px;
  color: var(--olive);
  font: 700 13px/1 Lato, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 13px 16px;
  min-height: 44px;
}

summary:hover .navigation-bouton-menu {
  background: var(--creme);
}

/* Liste déroulante mobile : <details> natif en régit seul l'ouverture et la fermeture
   (voir armunia_navigation()) — aucune classe d'état, aucun script. */
.navigation-liste-mobile {
  display: flex;
  flex-direction: column;
  padding: 4px 20px 16px;
  gap: 2px;
}

.navigation-lien-mobile {
  font: 700 15px/1 Lato, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
  text-decoration: none;
  padding: 15px 4px;
  border-top: 1px solid rgba(73, 75, 46, .18);
}

/* --- Pied de page : aplat olive, texte blanc (handoff §5.3). Survol des liens : blanc
   vers crème, jamais terre cuite — terre cuite sur olive donne un contraste de 1,86:1,
   un des deux interdits absolus de la charte. --- */

.pied-de-page {
  background: var(--olive);
  color: var(--blanc);
}

.pied-de-page-interne {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 60px) clamp(20px, 5vw, 40px);
}

.pied-de-page-signature {
  font: 700 13px/1.6 Lato, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blanc);
  margin: 0 0 32px;
  max-width: 60ch;
}

.pied-de-page-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 32px;
}

.pied-de-page-colonne {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pied-de-page-titre-colonne {
  font: 700 12px/1.4 Lato, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--creme);
  margin: 0 0 4px;
}

.pied-de-page a {
  font: 400 16px/1.5 Lato, sans-serif;
  color: var(--blanc);
  text-decoration: none;
}

.pied-de-page a:hover {
  color: var(--creme);
}

.pied-de-page-texte {
  font: 400 16px/1.5 Lato, sans-serif;
  color: var(--blanc);
}

.pied-de-page-mentions {
  font: 400 14px/1.7 Lato, sans-serif;
  color: var(--creme);
  margin: 36px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .3);
}

/* ---------------------------------------------------------------------------------
   6. Point de rupture — la seule requête média des deux feuilles (base.css et
   sections.css réunies). Toutes les grilles de contenu passent par auto-fit/minmax et
   clamp() ; navigation, bloc de droite du bandeau de marque (même seuil, handoff §5.1)
   et intitulé vide du pied de page (tour de correction 1, §4 — la grille à quatre
   colonnes s'empile ici) en ont besoin.
   --------------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .bandeau-marque-droite {
    display: none;
  }

  .navigation-interne {
    display: none;
  }

  .navigation-etroite {
    display: block;
  }

  /* Colonnes empilées : l'intitulé vide de la deuxième moitié des pages du menu ne
     laisse plus un espace flottant entre les deux listes, qui se lisent comme une
     seule. Au-dessus de 900 px, il reste en place — l'alignement des quatre colonnes
     en dépend. */
  .pied-de-page-titre-colonne-vide {
    display: none;
  }
}