/* ==========================================================================
   Edragal Conseil — Lisibilité du contenu éditorial
   Complément de `components.css` : styles pour du HTML brut (h2/h3/p/ul/
   tableaux/images) tel qu'il existe déjà dans les pages du site, sans blocs
   Gutenberg. S'active via la classe `.contenu` sur le conteneur de l'article.
   Dépend de `tokens.css`. Créé le 11/10/2026 · HELABOWEB
   ========================================================================== */

.contenu { max-width: var(--conteneur-texte); }

/* Titres — de l'air, jamais de collision avec le paragraphe suivant */
.contenu > h2 {
  font-size: var(--t-xl);
  margin-top: var(--e-8);
  margin-bottom: var(--e-4);
}
.contenu > h2:first-child { margin-top: 0; }
.contenu > h3 {
  font-size: var(--t-l);
  margin-top: var(--e-7);
  margin-bottom: var(--e-3);
}
.contenu > h4 {
  margin-top: var(--e-6);
  margin-bottom: var(--e-2);
}
.contenu > h2 + p,
.contenu > h3 + p,
.contenu > h2 + ul,
.contenu > h2 + ol { margin-top: 0; }

/* Paragraphes */
.contenu p { margin-bottom: var(--e-4); max-width: var(--conteneur-texte); }
.contenu > p:last-child { margin-bottom: 0; }
.contenu a { color: var(--teal-encre); text-underline-offset: 3px; }
.contenu a:hover { color: var(--marine); }

/* Listes — puces sobres et alignées */
.contenu ul,
.contenu ol { margin: 0 0 var(--e-5); padding-left: 1.4rem; }
.contenu li { margin-bottom: var(--e-2); }
.contenu li::marker { color: var(--teal); }
.contenu ul ul,
.contenu ol ol,
.contenu ul ol,
.contenu ol ul { margin-top: var(--e-2); margin-bottom: 0; }

/* Citations */
.contenu blockquote {
  margin: var(--e-6) 0;
  padding: var(--e-4) var(--e-5);
  border-left: 3px solid var(--teal);
  background: var(--teal-pale);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  color: var(--texte);
}
.contenu blockquote p:last-child { margin-bottom: 0; }

/* Tableaux — héritent de `.tableau` quand la classe est posée, sinon sobres */
.contenu table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-s);
  margin: var(--e-6) 0;
}
.contenu table caption {
  text-align: left;
  font-size: var(--t-xs);
  color: var(--gris-texte);
  padding-bottom: var(--e-3);
}
.contenu th,
.contenu td {
  text-align: left;
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
}
.contenu thead th {
  background: var(--marine);
  color: var(--blanc);
  font-weight: var(--graisse-forte);
  font-size: var(--t-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 0;
}
.contenu tbody tr:nth-child(even) { background: rgba(220, 228, 230, 0.22); }

/* Images — jamais plus larges que la colonne, légendes discrètes */
.contenu img { height: auto; border-radius: var(--rayon); }
.contenu figure { margin: var(--e-6) 0; }
.contenu figcaption {
  margin-top: var(--e-2);
  font-size: var(--t-xs);
  color: var(--gris-texte);
}

/* Séparateurs */
.contenu hr {
  border: 0;
  border-top: 1px solid var(--bordure);
  margin: var(--e-7) 0;
}

/* Petits écrans */
@media (max-width: 600px) {
  .contenu > h2 { margin-top: var(--e-7); }
  .contenu ul,
  .contenu ol { padding-left: 1.2rem; }
}

/* ==========================================================================
   Utilitaires du thème enfant (complètent components.css sans le modifier)
   ========================================================================== */

/* Groupe de boutons centré (appel à l'action final) */
.groupe-btn--centre { justify-content: center; }

/* Élément de carte en colonne : pied de carte plaqué en bas, hauteurs égales */
.carte--colonne { display: flex; flex-direction: column; }
.carte--colonne .carte__pied { margin-top: auto; }

/* Zone vide sobre (gabarits sans résultat) */
.zone-vide {
  padding: var(--e-8) var(--e-5);
  border: 1px dashed var(--bordure-forte);
  border-radius: var(--rayon-l);
  text-align: center;
  color: var(--gris-texte);
  background: var(--fond-alt);
}

/* Fil d'Ariane sobre (pages intérieures) */
.fil-ariane { font-size: var(--t-xs); color: var(--gris-texte); }
/* Cibles tactiles : les liens de fil d'Ariane mesuraient 15 à 20 px de haut
   (relevé du 11/10/2026) — sous le minimum de 24 px. On garantit la hauteur
   sans changer la typographie ni l'alignement. */
.fil-ariane a {
  color: var(--teal-encre); text-decoration: underline; text-decoration-color: var(--bordure-forte);
  text-underline-offset: .2em; display: inline-flex; align-items: center; min-height: 24px;
}
.fil-ariane a:hover, .fil-ariane a:focus-visible { color: var(--marine); text-decoration-color: currentColor; }
/* Séparateurs : la teinte de bordure tombait à 1,47:1 sur le papier. Ils sont
   décoratifs (aria-hidden), mais un contraste si faible les rendait illisibles
   en plein soleil ou sur écran de mauvaise qualité. */
.fil-ariane__sep { margin-inline: var(--e-2); color: var(--gris-texte); }
.fil-ariane [aria-current="page"] { color: var(--gris-texte); }

/* Titre de page intérieure : plus sobre que le titre de héros */
.titre-page { font-size: var(--t-xxl); max-width: 24ch; }

/* Étiquette de gamme posée sur une carte d'offre */
.gamme-entete { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }

/* Ajustements de rythme vertical (fil d'Ariane collé au titre, etc.) */
.section--sans-bas { padding-bottom: 0; }
.section--sans-haut { padding-top: 0; }

/* Formulaire de recherche sobre */
.recherche { max-width: 520px; }
.recherche .btn { margin-top: var(--e-2); }

/* Sur mobile, détendre les listes du pied pour des cibles tactiles ≥ 44 px */
@media (max-width: 600px) {
  .pied__liste li { margin-bottom: var(--e-2); }
  .pied__liste a { display: inline-block; padding-block: var(--e-3); }
  .pied__legal a { display: inline-block; padding-block: var(--e-2); }
}

/* ==========================================================================
   Compléments aux gabarits de page (page-prestations / a-propos / contact).
   Chaque règle répond à un besoin non couvert par components.css ; rien n'est
   redéfini, ces styles s'ajoutent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Icônes — emplacement réservé.
   Les SVG sont branchés séparément via l'attribut [data-icone] (livraison en
   parallèle). Cette règle ne fait que réserver la boîte et aligner l'élément
   sur la ligne de texte tant que le SVG n'est pas injecté, afin d'éviter les
   sauts de mise en page. Elle ne dessine aucune icône.
   -------------------------------------------------------------------------- */
.icone {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.16em;
  margin-inline-end: var(--e-2);
}

/* --------------------------------------------------------------------------
   FAQ — questions à déplier en <details> natif, sans JavaScript.
   components.css ne style <details> que pour le menu mobile ; ce bloc couvre
   la liste de questions (page Offres et page Contact).
   -------------------------------------------------------------------------- */
.faq { max-width: var(--conteneur-texte); }
.faq details { border-bottom: 1px solid var(--bordure); padding-block: var(--e-4); }
.faq summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  font-weight: var(--graisse-forte);
  color: var(--encre);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--teal-encre); font-weight: var(--graisse-forte); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-top: var(--e-3); color: var(--gris-texte); max-width: var(--conteneur-texte); }

/* --------------------------------------------------------------------------
   Portrait « à venir » — cadre discret en pointillés (page À propos).
   Réutilise .zone-vide (déjà en bordure pointillée) et fixe seulement un ratio
   de portrait pour que l'emplacement ne s'effondre pas en l'absence d'image.
   -------------------------------------------------------------------------- */
.portrait-reserve {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  max-width: 340px;
  margin-inline: auto;
}