/* =====================================================================
   CHARTE GRAPHIQUE ACD — feuille de style commune (charte intermédiaire)
   ---------------------------------------------------------------------
   Tous les documents de communication de l'Aéro-Club du Dauphiné
   importent ce fichier :   <link rel="stylesheet" href="../../CHARTE/charte.css">
   Rendu PDF : WeasyPrint (voir CHARTE/generer-pdf.sh).

   Pour changer de logo ou de couleurs (nouvelle identité à venir) :
     1. modifier les jetons de la section « 1. JETONS » ;
     2. pointer les classes .logo-acd / .logo-acd--sombre vers les nouveaux
        fichiers (section « 4. LOGO ») ;
     3. régénérer tous les PDF (CHARTE/generer-pdf.sh --tout).
   Rien d'autre n'est à toucher dans les documents.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. JETONS (design tokens)
   --------------------------------------------------------------------- */
:root {
  /* Couleurs de marque — relevées sur le logo (voir couleurs.md) */
  --acd-bleu:      #007AB4;   /* bleu ACD, principal : accents, puces, pastilles  */
  --acd-marine:    #00263C;   /* marine ACD, secondaire : titres, bandeaux, pied  */

  /* Couleurs dérivées (teintes du bleu) */
  --acd-ciel:      #E4F1F8;   /* fond des cartes et encarts                       */
  --acd-ciel-2:    #F3F8FB;   /* fond alterné des tableaux                        */
  --acd-filet:     #C9DCE8;   /* filets, bordures fines                           */
  --acd-gris-bleu: #5C7789;   /* texte secondaire, légendes                       */
  --acd-encre:     #1B2A36;   /* texte courant                                    */
  --acd-blanc:     #FFFFFF;

  /* Couleur de mise en avant — usage parcimonieux (prix, étiquette) */
  --acd-accent:    #F28C28;

  /* Typographies */
  --police-titres: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --police-texte:  "Source Sans 3", "Liberation Sans", Arial, sans-serif;

  /* Géométrie (valeurs par défaut = A4 ; A5 les réduit, voir section 3) */
  --marge:        16mm;
  --rayon:        2.5mm;
  --corps:        9.8pt;
  --interligne:   1.4;
  --logo-taille:  36mm;
  --pied-hauteur: 17mm;
}

/* ---------------------------------------------------------------------
   2. POLICES (fichiers dans CHARTE/FONTS, licence OFL)
   --------------------------------------------------------------------- */
@font-face { font-family: "Montserrat";    src: url("FONTS/Montserrat-VF.woff2"); }
@font-face { font-family: "Montserrat";    src: url("FONTS/Montserrat-Italic-VF.woff2"); font-style: italic; }
@font-face { font-family: "Source Sans 3"; src: url("FONTS/SourceSans3-VF.woff2"); }
@font-face { font-family: "Source Sans 3"; src: url("FONTS/SourceSans3-Italic-VF.woff2"); font-style: italic; }

/* ---------------------------------------------------------------------
   3. FORMATS DE PAGE
   Chaque <section class="page a5-portrait"> est une page physique.
   Recto/verso = deux .page successives dans le même fichier.
   --------------------------------------------------------------------- */
@page { margin: 0; }
@page a4-portrait { size: 210mm 297mm; }
@page a4-paysage  { size: 297mm 210mm; }
@page a5-portrait { size: 148mm 210mm; }
@page a5-paysage  { size: 210mm 148mm; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--police-texte);
  font-size: var(--corps);
  line-height: var(--interligne);
  color: var(--acd-encre);
  font-variant-numeric: lining-nums tabular-nums;
}

.page {
  position: relative;
  overflow: hidden;
  background: var(--acd-blanc);
  page-break-after: always;
  display: flex;
  flex-direction: column;
}
.page:last-child { page-break-after: auto; }

.a4-portrait { width: 210mm; height: 297mm; page: a4-portrait; }
.a4-paysage  { width: 297mm; height: 210mm; page: a4-paysage; }
.a5-portrait { width: 148mm; height: 210mm; page: a5-portrait; }
.a5-paysage  { width: 210mm; height: 148mm; page: a5-paysage; }

/* Réglages fins pour le petit format */
.a5-portrait, .a5-paysage {
  --marge: 10mm;
  --corps: 8.6pt;
  --logo-taille: 25mm;
  --pied-hauteur: 16mm;
  --rayon: 2mm;
  font-size: var(--corps);
}
.a5-portrait .entete, .a5-paysage .entete { padding: 3.5mm var(--marge) 3mm; gap: 5mm; }
.a5-portrait .corps, .a5-paysage .corps { padding-top: 3mm; }
.a5-portrait .entete h1, .a5-paysage .entete h1 { font-size: 2.05em; }
.a5-portrait h2.bandeau, .a5-paysage h2.bandeau { margin: 2.5mm 0 1.8mm; }
.a4-paysage { --marge: 14mm; }

/* Variante en flux bloc : à préférer dès que la page contient une image de
   hauteur modifiée ou des blocs imbriqués complexes (le flex en colonne de
   WeasyPrint dimensionne alors mal l'en-tête). Le pied est fixé en bas. */
.page--bloc { display: block; }
.page--bloc .corps { padding-bottom: calc(var(--pied-hauteur) + 4mm); }
.page--bloc .pied { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }

/* Liseré signature en haut de chaque page : marine → bleu */
.page::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: 3.5mm;
  background: linear-gradient(90deg, var(--acd-marine) 0%, var(--acd-marine) 45%, var(--acd-bleu) 100%);
}
.page.sans-liseré::before { display: none; }

/* ---------------------------------------------------------------------
   4. LOGO
   Un seul endroit à modifier lors du changement d'identité.
   --------------------------------------------------------------------- */
.logo-acd {
  display: block;
  width: var(--logo-taille);
  height: var(--logo-taille);
  background: url("../LOGO/SVG/logo_ACD_couleur.svg") no-repeat center / contain;
}
.logo-acd--sombre { background-image: url("../LOGO/SVG/logo_ACD_fond-sombre.svg"); }
.logo-acd--blanc  { background-image: url("../LOGO/SVG/logo_ACD_mono-blanc.svg"); }
.logo-acd--petit  { width: calc(var(--logo-taille) * .6); height: calc(var(--logo-taille) * .6); }

/* Cartouche blanc pour poser le logo sur une photo ou un fond sombre */
.cartouche {
  background: var(--acd-blanc);
  border-radius: var(--rayon);
  padding: 1.5mm;
  box-shadow: 0 1px 4px rgba(0, 38, 60, .25);
}

/* ---------------------------------------------------------------------
   5. EN-TÊTE
   --------------------------------------------------------------------- */
.entete {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6mm;
  padding: 5mm var(--marge) 4mm;
  border-bottom: 1.5px solid var(--acd-filet);
}
.entete__titres { flex: 1; min-width: 0; }
.surtitre {
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: .78em;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acd-bleu);
  margin: 0 0 1mm;
}
.entete h1, h1.titre {
  font-family: var(--police-titres);
  font-weight: 800;
  color: var(--acd-marine);
  font-size: 2.3em;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
}
.entete h1 small, h1.titre small, .entete-bandeau h1 small, .entete-photo__bandeau h1 small {
  display: block;
  font-weight: 500;
  font-size: .6em;
  letter-spacing: 0;
  color: var(--acd-bleu);
  margin-top: .5mm;
}
.sous-titre {
  font-size: 1.05em;
  color: var(--acd-gris-bleu);
  margin: 1.5mm 0 0;
}
.etiquette {
  display: inline-block;
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: .78em;
  color: var(--acd-blanc);
  background: var(--acd-bleu);
  border-radius: 999px;
  padding: .8mm 3mm;
  margin-top: 2mm;
  letter-spacing: .03em;
}
.etiquette--accent { background: var(--acd-accent); }
.etiquette--marine { background: var(--acd-marine); }

/* Variante « photo » : bannière pleine largeur + bandeau marine (fiche BIA) */
.entete-photo { flex: 0 0 auto; }
.entete-photo__image {
  display: block;
  width: 100%;
  height: 70mm;
  object-fit: cover;
}
.a5-portrait .entete-photo__image, .a5-paysage .entete-photo__image { height: 45mm; }
.entete-photo__bandeau {
  position: relative;
  background: var(--acd-marine);
  color: var(--acd-blanc);
  padding: 6mm var(--marge) 6mm;
}
.entete-photo__bandeau .surtitre { color: #9CD3F0; }
.entete-photo__bandeau h1 { color: var(--acd-blanc); }
.entete-photo__bandeau .sous-titre { color: rgba(255, 255, 255, .85); }
.entete-photo__bandeau .cartouche {
  position: absolute;
  right: var(--marge);
  top: calc(var(--logo-taille) * -.42);
}
.entete-photo__bandeau .entete__titres { max-width: calc(100% - var(--logo-taille) - 10mm); }

/* Variante « bandeau » : bandeau marine sans photo */
.entete-bandeau {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6mm;
  background: var(--acd-marine);
  color: var(--acd-blanc);
  padding: 5mm var(--marge);
}
.entete-bandeau .surtitre { color: #9CD3F0; }
.entete-bandeau h1 { color: var(--acd-blanc); }
.entete-bandeau h1 small { color: #9CD3F0; }
.entete-bandeau .sous-titre { color: rgba(255, 255, 255, .85); }

/* ---------------------------------------------------------------------
   6. CORPS DE PAGE
   --------------------------------------------------------------------- */
.corps {
  flex: 1 1 auto;
  min-height: 0;
  padding: 4mm var(--marge) 0;
}
.corps--serre { padding-top: 3mm; }
p { margin: 0 0 2mm; }
strong, b { font-weight: 700; color: var(--acd-marine); }
em { font-style: italic; }
sup { font-size: .68em; line-height: 0; vertical-align: super; }
a { color: inherit; text-decoration: none; }

/* Titres de section : bandeau marine (h2) et titre filet (h3) */
h2.bandeau {
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 1.22em;
  color: var(--acd-blanc);
  background: var(--acd-marine);
  border-radius: calc(var(--rayon) * .7);
  padding: 1.4mm 3.5mm;
  margin: 3mm 0 2mm;
  display: flex;
  align-items: baseline;
  gap: 2.5mm;
}
h2.bandeau:first-child { margin-top: 0; }
h2.bandeau small {
  font-family: var(--police-texte);
  font-weight: 400;
  font-size: .72em;
  opacity: .85;
}
h2.bandeau .a-droite { margin-left: auto; font-size: .78em; font-weight: 500; opacity: .9; }

h3, h3.titre {
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 1.15em;
  color: var(--acd-marine);
  margin: 3mm 0 1.8mm;
  padding-bottom: 1mm;
  border-bottom: 1.5px solid var(--acd-bleu);
  display: flex;
  align-items: center;
  gap: 2.5mm;
}
h3 .num {
  flex: 0 0 auto;
  background: var(--acd-bleu);
  color: var(--acd-blanc);
  border-radius: 50%;
  width: 6.5mm;
  height: 6.5mm;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85em;
}
h4 {
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: .92em;
  color: var(--acd-bleu);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 2.5mm 0 1.2mm;
}
h4:first-child { margin-top: 0; }

/* Titre-onglet (petit bandeau bleu posé sur une carte, style plaquette) */
.onglet {
  display: inline-block;
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: .95em;
  color: var(--acd-blanc);
  background: var(--acd-bleu);
  border-radius: calc(var(--rayon) * .6) calc(var(--rayon) * .6) 0 0;
  padding: 1mm 3mm;
  margin: 0;
}
.onglet small { font-weight: 400; font-size: .8em; opacity: .9; }

/* Listes */
ul.puces, .puces ul { margin: 0 0 2mm; padding-left: 4.5mm; }
ul.puces li, .puces li { margin-bottom: 1mm; }
ul.puces li::marker, .puces li::marker { color: var(--acd-bleu); }
ul.puces--serre li { margin-bottom: .4mm; }
ul.puces--aere li { margin-bottom: 1.8mm; }

/* Ligne libellé / prix (séparées par un filet, prix aligné à droite) */
.ligne-prix { display: flex; align-items: baseline; justify-content: space-between; gap: 3mm; padding: .5mm 0; border-bottom: 1px solid var(--acd-filet); }
.ligne-prix:last-of-type { border-bottom: 0; }
.ligne-prix .lib { flex: 1 1 auto; }
.ligne-prix .lib small { color: var(--acd-gris-bleu); font-size: .88em; }
.ligne-prix .montant { flex: 0 0 auto; font-weight: 700; color: var(--acd-marine); white-space: nowrap; }
.carte .ligne-prix { border-bottom-color: rgba(0, 122, 180, .18); }

/* Grilles */
.grille-2, .grille-3, .grille-4 { display: flex; gap: 5mm; }
.grille-2 > *, .grille-3 > *, .grille-4 > * { flex: 1 1 0; min-width: 0; }
.grille--serre { gap: 3.5mm; }

/* Cartes et encarts */
.carte {
  background: var(--acd-ciel);
  border-radius: var(--rayon);
  padding: 2.2mm 3.5mm;
  margin-bottom: 2.5mm;
}
.carte--blanche { background: var(--acd-blanc); border: 1.5px solid var(--acd-bleu); }
.carte--marine { background: var(--acd-marine); color: var(--acd-blanc); }
.carte--marine strong, .carte--marine b, .carte--marine h4 { color: var(--acd-blanc); }
.carte--onglet { border-radius: 0 var(--rayon) var(--rayon) var(--rayon); margin-top: 0; }
.carte > :last-child { margin-bottom: 0; }
.carte ul.puces:last-child { margin-bottom: 0; }

.encart {
  background: var(--acd-ciel);
  border-left: 1.2mm solid var(--acd-bleu);
  border-radius: calc(var(--rayon) * .7);
  padding: 2.5mm 4mm;
  margin: 0 0 4mm;
}
.encart > :last-child { margin-bottom: 0; }

.note {
  font-size: .86em;
  color: var(--acd-gris-bleu);
  border-left: 2px solid var(--acd-filet);
  padding-left: 2.5mm;
  margin: 2mm 0;
  line-height: 1.32;
}
.note p { margin-bottom: .6mm; }
.legende { font-size: .84em; color: var(--acd-gris-bleu); }

/* Chiffres clés */
.chiffres { display: flex; gap: 3.5mm; margin: 3mm 0 3.5mm; }
.chiffre {
  flex: 1 1 0;
  background: var(--acd-ciel);
  border-radius: var(--rayon);
  padding: 3mm 3mm 2.5mm;
}
.chiffre .grand {
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: 1.6em;
  line-height: 1;
  color: var(--acd-marine);
  margin-bottom: 1.2mm;
}
.chiffre .lib { font-size: .86em; color: var(--acd-gris-bleu); line-height: 1.25; }

/* Prix en pastille et bandeau total */
.prix {
  display: inline-block;
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 1.1em;
  color: var(--acd-blanc);
  background: var(--acd-marine);
  border-radius: 999px;
  padding: 1.2mm 4mm;
  margin: .5mm 0 2.5mm;
  white-space: nowrap;
}
.prix--accent { background: var(--acd-accent); }
.prix--bleu { background: var(--acd-bleu); }
.total {
  background: var(--acd-bleu);
  color: var(--acd-blanc);
  border-radius: var(--rayon);
  padding: 2mm 4mm;
  text-align: center;
  margin: 2mm 0 3.5mm;
}
.total b { color: var(--acd-blanc); font-family: var(--police-titres); font-size: 1.35em; }

/* Tableaux */
table.tableau {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5mm 0 3mm;
  font-size: .95em;
}
.tableau th {
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: .9em;
  background: var(--acd-marine);
  color: var(--acd-blanc);
  text-align: left;
  padding: 1.6mm 2.5mm;
  vertical-align: bottom;
}
.tableau th.centre, .tableau td.centre { text-align: center; }
.tableau th.droite, .tableau td.droite { text-align: right; }
.tableau th:first-child { border-top-left-radius: calc(var(--rayon) * .6); }
.tableau th:last-child  { border-top-right-radius: calc(var(--rayon) * .6); }
.tableau th.sous { background: var(--acd-bleu); font-size: .82em; padding: .9mm 2.5mm; }
.tableau td {
  padding: 1.05mm 2.5mm;
  border-bottom: 1px solid var(--acd-filet);
  vertical-align: middle;
}
.tableau tbody tr:nth-child(even) td { background: var(--acd-ciel-2); }
.tableau td.montant, .tableau th.montant { text-align: right; font-weight: 700; color: var(--acd-marine); white-space: nowrap; }
.tableau th.montant { color: var(--acd-blanc); }
.tableau td.lib small, .tableau td small { color: var(--acd-gris-bleu); font-size: .86em; }
.tableau tr.sous-total td { background: var(--acd-ciel) !important; font-weight: 600; color: var(--acd-marine); }
.tableau tr.section td {
  background: var(--acd-ciel) !important;
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: .88em;
  color: var(--acd-marine);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-top: 1.4mm;
}
.tableau--compact td { padding-top: .45mm; padding-bottom: .45mm; }
.tableau--compact th { padding-top: 1.1mm; padding-bottom: 1.1mm; }
.tableau td.type { font-weight: 600; color: var(--acd-marine); white-space: nowrap; }

/* Frise chronologique */
.frise { display: flex; margin: 2mm 0 3mm; }
.frise .etape { flex: 1 1 0; text-align: center; position: relative; padding: 0 1mm; }
.frise .etape .point {
  width: 4.5mm; height: 4.5mm; margin: 0 auto 1.5mm;
  background: var(--acd-bleu); border: 2px solid var(--acd-blanc);
  box-shadow: 0 0 0 1.5px var(--acd-bleu); border-radius: 50%;
  position: relative; z-index: 1;
}
.frise .etape::before {
  content: ""; position: absolute; top: 2.2mm; left: 0; right: 0;
  border-top: 1.5px solid var(--acd-filet);
}
.frise .etape:first-child::before { left: 50%; }
.frise .etape:last-child::before  { right: 50%; }
.frise .etape b { display: block; font-family: var(--police-titres); font-size: .9em; color: var(--acd-marine); }
.frise .etape span { display: block; font-size: .82em; color: var(--acd-gris-bleu); line-height: 1.25; }

/* Étapes numérotées : cartes côte à côte, pastille chiffrée + titre + texte */
.etapes { display: flex; gap: 3mm; margin: 1.5mm 0 2.5mm; }
.etapes .carte { flex: 1 1 0; margin: 0; padding: 2mm 2.5mm; font-size: .92em; }
.etapes .carte .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 5.5mm; height: 5.5mm; border-radius: 50%;
  background: var(--acd-bleu); color: var(--acd-blanc);
  font-family: var(--police-titres); font-weight: 700; font-size: .85em; margin-bottom: 1mm;
}
.etapes .carte b { display: block; color: var(--acd-marine); }

/* Coordonnées avec pictogrammes */
.contact { line-height: 1.35; }
.contact h4 { margin-bottom: 1.2mm; }
.contact__ligne { display: flex; align-items: flex-start; gap: 2mm; margin-bottom: .9mm; }
.contact__ligne img { width: 3.6mm; height: 3.6mm; flex: 0 0 auto; margin-top: .35mm; }
.contact__ligne b { color: var(--acd-marine); }

/* Photo pleine largeur dans un volet */
.photo { display: block; width: 100%; object-fit: cover; border-radius: var(--rayon); }

/* Filets et utilitaires */
.sep { border: 0; border-top: 1.5px solid var(--acd-filet); margin: 3mm 0; }
.centre { text-align: center; }
.droite { text-align: right; }
.petit { font-size: .86em; }
.marine { color: var(--acd-marine); }
.bleu { color: var(--acd-bleu); }
.accent { color: var(--acd-accent); }
.gras { font-weight: 700; }
.nowrap { white-space: nowrap; }
.mb0 { margin-bottom: 0 !important; }
.mt2 { margin-top: 2mm; }
.espace { flex: 1 1 auto; }

/* ---------------------------------------------------------------------
   7. PIED DE PAGE
   Toujours en bas de page (marine, texte blanc). Contenu type dans les
   gabarits : adresse · téléphones · e-mail · site · réseaux sociaux.
   --------------------------------------------------------------------- */
.pied {
  flex: 0 0 auto;
  margin-top: auto;
  min-height: var(--pied-hauteur);
  background: var(--acd-marine);
  color: var(--acd-blanc);
  padding: 2.8mm var(--marge);
  font-size: .82em;
  line-height: 1.35;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1mm 5mm;
}
.pied strong, .pied b { color: var(--acd-blanc); }
.a5-portrait .pied, .a5-paysage .pied { padding: 2.2mm var(--marge); font-size: .78em; line-height: 1.28; --pied-hauteur: 18mm; }
.pied__bloc { flex: 1 1 auto; min-width: 0; }
.pied__bloc + .pied__bloc { border-left: 1px solid rgba(255, 255, 255, .25); padding-left: 5mm; }
.pied__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2mm 4mm; }
.pied__item { display: inline-flex; align-items: center; gap: 1.5mm; white-space: nowrap; }
.pied__item img { width: 3.2mm; height: 3.2mm; }
.pied__nom { font-family: var(--police-titres); font-weight: 700; font-size: 1.08em; letter-spacing: .02em; }
.pied__social { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1mm; align-items: flex-start; }
.pied__social .pied__item { font-size: .95em; }
.pied__mention { font-size: .82em; opacity: .75; }
.pied > .pied__mention { flex-basis: 100%; }
.pied--simple { justify-content: space-between; }

/* Volets d'une plaquette pliée (A4 paysage → 2 volets A5 portrait).
   Mise en page en flux bloc (le flex en colonne de WeasyPrint est peu fiable
   pour des contenus imbriqués) : le pied est positionné en absolu. */
.volets { display: flex; height: calc(100% - 3.5mm); }
.volet {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  position: relative;
  padding: 4mm var(--marge) calc(var(--pied-hauteur) + 3mm);
  overflow: hidden;
}
.volet + .volet::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  border-left: .3mm dashed var(--acd-filet);
}
.volet > .pied { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }