header .navbar-brand img { max-height: 50px; } .navbar .navbar-nav .nav-link { color: #13192e; } .btn-gradient-fuel-yellow-blue, .text-gradient-base-color { background-image: linear-gradient(to right, #3a5ba6, #13192e, #13192e); } .agency-logo { width:250px; height:auto; } header.sticky.sticky-active [data-header-hover="light"] { background-color: rgba(255, 255, 255, 0.6) !important; } .stack-item.stack-item-02{z-index:99 !important; } .stack-item.stack-item-03{z-index:89 !important;} .stack-item.stack-item-04{z-index:79 !important;} .stack-item.stack-item-05{z-index:69 !important;} .stack-item.stack-item-06{z-index:59 !important;} .stack-item.stack-item-07{z-index:49 !important;} .stack-item.stack-item-08{z-index:39 !important;} .stack-item.stack-item-09{z-index:29 !important;} .stack-item.stack-item-10{z-index:19 !important;} /* ------------------------------------------------------------------ SERVICES : mise en page deroulante a toutes les largeurs. Le thema empile les blocs les uns SUR les autres (position absolute) et compte sur un script pour les reveler un a un au defilement. Ce script ne s'execute pas sur ce site : les dix services restaient superposes, seul le premier etait visible, et les neuf autres n'apparaissaient jamais - on defilait 9000 px dans le vide. Verifie : le defaut existait deja avec six services. Le theme fournit lui-meme une version deroulante de cette mise en page, mais reservee aux ecrans de moins de 1199 px. On l'applique a toutes les largeurs : chaque service occupe sa hauteur et se lit en defilant, sans dependre d'aucun JavaScript. ------------------------------------------------------------------ */ .stack-box{position:relative;z-index:1;height:auto;} .stack-box .stack-box-contain{height:auto;position:relative;} /* height en !important : le script du theme, une fois reactive, ecrit une hauteur en ligne (calc(100vh - Xpx)) qui devient negative avec dix blocs et ecrase les premiers services a zero. La mise en page deroulante doit rester maitresse. */ .stack-box .stack-item{height:auto !important;position:relative;display:block;overflow:visible;} .stack-box .stack-item .stack-item-wrapper{position:relative;top:auto;left:auto;right:auto; bottom:auto;display:flex;align-items:center;height:auto;z-index:auto;} /* Les rangees full-screen deviennent des sections d'une hauteur confortable plutot que d'imposer 100vh a chacun des dix services. */ /* !important : la regle .full-screen du theme (height:100vh) l'emportait, la rangee restait figee a la hauteur de l'ecran pendant que ses colonnes, plus hautes, debordaient par le bas. */ .stack-box .stack-item .full-screen{height:auto !important;min-height:70vh;} /* La colonne de gauche ne contient qu'une image de fond : sans hauteur propre elle s'effondre a zero des que la rangee passe en hauteur automatique, et le visuel disparait. On etire les colonnes a la hauteur de la rangee, celle du texte donnant la mesure. */ .stack-box .stack-item .row.full-screen{align-items:stretch !important;} /* h-100 (height:100%) empeche l'etirement : sur une rangee a hauteur automatique il ne peut se resoudre et fige la colonne. On le neutralise ici pour laisser le flex l'etirer, avec un plancher de securite. */ /* ------------------------------------------------------------------ BANNIERE DE L'ACCUEIL Remplace la classe « full-screen » du theme, qui imposait 100vh : le visiteur devait defiler avant d'atteindre la premiere phrase. 62vh laissent voir le debut du contenu des l'arrivee, tout en gardant a la banniere sa presence. ------------------------------------------------------------------ */ /* 62vh etaient dimensionnes pour loger la photo a droite. La banniere ne porte plus que le texte : 50vh suffisent a lui garder sa presence, et le contenu qui suit remonte d'autant. */ /* padding-top = hauteur de la barre de menu, qui est transparente et se superpose a la banniere. Sans cette reserve, le texte est centre sur toute la hauteur et sa premiere ligne passe SOUS le menu — mesure : 43 px de chevauchement. Le centrage vertical s'opere alors dans l'espace restant. */ /* !important : la section porte la classe « p-0 » du theme, qui applique « padding:0 !important ». Sans egaler ce poids, la reserve est ignoree. */ /* min-height : le contenu mesure 316 px auxquels s'ajoute la reserve de 110 px pour le menu. En dessous de 520 px, le bouton toucherait le bord sur un ecran peu haut. max-height : au-dela, la banniere ne fait plus que du vide et repousse le contenu sans rien apporter. */ /* La reserve suit la HAUTEUR REELLE de la barre, qui depend de la taille du logo : 58 px de logo font une barre de 118, 66 px en font une de 126. Avec l'ancienne reserve de 110 px, le fil d'actualite passait sous le menu. */ .ccit-banniere-accueil{height:50vh;min-height:520px;max-height:680px; padding-top:126px !important;} @media (min-width:1400px){ .ccit-banniere-accueil{padding-top:134px !important;} } @media (max-width:991px){ /* max-height:none est INDISPENSABLE : sans lui, le plafond de 660 px pose plus haut s'applique encore, alors que la banniere passe en hauteur libre et empile le texte puis le fil. La section etant en « overflow:hidden », le bas du fil etait purement et simplement coupe — 77 px, soit ses trois liens de rubrique. */ .ccit-banniere-accueil{height:auto;min-height:0;max-height:none; padding:3.5rem 0 3rem !important;} } /* Le theme fixe h1 a 4,1rem — taille prevue pour un titre court en pleine largeur. La promesse tenait auparavant dans une colonne etroite, a cote de l'image, d'ou une echelle reduite. La colonne s'etend maintenant sur les deux tiers de la page : le titre peut retrouver de l'ampleur. */ /* Plancher en PIXELS et non en rem : le theme reduit la taille de base a 12 px sur telephone, ou « 2rem » ne ferait plus que 24 px. Echelle abaissee : a 47 px, la promesse ecrasait le reste de la banniere et poussait le fil d'actualite au second plan. 40 px la laissent dominer sans l'aplatir. PIEGE DU « vw » SEUL, corrige le 7 aout 2026. Le terme central valait 2,8vw : il suit la largeur de l'ecran, si bien que le titre RETRECISSAIT a mesure que la place manquait. Sur tablette en portrait — 768 px — 2,8vw ne fait que 21 px, le plancher de 25 px prenait la main, et la promesse d'accueil se retrouvait a 1,5 fois le corps de texte au lieu de 2,6 sur grand ecran. Elle etait bien affichee, mais ne se lisait plus comme un titre : R. Van de Sande a signale qu'elle « n'apparaissait pas ». Le terme central combine desormais une part FIXE et une part variable. La part fixe est en pixels, pour la meme raison que le plancher. Rendu : 30 px sur telephone, 36 px sur tablette portrait, et toujours 41,6 px des 1200 px — la taille reduite demandee sur grand ecran ne bouge pas. */ .ccit-banniere-accueil h1{font-size:clamp(30px,22px + 1.8vw,2.6rem) !important; line-height:1.14;text-wrap:balance;} .ccit-banniere-accueil p{max-width:52ch;} /* Le theme donne 45 px a ce h3, soit presque la taille du h1 de la banniere : deux titres de meme poids se disputaient le regard. Meme correction que ci-dessus : 24 px sur telephone, 28 px sur tablette portrait, 31,2 px au-dela de 1200 px. */ #presentation h3{font-size:clamp(24px,18px + 1.35vw,1.95rem) !important; line-height:1.25;text-wrap:balance;} /* La largeur maximale du titre n'a de sens qu'a partir du moment ou la colonne est large : sur telephone, elle le repliait inutilement tot. 26ch et non 16ch : a 16, le titre tenait sur 350 px dans une colonne qui en fait 712 et se cassait en trois lignes sans raison. */ @media (min-width:992px){ .ccit-banniere-accueil h1{max-width:26ch;} } /* ------------------------------------------------------------------ ENCHAINEMENT BANNIERE -> LETTRE D'INFORMATION -> PRESENTATION Le theme applique 110 px de marge en haut ET en bas de chaque section : entre deux sections, cela fait 220 px de vide. Ces trois blocs se suivent et se repondent, ils n'ont pas besoin d'un tel intervalle. ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ LARGEUR DE LA PAGE Le theme plafonnait « .container » a 1220 px pendant que la barre de menu, elle, occupait toute la fenetre. Sur un ecran de 1425 px, le contenu s'arretait donc 103 px avant le bord de chaque cote, sous un menu qui allait d'un bord a l'autre : d'ou une impression de contenu comprime. Les deux partagent maintenant la meme regle — 45 px de retrait, plafonnes a 1600 px — et leurs bords tombent exactement au meme endroit. Le plafond evite qu'un tres grand ecran n'etire les lignes a l'infini. Sans effet sur les pages de contenu (Services, AEO, Formations…) : elles ont leur propre largeur de lecture de 820 px, definie dans contenu/lib/page.php. ------------------------------------------------------------------ */ @media (min-width:992px){ .container{max-width:1600px !important; padding-left:45px !important;padding-right:45px !important;} /* 30 px et non 45 : dans l'en-tete, les colonnes sont filles DIRECTES du conteneur, sans « row » pour annuler leur retrait de 15 px. Le logo tombait donc 15 px plus a droite que le titre. 30 + 15 = 45, la meme ligne que le contenu. Le menu y gagne au passage 30 px, qui lui manquaient sur les ecrans autour de 1300 px. */ header .container-fluid{max-width:1600px;margin-left:auto;margin-right:auto; padding-left:30px;padding-right:30px;} } /* La page est plus large, mais une ligne de texte ne doit pas s'etirer pour autant : au-dela de 75 caracteres environ, l'oeil peine a retrouver le debut de la ligne suivante. Sans ce plafond, l'elargissement portait certains paragraphes de la page Services a 157 caracteres par ligne. Le plafond ne fait que LIMITER : il n'elargit jamais un paragraphe deja plus etroit, et laisse donc intactes les colonnes et les cartes. La seconde regle rend leurs marges automatiques aux paragraphes centres, que le plafond aurait sinon decales vers la gauche. */ @media (min-width:1200px){ .container p{max-width:75ch;} .container .text-center p, .container .text-md-center p{margin-inline:auto;} } #presentation .col-lg-7 p{max-width:70ch;} /* ------------------------------------------------------------------ TAILLE DU LOGO Le theme le plafonnait a 50 px de haut, dans une barre qui en mesure 110 : il flottait au milieu de beaucoup de vide. Le fichier fait 250 x 119 px, et une version @2x existe — l'agrandir ne degrade donc rien. Deux tailles, parce que la barre est etroite en largeur : chaque pixel de hauteur en coute 2,1 en largeur, pris sur la place du menu. A 1200 px il ne reste que 33 px de jeu, contre 82 a 1425. ------------------------------------------------------------------ */ .navbar-brand img{max-height:58px !important;} @media (min-width:1400px){ .navbar-brand img{max-height:66px !important;} } /* Bouton « Accès entreprises » de la barre du haut : un cadenas, cale sur la taille du selecteur de langue voisin. Le bouton du theme reserve 30 px de marge interne de chaque cote, prevus pour un libelle — ici il n'y a qu'une icone, et 10 px suffisent. */ .ccit-bouton-cadenas{padding:4px 10px !important;line-height:20px;} .ccit-bouton-cadenas i{vertical-align:middle;} /* Le mot n'apparait qu'a partir de 992 px. En dessous, il faisait passer la barre du haut sur DEUX rangees — 132 px au lieu de 108 — en repoussant les boutons sous le logo. Sur telephone, le cadenas seul suffit : le lien en toutes lettres reste dans le pied de page, et l'etiquette du bouton l'annonce aux lecteurs d'ecran. */ .ccit-cadenas-mot{display:none;} @media (min-width:992px){ .ccit-cadenas-mot{display:inline;margin-left:.4rem;vertical-align:middle; font-size:13px;font-weight:600;letter-spacing:.02em;} } /* Menu resserre entre 992 et 1400 px. Dix rubriques a 20 px de marge de chaque cote font 400 px d'espacement a elles seules. En dessous de ~1400 px, la barre n'y suffisait plus et le bouton FR passait hors de l'ecran, sans barre de defilement pour le signaler : il devenait simplement invisible (49 px coupes a 1265 px). 8 px au lieu de 20 rendent 240 px, ce qui suffit de 1200 a 1400 px pour loger a la fois le menu, le bouton « Entreprises » avec son cadenas et le selecteur de langue. Au-dela, l'espacement d'origine reprend : la correction ne se voit que la ou elle est necessaire. En dessous de 1200 px, aucun espacement n'aurait suffi — le menu s'y replie desormais en bouton deroulant (navbar-expand-xl dans partials/entete.php). */ @media (min-width:1200px) and (max-width:1399.98px){ /* 7 px : le logo agrandi a repris 17 px de largeur, et il en manquait 6. */ .navbar-nav .nav-link{padding-left:7px !important;padding-right:7px !important;} } /* Au-dela de 1400 px, la barre respire mais pas au point de reprendre les 20 px d'origine : le conteneur etant plafonne a 1600 px, la place cesse d'augmenter avec l'ecran. Mesure a 1425 px avec 20 px : 4 px de trop. */ @media (min-width:1400px){ .navbar-nav .nav-link{padding-left:14px !important;padding-right:14px !important;} } #presentation{padding-top:3rem !important;} #en-action{padding-top:3rem !important;} @media (max-width:991px){ #presentation{padding-top:2.25rem !important;} #en-action{padding-top:2.25rem !important;} } /* ------------------------------------------------------------------ PRESENTATION ET LETTRE D'INFORMATION, COTE A COTE Le texte a gauche, l'encadre d'inscription a droite — dans le prolongement du fil d'actualite de la banniere : tout ce qui appelle une action du visiteur reste du meme cote. ------------------------------------------------------------------ */ .ccit-intro-duo{gap:0;} .ccit-nl-carte{background:#f1f4fa;border:2px solid #c3ccdf;border-right:none; padding:1.6rem 1.7rem;} .ccit-nl-chapo{display:block;font-size:.7rem;text-transform:uppercase; letter-spacing:.17em;font-weight:700;color:#a8762c;} .ccit-nl-carte h3{font-size:max(17px,1.15rem) !important;font-weight:700;color:#13192e; margin:.35rem 0 .6rem;line-height:1.3;letter-spacing:-.01em;} .ccit-nl-intro{font-size:max(13px,.88rem);line-height:1.6;color:#545e75;margin:0 0 1.1rem;} .ccit-nl-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0;} /* La colonne est etroite : le champ et le bouton s'empilent des que l'un des deux descend sous sa largeur minimale, plutot que de se comprimer. */ .ccit-nl-ligne{display:flex;flex-wrap:wrap;gap:.6rem;} .ccit-nl-ligne input[type=email]{flex:1 1 180px;min-width:0;padding:.75rem 1rem; border:1px solid #c3ccdf;background:#fff;font-size:max(14px,.95rem);color:#13192e;} .ccit-nl-ligne input[type=email]:focus{outline:2px solid #3a5ba6;outline-offset:1px; border-color:#3a5ba6;} .ccit-nl-ligne button{flex:0 0 auto;} .ccit-nl-consent{display:flex;gap:.6rem;align-items:flex-start;margin:.9rem 0 0; font-size:max(12px,.82rem);line-height:1.5;color:#545e75;text-align:left;cursor:pointer;} .ccit-nl-consent input{margin-top:.2rem;flex:none;width:auto;} .ccit-nl-note{margin:.75rem 0 0;font-size:max(11px,.78rem);line-height:1.5; color:#545e75;text-align:left;} @media (max-width:991px){ /* Empilee, la carte a besoin d'air : sans cela elle colle aux boutons « Decouvrir nos services » et « Rencontrer l'equipe ». */ .ccit-intro-cote{margin-top:2.5rem;} } @media (max-width:575px){ .ccit-nl-ligne button{width:100%;} } /* ------------------------------------------------------------------ FIL D'ACTUALITE DE LA BANNIERE Veille, evenements et publications defilent ensemble dans un cadre, en haut a droite. Voir contenu/accueil-fil.php pour le principe de la boucle. ------------------------------------------------------------------ */ .ccit-fil{display:flex;flex-direction:column;background:#fff; border:2px solid #c3ccdf;border-right:none;padding:1.4rem 1.5rem;} .ccit-fil-tete{margin-bottom:1rem;} .ccit-fil-chapo{display:block;font-size:.7rem;text-transform:uppercase; letter-spacing:.17em;font-weight:700;color:#a8762c;} .ccit-fil h2{font-size:max(15px,1rem) !important;font-weight:700;color:#13192e; margin:.35rem 0 0;line-height:1.3;letter-spacing:-.01em;} /* Le cadre coupe ce qui deborde : c'est lui qui donne l'illusion du defilement. Les degrades du haut et du bas evitent que les entrees n'apparaissent et ne disparaissent d'un coup, en bord franc. */ /* La fenetre doit rester PLUS COURTE qu'un exemplaire de la liste, sinon la boucle laisse apparaitre un blanc. Trois entrees au minimum (garanti par accueil-fil.php) sur 78 px chacune font 234 px : 220 laissent la marge. */ .ccit-fil-cadre{position:relative;height:220px;overflow:hidden; border-top:1px solid #d5dcea;border-bottom:1px solid #d5dcea;} .ccit-fil-cadre::before,.ccit-fil-cadre::after{content:"";position:absolute; left:0;right:0;height:26px;pointer-events:none;z-index:2;} .ccit-fil-cadre::before{top:0;background:linear-gradient(#fff,rgba(255,255,255,0));} .ccit-fil-cadre::after{bottom:0;background:linear-gradient(rgba(255,255,255,0),#fff);} .ccit-fil-piste{animation:ccit-fil-defile var(--ccit-fil-duree,45s) linear infinite;} .ccit-fil-cadre:hover .ccit-fil-piste, .ccit-fil-cadre:focus-within .ccit-fil-piste{animation-play-state:paused;} @keyframes ccit-fil-defile{ from{transform:translateY(0);} to{transform:translateY(-50%);} } .ccit-fil-liste{list-style:none;margin:0;padding:0;} /* min-height : garantit la hauteur d'un exemplaire de la liste, meme si tous les titres tiennent sur une ligne. Voir le calcul sur .ccit-fil-cadre. */ .ccit-fil-liste li{border-bottom:1px solid #eef1f7;min-height:78px;} .ccit-fil-liste a{display:block;padding:.75rem 0;text-decoration:none;} .ccit-fil-liste a:hover .ccit-fil-titre{color:#3a5ba6;text-decoration:underline;} .ccit-fil-etiquette{display:inline-block;font-size:.62rem;font-weight:700; text-transform:uppercase;letter-spacing:.09em;padding:.1rem .4rem; background:rgba(58,91,166,.1);color:#3a5ba6;vertical-align:middle;} .ccit-fil-etiquette.e-evenements{background:rgba(168,118,44,.13);color:#8a6416;} .ccit-fil-etiquette.e-publications{background:rgba(63,143,90,.13);color:#2e7d43;} .ccit-fil-avenir{display:inline-block;margin-left:.3rem;font-size:.62rem; font-weight:700;text-transform:uppercase;letter-spacing:.09em; padding:.1rem .4rem;background:#13192e;color:#fff;vertical-align:middle;} .ccit-fil-titre{display:block;margin-top:.35rem;font-size:max(13px,.86rem); font-weight:600;color:#13192e;line-height:1.4;} .ccit-fil-date{display:block;margin-top:.15rem;font-size:max(11px,.72rem);color:#545e75;} .ccit-fil-pied{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.9rem;} .ccit-fil-pied a{font-size:max(12px,.78rem);font-weight:600;color:#3a5ba6; text-decoration:none;} .ccit-fil-pied a:hover{text-decoration:underline;} /* Un visiteur qui a demande a limiter les animations obtient une liste immobile, qu'il fait defiler lui-meme. */ @media (prefers-reduced-motion:reduce){ .ccit-fil-piste{animation:none;} .ccit-fil-cadre{overflow-y:auto;} .ccit-fil-piste .ccit-fil-liste[aria-hidden="true"]{display:none;} } /* Sous la banniere en deux colonnes, le cadre passe sous le texte : on lui laisse un peu d'air et on raccourcit la fenetre de defilement. */ @media (max-width:991px){ .ccit-fil{margin-top:2.5rem;} .ccit-fil-cadre{height:210px;} } /* ------------------------------------------------------------------ PHOTO DE LA PAGE D'ACCUEIL Descendue sous la presentation : en banniere, elle occupait la moitie de l'ecran et disputait l'attention au titre. ------------------------------------------------------------------ */ .ccit-photo-accueil{margin:0;} .ccit-photo-accueil img{display:block;width:100%;height:auto;} /* max(13px, …) : meme raison que le titre — a 12 px de taille de base sur telephone, « .85rem » tombait a 10 px, illisible. */ .ccit-photo-accueil figcaption{margin-top:.9rem;font-size:max(13px,.85rem); line-height:1.55;color:#545e75;text-align:center;text-wrap:balance;} /* Les trois dimensions de l'accompagnement, en tete de la page Services. Trois colonnes egales, separees par un filet vertical qui disparait quand elles s'empilent sur petit ecran. */ .ccit-triade > div{border-left:2px solid rgba(0,0,0,.12);padding-left:1rem;} .ccit-triade span{display:block;font-size:.72rem;text-transform:uppercase; letter-spacing:.14em;font-weight:700;margin-bottom:.3rem;} .ccit-triade p{margin:0;font-size:.92rem;line-height:1.6;} @media (max-width:767px){ .ccit-triade > div{margin-bottom:1rem;} .ccit-triade > div:last-child{margin-bottom:0;} } /* ------------------------------------------------------------------ SOMMAIRE CLIQUABLE DE LA PAGE SERVICES ------------------------------------------------------------------ */ .ccit-sommaire ul{list-style:none;padding:0;margin:0;} .ccit-sommaire li{margin:0;} .ccit-sommaire a{display:block;padding:.42rem 0 .42rem .95rem;position:relative; color:inherit;text-decoration:none;line-height:1.45; border-left:2px solid transparent;transition:border-color .2s ease,color .2s ease;} .ccit-sommaire a:hover, .ccit-sommaire a:focus-visible{border-left-color:currentColor;color:#232323;} .ccit-sommaire a:focus-visible{outline:2px solid currentColor;outline-offset:2px;} /* L'en-tete est fixe : sans cette reserve, l'ancre amene le titre du service DERRIERE la barre de navigation. Celle-ci mesure 110 px une fois collee en haut ; 130 px laissent en plus une respiration au-dessus du titre. */ .stack-box .stack-item{scroll-margin-top:130px;} /* Defilement doux pour les sauts d'ancre, sauf si l'utilisateur a demande a son systeme de limiter les animations. */ @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} } /* ------------------------------------------------------------------ LISTES « LIBELLE - DESCRIPTION » (services 05 et 06) La classe list-style-02 du theme met chaque
  • en display:flex. Prevue pour "icone + texte court", elle traite alors le libelle en gras et sa description comme DEUX colonnes distinctes : le texte se disloquait. Ces listes ont donc leur propre presentation, en flux normal, ou le libelle reste dans la phrase. ------------------------------------------------------------------ */ /* Titres de services : plusieurs intitules depassent la largeur de la colonne et passent sur deux lignes - inevitable en francais. text-wrap:balance repartit alors les mots equitablement au lieu de laisser un mot seul sur la seconde ligne. L'interlettrage tres serre du theme (-4px), concu pour de grands titres courts, est un peu relache pour rester lisible. */ .stack-box .stack-item h3{text-wrap:balance;letter-spacing:-1.5px;} .ccit-defs{list-style:none;padding:0;margin:0;} .ccit-defs li{display:block;position:relative;padding-left:1.1rem;margin-bottom:.75rem; line-height:1.65;} .ccit-defs li:last-child{margin-bottom:0;} .ccit-defs li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px; background:currentColor;opacity:.4;} .ccit-defs li b{font-weight:600;} /* L'interet du regime, distingue de sa definition : c'est ce que le lecteur cherche vraiment, mais il ne doit pas concurrencer le nom du regime. */ .ccit-defs .ccit-gain{display:block;margin-top:.25rem;font-size:.93em;opacity:.85;} .ccit-defs .ccit-gain::before{content:"\2192\00a0";opacity:.6;} /* Variante numerotee : le numero vient du compteur CSS, plus du texte en dur - il reste ainsi solidaire de la puce et ne peut pas se detacher. */ .ccit-etapes{list-style:none;padding:0;margin:0;counter-reset:ccit-etape;} .ccit-etapes li{display:block;position:relative;padding-left:2.1rem;margin-bottom:.75rem; line-height:1.65;counter-increment:ccit-etape;} .ccit-etapes li:last-child{margin-bottom:0;} .ccit-etapes li::before{content:counter(ccit-etape);position:absolute;left:0;top:.1em; width:1.45rem;height:1.45rem;display:grid;place-items:center;background:#232323; color:#fff;font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;} .ccit-etapes li b{font-weight:600;} /* Bootstrap declare .h-100{height:100% !important} : il faut le meme poids pour le neutraliser, sans quoi la colonne reste figee a son plancher. */ .stack-box .stack-item .cover-background.h-100{height:auto !important;} .stack-box .stack-item .cover-background{align-self:stretch;min-height:380px;} h1 { font-size: 4.1rem; } .client-box a img { filter: grayscale(100%); } .client-box a img:hover { filter: unset; } .bg-very-light-gray { background-color: rgba(58, 91, 166, 0.1); } .bg-solitude-blue { background-color: #3a5ba6; } .sticky .header-transparent .header-button .btn { background-color: #3a5ba6 !important; border-color: #3a5ba6 !important; } .text-left li { text-align:left !important; } header .header-button .btn.btn-switch-text.btn-medium > span { padding: 5px 10px; } .header-button { margin:3px; } @media (max-width: 1080px) { .stack-box{height:unset;} } /* ================================================================== TÉLÉPHONE ET TABLETTE — corrigé le 10 août 2026 ================================================================== */ /* 1. TAILLE DU TEXTE DES PAGES ÉDITORIALES ----------------------------------------------------------------- css/responsive.min.css descend la police de base à 14px sous 992px, puis à 12px sous 768px. Le thème n'en souffre pas : son propre texte est fixé en pixels (body{font-size:16px}, footer 13px, menu 16px). Mais TOUTE la feuille éditoriale — 172 déclarations réparties sur neuf fichiers — est écrite en rem, donc relative à cette base. Sur un téléphone, les paragraphes tombaient à 12,6px, les étiquettes à 8,4px. Illisible, et c'est ce que Raphaël a signalé sur Services et Formations. Réécrire 172 règles en pixels aurait doublé la feuille et créé un piège d'entretien. On rétablit donc la base, mais UNIQUEMENT sur les pages bâties sur .ccit-page : la classe est posée sur par partials/entete.php, à partir du marqueur que pose ccit_page_debut(). La page d'accueil, qui est du pur thème et n'a pas ce défaut, n'est pas touchée — la déplacer aurait été une régression. */ @media (max-width: 991px) { html.ccit-editoriale { font-size: 16px; } } /* 2. SURFACE TACTILE DES BOUTONS DU HAUT — RETIRÉ le 10 août 2026 ----------------------------------------------------------------- Un calque ::after de 44x44 avait été posé sur les boutons du haut et sur l'ouverture du menu, pour élargir la zone tactile sans changer la mise en page. RETIRÉ après le second essai de Raphaël : le menu mobile ne fonctionnait toujours pas, et cette règle était la seule modification récente touchant au comportement des boutons. Un calque posé par-dessus un bouton peut changer ce qui reçoit le doigt selon le navigateur. Faute de pouvoir la vérifier sur un vrai téléphone, on ne la garde pas : une correction non vérifiable qui coïncide avec une panne signalée doit sortir. À reprendre autrement si le besoin se confirme — par du padding, qui agrandit le bouton lui-même et ne superpose rien. */