/* AG-360 — feuille de base (mu-plugin). ATTENTION: elle charge AVANT le selectors.css d'Oxygen. Toute propriete qu'Oxygen definit deja sur la MEME classe exige !important. */ /* ---- resets de la maquette (Oxygen interdit les selecteurs de balise nue, donc ils ne peuvent pas vivre dans le systeme de design) ---- */ *{box-sizing:border-box} body{margin:0;background:var(--bg-alt);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased} a{color:var(--accent);text-decoration:none} h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.06;text-wrap:pretty} p{margin:0;text-wrap:pretty} button{font-family:inherit} input,select,textarea{font-family:inherit;font-size:16px} img{max-width:100%} @keyframes agFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes agDash{to{stroke-dashoffset:-320}} /* ---- responsive: points d'arret de la maquette (1060/860), qui ne sont PAS ceux d'Oxygen et seraient ignores en silence dans son magasin ---- */ .ag-navdesk{display:none} .ag-ctadesk{display:none} @media (min-width:1060px){ .ag-navdesk{display:flex !important} .ag-ctadesk{display:inline-flex !important} .ag-burger{display:none !important} } @media (max-width:860px){ .ag-twocol{grid-template-columns:minmax(0,1fr) !important} } /* ---- accordeon des services ---- */ .ag-svcpanel{display:none !important} .ag-089.is-open .ag-svcpanel{display:flex !important;flex-direction:column;gap:14px;max-width:72ch;animation:agFade 220ms var(--ease) both} /* ---- panneau de menu mobile (construit en JS depuis la nav de bureau) ---- */ .ag-mpanel{display:none;border-top:1px solid var(--line);background:#fff;padding:10px 24px 20px} .ag-mpanel.is-open{display:block} .ag-mpanel a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-size:17px;font-weight:600;color:var(--ink)} .ag-mpanel a.ag-mcta{margin-top:16px;text-align:center;background:var(--accent);color:#fff;padding:15px;border-radius:var(--btn-border-radius);font-size:15px;border-bottom:0} @media (min-width:1060px){ .ag-mpanel{display:none !important} } /* ---- carte des bureaux: etat actif d'une fiche ---- */ .ag-officecard.is-active{background:var(--accent) !important;color:#fff !important;border-color:var(--accent) !important} .ag-officecard{cursor:pointer} /* ---- largeur de contenu selon l'ecran (demande client 2026-09-14) ---- 1360 par defaut: un ecran 1360x768 est alors plein (il reste la gouttiere interne de 24px). Au-dela, on elargit pour ne pas laisser des centaines de pixels vides de chaque cote. !important car cette feuille charge AVANT le variables.css d'Oxygen, qui redefinit --maxw. */ @media (min-width:1600px){ :root{ --maxw:1520px !important } } @media (min-width:1800px){ :root{ --maxw:1680px !important } } @media (min-width:2100px){ :root{ --maxw:1900px !important } } /* ---- gouttieres laterales plus serrees sur grand ecran ---- */ @media (min-width:1600px){ .ag-012,.ag-027,.ag-075{ padding-left:32px !important; padding-right:32px !important } } /* ---- formulaire: empecher le debordement horizontal ---- Le champ « fichier » de CF7 a une largeur intrinseque fixe et ne se reduit pas; et un minmax(280px,...) deborde des que la fenetre passe sous 280+gouttieres. Mesure: /soumission/ debordait a 360, 390, 768 et 1024. */ .wpcf7-form-control{ max-width:100% } .wpcf7-form-control-wrap{ display:block; min-width:0 } input[type="file"].wpcf7-form-control{ width:100%; box-sizing:border-box } .ag-155{ grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)) !important } .ag-155 > *{ min-width:0 } /* ---- etiquettes de section retirees (demande client 2026-09-14) ---- « Services », « Nos valeurs », « Territoire »... et leur pastille. La grille a deux colonnes reservait 180px a cette etiquette: on la repasse en une colonne pour que le contenu occupe toute la largeur. */ .ag-028,.ag-056,.ag-029,.ag-030,.ag-057,.ag-058{ display:none !important } .ag-027.ag-twocol{ grid-template-columns:minmax(0,1fr) !important } /* ---- carte des succursales a la place du creux « photo » de l'accueil ---- */ /* .ag-039 est position:relative + overflow:hidden et porte une hauteur en clamp(): un height:100% sur l'iframe ne se resolvait pas et laissait un vide gris. */ /* Le conteneur de la maquette est bien plus large (~3.2:1) que la carte (1200x620): en « cover » il coupait Matane et le bloc de Montreal. On cale donc le conteneur sur le rapport de la carte, rien n'est rogne. */ .ag-mapembed{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; object-fit:cover } .ag-039{ height:auto !important; aspect-ratio:16/9; background:var(--surface) } /* ---- visuel de la section « a propos » (image generee) ---- */ .ag-visuel{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; object-fit:cover; object-position:center } /* ---- bloc des partenaires: le cadre blanc autour du panneau devient le meme bleu clair que l'interieur de la section (demande client). `:has()` cible uniquement CE conteneur: la classe .ag-065 sert de section blanche sur toutes les autres pages. ---- */ .ag-065:has(> .ag-132){ background:#dde4ea !important } /* ---- pied: logo en version blanche, donc plus de pastille blanche ---- */ .ag-077{ background:transparent !important; padding:0 !important; border-radius:0 !important } /* ---- bloc « Vous avez un projet » : titre a GAUCHE, phrase + bouton a DROITE, sur la meme rangee. Grille plutot que flex: les deux elements de droite n'ont pas de conteneur commun dans le balisage, la grille les place sans toucher au code. Le

reste premier dans le code (SEO). ---- */ .ag-071{ display:grid !important; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); column-gap:56px; row-gap:16px; align-items:center } .ag-071 > .ag-072{ grid-column:1; grid-row:1 / span 2; align-self:center } .ag-071 > .ag-073{ grid-column:2; grid-row:1; align-self:end } .ag-071 > .ag-074{ grid-column:2; grid-row:2; justify-self:start; align-self:start } @media (max-width:860px){ .ag-071{ grid-template-columns:minmax(0,1fr) } .ag-071 > .ag-072{ grid-column:1; grid-row:auto } .ag-071 > .ag-073, .ag-071 > .ag-074{ grid-column:1; grid-row:auto } } /* ---- fiches de bureaux: aligner titres / adresses / boutons d'une carte a l'autre. `subgrid` fait partager a chaque carte les rangees de la grille parente, donc chaque element se pose a la meme hauteur sur toute la rangee. La cale .ag-vide tient la place du badge « Maison mere ». ---- */ .ag-119 > *{ display:grid !important; grid-template-rows:subgrid; grid-row:span 4; align-content:start; gap:16px } .ag-vide{ display:block; min-height:0 } /* ---- heros: le paragraphe respire davantage (demande client) ---- */ .ag-019{ max-width:74ch !important } /* ---- heros anime: le limbe gradue tourne lentement, l'anneau interieur en sens inverse. Les @keyframes ne peuvent pas vivre dans le magasin de selecteurs d'Oxygen: ils sont donc ici, et survivent aux rebuilds. transform-box:view-box pour que l'origine soit en unites du viewBox. ---- */ @keyframes agSpin { to { transform: rotate(360deg) } } @keyframes agSpinInv { to { transform: rotate(-360deg) } } .ag-limbe, .ag-limbe2{ transform-box: view-box; transform-origin: 812px 322px } .ag-limbe { animation: agSpin 150s linear infinite } .ag-limbe2{ animation: agSpinInv 90s linear infinite } /* Respecter le reglage systeme « animations reduites ». */ @media (prefers-reduced-motion: reduce){ .ag-limbe, .ag-limbe2{ animation: none } } /* ================= CARRIERES : postes, modales, candidature ================= */ .ag-postes{ display:flex; flex-direction:column; gap:14px } .ag-poste .ag-151{ flex:1 1 380px } .ag-postemeta{ font:600 11.5px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--accent) } .ag-posteactions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center } /* Les boutons sont des