/*
Theme Name:   Astra Child — DTF Québec Abitibi
Theme URI:    https://dtf-quebec-abitibi.ca/
Description:  Thème enfant d'Astra pour la migration hors d'Elementor. Contient les jetons de design du site et les surcharges nécessaires à la reconstruction de l'en-tête, du pied de page et des pages.
Author:       Max3DPrint
Template:     astra
Version:      1.0.0
Text Domain:  astra-child
*/

/* =========================================================================
   Jetons de design
   Relevés sur le rendu réel du site le 2026-07-30. Les valeurs --ast-global-*
   sont celles déjà définies par Astra : elles ne sont pas redéfinies ici,
   seulement documentées et réutilisées.

     --ast-global-color-0  #0084d6   bleu principal (boutons, liens actifs)
     --ast-global-color-1  #0075be   bleu foncé (survol)
     --ast-global-color-2  #000000   titres
     --ast-global-color-3  #333333   texte courant
     --ast-global-color-4  #f5f7f9   surface claire
     --ast-global-color-5  #ffffff   surface blanche
     --ast-global-color-6  #243673   bleu nuit
     --ast-global-color-8  #BFD1FF   bleu pâle

   Avant migration, Elementor surchargeait ce bleu par #019AFF (héros),
   #4483FF (cartes) et #2604FE (menu). La reconstruction unifie sur le
   jeton du thème.
   ========================================================================= */

:root {
  /* surface sombre du héros et du pied de page */
  --dtf-encre:            #0b0b14;
  --dtf-encre-douce:      #14141f;
  /* accents hérités, conservés pour compatibilité visuelle */
  --dtf-accent-chaud:     #ff5e13;
  --dtf-rouge:            #da4453;

  /* échelle typographique */
  --dtf-t-xs:   0.875rem;
  --dtf-t-s:    1rem;
  --dtf-t-m:    1.25rem;
  --dtf-t-l:    1.75rem;
  --dtf-t-xl:   2.5rem;
  --dtf-t-xxl:  3.25rem;

  /* rythme vertical */
  --dtf-esp-s:  1rem;
  --dtf-esp-m:  2rem;
  --dtf-esp-l:  4rem;
  --dtf-esp-xl: 6rem;

  --dtf-rayon:  6px;
  --dtf-rayon-pilule: 999px;
}

/* -------------------------------------------------------------------------
   Sections sombres — reproduit l'alternance clair/sombre propre au site
   ------------------------------------------------------------------------- */
.dtf-section-sombre {
  background-color: var(--dtf-encre);
  color: var(--ast-global-color-5);
}
.dtf-section-sombre h1,
.dtf-section-sombre h2,
.dtf-section-sombre h3,
.dtf-section-sombre p { color: var(--ast-global-color-5); }

/* -------------------------------------------------------------------------
   Boutons — un seul bleu, celui du thème
   ------------------------------------------------------------------------- */
.dtf-bouton-pilule .wp-block-button__link,
.wp-block-button.dtf-bouton-pilule > .wp-block-button__link {
  border-radius: var(--dtf-rayon-pilule);
  font-weight: 500;
  padding: 0.85em 2em;
}

/* -------------------------------------------------------------------------
   Accessibilité — focus visible, exigence WCAG AA
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--ast-global-color-0);
  outline-offset: 2px;
}

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

/* -------------------------------------------------------------------------
   En-tête — barre opaque
   Astra rendait la barre principale quasi transparente (rgba(0,0,0,0.07)),
   ce qui la faisait disparaître sur le héros sombre. Le modèle Elementor
   d'origine avait un fond #FFFEFD.
   ------------------------------------------------------------------------- */
.ast-primary-header-bar.ast-primary-header {
  background-color: #ffffff;
}

/* le logo ne doit jamais s'effondrer, même si une extension le différait */
.site-branding .custom-logo-link img.custom-logo {
  min-width: 60px;
  min-height: 24px;
  object-fit: contain;
}

/* -------------------------------------------------------------------------
   Pied de page — structure uniquement.
   Les COULEURS (fond des rangees, titres, texte, liens, survol, copyright)
   sont gerees par les reglages natifs Astra. Voir correctif-pied-de-page.md.
   Seule exception : le fill du SVG des icones sociales, qui appartient a un
   bloc natif de WordPress et n'a aucun reglage Astra correspondant.
   ------------------------------------------------------------------------- */
.site-footer .dtf-pied-liens {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.site-footer .dtf-pied-liens li { margin-bottom: 0.6rem; }
.site-footer .dtf-pied-liens a { text-decoration: none; }
.site-footer .dtf-pied-liens a:hover,
.site-footer .dtf-pied-liens a:focus-visible { text-decoration: underline; }
.site-footer .dtf-nap { line-height: 1.9; }
.site-footer .dtf-pied-logo img,
.site-footer img.dtf-pied-logo { max-width: 180px; height: auto; }

/* le SVG des icones sociales doit suivre la couleur du bloc, pas un noir fige */
.site-footer .wp-block-social-links.is-style-logos-only .wp-social-link svg {
  fill: currentColor;
}

/* -------------------------------------------------------------------------
   Section des deux produits — rangees coherentes image / titre / texte / bouton.
   Portee strictement limitee a .dtf-cartes. Les zones d'image sont egalisees
   par le reglage natif du bloc (rapport 1:1 + object-fit: contain), pas ici.
   ------------------------------------------------------------------------- */
.dtf-cartes > .wp-block-column {
  display: flex;
  flex-direction: column;
}
.dtf-cartes .wp-block-image { margin: 0 0 1.25rem; }
.dtf-cartes .wp-block-image img {
  width: 100%;
  object-position: center center;   /* image centree dans sa zone */
}
.dtf-cartes h3 {
  margin: 0 0 0.75rem;
  min-height: 2.4em;                /* titres sur la meme ligne de base */
  display: flex;
  align-items: center;
  justify-content: center;
}
.dtf-cartes p {
  flex: 1 1 auto;                   /* les descriptions occupent la meme hauteur */
  margin: 0 0 1.25rem;
}
.dtf-cartes .wp-block-buttons { margin-top: auto; }  /* boutons sur la meme ligne */

/* Sur telephone les cartes s'empilent : aucune hauteur vide imposee */
@media (max-width: 781px) {
  .dtf-cartes h3 { min-height: 0; display: block; }
  .dtf-cartes p  { flex: 0 1 auto; }
}

/* -------------------------------------------------------------------------
   Page /autres-services/ — portee strictement limitee a .as-autres-services.
   Les couleurs et le fond des sections viennent des reglages de bloc.
   ------------------------------------------------------------------------- */
.as-autres-services .as-galerie { margin-top: 1.75rem; }
.as-autres-services .as-galerie .wp-block-column { display: flex; flex-direction: column; }
.as-autres-services .as-photo {
  margin: 0 auto;
  max-width: 560px;   /* une photo ne doit pas occuper toute la section */
}
.as-autres-services .as-photo img { width: 100%; border-radius: 6px; }
.as-autres-services .as-photo figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--ast-global-color-3);
  text-align: left;
}
.as-autres-services h2 { margin-bottom: 0.6rem; }
.as-autres-services h3 { margin-top: 1.4rem; margin-bottom: 0.3rem; }
.as-autres-services .wp-block-buttons { margin-top: 1.5rem; }

@media (max-width: 781px) {
  .as-autres-services .as-galerie { margin-top: 1.25rem; }
}

/* =========================================================================
   Page /autres-services/ — portee strictement limitee a .as-autres-services
   et .as-real. Palette : jetons Astra du site, plus l'encre du pied de page.
   ========================================================================= */
.as-autres-services {
  --as-encre: #0b0b14;
  --as-bleu: var(--ast-global-color-1, #0075be);
  --as-clair: var(--ast-global-color-4, #f5f7f9);
  --as-texte: var(--ast-global-color-3, #333);
}

/* --- rythme vertical : respiration variable, pas un pas uniforme --------- */
.as-autres-services > .wp-block-group { padding-block: clamp(3rem, 6vw, 5.5rem); }
.as-autres-services > .wp-block-group:first-child { padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(2rem, 4vw, 3rem); }

/* --- hierarchie typographique ------------------------------------------- */
.as-autres-services h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 1rem;
}
.as-autres-services h2 {
  font-size: clamp(1.55rem, 2.7vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-block: 0 0.9rem;
}
.as-autres-services h3 {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-block: 1.9rem 0.35rem;
}
/* largeur de lecture : la prose ne doit pas courir sur 1100 px */
.as-autres-services p { max-width: 68ch; text-wrap: pretty; line-height: 1.65; }
.as-autres-services > .wp-block-group:first-child p { font-size: 1.12rem; max-width: 60ch; }

/* --- images -------------------------------------------------------------- */
.as-autres-services .as-photo { margin: 2rem auto 0; max-width: 560px; }
.as-autres-services .as-photo img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(11,11,20,.06), 0 8px 24px rgba(11,11,20,.08);
}
.as-autres-services .as-photo figcaption {
  margin-top: .7rem; font-size: .88rem; color: #5a6170; text-align: center;
}

/* --- boutons ------------------------------------------------------------- */
.as-autres-services .wp-block-buttons { margin-top: 1.8rem; }
.as-autres-services .wp-block-button__link {
  border-radius: 999px;
  padding: .85em 1.9em;
  font-weight: 600;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1);
}
.as-autres-services .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,117,190,.28); }
.as-autres-services .wp-block-button__link:focus-visible { outline: 3px solid var(--as-bleu); outline-offset: 3px; }

/* =========================================================================
   Galerie « Quelques realisations » — piste a defilement par accroche.
   Aucun JavaScript : defilement natif, ancres pour la navigation.
   ========================================================================= */
.as-real { color: #fff; }
.as-real__titre { color: #fff; font-size: clamp(1.55rem, 2.7vw, 2.15rem); letter-spacing: -.015em; margin-bottom: .5rem; }
.as-real__intro { color: #c3c8d4; max-width: 58ch; margin-bottom: 2rem; }

.as-r__piste {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0 0 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #3a4152 transparent;
  -webkit-overflow-scrolling: touch;
}
.as-r__piste:focus-visible { outline: 3px solid var(--ast-global-color-8, #BFD1FF); outline-offset: 4px; border-radius: 8px; }
.as-r__piste::-webkit-scrollbar { height: 8px; }
.as-r__piste::-webkit-scrollbar-thumb { background: #3a4152; border-radius: 99px; }

.as-r__item {
  flex: 0 0 calc((100% - 2.5rem) / 3);   /* 3 visibles sur ordinateur */
  scroll-snap-align: start;
  scroll-margin: 1rem;
  margin: 0;
}
.as-r__fig { margin: 0; }
.as-r__fig img {
  width: 100%;
  aspect-ratio: 4 / 3;          /* dimensions reservees : aucun deplacement */
  object-fit: cover;             /* jamais etiree */
  object-position: 50% 45%;
  border-radius: 10px;
  display: block;
  background: #15181f;
}
.as-r__leg { margin-top: .65rem; font-size: .88rem; color: #c3c8d4; line-height: 1.4; }

.as-r { position: relative; }
/* bords estompes : signale qu il y a du contenu au-dela */
.as-r::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 3.5rem; width: 4rem;
  background: linear-gradient(to right, rgba(11,11,20,0), #0b0b14);
  pointer-events: none;
}
.as-r__nav { display: flex; gap: .45rem; margin-top: 1.4rem; flex-wrap: wrap; align-items: center; }
.as-r__point {
  width: .7rem; height: .7rem;
  display: inline-block;
  border: 0; border-radius: 999px;
  background: #3a4152;
  text-decoration: none;
  transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}
.as-r__point:hover, .as-r__point:focus-visible { background: #4aa3e0; transform: scale(1.35); }
.as-r__point { transition: background-color .2s ease-out, transform .2s cubic-bezier(.22,1,.36,1); }
.as-r__point:focus-visible { outline: 3px solid var(--ast-global-color-8, #BFD1FF); outline-offset: 2px; }
.as-r__vis {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- tablette : 2 visibles ---------------------------------------------- */
@media (max-width: 900px) {
  .as-r__item { flex-basis: calc((100% - 1.25rem) / 2); }
}
/* --- telephone : 1 visible ---------------------------------------------- */
@media (max-width: 600px) {
  .as-r__item { flex-basis: 100%; }
  .as-autres-services .as-photo { margin-top: 1.5rem; }
  .as-autres-services h3 { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .as-r__piste { scroll-behavior: auto; }
  .as-autres-services .wp-block-button__link { transition: none; }
  .as-autres-services .wp-block-button__link:hover { transform: none; }
}

/* agencement de la galerie : hauteur uniforme, legendes serrees */
.as-r__piste { gap: 1rem; padding-bottom: 1.25rem; }
.as-r__item { flex-basis: calc((100% - 2rem) / 3); }
.as-r__fig img { border-radius: 12px; }
.as-r__leg { margin-top: .55rem; font-size: .82rem; letter-spacing: .01em; color: #aeb5c4; }
.as-real__intro { margin-bottom: 1.75rem; }
@media (max-width: 900px) { .as-r__item { flex-basis: calc((100% - 1rem) / 2); } .as-r::after { width: 2.5rem; } }
@media (max-width: 600px) { .as-r__item { flex-basis: 88%; } .as-r::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .as-r__point { transition: none; } .as-r__point:hover { transform: none; } }

/* -------------------------------------------------------------------------
   Renvoi vers le site principal — panneau-repere, volontairement saillant.
   La section broderie reste courte ; c est l appel a l action qui porte.
   ------------------------------------------------------------------------- */
.as-autres-services .as-signal {
  margin-top: 2.25rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: #ffffff;
  border: 2px solid #0075be;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,117,190,.12);
}
.as-autres-services .as-signal__sur {
  margin: 0 0 .35rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0075be;
}
.as-autres-services .as-signal__txt { margin: 0; max-width: 56ch; font-size: 1.05rem; }
.as-autres-services .as-signal__txt strong { font-size: 1.15rem; }
.as-autres-services .as-signal__btns { margin-top: 1.35rem; }
.as-autres-services .as-signal__cta .wp-block-button__link {
  font-size: 1.05rem;
  padding: 1em 2.2em;
  box-shadow: 0 6px 18px rgba(0,117,190,.28);
}
/* fleche indiquant que le lien quitte le site */
.as-autres-services .as-signal__cta .wp-block-button__link::after {
  content: " \2197";
  font-weight: 400;
}
@media (min-width: 782px) {
  .as-autres-services .as-signal {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "sur sur" "txt cta";
    align-items: center;
    column-gap: 2rem;
  }
  .as-autres-services .as-signal__sur { grid-area: sur; }
  .as-autres-services .as-signal__txt { grid-area: txt; }
  .as-autres-services .as-signal__btns { grid-area: cta; margin-top: 0; }
}

/* le panneau est desormais en haut, sur fond blanc : teinte legere pour le detacher */
.as-autres-services .as-signal-zone { padding-inline: 0; }
.as-autres-services .as-signal-zone .as-signal {
  margin-top: 0;
  background: #f4faff;
}


/* =========================================================================
   Taille du texte courant sur mobile — ajout du 2026-08-01
   -------------------------------------------------------------------------
   CONSTAT. Astra reduit la RACINE sous 921 px, via son CSS dynamique en
   ligne (balise `astra-theme-css-inline-css`) :

       @media (max-width:921px){ html{ font-size:91.2%; } }
       @media (max-width:544px){ html{ font-size:91.2%; } }

   91,2 % de 16 px = 14,592 px. Tout ce qui est exprime en rem suit, dont
   le texte courant, qui tombe donc sous le minimum de 16 px recommande sur
   mobile — en dessous, Safari iOS declenche un zoom automatique.

   CHOIX. On ne redefinit PAS la racine : cela agrandirait aussi le menu,
   les boutons, les prix et les legendes, qui sont dimensionnes volontairement.
   On retablit 16 px uniquement sur les paragraphes et les listes produits
   par les blocs natifs.

   EPARGNES : tout element portant une classe de composant `as-*` ; les
   legendes `figcaption` ; les boutons `.wp-block-button__link` ; les listes
   de composants (`.as-r__piste > li`) ; les produits WooCommerce — aucun
   `p` ni `li` de la boutique ne vit dans `.entry-content` ; et les pages
   encore sous Elementor, dont les `p` ne portent pas `.wp-block-paragraph`.

   NOTE DE SELECTEUR. Un `[class*="as-"]` seul serait faux : il attraperait
   `has-text-align-center`, dont la sous-chaine contient « as- ». D'ou
   l'ancrage en debut de classe, ou apres une espace.
   ========================================================================= */
@media (max-width: 921px) {
  .entry-content p.wp-block-paragraph:not([class^="as-"], [class*=" as-"]),
  .entry-content .wp-block-list > li:not([class^="as-"], [class*=" as-"]) {
    font-size: 16px;
  }

  /* conserve sa taille voulue : intro de /autres-services/ (1,12rem = 16,34 px) */
  .as-autres-services > .wp-block-group:first-child p { font-size: 1.12rem; }
}

/* =========================================================================
   H1 de /films-dtf-quebec/ (page 3465) SEULEMENT — ajout du 2026-08-01
   -------------------------------------------------------------------------
   Astra rendait ce H1 a 66 px sur ordinateur. Sur un titre de 79 caracteres,
   il tenait trois lignes et ecrasait le reste de la page. Plafonne a 48 px
   sur ordinateur, environ 32 px a 390 px de large.

   La couleur n'est pas redefinie : le H1 garde le noir du theme.
   Portee strictement limitee a cette page par la classe de corps
   `page-id-3465`. Aucun autre H1 du site n'est touche.
   ========================================================================= */
.page-id-3465 .entry-content h1.wp-block-heading {
  font-size: clamp(30px, 3.8vw + 17px, 48px);
  line-height: 1.2;
}