/* site.css - LA feuille de style du socle Granuloshop.
   Regle du 14/10/2026 : un seul CSS pour tout le site. Sortie du corps de
   l'accueil, ou elle voyageait dans chacune des huit pages a chaque visite.
   Les pages de section emploient encore base.css : les reunir demande de
   trancher quatre selecteurs generiques - body, h1, .large, .sous - que les
   deux feuilles definissent, et deux valeurs, --encre et --rayon. */
:root{
  --encre:#1a1a1a; --gris:#5b6770; --trait:#e3e9ee;
  --fond:#f6f8fa; --carte:#ffffff; --lien:#0166a8; --jaune:#FFED00;
  --rayon:14px;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.55;
}
.large{max-width:1060px; margin:0 auto; padding:0 16px;}
a{color:var(--lien);}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--lien); outline-offset:2px;
}

/* ---- Bandeau ---- */
.bandeau{background:var(--carte); border-bottom:1px solid var(--trait);}
/* ALIGNEMENT. justify-content:flex-end pousse chaque rang vers la droite,
   et la marge automatique du logo le retient a gauche sur le sien.

   L'un sans l'autre ne suffit pas : flex-wrap justifie CHAQUE LIGNE
   separement, donc space-between laissait les icones callees a gauche
   des qu'elles se retrouvaient seules sur leur rang - c'etait le defaut.
   Et flex-end seul aurait emmene le logo avec elles. */
.bandeau .large{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  justify-content:flex-end; padding-top:14px; padding-bottom:14px;
}
.bandeau .large>a{margin-right:auto;}
/* La hauteur suit l'image plutot que d'etre fixee : le logo vectoriel
   fait 221x78, la bande du numero ayant ete ecartee du mot-symbole.
   Une hauteur en dur l'ecrasait de 9 %. */
.bandeau img{display:block; width:221px; height:auto;}
/* ---- Barre d'acces rapide du bandeau ----
   Gelules a libelle : la charte les reserve a ce que le visiteur VIENT
   CHERCHER - il le cherche par son nom, il doit le lire. Les gestes
   d'outil, eux, sont des cercles sans mot.

   Sur mobile, le libelle passe en .sr-only plutot que d'etre retire du
   marquage : il continue d'etre lu par les lecteurs d'ecran et de servir
   d'infobulle, la ou un aria-label code en dur serait francais pour tout
   le monde.

   L'anneau est #7c98b0 et non le --trait du site : a 1,22 sur blanc,
   celui-ci ne dessinait aucune forme. 3,01 est le seuil des composants
   d'interface. L'encre, elle, est le --gris a 5,80.  */
.barre{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.barre a{
  display:inline-flex; align-items:center; gap:8px;
  min-height:46px; padding:0 12px;
  border:2px solid #7c98b0; border-radius:999px;
  color:var(--gris); text-decoration:none;
  font-size:.9rem; font-weight:600; white-space:nowrap;
}
.barre a:hover,.barre a:focus-visible{color:var(--encre); border-color:var(--gris);}
.barre svg{width:20px; height:20px; flex:none;}
/* La gelule Contact porte DEUX icones - telephone et enveloppe - parce
   que la page propose les deux moyens. Serrees, elles se lisent comme un
   seul signe plutot que comme deux boutons colles. */
.barre a .ic-tel+.ic-mail{margin-left:-3px;}

/* ---- Bandeau de confirmation de langue (racine seulement) ----
   Des gelules, au sens de la charte : le visiteur VIENT CHERCHER sa
   langue, il la cherche par son nom, il doit le lire. Le sigle tient la
   place de l'icone a l'interieur de l'anneau.

   Le sigle a une largeur FIXE : sans elle, les deux lettres se calant sur
   leur propre chasse, les noms ne s'alignaient pas d'une gelule a
   l'autre et la grille paraissait bancale sans qu'on voie pourquoi. */
.confirmer{background:var(--carte); border-bottom:1px solid var(--trait);}
.confirmer .large{padding-top:16px; padding-bottom:18px;}
.confirmer h2{
  margin:0 0 12px; font-size:.95rem; font-weight:600; color:var(--gris);
}
.confirmer h2 span{font-weight:400;}
.langues{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.langues a{
  display:inline-flex; align-items:center; gap:9px;
  min-height:46px; padding:0 14px 0 10px;
  border:2px solid #7c98b0; border-radius:999px;
  color:var(--encre); text-decoration:none;
  font-size:.9rem; font-weight:600; white-space:nowrap;
}
.langues a:hover,.langues a:focus-visible{border-color:var(--gris);
  background:var(--fond);}
.langues .sigle{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; flex:none;
  font-size:.72rem; font-weight:700; letter-spacing:.04em;
  color:var(--gris);
}
/* La langue courante se signale par la graisse ET par aria-current :
   la couleur seule ne se voit pas d'un daltonien, et un lecteur
   d'ecran ne lit pas une bordure. */
.langues a[aria-current]{border-color:var(--encre);}
.langues a[aria-current] .sigle{color:var(--encre);}

/* ---- Les outils : cercles, sans libelle visible ----
   Meme anneau et meme encre que les gelules : c'est une seule barre, la
   difference de forme dit la difference de GESTE, pas d'importance.
   46 px et icone 20 px, comme la charte. */
.outils{display:flex; align-items:center; gap:6px;}
.rond{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; padding:0;
  border:2px solid #7c98b0; border-radius:999px;
  background:none; color:var(--gris); cursor:pointer;
  text-decoration:none; font:inherit;
}
.rond:hover,.rond:focus-visible{color:var(--encre); border-color:var(--gris);}
.rond svg{width:20px; height:20px;}

/* DEUX EXCEPTIONS A 24 px - le globe et le hamburger (14/10/2026).
   Elles corrigent deux defauts mesures, et ce ne sont pas les memes :

   - le HAMBURGER est le seul des quatre dont l'encre ne remplit pas sa
     boite. Son trace va de 6 a 18 sur 24, la moitie en hauteur, la ou la
     loupe, le partage et le globe vont tous de 3 a 21. A 20 px ses barres
     flottent au milieu de l'anneau ;

   - le GLOBE, lui, occupe bien sa boite - mais il y entasse cinq traces.
     A 20 px, le trait fait 1,67 px pour des intervalles a peine plus
     larges : les meridiens se referment et le glyphe vire au disque gris.
     L'agrandir ne lui donne pas plus de place, il lui rend ses blancs.

   La loupe et le partage n'y gagneraient rien : un seul anneau epais pour
   l'une, trois noeuds deja bien separes pour l'autre. Au banc, a 26 px, le
   globe commence a serrer l'anneau ; 24 est le point juste.

   LA REGLE NOMME SES DEUX BOUTONS, et c'est voulu (decision du 14/10/2026).
   Elle visait d'abord TOUS les <summary>, c'est-a-dire tout bouton qui
   ouvre un tiroir : plus court a ecrire, mais le partage est devenu un
   tiroir a son tour et il aurait grossi sans qu'on l'ait demande. Une
   regle qui s'etend d'elle-meme a ce qu'on ajoute est une regle qui
   surprend. Ces deux icones-la ont un defaut mesure ; les autres non. */
.rond .ic-globe,.rond .ic-menu{width:24px; height:24px;}

/* ET LE GLOBE SEUL PERD UN QUART DE TRAIT (14/10/2026).
   A epaisseur egale, cinq traces pesent plus qu'un : le globe reste le plus
   dense des quatre meme a 24 px. A 1,75 il retrouve le poids optique de la
   loupe, qui sert d'etalon. Ce n'est pas un affaiblissement, c'est une mise
   a niveau - le contraste ne bouge pas, c'est la MEME encre.
   La valeur est ici et non dans l'attribut stroke-width du marquage : une
   feuille l'emporte sur un attribut de presentation, et la regle reste a
   cote de celle qui l'explique. */
.rond .ic-globe{stroke-width:1.75;}

/* Un tiroir est un <details> : il s'ouvre et se ferme SANS JavaScript,
   et le navigateur gere deja le clavier et l'etat annonce. Ecrire ce
   comportement en script aurait demande aria-expanded, Echap, le clic
   au-dehors - tout ce que le navigateur fait ici gratuitement. */
.tiroir{position:relative;}
/* SOUS 620 px, LE PANNEAU S'ANCRE A LA BARRE ET NON AU BOUTON.
   Mesure du 13/10/2026 a 320 px : ancre au bouton, le panneau des langues
   commencait a -82 px - quatre-vingt-deux pixels hors du cadre, a gauche.
   La cause n'est pas une largeur de trop : right:0 aligne le panneau sur le
   bord droit de SON bouton, et ce bouton est le septieme de huit. Elargir ou
   retrecir n'y change rien ; il faut changer d'ancre.
   .barre devient donc le repere, et le panneau s'etale d'un bord a l'autre,
   gouttiere comprise. */
.tiroir>summary{list-style:none;}
.tiroir>summary::-webkit-details-marker{display:none;}
.panneau{
  position:absolute; right:0; top:52px; z-index:20;
  min-width:236px; max-width:300px; padding:10px;
  background:var(--carte); border:1px solid var(--trait);
  border-radius:var(--rayon); box-shadow:0 10px 26px rgba(0,0,0,.14);
}
.panneau a{display:block; padding:7px 8px; border-radius:8px;
  color:var(--encre); text-decoration:none; font-size:.9rem;}
.panneau a:hover,.panneau a:focus-visible{background:var(--fond);
  text-decoration:underline;}
.panneau p{margin:2px 6px 8px; font-size:.84rem; color:var(--gris);}
/* LE PANNEAU DU GLOBE porte douze langues depuis le 13/10/2026 : il lui
   faut une colonne qui defile plutot qu'un panneau de la hauteur de
   l'ecran. Le sigle a la meme chasse que dans le bandeau - on retrouve
   la meme colonne d'un composant a l'autre. */
.panneau{max-height:min(70vh,520px); overflow-y:auto;}
.panneau a,.panneau .langue-ici{display:flex; align-items:center; gap:9px;
  padding:7px 8px; border-radius:8px; font-size:.9rem;}
.panneau .sigle{display:inline-flex; justify-content:center; width:26px;
  flex:none; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  color:var(--gris);}
/* La langue servie n'est pas un lien : elle se distingue par la graisse,
   pas par une couleur seule - un daltonien doit la reconnaitre aussi. */
.panneau .langue-ici{font-weight:700; background:var(--fond); cursor:default;}
.panneau .langue-ici .sigle{color:var(--encre);}

/* La recherche, descendue au pied de page. Les regles qui portaient le
   nom .outils ont ete renommees plutot que gardees par commodite : une
   classe qui ne decrit plus ce qu'elle habille se retrouve appliquee
   ailleurs par analogie, et c'est ainsi qu'une feuille devient fausse. */
.recherche{display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 0;}
.recherche input[type=search]{
  border:1px solid var(--trait); border-radius:8px; padding:7px 10px;
  font:inherit; font-size:.9rem; min-width:9em;
}
/* Un libelle lisible par les lecteurs d'ecran et par eux seuls. Il
   portait jusqu'ici l'attribut hidden, qui le retirait AUSSI de
   l'arborescence d'accessibilite : le champ n'etait donc pas etiquete,
   et seul un aria-label de secours le sauvait. */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.bouton{
  display:inline-block; border:1px solid transparent; border-radius:8px;
  padding:7px 14px; font:inherit; font-size:.9rem; font-weight:600;
  cursor:pointer; text-decoration:none;
}
.bouton-plein{background:var(--encre); color:#fff;}
.bouton-plein:hover{background:#000;}
.bouton-creux{background:#fff; color:var(--encre); border-color:var(--trait);}
.bouton-creux:hover{border-color:var(--gris);}

/* ---- Accroche ----
   Ce bloc porte DEUX classes : "large accroche". La regle .large pose la
   gouttiere laterale ; ecrire ici un padding raccourci la remettait a
   zero - meme specificite, et celle-ci passe apres. Le texte touchait
   donc les bords : invisible sur grand ecran, ou la largeur maximale
   laisse du mou, flagrant sur telephone. On ne declare que le vertical. */
.accroche{padding-top:44px; padding-bottom:8px;}
.accroche h1{margin:0 0 10px; font-size:1.9rem; line-height:1.25;}
.accroche p{margin:0; max-width:62ch; color:var(--gris);}
.accroche .qualite{
  display:inline-block; margin-bottom:14px; padding:3px 10px;
  background:var(--jaune); color:var(--encre);
  border-radius:999px; font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
}

/* ---- Les trois metiers ---- */
h2{font-size:1.25rem; margin:38px 0 14px;}
.metiers{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.metier{
  background:var(--carte); border:1px solid var(--trait);
  border-radius:var(--rayon); display:flex; flex-direction:column; overflow:hidden;
}
.metier .visuel{
  display:flex; align-items:center; justify-content:center;
  height:170px; padding:12px; background:#fff; border-bottom:1px solid var(--trait);
}
/* LE <picture> DOIT DISPARAITRE DE LA MISE EN PAGE.
   Depuis que les images sont servies en AVIF avec repli (11/10/2026),
   chaque <img> est enveloppee d'un <picture>. Or <picture> est un
   element EN LIGNE, sans hauteur propre : le max-height:100% de l'image
   se resolvait alors contre une hauteur automatique, donc etait ignore,
   et les photos plus hautes que 170 px debordaient sous le filet -
   9 px pour l'ATM 228, 35 px pour le Revolution.
   display:contents retire la boite du <picture> : l'image redevient
   enfant direct du cadre, et le pourcentage retrouve a quoi se referer. */
.metier .visuel picture{display:contents;}
.metier .visuel img{max-width:100%; max-height:100%; width:auto; height:auto;}
.metier .texte{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1;}
.metier h3{margin:0 0 6px; font-size:1.05rem;}
.metier p{margin:0 0 14px; font-size:.92rem; color:var(--gris);}
.metier .liens{margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; font-size:.88rem;}
    /* LE LIEN D'OFFRE PREND SA LIGNE. C'est la porte principale de la
       carte - celle qui mene a notre propre page - et les suivants sont
       des raccourcis vers l'exterieur ou vers la vitrine. Les laisser
       sur le meme rang les mettait sur un pied d'egalite. flex-basis a
       100 % le pousse seul sur son rang et laisse les autres s'aligner
       dessous, sans rien changer a leur comportement. */
    .metier .liens .offre{flex:0 0 100%;}

/* ---- Catalogue ---- */
.portes{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.porte{
  background:var(--carte); border:1px solid var(--trait);
  border-radius:var(--rayon); padding:20px 22px 22px;
}
.porte h3{margin:0 0 4px; font-size:1.05rem;}
.porte .sous{margin:0 0 16px; font-size:.9rem; color:var(--gris);}
.champ{margin-bottom:12px;}
.champ label{display:block; font-size:.85rem; font-weight:600; margin-bottom:4px;}
.champ input{
  width:100%; border:1px solid var(--trait); border-radius:8px;
  padding:9px 11px; font:inherit;
}
.porte .apres{margin:12px 0 0; font-size:.85rem; color:var(--gris);}

/* ---- Pied de page ---- */
footer{margin-top:46px; background:var(--carte); border-top:1px solid var(--trait);}
footer .large{padding-top:26px; padding-bottom:30px;}
footer h2{margin:0 0 10px; font-size:1rem;}
.societe{font-size:.9rem; color:var(--gris); margin:0 0 6px;}
.societe strong{color:var(--encre);}
.mentions{font-size:.82rem; color:var(--gris); margin:14px 0 0;}
.mentions a{margin-right:4px;}
.filets{margin:18px 0 0; font-size:.78rem; color:var(--gris);}

@media (max-width:860px){
  .metiers{grid-template-columns:1fr 1fr;}
  .portes{grid-template-columns:1fr;}
}
/* Les libelles ne tiennent qu'au-dela de 1100 px de fenetre.

   Le calcul seul disait 1040 : il faut 995 px pour le logo, les quatre
   gelules et les quatre cercles, et le conteneur, plafonne a 1060, en
   offre 1028. Mesure a 1045 px, la barre passait pourtant encore a la
   ligne - LA BARRE DE DEFILEMENT prend une quinzaine de pixels que la
   fenetre annonce et que la mise en page n'a pas. D'ou ce seuil releve,
   avec une marge qui ne depend plus de l'epaisseur d'un ascenseur.

   En dessous, les mots partent et les huit restent sur une seule ligne. */
@media (max-width:1100px){
  .barre a{width:46px; padding:0; justify-content:center;}
  .barre a span{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  /* Deux glyphes dans un cercle de 46 px seraient illisibles : sur cette
     largeur le Contact ne garde que l'enveloppe, comme sur mobile. */
  .barre a .ic-tel{display:none;}
}

/* 40 px des 760 px de fenetre, et non 620 comme d'abord pose : mesure a
   660 px, huit cercles de 46 px plus le logo demandaient 687 px pour 628
   disponibles, et le bloc des outils repassait a la ligne.

   Sous 615 px environ, meme a 40 px, les huit ne tiennent plus a cote
   d'un logo de 221 px : la barre prend alors deux rangs. C'est la
   disposition normale d'un telephone, et elle se lit mieux qu'une file
   de huit cercles serres. */
/* QUAND TOUT PASSE SOUS LE LOGO, L'ALIGNEMENT REVIENT A GAUCHE.

   Tant qu'une partie des icones tient a cote du logo, les caler a droite
   equilibre le bandeau. Des que le logo se retrouve seul sur son rang, il
   n'y a plus rien a equilibrer : des icones poussees a droite sous un
   logo cale a gauche donnent deux blocs qui s'ignorent.

   CE SEUIL EST POSE, PAS DEDUIT. flex-wrap justifie toutes les lignes de
   la meme facon et ne sait pas qu'un bloc a replie ; aucune regle CSS ne
   permet de dire "si le logo est seul". Mesure, la bascule naturelle
   tombe vers 455 px - en dessous, le logo (221 px) plus les quatre
   premieres gelules (178) ne tiennent plus ensemble. On arrondit a 480,
   largeur conventionnelle : il reste une bande de 25 px ou quatre icones
   cotoient le logo tout en etant calees a gauche. C'est le prix d'un
   seuil fixe, et il ne se voit pas.

   On ne touche QUE la justification : passer le bandeau en colonne aurait
   separe les deux blocs d'icones et rendu deux rangs de quatre la ou un
   rang de huit tient - a 412 px, c'est exactement ce qu'on vient de
   gagner. */
@media (max-width:480px){
  .bandeau .large{justify-content:flex-start;}
  .bandeau .large>a{margin-right:0;}
}

@media (max-width:620px){
  /* Douze gelules sur un telephone : on resserre plutot que de masquer
     les noms - un sigle seul ne se reconnait pas quand on cherche sa
     langue, c'est tout l'objet de ce bandeau. */
  .langues{gap:6px;}
  .langues a{min-height:40px; padding:0 11px 0 8px; font-size:.86rem;}
  .langues .sigle{width:23px;}
}

@media (max-width:760px){
  /* Icone seule : la gelule devient un cercle de 40 px, taille de la charte. */
  .barre a{min-height:40px; width:40px; padding:0; justify-content:center;}
  .rond{width:40px; height:40px;}
  /* Le numero n'est joignable que le matin sur rendez-vous : sur un
     mobile, proposer d'appeler a toute heure promettrait ce qu'on ne
     tient pas. Seule l'enveloppe reste - charte du 07/10/2026. */
  .barre a .ic-tel{display:none;}
  .barre a span{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .metiers{grid-template-columns:1fr;}
  .accroche h1{font-size:1.5rem;}
  .bandeau .large{gap:10px;}
  /* Un peu plus d'air sur les cotes. Sur grand ecran la largeur maximale
     ecarte le texte des bords d'elle-meme ; sur telephone la gouttiere
     est tout ce qui l'en separe, et 16 px laissaient le texte colle. */
  .large{padding-left:22px; padding-right:22px;}
}
@media (max-width:620px){
  header.bandeau .large{position:relative;}
  .tiroir{position:static;}
  .panneau{left:0; right:0; top:100%; margin-top:6px;
    min-width:0; max-width:none;}
}

/* ---- LES ICONES DU MENU DE PARTAGE : une police, pas des chemins ----
   Onze icones Tabler (les cinq reseaux, le lien, le QR, le courriel, la
   copie, l'imprimante, le partage), subsettees depuis NOTRE police complete.

   POURQUOI UNE POLICE ICI, ALORS QUE LA BARRE A DES SVG EN LIGNE.
   Mesure du 14/10/2026. Les contours tires de la police, poses en chemins
   dans la page, font 68,5 Ko PAR PAGE : un glyphe de police est le contour
   de l'icone, courbes comprises, la ou un SVG Tabler d'origine est un trait
   simple d'une centaine de caracteres. Nous n'avons pas ces traits-la pour
   ces onze icones, seulement la police. Le subset, lui, pese 2 788 o,
   se telecharge UNE fois et sert toutes les pages : vingt-cinq fois moins
   qu'une SEULE page en ligne. Depuis Tokyo, la question ne se pose pas.

   Les quatre icones de la barre restent en SVG : elles y sont deja, leurs
   traces sont courts, et les deplacer ne gagnerait rien. Le jour ou l'on
   voudra unifier, il faudra ajouter world et menu-2 au subset et refaire
   les crochets .ic-globe / .ic-menu -- ce n'est pas urgent.

   font-display:block et non swap : un swap afficherait d'abord le caractere
   de remplacement, donc un carre vide a la place d'une icone. */
@font-face{
  font-family:"tabler-icons";
  src:url("/fonts/tabler-icons.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:block;
}
.ti{font-family:"tabler-icons"; font-style:normal; font-weight:400;
  line-height:1; font-size:18px; flex:none; -webkit-font-smoothing:antialiased;}
.ti-brand-linkedin:before{content:"\ec8c"}
.ti-brand-x:before{content:"\fc0f"}
.ti-brand-line:before{content:"\f7e8"}
.ti-brand-whatsapp:before{content:"\ec74"}
.ti-brand-telegram:before{content:"\ec26"}
.ti-link:before{content:"\eade"}
.ti-qrcode:before{content:"\eb11"}
.ti-mail:before{content:"\eae5"}
.ti-copy:before{content:"\ea7a"}
.ti-printer:before{content:"\eb0e"}
.ti-share:before{content:"\eb21"}

/* ---- LE PANNEAU DE PARTAGE ----
   Il herite du panneau commun (fond, bordure, ombre, rayon) : c'est le meme
   objet que le panneau des langues, pose par le meme geste. Ce qui suit ne
   dit que ses differences.

   Les items sont tantot des <a>, tantot des <button> : un lien qui mene
   ailleurs et une action qui se passe ici ne sont pas la meme chose, et le
   marquage doit le dire. Ils se RESSEMBLENT a l'oeil - meme hauteur, meme
   icone, meme survol - mais le bouton garde son role, son clavier et sa
   restitution vocale. */
.panneau-partage{min-width:250px;}
.titre_partage{margin:2px 6px 8px; font-size:.84rem; color:var(--gris);}
.menu_partage{list-style:none; margin:0; padding:0;}
.menu_partage .item_partage{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:7px 8px; border:0; border-radius:8px;
  background:none; color:var(--encre); font:inherit; font-size:.9rem;
  text-align:left; text-decoration:none; cursor:pointer;
}
.menu_partage .item_partage:hover,
.menu_partage .item_partage:focus-visible{background:var(--fond);}
.menu_partage .sep_partage{height:1px; margin:6px 2px;
  background:var(--trait);}

/* Le retour de copie passe par aria-live : il est ANNONCE autant qu'affiche,
   et il ne deplace rien - la hauteur est reservee, pleine ou vide. */
.retour_partage{min-height:1.2em; margin:6px 8px 0;
  font-size:.82rem; color:var(--gris);}

/* ---- LA MODALE DU QR ----
   <dialog> natif : Echap, le piege a focus et le fond assombri sont donnes
   par le navigateur. On n'habille que l'interieur.
   L'image garde sa QUIET ZONE - le generateur integre quatre modules de
   blanc tout autour - donc fond blanc sous le QR, et surtout pas un aplat
   colore ni un texte colle : c'est la condition numero un de la lecture. */
.modale_qr{
  border:1px solid var(--trait); border-radius:var(--rayon);
  padding:18px; max-width:320px; text-align:center;
  background:#fff; color:var(--encre);
}
.modale_qr::backdrop{background:rgba(0,0,0,.45);}
.modale_qr img{display:block; width:240px; height:240px; margin:0 auto 10px;
  background:#fff;}
.titre_qr{margin:0 0 10px; font-size:.9rem; font-weight:600;}
.url_qr{margin:0 0 14px; font-size:.78rem; color:var(--gris);
  word-break:break-all;}

/* ---- CONTACT : engendre par gen_contact.py --socle ---- */
@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow/Barlow-400.woff2) format("woff2")}@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/barlow/Barlow-500.woff2) format("woff2")}@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow/Barlow-600.woff2) format("woff2")}@font-face{font-family:Barlow;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow/Barlow-700.woff2) format("woff2")}
:root{--jaune:#FFED00;--section:#FFED00;--filet:6px;--anneau:7px;--section-fond:#FFFEEB;--noir:#1a1a1a;--gris-form:#727173;
        --bleu:#1a1a1a;--bleu-h:#000;--or:#9a6200;--rouge:#b00020;--vert:#2e7d32}
  *{box-sizing:border-box}
  html{background:#f4f4f2}
  body.formulaire{font-family:Barlow,Arial,Helvetica,sans-serif;margin:0;color:#1f1f1f;line-height:1.45;background:#f4f4f2}
  .page{max-width:800px;margin:0 auto;padding:18px 20px 40px}
  .cartouche{background:#fff;border:1px solid #e2e2e0;border-bottom:var(--filet) solid var(--section);border-radius:0;padding:14px 18px 12px;margin:0 0 14px}
  .brand{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--noir)}
  h1{margin:2px 0 0;font-size:26px;font-weight:700;color:var(--noir)}
  .promesse{font-size:15px;background:#fff;border:1px solid #e2e2e0;border-left:4px solid var(--section);padding:10px 14px;border-radius:0 8px 8px 0;margin:0 0 10px}
  .prouse{font-size:13px;background:#eef7ee;border:1px solid #bfe0bf;color:#25552b;padding:7px 11px;border-radius:6px;margin:0 0 12px}
  .prouse b{color:#1b3d20}
  .fcard{background:#fff;border:1px solid #e2e2e0;border-radius:10px;padding:16px 18px 18px;margin-top:14px}
  #step1,#step_redir .card{background:#fff;border:1px solid #e2e2e0;border-radius:10px;padding:16px 18px 18px;margin-top:14px}
  .sect{font-size:13px;font-weight:700;color:var(--noir);text-transform:uppercase;letter-spacing:.05em;margin:0 0 6px;padding-bottom:7px;border-bottom:2px solid var(--section)}
  .reqnote{font-size:13px;color:#555;margin:6px 0 2px}
  label{display:block;font-weight:700;margin:10px 0 3px;font-size:14px}
  select,input[type=text],input[type=email],input[type=tel],textarea{width:100%;padding:8px 10px;border:1px solid #b5b5b2;border-radius:6px;font-size:14px;font-family:inherit;background:#fff}
  select:focus,input:focus,textarea:focus{outline:2px solid var(--noir);outline-offset:1px}
  textarea{min-height:88px;resize:vertical}
  .btn{display:inline-block;margin-top:18px;padding:12px 28px;background:var(--noir);color:#fff;border:none;border-radius:6px;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;font-family:inherit}
  .btn:hover{background:#000}
  .btn:focus-visible{outline:2px solid var(--noir);outline-offset:2px;box-shadow:0 0 0 5px var(--section)}
  #btn_continue{display:flex;align-items:center;gap:10px;width:fit-content;margin-left:auto;background:#fff;color:var(--noir);border:var(--anneau) solid var(--section);outline:1px solid var(--noir);border-radius:8px;padding:9px 22px}
  #btn_continue:hover{background:#fafaf8}
  .sendrow{margin-top:18px}
  #btn_send{margin-top:0;display:inline-flex;align-items:center;gap:10px;width:fit-content;background:#fff;color:var(--noir);border:var(--anneau) solid var(--section);outline:1px solid var(--noir);border-radius:8px;padding:9px 22px}
  #btn_send:hover:enabled{background:#fafaf8}
  #btn_send:focus-visible{outline:3px solid var(--noir);box-shadow:none}
  #btn_send:disabled{background:#f4f4f2;color:#8a8a88;border-color:#dcdcd8;outline-color:#c9c9c5}
  #btn_continue:focus-visible{outline:3px solid var(--noir);box-shadow:none}
  #btn_continue .fleche,#btn_send .fleche{width:19px;height:19px;flex:none}
  .btn:disabled{background:#cfcfcc;color:#5a5a58;cursor:not-allowed}
  .hint{font-size:13px;color:#666;margin-top:3px}
  .hint-inline{font-weight:400;font-size:12.5px;color:#666;margin-left:8px}
  .req{color:var(--rouge);font-weight:700;font-size:1.4em;line-height:1;display:inline-block;animation:reqpulse 1.6s ease-in-out 4}
  @keyframes reqpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.18)}}
  @media(prefers-reduced-motion:reduce){.req{animation:none}}
  .reqrec{color:var(--or);font-weight:700;font-size:1.25em;line-height:1;margin-left:2px}
  .infoq{display:inline-block;margin-left:5px;min-width:17px;height:17px;line-height:17px;text-align:center;border-radius:50%;
     background:#efefec;color:var(--noir);font-size:12px;font-weight:700;cursor:help;position:relative;padding:0 1px}
  .infoq:focus-visible{outline:2px solid var(--noir)}
  .infoq .tip{display:none;position:absolute;left:0;top:150%;z-index:20;width:230px;background:#1a1a1a;color:#fff;
     font-size:12px;font-weight:400;padding:7px 9px;border-radius:6px;line-height:1.35;box-shadow:0 3px 10px rgba(0,0,0,.25)}
  .infoq:hover .tip,.infoq:focus .tip{display:block}
  .missing{font-size:13px;color:#664d03;background:#fff8e6;border:1px solid #ffe08a;border-radius:6px;padding:8px 10px;margin-top:10px;display:none}
  /* UN MINI LIEN, pas un bouton : il ferme la phrase "il manque : ..." au
     lieu de lui faire concurrence. D'ou le fond et la bordure a none, et la
     couleur HERITEE du cartouche ambre - un bouton noir borde (.linkbtn)
     pesait trop pour un recours. Reste un <button> dans le balisage : il
     agit sur la page et ne mene nulle part, un <a> aurait menti au clavier
     comme au lecteur d'ecran. L'anneau de focus est explicite, puisqu'on
     retire la bordure. */
  /* LA PROMESSE, a droite du titre MESSAGE : elle annonce ce que le bloc
     offre en plus du texte - pieces jointes, message vocal, copies - trois
     cases qui vivent SOUS la zone de saisie, donc sous la ligne de flottaison
     tant qu'on n'a pas fait defiler. Meme idiome que le compteur de
     caracteres (.statusrow / .fstatus) : flex sur la ligne, marge auto a
     gauche. Flex pose sur le SEUL #s_msg, et non sur .sect : les trois
     icones de "Preference de reponse" sont des enfants directs de leur
     titre, et un justify-content les disperserait. */
  #s_msg{display:flex;align-items:baseline;gap:10px}
  .sect-plus{margin-left:auto;font-size:12px;font-weight:400;color:#6b6b66;
    text-transform:none;letter-spacing:0}
  @media(max-width:560px){.sect-plus{display:none}}
  .lien-tout{background:none;border:none;padding:0;font:inherit;color:inherit;
    text-decoration:underline;cursor:pointer;white-space:nowrap}
  .lien-tout:hover{text-decoration:none;background:#ffe08a}
  .lien-tout:focus-visible{outline:2px solid #664d03;outline-offset:2px}
  .voc-zone{margin-top:10px}
  .voc-bloc{border:1px solid #ddddda;border-radius:6px;padding:10px 12px;background:#fbfbfa}
  .voc-ligne{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .voc-btn{font:inherit;padding:6px 12px;border:1px solid #c9c9c4;border-radius:6px;
           background:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .voc-btn svg{width:15px;height:15px;flex:none}
  .voc-btn-rec svg{color:#b3261e}
  .voc-btn:hover{background:#f2f2ef}
  .voc-btn[disabled]{opacity:.5;cursor:default}
  .voc-rec{color:#b3261e;font-weight:600}
  .voc-fini{color:#1b6b2f;font-weight:600;display:inline-flex;align-items:center;gap:5px}
  .voc-fini svg{width:15px;height:15px}
  .voc-pastille{display:inline-block;width:9px;height:9px;border-radius:50%;
                background:#b3261e;margin-right:6px;animation:voc-pulse 1.2s infinite}
  @keyframes voc-pulse{0%,100%{opacity:1}50%{opacity:.25}}
  .voc-duree{font-variant-numeric:tabular-nums}
  .voc-vu{display:inline-flex;align-items:flex-end;gap:2px;height:14px;margin-right:8px}
  .voc-vu i{display:block;width:3px;height:3px;border-radius:1px;background:#b3261e;
            opacity:.25;transition:height .08s linear,opacity .08s linear}
  .voc-aide{font-size:12px;color:#666;margin:6px 0 0}
  .voc-erreur{font-size:12px;color:#b3261e;margin:6px 0 0}
  .voc-audio{width:100%;margin-top:8px}
  .fallback{font-size:13px;color:#555;margin-top:12px;border-top:1px dashed #ddddda;padding-top:10px}
  .fallback a{color:var(--noir);font-weight:700;text-decoration-color:var(--section);text-decoration-thickness:2px}
  .radios{display:flex;gap:26px;flex-wrap:wrap;margin-top:6px}
  .radios label{font-weight:400;display:flex;gap:8px;align-items:center;margin:2px 0}
  .consent{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-weight:400}
  .consent input{margin-top:3px}
  .ctx{font-size:14px;color:var(--noir);background:#fffbd6;border:1px solid #ece28a;padding:8px 12px;border-radius:6px;margin:12px 0 0}
  .linkbtn{display:inline-flex;align-items:center;gap:6px}
  .ico-champ{width:15px;height:15px;flex:none;vertical-align:-2px;margin-right:5px}
  .cartouche .ico-champ{margin-right:3px}
  .replie-bloc{display:none !important}
  .tourniquet{display:inline-block;width:15px;height:15px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tourne .7s linear infinite}
  @keyframes tourne{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.tourniquet{animation:none}}
  #btn_send[disabled]{opacity:1;cursor:progress}
  .cartouche-adresse{margin-top:5px;line-height:1.4;font-weight:400;flex-basis:100%}
  .cartouche-texte{flex:1 1 auto;min-width:0}
  #cartouche[hidden],.cartouche[hidden]{display:none}
  #cartouche .linkbtn,.cartouche .linkbtn{margin-left:auto;flex:none;align-self:flex-start}
  .cartouche-adresse .soc{font-weight:700;letter-spacing:.02em}
  .hors-vue{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ico-retour{font-family:'Segoe UI Symbol','Apple Symbols','DejaVu Sans',sans-serif;font-size:15px;line-height:1}
  #cartouche,.cartouche{font-size:13px;background:var(--section-fond);border:1px solid #e2e2e0;border-left:3px solid var(--section);color:var(--noir);padding:8px 10px;border-radius:0;margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
  .note{font-size:13px;background:#fff3cd;border:1px solid #ffe08a;color:#664d03;padding:8px 10px;border-radius:6px;margin-top:8px}
  .hp{position:absolute;left:-9999px;top:-9999px}
  #payload{white-space:pre-wrap;background:#1e1e1e;color:#9cdcfe;padding:14px;border-radius:6px;font-family:Consolas,monospace;font-size:13px;margin-top:16px}
  #payload:empty{display:none}
  .err{color:var(--rouge);font-size:13px;margin-top:4px}
  .vatflag{font-size:14px;font-weight:700}
  .vatline{display:flex;align-items:center;gap:12px;margin-top:5px;flex-wrap:wrap}
  .linkbtn{background:none;border:1px solid var(--noir);color:var(--noir);border-radius:5px;padding:3px 10px;font-size:13px;cursor:pointer;font-weight:700;font-family:inherit}
  .linkbtn:hover{background:#f2f1ed}
  .row2{display:flex;gap:12px}.row2>div{flex:1}
  .version{font-size:11px;color:#8b8b88;text-align:right;margin-top:18px}
  @media(max-width:560px){
    /* SEIZE PIXELS, ET CE N'EST PAS UN CHOIX DE LISIBILITE. Safari sous iOS
       ZOOME LA PAGE des qu'on touche un champ dont la police calculee est
       sous 16px. Le visiteur tape dans E-mail, la page grossit, il saisit,
       il pince pour ressortir - puis recommence au champ suivant. Sur ce
       formulaire, quinze fois.
       Le seuil est exact et porte sur la taille CALCULEE : ni une unite
       relative, ni un reglage de viewport n'y changent rien, et bloquer le
       zoom (user-scalable=no) l'eviterait au prix d'une faute
       d'accessibilite bien pire.
       SOUS 560px SEULEMENT : le dessin de bureau garde ses 14px. La regle
       vient APRES celle de la ligne 40, a specificite egale - c'est
       l'ordre qui tranche. */
    select,input[type=text],input[type=email],input[type=tel],textarea{font-size:16px}
    .row2{flex-direction:column;gap:0}
    .page{padding:10px 12px 30px}
    .cartouche{padding:12px 14px 10px;border-radius:8px}
    h1{font-size:22px}
    .homelink{width:40px;height:40px;border-width:5px}
    .sendrow .cancellink{width:40px;height:40px;padding:0;border-width:5px}
    .sendrow .cancellink #lnk_annuler{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
    #btn_send{padding:9px 18px}
    .fcard,#step1,#step_redir .card{padding:12px 12px 14px}
  }
  #msgcount{font-size:13px;margin-top:3px;font-weight:700}
  .card{border:1px solid #e2e2e0;border-radius:8px;padding:12px;margin-top:6px;background:#fafaf8}
  .lblrow{display:flex;align-items:baseline;flex-wrap:wrap}
  .step{display:none}.step.active{display:block}
  a.brandlink{text-decoration:none;color:inherit;display:block}
  a.brandlink:hover .brand{text-decoration:underline}
  .homelink{display:block;text-align:right;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--noir);text-decoration:none}
  .homelink:hover{text-decoration:underline}
  /* LIENS DU CARTOUCHE DE TETE, en bas a droite. Deux liens de meme
     famille mais pas de meme poids : l'accueil est la navigation
     principale - en HAUT du cartouche, a hauteur de la marque - et
     l'aide un recours, en BAS, plus petite et plus claire. La colonne
     occupe toute la hauteur du cartouche et ecarte les deux : rien
     n'est ajoute a sa hauteur. */
  .tetelien{display:flex;flex-direction:column;align-items:flex-end;
    justify-content:space-between;gap:8px;margin-top:6px}
  .tetelien .homelink{margin-top:0}
  .aidelink{display:inline-flex;align-items:center;font-size:12px;font-weight:400;color:#6b6b68;text-decoration:none}
  .aidelink:hover{color:var(--noir);text-decoration:underline}
  .aidelink .ico{width:14px;height:14px;margin-right:4px}
  .sendrow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
  .cancellink{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;background:#fff;color:var(--noir);border:var(--anneau) solid var(--section);border-radius:999px;font-size:15px;font-weight:700;font-family:Barlow,Arial,Helvetica,sans-serif;text-decoration:none}
  .cancellink:hover{background:#fafaf8;color:var(--noir);text-decoration:none}
  .ico{width:15px;height:15px;margin-right:4px;flex:none}
  .cancellink .ico{width:20px;height:20px;margin:0}
  .cartouche{display:grid;grid-template-columns:1fr auto;grid-template-areas:"marque accueil" "titre accueil";align-items:start;column-gap:14px}
  a.brandlink{grid-area:marque}
  .cartouche h1{grid-area:titre}
  .tetelien{grid-area:accueil;align-self:stretch;margin-top:0}
  .homelink{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;margin:0;background:#fff;color:var(--noir);border:var(--anneau) solid var(--section);border-radius:999px;font-family:Barlow,Arial,Helvetica,sans-serif}
  .homelink #lnk_home{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .homelink:hover{background:#fafaf8;text-decoration:none}
  .homelink .ico{width:20px;height:20px;margin:0}
  .cancellink{display:inline-flex;align-items:center}
  .icomail{width:16px;height:16px;vertical-align:-3px;margin-right:6px;flex:none}
  .icomail-link{display:inline-flex;align-items:center;color:inherit;text-decoration:none}
  .oblig{color:var(--rouge);font-weight:700;margin-right:3px}
  .optdot{color:var(--vert);font-weight:700;margin-right:3px}
  .optlbl{color:#666;font-size:.92em}
  /* ligne de label avec indicateur de validation aligne a droite */
  label.statusrow{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px}
  .fstatus{margin-left:auto;font-size:13px}
  .fstatus.grp{display:inline-flex;align-items:center;gap:6px}
  /* --- Pieces jointes (bloc #pieces-jointes) ------------------------------ */
  .pj-zone-ext[hidden],.pj-bloc[hidden]{display:none}
  .pj-case{margin-top:12px}
  .pj-bloc{margin:10px 0 0;text-align:left}
  .pj-entete{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 5px}
  .pj-titre{font-size:14px;font-weight:700;color:var(--noir)}
  .pj-compteur{flex:none;font-size:13px;color:#666;font-variant-numeric:tabular-nums}
  .pj-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
     min-height:82px;padding:10px 12px;text-align:center;border:1px dashed #b5b5b2;border-radius:6px;
     background:#fafaf8;cursor:pointer;transition:border-color .12s,background-color .12s}
  .pj-zone:hover{border-color:var(--noir);background:#fff}
  .pj-zone:focus-visible{outline:2px solid var(--noir);outline-offset:2px}
  .pj-zone.pj-survol{border-style:solid;border-color:var(--noir);background:#fffbd6}
  .pj-zone-icone{width:20px;height:20px;flex:none;color:var(--gris-form)}
  .pj-zone-txt{font-size:14px}
  .pj-zone-lien{font-weight:700;color:var(--noir);text-decoration:underline;
     text-decoration-color:var(--section);text-decoration-thickness:2px}
  .pj-aide{font-size:12px;color:#666}
  .pj-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
     clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .pj-liste{list-style:none;margin:5px 0 0;padding:0;max-height:104px;overflow-y:auto}
  .pj-item{display:flex;align-items:center;gap:8px;padding:4px 5px 4px 8px;border:1px solid #e2e2e0;
     border-radius:6px;background:#fff;font-size:13px}
  .pj-item+.pj-item{margin-top:4px}
  .pj-item-icone{width:14px;height:14px;flex:none;color:var(--gris-form)}
  .pj-item-nom{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .pj-item-taille{flex:none;color:#666;font-variant-numeric:tabular-nums}
  .pj-item-suppr{flex:none;padding:3px;border:0;border-radius:4px;background:none;line-height:0;
     color:var(--gris-form);cursor:pointer;font-family:inherit}
  .pj-item-suppr:hover{color:var(--rouge);background:#fdecef}
  .pj-item-suppr:focus-visible{outline:2px solid var(--noir);outline-offset:1px}
  .pj-item-suppr svg{width:14px;height:14px;display:block}
  .pj-erreur{margin:5px 0 0;font-size:13px;color:var(--rouge)}
  .pj-erreur[hidden]{display:none}
  .pj-erreur span{display:block}
  @media(prefers-reduced-motion:reduce){.pj-zone{transition:none}}
  /* --- Collegues en copie (bloc #collegues) ------------------------------ */
  .cc-zone-ext[hidden],.cc-bloc[hidden]{display:none}
  .cc-case{margin-top:12px}
  .cc-bloc{margin:10px 0 0;text-align:left}
  .cc-entete{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 5px}
  .cc-titre{font-size:14px;font-weight:700;color:var(--noir)}
  .cc-compteur{flex:none;font-size:13px;color:#666;font-variant-numeric:tabular-nums}
  .cc-liste{margin:0;padding:0}
  .cc-rang+.cc-rang{margin-top:6px}
  .cc-champs{display:flex;align-items:center;gap:6px}
  .cc-mail{flex:1 1 60%;min-width:0}
  .cc-nom{flex:1 1 40%;min-width:0}
  .cc-suppr{flex:none;padding:3px;border:0;border-radius:4px;background:none;line-height:0;
     color:var(--gris-form);cursor:pointer;font-family:inherit}
  .cc-suppr:hover{color:var(--rouge);background:#fdecef}
  .cc-suppr:focus-visible{outline:2px solid var(--noir);outline-offset:1px}
  .cc-suppr svg{width:14px;height:14px;display:block}
  .cc-rang.cc-ok .cc-mail{border-color:#8bbf9f}
  .cc-rang.cc-ko .cc-mail{border-color:var(--rouge)}
  .cc-rang-err{display:block;margin:3px 0 0;font-size:12px;color:var(--rouge)}
  .cc-rang-err[hidden]{display:none}
  .cc-aide{margin:5px 0 0;font-size:12px;color:#666}
  .cc-aide[hidden]{display:none}
  .cc-erreur{margin:5px 0 0;font-size:13px;color:var(--rouge)}
  .cc-erreur[hidden]{display:none}
  .cc-erreur span{display:block}
  /* separateur discret entre semaines dans le menu Jour (option desactivee) */
  option.daysep{color:#cfcfcf;letter-spacing:2px}
/* ---- CONTACT : fin du bloc engendre ---- */