/* catalogue.css — les fondations des pages de catalogue.
   Services, secteurs, expertises, réalisations et études de cas partagent
   cette feuille : les fondations et le pied de page. Ce qui est propre à une
   page vit dans sa feuille à elle (expertise.css, service.css, …), chargée
   juste après.

   L'en-tête est dans entete.css et le plan du site dans plan.css : les deux
   sont partagés avec l'accueil, les témoignages et le journal, qui ne
   chargent pas cette feuille-ci.

   Les classes numérotées (`nav-12`, `plan-5`, `pied-2`) viennent des styles
   inline de la version 2, convertis par outils/v2/convertis.mjs ; le suffixe
   -hv porte le survol, -bf le ::before. Les classes nommées `ag-*` sont les
   points d'accroche du JavaScript et les états.

   Sommaire
     1. Fondations
     2. Pied de page et bouton WhatsApp
   Chaque partie finit par ses paliers responsive : 1180, 1100, 900, 560 px. */


/* ========================================================================= *
   1. FONDATIONS
 * ========================================================================= */

body {
   margin: 0;
   background: #fff;
   color: #000A1C;
   font-family: Archivo, system-ui, sans-serif;
   -webkit-font-smoothing: antialiased
}

a {
   color: #000A1C;
   text-decoration: none
}

a:hover {
   color: #946200
}

img {
   max-width: 100%
}

/* `--head-h` — la hauteur de la barre — est déclarée dans entete.css, avec la
   barre, et change avec elle au palier de 900 px. Surtout ne pas la
   redéclarer ici : cette feuille est chargée APRÈS, et une valeur fixe
   écraserait le palier sans qu'on voie pourquoi. */

/* Les ancres de section visent sous la barre. Sans cela, le titre visé passe
   dessous et on croit la page mal placée. */
section[id],
article[id] {
   scroll-margin-top: calc(var(--head-h) + 8px)
}

/* La page du catalogue est dessinée à 1280 px au moins dans la version 2 ;
   la 4.0 la replie. `min-width` n'est donc PAS reporté : c'est lui qui
   forçait un défilement horizontal sur téléphone. */
.ag-page {
   background: #fff;
   color: #000A1C
}

/* Emplacement d'une image pas encore fournie : le cadre teinté, l'anneau
   pointillé et l'intitulé attendu. Déposer une <img> à l'intérieur suffit à
   le remplacer. Même composant que sur l'accueil. */
:root {
   --slot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E")
}

x-image-slot {
   position: relative;
   display: block;
   aspect-ratio: 3/2;
   font: 13px/1.3 system-ui, -apple-system, sans-serif
}

x-image-slot::before,
x-image-slot::after {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none
}

x-image-slot::before {
   background: rgba(127, 127, 127, .08)
}

x-image-slot::after {
   border: 1.5px dashed currentColor;
   opacity: .35
}

x-image-slot>span {
   position: absolute;
   inset: 0;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 6px;
   padding: 12px;
   box-sizing: border-box;
   text-align: center;
   font-weight: 500;
   letter-spacing: .01em;
   opacity: .75
}

x-image-slot>span::before {
   content: "";
   width: 28px;
   height: 28px;
   opacity: .6;
   background: currentColor;
   -webkit-mask: var(--slot-icon) center / contain no-repeat;
   mask: var(--slot-icon) center / contain no-repeat
}

/* Une vraie image remplace les trois calques du cadre. */
x-image-slot>img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

x-image-slot:has(img)>span,
x-image-slot:has(img)::before,
x-image-slot:has(img)::after {
   display: none
}

/* Animations communes aux pages de catalogue. Elles portent toutes le
   préfixe `ag` : une page peut en ajouter, jamais en redéfinir. */
@keyframes agRise {
   from {
      opacity: 0;
      transform: translateY(30px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes agFade {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes agDrift {
   from {
      background-position: 0 0
   }

   to {
      background-position: 56px 56px
   }
}

@keyframes agPulse {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: .2
   }
}

@keyframes agSweep {
   from {
      transform: scaleX(0)
   }

   to {
      transform: scaleX(1)
   }
}

@keyframes agOpen {
   from {
      opacity: 0;
      transform: translateY(-10px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

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


/* ========================================================================= *
   2. PIED DE PAGE
 * ========================================================================= */

.pied-1 {
   background: #000A1C;
   color: #8DA9C4;
   border-top: 1px solid rgba(141, 169, 196, .22)
}

.pied-2 {
   max-width: 1440px;
   margin: 0 auto;
   padding: 24px 64px 40px;
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 24px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px
}

.pied-3 {
   color: #FFBA13;
   letter-spacing: .06em
}

.pied-4 {
   color: #8DA9C4;
   letter-spacing: .06em;
   transition: color .2s
}

.pied-3:hover,
.pied-4:hover {
   color: #FFBA13
}

/* Poussé à droite, et ramené à la ligne avant de comprimer les liens. */
.pied-5 {
   margin-left: auto
}


/* -- Le bouton WhatsApp --------------------------------------------------- */

.wa-1 {
   position: fixed;
   right: 26px;
   bottom: 26px;
   z-index: 49;
   width: 62px;
   height: 62px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #25D366;
   box-shadow: 0 12px 30px rgba(18, 140, 126, .42), 0 2px 6px rgba(0, 10, 28, .2);
   transition: transform .3s cubic-bezier(.2, .7, .2, 1)
}

.wa-2-hv:hover {
   transform: scale(1.07) !important
}

.wa-3-bf::before {
   content: '' !important;
   position: absolute !important;
   inset: 0 !important;
   border-radius: 50% !important;
   border: 2px solid #25D366 !important;
   animation: agWaRing 2.4s cubic-bezier(.2, .7, .2, 1) infinite !important;
   pointer-events: none !important
}

.wa-4 {
   flex: none;
   display: block
}

@keyframes agWaRing {
   0% {
      transform: scale(1);
      opacity: .55
   }

   70%,
   100% {
      transform: scale(1.55);
      opacity: 0
   }
}


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

@media (max-width:1180px) {
   .pied-2 {
      padding-left: 40px;
      padding-right: 40px
   }
}

@media (max-width:900px) {
   .pied-2 {
      padding: 20px 20px 32px;
      gap: 14px
   }

   /* À cette largeur la ligne de mentions est déjà seule : la pousser à
     droite ne ferait qu'un espace vide au-dessus. */
   .pied-5 {
      margin-left: 0
   }

   .wa-1 {
      right: 16px;
      bottom: 16px;
      width: 54px;
      height: 54px
   }
}