:root{--navy:#102F54;--navy-deep:#0B223D;--blue:#4A77B7;--red:#E11F26;--red-hover:#BE151C;--ink:#14212F;--muted:#536276;--line:#DBE3EC;--line-strong:#8492A4;--paper:#FFFFFF;--ice:#F3F7FB;--surface-alt:#E9F0F7;--sky-100:#BAD8EE;--sky-200:#9BC7E7;--sky-300:#89B4D5;--on-dark-body:#D5E3F0;--on-dark-muted:#C0CFDD;--font-heading:Inter,Arial,Helvetica,sans-serif;--font-body:Inter,Arial,Helvetica,sans-serif;--font-mono:'JetBrains Mono',Consolas,monospace}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--font-body)}a{color:inherit}img{max-width:100%;display:block}button{font:inherit}
    .skip{position:absolute;left:-9999px;top:10px;background:#fff;color:#111;padding:.6rem 1rem;z-index:20}.skip:focus{left:10px}
    .wrap{width:min(100% - 3rem,1180px);margin-inline:auto}section[id]{scroll-margin-top:88px}
    header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
    .nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:2rem}.brand{display:inline-flex;align-items:baseline;gap:.28rem;text-decoration:none;white-space:nowrap;font-size:1.35rem;font-style:italic;font-weight:850;letter-spacing:-.06em;line-height:1}.brand span:last-child{color:var(--red);font-weight:750;letter-spacing:-.055em;font-size:1.05rem}
    nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.25rem)}nav a{text-decoration:none;font-size:.87rem;font-weight:650;white-space:nowrap;color:#314357}nav a:hover,nav a:focus-visible{color:var(--red)}.nav-cta{background:var(--red);color:#fff!important;padding:.7rem 1.15rem;border-radius:3px}.nav-cta:hover{background:var(--red-hover)}.menu-toggle{display:none}
    .hero{background:var(--navy-deep);color:#fff;overflow:hidden}.hero-grid{display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);min-height:590px}.hero-copy{align-self:center;padding:5.5rem 3rem 5.5rem max(1.5rem,calc((100vw - 1180px)/2));position:relative;z-index:1}.eyebrow{display:flex;align-items:center;gap:.8rem;text-transform:uppercase;letter-spacing:.16em;font-weight:750;font-size:.77rem;color:#98c4ea}.eyebrow:before{content:"";display:block;width:27px;height:2px;background:var(--red)}
    h1,h2,h3,p{margin-top:0}h1{font-size:clamp(3.5rem,6vw,6.2rem);line-height:.98;letter-spacing:-.065em;margin:1.65rem 0 1.7rem;font-weight:760}h1 span{display:block}h1 span:nth-child(2){color:#bad8ee}h1 span:last-child{color:#fff}.hero-copy p{font-size:1.08rem;color:#d5e3f0;max-width:29rem;line-height:1.7;margin-bottom:2rem}.actions{display:flex;gap:.8rem;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;padding:.91rem 1.3rem;border-radius:3px;text-decoration:none;font-weight:750;font-size:.9rem;min-height:48px}.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-hover)}.btn-outline{border:1px solid rgba(255,255,255,.48);color:#fff}.btn-outline:hover{background:#ffffff1b}.arrow{font-size:1.25em;line-height:0}
    .hero-visual{position:relative;min-height:520px}.hero-visual:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--navy-deep) 0%,rgba(11,34,61,.23) 30%,transparent 68%)}.hero-visual img{width:100%;height:100%;object-fit:cover;object-position:50% center;position:absolute;inset:0}.hero-visual:after{content:"";position:absolute;z-index:1;right:0;bottom:0;width:55.5%;height:5px;background:var(--red)}
    /* Le liseré rouge du héros d'accueil etait ancre a gauche de la colonne
       image (46 % de la page) : il apparaissait au centre. Les autres pages
       l'ancrent a droite (.page-hero:after) et lui donnent 30 % de la largeur
       de la page. Aligne a droite le 17/10/2026. La colonne image fait 54 % de
       la page, donc 55,5 % de cette colonne = 30 % de la page : mesure apres
       correction, 383 px a 1276 px sur l'accueil comme sur les pages interieures. */
    .intro{padding:4.4rem 0;border-bottom:1px solid var(--line)}.intro-grid{display:grid;grid-template-columns:1fr 1.8fr;gap:4rem;align-items:start}/* les libelles etaient des <div> dans le prototype ; en blocs ce sont des <p>, et les regles de paragraphe contextuelles l'emportaient sur eux. On ajoute les contextes concernes. */
.section-label,.page-hero .section-label,.intro .section-label,.contact-page .section-label,.contact-map .section-label,.section-head .section-label,.about .section-label{font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red);line-height:inherit;margin:0}.intro h2,.section-head h2,.about h2,.contact h2{font-size:clamp(2.1rem,3.5vw,3.55rem);line-height:1.12;letter-spacing:-.045em;margin:.8rem 0 0}.intro p{font-size:1.12rem;line-height:1.75;color:#3d5063;margin:.3rem 0 0;max-width:44rem}
    .activities{padding:6rem 0;background:var(--ice)}.section-head{max-width:700px;margin-bottom:2.7rem}.section-head p{color:var(--muted);margin:1rem 0 0}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.card{background:#fff;border:1px solid var(--line);padding:2.25rem;min-height:365px;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-4px);box-shadow:0 18px 38px #102F5418}.card-number,.card .card-number{font-size:.8rem;font-weight:850;letter-spacing:.12em;color:var(--red);border-bottom:1px solid var(--line);padding-bottom:1.2rem;line-height:inherit;margin:0}.card h3{font-size:1.45rem;line-height:1.2;letter-spacing:-.025em;margin:2.5rem 0 1rem}.card p{color:var(--muted);line-height:1.68;margin:0}.card-link{margin-top:auto;padding-top:1.4rem;text-decoration:none;color:var(--navy);font-weight:750;font-size:.88rem}.card-link:hover{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
    .why{padding:6rem 0;background:var(--navy);color:#fff}.why-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,7vw,8rem)}.why h2{font-size:clamp(2.3rem,3.8vw,3.8rem);line-height:1.09;letter-spacing:-.05em;margin:.8rem 0 1.4rem}.why .lead{color:#d5e3f0;font-size:1.05rem;max-width:27rem}.benefits{border-top:1px solid #6683a080}.benefit{display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;padding:1.45rem 0;border-bottom:1px solid #6683a080}.benefit b{color:#89b4d5;font-size:.86rem;letter-spacing:.08em}.benefit h3{font-size:1.12rem;margin:0 0 .3rem}.benefit p{color:#c5d6e5;margin:0;font-size:.94rem}
    .about{padding:6rem 0}.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,8vw,8rem);align-items:center}.about h2{margin-bottom:1.6rem}.about p{color:#3d5063;font-size:1.05rem;line-height:1.78}.quote{background:var(--ice);border-left:5px solid var(--red);padding:2.4rem 2.6rem}.quote blockquote{font-size:clamp(1.35rem,2vw,1.85rem);font-weight:650;line-height:1.45;letter-spacing:-.028em;margin:0 0 1.4rem}.quote cite{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-style:normal;font-weight:800}
    .contact{background:#e9f0f7;padding:5rem 0}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}.contact h2{margin-bottom:1.2rem}.contact p{color:#4b5e70;max-width:28rem}.contact-list{background:#fff;border:1px solid var(--line);padding:2rem 2.4rem;display:grid;gap:1.5rem}.contact-row small,.contact-row .contact-row-label{display:block;color:var(--red);letter-spacing:.13em;text-transform:uppercase;font-weight:800;font-size:.72rem;line-height:inherit;margin-bottom:.35rem}.contact-row a{text-decoration:none;font-size:1.2rem;font-weight:700;word-break:break-word}.contact-row a:hover{text-decoration:underline}.contact-row address{font-style:normal;font-size:1rem;line-height:1.55}.contact-row+.contact-row{border-top:1px solid var(--line);padding-top:1.3rem}
    footer{background:var(--navy-deep);color:#c0cfdd;padding:2rem 0}.footer-inner{display:flex;justify-content:space-between;gap:1.5rem;align-items:center;font-size:.82rem}.footer-inner .brand{color:#fff}.footer-inner a:hover{color:#fff}
    :focus-visible{outline:3px solid var(--red);outline-offset:3px}@media(max-width:900px){.nav{flex-wrap:wrap;min-height:70px}.menu-toggle{display:inline-flex;border:1px solid var(--line);background:#fff;padding:.55rem .8rem;border-radius:3px;font-weight:700;color:var(--navy)}nav{display:none;width:100%;padding:0 0 1rem;align-items:stretch;flex-direction:column;gap:0}nav.open{display:flex}nav a{padding:.75rem 0;border-top:1px solid var(--line)}.nav-cta{margin-top:.5rem;text-align:center}.hero-grid{grid-template-columns:1fr;min-height:0}.hero-copy{padding:4.3rem max(1.5rem,calc((100vw - 1180px)/2)) 3rem}.hero-visual{min-height:330px}.hero-visual:before{background:linear-gradient(180deg,var(--navy-deep),transparent 28%)}.intro-grid,.why-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:2rem}.cards{grid-template-columns:repeat(2,1fr)}.card:last-child{grid-column:1/-1;min-height:260px}}
    @media(max-width:600px){.wrap{width:min(100% - 2.25rem,1180px)}.hero-copy{padding:3.5rem 1.125rem 2.5rem}h1{font-size:clamp(3.2rem,14vw,4.5rem)}.hero-visual{min-height:260px}.intro,.activities,.why,.about{padding:4.2rem 0}.cards{grid-template-columns:1fr}.card,.card:last-child{grid-column:auto;min-height:0;padding:1.7rem}.card h3{margin:1.9rem 0 1rem}.contact{padding:4rem 0}.contact-list{padding:1.6rem}.quote{padding:1.8rem}.footer-inner{align-items:flex-start;flex-direction:column}.actions{display:grid;grid-template-columns:1fr 1fr}.btn{padding:.8rem .6rem;text-align:center}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}}
    .nav a[aria-current="page"]{color:var(--red)}
    .page-hero{background:var(--navy-deep);color:#fff;padding:5.5rem 0 5.8rem;position:relative;overflow:hidden}
    .page-hero:after{content:"";position:absolute;right:0;bottom:0;width:30%;height:5px;background:var(--red)}
    .page-hero .section-label{color:#9bc7e7}
    .page-hero h1{font-size:clamp(3rem,5.5vw,5.4rem);max-width:900px;margin:1.2rem 0 1.2rem;line-height:1.05}
    .page-hero p{font-size:1.12rem;color:#d4e3f0;max-width:720px;margin:0}
    .detail{padding:5.5rem 0}.detail:nth-of-type(odd){background:var(--ice)}/* Fonds de section EXPLICITES (brouillon valide du 15/10/2026). L'alternance par position ci-dessus depend du nombre de sections : enlever une section decale la bande glace d'un cran. Ces deux classes rendent le fond intentionnel, et sont declarees APRES la regle par position : a specificite egale, la derniere l'emporte. */ .detail.glacier{background:var(--ice)}.detail.paper{background:#fff}.detail .cards{margin-top:3.4rem}
    .intro .detail-grid h2{margin-top:0}
    .detail-grid{display:grid;grid-template-columns:.6fr 1.4fr;gap:clamp(2rem,7vw,8rem)}
    .detail-number,.detail .detail-number{color:var(--red);font-size:.78rem;font-weight:850;letter-spacing:.14em;line-height:inherit;margin:0}
    .detail h2{font-size:clamp(2rem,3.6vw,3.5rem);letter-spacing:-.045em;line-height:1.13;margin:0 0 1.35rem}
    .detail p{font-size:1.06rem;line-height:1.78;color:#43556a;max-width:690px}
    .detail .btn{margin-top:.5rem}.detail .btn-red{color:#fff}
    /* Grille a deux cartes : /services/ depuis le 16/10/2026 (bloc STRATEGIC
       PROCUREMENT retire) et /home/ depuis le meme jour (bloc SPECIALITY
       retire). Dans une grille de trois colonnes, la ou les dernieres cartes
       restaient seules avec des colonnes vides a droite : deux colonnes
       donnent des rangees pleines. La hauteur de carte descend a 300 px, parce
       que ces cartes portent moins de texte que les cinq d'origine. La regle
       mobile de .cards fait s'etirer la derniere carte sur toute la largeur,
       ce qui n'a de sens qu'avec un nombre impair de cartes : on la neutralise
       ici. */
    .cards-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
    .cards-pair .card{min-height:300px}
    @media(max-width:900px){.cards-pair .card:last-child{grid-column:auto;min-height:300px}}
    /* La regle mobile de .cards (une colonne sous 600 px) est declaree plus haut
       dans le fichier : .cards-pair, declaree apres, l'ecrasait a specificite
       egale. Mesure du 16/10/2026 : a 420 px les cartes restaient sur deux
       colonnes de 170 px, titres coupes en quatre lignes. */
    @media(max-width:600px){.cards-pair{grid-template-columns:1fr}}
    /* Listes dans une section detail (introduites le 16/10/2026 avec « We
       correlate: »). Meme corps de texte que .detail p, puce ronde de la
       charte : aucune section n'en contenait avant, il n'existait donc pas de
       style et la puce du navigateur sortait en gris, hors charte. */
    .detail ul{list-style:none;margin:1.5rem 0;padding:0;max-width:690px}
    .detail ul li{position:relative;padding-left:1.5rem;margin:0 0 .5rem;font-size:1.06rem;line-height:1.78;color:#43556a}
    .detail ul li:last-child{margin-bottom:0}
    .detail ul li::before{content:"";position:absolute;left:.1rem;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--red)}
    /* Listes des pages de texte long (mentions legales, politique de
       confidentialite, conditions generales ajoutees le 16/10/2026) : meme
       traitement que dans les sections detail, meme puce rouge. Sans cela, la
       puce du navigateur sort en gris et les conditions generales, qui en
       comptent vingt-huit, jurent avec le reste du site. */
    /* Un document contractuel se lit par article : les titres ont besoin d'air
       au-dessus d'eux et d'une taille qui les detache du texte. Mesure du
       16/10/2026 sur /gtc-sales/ : sans cela, « 2. Applicability » collait au
       paragraphe precedent et ne se distinguait pas du corps de texte. */
    .editor-content h2{margin:2.8rem 0 1rem;font-size:1.5rem;letter-spacing:-.02em}
    .editor-content h2:first-child{margin-top:0}
    .editor-content ul{margin:1.5rem 0;padding:0;list-style:none}
    .editor-content li{position:relative;padding-left:1.5rem;margin:0 0 .5rem;color:var(--muted)}
    .editor-content li:last-child{margin-bottom:0}
    .editor-content li::before{content:"";position:absolute;left:.1rem;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--red)}
    .cta-band{background:var(--navy);color:#fff;padding:3rem 0}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
    .cta-inner h2{font-size:clamp(1.6rem,2.6vw,2.5rem);line-height:1.18;letter-spacing:-.04em;margin:0}
    .cta-inner p{color:#c9d9e7;margin:.4rem 0 0}
    .home-links{background:var(--ice);padding:4.3rem 0}
    .home-links .cards{grid-template-columns:repeat(3,1fr)}
    .home-links .card{min-height:220px}.home-links .card h3{margin:1.6rem 0 .65rem}
    .home-links .card-link{color:var(--navy)}
    .contact-page{padding:5.5rem 0;min-height:430px}
    .contact-page .contact-grid{align-items:center}
    .contact-page h2{font-size:clamp(2rem,3.6vw,3.5rem);letter-spacing:-.045em;line-height:1.13}
    .contact-page p{font-size:1.06rem;line-height:1.75}
    @media(max-width:900px){.detail-grid{grid-template-columns:1fr;gap:1rem}.home-links .cards{grid-template-columns:1fr 1fr}.cta-inner{align-items:flex-start;flex-direction:column}}
    @media(max-width:600px){.page-hero{padding:4rem 0}.detail,.contact-page{padding:4.2rem 0}.home-links{padding:4rem 0}.home-links .cards{grid-template-columns:1fr}.home-links .card{min-height:0}}


/* WordPress and NGMP brand integration. */
html{scroll-padding-top:130px}body{font-family:var(--font-body)}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700}h1{font-weight:700;letter-spacing:-.055em}.site-header{background:#fff}.site-header .brand{display:block;flex:none;width:180px;height:116px;overflow:hidden;line-height:normal;font-style:normal}.site-header .brand-crop{display:block;width:180px;height:116px;overflow:hidden}.brand-crop img{display:block;width:195px;max-width:none;height:195px;margin:-34px 0 0 -7px}.brand-custom-logo{display:block;max-width:180px;max-height:116px;width:auto;height:auto;object-fit:contain}.nav-links{list-style:none;display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.25rem);margin:0;padding:0}.nav-links li{margin:0;padding:0}.nav-links li:last-child a{background:var(--red);color:#fff!important;padding:.7rem 1.15rem;border-radius:3px}.nav-links li:last-child a:hover{background:var(--red-hover)}.nav-links .current-menu-item>a,.nav-links a[aria-current="page"]{color:var(--red)}.nav-links li:last-child a[aria-current="page"]{box-shadow:0 0 0 2px var(--navy)}.btn-red{background:var(--red);box-shadow:0 4px 14px rgba(225,31,38,.25)}.btn-red:hover{background:var(--red-hover)}.card-number,.detail-number,.part-condition-badge{font-family:var(--font-mono)}.part-condition-badge{font-size:.75rem;font-weight:600;background:rgba(16,47,84,.08);color:var(--navy);border:1px solid rgba(16,47,84,.25);padding:4px 8px;border-radius:3px}.footer-name{font-family:var(--font-heading);font-weight:700;font-size:1rem;text-decoration:none;color:#fff}.footer-name span{color:#fff}.editor-content{padding-block:4rem;min-height:40vh}.editor-content>*{max-width:760px}.editor-content>.alignwide{max-width:1180px}.editor-content>.alignfull{max-width:none}.editor-content a{color:var(--navy)}.editor-content h1,.editor-content h2,.editor-content h3{line-height:1.15}.editor-content p{color:var(--muted)}.editor-content img{height:auto}.editor-content .wp-block-button__link{background:var(--red);color:#fff;border-radius:3px}.editor-content .wp-block-button__link:hover{background:var(--red-hover)}.editor-content article+article{border-top:1px solid var(--line);margin-top:2rem;padding-top:2rem}.editor-content article h1{font-size:2rem}.site-footer{background:var(--navy-deep)}.contact-page .btn{margin-top:.6rem}a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:3px}
@media(max-width:900px){.site-header .brand,.site-header .brand-crop{width:155px;height:104px}.brand-crop img{width:174px;height:174px;margin:-30px 0 0 -8px}.brand-custom-logo{max-width:155px;max-height:104px}.nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%}.nav-links li:last-child a{display:block;margin-top:.5rem;text-align:center}.nav-links a{display:block}}
@media(max-width:600px){.actions{grid-template-columns:1fr 1fr}.site-header .brand,.site-header .brand-crop{width:145px;height:96px}.brand-crop img{width:160px;height:160px;margin:-27px 0 0 -7px}}


/* ===== T-1.4 — reliquats de la charte v2.0, corriges le 10/10/2026 ==========
   Trois valeurs du bloc ci-dessus venaient de la charte v2.0, ecartee :
     .nav-links li:last-child a            rayon 6 px -> 3 px. C'est le bouton
                                           « Contact us » de l'en-tete, present
                                           sur toutes les pages.
     .editor-content .wp-block-button__link rayon 6 px -> 3 px.
     .part-condition-badge                 portait rgba(23,58,103,…), soit
                                           #173A67 en notation rgba — donc
                                           invisible a une recherche sur
                                           l'hexadecimal. Desormais le navy de
                                           la charte, rgba(16,47,84,…), et un
                                           rayon de 3 px.
   A noter : .part-condition-badge et .nav-cta ne sont references par aucun
   gabarit ni par aucun contenu : ce sont des orphelins, laisses en place.
   ========================================================================== */

/* ===== CHARTE NGMP AEROSPACE v1.0 - lockup horizontal : boite de logo elargie ===== */
.site-header .brand{width:auto!important;height:auto!important;overflow:visible!important}
.site-header .brand-crop{width:auto!important;height:auto!important;overflow:visible!important}
.brand-crop img{width:auto!important;height:auto!important;margin:0!important;max-height:46px}
.brand-custom-logo{max-width:272px!important;max-height:48px!important;width:auto!important;height:auto!important;object-fit:contain}
@media(max-width:900px){.brand-custom-logo{max-width:205px!important;max-height:38px!important}.site-header .nav{min-height:74px}}
@media(max-width:600px){.brand-custom-logo{max-width:170px!important;max-height:32px!important}.site-header .nav{min-height:64px}}
/* ==========================================================================
   CONTENU DES PAGES EN BLOCS  (ajout du 10/10/2026)
   Le texte des pages vit desormais dans leur contenu WordPress, compose en
   blocs, et non plus dans les gabarits PHP (plan, T-2.3 et T-3.2).
   Deux ajustements sont necessaires pour que le rendu soit identique :
     1. section-label, detail-number et card-number sont des <div> dans le
        design d'origine. En blocs, ce sont des paragraphes : ils heritent donc
        des marges par defaut du navigateur, que le <div> n'avait pas.
     2. un bouton de bloc place ses classes sur l'enveloppe et non sur le lien.
        On neutralise l'enveloppe pour que l'habillage reste porte une seule
        fois, par .btn sur le lien.
   L'ecart automatique de 24 px entre blocs est retire cote PHP
   (functions.php -> ngmp_strip_layout_classes), pas ici.
   ========================================================================== */
.wp-block-buttons, .wp-block-button { margin: 0; }

/* Surtitre du heros (accueil) : dans le design c'est un <div>, en blocs un
   <p>. Les regles de paragraphe du heros (.hero-copy p) l'emportaient sur
   .eyebrow : taille, couleur, largeur et marge etaient ceux d'un paragraphe
   courant. On retablit celles du surtitre. */
.hero-copy .eyebrow { font-size:.77rem;color:#98c4ea;max-width:none;line-height:inherit;margin:0 }

/* ===== Contact : canaux LinkedIn et WhatsApp (ajout du 11/10/2026) ==========
   Deux regles, et deux raisons de les ecrire ici plutot que dans le contenu :
     1. les logos sont des SVG EN LIGNE portes par le contenu de la page : aucun
        fichier supplementaire, aucune requete reseau, et ils prennent la couleur
        du texte (fill="currentColor"). Les couleurs de marque sont donc posees
        ici, une fois, et pas recopiees dans le HTML ;
     2. ce sont des LIENS, pas des widgets : rien n'est charge depuis LinkedIn ni
        depuis Meta tant que le visiteur ne clique pas. C'est ce qui permet de
        les afficher sans bandeau de consentement — a la difference d'une iframe
        ou d'un bouton « partager » qui, eux, appellent le tiers au chargement.
   Le libelle de la ligne est un <p> place dans un bloc « HTML » et non dans un
   bloc paragraphe : le validateur de blocs de WordPress n'aime pas un <svg> dans
   un paragraphe, et un contenu invalide ferait afficher une erreur d'edition.
   ========================================================================== */
.contact-row-social { display:flex; flex-wrap:wrap; gap:2.6rem; align-items:center }
.contact-row .social-link { display:inline-flex; align-items:center; gap:.5rem; color:var(--red); letter-spacing:.13em; text-transform:uppercase; font-weight:800; font-size:.72rem; line-height:1; text-decoration:none }
.contact-row .social-link:hover { text-decoration:underline }
.contact-row .social-link svg { width:16px; height:16px; flex:0 0 auto }
.contact-row .social-link .ic-linkedin { color:#0A66C2 }
.contact-row .social-link .ic-whatsapp { color:#25D366 }

/* ===========================================================================
   Section « carte de Toulouse » de la page contact (T-3.3, lot 3)

   Image statique servie par notre domaine + lien vers Maps. Une iframe Google
   Maps deposerait des cookies tiers avant le consentement, ce que la politique
   de confidentialite du site interdit. Genere par _diag/carte-toulouse.py
   (dalles OpenStreetMap, attribution en legende).
   =========================================================================== */
.contact-map{padding:5.5rem 0;background:var(--ice)}
.contact-map h2{font-size:clamp(1.7rem,2.8vw,2.4rem);letter-spacing:-.04em;line-height:1.15;margin:.9rem 0 1.3rem}
.contact-map address{font-style:normal;font-size:1.06rem;line-height:1.6;color:var(--ink)}
.map-figure{margin:0}
.map-figure img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.map-figure figcaption{font-size:.78rem;color:var(--muted);margin-top:.7rem;text-align:right}
.map-figure figcaption a{color:var(--muted)}
.map-actions{margin:1.7rem 0 0}
    /* Carte deplacee sous la carte de contact (16/10/2026) : le bloc « Our office »
       faisait doublon avec la ligne Location. L'image d'origine est panoramique
       (1180 x 420) : dans la colonne de droite elle est recadree en portrait, et le
       bouton partage sa ligne avec l'attribution OpenStreetMap. */
    .request-aside .map-figure{margin-top:1.6rem;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.7rem 1rem}
    .request-aside .map-canvas{grid-column:1/-1}
    /* Carte interactive : Leaflet dessine dans ce conteneur. Les tuiles sont
       servies par le theme, deja desaturees a la source (voir _diag/carte-tuiles.py). */
    .map-canvas{height:330px;border:1px solid var(--line);background:var(--ice)}
    .map-canvas img{display:block;width:100%;height:100%;object-fit:cover;border:0}
    .map-canvas:focus-visible{outline:3px solid var(--red);outline-offset:3px}
    .ngmp-pin{background:none;border:0}
    .leaflet-container{font:inherit;background:var(--ice)}
    /* Boutons de zoom accordes a la charte (Leaflet livre du noir et gris). */
    .leaflet-bar a,.leaflet-bar a:hover{background:#fff;color:var(--navy);border-bottom:1px solid var(--line);width:32px;height:32px;line-height:32px}
    .leaflet-bar a:last-child{border-bottom:0}
    .leaflet-bar a:hover{background:var(--ice);color:var(--red)}
    .leaflet-bar{border:1px solid var(--line);border-radius:3px;box-shadow:none}
    .request-aside .map-actions{grid-column:1;margin:0}
    .request-aside .map-figure figcaption{grid-column:2;margin:0;text-align:right}
    @media(max-width:600px){.request-aside .map-figure{grid-template-columns:1fr}.request-aside .map-actions,.request-aside .map-figure figcaption{grid-column:1}.request-aside .map-figure figcaption{text-align:left}}
.btn-navy{border:1px solid var(--navy);color:var(--navy);background:#fff}
.btn-navy:hover{background:var(--navy);color:#fff}

/* ===========================================================================
   Animations a l'entree dans la vue (T-3.2, lot 3)

   Le contenu est DEJA dans le HTML : l'animation ne fait que le deplacer de
   18 px et l'eclaircir. Rien n'est injecte par JavaScript.

   Regle de surete : la declaration vit dans TROIS garde-fous, et chacun repond
   a un cas reel mesure le 12/10/2026 :

     1. @supports (animation-timeline: view()) — un navigateur qui ne sait pas
        animer au defilement affiche la page telle quelle, jamais du vide.
     2. (prefers-reduced-motion: no-preference) — un visiteur qui a demande
        moins d'animations n'en subit aucune.
     3. @media screen — et c'est le plus important : A L'IMPRESSION il n'y a
        aucun defilement, donc le declencheur ne se produit jamais et les
        sections sortaient BLANCHES sur le papier. Constaté sur une capture
        pleine page, ou la section « Our office » etait entierement invisible.

   On anime la propriete `translate`, PAS `transform` : `transform` reste
   libre pour l'effet de survol des cartes (.card:hover), qui aurait ete
   ecrase par un keyframe rempli en `both`.
   =========================================================================== */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section-head, .card, .contact-list, .map-figure {
      animation: ngmp-rise .6s linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 42%;
    }
  }
}
@keyframes ngmp-rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}

/* ===========================================================================
   Corrections d'accessibilite — WCAG 2.1 AA (T-3.8, 12/10/2026)

   MESURE : le rouge de marque (#E11F26) donne 4,41:1 sur le fond glace
   (#F3F7FB), juste sous le seuil de 4,5:1 du texte normal. Sur blanc il passe
   (4,75:1). Un meme libelle ne peut pas changer de rouge selon son fond : on
   emploie donc pour CES PETITS LIBELLES le rouge fonce deja present dans la
   charte (#BE151C), soit 5,89:1 sur le fond glace et 6,34:1 sur blanc. Le rouge
   vif reste pour les boutons, les bordures et le grand texte.

   NE PAS ajouter `.page-hero .section-label` a cette liste : le libelle du
   bandeau navy est en bleu clair sur fond sombre (#9bc7e7) et une meme
   specificite, placee plus bas, le repeindrait en rouge sombre — illisible.
   =========================================================================== */
:root { --red-text: #BE151C; }
.section-label, .intro .section-label, .contact-page .section-label,
.contact-map .section-label, .section-head .section-label, .about .section-label,
.card-number, .card .card-number, .detail-number, .detail .detail-number,
.contact-row small, .contact-row .contact-row-label { color: var(--red-text) }

/* Cibles tactiles : la WCAG 2.2 (2.5.8) demande 24x24 px pour tout element
   cliquable. Deux liens etaient sous la barre — les deux logos sociaux (16 px de
   haut) et l'adresse du pied de page (21 px). Ils ne sont pas dans une phrase,
   donc l'exception des liens en ligne ne s'applique pas : on leur donne la
   hauteur minimale sans toucher a leur apparence. */
.contact-row .social-link { min-height: 24px }
/* Le lien du pied de page a change de nature le 16/10/2026 : c'etait l'adresse
   e-mail (mailto:), c'est desormais « Policies, terms & conditions. ». La regle
   ciblait le mailto, donc la nouvelle cible repassait sous les 24 px — constate
   a la mesure sur les trois pages de conditions. Elle vise maintenant tous les
   liens du pied de page. */
.footer-inner a { display: inline-flex; align-items: center; min-height: 24px }

/* ===========================================================================
   Impressions et export PDF (12/10/2026)

   Le theme n'avait AUCUNE regle d'impression : le navigateur pagine alors comme
   il peut, coupe une carte en deux et laisse un titre seul en bas de page. Ces
   trois regles suffisent. Elles ne touchent que le papier et l'export PDF :
   l'affichage a l'ecran est inchange.

   Rappel : les animations au defilement sont deja reservees a `@media screen`,
   sinon les sections sortaient blanches a l'impression.
   =========================================================================== */
@media print {
  h1, h2, h3, h4 { break-after: avoid }
  /* `.section-head` en entier : le libelle et son titre ne se separent pas. Sans
     cela, un libelle restait seul en bas de page et son titre passait a la
     suivante (mesure sur la page « Our services »). */
  .section-head, .card, .contact-list, .cta-band, figure { break-inside: avoid }
  .cta-band { break-before: avoid }   /* essai : garder le bandeau avec ce qui precede */

  /* La section « notre bureau » doit tenir sur UNE page : son intitule, l'adresse,
     la carte et le bouton. Mesure : 585 px de contenu + 176 px de marges = 761 px
     pour une page de 720 px, d'ou une page presque vide ou il ne restait que le
     titre. On reduit la marge laterale de la section et on borne la hauteur de la
     carte : la carte garde ses proportions, elle est simplement un peu plus petite. */
  .contact-map { padding: 2rem 0 }
  .map-figure { max-width: 930px; margin-inline: auto }
  .map-figure img { max-height: 330px; width: auto }

  /* Le pied de page ne s'imprime pas. MESURE : sur 13 pages du site, 6 se
     terminaient par une page 16/9 ne contenant QUE le pied de page (114 a 212
     caracteres) — six ecrans perdus sur cinquante-cinq, parce que la derniere
     section remplit sa page et que le pied n'y tient plus. Or ce pied est de la
     navigation, identique sur les 13 pages : en PDF il ne fait que se repeter.
     L'en-tete, lui, reste : il porte l'identite et l'etat du menu, et il n'occupe
     jamais une page a lui seul. */
  .site-footer { display: none }


}

/* ===================================================================
   Formulaire de demande de piece (phase de developpement : /contactdev/)

   Composants imposes par la charte : rayon 3 px, champs de 48 px de haut,
   bordure 1 px --line-strong, Inter. Le rouge vif reste reserve a l'action ;
   les petits libelles rouges passent par --red-text (#BE151C), le seul rouge
   au-dessus de 4,5:1 sur les fonds clairs du site (mesure du 12/10/2026).
   =================================================================== */
.request-block { max-width: 760px }
.request-form { display: grid; gap: 2.2rem; margin-top: 2rem }
.request-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1.4rem }
.request-form legend { font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--red-text); padding: 0; margin-bottom: .1rem }
.field-row { display: grid; grid-template-columns: 1.7fr .8fr; gap: 1.4rem }
.field { display: grid; gap: .45rem; margin: 0 }
.field label { font-weight: 700; font-size: .93rem; color: var(--navy) }
.field .req { color: var(--red-text); font-weight: 700; font-size: .82rem }
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=number], .field input[type=date], .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: 3px;
  padding: .75rem .9rem; min-height: 48px; width: 100%;
}
.field textarea { line-height: 1.6; min-height: 120px; resize: vertical }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); outline: 3px solid var(--red); outline-offset: 2px }
.form-note { font-size: .86rem; color: var(--muted); margin: 0 }
.form-note a { color: var(--navy); font-weight: 700 }
.form-submit { margin: 0 }
.request-form .btn { border: 0; cursor: pointer }

/* Le champ piege : hors de l'ecran, jamais masque par display:none (les robots
   remplissent parfois les champs masques, presque jamais ceux places hors champ). */
.request-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

.form-notice { border-radius: 3px; padding: 1.4rem 1.6rem; margin-bottom: 2rem }
.form-notice h2 { font-size: 1.25rem; margin: 0 0 .6rem; letter-spacing: -.02em }
.form-notice p, .form-notice ul { margin: 0 0 .4rem; font-size: .95rem }
.form-notice ul { padding-left: 1.2rem }
.form-notice-ok { background: #EDF6EE; border: 1px solid #B7D8BC; border-left: 5px solid #2E7D32 }
.form-notice-ko { background: #FDF0F0; border: 1px solid #E9B7B7; border-left: 5px solid var(--red-text) }

/* (Les paires de champs s'empilent des 1100 px : voir plus bas, la regle unique
   qui remplace l'ancienne bascule a 700 px.) */

/* ---- Deux colonnes : le formulaire, et les coordonnees a cote ----
   Demande du 15/10/2026. Les coordonnees restent ainsi SOUS LES YEUX pendant
   qu'on remplit — c'est ce que veut dire « le formulaire n'est jamais le seul
   moyen de contact » (§M5) : la solution de rechange est visible, pas releguee
   en bas de page.

   Largeur de la carte FIXE (16 rem a 23 rem, soit toujours 23 rem des qu'il y a
   la place) : le contenu de la carte est incompressible (une adresse de 26
   caracteres, une adresse postale sur deux lignes). Une colonne proportionnelle
   l'ecrasait — mesure du 15/10/2026 : 287 px a 900 px d'ecran, l'adresse se
   coupait en plein mot et la carte ressemblait a un bloc de telephone.

   Premiere version : bascule en UNE colonne des 1100 px, ce qui faisait
   disparaitre la carte du cote du formulaire sur tout portable. Corrige le
   15/10/2026 : on garde les deux colonnes et c'est le FORMULAIRE qui s'adapte —
   sous 1100 px ses paires de champs s'empilent (nom au-dessus de societe), ce
   qui libere la place necessaire au lieu de sacrifier la colonne de droite.
   La bascule en une colonne n'arrive plus qu'a 760 px, soit un vrai telephone. */
.request-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 23rem); gap: clamp(1.8rem, 4vw, 4rem); align-items: start }
.request-layout .request-block { max-width: none }
/* La carte NE colle PAS au defilement. Premiere version : `position: sticky`, pour
   garder les coordonnees sous les yeux pendant qu'on remplit. A l'usage (retour de la
   direction, 15/10/2026, captures a l'appui) la carte se detachait du formulaire et
   « flottait » au-dessus de la page en laissant un grand blanc sous elle. Un bloc
   ancre, qui defile avec le contenu, se lit mieux : les coordonnees sont la, en haut
   a droite, et l'oeil sait a quoi elles appartiennent. */
.request-aside { position: static }
.request-aside-label { color: var(--muted); font-size: .95rem; margin: 0 0 .9rem }
.request-aside .contact-list { padding: 1.4rem 1.6rem }

/* Pied du formulaire : la note a gauche, l'action a droite. */
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap }
/* `margin-left:auto` garde le bouton a DROITE meme quand le pied passe a la
   ligne : sans lui, `justify-content` le renvoyait a gauche des qu'il ne tenait
   plus a cote de la note (constate a 1000 px le 15/10/2026). */
.form-foot .form-submit { margin: 0 0 0 auto }
/* La taille doit etre portee par un selecteur plus fort que `.contact-page p`
   (1,06 rem), sinon la note est ecrasee et se coupe sur deux lignes avec un mot
   orphelin. Mesure du 15/10/2026 : a 0,86 rem la ligne fait 475 px pour 547 px
   disponibles, donc une seule ligne, comme le brouillon. */
.form-foot .form-note { font-size: .86rem; line-height: 1.6; max-width: 34rem }

/* Sous 1100 px : on GARDE les deux colonnes, et c'est le formulaire qui
   s'adapte. Ses paires de champs s'empilent (nom au-dessus de societe), ce qui
   rend au formulaire la place que les deux colonnes cote a cote lui prennent.
   Mesure : c'est a 1024 px que « Company (required) » passait sur deux lignes
   quand les paires restaient cote a cote. */
@media (max-width: 1100px) {
  .field-row { grid-template-columns: 1fr }
}

/* Sous 760 px — un vrai telephone : une seule colonne, les coordonnees passent
   sous le formulaire, et la colonne ne colle plus au defilement. */
@media (max-width: 760px) {
  .request-layout { grid-template-columns: 1fr; gap: 2.6rem }
  .request-aside .contact-list { padding: 1.6rem }
}

@media (max-width: 600px) {
  .form-foot { align-items: flex-start; flex-direction: column; gap: 1.1rem }
}

/* Tres etroit (320 px : iPhone SE de premiere generation) : a 1,2 rem l'adresse
   ne tient plus sur une ligne et se coupe EN PLEIN MOT (« contact@ngmpaerospace.
   com ») — 26 caracteres insecables dans une colonne de 233 px. Plutot que de
   reduire le texte, on rend de la largeur a la carte en diminuant sa marge
   interieure : mesure du 15/10/2026, la ligne tient alors entiere a 1 rem. */
@media (max-width: 380px) {
  .request-aside .contact-row a { font-size: 1rem }
  .request-aside .contact-list { padding: 1.2rem }
}