/* =========================================================================
   Websco - polish.css
   Passe de polissage graphique du 06/08/2026.
   Feuille ADDITIVE : elle se charge en dernier et ne modifie aucun fichier
   du theme. Pour tout annuler, retirer la balise <link> des pages.

   Reperes de couleur
   ------------------
   Encre        #16202c   texte courant
   Bleu Websco  #002654   structure, titres, liens, boutons
   Bleu profond #001b3d   fonds sombres
   Rouge        #ce1126   accent, employe avec parcimonie
   Trait        #e2e8f0   filets et bordures
   Gris texte   #5b6675   textes secondaires
   Fond clair   #f4f7fb   aplats de section
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Base : lisibilite et rythme vertical
   ------------------------------------------------------------------------- */

body {
	color: #16202c;
	font-size: 16px;
	line-height: 1.72;
	/* Le script de fin de page applique un -webkit-text-stroke qui epaissit
	   et brouille le texte sur Windows et Safari. On le neutralise. */
	-webkit-text-stroke: 0 !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p { margin-bottom: 22px; }

h1, h2, h3, h4, h5, h6 {
	color: #16202c;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

h1 { font-size: 34px; }
h2 { font-size: 27px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }

a { transition: color .18s ease; }
a:hover { color: #ce1126; }

strong, b { font-weight: 700; color: #101a25; }

/* Focus clavier visible sur tous les elements interactifs */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.button:focus-visible {
	outline: 2px solid #ce1126;
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *:before, *:after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}


/* -------------------------------------------------------------------------
   2. Sections : plus d'air
   ------------------------------------------------------------------------- */

.content-wrap { padding: 78px 0; }
.content-wrap.notoppadding { padding-top: 0; }

.heading-block { margin-bottom: 42px; }

/* Titres de section : capitales retirees, filet bleu court en signature,
   amorce rouge reprise du bandeau tricolore du logo. */
.heading-block h1,
.heading-block h2,
.heading-block h3,
.heading-block h4 {
	text-transform: none;
	letter-spacing: -0.015em;
	color: #002654;
	font-weight: 700;
}

.heading-block h2 { font-size: 30px; }
.heading-block h3 { font-size: 25px; }

/* Le theme pose deja un trait sous le bloc de titre : on lui donne
   l'amorce rouge du drapeau plutot que d'en ajouter un second. */
.heading-block:after {
	width: 56px;
	height: 3px;
	border-top: 0;
	margin-top: 26px;
	background: linear-gradient(to right, #ce1126 0, #ce1126 14px, #002654 14px, #002654 100%);
}

.center .heading-block:after,
.heading-block.center:after,
.heading-block.title-center:after { margin: 26px auto 0; }

.heading-block > span:not(.before-heading) {
	margin-top: 16px;
	color: #5b6675;
	font-size: 17px;
	font-weight: 400;
}

/* Titres a filet : filets ramenes a un cheveu */
.fancy-title.title-double-border:before { border-top: 1px solid #e2e8f0; }
.fancy-title.title-dotted-border { background: none !important; }
.fancy-title.title-dotted-border:before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 50%;
	border-top: 1px solid #e2e8f0;
}
.fancy-title h1, .fancy-title h2, .fancy-title h3 {
	color: #002654;
	letter-spacing: -0.01em;
}


/* -------------------------------------------------------------------------
   3. En-tete de page interieure
   ------------------------------------------------------------------------- */

#page-title {
	padding: 64px 0 58px;
	background-color: #f4f7fb;
	border-bottom: 1px solid #e2e8f0;
}

#page-title h1 {
	text-transform: none;
	letter-spacing: -0.02em;
	font-size: 34px;
	line-height: 1.15;
	color: #002654;
	font-weight: 700;
}

#page-title span {
	margin-top: 14px;
	color: #5b6675;
	font-size: 17px;
	font-weight: 400;
}

#page-title .breadcrumb {
	background: none;
	font-size: 13px;
	color: #8a94a3;
}


/* -------------------------------------------------------------------------
   4. Boutons
   ------------------------------------------------------------------------- */

.button {
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	font-weight: 700;
	height: 46px;
	line-height: 46px;
	padding: 0 26px;
	border-radius: 4px;
	text-shadow: none !important;
	box-shadow: 0 1px 2px rgba(0, 38, 84, .12);
}

.button-rounded { border-radius: 4px; }

.button:hover { background-color: #001b3d; }
.button.button-dark { background-color: #ce1126; }
.button.button-dark:hover { background-color: #a50e1e; }

.button-border {
	border-width: 1px;
	line-height: 44px;
	box-shadow: none;
}

.button-large { height: 52px; line-height: 52px; font-size: 16px; padding: 0 32px; }
.button-border.button-large { line-height: 50px; }


/* -------------------------------------------------------------------------
   5. Blocs de services
   ------------------------------------------------------------------------- */

/* Les titres etaient en capitales rouges interlettrees : trop de bruit
   quand il y en a neuf a la suite. Bleu, bas de casse, plus lisibles. */
.feature-box h3 {
	text-transform: none;
	letter-spacing: -0.01em;
	font-size: 18px;
	font-weight: 700;
	color: #002654;
	line-height: 1.35;
}

.feature-box p {
	color: #5b6675;
	margin-top: 10px;
	font-size: 15.5px;
	line-height: 1.65;
}

.feature-box { margin-bottom: 34px; }

.feature-box.fbox-border .fbox-icon {
	border-color: #dbe3ec;
	transition: border-color .2s ease, background-color .2s ease;
}

.feature-box.fbox-border:hover .fbox-icon {
	border-color: #002654;
	background-color: #002654;
}

.feature-box.fbox-border:hover .fbox-icon i { color: #fff; }

.feature-box .fbox-icon i { color: #002654; }

.feature-box.fbox-small { padding-left: 62px; }
.feature-box.fbox-small.fbox-right { padding-right: 62px; }


/* -------------------------------------------------------------------------
   6. Blocs sombres : un seul bleu, plus de photo etiree
   ------------------------------------------------------------------------- */

/* Les fonds jpg etaient poses en background-size: 100% 100%, donc deformes,
   et differents d'un bloc a l'autre. Un aplat bleu unique les reunit. */
.promo.promo-dark,
.promo.promo-flat.promo-full {
	background-image: none !important;
	background-color: #002654 !important;
	background: linear-gradient(160deg, #002654 0%, #001b3d 100%) !important;
	border-radius: 0;
	text-shadow: none !important;
}

.promo.promo-dark h3,
.promo.promo-flat.promo-full h3 {
	color: #fff;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.promo.promo-dark > .container > span,
.promo.promo-flat.promo-full > .container > span {
	color: rgba(255, 255, 255, .8);
	font-size: 16px;
	margin-top: 10px;
}

.promo.promo-dark p { color: rgba(255, 255, 255, .88); }

.promo.promo-dark strong,
.promo.promo-flat.promo-full strong { color: #fff; }

.promo.promo-dark .button.button-white,
.promo.promo-flat.promo-full .button.button-white {
	background-color: #fff;
	color: #002654;
}

/* Les logos AFNIC et France Num montaient a 264 px de haut au milieu du
   texte : ramenes a la taille d'un label. */
.promo img[alt*="AFNIC"],
.promo img[alt*="France Num"] {
	max-height: 88px !important;
	margin: 6px 0 20px 30px !important;
}


/* -------------------------------------------------------------------------
   7. Tarifs
   ------------------------------------------------------------------------- */

.pricing--tenzin .pricing--item {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-top: 3px solid #002654;
	border-radius: 6px;
	padding: 34px 30px 30px;
	box-shadow: 0 1px 2px rgba(16, 26, 37, .04);
	transition: box-shadow .22s ease, transform .22s ease;
}

.pricing--tenzin .pricing--item:hover {
	background: #fff;
	border-color: #cdd8e4;
	border-top-color: #002654;
	box-shadow: 0 14px 32px -18px rgba(0, 38, 84, .45);
	transform: translateY(-2px);
}

.pricing--tenzin .pricing--title {
	font-size: 21px;
	font-weight: 700;
	color: #002654;
	letter-spacing: -0.01em;
	margin: 0 0 4px;
}

.pricing--tenzin .pricing--price {
	font-size: 40px;
	font-weight: 700;
	color: #16202c;
	letter-spacing: -0.03em;
	border-top: 0;
	padding: 14px 0 6px;
}

.pricing--item:hover .pricing--title { font-weight: 700; }

.pricing--tenzin .pricing--currency {
	font-size: .45em;
	vertical-align: super;
	color: #5b6675;
	font-weight: 600;
}

.pricing--tenzin .pricing--sentence {
	color: #5b6675;
	font-size: 15.5px;
	line-height: 1.6;
	padding: 6px 0 18px;
	border-bottom: 1px solid #eef2f7;
	margin-bottom: 18px;
}

/* La liste etait alignee a droite et en gris pale : illisible en diagonale. */
.pricing--tenzin .pricing--feature-list {
	text-align: left;
	color: #16202c;
	font-size: 15.5px;
	padding: 0 0 26px;
}

.pricing--tenzin .pricing--feature {
	position: relative;
	padding: 7px 0 7px 26px;
	line-height: 1.5;
}

.pricing--tenzin .pricing--feature:before {
	content: "";
	position: absolute;
	left: 2px;
	top: 15px;
	width: 11px;
	height: 6px;
	border-left: 2px solid #002654;
	border-bottom: 2px solid #002654;
	transform: rotate(-45deg);
}

.pricing--tenzin .pricing--item .button { align-self: flex-start; }



.pricing--tenzin .pricing--price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.pricing--tenzin .pricing--unit {
	font-size: 15px;
	font-weight: 600;
	color: #5b6675;
	letter-spacing: 0;
	margin-left: 2px;
}

.pricing--tenzin .pricing--currency {
	font-size: .58em;
	vertical-align: baseline;
	color: #16202c;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   8. Tableau comparatif
   ------------------------------------------------------------------------- */

.table-comparison { border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; }

.table-comparison thead th {
	background: #f4f7fb;
	border-bottom: 1px solid #e2e8f0 !important;
	padding: 16px 14px !important;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #002654 !important;
	text-align: center;
}

.table-comparison thead th:first-child { text-align: left; }
.table-comparison thead th small { font-weight: 400; color: #5b6675; font-size: 13px; }

.table-comparison tbody td {
	padding: 14px !important;
	border-top: 1px solid #eef2f7 !important;
	text-align: center;
	color: #16202c;
	vertical-align: middle !important;
}

.table-comparison tbody td:first-child {
	text-align: left;
	font-weight: 600;
	color: #16202c;
}

.table-comparison tbody tr:hover td { background: #f8fbff; }
.table-comparison tfoot td { border: 0 !important; }


/* -------------------------------------------------------------------------
   9. Bandeau d'accueil
   ------------------------------------------------------------------------- */

/* Voile bleu pour que le texte reste lisible quelle que soit la photo tiree
   au sort. Le voile se place sous le contenu, jamais dessus. */
#slider:after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(180deg, rgba(0, 22, 46, .58) 0%, rgba(0, 22, 46, .34) 55%, rgba(0, 22, 46, .62) 100%);
	z-index: 1;
	pointer-events: none;
}

/* Le theme place le contenu du bandeau dans un conteneur en position fixe.
   Consequence : il ne s'arrete pas au bas du bandeau, il continue de flotter
   au-dessus de la page pendant le defilement, et il intercepte les clics sur
   les blocs qui suivent. En position absolue il est borne par #slider, qui
   porte deja overflow: hidden, et il defile avec la page. */
#slider .slider-parallax-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	-webkit-transform: none !important;
	transform: none !important;
}

#slider .heading-block h2 {
	text-transform: uppercase;
	font-size: 46px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
	text-shadow: 0 1px 24px rgba(0, 12, 26, .45);
}

#slider .heading-block h3 {
	font-size: 21px;
	font-weight: 400;
	line-height: 1.4;
	color: rgba(255, 255, 255, .94);
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-shadow: 0 1px 18px rgba(0, 12, 26, .45);
}

/* Les trois labels sont des PNG a texte sombre : sans plaque blanche ils
   se perdent dans la photo. */
#slider .heading-block img[src*="labels"] {
	background: #fff;
	padding: 10px 18px;
	border-radius: 6px;
	box-shadow: 0 6px 24px -10px rgba(0, 12, 26, .6);
}

/* Le theme pose un trait sous chaque bloc de titre : inutile sur la photo. */
#slider .heading-block:after { display: none; }

#slider .heading-block h5 {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .78);
	margin-top: 22px;
}


/* -------------------------------------------------------------------------
   10. Pied de page
   ------------------------------------------------------------------------- */

#footer {
	background-image: none !important;
	background: linear-gradient(160deg, #002654 0%, #001428 100%) !important;
	border-top: 3px solid #ce1126;
}

#footer p { color: rgba(255, 255, 255, .78); line-height: 1.7; }

#footer .entry-meta li {
	float: none;
	font-size: 14.5px;
	line-height: 1.7;
	font-style: normal;
	color: rgba(255, 255, 255, .78);
}

#footer .entry-meta li:before { display: none; }

#footer h4 a { color: #fff; font-weight: 700; }
#footer h4 a:hover { color: #fff; }

#footer .line { border-color: rgba(255, 255, 255, .16) !important; }

#footer .counter {
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 30px;
	color: #fff;
	letter-spacing: -0.02em;
}

#footer .counter + h5 {
	color: rgba(255, 255, 255, .62);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: .03em;
	text-transform: none;
}

#copyrights {
	background: #001222;
	color: rgba(255, 255, 255, .72);
	font-size: 13.5px;
	padding: 26px 0;
}

#copyrights a { color: rgba(255, 255, 255, .82); }
#copyrights a:hover { color: #fff; }

#footer .subscribe-widget .form-control {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .2);
	color: #fff;
	height: 44px;
	border-radius: 0 4px 4px 0;
	box-shadow: none;
}

#footer .subscribe-widget .form-control::placeholder { color: rgba(255, 255, 255, .55); }

#footer .subscribe-widget .input-group-addon {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .2);
	border-right: 0;
	color: #fff;
	border-radius: 4px 0 0 4px;
}


/* -------------------------------------------------------------------------
   11. En-tete de navigation
   ------------------------------------------------------------------------- */

#header.not-dark,
#header.sticky-header #header-wrap {
	box-shadow: 0 1px 0 #e8edf3;
}

#primary-menu ul li > a {
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
}

#primary-menu ul li > a div { text-transform: none; }


/* -------------------------------------------------------------------------
   12. Details
   ------------------------------------------------------------------------- */

/* Accordeon de la FAQ */
.faqs .toggle {
	border-bottom: 1px solid #eef2f7;
	padding: 6px 0 14px;
}

.faqs .togglet {
	font-family: 'Raleway', sans-serif;
	font-size: 16.5px;
	font-weight: 700;
	color: #002654;
	line-height: 1.45;
}

.faqs .togglec {
	color: #16202c;
	line-height: 1.72;
	padding-top: 8px;
}

/* Filtres de portfolio */
.portfolio-filter li a {
	border-color: #e2e8f0;
	color: #5b6675;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.portfolio-filter li.activeFilter a { background-color: #002654; color: #fff; }

/* Blocs numerotes de la page d'accueil */
.col-padding h3.uppercase { letter-spacing: 0; font-size: 23px; }
.col-padding h6.uppercase { letter-spacing: .06em; opacity: .9; }

/* Images de contenu */
#content img { border-radius: 4px; }
#content .fbox-icon img,
#logo img,
#footer img { border-radius: 0; }


/* -------------------------------------------------------------------------
   13. Telephone
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {

	/* Sur une colonne etroite, un bloc aligne a droite se lit mal :
	   tout repasse a gauche, icone comprise. */
	.feature-box.fbox-right {
		text-align: left;
		padding: 0 0 0 80px;
	}

	.feature-box.fbox-right .fbox-icon {
		left: 0;
		right: auto;
	}

	.content-wrap { padding: 48px 0; }

	#page-title { padding: 38px 0 34px; }
	#page-title h1 { font-size: 27px; }
	#page-title span { font-size: 16px; }

	.heading-block h2 { font-size: 24px; }
	.heading-block h3 { font-size: 21px; }
	.heading-block { margin-bottom: 30px; }

	.promo.promo-dark,
	.promo.promo-flat.promo-full { padding: 34px 22px; }

	.promo.promo-dark h3,
	.promo.promo-flat.promo-full h3 { font-size: 21px; }

	.promo a.button {
		position: static;
		margin: 22px 0 0;
		display: inline-block;
	}

	.pricing--tenzin .pricing--item { margin: 0 0 20px; padding: 26px 22px; }
	.pricing--tenzin .pricing--price { font-size: 34px; }

	.table-comparison tbody td,
	.table-comparison thead th { padding: 11px 8px !important; font-size: 14px; }
}

/* Le texte justifie sans cesure ouvre des lezardes entre les mots,
   tres visible sur telephone. */
.promo span,
.promo p,
.promo div { text-align: left !important; }

.promo p[align="center"],
.promo .center { text-align: center !important; }


/* -------------------------------------------------------------------------
   14. Passe du 06/08 au soir : moins d'angles droits, menu plus lisible
   ------------------------------------------------------------------------- */

/* 14.1 Navigation : la police de menu du theme etait le Lato en 13 px.
   On passe au Raleway des titres, plus grand et plus present. */
#primary-menu ul li > a {
	font-family: 'Raleway', sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: 0;
	padding-left: 16px;
	padding-right: 16px;
}

#primary-menu ul li > a div { font-family: 'Raleway', sans-serif; }

#primary-menu ul li:hover > a,
#primary-menu ul li.current > a { color: #002654; }

/* 14.2 Rayons : tout ce qui est bloc perd ses angles vifs. */
.button,
.button-rounded { border-radius: 6px; }

#content img,
.portfolio-image img,
.iportfolio img { border-radius: 10px; }

#content .fbox-icon img,
#logo img,
#footer img,
.pricing--item img { border-radius: 0; }

.pricing--tenzin .pricing--item { border-radius: 12px; }
.table-comparison { border-radius: 10px; }

.feature-box.fbox-border .fbox-icon,
.feature-box .fbox-icon { border-radius: 50%; }

#footer .subscribe-widget .form-control { border-radius: 0 6px 6px 0; }
#footer .subscribe-widget .input-group-addon { border-radius: 6px 0 0 6px; }

.sm-form-control,
.form-control,
textarea.form-control { border-radius: 6px; }

/* 14.3 Les trois etapes de la page d'accueil formaient un bandeau
   de trois rectangles colles bord a bord. Ils deviennent trois cartes. */
.col_full.common-height {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 0 26px;
	margin-top: 28px;
	margin-bottom: 46px;
}

.col_full.common-height > .col-md-4 {
	float: none;
	width: auto;
	flex: 1 1 260px;
	border-radius: 14px;
	overflow: hidden;
	padding-top: 52px;
	padding-bottom: 52px;
}

.col_full.common-height > .clear { display: none; }

.col_full.common-height .col-padding h3.uppercase {
	font-size: 21px;
	letter-spacing: 0;
	margin-bottom: 24px;
}

/* 14.4 Les bandeaux sombres pleine largeur deviennent des panneaux poses
   dans la page. */
.promo.promo-full,
.promo.promo-flat.promo-full {
	border-radius: 16px !important;
	margin-left: 26px;
	margin-right: 26px;
	width: auto;
}

.promo.promo-dark { border-radius: 12px; }
.promo.promo-border { border-radius: 12px; padding: 26px 30px; }

#page-menu-wrap {
	border-radius: 12px;
	margin: 22px 26px 0;
	width: auto;
}

#page-menu .menu-title {
	float: none;
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.5;
	padding: 4px 0;
}

/* 14.5 L'en-tete de page interieure : un aplat gris a bord franc.
   Un degrade et un coin arrondi en bas suffisent a l'adoucir. */
#page-title {
	background: linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
	border-bottom: 0;
	border-radius: 0 0 18px 18px;
}

@media (max-width: 767px) {
	.col_full.common-height { padding: 0 16px; gap: 14px; margin-top: 18px; margin-bottom: 28px; }
	.col_full.common-height > .col-md-4 { padding-top: 34px; padding-bottom: 34px; }
	.promo.promo-full,
	.promo.promo-flat.promo-full { margin-left: 14px; margin-right: 14px; border-radius: 12px !important; }
	#page-title { border-radius: 0 0 12px 12px; }
	#primary-menu ul li > a { font-size: 16px; }
}

/* 14.6 Le sous-titre du bandeau est devenu le H1 de la page :
   il garde exactement l'allure qu'il avait en H3. */
#slider .heading-block h1.hero-baseline {
	font-size: 21px;
	font-weight: 400;
	line-height: 1.4;
	color: rgba(255, 255, 255, .94);
	max-width: 760px;
	margin: 0 auto;
	letter-spacing: 0;
	text-shadow: 0 1px 18px rgba(0, 12, 26, .45);
}


/* -------------------------------------------------------------------------
   15. Harmonisation du 06/08, second retour
   ------------------------------------------------------------------------- */

/* 15.1 Bandeau d'accueil : la plaque blanche sous les trois labels tirait
   l'oeil plus que le titre. Les logos reposent directement sur la photo. */
#slider .heading-block img[src*="labels"] {
	background: none;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	max-height: 74px;
}

/* 15.2 Le logo AFNIC en tete des pages Offres et Partenariats s'affichait
   a sa taille native et ecrasait le texte a cote. */
#content img[src*="afnic"] { max-height: 190px; width: auto; }

.fancy-title img[src*="afnic"] { max-height: 62px !important; }

/* 15.3 Pied de page : la ligne de contact en bas a droite et la mention de
   copyright etaient trop sombres sur le fond bleu. */
#copyrights,
#copyrights .col_half { color: rgba(255, 255, 255, .82); }

#copyrights a,
#copyrights i { color: rgba(255, 255, 255, .82); }

#copyrights a:hover { color: #fff; }

#copyrights .copyrights-menu a { color: rgba(255, 255, 255, .9); }

#copyrights .middot { color: rgba(255, 255, 255, .45); }

/* 15.4 Colonne de droite du pied de page : l'italique du theme fatigue
   sur trois paragraphes. */
#footer .entry-meta li { font-style: normal !important; }


/* -------------------------------------------------------------------------
   16. Telephone et adresse cliquables (06/08)
   ------------------------------------------------------------------------- */

/* Les liens telephone et mail reprennent la couleur du texte qui les entoure :
   ils sont cliquables sans devenir des liens bleus au milieu d'une phrase. */
.promo h3 a,
.feature-box h3 a,
#copyrights a[href^="tel:"],
#copyrights a[href^="mailto:"] {
	color: inherit;
	transition: opacity .18s ease;
}

.promo h3 a:hover,
.feature-box h3 a:hover {
	color: inherit;
	text-decoration: underline !important;
}

#copyrights a[href^="tel:"]:hover,
#copyrights a[href^="mailto:"]:hover { color: #fff; }

/* Zone de tap confortable sur telephone */
@media (max-width: 767px) {
	.promo h3 a,
	#copyrights a[href^="tel:"],
	#copyrights a[href^="mailto:"] {
		display: inline-block;
		padding: 4px 0;
	}
}