/* ===========================================================================
   Ajustements de la copie statique d'Icare Développement.
   Regroupés ici plutôt qu'en ligne dans chaque page : une seule feuille à
   relire, et une seule à modifier.
   Charte relevée dans le CSS du site : vert #B6C92F, vert foncé #5C6618,
   gris #575656, police « Work Sans ».
   =========================================================================== */

:root {
  --icare-vert: #B6C92F;
  --icare-vert-fonce: #5C6618;
  --icare-gris: #575656;
}

/* --- Aucun lien souligné, nulle part --------------------------------------
   Demandé le 2026-09-11. Le !important est nécessaire : l'extension Facebook
   souligne via des sélecteurs à identifiant (#cff a:hover), qu'une règle
   simple ne dépasserait pas.
   Compromis assumé : sans soulignement, un lien au fil du texte ne se
   distingue plus que par sa couleur. Les liens de navigation et les boutons,
   eux, restent évidents. */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
  text-decoration: none !important;
}

/* Cette règle de l'extension Facebook est elle-même en !important et porte une
   spécificité supérieure : il faut la viser nommément. Notre feuille étant
   chargée en dernier, à spécificité égale c'est la nôtre qui l'emporte. */
.sb-elementor-cta-selector span a {
  text-decoration: none !important;
}

/* Le bouton « Voir l'itinéraire » : ni le lien ni son intérieur. */
.icare-carte-lien,
.icare-carte-lien:hover,
.icare-carte-lien:focus,
.icare-carte-lien span {
  text-decoration: none !important;
}

/* --- Page contact : photo | coordonnées | carte -------------------------- */
/* Les coordonnées touchaient la photo. On leur donne de l'air des deux côtés
   et on les centre verticalement entre les deux blocs, qui n'ont pas la même
   hauteur. */
.icare-col-coordonnees > .elementor-widget-wrap {
  padding-left: 20px;
  padding-right: 20px;
  align-content: center;   /* .elementor-widget-wrap est un conteneur flex */
  align-items: center;
}
/* Le bloc est dimensionné sur son contenu, puis centré d'un seul tenant :
   les lignes restent alignées entre elles et l'ensemble respire des deux
   côtés. Une largeur maximale fixe ne centrait rien, car elle dépassait
   l'espace réellement disponible dans la colonne. */
.icare-coord-bloc {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.icare-col-coordonnees > .elementor-widget-wrap > .elementor-element {
  width: 100%;
}
.icare-col-photo > .elementor-widget-wrap,
.icare-col-carte > .elementor-widget-wrap {
  align-content: center;
}

@media (max-width: 1024px) {
  .icare-col-coordonnees > .elementor-widget-wrap { padding-left: 24px; padding-right: 24px; }
}
/* L'apparence du bouton vaut pour tous les écrans où il apparaît — il est là
   jusqu'à 1024 px. Le fond gris, le cadre et le gabarit 45 × 60 viennent
   d'Elementor par défaut ; sur tablette le bouton est déjà à côté du logo, il
   n'avait que son allure à corriger. */
@media (max-width: 1024px) {
  .elementor-location-header .elementor-menu-toggle {
    width: auto !important;
    height: auto !important;
    padding: 6px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 24px !important;
    color: #4a4f54;
  }
  .elementor-location-header .elementor-menu-toggle:hover,
  .elementor-location-header .elementor-menu-toggle:focus {
    background: none !important;
    color: #8fa01f;              /* le vert de la charte */
  }
  .elementor-location-header .elementor-menu-toggle .icare-icone,
  .elementor-location-header .elementor-menu-toggle svg {
    width: 1em;
    height: 1em;
    display: block;
  }
}

/* En téléphone, le bouton était en plus sur sa propre rangée, sous les
   pastilles ISO : 301 px d'en-tête avant d'arriver au contenu. On le remonte
   à droite du logo. */
@media (max-width: 767px) {

  /* Elementor pose `position: relative` sur la colonne ET sur son enveloppe
     interne. C'est l'enveloppe, à mi-hauteur, qui ancrerait un élément absolu —
     le bouton se retrouvait au niveau des pastilles ISO. On rend les deux
     statiques : l'ancre devient le conteneur de la section, dont le haut
     coïncide avec le haut du logo. */
  .elementor-location-header .elementor-container {
    position: relative;
  }
  .elementor-location-header .elementor-column:has(.elementor-widget-nav-menu),
  .elementor-location-header .elementor-widget-wrap:has(.elementor-widget-nav-menu) {
    position: static;
  }

  /* Le widget quitte sa rangée — c'est ce qui fait remonter le contenu de
     70 px. 39 px = centre vertical du logo (76), moins la moitié du bouton. */
  .elementor-location-header .elementor-widget-nav-menu {
    position: absolute;
    top: 39px;
    right: 14px;
    width: auto;
    z-index: 20;
  }

  /* Rendre l'enveloppe statique a fait perdre aux pastilles ISO leur centrage :
     elles se collaient au bord gauche. On le rétablit explicitement plutôt que
     de renoncer à l'ancre — c'est une règle, pas un effet de bord. */
  .elementor-location-header .elementor-widget__width-initial {
    margin-left: auto;
    margin-right: auto;
  }

  /* Le panneau déroulant. La règle doit viser `__container` et lui seul :
     `.elementor-nav-menu--dropdown` porte AUSSI sur les sous-menus, et leur
     imposer `width: 100vw` étirait le widget sur toute la largeur — le bouton
     se recentrait alors au milieu de l'écran.

     Le panneau est dans le flux : sans `position: absolute` explicite, `top`
     est ignoré. 172 px = bas de l'en-tête (231) moins haut du bouton (59) ;
     c'est ce qui le fait s'ouvrir SOUS l'en-tête au lieu d'en travers du logo.
     Si le logo change de taille, c'est cette valeur qu'il faut revoir. */
  .elementor-location-header
    .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    position: absolute;
    top: 172px;
    left: auto;
    right: -14px;
    width: 100vw;
    max-width: 100vw;
  }
}

/* --- Icônes SVG ------------------------------------------------------------
   `optimiser.py` a remplacé les polices d'icônes (Font Awesome, eicons) par des
   SVG en ligne. Elementor leur applique `width: 1em` en laissant la hauteur
   libre : elle suit alors le ratio de la viewBox, et une icône dessinée
   448 × 512 sortait 1,14 fois plus haute que large — les boutons de partage
   latéraux avaient doublé de hauteur (65 × 74 au lieu de 65 × 45).

   Une glyphe de police occupe une case carrée d'un cadratin. On la rétablit :
   à hauteur et largeur égales, `preserveAspectRatio` centre le dessin sans le
   déformer. */
/* La classe est répétée à dessein : Elementor vise `.elementor-button-icon svg`
   (deux niveaux) avec `height: auto`, qu'un sélecteur à une seule classe ne
   dépasse pas. À spécificité égale, notre feuille étant chargée en dernier,
   c'est la nôtre qui l'emporte — sans recourir à `!important`. */
.icare-icone.icare-icone {
  width: 1em;
  height: 1em;
  /* Certaines glyphes dépassent volontairement du cadratin — une police les
     dessine alors hors de sa case, sans les couper. Un SVG, lui, rogne par
     défaut : on le lui interdit. */
  overflow: visible;
}

.elementor-menu-toggle .icare-icone {
  display: block;
}

/* --- Titres de la page d'accueil -------------------------------------------
   L'accueil n'avait AUCUNE balise h1..h6 : ses titres de section étaient des
   <span>. Ils sont devenus h1/h2. La classe elementor-heading-title porte
   déjà toute l'apparence — il ne reste qu'à annuler les marges et le poids
   que le thème applique par défaut à h1 et h2, que le span n'avait pas. */
h1.icare-titre,
h2.icare-titre {
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: inherit;
}

/* ===========================================================================
   Formulaire de contact et carte — règles reconstruites le 15/09/2026.
   La version d'origine a été perdue en réécrivant cette feuille : un
   `index()` sur « @media (max-width: 767px) » est tombé sur le bloc mobile
   D'ORIGINE, et tout ce qui suivait a été tronqué. Ces règles sont réécrites
   d'après `contact_page.py`, qui produit le balisage.
   =========================================================================== */

.icare-form-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px 56px;
}
.icare-form-inner h2 {
  margin: 0 0 10px;
  color: var(--icare-gris);
  background: none;   /* le thème pose un fond gris sur les h2 */
}
.icare-form-intro {
  margin: 0 0 28px;
  color: var(--icare-gris);
}

/* Deux colonnes sur écran large, une seule dès que la place manque. Les
   champs longs (objet, message) occupent toujours toute la largeur. */
.icare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}
.icare-full {
  grid-column: 1 / -1;
}
.icare-field label {
  display: block;
  margin-bottom: 6px;
  font-size: .92em;
  color: var(--icare-gris);
}
.icare-field input,
.icare-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d5d9de;
  border-radius: 4px;
  font: inherit;
  color: var(--icare-gris);
  background: #fff;
}
.icare-field textarea {
  min-height: 150px;
  resize: vertical;
}
.icare-field input:focus,
.icare-field textarea:focus {
  outline: none;
  border-color: var(--icare-vert);
  box-shadow: 0 0 0 3px rgba(182, 201, 47, .25);
}
.icare-field .req {
  color: var(--icare-vert-fonce);
}

/* Le pot de miel. Il DOIT rester dans le flux pour qu'un robot le remplisse,
   mais invisible et inatteignable pour un humain — `display: none` le rendrait
   suspect, et certains robots l'ignorent. Sans cette règle il s'affichait en
   clair, libellé « Ne pas remplir » compris. */
.icare-pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.icare-actions {
  margin-top: 26px;
}
.icare-actions button {
  padding: 13px 34px;
  border: 0;
  border-radius: 4px;
  background: var(--icare-vert);
  color: #fff;
  font: inherit;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
}
.icare-actions button:hover,
.icare-actions button:focus {
  background: var(--icare-vert-fonce);
}

.icare-msg {
  margin: 0 0 22px;
  padding: 14px 18px;
  border-radius: 4px;
  border-left: 4px solid;
}
.icare-msg.ok {
  background: #f4f7e4;
  border-color: var(--icare-vert);
  color: var(--icare-vert-fonce);
}
.icare-msg.ko {
  background: #fdf1f0;
  border-color: #b4231f;
  color: #8f1b18;
}

/* La carte : un carré cliquable. L'iframe Google ne transmet pas le clic au
   lien parent — d'où le calque `.icare-carte-lien` par-dessus, qui porte à la
   fois la zone de clic et l'étiquette « Voir l'itinéraire ». */
.icare-carte {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}
.icare-carte iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;   /* le clic doit atteindre le calque, pas Google */
}
.icare-carte-lien {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14px;
}
.icare-carte-lien span {
  padding: 8px 18px;
  border-radius: 4px;
  background: var(--icare-vert);
  color: #fff;
  font-weight: 600;
  font-size: .9em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.icare-carte-lien:hover span,
.icare-carte-lien:focus span {
  background: var(--icare-vert-fonce);
}

@media (max-width: 767px) {
  .icare-form-inner {
    padding: 34px 18px 42px;
  }
  .icare-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* --- Barre de contact collée à droite (greffon sticky-side-buttons) -------
   Le greffon la pose à `top: 30%` : sur un écran d'ordinateur elle se
   retrouve à hauteur du bandeau de titre et de la barre de filtres, qu'elle
   chevauche. On l'ancre en bas — elle ne dépend plus de la hauteur de la
   fenêtre et ne croise plus rien (le bandeau cookies est à gauche).
   Demandé le 2026-09-16. */
#ssb-container {
  top: auto;
  bottom: 40px;
}


/* --- Sous-menus de l'en-tête ----------------------------------------------
   Au survol, Elementor posait son gris foncé par défaut (#3f444b) et écrivait
   le vert de la charte PAR-DESSUS : un bandeau sombre au milieu d'un panneau
   blanc. On inverse — fond vert, texte foncé (le #33373d déjà utilisé au
   repos : 6,4:1 sur ce vert, donc lisible).
   Demandé le 2026-09-17.

   Deux règles à dépasser, pas une, et elles ne sont pas au même niveau :
   celle d'Elementor (`.elementor-sub-item:hover`, 0,2,0) pose le fond, celle
   du widget (`.elementor-1308 .elementor-element-16607ff
   .elementor-nav-menu--dropdown a:hover`, 0,5,1) pose la couleur du texte. La
   classe est répétée pour atteindre 0,5,1 à notre tour — à égalité, notre
   feuille est chargée en dernier, donc elle l'emporte — plutôt que de viser
   l'identifiant du widget, qui diffère d'une copie du menu à l'autre
   (en-tête, version collée, panneau mobile).

   `:focus` autant que `:hover` : la règle d'Elementor vise les deux, en
   omettre un laisserait le bandeau gris au clavier. */
.elementor-location-header
  .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-sub-item:hover,
.elementor-location-header
  .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-sub-item:focus {
  background-color: var(--icare-vert);
  color: #33373d;
}