/* ===========================================================================
   iaetweb-perso.css

   Feuille de style PROPRE AU SITE, écrite à la main, chargée APRÈS les trois
   feuilles produites par Webflow.

   Pourquoi un fichier séparé : `ia-et-web-cc8e55.webflow.css` est RÉGÉNÉRÉ à
   chaque export depuis Webflow. Tout ce qui y serait ajouté à la main
   disparaîtrait au prochain export, sans message et sans qu'on y pense. Ce
   fichier-ci n'est jamais touché par Webflow : c'est ici, et nulle part
   ailleurs, qu'on écrit les corrections.

   Sommaire
   1. Menu de navigation responsive (le menu Webflow n'en avait aucun)
   2. Formulaire de contact
   3. Cartes de la page Actualités
   4. Pied de page
   5. Section Augustin (le produit) et section Réalisations
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. MENU DE NAVIGATION RESPONSIVE

   Le problème corrigé ici : le conteneur des liens mesurait 697 px de large,
   sans bouton d'ouverture et sans défilement. En dessous d'environ 900 px de
   large, seul « Accueil » restait à l'écran ; Services, À propos, Équipe,
   News et surtout CONTACT sortaient de l'écran sans aucun moyen d'y accéder.

   Le seuil est MESURÉ, pas choisi : le logo occupe 288 px au-delà de 991 px
   de large (12rem en dessous, 18rem au-dessus, par l'attribut `sizes`), et la
   ligne de liens occupe sa largeur naturelle. Le menu déborde dès que la
   somme des deux dépasse la place disponible. Un premier essai à 991 px (le
   point de rupture des media queries de Webflow) laissait une bande de
   largeurs où le menu débordait encore sans que le bouton soit là pour le
   replier.

   Valeur actuelle : 1240 px, pour SEPT liens plus les deux réseaux.
   Mesuré le 22/09/2026 après l'ajout de « Réalisations » : la ligne de liens
   passe de 697 à 930 px, soit 1218 px avec le logo. 1240 laisse la marge qui
   absorbe l'arrivée de la police Montserrat, chargée par script et donc plus
   tardive que la première mise en page.

   ATTENTION : ce seuil est écrit en DEUX endroits, ici et dans la constante
   SEUIL de js/iaetweb-menu.js. Tout lien ajouté à la barre oblige à
   remesurer et à corriger les deux. C'est la raison pour laquelle la barre
   n'a reçu qu'un lien et non deux : un huitième élément replierait le menu
   sur les écrans de bureau les plus répandus.
------------------------------------------------------------------------- */

/* LA BARRE FIXE MANGEAIT LE TITRE DE CHAQUE SECTION APPELÉE PAR UNE ANCRE.
   Défaut présent depuis l'origine, sur les six liens du menu : la barre est
   en `position: fixed`, donc elle ne fait pas partie du flux, et le navigateur
   amène le haut de la section sous elle. Mesuré : la barre occupe 138 px
   au-dessus de 991 px de large et 92 px en dessous (le logo passe de 18rem à
   12rem par son attribut `sizes`), et c'est exactement ce qui disparaissait.

   `scroll-padding-top` est posé sur l'élément racine et vaut pour TOUTE
   navigation par ancre, y compris un lien reçu de l'extérieur et le retour en
   arrière du navigateur. La valeur dépasse la barre d'une quinzaine de pixels,
   pour que le titre ne soit pas collé dessous. */
:root { scroll-padding-top: 152px; }

@media screen and (max-width: 991px) {
  :root { scroll-padding-top: 106px; }
}

/* Tout ce bloc est conditionné à la classe `iaetweb-menu-js`, posée par
   `js/iaetweb-menu.js` au moment où il s'exécute. Sans ce garde-fou, un
   fichier JavaScript absent ou en erreur donnerait un menu replié que plus
   rien ne pourrait ouvrir : on aurait remplacé un défaut par une panne. */

/* Le bouton n'existe qu'en dessous du seuil : sur grand écran, les liens
   tiennent en ligne et le bouton n'a pas lieu d'être. */
.iaetweb-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-right: 1rem;
  padding: 0;
  border: 1px solid #ffffff33;
  border-radius: .6rem;
  background: transparent;
  color: var(--white2);
  cursor: pointer;
}

.iaetweb-burger:hover {
  border-color: var(--bleu-clair);
  color: var(--bleu-clair);
}

/* Le focus doit rester VISIBLE : c'est le seul repère d'un visiteur qui
   navigue au clavier. Contour dessiné à la main car Webflow retire le
   contour par défaut du navigateur. */
.iaetweb-burger:focus-visible,
.iaetweb_navbar_link:focus-visible {
  outline: 2px solid var(--bleu-clair);
  outline-offset: 2px;
}

/* Les trois barres. Dessinées en CSS plutôt qu'en image : rien à charger,
   et la couleur suit celle du bouton au survol. */
.iaetweb-burger span {
  position: relative;
  display: block;
  width: 1.4rem;
  height: 2px;
  background: currentColor;
}

.iaetweb-burger span::before,
.iaetweb-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.iaetweb-burger span::before { top: -.45rem; }
.iaetweb-burger span::after  { top:  .45rem; }

/* Menu ouvert : les trois barres deviennent une croix. */
.iaetweb-burger[aria-expanded="true"] span { background: transparent; }

.iaetweb-burger[aria-expanded="true"] span::before {
  top: 0;
  transform: rotate(45deg);
}

.iaetweb-burger[aria-expanded="true"] span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Le logo devient cliquable et ramène à l'accueil, comme sur tout site.
   Le lien doit être `flex` pour ne pas modifier la répartition de la barre,
   qui est en `justify-content: space-between`. */
.iaetweb_logo_lien {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

/* Le logo porte désormais ses attributs `width` et `height` en HTML, pour que
   le navigateur réserve la place avant de l'avoir chargé (c'est ce qui évite
   le sursaut de la page à l'arrivée de l'image). Mais la largeur est imposée
   en CSS : sans `height: auto`, l'attribut `height` s'appliquerait tel quel et
   le logo serait écrasé. */
.iaetweb_logo_container {
  height: auto;
}

/* Facebook et LinkedIn restent côte à côte sur grand écran : sans cette
   règle, la <div> qui les regroupe les empilerait l'un sous l'autre. */
.iaetweb-navbar-reseaux {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

@media screen and (max-width: 1240px) {

  .iaetweb-menu-js .iaetweb-burger {
    display: flex;
  }

  /* Le conteneur des liens quitte la ligne et devient un panneau déroulant
     sous la barre. `display: none` plutôt qu'une hauteur nulle : un lien
     seulement masqué à l'œil reste atteignable au clavier et lu par un
     lecteur d'écran, ce qui reproduirait le défaut qu'on corrige. */
  .iaetweb-menu-js .iaetweb_navbar_link_container {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-right: 0;
    padding: .5rem 0 1rem;
    background-color: #101829;
    border-top: 1px solid #ffffff1a;
    box-shadow: 0 12px 24px #0006;
    /* Un menu plus haut que l'écran (téléphone en paysage) doit pouvoir
       défiler, sinon les derniers liens redeviennent inaccessibles. */
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }

  .iaetweb-menu-js .iaetweb_navbar_link_container.est-ouvert {
    display: flex;
  }

  .iaetweb-menu-js .link-block.iaetweb_navbar_link {
    width: 100%;
    padding: .9em 1.5em;
    text-align: left;
    border-bottom: 1px solid #ffffff12;
  }

  .iaetweb-menu-js .text-block-12,
  .iaetweb-menu-js .text-block-13,
  .iaetweb-menu-js .text-block-14,
  .iaetweb-menu-js .text-block-15,
  .iaetweb-menu-js .text-block-16 {
    text-align: left;
  }

  /* Facebook et LinkedIn : sur une ligne à eux, en bas du panneau. */
  .iaetweb-menu-js .iaetweb-navbar-reseaux {
    display: flex;
    gap: 1.5rem;
    padding: 1.1em 1.5em .3em;
  }

  .iaetweb-navbar-reseaux img {
    width: 1.5rem;
    height: auto;
  }
}

/* La barre est en `position: fixed` : le panneau déroulant se positionne par
   rapport à elle, donc elle doit être le repère de positionnement.

   Le `z-index` n'était déclaré nulle part. Le panneau déroulant sortant de la
   barre, n'importe quelle section positionnée venant après dans la page
   passerait devant lui, et le menu s'ouvrirait DERRIÈRE le contenu. Vérifié
   ici avec `document.elementFromPoint` sur un lien ouvert : le menu est bien
   au-dessus. Ce z-index fixe le résultat plutôt que de le laisser dépendre de
   l'ordre des sections. Le bandeau cookies est à 9999 et reste au-dessus. */
.iaetweb_navbar {
  position: fixed;
  z-index: 900;
}

.iaetweb_navbar_container {
  position: relative;
}


/* ---------------------------------------------------------------------------
   2. FORMULAIRE DE CONTACT

   Le site n'avait aucun formulaire : le seul moyen d'écrire était un lien
   `mailto:`, qui ne fait rien du tout sur un poste sans logiciel de
   messagerie configuré. Aucune trace, aucune relance, aucune mesure.
------------------------------------------------------------------------- */

/* La section de contact est sur fond gris clair (#f0f0f0) : tout le
   formulaire est donc en texte foncé. Écrire ici du blanc sur blanc est
   l'erreur que ces couleurs évitent. */
.iaetweb-formulaire {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 34rem;
}

.iaetweb-champ {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.iaetweb-champ label {
  color: #101829;
  font-size: 1rem;
  font-weight: 600;
}

.iaetweb-champ .iaetweb-aide {
  color: #4a5160;
  font-size: .85rem;
}

.iaetweb-champ input,
.iaetweb-champ select,
.iaetweb-champ textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid #9aa0ad;
  border-radius: .6rem;
  background-color: #fff;
  color: #101829;
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
}

.iaetweb-champ textarea {
  min-height: 9rem;
  resize: vertical;
}

/* Le contour de focus est bleu FONCÉ ici : le bleu clair de la charte
   (#54d3ed) sur un fond gris clair ne se distingue quasiment pas. */
.iaetweb-champ input:focus,
.iaetweb-champ select:focus,
.iaetweb-champ textarea:focus {
  outline: 2px solid #1b6fa8;
  outline-offset: 1px;
  border-color: #1b6fa8;
}

/* Le champ en erreur est signalé par une bordure ET par un message écrit :
   la couleur seule ne se voit pas pour un daltonien (critère RGAA 3.1). */
.iaetweb-champ input[aria-invalid="true"],
.iaetweb-champ select[aria-invalid="true"],
.iaetweb-champ textarea[aria-invalid="true"] {
  border-color: #b3261e;
  border-width: 2px;
}

.iaetweb-erreur-champ {
  margin: 0;
  color: #b3261e;
  font-size: .88rem;
  font-weight: 600;
}

/* Le bouton reprend la forme de ceux de la charte (arrondi, dégradé bleu)
   mais dans des bleus plus foncés : le #54d3ed de la charte porte du texte
   blanc à un contraste de 1,9:1, illisible, ce qui passe inaperçu sur le fond
   sombre du haut de page et saute aux yeux sur le fond clair d'ici. */
.iaetweb-bouton {
  align-self: flex-start;
  padding: .8em 2.2em;
  border: 0;
  border-radius: 1.4rem;
  background-image: linear-gradient(90deg, #1b6fa8, #14588a);
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.iaetweb-bouton:hover { filter: brightness(1.15); }

.iaetweb-bouton:focus-visible {
  outline: 3px solid #101829;
  outline-offset: 2px;
}

.iaetweb-message {
  padding: 1rem 1.2rem;
  border-radius: .6rem;
  border-left: 4px solid #1b6fa8;
  background-color: #fff;
  color: #101829;
}

.iaetweb-message--erreur { border-left-color: #b3261e; }

.iaetweb-message p { margin: 0 0 .4rem; }
.iaetweb-message p:last-child { margin-bottom: 0; }
.iaetweb-message a { color: #1b6fa8; }
.iaetweb-message ul { margin: 0; padding-left: 1.2rem; }

.iaetweb-mentions-formulaire {
  color: #4a5160;
  font-size: .85rem;
}

.iaetweb-mentions-formulaire a { color: #1b6fa8; }

/* Sur téléphone, les marges intérieures de la section de contact s'empilent :
   28 px pour la section, 14 px pour le conteneur intérieur, 28 px encore pour
   la carte blanche. Mesuré à 375 px de large, il ne restait que 235 px pour
   le formulaire, soit près de deux centimètres perdus de chaque côté.

   On réduit les marges EXTÉRIEURES et non celles des cartes blanches. Un
   premier essai supprimait le padding des cartes : le formulaire retrouvait
   bien sa largeur, mais le texte de « Pourquoi nous choisir ? » venait alors
   toucher le bord arrondi du cadre blanc, au pixel près. */
@media screen and (max-width: 767px) {
  .iaetweb-section-contactv2 {
    padding-left: .8em;
    padding-right: .8em;
  }

  .iaetweb-section-contactv2 .iaetweb-apropos-intro-container {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Piège à robots.

   Le champ doit être invisible à l'écran SANS être retiré du document : un
   automate remplit tout ce qu'il trouve dans le HTML, un humain ne le voit
   jamais. `display: none` serait reconnu par les robots un peu sérieux, d'où
   le déplacement hors cadre. `aria-hidden` et `tabindex="-1"` empêchent un
   lecteur d'écran et la tabulation de tomber dessus. */
.iaetweb-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ---------------------------------------------------------------------------
   3. CARTES DE LA PAGE ACTUALITÉS

   Les cartes avaient des hauteurs inégales : un titre sur deux lignes ou un
   texte plus long faisait descendre la carte plus bas que sa voisine, et les
   vignettes se retrouvaient à des niveaux différents.

   Deux causes, et il fallait traiter les deux :

   1. C'est le lien <a> qui est l'élément de la grille, pas la carte. La
      grille étirait donc bien le lien sur la hauteur de sa ligne, mais la
      carte à l'intérieur gardait sa hauteur naturelle.
   2. Les vignettes avaient chacune leurs dimensions d'origine.
------------------------------------------------------------------------- */

/* Toutes les lignes de la grille prennent la hauteur de la plus haute.
   Sans cette ligne, chaque ligne s'ajuste à son propre contenu : les deux
   cartes d'une même rangée sont égales entre elles, mais la rangée du dessous
   peut être plus courte. Mesuré avant correction : 634 px pour la première
   rangée, 606 px pour la seconde. */
.iaetweb-news-section .grid {
  /* `grid-template-rows: none` est INDISPENSABLE avant `grid-auto-rows`.
     Webflow déclare `grid-template-rows: auto auto` sur `.w-layout-grid` :
     les deux premières lignes sont donc EXPLICITES, et `grid-auto-rows`, qui
     ne régit que les lignes implicites, restait sans le moindre effet. Il a
     fallu le mesurer pour s'en apercevoir : la règle était bien appliquée,
     elle ne servait simplement à rien. */
  grid-template-rows: none;
  grid-auto-rows: 1fr;
}

/* Le lien transmet la hauteur que la grille lui donne à la carte qu'il
   contient. Sans `display: flex` ici, `height: 100%` sur la carte se
   calculerait par rapport à une hauteur automatique, donc sans effet. */
.carte-news-lien {
  display: flex;
  text-decoration: none;
}

.carte-news {
  width: 100%;
  height: 100%;
  /* Les éléments étaient calés à gauche alors que la carte porte la classe
     `text-center` : le titre était centré, mais l'icône et la vignette non. */
  align-items: center;
}

/* La vignette est poussée tout en bas de la carte et prend la même hauteur
   partout. `margin-top: auto` mange l'espace disponible au-dessus d'elle :
   c'est ce qui aligne les vignettes entre elles quelle que soit la longueur
   du titre ou du texte.

   Le sélecteur est volontairement limité aux cartes : `.image-news` sert
   AUSSI à l'image pleine taille de la page de détail, qui ne doit pas être
   rognée. */
.carte-news .image-news {
  /* `margin-top: auto` mange l'espace disponible au-dessus de la vignette :
     c'est ce qui aligne le BAS des vignettes entre elles, quelle que soit la
     longueur du titre, du texte, ou la hauteur de l'image elle-même.
     Les marges gauche et droite restent automatiques pour la centrer. */
  margin: auto auto 0;

  /* L'image s'affiche ENTIÈRE, dans ses proportions d'origine.
     Les ratios sont très différents d'une vignette à l'autre (1,67 pour les
     deux visuels en 250×150, 1,19 pour celui du SIE en 1369×1149) : un cadre
     de taille fixe rognerait donc franchement l'une ou l'autre. */
  object-fit: contain;

  /* `max-height` et non `height` : une image plus petite que le cadre garde
     sa taille naturelle au lieu d'être agrandie, donc jamais de flou. Les
     deux visuels en 250×150 s'affichent tels quels ; celui du SIE, bien plus
     grand, est réduit jusqu'à tenir dans les 10rem. */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 10rem;

  border-radius: 1.2em;
}

/* Le texte garde une hauteur suffisante pour que les vignettes ne remontent
   pas jusqu'au titre sur une actualité très courte. */
.carte-news .text-block-2 {
  margin-bottom: 1.4em;
}

@media screen and (max-width: 767px) {
  /* Une seule colonne : les cartes ne sont plus côte à côte, donc l'égalité
     de hauteur n'a plus de sens, et elle coûte cher. Mesuré à 375 px avec
     `1fr` encore actif : les quatre cartes prenaient la hauteur de la plus
     longue, soit 794 px chacune, la plupart remplies de vide. Chaque carte
     reprend donc ici la hauteur de son propre contenu. */
  .iaetweb-news-section .grid {
    grid-auto-rows: auto;
  }

  /* Le padding de 3.5em est ramené à quelque chose de tenable sur un
     téléphone : il mangeait 56 px de chaque côté d'une carte de 263 px. */
  .carte-news {
    padding: 2em 1.5em;
  }

  /* Un peu plus de hauteur disponible : en une seule colonne, la place ne
     manque pas, et la vignette reste de toute façon limitée par la largeur
     de la carte. */
  .carte-news .image-news {
    max-height: 12rem;
  }
}


/* ---------------------------------------------------------------------------
   4. PIED DE PAGE
------------------------------------------------------------------------- */

/* Les liens légaux du pied, alignés et lisibles. La politique des cookies
   n'était atteignable QUE depuis le bandeau : une fois celui-ci accepté,
   elle disparaissait du site. */
.iaetweb-footer-liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  padding-top: 1rem;
}

.iaetweb-footer-liens a {
  color: var(--white2);
  font-size: .95rem;
  text-decoration: underline;
}

.iaetweb-footer-liens a:hover { color: var(--bleu-clair); }


/* ---------------------------------------------------------------------------
   5. SECTION AUGUSTIN ET SECTION RÉALISATIONS

   Le site annonçait quatre familles de services et ne montrait AUCUN travail
   fait. Augustin, qui tourne en mairie depuis juin 2026, n'apparaissait nulle
   part hors de la page Actualités, où personne ne va de lui-même.

   Le visiteur visé est précis : une secrétaire de mairie ou un élu qui vient
   vérifier à qui il a affaire avant d'ouvrir un lien reçu par courriel. Ce
   qu'il cherche n'est pas une promesse de plus, c'est une preuve, et un nom de
   commune qu'il peut reconnaître.

   Les grilles ci-dessous n'utilisent PAS `.w-layout-grid` : cette classe
   Webflow déclare `grid-template-rows: auto auto`, donc des lignes explicites,
   contre lesquelles `grid-auto-rows` ne peut rien. Écrire nos propres grilles
   évite ce piège au lieu d'avoir à le contourner.
------------------------------------------------------------------------- */

/* --- La section produit (fond clair, comme « À propos ») ---------------- */

/* `#f0f0f0` et ce rythme de marges sont ceux de `.iaetweb-section-apropos` :
   la page alterne déjà sombre et clair, et cette section doit entrer dans
   l'alternance plutôt que d'inventer un troisième fond. */
.iaetweb-section-augustin {
  background-color: #f0f0f0;
  margin-top: 3em;
  padding: 3em 2em;
}

.iaetweb-augustin-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Deux colonnes inégales : le texte porte l'argument, l'encadré porte les
   faits. À une seule colonne, l'encadré passerait sous un long texte et ne
   serait plus lu. */
.iaetweb-augustin-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 2.5em;
  align-items: start;
  margin-top: 2.5em;
}

.iaetweb-augustin-texte p {
  color: #1c2434;
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 0 1.1em;
}

.iaetweb-augustin-texte h3 {
  color: #101829;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 1.8em 0 .6em;
}

/* La ligne d'état, qui est l'information la plus lourde de la section : un
   produit en service dans une vraie mairie n'est pas un produit annoncé.
   Elle est donc sortie du texte courant et signalée par un liseré. */
.iaetweb-augustin-etat {
  border-left: 4px solid #1b6fa8;
  background-color: #fff;
  border-radius: 0 .6rem .6rem 0;
  padding: 1em 1.2em;
  margin: 0 0 1.6em;
  color: #101829;
  font-size: 1.05rem;
  line-height: 1.6;
}

.iaetweb-augustin-encadre {
  background-color: #101829;
  border: 1px solid var(--bleu-clair);
  border-radius: 1.4rem;
  padding: 2em;
}

.iaetweb-augustin-encadre h3 {
  color: var(--white2);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 1.2em;
}

/* Liste sans puce native : la puce d'un navigateur se place hors du cadre et
   se colorie mal. Le tiret est dessiné en `::before`, donc il suit la couleur
   de la charte. `aria-hidden` n'est pas nécessaire : un contenu généré par CSS
   n'est pas lu par les lecteurs d'écran courants. */
.iaetweb-augustin-points {
  list-style: none;
  margin: 0;
  padding: 0;
}

.iaetweb-augustin-points li {
  position: relative;
  color: #e7ebf2;
  font-size: .98rem;
  line-height: 1.6;
  padding-left: 1.4em;
  margin-bottom: 1em;
}

.iaetweb-augustin-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .7em;
  height: 2px;
  background-color: var(--bleu-clair);
}

.iaetweb-augustin-points strong { color: var(--white2); }

/* Ce que le produit NE fait pas. C'est la partie qui rassure une secrétaire
   de mairie, et c'est pour elle qu'elle est écrite. */
.iaetweb-augustin-limites {
  margin-top: 1.6em;
  padding-top: 1.2em;
  border-top: 1px solid #ffffff33;
  color: #9aa0ad;
  font-size: .92rem;
  line-height: 1.6;
}

.iaetweb-augustin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.8em;
}

/* `.iaetweb-bouton` a été écrit pour le <button> du formulaire. Porté par un
   lien, il lui manque trois choses qu'un bouton a d'office : le mode d'affichage
   en bloc, l'absence de soulignement et le centrage du texte. */
a.iaetweb-bouton {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

/* Second bouton, en retrait : deux boutons pleins côte à côte se disputent le
   clic et aucun ne ressort. Celui-ci reprend le bleu foncé de la charte en
   contour, sur le fond clair de la section. */
.iaetweb-bouton-contour {
  display: inline-block;
  padding: .8em 2.2em;
  border: 1px solid #1b6fa8;
  border-radius: 1.4rem;
  color: #1b6fa8;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.iaetweb-bouton-contour:hover {
  background-color: #1b6fa8;
  color: #fff;
}


/* --- La section réalisations (fond sombre du corps de page) ------------- */

.iaetweb-section-realisations {
  margin-top: 4em;
  padding-left: 2em;
  padding-right: 2em;
}

.iaetweb-realisations-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* `auto-fit` plutôt qu'un nombre de colonnes fixe : la grille se recompose
   d'elle-même quand une réalisation est ajoutée ou retirée, ce qui arrivera.
   `1fr` sur les lignes égalise la hauteur des cartes d'une même rangée, sans
   quoi le lien du bas de chaque carte se retrouve à une hauteur différente. */
.iaetweb-realisations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.6em;
  margin-top: 2.5em;
}

/* Même dessin que `.iaetweb_grid_card-2` (la carte des services), en moins
   rembourré : ces cartes-ci sont plus nombreuses et plus courtes.
   `flex` en colonne avec `margin-top: auto` sur le lien, c'est ce qui colle
   tous les liens au bas de leur carte quelle que soit la longueur du texte. */
.iaetweb-realisation-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bleu-clair);
  background-color: #091224bf;
  border-radius: 1.6em;
  padding: 2em;
}

/* L'étiquette dit en un mot à quelle famille appartient la réalisation. Un
   maire cherche « collectivité » et saute le reste. */
.iaetweb-realisation-type {
  align-self: flex-start;
  background-color: #ffffff1a;
  border-radius: 1rem;
  color: var(--bleu-clair);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .35em .9em;
  margin-bottom: 1.1em;
}

.iaetweb-realisation-card h3 {
  color: var(--white2);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 .3em;
}

.iaetweb-realisation-client {
  color: var(--bleu-clair);
  font-size: .92rem;
  margin: 0 0 1em;
}

.iaetweb-realisation-card p {
  color: #d5dae3;
  font-size: .98rem;
  line-height: 1.65;
  margin: 0 0 1em;
}

.iaetweb-realisation-lien {
  margin-top: auto;
  padding-top: .6em;
  color: var(--bleu-clair);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .25em;
}

.iaetweb-realisation-lien:hover { color: var(--white2); }

/* Le lien sortant est annoncé. Sans cette marque, rien ne distingue à l'écran
   un lien qui reste sur le site d'un lien qui ouvre un autre onglet, et
   l'ouverture surprend. */
.iaetweb-realisation-lien[target="_blank"]::after {
  content: " \2197";
  text-decoration: none;
}

/* Phrase de bas de section : ce qui n'est pas montré, et pourquoi. Elle évite
   la question « c'est tout ? » et elle est vraie. */
.iaetweb-realisations-note {
  color: #9aa0ad;
  font-size: .95rem;
  line-height: 1.7;
  margin-top: 2em;
  text-align: center;
}

.iaetweb-realisations-note a {
  color: var(--bleu-clair);
  text-decoration: underline;
}


/* --- Petits écrans ------------------------------------------------------ */

/* 991 px est le point de rupture de Webflow : les grilles de la page y
   passent déjà en colonne unique, et la section produit doit suivre le même
   mouvement plutôt qu'en inventer un autre. */
@media screen and (max-width: 991px) {
  .iaetweb-augustin-grid {
    grid-template-columns: 1fr;
    gap: 2em;
  }
}

@media screen and (max-width: 767px) {
  .iaetweb-section-augustin { padding: 2.5em 1em; }
  .iaetweb-section-realisations { padding-left: 1em; padding-right: 1em; }

  .iaetweb-augustin-encadre { padding: 1.5em; }
  .iaetweb-realisation-card { padding: 1.5em; }

  /* Une seule colonne : l'égalité de hauteur n'a plus d'objet et coûterait la
     hauteur de la carte la plus longue à toutes les autres. Même raison qu'au
     bloc 3 pour les cartes d'actualités. */
  .iaetweb-realisations-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}