/* =========================================================================
   GRISOR BURKINA, feuille de style unique
   =========================================================================

   Charte reprise du site d'origine, relevee dans la capture du 20/05/2026 :
   accent #ee6c4e, police Montserrat.

   UNE SEULE FEUILLE POUR TOUT LE SITE. A cinq pages, decouper couterait plus
   de requetes que cela n'economise d'octets.
   ========================================================================= */

:root {
  --accent:        #ee6c4e;  /* DECORATIF SEUL : 3,05:1, jamais sous du texte */
  --accent-fonce:  #db3a15;  /* texte et boutons : 4,54:1 sur blanc, AA */
  --accent-sombre: #b32d0f;  /* survol : 6,37:1 */
  --encre:         #1c2331;
  --encre-douce:   #4a4f5d;
  --trait:         #e6e6e6;
  --fond:          #ffffff;
  --fond-doux:     #f8f9f9;
  --largeur:       1080px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Le defilement doux ne s'impose pas : qui a demande a son systeme de
   reduire les animations le fait souvent pour des troubles vestibulaires,
   ou le mouvement provoque un vrai malaise. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--encre);
  background: var(--fond);
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }

/* Ou suis-je au clavier. Sans cette regle, seuls les champs du formulaire
   le montraient : sur l'en-tete sombre, le contour par defaut du navigateur
   est pratiquement invisible. focus-visible et non focus, pour ne pas
   entourer ce qu'on vient de cliquer a la souris. */
:focus-visible {
  outline: 3px solid var(--accent-fonce);
  outline-offset: 2px;
}
header.site :focus-visible,
footer.site :focus-visible,
.bandeau-haut :focus-visible,
.hero :focus-visible {
  outline-color: #fff;
}

a { color: var(--accent-fonce); }
a:hover { color: var(--accent-sombre); }

/* Un lien d'evitement, visible seulement au clavier. Sans lui, la navigation
   au clavier traverse tout le menu a chaque page. */
.evitement {
  position: absolute;
  left: -9999px;
  background: var(--encre);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 100;
}
.evitement:focus { left: 1rem; top: 1rem; }

.contenu {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------------------------------------------------------------- bandeau */

.bandeau-haut {
  background: var(--encre);
  color: #fff;
  font-size: .82rem;
  padding: .5rem 0;
}
.bandeau-haut a { color: #fff; text-decoration: none; }
.bandeau-haut a:hover { text-decoration: underline; }

header.site {
  border-bottom: 1px solid var(--trait);
  position: sticky;
  top: 0;
  background: var(--fond);
  z-index: 50;
}
.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .9rem;
  padding-bottom: .9rem;
}
.marque { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; }
/* Le logo vient de wp-content/uploads du serveur, seul endroit ou il existait
   encore : les archives rendaient 404 sur chacune de ses adresses.
   C'est le monogramme GO, identifie le 2026-09-02. Le fichier nomme top-logo.png
   avait ete pris pour le logo la veille parce qu'il portait ce nom et vivait
   dans l'en-tete du theme : ce n'etait pas celui du cabinet. Un nom de fichier
   n'est pas une preuve d'identite.
   Les attributs width et height de la balise portent ses dimensions reelles,
   240 sur 240, pour que la place soit reservee avant le chargement et que
   l'en-tete ne saute pas sous les yeux du visiteur. */
.marque img {
  flex: 0 0 auto;
  height: 40px;
  width: auto;
  display: block;
}
.marque strong { display: block; font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; }
.marque span { display: block; font-size: .74rem; color: var(--encre-douce); }

nav.principal ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.principal a {
  text-decoration: none;
  color: var(--encre);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .7rem 0;
  border-bottom: 2px solid transparent;
}
nav.principal a:hover { border-bottom-color: var(--accent); }
/* Le selecteur de langue n'est pas une rubrique du site, c'est un reglage.
   Il ne montre QUE la langue vers laquelle on peut aller : sur une page
   francaise, le drapeau anglais. Montrer les deux obligeait le lecteur a
   chercher lequel etait actif ; un seul drapeau ne pose pas la question.
   Le drapeau est un SVG en ligne, donc rien a charger et rien a demander a
   l'exterieur.
   L'INTITULE N'EST PAS PERDU POUR AUTANT : le lien porte un aria-label et un
   title, donc un lecteur d'ecran annonce « Read this page in English » et la
   souris affiche la meme phrase. Une icone seule sans nom accessible serait un
   lien muet. */
.langue {
  display: flex;
  align-items: center;
  margin-left: .6rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--trait);
}
.langue a {
  display: flex;
  align-items: center;
  padding: .55rem .35rem;
  border-bottom: 0;
}
.langue a:hover { border-bottom: 0; }
.langue svg {
  display: block;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 2px;
  opacity: .72;
  transition: opacity .15s ease;
  /* Un dernier pixel vers le haut. Les rubriques sont en capitales, sans
     jambage descendant : leur centre optique se lit plus haut que le centre
     geometrique de leur ligne, alors qu'un rectangle, lui, est centre pour de
     bon. Le transform ne deplace pas la boite, donc la cible tactile ne bouge
     pas d'un pixel. */
  transform: translateY(-1px);
}
.langue a:hover svg,
.langue a:focus-visible svg { opacity: 1; }

nav.principal a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent-fonce); }

/* ------------------------------------------------------------------- hero */

.hero {
  background: var(--encre);
  color: #fff;
  padding: 4rem 0 3.5rem;
}
.hero h1 {
  margin: 0 0 .75rem;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.15;
  letter-spacing: .01em;
}
.hero p { margin: 0; max-width: 46rem; color: #d7dae1; font-size: 1.06rem; }
.hero .filet { width: 68px; height: 4px; background: var(--accent); margin: 1.4rem 0 0; }

/* --------------------------------------------------------------- sections */

section { padding: 3.25rem 0; }
section.douce { background: var(--fond-doux); }

h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 0 0 .4rem;
  letter-spacing: .01em;
}
h3 { font-size: 1.12rem; margin: 0 0 .5rem; }
h4 { font-size: .98rem; margin: 0 0 .3rem; }

.chapeau { color: var(--encre-douce); max-width: 46rem; margin: 0 0 2rem; }

.grille {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}

/* UNE GRILLE NE DOIT PAS LAISSER D'ORPHELIN SUR SA DERNIERE LIGNE.
   L'auto-fit ci-dessus repartit selon la place disponible, ce qui donnait 3 + 1
   sur tous les groupes de quatre : trois elements alignes et le quatrieme seul
   en dessous. Le nombre d'elements est une chose que seule la page connait, on
   le declare donc par une classe plutot que de le laisser deviner.
   Aux deux ruptures, le compte reste divisible : 4 devient 2 + 2 puis 1 par
   ligne, 12 devient 3 x 4 puis 2 x 6 puis 1 x 12. Jamais de reste. */
.grille.quatre { grid-template-columns: repeat(4, 1fr); }
.grille.cartes { grid-template-columns: repeat(2, 1fr); }
.grille.douze  { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 860px) {
  .grille.quatre,
  .grille.douze { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .grille.quatre,
  .grille.cartes,
  .grille.douze { grid-template-columns: 1fr; }
}

.carte {
  background: var(--fond);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--accent);
  padding: 1.5rem;
}
.carte h3 { color: var(--encre); }
.carte p:last-child { margin-bottom: 0; }

.atout { display: flex; gap: .85rem; align-items: flex-start; }
.atout::before {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  margin-top: .55rem;
  background: var(--accent);
  transform: rotate(45deg);
}

/* Listes de prestations : longues, donc en colonnes sur grand ecran. */
.liste-services { columns: 2; column-gap: 2.5rem; padding-left: 1.15rem; }
.liste-services li { margin-bottom: .5rem; break-inside: avoid; }
@media (max-width: 720px) { .liste-services { columns: 1; } }

/* -------------------------------------------------- l'en-tete sur telephone
   Sous 560 px, les quatre rubriques ne tiennent pas sur une ligne. La grille
   par defaut les faisait passer a la ligne comme du texte : trois d'un cote,
   la quatrieme seule en dessous, en drapeau. On force donc un menu en deux
   colonnes, qui se lit comme un bloc voulu et non comme un debordement.

   Le drapeau, lui, remonte a cote du logo. Il est dans la liste du menu dans le
   code, parce que c'est la sa place logique, mais un positionnement absolu le
   sort du flux : les quatre rubriques remplissent alors exactement les quatre
   cases de la grille, sans trou.

   Le padding-right de la marque reserve la place du drapeau. Sans lui, le nom
   du cabinet passerait dessous des que la fenetre se resserre encore. */
@media (max-width: 560px) {
  .entete { position: relative; }

  .marque { padding-right: 3.2rem; }

  nav.principal ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem 1rem;
    align-items: center;
    padding-bottom: .3rem;
  }

  /* EN BLOC, ET C'EST LA CORRECTION DU RESSERREMENT.
     Un lien reste un element EN LIGNE par defaut : son rembourrage vertical est
     dessine, mais il n'entre pas dans la hauteur de sa ligne. Les deux rangees
     du menu se touchaient donc alors que chaque lien croyait avoir de l'air
     autour de lui, et le soulignement de la rubrique active venait mordre la
     rangee du dessous. En bloc, la place est reellement prise. */
  nav.principal a { display: inline-block; }

  .langue {
    position: absolute;
    top: 1rem;
    /* 1.25rem et non 0 : un element positionne se cale sur la boite de
       REMBOURRAGE de son ancetre, donc right:0 le collait au bord de l'ecran en
       ignorant la marge que respecte tout le reste du contenu. */
    right: 1.25rem;
    margin: 0;
    padding: 0;
    border-left: 0;
  }
}

/* ---------------------------------------------------------- references */

.reference {
  border-left: 3px solid var(--trait);
  padding: .1rem 0 .1rem 1.1rem;
  margin-bottom: 1.6rem;
}
.reference h3 { margin-bottom: .15rem; font-size: 1rem; }
.reference p { margin: 0; color: var(--encre-douce); font-size: .93rem; }
.reference .quand { display: block; margin-top: .3rem; font-size: .82rem; color: var(--accent-fonce); font-weight: 600; }

/* ---------------------------------------------------------- formulaire */

.formulaire-contact { max-width: 34rem; }
.formulaire-contact label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.formulaire-contact input[type="text"],
.formulaire-contact input[type="email"],
.formulaire-contact textarea {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  padding: .65rem .8rem;
  border: 1px solid #c8ccd4;
  background: #fff;
  color: var(--encre);
}
.formulaire-contact input:focus,
.formulaire-contact textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.formulaire-contact p { margin: 0 0 1.15rem; }

button, .bouton {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--accent-fonce);
  border: 0;
  padding: .8rem 1.9rem;
  cursor: pointer;
}
button:hover, .bouton:hover { background: var(--accent-sombre); color: #fff; }

/* Le leurre anti-robot. Hors du flux, sans display:none que certains robots
   savent reperer. Voir formulaire.html. */
.champ-leurre {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.alerte {
  border-left: 4px solid var(--accent);
  background: #fdf1ee;
  padding: .9rem 1.1rem;
  margin: 0 0 1.75rem;
}
.alerte p { margin: 0; }

/* ------------------------------------------------------------------- pied */

footer.site {
  background: var(--encre);
  color: #b9bfcb;
  padding: 3rem 0 1.5rem;
  font-size: .92rem;
}
footer.site h2 { color: #fff; font-size: 1.05rem; margin-bottom: .8rem; }
/* Pas de soulignement au repos dans le pied de page, mais il revient au
   survol et au clavier.
   La regle qui interdit de distinguer un lien par la seule couleur (WCAG 1.4.1)
   vise les liens NOYES DANS UN PARAGRAPHE, ou rien d'autre ne les signale. Ici
   ce sont des listes sous un titre, a une place ou l'on attend des liens : le
   contexte fait le travail du soulignement. Le retirer au survol et au clavier,
   en revanche, priverait d'un retour utile. */
footer.site a {
  color: #fff;
  text-decoration: none;
}
footer.site a:hover,
footer.site a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .2em;
}
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: .4rem; }

/* Quatre colonnes explicites, et les reseaux calés a droite.
   La grille generique du site est en auto-fit : elle repartissait les quatre
   blocs du pied selon la place disponible, ce qui donnait deux rangees de deux
   sur beaucoup d'ecrans et noyait les reseaux au milieu. Ici on veut une
   lecture precise : coordonnees, texte, plan du site, puis les reseaux au bout.
   Les largeurs sont en fr et non en pixels, donc la rangee suit la fenetre.
   En dessous de 900 px, quatre colonnes ne tiennent plus : on rend la main a
   l'auto-fit et l'alignement a droite disparait avec elles. */
footer.site .grille {
  grid-template-columns: 1.1fr 1.5fr 1fr auto;
  gap: 2.5rem;
}
footer.site .grille > div:last-child {
  justify-self: end;
  text-align: right;
  min-width: 7rem;
}

@media (max-width: 900px) {
  footer.site .grille {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.75rem;
  }
  footer.site .grille > div:last-child {
    justify-self: start;
    text-align: left;
  }
}

/* Les liens du pied de page etaient des cibles de la hauteur de leur seul
   texte. On les passe en bloc avec du rembourrage vertical. */
footer.site li a { display: inline-block; padding: .35rem 0; }
.pied-bas {
  border-top: 1px solid #2c3547;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  font-size: .82rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
}

/* --------------------------------------------------------------- impression */

@media print {
  .bandeau-haut, nav.principal, footer.site, .formulaire-contact { display: none; }
  body { color: #000; }
  .hero { background: none; color: #000; padding: 1rem 0; }
}