/* =========================================================
   GÉNÉRATION PATRIMOINE — feuille de style unique
   Charte : bordeaux #421B1B / écru #FDF5E2 / rose #F9E3DA / encre #171821
   Typographie : Archivo Expanded (wdth 125)
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --bordeaux: #421B1B;
  --bordeaux-clair: #5C2C2C;
  --ecru: #FDF5E2;
  --ecru-pur: #FFFCF4;
  --rose: #F9E3DA;
  --encre: #171821;

  --trait-sombre: rgba(66, 27, 27, 0.22);
  --trait-clair: rgba(253, 245, 226, 0.28);

  --serre: 68rem;   /* colonne de lecture */
  --large: 82rem;   /* largeur de grille */

  --pas: clamp(1.25rem, 3vw, 2rem);
  --bande: clamp(4.5rem, 9vw, 8rem);

  --t-xs: 0.78rem;
  --t-s: 0.9rem;
  --t-base: 1.0rem;
  --t-m: clamp(1.05rem, 1.4vw, 1.2rem);
  --t-l: clamp(1.35rem, 2.2vw, 1.75rem);
  --t-xl: clamp(1.8rem, 3.4vw, 2.75rem);
  --t-2xl: clamp(2.3rem, 5vw, 3.9rem);
}

/* ---------- 2. Bases ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--ecru);
  color: var(--encre);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 118;
  font-weight: 400;
  font-size: var(--t-base);
  line-height: 1.72;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: 500;
  font-variation-settings: "wdth" 125;
  color: var(--bordeaux);
  line-height: 1.2;
  letter-spacing: 0.005em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); line-height: 1.12; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }

p { margin: 0 0 1.15em; max-width: 72ch; }
strong, b { font-weight: 600; }
em { font-style: italic; font-weight: 600; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--bordeaux); }

:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 3px;
  border-radius: 2px;
}

img, svg { max-width: 100%; height: auto; display: block; }

ul { padding-left: 1.15rem; margin: 0 0 1.15em; }
li { margin-bottom: 0.45em; }
li::marker { color: var(--bordeaux); }

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--bordeaux); color: var(--ecru);
  padding: 0.75rem 1.25rem; z-index: 100;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* ---------- 3. Trames ---------- */
.enveloppe { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: var(--pas); }
.enveloppe--serree { max-width: var(--serre); }

.bande { padding-block: var(--bande); }
.bande--ecru { background: var(--ecru); }
.bande--rose { background: var(--rose); }
.bande--bordeaux { background: var(--bordeaux); color: var(--ecru); }

/* Texture de marque, reprise du hero, applicable à n'importe quelle bande sombre. */
.bande--texture { position: relative; overflow: hidden; }
.bande--texture::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("/assets/img/motif-fond.svg?v=20260913b");
  background-size: 44px auto;
  opacity: 0.05;
  mix-blend-mode: screen;
  pointer-events: none;
}
.bande--texture > * { position: relative; }
.bande--encre { background: var(--encre); color: var(--ecru); }

.bande--bordeaux h2, .bande--bordeaux h3, .bande--bordeaux h4,
.bande--encre h2, .bande--encre h3, .bande--encre h4 { color: var(--ecru); }

.centre { text-align: center; }
.centre p { margin-inline: auto; }

/* Feuille : marqueur d'axe repris du logo */
.feuille { display: block; width: 42px; margin: 0 auto 1.75rem; }
.feuille path { fill: var(--bordeaux); }
.bande--bordeaux .feuille path, .bande--encre .feuille path { fill: var(--rose); }

/* Cadre double emprunté à la bordure du logo */
.cadre {
  border: 1px solid var(--trait-sombre);
  outline: 1px solid var(--trait-sombre);
  outline-offset: 7px;
  background: var(--ecru-pur);
  padding: clamp(1.6rem, 3.4vw, 2.75rem);
}
.bande--bordeaux .cadre, .bande--encre .cadre {
  border-color: var(--trait-clair);
  outline-color: var(--trait-clair);
  background: transparent;
}

.grille { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grille--3, .grille--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
}

.intro { font-size: var(--t-m); max-width: 58ch; }
.chapo { font-size: var(--t-m); }

.citation {
  font-style: italic;
  font-weight: 100;
  font-size: var(--t-l);
  line-height: 1.5;
  color: var(--bordeaux);
  max-width: 34ch;
  margin-inline: auto;
}
.bande--bordeaux .citation, .bande--encre .citation { color: var(--rose); }

/* ---------- 4. Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem;
  padding: 0.9rem 1.9rem;
  font: inherit;
  font-weight: 500;
  font-variation-settings: "wdth" 125;
  font-size: var(--t-s);
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid var(--bordeaux);
  background: var(--bordeaux);
  color: var(--ecru);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.bouton:hover { background: var(--bordeaux-clair); border-color: var(--bordeaux-clair); }

.bouton--fantome { background: transparent; color: var(--bordeaux); }
.bouton--fantome:hover { background: var(--bordeaux); color: var(--ecru); }

.bande--bordeaux .bouton, .hero .bouton {
  background: var(--ecru); border-color: var(--ecru); color: var(--bordeaux);
}
.bande--bordeaux .bouton:hover, .hero .bouton:hover { background: var(--rose); border-color: var(--rose); }

.bande--bordeaux .bouton--fantome, .hero .bouton--fantome {
  background: transparent; border-color: var(--trait-clair); color: var(--ecru);
}
.bande--bordeaux .bouton--fantome:hover, .hero .bouton--fantome:hover {
  background: transparent; border-color: var(--ecru); color: var(--ecru);
}

.boutons { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.centre .boutons { justify-content: center; }

/* ---------- 5. En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--ecru);
  border-bottom: 1px solid var(--trait-sombre);
}
.entete__interieur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: 5rem;
}
.entete__logo img { width: clamp(170px, 20vw, 230px); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a {
  font-size: var(--t-s);
  font-weight: 500;
  text-decoration: none;
  color: var(--encre);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--bordeaux); color: var(--bordeaux); }
.nav .bouton { color: var(--ecru); border-bottom: 1px solid var(--bordeaux); }
.nav .bouton:hover { color: var(--ecru); }

.bascule-nav {
  display: none;
  background: none; border: 1px solid var(--trait-sombre);
  padding: 0.6rem 0.9rem; font: inherit; font-size: var(--t-s); cursor: pointer;
  color: var(--bordeaux);
}

@media (max-width: 860px) {
  .bascule-nav { display: block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    gap: 0;
    background: var(--ecru);
    border-bottom: 1px solid var(--trait-sombre);
    padding: 0.5rem var(--pas) 1.5rem;
  }
  .nav[data-ouvert="true"] { display: flex; }
  .nav a { padding-block: 0.9rem; border-bottom: 1px solid var(--trait-sombre); }
  .nav .bouton { margin-top: 1rem; }
  .entete__interieur { position: relative; }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  background: var(--bordeaux);
  color: var(--ecru);
  padding-block: clamp(4rem, 10vw, 7.5rem);
  overflow: hidden;
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  /* Motif vectoriel, une seule tuile, net à toute échelle et sur tout écran.
     Le fichier livré dessine le motif en bordeaux à 5 % pour fond clair :
     la version du site est recolorée en blanc, l'opacité est pilotée ici. */
  background-image: url("/assets/img/motif-fond.svg?v=20260913b");
  background-size: 44px auto;
  opacity: 0.06;
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 { color: var(--ecru); max-width: 20ch; margin-inline: auto; }
.hero__embleme { width: clamp(120px, 16vw, 165px); margin: 0 auto 2.5rem; }
.hero__intro { color: rgba(253, 245, 226, 0.86); font-size: var(--t-m); max-width: 56ch; margin: 0 auto 2rem; }
.hero .citation { color: var(--rose); margin-block: 2.5rem 2.25rem; max-width: 40ch; }
.hero__note { font-size: var(--t-s); color: rgba(253, 245, 226, 0.72); margin: 1.75rem auto 0; max-width: 52ch; }

/* ---------- 7. Repères chiffrés ---------- */
.reperes { display: grid; grid-template-columns: repeat(4, 1fr); }
.repere { text-align: center; padding: clamp(1.25rem, 2.5vw, 2rem) 1rem; border-right: 1px solid var(--trait-sombre); }
.repere:last-child { border-right: 0; }
.repere__valeur {
  display: block;
  font-size: var(--t-xl);
  font-weight: 500;
  font-variation-settings: "wdth" 125;
  color: var(--bordeaux);
  line-height: 1.1;
}
.repere__legende { display: block; font-size: var(--t-s); line-height: 1.45; margin-top: 0.6rem; max-width: 20ch; margin-inline: auto; text-wrap: balance; }
@media (max-width: 760px) {
  .reperes { grid-template-columns: repeat(2, 1fr); }
  .repere:nth-child(2) { border-right: 0; }
  .repere:nth-child(-n+2) { border-bottom: 1px solid var(--trait-sombre); }
}

/* ---------- 8. Blocs de contenu ---------- */
.bloc { }
.bloc h3 { margin-bottom: 0.5rem; }
.bloc p { font-size: var(--t-s); line-height: 1.7; }
.bloc__feuille { width: 26px; margin-bottom: 1.1rem; }
.bloc__role {
  font-size: var(--t-xs);
  line-height: 1.5;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--trait-sombre);
  color: var(--bordeaux);
}
.bande--bordeaux .bloc__role { color: var(--rose); border-bottom-color: var(--trait-clair); }

/* Rangée d'équipe : flex centré plutôt qu'une grille à 4 colonnes, pour que
   cinq cartes se répartissent proprement et se replient sans orphelin. */
/* Équipe : une seule rangée sur grand écran, puis des paliers qui gardent des
   lignes complètes. Colonnes explicites plutôt qu'auto-fit, pour éviter qu'une
   carte se retrouve seule sur la dernière ligne. */
.equipe {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 1.6vw, 1.5rem);
  align-items: start;
}
@media (max-width: 1180px) { .equipe { grid-template-columns: repeat(3, 1fr); max-width: 58rem; margin-inline: auto; } }
@media (max-width: 780px)  { .equipe { grid-template-columns: repeat(2, 1fr); max-width: 34rem; } }
@media (max-width: 480px)  { .equipe { grid-template-columns: 1fr; max-width: 20rem; } }


.personne { display: flex; flex-direction: column; align-items: center; text-align: center; }
.equipe .personne h3 { font-size: 1rem; line-height: 1.3; }
.equipe .personne p { font-size: var(--t-xs); }
.equipe .bloc__role { padding-bottom: 0.6rem; margin-bottom: 0.6rem; }
.personne__photo {
  width: clamp(104px, 11vw, 148px);
  height: auto;
  margin-bottom: 1rem;
}
.personne .bloc__role { width: 100%; }
.personne__lien {
  font-size: var(--t-xs);
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--bordeaux);
}
.bande--bordeaux .personne__lien { color: var(--rose); }
.bloc__feuille path { fill: var(--bordeaux); }
.bande--bordeaux .bloc__feuille path { fill: var(--rose); }
.bande--bordeaux .bloc p { color: rgba(253, 245, 226, 0.84); }

.duo { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

.portrait { margin: 0; border: 1px solid var(--trait-sombre); outline: 1px solid var(--trait-sombre); outline-offset: 7px; }
/* Sur fond sombre, le cadre à double filet passe en clair. */
.bande--bordeaux .portrait, .bande--encre .portrait {
  border-color: var(--trait-clair);
  outline-color: var(--trait-clair);
}
.portrait img { width: 100%; height: auto; display: block; }

.partenaires {
  list-style: none; padding: 0; margin: 2.25rem 0 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.75rem clamp(1.5rem, 4vw, 3rem);
}
.partenaires li {
  font-size: var(--t-m);
  font-weight: 500;
  font-variation-settings: "wdth" 125;
  color: var(--bordeaux);
  margin: 0;
}
.partenaires img { height: 40px; width: auto; }

/* Emplacement image en attente */
.attente {
  display: grid; place-items: center;
  aspect-ratio: 4 / 5;
  background: repeating-linear-gradient(135deg, rgba(66,27,27,0.05) 0 10px, transparent 10px 20px);
  color: var(--bordeaux);
  font-size: var(--t-xs);
  text-align: center;
  padding: 1.5rem;
  line-height: 1.5;
}
.attente--large { aspect-ratio: 16 / 9; }

/* ---------- 9. Étapes ---------- */
.etapes { counter-reset: etape; display: grid; gap: 0; }
.etape {
  counter-increment: etape;
  display: grid; grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--trait-sombre);
  align-items: start;
}
.etape:last-child { border-bottom: 1px solid var(--trait-sombre); }
.etape::before {
  content: counter(etape, decimal-leading-zero);
  font-size: var(--t-l);
  font-weight: 500;
  font-variation-settings: "wdth" 125;
  color: var(--bordeaux);
  opacity: 0.55;
  line-height: 1.1;
}
.etape h3 { margin-bottom: 0.35rem; }
.etape p { font-size: var(--t-s); margin-bottom: 0; }
@media (max-width: 560px) { .etape { grid-template-columns: 3rem 1fr; } }

/* ---------- 10. Avis ---------- */
.avis-note { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
/* Les marges des paragraphes sont exprimées en em : sur un chiffre de 62 px,
   le margin-bottom par défaut créait 72 px de vide. On les reprend à la main. */
.avis-note > * { margin-inline: auto; margin-block: 0; }
.avis-note h2 { margin-bottom: 1.5rem; }
.avis-note .feuille { margin-bottom: 1.75rem; }
.avis-note__valeur {
  font-size: var(--t-2xl); font-weight: 500; font-variation-settings: "wdth" 125;
  color: var(--bordeaux); line-height: 1;
  margin-bottom: 0.75rem;
}
.avis-note__etoiles { color: var(--bordeaux); letter-spacing: 0.28em; font-size: var(--t-m); margin-bottom: 0.6rem; }
.avis-note__total { font-size: var(--t-s); }

/* Grille plutôt que colonnes CSS : avec des avis allant de deux à quinze lignes,
   l'équilibrage automatique des colonnes vidait entièrement la première. La grille
   aligne les rangées et répartit les écarts au lieu de les concentrer. */
.avis-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
@media (max-width: 1000px) { .avis-liste { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .avis-liste { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }

.avis {
  background: var(--ecru-pur);
  border: 1px solid var(--trait-sombre);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  display: block;
}
.avis__texte { font-size: var(--t-s); margin: 0 0 0.8rem; }
.avis__texte:last-of-type { margin-bottom: 1rem; }
.avis__etoiles { color: var(--bordeaux); letter-spacing: 0.18em; font-size: var(--t-s); margin: 0 0 0.9rem; }
.avis__pied { font-size: var(--t-xs); line-height: 1.5; border-top: 1px solid var(--trait-sombre); padding-top: 0.8rem; margin: 0; }
.avis__auteur { font-weight: 600; display: block; }

.avis--replie { display: none; }
.avis-liste[data-deplie="true"] .avis--replie { display: block; }

.avis-mention { font-size: var(--t-xs); text-align: center; margin: 2rem auto 0; max-width: 76ch; line-height: 1.6; opacity: 0.8; }
.avis-mention a { color: var(--bordeaux); }

/* ---------- 11. Tarifs ---------- */
.offre {
  border: 1px solid var(--trait-sombre);
  background: var(--ecru-pur);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex; flex-direction: column;
}
.offre--phare { border-color: var(--bordeaux); outline: 1px solid var(--bordeaux); outline-offset: 7px; }
.offre__prix {
  font-size: var(--t-xl); font-weight: 500; font-variation-settings: "wdth" 125;
  color: var(--bordeaux); line-height: 1.1; margin: 0.4rem 0 0.2rem;
}
.offre__unite { font-size: var(--t-s); display: block; margin-bottom: 1.4rem; }
.offre ul { list-style: none; padding: 0; margin-bottom: 1.75rem; }
.offre li { position: relative; padding-left: 1.4rem; font-size: var(--t-s); line-height: 1.6; }
.offre li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; background: var(--bordeaux); transform: rotate(45deg); }
.offre .bouton { margin-top: auto; }

.tableau-frais { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tableau-frais th, .tableau-frais td { text-align: left; padding: 0.9rem 1rem; border-bottom: 1px solid var(--trait-sombre); vertical-align: top; }
.tableau-frais th { font-weight: 600; color: var(--bordeaux); }
.tableau-frais tr:first-child th { border-top: 1px solid var(--trait-sombre); }

/* ---------- 12. Formulaire ---------- */
.champ { display: grid; gap: 0.45rem; margin-bottom: 1.25rem; }
.champ label { font-size: var(--t-s); font-weight: 500; }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: var(--t-s);
  padding: 0.85rem 1rem;
  background: var(--ecru-pur);
  border: 1px solid var(--trait-sombre);
  color: var(--encre);
  width: 100%;
  border-radius: 0;
}
.champ textarea { min-height: 9rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--bordeaux); }
.champ--case { grid-template-columns: auto 1fr; align-items: start; gap: 0.75rem; }
.champ--case input { width: auto; margin-top: 0.3rem; }
.champ--case label { font-weight: 400; font-size: var(--t-xs); line-height: 1.6; }
.champ__aide { font-size: var(--t-xs); opacity: 0.75; }

.coordonnees { list-style: none; padding: 0; }
.coordonnees li { display: grid; gap: 0.2rem; padding-block: 0.9rem; border-bottom: 1px solid var(--trait-sombre); font-size: var(--t-s); }
.coordonnees li:first-child { border-top: 1px solid var(--trait-sombre); }
.coordonnees span { font-size: var(--t-xs); opacity: 0.7; }
.coordonnees a { color: var(--bordeaux); }

.calendrier { border: 1px solid var(--trait-sombre); background: var(--ecru-pur); }
.calendrier iframe { width: 100%; height: 1040px; border: 0; display: block; }
@media (max-width: 860px) { .calendrier iframe { height: 1120px; } }

/* ---------- 13. Pied de page ---------- */
.pied { background: var(--encre); color: rgba(253, 245, 226, 0.82); padding-block: clamp(3.5rem, 7vw, 5rem) 2.5rem; font-size: var(--t-s); }
.pied a { color: rgba(253, 245, 226, 0.82); }
.pied a:hover { color: var(--rose); }
.pied__haut { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 2.5rem; border-bottom: 1px solid var(--trait-clair); }
@media (max-width: 780px) { .pied__haut { grid-template-columns: 1fr; } }
.pied__logo { width: 200px; margin-bottom: 1.5rem; }
.pied h4 { color: var(--rose); font-size: var(--t-s); margin-bottom: 1rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 0.6rem; }
.pied__legal { font-size: var(--t-xs); line-height: 1.75; opacity: 0.7; padding-top: 2.5rem; }
.pied__legal p { max-width: none; }

/* ---------- 14. Pages de texte ---------- */
/* En-tête de page : même texture que le hero, dans la version bordeaux du
   fichier livré, prévue pour les fonds clairs. Le motif marque l'ouverture
   d'une page. Les bandes bordeaux de milieu de page restent unies, sinon la
   texture devient un papier peint et ne signale plus rien. */
.entete-page {
  position: relative;
  overflow: hidden;
  background: var(--rose);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.entete-page::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("/assets/img/motif-fond-bordeaux.svg?v=20260913b");
  background-size: 44px auto;
  opacity: 0.07;
  pointer-events: none;
}
.entete-page > * { position: relative; }
.entete-page p { font-size: var(--t-m); max-width: 54ch; margin-inline: auto; margin-bottom: 0; }

.texte-legal h2 { font-size: var(--t-l); margin-top: 2.5rem; }
.texte-legal p, .texte-legal li { font-size: var(--t-s); }
.texte-legal p:first-of-type { margin-top: 0; }


/* ---------- 15. Consentement (tarteaucitron) ---------- */
/* Habillage aux couleurs de la charte. Les sélecteurs viennent de
   tarteaucitron, ne pas les renommer. */

#tarteaucitronRoot * {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif !important;
  font-variation-settings: "wdth" 112;
}

/* Bandeau */
#tarteaucitronAlertBig {
  background: var(--encre) !important;
  color: var(--ecru) !important;
  padding: 1.5rem !important;
}
#tarteaucitronRoot #tarteaucitronDisclaimerAlert,
#tarteaucitronRoot #tarteaucitronDisclaimerAlert * {
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: var(--ecru) !important;
}

/* Boutons du bandeau */
#tarteaucitronRoot #tarteaucitronPersonalize2 {
  background: var(--ecru) !important;
  color: var(--bordeaux) !important;
  border: 1px solid var(--ecru) !important;
}
#tarteaucitronRoot #tarteaucitronAllDenied2,
#tarteaucitronRoot #tarteaucitronCloseAlert {
  background: transparent !important;
  color: var(--ecru) !important;
  border: 1px solid rgba(253, 245, 226, 0.55) !important;
}
#tarteaucitronRoot #tarteaucitronPersonalize2,
#tarteaucitronRoot #tarteaucitronAllDenied2,
#tarteaucitronRoot #tarteaucitronCloseAlert {
  border-radius: 0 !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em;
  padding: 0.8rem 1.5rem !important;
}

/* Panneau de réglages */
#tarteaucitronRoot #tarteaucitronServices .tarteaucitronMainLine,
#tarteaucitronRoot #tarteaucitronClosePanelCookie,
#tarteaucitronRoot #tarteaucitronInfo,
#tarteaucitronRoot .tarteaucitronTitle b { background: var(--bordeaux) !important; }

#tarteaucitronRoot #tarteaucitronServices .tarteaucitronAllow,
#tarteaucitronRoot #tarteaucitronServices .tarteaucitronDeny { border-radius: 0 !important; }
#tarteaucitronRoot #tarteaucitronServices .tarteaucitronIsAllowed .tarteaucitronAllow { background: #2b5c34 !important; }
#tarteaucitronRoot #tarteaucitronServices .tarteaucitronIsDenied .tarteaucitronDeny { background: #8c2f2f !important; }

/* Encart affiché à la place de l'agenda tant qu'il n'est pas autorisé */
.calendrier:has(.tac_activate) .calendly-inline-widget { height: 420px !important; }

.calendrier .tac_activate {
  background: var(--ecru-pur) !important;
  color: var(--encre) !important;
  height: 100%;
  display: grid !important;
  place-items: center;
  padding: 2rem;
  text-align: center;
}
.calendrier .tac_float { font-size: 1rem; line-height: 1.7; }
.calendrier .tac_float .tarteaucitronAllow {
  display: inline-block;
  margin-top: 1.25rem;
  background: var(--bordeaux) !important;
  color: var(--ecru) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0.85rem 1.7rem !important;
  font-weight: 500;
  cursor: pointer;
}

.calendrier__note {
  font-size: var(--t-xs);
  line-height: 1.6;
  margin: 0 0 0.9rem;
  max-width: none;
}
.calendrier__note a { color: var(--bordeaux); }


/* ---------- 16. Bande image pleine largeur ---------- */
.bande-image { display: block; line-height: 0; }
.bande-image img {
  width: 100%;
  height: clamp(240px, 34vw, 460px);
  object-fit: cover;
  object-position: center 35%;
}