/*
Theme Name:   PAT-INDUSTRY
Theme URI:    https://www.pat-industry.com
Description:  Theme enfant GeneratePress aux couleurs de PAT-INDUSTRY. Charte : bleu #1B3966, orange #E87722, gris #C4CCD9, typographie Jost.
Author:       PAT-INDUSTRY
Author URI:   https://www.pat-industry.com
Template:     generatepress
Version:      3.30.9
Text Domain:  pat-industry
*/

/* ============================================================
   1. TOKENS DE CHARTE
   Modifier une valeur ici la propage sur tout le site.
   ============================================================ */
:root{
  --pat-blue:#1B3966;
  --pat-blue-light:#2C5490;
  --pat-blue-deep:#122744;
  --pat-orange:#E87722;
  --pat-orange-dark:#C9611A;
  --pat-orange-soft:#FDF1E7;
  --pat-grey:#C4CCD9;
  --pat-grey-bg:#F4F6F9;
  --pat-ink:#2C2C2C;
  --pat-muted:#5A6A80;
  --pat-white:#FFFFFF;

  --pat-radius:6px;
  --pat-shadow-md:0 4px 6px -1px rgba(27,57,102,.10);
  --pat-shadow-lg:0 10px 15px -3px rgba(27,57,102,.12);
  --pat-shadow-xl:0 20px 25px -5px rgba(27,57,102,.14);
  --pat-gradient:linear-gradient(135deg,var(--pat-blue),var(--pat-blue-light));
  --pat-maxw:1240px;

  --pat-font:"Jost",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ============================================================
   2. TYPOGRAPHIE
   ============================================================ */
body{font-family:var(--pat-font);font-weight:400;color:var(--pat-ink);line-height:1.65}
h1,h2,h3,h4,h5,h6{font-family:var(--pat-font);color:var(--pat-blue);font-weight:500;
  line-height:1.18;letter-spacing:-.01em}
h1{font-size:2.25rem}
h2{font-size:1.85rem;margin-bottom:1.1rem}
h3{font-size:1.25rem}
/* Tailles de titre sur grand écran.
   Revues le 28/08/2026 (v2.0) après mesure au navigateur :
   à 3.25rem / 2.4rem, cinq titres de h2 sur sept dépassaient
   la mesure du texte et se coupaient en deux lignes courtes.
   À 2.75rem / 1.875rem, cinq sur sept tiennent sur une ligne
   et les titres s'alignent enfin sur le texte qu'ils annoncent.
   Les titres au-dessus d'une grille ou d'un tableau reprennent
   la pleine largeur — voir section 7.                        */
@media(min-width:768px){h1{font-size:2.75rem}h2{font-size:1.875rem}}
a{color:var(--pat-blue);text-underline-offset:3px}
a:hover,a:focus{color:var(--pat-orange)}
.pat-lead{font-size:1.125rem;color:var(--pat-muted)}
.pat-muted{color:var(--pat-muted)}
.pat-eyebrow{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pat-orange);margin-bottom:.9rem}
.pat-rule{width:48px;height:3px;background:var(--pat-orange);margin:1.1rem 0 0}
.pat-center .pat-rule{margin-left:auto;margin-right:auto}
:focus-visible{outline:2px solid var(--pat-orange);outline-offset:3px}

/* ============================================================
   3. BOUTONS
   ============================================================ */
.pat-btn,.wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--pat-font);font-weight:500;font-size:.95rem;
  padding:.75rem 1.5rem;border-radius:var(--pat-radius);
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.pat-btn-primary,.wp-block-button__link{background:var(--pat-orange);color:#fff}
.pat-btn-primary:hover,.wp-block-button__link:hover{background:var(--pat-orange-dark);
  color:#fff;transform:translateY(-1px)}
.pat-btn-ghost,.is-style-outline .wp-block-button__link{background:transparent;
  border-color:var(--pat-blue);color:var(--pat-blue)}
.pat-btn-ghost:hover,.is-style-outline .wp-block-button__link:hover{background:var(--pat-blue);color:#fff}
.pat-btn-white{background:#fff;color:var(--pat-blue)}
.pat-btn-white:hover{background:var(--pat-grey-bg)}
.pat-btn-lg{padding:.95rem 2rem;font-size:1rem}

/* ============================================================
   4. EN-TETE ET NAVIGATION
   ============================================================ */
.site-header{border-bottom:1px solid var(--pat-grey);background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px)}
.site-logo img,.site-header img{max-height:52px;width:auto}
.main-navigation{background:transparent}
.main-navigation .main-nav ul li a{font-family:var(--pat-font);font-weight:400;
  font-size:.95rem;color:var(--pat-blue)}

/* L'ESPACEMENT DES ELEMENTS DU MENU — 03/09/2026.

   Le menu porte neuf elements : sept rubriques, le selecteur de langue et
   le bouton d'appel. Avec l'espacement herite de GeneratePress (17,6 px de
   chaque cote), leur largeur cumulee depassait la barre de 34 px en
   francais et de 77 px en anglais : le bouton orange tombait sur une
   SECONDE LIGNE, a toutes les largeurs d'ecran de 768 a 1920 px, dans les
   deux langues. L'anglais etait plus touche parce que ses libelles sont
   plus longs — Talk to us about your process fait 39 px de plus que
   Parler de votre process.

   On resserre l'espacement plutot que de reduire la police : la lisibilite
   du menu ne se negocie pas, l'air autour des mots si. Les rubriques a
   sous-menu gardent padding-right a zero, la fleche occupant deja cette
   place.

   Tenu sur une seule ligne, dans les deux langues, jusqu'a 1420 px.
   En dessous, l'anglais repasse a deux lignes : il faudrait alors sortir
   le selecteur de langue du menu ou raccourcir le libelle du bouton.
   Mesure faite largeur par largeur, jamais estimee. */
@media (min-width:769px){
  .main-navigation .main-nav > ul > li > a{padding-left:8px;padding-right:8px;}
  .main-navigation .main-nav > ul > li.menu-item-has-children > a{padding-right:0;}
}

/* LE BANDEAU DE LANGUE — 03/09/2026.

   Le selecteur a quitte le menu (voir functions.php) et occupe un bandeau
   propre, au-dessus de l'en-tete. Il est aligne a droite avec le meme
   retrait lateral que l'en-tete, 40 px, pour tomber exactement au-dessus
   du bord droit du menu. Discret par construction : fond gris tres clair,
   filet en bas, corps a 0,8 rem. Il ne doit pas concurrencer le menu, il
   doit se trouver quand on le cherche. */
/* Le bandeau porte desormais trois choses : l'accroche a gauche, le bouton
   d'appel et le choix de langue a droite. Le bouton a quitte la barre de
   menu (voir functions.php) faute de place mesuree sur la ligne d'en-tete.
   La bande reste discrete par construction — fond gris tres clair, filet en
   bas, corps sous 0,8 rem : elle ne doit pas concurrencer le menu. L'accroche
   disparait sous 900 px, ou elle n'aurait plus la largeur pour se lire. */
.pat-topbar{background:var(--pat-grey-bg);border-bottom:1px solid var(--pat-grey)}
.pat-topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  max-width:min(1400px,100%);margin:0;
  padding:6px 40px;font-family:var(--pat-font);font-size:.8rem;line-height:1.5}
.pat-topbar-accroche{color:var(--pat-muted);font-size:.78rem}
.pat-topbar-actions{display:flex;align-items:center;gap:1.25rem;margin-left:auto}
.pat-topbar-cta{display:inline-block;background:var(--pat-orange);color:#fff;
  font-weight:500;font-size:.78rem;line-height:1;padding:.45rem .9rem;
  border-radius:var(--pat-radius);text-decoration:none;white-space:nowrap;
  transition:background .15s ease}
.pat-topbar-cta:hover,.pat-topbar-cta:focus{background:var(--pat-orange-dark);color:#fff;text-decoration:none}
.pat-topbar-langue{white-space:nowrap}
.pat-topbar .pat-langue-actif{color:var(--pat-blue);font-weight:500;padding:0 4px}
.pat-topbar .pat-langue-sep{color:var(--pat-grey);padding:0 2px}
.pat-topbar .pat-langue-lien{color:var(--pat-orange);font-weight:500;padding:0 4px;text-decoration:none}
.pat-topbar .pat-langue-lien:hover,.pat-topbar .pat-langue-lien:focus{text-decoration:underline}
@media (max-width:900px){.pat-topbar-accroche{display:none}}
@media (max-width:768px){.pat-topbar-inner{padding:5px 20px;gap:.75rem}
  .pat-topbar-cta{font-size:.75rem;padding:.4rem .8rem}}
.main-navigation .main-nav ul li:hover>a,
.main-navigation .main-nav ul li.current-menu-item>a{color:var(--pat-orange);background:transparent}
.main-navigation .main-nav ul li.current-menu-item>a{font-weight:500}
.main-navigation ul ul{border:1px solid var(--pat-grey);border-top:3px solid var(--pat-orange);
  box-shadow:var(--pat-shadow-lg);min-width:280px}
.main-navigation ul ul li a{padding:.75rem 1rem;font-size:.9rem}
.main-navigation ul ul li:hover>a{background:var(--pat-grey-bg);color:var(--pat-orange)}

/* ============================================================
   5. SECTIONS
   ============================================================ */
.pat-section{padding:4rem 0}
@media(min-width:768px){.pat-section{padding:6rem 0}}
.pat-bg-grey{background:var(--pat-grey-bg)}
.pat-bg-blue{background:var(--pat-gradient);color:#fff}
.pat-bg-blue h1,.pat-bg-blue h2,.pat-bg-blue h3{color:#fff}
.pat-bg-blue .pat-lead,.pat-bg-blue p{color:rgba(255,255,255,.88)}
.pat-head{max-width:48rem;margin:0 auto 3rem;text-align:center}
.pat-container{max-width:var(--pat-maxw);margin:0 auto;padding:0 1.5rem}

/* ============================================================
   6. GRILLES ET CARTES
   ============================================================ */
.pat-grid{display:grid;gap:1.5rem}
.pat-g2{grid-template-columns:repeat(2,1fr)}
.pat-g3{grid-template-columns:repeat(3,1fr)}
.pat-g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1023px){.pat-g3,.pat-g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.pat-g2,.pat-g3,.pat-g4{grid-template-columns:1fr}}

.pat-card{background:#fff;border:1px solid var(--pat-grey);border-radius:var(--pat-radius);
  padding:1.75rem;transition:box-shadow .25s,border-color .25s,transform .25s;
  display:block;text-decoration:none;color:inherit}
.pat-card:hover{box-shadow:var(--pat-shadow-md);border-color:var(--pat-blue-light);
  transform:translateY(-2px)}
.pat-card h3{margin-bottom:.5rem}
.pat-card p{color:var(--pat-muted);font-size:.95rem;margin-bottom:0}
.pat-card-flat{border:0;box-shadow:var(--pat-shadow-md)}
.pat-card-top{border-top:3px solid var(--pat-orange)}
.pat-icon{display:flex;height:2.75rem;width:2.75rem;align-items:center;justify-content:center;
  border-radius:var(--pat-radius);background:var(--pat-orange-soft);color:var(--pat-orange);
  margin-bottom:1.1rem}
.pat-card-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;
  font-size:.9rem;font-weight:500;color:var(--pat-blue)}
.pat-card:hover .pat-card-link{color:var(--pat-orange)}

/* Cartes en verre sur fond bleu */
.pat-bg-blue .pat-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(8px)}
.pat-bg-blue .pat-card p{color:rgba(255,255,255,.82)}
.pat-bg-blue .pat-icon{background:rgba(255,255,255,.18);color:#fff}

/* ============================================================
   7. LISTES A PUCES
   ============================================================ */
.pat-bullets{list-style:none;margin-left:0;padding-left:0}
.pat-bullets li{position:relative;padding-left:1.5rem;margin-bottom:.65rem;color:var(--pat-muted)}
.pat-bullets li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;
  border-radius:50%;background:var(--pat-orange)}
.pat-bullets li strong{color:var(--pat-ink)}

/* ============================================================
   8. REPERES CHIFFRES
   ============================================================ */
.pat-stat{text-align:center;border:1px solid var(--pat-grey);background:#fff;
  border-radius:var(--pat-radius);padding:2rem 1.25rem}
.pat-stat-val{font-family:var(--pat-font);font-size:2.5rem;font-weight:500;
  color:var(--pat-blue);line-height:1}
.pat-stat-val em{font-style:normal;color:var(--pat-orange)}
.pat-stat-lbl{font-size:.88rem;color:var(--pat-muted);margin-top:.6rem}

/* ============================================================
   9. TABLEAUX
   ============================================================ */
.pat-table{width:100%;border-collapse:collapse;font-size:.95rem}
.pat-table th{text-align:left;padding:.75rem 1rem;font-weight:500;color:var(--pat-muted);
  border-bottom:1px solid var(--pat-grey)}
.pat-table td{padding:1rem;border-bottom:1px solid var(--pat-grey);vertical-align:top}
.pat-table td:first-child{font-weight:500}

/* ============================================================
   10. PIED DE PAGE
   ============================================================ */
.site-footer,.footer-widgets{background:var(--pat-blue-deep);color:rgba(255,255,255,.72)}
.site-footer a,.footer-widgets a{color:rgba(255,255,255,.72);text-decoration:none}
.site-footer a:hover,.footer-widgets a:hover{color:var(--pat-orange)}
.site-footer h2,.site-footer h3,.footer-widgets .widget-title{color:#fff;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.site-info{background:var(--pat-blue-deep);border-top:1px solid rgba(255,255,255,.14);
  font-size:.85rem;color:rgba(255,255,255,.55)}

/* ============================================================
   11. ACCESSIBILITE
   ============================================================ */
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ============================================================
   PAT-INDUSTRY — comportement mobile et tablette
   À ajouter À LA FIN de /wp-content/themes/pat-industry/style.css

   Conçu mobile d'abord : les règles de base valent pour le
   téléphone, les media queries ajoutent le confort au-delà.

   Le menu mobile est géré nativement par GeneratePress
   (Personnaliser -> Mise en page -> Menu principal). Rien à faire ici.
   ============================================================ */


/* ------------------------------------------------------------
   1. TABLEAUX — cartes empilées sur téléphone, tableau au-delà

   Les intitulés de colonne sont injectés en CSS : aucune donnée
   dupliquée dans le HTML, et le balisage reste un vrai <table>,
   donc lisible par les moteurs et les lecteurs d'écran.

   COMMENT L'APPLIQUER À UN TABLEAU :
     bloc Tableau -> panneau latéral -> Avancé
     -> Classe(s) CSS additionnelle(s) : pat-table
     Puis, pour que les intitulés de colonne restent lisibles une fois le tableau
     empilé sur téléphone, chaque <td> des colonnes 2 et suivantes doit porter
     data-label="<intitulé de sa colonne>", recopié du <th>. Aucune règle CSS
     supplémentaire n'est à écrire.
   ------------------------------------------------------------ */

.pat-table table{ border-collapse:collapse; width:100%; font-size:.88rem; }

@media (max-width: 999px){

  .pat-table thead{ display:none; }

  .pat-table tr{
    display:block;
    border:1px solid var(--pat-grey);
    border-radius:4px;
    margin-bottom:.85rem;
    overflow:hidden;
    background:#fff;
  }
  .pat-table tr:last-child{ margin-bottom:0; }

  .pat-table td{
    display:block;
    padding:.7rem .9rem;
    border-top:1px solid var(--pat-grey);
    color:var(--pat-ink);
  }

  /* La première colonne devient l'en-tête de la carte */
  .pat-table td:first-child{
    border-top:0;
    background:var(--pat-blue);
    color:#fff;
    font-size:1rem;
    font-weight:500;
    padding:.85rem .9rem;
  }
  .pat-table td:first-child a{ color:#fff; }

  /* L'intitule de colonne, en surtitre orange (revu le 08/09/2026).
     Le libelle vient de l'attribut data-label pose sur chaque <td>, recopie du
     <th> de sa colonne. Il suit donc automatiquement la langue de la page et ne
     peut plus diverger de l'en-tete quand une colonne est renommee.
     Rien a ajouter ici pour un nouveau tableau : il suffit que ses <td> portent
     data-label. Les anciennes regles par classe (.pat-table-techno,
     .pat-table-modes) sont supprimees : elles etaient devenues fausses. */
  .pat-table td::before{
    content: attr(data-label);
    display:block;
    font-size:.66rem;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--pat-orange);
    font-weight:500;
    margin-bottom:.22rem;
  }
  /* La premiere colonne est deja l'en-tete de la carte : pas de surtitre. */
  .pat-table td:first-child::before{ content:none; display:none; }
  /* Une cellule sans data-label n'affiche pas de surtitre vide. */
  .pat-table td:not([data-label])::before{ content:none; display:none; }
}

@media (min-width: 1000px){
  .pat-table{
    border:1px solid var(--pat-grey);
    border-radius:4px;
    overflow-x:auto;               /* filet de sécurité */
    -webkit-overflow-scrolling:touch;
  }
  .pat-table th{
    background:var(--pat-blue);
    color:#fff;
    font-weight:500;
    text-align:left;
    padding:.75rem .85rem;
    font-size:.78rem;
    white-space:nowrap;
  }
  .pat-table td{
    padding:.72rem .85rem;
    border-top:1px solid var(--pat-grey);
    vertical-align:top;
  }
  .pat-table tbody tr:nth-child(even) td{ background:#FAFCFE; }
  .pat-table td::before{ display:none; }
}


/* ------------------------------------------------------------
   2. GRILLES DE CARTES
   Une colonne sur téléphone, deux sur tablette, trois au-delà.
   ------------------------------------------------------------ */

.pat-grid{ display:grid; gap:.9rem; }
.pat-g2, .pat-g3, .pat-g4{ grid-template-columns:1fr; }

@media (min-width: 640px){
  .pat-grid{ gap:1.1rem; }
  .pat-g2, .pat-g3, .pat-g4{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width: 960px){
  .pat-g3{ grid-template-columns:repeat(3, 1fr); }
  .pat-g4{ grid-template-columns:repeat(4, 1fr); }
}


/* ------------------------------------------------------------
   3. TYPOGRAPHIE — échelle réduite sur petit écran
   Le corps reste à 17 px : ne jamais descendre sous 16 px,
   iOS zoome automatiquement en dessous, ce qui casse la mise
   en page au premier champ de formulaire touché.
   ------------------------------------------------------------ */

@media (max-width: 699px){
  .entry-content h1, .page-header h1{ font-size:1.72rem; line-height:1.14; }
  .entry-content h2{ font-size:1.3rem; }
  .entry-content h3{ font-size:1.03rem; }
  .pat-lead{ font-size:1.12rem; line-height:1.48; }
  .pat-section{ padding:2.4rem 0; }
  .pat-container{ padding-left:1.15rem; padding-right:1.15rem; }
}


/* ------------------------------------------------------------
   4. CIBLES TACTILES
   44 px de haut minimum : un doigt n'est pas un curseur.
   ------------------------------------------------------------ */

.pat-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:.8rem 1.6rem;
}

@media (max-width: 520px){
  /* Un bouton d'appel à l'action prend toute la largeur */
  .pat-section .pat-btn,
  .wp-block-buttons .wp-block-button__link{
    width:100%;
    text-align:center;
  }
}


/* ------------------------------------------------------------
   5. FAQ EN ACCORDÉON
   Repli des questions : sur téléphone, huit questions dépliées
   font une page interminable.

   Dans WordPress : bloc « Détails » (natif depuis WP 6.3),
   avec la classe pat-faq sur le groupe qui les contient.
   ------------------------------------------------------------ */

.pat-faq{ border-top:1px solid var(--pat-grey); }
.pat-faq details{ border-bottom:1px solid var(--pat-grey); }

.pat-faq summary{
  cursor:pointer;
  padding:1.05rem 2.2rem 1.05rem 0;
  position:relative;
  font-size:1rem;
  font-weight:500;
  color:var(--pat-blue);
  list-style:none;
  min-height:56px;
  display:flex;
  align-items:center;
  line-height:1.35;
}
.pat-faq summary::-webkit-details-marker{ display:none; }

.pat-faq summary::after{
  content:"+";
  position:absolute;
  right:.2rem;
  top:50%;
  transform:translateY(-50%);
  font-size:1.5rem;
  font-weight:300;
  color:var(--pat-orange);
  line-height:1;
}
.pat-faq details[open] summary::after{ content:"–"; }

.pat-faq details > *:not(summary){
  padding-bottom:1.2rem;
  color:var(--pat-ink);
  font-size:.95rem;
  max-width:52rem;
}

.pat-faq summary:focus-visible{
  outline:2px solid var(--pat-orange);
  outline-offset:2px;
}


/* ------------------------------------------------------------
   6. DÉBORDEMENTS
   Rien ne doit provoquer de défilement horizontal de la page.
   ------------------------------------------------------------ */

body{ overflow-x:hidden; }

.entry-content pre,
.entry-content code{
  overflow-x:auto;
  word-break:normal;
}

.entry-content img,
.entry-content iframe,
.entry-content video{
  max-width:100%;
  height:auto;
}

/* Les mots techniques longs ne débordent pas dans les cartes */
.pat-card, .pat-table td{ overflow-wrap:break-word; }


/* ------------------------------------------------------------
   7. CONFORT DE LECTURE
   ------------------------------------------------------------ */

/* Longueur de ligne bornée sur grand écran.
   Corrigé le 28/08/2026 : jusqu'en 1.6, seuls les paragraphes
   et les listes étaient bornés. Les titres et le texte des
   blocs colorés couraient jusqu'au bord du conteneur, et
   partaient donc plus loin à droite que le texte qu'ils
   annoncent — visible à chaque section de chaque page.
   Tout ce qui se lit en continu partage désormais la même
   mesure. Une seule valeur à modifier : --pat-mesure.        */

:root{
  --pat-mesure:47rem;   /* ≈ 752 px ≈ 75 caractères */
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4{ max-width:var(--pat-mesure); }

/* EXCEPTION — corrigé le 28/08/2026, v1.8.
   Un titre doit avoir la largeur de ce qu'il annonce. Borné
   au-dessus d'un texte courant, il doit reprendre la pleine
   largeur au-dessus d'une grille de cartes, d'un tableau ou
   d'un accordéon : sinon il se coupe en deux lignes alors
   que le bloc en dessous occupe tout l'espace, et c'est le
   titre qui paraît mal réglé.
   Si le navigateur ne connaît pas :has(), la règle entière
   est ignorée et l'on retombe sur des titres bornés — moins
   bien, jamais cassé.                                       */
.entry-content > :is(h1,h2,h3,h4):has(+ :is(
    .pat-grid,
    .pat-table,
    .wp-block-table,
    .pat-faq,
    .pat-card,
    .pat-figure)){
  max-width:none;
}

/* Le TITRE DE LA PAGE vit hors de .entry-content : GeneratePress
   le rend dans .page-header / .entry-header. Il échappait donc
   à toutes les règles ci-dessus et courait jusqu'au bord, au-
   dessus d'un chapô borné. Corrigé le 28/08/2026, v1.9.      */
.page-header .entry-title,
.entry-header .entry-title,
.page-header > h1,
.entry-header > h1{ max-width:var(--pat-mesure); }

/* Coupure équilibrée des titres sur deux lignes : évite le
   mot orphelin sur la seconde ligne.                        */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.page-header .entry-title,
.entry-header .entry-title{ text-wrap:balance; }

/* ------------------------------------------------------------
   LES CONTENEURS — règle arrêtée le 28/08/2026, v2.5.

   Après plusieurs allers-retours, le système tient en deux
   largeurs, et c'est la version à conserver :

     1. le TEXTE COURANT — paragraphes, listes, titres posés
        directement dans la page — tient dans la mesure de
        lecture définie plus haut ;
     2. tout CONTENEUR va pleine largeur et son texte le
        remplit : blocs colorés, cartes isolées, accordéons,
        grilles, tableaux, figures.

   Les cartes placées dans une grille ne relèvent d'aucune des
   deux : leur largeur vient de la colonne qui les porte.

   Contrepartie assumée : dans un conteneur, la ligne fait
   environ 130 caractères au lieu de 88. Sans conséquence sur
   un encadré de trois ou quatre lignes — la médiane du site —
   plus fatigant sur les dix blocs qui dépassent mille
   caractères, et qui gagneraient à être raccourcis.

   Aucun conteneur ne porte donc de max-width : les lignes
   ci-dessous ne font que lever les plafonds hérités.
   ------------------------------------------------------------ */

.entry-content .pat-bg-grey,
.entry-content .pat-bg-blue,
.entry-content .pat-bg-orange,
.entry-content > .pat-card,
.entry-content > .pat-faq,
.entry-content > .pat-stat{
  box-sizing:border-box;
  max-width:none;
}

/* L'accordéon portait un plafond de 52rem, antérieur à la
   mesure commune. Il est levé.                               */
.pat-faq details > *:not(summary){ max-width:none; }


/* Ce qui reste pleine largeur, quoi qu'il arrive. Les cartes
   n'y figurent pas : leur texte est déjà borné par la colonne
   de la grille qui les contient.                             */
.entry-content .pat-grid,
.entry-content .pat-table,
.entry-content .wp-block-table,
.entry-content .pat-figure,
.entry-content hr{ max-width:none; }

/* Respect du réglage système « animations réduites » */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}


/* ------------------------------------------------------------
   8. CARTES D'ALERTE — correction du 27/08

   Avant : seul le haut était orange, le reste du cadre restait
   gris, et le survol le faisait passer au bleu. Résultat, un
   cadre à deux couleurs et un trait qui séparait les cartes au
   lieu de les encadrer.

   Après : cadre orange complet, survol cohérent, et de l'air
   entre les cartes.
   ------------------------------------------------------------ */

.pat-card-top{
  border:1.5px solid var(--pat-orange);
  border-radius:var(--pat-radius, 4px);
  background:#fff;
  margin-bottom:1.6rem;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.pat-card-top:last-child{ margin-bottom:0; }

/* Le survol renforce l'orange au lieu de basculer au bleu */
.pat-card-top:hover{
  border-color:var(--pat-orange-dark);
  background:var(--pat-orange-soft);
  box-shadow:0 8px 22px -12px rgba(201, 97, 26, .5);
}

/* Le titre reprend l'accent : le cadre et le titre disent la même chose */
.pat-card-top h3{ color:var(--pat-orange-dark); }

@media (min-width: 700px){
  .pat-card-top{ margin-bottom:1.9rem; padding:1.6rem 1.55rem; }
}

/* Si les cartes sont placées dans une grille, c'est l'écart qui gère */
.pat-grid .pat-card-top{ margin-bottom:0; }
.pat-grid:has(.pat-card-top){ gap:1.6rem; }
@media (min-width: 700px){ .pat-grid:has(.pat-card-top){ gap:1.9rem; } }


/* ------------------------------------------------------------
   9. BLOCS DE COULEUR DANS LE CONTENU — correction du 27/08

   Les blocs colorés placés dans le corps d'une page (encadré
   bleu d'appel à l'action, encadré gris de mise en avant)
   n'avaient aucune marge intérieure : le texte touchait le
   bord. Ils reçoivent ici leur propre respiration, sans
   toucher aux sections pleine largeur du reste du site.
   ------------------------------------------------------------ */

.entry-content .pat-bg-blue,
.entry-content .pat-bg-grey,
.entry-content .pat-bg-orange{
  padding:1.6rem 1.4rem;
  border-radius:var(--pat-radius, 4px);
}

@media (min-width: 700px){
  .entry-content .pat-bg-blue,
  .entry-content .pat-bg-grey,
  .entry-content .pat-bg-orange{
    padding:2.1rem 2.4rem;
  }
}

/* Un peu d'air entre le titre, le texte et le bouton */
.entry-content .pat-bg-blue > * + *,
.entry-content .pat-bg-grey > * + *{ margin-top:1.1rem; }
.entry-content .pat-bg-blue .wp-block-buttons{ margin-top:1.6rem; }


/* ------------------------------------------------------------
   10. BOUTONS DANS UN BLOC COLORÉ

   WordPress place les classes sur l'enveloppe du bouton, pas
   sur le lien lui-même : on obtenait un rectangle blanc avec
   un bouton gris à l'intérieur. On neutralise l'enveloppe et
   on habille le lien.
   ------------------------------------------------------------ */

.wp-block-button.pat-btn{
  background:transparent;
  padding:0;
  min-height:0;
  display:inline-block;
  box-shadow:none;
  border:0;
}

.wp-block-button.pat-btn-white > .wp-block-button__link{
  background:#fff;
  color:var(--pat-blue);
  border:0;
  border-radius:var(--pat-radius, 4px);
  padding:.85rem 1.7rem;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:500;
  font-size:.97rem;
  transition:background-color .18s ease, color .18s ease;
}
.wp-block-button.pat-btn-white > .wp-block-button__link:hover,
.wp-block-button.pat-btn-white > .wp-block-button__link:focus{
  background:var(--pat-orange);
  color:#fff;
}

/* VARIANTE À FILET — 23/09/2026.

   Pour le bloc bleu qui porte DEUX boutons. La règle de la section
   7 bis vaut ici aussi : le bouton plein est l'action principale,
   le filet propose l'alternative. Deux boutons pleins n'en font pas
   deux, ils en font zéro.

   Deux pages seulement l'utilisent aujourd'hui — Technologies FR et
   EN, les seules du site dont le bloc bleu propose une seconde
   destination. Le filet reprend exactement celui de .pat-lien-agenda
   (blanc à 55 %), pour que les deux secondes voies du site se
   ressemblent. */

.wp-block-button.pat-btn-outline-white > .wp-block-button__link{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--pat-radius, 4px);
  /* Le filet ajoute 1 px en haut et en bas : on le reprend sur le
     rembourrage, sinon le bouton a filet depasse le bouton plein de
     2 px et l'alignement se voit. */
  padding:calc(.85rem - 1px) calc(1.7rem - 1px);
  min-height:48px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:500;
  font-size:.97rem;
  transition:background-color .18s ease, border-color .18s ease;
}
.wp-block-button.pat-btn-outline-white > .wp-block-button__link:hover,
.wp-block-button.pat-btn-outline-white > .wp-block-button__link:focus{
  background:rgba(255,255,255,.12);
  border-color:#fff;
  color:#fff;
}

/* Sur téléphone, le bouton prend toute la largeur */
@media (max-width: 520px){
  .wp-block-button.pat-btn{ display:block; width:100%; }
  .wp-block-button.pat-btn-white > .wp-block-button__link{ width:100%; }
  .wp-block-button.pat-btn-outline-white > .wp-block-button__link{ width:100%; }
}


/* ------------------------------------------------------------
   11. MARGES EXTÉRIEURES DES BLOCS COLORÉS — correction du 27/08

   La section 9 leur a donné des marges INTÉRIEURES. Il leur
   manquait les marges EXTÉRIEURES : le bloc bleu se retrouvait
   collé aux cartes situées au-dessus.
   ------------------------------------------------------------ */

.entry-content .pat-bg-blue,
.entry-content .pat-bg-grey,
.entry-content .pat-bg-orange{
  margin-top:2.4rem;
  margin-bottom:2.4rem;
}

@media (min-width: 700px){
  .entry-content .pat-bg-blue,
  .entry-content .pat-bg-grey,
  .entry-content .pat-bg-orange{
    margin-top:3.2rem;
    margin-bottom:3.2rem;
  }
}

/* Pas de marge en trop tout en haut ou tout en bas d'une page */
.entry-content > .pat-bg-blue:first-child,
.entry-content > .pat-bg-grey:first-child{ margin-top:0; }
.entry-content > .pat-bg-blue:last-child,
.entry-content > .pat-bg-grey:last-child{ margin-bottom:0; }

/* Et de l'air sous une grille de cartes qui précède un bloc coloré */
.entry-content .pat-grid + .pat-bg-blue,
.entry-content .pat-grid + .pat-bg-grey{ margin-top:2.8rem; }
@media (min-width: 700px){
  .entry-content .pat-grid + .pat-bg-blue,
  .entry-content .pat-grid + .pat-bg-grey{ margin-top:3.6rem; }
}


/* ------------------------------------------------------------
   12. RESPIRATION AVANT LES TITRES — correction du 27/08

   Un titre de section collé aux cartes qui le précèdent se lit
   comme la légende du bloc du dessus, pas comme l'ouverture de
   ce qui suit. L'écart au-dessus d'un titre doit toujours être
   plus grand que l'écart en dessous.
   ------------------------------------------------------------ */

.entry-content h2,
.entry-content .pat-head{
  margin-top:2.8rem;
}

@media (min-width: 700px){
  .entry-content h2,
  .entry-content .pat-head{ margin-top:3.6rem; }
}

/* Après une grille de cartes, il en faut davantage encore */
.entry-content .pat-grid + h2,
.entry-content .pat-grid + .pat-head,
.entry-content .pat-card + h2,
.entry-content .pat-card + .pat-head{
  margin-top:3.4rem;
}
@media (min-width: 700px){
  .entry-content .pat-grid + h2,
  .entry-content .pat-grid + .pat-head,
  .entry-content .pat-card + h2,
  .entry-content .pat-card + .pat-head{ margin-top:4.4rem; }
}

/* Jamais de marge superflue en tête de page */
.entry-content > h2:first-child,
.entry-content > .pat-head:first-child{ margin-top:0; }

/* Le titre reste plus proche de son propre texte que du bloc précédent */
.entry-content h2 + p,
.entry-content .pat-head + p{ margin-top:.9rem; }


/* ============================================================
   13. BLOCS COLORÉS — RESPIRATION HORS DE `entry-content`
   ------------------------------------------------------------
   L'éditeur de blocs n'enveloppe pas le contenu dans
   `.entry-content` : les règles de la section 9 n'y trouvent
   pas leur cible, et `.pat-section` — dont la marge intérieure
   est verticale seulement — reprend la main. Le texte vient
   alors toucher le bord du bloc dans l'aperçu, alors que la
   page publiée, elle, est correcte.
   On pose donc la respiration sur la classe elle-même, après
   `.pat-section`, pour que l'éditeur et la page affichent la
   même chose.
   ============================================================ */

.pat-bg-blue,
.pat-bg-grey,
.pat-bg-orange{
  padding:1.6rem 1.4rem;
  border-radius:var(--pat-radius, 4px);
}

@media (min-width: 700px){
  .pat-bg-blue,
  .pat-bg-grey,
  .pat-bg-orange{
    padding:2.1rem 2.4rem;
  }
}

/* Un bloc coloré qui contiendrait encore une enveloppe
   `pat-container` n'a pas besoin de marge horizontale
   supplémentaire : elle serait doublée. */
.pat-bg-blue > .pat-container,
.pat-bg-grey > .pat-container,
.pat-bg-orange > .pat-container{
  padding-left:0;
  padding-right:0;
}

/* Dans l'éditeur, reproduire aussi les espacements que la page
   publiée reçoit — sans quoi l'aperçu reste trompeur. */
.editor-styles-wrapper .pat-bg-blue > * + *,
.editor-styles-wrapper .pat-bg-grey > * + *{ margin-top:1.1rem; }
.editor-styles-wrapper .pat-bg-blue .wp-block-buttons{ margin-top:1.6rem; }
.editor-styles-wrapper .pat-bg-blue,
.editor-styles-wrapper .pat-bg-grey{ margin-top:2.4rem; margin-bottom:2.4rem; }
.editor-styles-wrapper .pat-card,
.editor-styles-wrapper .pat-card-top{ margin-bottom:1.6rem; }
.editor-styles-wrapper .pat-grid{ margin-top:1.8rem; margin-bottom:1.8rem; }
.editor-styles-wrapper h2,
.editor-styles-wrapper .pat-head{ margin-top:2.8rem; }


/* ------------------------------------------------------------
   12. SIGLES AVEC INFOBULLE — v2.8, 28/08/2026

   Le balisage est pose par pat-abbr.php, pas dans les pages.
   Ici on ne fait que le rendre visible.

   Le pointille est volontairement discret : il doit signaler
   qu'il y a quelque chose a savoir, sans concurrencer les liens.
   C'est pour cela qu'il est gris et non bleu — un lecteur ne doit
   jamais confondre un sigle explique avec un lien a suivre.

   Sur mobile il n'y a pas de survol : le pointille subsiste, et
   c'est tout. Le glossaire reste la reponse complete. Le
   tabindex pose par le PHP permet au moins d'y acceder au
   clavier, ce qui vaut aussi pour l'accessibilite.
   ------------------------------------------------------------ */

.pat-abbr{
  text-decoration: none;                    /* le soulignement natif du navigateur est trop lourd */
  border-bottom: 1px dotted var(--pat-grey-mid, #94a3b8);
  cursor: help;
}

.pat-abbr:focus{
  outline: 2px solid var(--pat-orange, #E8751A);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Dans un encadre bleu, le pointille gris disparait. */
.pat-bg-blue .pat-abbr{ border-bottom-color: rgba(255,255,255,.45); }


/* ============================================================
   13. VIDEOS — v3.5, 29/08/2026

   Une seule regle, et une decision qui compte plus que la regle :
   preload="none" dans le HTML. Tant que le visiteur ne clique
   pas, rien n'est telecharge, seule l'image d'affiche est
   chargee, quelques dizaines de kilo-octets. Une page qui porte
   trois videos ne pese donc pas trois videos.

   Les proportions sont posees par width/height sur la balise
   <video> : sans elles le navigateur ne connait pas la place a
   reserver et la page saute au chargement de l'affiche. C'est
   le Cumulative Layout Shift, et c'est un critere de classement.

   Le triptyque acariens s'affiche en colonne sur mobile et en
   ligne au-dela de 900 px : trois plans qui se lisent dans
   l'ordre, jamais cote a cote sur un ecran etroit.
   ============================================================ */

.pat-video{
  margin: 2.4rem 0;
}

.pat-video video{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pat-radius);
  background: var(--pat-grey-bg);
  box-shadow: var(--pat-shadow-md);
}

.pat-video figcaption{
  margin-top: .7rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--pat-muted);
}

.pat-video figcaption strong{
  color: var(--pat-blue);
  font-weight: 500;
}

/* Video etroite (colonne de tomographie) : on evite qu'elle
   occupe toute la largeur du texte, ou elle serait enorme. */
.pat-video-etroit video{
  max-width: 320px;
  margin-inline: auto;
}

/* Le triptyque. */
.pat-video-serie{
  display: grid;
  gap: 1.6rem;
  margin: 2.4rem 0;
}

@media (min-width: 900px){
  .pat-video-serie{ grid-template-columns: repeat(3, 1fr); }
  .pat-video-serie .pat-video{ margin: 0; }
  .pat-video-serie figcaption{ font-size: .875rem; }
}

/* ------------------------------------------------------------
   14. FIGURES IMAGE — v3.8, 29/08/2026

   ATTENTION : l'aspect des figures (cadre, legende a filet orange)
   est defini dans le CSS additionnel du site, section 8, et non ici.
   Ce bloc ne pose que ce qui manquait, plus une correction.

   La largeur des images est reglee dans le CSS additionnel, corrige
   le 29/08/2026 : une image plus petite que la colonne n'est plus
   etiree. Ce fichier ne la reprend pas, pour qu'il n'y ait qu'un
   seul endroit ou la regler.
   ------------------------------------------------------------ */

/* Portraits et petites images : on borne, sinon elles pesent
   plus que ce qu'elles disent. */
.pat-figure-etroit img{
  max-width: 360px;
}

/* Un schema vectoriel, lui, occupe toute la colonne : il est net
   a n'importe quelle taille. */
.pat-figure svg{
  display: block;
  width: 100%;
  height: auto;
}

/* La source d'un document tiers, sous la legende. */
.pat-figure-source{
  display: block;
  margin-top: .35rem;
  font-size: .8125rem;
  color: var(--pat-muted);
}

/* Deux figures cote a cote, alignees en haut. */
.pat-figure-paire{
  display: grid;
  gap: 1.6rem;
  margin: 2.4rem 0;
}

@media (min-width: 760px){
  .pat-figure-paire{ grid-template-columns: repeat(2, 1fr); align-items: start; }
  .pat-figure-paire figure.pat-figure{ margin: 0; }
}

/* ------------------------------------------------------------
   14 bis. SCHEMAS : LARGEUR D'AFFICHAGE — v3.22.8, 01/09/2026

   Un schema dense ne se lit pas a la meme echelle qu'un
   paragraphe. Le texte d'un SVG est mis a l'echelle avec le
   dessin : a 375 px de large, un schema de 1200 unites affiche
   ses libelles de 12,5 unites en 3,4 pixels. Illisible.

   Deux corrections, dans les deux sens.
   ------------------------------------------------------------ */

/* GRAND ECRAN — le schema deborde la colonne de contenu et
   gagne environ un quart de largeur. Il reste centre et borne a
   94vw : la page ne defile jamais lateralement. */
/* SELECTEUR VOLONTAIREMENT PLUS SPECIFIQUE — 03/09/2026.
   La CSS additionnelle du personnalisateur porte
   .entry-content .pat-figure{ margin: 2.6rem 0; }, de meme specificite
   que la regle ci-dessous mais chargee APRES la feuille du theme : elle
   remettait margin-left a 0 tout en laissant vivre le translateX(-50%),
   donc toutes les figures larges partaient d'une demi-largeur vers la
   gauche au-dela de 1180 px. On qualifie le selecteur par l'element
   (figure.pat-figure, specificite 0-2-1) : il l'emporte quel que soit
   l'ordre de chargement. Regle generale : une propriete a un seul
   proprietaire, et quand le personnalisateur en revendique une, le
   theme la reprend par la specificite, jamais par !important. */
@media (min-width: 1180px){
  .entry-content figure.pat-figure{
    /* 03/09/2026 — troisieme terme. Les deux premiers se calculent
       sur la FENETRE ; le theme est en separate-containers, donc la
       carte blanche est plus etroite. Mesure sur /technologies/nir/ :
       fenetre 1486 px, carte 1200 px, figure 1397 px — elle sortait du
       blanc de 98 px de chaque cote, legende comprise. Le 100% se
       calcule sur le conteneur : la figure ne peut plus en sortir, a
       n'importe quelle largeur. Verifie sur 12 pages, 28 figures,
       1180 a 1920 px : debordement 0. */
    width: min(1560px, 94vw, 100%);
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
  }
}

/* PETIT ECRAN — la figure s'aligne EXACTEMENT sur le texte courant,
   meme bord gauche, meme bord droit. Rien d'autre.

   Le style par defaut du navigateur pose 40 px de marge laterale sur
   un <figure> : sans cette ligne, la figure est en retrait par rapport
   aux paragraphes qui l'encadrent.

   Un passage pleine largeur a ete essaye le 01/09 puis retire : il
   gagnait 12 % de taille, mais la figure sortait de l'alignement des
   colonnes de texte, ce qui se voit tout de suite et se lit comme un
   defaut. La lisibilite sur petit ecran est traitee par l'ouverture en
   plein ecran, pas en elargissant la figure dans la page. */
@media (max-width: 860px){
  .entry-content figure.pat-figure{
    margin-inline: 0;
  }
}

/* LE BOUTON D'OUVERTURE.

   Trois versions en une soiree, et la troisieme est la bonne :
     1. icone flottante dans le coin, revelee au survol : on ne la
        voyait pas, donc on ne savait pas qu'elle existait ;
     2. gros bouton libelle dans le flux : visible, mais il pesait
        autant que la figure ;
     3. celle-ci. Petite icone dans le coin superieur droit,
        TOUJOURS visible, posee dans une bande vide reservee au-dessus
        du dessin : elle ne recouvre jamais rien.

   La bande est un padding-top sur la figure, pose seulement quand le
   bouton existe. Elle ne coute que 2,2 rem, et elle garantit qu'aucun
   schema ne se retrouve avec un libelle sous l'icone, quel que soit
   son dessin.

   Selecteur volontairement specifique : sans .entry-content, les
   styles de bouton du theme parent reprennent la main et le bouton
   devient une grosse barre sombre. Constate le 01/09. */
/* Le bouton vit DANS la figure, dans son coin superieur droit. Il est pose
   sur un pave blanc borde, ce qui le rend lisible aussi bien sur le bandeau
   bleu du schema agro que sur un fond clair.

   15/09/2026 — LA BANDE EST RETABLIE, ET VOICI POURQUOI.

   Le commentaire ci-dessus promet que l'icone « ne recouvre jamais rien ».
   Une reprise ulterieure a mis ce padding a 0 pour que « la figure ne perde
   plus de hauteur » — et a donc annule cette garantie, SANS corriger le
   commentaire, qui a continue de l'affirmer. Une note qui promet ce que le
   code ne fait plus est pire qu'une absence de note : elle a ete lue comme
   vraie le 14/09.

   Mesure du 15/09, page pharma : le bouton recouvrait « CQA de la forme
   finie » et « CQA du comprime ». Sur un ecran de 375 px il recouvrait SIX
   libelles de la colonne des CQA du schema liquide et SEPT de celui de
   l'OSD — le dessin s'y reduit a 281 px tandis que le bouton en garde 30.

   La hauteur gagnee valait 36 a 40 px sur une figure qui en fait 500 a 1000.
   Le compte n'y etait pas.

   Valeurs : le bouton mesure 26 px a la souris, 30 au doigt, pose a 6 px du
   bord. La bande vaut donc 2,25 rem et 2,5 rem — 4 px de garde sous le
   bouton dans les deux cas, verifie a 375, 762 et 1400 px de large. */
.entry-content .pat-figure-zoomable{
  position: relative;
  padding-top: 2.25rem;
}

.entry-content .pat-figure .pat-zoom-ouvrir{
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--pat-grey);
  border-radius: var(--pat-radius);
  background: var(--pat-white);
  color: var(--pat-blue);
  box-shadow: none;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

/* La cible tactile reste grande alors que l'icone est petite : une
   zone transparente deborde le bouton de 9 px sur chaque cote. Vu a
   l'ecran c'est une icone de 26 px, vu du doigt c'est une cible de
   44 px, qui est le minimum recommande. */
.entry-content .pat-figure .pat-zoom-ouvrir::before{
  content: "";
  position: absolute;
  inset: -9px;
}

/* Le libelle n'apparait pas en clair : il vit dans aria-label et dans
   l'infobulle du navigateur. L'icone, elle, dit deja ce qu'elle fait. */
.entry-content .pat-figure .pat-zoom-ouvrir::after{ content: none; }

/* L'icone du bouton est un <svg>, et le bouton vit DANS la figure :
   sans cette ligne, la regle « .pat-figure svg { width:100% } » de la
   section 14 l'etire a toute la largeur. Trouve a l'essai le 01/09. */
.entry-content .pat-figure .pat-zoom-ouvrir > svg{
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.entry-content .pat-figure .pat-zoom-ouvrir:hover,
.entry-content .pat-figure .pat-zoom-ouvrir:focus-visible{
  color: var(--pat-orange);
  border-color: var(--pat-orange);
  background: var(--pat-orange-soft);
}

/* Au doigt, la cible passe a 44 px et se decolle du bord de l'ecran :
   colle au bord, elle tombe dans la zone des gestes du navigateur. */
@media (hover: none), (max-width: 860px){
  .entry-content .pat-figure .pat-zoom-ouvrir{
    width: 30px;
    height: 30px;
    top: 6px;
    right: 6px;
  }
  .entry-content .pat-figure-zoomable{ padding-top: 2.5rem; }
}

/* La fenetre. 100dvh et non 100vh : sur mobile, vh compte la barre
   d'adresse et le bas de l'ecran se retrouve sous le navigateur. */
.pat-zoom{
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--pat-white);
  overflow: hidden;
}
.pat-zoom::backdrop{ background: rgba(18,39,68,.88); }

.pat-zoom-barre{
  position: absolute;
  top: 0; right: 0;
  z-index: 2;
  padding: .5rem;
}

/* Les commandes de zoom et la fermeture, groupees en haut a droite. */
.pat-zoom-cmd,
.pat-zoom-fermer{
  width: 44px;
  height: 44px;
  font-size: 1.7rem;
  line-height: 1;
  padding: 0;
  border: 1px solid var(--pat-grey);
  border-radius: var(--pat-radius);
  background: var(--pat-white);
  color: var(--pat-blue);
  cursor: pointer;
}
.pat-zoom-cmd + .pat-zoom-cmd,
.pat-zoom-cmd + .pat-zoom-fermer{ margin-left: .35rem; }

.pat-zoom-cmd:hover,
.pat-zoom-fermer:hover{ color: var(--pat-orange); border-color: var(--pat-orange); }

.pat-zoom-cmd:disabled{ opacity: .35; cursor: default; }
.pat-zoom-cmd:disabled:hover{ color: var(--pat-blue); border-color: var(--pat-grey); }

.pat-zoom-barre{ display: flex; }

/* Le cadre. A l'ouverture le schema y tient ENTIER : rien n'est
   coupe. Les boutons + et moins l'agrandissent par paliers, et c'est
   alors seulement que le cadre defile. Mise en page en bloc et non en
   flex : un enfant plus large que son conteneur flex centre ne se
   laisse pas faire defiler vers la gauche. */
.pat-zoom-cadre{
  position: absolute;
  inset: 0 0 2.6rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 3.6rem 1rem 1rem;
  display: block;
  text-align: center;
}
.pat-zoom-cadre > svg{
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: none;
  height: auto;
}

.pat-zoom-aide{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: .55rem 1rem;
  font-size: .82rem;
  color: var(--pat-muted);
  background: var(--pat-grey-bg);
  border-top: 1px solid var(--pat-grey);
  text-align: center;
}

/* ------------------------------------------------------------
   15. SECTIONS DEPLIABLES — v3.9, 29/08/2026

   Une page du site porte de 1500 a 2900 mots. C'est ce qu'il faut
   pour repondre vraiment, et c'est ce que citent les moteurs et
   les modeles de langage. Mais tout afficher d'un bloc fait fuir.

   Le contenu ne bouge pas : il est dans la page, indexe, cite.
   Seul l'affichage change. A l'arrivee le lecteur voit le chapo,
   l'argument principal et une liste de portes. Il ouvre ce qui le
   concerne.

   Le titre reste un <h2> a l'interieur du <summary> : le plan de
   la page est conserve pour l'accessibilite et pour le referencement.
   ------------------------------------------------------------ */

.pat-depli{
  border-top: 1px solid var(--pat-grey);
  margin: 0;
}

.pat-depli:last-of-type{
  border-bottom: 1px solid var(--pat-grey);
}

.pat-depli > summary{
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.4rem 1.15rem 0;
  position: relative;
}

.pat-depli > summary::-webkit-details-marker{ display: none; }

.pat-depli > summary::after{
  content: "+";
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 300;
  color: var(--pat-orange);
}

.pat-depli[open] > summary::after{ content: "\2013"; }

.pat-depli > summary h2{
  margin: 0;
  font-size: 1.3rem;
  transition: color .15s ease;
}

.pat-depli > summary:hover h2,
.pat-depli > summary:focus-visible h2{ color: var(--pat-orange); }

.pat-depli > summary:focus-visible{
  outline: 2px solid var(--pat-orange);
  outline-offset: 2px;
}

/* Ce qui est a l'interieur d'un depliant retrouve la pleine largeur :
   sinon les tableaux et les grilles se retrouvent bornes deux fois. */
.entry-content .pat-depli > *:not(summary){ max-width: none; }

.pat-depli[open]{ padding-bottom: 1.6rem; }

/* La premiere ligne d'un depliant ouvert ne doit pas coller au titre. */
.pat-depli[open] > *:nth-child(2){ margin-top: .2rem; }

/* ------------------------------------------------------------------
   15 bis. PLI DE CARTE — « Plus d'infos… »
   Ajoute le 30 aout 2026. Replie la fin d'une carte pour tenir le
   plafond de 500 mots visibles par page, sans sortir le texte du
   HTML servi : le contenu reste indexable et lisible au clavier.
------------------------------------------------------------------ */

.pat-depli-mini{
  margin: .9rem 0 0;
  border-top: 1px solid var(--pat-grey);
  padding-top: .7rem;
}

.pat-depli-mini > summary{
  list-style: none;
  cursor: pointer;
  display: inline-block;
  font-size: .92rem;
  font-weight: 500;
  color: var(--pat-orange-dark);
  padding-right: 1.1rem;
  position: relative;
  transition: color .15s ease;
}

.pat-depli-mini > summary::-webkit-details-marker{ display: none; }

.pat-depli-mini > summary::after{
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 400;
}

.pat-depli-mini[open] > summary::after{ content: "\2013"; }

.pat-depli-mini > summary:hover,
.pat-depli-mini > summary:focus-visible{ color: var(--pat-orange); }

.pat-depli-mini > summary:focus-visible{
  outline: 2px solid var(--pat-orange);
  outline-offset: 2px;
}

/* Le corps du pli reprend la typographie de la carte, en un cran plus bas. */
.pat-depli-mini > *:not(summary){
  font-size: .95rem;
  margin-top: .55rem;
}

.pat-depli-mini > *:last-child{ margin-bottom: 0; }

/* Dans une carte a cadre orange, le filet du pli suit la couleur du cadre. */
.pat-card-top .pat-depli-mini{ border-top-color: var(--pat-orange-soft); }

/* Sur fond bleu, le libelle doit rester lisible. */
.pat-bg-blue .pat-depli-mini > summary{ color: #FFFFFF; }
.pat-bg-blue .pat-depli-mini{ border-top-color: rgba(255,255,255,.35); }

/* ------------------------------------------------------------------
   16. FORMULAIRE DE CONTACT — v3.14, 31/08/2026
   Habille le formulaire Contact Form 7 pose sur /contact/ et
   /en/contact-us/. Le balisage est ecrit dans l'ecran Contact du
   tableau de bord : ici, seulement l'aspect.
   Regle : aucune couleur ne signale une erreur par le rouge seul,
   le message ecrit reste la source d'information.
------------------------------------------------------------------ */

.pat-form{ margin: 1.6rem 0 0; }

/* Deux colonnes des que la place le permet, une seule en dessous. */
.pat-form-grille{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1.4rem;
}

@media(min-width:700px){
  .pat-form-grille{ grid-template-columns: 1fr 1fr; }
}

.pat-champ{ margin: 0; }
.pat-champ-large{ margin: 1.2rem 0 0; }

.pat-champ label{
  display: block;
  font-size: .9rem;
  font-weight: 500;
  color: var(--pat-blue);
  margin-bottom: .35rem;
  letter-spacing: .005em;
}

.pat-obl{ color: var(--pat-orange); font-weight: 600; }

.pat-form input[type="text"],
.pat-form input[type="email"],
.pat-form input[type="tel"],
.pat-form select,
.pat-form textarea{
  width: 100%;
  font-family: var(--pat-font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--pat-ink);
  background: var(--pat-white);
  border: 1px solid var(--pat-grey);
  border-radius: var(--pat-radius);
  padding: .62rem .8rem;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* Le select garde un chevron, sinon il ne se lit plus comme une liste. */
.pat-form select{
  background-image: linear-gradient(45deg,transparent 50%,var(--pat-muted) 50%),
                    linear-gradient(135deg,var(--pat-muted) 50%,transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

.pat-form textarea{ resize: vertical; min-height: 9rem; }

.pat-form ::placeholder{ color: var(--pat-muted); opacity: .75; }

.pat-form input:focus,
.pat-form select:focus,
.pat-form textarea:focus{
  outline: none;
  border-color: var(--pat-orange);
  box-shadow: 0 0 0 3px var(--pat-orange-soft);
}

/* La mention d'information, puis la case facultative. */
.pat-form-rgpd{
  margin: 1.3rem 0 0;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--pat-muted);
  background: var(--pat-grey-bg);
  border-left: 3px solid var(--pat-grey);
  border-radius: 0 var(--pat-radius) var(--pat-radius) 0;
  padding: .85rem 1rem;
}

.pat-form-rgpd a{ color: var(--pat-blue); }
.pat-form-rgpd a:hover{ color: var(--pat-orange); }

.pat-form-option{
  margin: .9rem 0 0;
  font-size: .92rem;
  color: var(--pat-ink);
}

.pat-form-option .wpcf7-list-item{ margin: 0; }

.pat-form-option label{
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  cursor: pointer;
}

.pat-form input[type="checkbox"]{
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .18rem;
  flex: 0 0 auto;
  accent-color: var(--pat-orange);
  cursor: pointer;
}

.pat-form-envoi{ margin: 1.4rem 0 0; }

.pat-form input[type="submit"]{
  font-family: var(--pat-font);
  font-weight: 500;
  font-size: .95rem;
  padding: .78rem 1.8rem;
  border: 1px solid transparent;
  border-radius: var(--pat-radius);
  background: var(--pat-orange);
  color: #fff;
  cursor: pointer;
  transition: background .18s, transform .18s;
}

.pat-form input[type="submit"]:hover{
  background: var(--pat-orange-dark);
  transform: translateY(-1px);
}

.pat-form input[type="submit"]:disabled{
  background: var(--pat-grey);
  cursor: progress;
  transform: none;
}

/* Retours de Contact Form 7. Le cadre porte la couleur, le texte
   porte le sens : un ecran en niveaux de gris reste lisible. */
.wpcf7 form .wpcf7-response-output{
  margin: 1.2rem 0 0;
  padding: .85rem 1rem;
  font-size: .93rem;
  line-height: 1.55;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--pat-radius);
}

.wpcf7 form.sent .wpcf7-response-output{
  border-color: var(--pat-blue);
  background: var(--pat-grey-bg);
  color: var(--pat-blue);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{
  border-color: var(--pat-orange);
  background: var(--pat-orange-soft);
  color: var(--pat-orange-dark);
}

.wpcf7-not-valid-tip{
  display: block;
  margin-top: .3rem;
  font-size: .84rem;
  color: var(--pat-orange-dark);
}

.pat-form .wpcf7-not-valid{
  border-color: var(--pat-orange);
  background: var(--pat-orange-soft);
}

.wpcf7-spinner{ margin-left: .7rem; }

/* Le champ de controle anti-robot ne doit jamais apparaitre,
   ni prendre le focus au clavier. */
.pat-form .wpcf7-honeypot-container,
.pat-form input[name^="pat-verification"],
.pat-form input[name^="pat-check"]{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   17. BARRE DE COPYRIGHT DU THEME PARENT — v3.15, 31/08/2026
   Le filtre generate_copyright de functions.php vide la barre ; le
   conteneur, lui, appartient au theme parent. Il se masque ici.
   Le pied de page du site porte la seule mention de copyright.
------------------------------------------------------------------ */

.site-info{ display: none; }

/* ------------------------------------------------------------------
   18. BLOCS COLORÉS — LE VIDE AU-DESSUS DU TITRE — v3.19, 31/08/2026

   Mesuré sur la page servie : 102 px de bleu au-dessus du titre de
   l'appel à l'action, contre 45 px sous le bouton. Le bloc n'était
   pas trop grand, il était decentre.

   Deux respirations s'additionnaient. Le bloc porte 2,8 rem de marge
   intérieure haute (section 9). Et le titre qu'il contient recevait
   en plus les 3,6 rem de marge haute que la section 12 pose sur tout
   h2 de `.entry-content`, pour l'écarter de ce qui le précède — sauf
   qu'ici rien ne le précède : il ouvre le bloc.

   La marge intérieure du bloc suffit donc. On annule celle du
   premier enfant, et symétriquement celle du dernier, pour que le
   haut et le bas du bloc respirent pareil. Le bloc perd environ
   58 px de hauteur sur grand écran, sans que rien ne se resserre.
------------------------------------------------------------------ */

.entry-content .pat-bg-blue > *:first-child,
.entry-content .pat-bg-grey > *:first-child,
.entry-content .pat-bg-orange > *:first-child,
.entry-content .pat-section > *:first-child,
.entry-content .pat-bg-blue > .pat-container > *:first-child,
.entry-content .pat-bg-grey > .pat-container > *:first-child,
.entry-content .pat-bg-orange > .pat-container > *:first-child{
  margin-top: 0;
}

.entry-content .pat-bg-blue > *:last-child,
.entry-content .pat-bg-grey > *:last-child,
.entry-content .pat-bg-orange > *:last-child,
.entry-content .pat-section > *:last-child,
.entry-content .pat-bg-blue > .pat-container > *:last-child,
.entry-content .pat-bg-grey > .pat-container > *:last-child,
.entry-content .pat-bg-orange > .pat-container > *:last-child{
  margin-bottom: 0;
}

/* Marge intérieure verticale ramenée de 2,8 à 2,1 rem sur grand
   écran, et de 1,9 à 1,6 rem sur téléphone, le 31/08 (v3.20.0).
   L'horizontale ne bouge pas : 2,4 rem et 1,4 rem. Avec l'annulation
   des marges ci-dessus, le bloc d'appel à l'action passe de 102 px
   et 45 px à 34 px et 34 px. Revenir en arrière tient en deux
   valeurs, ici et dans les sections 9 et 13. */

/* Même chose dans l'éditeur de blocs, qui n'enveloppe pas le
   contenu dans `.entry-content` — voir la note de la section 13. */
.pat-bg-blue > *:first-child,
.pat-bg-grey > *:first-child,
.pat-bg-orange > *:first-child{ margin-top: 0; }

.pat-bg-blue > *:last-child,
.pat-bg-grey > *:last-child,
.pat-bg-orange > *:last-child{ margin-bottom: 0; }

/* ------------------------------------------------------------------
   19. PIED DE PAGE — LE VIDE AUTOUR DU CONTENU — v3.21, 31/08/2026

   Mesure sur la page servie : 48 px de bleu au-dessus du logo et
   48 px sous la ligne de liens, pour 64 px de contenu. Le pied de
   page faisait 159 px de haut dont 96 de vide.

   Deux marges intérieures s'empilaient : celle de `#footer-widgets`,
   1,1 rem, et les 40 px que GeneratePress pose sur
   `.footer-widgets-container` dans widget-areas.css — une valeur
   pensée pour trois ou quatre colonnes de widgets, alors que le pied
   de page tient en une barre : un logo, une ligne de copyright, une
   ligne de liens.

   On ne touche que le vertical. Les 40 px horizontaux et le jeu
   `inner-padding` / `inside-footer-widgets` qui construit les
   colonnes restent intacts. Resultat : 24 px et 24 px, 112 px de
   haut au lieu de 159.
------------------------------------------------------------------ */

.site.footer-widgets{
  padding-top: .9rem;
  padding-bottom: .9rem;
}

.footer-widgets-container{
  padding-top: .6rem;
  padding-bottom: .6rem;
}


/* ------------------------------------------------------------------
   Menu principal : habillage entre 768 et 1400 px
   Sept entrees plus le bouton d'appel font 1041 px cumules. L'espace
   disponible vaut la largeur de fenetre moins 80 px de marges et
   249 px de logo : le bouton passait a la ligne des 1380 px, et le
   menu tenait sur trois lignes sous 1024 px, le hamburger n'arrivant
   qu'a 768 px.

   1441 px et au-dessus  : inchange
   1361 a 1440 px        : entrees resserrees, une seule ligne
                           (le menu anglais est plus large que le
                           francais : il debordait encore vers 1410 px)
   1360 px et en dessous : menu hamburger

   Verifie de 1920 a 760 px le 7 septembre 2026.
------------------------------------------------------------------ */

@media (max-width: 1440px) and (min-width: 1361px) {
  .main-navigation .main-nav ul li.menu-item > a {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* le theme pose sa regle de padding en ligne dans le <head> : a specificite
     egale elle passe apres la feuille du theme enfant, d'ou le !important */
  .main-navigation .main-nav ul li.menu-item:last-child > a {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 1360px) {
  .main-navigation:not(.toggled) .main-nav > ul {
    display: none;
  }
  .main-navigation .menu-toggle {
    display: block;
  }
  .main-navigation.toggled .main-nav > ul {
    display: block;
  }
  .main-navigation.toggled .main-nav > ul > li {
    float: none;
    display: block;
    width: 100%;
  }
}


/* Bouton agenda sur fond clair — haut de la page contact (07/09/2026).
   GeneratePress pose son style de bouton en ligne dans le <head> : a specificite
   egale il passe apres la feuille du theme enfant, d'ou le !important.

   PLEIN DEPUIS LE 23/09/2026. Il etait a filet, c'est-a-dire habille en
   action secondaire, alors que c'est la premiere action proposee sur la
   seule page dont le metier est de convertir. Arbitrage tranche ce jour :
   sur la page contact, l'action principale est la prise de rendez-vous ;
   le formulaire est la seconde voie. Le bouton passe donc en orange plein,
   comme tout bouton principal du site, et la section 7 bis redevient vraie
   ici aussi. */
.pat-agenda-haut{ justify-content:flex-start; margin:1.25rem 0 .35rem; }
.pat-agenda-haut .wp-block-button{ width:auto; display:inline-block; }
.pat-agenda-haut .wp-block-button__link{
  background:var(--pat-orange) !important;
  color:#fff !important;
  border:1.5px solid var(--pat-orange) !important;
  width:auto !important;
}
.pat-agenda-haut .wp-block-button__link:hover,
.pat-agenda-haut .wp-block-button__link:focus{
  background:var(--pat-orange-dark) !important;
  border-color:var(--pat-orange-dark) !important;
  color:#fff !important;
}


/* Formulaire : resserrer l'ecart entre l'intitule et son champ (08/09/2026).
   Le gabarit CF7 pose <label>…</label><br><span class="wpcf7-form-control-wrap">…
   Le <br> ouvre une ligne vide complete (line-height 28px) entre les deux.
   On neutralise le <br>, on passe l'intitule et l'enveloppe en bloc, et on
   controle l'ecart par une marge. */
.pat-form .pat-champ{ line-height:1.35; }
.pat-form .pat-champ > br{ display:none; }
.pat-form .pat-champ > label{ display:block; margin:0 0 6px; line-height:1.3; }
.pat-form .pat-champ .wpcf7-form-control-wrap{ display:block; }
.pat-form .pat-champ + .pat-champ,
.pat-form .pat-form-grille > .pat-champ{ margin-top:0; }


/* Resserrement des cartes (08/09/2026) — le cadre pesait 56 px de marge
   interieure pour 95 px de contenu. On reduit le rembourrage et l'interligne
   des textes de carte, sans toucher aux corps de police. */
.pat-card, .pat-card-top{ padding:18px; }
.pat-card > h3, .pat-card-top > h3{ margin-bottom:6px; }
.pat-card > p, .pat-card-top > p{ line-height:1.5; }
.pat-card > p + p, .pat-card-top > p + p{ margin-top:.6em; }
@media (max-width:600px){
  .pat-card, .pat-card-top{ padding:16px; }
}


/* Troisieme niveau du menu, en mode hamburger (09/09/2026).
   Constat mesure : le lien de niveau 3 rendait exactement comme celui de
   niveau 2 — meme rembourrage a gauche (20 px), meme corps (14 px), meme
   fond gris (#f0f0f0). Il se lisait donc comme un pair et non comme un
   enfant, et l'ouverture du volet passait inapercue. Le survol de bureau
   n'a pas ce defaut : il ouvre un volet lateral, donc la hierarchie s'y voit.
   Le decalage ci-dessous ne s'applique qu'au menu deroule. */
@media (max-width: 1340px) {
  .main-navigation.toggled .main-nav ul ul ul a {
    padding-left: 44px;
  }
  .main-navigation.toggled .main-nav ul ul ul {
    background-color: #e8e8e8;
  }
}


/* ---------------------------------------------------------------------------
   Fil d'Ariane
   Pascal s'etait perdu dans le site : il ne cherchait pas seulement l'accueil,
   il ne savait pas ou il se trouvait. Le fil repond aux deux questions, et
   devient necessaire des lors qu'il y a un troisieme niveau sous Technologies.
   Il est rendu hors de .entry-content : il ne compte donc pas dans le plafond
   de mots visibles.
   --------------------------------------------------------------------------- */
.pat-fil {
  margin: 0 0 1.5rem;
  font-size: .82rem;
  line-height: 1.5;
}
.pat-fil ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem .4rem;
}
.pat-fil li {
  display: flex;
  align-items: center;
  color: var(--pat-muted);
}
.pat-fil li + li::before {
  content: "\203A";           /* chevron simple */
  margin-right: .4rem;
  color: var(--pat-grey);
  font-size: .95em;
}
.pat-fil a {
  color: var(--pat-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.pat-fil a:hover,
.pat-fil a:focus-visible {
  color: var(--pat-blue);
  border-bottom-color: currentColor;
}
.pat-fil [aria-current="page"] {
  color: var(--pat-ink);
  font-weight: 500;
}
/* Sur mobile, le dernier maillon peut etre long : on le laisse passer a la
   ligne plutot que de le tronquer, un fil tronque ne dit plus ou l'on est. */
@media (max-width: 600px) {
  .pat-fil { font-size: .78rem; margin-bottom: 1.1rem; }
}

/* ---------------------------------------------------------------------------
   Le logo ramene a l'accueil, et cela doit se voir
   Remarque de Pascal : ecrit comme un titre, PAT-INDUSTRY ne se lit pas comme
   un lien, et il revenait a l'accueil en cliquant sur « Mesurer ».
   --------------------------------------------------------------------------- */
.site-branding a,
.main-title a,
.navigation-branding a {
  transition: color .15s ease, opacity .15s ease;
}
.site-branding a:hover,
.main-title a:hover,
.navigation-branding a:hover,
.site-branding a:focus-visible,
.main-title a:focus-visible,
.navigation-branding a:focus-visible {
  color: var(--pat-orange);
}
.site-logo a:hover img,
.site-branding a:hover img,
.navigation-branding a:hover img {
  opacity: .82;
}
.site-branding a:focus-visible,
.main-title a:focus-visible,
.navigation-branding a:focus-visible {
  outline: 2px solid var(--pat-orange);
  outline-offset: 3px;
}


/* ---------------------------------------------------------------------------
   En-tete : conteneur elargi, et bouton d'appel a l'action
   Le menu de niveau 1 mesure 942 px au gabarit reel (Jost 15,2 px, 40 px de
   padding). Avec le logo et les marges, un conteneur a 1200 px n'en laissait
   que 970 : le bouton ne tenait pas. L'en-tete seul est elargi ; le contenu
   des pages reste a 1200 px.
   --------------------------------------------------------------------------- */
.site-header .inside-header,
.site-header > .grid-container {
  max-width: min(1400px, 100%);
}


/* ---------------------------------------------------------------------------
   Le dernier item du menu est l'appel a l'action
   Il reste dans la liste — c'est la demande — mais se lit comme un bouton.
   Largeurs au gabarit reel (Jost 15,2 px) : sept entrees a 34 px de padding
   font 900 px, la huitieme en fait 186 avec son cadre, soit 1 086 px contre
   1 170 disponibles dans un en-tete elargi a 1400 px. 84 px de marge.
   --------------------------------------------------------------------------- */
@media (min-width: 1341px) {
  .main-navigation .main-nav > ul > li > a {
    padding-left: 17px;
    padding-right: 17px;
  }
  .main-navigation .main-nav > ul > li.pat-menu-cta {
    margin-left: 10px;
    display: flex;
    align-items: center;
  }
  .main-navigation .main-nav > ul > li.pat-menu-cta > a {
    padding: 9px 20px;
    border-radius: var(--pat-radius);
    background: var(--pat-orange);
    color: var(--pat-white);
    line-height: 1.25;
    font-weight: 500;
    transition: background-color .15s ease, transform .15s ease;
  }
  .main-navigation .main-nav > ul > li.pat-menu-cta > a:hover,
  .main-navigation .main-nav > ul > li.pat-menu-cta > a:focus-visible {
    background: var(--pat-orange-dark);
    color: var(--pat-white);
    transform: translateY(-1px);
  }
}

/* Menu replie : le meme item devient un bouton pleine largeur, atteignable
   au pouce, detache de la liste par une marge. */
@media (max-width: 1340px) {
  .main-navigation .main-nav ul li.pat-menu-cta > a {
    margin: 12px 20px 16px;
    padding: 13px 20px;
    border-radius: var(--pat-radius);
    background: var(--pat-orange);
    color: var(--pat-white);
    text-align: center;
    font-weight: 500;
  }
  .main-navigation .main-nav ul li.pat-menu-cta > a:hover {
    background: var(--pat-orange-dark);
    color: var(--pat-white);
  }
}

/* ---------------------------------------------------------------------------
   Onglets par secteur
   Sans JavaScript, tous les panneaux restent visibles et la page se lit
   normalement. Le script pose « pat-onglets-actifs » et le comportement
   d'onglets s'applique alors seulement.
   --------------------------------------------------------------------------- */
.pat-onglets { margin: 2rem 0; }

.pat-onglets-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 -1px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--pat-grey);
}
.pat-onglets-liste button {
  appearance: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--pat-radius) var(--pat-radius) 0 0;
  background: transparent;
  padding: 10px 16px;
  font-family: var(--pat-font);
  font-size: .92rem;
  color: var(--pat-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.pat-onglets-liste button:hover { color: var(--pat-blue); background: var(--pat-grey-bg); }
.pat-onglets-liste button[aria-selected="true"] {
  background: var(--pat-white);
  border-color: var(--pat-grey);
  color: var(--pat-blue);
  font-weight: 500;
  box-shadow: inset 0 3px 0 var(--pat-orange);
}
.pat-onglets-liste button:focus-visible {
  outline: 2px solid var(--pat-orange);
  outline-offset: -2px;
}

.pat-panneau {
  border: 1px solid var(--pat-grey);
  border-top: none;
  border-radius: 0 0 var(--pat-radius) var(--pat-radius);
  padding: 1.4rem 1.4rem .4rem;
}
.pat-panneau > h3:first-child { margin-top: 0; }

/* Sans JavaScript : les panneaux s'enchainent, chacun precede de son titre. */
.pat-onglets:not(.pat-onglets-actifs) .pat-onglets-liste { display: none; }
.pat-onglets:not(.pat-onglets-actifs) .pat-panneau {
  border: 1px solid var(--pat-grey);
  border-radius: var(--pat-radius);
  margin-bottom: 1rem;
}

/* Avant que le script du pied de page prenne la main — 15/09/2026.
   Le bloc ci-dessus dessine l'etat SANS JavaScript : liste d'onglets masquee,
   panneaux empiles en cartes. Il n'a jamais servi, parce que l'attribut
   « hidden » etait ecrit en dur dans le contenu des six pages a onglets et que
   [hidden] vaut display:none. Cinq panneaux sur six de /mesurer/ etaient donc
   absents pour qui n'execute pas de script — cinq des six secteurs cibles.

   Le contenu est corrige. Ces trois regles traitent ce qu'il restait : la
   seconde ou les six panneaux se deplient avant de se refermer. Elles ne
   s'appliquent que sous « .pat-js », classe posee par un script minuscule en
   tete de page : sans JavaScript elle n'existe pas, et l'etat empile ci-dessus
   reprend ses droits. C'est la promesse du thème, enfin tenue.

   Elles viennent APRES le bloc ci-dessus a dessein : specificite egale sur la
   liste d'onglets, c'est l'ordre qui tranche. Ne pas les deplacer. */
.pat-js .pat-onglets .pat-onglets-liste { display: flex; }
.pat-js .pat-onglets:not(.pat-onglets-actifs) > [role="tabpanel"] ~ [role="tabpanel"] { display: none; }
.pat-js .pat-onglets:not(.pat-onglets-actifs) .pat-panneau {
  border-top: none;
  border-radius: 0 0 var(--pat-radius) var(--pat-radius);
  margin-bottom: 0;
}

/* La meme chose entre 601 et 1179 px — ajoute en 3.30.9.
   La regle posee en 3.30.8 etait bornee a 600 px : c'etait trop etroit. Le
   retrait existe a TOUTE largeur ou la figure doit s'aligner sur le texte,
   c'est-a-dire partout sous 1180 px. Mesure a 762 px avant correction : texte
   courant 702, schema dans un panneau 655 — 23 px de chaque cote, soit le
   padding de 1.4rem plus la bordure.

   Au-dela de 1180 px la regle des grands ecrans prend le relais et la figure
   deborde volontairement la colonne : on n'y touche pas ici.

   1179.98 et non 1180 : a 1180 pile, les deux blocs s'appliqueraient. */
@media (max-width: 1179.98px){
  .entry-content .pat-panneau > .pat-figure { margin-left: -1.4rem; margin-right: -1.4rem; }
}

@media (max-width: 600px) {
  .pat-onglets-liste button { padding: 9px 12px; font-size: .86rem; }
  .pat-panneau { padding: 1.1rem 1rem .3rem; }

  /* Un schema dans un panneau d'onglets reprend la largeur du panneau.
     15/09/2026. Mesure a 375 px : le texte courant occupe 315 px, un schema
     hors panneau aussi — mais un schema DANS un panneau tombait a 281, retrait
     de 17 px de chaque cote (16 de padding + 1 de bordure). Le dessin perdait
     34 px, soit 11 % de sa largeur, sur l'ecran ou il en a le moins.

     Le -1rem annule exactement le padding pose deux lignes plus haut : si l'un
     change, l'autre doit suivre. Le schema s'arrete a la bordure de la carte,
     il ne la franchit pas.

     Cible volontairement etroite : .pat-figure seulement. Les panneaux de
     /mesurer/ contiennent un titre et un tableau dont les cellules s'empilent
     a cette largeur — ils n'ont pas besoin de place, et les elargir seuls
     casserait l'alignement interne de la carte. */
  .entry-content .pat-panneau > .pat-figure { margin-left: -1rem; margin-right: -1rem; }
}


/* ------------------------------------------------------------------
   Schema de procede in-line / on-line / at-line — 11/09/2026,
   revu le 11/09/2026 au soir.

   PREMIERE VERSION, ABANDONNEE : un min-width de 680 px, pour garder
   les libelles lisibles, et un defilement horizontal en dessous. Le
   defaut se voyait des 700 px de fenetre — une fenetre a demi-ecran,
   pas un telephone : le schema se faisait couper et une barre de
   defilement apparaissait sous lui.

   VERSION RETENUE : le schema suit la colonne, comme tous les autres
   schemas du site. La lisibilite des libelles sur petit ecran n'est
   pas l'affaire du CSS — aucune regle ne peut a la fois faire tenir
   le dessin et grossir son texte. C'est pat-zoom.php qui s'en charge,
   en sortant le schema de la colonne au clic ; il suffit que la
   figure porte la classe pat-figure, ce qui est desormais le cas.

   overflow-x a ete retire avec lui. Mesure faite : sans debordement
   reel, la mise a l'echelle du SVG laisse deux pixels de reste par
   arrondi sous-pixel, et cela suffisait a faire apparaitre une barre
   de defilement sous le schema a toutes les largeurs. Les autres
   figures du site ne declarent pas overflow-x ; celle-ci non plus.
   ------------------------------------------------------------------ */
.pat-schema {
  margin: 1.6rem 0 .4rem;
}

.pat-schema svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .pat-schema { margin: 1.2rem -1rem .4rem; padding: 0 1rem; }
}

/* Bouton de relecture du schéma animé. Révélé par le script : sans
   JavaScript il n'y a rien à rejouer, il reste donc caché.
   « sticky » le maintient visible quand le schéma défile sur petit écran. */
.pat-rejouer {
  position: sticky;
  left: 0;
  display: inline-block;
  margin-top: .6rem;
  padding: 6px 14px;
  font-family: var(--pat-font);
  font-size: .85rem;
  color: var(--pat-blue);
  background: var(--pat-white);
  border: 1px solid var(--pat-grey);
  border-radius: var(--pat-radius);
  cursor: pointer;
}

.pat-rejouer:hover {
  border-color: var(--pat-orange);
  color: var(--pat-orange-dark);
}

.pat-rejouer:focus-visible {
  outline: 2px solid var(--pat-orange);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pat-rejouer { display: none; }
}

/* ------------------------------------------------------------------
   Logo d'en-tête ramené de 227 à 180 px de large — 11/09/2026.
   Les 47 px rendus vont au menu, qui débordait : le bouton d'appel
   passait sur une deuxième ligne au-dessus de 1366 px.
   ------------------------------------------------------------------ */
/* Le « !important » n'est pas un caprice : une règle de CSS additionnel du
   Customizer, injectée en ligne APRÈS cette feuille, impose
   « max-height: 44px !important ; width: auto !important » au logo.
   Seule une règle plus spécifique, et elle aussi en !important, la bat.
   Limité au-dessus de 1025 px : en mobile le logo garde son plafond. */
@media (min-width: 1025px) {
  .site-header img.header-image,
  .navigation-branding img.header-image {
    width: 180px !important;
    height: auto !important;
    max-height: none !important;
  }
}


/* ============================================================
   MENTION CIR/CII EN PIED DE PAGE
   ============================================================
   Attention : tout le reste de l'habillage du pied de page
   (.pat-footer, .pat-footer-bas, .pat-footer-legal) ne vit PAS
   dans ce fichier mais dans le CSS additionnel du Personnaliser,
   injecte apres cette feuille. Ces regles-ci n'y ont aucun
   equivalent, donc aucun conflit — mais si un jour l'affichage
   du pied de page resiste a une modification faite ici, c'est
   la-bas qu'il faut regarder.

   Une ligne volontairement effacee : elle informe, elle ne vend
   pas. Le filet la detache du bloc du dessus sans ajouter de
   bande — meme fond, meme largeur, un cran plus bas dans la
   hierarchie. */
.pat-footer-cir{
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.pat-footer-cir p{
  margin: 0;
  color: rgba(255,255,255,.45);
  font-family: var(--pat-font);
  font-size: .72rem;
  line-height: 1.45;
}
@media (max-width: 400px){
  .pat-footer-cir p{ font-size: .69rem; }
}


/* ------------------------------------------------------------------
   CARTES : LE VIDE EN HAUT ET EN BAS — 12/09/2026

   Mesuré sur la carte « L'essentiel en quatre points » : 345 px de
   hauteur pour 206 px de contenu. La marge haute du titre (57,6 px)
   s'ajoutait au padding de la carte (18 px), soit 75 px de vide
   au-dessus du premier mot, et 43 px sous le dernier.

   Un premier enfant n'a pas besoin de sa marge haute, un dernier
   enfant pas de sa marge basse : le padding de la carte fait déjà
   le travail. Vaut pour toutes les cartes du site.
   ------------------------------------------------------------------ */
.pat-card > :first-child { margin-top: 0; }
.pat-card > :last-child  { margin-bottom: 0; }


/* ------------------------------------------------------------------
   Titre de carte cliquable — 28/09/2026
   Un h3 de carte qui contient un lien est un TITRE, pas un lien de
   texte courant : il reprenait la couleur bleue et le soulignement
   des liens, ce qui écrasait le `color:var(--pat-orange-dark)` de
   .pat-card-top h3 et faisait lire les cartes comme une liste de
   liens. Il hérite désormais de la couleur de son titre et ne se
   souligne qu'au survol ou au focus clavier.
   ------------------------------------------------------------------ */
.pat-card h3 a,
.pat-card-top h3 a{ color:inherit; text-decoration:none; }
.pat-card h3 a:hover,
.pat-card h3 a:focus-visible,
.pat-card-top h3 a:hover,
.pat-card-top h3 a:focus-visible{ text-decoration:underline; text-underline-offset:.15em; }