/* ===========================================================================
   photo-aerienne-france.fr — finitions du site public
   ---------------------------------------------------------------------------
   Le thème d'origine habille correctement la structure, mais ne dit rien de
   ce qui se passe **quand on interagit** : les cartes du catalogue ne
   réagissent pas au survol, le clavier n'a nulle part de repère visible, les
   images apparaissent d'un bloc, et les pages vides n'ont rien à montrer.

   Ce fichier ne redéfinit aucune couleur, aucune typographie et aucune
   grille : il ajoute les états manquants — survol, focus, chargement, vide —
   avec les teintes déjà en place. Chargé après `style.css` et `mobile.css`,
   il s'applique partout et pèse 4 Ko.
   ======================================================================== */

:root {
  --f-bleu:   #3B94B6;
  --f-or:     #dac390;
  --f-encre:  #151515;
  --f-doux:   #8a939c;
  --f-rapide: .18s cubic-bezier(.4, 0, .2, 1);
  --f-souple: .32s cubic-bezier(.22, .9, .3, 1);
}

/* ===========================================================================
   1. Le repère du clavier
   --------------------------------------------------------------------------
   Aucun style de focus n'était défini : une personne qui parcourt le site à
   la tabulation ne voyait pas où elle se trouvait. `:focus-visible` ne se
   déclenche pas au clic de souris — le repère n'apparaît que pour qui en a
   besoin.
   ======================================================================== */
/* `!important` à contrecœur, mais il répond à un `!important` : le thème
   porte `a:focus, button:focus { outline: none !important }`, hérité de
   l'époque où l'on trouvait le contour du navigateur inesthétique. Sans
   cette réponse, aucune règle de focus ne peut s'appliquer sur ce site. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--f-bleu) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* Sauter la navigation : trente liens de menu avant le contenu, à chaque
   page, pour qui navigue au clavier ou à la synthèse vocale. */
.saut-contenu {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 4000;
  padding: 10px 16px;
  border-radius: 0 0 6px 6px;
  background: var(--f-bleu);
  color: #fff;
  font: 600 14px/1.2 "Lato", sans-serif;
  text-decoration: none;
  transition: top var(--f-rapide);
}
.saut-contenu:focus { top: 0; color: #fff; text-decoration: none; }

/* ===========================================================================
   2. Les cartes du catalogue
   --------------------------------------------------------------------------
   Une carte du catalogue est un lien vers une fiche photo : toute la carte
   est ce lien, image comprise, et elle le dit.

   La photo tient dans un cadre au ratio fixe et le remplit entièrement. Le
   catalogue mélange du 3:2, du panoramique et quelques portraits : à hauteur
   libre, la grille se disloquait, chaque carte finissant sa légende et son
   bouton à une hauteur différente de sa voisine. Le recadrage perd quelques
   pixels sur les bords ; c'est le prix d'une grille qu'on lit d'un coup
   d'œil, et la fiche montre la photo entière.

   Au survol, la photo dérive lentement vers un coin en s'agrandissant —
   l'effet Ken Burns des diaporamas. Six secondes, quatre trajectoires
   réparties sur la grille pour que les voisines ne glissent pas toutes du
   même côté. Au départ du curseur, elle revient plus vite qu'elle n'est
   partie.
   ======================================================================== */
.bloc-image {
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  height: 100%;
  /* Le thème posait vingt pixels de marge haute : une bande blanche au-dessus
     de chaque photo, à l'intérieur de la carte. La photo commence au bord. */
  padding-top: 0;
  transition: transform var(--f-souple), box-shadow var(--f-souple);
}
/* La carte est une colonne : le lien de la photo prend la place disponible,
   ce qui vient après reste dedans.

   Elle ne l'était pas. `.bloc-image` valait `height: 100%` avec
   `overflow: hidden`, et `.carte-photo__lien` prenait à lui seul ces 100 % :
   tout élément posé *après* le lien tombait sous le bord de la carte et se
   faisait couper net. Or seuls les éditeurs connectés en ont — « Télécharger
   cette image » et « Demander la haute définition » sont ajoutés en dehors du
   lien, pour ne pas imbriquer deux liens l'un dans l'autre. Ils étaient donc
   bien dans la page, avec la bonne adresse, et invisibles à l'écran : une
   bande blanche à leur place. Personne d'autre qu'un éditeur ne pouvait le
   voir, ce qui explique que rien ne l'ait signalé. */
.bloc-image {
  display: flex;
  flex-direction: column;
}
.carte-photo__lien {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  text-decoration: none;
  color: inherit;
}

/* Les deux actions de l'éditeur : des boutons, pas deux liens bleus empilés
   sous une légende grise. */
.carte-photo > .lien {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 12px 10px;
  text-align: center;
}
.carte-photo > .lien:first-of-type { padding-top: 10px; }
.carte-photo > .lien a {
  display: block;
  padding: 7px 10px;
  border: 1px solid #dde7ec;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  line-height: 1.3;
  color: var(--f-bleu);
  text-decoration: none;
  transition: background var(--f-rapide), border-color var(--f-rapide),
              color var(--f-rapide);
}
.carte-photo > .lien:first-of-type a {
  border-color: var(--f-bleu);
  background: var(--f-bleu);
  color: #fff;
}
@media (hover: hover) {
  .carte-photo > .lien a:hover { background: #f4f7f9; border-color: #c9d9e1; }
  .carte-photo > .lien:first-of-type a:hover { background: #33809e; border-color: #33809e; color: #fff; }
}
.carte-photo__lien:hover,
.carte-photo__lien:focus { text-decoration: none; }

/* Le cadre : c'est lui qui impose le ratio et coupe ce qui dépasse. */
.carte-photo__cadre {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: #eef2f4;
}
.carte-photo__cadre picture { display: contents; }
.carte-photo__cadre img,
.bloc-image img.image-liste {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carte-photo__cadre img {
  position: absolute;
  inset: 0;
  /* `style.css` borne toute .image-liste à 80 % de large et 160 px de haut,
     en `object-fit: contain` : c'est ce qui laissait la photo flotter au
     milieu d'une case trop grande. Le cadre commande désormais la taille. */
  max-width: none;
  max-height: none;
  transform-origin: center;
  /* Le retour est plus court que l'aller : une carte qu'on quitte ne doit
     pas continuer à bouger pendant six secondes derrière le curseur. */
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.carte-photo__legende {
  display: block;
  padding: 10px 10px 0;
  font-size: 14px;
  color: var(--f-doux);
  word-break: break-word;
  transition: color var(--f-rapide);
}
/* La légende pousse le bouton en bas : toutes les cartes d'une rangée
   alignent le leur, que la référence tienne sur une ou deux lignes. */
.carte-photo__action {
  display: block;
  margin: auto 10px 12px;
  margin-top: auto;
  padding: 7px 16px;
  border-radius: 999px;
  background: #3b94b6;
  color: #fff;
  font-size: 14px;
  align-self: center;
  transition: background var(--f-rapide), box-shadow var(--f-rapide),
              transform var(--f-rapide);
}

@media (hover: hover) {
  .bloc-image:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(21, 31, 38, .13);
  }
  .bloc-image:hover .legende { color: var(--f-encre); }
  .bloc-image:hover .carte-photo__action {
    background: #2e7c9a;
    box-shadow: 0 4px 12px rgba(59, 148, 182, .32);
  }
}
.bloc-image:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(21, 31, 38, .13);
}

/* --- L'effet Ken Burns --------------------------------------------------
   Le cadrage de départ est déjà légèrement agrandi (1.02) : sans cela, la
   translation découvrirait le fond au bord opposé. */
.carte-photo__cadre img { transform: scale(1.02); }

@media (hover: hover) {
  .carte-photo:hover .carte-photo__cadre img,
  .carte-photo:focus-within .carte-photo__cadre img,
  .carte-rubrique:hover .carte-photo__cadre img,
  .carte-rubrique:focus-within .carte-photo__cadre img {
    transition: transform 6s cubic-bezier(.24, .52, .32, 1);
  }
  .kb1:hover .carte-photo__cadre img,
  .kb1:focus-within .carte-photo__cadre img { transform: scale(1.16) translate(-2.5%, -2%); }
  .kb2:hover .carte-photo__cadre img,
  .kb2:focus-within .carte-photo__cadre img { transform: scale(1.16) translate(2.5%, -2%); }
  .kb3:hover .carte-photo__cadre img,
  .kb3:focus-within .carte-photo__cadre img { transform: scale(1.16) translate(2.5%, 2%); }
  .kb4:hover .carte-photo__cadre img,
  .kb4:focus-within .carte-photo__cadre img { transform: scale(1.16) translate(-2.5%, 2%); }
}

/* Le bouton « Voir cette image » des gabarits restés sur l'ancien balisage. */
.lien.theme a,
p.lien a {
  display: inline-block;
  transition: background var(--f-rapide), color var(--f-rapide),
              box-shadow var(--f-rapide), transform var(--f-rapide);
}
.lien.theme a:hover { box-shadow: 0 4px 12px rgba(59, 148, 182, .32); transform: translateY(-1px); }
.lien.theme a:active { transform: none; }

/* --- La carte d'une rubrique --------------------------------------------
   Thèmes, sous-thèmes, départements, localités. Même cadre, même mouvement
   que les vignettes du catalogue ; ce qui change est dessous : un libellé,
   un compte, et parfois un second lien — « Voir les sous-thèmes », « Voir
   les localités », « Voir les quartiers ».

   Ce second lien est justement ce qui décalait tout : les cartes qui
   l'avaient étaient plus hautes que leurs voisines, et le gabarit des thèmes
   posait un `<br/>` pour rattraper. La carte est une colonne flexible dont
   le compte occupe l'espace libre : le lien secondaire se cale en bas, et
   les cartes d'une rangée se terminent à la même ligne, qu'elles en aient
   un ou pas.
   ======================================================================== */
.carte-rubrique {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 14px;
}
.carte-rubrique__lien {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
}
.carte-rubrique__lien:hover,
.carte-rubrique__lien:focus { text-decoration: none; }

/* Le libellé est le bouton : c'est lui qu'on lit et c'est lui qu'on vise. */
.carte-rubrique__titre {
  display: inline-block;
  align-self: center;
  margin: 14px 12px 0;
  padding: 7px 16px;
  border-radius: 999px;
  background: #3b94b6;
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
  transition: background var(--f-rapide), box-shadow var(--f-rapide);
}
.carte-rubrique__titre b { font-weight: 700; }

.carte-rubrique__compte {
  display: block;
  margin: 8px 12px auto;
  font-size: 13px;
  color: var(--f-doux);
  transition: color var(--f-rapide);
}
.carte-rubrique__action {
  display: inline-block;
  align-self: center;
  margin: 12px 12px 0;
  padding: 6px 15px;
  border-radius: 999px;
  border: 1px solid #3b94b6;
  background: #fff;
  color: #3b94b6;
  font-size: 13px;
  text-decoration: none;
  transition: background var(--f-rapide), color var(--f-rapide),
              box-shadow var(--f-rapide);
}
.carte-rubrique__action:hover,
.carte-rubrique__action:focus {
  background: #3b94b6;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(59, 148, 182, .32);
}

@media (hover: hover) {
  .carte-rubrique:hover .carte-rubrique__titre {
    background: #2e7c9a;
    box-shadow: 0 4px 12px rgba(59, 148, 182, .32);
  }
  .carte-rubrique:hover .carte-rubrique__compte { color: var(--f-encre); }
}
@media (prefers-reduced-motion: reduce) {
  .carte-rubrique__titre, .carte-rubrique__action, .carte-rubrique__compte {
    transition: none !important;
  }
}

/* ===========================================================================
   3. L'arrivée des images
   --------------------------------------------------------------------------
   Soixante vignettes en chargement différé apparaissent au fil de l'eau, par
   à-coups. Un fondu de deux dixièmes de seconde suffit à rendre l'arrivée
   continue. La classe est posée par `paf-front.js` ; sans JavaScript, rien
   n'est masqué — l'image s'affiche simplement sans fondu.
   ======================================================================== */
/* Le fondu d'arrivée ne porte que sur l'opacité.
   Il animait aussi `transform`, avec `animation-fill-mode: both` : une
   animation terminée continue de l'emporter sur les transitions de la même
   propriété, si bien que le zoom au survol ne se déclenchait plus sur les
   vignettes arrivées en chargement différé — c'est-à-dire sur toutes sauf la
   première de la page, la seule chargée en priorité. */
img.image-liste.arrive {
  animation: image-arrive .28s ease-out both;
}
@keyframes image-arrive { from { opacity: 0; } }

/* Pendant le chargement, la case a une couleur plutôt qu'un trou blanc. */
.vignetteLocalite, .bloc-image > div:first-child { background: #eef2f4; }

/* ===========================================================================
   4. Fils d'Ariane, titres, pagination
   ======================================================================== */

.pagination a {
  transition: background var(--f-rapide), color var(--f-rapide), border-color var(--f-rapide);
}
.pagination a:hover { background: var(--f-bleu); color: #fff; border-color: var(--f-bleu); }

/* Le lien du fil d'Ariane se souligne à l'approche plutôt que d'un bloc. */
.breadcrumbs a, .ariane a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  transition: background-size var(--f-souple);
}
.breadcrumbs a:hover, .ariane a:hover { background-size: 100% 1px; text-decoration: none; }

/* ===========================================================================
   5. Le bouton « haut de page »
   --------------------------------------------------------------------------
   Il apparaissait d'un coup, carré, collé au bord. Il arrive en fondu et
   remonte de quelques pixels.
   ======================================================================== */
#ui-to-top {
  border-radius: 8px 0 0 8px;
  box-shadow: 0 6px 18px rgba(21, 31, 38, .18);
  transition: opacity var(--f-souple), transform var(--f-souple), background var(--f-rapide);
}
#ui-to-top:hover { background: #2b7591; transform: translateY(-2px); }

/* ===========================================================================
   6. Les états vides
   --------------------------------------------------------------------------
   Une recherche sans résultat affichait une phrase seule au milieu du blanc.
   ======================================================================== */
.etat-vide {
  max-width: 560px;
  margin: 40px auto;
  padding: 34px 24px;
  border: 1px dashed #d7dee3;
  border-radius: 10px;
  text-align: center;
  background: #fbfcfd;
}
.etat-vide p { margin: 0 0 6px; font: 400 15px/1.6 "Lato", sans-serif; color: var(--f-doux); }
.etat-vide strong { display: block; margin-bottom: 8px; font: 600 17px/1.4 "Poppins", "Lato", sans-serif; color: var(--f-encre); }

/* ===========================================================================
   7. Sélection et divers
   ======================================================================== */
::selection { background: rgba(59, 148, 182, .22); color: var(--f-encre); }

/* Un défilement doux sur les ancres internes, sauf demande contraire. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .bloc-image, .carte-photo__cadre img, .carte-photo__action,
  .lien.theme a, #ui-to-top, .breadcrumbs a, .ariane a {
    transition: none !important;
  }
  .bloc-image:hover { transform: none; }
  /* L'agrandissement de départ reste : c'est un cadrage, pas un mouvement. */
  .carte-photo:hover .carte-photo__cadre img,
  .carte-photo:focus-within .carte-photo__cadre img { transform: scale(1.02); }
  img.image-liste.arrive { animation: none; }
}

/* ===========================================================================
   8. Le lien « Mon compte » du bandeau
   --------------------------------------------------------------------------
   Il prend place à gauche du panier, dans la même teinte et la même famille,
   mais plus discret : c'est un lien de service, pas un appel à l'achat. Quand
   le client est reconnu, il porte son prénom — la reconnaissance vaut mieux
   qu'un libellé générique pour quelqu'un qui revient une fois par an.
   ======================================================================== */
.rd-navbar-top-panel-inner .right-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
}
.compte-bandeau a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--f-doux);
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  transition: color var(--f-rapide);
}
.compte-bandeau a:hover,
.compte-bandeau a:focus { color: var(--f-bleu); text-decoration: none; }
.compte-bandeau svg { flex: none; }

/* Le panier du thème place son icône en `position:absolute; left:-40px` :
   elle débordait sur le lien du compte, qui est désormais son voisin de
   gauche. Remise dans le flux, elle occupe sa place et rien ne se chevauche
   — l'aspect est identique. */
.rd-navbar-top-panel-inner .cart a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 0;
}
.rd-navbar-top-panel-inner .cart img {
  position: static;
  width: 22px;
  height: 22px;
  flex: none;
}

@media (max-width: 991px) {
  html .page .rd-navbar-top-panel-inner .compte-bandeau { margin: 0; }
  .rd-navbar-top-panel-inner .right-side { gap: 14px; }
  .rd-navbar-top-panel-inner .compte-bandeau a {
    font-size: 14px;
    min-height: 34px;          /* cible tactile */
  }
}
/* Sous 420 px, le bandeau ne tient plus à trois libellés : le compte garde
   son icône seule, le panier garde son texte et son compteur. */
@media (max-width: 419px) {
  .compte-bandeau a span.compte-bandeau__nom { display: none; }
}

/* ===========================================================================
   9. Les boutons de commande de la fiche photo
   --------------------------------------------------------------------------
   `.image-command > a` dessinait une pastille bleue, mais « Commander un
   tirage » est un `<button>` — l'ouverture de la grille de tirages se fait
   en JavaScript — et `.lien-achat` le remettait à plat pour qu'il ne ressemble
   pas à un bouton de navigateur. Résultat : à côté d'une pastille pleine, le
   bouton qui mène à la vente s'affichait en texte gris.

   Les deux portent maintenant le même dessin, et répondent au survol : ce
   sont les deux seuls appels à l'action de la page.
   ======================================================================== */
.image-command > a,
.image-command .lien-achat {
  display: inline-block;
  padding: 8px 30px;
  border: 0;
  border-radius: 100px;
  background: var(--f-bleu);
  color: #fff;
  font: 400 15px/1.5 "Lato", sans-serif;
  text-decoration: none;
  cursor: pointer;
  margin: 0 10px 10px 0;
  transition: background var(--f-rapide), box-shadow var(--f-souple),
              transform var(--f-souple);
}

@media (hover: hover) {
  .image-command > a:hover,
  .image-command .lien-achat:hover {
    background: #2b7591;
    box-shadow: 0 6px 18px rgba(59, 148, 182, .34);
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
  }
}
.image-command > a:active,
.image-command .lien-achat:active { transform: translateY(0); box-shadow: none; }

/* Le bouton dit s'il a déjà ouvert la grille : une flèche qui pivote vaut
   mieux qu'un libellé qui ne change pas. */
.image-command .lien-achat::after {
  content: "";
  display: inline-block;
  width: .42em;
  height: .42em;
  margin-left: .6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--f-souple);
}
.image-command .lien-achat[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
  .image-command > a,
  .image-command .lien-achat,
  .image-command .lien-achat::after { transition: none !important; }
  .image-command > a:hover,
  .image-command .lien-achat:hover { transform: none; }
}

/* ===========================================================================
   10. L'en-tête
   --------------------------------------------------------------------------
   Trois bandes empilées — services, menu principal, recherche et catalogue —
   occupaient 277 pixels avant que la première ligne de contenu n'apparaisse,
   soit près du tiers d'un écran d'ordinateur portable et la moitié d'un
   écran de téléphone en paysage. Les marges venaient d'un gabarit de site
   vitrine à une page, où l'en-tête *est* la page.

   Rien n'est retiré : les trois bandes restent, resserrées. Le logo passe de
   150 à 124 pixels — il reste le point le plus haut de la page — et les
   respirations se rapprochent de celles du contenu.
   ======================================================================== */
.rd-navbar-default-with-top-panel.rd-navbar-static .rd-navbar-top-panel,
.rd-navbar-default-with-top-panel.rd-navbar-fullwidth .rd-navbar-top-panel {
  padding-top: 14px;
  padding-bottom: 12px;
}
.rd-navbar-brand.fullwidth-brand img { max-width: 124px; height: auto; }
.page-header { padding-bottom: 12px !important; }

/* La bande de recherche portait la même marge haute et basse que le panneau
   du dessus : deux respirations qui s'additionnent. */
.rd-navbar-search-wrap,
.rd-navbar-subpanel { padding-top: 8px; padding-bottom: 8px; }
.rd-navbar-static .rd-navbar-inner { padding-top: 12px; padding-bottom: 12px; }

/* ===========================================================================
   11. La page d'accueil
   --------------------------------------------------------------------------
   Le bandeau, les coups de cœur, et les blocs texte/image du bas de page.
   ======================================================================== */

/* --- Le bandeau à trois vues -------------------------------------------
   Trois fonds se succèdent en s'agrandissant lentement — le même mouvement
   que sur les vignettes, à une autre échelle. Vingt et une secondes de cycle,
   sept par vue : assez long pour qu'on ne s'en aperçoive qu'au bout d'un
   moment, ce qui est le but. Tout est en CSS : ni script, ni image chargée
   d'avance qu'on ne verrait jamais.

   Les vues sont posées derrière le contenu, en `position: absolute` dans un
   conteneur qui, lui, garde le flux — sans quoi le bandeau n'aurait plus de
   hauteur. */
.bandeau-diapo { position: relative; }
.bandeau-diapo > *:not(.bandeau-diapo__vues) { position: relative; z-index: 1; }
.bandeau-diapo__vues {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.bandeau-diapo__vue {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* Le mouvement grossit l'image : sans cette marge, le bord de la photo
     entrerait dans le cadre au maximum du zoom. */
  will-change: transform, opacity;
  transform-origin: 50% 45%;
}
/* Les `@keyframes` et la durée du cycle sont écrits par le gabarit, parce
   qu'ils dépendent du nombre de vues : voir `Vitrine::animationBandeau()`.
   Une vue seule va et revient avec une pause ; plusieurs se succèdent en
   fondu. Ce fichier ne garde que ce qui ne change pas. */
@media (prefers-reduced-motion: reduce) {
  /* Sans mouvement, la première vue tient lieu d'image de fond. */
  .bandeau-diapo__vue { animation: none !important; opacity: 0; transform: none !important; }
  .bandeau-diapo__vue:first-child { opacity: 1; }
}

/* --- Les coups de cœur --------------------------------------------------
   Les cartes portaient `height: 30vh` en attribut de style, sur la colonne
   *et* sur le lien : la grille changeait de proportion avec la hauteur de la
   fenêtre, et l'image, laissée à sa taille naturelle, flottait dans le cadre.
   Même traitement que les vignettes du catalogue : un ratio fixe, l'image qui
   remplit, et le titre qui n'apparaît qu'au survol. */
.coup-coeur {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: #eef2f4;
  aspect-ratio: 3 / 2;
}
.coup-coeur figure { margin: 0; height: 100%; }
.coup-coeur picture { display: contents; }
.coup-coeur img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.coup-coeur__titre {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(12, 22, 28, .78), rgba(12, 22, 28, 0));
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--f-souple), transform var(--f-souple);
}
@media (hover: hover) {
  .coup-coeur:hover img,
  .coup-coeur:focus-visible img {
    transition: transform 6s cubic-bezier(.24, .52, .32, 1);
    transform: scale(1.16) translate(-2%, -1.5%);
  }
  .coup-coeur:hover .coup-coeur__titre,
  .coup-coeur:focus-visible .coup-coeur__titre { opacity: 1; transform: none; }
}
/* Sans survol — un téléphone — le titre est simplement là. */
@media (hover: none) {
  .coup-coeur__titre { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .coup-coeur img { transition: none; }
  .coup-coeur:hover img, .coup-coeur:focus-visible img { transform: scale(1.02); }
}
.isotope-item { margin-bottom: 24px; }

/* --- Les blocs texte / image du bas -------------------------------------
   `.bloc-images img` portait `height: 100%` sans largeur : la hauteur ne
   valait rien — le conteneur n'en a pas de définie — et l'image restait à ses
   640 pixels naturels dans une colonne qui en fait 800. D'où la bande blanche
   à droite de chaque illustration, et des colonnes de hauteurs différentes.
   L'image remplit sa colonne et s'aligne sur la hauteur du texte d'en face. */
.bloc-images { display: flex; }
.bloc-images img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: 6px;
}
/* Même défaut sur l'illustration de la panoramique, en haut de page. */
.section-wrap-content-var-1 { height: 100%; }

/* ===========================================================================
   12. Les pages éditoriales
   --------------------------------------------------------------------------
   Les dix-huit pages du site et les six fiches de photographe partagent la
   même page : un fil d'Ariane, un titre, du texte rédigé, des photos.

   Elles s'affichaient sur toute la largeur de la fenêtre. Sur un écran de
   1 600 pixels, cela fait cent-quatre-vingts signes par ligne ; l'œil en
   suit confortablement soixante-quinze, au-delà il perd le début de la ligne
   suivante. Le titre montait à quatre-vingt-dix pixels, seul et centré
   au-dessus d'un texte aligné à gauche, et les illustrations restaient à
   leur taille naturelle contre la marge de gauche.

   Le texte tient désormais dans une colonne de lecture ; les images et les
   tableaux en débordent volontairement — ils gagnent à être vus plus larges.
   Rien n'est retiré au contenu : les gabarits ne font que l'envelopper, ce
   qui est écrit dans l'éditeur reste tel quel.
   ======================================================================== */
.page-edito {
  --edito-mesure: 68ch;
  --edito-large: 860px;
  display: block;
  padding-bottom: 48px;
}
.page-edito .container-wide { max-width: 1200px; }
/* Le thème centre le texte par défaut sur ces pages ; ici tout est aligné à
   gauche, sur la même verticale que la colonne de lecture. */
.page-edito .container-wide,
.page-edito #ariane { text-align: left; }
.page-edito #ariane { max-width: var(--edito-large); margin-inline: auto; }

/* --- L'en-tête ----------------------------------------------------------- */
.edito-entete {
  max-width: var(--edito-large);
  margin: 6px auto 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e6ecef;
}
.edito-surtitre {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--f-doux);
}
.page-edito h1 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.12;
  text-align: left;
  color: var(--f-bleu);
}

/* L'en-tête d'un photographe : le portrait à gauche, l'identité à droite. */
.edito-entete--portrait {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
}
.edito-portrait {
  flex: 0 0 300px;
  margin: 0;
  max-width: 100%;
}
.edito-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: #eef2f4;
  box-shadow: 0 8px 24px rgba(21, 31, 38, .12);
}
.edito-identite { flex: 1 1 320px; min-width: 260px; }
.edito-chiffre {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--f-doux);
}
.edito-chiffre strong { color: var(--f-encre); font-size: 18px; }
.edito-action {
  display: inline-block;
  margin-top: 16px;
  padding: 9px 20px;
  border-radius: 999px;
  background: #3b94b6;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  transition: background var(--f-rapide), box-shadow var(--f-rapide),
              transform var(--f-rapide);
}
.edito-action:hover, .edito-action:focus {
  background: #2e7c9a;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(59, 148, 182, .32);
  transform: translateY(-1px);
}

/* --- Le corps rédigé -----------------------------------------------------
   Tout ce que l'éditeur produit passe ici. La colonne de lecture est posée
   sur les enfants directs, et non sur le conteneur : les images et les
   tableaux peuvent ainsi s'élargir sans sortir de la page. */
.edito-corps {
  max-width: var(--edito-large);
  margin: 0 auto;
  text-align: left;
  font-size: 16px;
  line-height: 1.7;
  color: var(--f-encre);
}
.edito-corps > p,
.edito-corps > ul,
.edito-corps > ol,
.edito-corps > blockquote,
.edito-corps > h2,
.edito-corps > h3,
.edito-corps > h4 {
  max-width: var(--edito-mesure);
}
.edito-corps > p { margin: 0 0 1.15em; }
.edito-corps h2 {
  margin: 2em 0 .6em;
  font-size: 26px;
  line-height: 1.2;
  color: var(--f-bleu);
}
.edito-corps h3 {
  margin: 1.8em 0 .5em;
  font-size: 20px;
  line-height: 1.25;
  color: var(--f-encre);
}
.edito-corps ul, .edito-corps ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.edito-corps li { margin-bottom: .4em; }
.edito-corps a { color: var(--f-bleu); text-decoration: underline; text-underline-offset: 2px; }
.edito-corps a:hover { color: #2e7c9a; }
.edito-corps strong { color: var(--f-encre); }

/* Une image de contenu : pleine largeur de la colonne large, jamais
   au-delà de sa taille naturelle. */
.edito-corps img,
.edito-corps .image-cms {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 26px auto;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(21, 31, 38, .10);
}
/* Une image seule dans son paragraphe est une illustration : elle se centre
   et respire. Une image au fil du texte garde sa place. */
.edito-corps p > img:only-child { margin: 26px auto; }
.edito-corps figure { margin: 26px 0; }

/* ---------------------------------------------------------------------------
 * Les blocs de quartiers des pages de ville
 *
 * Vignette a gauche, titre et texte a droite. La structure vient de
 * `administration/cms_quartiers_ranger.php` ; ici, la mise en page seulement.
 * ------------------------------------------------------------------------ */
.edito-corps .cms-quartier {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 0 26px;
  align-items: start;
  margin: 0 0 18px;
  padding: 20px 22px;
  max-width: none;
  background: var(--f-brume, #f4f6f7);
  border-radius: 10px;
}
.edito-corps .cms-quartier__vue {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 6px 20px rgba(21, 31, 38, .12);
}
.edito-corps .cms-quartier__vue img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  transition: transform .35s ease;
}
.edito-corps .cms-quartier__vue:hover img { transform: scale(1.04); }
.edito-corps .cms-quartier__mots > :first-child { margin-top: 0; }
.edito-corps .cms-quartier__mots > :last-child  { margin-bottom: 0; }
.edito-corps .cms-quartier h3 {
  margin: 0 0 .5em;
  font-size: 19px;
  text-transform: none;
}
.edito-corps .cms-quartier h3 a { text-decoration: none; color: var(--f-bleu); }
.edito-corps .cms-quartier h3 a:hover { text-decoration: underline; }
.edito-corps .cms-quartier p { max-width: none; margin: 0 0 .8em; }

/* Filet pour les blocs que l'editeur visuel produira demain : un conteneur
   qui contient ses flottants ne peut plus laisser une image deborder sur le
   bloc suivant. */
.edito-corps div { display: flow-root; }

@media (max-width: 720px) {
  .edito-corps .cms-quartier {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }
  /* Une vignette de 250 px etiree sur toute la largeur d'un telephone est
     floue : on la borne a sa taille naturelle et on la centre. */
  .edito-corps .cms-quartier__vue { max-width: 320px; margin: 0 auto; width: 100%; }
}
.edito-corps figcaption {
  max-width: var(--edito-mesure);
  margin: 8px auto 0;
  font-size: 13px;
  color: var(--f-doux);
  text-align: center;
}

/* Les tableaux du contenu débordaient de la page sur un téléphone. */
.edito-corps table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  font-size: 15px;
}
.edito-corps th, .edito-corps td {
  padding: 9px 12px;
  border-bottom: 1px solid #e6ecef;
  text-align: left;
}
.edito-corps th { background: #f4f7f9; font-weight: 600; }

/* --- Le pied de page éditorial ------------------------------------------ */
.edito-suite {
  max-width: var(--edito-large);
  margin: 44px auto 0;
  padding-top: 24px;
  border-top: 1px solid #e6ecef;
}
.edito-suite h2 { margin: 0 0 14px; font-size: 19px; color: var(--f-encre); }
.edito-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.edito-liens a {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid #d5e0e6;
  color: var(--f-bleu);
  font-size: 14px;
  text-decoration: none;
  transition: border-color var(--f-rapide), background var(--f-rapide);
}
.edito-liens a:hover, .edito-liens a:focus {
  background: #f4f7f9;
  border-color: #3b94b6;
  text-decoration: none;
}

@media (max-width: 575.98px) {
  .page-edito { --edito-mesure: 100%; }
  .edito-entete--portrait { gap: 18px; }
  .edito-portrait { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .edito-action, .edito-liens a { transition: none !important; }
  .edito-action:hover { transform: none; }
}

/* ===========================================================================
   13. Le bandeau de prise de contrôle
   --------------------------------------------------------------------------
   Un administrateur navigue sous l'identité d'un client ou d'un éditeur. Le
   bandeau doit être impossible à manquer et impossible à confondre avec le
   site : couleur d'alerte, pleine largeur, collé en haut, et le bouton qui
   rend la main à portée immédiate.
   ======================================================================== */
.bandeau-prise {
  position: sticky;
  top: 0;
  z-index: 1200;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  background: #8a4b00;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}
.bandeau-prise__texte strong { color: #ffd9a8; }
.bandeau-prise form { margin: 0; }
.bandeau-prise__sortie {
  padding: 6px 15px;
  border: 1px solid #ffd9a8;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--f-rapide), color var(--f-rapide);
}
.bandeau-prise__sortie:hover, .bandeau-prise__sortie:focus {
  background: #ffd9a8;
  color: #5a3100;
}
@media (prefers-reduced-motion: reduce) {
  .bandeau-prise__sortie { transition: none !important; }
}

/* ===========================================================================
   14. Toute la largeur
   --------------------------------------------------------------------------
   `.container-wide` plafonnait à 1 800 pixels, et le bandeau d'accueil à
   1 770. Sur un écran de 2 560, cela laissait 380 pixels de blanc de chaque
   côté — un site de photographie qui n'occupe pas l'écran se prive de son
   seul argument.

   Le contenu prend donc toute la largeur, avec une gouttière qui l'empêche
   de toucher le bord. Deux conséquences traitées ici :

   - une grille à quatre colonnes sur 2 500 pixels donne des vignettes de
     600 px de large, plus grandes que la photo qu'elles servent. Au-delà de
     1 600 px on passe à cinq colonnes, au-delà de 1 900 à six ;
   - une ligne de texte de 2 400 pixels ne se lit pas. Les pages éditoriales
     gardent leur colonne de lecture, simplement plus large.
   ======================================================================== */
@media (min-width: 1200px) {
  .container-wide,
  .container-wide.bg-image-full {
    max-width: none;
    padding-left: 40px;
    padding-right: 40px;
  }
  /* Le bandeau d'accueil est une image : sa gouttière est du vide, pas de la
     marge. Il va d'un bord à l'autre. */
  .section-layout .container-wide.bg-image-full {
    padding-left: 0;
    padding-right: 0;
  }
}

/* --- Le bandeau d'accueil, plus haut sur grand écran -------------------- */
@media (min-width: 1200px) {
  .section-layout .container-wide { min-height: min(76vh, 780px); }
  .section-layout-main,
  .section-layout-aside { min-height: min(76vh, 780px); }
}

/* --- La grille du catalogue suit la largeur ------------------------------ */
@media (min-width: 1600px) {
  .themes > .col-md-3,
  .themes > .col-12.col-sm-6.col-md-3 { flex: 0 0 20%; max-width: 20%; }
}
@media (min-width: 1900px) {
  .themes > .col-md-3,
  .themes > .col-12.col-sm-6.col-md-3 { flex: 0 0 16.6667%; max-width: 16.6667%; }
}

/* --- Les pages éditoriales gardent une largeur de lecture ---------------- */
@media (min-width: 1200px) {
  .page-edito { --edito-large: 1040px; --edito-mesure: 78ch; }
  .page-edito .container-wide { max-width: none; }
}

/* ===========================================================================
   15. Les formulaires publics
   --------------------------------------------------------------------------
   Contact, devis, demande de haute définition : trois formulaires qui
   n'avaient ni le même dessin, ni la même largeur, ni les mêmes libellés —
   l'un demandait « Nom » pour l'entreprise et « Nom » pour le nom, avec le
   même `id` sur les deux, si bien qu'un clic sur le second libellé
   sélectionnait le premier champ.

   Un seul dessin, deux colonnes sur grand écran : le formulaire à gauche,
   les autres façons de joindre à droite.
   ======================================================================== */
.formulaire-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
  max-width: var(--edito-large);
  margin: 0 auto;
}
.formulaire-corps { min-width: 0; }

.formulaire-aside {
  order: 2;
  padding: 22px 24px;
  border-radius: 10px;
  background: #f4f7f9;
  font-size: 15px;
  line-height: 1.6;
}
.formulaire-aside h2 {
  margin: 0 0 4px;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--f-doux);
}
.formulaire-aside h2 + p { margin: 0 0 20px; }
.formulaire-aside > :last-child { margin-bottom: 0; }
.formulaire-aside a { color: var(--f-bleu); }

/* --- Les champs ---------------------------------------------------------- */
.formulaire .champ { margin: 0 0 16px; }
.formulaire label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--f-encre);
}
.formulaire label span { color: #b4462c; }
.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="tel"],
.formulaire input[type="date"],
.formulaire input[type="number"],
.formulaire select,
.formulaire textarea {
  display: block;
  width: 100%;
  padding: 10px 13px;
  border: 1px solid #d5e0e6;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--f-encre);
  transition: border-color var(--f-rapide), box-shadow var(--f-rapide);
}
.formulaire textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
  outline: none;
  border-color: #3b94b6;
  box-shadow: 0 0 0 3px rgba(59, 148, 182, .18);
}
/* `:invalid` marquerait en rouge les champs obligatoires encore vides au
   premier affichage — on signale ce que la personne a saisi, pas ce qu'elle
   n'a pas encore rempli. `:user-invalid` n'entre en jeu qu'après une
   interaction ou une tentative d'envoi. */
.formulaire input:user-invalid,
.formulaire textarea:user-invalid { border-color: #c96a4d; }

.formulaire-duo,
.formulaire-trio { display: grid; gap: 0 16px; }
.formulaire-duo  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formulaire-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.formulaire-note {
  margin: 4px 0 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--f-doux);
}
.formulaire-envoi { margin: 8px 0 0; }
.formulaire-envoi .edito-action { border: 0; cursor: pointer; font: inherit; font-size: 15px;
  padding: 11px 26px; }

/* --- Les messages -------------------------------------------------------- */
.formulaire-message {
  margin: 0 0 22px;
  padding: 14px 18px;
  border-radius: 8px;
  border-left: 4px solid;
  font-size: 15px;
  line-height: 1.55;
}
.formulaire-message--succes { background: #eaf6ef; border-color: #2f7d4f; color: #1d5233; }
.formulaire-message--erreur { background: #fdeeea; border-color: #b4462c; color: #7d2d1a; }

/* --- Le récapitulatif d'une photo, sur les formulaires de devis et HD ---- */
.formulaire-photo {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 0 0 24px;
  padding: 14px;
  border-radius: 10px;
  background: #f4f7f9;
}
.formulaire-photo img {
  width: 150px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
  max-width: none;
  max-height: none;
}
.formulaire-photo__texte { font-size: 14px; line-height: 1.5; }
.formulaire-photo__texte strong { display: block; color: var(--f-encre); }

@media (max-width: 991.98px) {
  .formulaire-page { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .formulaire-aside { order: 3; }
}
@media (max-width: 575.98px) {
  .formulaire-duo, .formulaire-trio { grid-template-columns: minmax(0, 1fr); }
  .formulaire-photo { flex-direction: column; align-items: flex-start; }
  .formulaire-photo img { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .formulaire input, .formulaire select, .formulaire textarea { transition: none !important; }
}

/* ===========================================================================
   16. L'en-tête, suite : pleine largeur et mise au net
   --------------------------------------------------------------------------
   Le contenu du site va d'un bord à l'autre depuis la section 14, mais les
   trois bandes de l'en-tête restaient plafonnées à 1 770 pixels : le menu
   flottait au milieu d'une page large, et les filets de séparation
   s'arrêtaient à 150 pixels des bords. C'est ce décalage qu'on voit d'abord.

   La mise au net qui suit ne déplace rien : un seul filet par bande au lieu
   de deux, un repère sous le lien de la page courante, un soulignement qui
   pousse au survol, et les trois entrées du catalogue en pastilles — elles ne
   mènent pas au même genre de page que le menu au-dessus, autant que cela se
   voie.
   ======================================================================== */
@media (min-width: 1200px) {
  .rd-navbar-top-panel-inner,
  .rd-navbar-inner,
  .rd-navbar-default-with-top-panel.rd-navbar-static .rd-navbar-top-panel-inner,
  .rd-navbar-default-with-top-panel.rd-navbar-fullwidth .rd-navbar-top-panel-inner {
    max-width: none;
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* --- Les bandes ---------------------------------------------------------- */
/* Quatre filets gris, tous arrêtés à 75 pixels des bords, dont deux collés
   l'un sous l'autre : c'est ce qu'on voyait. Ils venaient de deux endroits —
   la bordure que je posais sous chaque rangée, et les deux bordures #ebebeb
   que le thème pose sur `.rd-navbar-inner`, resté plafonné à 1 770 px malgré
   la règle ci-dessus (elle visait `.rd-navbar-inner` seul, le thème le vise
   précédé de deux classes : plus spécifique, il gagnait).

   Un filet qui s'arrête avant le bord attire l'œil sur le décalage,
   c'est-à-dire exactement sur ce qu'on cherchait à corriger. Alors plus
   aucun filet à l'intérieur de l'en-tête : les trois rangées se distinguent
   par ce qu'elles font. Le logo et le menu du site sur fond blanc, ils vont
   ensemble ; la rangée du catalogue sur une bande teintée d'un bord à
   l'autre — elle ne mène pas au même genre de page, et le champ de recherche
   a enfin un fond contre lequel se détacher. Un seul filet, sous cette
   bande, sépare l'en-tête de la page. */
.rd-navbar-static .rd-navbar-top-panel,
.rd-navbar-fullwidth .rd-navbar-top-panel,
#second_menu .rd-navbar-top-panel { border-bottom: 0; }

.rd-navbar-default-with-top-panel.rd-navbar-static .rd-navbar-inner,
.rd-navbar-default-with-top-panel.rd-navbar-fullwidth .rd-navbar-inner {
  border-top: 0;
  border-bottom: 0;
}

/* La bande du catalogue va d'un bord à l'autre : c'est `#second_menu` qui
   occupe toute la largeur, ses enfants sont en retrait de 15 px. */
#second_menu {
  background: var(--f-bande, #f5f8fa);
  border-bottom: 1px solid #e3eaef;
}

/* Le menu du site déplafonné pour de bon : même spécificité que le thème. */
@media (min-width: 1200px) {
  .rd-navbar-default-with-top-panel.rd-navbar-static .rd-navbar-inner,
  .rd-navbar-default-with-top-panel.rd-navbar-fullwidth .rd-navbar-inner {
    max-width: none;
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Épinglée, la barre se détache du contenu par une ombre plutôt que par un
   trait : c'est ce qui dit qu'elle flotte au-dessus. */
.rd-navbar--is-stuck {
  box-shadow: 0 2px 14px rgba(21, 31, 38, .10);
  border-bottom: 0;
}

/* --- Le menu principal --------------------------------------------------- */
.rd-navbar-static .rd-nav-link {
  position: relative;
  padding-bottom: 3px;
  font-size: 13.5px;
  letter-spacing: .05em;
  transition: color var(--f-rapide);
}
.rd-navbar-static .rd-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--f-bleu);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--f-souple);
}
@media (hover: hover) {
  .rd-navbar-static .rd-nav-item:hover > .rd-nav-link::after { transform: scaleX(1); }
}
.rd-navbar-static .rd-nav-item.active > .rd-nav-link::after,
.rd-navbar-static .rd-nav-link:focus-visible::after { transform: scaleX(1); }

/* Les sous-menus : le thème les posait sans relief. */
.rd-navbar-static .rd-navbar-dropdown {
  border: 1px solid #eef2f4;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(21, 31, 38, .12);
  overflow: hidden;
}

/* --- La bande du catalogue ----------------------------------------------- */
#second_menu .rd-navbar-nav-flex > li > a {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13px;
  letter-spacing: .05em;
  transition: background var(--f-rapide), border-color var(--f-rapide),
              color var(--f-rapide);
}
@media (hover: hover) {
  #second_menu .rd-navbar-nav-flex > li > a:hover {
    background: #f4f7f9;
    border-color: #dde7ec;
    color: var(--f-bleu);
  }
}

/* --- Le compte et le panier ---------------------------------------------- */
.cart-compteur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: #b4462c;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .rd-navbar-static .rd-nav-link::after,
  #second_menu .rd-navbar-nav-flex > li > a { transition: none !important; }
}

/* ===========================================================================
   17. Le bandeau d'accueil : la diagonale et la barre
   --------------------------------------------------------------------------
   Les deux traits blancs du bandeau sont les bordures des deux vignettes
   « Thèmes » et « Localités », dans un bloc incliné de 25 degrés : la bordure
   gauche dessine la diagonale, la bordure haute de la seconde vignette
   dessine la barre horizontale.

   Comme les vignettes se dimensionnaient sur leur contenu, elles ne
   remplissaient pas la hauteur du bandeau (313 + 343 pour 684 pixels) : la
   diagonale s'arrêtait avant le bas de la photo, et la barre tombait au tiers
   plutôt qu'au milieu. Deux vignettes à parts égales règlent les deux.
   ======================================================================== */
@media (min-width: 1200px) {
  /* `row-30` donne trente pixels de marge basse à ses enfants : dans le
     bandeau, cela rendait le bloc incliné trente pixels plus haut que la
     photo, et la moitié se calculait sur cette hauteur-là. */
  .section-layout .row-30 > * { margin-bottom: 0; }
  .section-layout .row-30 { margin-bottom: 0; }

  .section-layout-aside { height: 100%; max-height: 100%; }
  .section-layout-aside > .section-layout-aside__item {
    /* Une moitié chacune, bordure comprise. Avec `flex: 1 1 0`, la bordure
       haute de la seconde vignette — la barre blanche — s'ajoutait à sa part :
       372 contre 342, le bloc dépassait la photo de trente pixels et la barre
       tombait sous le milieu. */
    flex: 0 0 50%;
    height: 50%;
    min-height: 0;
    display: flex;
    box-sizing: border-box;
  }
  /* On centre les libellés verticalement dans leur moitié ; l'alignement
     horizontal reste celui du thème — le recentrer poussait « Thèmes » à
     treize pixels du bord droit sur un écran large. */
  .section-layout-aside__item > .thumb-modern {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-right: 170px;
  }
}

/* ===========================================================================
   18. L'accueil : moitiés égales et blocs alignés
   --------------------------------------------------------------------------
   Le bloc « Photos Panoramiques » était en 7/5 — 58 % pour la photo, 42 %
   pour le texte — et la photo restait à ses 900 pixels naturels dans une
   colonne qui en faisait 1 091 : ni moitié, ni remplissage.

   Le bloc de texte du milieu, lui, portait 15 pixels de marge horizontale de
   plus que les grilles au-dessus et au-dessous : sa boîte grise commençait
   quinze pixels plus à droite que les cartes, ce qui se voit d'autant plus
   que les blocs sont larges.
   ======================================================================== */
@media (min-width: 1200px) {
  .section-md .row-50 > .col-xl-7,
  .section-md .row-50 > .col-xl-5 { flex: 0 0 50%; max-width: 50%; }
}
.section-md .row-50 > .col-xl-7 { display: flex; }
.section-md .row-50 > .col-xl-7 > img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 6px;
}

/* Le bloc pleine largeur s'aligne sur les grilles, pas sur les colonnes. */
.container-wide > .col-12.bloc-infos { padding-left: 0; padding-right: 0; }

/* ===========================================================================
   19. Le pied de page
   --------------------------------------------------------------------------
   Il portait un `.container` Bootstrap — 1 140 pixels au maximum — quand tout
   le reste de la page va d'un bord à l'autre. Sur un grand écran, le pied
   était une bande étroite au milieu d'un fond sombre pleine largeur.
   ======================================================================== */
@media (min-width: 1200px) {
  .page-footer .container,
  footer .container {
    max-width: none;
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Sur les très grands écrans, le menu respire davantage — sans aller jusqu'aux
   bords : le logo est centré, un menu étalé d'un bout à l'autre se battrait
   avec lui. */
@media (min-width: 1600px) {
  .rd-navbar-static .rd-navbar-nav > li + li,
  .rd-navbar-static .rd-navbar-nav-flex > li + li { margin-left: 84px; }
}
@media (min-width: 1900px) {
  .rd-navbar-static .rd-navbar-nav > li + li,
  .rd-navbar-static .rd-navbar-nav-flex > li + li { margin-left: 104px; }
}

/* ===========================================================================
   20. La carte de situation
   --------------------------------------------------------------------------
   `width: 50vw; height: 30vh` en style en ligne : une vignette de 1 010 px
   posée au milieu d'une page de 1 920, et 270 px de haut — de quoi voir la
   commune, pas de quoi la situer. Elle sort maintenant sur toute la largeur,
   quel que soit le conteneur qui la porte, et gagne en hauteur avec l'écran.
   ======================================================================== */
.carte-geo-bloc {
  width: 100vw;
  max-width: 100vw;
  margin: 30px 0 0 calc(50% - 50vw);   /* pleine largeur quel que soit le parent */
}
.carte-geo {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
  overflow: hidden;
}
@media (min-width: 992px)  { .carte-geo { height: 460px; } }
@media (min-width: 1600px) { .carte-geo { height: 560px; } }

/* La légende dit sur quoi la carte est centrée : la prise de vue, la commune,
   le département. Sans elle, un cadrage sur la mairie passerait pour le lieu
   de la photo — et à sept fiches sur dix, ce serait faux. */
.carte-geo__legende {
  margin: 0;
  padding: 10px 40px;
  background: #f5f8fa;
  border-top: 1px solid #e3eaef;
  font: 400 13.5px/1.6 "Lato", sans-serif;
  color: var(--f-doux);
  text-align: center;
}
/* Sur la position réelle, la légende est une confirmation, pas une réserve. */
.carte-geo--photo + .carte-geo__legende { color: #6f7b85; }

@media (max-width: 767px) {
  .carte-geo__legende { padding: 9px 16px; font-size: 12.5px; }
}

/* ===========================================================================
   21. Les espaces éditeur et client
   --------------------------------------------------------------------------
   Deux gabarits hérités : une page de connexion où quinze champs s'empilaient
   dans trois colonnes Bootstrap imbriquées, et un tableau de bord dont
   l'historique était un `<table width="980" bgcolor="#f2f2f2">` — une largeur
   fixe sur une page qui va désormais d'un bord à l'autre, et une image
   redimensionnée par attribut HTML à chaque ligne.

   Le dessin reprend celui des pages éditoriales : mêmes blocs, mêmes champs,
   mêmes boutons. L'éditeur arrive avec trois questions — où en suis-je, quoi
   de neuf, qu'ai-je déjà pris — et la page y répond dans cet ordre.
   ======================================================================== */
.espace-editeur .container-wide,
.espace-client .container-wide { max-width: 1280px; }

/* --- L'en-tête ----------------------------------------------------------- */
.espace-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0 0 22px;
}
.espace-entete h1 { margin: 0; }
.espace-entete__societe {
  margin: 6px 0 0;
  font-size: 16px;
  color: var(--f-doux);
}
.espace-deconnexion {
  flex: 0 0 auto;
  padding: 9px 18px;
  border: 1px solid #dde7ec;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  color: var(--f-doux);
  text-decoration: none;
  transition: border-color var(--f-rapide), color var(--f-rapide), background var(--f-rapide);
}
.espace-deconnexion:hover {
  border-color: #c9d9e1;
  background: #f5f8fa;
  color: var(--f-bleu);
}

.espace-rappel {
  margin: 0 0 26px;
  padding: 16px 20px;
  border-left: 3px solid var(--f-bleu);
  border-radius: 0 8px 8px 0;
  background: #f4f7f9;
  font-size: 15px;
  line-height: 1.65;
}

/* --- Les trois chiffres -------------------------------------------------- */
.espace-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 0 0 34px;
}
.espace-chiffre {
  padding: 18px 20px;
  border: 1px solid #eef2f4;
  border-radius: 10px;
  background: #fff;
}
.espace-chiffre strong {
  display: block;
  font: 700 27px/1.1 "Poppins", "Lato", sans-serif;
  color: var(--f-encre);
}
.espace-chiffre span {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--f-doux);
}

/* --- Les blocs ----------------------------------------------------------- */
.espace-bloc {
  margin: 0 0 34px;
  padding: 26px 28px;
  border: 1px solid #eef2f4;
  border-radius: 12px;
  background: #fff;
}
.espace-bloc__titre {
  margin: 0 0 6px;
  font: 700 19px/1.3 "Poppins", "Lato", sans-serif;
}
.espace-bloc__chapo {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--f-doux);
}
.espace-bloc__titre + .formulaire,
.espace-bloc__titre + .espace-grille,
.espace-bloc__titre + .formulaire-message,
.espace-bloc__titre + .espace-nouveaute__corps { margin-top: 20px; }

/* Les sous-titres à l'intérieur d'un formulaire : « L'entreprise », « Le
   contact », « L'accès ». L'ancien gabarit utilisait `<legend>` hors de tout
   `<fieldset>`, ce qui ne veut rien dire. */
.espace-legende {
  margin: 24px 0 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid #eef2f4;
  font: 600 13px/1.4 "Poppins", "Lato", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--f-doux);
}
.espace-bloc .formulaire > .espace-legende:first-child { margin-top: 0; }

/* --- La dernière photo --------------------------------------------------- */
.espace-nouveaute__corps {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}
.espace-nouveaute__image {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 3 / 2;
}
.espace-nouveaute__image img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .7s cubic-bezier(.22, .9, .3, 1);
}
@media (hover: hover) {
  .espace-nouveaute__image:hover img { transform: scale(1.09); }
}
.espace-meta {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--f-doux);
}
.espace-meta strong { color: var(--f-encre); }

.espace-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0;
}
.espace-actions--discret { margin-top: 20px; }

/* Un bouton qui se lit comme un lien : « mot de passe oublié » et « effacer
   mon historique » ne sont pas des actions principales, mais ce sont des
   POST — donc des boutons, pas des liens. */
.espace-lien {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--f-doux);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--f-rapide);
}
.espace-lien:hover { color: var(--f-bleu); }

/* --- La grille des téléchargements --------------------------------------- */
.espace-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
}
.espace-vignette a { display: block; text-decoration: none; color: inherit; }
.espace-vignette__cadre {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 9px;
  aspect-ratio: 3 / 2;
  background: #eef2f4;
}
.espace-vignette__cadre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .7s cubic-bezier(.22, .9, .3, 1);
}
@media (hover: hover) {
  .espace-vignette:hover .espace-vignette__cadre img { transform: scale(1.1); }
}
.espace-vignette__legende {
  display: block;
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.5;
}
.espace-vignette__legende strong { display: block; color: var(--f-encre); }
.espace-vignette__legende span   { color: var(--f-doux); font-size: 12.5px; }

.espace-vide {
  margin: 0;
  padding: 26px 0 8px;
  font-size: 15px;
  color: var(--f-doux);
}
.espace-vide a { color: var(--f-bleu); }

@media (max-width: 860px) {
  .espace-nouveaute__corps { grid-template-columns: minmax(0, 1fr); }
  .espace-bloc { padding: 20px 18px; }
  .espace-editeur .formulaire-duo,
  .espace-editeur .formulaire-trio { grid-template-columns: minmax(0, 1fr); }
}

/* --- Les détails repliables des deux espaces ----------------------------- */
.compte-details {
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid #eef2f4;
}
.compte-details > summary {
  padding: 16px 0 0;
  font-size: 15px;
  color: var(--f-bleu);
  cursor: pointer;
  list-style: none;
}
.compte-details > summary::-webkit-details-marker { display: none; }
.compte-details > summary::before {
  content: "+";
  display: inline-block;
  width: 18px;
  font-weight: 700;
}
.compte-details[open] > summary::before { content: "–"; }
.compte-details .formulaire { margin-top: 18px; }

/* L'adresse enregistrée : une carte, pas un paragraphe perdu. */
.compte-adresses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin: 20px 0 0;
}
.compte-adresse {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid #eef2f4;
  border-radius: 10px;
  background: #fbfcfd;
  font-size: 14.5px;
  line-height: 1.6;
}
.compte-adresse p { margin: 0; }
.compte-defaut {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #e6f1f6;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--f-bleu);
}
.lien-retirer {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: #b4462c;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* La liste des commandes. */
.compte-commandes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin: 20px 0 0;
}
.compte-commande {
  padding: 18px 20px;
  border: 1px solid #eef2f4;
  border-radius: 10px;
  background: #fbfcfd;
}
.compte-commande__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.compte-commande__ref {
  font: 700 15px/1.3 "Poppins", "Lato", sans-serif;
  letter-spacing: .02em;
}
.compte-commande__statut {
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef2f4;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--f-doux);
  white-space: nowrap;
}
.compte-commande__statut--payee,
.compte-commande__statut--expediee,
.compte-commande__statut--livree { background: #e4f1ea; color: #2f6b4f; }
.compte-commande__statut--annulee,
.compte-commande__statut--echouee { background: #f8e8e3; color: #b4462c; }
.compte-commande__meta {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--f-doux);
}
.compte-commande__meta strong { color: var(--f-encre); }
.compte-suivi { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px; }
.compte-commande__actions { margin: 0; font-size: 14px; }
.compte-commande__actions a { color: var(--f-bleu); }

.espace-client .etat-vide { padding: 28px 0 12px; }
.espace-client .champ-case { margin: 4px 0 6px; display: flex; align-items: center; gap: 9px; }
.espace-client .champ-case label { margin: 0; font-weight: 400; font-size: 15px; }

/* L'oubli du mot de passe, l'inscription, la réinitialisation : une colonne
   de lecture, pas toute la largeur de l'écran. */
.espace-client--etroit .container-wide { max-width: 760px; }
.espace-client--etroit .espace-rappel { margin-bottom: 22px; }

/* ===========================================================================
   22. Les pages de rubrique : titres et texte d'introduction
   --------------------------------------------------------------------------
   Douze gabarits partagent `.themeHeader`, dont le thème d'origine dit
   trois choses fausses :

     - `font-family: 'Arimo'` — police retirée du site au lot 3 parce
       qu'aucune règle ne l'appelait. Celle-ci l'appelait. Les titres de
       rubrique tombaient donc sur la police par défaut du navigateur, pendant
       que le reste de la page est en Poppins ;
     - `text-decoration: underline` sur les h2 — un texte souligné qui n'est
       pas un lien se lit comme un lien cassé, et il y en a deux par page de
       localité ;
     - le tout hérite du `text-center` posé sur `.page` : les paragraphes
       d'introduction, qui font cinq à huit lignes, sont centrés. Sur un
       téléphone chaque ligne commence à un endroit différent et l'œil perd
       le fil à chaque retour.

   Le titre reste centré — c'est un titre. Le texte revient à gauche, avec
   une largeur de lecture.
   ======================================================================== */
.themeHeader h1,
.themeHeader h2,
.themeHeader h3,
h1.themeHeader,
h2.themeHeader {
  font-family: "Poppins", "Lato", sans-serif;
  padding-left: 0;
}
h2.themeHeader,
.themeHeader h2 {
  text-decoration: none;
  font-weight: 500;
  color: var(--f-doux);
}
.themeHeader h1 { margin-bottom: 6px; }

/* Le paragraphe d'introduction : à gauche, sur une mesure lisible. */
.rubrique-intro,
.themeHeader > p {
  max-width: 78ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  font-size: 15.5px;
  line-height: 1.7;
}
.themeHeader hr { max-width: 78ch; margin: 22px auto; border-color: #eef2f4; }

@media (max-width: 767px) {
  .themeHeader h1, h1.themeHeader { font-size: 23px; }
  .themeHeader h2, h2.themeHeader { font-size: 17px; }
  .rubrique-intro, .themeHeader > p { font-size: 15px; }

  /* La pagination : 11 px, et deux liens collés l'un à l'autre au pouce. */
  .pagination a, .pagination span,
  .arrowRight, .arrowLeft { font-size: 13px; }
  .arrowRight, .arrowLeft { min-height: 40px; display: inline-flex; align-items: center; }

  /* Le fil d'Ariane et le pied de page : des liens de 17 px de haut se
     visent mal. */
  #ariane { line-height: 2; }
  #ariane a { display: inline-block; padding: 3px 0; }
  footer a, .footer a { display: inline-block; padding: 4px 0; }

  /* La mention sous le prix d'un tirage tenait sur 11,5 px. */
  .tirage__mention { font-size: 12.5px; }
}

/* ===========================================================================
   23. L'accueil : le texte des blocs gris
   --------------------------------------------------------------------------
   Le thème pose `body { font-size: 14px }` et peint le texte des blocs en
   #848484 — du gris pâle sur du gris clair. À côté, un `h2` à 60 pixels.
   L'écart entre le titre et le corps était tel que le texte passait pour une
   légende, alors que c'est la présentation du métier de Patrice : trois
   paragraphes que personne ne lisait.

   Les pages de contenu — photographe, ville, rubrique — ont depuis leur
   propre échelle : 16 pixels, interligne 1,7, encre franche, et une mesure
   bornée pour que l'œil retrouve le début de la ligne suivante. L'accueil s'y
   aligne. Le titre redescend à une taille qui reste un titre sans écraser ce
   qu'il annonce.

   Au passage, les boîtes grises prennent le même rayon que le reste du site :
   les vignettes, les cartes et les blocs de quartiers sont arrondis depuis
   longtemps, ces boîtes-là étaient les dernières à angle vif.
   ======================================================================== */
.bloc-infos > div {
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--f-encre, #151515);
}
.bloc-infos > div p {
  margin: 0 0 1.05em;
  font-size: 16px;
  line-height: 1.7;
  color: var(--f-encre, #151515);
  max-width: 68ch;          /* la mesure de lecture, comme sur les pages de contenu */
}
.bloc-infos > div p:last-child { margin-bottom: 0; }
.bloc-infos > div a { color: var(--f-bleu, #3b94b6); }
/* Les titres de ces blocs sont écrits `<h2><strong>…</strong></h2>` : viser
   `strong` sans distinction leur retirait leur bleu. */
.bloc-infos > div p strong,
.bloc-infos > div li strong { color: var(--f-encre, #151515); font-weight: 700; }

/* 60 pixels pour annoncer un texte de 16 : le titre criait. Il garde sa
   présence, à une échelle qui laisse lire ce qui suit. */
.bloc-infos > div h2 {
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 .5em;
}
@media (min-width: 1200px) { .bloc-infos > div h2 { font-size: 34px; } }

/* Le filet sous le titre servait de séparateur ; avec un titre à sa taille,
   il redevient un trait discret plutôt qu'une barre. */
.bloc-infos > div hr {
  margin: 0 0 1.2em;
  border: 0;
  border-top: 1px solid rgba(21, 31, 38, .10);
}
/* Le premier bloc n'a pas de titre : son filet ouvrirait la boîte sur un
   trait, ce qui ne sépare rien. */
.bloc-infos > div > hr:first-child { display: none; }

/* Le bloc d'introduction occupe toute la largeur de la page. Une mesure de
   lecture calée à gauche y laissait les deux tiers de la boîte vides : le
   texte se centre, la boîte reste pleine largeur. */
.container-wide > .col-12.bloc-infos > div > p { margin-left: auto; margin-right: auto; }

@media (max-width: 767.98px) {
  .bloc-infos { padding: 8px; }
  .bloc-infos > div { padding: 18px; border-radius: 10px; }
  .bloc-infos > div h2 { font-size: 24px; }
  .bloc-infos > div p { font-size: 15.5px; max-width: none; }
}