/* ============================================================
   ÉVOLUTIONS UX — STYLES COMMUNS DES NOUVEAUX COMPOSANTS
   ------------------------------------------------------------
   Extrait du `style.css` commun de la maquette (sgt-pet
   compositions), mais PAS repris tel quel : la maquette
   reconstituait aussi le site existant (hero de l'accueil,
   pied de page) et posait des remises à zéro globales pour
   fonctionner seule dans un navigateur.

   Chargées dans WordPress, ces règles auraient écrasé le thème
   sur toutes les pages, notamment :
     · ul { list-style: none; padding: 0 }  → les puces de TOUTES
       les listes saisies dans l'éditeur auraient disparu ;
     · *  { box-sizing: border-box }        → modèle de boîte
       changé pour tout le site ;
     · a  { color: inherit }                → couleur de tous les
       liens modifiée.

   Ce fichier ne garde donc que ce qui est réellement nouveau, et
   confine chaque remise à zéro aux racines des nouveaux
   composants (`.sgt-header`, `.section_interne`). Rien ici ne
   doit pouvoir atteindre un élément de l'existant.
   ============================================================ */


/* ---- Variables ----
   Noms préfixés `--sgt-` : aucun risque de collision avec le thème,
   qui n'utilise pas de propriétés personnalisées. */
:root{
  --sgt-noir:       #222221;
  --sgt-bleu:       #5073B0;
  --sgt-vert:       #92B63A;
  --sgt-jaune:      #E5B318;
  --sgt-magenta:    #BF007A;
  --sgt-gris:       #F7F7F7;
  --sgt-bordure:    #E6E6E6;
  --sgt-texte-doux: #656565;

  --sgt-font: 'Dosis', 'Trebuchet MS', Helvetica, Arial, sans-serif;
  --sgt-ease: all .5s ease;

  --h-top:  40px;   /* hauteur du sur-header */
  --h-main: 78px;   /* hauteur du header principal, mesurée sur le site */
  --logo-h: 54px;   /* hauteur du logo */
}


/* ---- Remises à zéro, confinées aux nouveaux composants ----
   Toutes enveloppées dans :where(), qui ramène leur spécificité à celle
   d'une simple balise. C'est indispensable : écrites `.sgt-header button`,
   elles pesaient PLUS lourd que les classes des composants
   (`.sgt-burger`, `.nav-toggle`, `.slider__fleche`) et écrasaient leurs
   marges et bordures — le burger se retrouvait collé au logo au lieu
   d'être poussé à droite. Une remise à zéro doit rester un défaut que
   n'importe quelle classe surcharge, comme le reset global de la
   maquette. */
:where(.sgt-header, .section_interne),
:where(.sgt-header, .section_interne) *,
:where(.sgt-header, .section_interne) *::before,
:where(.sgt-header, .section_interne) *::after{ box-sizing: border-box; }

:where(.sgt-header) ul{ list-style: none; margin: 0; padding: 0; }
:where(.sgt-header) a{ text-decoration: none; color: inherit; }
:where(.sgt-header) img{ display: block; max-width: 100%; }

/* Boutons des nouveaux composants : le thème ne les style pas, mais le
   navigateur leur donne un fond gris, une bordure et sa propre police. */
:where(.sgt-header, .section_interne) button{
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}


/* ============================================================
   ENVELOPPE + EN-TÊTE DE SECTION (pages internes)
   Reprise de `.partie_gauche` du thème : h2 35px/600 puis
   h3 26px/300, alignés à gauche, sans bande colorée.
   ============================================================ */
.section_interne{
  width: 84%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 70px 0 80px;
  font-family: var(--sgt-font);
  color: var(--sgt-noir);
}

.entete_section{ margin-bottom: 35px; }

/* Le thème serre ces deux lignes par `margin-top: -20px` sur le h3, qui
   rogne la marge par défaut du h2. On reproduit l'écart visuel obtenu
   sans dépendre de la marge par défaut du navigateur. */
.entete_section h2{
  margin: 0;
  font-size: 35px;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 1.1;
  color: var(--sgt-noir);
}
.entete_section h3{
  margin: 6px 0 0;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 4px;
  line-height: 1.1;
  color: var(--sgt-noir);
}
.entete_section p{
  max-width: 720px;
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--sgt-noir);
}


/* ============================================================
   SLIDER — composant commun des nouveaux blocs
   ------------------------------------------------------------
   Markup :
     .slider[data-slider]
       > .slider__piste[data-slider-piste]   la liste d'éléments
       > .slider__nav[data-slider-nav]       flèches générées par slider.js
   La piste défile en CSS natif (scroll-snap) ; le script ne génère et
   ne pilote que les flèches. Ni jQuery ni Owl Carousel.
   Réglages par variables sur la piste :
     --par-vue  colonnes visibles
     --rangs    lignes par colonne (défaut 1)
     --gap      espace entre colonnes
   ============================================================ */
.slider{ position: relative; }

.slider__piste{
  --par-vue: 1;
  --rangs: 1;
  --gap: 30px;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rangs), auto);
  grid-auto-columns: calc((100% - (var(--par-vue) - 1) * var(--gap)) / var(--par-vue));
  column-gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;       /* les flèches remplacent la barre */
}
.slider__piste::-webkit-scrollbar{ display: none; }
.slider__piste > *{ scroll-snap-align: start; }

/* Flèches précédent / suivant, sous le slider, alignées à droite.
   Carrés à filet noir, sans ombre ni arrondi, grisées en bout de piste.
   Masquées s'il n'y a qu'une page, et sans JavaScript. */
.slider__nav{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
}
.slider__nav[hidden]{ display: none; }

.slider__fleche{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--sgt-noir);
  color: var(--sgt-noir);
  transition: opacity .3s ease;
}
.slider__fleche--prec svg{ transform: rotate(180deg); }
.slider__fleche:disabled{ opacity: .25; cursor: default; }
.slider__fleche:focus-visible{ outline: 2px solid var(--sgt-noir); outline-offset: 3px; }


/* ---- Texte réservé aux lecteurs d'écran ----
   Le thème a déjà `.screen-reader-text` (héritage de Twenty Sixteen) ;
   on garde le nom de la maquette pour ne pas réécrire ses gabarits. */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ---- Mouvement réduit ----
   La maquette coupait les transitions sur `*`, donc sur tout le site.
   On les coupe uniquement sur les nouveaux composants : l'existant garde
   son comportement actuel. */
@media (prefers-reduced-motion: reduce){
  .sgt-header *,
  .section_interne *{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}