/* ---------------------------------------------------------------------------
   Couche de modernisation, chargee APRES style.css.
   Objectif : rendre la mise en page fluide, remettre les styles qui etaient
   ecrits en attribut style="" dans le HTML (incompatibles avec la politique
   CSP), et corriger les points d accessibilite.
   Le design d origine n est pas refait, seulement rendu utilisable.
   --------------------------------------------------------------------------- */

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

/* L attribut hidden doit toujours gagner. Une feuille auteur qui pose un
   display explicite sur un element ecrase la regle du navigateur
   [hidden]{display:none}, quelle que soit la specificite : c est ce qui
   faisait apparaitre les zones de message d erreur vides. */
[hidden] {
  display: none !important;
}

body {
  width: auto;
  -webkit-text-size-adjust: 100%;
}

img,
figure {
  max-width: 100%;
}

img {
  height: auto;
}

/* Mise en page fluide : remplace les largeurs fixes 900 / 768 / 320 px */
.shell {
  width: auto;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}

@media only screen and (max-width: 640px) {
  .shell,
  .container {
    width: auto;
  }

  /* style.css pose display:none sur ce menu. Le JS ne fait que basculer
     l attribut hidden, il faut donc redonner un display quand il est absent,
     sinon le menu mobile ne s ouvre jamais. */
  #navigation ul:not([hidden]) {
    display: block;
  }

  .colonne .cols .col {
    width: 100%;
  }

  .featured img {
    width: 100%;
    height: auto;
  }

  .illustration-gauche,
  .illustration-droite {
    float: none;
    margin: 12px 0;
  }
}

/* ------------------------------ accessibilite ---------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #2b425e;
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
}

.skip-link:focus {
  left: 0;
}

/* L ancienne feuille supprimait l indicateur de focus (outline:0) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #d5a940;
  outline-offset: 2px;
}

#contact input:focus-visible,
#contact textarea:focus-visible {
  outline: 3px solid #d5a940;
  border-color: #2b425e;
}

/* ------------- remplacement des attributs style="" du HTML -------------- */

/*
  Bandeau "Partout en France" du haut de page.
  style.css contraint ce bloc a 210 px de large. Avec l icone en float et un
  texte en 18 px gras, la phrase passait a la ligne et mangeait de la hauteur
  au-dessus de la ligne de flottaison. Mise en ligne unique : une rangee
  flex, l icone a cote du texte, et une taille calee pour tenir dans la
  largeur disponible.
*/
.search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.icone-carte {
  float: none;
  flex: 0 0 auto;
  /* L icone reste a droite du texte, comme dans la version d origine */
  order: 2;
}

.accroche-zone {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  margin: 0;
}

.figure-centree {
  margin: 20px 0;
  text-align: center;
}

.figure-centree figcaption {
  font-size: 12px;
  color: #555;
  margin-top: 6px;
}

.illustration-gauche {
  float: left;
  margin: 8px 15px 15px 0;
}

.illustration-droite {
  float: right;
  margin: 8px 0 15px 15px;
}


.slogan-suite {
  display: block;
  font-size: 0.75em;
  font-weight: 400;
  margin-top: 8px;
}

.mention {
  font-size: 12px;
}

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

.form-contact .field {
  margin-bottom: 10px;
}

/* --------------------------- libelles flottants -------------------------- */

.field-flottant {
  position: relative;
}

.field-flottant > label {
  position: absolute;
  left: 11px;
  top: 13px;
  font-size: 13px;
  line-height: 1;
  color: #6a6a6a;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.12s ease-out, color 0.12s ease-out;
}

#contact .field-flottant input[type="text"],
#contact .field-flottant input[type="email"],
#contact .field-flottant input[type="tel"],
#contact .field-flottant textarea {
  padding: 19px 10px 5px;
}

#contact .field-flottant textarea {
  min-height: 58px;
}

/* Champ rempli ou actif : l etiquette remonte et retrecit */
.field-flottant input:focus + label,
.field-flottant input:not(:placeholder-shown) + label,
.field-flottant textarea:focus + label,
.field-flottant textarea:not(:placeholder-shown) + label {
  transform: translateY(-7px) scale(0.78);
  color: #2b425e;
}

.field-flottant input:focus + label,
.field-flottant textarea:focus + label {
  color: #2b425e;
}

@media (prefers-reduced-motion: reduce) {
  .field-flottant > label {
    transition: none;
  }
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
  width: 100%;
}

#contact textarea {
  height: auto;
  min-height: 70px;
  resize: vertical;
}

.aide-champ {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: #555;
  margin-top: 2px;
}

.field-error {
  display: block;
  color: #b3131f;
  background: #fdeaec;
  font-size: 11px;
  line-height: 1.25;
  padding: 2px 5px;
  margin-top: 1px;
}

/*
  Un champ en erreur se resserre pour compenser la hauteur du message.
  Le decalage du contenu situe dessous reste ainsi limite. :has() n est pas
  reconnu par les navigateurs anterieurs a 2023, qui se contentent de la
  marge normale : l effet est purement cosmetique.
*/
.form-contact .field:has(.field-error:not([hidden])) {
  margin-bottom: 3px;
}

/* Seconde barriere : meme sans l attribut hidden, un conteneur vide
   ne doit rien peindre. */
.field-error:empty {
  display: none;
}

[aria-invalid="true"] {
  border-color: #b3131f !important;
}

.form-rgpd {
  font-size: 11px;
  line-height: 1.4;
  color: #555;
  margin: 10px 0 4px;
}

.form-respond:empty {
  display: none;
}

/*
  Formulaire envoye : les champs disparaissent et le message prend leur
  place. Le JS fige la hauteur du formulaire juste avant, de sorte que la
  colonne ne bouge pas et que les images situees dessous ne se decalent
  plus au moment de la confirmation.
*/
.form-contact.form-envoye .field,
.form-contact.form-envoye .form-rgpd,
.form-contact.form-envoye .filou {
  display: none;
}

.form-contact.form-envoye {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-contact.form-envoye .form-respond {
  width: 100%;
}

.content-message h2 {
  font-size: 18px;
  margin: 0 0 4px;
}

.content-message p {
  text-align: center;
  margin: 0;
}

/* Piege a robots. position absolue hors ecran plutot que display:none :
   certains robots ignorent les champs en display:none. */
.filou {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* ------------------------- listes de maillage ---------------------------- */

.maillage {
  margin-top: 24px;
}

/* Affiche uniquement avec APP_DEBUG=1 */
.panne-maillage {
  margin-top: 24px;
  padding: 12px 14px;
  border-left: 4px solid #b3131f;
  background: #fdeaec;
  font-size: 13px;
}

.panne-maillage p {
  margin: 6px 0 0;
}

.listing_resultats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px;
  list-style: none;
  margin: 12px 0;
  padding: 0;
}

.listing_resultats li {
  margin: 0;
}

.listing_resultats a {
  display: block;
  padding: 6px 8px;
  font-size: 13px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  text-decoration: none;
  color: #2b425e;
}

.listing_resultats a:hover,
.listing_resultats a:focus {
  background: #2b425e;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}